/* ===========================================================================
   sqa.world design system - "warm minimal"
   Cream paper, espresso ink, terracotta accent. Soft edges, low contrast,
   nothing harsh: this is a site people stare at for hours while revising.
   =========================================================================== */

:root {
    /* Surfaces */
    --bg: #FAF6F0;
    --surface: #FFFDFA;
    --surface-2: #F2EBE1;
    --surface-3: #E9DFD2;

    /* Ink */
    --text: #2B211B;
    --text-secondary: #6B5B4E;
    --text-mute: #9A8879;

    /* Accent + status */
    --accent: #C4643C;
    --accent-hover: #AC5330;
    --accent-soft: #F5E3DA;
    --accent-ring: rgba(196, 100, 60, 0.22);
    --success: #4F7A52;
    --success-soft: #E4EEE2;
    --danger: #A8443B;
    --danger-soft: #F6E2DF;
    --info: #4A6B85;
    --info-soft: #E2ECF2;

    --border: #E6DCD0;
    --border-strong: #D8CABA;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(74, 56, 42, 0.05);
    --shadow-md: 0 2px 8px rgba(74, 56, 42, 0.07);
    --shadow-lg: 0 12px 32px rgba(74, 56, 42, 0.10);

    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --sidebar-w: 248px;
    /* The bottom tab bar's height on phones. The chat pins itself above the
       bar and #main pads for it, so this must be the only place it is set -
       hard-coding 56px in one place and letting padding make the bar 63px in
       another is exactly how the composer ended up overlapping it. */
    --tabbar-h: 58px;
    --transition: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute must beat every display rule below it, or a .btn or a
   flex container stays on screen while the code believes it is hidden. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ── App shell ─────────────────────────────────────────────────────────── */
#app-shell { display: flex; min-height: 100dvh; }

/* Signed-out shell: a light header instead of the full sidebar, stacked
   above #main rather than beside it. */
body.guest-shell #app-shell { flex-direction: column; }
#public-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
#public-header .logo { margin-bottom: 0; padding: 0; }
.public-header-actions { display: flex; align-items: center; gap: 10px; }

#sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 22px 14px;
    position: sticky;
    top: 0;
    height: 100dvh;
}

.logo {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display);
    font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--text);
    padding: 4px 6px 0;
    margin-bottom: 22px;
}
.logo-link {
    display: inline-flex; align-items: center;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--transition);
}
.logo-link:hover { opacity: 0.85; }
.logo-img {
    display: block;
    height: 34px;
    width: auto;
    object-fit: contain;
}
#mobile-header .logo-img {
    height: 28px;
}
.auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.auth-brand img {
    height: 38px;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition);
}
.auth-brand img:hover { transform: scale(1.02); }
.logo-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

nav.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    padding: 9px 11px;
    border: none; background: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.nav-icon { width: 18px; text-align: center; flex-shrink: 0; opacity: 0.85; }

/* ── Sidebar accordion group (Learn / Revise) ─────────────────────────── */
.nav-group { display: flex; flex-direction: column; }
/* The toggle is the small chevron button beside the Learn/Revise label
   (.nav-accordion-header below), not a full-width row - it used to inherit
   width:100% from an older accordion design, which squeezed the label onto
   its own line and left the chevron stranded. */
.nav-group-toggle { width: auto; flex-shrink: 0; }

.sidebar-footer {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.legal-links {
    display: flex; flex-wrap: wrap; gap: 6px 10px;
    padding: 8px 11px 0;
    font-size: 11.5px;
    color: var(--text-mute);
}
.legal-links a { color: var(--text-mute); }
.legal-links a:hover { color: var(--text-secondary); }

/* ── Sticky-note board & Visual Mindmap Canvas ─────────────────────────── */
.board-page-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: calc(100vh - 120px);
    min-height: 640px;
    position: relative;
}

/* Top board switcher bar */
.board-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 14px;
}
.board-title-input {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    border: 1px solid transparent;
    background: transparent;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--transition), background var(--transition);
}
.board-title-input:hover, .board-title-input:focus {
    border-color: var(--border);
    background: var(--surface-2);
}

@media (max-width: 700px) {
    /* Five wrapped rows of board controls used to eat most of the screen
       before any canvas was visible. One compact, swipeable row instead -
       .board-top-bar holds two .row groups (switcher/title/subject, then
       theme/export/delete), and .row itself wraps by default, so both
       levels need nowrap or the groups just wrap internally instead. */
    .board-top-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .board-top-bar > * { flex-shrink: 0; }
    .board-top-bar .row { flex-wrap: nowrap; }
    .board-title-input { max-width: 32vw; }

    /* .board-page-wrap's height was a flat "100vh - 120px" that ignored the
       phone-only chrome around #main (the bottom tab bar plus its safe-area
       inset, and #main's own top/bottom padding - see the #main rule under
       "Mobile" below) and used 100vh, which on iOS/Android is the viewport
       height WITHOUT the address bar, taller than what's actually visible.
       Both together are why the toolbar and zoom pill would end up cut off
       under the tab bar or the browser's own chrome. Sized from 100dvh (the
       real visible height) minus that exact chrome instead. */
    .board-page-wrap {
        height: calc(100dvh - 18px - var(--tabbar-h) - 20px - env(safe-area-inset-bottom));
        min-height: 420px;
    }
    /* The desktop 520px floor is taller than the whole screen on a lot of
       phones in landscape (or a short one in portrait), which is exactly
       what forced the page to scroll and pushed the toolbar/zoom pill out of
       view under the tab bar. */
    #board-viewport { min-height: 320px; }
}

/* Precise, small touch targets (rotate/resize handles, tool buttons) are the
   other big reason this editor felt broken on a phone - fine with a mouse
   cursor, nearly unhittable with a fingertip. Anything that can be dragged
   or tapped gets a bigger hit area on touchscreens specifically, so a mouse
   user on a small window doesn't get oversized controls they didn't ask for. */
