/* Mobile layout for ARIA and the ARIA Academy.
 *
 * WHY THIS FILE EXISTS (2026-10-02)
 * ---------------------------------
 * The body was two Bootstrap columns with NO breakpoints:
 *     dbc.Col(_sidebar, width=3)   dbc.Col(_chat_panel, width=9)
 * A bare width=N is col-N at EVERY screen size, so on a 390px phone that is a
 * 97px sidebar beside a 292px chat panel. Unusable.
 *
 * This was not theoretical. The first real traffic the Academy ever received -
 * five visitors overnight after the LinkedIn posts - was 100% mobile (two
 * iPhones, two Androids, one repeat) and NOT ONE of them ran a single query.
 * Zero prompts reached the model. LinkedIn is mobile-first, so the posts deliver
 * phones, and the product was desktop-only.
 *
 * The columns now stack below lg (992px) with the CHAT FIRST, because on a phone
 * the chat is the product and the curriculum is reference material you scroll to.
 * Above lg nothing changes: sidebar left, chat right, exactly as before.
 *
 * The sidebar's sticky full-height behaviour lives here rather than inline,
 * because an inline style cannot carry a media query - and a sticky
 * 100vh-minus-80px box stacked under the chat on a phone would occupy the whole
 * screen with its own scrollbar.
 */

/* ── Sidebar: a normal block on phones, a sticky full-height rail on desktop ─ */
.aria-sidebar-col {
  /* phone default: no sticky, no forced height, scrolls with the page */
  max-height: none;
  overflow-y: visible;
  position: static;
}

@media (min-width: 992px) {
  .aria-sidebar-col {
    height: calc(100vh - 80px);
    overflow-y: auto;
    position: sticky;
    top: 0;
  }
}

/* ── Offcanvas panels must never exceed the viewport ────────────────────────
 * The exam offcanvas was a fixed 420px, which is wider than a 390px phone, so
 * it overflowed horizontally. Width is capped rather than replaced: desktop
 * still gets 420px.
 */
.aria-offcanvas-420 {
  width: 100% !important;
  max-width: 420px !important;
}

/* ── Small-screen breathing room ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* The chat panel sits directly under the header on a phone; give the stacked
   * sidebar a visible boundary so the two sections do not read as one. */
  .aria-sidebar-col {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  /* Bootstrap's horizontal gutters on the two columns waste ~16px a side on a
   * narrow screen, where every pixel of chat width matters. */
  .aria-sidebar-col,
  .aria-chat-col {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ── Wide offcanvas panels (the SAR worklist) ───────────────────────────────
 * 70vw is fine on a laptop and unusable on a phone: 273px on a 390px screen,
 * which squeezed the worklist's columns to nothing. Full width below lg, the
 * original 70vw above it. The DataTable inside already has overflowX: auto, so
 * the extra width turns an unreadable panel into a swipeable one.
 */
.aria-offcanvas-wide {
  width: 100% !important;
}

@media (min-width: 992px) {
  .aria-offcanvas-wide {
    width: 70vw !important;
  }
}

/* Give the table inside a usable minimum so columns keep their shape and the
 * user swipes horizontally, rather than every column collapsing to fit. */
@media (max-width: 991.98px) {
  .aria-offcanvas-wide .dash-table-container,
  .aria-offcanvas-wide .dash-spreadsheet-container {
    overflow-x: auto !important;
  }
  .aria-offcanvas-wide .dash-cell,
  .aria-offcanvas-wide .dash-header {
    min-width: 92px;
    white-space: nowrap;
  }
}

/* ── The other seven offcanvas panels (2026-10-04) ──────────────────────────
 * The 10-02 pass fixed two of nine: the exam (a fixed 420px) and the SAR
 * worklist (70vw). The remaining seven kept a flat viewport-relative width,
 * which is the identical bug one step removed - on a 390px phone 65vw is
 * 253px and 40vw is 156px. The commit that fixed the worklist even named
 * "70vw, 420px and 40vw" as the offenders, then only classed two of them.
 *
 * The desktop width deliberately stays inline on each component, where it
 * reads next to the panel it belongs to; this class overrides it only below
 * lg. The !important is load-bearing - it is what lets a stylesheet beat an
 * inline style attribute.
 */
@media (max-width: 991.98px) {
  .aria-offcanvas-fluid {
    width: 100% !important;
    max-width: 100% !important;
    /* flag-offcanvas carries an inline min-width: 360px, which overflows a
     * 320px handset (an iPhone SE) no matter what width says. */
    min-width: 0 !important;
  }

  /* The same swipe treatment the worklist got: columns keep their shape and
   * the panel scrolls sideways, instead of every column collapsing to fit. */
  .aria-offcanvas-fluid .dash-table-container,
  .aria-offcanvas-fluid .dash-spreadsheet-container {
    overflow-x: auto !important;
  }
  .aria-offcanvas-fluid .dash-cell,
  .aria-offcanvas-fluid .dash-header {
    min-width: 92px;
    white-space: nowrap;
  }

  /* These graphs are responsive:true, but they are first laid out while the
   * offcanvas is still display:none, so the plot can keep a stale width after
   * the panel opens. Pin it to the container. */
  .aria-offcanvas-fluid .js-plotly-plot,
  .aria-offcanvas-fluid .plot-container,
  .aria-offcanvas-fluid .svg-container {
    width: 100% !important;
  }
}