/* ==========================================
   SalmasFlix — Sync Player · Fullscreen overlays
   Extracted from media.css in Phase 7.10 (2026-04-23).
   Originally at lines 1960-2284 of the monolith.

   Metastream-style overlays: player fills screen, chat/queue/
   controls float on top. Includes:
   - `body.media-fs-active` siblings-hide pattern
   - `.media-fs` player + overlay wrappers
   - `.media-fs-focus-chat` / `.media-fs-focus-queue` laptop
     keyboard focus modes (Enter / Q shortcuts)
   - `.media-fs-focus-badge` transient hint pills with 30s
     auto-fade via `.media-fs-focus-badge-faded`

   Load order: AFTER media.css (so .media-fs overrides beat
   the base rules) — check link tag in public/index.html.
   ========================================== */

@layer features {


/* Clear ancestor transforms that break position:fixed on iOS (tab-content animation).
   Phase 7.7: !important retained on this block — the matcher targets
   arbitrary children (`body.media-fs-active > *`) which can have
   UNKNOWN specificity rules elsewhere setting transforms/animations
   (layout.css, third-party CSS). Stripping here would regress iOS
   fullscreen. Keep as belt-and-suspenders. */
body.media-fs-active,
body.media-fs-active > *,
body.media-fs-active .tab-content {
    transform: none !important;
    animation: none !important;
}

/* HARD LOCK: body itself is pinned to the viewport so iOS Safari can't resize
   it / reveal the address bar / scroll underneath the fullscreen player.
   Phase 7.7: !important stripped — body.media-fs-active (0,1,1) already
   outspecific's base body (0,0,1) selector in base.css. */
body.media-fs-active {
    overflow: hidden;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    height: 100vh; /* fallback for older browsers that don't know dvh */
    touch-action: none;        /* no scrolling the page behind the player */
    overscroll-behavior: none;
}

/* Hide EVERY competing surface in fullscreen. We don't rely on z-index tricks
   anymore — just yank the siblings out of the layout. */
/* Phase 7.7: !important retained — this "hide every competing surface"
   block is belt-and-suspenders protection against rules in layout.css /
   components.css / games.css (loaded later in the cascade) that set
   display/visibility/opacity on these same IDs/classes with their own
   high-specificity selectors (e.g. `.chat-sidebar.open`, `.sfx-invite`
   fixed overlays). Stripping here would require auditing every loaded
   stylesheet; keep !important as a single safe invariant. */
body.media-fs-active #gallery-section > header,
body.media-fs-active #gallery-section > nav,
body.media-fs-active .gallery-header-modern,
body.media-fs-active #media-sub-tabs,
body.media-fs-active #fab-container,
body.media-fs-active #chat-sidebar,
body.media-fs-active #sfx-ios-install,
body.media-fs-active .sfx-ios-install,
/* Game/sync invite card (fixed, top-center, z-critical) — would paint
   over the video as a themed-border rectangle. See .sfx-invite in
   games.css. This was the actual "blue glowing rectangle top-right"
   the user kept reporting in sync FS. */
body.media-fs-active #sfx-invite,
body.media-fs-active .sfx-invite,
body.media-fs-active .tab-content:not(#sync-content) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* The #sync-content wrapper must stretch; no padding or max-width getting in
   the way. */
/* Phase 7.7: !important stripped — 0,2,1 specificity beats the base
   `.tab-content { padding: 0 16px 16px }` (0,1,0) at padding longhands
   this rule sets. The more-specific sync-tab lock rule (1,3,1) at line
   1367 sets padding-bottom: 0 to the same value, so no visual regression. */
body.media-fs-active #sync-content {
    padding: 0;
    margin: 0;
    max-width: none;
    height: 100dvh;
    height: 100vh;
}

.media-room.media-fs {
    background: #000;
    max-width: none;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    /* Dynamic viewport: excludes iOS URL bar so the player actually fills
       what the user sees, not the theoretical viewport that includes chrome. */
    height: 100dvh;
    height: 100vh;         /* fallback */
    z-index: 2147483647;   /* max 32-bit int — beats any future addition */
    overflow: hidden;
    /* Video edge-to-edge (Netflix/YouTube pattern). Notch-avoidance is done
       on the overlay children (controls/chat/queue) below, not the outer box. */
}

/* #media-connected sits between .media-room and .media-player-wrap — must fill the room */
.media-fs > #media-connected {
    flex: 1;
    min-height: 0;
    overflow: visible;
    gap: 0;
}

