/* ==========================================
   SalmasFlix — Sync Player · Settings menu + subtitle tuning
   Extracted from media.css in Phase 7.10 (2026-04-23).
   Originally at lines 3085-3676 of the monolith.

   Gear-icon popup layered TOP -> BOTTOM on desktop:
   Sync now -> Cast -> PiP -> Speed -> Subtitles -> Quality.
   Phone (≤600px) main view switches to a 3×2 icon GRID;
   submenus revert to list layout. Phone+fullscreen reverts
   main to list too (grid over video looked out of place).

   Also contains:
   - Subtitle ::cue styling + A-/A+ size stepper + ±0.5s offset
     stepper (CSS var --sub-size-pct drives font-size)
   - Volume slider + Fullscreen button icon swap
   - Native video-controls kill-switch (we use our overlay)
   - Transport row mobile shrink rules (phones 480px)

   Load order: AFTER media.css + media-fullscreen.css so
   `.media-fs` rules still override correctly.
   ========================================== */

@layer features {


.media-settings-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.media-settings-wrap #media-settings-btn[aria-expanded="true"] {
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.4);
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.25);
}
.media-settings-wrap #media-settings-btn svg {
    transition: transform 0.3s ease;
}
.media-settings-wrap #media-settings-btn[aria-expanded="true"] svg {
    transform: rotate(45deg);
}
.media-settings-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    max-width: 88vw;
    max-height: min(56vh, 360px);
    padding: 6px;
    background: rgba(15, 12, 26, 0.96);
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--primary-rgb), 0.08);
    z-index: 30;
    overflow: hidden;
    transform-origin: bottom right;
    animation: mediaSettingsIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: 'Outfit', sans-serif;
}
.media-settings-menu.hidden { display: none; }
.media-settings-view { display: flex; flex-direction: column; max-height: calc(min(56vh, 360px) - 12px); overflow-y: auto; }
.media-settings-view.hidden { display: none; }
.media-settings-view::-webkit-scrollbar { width: 4px; }
.media-settings-view::-webkit-scrollbar-thumb { background: rgba(var(--secondary-rgb), 0.35); border-radius: 4px; }

@keyframes mediaSettingsIn {
    from { opacity: 0; transform: scale(0.92) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.msm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}
.msm-row:hover { background: rgba(var(--primary-rgb), 0.1); }
.msm-row.msm-back { color: var(--text-secondary); font-size: 0.78rem; padding: 6px 10px; }
.msm-row.msm-back:hover { color: var(--primary); background: rgba(var(--primary-rgb), 0.08); }

.msm-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--primary-rgb), 0.85);
    flex-shrink: 0;
}
.msm-label { flex: 1; min-width: 0; }
.msm-value {
    font-size: 0.74rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.msm-chevron {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1;
    flex-shrink: 0;
    padding-left: 4px;
}
.msm-chevron-back { font-size: 1.2rem; padding: 0 2px 0 0; }

/* Primary action row (Sync Together) — stands out from the plain settings rows.
   Phase 7.7: !important stripped — .msm-row-primary (0,1,0) comes AFTER
   the base .msm-row (0,1,0) in source and wins naturally; same for the
   :hover pair. */
.msm-row-primary {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.22), rgba(var(--secondary-rgb), 0.16));
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    color: #fff;
    font-weight: 700;
    margin-bottom: 4px;
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.18);
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.msm-row-primary .msm-icon {
    color: var(--primary);
}
.msm-row-primary .msm-chevron {
    color: var(--primary);
}
.msm-row-primary:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.36), rgba(var(--secondary-rgb), 0.28));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
}

.msm-sep {
    height: 1px;
    margin: 4px 8px;
    background: rgba(255, 255, 255, 0.06);
}

/* Individual option rows inside submenu lists */
.msm-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    position: relative;
    transition: background 0.15s;
}
.msm-option:hover { background: rgba(var(--primary-rgb), 0.1); }
.msm-option.active { color: var(--primary); font-weight: 600; }
.msm-option.active::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.6);
    transform: translateY(-50%);
}
.msm-option.disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}
.msm-option.disabled:hover { background: transparent; }

.msm-empty {
    padding: 12px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: italic;
}