@media (pointer: coarse) {
    .transform-rotate-handle {
        width: 26px;
        height: 26px;
        top: -30px;
    }
    .transform-resize-handle {
        width: 22px;
        height: 22px;
        bottom: -9px;
        right: -9px;
    }
    .board-tool-btn {
        width: 44px;
        height: 44px;
    }
    .board-zoom-btn {
        width: 34px;
        height: 34px;
    }
    .color-circle-btn, .board-color-wheel-wrap {
        width: 28px;
        height: 28px;
    }
    /* Pins stay visually small (fixed width/height from .pin-3d etc, and
       everything here is border-box), so the tappable area is grown with a
       transparent ::before halo instead of padding, which would just shrink
       the pin's own visible content into a smaller box. .board-pin-item is
       already `position: absolute` (see base rule above), which is enough
       of a positioning context for this - a click anywhere on the halo
       still targets .board-pin-item itself. */
    .board-pin-item::before {
        content: "";
        position: absolute;
        inset: -10px;
    }
}

@media (max-width: 480px) {
    .board-toolbar { gap: 2px; padding: 5px 7px; }
    .board-zoom-pill { padding: 3px 6px; }
    .board-brush-popover { min-width: 0; width: calc(100vw - 32px); max-width: 320px; }
    .board-inspector { max-width: calc(100vw - 24px); overflow-x: auto; }
}

/* Viewport & Pan-Zoom World */
#board-viewport {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 520px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #FAF6F0;
    box-shadow: inset 0 2px 8px rgba(43, 33, 27, 0.04);
    user-select: none;
    touch-action: none;
}
#board-viewport.mode-pan { cursor: grab; }
#board-viewport.mode-pan:active { cursor: grabbing; }
#board-viewport.mode-draw { cursor: crosshair; }
#board-viewport.mode-erase { cursor: cell; }

#board-world {
    position: absolute;
    width: 4800px;
    height: 3600px;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

/* Background Canvas Themes */
#board-viewport.theme-squares {
    background-color: #FAF6F0;
    background-image:
        linear-gradient(to right, rgba(43, 33, 27, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(43, 33, 27, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
}
#board-viewport.theme-lines {
    background-color: #FAF7F2;
    background-image:
        linear-gradient(to bottom, transparent 27px, rgba(196, 100, 60, 0.2) 28px);
    background-size: 100% 28px;
}
#board-viewport.theme-dots {
    background-color: #FAF6F0;
    background-image: radial-gradient(circle, rgba(139, 63, 38, 0.22) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
}
#board-viewport.theme-cork {
    background-color: #c99863;
    background-image:
        radial-gradient(#d8a873 15%, transparent 16%),
        radial-gradient(#be8d58 15%, transparent 16%);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
}
#board-viewport.theme-chalkboard {
    background-color: #1a2522;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}
#board-viewport.theme-plain {
    background: #FAF6F0;
}

#board-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
#board-viewport.mode-draw #board-canvas,
#board-viewport.mode-erase #board-canvas {
    pointer-events: auto;
}

#board-strings-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}
.board-string-path {
    stroke: #dc2626;
    stroke-width: 2.8;
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.25));
    transition: stroke 0.15s;
    pointer-events: stroke;
    cursor: pointer;
}
.board-string-path:hover {
    stroke: #b91c1c;
    stroke-width: 4;
}

/* Floating Bottom Creative Toolbar */
.board-toolbar {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 253, 250, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 10px 30px rgba(43, 33, 27, 0.14);
    z-index: 50;
}
.board-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition);
}
.board-tool-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    transform: translateY(-1px);
}
.board-tool-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(196, 100, 60, 0.35);
}
.board-tool-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 2px;
}

/* Zoom Controls Pill */
.board-zoom-pill {
    position: absolute;
    bottom: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 253, 250, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 8px;
    box-shadow: 0 8px 24px rgba(43, 33, 27, 0.12);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    z-index: 50;
}
.board-zoom-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    color: inherit;
}
.board-zoom-btn:hover { background: var(--surface-2); }

/* Elements on the Canvas */
.board-item {
    position: absolute;
    user-select: none;
    touch-action: none;
    transition: box-shadow 0.15s ease;
    /* #board-items-container is pointer-events:none so empty canvas clicks
       fall through to the viewport/world beneath it (placing notes/pins,
       click-drag panning); items opt back in individually since
       pointer-events inherits. */
    pointer-events: auto;
}
.board-item.selected {
    outline: 2px dashed var(--accent);
    outline-offset: 3px;
}

/* Sticky Note Component */
.sticky-note {
    min-width: 160px;
    min-height: 120px;
    border-radius: 3px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    padding: 0;
    cursor: grab;
    z-index: 5;
}
.sticky-note:active { cursor: grabbing; }