/* Player wrap — fills the room so children (player, chat, controls) position correctly */
.media-fs .media-player-wrap {
    flex: 1;
    position: relative;
    min-height: 0;
}

/* Player — fills entire screen */
.media-fs .media-player-area {
    position: absolute;
    inset: 0;
    height: auto !important;
    max-height: none !important;
    border-radius: 0;
    border: none;
    background: #000;
    z-index: 1;
}

/* Fullscreen: ensure chat + controls are above the player */
.media-fs .media-chat-messages-wrap {
    z-index: 20;
    /* Notch-safe: in landscape the notch is on the left, so the top-left chat
       overlay must pull away from it. env() is 0 on desktop, ~44px on iPhone. */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
}
.media-fs .media-bottom-controls {
    z-index: 20;
    /* iOS home indicator hugs the bottom. Existing bottom-controls has its own
       padding; we ADD the safe-area on top with calc() in its normal padding
       rule if it exists. Here we just pad the outer box. */
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
}

/* Hide normal-mode-only elements.
   Phase 7.7: !important stripped — .media-fs .X (0,2,0) already beats
   the base .X (0,1,0) rules naturally. */
.media-fs .media-dedication-row,
.media-fs .media-input-row { display: none; }

/* Fullscreen: chat messages area — ONE STABLE height, no resize on hover,
   no resize on queue open, no resize full stop.
   Previously two different rules (12vh idle / 18vh hover / 32vh FS) fought
   for specificity and the chat kept jumping. Now locked with !important.
   Pick a modest size so chat stays unobtrusive; user scrolls inside it. */
.media-fs .media-chat-overlay-messages {
    max-height: clamp(110px, 20vh, 200px) !important;
    overflow-y: hidden;
    pointer-events: none;
}
/* Laptop viewports (900px+ tall typical): allow slightly more vertical room */
@media (min-width: 1024px) and (min-height: 700px) {
    .media-fs .media-chat-overlay-messages {
        max-height: clamp(140px, 22vh, 220px) !important;
    }
}

/* In fullscreen, wrap is ALWAYS visible so toasts can pop with controls hidden —
   per-message opacity handles visibility.
   Phase 7.7: !important stripped — .media-fs (0,1,0) + .media-chat-messages-wrap
   (0,1,0) = 0,2,0, already beats the base .media-chat-messages-wrap (0,1,0)
   at line 1120. The more-specific .media-fs.media-fs-focus-queue variant
   below keeps its !important to override this one. */
.media-fs .media-chat-messages-wrap {
    opacity: 1;
}

/* Fullscreen, controls hidden: hide history messages; only new "temp" toasts show */
.media-fs:not(.media-fs-show) .media-chat-msg:not(.mcm-temp) {
    opacity: 0;
}

/* ============================================================
   FULLSCREEN FOCUSED-VIEW MODES (laptop keyboard shortcuts)
   Enter = chat-only focus, Q = queue-only focus
   ============================================================ */

/* CHAT-FOCUSED: expand chat to a readable size; hide queue + everything in the
   bottom controls EXCEPT the chat-input row (otherwise user can't type).
   Phase 7.7: max-height KEEPS !important (fights .media-fs .media-chat-overlay-messages
   which is also !important). overflow-y / pointer-events !important stripped —
   0,3,0 specificity beats the 0,2,0 non-!important siblings naturally. */
.media-fs.media-fs-focus-chat .media-chat-overlay-messages {
    max-height: clamp(220px, 50vh, 520px) !important;
    overflow-y: auto;
    pointer-events: auto;
}
/* Phase 7.7: !important stripped on focus-chat class-only rules —
   0,3,0 specificity beats lower base rules at 0,2,0 / 0,1,0. */
