/*
 * NoSpace streamduur
 * - Publisher: rechts onder Wissel camera
 * - Kijker: geïntegreerd in de bestaande groene LIVE-knop
 */

/* De losse badge bestaat alleen nog op de publisherpagina. */
#nospace-stream-duration {
    position: fixed;
    z-index: 1000002;

    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 118px;
    min-height: 35px;
    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    color: #ffffff;
    background: rgba(5, 18, 31, 0.88);

    font-family:
        Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;

    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34);
    pointer-events: none;
    user-select: none;
}

#nospace-stream-duration.nospace-is-live {
    display: flex;
}

/* Rechtsonder, direct onder de knop Wissel camera. */
#nospace-stream-duration.nospace-stream-duration-publisher {
    top: max(95px, calc(env(safe-area-inset-top) + 95px));
    right: max(9px, env(safe-area-inset-right));
    left: auto;
    transform: none;
}

#nospace-stream-duration .nospace-live-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;
    background: #ff3344;

    box-shadow: 0 0 0 0 rgba(255, 51, 68, 0.62);
    animation: nospace-live-pulse 1.8s infinite;
}

#nospace-stream-duration .nospace-live-label {
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

#nospace-stream-duration .nospace-live-time {
    min-width: 55px;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-align: right;
}

/*
 * De bestaande groene LIVE-knop op de kijkerspagina wordt de host.
 * Er wordt geen tweede, losse badge meer rechtsboven gemaakt.
 */
.nospace-live-duration-host {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 7px !important;
    white-space: nowrap;
}

.nospace-live-duration-inline {
    display: inline-block;
    min-width: 54px;
    padding-left: 7px;

    border-left: 1px solid rgba(255, 255, 255, 0.38);

    font-size: 0.92em;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0;
    text-align: right;
}

.nospace-live-duration-inline[hidden] {
    display: none !important;
}

/*
 * De statusmelding van Wissel camera gaat iets lager staan, zodat die
 * niet over de streamduur heen valt wanneer een camera wordt gewisseld.
 */
#nospace-switch-camera-status {
    top: max(138px, calc(env(safe-area-inset-top) + 138px));
}

@keyframes nospace-live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 51, 68, 0.62);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(255, 51, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 51, 68, 0);
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    #nospace-stream-duration {
        min-width: 108px;
        min-height: 31px;
        padding: 5px 8px;
        gap: 5px;
        font-size: 9px;
    }

    #nospace-stream-duration.nospace-stream-duration-publisher {
        top: 82px;
        right: 7px;
    }

    #nospace-stream-duration .nospace-live-label {
        font-size: 8px;
    }

    #nospace-switch-camera-status {
        top: 119px;
        right: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #nospace-stream-duration .nospace-live-dot {
        animation: none;
    }
}