/* Small-screen tweaks — on phones the gear-dropdown anchored to the
   settings button could overflow the viewport (it's `position: absolute;
   right: 0` from the wrap, and on a 375px screen with the button near
   the right edge, the menu's width + long labels like "Picture-in-Picture"
   pushed it above the player into the tab nav). Two changes together:

   1. REPOSITION to a bottom-anchored centered PANEL (iOS bottom-sheet
      pattern). `position: fixed` instead of absolute so it escapes the
      overflow:hidden cages of the flex chain; centered horizontally so
      it never clips either edge; bottom-anchored with a safe-area inset
      so the home indicator doesn't overlap.

   2. AGGRESSIVE shrink — the previous pass was still too big. Everything
      comes down another notch: menu width caps at min(300px, calc(100vw
      − 24px)), rows 0.74rem / 6-8px padding, icons 16×16 (SVG 13×13),
      values 0.64rem. "Picture-in-Picture" still fits on one line at
      this width. */
/* ==========================================================================
   Settings menu on phone (≤600px)
   --------------------------------------------------------------------------
   Two different treatments:
     • Normal mode (NOT fullscreen): 3-column ICON GRID for the main view.
       Compact square-ish tiles with icon + tiny label; Speed/Subtitles/
       Quality also show their current value underneath. Submenus (speed/
       quality/subs list) revert to list layout — you can't pick a rate
       from a grid of numbers sensibly. Menu stays anchored above the gear
       button (right:0) so users don't lose the spatial relationship.
     • Fullscreen mode: list layout (matches desktop style), anchored to
       gear button, with the compact sizing used elsewhere on phone.

   Both modes are anchored to the gear button (NOT the bottom of the
   screen) — the v79 bottom-sheet placement felt disconnected from the
   trigger.
   ========================================================================== */
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .media-settings-menu {
        /* Anchor above the gear button, same as desktop (the
           .media-settings-wrap parent has `position: relative`). */
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        left: auto;
        top: auto;
        transform: none;
        transform-origin: bottom right;

        min-width: 0;
        width: auto;
        max-width: min(240px, calc(100vw - 16px));
        padding: 4px;
        max-height: min(56dvh, 300px);
        border-radius: 12px;
    }
    .media-settings-view {
        max-height: calc(min(56dvh, 300px) - 8px);
    }
    /* ----- Main view: 3-column icon grid -----
       Each tile is a centered-column button (icon over label). The
       ::after wouldn't give us a separate value line, so the markup's
       existing .msm-value gets used as a tiny second line below .msm-label
       for Speed/Subs/Quality ("1×" / "Off" / "Auto"). */
    .media-settings-view[data-view="main"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    .media-settings-view[data-view="main"] .msm-sep {
        display: none;
    }
    .media-settings-view[data-view="main"] .msm-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 8px 4px;
        gap: 3px;
        min-height: 58px;
        border-radius: 8px;
    }
    .media-settings-view[data-view="main"] .msm-icon {
        width: 22px;
        height: 22px;
        margin: 0;
    }
    .media-settings-view[data-view="main"] .msm-icon svg {
        width: 17px;
        height: 17px;
    }
    .media-settings-view[data-view="main"] .msm-label {
        font-size: 0.6rem;
        line-height: 1.1;
        white-space: normal;
        font-weight: 600;
    }
    .media-settings-view[data-view="main"] .msm-value {
        font-size: 0.56rem;
        color: var(--primary);
        opacity: 0.85;
        flex-shrink: 0;
    }
    .media-settings-view[data-view="main"] .msm-chevron {
        display: none;
    }
    /* Sync now (primary) stays as a 1-col tile so the grid is a clean
       symmetric 3×2 (Sync / Cast / PiP above Speed / Subs / Quality).
       The gradient background + border from the base .msm-row-primary
       rule still apply — Sync reads as the highlighted tile without
       breaking the grid. Override the base rule's margin-bottom that
       would otherwise create an uneven row-gap. */
    /* Phase 7.7: !important stripped — higher specificity (0,3,0)
       beats the base .msm-row-primary (0,1,0) naturally. */
    .media-settings-view[data-view="main"] .msm-row-primary {
        margin-bottom: 0;
    }
    .media-settings-view[data-view="main"] .msm-row-primary .msm-label {
        font-size: 0.6rem;
    }

    /* ----- Submenu views (speed/quality/subs): list layout, compact ----- */
    .media-settings-view:not([data-view="main"]) .msm-row {
        padding: 6px 10px;
        font-size: 0.74rem;
        gap: 8px;
        border-radius: 7px;
    }
    .media-settings-view:not([data-view="main"]) .msm-row.msm-back {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    .media-settings-view:not([data-view="main"]) .msm-icon {
        width: 16px;
        height: 16px;
    }
    .media-settings-view:not([data-view="main"]) .msm-icon svg {
        width: 13px;
        height: 13px;
    }
    .media-settings-view:not([data-view="main"]) .msm-value {
        font-size: 0.64rem;
    }
    .media-settings-view:not([data-view="main"]) .msm-chevron {
        font-size: 0.85rem;
        padding-left: 2px;
    }
}