/* Sticky Note Themes */
.note-yellow { background: #fef08a; color: #422006; }
.note-amber  { background: #fed7aa; color: #431407; }
.note-green  { background: #bbf7d0; color: #064e3b; }
.note-blue   { background: #bae6fd; color: #082f49; }
.note-rose   { background: #fecdd3; color: #4c0519; }
.note-purple { background: #e9d5ff; color: #3b0764; }
.note-dark   { background: #2b211b; color: #FAF6F0; }

.sticky-note-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 4px;
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.sticky-note-body {
    flex: 1;
    padding: 8px 12px 14px;
    outline: none;
    word-break: break-word;
    white-space: pre-wrap;
    cursor: text;
    line-height: 1.45;
}
.sticky-note-body.font-sans { font-family: 'Inter', sans-serif; font-size: 14px; }
.sticky-note-body.font-serif { font-family: 'Fraunces', serif; font-size: 15px; }
.sticky-note-body.font-handwriting { font-family: 'Caveat', cursive, sans-serif; font-size: 19px; line-height: 1.35; }
.sticky-note-body.font-mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.sticky-note-body.is-bold { font-weight: 700; }
.sticky-note-body.is-italic { font-style: italic; }

/* Transform Gizmo: Rotation stem & Resize corner */
.transform-rotate-handle {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    cursor: grab;
    z-index: 20;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.transform-rotate-stem {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 1.5px;
    height: 12px;
    background: var(--accent);
    transform: translateX(-50%);
}
.transform-resize-handle {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: 2px;
    cursor: nwse-resize;
    z-index: 20;
}

/* Floating Polaroid / Photos & Frames */
.board-photo-frame {
    background: #fff;
    padding: 8px 8px 24px;
    border-radius: 3px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    display: inline-block;
    cursor: grab;
    transition: background 0.15s ease;
}
.board-photo-frame.frame-modern {
    padding: 6px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.board-photo-frame.frame-frameless {
    background: transparent !important;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.board-photo-frame.frame-frameless .board-photo-tape {
    display: none;
}
.board-photo-frame.frame-washi .board-photo-tape {
    background: repeating-linear-gradient(45deg, #fbcfe8, #fbcfe8 6px, #f472b6 6px, #f472b6 12px);
    border: none;
    height: 20px;
    width: 70px;
    opacity: 0.9;
}
.board-photo-tape {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 60px;
    height: 18px;
    background: rgba(254, 243, 199, 0.7);
    border: 1px dashed rgba(217, 119, 6, 0.3);
    border-radius: 2px;
    pointer-events: none;
}
.board-photo-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 2px;
    pointer-events: none;
}
.photo-zoom-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(43, 33, 27, 0.75);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform 0.15s;
    z-index: 10;
}
.photo-zoom-btn:hover {
    transform: scale(1.15);
    background: rgba(43, 33, 27, 0.95);
}

/* Pin Styles */
.board-pin-item {
    position: absolute;
    cursor: pointer;
    z-index: 15;
    transition: transform 0.1s;
}
.board-pin-item.pin-3d {
    width: 24px;
    height: 32px;
    filter: drop-shadow(2px 6px 5px rgba(0, 0, 0, 0.3));
}
.board-pin-item.pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    border: 2.5px solid #fff;
}
.board-pin-item.pin-tack {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 1.5px solid rgba(0,0,0,0.2);
}
.board-pin-item:hover {
    transform: scale(1.18);
}

/* Fullscreen Lightbox Modal */
.board-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 14, 11, 0.88);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}
.board-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}
.board-lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    object-fit: contain;
}
.board-lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #2b211b;
    border: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Brush Options Popover */
.board-brush-popover {
    position: absolute;
    bottom: 70px;
    left: 50%;
    background: rgba(255, 253, 250, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: 0 12px 32px rgba(43, 33, 27, 0.16);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 60;
    min-width: 250px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px) scale(0.97);
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.board-brush-popover.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}
.brush-type-row {
    display: flex;
    gap: 6px;
}
.brush-type-btn {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
}
.brush-type-btn:hover {
    background: var(--surface-2);
}
.brush-type-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Color Wheel / Color Picker Control */
.color-picker-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.color-circle-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    padding: 0;
    transition: transform 0.12s;
}
.color-circle-btn:hover {
    transform: scale(1.15);
}
.color-circle-btn.active {
    border-color: #2b211b;
    transform: scale(1.12);
}
.board-color-wheel-wrap {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
.board-color-wheel-input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Assisted Draw Toggle */
.assist-draw-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.assist-draw-toggle input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
}

/* Contextual Mini-Inspector */
.board-inspector {
    position: absolute;
    transform: translate(-50%, -100%);
    margin-top: -12px;
    background: rgba(255, 253, 250, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    box-shadow: 0 8px 24px rgba(43, 33, 27, 0.14);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 55;
    pointer-events: auto;
}
.inspector-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.inspector-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}
.inspector-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.inspector-slider-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}
.inspector-slider-wrap input[type="range"] {
    width: 60px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Home Page Note Board Quick-Launch Card */
.home-board-card {
    border-left: 4px solid var(--accent);
    transition: transform var(--transition), box-shadow var(--transition);
}
.home-board-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ── Legal pages ───────────────────────────────────────────────────────── */
.legal-content { max-width: 720px; }
.legal-content h2 { font-size: 17px; margin: 24px 0 8px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 14.5px; margin: 16px 0 6px; color: var(--text-secondary); }
.legal-content p { margin-bottom: 10px; line-height: 1.7; color: var(--text-secondary); }
.legal-content ul { margin: 6px 0 12px 20px; }
.legal-content li { margin-bottom: 6px; line-height: 1.7; color: var(--text-secondary); }
.legal-content strong { color: var(--text); }

/* Streak/XP chip in the sidebar */
.stat-chip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 10px 11px;
    margin-bottom: 10px;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    font-size: 13px;
}
.stat-chip strong { font-size: 15px; }

#main {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr;
    align-content: start;
    padding: 36px 40px 64px;
}
/* Auth screens centre themselves in the same grid - this is what the old
   `margin:auto` on a non-flex parent failed to do. */
#main.centered { align-content: center; justify-items: center; padding: 24px; }

.page {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
.page-wide { max-width: 1180px; }

/* ── Typography ────────────────────────────────────────────────────────── */
h1 {
    font-family: var(--font-display);
    font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
}
h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 16px; font-weight: 600; }
.muted { color: var(--text-secondary); }
.tiny { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }

.page-head { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }

/* ── Home: greeting, one box, a quiet line underneath ──────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.home-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding: 6vh 0 10px;
    text-align: center;
}
.home-greeting {
    font-family: var(--font-display);
    font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25;
}
.home-greeting span { color: var(--text-secondary); font-weight: 500; }

.home-box {
    width: 100%;
    max-width: 620px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: 8px 8px 8px 18px;
    box-shadow: var(--shadow-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.home-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.home-box textarea {
    flex: 1;
    border: none; background: none; box-shadow: none;
    padding: 9px 0;
    min-height: 0;
    max-height: 200px;
    resize: none;
    line-height: 1.5;
}
.home-box textarea:focus { border: none; box-shadow: none; }
.home-send {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border: none; border-radius: 50%;
    background: var(--accent); color: #FFF8F4;
    font-size: 17px; line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.home-send:hover { background: var(--accent-hover); }

.home-underline { display: flex; align-items: center; gap: 8px; }
.link-btn {
    border: none; background: none; padding: 0;
    color: var(--accent); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--accent-hover); }

/* Everything that is not the box lives below it, quietly. */
.home-rest { display: flex; flex-direction: column; gap: 18px; }
.home-rest-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }

/* ── Sheet: a centred panel on desktop, a bottom sheet on phones ───────── */
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(43, 33, 27, 0.34);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.sheet {
    width: 100%;
    max-width: 520px;
    max-height: 84vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    text-align: left;
}
@media (max-width: 620px) {
    .sheet-backdrop { align-items: flex-end; padding: 0; }
    .sheet {
        max-width: none;
        max-height: 88dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    }
}

/* A section you can fold away - used for the full subject catalogue, which
   should not be the first thing you see on your own subjects page. */
