/*
 * Space Gate NOVA+ — Android-native mobile surface v4.
 *
 * PHONE ONLY.  The desktop visual surface is intentionally untouched.
 * This layer improves touch ergonomics, horizontal rails, navigation density,
 * sheets, Arabic title readability and motion without changing routes, APIs,
 * playback, account state or the native MAUI bridge.
 */

@layer nova-device-mobile {
  :root {
    --nova-mobile-visual-surface: 4;
  }
}

@media (max-width: 767px) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --nova-mobile-edge: clamp(12px, 3.8vw, 17px);
    --nova-mobile-gap: clamp(9px, 2.6vw, 12px);
    --nova-mobile-nav-item-w: 68px;
    --nova-mobile-nav-h: 64px;
    --bottom-nav-h: var(--nova-mobile-nav-h);
    --nova-mobile-press-ease: cubic-bezier(.2,.8,.2,1);
    --nova-mobile-route-ease: cubic-bezier(.22,.78,.22,1);
  }

  html.nova-web-shell {
    color-scheme: dark;
    background: #000;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-x: none;
    scrollbar-gutter: auto;
  }

  html.nova-web-shell body {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    overflow-x: clip;
    background: #000;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Remove browser-feeling selection/callout only from interactive chrome. */
  html.nova-web-shell :is(
    button, a, [role="button"], [data-route], [data-nova-route],
    .nx2-card, .oscar-card, .media-card, .poster-card, .catalog-card,
    .filter-chip, .catalog-chip, .nav-icon, img
  ) {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  html.nova-web-shell :is(button, [role="button"], [data-route], [data-nova-route]) {
    touch-action: manipulation;
  }

  html.nova-web-shell :is(input, textarea, select, [contenteditable="true"]) {
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
    caret-color: #b9a5ff;
  }

  html.nova-web-shell img {
    -webkit-user-drag: none;
    user-select: none;
  }

  /* ------------------------------------------------------------------
     Header: keep the approved identity, improve hit areas and press feel.
     ------------------------------------------------------------------ */
  html.nova-web-shell #nova-global-header {
    padding-inline: max(10px, var(--safe-right)) max(10px, var(--safe-left)) !important;
    isolation: isolate;
  }

  html.nova-web-shell #nova-global-header .catalog-landing-toolbar-actions {
    gap: 2px !important;
  }

  html.nova-web-shell #nova-global-header .catalog-landing-toolbar-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    transition:
      transform 105ms var(--nova-mobile-press-ease),
      background-color 120ms ease,
      opacity 120ms ease !important;
  }

  html.nova-web-shell #nova-global-header .catalog-landing-toolbar-button.is-nova-pressed,
  html.nova-web-shell #nova-global-header .catalog-landing-toolbar-button:active {
    transform: scale(.91) !important;
    background: rgba(255,255,255,.075) !important;
  }

  html.nova-web-shell #nova-global-header .home-menu-button.is-nova-pressed,
  html.nova-web-shell #nova-global-header .home-menu-button:active {
    opacity: .76 !important;
  }

  /* ------------------------------------------------------------------
     Bottom navigation: horizontal Android dock for all 10 app sections.
     It is deliberately scrollable instead of crushing icons/text.
     ------------------------------------------------------------------ */
  html.nova-web-shell #nova-bottom-nav-host.sg-layout-bottom-nav {
    height: calc(var(--nova-mobile-nav-h) + var(--safe-bottom)) !important;
    background: linear-gradient(180deg, rgba(6,6,10,.90), rgba(2,2,5,.975)) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 -10px 34px rgba(0,0,0,.40) !important;
    backdrop-filter: blur(16px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
    transition: transform 180ms var(--nova-mobile-route-ease), opacity 150ms ease !important;
  }

  html.nova-web-shell #nova-bottom-nav-host > nav.oscar-bottom-nav.original-bottom-nav {
    height: calc(var(--nova-mobile-nav-h) + var(--safe-bottom)) !important;
    padding: 4px max(4px,var(--safe-left)) var(--safe-bottom) max(4px,var(--safe-right)) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 10px !important;
    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  html.nova-web-shell #nova-bottom-nav-host > nav.oscar-bottom-nav.original-bottom-nav::-webkit-scrollbar {
    display: none;
  }

  html.nova-web-shell #nova-bottom-nav-host .oscar-bottom-nav > :is(button,a) {
    flex: 0 0 var(--nova-mobile-nav-item-w) !important;
    width: var(--nova-mobile-nav-item-w) !important;
    min-width: var(--nova-mobile-nav-item-w) !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 4px 2px 3px !important;
    display: grid !important;
    grid-template-rows: 29px auto !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    border-radius: 14px !important;
    scroll-snap-align: center;
    touch-action: manipulation;
    transition: transform 105ms var(--nova-mobile-press-ease), opacity 120ms ease !important;
  }

  html.nova-web-shell #nova-bottom-nav-host .oscar-bottom-nav > :is(button,a).is-nova-pressed,
  html.nova-web-shell #nova-bottom-nav-host .oscar-bottom-nav > :is(button,a):active {
    transform: scale(.91) !important;
    opacity: .78 !important;
  }

  html.nova-web-shell #nova-bottom-nav-host .nav-icon {
    width: 27px !important;
    height: 27px !important;
    display: grid !important;
    place-items: center !important;
  }

  html.nova-web-shell #nova-bottom-nav-host .nav-label-text {
    font-size: .61rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html.nova-web-shell #nova-bottom-nav-host .oscar-bottom-nav > :is(button,a).active .nav-icon {
    animation: novaMobileNavSettle 190ms var(--nova-mobile-route-ease) both;
  }

  /* Android keyboard: the navigation dock gets out of the way of forms. */
  html.nova-web-shell.nova-mobile-keyboard-open #nova-bottom-nav-host,
  html.nova-web-shell.nova-mobile-keyboard-open #nova-bottom-nav-host > nav.oscar-bottom-nav.original-bottom-nav {
    transform: translateY(110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ------------------------------------------------------------------
     Horizontal content rails: native inertial scroll + partial next card.
     Crucially allow BOTH horizontal rail movement and vertical page movement.
     ------------------------------------------------------------------ */
  html.nova-web-shell :is(
    .poster-rail, .shahid-poster-rail, .nova-media-rail, .home-media-rail,
    .nova-related-rail, .nova-world-rail, .standalone-episode-jump-rail,
    .horizontal-scroll-shell, .catalog-row-scroll, .genre-scroll,
    .filter-scroll, .chips-scroll
  ),
  html.nova-web-shell [data-nova-experience="v2"] .nx2-rail-scroll {
    max-width: 100vw;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    touch-action: pan-x pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch;
  }

  html.nova-web-shell :is(
    .poster-rail, .shahid-poster-rail, .nova-media-rail, .home-media-rail,
    .nova-related-rail, .nova-world-rail, .standalone-episode-jump-rail,
    .horizontal-scroll-shell, .catalog-row-scroll, .genre-scroll,
    .filter-scroll, .chips-scroll
  )::-webkit-scrollbar,
  html.nova-web-shell [data-nova-experience="v2"] .nx2-rail-scroll::-webkit-scrollbar {
    display: none;
  }

  html.nova-web-shell [data-nova-experience="v2"] .nx2-rail-scroll {
    padding-inline: 8px !important;
    scroll-padding-inline: 8px !important;
  }

  html.nova-web-shell [data-nova-experience="v2"] .nx2-rail {
    gap: var(--nova-mobile-gap) !important;
  }

  html.nova-web-shell :is(
    .poster-rail, .shahid-poster-rail, .nova-media-rail, .home-media-rail,
    .nova-related-rail, .nova-world-rail, .standalone-episode-jump-rail,
    [data-nova-experience="v2"] .nx2-rail
  ) > :is(.nx2-card,.oscar-card,.media-card,.poster-card,.catalog-card,.nova-media-card,.rail-card) {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  /* Keep a clear peek of the next item: users instantly understand the rail moves. */
  html.nova-web-shell [data-nova-experience="v2"] .nx2-rail {
    grid-auto-columns: clamp(116px, 30.5vw, 146px) !important;
  }
  html.nova-web-shell [data-nova-experience="v2"] .nx2-rail--landscape {
    grid-auto-columns: clamp(238px, 74vw, 326px) !important;
  }
  html.nova-web-shell [data-nova-experience="v2"] .nx2-rail--collection {
    grid-auto-columns: clamp(128px, 34vw, 164px) !important;
  }
  html.nova-web-shell [data-nova-experience="v2"] .nx2-rail--ranked {
    grid-auto-columns: clamp(164px, 45vw, 210px) !important;
  }

  /* ------------------------------------------------------------------
     Cards and Arabic typography: no destructive one-line clipping.
     ------------------------------------------------------------------ */
  html.nova-web-shell :is(
    .nx2-card, .oscar-card, .media-card, .poster-card, .catalog-card,
    .nova-media-card, .rail-card, .channel-card, .episode-card
  ) {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }

  html.nova-web-shell :is(
    .nx2-card-art, .poster-card-art, .catalog-card-art, .media-card-art,
    .nova-media-card-art, .channel-card-art, .episode-card-art
  ) {
    transform-origin: 50% 50%;
    transition:
      transform 115ms var(--nova-mobile-press-ease),
      filter 115ms ease,
      opacity 115ms ease !important;
  }

  html.nova-web-shell .nx2-card.is-nova-pressed .nx2-card-art,
  html.nova-web-shell :is(.oscar-card,.media-card,.poster-card,.catalog-card,.nova-media-card,.channel-card,.episode-card).is-nova-pressed {
    transform: scale(.982) !important;
    filter: brightness(.88) !important;
  }

  html.nova-web-shell :is(
    .nx2-card-copy strong, .nx2-card-overlay-title, .nx2-ranked-title,
    .card-title, .channel-title, .episode-title, .nova-rail-card strong
  ) {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    line-height: 1.34 !important;
    min-height: 0;
  }

  html.nova-web-shell [data-nova-experience="v2"] .nx2-card-copy strong {
    font-size: .76rem !important;
  }

  html.nova-web-shell [data-nova-experience="v2"] .nx2-card-copy small {
    font-size: .61rem !important;
    line-height: 1.35 !important;
  }

  html.nova-web-shell [data-nova-experience="v2"] .nx2-card-art {
    border-radius: 14px !important;
  }

  /* ------------------------------------------------------------------
     Consistent 44px touch contract. Visual icons may remain compact.
     ------------------------------------------------------------------ */
  html.nova-web-shell :is(
    .account-pro-header button, .settings-header button, .nova-catalog-back,
    .nova-catalog-icon, .nx2-section-browser-back,
    .nx2-section-browser-header .catalog-landing-toolbar-button,
    [data-router-back], [data-filter-sheet-close], [data-report-close]
  ) {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }

  html.nova-web-shell :is(
    button, a, [role="button"], .filter-chip, .catalog-chip,
    .nova-catalog-select-card, .nova-filter-sheet-option
  ).is-nova-pressed {
    transition-duration: 90ms !important;
  }

  html.nova-web-shell :is(
    button, a, [role="button"], .filter-chip, .catalog-chip,
    .nova-catalog-select-card, .nova-filter-sheet-option
  ).is-nova-pressed:not(.nx2-card):not(.oscar-card):not(.media-card):not(.poster-card):not(.catalog-card) {
    opacity: .76;
  }

  /* ------------------------------------------------------------------
     Filter/report dialogs become proper Android-style bottom sheets.
     ------------------------------------------------------------------ */
  html.nova-web-shell .nova-filter-sheet-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(0,0,0,.66) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    animation: novaMobileBackdropIn 145ms ease-out both;
  }

  html.nova-web-shell .nova-filter-sheet {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(82dvh, 720px) !important;
    margin: 0 !important;
    padding-bottom: max(14px, var(--safe-bottom)) !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: linear-gradient(180deg, rgba(20,20,25,.99), rgba(7,7,10,.995)) !important;
    box-shadow: 0 -24px 70px rgba(0,0,0,.58) !important;
    overflow: hidden auto !important;
    overscroll-behavior: contain;
    animation: novaMobileSheetIn 210ms var(--nova-mobile-route-ease) both;
  }

  html.nova-web-shell .nova-filter-sheet::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 8px auto 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
  }

  html.nova-web-shell .nova-filter-sheet > header {
    min-height: 64px;
    padding-inline: var(--nova-mobile-edge) !important;
  }

  html.nova-web-shell .nova-filter-sheet-option {
    min-height: 52px !important;
    border-radius: 13px !important;
    touch-action: manipulation;
  }

  html.nova-web-shell .nova-filter-sheet > footer {
    padding-bottom: max(8px, var(--safe-bottom)) !important;
  }

  /* Side drawer: quick, physical motion without desktop hover effects. */
  html.nova-web-shell .menu-backdrop.open {
    animation: novaMobileBackdropIn 140ms ease-out both;
  }

  html.nova-web-shell .side-menu.open {
    animation: novaMobileDrawerIn 185ms var(--nova-mobile-route-ease) both !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.nova-web-shell .side-menu > :is(a,button) {
    min-height: 48px !important;
    touch-action: manipulation;
  }

  /* Browser notices: text-first floating feedback, not a web alert box. */
  html.nova-web-shell #nova-browser-notice {
    right: 50% !important;
    left: auto !important;
    bottom: calc(var(--nova-mobile-nav-h) + var(--safe-bottom) + 14px) !important;
    width: max-content !important;
    max-width: min(86vw, 420px) !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    transform: translateX(50%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 999px !important;
    background: rgba(20,20,25,.92) !important;
    color: rgba(255,255,255,.94) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    font-size: .77rem !important;
    line-height: 1.45 !important;
    animation: novaMobileToastIn 160ms var(--nova-mobile-route-ease) both;
  }

  html.nova-web-shell.nova-mobile-keyboard-open #nova-browser-notice {
    bottom: max(14px, var(--safe-bottom)) !important;
  }

  /* ------------------------------------------------------------------
     Route motion: opacity-only because transformed route roots break fixed
     headers in Android WebView. Atomic router swapping remains untouched.
     ------------------------------------------------------------------ */
  html.nova-web-shell #nova-page-root.nova-mobile-route-enter {
    animation: novaMobileRouteReveal 155ms var(--nova-mobile-route-ease) both;
  }

  /* Avoid browser-style blue focus rings after touch, keep keyboard focus. */
  html.nova-web-shell.nova-input-touch :focus:not(:focus-visible) {
    outline: none !important;
  }

  /* Keep animations smooth on phones by avoiding unnecessary hover contracts. */
  @media (hover: none) and (pointer: coarse) {
    html.nova-web-shell :is(.nx2-card,.oscar-card,.media-card,.poster-card,.catalog-card):hover {
      transform: none !important;
      filter: none !important;
    }
    html.nova-web-shell [data-nova-experience="v2"] .nx2-card:hover .nx2-card-art {
      transform: none !important;
    }
  }

  @media (max-width: 380px) {
    :root {
      --nova-mobile-nav-item-w: 64px;
      --nova-mobile-edge: 12px;
    }
    html.nova-web-shell [data-nova-experience="v2"] .nx2-rail {
      grid-auto-columns: clamp(112px, 31.5vw, 132px) !important;
    }
    html.nova-web-shell [data-nova-experience="v2"] .nx2-rail--landscape {
      grid-auto-columns: 76vw !important;
    }
  }

  @keyframes novaMobileNavSettle {
    0% { transform: scale(.88); opacity: .62; }
    68% { transform: scale(1.045); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes novaMobileBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes novaMobileSheetIn {
    from { transform: translateY(22px); opacity: .72; }
    to { transform: translateY(0); opacity: 1; }
  }

  @keyframes novaMobileDrawerIn {
    from { transform: translateX(24px); opacity: .72; }
    to { transform: translateX(0); opacity: 1; }
  }

  @keyframes novaMobileToastIn {
    from { transform: translate(50%, 8px) scale(.98); opacity: 0; }
    to { transform: translate(50%, 0) scale(1); opacity: 1; }
  }

  @keyframes novaMobileRouteReveal {
    from { opacity: .925; }
    to { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    html.nova-web-shell #nova-page-root.nova-mobile-route-enter,
    html.nova-web-shell .nova-filter-sheet-backdrop,
    html.nova-web-shell .nova-filter-sheet,
    html.nova-web-shell .side-menu.open,
    html.nova-web-shell #nova-browser-notice,
    html.nova-web-shell #nova-bottom-nav-host .oscar-bottom-nav > :is(button,a).active .nav-icon {
      animation: none !important;
    }

    html.nova-web-shell :is(button,a,[role="button"],.nx2-card,.oscar-card,.media-card,.poster-card,.catalog-card) {
      transition-duration: 1ms !important;
    }
  }
}

/* NOVA V8.5 - Discover people results */
.discover-mobile .discover-people-results{margin:4px 18px 22px;padding:0}.discover-mobile .discover-people-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.discover-mobile .discover-people-title h2{display:flex;align-items:center;gap:8px;margin:0;font-size:1.05rem}.discover-mobile .discover-people-title small{color:#7f8088}.discover-mobile .discover-people-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 8px;scrollbar-width:none}.discover-mobile .discover-people-grid::-webkit-scrollbar{display:none}.discover-mobile .discover-person-result{flex:0 0 126px;scroll-snap-align:start;border:1px solid rgba(255,255,255,.08);background:#111114;border-radius:16px;color:#fff;padding:12px 9px;text-align:center}.discover-mobile .discover-person-result img{width:78px;height:78px;border-radius:50%;object-fit:cover;background:#1a1a1d}.discover-mobile .discover-person-result strong{display:block;margin-top:8px;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.discover-mobile .discover-person-result small{display:block;color:#8d8d95;margin-top:4px;font-size:.72rem}

/* NOVA V8.5.1 - people/discover polish */
.discover-mobile .discover-people-grid{touch-action:pan-x pinch-zoom;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
.discover-mobile .discover-person-result{scroll-snap-align:start;border-color:rgba(155,77,255,.22);background:linear-gradient(180deg,rgba(20,215,255,.035),rgba(155,77,255,.045) 58%,rgba(240,74,216,.03)),#111114}
.discover-mobile .discover-person-result:active{transform:scale(.985);border-color:rgba(20,215,255,.5)}
.discover-mobile .discover-person-result img{border:2px solid transparent;background:linear-gradient(#18181c,#18181c) padding-box,linear-gradient(135deg,#14D7FF,#9B4DFF 58%,#F04AD8) border-box}
.discover-mobile .discover-people-title h2 svg{color:#9B4DFF}
.discover-mobile .discover-search-box.focused{border-color:transparent;background:linear-gradient(#0b0b0f,#0b0b0f) padding-box,linear-gradient(90deg,#14D7FF,#9B4DFF,#F04AD8) border-box}