/* ══════════════════════════════════════════════════════════════════════════
   Acumen Tutor — Design System (Generated by ui-ux-pro-max v2.5)
   Pattern: Kids Learning Claymorphism
   Colors: Learning Blue #2563EB + CTA Orange #F97316 + Fun Pink #EC4899
   Typography: Baloo 2 (headings) / Comic Neue (body)
   Effects: Clay shadows, spring squish, soft 3D, rounded 20-32px
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Comic+Neue:wght@300;400;700&display=swap');

:root, [data-theme="light"] {
  --primary: #2563EB;
  --primary-light: #3B82F6;
  --on-primary: #FFFFFF;
  --cta: #F97316;
  --cta-hover: #EA580C;
  --on-cta: #FFFFFF;
  --secondary: #F59E0B;
  --accent: #EC4899;
  --success: #10B981;
  --destructive: #EF4444;
  --bg: #F8FAFC;
  --fg: #1E293B;
  --card: #FFFFFF;
  --card-fg: #1E293B;
  --muted: #F1F5F9;
  --muted-fg: #64748B;
  --border: #E2E8F0;

  --radius-outer: 32px;
  --radius-card: 24px;
  --radius-btn: 20px;
  --radius-input: 16px;
  --radius-sm: 12px;

  --shadow-clay: 6px 6px 16px rgba(37, 99, 235, 0.08),
                 -3px -3px 10px rgba(255, 255, 255, 0.9);
  --shadow-clay-hover: 8px 8px 24px rgba(37, 99, 235, 0.12),
                       -4px -4px 14px rgba(255, 255, 255, 1);
  --shadow-clay-sm: 3px 3px 8px rgba(37, 99, 235, 0.06),
                    -2px -2px 6px rgba(255, 255, 255, 0.8);
  --shadow-pressed: inset 2px 2px 6px rgba(37, 99, 235, 0.1),
                    inset -1px -1px 3px rgba(255, 255, 255, 0.3);

  --font-heading: 'Baloo 2', cursive, system-ui;
  --font-body: 'Comic Neue', cursive, system-ui;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  max-width: 540px;
  margin: 0 auto;
  padding: 20px;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-heading); }

/* ── Screens ──────────────────────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Login ────────────────────────────────────────────────────────────────── */
.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 85vh;
  gap: 16px;
  width: 100%;
}

.center-content h1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--primary);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.login-subtitle,
.choose-subtitle {
  font-size: 16px;
  color: var(--muted-fg);
  text-align: center;
  font-weight: 400;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
input[type="text"], select {
  width: 100%;
  padding: 14px 18px;
  border: 3px solid var(--border);
  border-radius: var(--radius-input);
  font-size: 17px;
  font-family: var(--font-body);
  font-weight: 700;
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-clay-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

input[type="text"]:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), var(--shadow-clay-sm);
}

input[type="text"]::placeholder {
  color: var(--muted-fg);
  font-weight: 400;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
button {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border: 3px solid transparent;
  border-radius: var(--radius-btn);
  font-size: 17px;
  font-family: var(--font-heading);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s var(--ease-spring);
  background: var(--cta);
  color: var(--on-cta);
  box-shadow: var(--shadow-clay);
  letter-spacing: 0.01em;
}

button:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-clay-hover);
}

button:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-pressed);
}

button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-light);
}

.btn-secondary {
  background: var(--card);
  color: var(--primary);
  border-color: var(--border);
  font-family: var(--font-body);
  font-size: 15px;
}

.btn-secondary:hover {
  border-color: var(--primary);
  background: var(--muted);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 3px solid var(--border);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 15px;
}

.btn-outline:hover {
  border-color: var(--primary);
  background: var(--muted);
  box-shadow: var(--shadow-clay-sm);
}

/* ── Choose screen ────────────────────────────────────────────────────────── */
.choose-header {
  text-align: center;
  padding: 28px 0 4px;
}

.choose-header h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

/* ── Search box ───────────────────────────────────────────────────────────── */
.search-section { margin: 24px 0 0; }

.search-box {
  display: flex;
  gap: 8px;
}

.search-box input { flex: 1; }

.search-box button {
  width: auto;
  padding: 14px 28px;
  flex-shrink: 0;
  background: var(--primary);
}

.search-box button:hover { background: var(--primary-light); }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.divider-or {
  text-align: center;
  margin: 24px 0;
  position: relative;
}

.divider-or::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: var(--border);
}

.divider-or span {
  position: relative;
  background: var(--bg);
  padding: 0 16px;
  color: var(--muted-fg);
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-heading);
}

/* ── Drop zone ────────────────────────────────────────────────────────────── */
.drop-zone {
  border: 3px dashed var(--border);
  border-radius: var(--radius-card);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s var(--ease-spring);
  background: var(--card);
  box-shadow: var(--shadow-clay-sm);
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--primary);
  background: #EFF6FF;
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-clay-hover);
}

.drop-zone-icon { font-size: 3rem; margin-bottom: 10px; }
.drop-zone-text { font-family: var(--font-heading); font-weight: 700; color: var(--fg); font-size: 16px; }
.drop-zone-sub { color: var(--muted-fg); font-size: 14px; margin-top: 4px; }

#upload-preview-img {
  max-width: 100%;
  border-radius: var(--radius-card);
  margin-top: 14px;
  box-shadow: var(--shadow-clay);
}

/* ── Section label ────────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-fg);
  margin-bottom: 10px;
}

/* ── Topic cards ──────────────────────────────────────────────────────────── */
.topic-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 3px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  cursor: pointer;
  margin-bottom: 10px;
  box-shadow: var(--shadow-clay-sm);
  transition: all 0.25s var(--ease-spring);
}

.topic-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-clay-hover);
}

.topic-card.selected {
  border-color: var(--primary);
  background: #EFF6FF;
  box-shadow: var(--shadow-pressed);
  transform: scale(0.98);
}

.topic-card-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--fg);
}

