/**
 * Main application styles (reset, layout, chat UI, components)
 * 
 * Extracted from index.html (inline <style> that began at line 1632).
 * Stylesheet order matters (cascade); index.html links the files in numeric order.
 * See assets/README.md.
 */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Typeset fractions (replaces plain a/b) ── */
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  font-size: 0.85em;
  line-height: 1.1;
  margin: 0 0.1em;
}
/* ── Display math block ($$...$$) and inline math ($...$) ── */
.acaz-display-math {
  display: block;
  text-align: center;
  font-size: 1.1em;
  margin: 10px 0;
  padding: 8px 16px;
  background: rgba(26,115,232,0.04);
  border-radius: 10px;
  border-left: 3px solid rgba(26,115,232,0.3);
  overflow-x: auto;
}
.acaz-inline-math {
  display: inline;
  font-size: 1em;
}

/* ── Chat message superscripts (from ^N notation or <sup> tags) ── */
.chat-body sup, .message-body sup,
.step-body sup, .step-content sup {
  font-size: 0.72em;
  line-height: 0;
  position: relative;
  vertical-align: super;
  font-weight: 600;
  color: inherit;
}
.chat-body sub, .message-body sub,
.step-body sub, .step-content sub {
  font-size: 0.72em;
  line-height: 0;
  position: relative;
  vertical-align: sub;
  font-weight: 600;
  color: inherit;
}

.frac sup, .frac sub {
  font-size: 1em;
  line-height: 1.1;
  vertical-align: baseline;
  display: block;
  text-align: center;
}
.frac .frac-bar {
  width: 100%;
  border-top: 1.5px solid currentColor;
  margin: 1px 0;
}

/* ── Stepped math/solution blocks rendered in the MAIN CHAT bubble ──────
   of unformatted text. ── */
.acaz-chat-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.acaz-chat-step {
  border-radius: 12px;
  background: rgba(26,115,232,0.035);
  border: 1px solid rgba(26,115,232,0.12);
  padding: 10px 14px 12px;
}
.acaz-chat-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: #1a73e8;
}
.acaz-chat-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.acaz-chat-step-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: inherit;
}
.acaz-chat-step-body p { margin: 0 0 6px; }
.acaz-chat-step-body p:last-child { margin-bottom: 0; }
.acaz-chat-final-answer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(34,160,107,0.07);
  border: 1px solid rgba(34,160,107,0.25);
  font-size: 0.9rem;
  line-height: 1.5;
}
.acaz-chat-final-answer b {
  color: #22a06b;
  font-weight: 700;
  flex: none;
}

/* ── Geometric notation: rays, vectors, overlines ───────────────────── */
.acaz-ray-right, .acaz-ray-left, .acaz-line-arrow,
.acaz-overline, .acaz-vec, .acaz-hat {
  display: inline-block;
  position: relative;
  padding-top: 4px;
  font-style: normal;
}
.acaz-ray-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  border-top: 1.5px solid currentColor;
}
.acaz-ray-right::after {
  content: '→';
  position: absolute;
  top: -7px; right: -4px;
  font-size: 0.75em;
  line-height: 1;
}
.acaz-ray-left::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px solid currentColor;
}
.acaz-ray-left::after {
  content: '←';
  position: absolute;
  top: -7px; left: -4px;
  font-size: 0.75em;
}
.acaz-line-arrow::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px solid currentColor;
}
.acaz-line-arrow::after {
  content: '↔';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.75em;
}
.acaz-overline::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px solid currentColor;
}
.acaz-vec::after {
  content: '→';
  position: absolute;
  top: -7px; right: -4px;
  font-size: 0.7em;
}
.acaz-hat::after {
  content: '^';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75em;
}

/* ── Construction active step highlight ── */
._cstr-active {
  filter: drop-shadow(0 0 4px rgba(26,115,232,0.6));
}

/* ── Square root radical (vinculum style) ──────────────────────────── */
.acaz-sqrt {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-style: normal;
  position: relative;
  margin: 0 2px;
}
.acaz-sqrt .acaz-sqrt-sign {
  font-size: 1.18em;
  line-height: 1;
  font-weight: 400;
  display: inline-block;
  margin-right: -2px;
  font-family: 'Times New Roman', Georgia, serif;
  color: inherit;
}
.acaz-sqrt .acaz-sqrt-body {
  display: inline-block;
  border-top: 1.8px solid currentColor;
  padding: 0 3px 0 1px;
  margin-top: 1px;
  font-size: inherit;
  white-space: nowrap;
}
.acaz-sqrt .acaz-sqrt-index {
  font-size: 0.6em;
  vertical-align: super;
  margin-right: 1px;
  font-weight: 600;
}

/* ── Superscripts and subscripts everywhere they appear ── */
sup {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: super;
  font-weight: 700;
  color: inherit;
  letter-spacing: 0;
}
sub {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: sub;
  font-weight: 700;
  color: inherit;
  letter-spacing: 0;
}

/* ── Fraction exponents: a^(1/2) renders as tiny stacked frac in superscript ── */
.frac-sup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75em;
  line-height: 1.1;
  vertical-align: middle;
  margin: 0 0.05em;
}
.frac-sup span {
  display: block;
  text-align: center;
  line-height: 1.15;
}
.frac-sup-bar {
  width: 100%;
  border-top: 1px solid currentColor !important;
  display: block !important;
  margin: 1px 0 !important;
}

:root {
  --bg: #FBF7EF;
  --input-bg: #ffffff;
  --input-border: #E4DAC3;
  --sand: #F3ECDC;
  --text: #191A1C;
  --text-muted: #6B6455;
  --accent: #1B2A5B;
  --accent-hover: #10193B;
  --sky: #6FA0D6;
  --sky-deep: #4A7BB0;
  --ai-text: #1B2230;
  --user-section: #E3EEFA;
  --user-border: #BFDAF2;
  --divider: rgba(70,60,44,0.13);
  --highlight-bg: rgba(255,196,61,0.38);
  --sidebar-w: 320px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --msg-gap: 14px;
}

