/* ════════════════════════════════════════════════════════════════ NAADI AI — DOUBTS (doubts.css) ───────────────────────────────────────────────────────────────── ONE stylesheet, loaded by BOTH shells: app.html (student) — .m-topbar / .m-tabbar shell portal.html (teacher) — .pt-topbar / .m-tabbar shell It therefore may not depend on anything either shell defines beyond the design tokens in styles-mobile.css :root, which both load first (--s*, --g*, --red, --font-display, --font-body). Every class is namespaced .dbt-*, so it cannot collide with .pf-* (profile), .pt-* (portal), .tc-* (teacher class) or .adm-*. LAYOUT MODEL — the reason this file is short ───────────────────────────────────────────── Mobile does NOT try to be a two-pane app squeezed into one column. The conversation list is ordinary in-flow page content, so it scrolls with the shell and needs no viewport-height arithmetic against two different top bars and a tab bar. Opening a conversation raises the chat pane as a FIXED full-screen surface at z-index 400 — the same escape hatch #pf-sup-modal used, for the same reason: the tab bar sits at z-index 95 and was painting over the composer. Sizing is dvh so an open keyboard can never push the composer off-screen, and the foot pads for the home indicator. Desktop (>=1024px) drops the overlay entirely and becomes a real two-pane grid: list left, chat right, both permanently visible, no navigation between them. That is the whole desktop story and it lives in the single media query at the bottom. Loaded LAST in both s so these rules win on source order — which is what reveals the .dsk-only sidebar item at >=1024px. ════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ 1 · SHELL ENTRY POINTS (top-bar icon + its unread badge) ════════════════════════════════════════════════════════════════ */ /* The badge rides the top-bar button, so the button needs a positioning context. Both shells' buttons are plain