.topic-card-detail {
  font-size: 13px;
  color: var(--muted-fg);
  margin-top: 3px;
}

/* ── Question screen ──────────────────────────────────────────────────────── */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-clay-sm);
  margin-bottom: 16px;
  font-size: 14px;
}

#kc-label { font-family: var(--font-heading); font-weight: 700; color: var(--primary); }
#mastery-pct { font-family: var(--font-heading); font-weight: 800; color: var(--success); }

.question-body {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-clay);
  font-size: 18px;
  line-height: 1.7;
}

.answer-area {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.answer-area input { flex: 1; }

.answer-area button {
  width: auto;
  padding: 14px 28px;
  flex-shrink: 0;
  background: var(--primary);
}

.answer-area button:hover { background: var(--primary-light); }

/* ── Feedback ─────────────────────────────────────────────────────────────── */
#feedback-area { min-height: 40px; margin: 14px 0; }

#feedback-text {
  font-size: 16px;
  line-height: 1.7;
  padding: 18px;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-clay-sm);
}

.feedback-correct #feedback-text {
  border-left: 5px solid var(--success);
  background: #ECFDF5;
}

.feedback-incorrect #feedback-text {
  border-left: 5px solid var(--destructive);
  background: #FEF2F2;
}

.feedback-thinking #feedback-text {
  color: var(--muted-fg);
  font-style: italic;
}

/* ── Hints ─────────────────────────────────────────────────────────────────── */
#hint-area {
  background: #FFFBEB;
  border: 3px solid var(--secondary);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 14px;
}

#hint-text { font-size: 16px; color: #92400E; }

/* ── Progress ─────────────────────────────────────────────────────────────── */
#skill-bars { margin: 16px 0; }

.skill-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
}

.skill-name { flex: 1; font-weight: 700; color: var(--fg); }

.skill-bar-bg {
  width: 120px; height: 14px;
  background: var(--muted);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.05);
}

.skill-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 7px;
  transition: width 0.6s var(--ease-spring);
}

.skill-pct {
  width: 45px;
  text-align: right;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--primary);
}

/* ── Upload preview ──────────────────────────────────────────────────────── */
#upload-preview {
  text-align: center;
  margin: 12px 0;
}

#upload-preview-img {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-card);
  border: 3px solid var(--border);
  box-shadow: var(--shadow-clay-sm);
  object-fit: contain;
}

/* ── Upload status ────────────────────────────────────────────────────────── */
#upload-status {
  background: var(--muted);
  border: 3px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  margin: 14px 0;
}

#upload-status-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-heading);
}

/* ── Upload progress bar ─────────────────────────────────────────────────── */
.upload-progress-bar {
  width: 100%;
  height: 10px;
  background: var(--border);
  border-radius: 8px;
  margin-top: 12px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--cta));
  background-size: 200% 100%;
  border-radius: 8px;
  width: 0%;
  transition: width 0.6s ease;
  animation: upload-shimmer 1.5s ease-in-out infinite;
}

@keyframes upload-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.upload-progress-step {
  font-size: 13px;
  color: var(--muted-fg);
  font-family: var(--font-body);
  margin-top: 6px;
}

/* ── Connection banner ────────────────────────────────────────────────────── */
#connection-banner {
  background: var(--secondary);
  color: #0F172A;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

/* ── Button spacing in question screen ────────────────────────────────────── */
#btn-next, #btn-hint, #btn-progress, #btn-topic { margin-bottom: 10px; }

#btn-next { background: var(--success); }
#btn-next:hover { background: #059669; }

#btn-hint { background: var(--secondary); color: #0F172A; }
#btn-hint:hover { background: #D97706; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  body { padding: 14px; }
  .center-content h1 { font-size: 2rem; }
  .choose-header h2 { font-size: 1.6rem; }
  .search-box { flex-direction: column; }
  .search-box button { width: 100%; }
  .answer-area { flex-direction: column; }
  .answer-area button { width: 100%; }
  .question-body { padding: 16px; font-size: 16px; }
}

/* -- Deep Solve ------------------------------------------------------------ */
.solve-header { text-align: center; padding: 28px 0 16px; }
.solve-header h2 { font-size: 2rem; font-weight: 800; color: var(--primary); }
.solve-subtitle { font-size: 16px; color: var(--muted-fg); }

.solve-textarea {
  width: 100%;
  padding: 14px 18px;
  border: 3px solid var(--border);
  border-radius: var(--radius-input);
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-clay-sm);
  resize: vertical;
  min-height: 100px;
  margin-bottom: 12px;
  outline: none;
}
.solve-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), var(--shadow-clay-sm);
}

/* Phase progress bar */
.solve-phase-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 20px 0;
  padding: 16px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-clay-sm);
}

.solve-phase-dot {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-fg);
  background: var(--muted);
  transition: all 0.3s var(--ease-spring);
  text-align: center;
}
.solve-phase-dot.active {
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: var(--shadow-clay);
  transform: scale(1.05);
}
.solve-phase-dot.completed {
  color: var(--on-primary);
  background: var(--success);
}

.solve-phase-connector {
  width: 20px;
  height: 3px;
  background: var(--border);
  flex-shrink: 0;
}

/* Output area */
#solve-output {
  max-height: 500px;
  overflow-y: auto;
  margin: 16px 0;
}

.solve-phase-section {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-clay-sm);
}

.solve-phase-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  font-family: var(--font-heading);
}

.solve-phase-content {
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Tool call/result display */
.solve-tool-call {
  background: #FEF3C7;
  border: 2px solid var(--secondary);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 13px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: #92400E;
}

.solve-tool-result {
  background: var(--muted);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 4px 0 10px;
  font-size: 13px;
  font-family: monospace;
  white-space: pre-wrap;
  color: var(--fg);
}

/* Status */
#solve-status {
  text-align: center;
  margin: 10px 0;
}
#solve-status-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
}

/* ── Accessibility (UI audit fix #2) ──────────────────────── */
.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;
}