/* ── Dark theme — toggled by JS via html.acaz-dark ── */
html.acaz-dark {
  --bg: #0f172a;
  --input-bg: #1e293b;
  --input-border: #334155;
  --sand: #1a2744;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #818cf8;
  --accent-hover: #6366f1;
  --ai-text: #cbd5e1;
  --user-section: #1e3a5f;
  --divider: rgba(99,102,241,0.18);
  --highlight-bg: rgba(99,102,241,0.1);
}
html.acaz-dark body { background: var(--bg); color: var(--text); }
html.acaz-dark #topBar { background: #1e293b; border-bottom-color: var(--divider); }
html.acaz-dark #inputArea { background: #1e293b; border-top-color: var(--divider); }
html.acaz-dark #inputBox { background: #0f172a; border-color: #334155; color: var(--text); }
html.acaz-dark .entry.ai-entry { background: #1a2740; }
html.acaz-dark .entry.user-entry { background: #1e3a5f; }

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

body {
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0; left: 0;
}

/* ------------------------------------------------------------
   SIDEBAR STYLES — soft light-blue panel
   ------------------------------------------------------------ */

/* ── Sidebar overlay ──────────────────────────────────────── */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(30,60,100,0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
  -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.open { opacity: 1; pointer-events: all; }
@media (min-width: 900px) {
  .sidebar-overlay.open { transition-duration: 0.2s; }
}

body:has(#sidebar.open) #mathCanvas,
body:has(#sidebar.open) #examCanvas,
body:has(#sidebar.open) #sfCanvas { box-shadow: none !important; }

/* ── Sidebar — soft light-blue panel ──────────────────────────────────────── */
.sidebar {
  --sb-text: #12294a;
  --sb-text-dim: #3a5878;
  --sb-text-faint: #4f6d8d;
  --sb-line: rgba(27,79,146,0.14);
  --sb-line-soft: rgba(27,79,146,0.09);
  --sb-hover: rgba(27,79,146,0.08);
  --sb-active: rgba(27,79,146,0.14);
  --sb-card: rgba(255,255,255,0.62);
  --sb-card-border: rgba(27,79,146,0.13);
  --text: #12294a;
  --text-muted: #4f6d8d;
  --sand: rgba(27,79,146,0.09);
  --sb-pill-bg: rgba(74,123,176,0.13);
  --sb-pill-border: rgba(74,123,176,0.28);
  --sb-glow: rgba(111,160,214,0.35);
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(var(--sidebar-w), 88vw);
  background:
    radial-gradient(120% 65% at 8% -6%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(111,160,214,0.30) 0%, rgba(111,160,214,0) 60%),
    linear-gradient(165deg, #e8f1fc 0%, #dde9f8 45%, #d0e2f6 100%);
  z-index: 101;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22,0.8,0.3,1);
  box-shadow: 10px 0 48px rgba(30,70,120,0.20), 2px 0 10px rgba(30,70,120,0.10);
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid rgba(27,79,146,0.12);
  color: var(--sb-text);
  will-change: transform;
}
.sidebar.open { transform: translateX(0); }
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(27,79,146,0.22); border-radius: 10px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(27,79,146,0.34); }

/* ══════════════════════════════════════════════════════════════════
   DESKTOP / LAPTOP — full-screen panel, not a narrow column.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .sidebar {
    width: 100vw;
    max-width: 100vw;
    transform: translateY(14px) scale(0.985);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22,0.8,0.3,1), opacity 0.3s ease;
    pointer-events: none;
    box-shadow: none;
    border-right: none;
  }
  .sidebar.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
  }
  .sidebar-overlay { display: none; }
}

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 18px 14px;
  border-bottom: 1px solid var(--sb-line);
  flex-shrink: 0;
}
.sidebar-title {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem; font-weight: 600; color: var(--sb-text);
  letter-spacing: -0.01em;
}
.sidebar-close {
  background: rgba(255,255,255,0.75); border: 1.5px solid rgba(27,79,146,0.20); cursor: pointer;
  color: var(--sb-text-dim); width: 36px; height: 36px;
  border-radius: 10px; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1), color 0.22s;
}
.sidebar-close:hover { background: rgba(27,79,146,0.12); color: var(--sb-text); }
.sidebar-close:active { background: rgba(27,79,146,0.18); }
.sidebar-close svg { width: 16px; height: 16px; }

.sidebar-new-chat {
  margin: 16px 18px 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, #4a86c6, #2f66a6); color: #fff;
  border: none; border-radius: 14px; padding: 14px;
  font-family: 'DM Sans', sans-serif; font-size: 0.92rem; font-weight: 700;
  cursor: pointer; min-height: 50px;
  box-shadow: 0 4px 16px rgba(47,102,166,0.32), 0 1px 3px rgba(47,102,166,0.2);
  width: calc(100% - 36px);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s ease;
  letter-spacing: 0.01em;
}

@media (min-width: 900px) {
  .sidebar-header {
    max-width: 1180px; margin: 0 auto; width: 100%;
    padding: 28px 32px 18px;
  }
  .sidebar-title { font-size: 1.5rem; }
  .sidebar-close { width: 42px; height: 42px; border-radius: 12px; }
  .sidebar-close:hover { transform: rotate(90deg); }
  .sidebar-close svg { width: 18px; height: 18px; }
  .sidebar-close { transition: background 0.22s cubic-bezier(0.4,0,0.2,1), color 0.22s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
}
.sidebar-new-chat:hover { background: linear-gradient(135deg, #5a95d3, #3873b6); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47,102,166,0.38); }
.sidebar-new-chat:active { transform: scale(0.98); }
.sidebar-new-chat svg { width: 16px; height: 16px; stroke: #fff; }

.sidebar-section { padding: 12px 18px 6px; }
.sidebar-section-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sb-text-faint); margin-bottom: 3px;
  padding: 0 4px; opacity: 1;
}
.sidebar-section-desc {
  font-size: 0.71rem; line-height: 1.35; color: var(--sb-text-dim);
  padding: 0 4px; margin-bottom: 8px; font-weight: 400;
  letter-spacing: normal; text-transform: none;
}
.sidebar-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 12px;
  font-size: 0.875rem; color: var(--sb-text);
  cursor: pointer; min-height: 44px;
  margin-bottom: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.sidebar-item:hover { background: var(--sb-hover); }
.sidebar-item:active { background: var(--sb-active); }
.sidebar-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.62; transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1); }
.sidebar-item:hover svg { opacity: 0.95; }
.sidebar-item.active { background: var(--sb-active); color: var(--sb-text); font-weight: 600; }
.sidebar-item.active svg { opacity: 1; }
.sidebar-item[style*="color"] { filter: brightness(0.82) saturate(1.1); }
.sidebar-item.sb-hidden,
.sidebar-section.sb-hidden { display: none !important; }

.sidebar-divider { height: 1px; background: var(--sb-line-soft); margin: 6px 18px; opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   DESKTOP GRID — reflow the flat stack of sections into cards on a
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .sidebar-divider { display: none; }

  .sidebar-section {
    background: var(--sb-card);
    border: 1px solid var(--sb-card-border);
    border-radius: 18px;
    padding: 16px 16px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.22,0.8,0.3,1);
  }
  .sidebar-section:hover {
    border-color: rgba(27,79,146,0.28);
    background: rgba(255,255,255,0.88);
  }

  .sidebar-section-label { font-size: 0.68rem; margin-bottom: 6px; }

  .sidebar-section-desc {
    display: inline-block;
    background: var(--sb-pill-bg);
    border: 1px solid var(--sb-pill-border);
    border-radius: 20px;
    padding: 5px 12px;
    margin-bottom: 12px;
    font-size: 0.72rem;
    color: var(--sb-text);
  }

  .sidebar-item {
    border-radius: 20px;
    padding: 10px 15px;
    background: rgba(27,79,146,0.04);
    border: 1px solid transparent;
  }
  .sidebar-item:hover {
    background: var(--sb-pill-bg);
    border-color: var(--sb-pill-border);
    transform: translateX(3px);
  }
  .sidebar-item.active { border-color: var(--sb-pill-border); }
}

/* ── New feature 1: live search ──────────────────────────────────── */
.sidebar-search-wrap {
  margin: 14px 18px 4px;
  position: relative;
}
.sidebar-search-wrap svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--sb-text-faint); pointer-events: none;
}
.sidebar-search-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(27,79,146,0.20);
  border-radius: 12px;
  padding: 10px 14px 10px 36px;
  font-family: 'DM Sans', sans-serif; font-size: 0.83rem;
  color: var(--sb-text);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.sidebar-search-input::placeholder { color: var(--sb-text-faint); }
.sidebar-search-input:focus { background: #fff; border-color: rgba(47,102,166,0.55); }
.sidebar-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px; border: none; cursor: pointer;
  background: rgba(27,79,146,0.10); color: var(--sb-text-dim);
  display: none; align-items: center; justify-content: center; font-size: 0.7rem;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-search-wrap.has-value .sidebar-search-clear { display: flex; }
.sidebar-search-empty {
  display: none;
  margin: 4px 18px 2px;
  font-size: 0.78rem; color: var(--sb-text-faint); font-style: italic;
  padding: 10px 14px;
}

/* ── New feature 2: streak + resume card ─────────────────────────── */
.sidebar-streak-card {
  margin: 14px 18px 4px;
  background: var(--sb-card);
  border: 1px solid var(--sb-card-border);
  border-radius: 16px;
  padding: 14px 15px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sidebar-streak-top {
  display: flex; align-items: center; gap: 10px;
}
.sidebar-streak-flame {
  width: 34px; height: 34px; min-width: 34px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,171,64,0.28), rgba(255,120,64,0.16));
  border: 1px solid rgba(255,171,64,0.35);
  display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0;
}
.sidebar-streak-count { font-size: 0.98rem; font-weight: 700; color: var(--sb-text); line-height: 1.2; }
.sidebar-streak-label { font-size: 0.68rem; color: var(--sb-text-dim); margin-top: 1px; }
.sidebar-streak-resume {
  margin-top: 11px;
  display: none; 
  align-items: center; gap: 9px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(27,79,146,0.14);
  border-radius: 11px;
  padding: 9px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}
.sidebar-streak-resume:hover { background: rgba(255,255,255,0.95); }
.sidebar-streak-resume svg { width: 14px; height: 14px; color: #3f78b8; flex-shrink: 0; opacity: 0.9; }
.sidebar-streak-resume-text { flex: 1; min-width: 0; }
.sidebar-streak-resume-title {
  font-size: 0.76rem; font-weight: 600; color: var(--sb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-streak-resume-sub { font-size: 0.64rem; color: var(--sb-text-faint); margin-top: 1px; }

/* ── New feature 3: quick theme toggle ───────────────────────────── */
.sidebar-theme-row {
  margin: 4px 18px 4px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sb-card);
  border: 1px solid var(--sb-card-border);
  border-radius: 14px;
  padding: 11px 14px;
}
.sidebar-theme-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8rem; font-weight: 600; color: var(--sb-text);
}
.sidebar-theme-label svg { width: 15px; height: 15px; color: var(--sb-text-dim); }
.sidebar-theme-switch {
  width: 42px; height: 24px; border-radius: 20px;
  background: rgba(27,79,146,0.22);
  border: 1px solid rgba(27,79,146,0.28);
  position: relative; cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s;
}
.sidebar-theme-switch.on { background: linear-gradient(135deg, #6FA0D6, #4A7BB0); }
.sidebar-theme-switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.sidebar-theme-switch.on .sidebar-theme-switch-knob { transform: translateX(18px); }

/* ══════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT WRAPPERS — .sidebar-top holds header/new-chat/search/
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .sidebar-top {
    max-width: 640px; margin: 0 auto; width: 100%;
  }
  .sidebar-grid {
    max-width: 1180px; margin: 24px auto 0; width: 100%;
    padding: 0 32px 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .sidebar-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .sidebar-section.sb-span-all { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════
   NEW FEATURE: keyboard shortcut hint (desktop only)
   ══════════════════════════════════════════════════════════════════ */
.sidebar-kbd-hint {
  display: none;
  align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--sb-text-faint);
  margin-right: auto; margin-left: 14px;
}
.sidebar-kbd-hint kbd {
  font-family: 'DM Sans', sans-serif; font-size: 0.68rem; font-weight: 600;
  background: rgba(255,255,255,0.85); border: 1px solid rgba(27,79,146,0.22);
  border-radius: 5px; padding: 2px 6px; color: var(--sb-text-dim);
  box-shadow: 0 1px 0 rgba(27,79,146,0.18);
}
@media (min-width: 900px) { .sidebar-kbd-hint { display: flex; } }

/* ══════════════════════════════════════════════════════════════════
   NEW FEATURE: Frequently used — horizontal chip row, same card
   ══════════════════════════════════════════════════════════════════ */
.sidebar-frequent { margin: 10px 18px 4px; }
.sidebar-frequent-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sb-text-faint);
  margin-bottom: 7px; padding: 0 2px;
}
.sidebar-frequent-list {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sidebar-frequent-list::-webkit-scrollbar { display: none; }
.sidebar-frequent-chip {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--sb-pill-bg); border: 1px solid var(--sb-pill-border);
  border-radius: 20px; padding: 7px 13px;
  font-size: 0.76rem; font-weight: 600; color: var(--sb-text);
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.sidebar-frequent-chip:hover { background: rgba(74,123,176,0.24); transform: translateY(-1px); }
.sidebar-frequent-chip svg { width: 13px; height: 13px; opacity: 0.75; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   NEW FEATURE: Pin a section to the top. A small pin icon fades in on
   ══════════════════════════════════════════════════════════════════ */
.sidebar-section-label-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.sidebar-pin-btn {
  background: none; border: none; cursor: pointer; padding: 3px;
  color: var(--sb-text-faint); opacity: 0.55; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s, color 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.sidebar-pin-btn:hover { opacity: 1; color: var(--sb-text); transform: scale(1.15); }
.sidebar-pin-btn svg { width: 13px; height: 13px; }
.sidebar-pin-btn.pinned { color: #d97706; opacity: 1; }
.sidebar-pin-btn.pinned svg { fill: #f59e0b; }
.sidebar-section.sb-pinned {
  border-color: rgba(217,119,6,0.38);
  background: rgba(251,191,36,0.13);
}
@media (min-width: 900px) {
  .sidebar-pin-btn { opacity: 0; }
  .sidebar-section:hover .sidebar-pin-btn,
  .sidebar-pin-btn.pinned { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   NEW FEATURE: Collapsible sections. Click a section's label row to
   ══════════════════════════════════════════════════════════════════ */
.sidebar-collapse-btn {
  background: none; border: none; cursor: pointer; padding: 3px;
  color: var(--sb-text-faint); flex-shrink: 0;
  display: grid; place-items: center; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), color 0.2s;
}
.sidebar-collapse-btn:hover { color: var(--sb-text); }
.sidebar-collapse-btn svg { width: 13px; height: 13px; }
.sidebar-section.sb-collapsed .sidebar-collapse-btn { transform: rotate(-90deg); }
.sidebar-section.sb-collapsed .sidebar-section-desc,
.sidebar-section.sb-collapsed > .sidebar-item,
.sidebar-section.sb-collapsed > button.sidebar-item,
.sidebar-section.sb-collapsed > div:not(.sidebar-section-label-row) {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════
   NEW FEATURE: Jump-nav rail — a slim dock of section icons fixed to
   ══════════════════════════════════════════════════════════════════ */
.sidebar-jump-rail {
  display: none;
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 102;
  flex-direction: column; gap: 6px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(27,79,146,0.18);
  box-shadow: 0 6px 22px rgba(30,70,120,0.14);
  border-radius: 16px; padding: 8px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease 0.1s;
}
.sidebar.open .sidebar-jump-rail { opacity: 1; pointer-events: all; }
.sidebar-jump-dot {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  font-size: 0.85rem; color: var(--sb-text-dim);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.sidebar-jump-dot:hover { background: var(--sb-pill-bg); transform: scale(1.12); color: var(--sb-text); }
@media (min-width: 1000px) {
  .sidebar-jump-rail { display: flex; }
}

.sidebar-user-row {
  flex-shrink: 0;
  border-top: 1px solid var(--sb-line);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 11px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1);
}
.sidebar-user-row:hover { background: rgba(27,79,146,0.07); }
.sidebar-user-row:active { background: rgba(27,79,146,0.12); }
.sidebar-user-avatar {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a86c6, #2f66a6);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(47,102,166,0.30);
  border: 2px solid #fff;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 0.84rem; font-weight: 600; color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-sub { font-size: 0.68rem; color: var(--sb-text-dim); margin-top: 1px; }
.sidebar-user-chevron { color: var(--sb-text-faint); flex-shrink: 0; }

.sidebar-footer {
  padding: 6px 20px 8px;
  font-size: 0.7rem; color: var(--sb-text-faint); line-height: 1.5;
  flex-shrink: 0; text-align: center;
}
.sidebar-footer strong { color: var(--sb-text); }
.sidebar-footer a { color: var(--sb-text-faint) !important; }

@media (min-width: 900px) {
  .sidebar-user-row {
    max-width: 640px; margin: 0 auto; width: 100%;
    border-top: 1px solid var(--sb-line);
    border-radius: 16px 16px 0 0;
  }
  .sidebar-user-row:hover { background: rgba(27,79,146,0.06); }
}

#sfOverlay {
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:200;
}

#sfCanvas {
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(860px,100vw);
  background:#080d1a;
  border-left:1.5px solid rgba(111,160,214,0.18);
  z-index:201;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 48px rgba(0,0,0,0.55);
  overflow:hidden;
}

#sfHeader {
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  background:linear-gradient(135deg,#0d1528,#101c34);
  border-bottom:1px solid rgba(111,160,214,0.18);
  flex-shrink:0;
}

#sfBody {
  flex:1;overflow-y:auto;
  padding:16px;background:#080c18;
  -webkit-overflow-scrolling:touch;
}
#sfBody::-webkit-scrollbar { width:4px; }
#sfBody::-webkit-scrollbar-thumb { background:rgba(111,160,214,0.25);border-radius:2px; }

.sf-spin {
  width:42px;height:42px;border-radius:50%;
  border:3px solid rgba(111,160,214,0.12);
  border-top-color:#6FA0D6;
  animation:sf-spin 0.9s linear infinite;
}
@keyframes sf-spin { to { transform:rotate(360deg); } }

#sfResults {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}

.sf-card {
  background:linear-gradient(145deg,#0d1528,#101c34);
  border:1.5px solid rgba(111,160,214,0.14);
  border-radius:14px;overflow:hidden;
  cursor:pointer;transition:transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1);
}
.sf-card:hover {
  border-color:rgba(111,160,214,0.5);
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(111,160,214,0.22);
}
.sf-card-thumb {
  width:100%;aspect-ratio:16/9;
  object-fit:cover;display:block;background:#0d1528;
}
.sf-card-info { padding:10px 13px 12px; }
.sf-card-name {
  font-size:0.83rem;font-weight:600;color:#c8daf5;
  line-height:1.35;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sf-card-author { font-size:0.72rem;color:rgba(160,185,220,0.5);margin-bottom:7px; }
.sf-card-stats { display:flex;gap:10px;font-size:0.7rem;color:rgba(160,185,220,0.4); }

#sfViewerWrap {
  display:none;flex-direction:column;
  position:absolute;inset:0;background:#080d1a;z-index:2;
}
#sfViewerWrap.active { display:flex; }
#sfViewerBack {
  display:flex;align-items:center;gap:8px;
  padding:12px 20px;
  background:rgba(111,160,214,0.08);
  border-bottom:1px solid rgba(111,160,214,0.12);
  font-size:0.82rem;color:#7ab3e0;
  cursor:pointer;flex-shrink:0;
  font-family:'DM Sans',sans-serif;transition:background 0.15s;
}
#sfViewerBack:hover { background:rgba(111,160,214,0.16); }
#sfViewerFrame { flex:1;border:none;background:#000; }
#sfViewerName {
  padding:9px 20px;font-size:0.78rem;color:#4a7ab5;
  background:#0d1528;border-top:1px solid rgba(111,160,214,0.1);
  flex-shrink:0;font-family:'DM Sans',sans-serif;
}

#sfFooter {
  padding:9px 18px;background:#0d1528;
  border-top:1px solid rgba(111,160,214,0.1);
  display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;font-size:0.7rem;color:#3a5a7a;
}

/* ------------------------------------------------------------
   SHELL & HEADER STYLES
   ------------------------------------------------------------ */

/* ── Shell ──────────────────────────────────────── */
.shell {
  display: flex; flex-direction: column;
  height: 100dvh;
  height: var(--vvh, 100dvh); 
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
@supports not (height: 100dvh) {
  .shell { height: 100vh; }
}
@keyframes lib-in {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes lib-out {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(20px); }
}
@keyframes lib-card-in {
  from { opacity:0; transform:translateY(10px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.lib-card {
  background:#fff;
  border:1.5px solid rgba(111,160,214,0.16);
  border-radius:18px;padding:20px;
  cursor:pointer;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s cubic-bezier(0.4,0,0.2,1), border-color 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 2px 10px rgba(70,45,20,0.05);
}
.lib-card:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(111,160,214,0.2);
  border-color:rgba(111,160,214,0.4);
}
.lib-tab {
  padding:7px 16px;border-radius:20px;
  font-size:0.78rem;cursor:pointer;white-space:nowrap;
  font-family:'DM Sans',sans-serif;transition:all 0.22s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;
  background:rgba(111,160,214,0.05);
  border:1.5px solid rgba(111,160,214,0.16);
  color:#5a7a9a;font-weight:500;
}
.lib-tab.active {
  background:rgba(111,160,214,0.14);
  border-color:rgba(111,160,214,0.4);
  color:#4A7BB0;font-weight:700;
}
@media (max-width: 480px) {
  #libraryPage > div:nth-child(1) { padding: 10px 12px !important; padding-top: calc(10px + var(--safe-top)) !important; gap: 10px !important; }
  #libraryPage > div:nth-child(2) { padding: 10px 12px 10px !important; }
  #libBackBtn { padding: 8px 12px !important; border-radius: 10px !important; }
  #libPageTitle { font-size: 0.95rem !important; line-height: 1.2; }
  #libPageCount { padding: 3px 10px !important; }
  #libGrid { padding: 14px 12px 28px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .lib-card { padding: 16px !important; }
}
/* ── Header ──────────────────────────────────────── */
header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-top));
  border-bottom: 1px solid var(--divider);
  background: var(--bg);
  flex-shrink: 0;
}

.hamburger-btn {
  width: 40px; height: 40px; min-width: 40px;
  background: none;
  border: 1.5px solid rgba(27,42,91,0.28);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--accent);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.hamburger-btn:active { background: var(--sand); }
.hamburger-btn svg { width: 17px; height: 17px; }

header .app-brand-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1rem, 4.5vw, 1.2rem);
  font-weight: 600; color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: 1;
}

.badge { display: none; }
.teacher-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 500;
  color: var(--accent); background: var(--sand);
  border: 1px solid var(--input-border);
  padding: 4px 9px; border-radius: 20px;
  cursor: pointer; max-width: 140px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.teacher-pill:active { background: var(--input-border); }
.teacher-pill .pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sky); flex-shrink: 0; }
.teacher-pill .pill-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------
   CONVERSATION STYLES
   ------------------------------------------------------------ */

/* ── Conversation ──────────────────────────────────────── */
.conversation {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px 12px;
  padding-bottom: calc(12px + var(--safe-bottom));
  display: flex; flex-direction: column;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.conversation::-webkit-scrollbar { width: 3px; }
.conversation::-webkit-scrollbar-thumb { background: rgba(27,42,91,0.2); border-radius: 4px; }
@keyframes why-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ── Welcome ──────────────────────────────────────── */
.welcome {
  text-align: center;
  padding: clamp(24px, 7vw, 52px) 4px clamp(20px, 5vw, 40px);
  animation: fadeUp 0.5s ease both;
}
.welcome-icon {
  width: 54px; height: 54px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-radius: 16px; display: grid; place-items: center;
  margin: 0 auto 18px;
  box-shadow: 0 4px 20px rgba(27,42,91,0.3);
}
.welcome h1, .welcome h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  font-weight: 600; color: var(--text); margin-bottom: 10px;
}
.welcome p {
  font-size: clamp(0.85rem, 3.5vw, 0.95rem);
  color: var(--text-muted); line-height: 1.6;
  max-width: 380px; margin: 0 auto 14px;
}
.welcome-hint {
  font-size: clamp(0.73rem, 2.8vw, 0.8rem); color: var(--accent);
  background: var(--sand);
  border: 1px dashed var(--input-border);
  border-radius: 10px; padding: 9px 14px;
  display: inline-block; margin: 0 auto 22px;
  line-height: 1.55; text-align: left; max-width: 100%;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.chip {
  background: var(--input-bg); border: 1.5px solid var(--input-border);
  border-radius: 12px; padding: 8px 13px;
  font-size: clamp(0.75rem, 3vw, 0.82rem); color: var(--text-muted);
  cursor: pointer; min-height: 36px; display: flex; align-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s cubic-bezier(0.4,0,0.2,1), color 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.chip:active { background: var(--sand); color: var(--accent); border-color: var(--accent); transform: scale(0.97); }
@media (hover: hover) {
  .chip:hover { background: var(--sand); color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
}

/* ── Entries ──────────────────────────────────────── */
.entry { padding: 16px 0; animation: fadeUp 0.45s cubic-bezier(0.16,1,0.3,1) both; }
.entry + .entry { border-top: 1px solid var(--divider); }

.entry.user { display: flex; flex-direction: column; align-items: flex-end; }
.user-label {
  font-size: 0.67rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;
}
.user-text {
  background: var(--user-section);
  border: 1.5px solid var(--user-border);
  border-radius: 16px 4px 16px 16px;
  padding: 11px 16px;
  font-size: clamp(0.88rem, 3.5vw, 0.93rem); line-height: 1.55;
  color: var(--ai-text);
  max-width: min(86%, 500px);
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(70,45,20,0.08);
}

.entry.system { display: flex; justify-content: center; padding: 10px 0; }
.system-bubble {
  background: var(--sand);
  border: 1px dashed var(--input-border);
  border-radius: 20px; padding: 6px 16px;
  font-size: 0.75rem; color: var(--accent); text-align: center;
}

.entry.ai { display: flex; flex-direction: column; align-items: flex-start; }
.ai-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 12px;
}
.ai-label-dot {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky); flex-shrink: 0;
}

.ai-body {
  font-size: clamp(1rem, 3.8vw, 1.08rem);
  line-height: 1.88; color: var(--ai-text); width: 100%;
  letter-spacing: 0.01em;
}
.ai-body p { margin-bottom: 15px; }
.ai-body p:last-child { margin-bottom: 0; }
.ai-body strong {
  font-weight: 700; color: var(--accent);
  background: var(--highlight-bg);
  padding: 2px 5px; border-radius: 4px;
}
.ai-body em { font-style: italic; color: #433B2E; }
.ai-body h1, .ai-body h2, .ai-body h3 {
  font-family: 'Fraunces', serif; font-weight: 600;
  color: var(--text); margin: 22px 0 10px; line-height: 1.35;
}
.ai-body h1 { font-size: clamp(1.25rem, 5.5vw, 1.55rem); }
.ai-body h2 { font-size: clamp(1.12rem, 5vw, 1.32rem); border-bottom: 1.5px solid var(--divider); padding-bottom: 6px; }
.ai-body h3 { font-size: clamp(1.02rem, 4.5vw, 1.15rem); color: var(--accent); }
.ai-body ul, .ai-body ol { padding-left: 22px; margin-bottom: 15px; }
.ai-body li { margin-bottom: 8px; line-height: 1.78; font-size: clamp(1rem, 3.8vw, 1.06rem); }
.ai-body li::marker { color: var(--sky); font-weight: 700; }
.ai-body code {
  font-family: 'Courier New', monospace; font-size: 0.87em;
  background: var(--sand); color: var(--sky-deep);
  padding: 3px 7px; border-radius: 5px; word-break: break-all;
  border: 1px solid var(--input-border);
}
.ai-body pre {
  background: var(--accent-hover); color: #E9ECF5;
  border-radius: 12px; padding: 18px 20px;
  overflow-x: auto; margin: 16px 0;
  font-size: clamp(0.82rem, 3.2vw, 0.92rem); line-height: 1.7;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 4px 16px rgba(16,25,59,0.18);
}
.ai-body pre code { background: none; color: inherit; padding: 0; word-break: normal; border: none; }
.ai-body blockquote {
  border-left: 4px solid var(--sky);
  padding: 10px 18px; margin: 16px 0;
  color: var(--text-muted); font-style: italic;
  background: var(--sand); border-radius: 0 8px 8px 0;
  font-size: 1.02em; line-height: 1.75;
}
.ai-body table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 0.92rem; display: block; overflow-x: auto;
  -webkit-overflow-scrolling: touch; border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.ai-body th { background: var(--sand); color: var(--accent); padding: 11px 14px; text-align: left; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; }
.ai-body td { padding: 10px 14px; border-bottom: 1px solid var(--divider); font-size: 0.95rem; line-height: 1.65; }
.ai-body tr:last-child td { border-bottom: none; }
.ai-body.rendered { animation: fadeUp 0.25s ease both; }

/* ------------------------------------------------------------
   THINKING INDICATOR STYLES
   ------------------------------------------------------------ */

/* ======================================
   THINKING ANIMATION — Notebook Proof (writes what was asked)
   ====================================== */
.thinking-card{
  --nb-paper:#FFFDF6; --nb-ink:#1B2A5B; --nb-rule:rgba(111,160,214,.38); --nb-margin:#f87171;
  display:block; position:relative; width:min(100%,380px); max-width:380px; box-sizing:border-box;
  padding:12px 16px 8px 40px; border:0; border-left:2px solid var(--nb-margin); border-radius:6px;
  background-color:var(--nb-paper);
  background-image:repeating-linear-gradient(transparent 0 25px,var(--nb-rule) 25px 26px);
  background-position:0 12px; box-shadow:0 6px 18px rgba(70,45,20,.12); rotate:-.6deg; animation:nb-drop .45s cubic-bezier(.2,1.4,.4,1) both;
}
html.acaz-dark .thinking-card{--nb-paper:#172036; --nb-ink:#c7d2fe; --nb-rule:rgba(129,140,248,.22); --nb-margin:#fb7185; box-shadow:0 6px 18px rgba(0,0,0,.4);}
.thinking-rings,.thinking-wave{display:none !important;}
.nb-write{height:130px; overflow:hidden; position:relative;}
.nb-in{transition:transform .35s ease;}
.nb-line{height:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--nb-ink);
  font:600 1.3rem/26px 'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive;}
.nb-cur{display:inline-block; width:24px; height:24px; margin-left:-1px; vertical-align:-3px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1.5-5L16 4.5 19.5 8 8 19.5z' fill='%23F5B841'/%3E%3Cpath d='M16 4.5l2-2 3.5 3.5-2 2z' fill='%23f87171'/%3E%3Cpath d='M3 21l1.5-5 3.5 3.5z' fill='%231B2A5B'/%3E%3C/svg%3E") center/contain no-repeat; transform-origin:3px 21px; animation:nb-wig .28s ease-in-out infinite alternate;}
@keyframes nb-wig{from{transform:rotate(-7deg)}to{transform:rotate(5deg) translateY(1px)}}
.nb-hl .nb-t{background:linear-gradient(transparent 52%,rgba(255,214,10,.55) 52%); padding:0 3px; margin-left:-3px;}
.nb-ck{display:inline-block; margin-left:6px; vertical-align:-4px;}
.nb-ck svg{fill:none; stroke:#16a34a; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; animation:nb-draw .4s ease forwards;}
@keyframes nb-draw{to{stroke-dashoffset:0}}
.nb-note{position:absolute; right:10px; top:-16px; max-width:62%; padding:6px 12px; border-radius:3px; background:#FFE680; color:#5a4400; z-index:1; rotate:3deg;
  font:600 1.05rem/1.15 'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive; box-shadow:0 4px 10px rgba(0,0,0,.18); animation:nb-pop .5s cubic-bezier(.2,1.6,.4,1) both;}
.nb-note::before{content:""; position:absolute; left:50%; top:-6px; width:34px; height:12px; margin-left:-17px; background:rgba(255,255,255,.6); rotate:-3deg;}
@keyframes nb-pop{from{transform:scale(.3) rotate(-14deg); opacity:0}}
@keyframes nb-drop{from{transform:translateY(-14px) scale(.96); opacity:0}}
#acaNbFull{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom));overflow:hidden;color:#1B2A5B;background:radial-gradient(circle at 50% 30%,#fffaf0,#F3ECDC 70%);opacity:0;transition:opacity .35s}
#acaNbFull.on{opacity:1}#acaNbFull.out{opacity:0;transition-duration:.45s;pointer-events:none}
html.acaz-dark #acaNbFull{color:#c7d2fe;background:radial-gradient(circle at 50% 30%,#1e293b,#0f172a 70%)}
.nbf-bar{position:relative;z-index:2;width:min(94vw,760px);display:flex;align-items:center;gap:10px;font:700 .85rem 'DM Sans',system-ui,sans-serif}
.nbf-bar span{margin-right:auto;opacity:.6;font-variant-numeric:tabular-nums}
.nbf-bar button{font:600 .78rem 'DM Sans',system-ui,sans-serif;padding:6px 14px;border-radius:99px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.nbf-page{position:relative;z-index:1;width:min(94vw,760px);padding:28px 24px 20px 64px;border-radius:10px;border-left:3px solid #f87171;color:#1B2A5B;rotate:-.5deg;box-shadow:0 24px 60px rgba(27,42,91,.22);
  background:#FFFDF6 repeating-linear-gradient(transparent 0 39px,rgba(111,160,214,.4) 39px 40px);background-position:0 28px;animation:nb-drop .5s cubic-bezier(.2,1.3,.4,1) both}
html.acaz-dark .nbf-page{color:#c7d2fe;box-shadow:0 24px 60px rgba(0,0,0,.5);background-color:#172036;background-image:repeating-linear-gradient(transparent 0 39px,rgba(129,140,248,.24) 39px 40px)}
.nbf-host{position:relative;overflow:hidden}.nbf-host .nb-in{position:relative}
.nb-flip{position:absolute!important;inset:0;transform-origin:left center;animation:nb-turn .5s ease-in forwards}
@keyframes nb-turn{to{transform:perspective(1000px) rotateY(-100deg);opacity:0}}
.nbf-page .nb-line{height:40px;color:inherit;font:600 clamp(1.5rem,4.4vw,2.1rem)/40px 'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive}
.nbf-page .nb-cur{width:34px;height:34px;vertical-align:-4px}.nbf-page .nb-ck svg{width:28px;height:28px}
.nbf-page .nb-note{top:-20px;right:16px;font-size:1.35rem}
.nbf-pg{position:absolute;right:16px;bottom:6px;font:italic .8rem Georgia,serif;opacity:.5}
.thinking-text{display:block; margin-top:2px;}
.thinking-label{font:600 .68rem/26px 'DM Sans',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); animation:label-breathe 2s ease-in-out infinite;}

/* ── fadeUp: smooth entry for messages, cards, and UI elements ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin           { to { transform: rotate(360deg); } }
@keyframes core-pulse     { 0%,100%{opacity:.5;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes label-breathe  { 0%,100%{opacity:.65} 50%{opacity:1} }
@keyframes wave-dot       { 0%,100%{transform:translateY(0);opacity:0.35} 50%{transform:translateY(-4px);opacity:1} }
@keyframes wave-bar       { 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:.9} }
@keyframes diag-progress  { 0%{width:5%;margin-left:0} 50%{width:40%;margin-left:30%} 100%{width:5%;margin-left:90%} }

/* ── Streaming cursor ──────────────────────────────────────── */
.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--sky);
  margin-left: 1px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: cursor-blink 0.6s ease-in-out infinite;
  opacity: 1;
}
@keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── AGI Proactive Opener — typing dots ───────────────────── */
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
}
.typing-dots span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  animation: agi-dot-bounce 1.3s ease-in-out infinite;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes agi-dot-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.3; }
  30%           { transform: translateY(-7px); opacity: 1;   }
}

/* ------------------------------------------------------------
   INPUT AREA STYLES
   ------------------------------------------------------------ */

/* ── Chat loading skeleton ──────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.chat-skeleton {
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px 16px; animation: fadeUp 0.3s ease both;
}
.skel-line {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(70,60,44,0.07) 25%, rgba(70,60,44,0.13) 50%, rgba(70,60,44,0.07) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}
.skel-user {
  align-self: flex-end;
  height: 38px; width: clamp(120px, 52%, 260px);
  border-radius: 16px 4px 16px 16px;
  background: linear-gradient(90deg, rgba(111,160,214,0.13) 25%, rgba(111,160,214,0.22) 50%, rgba(111,160,214,0.13) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}
.skel-ai-block { display: flex; flex-direction: column; gap: 8px; }
.skel-ai-label { height: 10px; width: 80px; border-radius: 6px; }
.skel-ai-label { animation-delay: 0.1s; }

/* ── Input area ──────────────────────────────────────── */
.input-area {
  padding: 10px 16px;
  padding-bottom: calc(14px + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--divider);
  flex-shrink: 0;
}
.input-bar {
  display: flex; align-items: flex-end; gap: 6px;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-bottom: 2.5px solid var(--accent);
  border-radius: 16px;
  padding: 6px 8px 6px 14px;
  box-shadow: 0 2px 12px rgba(70,45,20,0.05);
  transition: border-color 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
}
.input-bar:focus-within {
  border-color: var(--input-border);
  border-bottom-color: var(--sky);
  box-shadow: 0 2px 18px rgba(70,45,20,0.09);
}
/* ── PP Study pill bar (Photo · PDF · Exit) ── */
#ppvPillBar{
  --pp-ink:#12305c; --pp-a:#f7fbff; --pp-b:#e3eefe; --pp-hov:#fff; --pp-line:rgba(47,111,214,.2); --pp-glow:rgba(47,111,214,.34);
  --pp-gleam:rgba(255,255,255,.9); --pp-on-a:#e4f0ff; --pp-on-b:#c9defa;
  flex-wrap:wrap; align-items:center; gap:8px; padding:2px 4px 10px; animation:tmTileIn .35s cubic-bezier(.2,.9,.3,1.2) backwards;
}
html.acaz-dark #ppvPillBar{
  --pp-ink:#e6efff; --pp-a:#1f2f52; --pp-b:#17233f; --pp-hov:#27406b; --pp-line:rgba(129,170,255,.26); --pp-glow:rgba(70,140,255,.4);
  --pp-gleam:rgba(160,200,255,.22); --pp-on-a:#24407a; --pp-on-b:#1c3566;
}
.ppv-pill,.ppv-exit{
  --i:0; position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:4px 14px 4px 5px; border-radius:999px; cursor:pointer; outline:none;
  font:600 .82rem 'DM Sans',system-ui,sans-serif; color:var(--pp-ink); -webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,var(--pp-a),var(--pp-b))!important; border:1px solid var(--pp-line)!important; box-shadow:0 2px 8px rgba(47,111,214,.08)!important;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.25),box-shadow .3s ease;
  animation:tmTileIn .42s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay:calc(70ms + var(--i)*60ms);
}
.ppv-pill[data-kind="pdf"]{--i:1} .ppv-exit{--i:2}
.ppv-pill::before,.ppv-exit::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,var(--pp-gleam) 50%,transparent 65%); background-size:250% 100%; background-position:150% 0;
  animation:ppvGleam 8s ease-in-out infinite; animation-delay:calc(1.6s + var(--i)*2s);
}
.ppv-ico,.ppv-lab{position:relative}
.ppv-ico{
  width:30px; height:30px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,var(--ic1),var(--ic2)); box-shadow:0 5px 12px -4px var(--icg),inset 0 1px 0 rgba(255,255,255,.7);
  animation:tmFloat 4.4s ease-in-out infinite; animation-delay:calc(var(--i)*-1.3s);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4),background .25s ease;
}
.ppv-ico svg{width:16px; height:16px; color:var(--ink)}
.ppv-ico::after{content:""; position:absolute; inset:-2px; border-radius:13px; border:1.5px solid var(--ink); opacity:0; pointer-events:none}
.ppv-pill:is(:hover,:focus-visible),.ppv-exit:is(:hover,:focus-visible){transform:translateY(-2px)}
.ppv-pill:is(:hover,:focus-visible){background:linear-gradient(135deg,var(--pp-hov),var(--pp-b))!important; border-color:rgba(47,111,214,.5)!important; box-shadow:0 12px 22px -10px var(--pp-glow)!important}
.ppv-pill:focus-visible,.ppv-exit:focus-visible{outline:3px solid rgba(79,155,255,.5); outline-offset:2px}
.ppv-pill:is(:hover,:focus-visible) .ppv-ico{transform:scale(1.1) rotate(-6deg)}
.ppv-pill:is(:hover,:focus-visible) .ppv-ico::after,.ppv-exit:is(:hover,:focus-visible) .ppv-ico::after{animation:tmRing .75s ease-out}
.ppv-pill:active,.ppv-exit:active{transform:scale(.95); transition-duration:.1s}

