/* ==========================================================================
   FlixVision-style mobile UX layer (StreamVerse — based on NuvioWeb (GPL-3.0))
   Loaded LAST so it wins the cascade without touching the bundle.
   ALL layout changes are scoped to phone viewports (<768px).
   TV / desktop (>=1200px) layout, sidebar and D-pad behaviour are untouched.
   ========================================================================== */

/* Shared tokens (mobile-only use; no global restyle here — branding layer owns
   global colours so the two layers never fight). */
:root {
  --fv-bg: #0f0f0f;
  --fv-surface: #1a1a1a;
  --fv-surface-raised: #232323;
  --fv-line: rgba(255, 255, 255, 0.08);
  --fv-text: #f5f2ec;
  --fv-muted: #a8a29a;
  --fv-accent: #f4b942;
  --fv-accent-ink: #120c02;
  --fv-radius-card: 14px;
  --fv-radius-btn: 12px;
  --fv-touch: 44px;
  --fv-nav-h: 60px;
}

/* --------------------------------------------------------------------------
   PHONE ONLY
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html,
  body {
    background: var(--fv-bg) !important;
    color: var(--fv-text);
  }

  /* 1. BOTTOM NAV — hide the TV side rail on phones ----------------------- */
  .modern-sidebar-shell,
  .home-sidebar,
  .sidebar,
  [data-nav-zone="sidebar"] {
    display: none !important;
  }

  /* reclaim the rail width */
  .home-main,
  .home-shell .home-main,
  .settings-main,
  .app-main,
  main {
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* room for the fixed bottom bar (+ iOS safe area) */
  body {
    padding-bottom: calc(
      var(--fv-nav-h) + env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  .fv-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--fv-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(15, 15, 15, 0.96);
    border-top: 1px solid var(--fv-line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .fv-bottom-nav__btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--fv-touch);
    min-width: var(--fv-touch);
    background: none;
    border: 0;
    padding: 6px 0 4px;
    color: var(--fv-muted);
    font: 600 10px/1.2 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .fv-bottom-nav__btn .material-icons,
  .fv-bottom-nav__btn svg {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }

  .fv-bottom-nav__btn.is-active {
    color: var(--fv-accent);
  }

  .fv-bottom-nav__btn:active {
    opacity: 0.75;
  }

  /* 2. HERO BANNER — 16:9-ish on phone ------------------------------------ */
  .home-hero-card,
  .home-screen-shell .home-hero-card {
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    border-radius: var(--fv-radius-card);
    margin: 8px 4px 12px;
  }

  .home-hero-card .hero-backdrop,
  .home-hero-card .hero-backdrop-wrap,
  .home-hero-card img {
    object-fit: cover;
  }

  .home-hero-card .hero-title,
  .home-hero-card .hero-title-text {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  .home-hero-card .hero-description {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }

  /* one-tap hero buttons: full thumb-friendly targets */
  .home-hero-card button,
  .home-hero-card .hero-button,
  .home-hero-card [class*="hero-"][role="button"] {
    min-height: var(--fv-touch);
    border-radius: var(--fv-radius-btn);
  }

  /* 3. POSTER ROWS — snap carousels, ~2.5 posters visible ------------------ */
  .home-track,
  .card-row,
  .profile-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 10px;
    padding: 4px 12px 12px !important; /* replaces TV's huge edge padding */
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .home-row,
  .home-modern-row,
  .home-modern-catalogs,
  .home-modern-rows-scroll,
  .home-modern-rows-viewport {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .home-track::-webkit-scrollbar,
  .card-row::-webkit-scrollbar,
  .profile-row::-webkit-scrollbar {
    display: none;
  }

  .home-track > .home-content-card,
  .home-track > .home-poster-card,
  .card-row > .card,
  .card-row > .poster-card,
  .card-row > * {
    flex: 0 0 38% !important; /* ≈2.5 posters per screen incl. gap */
    width: 38% !important;
    min-width: 0 !important;
    max-width: 38% !important;
    scroll-snap-align: start;
  }

  /* kill the TV "expand when focused" card growth on touch */
  .home-content-card.is-expanded,
  .home-poster-card.is-expanded,
  .home-content-card.focused,
  .home-poster-card.focused {
    flex-basis: 38% !important;
    width: 38% !important;
    max-width: 38% !important;
    transform: none !important;
  }

  .home-content-card,
  .home-poster-card {
    border-radius: var(--fv-radius-card) !important;
    overflow: hidden;
  }

  .card,
  .poster-card {
    border-radius: var(--fv-radius-card) !important;
    background: var(--fv-surface);
  }

  .card img,
  .poster-card img {
    border-radius: calc(var(--fv-radius-card) - 4px);
  }

  /* 4. CONTINUE WATCHING — keep progress cards compact & readable ---------- */
  [class*="continue"] .card,
  [class*="resume"] .card {
    flex-basis: 62%;
    max-width: 62%;
  }

  .detail-resume-indicator,
  [class*="progress-fill"] {
    background: var(--fv-accent) !important;
  }

  /* 5. DETAILS PAGE -------------------------------------------------------- */
  .detail-hero-section {
    position: relative;
    margin: 0 -12px;
    padding: 0 12px;
  }

  .detail-hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(15, 15, 15, 0) 30%,
      rgba(15, 15, 15, 0.85) 78%,
      var(--fv-bg) 100%
    );
  }

  .detail-hero-body,
  .detail-hero-brand {
    position: relative;
    z-index: 1;
  }

  .detail-meta-row {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 12px;
    color: var(--fv-muted);
  }

  /* primary Play full-width, thumb-sized */
  .detail-hero-body button[class*="play"],
  .detail-hero-body [data-action*="play" i],
  .detail-hero-body .detail-play-button {
    width: 100%;
    min-height: calc(var(--fv-touch) + 4px);
    border-radius: var(--fv-radius-btn);
    font-size: 15px;
    font-weight: 700;
  }

  /* stream / source cards: clean single-column list */
  [class*="stream-route-card"],
  .stream-route-card-row,
  [class*="source-card"] {
    display: block;
    width: 100%;
  }

  [class*="stream"] .card,
  [class*="source"] .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px;
    border-radius: var(--fv-radius-card);
    padding: 14px;
  }

  /* 6. VISUAL — large touch targets & rounded controls everywhere --------- */
  button,
  [role="button"],
  .focusable {
    min-height: var(--fv-touch);
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    min-height: var(--fv-touch);
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }

  /* kill TV focus scaling on touch — it causes layout jumps */
  .focusable.focused,
  .card.focused {
    transform: none !important;
    box-shadow: 0 0 0 2px var(--fv-accent) !important;
  }
}

/* --------------------------------------------------------------------------
   TV / DESKTOP GUARD (>=1200px): explicitly undo anything that might leak.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .fv-bottom-nav {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   StreamVerse fix: MOBILE LOGIN / ONBOARDING (auth QR, simple auth, profile
   selection). The shipped components.css sizes these screens for 1920x1080
   TV (52px titles, fixed 876x852 card, 2-column 100vw grid) which overlaps
   on phones. Phone-only (<768px); TV/desktop rules untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Auth QR screen: stack the two panels vertically, scroll if needed */
  .qr-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .qr-left-panel {
    text-align: center;
  }

  .qr-brand-lockup {
    margin-bottom: 10px !important;
  }

  .qr-logo {
    height: 52px !important;
    max-width: 60% !important;
  }

  .qr-copy-block {
    max-width: 100% !important;
  }

  .qr-title {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.15 !important;
  }

  .qr-description {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin-top: 10px !important;
    max-width: 100% !important;
  }

  .qr-card-panel {
    width: 100% !important;
  }

  /* Kill the fixed 876x852 TV card — this was the overlapping panel. */
  .qr-card {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 20px 16px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  .qr-card-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .qr-card-subtitle {
    font-size: 14px !important;
  }

  .qr-code-frame {
    width: min(230px, 68vw) !important;
    height: min(230px, 68vw) !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .qr-code-text,
  .qr-status {
    font-size: 14px !important;
  }

  .qr-status {
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .qr-actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }

  html.no-flex-gap .qr-actions > * + * {
    margin-left: 10px !important;
  }

  /* Touch-friendly auth buttons (>=44px) */
  .qr-action-btn {
    height: 48px !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0 22px !important;
    flex: 1 1 auto !important;
  }

  /* Simple auth / account chooser screens */
  .account-shell,
  .auth-simple-shell {
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    justify-content: flex-start !important;
  }

  .auth-simple-hero {
    margin-bottom: 20px !important;
    max-width: 100% !important;
  }

  .account-title,
  .auth-simple-title {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  .account-subtitle,
  .auth-simple-subtitle {
    font-size: 14px !important;
    max-width: 100% !important;
  }

  .account-settings-stack,
  .auth-simple-actions {
    width: 100% !important;
    gap: 12px !important;
  }

  .account-card,
  .account-settings-card,
  .auth-simple-card {
    min-height: 52px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  .account-card-title,
  .account-settings-title {
    font-size: 17px !important;
  }

  .account-card-subtitle,
  .account-settings-note,
  .account-settings-subtitle {
    font-size: 13px !important;
  }

  .account-info,
  .status-card,
  .sync-card {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* Profile selection ("Who's watching") */
  .profile-main-layer {
    padding: 32px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }

  .profile-logo {
    width: min(200px, 55vw) !important;
    height: auto !important;
    margin-bottom: 18px !important;
  }

  .profile-title {
    font-size: clamp(26px, 8vw, 34px) !important;
    letter-spacing: 0 !important;
  }

  .profile-subtitle {
    font-size: 15px !important;
    margin-top: 10px !important;
  }

  .profile-grid {
    gap: 18px !important;
    min-height: 0 !important;
    margin-top: 24px !important;
  }

  html.no-flex-gap .profile-grid > * {
    margin: 0 9px 18px !important;
  }

  .profile-card,
  .profile-grid-compact .profile-card {
    width: 132px !important;
    padding: 8px !important;
  }

  .profile-avatar-ring,
  .profile-grid-compact .profile-avatar-ring {
    width: 104px !important;
    height: 104px !important;
    margin: 8px auto !important;
  }

  .profile-card.focused .profile-avatar-ring,
  .profile-grid-compact .profile-card.focused .profile-avatar-ring {
    width: 112px !important;
    height: 112px !important;
    border-width: 3px !important;
  }

  .profile-avatar,
  .profile-grid-compact .profile-avatar {
    width: 88px !important;
    height: 88px !important;
    font-size: 34px !important;
  }

  .profile-card.focused .profile-avatar,
  .profile-grid-compact .profile-card.focused .profile-avatar {
    width: 96px !important;
    height: 96px !important;
    font-size: 38px !important;
  }
}