/* ── Quiz Cards (UI audit fix #1) ─────────────────────────── */
.quiz-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--clay-shadow);
}
.quiz-q-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--primary);
  margin-bottom: 8px;
}
.quiz-question {
  font-family: var(--font-body);
  font-size: 16px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.quiz-answer-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.quiz-answer-row input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15px;
}
.quiz-answer-row button {
  padding: 10px 18px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
}
.quiz-correct { color: var(--success); font-weight: 700; }

/* ── Stop + Regenerate buttons (UX-01, UX-02) ────────────────────────────── */
.btn-stop {
  background: var(--destructive);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-clay-sm);
}
.btn-stop:hover { filter: brightness(1.05); }

.btn-regenerate {
  background: var(--card);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: var(--radius-btn);
  padding: 6px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.btn-regenerate:hover { background: var(--muted); }

#btn-solve-stop { margin-top: 12px; }

/* ── Toast notification (UX-03) ──────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: var(--fg);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  box-shadow: var(--shadow-clay);
}
.toast.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Save-to-notebook button (UX-03) ─────────────────────────────────────── */
.btn-save-note {
  display: inline-block;
  margin-left: 8px;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-btn);
  padding: 2px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-save-note:hover { background: var(--muted); }

/* Phase 29 / NOTE-02: source-color left-border accent on save buttons */
.btn-save-note[data-source]                      { border-left: 3px solid var(--source-color-chat); }
.btn-save-note[data-source="research"]           { border-left-color: var(--source-color-research); }
.btn-save-note[data-source="cowriter"]           { border-left-color: var(--source-color-cowriter); }
.btn-save-note[data-source="book"]               { border-left-color: var(--source-color-book); }
.btn-save-note[data-source="journey"]            { border-left-color: var(--source-color-journey); }
.quiz-incorrect { color: var(--error); font-weight: 700; }

/* ── Dark theme (UX-04) ───────────────────────────────────────────────────── */
[data-theme="dark"] {
  --primary: #60A5FA;
  --primary-light: #93C5FD;
  --on-primary: #0B1220;
  --cta: #FB923C;
  --cta-hover: #F97316;
  --on-cta: #0B1220;
  --secondary: #FBBF24;
  --accent: #F472B6;
  --success: #34D399;
  --destructive: #F87171;
  --bg: #0F172A;
  --fg: #E2E8F0;
  --card: #1E293B;
  --card-fg: #F1F5F9;
  --muted: #334155;
  --muted-fg: #94A3B8;
  --border: #334155;
  --shadow-clay: 6px 6px 16px rgba(0, 0, 0, 0.35), -3px -3px 10px rgba(255, 255, 255, 0.03);
  --shadow-clay-hover: 8px 8px 24px rgba(0, 0, 0, 0.45), -4px -4px 14px rgba(255, 255, 255, 0.04);
  --shadow-clay-sm: 3px 3px 8px rgba(0, 0, 0, 0.3), -2px -2px 6px rgba(255, 255, 255, 0.02);
}

/* ── High-contrast theme (UX-04) ─────────────────────────────────────────── */
[data-theme="hc"] {
  --primary: #000000;
  --primary-light: #1A1A1A;
  --on-primary: #FFFFFF;
  --cta: #000000;
  --cta-hover: #1A1A1A;
  --on-cta: #FFFFFF;
  --secondary: #000000;
  --accent: #000000;
  --success: #006400;
  --destructive: #8B0000;
  --bg: #FFFFFF;
  --fg: #000000;
  --card: #FFFFFF;
  --card-fg: #000000;
  --muted: #F0F0F0;
  --muted-fg: #000000;
  --border: #000000;
  --shadow-clay: 0 0 0 2px #000000;
  --shadow-clay-hover: 0 0 0 3px #000000;
  --shadow-clay-sm: 0 0 0 1px #000000;
}

/* ── Mode nav (UX-05) ────────────────────────────────────────────────────── */
.mode-nav {
  display: flex;
  gap: 6px;
  padding: 8px 0 16px;
  margin: 0 auto;
  max-width: 540px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mode-nav::-webkit-scrollbar { display: none; }
.mode-pill {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted-fg);
  background: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--border);
  transition: background 0.15s ease, color 0.15s ease;
}
.mode-pill.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.mode-pill:hover { background: var(--primary-light); color: var(--on-primary); }

.mode-container { display: none; }
.mode-container.mode-active { display: block; }

.mode-placeholder {
  background: var(--card);
  color: var(--card-fg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
  margin: 24px auto;
  max-width: 540px;
}
.mode-placeholder h2 { color: var(--primary); margin-bottom: 8px; }
.mode-placeholder p  { color: var(--muted-fg); }

/* ── Theme toggle button (UX-04) ─────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-clay-sm);
}
.theme-toggle:hover { background: var(--muted); }

/* Phase 17 — Visualization containers (VIZ-01..04) */
.viz-container {
  margin: 12px 0;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 60px;
  overflow-x: auto;
  color: var(--foreground);
}
.viz-container svg,
.viz-container canvas,
.viz-container video {
  max-width: 100%;
  height: auto;
}
.viz-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 12px;
}
.viz-gallery-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
}
.viz-gallery-item h4 { margin: 0 0 6px 0; font-size: 14px; }
.viz-gallery-item p  { margin: 0; font-size: 12px; color: var(--muted-foreground); }