.ppv-pill.is-on{background:linear-gradient(135deg,var(--pp-on-a),var(--pp-on-b))!important; border-color:#2f6fd6!important; box-shadow:0 0 0 3px rgba(47,111,214,.16),0 10px 20px -10px var(--pp-glow)!important}
.ppv-pill.is-on .ppv-ico{background:linear-gradient(145deg,#5aa5ff,#2f6fd6)}
.ppv-pill.is-on .ppv-ico svg{color:#fff}
.ppv-tick{position:absolute; top:-6px; right:-3px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:#2f6fd6; color:#fff; border:2px solid var(--pp-a); transform:scale(0); transition:transform .35s cubic-bezier(.2,.9,.3,1.6)}
.ppv-tick svg{width:9px; height:9px; animation:none!important}
.ppv-pill.is-on .ppv-tick{transform:scale(1)}

.ppv-exit{
  --ic1:#ffe4e4; --ic2:#ffcdcd; --ink:#c0392b; --icg:rgba(200,60,60,.35); margin-left:auto; color:#b3372f;
  background:linear-gradient(135deg,#fffafa,#ffecec)!important; border-color:rgba(214,64,64,.26)!important; box-shadow:0 2px 8px rgba(214,64,64,.08)!important;
}
.ppv-exit:is(:hover,:focus-visible){border-color:rgba(214,64,64,.55)!important; box-shadow:0 12px 22px -10px rgba(214,64,64,.4)!important}
.ppv-exit:is(:hover,:focus-visible) .ppv-ico{transform:rotate(90deg) scale(1.08)}
html.acaz-dark .ppv-exit{--ic1:#5a2c3a; --ic2:#4a2230; --ink:#ffb4ad; color:#ffb4ad; background:linear-gradient(135deg,#3a2230,#2c1a27)!important; border-color:rgba(255,140,140,.3)!important}

#ppvActiveFile{align-self:center; font:600 .72rem 'DM Sans',system-ui,sans-serif; font-style:normal; color:#2f6fd6; background:rgba(47,111,214,.1); border-radius:999px; padding:7px 12px; animation:tmTileIn .35s cubic-bezier(.2,.9,.3,1.2) backwards}
#ppvActiveFile:empty{display:none}
html.acaz-dark #ppvActiveFile{color:#b3d0ff; background:rgba(129,170,255,.16)}
@media (max-width:420px){.ppv-exit{padding-right:5px} .ppv-exit .ppv-lab{display:none}}
@keyframes ppvGleam{0%{background-position:150% 0}18%,100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){#ppvPillBar,#ppvPillBar *,#ppvPillBar *::before,#ppvPillBar *::after{animation:none!important; transition-duration:.01ms!important}}

/* ── Tools sheet — soft-blue, Gemini-style: handle + close, horizontal tiles, icon list ── */
#toolsMenu{
  --tm-ink:#12305c; --tm-sub:#5f7fa6; --tm-tile-a:#f6faff; --tm-tile-b:#e3eefe; --tm-tile-hov:#fff;
  --tm-line:rgba(47,111,214,.14); --tm-line-hi:rgba(47,111,214,.42); --tm-glow:rgba(47,111,214,.32);
  --tm-hi:rgba(255,255,255,.9); --tm-gleam:rgba(255,255,255,.85); --tm-row:rgba(47,111,214,.12);
  position:absolute; left:-6px; bottom:56px; z-index:300; width:min(360px,calc(100vw - 24px));
  background:linear-gradient(180deg,#f4f8fe 0%,#e6f0fd 100%);
  border:1px solid rgba(47,111,214,.16); border-radius:28px; overflow:hidden;
  box-shadow:0 28px 60px -16px rgba(26,115,232,.42),0 8px 20px rgba(26,115,232,.10),inset 0 1px 0 #fff;
  transform-origin:22px 100%; animation:tmPop .34s cubic-bezier(.2,.9,.3,1.15);
}
html.acaz-dark #toolsMenu{
  --tm-ink:#e6efff; --tm-sub:#93a9cc; --tm-tile-a:#1f2f52; --tm-tile-b:#17233f; --tm-tile-hov:#27406b;
  --tm-line:rgba(129,170,255,.16); --tm-line-hi:rgba(129,170,255,.5); --tm-glow:rgba(70,140,255,.38);
  --tm-hi:rgba(255,255,255,.06); --tm-gleam:rgba(160,200,255,.2); --tm-row:rgba(129,170,255,.16);
  background:linear-gradient(180deg,#1b2742,#111a2e); border-color:rgba(129,170,255,.22);
  box-shadow:0 28px 60px -16px rgba(0,0,0,.7),0 8px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
}
#toolsScrim{display:none}

.tm-top{position:relative; height:44px; display:flex; justify-content:center; padding-top:11px; touch-action:none; cursor:grab}
.tm-handle{width:40px; height:5px; border-radius:5px; background:rgba(47,111,214,.28)}
.tm-close{
  position:absolute; top:7px; right:10px; z-index:2; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#2f6fd6; background:rgba(47,111,214,.10);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4),background .25s ease; -webkit-tap-highlight-color:transparent;
}
html.acaz-dark .tm-close{color:#b3d0ff; background:rgba(129,170,255,.16)}
.tm-close svg{width:16px; height:16px}
.tm-close:is(:hover,:focus-visible){transform:rotate(90deg) scale(1.1); background:rgba(47,111,214,.2); outline:none}
.tm-close:active{transform:rotate(90deg) scale(.9)}
.tm-body{max-height:min(66vh,520px); overflow-y:auto; padding:2px 14px 14px; overscroll-behavior:contain}

[data-tool="photo"],[data-tool="ppv"]{--ic1:#e0f1ff; --ic2:#bde0ff; --ink:#1c78d4; --icg:rgba(28,120,212,.38)}
[data-tool="camera"],[data-tool="examiner"]{--ic1:#e4ebff; --ic2:#c6d6fc; --ink:#3052c2; --icg:rgba(60,95,210,.38)}
[data-tool="pdf"],[data-tool="report"]{--ic1:#dcebfd; --ic2:#bcd8f8; --ink:#2f6fd6; --icg:rgba(47,111,214,.38)}
[data-tool="chem"]{--ic1:#d8f3fb; --ic2:#b3e4f5; --ink:#0f87b0; --icg:rgba(15,135,176,.38)}
html.acaz-dark [data-tool="photo"],html.acaz-dark [data-tool="ppv"]{--ic1:#1f4a7d; --ic2:#183d69; --ink:#a9d4ff}
html.acaz-dark [data-tool="camera"],html.acaz-dark [data-tool="examiner"]{--ic1:#2c4286; --ic2:#223572; --ink:#c0d0ff}
html.acaz-dark [data-tool="pdf"],html.acaz-dark [data-tool="report"]{--ic1:#234a85; --ic2:#1b3d70; --ink:#b3d0ff}
html.acaz-dark [data-tool="chem"]{--ic1:#17525f; --ic2:#12444f; --ink:#a2e3f5}

.tm-tiles{display:flex; align-items:flex-start; gap:10px; overflow-x:auto; padding:2px 2px 6px; scroll-snap-type:x proximity; scrollbar-width:none}
.tm-tiles::-webkit-scrollbar{display:none}
.tm-tile{
  --i:0; position:relative; isolation:isolate; overflow:hidden; flex:1 0 92px; aspect-ratio:1; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border-radius:28px; cursor:pointer; outline:none;
  background:linear-gradient(155deg,var(--tm-tile-a),var(--tm-tile-b)); border:1px solid var(--tm-line);
  box-shadow:inset 0 1px 0 var(--tm-hi),0 2px 8px rgba(47,111,214,.08);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.25),box-shadow .3s ease,border-color .3s ease,background .3s ease;
  animation:tmTileIn .46s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay:calc(80ms + var(--i)*60ms); -webkit-tap-highlight-color:transparent;
}
.tm-tile:nth-child(2),.tm-row:nth-child(2){--i:1} .tm-tile:nth-child(3),.tm-row:nth-child(3){--i:2} .tm-row:nth-child(4){--i:3}
.tm-tile::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:60%; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent,var(--tm-gleam) 50%,transparent); transform:translateX(-130%) skewX(-12deg);
  animation:tmGleam 7.5s ease-in-out infinite; animation-delay:calc(1.4s + var(--i)*1.6s);
}
.tm-tile svg{width:28px; height:28px; color:var(--ink); animation:tmFloat 4.4s ease-in-out infinite; animation-delay:calc(var(--i)*-1.1s); transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.tm-tile span{font-size:.84rem; font-weight:600; color:var(--tm-ink)}
.tm-tile:is(:hover,:focus-visible){
  transform:translateY(-3px) scale(1.03); border-color:var(--tm-line-hi); background:linear-gradient(155deg,var(--tm-tile-hov),var(--tm-tile-b));
  box-shadow:0 16px 28px -10px var(--tm-glow),inset 0 1px 0 var(--tm-hi);
}
.tm-tile:focus-visible,.tm-row:focus-visible{box-shadow:0 0 0 3px rgba(79,155,255,.5)}
.tm-tile:is(:hover,:focus-visible)::before{animation:tmGleamHover .8s ease-out 1 both; animation-delay:0s}
.tm-tile:is(:hover,:focus-visible) svg{transform:scale(1.14)}
.tm-tile:active{transform:scale(.94); transition-duration:.1s}

.tm-list{display:flex; flex-direction:column; gap:2px; margin-top:6px}
.tm-row{
  --i:0; position:relative; display:flex; align-items:center; gap:14px; padding:9px 10px; border-radius:20px; cursor:pointer; outline:none;
  transition:background .25s ease,transform .3s cubic-bezier(.2,.9,.3,1.25); -webkit-tap-highlight-color:transparent;
  animation:tmTileIn .46s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay:calc(240ms + var(--i)*55ms);
}
.tm-row:is(:hover,:focus-visible){background:linear-gradient(90deg,var(--tm-row),transparent); transform:translateX(3px)}
.tm-row:active{transform:scale(.98); transition-duration:.1s}
.tm-ico{
  position:relative; flex:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--ic1),var(--ic2)); box-shadow:0 6px 14px -4px var(--icg),inset 0 1px 0 rgba(255,255,255,.7);
  animation:tmFloat 4.4s ease-in-out infinite; animation-delay:calc(var(--i)*-1.1s - .5s);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s ease;
}
.tm-ico svg{width:20px; height:20px; color:var(--ink)}
.tm-ico::after{content:""; position:absolute; inset:-2px; border-radius:16px; border:1.5px solid var(--ink); opacity:0; pointer-events:none}
.tm-row:is(:hover,:focus-visible) .tm-ico{transform:scale(1.1) rotate(-5deg); box-shadow:0 10px 20px -4px var(--icg),inset 0 1px 0 rgba(255,255,255,.8)}
.tm-row:is(:hover,:focus-visible) .tm-ico::after{animation:tmRing .75s ease-out}
.tm-txt{flex:1; min-width:0}
.tm-name{font-size:.94rem; font-weight:600; line-height:1.2; color:var(--tm-ink)}
.tm-sub{font-size:.76rem; line-height:1.35; margin-top:2px; color:var(--tm-sub)}
.tm-chev{flex:none; width:16px; height:16px; color:var(--ink); opacity:0; transform:translateX(-6px); transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.3,1.3)}
.tm-row:is(:hover,:focus-visible) .tm-chev{opacity:.85; transform:none}
@media (hover:none){.tm-chev{opacity:.4; transform:none}}

[data-tool="photo"]:is(:hover,:focus-visible) svg{animation:tmTilt .6s ease}
[data-tool="camera"]:is(:hover,:focus-visible) svg{animation:tmCheck .55s cubic-bezier(.2,.9,.3,1.4)}
[data-tool="pdf"]:is(:hover,:focus-visible) svg{animation:tmScan .9s ease-in-out}
[data-tool="examiner"]:is(:hover,:focus-visible) .tm-ico svg{animation:tmCheck .55s cubic-bezier(.2,.9,.3,1.4)}
[data-tool="ppv"]:is(:hover,:focus-visible) .tm-ico svg{animation:tmTilt .6s ease}
[data-tool="report"]:is(:hover,:focus-visible) .tm-ico svg{animation:tmScan .9s ease-in-out}
[data-tool="chem"]:is(:hover,:focus-visible) .tm-ico svg{transform-origin:50% 90%; animation:tmWobble .8s ease}

#toolsBtn svg{transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
#toolsBtn.tools-open{background:rgba(47,111,214,.12); color:#2f6fd6}
#toolsBtn.tools-open svg{transform:rotate(135deg)}

@media (max-width:640px){
  #toolsBtn.tools-open ~ #toolsScrim{display:block; position:fixed; inset:0; z-index:1200; background:rgba(18,48,92,.34); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:tmFade .25s ease}
  #toolsMenu{position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); width:auto; z-index:1210; border-radius:30px; transform-origin:50% 100%; animation:tmSheet .42s cubic-bezier(.2,.9,.3,1.05)}
}
@keyframes tmFade{from{opacity:0}to{opacity:1}}
@keyframes tmSheet{from{opacity:0; transform:translateY(46px)}to{opacity:1; transform:none}}
@keyframes tmPop{from{opacity:0; transform:translateY(12px) scale(.92)}to{opacity:1; transform:none}}
@keyframes tmTileIn{from{opacity:0; transform:translateY(14px) scale(.9)}to{opacity:1; transform:none}}
@keyframes tmFloat{0%,100%{translate:0 0}50%{translate:0 -2.5px}}
@keyframes tmGleam{0%{transform:translateX(-130%) skewX(-12deg)}16%,100%{transform:translateX(260%) skewX(-12deg)}}
@keyframes tmGleamHover{from{transform:translateX(-130%) skewX(-12deg)}to{transform:translateX(260%) skewX(-12deg)}}
@keyframes tmRing{0%{opacity:.55; transform:scale(.95)}100%{opacity:0; transform:scale(1.5)}}
@keyframes tmCheck{0%,100%{transform:scale(1)}40%{transform:scale(1.28)}}
@keyframes tmTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}}
@keyframes tmScan{0%,100%{transform:translate(0,0)}30%{transform:translate(2px,-2px)}65%{transform:translate(-2px,1.5px)}}
@keyframes tmWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(10deg)}80%{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){
  #toolsMenu,#toolsMenu *,#toolsMenu *::before,#toolsMenu *::after,#toolsScrim,#toolsBtn svg{animation:none!important; transition-duration:.01ms!important}
}

.icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 50%; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1), color 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.18s cubic-bezier(0.4,0,0.2,1);
}
.icon-btn:active { background: var(--sand); color: var(--accent); transform: scale(0.92); }
@media (hover: hover) {
  .icon-btn:hover { background: var(--sand); color: var(--accent); }
}
.icon-btn svg { width: 19px; height: 19px; }

textarea#input {
  flex: 1; background: none; border: none; outline: none;
  resize: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--text);
  line-height: 1.5;
  max-height: 110px; overflow-y: auto;
  padding: 7px 4px;
  -webkit-appearance: none;
  -webkit-overflow-scrolling: touch;
}
textarea#input::placeholder { color: var(--text-muted); }

.right-btns { display: flex; align-items: center; gap: 2px; }
.send-btn {
  width: 38px; height: 38px; min-width: 38px;
  background: var(--sky);
  border: none; border-radius: 11px;
  cursor: pointer; display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 3px 0 var(--sky-deep);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.send-btn:hover:not(:disabled) { transform: translateY(-2px); }
.send-btn:active:not(:disabled) { transform: translateY(1px) scale(0.95); box-shadow: 0 1px 0 var(--sky-deep); }
.send-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.send-btn svg { width: 16px; height: 16px; stroke: #fff; }

.hint {
  text-align: center; font-size: 0.63rem;
  color: var(--text-muted); margin-top: 7px;
}
.error-msg { color: #c0392b; font-size: 0.85rem; font-style: italic; }

/* ------------------------------------------------------------
   EXAM CANVAS STYLES
   ------------------------------------------------------------ */

/* ── Exam Canvas ──────────────────────────────────────── */
.exam-section {
  background:#fff;
  border:1.5px solid rgba(111,160,214,0.28);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:18px;
  box-shadow:0 2px 12px rgba(111,160,214,0.1);
}
.exam-section-header {
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:linear-gradient(135deg,#EAF2FB,#F6FAFD);
  border-bottom:1.5px solid rgba(111,160,214,0.28);
}
.exam-section-badge {
  padding:3px 10px;border-radius:20px;
  font-size:0.68rem;font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;background:rgba(111,160,214,0.16);color:#4A7BB0;
  flex-shrink:0;
}
.exam-section-title {
  font-family:'Fraunces',serif;font-size:0.92rem;
  font-weight:600;color:#1a2a3a;flex:1;
}
.exam-section-marks {
  font-size:0.72rem;font-weight:600;color:#4A7BB0;
  background:rgba(111,160,214,0.1);
  padding:3px 9px;border-radius:10px;flex-shrink:0;
}
.exam-question {
  padding:14px 18px;
  border-bottom:1px solid rgba(111,160,214,0.1);
  transition:background 0.25s cubic-bezier(0.4,0,0.2,1);
}
.exam-question:last-child { border-bottom:none; }
.exam-question:hover { background:rgba(111,160,214,0.03); }
.exam-q-num {
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#6FA0D6,#4A7BB0);
  color:#fff;font-size:0.68rem;font-weight:700;
  flex-shrink:0;margin-right:8px;
  box-shadow:0 2px 6px rgba(111,160,214,0.35);
}
.exam-q-text {
  font-size:0.88rem;color:#1a2a3a;line-height:1.6;
  margin-bottom:10px;display:flex;align-items:flex-start;
}
.exam-q-marks-tag {
  font-size:0.66rem;color:#4A7BB0;font-weight:600;
  margin-left:auto;padding-left:8px;flex-shrink:0;white-space:nowrap;
}
.exam-mcq-options {
  display:flex;flex-direction:column;gap:7px;margin-top:4px;
}
.exam-mcq-option {
  display:flex;align-items:center;gap:10px;
  padding:9px 13px;border-radius:10px;
  border:1.5px solid rgba(111,160,214,0.22);
  background:rgba(111,160,214,0.03);
  cursor:pointer;transition:background 0.22s cubic-bezier(0.4,0,0.2,1), border-color 0.22s cubic-bezier(0.4,0,0.2,1);
  font-size:0.84rem;color:#1a2a3a;
}
.exam-mcq-option:hover { background:rgba(111,160,214,0.09);border-color:#6FA0D6; }
.exam-mcq-option.selected { background:rgba(111,160,214,0.14);border-color:#4A7BB0;color:#1B2A5B;font-weight:600; }
.exam-mcq-option.correct { background:rgba(34,197,94,0.1);border-color:#22c55e;color:#15803d; }
.exam-mcq-option.wrong { background:rgba(239,68,68,0.1);border-color:#ef4444;color:#b91c1c; }
.exam-tf-btns { display:flex;gap:8px;margin-top:6px; }
.exam-tf-btn {
  padding:8px 20px;border-radius:10px;
  border:1.5px solid rgba(111,160,214,0.25);
  background:rgba(111,160,214,0.05);
  font-size:0.84rem;font-weight:600;cursor:pointer;
  color:#3a5a7a;transition:background 0.22s cubic-bezier(0.4,0,0.2,1), border-color 0.22s cubic-bezier(0.4,0,0.2,1); font-family:'DM Sans',sans-serif;
}
.exam-tf-btn:hover { background:rgba(111,160,214,0.11);border-color:#6FA0D6; }
.exam-tf-btn.selected { background:rgba(111,160,214,0.17);border-color:#4A7BB0;color:#1B2A5B; }
.exam-tf-btn.correct { background:rgba(34,197,94,0.12);border-color:#22c55e;color:#15803d; }
.exam-tf-btn.wrong { background:rgba(239,68,68,0.1);border-color:#ef4444;color:#b91c1c; }
.exam-fill-input {
  width:100%;padding:9px 13px;border-radius:10px;
  border:1.5px solid rgba(111,160,214,0.3);
  background:#F7FAFD;font-family:'DM Sans',sans-serif;
  font-size:0.85rem;color:#1a2a3a;outline:none;
  transition:border-color 0.25s cubic-bezier(0.4,0,0.2,1),box-shadow 0.25s cubic-bezier(0.4,0,0.2,1);
}
.exam-fill-input:focus { border-color:#6FA0D6;box-shadow:0 0 0 3px rgba(111,160,214,0.14); }
.exam-fill-input.correct { border-color:#22c55e;background:rgba(34,197,94,0.06); }
.exam-fill-input.wrong { border-color:#ef4444;background:rgba(239,68,68,0.06); }
.exam-text-input {
  width:100%;padding:10px 13px;border-radius:10px;
  border:1.5px solid rgba(111,160,214,0.3);
  background:#F7FAFD;font-family:'DM Sans',sans-serif;
  font-size:0.85rem;color:#1a2a3a;outline:none;
  resize:vertical;min-height:80px;line-height:1.6;
  transition:border-color 0.25s cubic-bezier(0.4,0,0.2,1),box-shadow 0.25s cubic-bezier(0.4,0,0.2,1);
}
.exam-text-input:focus { border-color:#6FA0D6;box-shadow:0 0 0 3px rgba(111,160,214,0.14); }
.exam-text-input.correct { border-color:#22c55e;background:rgba(34,197,94,0.05); }
.exam-text-input.wrong { border-color:#ef4444;background:rgba(239,68,68,0.05); }
.exam-result-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;
  font-size:0.72rem;font-weight:700;margin-left:8px;
}
.exam-result-badge.correct { background:rgba(34,197,94,0.12);color:#15803d; }
.exam-result-badge.wrong { background:rgba(239,68,68,0.1);color:#b91c1c; }
.exam-result-badge.partial { background:rgba(251,191,36,0.15);color:#92400e; }
.exam-score-card {
  background:linear-gradient(135deg,#EAF2FB,#F6FAFD);
  border:2px solid #6FA0D6;border-radius:16px;
  padding:24px;margin-bottom:20px;text-align:center;
  box-shadow:0 4px 20px rgba(111,160,214,0.22);
}

/* ------------------------------------------------------------
   RESPONSIVE OVERRIDES
   ------------------------------------------------------------ */

/* ── New chat button in header (top-right, like Claude) ──────────────────────────────────────── */
.new-chat-btn {
  width: 40px; height: 40px; min-width: 40px;
  background: none;
  border: 1.5px solid rgba(74,123,176,0.3);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  color: #4A7BB0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1), border-color 0.22s cubic-bezier(0.4,0,0.2,1);
}
.new-chat-btn:hover { background: rgba(111,160,214,0.1); border-color: #4A7BB0; }
.new-chat-btn:active { background: rgba(111,160,214,0.16); }
#headerShareBtn:hover { background: rgba(111,160,214,0.1); border-color: #1B2A5B; }
#headerShareBtn:active { background: rgba(111,160,214,0.16); }
.new-chat-btn svg { width: 18px; height: 18px; }

.teacher-pill { margin-left: 6px; }

/* ── Desktop ──────────────────────────────────────── */
@media (min-width: 640px) {
  header { padding: 16px 24px; padding-top: calc(16px + var(--safe-top)); gap: 14px; }
  .conversation { padding: 28px 24px 16px; }
  .input-area { padding: 12px 24px calc(14px + var(--safe-bottom)); }
}

/* ── Mobile header: shrink all buttons so everything fits ── */
@media (max-width: 520px) {
  header { gap: 5px; padding: 8px 10px; padding-top: calc(8px + var(--safe-top)); }
  header .app-brand-title { font-size: 0.95rem; }
  .hamburger-btn,
  .new-chat-btn,
  #headerShareBtn,
  #colleagueNotifBtn {
    width: 32px !important; height: 32px !important; min-width: 32px !important;
  }
  .hamburger-btn svg { width: 14px; height: 14px; }
  .new-chat-btn svg { width: 14px !important; height: 14px !important; }
  #headerShareBtn svg,
  #colleagueNotifBtn svg { width: 13px !important; height: 13px !important; }
  #userAvatar { width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: 0.7rem !important; }
  #upgradeBtn { padding: 4px 9px !important; font-size: 0.65rem !important; gap: 3px !important; }
  #upgradeBtn svg { width: 9px !important; height: 9px !important; }
  #loginHeaderBtn { padding: 4px 9px !important; font-size: 0.67rem !important; gap: 3px !important; }
  #loginHeaderBtn svg { width: 11px !important; height: 11px !important; }
  #currentPlanPill { padding: 3px 7px !important; font-size: 0.62rem !important; gap: 3px !important; }
  #consoleBtn { padding: 4px 8px !important; font-size: 0.62rem !important; }
}

/* ── Tiny phones ──────────────────────────────────────── */
@media (max-width: 360px) {
  #voiceBtn { display: none; }
  .welcome-hint { display: none; }
  header .app-brand-title { font-size: 0.95rem; }
}

/* ══════════════════════════════════════════════════════
   ACAZ CHART ENGINE — 5 beautiful chart design skins
   ══════════════════════════════════════════════════════ */

.acaz-chart-wrap {
  margin-top: 18px;
  border-radius: 20px;
  overflow: hidden;
  animation: chartReveal 0.65s cubic-bezier(.22,1,.36,1) both;
  position: relative;
  transform-origin: bottom center;
}
@keyframes chartReveal {
  0%   { opacity:0; transform:translateY(28px) scale(0.95); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Build animation overlay ── */
.acaz-chart-building {
  position: absolute; inset: 0;
  border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; z-index: 10;
  animation: chartBuildFadeOut 0.5s ease 1.7s forwards;
  pointer-events: none;
}
@keyframes chartBuildFadeOut {
  to { opacity: 0; visibility: hidden; }
}
.acaz-chart-build-bars {
  display: flex; align-items: flex-end; gap: 5px; height: 52px;
}
.acaz-chart-build-bar {
  width: 8px; border-radius: 4px 4px 0 0;
  animation: barGrow 0.55s cubic-bezier(.22,1,.36,1) both;
  transform-origin: bottom;
}
.acaz-chart-build-bar:nth-child(1){ height:30px; background:#63b3ff88; animation-delay:0.05s; }
.acaz-chart-build-bar:nth-child(2){ height:46px; background:#7dd3fc88; animation-delay:0.13s; }
.acaz-chart-build-bar:nth-child(3){ height:36px; background:#38bdf888; animation-delay:0.21s; }
.acaz-chart-build-bar:nth-child(4){ height:52px; background:#0ea5e988; animation-delay:0.29s; }
.acaz-chart-build-bar:nth-child(5){ height:22px; background:#2563eb88; animation-delay:0.37s; }
.acaz-chart-build-bar:nth-child(6){ height:40px; background:#818cf888; animation-delay:0.45s; }
@keyframes barGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.acaz-chart-build-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: buildLabelPulse 0.65s ease infinite alternate;
}
@keyframes buildLabelPulse { from { opacity:0.3; } to { opacity:0.7; } }

/* ── Design 1: Aurora (dark gradient bar) ── */
.acaz-chart-aurora {
  background: linear-gradient(145deg, #0a0f1e 0%, #0d1628 60%, #111c35 100%);
  padding: 22px 20px 18px;
  border: 1px solid rgba(99,179,255,0.12);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,179,255,0.06);
}
.acaz-chart-aurora .chart-title-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.acaz-chart-aurora .chart-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg,#1a73e8,#63b3ff);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(26,115,232,0.45);
}
.acaz-chart-aurora .chart-title { font-family:'Fraunces',serif; font-size:1rem; font-weight:600; color:#e8f4ff; letter-spacing:-0.01em; }
.acaz-chart-aurora .chart-subtitle { font-size:0.68rem; color:rgba(160,200,255,0.55); margin-top:2px; text-transform:uppercase; letter-spacing:0.08em; }
.acaz-chart-aurora canvas { max-height: 280px !important; }

/* ── Design 2: Silk (clean white line) ── */
.acaz-chart-silk {
  background: #ffffff;
  padding: 22px 20px 16px;
  border: 1.5px solid #e8eef6;
  box-shadow: 0 4px 24px rgba(111,160,214,0.1), 0 1px 4px rgba(0,0,0,0.04);
}
.acaz-chart-silk .chart-title-row {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px;
}
.acaz-chart-silk .chart-title { font-family:'DM Sans',sans-serif; font-size:0.95rem; font-weight:700; color:#1a2a3a; letter-spacing:-0.01em; }
.acaz-chart-silk .chart-subtitle { font-size:0.67rem; color:#7a8a9a; margin-top:3px; }
.acaz-chart-silk .chart-badge { font-size:0.62rem; font-weight:700; padding:3px 9px; border-radius:20px; background:rgba(111,160,214,0.1); color:#4A7BB0; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; margin-top:2px; }
.acaz-chart-silk canvas { max-height: 260px !important; }

/* ── Design 3: Crystal (donut / dark luxury) ── */
.acaz-chart-crystal {
  background: linear-gradient(160deg, #f7f2ff 0%, #f0ebff 100%);
  padding: 22px 20px 18px;
  border: 1.5px solid rgba(139,92,246,0.18);
  box-shadow: 0 6px 30px rgba(139,92,246,0.12);
}
.acaz-chart-crystal .chart-title-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.acaz-chart-crystal .chart-icon { width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,#8b5cf6,#a78bfa); display:grid; place-items:center; flex-shrink:0; box-shadow:0 4px 14px rgba(139,92,246,0.4); }
.acaz-chart-crystal .chart-title { font-family:'Fraunces',serif; font-size:0.98rem; font-weight:600; color:#2d1a4a; }
.acaz-chart-crystal .chart-subtitle { font-size:0.67rem; color:rgba(100,60,180,0.55); margin-top:2px; }
.acaz-chart-crystal canvas { max-height: 300px !important; }

/* ── Design 4: Prism (bold column, editorial) ── */
.acaz-chart-prism {
  background: #fafbfc;
  padding: 22px 20px 16px;
  border: none;
  border-top: 4px solid #4A7BB0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.acaz-chart-prism .chart-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.acaz-chart-prism .chart-title { font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:800; color:#1a2a3a; text-transform:uppercase; letter-spacing:0.04em; font-size:0.88rem; }
.acaz-chart-prism .chart-subtitle { font-size:0.65rem; color:#7a8a9a; margin-top:3px; }
.acaz-chart-prism .chart-tag { font-size:0.6rem; font-weight:700; padding:2px 8px; border-radius:4px; background:#4A7BB0; color:#fff; letter-spacing:0.08em; text-transform:uppercase; }
.acaz-chart-prism canvas { max-height: 270px !important; }

/* ── Design 5: Organic (soft pastel area) ── */
.acaz-chart-organic {
  background: linear-gradient(150deg, #f0fdf4 0%, #ecfdf5 100%);
  padding: 22px 20px 18px;
  border: 1.5px solid rgba(16,185,129,0.2);
  box-shadow: 0 4px 24px rgba(16,185,129,0.1);
}
.acaz-chart-organic .chart-title-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.acaz-chart-organic .chart-icon { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#10b981,#34d399); display:grid; place-items:center; flex-shrink:0; box-shadow:0 4px 14px rgba(16,185,129,0.35); }
.acaz-chart-organic .chart-title { font-family:'DM Sans',sans-serif; font-size:0.95rem; font-weight:700; color:#064e3b; }
.acaz-chart-organic .chart-subtitle { font-size:0.67rem; color:rgba(6,78,59,0.5); margin-top:3px; }
.acaz-chart-organic canvas { max-height: 260px !important; }

/* ── Shared bottom strip ── */
.acaz-chart-strip {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(120,140,180,0.1);
}
.acaz-chart-strip-label {
  font-size: 0.62rem; color: rgba(100,120,160,0.6); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  display: flex; align-items: center; gap: 5px;
}
.acaz-chart-regen-btn {
  font-size: 0.65rem; font-weight: 700; padding: 4px 11px; border-radius: 20px;
  border: 1px solid rgba(111,160,214,0.3); background: rgba(111,160,214,0.08);
  color: #4A7BB0; cursor: pointer; letter-spacing: 0.04em;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1); font-family: 'DM Sans', sans-serif;
}
.acaz-chart-regen-btn:hover { background: rgba(111,160,214,0.16); border-color: #4A7BB0; }

.acaz-chart-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; margin-top: 16px;
  background: rgba(111,160,214,0.05); border-radius: 14px;
  border: 1px solid rgba(111,160,214,0.12);
  font-family: 'DM Sans', sans-serif;
  animation: chartReveal 0.4s cubic-bezier(.22,1,.36,1) both;
}
.acaz-chart-loading-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(111,160,214,0.18);
  border-top-color: #4A7BB0;
  animation: spin 0.75s linear infinite; flex-shrink:0;
}
.acaz-chart-loading-text { font-size: 0.8rem; color: #4A7BB0; font-weight: 600; }