/* ----- Phone + Fullscreen: flat list (grid feels out of place floating
   over the video), same compact sizing used elsewhere on phone. Still
   anchored to the gear button, not the screen bottom. ----- */
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    body.media-fs-active .media-settings-view[data-view="main"] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    body.media-fs-active .media-settings-view[data-view="main"] .msm-row {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 6px 10px;
        gap: 8px;
        min-height: 0;
        font-size: 0.74rem;
    }
    body.media-fs-active .media-settings-view[data-view="main"] .msm-row-primary {
        grid-column: auto;
        min-height: 0;
    }
    body.media-fs-active .media-settings-view[data-view="main"] .msm-icon {
        width: 16px;
        height: 16px;
    }
    body.media-fs-active .media-settings-view[data-view="main"] .msm-icon svg {
        width: 13px;
        height: 13px;
    }
    body.media-fs-active .media-settings-view[data-view="main"] .msm-label {
        font-size: 0.74rem;
        text-align: left;
        font-weight: 500;
    }
    body.media-fs-active .media-settings-view[data-view="main"] .msm-value {
        font-size: 0.64rem;
        color: var(--text-muted);
    }
    body.media-fs-active .media-settings-view[data-view="main"] .msm-chevron {
        display: inline;
        font-size: 0.85rem;
    }
    body.media-fs-active .media-settings-view[data-view="main"] .msm-sep {
        display: block;
    }
}

/* Volume slider */
.media-vol-slider {
    width: 70px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.media-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.media-vol-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
}

/* Fullscreen button — swap icons based on state.
   Generalized selector so it works for BOTH the sync player (#media-fullscreen-btn
   inside .media-fs) and the solo player (#solo-fullscreen-btn inside real/fake fullscreen). */
.media-fullscreen-transport .media-fs-exit { display: none; }
.media-fullscreen-transport .media-fs-enter { display: block; }
/* Sync tab uses .media-fs on .media-room to flag fullscreen */
.media-fs #media-fullscreen-btn .media-fs-enter,
/* Solo player uses real Fullscreen API or .solo-fs class on #video-wrapper */
#video-wrapper:fullscreen #solo-fullscreen-btn .media-fs-enter,
#video-wrapper:-webkit-full-screen #solo-fullscreen-btn .media-fs-enter,
#video-wrapper.solo-fs #solo-fullscreen-btn .media-fs-enter {
    display: none;
}
.media-fs #media-fullscreen-btn .media-fs-exit,
#video-wrapper:fullscreen #solo-fullscreen-btn .media-fs-exit,
#video-wrapper:-webkit-full-screen #solo-fullscreen-btn .media-fs-exit,
#video-wrapper.solo-fs #solo-fullscreen-btn .media-fs-exit {
    display: block;
}
.media-fs #media-fullscreen-btn {
    border-color: rgba(var(--primary-rgb),0.4);
    background: rgba(var(--primary-rgb),0.15);
    color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--primary-rgb),0.2);
}
.media-fs #media-fullscreen-btn:hover {
    background: rgba(var(--primary-rgb),0.25);
    border-color: rgba(var(--primary-rgb),0.6);
    box-shadow: 0 0 14px rgba(var(--primary-rgb),0.3);
}

/* Hide native video controls — we have our own overlay controls */
.media-player-area video::-webkit-media-controls,
.media-player-area video::-webkit-media-controls-enclosure,
.media-player-area video::-webkit-media-controls-panel,
.media-player-area video::-webkit-media-controls-overlay-enclosure,
.media-player-area video::-webkit-media-controls-start-playback-button {
    display: none !important;
    opacity: 0 !important;
    -webkit-appearance: none !important;
}

/* Fullscreen button — extra left margin for separation */
.media-fullscreen-transport {
    margin-left: 4px;
}

