/* Student UI reskin — flat, token-based overrides.
   Loaded last so it wins; remove the <link> to fully revert.
   Holds the locked palette: blue primary, purple accent, grey neutral.
   No gradients, no pastel fills, no colored circle/chip icon backgrounds. */

/* sidebar — tutors */
.sidebar-agent.active {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
/* hover grey comes from style.css (#f3f4f6) — it must stay darker than the
   sidebar's own #f9fafb or the highlight disappears into the background */

/* flatten the gradient/circle avatar chip into a plain on-palette monogram */
.sidebar-agent-avatar {
  background: none !important;
  color: var(--text-3) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
}
.sidebar-agent.active .sidebar-agent-avatar {
  color: var(--primary) !important;
}
.sidebar-agent.active .sidebar-agent-name {
  font-weight: 700 !important;
}

/* status dot — grey, blue when active (no gradient) */
.sidebar-agent-dot {
  background: var(--n-300) !important;
}
.sidebar-agent-dot.active {
  background: var(--primary) !important;
}

/* resource + settings button hover greys live in style.css (#f3f4f6, matching
   COLAB Math) — they must stay darker than the sidebar's own #f9fafb or the
   highlight disappears into the background */
/* consistent sidebar option text: same font-family + color across Tutors, Tools, Your Progress */
.sidebar-resource-btn {
  color: var(--text-2) !important;
  font-family: inherit !important;
}
.sidebar-agent-name { color: var(--text-2) !important; }

/* progress-display inline icon colors → locked palette */
.progress-display .fa-robot { color: var(--primary) !important; }
.progress-display .fa-trophy { color: var(--accent) !important; }

/* agent avatar holds a line-icon glyph (currentColor, mature/age-neutral) */
.sidebar-agent-avatar { background: none !important; }
.sidebar-agent-avatar svg { width: 20px; height: 20px; }

/* declutter — fewer controls for K-12; advanced/teacher tools one tap away */
/* progress: analytics is a teacher view; "AI Generations" is dev jargon */
.sidebar-resource-item.teacher-only,
.sidebar-resource-item.dev-jargon { display: none !important; }
#sidebarProgressSection { display: none !important; }

/* settings row: keep dark mode + text size; rest behind "More" */
.sidebar-settings-row .adv-item { display: none !important; }
.sidebar-settings-row.show-more .adv-item { display: inline-flex !important; }

/* footer: keep Clear + Check; Undo/Redo/Save behind "More" */
.footer-actions .adv-item { display: none !important; }
.footer-actions.show-more .adv-item { display: inline-flex !important; }

/* the More toggles read as quiet, on-palette */
.more-toggle { color: var(--text-3) !important; }
.more-toggle:hover { color: var(--text) !important; background: var(--surface-2) !important; }
.sidebar-settings-row.show-more .more-toggle,
.footer-actions.show-more .more-toggle { color: var(--primary) !important; }

/* tool + logo glyphs → SVG (currentColor inherits button text color) */
.sidebar-resource-btn .res-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* chat — flat student message bubble, no colored glow */
/* user message — flat: filled icon chip carries the identity, text stays dark,
   no saturated bubble field (K-12: fewer loud surfaces, shorter turns) */
#output .user { box-shadow: none !important; background: transparent !important; color: var(--text) !important; border-radius: 0 !important; padding: 2px 0 !important; gap: 9px; }
#output .user span { color: var(--text); }
#output .user .user-icon-wrapper { background: var(--primary); border-radius: 9px; width: 28px; height: 28px; display: inline-flex !important; align-items: center; justify-content: center; flex: none; }
#output .user .user-icon { color: #fff !important; font-size: 13px; }
body.dark-mode #output .user { background: transparent !important; }
body.dark-mode #output .user span { color: #e5e7eb; }

/* solved celebration pill */
.mt-celebrate { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; padding: 12px 18px; box-shadow: var(--sh-2); cursor: pointer; }
.mt-celebrate svg { width: 30px; height: 30px; flex: 0 0 auto; }
.mt-celebrate b { display: block; font-size: 14.5px; font-weight: 750; color: var(--text); }
.mt-celebrate span { font-size: 12px; color: var(--text-2); }
.mt-teachback { border: 1px solid var(--primary-line); border-radius: 999px; background: transparent; color: var(--primary-hover); font-weight: 700; font-size: 12.5px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.mt-teachback:hover { background: var(--surface-2); }
.mt-celebrate-x { border: none; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.mt-celebrate-x:hover { color: var(--text); }

/* full-window layout — the chat fills the space the sidebar leaves, on every device */
.conversation-container,
.chat-input .welcome-placeholder,
.chat-input .input-group,
.recommendation-chips {
  max-width: min(1400px, 94vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 1100px) {
  .conversation-container,
  .chat-input .welcome-placeholder,
  .chat-input .input-group,
  .recommendation-chips {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
@media (max-width: 600px) {
  .conversation-container,
  .chat-input .welcome-placeholder,
  .chat-input .input-group,
  .recommendation-chips {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .mt-dock { right: 12px; top: 12px; }
  .mt-celebrate { width: calc(100vw - 24px); flex-wrap: wrap; }
}

/* teacher flagged tab + family link */
.mt-flag-when { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.mt-family { font-size: 12px; font-weight: 650; color: var(--primary-hover); text-decoration: none; border: 1px solid var(--primary-line); border-radius: 999px; padding: 4px 11px; }
.mt-family:hover { background: var(--surface-2); }

/* onboarding */
.mt-ob { width: min(460px, 94vw); }
.mt-ob-body { padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 10px; }
.mt-ob-title { font-size: 20px; font-weight: 750; color: var(--text); }
.mt-ob-sub { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.mt-ob-hint { margin: -4px 0 2px; font-size: 12px; color: var(--text-3); }
.mt-ob-body .mt-flabel { margin-top: 8px; }
.mt-ob-colors { display: flex; gap: 9px; }
.mt-ob-color { width: 40px; height: 40px; border-radius: 11px; border: 2px solid transparent; cursor: pointer; }
.mt-ob-color.on { border-color: var(--text); }
.mt-ob-grades { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-ob-go { margin-top: 14px; padding: 11px 0 !important; font-size: 14px !important; }
.mt-ob-go:disabled { opacity: .45; cursor: default; }
.mt-ob-skip { border: none; background: transparent; color: var(--text-3); font-size: 12px; cursor: pointer; align-self: center; padding: 4px; }
.mt-ob-skip:hover { color: var(--text); }

/* inline visual math model card — class-based colors so dark mode flips them */
/* flat and full-width: the model sits directly in the turn, no tinted card */
.mt-viz { border: none; border-radius: 0; padding: 0; max-width: none; background: transparent; margin-top: 2px; }
/* the model shows the picture; its caption narrates what the picture already
   says, so it stays for screen readers only (the group's own aria-label
   carries the same content visually) */
.mt-viz-cap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* shade palette on the visual models — a bare row of square swatches, no bar
   chrome; slightly larger when it stands alone above a model */
/* one color chip per model — each tap cycles to the next shade color */
#output .mt-viz .vz-color-chip, .vz-color-chip { width: 26px; height: 26px; min-width: 26px; border-radius: 6px; border: 1.5px solid rgba(34, 32, 27, 0.35); padding: 0; cursor: pointer; align-self: flex-end; }
body.dark-mode .vz-color-chip { border-color: rgba(255, 255, 255, 0.3); }
body.dark-mode .vz-swatch { border-color: rgba(255, 255, 255, 0.3); }

/* opens the embedded manipulative — a real button, same family as the
   drawing-space actions */
.mt-viz-open { display: flex; width: max-content; margin: 8px 0 0 auto; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; padding: 8px 13px; border: 1px solid #d1d5db; border-radius: 9px; background: #fff; color: #374151; text-decoration: none; }
.mt-viz-open:hover { background: #f3f4f6; text-decoration: none; }
.mt-viz-open i { font-size: 13px; color: #64748b; }
body.dark-mode .mt-viz-open { background: #1f1f1f; border-color: #3a3a3a; color: #e5e7eb; }
body.dark-mode .mt-viz { background: transparent; }
body.dark-mode .mt-viz-cap { color: #9ca3af; }
body.dark-mode .mt-viz .vz-text { fill: #9ca3af; }
.mt-viz-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.mt-viz-panes > .mt-viz-pane { min-width: 0; }
.mt-viz-panes > .mt-viz-pane > .mt-viz { margin-top: 0; }
.mt-viz-link { margin-top: 12px; padding-top: 11px; border-top: 1px dashed #d1d5db; text-align: center; font-size: 15px; font-weight: 550; color: #374151; }
@media (max-width: 560px) { .mt-viz-panes { grid-template-columns: 1fr; gap: 22px; } }
body.dark-mode .mt-viz-link { color: #d1d5db; border-top-color: #3a3a3a; }
/* agent name labels — explicit colors both modes, no filters */
.mt-who .ag-tutor { color: #2563EB; }
.mt-who .ag-checker { color: #0F7A46; }
.mt-who .ag-hint { color: #B45309; }
.mt-who .ag-socratic { color: #0E7490; }
.mt-who .ag-visualizer { color: #7C3AED; }
.mt-who .ag-coach, .mt-who .ag-auto { color: #DB2777; }
.mt-who .ag-reader { color: #0E7490; }
.mt-who .ag-planner { color: #B45309; }
.mt-who .ag-solver { color: #2563EB; }
.mt-who .ag-writer { color: #EA580C; }
.mt-who .ag-thinker { color: #475569; }
body.dark-mode .mt-who .ag-tutor { color: #7CA0F0; }
body.dark-mode .mt-who .ag-checker { color: #3FD08B; }
body.dark-mode .mt-who .ag-hint { color: #F0A84B; }
body.dark-mode .mt-who .ag-socratic { color: #38BDD8; }
body.dark-mode .mt-who .ag-visualizer { color: #A78BFA; }
body.dark-mode .mt-who .ag-coach, body.dark-mode .mt-who .ag-auto { color: #F472B6; }
body.dark-mode .mt-who .ag-reader { color: #38BDD8; }
body.dark-mode .mt-who .ag-planner { color: #F0A84B; }
body.dark-mode .mt-who .ag-solver { color: #7CA0F0; }
body.dark-mode .mt-who .ag-writer { color: #FB923C; }
body.dark-mode .mt-who .ag-thinker { color: #94A3B8; }

/* dark mode: the base sheet blanks every background-color; restore solid surfaces */
body.dark-mode .mt-modal { background-color: rgba(0, 0, 0, .6); }
body.dark-mode .mt-panel,
body.dark-mode .mt-game,
body.dark-mode .mt-dock,
body.dark-mode .mt-celebrate,
body.dark-mode .mt-viz,
body.dark-mode .mt-std-bar,
body.dark-mode .mt-tp-input { background-color: var(--surface); }
body.dark-mode .mt-thumb,
body.dark-mode .mt-stage { background-color: var(--surface-2); }
body.dark-mode .mt-play { background-color: var(--primary); color: #fff; }
body.dark-mode .mt-cal-d.on { background-color: var(--primary); }

/* routed reply label: agent icon + name + why */
.mt-who { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 750; line-height: 1; white-space: nowrap; min-width: 0; }
.mt-who .mt-why { overflow: hidden; text-overflow: ellipsis; }
.mt-who svg { width: 17px; height: 17px; flex: 0 0 auto; }
.mt-who .mt-why { font-weight: 500; font-size: 10.5px; color: var(--n-400); }

/* chat — AI replies in white bordered bubbles, mockup .msg.ai */
/* no outer card — the tinted bubble is the single container; the outer
   border + padding only added a second frame and ~30px of height per turn */
#output .assistant > .message-wrapper {
  flex: 0 1 auto !important;
  width: fit-content;
  max-width: 100%;
  background: transparent !important;
  border: none;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  line-height: 1.55;
  gap: 6px;
}
@media (max-width: 600px) {
  #output .assistant > .message-wrapper { max-width: 92%; }
}

/* chips — flat outline: no pastel fill, no fade-in, no hover lift */
.suggestion-chip,
.hint-chip {
  background: transparent !important;
  border: 1px solid var(--border-2) !important;
  color: var(--primary-hover) !important;
  animation: none !important;
}
.suggestion-chip:hover,
.hint-chip:hover {
  background: var(--surface-2) !important;
  transform: none !important;
}

/* resource suggestion cards — neutral surface, not pastel green */
.external-tools-suggestions {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.sidebar-progress-host { padding: 0 4px 8px; }
.mt-progress { display: flex; width: 100%; gap: 2px; padding: 4px 2px; background: none; border: none; border-radius: var(--radius-sm); font: inherit; cursor: pointer; }
.mt-progress:hover { background: var(--surface-2); }
.mt-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1 1 0; min-width: 0; }
.mt-stat[hidden] { display: none; }
.mt-stat svg { width: 15px; height: 15px; color: var(--n-500); }
.mt-stat.streak svg { color: var(--accent); }
.mt-stat b { font-size: var(--font-size-sm); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mt-stat .mt-lbl { font-size: 10px; letter-spacing: .02em; color: var(--text-2); line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Match the approved mockup sidebar exactly: spacing, icons, layout === */
/* section labels (TUTORS / TOOLS / YOUR PROGRESS) */
.sidebar-section-label { font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: .11em !important; color: var(--n-400) !important; font-weight: 700 !important; padding: 0 8px !important; margin: 0 0 7px !important; }
/* nav lists stack tightly */
.sidebar-agents, .sidebar-resources-list { display: flex !important; flex-direction: column !important; gap: 2px !important; }
/* tutor + tool rows share one vertical rhythm with the progress rows */
.sidebar-agent, .sidebar-resource-btn { padding: 4px 9px 4px 11px !important; gap: 11px !important; min-height: 0 !important; border-radius: var(--radius-sm) !important; align-items: center !important; }
/* names + labels: same font, weight, colour */
.sidebar-agent-name, .sidebar-resource-btn span { font-size: var(--font-size-sidebar-agent-name) !important; font-weight: 600 !important; color: var(--text-2) !important; line-height: 1.15 !important; }
.sidebar-agent.active .sidebar-agent-name { font-weight: 700 !important; color: var(--text) !important; }
/* icons: 20px, mid grey; active tutor turns blue */
.sidebar-agent-avatar { width: 20px !important; height: 20px !important; }
.sidebar-agent-avatar svg, .sidebar-resource-btn .res-ico { width: 20px !important; height: 20px !important; color: var(--n-500) !important; }
.sidebar-agent.active .sidebar-agent-avatar svg { color: var(--primary) !important; }
/* the mockup has no trailing status dot */
.sidebar-agent-dot { display: none !important; }
/* space between sections */
.sidebar-section { margin-bottom: 12px !important; }
/* the mockup's system font for the sidebar navigation text (logo keeps its brand font) */
.sidebar-section-label,
.sidebar-agent-name,
.sidebar-resource-btn,
.sidebar-resource-btn span,
.mt-stat .mt-lbl,
.mt-stat b {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}

/* visual timer ring (shared: game session, chat) */
.mt-timer { position: relative; display: inline-grid; place-items: center; }
.mt-ring { transform: rotate(-90deg); }
.mt-ring-trk { fill: none; stroke: var(--border); stroke-width: 3; }
.mt-ring-prg { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dasharray 0.9s linear; }
.mt-timer.warn .mt-ring-prg { stroke: var(--warn-600); }
.mt-timer.done .mt-ring-prg { stroke: var(--border-2); }
.mt-timer .mt-time { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 26px; color: var(--text); }

/* docked chat mini-timer, mockup .minitimer */
.mt-dock { position: fixed; right: 28px; top: 16px; z-index: 1500; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px 6px 9px; box-shadow: var(--sh-2); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--text); }
.mt-dock button { background: transparent; border: none; cursor: pointer; color: var(--text-2); font: inherit; display: inline-flex; align-items: center; gap: 7px; padding: 0; }
.mt-dock .mt-dock-open:hover { color: var(--text); }
.mt-dock .mt-dock-open svg { width: 17px; height: 17px; color: var(--n-500); }
.mt-dock .mt-dock-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); font-weight: 750; }
.mt-dock .mt-dock-min { border: 1px solid var(--border-2); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 650; }
.mt-dock .mt-dock-min:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary-hover); }
.mt-dock .mt-dock-min.on { border-color: var(--primary); color: var(--primary-hover); }
.mt-dock .mt-dock-x { font-size: 17px; line-height: 1; color: var(--text-3); padding: 0 2px; }
.mt-dock .mt-dock-x:hover { color: var(--text); }
.mt-dock .mt-timer { display: inline-flex; align-items: center; gap: 8px; }
.mt-dock .mt-timer .mt-time { position: static; inset: auto; font-size: 14px; }
.mt-dock .mt-dock-done { color: var(--primary-hover); font-size: 12.5px; }

/* game picker modal */
.mt-modal { position: fixed; inset: 0; z-index: 4000; background: rgba(16,23,37,.55); display: grid; place-items: center; padding: clamp(10px, 1.6vw, 22px); }
.mt-panel { width: 90%; max-width: 960px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.mt-phead { display: flex; align-items: center; gap: 12px; padding: 15px 20px 8px; }
.mt-title { font-weight: 750; font-size: 16px; color: var(--text); }
.mt-oer { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ok-600); border: 1px solid var(--ok-line); border-radius: 6px; padding: 3px 8px; }
.mt-filters { display: flex; align-items: center; gap: 8px; padding: 8px 20px 13px; flex-wrap: wrap; }
.mt-filters .mt-flabel:not(:first-child) { margin-left: 8px; }
.mt-flabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); font-weight: 750; }
.mt-chip { background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 650; cursor: pointer; }
.mt-chip:hover { background: var(--surface-2); }
.mt-chip.on { border-color: var(--primary); color: var(--primary-hover); border-width: 1.5px; }
.mt-close { margin-left: auto; background: transparent; border: none; font-size: 24px; line-height: 1; color: var(--text-3); cursor: pointer; }
.mt-close:hover { color: var(--text); }
.mt-body { overflow: auto; padding: 0; }
.mt-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 20px; }
.mt-empty { padding: 40px; text-align: center; color: var(--text-2); }
.mt-ea-sec { padding: 4px 20px 18px; }
.mt-ea-sec h2 { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.mt-ea-notice { margin: 10px 20px 0; padding: 10px 12px; font-size: 13px; color: var(--text-2); background: var(--surface-2, #f4f4f5); border: 1px solid var(--border); border-radius: 8px; }
.mt-ea-cand { padding: 14px 0; border-top: 1px solid var(--border); }
.mt-ea-cand:first-of-type { border-top: 0; }
.mt-ea-cand.mt-ea-off { opacity: .4; }
.mt-ea-top { display: flex; align-items: baseline; gap: 10px; }
.mt-ea-top h3 { margin: 0; flex: 1; font-size: 15px; font-weight: 600; color: var(--text); }
.mt-ea-share { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.mt-ea-thin { opacity: .75; }
.mt-ea-strands { margin: 5px 0 0; font-size: 12.5px; color: var(--text-2); }
.mt-ea-none { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); font-style: italic; }
.mt-ea-ev { margin: 8px 0 0; padding: 0; list-style: none; }
.mt-ea-ev li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--text-2); }
.mt-ea-chip { font-size: 10.5px; font-weight: 700; color: var(--text-2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.mt-ea-acts { display: flex; gap: 8px; margin-top: 10px; }
.mt-ea-btn { font: inherit; font-size: 12.5px; padding: 5px 11px; color: var(--text-2); background: transparent; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.mt-ea-btn:hover { background: var(--surface-2, #f4f4f5); color: var(--text); }
.mt-ea-stats { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 14px; }
.mt-ea-stats div { display: flex; flex-direction: column; }
.mt-ea-stats b { font-size: 20px; font-weight: 700; color: var(--text); }
.mt-ea-stats span { font-size: 11.5px; color: var(--text-2); }
.mt-ea-bar { display: grid; grid-template-columns: 160px 1fr 42px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 12px; color: var(--text-2); }
.mt-ea-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.mt-ea-fill { height: 100%; background: var(--accent, #3b82f6); border-radius: 0 4px 4px 0; }
.mt-ea-bar em { font-style: normal; text-align: right; }
.mt-ea-foot { margin: 0; padding: 14px 20px 20px; font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--border); }
.mt-game { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }
.mt-thumb { height: 76px; display: grid; place-items: center; background: var(--surface-2); }
.mt-thumb svg { width: 32px; height: 32px; color: var(--text-2); }
.mt-gbd { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mt-gt { font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.25; }
.mt-gp { font-size: 11.5px; color: var(--text-3); }
.mt-gmeta { display: flex; flex-wrap: wrap; gap: 5px; }
.mt-tag { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 2px 7px; border: 1px solid var(--border-2); color: var(--text-2); }
.mt-tag.lic { color: var(--ok-600); border-color: var(--ok-line); }
.mt-tag.std { color: var(--primary-hover); border-color: var(--primary-line); }
.mt-tag.emb { color: var(--accent-hover); border-color: var(--accent-line); }
.mt-play { margin-top: auto; background: var(--primary); color: #fff; border: none; border-radius: 9px; padding: 9px 0; font-weight: 700; font-size: 13px; cursor: pointer; text-align: center; text-decoration: none; display: block; }
.mt-play:hover { background: var(--primary-hover); }
/* game session */
.mt-session { display: grid; grid-template-columns: 1fr 260px; gap: 16px; padding: 18px 20px; }
.mt-stage { border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; min-height: 380px; background: var(--surface-2); display: grid; }
.mt-frame { width: 100%; height: 100%; min-height: 380px; border: 0; }
.mt-launch { place-self: center; text-align: center; padding: 24px; max-width: 80%; color: var(--text-2); font-size: 13px; }
.mt-launch .mt-play { display: inline-block; padding: 9px 18px; margin-top: 12px; }
.mt-sside { display: flex; flex-direction: column; gap: 14px; }
.mt-timerwrap { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.mt-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mt-goal { border: 1px solid var(--border); border-radius: 12px; padding: 13px; font-size: 13px; color: var(--text); }
.mt-goal b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--primary-hover); font-weight: 750; margin-bottom: 5px; }
.mt-warnbar { color: var(--warn-600); font-size: 12px; font-weight: 700; border: 1px solid var(--warn-line); border-radius: 8px; padding: 8px 10px; }
.mt-backlink { background: transparent; border: 1px solid var(--border-2); border-radius: 9px; padding: 8px; font-weight: 650; color: var(--text-2); cursor: pointer; }
.mt-backlink:hover { background: var(--surface-2); }
.mt-end { text-align: center; padding: 48px 24px; }
.mt-end-big { font-weight: 750; font-size: 20px; color: var(--text); margin-bottom: 8px; }
.mt-end p { color: var(--text-2); font-size: 13.5px; max-width: 40ch; margin: 0 auto; }
.mt-end-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.mt-end-btns .mt-play { display: inline-block; padding: 9px 18px; }
@media (max-width: 720px) { .mt-games { grid-template-columns: 1fr 1fr; } .mt-session { grid-template-columns: 1fr; } }

/* in-chat pinned standard chip */
.mt-std-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--surface); flex-wrap: wrap; }
.mt-std-label { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); font-weight: 750; }
.mt-std-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--primary-line); color: var(--primary-hover); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 650; }

/* teacher panel */
.mt-tp .mt-tp-body { padding: 18px 20px; overflow: auto; }
.mt-tp-gate { max-width: 280px; margin: 22px auto; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.mt-tp-gate p { color: var(--text-2); font-size: 13.5px; margin: 0; }
.mt-tp-input { border: 1.5px solid var(--border-2); border-radius: 9px; padding: 9px 12px; font-size: 14px; color: var(--text); width: 100%; background: var(--surface); }
.mt-tp-err { color: var(--crit-600); font-size: 12px; }
.mt-tp-forgot { font-size: 12px; margin: 2px 0 0; }
.mt-tp-forgot span { color: var(--primary-hover); cursor: pointer; font-weight: 650; }
.mt-tp-note { font-size: 12px; color: var(--text-3); margin: 10px 0 0; line-height: 1.6; }
.mt-tp-note a { color: var(--primary-hover); font-weight: 650; text-decoration: none; }
.mt-tp-out { margin-left: auto; margin-right: 10px; }
.mt-tp-search { display: flex; gap: 8px; margin-bottom: 14px; }
.mt-tp-search .mt-play { padding: 9px 16px; white-space: nowrap; }
.mt-tp-results { display: flex; flex-direction: column; gap: 10px; }
.mt-tp-card { border: 1px solid var(--border); border-radius: 11px; padding: 12px; }
.mt-tp-code { font-weight: 750; color: var(--primary-hover); font-size: 13px; margin-bottom: 4px; }
.mt-tp-tx { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 9px; }
.mt-tp-games { display: inline-block; }
.mt-tp-gamelist { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.mt-tp-game { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.mt-tp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-tp-proglist { margin-top: 8px; }
.mt-tp-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 750; margin: 10px 0 6px; }
.mt-tp-pre { font-size: 12px; color: var(--text-2); line-height: 1.5; padding: 6px 0; }
.mt-tp-pre b { color: var(--primary-hover); }
.mt-tp-comp { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-2); line-height: 1.5; }

/* assignment composer */
.mt-tp-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.mt-asg-new { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-width: 520px; }
.mt-asg-new .mt-play { align-self: flex-start; padding: 9px 18px; }
.mt-asg-rm { margin-top: 9px; }
.mt-tag.asg { color: var(--accent-hover); border-color: var(--accent-line); }
.mt-asg-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 9px 13px 0; }
.mt-asg-note { font-size: 11px; color: var(--text-3); }

/* math writing pad — one flowing text, sentences coded with highlight tints (COLAB Math style) */
.mt-writing { border: 1.5px dashed var(--border-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; max-width: 560px; position: relative; }
.mt-w-draft { border: 1.5px solid var(--border-2); border-radius: 9px; padding: 10px 12px; font-size: 14.5px; line-height: 1.9; background: var(--surface); cursor: text; min-height: 54px; }
.mt-w-draft:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.mt-w-draft .mt-ghost { color: var(--text-3); opacity: .6; user-select: none; }
.mt-w-draft .mt-ghost::after { content: " \21E5"; font-size: 10px; opacity: .8; }
.mt-w-draft:empty::before { content: attr(data-placeholder); color: var(--text-3); font-style: italic; }
.mt-w-part { border-radius: 4px; padding: 2px 3px; }
.mt-w-part.w-answer, .mt-w-part.w-p0 { color: #1D4FD8; background: rgba(37, 99, 235, .11); }
.mt-w-part.w-steps, .mt-w-part.w-p1 { color: #0F7A46; background: rgba(15, 122, 70, .11); }
.mt-w-part.w-why, .mt-w-part.w-p2 { color: #6D28D9; background: rgba(124, 58, 237, .11); }
.mt-w-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-w-legend { font-size: 11px; color: var(--text-3); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mt-w-legend .mt-w-part { font-weight: 700; padding: 1px 6px; }
.mt-w-genre { color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; margin-right: 3px; }
.mt-w-genres { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.mt-w-genre-chip { padding: 4px 10px; font-size: 11px; }
.mt-w-send { margin-left: auto; background: var(--primary); color: #fff; border: none; border-radius: 9px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
.mt-w-send:hover { background: var(--primary-hover); }
body.dark-mode .mt-w-draft { background-color: var(--surface); }
body.dark-mode .mt-w-part.w-answer, body.dark-mode .mt-w-part.w-p0 { color: #9DBCF7; background-color: rgba(124, 160, 240, .16); }
body.dark-mode .mt-w-part.w-steps, body.dark-mode .mt-w-part.w-p1 { color: #3FD08B; background-color: rgba(63, 208, 139, .14); }
body.dark-mode .mt-w-part.w-why, body.dark-mode .mt-w-part.w-p2 { color: #C4B5FD; background-color: rgba(167, 139, 250, .16); }
body.dark-mode .mt-w-send { background-color: var(--primary); }

/* annotation layer — six codes: pad span classes + painted message highlights */
.mt-w-part.w-qty { color: #1D4FD8; background: rgba(37, 99, 235, .13); }
.mt-w-part.w-ask { color: #BE123C; background: rgba(225, 29, 72, .12); }
.mt-w-part.w-sch { color: #7E22CE; background: rgba(147, 51, 234, .13); }
.mt-w-part.w-voc { color: #0E7490; background: rgba(8, 145, 178, .13); }
.mt-w-part.w-rea { color: #15803D; background: rgba(22, 163, 74, .13); }
.mt-w-part.w-con { color: #B45309; background: rgba(245, 158, 11, .18); }
body.dark-mode .mt-w-part.w-qty { color: #9DBCF7; background-color: rgba(124, 160, 240, .18); }
body.dark-mode .mt-w-part.w-ask { color: #FDA4AF; background-color: rgba(251, 113, 133, .16); }
body.dark-mode .mt-w-part.w-sch { color: #D8B4FE; background-color: rgba(192, 132, 252, .18); }
body.dark-mode .mt-w-part.w-voc { color: #67E8F9; background-color: rgba(56, 189, 216, .16); }
body.dark-mode .mt-w-part.w-rea { color: #86EFAC; background-color: rgba(74, 222, 128, .16); }
body.dark-mode .mt-w-part.w-con { color: #FCD34D; background-color: rgba(251, 191, 36, .16); }

/* the four metacognitive highlighter colors — background only, text untouched */
::highlight(mt-an-c0) { background-color: rgba(253, 224, 71, .55); }
::highlight(mt-an-c1) { background-color: rgba(163, 230, 53, .45); }
::highlight(mt-an-c2) { background-color: rgba(125, 211, 252, .5); }
::highlight(mt-an-c3) { background-color: rgba(249, 168, 212, .5); }
body.dark-mode ::highlight(mt-an-c0) { background-color: rgba(253, 224, 71, .3); }
body.dark-mode ::highlight(mt-an-c1) { background-color: rgba(163, 230, 53, .26); }
body.dark-mode ::highlight(mt-an-c2) { background-color: rgba(125, 211, 252, .26); }
body.dark-mode ::highlight(mt-an-c3) { background-color: rgba(249, 168, 212, .26); }
.mt-w-part.w-c0 { background: rgba(253, 224, 71, .55); }
.mt-w-part.w-c1 { background: rgba(163, 230, 53, .45); }
.mt-w-part.w-c2 { background: rgba(125, 211, 252, .5); }
.mt-w-part.w-c3 { background: rgba(249, 168, 212, .5); }

/* annotation toolbar — four color swatches, 🏷 reveals the name-your-color legend */
.mt-an-bar { position: absolute; z-index: 2200; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 13px; padding: 7px 9px; }
.mt-an-bar[hidden] { display: none; }
.mt-an-row { display: flex; gap: 6px; align-items: center; }
.mt-an-row[hidden] { display: none; }
.mt-an-noterow { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 3px solid var(--an-accent, var(--border-2)); }
.mt-an-noterow[hidden] { display: none; }
.mt-an-note { width: 210px; max-width: 52vw; font: inherit; font-size: 12px; color: var(--text); border: 1px solid var(--border-2); border-radius: 7px; padding: 4px 9px; }
.mt-an-note:focus { outline: 2px solid var(--an-accent, var(--primary)); outline-offset: 1px; }
.mt-an-noterow.an-c0 { --an-accent: #CA8A04; } .mt-an-noterow.an-c1 { --an-accent: #65A30D; }
.mt-an-noterow.an-c2 { --an-accent: #0284C7; } .mt-an-noterow.an-c3 { --an-accent: #DB2777; }
.mt-an-legend { padding-top: 2px; }
.mt-an-legname { width: 92px; max-width: 22vw; font: inherit; font-size: 11px; color: var(--text); border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 6px; }
.mt-an-legname:focus { outline: 2px solid var(--an-accent, var(--primary)); outline-offset: 1px; }
.mt-an-legname.an-c0 { border-left: 4px solid #FDE047; } .mt-an-legname.an-c1 { border-left: 4px solid #A3E635; }
.mt-an-legname.an-c2 { border-left: 4px solid #7DD3FC; } .mt-an-legname.an-c3 { border-left: 4px solid #F9A8D4; }
.mt-an-bar .mt-an-code { width: 21px; height: 21px; border: none; border-radius: 6px; padding: 0; cursor: pointer; flex: none; }
.mt-an-bar .an-c0 { background: #FDE047; }
.mt-an-bar .an-c1 { background: #A3E635; }
.mt-an-bar .an-c2 { background: #7DD3FC; }
.mt-an-bar .an-c3 { background: #F9A8D4; }
.mt-an-x { border: none; background: var(--surface-2); border-radius: 6px; width: 21px; height: 21px; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; color: var(--text-2); flex: none; }
.mt-an-x:hover { color: var(--crit-600); }
.mt-an-tag { font-size: 12px; }
body.dark-mode .mt-an-bar { background-color: var(--surface); }
body.dark-mode .mt-an-x { background-color: var(--surface-2); }
.mt-coding-key { position: sticky; top: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 9px 13px; margin: 8px auto; max-width: 760px; font-size: 12px; }
.mt-coding-key[hidden] { display: none; }
.mt-ck-purpose { color: var(--text-2); margin-bottom: 7px; }
.mt-ck-colors { display: flex; flex-wrap: wrap; gap: 14px; }
.mt-ck-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.mt-ck-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.mt-ck-dot.an-c0 { background: #FDE047; } .mt-ck-dot.an-c1 { background: #A3E635; }
.mt-ck-dot.an-c2 { background: #7DD3FC; } .mt-ck-dot.an-c3 { background: #F9A8D4; }
.mt-ck-notes { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; max-height: 140px; overflow-y: auto; }
.mt-ck-note { display: flex; align-items: baseline; gap: 7px; }
.mt-ck-snip { color: var(--text); }
.mt-ck-why { color: var(--text-2); }

.mt-topdock { position: fixed; right: 28px; top: 16px; z-index: 1500; display: flex; align-items: center; gap: 10px; }
.mt-topdock .mt-dock { position: static; right: auto; top: auto; }

/* pill design matched to the Colab Math top-bar mode control */
.mt-aimode { position: relative; display: inline-flex; flex: none; }
.mt-aimode-face { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 15px; font-weight: 500; line-height: 1; color: #3d4d61; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; }
.mt-aimode-face:hover, .mt-aimode-face:focus, .mt-aimode-face:focus-visible, .mt-aimode-face[aria-expanded="true"] { background: #f1f5f9; border-color: #94a3b8; outline: none; box-shadow: none; }
.mt-aimode-lead { color: #64748b; font-weight: 500; }
.mt-aimode-value { color: #16202e; }
.mt-aimode.mode-off .mt-aimode-value { color: #6b7280; }
.mt-aimode-caret { width: 13px; height: 13px; flex: none; opacity: 0.7; }

.mt-aimode-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 262px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); padding: 4px; z-index: 2300; }
.mt-aimode-menu[hidden] { display: none; }
.mt-aimode-title { padding: 5px 12px 7px; font-size: 13px; font-weight: 600; color: #676767; }
.mt-aimode-menu .mt-aimode-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; min-height: 32px; background: transparent; border: none; border-radius: 6px; cursor: pointer; text-align: left; white-space: nowrap; font: inherit; font-size: var(--font-size-sm); font-weight: 400; line-height: 1.3; color: #374151; transition: background 0.15s ease; }
.mt-aimode-menu .mt-aimode-opt:hover { background: #f3f4f6; }
.mt-aimode-menu .mt-aimode-opt[aria-checked="true"] { background: #f3f4f6; }
.mt-aimode-menu .mt-aimode-opt[aria-checked="true"]::after { content: ' \2713'; padding-left: 6px; color: #4b5563; }
.mt-aimode-foot { margin-top: 4px; padding: 8px 12px 4px; border-top: 1px solid #e5e7eb; font-size: 13px; line-height: 1.45; color: #676767; white-space: normal; }

body.dark-mode .mt-aimode-face { background: #1f1f1f; border-color: #3a3a3a; color: #b0b0b0; }
body.dark-mode .mt-aimode-face:hover, body.dark-mode .mt-aimode-face:focus, body.dark-mode .mt-aimode-face:focus-visible, body.dark-mode .mt-aimode-face[aria-expanded="true"] { background: #2a2a2a; border-color: #4a4a4a; }
body.dark-mode .mt-aimode-lead { color: #8b8b8b; }
body.dark-mode .mt-aimode-value { color: #e5e7eb; }
body.dark-mode .mt-aimode.mode-off .mt-aimode-value { color: #9ca3af; }
body.dark-mode .mt-aimode-menu { background: #1f1f1f; border-color: #3a3a3a; }
body.dark-mode .mt-aimode-title, body.dark-mode .mt-aimode-foot { color: #9aa0a6; }
body.dark-mode .mt-aimode-foot { border-top-color: #3d434b; }
body.dark-mode .mt-aimode-menu .mt-aimode-opt { color: #f3f4f6; }
body.dark-mode .mt-aimode-menu .mt-aimode-opt:hover { background: #2a2a2a; }
body.dark-mode .mt-aimode-menu .mt-aimode-opt[aria-checked="true"] { background: #3a3a3a; }

@media (max-width: 520px) {
    .mt-aimode-lead { display: none; }
    .mt-aimode-face { height: 34px; padding: 0 10px; font-size: 13px; }
}
body.medium-text .mt-aimode-menu .mt-aimode-opt { font-size: var(--font-size-base); }
body.large-text .mt-aimode-menu .mt-aimode-opt { font-size: var(--font-size-lg); }

.input-group .input-controls { display: flex; align-items: center; gap: 6px; position: relative; }
.input-group .input-controls #chatInput { flex: 1 1 auto; min-width: 0; }
.input-group .input-controls #plus-container,
.input-group .input-controls #chatAiWand,
.input-group .input-controls #record,
.input-group .input-controls #send { flex: none; }

.chat-ghost-text { position: absolute; padding: 2px 4px; font-family: inherit; font-size: var(--font-size-chat-input); line-height: var(--line-height-normal); color: var(--text-3); pointer-events: none; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; z-index: 3; box-sizing: border-box; }
.chat-ghost-spacer { visibility: hidden; white-space: pre-wrap; }
.chat-ghost-prediction { color: var(--text-3); pointer-events: auto; cursor: pointer; border-radius: 3px; transition: background 0.15s ease, color 0.15s ease; }
.chat-ghost-prediction:hover { background: #eceef1; color: #374151; }
body.dark-mode .chat-ghost-prediction:hover { background: rgba(255, 255, 255, 0.10); color: #e2e8f0; }

/* icon + label at 15px with line icons, the sibling app's footer design.
   The footer row is moved inside #output at runtime, so the id-scoped
   selector must outrank the generic `#output button` reset */
.chat-footer-btn, #chatFooterButtons .chat-footer-btn { padding: 8px 9px; font-size: 15px !important; }
#chatFooterButtons .footer-actions { gap: 5px; }
.footer-btn-icon { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -2px; }
@media (max-width: 600px) {
  .chat-footer-btn, .chat-footer-buttons .footer-actions .chat-footer-btn { padding: 7px 10px; }
  .chat-footer-btn > span { display: none; }
}

/* weekly goal — meters, day graph, reflection */
.mt-goal-line { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.mt-goal-lbl { font-size: 13px; font-weight: 650; color: var(--text-2); min-width: 110px; }
.mt-goal-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-goal-set .mt-goal-lbl { min-width: 0; }
.mt-gg { display: flex; gap: 12px; align-items: flex-end; margin: 12px 0 4px; }
.mt-gg-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mt-gg-col span { font-size: 10px; font-weight: 650; color: var(--text-3); }
.mt-gg-bar { width: 22px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--primary); }
.mt-goal-ref { display: flex; gap: 8px; margin-top: 10px; max-width: 560px; }
.mt-goal-ref .mt-play { padding: 9px 16px; white-space: nowrap; }
body.dark-mode .mt-gg-bar { background-color: var(--primary); }

/* student profile — strengths + patterns to beat */
.mt-pv-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.mt-pt { border: 1px solid var(--border); border-radius: 11px; padding: 11px 14px; margin-bottom: 9px; }
.mt-pt-d { font-size: 13.5px; font-weight: 650; color: var(--text); }
.mt-pt-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mt-pt-meter { flex: 1; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mt-pt-meter i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.mt-pt-n { font-size: 12px; font-weight: 750; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-pt-go { padding: 7px 14px; margin: 0; }
.mt-pt-done { font-size: 12px; color: var(--ok-600); font-weight: 650; margin-top: 2px; }
body.dark-mode .mt-pt-meter { background-color: var(--surface-2); }
body.dark-mode .mt-pt-meter i { background-color: var(--primary); }

/* teacher class heatmap */
.mt-heat { border-collapse: collapse; font-size: 11.5px; }
.mt-heat th { font-weight: 650; color: var(--text-2); padding: 3px 10px 3px 0; text-align: left; }
.mt-heat td { width: 36px; height: 24px; border-radius: 6px; border: 2px solid var(--surface); }
.mt-heat .mt-hx, .mt-heat .mt-h0 { background: var(--surface-2); }
.mt-heat .mt-h1 { background: #cfe3fb; }
.mt-heat .mt-h2 { background: #8fc1f5; }
.mt-heat .mt-h3 { background: #3f9df1; }
.mt-heat .mt-h4 { background: #0880d6; }
body.dark-mode .mt-heat td { border-color: var(--surface); }
body.dark-mode .mt-heat .mt-hx, body.dark-mode .mt-heat .mt-h0 { background-color: var(--surface-2); }
body.dark-mode .mt-heat .mt-h1 { background-color: #1e3a5c; }
body.dark-mode .mt-heat .mt-h2 { background-color: #1f568c; }
body.dark-mode .mt-heat .mt-h3 { background-color: #2478c2; }
body.dark-mode .mt-heat .mt-h4 { background-color: #4db2fc; }

/* classroom roster */
.mt-ros .mt-gmeta { margin-bottom: 8px; }
.mt-ros-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.mt-ros-skills { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mt-ros-skill { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.mt-ros-skill b { color: var(--primary-hover); font-size: 11px; }
.mt-ros-star { color: var(--accent); letter-spacing: 1px; font-size: 12px; }
.mt-ros .mt-presets { margin: 0; justify-content: flex-start; }

/* data export */
.mt-exp-dl { display: inline-block; padding: 9px 18px; margin-top: 4px; }

/* full progress page */
.mt-pv-body { padding: 18px 22px; overflow: auto; }
.mt-pv-h { margin: 18px 0 10px; font-size: 14px; font-weight: 720; color: var(--text); }
.mt-pv-h:first-child { margin-top: 0; }
.mt-pv-h span { font-weight: 500; color: var(--text-3); font-size: 12px; margin-left: 6px; }
.mt-pv-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.mt-pv-nm { flex: 1; font-size: 13px; color: var(--text); }
.mt-pv-stars { display: inline-flex; gap: 2px; }
.mt-pv-stars span svg { width: 15px; height: 15px; color: var(--border-2); }
.mt-pv-stars .on svg { color: var(--accent); fill: var(--accent); }
.mt-pv-lv { font-size: 11px; color: var(--text-3); width: 84px; text-align: right; }
.mt-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mt-bdg { border: 1px solid var(--border); border-radius: 12px; padding: 12px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mt-bdg svg { width: 28px; height: 28px; color: var(--accent); }
.mt-bdg.lock { border-style: dashed; }
.mt-bdg.lock svg { color: var(--border-2); }
.mt-bdg-t { font-weight: 700; font-size: 11.5px; color: var(--text); }
.mt-bdg-d { font-size: 10.5px; color: var(--text-3); line-height: 1.35; }
.mt-cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; max-width: 380px; }
.mt-cal-d { aspect-ratio: 1; border-radius: 5px; border: 1px solid var(--border); }
.mt-cal-d.on { background: var(--primary); border-color: transparent; }
.mt-pv-stars-sm svg { width: 10px; height: 10px; }
.mt-pv-acc { color: var(--n-500); font-size: 11px; }

/* standalone page shell */
/* font-family must be explicit: these pages do not load style.css, so `inherit`
   resolves to the browser serif default */
body.mt-page { margin: 0; background: var(--ground); font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--text); }
/* full window on every device — same horizontal rhythm as the chat surface */
.mt-page-main { max-width: none; margin: 0; padding: 14px clamp(16px, 3vw, 44px) 40px; }
.mt-page-main .mt-panel { max-height: none; overflow: visible; }
.mt-nav { display: flex; gap: 8px; padding: 12px 0; }
.mt-nav .mt-chip { text-decoration: none; }
.mt-nav .mt-chip.on { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-200); }

/* Say-Ask-Check self-talk row */
.mt-sac { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.mt-sac-item { font-size: 11.5px; border: 1px solid var(--border-2); border-radius: 999px; padding: 3px 10px; color: var(--text-2); background: var(--surface); }
/* inside a fold the three prompts read as quiet lines, not three more pills */
.mt-fold-body .mt-sac { flex-direction: column; gap: 3px; margin: 2px 0 0 4px; }
.mt-fold-body .mt-sac-item { border: none; background: transparent; padding: 2px 0; font-size: 12.5px; }
.mt-sac-item b { font-weight: 700; color: var(--text); }

/* goal page: pace line, Coach suggestion, Thinker ask, footer */
.mt-gg { position: relative; }
.mt-gg-pace { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--n-300); pointer-events: none; }
.mt-goal-sug { font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; font-weight: 650; }
.mt-goal-ask { font-size: 13px; color: var(--n-700); margin: 10px 0 4px; }
.mt-goal-ask b { color: var(--purple-700); }
.mt-goal-foot { margin-top: 10px; }
.mt-w-prompts.off { color: var(--n-500); border-style: dashed; }

/* goal block inside the chat Check panel */
.cc-goal { margin: 0 0 14px; }
/* no goal set — meters() returns '', so the slot must not hold its margin open */
.cc-goal:empty { margin: 0; }
.cc-goal-h { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 8px; }

.mt-w-coverage { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, #f7f8fa); font-size: 12.5px; }
.mt-w-cov-row { display: flex; align-items: center; gap: 8px; }
.mt-w-cov-row.off { opacity: .55; }
.mt-w-cov-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; background: var(--text-3, #9aa1ab); }
.mt-w-cov-row.on .mt-w-cov-dot { background: var(--primary, #2563EB); }
.mt-w-cov-hint { color: var(--text-3, #6b7280); }

.tool-embed-card { margin: 10px 0; border-radius: 10px; background: var(--surface); padding: 10px; }
.tool-embed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tool-embed-name { font-size: 13px; font-weight: 700; color: var(--text); }
.tool-embed-open { font-size: 12px; color: var(--primary, #2563EB); text-decoration: none; }
.tool-embed-frame { width: 100%; min-height: 420px; border: 0; border-radius: 8px; display: block; background: var(--surface-2); }

/* collapsed scaffold rows — one primary structure per turn, the rest a tap away */
/* #output prefix: the generic `#output button` reset (id specificity) strips
   the pill look from plain-class buttons inside messages */
.mt-fold { margin: 8px 0 0; }
#output .mt-fold-btn, .mt-fold-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 500; color: #4b5563; cursor: pointer; transition: background 0.15s ease; }
#output .mt-fold-btn:hover, .mt-fold-btn:hover { background: #f3f4f6; }
.mt-fold-caret { width: 13px; height: 13px; opacity: 0.7; transition: transform 0.15s ease; flex: none; }
.mt-fold-btn[aria-expanded="true"] .mt-fold-caret { transform: rotate(180deg); }
.mt-fold-body { margin-top: 6px; }
body.dark-mode #output .mt-fold-btn, body.dark-mode .mt-fold-btn { background: #1f1f1f; border-color: #3a3a3a; color: #d1d5db; }
body.dark-mode #output .mt-fold-btn:hover, body.dark-mode .mt-fold-btn:hover { background: #2a2a2a; }

/* fill-in fields: the template's single send is the action — per-field icon
   expanders add four chevrons of noise for rarely-used mic/file shortcuts */
.inline-fillin-wrapper .inline-fillin-icons { display: none; }

/* inline stacked fraction — sits on the text midline at text scale.
   !important: the generic `#output .assistant span { display:inline; font-size:… }`
   rule outranks the class and would collapse the stack into side-by-side digits.
   flex none: `#output .user span { flex: 1 }` sets flex-basis 0, which is the main
   size in this column box and shrinks the empty rule bar to no height at all */
.mt-frac, .mt-frac-n, .mt-frac-d, .mt-frac-rule { flex: none !important; }
.mt-frac { display: inline-flex !important; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; line-height: 1.05; }
.mt-frac-n, .mt-frac-d { display: block !important; font-size: 0.82em !important; font-weight: 600; }
.mt-frac-rule { display: block !important; align-self: stretch; min-width: 12px; height: 1.5px; background: currentColor; margin: 1px 0; }

/* team-activity trace — replaces the bare typing dots while the reply is made */
.typing-indicator.mt-trace { display: block; background: var(--surface, #fff); border: 1px dashed #C7CCF8; border-radius: 12px; padding: 10px 14px; max-width: 340px; }
.mt-trace-head { display: flex; align-items: center; gap: 9px; }
.mt-trace-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary, #3B82F6); }
.mt-trace-line { font-size: 12.5px; color: var(--text-2, #6B675E); margin-top: 6px; }
body.dark-mode .typing-indicator.mt-trace { background: #1f1f1f; border-color: #3d434b; }

/* standing quick actions — quieter than contextual chips */
.recommendation-chip.mt-quick-chip { background: transparent; border: 1px solid #CDEBFB; color: #7A756A; font-weight: 500; }
.recommendation-chip.mt-quick-chip:hover { border-color: #C9C1B2; color: #4A463E; background: transparent; }
body.dark-mode .recommendation-chip.mt-quick-chip { border-color: #3a3a3a; color: #b0b0b0; }
body.dark-mode .recommendation-chip.mt-quick-chip:hover { border-color: #4a4a4a; color: #e5e7eb; }


/* fill-in scaffold reads as one card: the task, then one send action */
#output .inline-fillin-container { background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 14px 16px; margin-top: 8px; }
#output .inline-fillin-container .inline-fillin-input { min-width: 200px; }
#output .inline-fillin-send { width: 32px; height: 32px; border-radius: 9px; background: var(--primary, #3B82F6) !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; margin-top: 8px; }
#output .inline-fillin-send i { font-size: 13px; color: #fff; }
#output .inline-fillin-send:hover { filter: brightness(1.08); }
body.dark-mode #output .inline-fillin-container { background: #1f1f1f; border-color: #3a3a3a; }

/* turns take the column: up to 80% of it, student right, tutor left */
#output .user { max-width: 80% !important; margin-left: auto !important; justify-content: flex-end !important; }
#output .assistant { max-width: 80% !important; margin-right: auto !important; }
#output .assistant > .message-wrapper { max-width: 100% !important; }
#output .user > .message-wrapper { max-width: 100% !important; }
@media (max-width: 700px) {
  #output .user, #output .assistant { max-width: 94% !important; }
}

/* keyboard focus is visible on every interactive piece of a turn (WCAG 2.4.7) */
.vz-piece:focus-visible, #output .mt-fold-btn:focus-visible, .recommendation-chip:focus-visible,
#output .inline-fillin-send:focus-visible, .mt-viz-open:focus-visible {
  outline: 2px solid var(--primary, #3B82F6) !important;
  outline-offset: 2px;
}

/* vestibular safety: no animation for users who ask for reduced motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none !important; }
  .mt-fold-caret, .chat-ghost-prediction, .mt-fold-btn, .recommendation-chip, .vz-piece { transition: none !important; }
}

/* shared inline-space toolbar — same language as the whiteboard/manipulatives:
   light strip, borderless icon buttons, inset blue ring marks the active tool */
.mt-tbar { display: flex; align-items: center; gap: 2px; padding: 4px 8px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 10px; }
#output .mt-tbar button, .mt-tbar button { width: 36px; height: 36px; border: none; background: transparent; border-radius: 6px; color: #64748b; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 15px; cursor: pointer; }
#output .mt-tbar button:hover, .mt-tbar button:hover { background: #fff; color: #334155; }
#output .mt-tbar button.active, .mt-tbar button.active { color: #3b82f6; box-shadow: inset 0 0 0 2px #3b82f6; }
.mt-tbar-divider { width: 1px; height: 22px; background: #d1d5db; margin: 0 6px; }
.mt-tbar-spacer { flex: 1; }
body.dark-mode .mt-tbar { background: #141414; border-color: #3a3a3a; }
body.dark-mode #output .mt-tbar button, body.dark-mode .mt-tbar button { color: #94a3b8; }
body.dark-mode #output .mt-tbar button:hover, body.dark-mode .mt-tbar button:hover { background: #2a2a2a; color: #e2e8f0; }

/* inline drawing space */
.mt-draw { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.mt-draw-canvas { display: block; width: 100%; height: 180px; touch-action: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; cursor: crosshair; }
.mt-draw-send { display: flex; justify-content: flex-end; }
#output .mt-draw-send button { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 9px; background: #fff; color: #374151; cursor: pointer; }
#output .mt-draw-send button:hover { background: #f3f4f6; }
body.dark-mode .mt-draw-canvas { border-color: #3a3a3a; }
body.dark-mode #output .mt-draw-send button { background: #1f1f1f; border-color: #3a3a3a; color: #d1d5db; }

/* the fixed composer is transparent above its rows — let clicks pass through
   the empty region to the transcript; its real rows stay interactive */
.chat-input { pointer-events: none; }
.chat-input > * { pointer-events: auto; }

/* live voice status pill — fixed above the composer while a session runs */
.mt-voice-live { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 2500; max-width: min(520px, 90vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #22201B; color: #fff; font-size: 13px; padding: 8px 16px; border-radius: 999px; }
body.dark-mode .mt-voice-live { background: #e5e7eb; color: #111; }

/* agent header stays one line — the generic assistant-span rule resets
   white-space to normal, which wrapped "Coach → Planner" on phones */
#output .assistant .mt-who, #output .assistant .mt-who span { white-space: nowrap; }
.mt-who { margin-bottom: 2px; }

/* user row — right-aligned, icon after the text, flat blue glyph (no box) */
#output .user { margin-left: auto !important; margin-right: 0 !important; flex-direction: row-reverse; text-align: right; }
#output .user .user-icon-wrapper { background: transparent !important; width: auto; height: auto; }
#output .user .user-icon { color: var(--primary, #0E98FB) !important; font-size: 16px; }

/* read-aloud sits bottom-right of the reply (Colab placement) */
/* speaker as in the sibling app: bottom-right of the message, quiet grey,
   28px tall, taking no extra vertical band */
#output .assistant .message-speaker-btn { align-self: flex-end; margin: -2px 0 0 auto; padding: 4px 8px; height: 28px; min-height: 28px; color: #949494; }

/* phone top bar: one compact control, no overlap with the standard chip */
@media (max-width: 600px) {
  .mt-topdock .mt-dock { display: none; }
  .mt-topdock { right: 10px; top: 10px; gap: 6px; }
  .mt-aimode-face { height: 30px; padding: 0 9px; font-size: 12.5px; border-radius: 8px; }
  .mt-std-chip { max-width: calc(100vw - 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* the CCSSM code is teacher jargon — the standard keeps grounding the AI and
   the research log, but students never see it */
.mt-std-bar { display: none !important; }

/* Word Problems and Math Progressions feed the engine (problem bank, guide
   pedagogy) — students meet them through the tutor, not a browsing panel */
.sidebar-resource-btn[data-i18n-key="wordProblems"],
.sidebar-resource-btn[data-i18n-key="mathProgressions"] { display: none !important; }

/* top-bar pills never wrap their content */
.mt-aimode-face, .mt-dock, .mt-dock button { flex-wrap: nowrap !important; white-space: nowrap !important; }
.mt-dock button { flex-direction: row !important; }

/* contextual keypad — one tap per symbol on equation turns */
.mt-keypad { display: flex; gap: 6px; padding: 0 0 8px; flex-wrap: wrap; }
.chat-input .mt-keypad .mt-key, .mt-keypad .mt-key { min-width: 42px; height: 38px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: var(--text, #22201B); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; font-weight: 600; padding: 0 10px; cursor: pointer; }
.chat-input .mt-keypad .mt-key:hover, .mt-keypad .mt-key:hover { background: #f3f4f6; }
body.dark-mode .mt-keypad .mt-key { background: #1f1f1f; border-color: #3a3a3a; color: #e5e7eb; }

/* read-aloud and contrast toggles in the sidebar footer row — on-state uses
   the established inset blue ring; line icons sized like the sibling app */
.sidebar-icon-btn.on { box-shadow: inset 0 0 0 2px #3b82f6; border-radius: 4px; color: #1d4ed8; }
body.dark-mode .sidebar-icon-btn.on { color: #7db8f0; }
/* exact sibling-app footer row: left-aligned wrap, 24px buttons, 17px line icons */
.sidebar-settings-row { justify-content: flex-start !important; flex-wrap: wrap !important; gap: 1px !important; }
.sidebar-settings-row .sidebar-icon-btn { width: 24px; height: 24px; }
.sidebar-settings-row .footer-line-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* tutors read as status, not a picker — the roles still run; a row that acted
   this session steps forward with the action and a tick */
.sidebar-agent { pointer-events: none; cursor: default; }
.sidebar-agent:hover { background: transparent !important; }
.sidebar-agent.mt-acted { background: #f8fafc; }
.sidebar-agent.mt-acted .sidebar-agent-name { font-weight: 700; }
.sidebar-agent.mt-acted .sidebar-agent-desc { color: #1d4ed8 !important; }
.sidebar-agent:not(.mt-acted):not(.active) .sidebar-agent-avatar { opacity: 0.55; }
.sidebar-agent.mt-working .sidebar-agent-dot, .sidebar-agent.mt-acted .sidebar-agent-dot { display: none; }
.mt-dots { display: inline-flex; gap: 3px; margin-left: auto; flex: 0 0 auto; }
.mt-dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--primary, #0E98FB); animation: mt-pulse 1s infinite; }
.mt-dots i:nth-child(2) { animation-delay: 0.2s; }
.mt-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes mt-pulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mt-dots i { animation: none; } }
i.mt-done { margin-left: auto; flex: 0 0 auto; color: var(--primary, #0E98FB); font-size: 12px; }
body.dark-mode .sidebar-agent.mt-acted { background: #22272e; }
body.dark-mode .sidebar-agent.mt-acted .sidebar-agent-desc { color: #7db8f0 !important; }

/* one row at rest: every composer control centers on the text line; the send
   arrow is the sibling app's line icon in the primary blue */
.input-group .input-controls { align-items: center; }
.input-controls #send { color: #3b82f6; }

/* phone: composer icons reach the 44px touch floor and the fixed composer
   centers instead of hugging the left edge of its 95% width */
/* phone tap targets: id selectors in the base sheet set 30px, so these must
   match that specificity to win */
@media (max-width: 600px) {
  .input-controls #plus, .input-controls #record, .input-controls #send,
  .input-controls #chatAiWand { width: 44px !important; height: 44px !important; }
  .input-controls #record svg, .input-controls #send svg { width: 22px; height: 22px; }
}
@media (max-width: 768px) {
  .chat-input { left: 0; right: 0; margin-left: auto; margin-right: auto; }
}


/* compact vertical rhythm — the sibling app's spacing so more of the reply
   fits the view; no dead bands between turns */
#output .placeholder, #output .assistant { margin-top: 8px; margin-bottom: 8px; }
#output .user { margin-top: 8px; margin-bottom: 4px; }
.mt-viz { margin-top: 0; }
#output .assistant .message-content-container { gap: 4px !important; }
.recommendation-chips { padding-top: 2px; padding-bottom: 2px; }

/* one row at rest: every composer control centers on the text line; the send
   arrow is the sibling app's line icon in the primary blue */
.input-group .input-controls { align-items: center; }
.input-controls #send { color: #3b82f6; }

/* AI-mode pill lives in the footer tool row, not floating over the talk */
.chat-footer-buttons .mt-topdock { position: static; display: inline-flex; align-items: center; z-index: auto; }
.chat-footer-buttons .mt-aimode-face { height: 34px; font-size: 14px; padding: 0 12px; }

/* speaker sits inline right after the reply's last word */
#output .assistant .message-speaker-btn { display: inline-flex !important; align-self: auto; vertical-align: middle; margin: 0 0 0 6px; padding: 0 4px; height: 22px; min-height: 22px; }

/* the visual model follows the words immediately — no empty band */
#output .assistant .mt-viz { margin-top: 2px; margin-bottom: 0; }
#output .assistant .message-content-container > span { margin-bottom: 0; }

/* user glyph sits on the text baseline band, not above it */
#output .user .user-icon-wrapper { align-self: center; transform: translateY(1px); }

/* the model rides up beside the speaker line — no gap under the words */
#output .assistant .mt-viz { margin-top: -2px; }
#output .assistant .message-content-container p:last-child { margin-bottom: 0; }

/* AI-mode toggle: one tap steps the mode; the dot carries the state color
   (purple auto, blue on request, green off) and the label reads at 15px */
#chatFooterButtons .mt-aimode-face, .chat-footer-buttons .mt-aimode-face { height: 36px; font-size: 15px !important; font-weight: 600; padding: 0 13px; gap: 8px; border-radius: 8px; }
.mt-aimode-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; background: #9ca3af; }
.mt-aimode.mode-auto .mt-aimode-dot { background: #7c3aed; }
.mt-aimode.mode-on-demand .mt-aimode-dot { background: #0e98fb; }
.mt-aimode.mode-off .mt-aimode-dot { background: #16a34a; }
.mt-aimode.mode-auto .mt-aimode-value { color: #6d28d9; }
.mt-aimode.mode-on-demand .mt-aimode-value { color: #1d4ed8; }
.mt-aimode.mode-off .mt-aimode-value { color: #15803d; }
.mt-aimode-caret { display: none; }

/* visual model captions read at body size */
.mt-viz-cap { font-size: 15.5px; }

/* the student's own words sit in a soft blue field so turns separate at a
   glance; the tutor stays flat on the page */
#output .user span:not(.user-icon-wrapper):not([class*="mt-frac"]) { background: #EAF2FB; border-radius: 14px; padding: 8px 14px; max-width: 100%; width: fit-content; margin-left: auto; }
body.dark-mode #output .user span:not([class*="mt-frac"]) { background: #17293c; }
#output .user { margin-top: 16px; margin-bottom: 6px; }
#output .placeholder, #output .assistant { margin-top: 6px; margin-bottom: 14px; }

/* the model needs air under the sentence it illustrates */
#output .assistant .mt-viz { margin-top: 12px; margin-bottom: 4px; }

/* one speaker family: the in-message and welcome speakers match the sidebar
   read-aloud toggle instead of the filled glyph set */
#output .assistant .message-speaker-btn .mt-speaker-icon { width: 17px; height: 17px; }
#output .assistant .message-speaker-btn.active { color: #3b82f6; }


/* footer on one line: the icon buttons, then XP and streak as compact
   icon+number pairs, the way the sibling app arranges its stats */
.sidebar-settings-row { align-items: center !important; }
.sidebar-settings-row #mtProgress { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; width: auto; height: 24px; padding: 0 2px; }
.sidebar-settings-row #mtProgress .mt-stat { flex-direction: row; align-items: center; gap: 3px; flex: none; }
.sidebar-settings-row #mtProgress .mt-lbl { display: none; }
.sidebar-settings-row #mtProgress .mt-stat svg { width: 18px; height: 18px; }
.sidebar-settings-row #mtProgress .mt-stat b { font-size: 12px; font-weight: 650; }
/* badges and the goal meter live in the profile panel, not the footer rail */
.sidebar-settings-row #mtProgress .mt-stat-wide, .sidebar-settings-row #mtProgress #mtGoalRow { display: none !important; }
#mtProgressHost:empty { display: none; }

/* the student's line hugs the right edge: the glyph wrapper stops padding
   itself wide and the row packs its content to the end */
#output .user { justify-content: flex-start; gap: 8px; }
#output .user .user-icon-wrapper { flex: 0 0 auto !important; width: 22px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }

/* the greeting sits on a soft blue field — warm without shouting */
.welcome-content { background: none; border: none; padding: 6px 0; display: inline-flex; flex-direction: row !important; align-items: center; gap: 10px; flex-wrap: nowrap; }
.welcome-text { font-size: 20px !important; font-weight: 500 !important; color: var(--text, #22201B) !important; white-space: normal !important; }
.welcome-text .welcome-name { color: #1d4ed8; font-weight: 650; }
body.dark-mode .welcome-text { color: #e5e7eb !important; }
body.dark-mode .welcome-text .welcome-name { color: #7db8f0; }

/* composer edges: plus stays left, wand/mic/send stay right, but the bar stops
   reserving 39px of empty inset and the round button boxes shrink to the icon */
.chat-input .input-group { padding-left: 12px !important; padding-right: 12px !important; }
.input-group .input-controls { gap: 2px !important; }
.input-group .input-controls #plus,
.input-group .input-controls #chatAiWand,
.input-group .input-controls #record,
.input-group .input-controls #send { width: 26px !important; height: 26px !important; border-radius: 8px !important; }
/* The icon is 18px at every width. What made the narrow view read as spread out
   was the box around it: 44px left 13px of dead room on each side, so the icons
   sat 28px apart where the wide view puts them 10px apart. The box comes down
   to 32px, which still clears the 24px minimum target size, and the two outer
   buttons hang past the padding so the plus and the send sit nearer the edges. */
@media (max-width: 600px) {
  .chat-input .input-group { padding-left: 10px !important; padding-right: 10px !important; }
  .input-group .input-controls #plus,
  .input-group .input-controls #chatAiWand,
  .input-group .input-controls #record,
  .input-group .input-controls #send { width: 32px !important; height: 32px !important; }

  .input-group .input-controls { gap: 0 !important; }

  .input-group .input-controls #plus { margin-left: -6px !important; }
  .input-group .input-controls #send { margin-right: -6px !important; }
}

/* composer icons — one size */
.input-group .input-controls #plus .input-line-icon,
.input-group .input-controls #chatAiWand .ai-spark-icon,
.input-group .input-controls #record .mic-outline-icon,
.input-group .input-controls #send .input-line-icon { width: 18px !important; height: 18px !important; }


/* left and right footers draw at the composer's icon size — one size everywhere */
.chat-footer-buttons button svg { width: 18px !important; height: 18px !important; }
.chat-footer-buttons button i { font-size: 18px !important; }

/* problem level — the control students asked for, set once and changed any time */
.mt-levels { display: flex; gap: 4px; padding: 6px 0 2px; }
.mt-level-offer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; padding: 8px 12px; font-size: 13px; color: var(--text-2, #5b6169); background: #f8fafc; border: 1px solid #d1d5db; border-radius: 10px; }
.mt-level-offer button { padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: #1d4ed8; background: #fff; border: 1px solid #3b82f6; border-radius: 999px; cursor: pointer; }
.mt-level-offer button[data-no] { color: var(--text-2, #5b6169); border-color: #d1d5db; }
.mt-level-offer button:hover { background: #eff6ff; }
body.dark-mode .mt-level-offer { background: #171717; border-color: #3a3a3a; color: #cbd5e1; }
body.dark-mode .mt-level-offer button { background: #1f1f1f; color: #93c5fd; border-color: #3b82f6; }
body.dark-mode .mt-level-offer button[data-no] { color: #cbd5e1; border-color: #3a3a3a; }
.mt-level-btn { flex: 1 1 0; padding: 5px 0; font-size: 12px; font-weight: 600; color: var(--text-2, #5b6169); background: transparent; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; }
.mt-level-btn:hover { background: #f3f4f6; }
.mt-level-btn.on { color: #1d4ed8; border-color: #3b82f6; box-shadow: inset 0 0 0 1px #3b82f6; }
body.dark-mode .mt-level-btn { border-color: #3a3a3a; color: #cbd5e1; }
body.dark-mode .mt-level-btn:hover { background: #1f1f1f; }
body.dark-mode .mt-level-btn.on { color: #7db8f0; border-color: #3b82f6; }

.mt-ms-scale{position:relative;height:14px;border-radius:7px;background:#eef1f4;margin:14px 0 4px}
.mt-ms-band{position:absolute;top:0;bottom:0;background:#cfe0f7;border-radius:7px}
.mt-ms-mean{position:absolute;top:-3px;bottom:-3px;width:2px;background:#2f6fd0}
.mt-ms-ticks{display:flex;justify-content:space-between;font-size:11px;color:#61717f}
.mt-ms-trace{width:100%;height:auto;display:block;margin:8px 0}
.mt-ms-tband{fill:#cfe0f7;opacity:.75}
.mt-ms-tline{fill:none;stroke:#2f6fd0;stroke-width:2}
.mt-ms-tmid{stroke:#c9d3dc;stroke-width:1;stroke-dasharray:3 3}
.mt-ms-cap{font-size:12.5px;color:#61717f;line-height:1.5;margin:6px 0 0}
.mt-ms-tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
.mt-ms-tbl th{text-align:left;font-size:11.5px;letter-spacing:.04em;color:#61717f;
 font-weight:650;padding:8px 10px;border-bottom:1px solid #e2e8ee}
.mt-ms-tbl td{padding:9px 10px;border-bottom:1px solid #eef1f4}
.mt-ms-tbl tr:last-child td{border-bottom:0}
.mt-ms-thin td{color:#8b98a5}
.mt-ms-ok{color:#1f7a4d;font-weight:650}
.mt-ms-wait{color:#8a5a00;font-weight:650}