.browse-all {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 16px 18px;
}
.browse-all > summary {
    cursor: pointer;
    list-style: none;
    display: flex; flex-direction: column; gap: 2px;
}
.browse-all > summary::-webkit-details-marker { display: none; }
.browse-all > summary::after {
    content: "Show all";
    color: var(--accent);
    font-size: 13px;
    margin-top: 6px;
}
.browse-all[open] > summary::after { content: "Hide"; }

/* ── The card browser ──────────────────────────────────────────────────── */
.card-filters {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

.selection-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    position: sticky; top: 10px; z-index: 15;
}

.card-row {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 13px 14px;
    margin-bottom: 8px;
    transition: border-color var(--transition), background var(--transition);
}
.card-row:hover { border-color: var(--border-strong); }
.card-row.picked { border-color: var(--accent); background: var(--accent-soft); }
.card-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card-row-text strong { overflow-wrap: anywhere; }
.card-row-text p { overflow-wrap: anywhere; }
.card-row-meta { color: var(--text-mute); }
.card-row-actions { display: flex; gap: 2px; flex-shrink: 0; }
.card-row[data-editing="1"] { border-color: var(--accent); background: var(--surface); }
.card-editor { width: 100%; }
.card-editor textarea { min-height: 0; }

.paper-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 13.5px; }
.paper-links a { overflow-wrap: anywhere; }

/* ── Note cards ────────────────────────────────────────────────────────── */
.note-card {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 15px 16px;
    color: var(--text);
    min-width: 0;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.note-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); text-decoration: none; }