/* Keep transport buttons from being flex-squished — chat input takes the shrink */
.media-transport-row > .media-ctrl-btn,
.media-transport-row > .media-skip10-btn,
.media-transport-row > .media-playpause-btn,
.media-transport-row > .media-vol-slider,
.media-transport-center > .media-ctrl-btn,
.media-transport-center > .media-skip10-btn,
.media-transport-center > .media-playpause-btn {
    flex-shrink: 0;
}

/* Mobile: smaller overlays + hide volume slider so buttons keep their proportions */
@media (max-width: 768px) {
    .media-chat-messages-wrap {
        width: 220px;
    }
    .media-chat-inline {
        max-width: 140px;
    }
    .media-fs .media-queue-section {
        width: 200px;
        max-height: 45vh;
    }
    /* Volume slider takes 70px — hide on narrow screens, keep the toggle button */
    .media-vol-slider { display: none; }
    /* Tablet/phone: single stable chat height — no hover resize. */
    .media-chat-overlay-messages { max-height: clamp(72px, 12vh, 120px) !important; }
    /* Fullscreen: stable mid-size on tablet/phone — overrides the base
       .media-fs max-height so it doesn't use desktop's 180–380px range. */
    .media-fs .media-chat-overlay-messages { max-height: clamp(140px, 28vh, 260px) !important; }
}
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .media-transport-row {
        gap: 4px;
    }
    .media-bottom-controls .media-transport {
        padding: 4px 6px 6px;
    }
    .media-time-sync-btn {
        padding: 3px 8px;
        font-size: 0.65rem;
    }
    .media-time-display {
        font-size: 0.7rem;
        min-width: 0;
    }
}
@media (max-width: 480px) {
    .media-chat-inline {
        max-width: 90px;
        min-width: 60px;
    }
    .media-chat-messages-wrap {
        width: 180px;
    }
    /* Narrow phones: single stable chat height — no hover resize. */
    .media-chat-overlay-messages { max-height: clamp(60px, 10vh, 95px) !important; }
    /* Fullscreen chat — single stable height on narrow phones too */
    .media-fs .media-chat-overlay-messages { max-height: clamp(110px, 26vh, 220px) !important; }
    .media-transport-row {
        gap: 3px;
    }
    /* Shrink transport buttons to fit narrow phones (override components.css 600px rule) */
    .media-bottom-controls .media-ctrl-btn,
    .media-bottom-controls .media-skip10-btn {
        width: 32px;
        height: 32px;
    }
    .media-bottom-controls .media-skip10-btn {
        padding: 0;
    }
    .media-bottom-controls .media-playpause-btn {
        width: 38px;
        height: 38px;
    }
    .media-bottom-controls .media-ctrl-btn svg {
        width: 15px;
        height: 15px;
    }
    .media-bottom-controls .media-skip10-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* iOS safe areas — keep controls above home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .media-fs .media-bottom-controls {
        padding-bottom: env(safe-area-inset-bottom);
    }
}


/* ==========================================
   SUBTITLE TUNING — size + timing-offset stepper in the settings menu.
   Font size is applied via ::cue (browser-native). Timing offset is applied
   in JS by mutating cue.startTime/endTime when the user nudges.
   ========================================== */
#video-player, #media-native-video {
    --sub-size-pct: 100%;
}
/* Cue styling — transparent background (was rgba(0,0,0,0.55) which rendered
   a block behind each subtitle), sharper shadow for legibility over bright
   scenes. Font size is driven by the --sub-size-pct CSS var set by the
   settings menu's size stepper. */
#video-player::cue,
#media-native-video::cue {
    font-size: calc(var(--sub-size-pct, 100%) * 0.01 * 1em);
    background: transparent;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
                 0 0 8px rgba(0, 0, 0, 0.7);
}
.msm-subs-tuning { padding: 6px 10px; }
.msm-subs-tuning.hidden { display: none; }
.msm-tuning-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 2px;
}
.msm-tuning-label {
    flex: 1;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
}
.msm-tuning-btn {
    background: rgba(var(--primary-rgb), 0.15);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    color: var(--primary);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s;
}
.msm-tuning-btn:hover { background: rgba(var(--primary-rgb), 0.3); }
.msm-tuning-btn:active { transform: scale(0.95); }
.msm-tuning-value {
    min-width: 58px;
    text-align: center;
    font-size: 0.8rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
}


} /* end @layer features */