.media-fs.media-fs-focus-chat .media-chat-messages-wrap {
    opacity: 1;
}
.media-fs.media-fs-focus-chat .media-chat-msg {
    opacity: 1;
    animation: none;
}
.media-fs.media-fs-focus-chat .media-queue-section {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Keep the bottom controls FRAME visible (so chat input is reachable), but
   hide the playback buttons, volume, settings, fullscreen — chat focus mode
   is purely for typing/reading.
   Phase 7.7: !important stripped — .media-fs.media-fs-show .media-bottom-controls
   (later in source) sets the same opacity: 1 / pointer-events: auto. */
.media-fs.media-fs-focus-chat .media-bottom-controls {
    opacity: 1;
    pointer-events: auto;
}
/* Phase 7.7: !important stripped — 0,3,0 (class-only) / 0,2,1 (ID) beats
   every lower-specificity opacity/pointer-events rule on these elements. */
.media-fs.media-fs-focus-chat .media-seekbar-wrap,
.media-fs.media-fs-focus-chat .media-time-row,
.media-fs.media-fs-focus-chat .media-dedication-row,
.media-fs.media-fs-focus-chat .media-transport-center,
.media-fs.media-fs-focus-chat .media-transport-spacer,
.media-fs.media-fs-focus-chat #media-vol-btn,
.media-fs.media-fs-focus-chat #media-vol-slider,
.media-fs.media-fs-focus-chat .media-settings-wrap,
.media-fs.media-fs-focus-chat #media-fullscreen-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
/* Chat-focused: narrow chat-inline wrap — DON'T stretch into the space
   left by hidden playback buttons. Just a comfortable pill of fixed
   width so the input stays compact horizontally.
   Phase 7.7: !important stripped — 0,3,0 already beats all other
   .media-chat-inline rules (base + media queries at 0,1,0). */
.media-fs.media-fs-focus-chat .media-chat-inline {
    flex: 0 0 auto;
    max-width: 340px;
    width: min(340px, 55vw);
}
/* Phase 7.7: !important stripped — 0,3,1 specificity beats any lower
   .media-chat-inline or global input rules; no higher selector targets
   this input in fullscreen focus-chat mode. */
.media-fs.media-fs-focus-chat .media-chat-inline input {
    font-size: 0.72rem;
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(var(--primary-rgb), 0.28);
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.06);
    outline: none;
}
.media-fs.media-fs-focus-chat .media-chat-inline input:focus {
    border-color: rgba(var(--primary-rgb), 0.45);
    background: rgba(0, 0, 0, 0.35);
}

/* QUEUE-FOCUSED: show queue clearly; hide chat + bottom controls.
   Phase 7.7: queue-section !important stripped (same value as the
   fs-show rule at line 2810). The chat-messages-wrap + bottom-controls
   rules KEEP !important: they set opacity: 0 which fights the later
   .media-fs.media-fs-show ...  { opacity: 1 } rule at 2860 by source
   order, so only !important wins. */
.media-fs.media-fs-focus-queue .media-queue-section {
    opacity: 1;
    pointer-events: auto;
}
.media-fs.media-fs-focus-queue .media-chat-messages-wrap {
    opacity: 0 !important;
    pointer-events: none !important;
}
.media-fs.media-fs-focus-queue .media-bottom-controls {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Focused-mode hint pill — shown briefly so user knows which shortcut is active */
.media-fs-focus-badge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(15, 10, 30, 0.85);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    border-radius: 100px;
    backdrop-filter: blur(8px);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.media-fs.media-fs-focus-chat .media-fs-focus-badge.media-fs-focus-badge-chat,
.media-fs.media-fs-focus-queue .media-fs-focus-badge.media-fs-focus-badge-queue {
    opacity: 1;
}
/* Once the badge has been visible for 30s (class added via JS), fade it
   out. User is assumed to have seen it; the Esc shortcut still works. */
.media-fs-focus-badge.media-fs-focus-badge-faded {
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
}
.media-fs-focus-badge kbd {
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
}


} /* end @layer features */