.note-card strong { overflow-wrap: anywhere; }
.note-card-body {
    color: var(--text-secondary);
    font-size: 13.5px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Revision methods ──────────────────────────────────────────────────── */
.method-tile {
    display: flex; flex-direction: column; gap: 6px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 15px 16px;
    cursor: pointer;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.method-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.method-tile.active { border-color: var(--accent); background: var(--accent-soft); }
.method-tile p { white-space: normal; }
.method-best { color: var(--text-mute); }

.activity-task {
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    line-height: 1.65;
}
.activity-task p { margin: 0 0 8px; }
.activity-task > :last-child { margin-bottom: 0; }

.activity-score {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.activity-score strong { font-family: var(--font-display); font-size: 30px; }
.activity-score.good { background: var(--success-soft); color: var(--success); }
.activity-score.ok { background: var(--info-soft); color: var(--info); }
.activity-score.low { background: var(--accent-soft); color: var(--accent); }
.activity-feedback { line-height: 1.65; }
.activity-feedback p { margin: 0 0 8px; }
.activity-answer {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text-secondary);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.tick-list, .cross-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tick-list li, .cross-list li { padding-left: 22px; position: relative; font-size: 14px; }
.tick-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); }
.cross-list li::before { content: "\2717"; position: absolute; left: 0; color: var(--danger); }

/* ── Mock exam / prelim (/exam/:id) ───────────────────────────────────── */
.exam-question textarea { min-height: 140px; }
.exam-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.exam-option:hover { border-color: var(--border-strong); }
.exam-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.exam-option input { margin-top: 3px; accent-color: var(--accent); }
.exam-option-dontknow { color: var(--text-mute); font-style: italic; }

/* The highlighter pen (see exam.js's setupHighlighter) - a registered CSS
   Custom Highlight, not a wrapped element, so it never touches the question
   markup itself. */
::highlight(examHighlight) {
    background-color: #fef08a;
    color: #422006;
}
#exam-highlighter-toggle.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
.exam-answer-mode-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.exam-answer-mode-row [data-mode-btn].is-active {
    color: var(--accent);
    font-weight: 600;
}
.exam-photo-answer { margin-top: 8px; }
.exam-photo-thumb-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.exam-photo-thumb {
    max-width: 160px;
    max-height: 160px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    object-fit: contain;
}

/* Ruled blank space for a handwritten answer - invisible on screen (the
   textarea is what you actually type into there), shown only when printed,
   in place of the textarea itself (see the print rules below). */
.exam-write-lines {
    display: none;
}

/* Printing a paper copy to write on by hand: strip every bit of app chrome
   down to the paper itself. */
@media print {
    #sidebar, #sidebar-backdrop, #tabbar, #mobile-header, .no-print {
        display: none !important;
    }
    #main, #main.centered { padding: 0 !important; margin: 0 !important; }
    .exam-page { max-width: none !important; }
    body, .card, .exam-question { background: #fff !important; box-shadow: none !important; }
    .exam-question {
        border: 1px solid #999 !important;
        break-inside: avoid;
    }
    .exam-question textarea { display: none !important; }
    .exam-question[data-type="written"] .exam-write-lines {
        display: block;
        height: 170px;
        margin-top: 6px;
        background-image: repeating-linear-gradient(
            to bottom, transparent, transparent 27px, #999 28px
        );
    }
    ::highlight(examHighlight) {
        /* A solid fill can print as a grey/black smear - an underline reads
           just as clearly on paper and never fights the ink. */
        background-color: transparent;
        text-decoration: underline;
        text-decoration-color: #C4643C;
        text-decoration-thickness: 2px;
    }
}

/* Match-up: two columns of tiles you pair off. */
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-col { display: flex; flex-direction: column; gap: 8px; }
.match-tile {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    text-align: left;
    font-size: 13.5px;
    line-height: 1.4;
    cursor: pointer;
    min-height: 44px;
    transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}
.match-tile:hover { border-color: var(--accent); }
.match-tile.picked { background: var(--accent-soft); border-color: var(--accent); }
.match-tile.done { opacity: 0.3; cursor: default; }
.match-tile.wrong { background: var(--danger-soft); border-color: var(--danger); }

/* ── Cards + grids ─────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.card-tight { padding: 16px; }
.card h2, .card h3 { margin-bottom: 4px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}
.tile .tile-value { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.1; }
.tile .tile-label { font-size: 13px; color: var(--text-secondary); }

.subject-card {
    display: flex; flex-direction: column; gap: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 15px 16px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    min-width: 0;
}
.subject-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}
.subject-card strong { font-size: 15px; overflow-wrap: anywhere; }
.level-tag {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.field-hint { font-size: 12.5px; color: var(--text-mute); }
.field-error { font-size: 12.5px; color: var(--danger); }

/* Every control fills its box and can shrink - this is the fix for inputs
   overflowing their card on narrow screens. */
input, select, textarea {
    width: 100%;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input:disabled, textarea:disabled, select:disabled { background: var(--surface-2); color: var(--text-mute); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
input[type="file"] { padding: 8px; background: var(--surface-2); border-style: dashed; cursor: pointer; }
input[type="date"] { appearance: none; }

form { min-width: 0; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--accent);
    color: #FFF8F4;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 14.5px; font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn.secondary:hover { background: var(--surface-2); }
.btn.ghost { background: transparent; color: var(--text-secondary); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
/* Colour as well as background, and last, so it wins whichever modifier it is
   combined with. `.btn.ghost.danger` used to keep ghost's dark brown text on
   danger's dark red fill - about 1.3:1, unreadable. */
.btn.danger, .btn.ghost.danger, .btn.secondary.danger {
    background: var(--danger);
    color: #FFF8F4;
    border-color: transparent;
}
.btn.danger:hover, .btn.ghost.danger:hover, .btn.secondary.danger:hover {
    background: #8F3A32;
    color: #FFF8F4;
}
.btn.small { padding: 7px 13px; font-size: 13.5px; }

/* ── Feedback ──────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 12.5px; font-weight: 500;
}
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.warn { background: var(--danger-soft); color: var(--danger); }

.banner {
    border-radius: var(--radius-md);
    padding: 12px 15px;
    font-size: 14px;
    border: 1px solid transparent;
}
.banner.error { background: var(--danger-soft); color: var(--danger); border-color: rgba(168, 68, 59, 0.2); }
.banner.info { background: var(--info-soft); color: var(--info); border-color: rgba(74, 107, 133, 0.2); }
.banner.ok { background: var(--success-soft); color: var(--success); border-color: rgba(79, 122, 82, 0.22); }

/* Only this one banner is ever shown/hidden after render (the 4-hour-limit
   warning) - scoped by id rather than changing .banner, which is mostly
   used for banners that are simply always there. */
#warning-4hr {
    max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0;
    border-width: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease,
        padding 0.2s ease, margin-top 0.2s ease, border-width 0.2s ease;
}
#warning-4hr.open {
    max-height: 200px; padding-top: 12px; padding-bottom: 12px; margin-top: 4px;
    border-width: 1px; opacity: 1;
}

.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}

.spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Progress ──────────────────────────────────────────────────────────── */
.progress {
    height: 8px;
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
}
.progress > span {
    display: block; height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.ring { display: grid; place-items: center; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-label {
    position: absolute;
    font-family: var(--font-display);
    font-size: 20px; font-weight: 600;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: 9px 14px;
    border: none; background: none;
    color: var(--text-secondary);
    font-size: 14.5px;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
    padding: 6px 13px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 999px;
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent); color: #FFF8F4; border-color: var(--accent); }

/* ── Auth screens ──────────────────────────────────────────────────────── */
.auth-screen {
    width: min(420px, 100%);
    display: flex; flex-direction: column; gap: 18px;
}
.auth-screen .logo { justify-content: center; margin-bottom: 0; }
.auth-screen h1 { text-align: center; font-size: 27px; }
.auth-screen .card { display: flex; flex-direction: column; gap: 14px; }
.auth-foot { text-align: center; font-size: 14px; color: var(--text-secondary); }

/* ── Chat (AI tutor) ───────────────────────────────────────────────────── */
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.chat-msg { padding: 11px 14px; border-radius: var(--radius-md); max-width: 85%; overflow-wrap: anywhere; }
.chat-msg.user { background: var(--accent-soft); color: var(--text); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg.assistant { background: var(--surface-2); align-self: flex-start; white-space: pre-wrap; border-bottom-left-radius: 4px; }

/* ── Quiz + flashcards ─────────────────────────────────────────────────── */
.quiz-option {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all var(--transition);
}
.quiz-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.quiz-option.correct { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.quiz-option.incorrect { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.flashcard {
    display: grid; place-items: center;
    min-height: 260px;
    padding: 32px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
    font-size: 19px;
    line-height: 1.5;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.flashcard .face-label {
    position: absolute; top: 14px; left: 18px;
    font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-mute);
}
.flashcard-wrap { position: relative; }
.grade-row { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); }
.grade-row .btn { padding: 12px 6px; font-size: 13.5px; }

/* ── Timer ─────────────────────────────────────────────────────────────── */
.timer {
    font-family: var(--mono);
    font-size: 34px; font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.timer.low { color: var(--danger); }

/* ── Tables / lists ────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; }
.list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}
.list-item:last-child { border-bottom: none; }
.list-item .grow { flex: 1; min-width: 0; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute); font-weight: 600; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
#mobile-header {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: 56px;
    align-items: center; justify-content: space-between;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
#mobile-header .logo { margin: 0; padding: 0; font-size: 17px; }
#menu-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: none; background: none;
    border-radius: var(--radius-sm);
    font-size: 20px; cursor: pointer;
}
#menu-btn:hover { background: var(--surface-2); }
#sidebar-backdrop { display: none; }

/* ── Bottom tab bar (phones) ───────────────────────────────────────────── */
#tabbar { display: none; }
@media (max-width: 880px) {
    #tabbar {
        display: grid;
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 46;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
    }
    #tabbar .tab {
        flex-direction: column;
        gap: 2px;
        justify-content: center;
        height: var(--tabbar-h);
        padding: 6px 4px;
        border-radius: 0;
        font-size: 11.5px;
        text-align: center;
    }
    #tabbar .tab .nav-icon { font-size: 17px; width: auto; opacity: 1; }
    #tabbar .tab.active { background: none; color: var(--accent); font-weight: 600; }
    #tabbar .tab:hover { background: none; }
}

@media (max-width: 880px) {
    #mobile-header { display: flex; }
    #sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
        transform: translateX(-100%);
        transition: transform var(--transition);
        box-shadow: var(--shadow-lg);
    }
    body.sidebar-open #sidebar { transform: translateX(0); }
    body.sidebar-open #sidebar-backdrop {
        display: block;
        position: fixed; inset: 0; z-index: 45;
        background: rgba(43, 33, 27, 0.35);
    }
    /* The tab bar replaces the top header on phones, so the page starts at
       the top of the screen and ends above the bar. */
    #mobile-header { display: none; }
    #main { padding: 18px 16px calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
    #main.centered { padding: 24px 16px calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
    h1 { font-size: 25px; }
    .page { gap: 18px; }
    .card { padding: 16px; border-radius: var(--radius-md); }
    .grid, .grid-2 { grid-template-columns: 1fr; }
    .grid-stats { grid-template-columns: repeat(2, 1fr); }
    /* Nothing scrolls the page sideways - wide things scroll inside. */
    .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 520px; }
    .grade-row { grid-template-columns: repeat(2, 1fr); }
    #public-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
    .public-header-actions { flex-wrap: wrap; }
}

@media (max-width: 880px) {
    /* Under 16px iOS zooms the whole page in on focus and never zooms back. */
    input, select, textarea { font-size: 16px; padding: 12px; }
    .btn { min-height: 44px; padding: 11px 18px; }
    .btn.small { min-height: 38px; }
    .chip { min-height: 38px; }
    .row-between { align-items: flex-start; }
}

@media (max-width: 420px) {
    .grid-stats { grid-template-columns: 1fr; }
    h1 { font-size: 23px; }
}

/* ===========================================================================
   Full-screen study chat  (/chat/:id)
   ---------------------------------------------------------------------------
   The chat is the whole page: a scrolling transcript that grows and a composer
   pinned to the bottom. `.chat-shell` cancels #main's page padding with equal
   negative margins so the conversation runs edge to edge and the composer sits
   on the viewport floor - if #main's padding ever changes, these must follow.
   Everything below is additive; the older .chat-log / .chat-msg rules still
   belong to the per-subject tutor on the subject page.
   =========================================================================== */

.chat-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    margin: -36px -40px -64px;
    min-width: 0;
    background: var(--bg);
}

