/* PB Bilibili 162 — Mobile sidebar stability fix */

@media (max-width: 1023px) {
  /* Do not let the Navbar's backdrop-filter create a containing block for
     the full-screen fixed drawer on mobile browsers. */
  nav:has(aside[aria-label="Menu navigasi seluler"]) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    isolation: auto !important;
  }

  /* Full viewport drawer. IMPORTANT: do not set transform here; the React
     class -translate-x-full must control the closed/open state. */
  nav > aside[aria-label="Menu navigasi seluler"] {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 350px) !important;
    max-width: 350px !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    overscroll-behavior: contain !important;
    will-change: transform;
  }

  /* The menu list owns the vertical scroll area. */
  nav > aside[aria-label="Menu navigasi seluler"] > div:nth-child(2) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* Full-screen backdrop. */
  nav > div.fixed:has(+ aside[aria-label="Menu navigasi seluler"]) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
  }

  html:has(aside[aria-label="Menu navigasi seluler"]),
  body:has(aside[aria-label="Menu navigasi seluler"]) {
    min-height: 100%;
  }
}

@media (max-width: 639px) {
  nav > aside[aria-label="Menu navigasi seluler"] {
    width: min(88vw, 350px) !important;
  }
}