/* Phase 18 — Guided Learning Journey UI (GUIDE-01..05) */
.journey-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.journey-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  color: var(--foreground);
  font: inherit;
}
.journey-card:hover { background: var(--muted); }
.journey-scaffold-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--muted);
  border-radius: 999px;
  margin-bottom: 8px;
  color: var(--muted-foreground);
}
.journey-content { line-height: 1.6; margin: 12px 0; }
.journey-content p { margin: 8px 0; }
.journey-checkpoint {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}
.journey-checkpoint h4 { margin: 0 0 8px 0; }
.journey-mcq-option {
  display: block;
  width: 100%;
  text-align: left;
  margin: 4px 0;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--foreground);
  font: inherit;
}
.journey-mcq-option:hover { background: var(--muted); }
.journey-sa-input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--foreground); font: inherit; }
.journey-feedback { margin-top: 8px; font-size: 13px; color: var(--muted-foreground); }
.journey-chat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}
.journey-chat-log { max-height: 200px; overflow-y: auto; margin: 8px 0; font-size: 13px; }
.journey-chat-user { color: var(--primary); margin: 4px 0; }
.journey-chat-bot { color: var(--foreground); margin: 4px 0; }
.journey-next-btn { margin-top: 16px; }

/* ── Phase 19: TutorBot persona switcher ─────────────────────────────────── */
.bot-switcher {
  position: fixed;
  top: 12px;
  right: 96px; /* clear of theme-toggle */
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  box-shadow: var(--shadow-clay-sm);
}

.bot-switcher-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted-fg);
  white-space: nowrap;
}

.bot-switcher-select {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.bot-switcher-select:focus {
  border-color: var(--primary);
}

/* Dark + HC theme overrides */
[data-theme="dark"] .bot-switcher,
[data-theme="hc"] .bot-switcher {
  background: var(--card);
  border-color: var(--border);
}

[data-theme="dark"] .bot-switcher-select,
[data-theme="hc"] .bot-switcher-select {
  background: var(--card);
  color: var(--fg);
  border-color: var(--border);
}

/* Responsive: hide label on very small screens */
@media (max-width: 480px) {
  .bot-switcher {
    right: 80px;
    padding: 4px 6px;
  }
  .bot-switcher-label {
    display: none;
  }
}

/* ============================================================
   Phase 20 — Research mode styles
   ============================================================ */

.research-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.research-subtitle {
  color: var(--muted-fg);
  font-size: 15px;
  margin: 0;
}

.research-input-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.research-textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-inner);
  background: var(--card);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.research-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.research-submit-btn {
  align-self: flex-start;
  min-width: 120px;
}

.research-hint {
  font-size: 12px;
  color: var(--muted-fg);
  margin: 0;
}

/* Status strip */
.research-status {
  padding: 10px 14px;
  border-radius: var(--radius-inner);
  font-size: 14px;
}

.research-status-info {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.research-status-success {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}

.research-status-error {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
  border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
}

/* Report card */
.research-report {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-outer);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.research-query-echo {
  font-size: 13px;
  color: var(--muted-fg);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Source badges */
.research-sources-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.research-source-badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.research-source-rag {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.research-source-web {
  background: color-mix(in srgb, var(--secondary) 20%, transparent);
  color: #92400e;
}

.research-source-academic {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

/* Report body typography */
.research-report-body {
  line-height: 1.7;
  font-size: 15px;
  color: var(--fg);
}

.research-report-body p {
  margin: 0 0 12px;
}

.research-heading {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  color: var(--fg);
  margin: 20px 0 8px;
}

.research-report-body h2.research-heading { font-size: 20px; }
.research-report-body h3.research-heading { font-size: 17px; }
.research-report-body h4.research-heading { font-size: 15px; }

.research-blockquote {
  border-left: 3px solid var(--primary);
  margin: 0 0 12px;
  padding: 6px 14px;
  color: var(--muted-fg);
  font-style: italic;
}

.research-blockquote p {
  margin: 0;
}

.research-list {
  margin: 0 0 12px;
  padding-left: 24px;
}

.research-list li {
  margin-bottom: 6px;
}

/* Inline citation superscript */
.research-citation {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: 0 1px;
}

.research-citation:hover {
  text-decoration: underline;
}

/* Citations section */
.research-citations-header {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin: 16px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.research-citation-list {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.research-citation-item {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-fg);
}

.research-citation-number {
  font-weight: 700;
  color: var(--primary);
  min-width: 28px;
  flex-shrink: 0;
}

.research-citation-content {
  flex: 1;
}

.research-citation-link {
  color: var(--primary);
  word-break: break-all;
}

.research-citation-link:hover {
  text-decoration: underline;
}

/* Dark theme overrides */
[data-theme="dark"] .research-textarea {
  background: var(--card);
  color: var(--fg);
  border-color: var(--border);
}

[data-theme="dark"] .research-source-web {
  color: #fcd34d;
}

@media (max-width: 600px) {
  .research-container {
    padding: 16px 12px;
  }
  .research-report {
    padding: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 21 — Engagement: Streak Badge + Notification Banner
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Streak badge ──────────────────────────────────────────────────────────── */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--secondary, #F59E0B);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-clay-sm);
  white-space: nowrap;
  transition: transform 0.15s var(--ease-spring, ease);
}

.streak-badge:hover {
  transform: scale(1.05);
}

[data-theme="dark"] .streak-badge {
  background: #d97706;
  color: #fff;
}

/* ── Notification banner ───────────────────────────────────────────────────── */
.notification-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: var(--primary, #2563EB);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  position: relative;
  z-index: 1000;
  box-sizing: border-box;
  animation: bannerSlideDown 0.3s var(--ease-spring, ease) both;
}

@keyframes bannerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.notification-banner--check_in {
  background: linear-gradient(90deg, var(--primary, #2563EB), #7c3aed);
}

.notification-banner--streak_reminder {
  background: linear-gradient(90deg, #d97706, var(--cta, #F97316));
}

.notification-banner--review_due {
  background: linear-gradient(90deg, #0891b2, #0e7490);
}

.notification-banner__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.notification-banner__text {
  flex: 1;
  min-width: 0;
}

.notification-banner__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}

.notification-banner__body {
  margin: 2px 0 0;
  opacity: 0.92;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-banner__cta {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-btn, 20px);
  padding: 6px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s var(--ease-spring, ease);
}

.notification-banner__cta:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.04);
}

.notification-banner__dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s, transform 0.15s;
}

.notification-banner__dismiss:hover {
  color: #fff;
  transform: scale(1.2);
}

@media (max-width: 600px) {
  .notification-banner {
    flex-wrap: wrap;
    padding: 10px 14px;
  }
  .notification-banner__body {
    white-space: normal;
  }
  .notification-banner__cta {
    order: 3;
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }
  .streak-badge span,
  .streak-badge .label {
    display: none; /* hide "day streak" text on small screens, keep icon+number */
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 22 — Co-Writer layout
   Sidebar (doc list) + main editor/preview pane, action menu, autonomy modal
   ══════════════════════════════════════════════════════════════════════════ */

/* Root layout: sidebar + main side-by-side */
.cowriter-root {
  display: flex;
  gap: 0;
  height: calc(100vh - 140px);
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-clay);
  background: var(--card);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.cw-sidebar {
  width: 220px;
  min-width: 180px;
  max-width: 260px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--muted);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  overflow: hidden;
}

.cw-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.cw-sidebar-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.cw-btn-new {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-btn);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.cw-btn-new:hover { background: var(--primary-light); }

.cw-doc-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}

.cw-doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 2px 6px;
  transition: background 0.15s;
}
.cw-doc-item:hover { background: var(--border); }
.cw-doc-item.active {
  background: var(--primary);
  color: var(--on-primary);
}
.cw-doc-item.active .cw-doc-name { color: var(--on-primary); }
.cw-doc-item.active .cw-doc-delete { color: rgba(255,255,255,0.7); }

.cw-doc-name {
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}

.cw-doc-delete {
  background: none;
  border: none;
  color: var(--muted-fg);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.1s;
}
.cw-doc-delete:hover { color: var(--destructive); }

.cw-doc-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--muted-fg);
  font-style: italic;
}

/* ── Main editor area ────────────────────────────────────────────────────── */

.cw-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.cw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  gap: 12px;
  flex-shrink: 0;
}

.cw-doc-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.cw-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cw-save-status {
  font-size: 11px;
  color: var(--muted-fg);
  min-width: 80px;
  text-align: right;
}

.cw-btn-toggle {
  background: var(--muted);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.cw-btn-toggle:hover { background: var(--border); }

/* ── Editor pane ─────────────────────────────────────────────────────────── */

.cw-editor-pane {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.cw-editor {
  flex: 1;
  padding: 20px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--card);
  outline: none;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Placeholder via ::before when empty */
.cw-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-fg);
  pointer-events: none;
}

.cw-preview {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--card);
}

/* Markdown preview typography */
.cw-preview h1, .cw-preview h2, .cw-preview h3 {
  font-family: var(--font-heading);
  margin: 1em 0 0.5em;
}
.cw-preview p { margin: 0.5em 0; }
.cw-preview ul, .cw-preview ol { padding-left: 1.5em; margin: 0.5em 0; }
.cw-preview code {
  background: var(--muted);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
}
.cw-preview pre {
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 12px;
  overflow-x: auto;
}
.cw-preview blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  color: var(--muted-fg);
  margin: 0.5em 0;
}