/* ── Title bar ─────────────────────────────────────────────────────────── */
.chat-top {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}
.chat-top .chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-top .chat-title strong {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-top .chat-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-back {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 18px; line-height: 1;
    text-decoration: none;
}
.chat-back:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

/* ── Transcript ────────────────────────────────────────────────────────── */
.chat-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 22px 20px 10px;
}
.chat-thread {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex; flex-direction: column; gap: 18px;
    min-width: 0;
}
.chat-row { display: flex; flex-direction: column; gap: 9px; max-width: 88%; min-width: 0; }
.chat-row.me { align-self: flex-end; align-items: flex-end; }
.chat-row.ai { align-self: stretch; align-items: stretch; max-width: 100%; }

.chat-bubble {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    line-height: 1.68;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
}
.chat-row.me .chat-bubble {
    background: var(--accent-soft);
    color: var(--text);
    border-bottom-right-radius: 6px;
}
.chat-row.ai .chat-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 6px;
    box-shadow: var(--shadow-sm);
    align-self: flex-start;
}
/* Once the words have landed the bubble holds real markup, so pre-wrap would
   double every gap. It only applies while the plain text is being typed. */
.chat-row.ai .chat-bubble:not(.chat-typing) { white-space: normal; }

/* Rendered markdown, wherever it appears - a chat bubble, a teaching step, a
   revision task. These used to live under .chat-bubble alone, so a list inside
   a teaching step lost its indent to the global padding reset and its numbers
   hung outside the card. */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; }
.md h3, .md h4, .md h5, .md h6 {
    margin: 16px 0 6px;
    font-size: 1rem;
    line-height: 1.35;
}
.md ul, .md ol { margin: 0 0 10px; padding-left: 24px; }
.md li { margin: 3px 0; padding-left: 2px; }
.md code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 0.92em;
    overflow-wrap: anywhere;
}
.md pre {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    overflow-x: auto;
    margin: 0 0 10px;
}
.md pre code { background: none; border: 0; padding: 0; }
.md blockquote {
    margin: 0 0 10px;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--accent-soft);
    color: var(--text-secondary);
}
.md hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.md strong { font-weight: 600; }
.chat-bubble.is-empty { display: none; }

/* The AI asking a question, with tappable answers. */
.chat-ask { display: flex; flex-direction: column; gap: 8px; }
.chat-step-title { font-size: 0.95rem; }
.chat-step-body { color: var(--text); line-height: 1.65; }
/* The check question, set apart from the teaching above it. */
.chat-check {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.chat-ask-q { margin: 0; font-weight: 600; }
.chat-ask-options { display: flex; flex-wrap: wrap; gap: 8px; }
/* Quiet by default: these are the AI's suggestions, not the page's main
   action, and they must not compete with Send. */
.chat-ask-options .btn {
    min-height: 40px;
    flex: 1 1 auto;
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    font-weight: 500;
}
.chat-ask-options .btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chat-ask-options .btn:disabled { opacity: 0.55; }
.chat-ask-options .btn.active { opacity: 1; background: var(--accent); color: #fff; border-color: var(--accent); }

.chat-bubble.chat-typing { cursor: pointer; }
.chat-bubble.chat-typing::after {
    content: "";
    display: inline-block;
    width: 2px; height: 1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: var(--accent);
    animation: chat-caret 1s steps(1) infinite;
}
@keyframes chat-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* AI thinking: three dots that breathe, sized like a real bubble so the
   layout does not jump when the answer replaces them. */
.chat-thinking {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-bottom-left-radius: 6px;
    box-shadow: var(--shadow-sm);
    max-width: 100%;
}
.chat-thinking i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-mute);
    animation: chat-pulse 1.25s ease-in-out infinite;
    flex-shrink: 0;
}
.chat-thinking i:nth-child(2) { animation-delay: 0.16s; }
.chat-thinking i:nth-child(3) { animation-delay: 0.32s; }
@keyframes chat-pulse {
    0%, 65%, 100% { opacity: 0.28; transform: translateY(0) scale(0.85); }
    32% { opacity: 1; transform: translateY(-3px) scale(1); }
}
/* Live thinking indicator: stage messages and live timer */
.chat-thinking-label {
    font-size: 13px;
    color: var(--text-mute);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.chat-thinking-label:empty { display: none; }
.chat-thinking-text {
    color: var(--text-subtle, var(--text-mute));
    transition: opacity 0.15s ease;
}
.chat-thinking-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-mute);
    opacity: 0.8;
}

