/* Nexus Media Player · Nexus Step 9.5
 * Media geometry is independent from the overlay controls in embed, detached and fullscreen modes.
 */
.msp-player {
    --msp-ratio: 16 / 9;
    --msp-bg: #0b1119;
    --msp-panel: #121a25;
    --msp-panel-2: #0e151f;
    --msp-border: #263348;
    --msp-text: #f7f8fa;
    --msp-muted: #9eacbd;
    --msp-accent: #ff0033;
    --msp-radius: 16px;
    --msp-chrome-edge: 12px;
    --msp-chrome-offset: 0px;
    box-sizing: border-box;
    position: relative;
    display: block;
    place-items: initial;
    width: min(100%, 1100px);
    min-width: 0;
    background: var(--msp-bg);
    color: var(--msp-text);
    border: 1px solid var(--msp-border);
    border-radius: var(--msp-radius);
    overflow: hidden;
    box-shadow: 0 18px 60px rgb(0 0 0 / 28%);
    font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    isolation: isolate;
}

.msp-player *,
.msp-player *::before,
.msp-player *::after { box-sizing: border-box; }

.msp-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: var(--msp-ratio);
    overflow: hidden;
    background: #000;
}

/* Keep a stable mount node. Provider SDKs may replace their own child host,
   but the Nexus layout node always survives and therefore owns the sizing. */
.msp-mount {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
}

.msp-provider-host,
.msp-mount > iframe,
.msp-provider-host > iframe,
.msp-mount iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
}