/* ── Selection action menu ───────────────────────────────────────────────── */

.cw-action-menu {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  z-index: 10;
}

.cw-action-btn {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-btn);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s var(--ease-spring);
}
.cw-action-btn:hover { background: var(--primary-light); transform: scale(1.04); }
.cw-action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Autonomy modal ──────────────────────────────────────────────────────── */

.cw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.cw-modal {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-clay-hover);
  padding: 28px 24px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cw-modal h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  margin: 0;
}

.cw-modal-question {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.cw-modal-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.cw-modal-suggested {
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.cw-modal-rationale {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
  color: var(--fg);
  background: var(--card);
  outline: none;
}
.cw-modal-rationale:focus { border-color: var(--primary); }

.cw-modal-btns {
  display: flex;
  gap: 10px;
}

.cw-btn-accept {
  flex: 1;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-btn);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.cw-btn-accept:hover { background: var(--primary-light); }

.cw-btn-discard {
  flex: 1;
  background: var(--muted);
  color: var(--muted-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.cw-btn-discard:hover { background: var(--border); }

/* ── Responsive: collapse sidebar on small screens ───────────────────────── */

@media (max-width: 600px) {
  .cowriter-root { flex-direction: column; height: auto; min-height: 0; }
  .cw-sidebar { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid var(--border); border-radius: var(--radius-card) var(--radius-card) 0 0; max-height: 180px; }
  .cw-doc-list { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 6px; }
  .cw-doc-item { min-width: 120px; flex-shrink: 0; }
  .cw-editor-pane { min-height: 300px; }
  .cw-editor, .cw-preview { min-height: 300px; }
}

/* ==========================================================================
   Phase 23 — Book Engine Reader Styles
   Theme-aware via CSS custom properties (Phase 16 light/dark/hc support)
   ========================================================================== */

/* Book list */
.book-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.book-list-title { margin: 0; font-size: 22px; }
.book-create-btn { margin-left: auto; }
.book-list { display: flex; flex-direction: column; gap: 12px; }
.book-list-empty { color: var(--text-muted, #888); font-style: italic; }

/* Book card */
.book-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-card, 8px);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.book-card-topic { flex: 1; font-weight: 600; font-size: 16px; min-width: 120px; }
.book-card-meta { display: flex; align-items: center; gap: 8px; }
.book-card-pages { font-size: 13px; color: var(--text-muted, #888); }
.book-card-progress { font-size: 13px; color: var(--accent, #4a90e2); }
.book-card-failed { font-size: 13px; color: var(--error, #d32f2f); }

/* Status badge */
.book-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.book-status-done    { background: #e8f5e9; color: #2e7d32; }
.book-status-failed  { background: #ffebee; color: #c62828; }
.book-status-pending,
.book-status-ideating,
.book-status-sourcing,
.book-status-spinning,
.book-status-planning,
.book-status-compiling {
  background: #fff3e0; color: #e65100;
}
[data-theme="dark"] .book-status-done    { background: #1b5e20; color: #a5d6a7; }
[data-theme="dark"] .book-status-failed  { background: #b71c1c; color: #ef9a9a; }
[data-theme="dark"] .book-status-pending,
[data-theme="dark"] .book-status-ideating,
[data-theme="dark"] .book-status-sourcing,
[data-theme="dark"] .book-status-spinning,
[data-theme="dark"] .book-status-planning,
[data-theme="dark"] .book-status-compiling {
  background: #e65100; color: #ffe0b2;
}

/* Create form */
.book-create-form { max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.book-form-label   { font-weight: 600; font-size: 14px; }
.book-form-input,
.book-form-select  {
  padding: 8px 12px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-card, 8px);
  background: var(--surface, #fff);
  color: var(--text, #111);
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
}
.book-form-error { color: var(--error, #d32f2f); font-size: 13px; }
.book-back-btn { padding: 4px 0; font-size: 14px; color: var(--accent, #4a90e2); }

/* Generation progress */
.book-gen-progress { max-width: 560px; }
.book-gen-title    { margin-bottom: 8px; font-size: 18px; }
.book-gen-stage    { font-size: 14px; color: var(--text-muted, #888); margin-bottom: 8px; }
.book-gen-bar      { height: 8px; background: var(--border, #e0e0e0); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.book-gen-bar-fill { height: 100%; background: var(--accent, #4a90e2); border-radius: 4px; transition: width 0.4s ease; }
.book-gen-pages    { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--text-muted, #888); }
.book-gen-pages li::before { content: '✓ '; color: #4caf50; }

/* Reader */
.book-reader { display: flex; flex-direction: column; gap: 0; }
.book-reader-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #f5f5f5);
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  margin-bottom: 16px;
}
.book-reader-title  { margin: 4px 0 8px; font-size: 20px; }
.book-progress-wrap { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.book-progress-bar  { flex: 1; height: 6px; background: var(--border, #e0e0e0); border-radius: 3px; overflow: hidden; }
.book-progress-fill { height: 100%; background: var(--accent, #4a90e2); border-radius: 3px; transition: width 0.3s; }
.book-page-counter  { font-size: 13px; color: var(--text-muted, #888); white-space: nowrap; }

.book-page-content  { min-height: 300px; padding: 0 0 24px; }
.book-reader-nav    { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border, #e0e0e0); }

/* Block base */
.book-block { margin-bottom: 20px; }

/* TextBlock */
.book-block-text p   { line-height: 1.7; margin: 0 0 14px; }
.book-block-text ul  { padding-left: 20px; }
.book-block-text li  { margin-bottom: 6px; line-height: 1.6; }

/* SectionBlock */
.book-block-section.book-section-h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent, #4a90e2);
}
.book-block-section.book-section-h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 20px 0 10px;
}

/* CalloutBlock */
.book-block-callout {
  border-left: 4px solid var(--accent, #4a90e2);
  background: var(--surface, #f9f9f9);
  border-radius: 0 var(--radius-card, 8px) var(--radius-card, 8px) 0;
  padding: 12px 16px;
}
.book-callout-note    { border-left-color: #2196f3; background: #e3f2fd; }
.book-callout-warning { border-left-color: #ff9800; background: #fff3e0; }
.book-callout-tip     { border-left-color: #4caf50; background: #e8f5e9; }
.book-callout-example { border-left-color: #9c27b0; background: #f3e5f5; }
[data-theme="dark"] .book-callout-note    { background: #1a3a5c; }
[data-theme="dark"] .book-callout-warning { background: #3e2000; }
[data-theme="dark"] .book-callout-tip     { background: #1b3a1f; }
[data-theme="dark"] .book-callout-example { background: #2d1540; }
.book-callout-header  { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.book-callout-icon    { font-size: 16px; }
.book-callout-title   { font-weight: 700; font-size: 14px; }
.book-callout-body p  { margin: 0; line-height: 1.6; }

/* CodeBlock */
.book-block-code {
  position: relative;
  background: var(--code-bg, #1e1e1e);
  border-radius: var(--radius-card, 8px);
  overflow: hidden;
}
.book-code-lang {
  background: rgba(255,255,255,0.1);
  color: #ccc;
  font-size: 11px;
  padding: 4px 10px;
  font-family: monospace;
}
.book-block-code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
}
.book-block-code code {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  color: var(--code-text, #d4d4d4);
  white-space: pre;
}
.book-code-copy {
  position: absolute;
  top: 6px;
  right: 8px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #ccc;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.book-code-copy:hover { background: rgba(255,255,255,0.25); }

/* QuizBlock */
.book-block-quiz {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-card, 8px);
  padding: 16px;
}
.book-quiz-question { font-weight: 600; margin-bottom: 12px; line-height: 1.5; }
.book-quiz-choices  { display: flex; flex-direction: column; gap: 8px; }
.book-quiz-choice   {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.book-quiz-choice:hover { background: var(--hover-bg, #f0f4ff); }
.book-quiz-choice input[type=radio] { margin: 0; }
.book-quiz-choice-text  { font-size: 14px; }
.book-quiz-choice-correct { border-color: #4caf50; background: #e8f5e9; }
.book-quiz-choice-wrong   { border-color: #f44336; background: #ffebee; }
.book-quiz-feedback {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.book-quiz-correct   { background: #e8f5e9; color: #2e7d32; border: 1px solid #4caf50; }
.book-quiz-incorrect { background: #ffebee; color: #c62828; border: 1px solid #f44336; }

/* PlaceholderBlock */
.book-block-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface, #fafafa);
  border: 1px dashed var(--border, #e0e0e0);
  border-radius: var(--radius-card, 8px);
  color: var(--text-muted, #888);
  font-size: 14px;
}
.book-placeholder-spinner { font-size: 20px; }

/* Recompile notice */
.book-recompile-notice {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  color: #795548;
  margin-bottom: 12px;
}
[data-theme="dark"] .book-recompile-notice { background: #3e2c00; border-color: #8d6e00; color: #ffcc80; }

/* Math */
.book-math-display { display: block; text-align: center; margin: 16px 0; overflow-x: auto; }
.book-math-inline  { display: inline; }

/* Loading state */
.book-loading { padding: 24px; color: var(--text-muted, #888); }
.book-empty-msg { color: var(--text-muted, #888); font-style: italic; }

/* Mobile responsive */
@media (max-width: 600px) {
  .book-list-header  { flex-direction: column; align-items: flex-start; gap: 8px; }
  .book-reader-nav   { flex-direction: column; gap: 8px; }
  .book-reader-nav button { width: 100%; }
  .book-block-code pre { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 24 — Notebooks UI
   ══════════════════════════════════════════════════════════════════════════ */

.nb-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.nb-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}

.nb-search-wrap {
  display: flex;
  gap: 8px;
}

.nb-search-input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.15s;
}
.nb-search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.nb-search-btn {
  padding: 10px 18px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.nb-search-btn:hover { background: var(--primary-light); }

/* Tag filter chips */
.nb-tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 0;
}

.nb-tag-chip {
  padding: 5px 14px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  color: var(--muted-fg);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.nb-tag-chip:hover { border-color: var(--primary); color: var(--primary); }
.nb-tag-chip--active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

/* Notebook list */
.nb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nb-empty {
  color: var(--muted-fg);
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}

/* Notebook card */
.nb-card {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-clay-sm);
  overflow: hidden;
  transition: box-shadow 0.15s;
  position: relative;
}
.nb-card:hover { box-shadow: var(--shadow-clay-hover); }

.nb-card-accent {
  width: 6px;
  flex-shrink: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.nb-card-body {
  flex: 1;
  padding: 14px 12px;
  min-width: 0;
}

.nb-card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nb-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.nb-source-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nb-card-date {
  font-size: 12px;
  color: var(--muted-fg);
}

.nb-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.nb-card-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--muted);
  color: var(--muted-fg);
  border-radius: 10px;
}

.nb-card-del {
  align-self: center;
  margin-right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted-fg);
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.nb-card-del:hover {
  background: var(--destructive);
  color: #fff;
}

/* Delete confirmation modal */
.nb-confirm-modal {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 100%);
  background: var(--card);
  border-top: 3px solid var(--destructive);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  padding: 20px 24px;
  z-index: 100;
  animation: nb-slide-up 0.2s var(--ease-spring);
}

@keyframes nb-slide-up {
  from { transform: translateX(-50%) translateY(100%); }
  to   { transform: translateX(-50%) translateY(0); }
}

.nb-confirm-msg {
  font-size: 15px;
  color: var(--fg);
  margin-bottom: 16px;
}

.nb-confirm-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.nb-confirm-delete {
  padding: 9px 22px;
  background: var(--destructive);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.nb-confirm-delete:hover { opacity: 0.88; }

.nb-confirm-cancel {
  padding: 9px 22px;
  background: var(--muted);
  color: var(--muted-fg);
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
.nb-confirm-cancel:hover { background: var(--border); }

/* Dark theme overrides */
[data-theme="dark"] .nb-card { background: #1e2535; }
[data-theme="dark"] .nb-search-input { background: #1e2535; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .nb-tag-chip { background: #1e2535; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .nb-confirm-modal { background: #1e2535; }

/* ══════════════════════════════════════════════════════════════════════════
   Phase 24 — Question Bank UI
   ══════════════════════════════════════════════════════════════════════════ */

.qb-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.qb-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}

.qb-teacher-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.qb-btn-create, .qb-btn-assign {
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.qb-btn-create  { background: var(--primary); color: var(--on-primary); }
.qb-btn-assign  { background: var(--cta);     color: var(--on-cta); }
.qb-btn-create:hover, .qb-btn-assign:hover { opacity: 0.88; }

/* Filter bar */
.qb-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--muted);
  border-radius: var(--radius-card);
}

.qb-filter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qb-filter-label {
  font-size: 13px;
  color: var(--muted-fg);
  font-weight: 600;
}

.qb-filter-select {
  padding: 6px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
.qb-filter-select:focus { outline: none; border-color: var(--primary); }

.qb-bm-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted-fg);
  cursor: pointer;
}

.qb-bm-check { cursor: pointer; }

/* Question list */
.qb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qb-empty {
  color: var(--muted-fg);
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}

/* Question card */
.qb-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-clay-sm);
  padding: 10px 14px;
  transition: box-shadow 0.15s;
}
.qb-card:hover { box-shadow: var(--shadow-clay-hover); }

.qb-card-check { flex-shrink: 0; cursor: pointer; width: 18px; height: 18px; }

.qb-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
  min-width: 0;
}

.qb-card-subject {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
}

.qb-card-kind {
  font-size: 11px;
  color: var(--muted-fg);
  margin-left: 8px;
}

.qb-card-kc {
  font-size: 11px;
  color: var(--muted-fg);
  margin-left: 8px;
  font-style: italic;
}

.qb-card-preview {
  font-size: 14px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.qb-bm-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted-fg);
  transition: color 0.15s, transform 0.15s var(--ease-spring);
  padding: 4px;
  border-radius: 50%;
}
.qb-bm-btn:hover { color: var(--secondary); transform: scale(1.15); }
.qb-bm-btn--active { color: var(--secondary); }

/* Modal shared styles */
.qb-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius-outer);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  padding: 24px 20px 20px;
  z-index: 200;
  animation: qb-pop-in 0.2s var(--ease-spring);
}

@keyframes qb-pop-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.qb-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted-fg);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background 0.15s;
}
.qb-modal-close:hover { background: var(--muted); }

.qb-modal-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 16px;
  padding-right: 32px;
}

.qb-detail-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.qb-detail-label { font-weight: 700; color: var(--muted-fg); min-width: 60px; }
.qb-detail-value { color: var(--fg); }

.qb-detail-question {
  font-size: 16px;
  color: var(--fg);
  line-height: 1.5;
  margin: 14px 0;
  padding: 12px;
  background: var(--muted);
  border-radius: var(--radius-sm);
}

.qb-detail-hint-title { font-weight: 700; font-size: 13px; color: var(--muted-fg); margin-bottom: 6px; }
.qb-detail-hint {
  font-size: 13px;
  color: var(--fg);
  padding: 6px 10px;
  background: var(--muted);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

.qb-mention-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--muted);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.qb-mention-label { font-size: 12px; color: var(--muted-fg); }
.qb-mention-code  { font-size: 13px; font-family: monospace; color: var(--primary); background: var(--card); padding: 2px 8px; border-radius: 6px; }
.qb-mention-copy  { padding: 4px 12px; background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--radius-btn); font-size: 12px; cursor: pointer; }
.qb-mention-copy:hover { opacity: 0.88; }

/* Form fields shared */
.qb-field-wrap  { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.qb-field-label { font-size: 13px; font-weight: 600; color: var(--muted-fg); }
.qb-field-input, .qb-field-textarea {
  padding: 9px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.qb-field-input:focus, .qb-field-textarea:focus { outline: none; border-color: var(--primary); }
.qb-field-textarea { resize: vertical; }

.qb-create-err { color: var(--destructive); font-size: 13px; margin-bottom: 8px; }

.qb-btn-create-submit {
  width: 100%;
  padding: 11px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
}
.qb-btn-create-submit:hover { opacity: 0.88; }
.qb-btn-create-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Dark theme */
[data-theme="dark"] .qb-card      { background: #1e2535; }
[data-theme="dark"] .qb-filter-bar { background: #263045; }
[data-theme="dark"] .qb-filter-select { background: #1e2535; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .qb-modal     { background: #1e2535; }
[data-theme="dark"] .qb-field-input,
[data-theme="dark"] .qb-field-textarea { background: #263045; border-color: #334155; color: #e2e8f0; }

/* Mobile */
@media (max-width: 600px) {
  .qb-filter-bar { flex-direction: column; align-items: flex-start; }
  .nb-confirm-modal { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 24 — @q: mention preview chips (shown in answer input area)
   ══════════════════════════════════════════════════════════════════════════ */

.at-mention-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.at-mention-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 12px;
  font-size: 12px;
  font-family: monospace;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-clay-sm);
}

[data-theme="dark"] .at-mention-chip { background: var(--primary-light); }

/* ── Phase 29 NOTE-02: Source-color accent tokens (window.saveToNotebook) ── */
/* Maps the 8 notebook sources to their Phase 24 accent colors. */
/* Used by notebook card borders, badges, and save-to-notebook.js JS map.     */
:root, [data-theme="light"] {
  --source-color-chat:     #3B82F6;  /* blue     */
  --source-color-kb-chat:  #A855F7;  /* purple   */
  --source-color-research: #14B8A6;  /* teal     */
  --source-color-cowriter: #F59E0B;  /* amber    */
  --source-color-book:     #10B981;  /* green    */
  --source-color-journey:  #EC4899;  /* pink     */
  --source-color-solve:    #F97316;  /* orange   */
  --source-color-quiz:     #EF4444;  /* red      */
}

[data-theme="dark"] {
  --source-color-chat:     #60A5FA;  /* blue-400  */
  --source-color-kb-chat:  #C084FC;  /* purple-400 */
  --source-color-research: #2DD4BF;  /* teal-400  */
  --source-color-cowriter: #FBBF24;  /* amber-400 */
  --source-color-book:     #34D399;  /* green-400 */
  --source-color-journey:  #F472B6;  /* pink-400  */
  --source-color-solve:    #FB923C;  /* orange-400 */
  --source-color-quiz:     #F87171;  /* red-400   */
}

/* ── Settings modal — Phase 29 / CHAN-01 ──────────────────────────────────── */

/* Gear icon button — sits left of theme-toggle in top-right corner */
.settings-toggle {
  position: fixed;
  top: 12px;
  right: 80px;
  z-index: 100;
  background: var(--card, var(--bg));
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-clay-sm, none);
}
.settings-toggle:hover { background: var(--muted); }

/* Modal overlay — full-screen semi-transparent backdrop */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

/* Modal dialog — centered card */
.modal-dialog {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}

/* X close button — top-right of dialog */
.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  color: var(--fg);
  border: none;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.modal-close:hover { background: var(--muted); border-radius: 4px; }

/* Link code monospace display */
.link-code-mono {
  display: inline-block;
  font-family: monospace;
  font-size: 28px;
  letter-spacing: 4px;
  padding: 8px 12px;
  margin: 8px 0;
  background: var(--muted);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  user-select: all;
}

/* Platform instruction list */
.platform-instructions {
  list-style: none;
  padding-left: 0;
  margin-top: 12px;
}
.platform-instructions li { margin-bottom: 8px; }

/* Helper / caption text */
.settings-help {
  color: var(--muted-fg, var(--fg));
  font-size: 0.9em;
  display: block;
  margin-top: 4px;
}

/* Error message inside modal */
.settings-error {
  color: #e53e3e;
  font-size: 0.9em;
  margin: 6px 0;
  min-height: 1em;
}

/* Settings section spacing */
.settings-section { margin-top: 16px; }
.settings-section h3 { margin-bottom: 8px; }

/* ── Responsive: mobile full-screen modal ─────────────────────── */
@media (max-width: 600px) {
  .modal-dialog {
    max-width: none;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  .modal-overlay { align-items: stretch; }
  .settings-toggle { right: 68px; }
}

/* ── Theme: dark ─────────────────────────────────────────────── */
[data-theme="dark"] .modal-dialog {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

/* ── Theme: high-contrast ────────────────────────────────────── */
[data-theme="hc"] .modal-dialog {
  border-width: 2px;
}