/* ── Action / tool cards under an answer ───────────────────────────────── */
.chat-widgets { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chat-widgets:empty { display: none; }

.chat-widget {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 13px 14px;
    display: flex; flex-direction: column; gap: 10px;
    min-width: 0;
}
.chat-widget.undone { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.chat-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chat-widget-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-widget-text strong { font-size: 14.5px; overflow-wrap: anywhere; }
.chat-widget .struck { text-decoration: line-through; color: var(--text-mute); overflow-wrap: anywhere; }
.chat-widget-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-widget-buttons .btn { flex: 0 1 auto; }

/* AI-drawn diagrams - boxes and arrows built from show_diagram, no graph library. */
.diagram-title { font-size: 14.5px; }
.diagram-chain, .diagram-nodes {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 2px;
}
.diagram-edges { display: flex; flex-direction: column; gap: 10px; }
.diagram-edge-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diagram-edge-targets { display: flex; flex-direction: column; gap: 6px; }
.diagram-edge-target { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.diagram-node {
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 7px 11px;
    font-size: 13px; font-weight: 600;
    color: var(--text);
}
.diagram-arrow {
    display: inline-flex; flex-direction: column; align-items: center;
    color: var(--accent); font-size: 16px; font-weight: 600;
    padding: 0 4px; line-height: 1;
}
.diagram-arrow em {
    font-style: normal; font-size: 10.5px; font-weight: 500;
    color: var(--text-mute); margin-top: 2px; white-space: nowrap;
}

/* A cycle drawn as an actual ring - SVG arcs underneath, HTML nodes/labels on top. */
.diagram-circle {
    position: relative;
    width: 100%; max-width: min(320px, 84vw);
    aspect-ratio: 1 / 1;
    margin: 10px auto 34px;
}
.diagram-circle-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.diagram-circle-path { fill: none; stroke: var(--accent); stroke-width: 1.3; }
.diagram-circle-arrowhead { fill: var(--accent); }
.diagram-circle-node {
    position: absolute; transform: translate(-50%, -50%);
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 7px 11px;
    max-width: 96px;
    font-size: 12.5px; font-weight: 600; line-height: 1.2;
    color: var(--text);
    text-align: center;
}
.diagram-circle-edge-label {
    position: absolute; transform: translate(-50%, -50%);
    max-width: 84px;
    font-size: 10.5px; font-weight: 500; line-height: 1.15;
    color: var(--text-mute);
    text-align: center;
}
.diagram-circle-dense .diagram-circle-node {
    max-width: 78px; padding: 6px 8px; font-size: 11.5px;
}
.diagram-circle-dense .diagram-circle-edge-label { max-width: 68px; font-size: 10px; }

/* sqa.world's fortnightly $ allowance - a fill bar instead of a bare number. */
.sqa-usage-meter { display: flex; flex-direction: column; gap: 6px; }
.meter-track {
    height: 8px; border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.meter-fill {
    height: 100%; border-radius: 999px;
    background: var(--accent);
    transition: width var(--transition);
}
.meter-fill-warn { background: var(--danger); }
.meter-fill-unlimited { background: var(--success); }

.chat-panel {
    border-top: 1px dashed var(--border-strong);
    padding-top: 12px;
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
}
.chat-panel[hidden] { display: none; }

/* Compact flashcard face for the in-chat study game. */
.chat-face {
    display: grid; place-items: center;
    min-height: 128px;
    padding: 20px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 16.5px; line-height: 1.5;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.chat-face:hover { border-color: var(--border-strong); }
.chat-face-label {
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-mute);
}
.chat-quiz-q { font-size: 15.5px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.chat-quiz-options { display: flex; flex-direction: column; gap: 8px; }
.chat-quiz-options .quiz-option { overflow-wrap: anywhere; white-space: normal; }

/* ── Empty state for a brand-new chat ──────────────────────────────────── */
.chat-hero { text-align: center; padding: 46px 6px 10px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.chat-hero h2 { font-size: 23px; }
.chat-hero p { color: var(--text-secondary); max-width: 46ch; }
.chat-suggests { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.chat-suggests .chip { white-space: normal; text-align: left; max-width: 100%; }

/* ── Composer dock ─────────────────────────────────────────────────────── */
.chat-dock {
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.chat-dock-inner {
    max-width: 760px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0;
}
.chat-composer {
    display: flex; align-items: flex-end; gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 6px;
    min-width: 0;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.chat-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

textarea.chat-input {
    flex: 1;
    /* 16px keeps iOS from zooming the whole chat in when the box is focused. */
    font-size: 16px;
    min-width: 0;
    min-height: 24px;
    max-height: 150px;
    padding: 8px 4px;
    border: none;
    background: none;
    box-shadow: none;
    resize: none;
    line-height: 1.5;
    overflow-y: auto;
}
textarea.chat-input:focus { border: none; box-shadow: none; }
textarea.chat-input:disabled { background: none; color: var(--text-mute); }

.chat-icon-btn {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 17px; line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.chat-icon-btn:hover { background: var(--surface-3); color: var(--text); }
.chat-icon-btn.send { background: var(--accent); color: #FFF8F4; }
.chat-icon-btn.send:hover { background: var(--accent-hover); }
.chat-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-icon-btn .spinner {
    width: 16px; height: 16px;
    border-color: rgba(255, 248, 244, 0.45);
    border-top-color: #FFF8F4;
}

.chat-underrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-underrow .grow { flex: 1; min-width: 0; }
.chat-model { min-width: 0; }
.chat-model > summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    list-style: none;
    font-size: 12.5px;
    color: var(--text-mute);
    cursor: pointer;
}
.chat-model > summary::-webkit-details-marker { display: none; }
.chat-model > summary::marker { content: ""; }
.chat-model > summary:hover { background: var(--surface-2); color: var(--text-secondary); }
.chat-model-body {
    margin-top: 8px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: var(--radius-md);
}

/* ── Chat list (/chat) ─────────────────────────────────────────────────── */
.chat-thread-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; }
.chat-thread-link:hover { text-decoration: none; }

/* ── The chats list ────────────────────────────────────────────────────── */
.chat-list-heading {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    margin: 18px 0 8px;
}
.chat-list-heading:first-child { margin-top: 0; }

.chat-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.chat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.chat-card-main {
    flex: 1;
    min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 4px 14px 16px;
    color: var(--text);
}
.chat-card-main:hover { text-decoration: none; }
.chat-card-main strong { overflow-wrap: anywhere; }
.chat-card-preview {
    color: var(--text-secondary);
    font-size: 13.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-card-expiry { color: var(--danger); }

.chat-card-menu { position: relative; padding: 10px 10px 0 0; }
.icon-btn {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: none; background: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 18px; line-height: 1;
    cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.menu-pop {
    position: absolute; right: 8px; top: 44px; z-index: 20;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    min-width: 150px;
}
.menu-item {
    display: block; width: 100%;
    padding: 9px 11px;
    border: none; background: none;
    border-radius: 7px;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.chat-thread-link strong { overflow-wrap: anywhere; }

/* ── Narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 880px) {
    /* Pinned to the screen between the top and the tab bar.
       It used to be sized: negative margins cancelling #main's padding, a
       100dvh calculation, and a JS measurement of visualViewport, all three
       guessing at the same number. On iOS Safari they disagreed and the chat
       came out around half height with dead space under the composer.
       Anchoring it to the same edges the tab bar already uses removes the
       arithmetic entirely - there is nothing left to get wrong.
       With a keyboard up, chat.js overrides top/height (see there). */
    .chat-shell {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
        margin: 0;
        height: auto;
        z-index: 30;
    }
    /* The page behind a pinned chat must not scroll under it. */
    body.chat-open { overflow: hidden; }

    /* With the keyboard up there is no room for the tab bar and nowhere for it
       to sit - fixed elements track the layout viewport, so it would float in
       the middle of the screen. chat.js measures the keyboard and takes over
       the shell's top and height while this is set. */
    body.keyboard-open #tabbar { display: none; }
    .chat-top { padding: 9px 12px; }
    .chat-scroll { padding: 16px 14px 8px; }
    .chat-thread { gap: 15px; }
    .chat-row { max-width: 94%; }
    /* The shell already stops above the tab bar, which carries the safe
       area inset - adding it again here would double the gap. */
    .chat-dock { padding: 8px 12px; }
    .chat-hero { padding: 28px 4px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-thinking i { animation: none; opacity: 0.55; }
    .chat-bubble.chat-typing::after { display: none; }
}

/* The composer stack: chips, the box itself, then the model row. Empty slots
   (no files chosen, no error) collapse so they cost no space. */
.chat-composer-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chat-composer-wrap > :empty { display: none; }
.chat-dock-inner > div:empty { display: none; }

/* A widget's words get a full line of their own before its buttons wrap
   underneath - narrow screens must never squeeze the summary into a column. */
.chat-widget-text { flex: 1 1 200px; }
@media (max-width: 520px) {
    .chat-underrow .chat-hint { display: none; }
}

/* A pointer left resting over an answered question must not repaint an option
   it never picked - the graded colours are the only ones that mean anything. */
.chat-quiz-options .quiz-option[disabled]:not(.correct):not(.incorrect):hover {
    border-color: var(--border-strong);
    background: var(--surface);
    cursor: default;
}

/* ── Modern Navigation & SVG Icons ─────────────────────────────────────── */
.nav-svg-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform var(--transition), stroke var(--transition);
}
.nav-item:hover .nav-svg-icon { transform: scale(1.08); }
.nav-item.active .nav-svg-icon { stroke: var(--accent); }

/* Sidebar nested subject accordion */
.nav-accordion { display: flex; flex-direction: column; width: 100%; }
.nav-accordion-header {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.nav-chevron {
    width: 14px; height: 14px; opacity: 0.6;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-group.open .nav-chevron,
.nav-sub-group.open .nav-chevron { transform: rotate(90deg); }

/* Both lists sit collapsed (max-height:0) until their parent .nav-group /
   .nav-sub-group carries .open - the chevron rotation above and this
   collapse share the same trigger, so they always animate together
   instead of the list just popping open. */
.nav-sub-list {
    display: flex; flex-direction: column; gap: 2px;
    padding-left: 12px;
    max-height: 0; margin-top: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin-top 0.2s ease;
}
.nav-group.open > .nav-sub-list {
    max-height: 600px; margin-top: 2px; opacity: 1;
}
.nav-sub-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px 6px 14px;
    font-size: 13.5px; color: var(--text-secondary);
    border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.nav-sub-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-sub-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.nav-topic-list {
    display: flex; flex-direction: column; gap: 1px;
    padding-left: 14px;
    max-height: 0; margin-top: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin-top 0.2s ease;
}
.nav-sub-group.open > .nav-topic-list {
    max-height: 400px; margin-top: 1px; opacity: 1;
}
.nav-topic-link {
    display: block; font-size: 12px; color: var(--text-mute);
    padding: 4px 8px; border-radius: 4px; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-topic-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }

/* ── Circular Usage Meter ─────────────────────────────────────────────── */
.usage-meter-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: transform var(--transition), filter var(--transition);
    outline: none; flex-shrink: 0;
}
.usage-meter-btn:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}
.usage-meter-svg {
    transform: rotate(-90deg);
}
.usage-meter-bg {
    stroke: var(--border-strong);
    opacity: 0.5;
}
.usage-meter-bar {
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}
.usage-meter-text {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    fill: var(--text);
    transform: rotate(90deg);
    transform-origin: center;
}
.usage-meter-lg .usage-meter-text { font-family: var(--font-display); }
.usage-meter-btn.unlimited .usage-meter-bar { animation: usage-unlimited-pulse 2.6s ease-in-out infinite; }
@keyframes usage-unlimited-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.usage-modal-hero {
    display: flex; align-items: center; gap: 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 16px 18px; border-radius: var(--radius-md);
}
.usage-modal-circle-wrap { flex-shrink: 0; }

/* ── Overhauled Auth Screens ───────────────────────────────────────────── */
.auth-wrapper {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.auth-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent-soft); color: var(--accent);
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    letter-spacing: 0.02em; align-self: center;
}
.auth-card-elevated {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(196, 100, 60, 0.05);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.auth-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-header h1 {
    font-size: 26px;
}
.field-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.field-icon {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: var(--text-mute);
    pointer-events: none;
}
.field-with-icon input {
    padding-left: 38px;
}
.auth-foot {
    text-align: center;
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* ── Settings Tabs ─────────────────────────────────────────────────────── */
.settings-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 6px;
    overflow-x: auto;
}
.settings-tab-btn {
    border: none; background: none;
    padding: 8px 14px;
    font-size: 14px; font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.settings-tab-btn:hover { background: var(--surface-2); color: var(--text); }
.settings-tab-btn.active {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
}