/* =============================================================================
   SalmasFlix — Sync Player · Phone mode-aware controls (v81)
   Extracted from media.css in Phase 7.10 (2026-04-23).
   Originally at lines 3760-3869 of the monolith.
   -----------------------------------------------------------------------------
   Three distinct modes on phones (≤600px):
     • Inline (not fullscreen)          — controls inside the normal page flow
     • Portrait fullscreen (vertical)   — FS + portrait orientation
     • Landscape fullscreen (horizontal)— FS + landscape orientation
   Detected via `body.media-fs-active` (FS marker, set by _setupFsListeners +
   iOS fake-FS) combined with `body.media-fs-portrait` / `body.media-fs-
   landscape` (orientation markers, set by the global matchMedia watcher in
   _setupFsListeners).

   Shared rule across all 3 modes on phone:
     • ±10s skip buttons removed entirely — **double-tap the left or right
       side of the video** does the same thing (YouTube convention, already
       wired in media.js touchend handler).
     • Volume button + slider removed — phone volume is controlled by the
       system hardware rocker; the in-app slider is redundant and clutters
       the transport row.

   Per-mode:
     • Inline: chat input also hidden (remove the "Say somethir..." field).
       Settings menu = tighter icon-only 3×2 grid.
     • Portrait FS: chat input VISIBLE (restored — user can chat while
       watching in vertical fullscreen, still see the video comfortably).
     • Landscape FS: chat input hidden (would overlap the video edge and
       landscape viewers typically use the system keyboard dictation /
       voice — matches YouTube's landscape treatment).

   Load order: AFTER media.css + media-fullscreen.css + media-settings.css
   so every base/FS/settings rule is already in the cascade when these
   mobile tweaks land.
   ============================================================================= */

@layer features {

/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
/* Phase 7.7: !important stripped on the button hides — ID specificity
   (1,0,0) already beats every base class rule on these buttons. */
@media (max-width: 768px) {
    /* 1) Remove ±10s skip buttons on ALL three phone modes — double-tap
          the left/right sides of the video does the same thing. */
    #media-back10-btn,
    #media-fwd10-btn {
        display: none;
    }

    /* 2) Remove volume button + slider on ALL three phone modes — system
          hardware volume rocker handles this natively. */
    #media-vol-btn,
    #media-vol-slider {
        display: none;
    }

    /* 3) Inline (not fullscreen): chat input stays VISIBLE (user feedback
          — watching inline on phone is a common mode and having the input
          right there is more convenient than hunting for the sidebar).
          Nothing to hide here; the default flex display carries through.

          Portrait FS: chat input also visible (v81 behavior preserved).

          Landscape FS: chat input hidden — landscape is the "pure watch"
          mode per YouTube convention; messages overlay still renders so
          partner's chat is readable, just no inline compose. */
    /* Phase 7.7: !important stripped — 0,3,1 specificity beats every
       other .media-chat-inline rule. */
    body.media-fs-active.media-fs-landscape .media-chat-inline {
        display: none;
    }

    /* 6) Settings menu — icon-ONLY tiles on phone non-FS (no text labels
          except Sync, which keeps its short word to distinguish the
          primary re-sync action). User feedback: "only show the logos
          and no text except for sync maybe". Plus more compact submenus. */
    body:not(.media-fs-active) .media-settings-view[data-view="main"] .msm-row:not(.msm-row-primary) .msm-label {
        display: none;
    }
    /* Current values under Speed/Subs/Quality still show (1× / Off / Auto)
       so users know the current state even without a label. Tighter
       sizing and line positioning so the value-only tile reads clean. */
    body:not(.media-fs-active) .media-settings-view[data-view="main"] .msm-row:not(.msm-row-primary) {
        min-height: 52px;
        padding: 6px 4px;
    }
    body:not(.media-fs-active) .media-settings-view[data-view="main"] .msm-row:not(.msm-row-primary) .msm-icon {
        width: 24px;
        height: 24px;
    }
    body:not(.media-fs-active) .media-settings-view[data-view="main"] .msm-row:not(.msm-row-primary) .msm-icon svg {
        width: 19px;
        height: 19px;
    }
    body:not(.media-fs-active) .media-settings-view[data-view="main"] .msm-row:not(.msm-row-primary) .msm-value {
        font-size: 0.56rem;
        font-weight: 600;
    }
    /* Menu container: narrower since icon-only tiles don't need the
       width a label demands. */
    body:not(.media-fs-active) .media-settings-menu {
        max-width: min(200px, calc(100vw - 16px));
    }
    /* Submenu views (Speed / Quality / Subs lists) — tighter padding
       and font so 5+ options fit inside a compact dropdown. */
    body:not(.media-fs-active) .media-settings-view:not([data-view="main"]) .msm-row {
        padding: 5px 8px;
        font-size: 0.7rem;
        min-height: 0;
    }
    body:not(.media-fs-active) .media-settings-view:not([data-view="main"]) .msm-row.msm-back {
        padding: 4px 6px;
        font-size: 0.66rem;
    }
}

/* (Removed in v83: `.sfx-doubletap-hint` pill + keyframes. The double-tap
   hint now lives in the sync-tab info modal (top-right `i` icon) instead
   of an auto-popping bottom pill — less intrusive, always discoverable.) */


} /* end @layer features */