/* ==========================================================================
   OgbonMath — Comprehensive Scroll Hardening (audit follow-up)
   --------------------------------------------------------------------------
   Closes the remaining gaps found by the full scroll audit:

   1. Mobile sidebar 100vh → 100dvh (iOS address-bar fix, same as #pp)
   2. Soften the panel-open lock — drop overflow:hidden on #wrap (can
      reset scrollTop on WebKit). Keep pointer-events + touch-action
      which accomplish the same UX without mutating scroll state.
   3. Harden every remaining scroll container that was missing momentum
      + overscroll-behavior: .account-menu, .md modal, .dlg-panel,
      .katex-display, .hub-* subcontainers, inline-tutor thread.
   4. Cap dialog/modal max-heights so they don't overflow small viewports.
   5. Neutralize scroll position preservation issues when toggling
      body.pp-open / body.sb-open.
   ========================================================================== */

/* ==========================================================================
   1. Sidebar viewport height — 100vh → 100dvh on mobile
   ==========================================================================
   styles.css:992 had height:100vh, same iOS Safari bug we fixed for #pp.
*/
@media (max-width: 768px) {
  #sidebar {
    height: 100vh;      /* fallback */
    height: 100dvh;     /* modern: excludes address bar */
  }

  /* Sidebar backdrop — block touch-scroll leak */
  #sidebar-backdrop {
    touch-action: none;
  }
}

/* ==========================================================================
   2. Soften the panel-open scroll lock
   ==========================================================================
   Remove the aggressive overflow:hidden that was resetting #wrap.scrollTop
   on WebKit when the panel opened. pointer-events:none + touch-action:none
   already prevent interaction; we don't need to mutate overflow.

   This overrides the earlier rule in scroll-fix.css via later cascade.
*/
@media (max-width: 768px) {
  body.pp-open #wrap,
  body:has(#pp.open) #wrap {
    overflow: auto !important;     /* restore, let wrap keep its scroll state */
    pointer-events: none;           /* still block taps */
    touch-action: none;             /* still block gestures */
  }

  body.sb-open #wrap,
  body:has(#sidebar:not(.collapsed)) #wrap {
    overflow: auto !important;
    pointer-events: none;
    touch-action: none;
  }
}

/* ==========================================================================
   3. Universal scroll-container hardening
   ==========================================================================
   Every element that acts as a scroll container gets:
     - -webkit-overflow-scrolling: touch  (iOS momentum)
     - overscroll-behavior: contain        (no scroll chaining to parent)
   This is idempotent — safe to add alongside existing rules.
*/

/* Sidebar lesson map */
#map {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Topbar horizontal scroll on mobile */
#topbar {
  overscroll-behavior-x: contain;
}

/* Modal content (legacy .md from styles.css) */
.md {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Account menu dropdown */
.account-menu {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Dialog panel — cap height so it never overflows, and allow internal scroll */
.dlg-panel {
  max-height: calc(100vh - var(--sp-8));
  max-height: calc(100dvh - var(--sp-8));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Command palette results already had -webkit-overflow-scrolling from
   scroll-fix.css — make overscroll-behavior explicit here too */
.cmdp-results {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* KaTeX display — horizontal scroll for long equations */
.katex-display,
#ct .katex-display {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

/* Math Hub step/equation cards (horizontal scroll for wide math) */
body[data-view="hub"] #ct .hub-step,
body[data-view="hub"] #ct .hub-eq-card {
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

body[data-view="hub"] #ct .hub-toolbar {
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

/* Inline tutor textarea (auto-grows, has max-height with overflow-y) */
.itr-input {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* AI tutor chat log in the full panel */
#ai-chat-log {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Python code editor + output — both scroll independently */
#cp-editor,
#cp-output {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Practice panel body — already hardened in scroll-fix.css but reinforce */
#pb {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ==========================================================================
   4. Neutralize any accidental horizontal scroll across the app
   ==========================================================================
   mobile-polish.css already has html/body/#ct { overflow-x: hidden }.
   This just reinforces for the practice panel + main areas.
*/
#pp,
#main,
#sidebar {
  overflow-x: hidden;
}

/* ==========================================================================
   5. Modal overlays (.mo from legacy styles) — cap height, enable scroll
   ==========================================================================
   The modal-root pattern (#mr > .mo > .md) — make sure tall content
   doesn't extend past viewport.
*/
#mr .mo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--sp-4);
}

#mr .md {
  max-height: calc(100vh - var(--sp-8));
  max-height: calc(100dvh - var(--sp-8));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 480px) {
  #mr .mo { padding: var(--sp-2); }
  #mr .md {
    max-height: calc(100vh - var(--sp-4));
    max-height: calc(100dvh - var(--sp-4));
  }
}

/* ==========================================================================
   6. Ensure the sticky .search-overlay works inside its scroll parent
   ==========================================================================
   Sticky requires no `overflow: hidden` in the chain AND requires the
   parent to be scrollable. Search is rendered into #ct which is inside
   #wrap (our primary scroll container) — sticky should work. Just ensure
   search-overlay itself doesn't have a conflicting transform.
*/
.search-overlay {
  position: sticky;
  top: 0;
  z-index: 10;  /* reduced from 50 — within-content sticky, not full-app */
  background: var(--bg);
  will-change: auto;   /* avoid transform (breaks sticky) */
}

/* ==========================================================================
   7. Body overscroll on iOS — extra belt + suspenders
   ==========================================================================
   Even though body has overflow:hidden, iOS Safari <16 could still
   rubber-band. Explicitly disable.
*/
html,
body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: auto;
}