.msp-provider-host {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.msp-big-play {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: 70px;
    height: 70px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    background: rgb(5 9 14 / 78%);
    color: white;
    font-size: 29px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 34px rgb(0 0 0 / 36%);
}

.msp-status,
.msp-provider {
    position: absolute;
    top: 12px;
    max-width: calc(50% - 18px);
    padding: 6px 9px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 8px;
    background: rgb(4 7 12 / 68%);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.msp-status { left: 12px; }
.msp-provider {
    right: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.msp-chrome {
    position: absolute;
    z-index: 30;
    left: var(--msp-chrome-edge);
    right: var(--msp-chrome-edge);
    bottom: calc(var(--msp-chrome-edge) + var(--msp-chrome-offset));
    display: grid;
    gap: 6px;
    min-width: 0;
    pointer-events: none;
}

.msp-controls,
.msp-playlist-wrap {
    pointer-events: auto;
}

.msp-controls {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) minmax(130px, 180px) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 12px;
    background: rgb(8 13 20 / 86%);
    box-shadow: 0 10px 34px rgb(0 0 0 / 32%);
    backdrop-filter: blur(14px) saturate(125%);
}

.msp-control-group {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.msp-control-group--timeline { width: 100%; }
.msp-control-group--audio { width: 100%; }
.msp-control-group--view { justify-content: flex-end; }

.msp-controls button {
    flex: 0 0 36px;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--msp-border);
    border-radius: 9px;
    background: #1a2431;
    color: var(--msp-text);
    cursor: pointer;
    line-height: 1;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.msp-controls button:hover:not(:disabled) {
    background: #253245;
    border-color: color-mix(in srgb, var(--msp-accent) 38%, var(--msp-border));
}
.msp-controls button:active:not(:disabled) { transform: translateY(1px); }
.msp-controls button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--msp-accent) 62%, var(--msp-border));
    background: color-mix(in srgb, var(--msp-accent) 18%, #192331);
}

.msp-controls button:focus-visible,
.msp-controls input:focus-visible,
.msp-playlist:focus-visible {
    outline: 2px solid var(--msp-accent);
    outline-offset: 2px;
}

.msp-controls button:disabled,
.msp-controls input:disabled {
    opacity: .34;
    cursor: not-allowed;
}

.msp-seek,
.msp-volume {
    min-width: 0;
    width: 100%;
    accent-color: var(--msp-accent);
}

.msp-time {
    flex: 0 0 auto;
    color: var(--msp-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.msp-playlist-wrap {
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 0;
}

.msp-playlist-wrap[hidden] { display: none !important; }

.msp-playlist {
    width: min(100%, 520px);
    min-width: 0;
    min-height: 36px;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 10px;
    background: rgb(8 13 20 / 88%);
    color: var(--msp-text);
    padding: 0 10px;
    box-shadow: 0 8px 28px rgb(0 0 0 / 28%);
    backdrop-filter: blur(14px) saturate(125%);
}

.msp-player[data-platform="twitch"] { --msp-accent: #9146ff; }
.msp-player[data-platform="tiktok"] { --msp-accent: #25f4ee; }
.msp-player[data-platform="youtube"] { --msp-accent: #ff0033; }

/* Twitch requires its provider controls to stay unobscured.
   Our custom chrome remains an overlay but is lifted above Twitch's native bottom bar,
   so the media geometry still never changes. */
.msp-native-controls-required { --msp-chrome-offset: 52px; }
.msp-native-controls-required .msp-big-play,
.msp-native-controls-required .msp-status,
.msp-native-controls-required .msp-provider {
    display: none !important;
}

/* ---------------------------------------------------------
   EMBED MODE
   --------------------------------------------------------- */
.msp-player[data-mode="embed"] {
    position: relative;
    margin-inline: auto;
}

/* ---------------------------------------------------------
   DETACHED MODE
   --------------------------------------------------------- */
.msp-player[data-mode="detached"],
.msp-player.msp-popout {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 99999;
    --msp-chrome-edge: 8px;
    width: clamp(390px, 38vw, 620px);
    max-width: calc(100vw - 36px);
    max-height: calc(100dvh - 36px);
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 26px 90px rgb(0 0 0 / 58%);
}

.msp-player[data-mode="detached"] .msp-stage { aspect-ratio: var(--msp-ratio); }
.msp-player[data-mode="detached"] .msp-chrome { gap: 5px; }
.msp-player[data-mode="detached"] .msp-controls {
    grid-template-columns: auto minmax(130px, 1fr) minmax(95px, 130px) auto;
    gap: 8px;
    padding: 7px 8px;
}
.msp-player[data-mode="detached"] .msp-controls button {
    flex-basis: 32px;
    min-width: 32px;
    height: 32px;
}
.msp-player[data-mode="detached"] .msp-playlist { width: min(100%, 430px); min-height: 32px; font-size: 12px; }

/* ---------------------------------------------------------
   FULLSCREEN MODE
   --------------------------------------------------------- */
.msp-player:fullscreen,
.msp-player[data-mode="fullscreen"] {
    --msp-chrome-edge: clamp(12px, 2vw, 28px);
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #070b11;
    display: block;
    overflow: hidden;
    box-shadow: none;
}

@supports (height: 100dvh) {
    .msp-player:fullscreen,
    .msp-player[data-mode="fullscreen"] { height: 100dvh; }
}

.msp-player:fullscreen .msp-stage,
.msp-player[data-mode="fullscreen"] .msp-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

.msp-player:fullscreen .msp-mount,
.msp-player[data-mode="fullscreen"] .msp-mount {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.msp-player:fullscreen .msp-chrome,
.msp-player[data-mode="fullscreen"] .msp-chrome {
    left: var(--msp-chrome-edge);
    right: var(--msp-chrome-edge);
    bottom: calc(var(--msp-chrome-edge) + var(--msp-chrome-offset));
}

.msp-player:fullscreen .msp-controls,
.msp-player[data-mode="fullscreen"] .msp-controls {
    width: min(1440px, 100%);
    margin-inline: auto;
    padding: 10px 12px;
    grid-template-columns: auto minmax(240px, 1fr) minmax(160px, 220px) auto;
    background: rgb(8 13 20 / 82%);
}

.msp-player:fullscreen .msp-playlist,
.msp-player[data-mode="fullscreen"] .msp-playlist { width: min(680px, 100%); }

/* Portrait media uses the available fullscreen height instead of stretching
   a 9:16 source over the whole landscape viewport. */
.msp-player[data-layout="portrait"] { width: min(100%, 470px); margin-inline: auto; }

.msp-player:fullscreen[data-layout="portrait"],
.msp-player[data-mode="fullscreen"][data-layout="portrait"] { width: 100vw; }

.msp-player:fullscreen[data-layout="portrait"] .msp-mount,
.msp-player[data-mode="fullscreen"][data-layout="portrait"] .msp-mount {
    width: auto;
    max-width: 100%;
    height: 100%;
    aspect-ratio: var(--msp-ratio);
    margin-inline: auto;
}

.msp-player[data-mode="detached"][data-layout="portrait"] {
    width: min(390px, calc(100vw - 36px));
}

/* Portrait embed/detached players are narrow even on wide desktop screens, so
   their controls must wrap by player shape rather than viewport media query. */
.msp-player[data-layout="portrait"][data-mode="embed"] .msp-controls,
.msp-player[data-layout="portrait"][data-mode="detached"] .msp-controls {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "transport view"
        "timeline timeline"
        "audio audio";
}
.msp-player[data-layout="portrait"][data-mode="embed"] .msp-control-group--transport,
.msp-player[data-layout="portrait"][data-mode="detached"] .msp-control-group--transport { grid-area: transport; }
.msp-player[data-layout="portrait"][data-mode="embed"] .msp-control-group--timeline,
.msp-player[data-layout="portrait"][data-mode="detached"] .msp-control-group--timeline { grid-area: timeline; }
.msp-player[data-layout="portrait"][data-mode="embed"] .msp-control-group--audio,
.msp-player[data-layout="portrait"][data-mode="detached"] .msp-control-group--audio { grid-area: audio; }
.msp-player[data-layout="portrait"][data-mode="embed"] .msp-control-group--view,
.msp-player[data-layout="portrait"][data-mode="detached"] .msp-control-group--view { grid-area: view; }
.msp-player[data-layout="portrait"][data-mode="embed"] .msp-control-group--audio .msp-volume,
.msp-player[data-layout="portrait"][data-mode="detached"] .msp-control-group--audio .msp-volume { max-width: none; }

/* TikTok Standard-Embed fallback */
.msp-tiktok-native-embed {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100%;
}

.msp-tiktok-fallback-placeholder {
    min-height: 100%;
    display: grid;
    place-content: center;
    gap: 12px;
    text-align: center;
    color: #fff;
    background: #000;
}
.msp-tiktok-fallback-placeholder a { color: inherit; }

/* Twitch HTTPS warning */
.msp-embed-warning {
    box-sizing: border-box;
    min-height: 100%;
    width: 100%;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(10, 11, 18, .94);
    color: #f4f6fb;
}
.msp-embed-warning strong { font-size: clamp(18px, 3vw, 28px); }
.msp-embed-warning p {
    margin: 0;
    max-width: 620px;
    line-height: 1.5;
    color: rgba(244, 246, 251, .78);
}
.msp-embed-warning__action {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid currentColor;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

/* Twitch documents a minimum video size of 400 x 300. */
.msp-player[data-platform="twitch"] .msp-stage { min-height: 300px; }
.msp-player[data-mode="fullscreen"][data-platform="twitch"] .msp-stage,
.msp-player:fullscreen[data-platform="twitch"] .msp-stage { min-height: 0; }

/* Compact responsive layout. */
@media (max-width: 860px) {
    .msp-controls {
        grid-template-columns: auto minmax(120px, 1fr) auto;
        grid-template-areas:
            "transport timeline view"
            "audio audio audio";
    }
    .msp-control-group--transport { grid-area: transport; }
    .msp-control-group--timeline { grid-area: timeline; }
    .msp-control-group--audio { grid-area: audio; }
    .msp-control-group--view { grid-area: view; }
    .msp-control-group--audio .msp-volume { max-width: 220px; }

    .msp-player[data-mode="detached"] .msp-controls {
        grid-template-columns: auto minmax(100px, 1fr) auto;
        grid-template-areas:
            "transport timeline view"
            "audio audio audio";
    }
}

@media (max-width: 620px) {
    .msp-player { border-radius: 12px; }
    .msp-controls {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "transport view"
            "timeline timeline"
            "audio audio";
    }
    .msp-control-group--transport { justify-content: flex-start; }
    .msp-control-group--timeline { width: 100%; }
    .msp-control-group--audio { width: 100%; }
    .msp-control-group--audio .msp-volume { max-width: none; }

    .msp-player[data-mode="detached"] {
        --msp-chrome-edge: 6px;
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
        max-width: none;
        max-height: calc(100dvh - 16px);
    }

    .msp-player[data-mode="detached"] .msp-controls,
    .msp-player:fullscreen .msp-controls,
    .msp-player[data-mode="fullscreen"] .msp-controls {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "transport view"
            "timeline timeline"
            "audio audio";
    }

    .msp-status { max-width: calc(100% - 100px); }
    .msp-provider { max-width: 82px; }
}

@media (max-width: 430px) {
    .msp-control-group--transport { gap: 5px; }
    .msp-controls button { flex-basis: 32px; min-width: 32px; height: 32px; }
    .msp-time { font-size: 11px; }
}


/* STEP 9.3: mode controls should read as view controls, not as media actions.
   The background/full-page button uses a literal BG label because the previous
   striped Unicode glyph looked like a playlist icon in Chromium/Windows. */
.msp-mode-button--background {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .06em;
}
.msp-mode-button--background > span {
    display: inline-block;
    transform: translateY(-.2px);
}

/* ---------------------------------------------------------
   STEP 9.2 · AUTO-HIDE CHROME + BACKGROUND MODE
   --------------------------------------------------------- */
.msp-chrome,
.msp-status,
.msp-provider {
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.msp-interaction-surface {
    position: absolute;
    inset: 0;
    z-index: 24;
    pointer-events: none;
    background: transparent;
}

.msp-big-play,
.msp-status,
.msp-provider { z-index: 25; }

.msp-player[data-chrome-visible="false"] .msp-chrome,
.msp-stage[data-chrome-visible="false"] .msp-status,
.msp-stage[data-chrome-visible="false"] .msp-provider {
    opacity: 0;
    visibility: hidden;
}

.msp-player[data-chrome-visible="false"] .msp-chrome {
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.msp-player[data-chrome-visible="true"] .msp-chrome {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* When the custom chrome has faded away, the transparent wake surface catches
   the next pointer movement and brings the controls back. Provider interaction
   is immediately restored as soon as the chrome is visible again. */
.msp-player[data-chrome-visible="false"]:not(.msp-native-controls-required) .msp-interaction-surface {
    pointer-events: auto;
}

/* Twitch must keep its own mandatory controls reachable at all times. */
.msp-native-controls-required .msp-interaction-surface { display: none !important; }

/* Step 18.09a · CSS3D room monitor double-click transport.
   In spatial presentation the transparent stage surface owns the video area so
   provider iframes cannot swallow the browser dblclick event. The normal Nexus
   chrome remains above it. Twitch keeps its mandatory native control strip free. */
.msp-player[data-spatial-presentation="1"] .msp-interaction-surface {
    pointer-events: auto;
    cursor: pointer;
}
.msp-player[data-spatial-presentation="1"].msp-native-controls-required .msp-interaction-surface {
    display: block !important;
    pointer-events: auto !important;
    bottom: 52px;
}

/* Background runtime rule: the media stage NEVER leaves its original player DOM.
   Reparenting provider iframes can reload their browsing context and invalidate
   YouTube/Twitch SDK objects. The same stage is made viewport-fixed purely by CSS,
   while the player's chrome remains independently controllable above the page. */
body.msp-has-video-background { isolation: isolate; }

.msp-stage--background {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
    background: #000;
    pointer-events: none;
    contain: layout paint;
}

@supports (height: 100dvh) {
    .msp-stage--background { height: 100dvh; }
}

.msp-stage--background .msp-mount {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--msp-cover-width, 100vw);
    height: var(--msp-cover-height, 100vh);
    min-width: var(--msp-cover-width, 100vw);
    min-height: var(--msp-cover-height, 100vh);
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: #000;
}

.msp-stage--background .msp-provider-host,
.msp-stage--background .msp-mount > iframe,
.msp-stage--background .msp-provider-host > iframe,
.msp-stage--background .msp-mount iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.msp-stage--background .msp-interaction-surface { pointer-events: none !important; }

.msp-player[data-mode="background"] {
    --msp-chrome-edge: clamp(10px, 2vw, 24px);
    position: static;
    isolation: auto;
    width: 0;
    max-width: none;
    height: 0;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    pointer-events: none;
}

/* The zero-sized player root must not block page interaction, but its fixed
   control chrome remains fully interactive and keeps bubbling events to the
   same NexusMediaPlayer instance. */
.msp-player[data-mode="background"] .msp-chrome,
.msp-player[data-mode="background"] .msp-controls,
.msp-player[data-mode="background"] .msp-playlist-wrap,
.msp-player[data-mode="background"] .msp-playlist {
    pointer-events: auto;
}

.msp-player[data-mode="background"] .msp-chrome {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(var(--msp-chrome-edge) + var(--msp-chrome-offset));
    z-index: 90;
    width: min(1180px, calc(100vw - (var(--msp-chrome-edge) * 2)));
    transform: translateX(-50%);
}

.msp-player[data-mode="background"][data-chrome-visible="false"] .msp-chrome {
    transform: translate(-50%, 10px);
}

.msp-player[data-mode="background"][data-chrome-visible="true"] .msp-chrome {
    transform: translate(-50%, 0);
}

.msp-player[data-mode="background"] .msp-controls {
    width: 100%;
    grid-template-columns: auto minmax(240px, 1fr) minmax(160px, 220px) auto;
    background: rgb(8 13 20 / 78%);
}

.msp-player[data-mode="background"] .msp-playlist {
    width: min(680px, 100%);
}

@media (max-width: 620px) {
    .msp-player[data-mode="background"] .msp-controls {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "transport view"
            "timeline timeline"
            "audio audio";
    }
}

@media (prefers-reduced-motion: reduce) {
    .msp-chrome,
    .msp-status,
    .msp-provider { transition: none !important; }
}