:root {
  /* ---- Restored light-blue-tint palette (preferred GIIS9new base) ----
     Original bright accents kept; refinement lives in HIERARCHY + spacing,
     not in recolouring. All PRIMARY buttons use the blue->emerald gradient. */

  --navy: #071b33;
  --navy-2: #0a2a4a;

  --blue: #2d6cdf;
  --emerald: #00a77f;
  --lime: #a2ff86;

  /* signature gradient (blue -> emerald) for ALL primary buttons */
  --grad: linear-gradient(135deg, #2d6cdf, #00a77f);
  --grad-hover: linear-gradient(135deg, #2961c9, #00946f);

  /* soft tints for secondary/outline buttons */
  --accent: #2d6cdf;
  --accent-deep: #1f57c4;
  --accent-soft: #e8f0fe;
  --emerald-soft: #e3f5ef;

  /* text */
  --ink: #102033;
  --ink-2: #3a4a5e;
  --heading: #0e2138;
  --muted: #677489;

  /* light-blue surface ramp */
  --bg: #f4f7fb;
  --bg-2: #eef4fb;
  --card: #ffffff;
  --line: #dce5ef;
  --line-strong: #c6d4e6;

  --warn: #ffb84d;
  --danger: #ff6b6b;

  --shadow-sm: 0 1px 2px rgba(16,32,51,0.05), 0 1px 3px rgba(16,32,51,0.07);
  --shadow-md: 0 6px 18px rgba(16,32,51,0.07), 0 2px 6px rgba(16,32,51,0.05);
  --shadow-lg: 0 16px 40px rgba(16,32,51,0.10), 0 4px 10px rgba(16,32,51,0.05);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
:root {
  --top-offset: 118px;
  --panel-min-height: calc(100vh - var(--top-offset));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: radial-gradient(circle at top left, #e9f7ff, var(--bg) 40%, #f8fbff 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.app-shell {
  min-height: 100vh;
  display: grid;
  /* Widths are variables so the drag handles can drive them. The collapsed
     rules below still override with fixed widths, so collapsing always wins
     over whatever width was dragged. */
  grid-template-columns: var(--rail-w, 320px) 1fr;
}

/* No transitions while dragging, or the panel lags the cursor and the whole
   thing feels broken rather than smooth. */
.app-shell[data-resizing] *,
.content-grid[data-resizing] * {
  transition: none !important;
}

.sidebar {
  background: linear-gradient(180deg, var(--navy), #061121);
  color: white;
  padding: 24px 20px;
  box-shadow: 10px 0 30px rgba(6,17,33,0.18);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex: 0 0 auto;
}

.brand-logo{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  background:transparent;
  border:none;
  box-shadow:none;
  flex:0 0 auto;
}

.brand h1 {
  margin: 0;
  font-size: 22px;
}

.brand p {
  margin: 3px 0 0;
  color: #b6c6d8;
  font-size: 13px;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.brand-wordmark-img{
  height:28px;
  width:auto;
  max-width:185px;
  object-fit:contain;
  display:block;
}

.brand-copy p{
  margin:4px 0 0;
  font-size:13px;
  color:rgba(220,230,245,0.72);
  line-height:1.2;
}

.student-card {
  display: flex;
  align-items: center;
  gap: 12px;

  width: calc(100% - 44px);
  margin: 18px 22px 20px 22px;
  padding: 18px 20px;

  box-sizing: border-box;
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.student-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #62f6a8;
  box-shadow: 0 0 14px rgba(98, 246, 168, 0.75);
  flex-shrink: 0;
}

.student-info {
  min-width: 0;
}

.student-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.student-plan {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(214, 225, 245, 0.78);
  line-height: 1.25;
}

.chapter-pill {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 13px;
  line-height: 1.35;
  margin-bottom: 18px;
  color: #eaf2ff;
  flex: 0 0 auto;
}

.concept-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: #d9e7f8;
  text-align: left;
  border-radius: 14px;
  padding: 12px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.18s ease;
}

.nav-btn:hover { background: rgba(255,255,255,0.1); }
.nav-btn.active {
  background: rgba(162,255,134,0.14);
  border-color: rgba(162,255,134,0.65);
  color: white;
}

.voice-card {
  margin-top: 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  flex: 0 0 auto;
}

.voice-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.voice-card p {
  margin: 0 0 12px;
  font-size: 11px;
  color: #b6c6d8;
  line-height: 1.45;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.lesson {
  padding: 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--emerald);
  font-weight: 800;
  font-size: 12px;
}

h2 {
  margin: 5px 0 0;
  font-size: 30px;
  color: #071b33;
}

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

button {
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover { transform: translateY(-1px); }

.primary {
  background: linear-gradient(135deg, var(--blue), var(--emerald));
  color: white;
  box-shadow: 0 10px 24px rgba(45,108,223,0.22);
}

.ghost {
  background: white;
  color: var(--navy);
  border: 1px solid var(--line);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) var(--dock-w, 360px);
  gap: 18px;
  align-items: stretch;
  min-height: var(--panel-min-height);
  flex: 1;
}

.canvas-card, .explain-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(220,229,239,0.9);
  box-shadow: 0 18px 45px rgba(18,47,77,0.08);
  border-radius: 24px;
}

.canvas-card {
  padding: 14px;
  min-height: var(--panel-min-height);
  display: flex;
  flex-direction: column;
}

#stage {
  width: 100%;
  height: clamp(480px, 58vh, 640px);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid #e8eef6;
  flex: 1 1 auto;
}

.explain-card {
  padding: 22px;
  min-height: var(--panel-min-height);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.section h3 {
  margin: 0 0 7px;
  color: var(--navy);
  font-size: 15px;
}

.section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.interaction-panel {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 4px 0;
  color: var(--muted);
}

.interaction-panel input, .interaction-panel select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: white;
}

.interaction-panel button {
  padding: 9px 13px;
  background: var(--navy);
  color: white;
}

.axis { stroke: #17375e; stroke-width: 3; }
.grid-line { stroke: #dce6f1; stroke-width: 1; }
.grid-major { stroke: #b8c8da; stroke-width: 1.35; }
.label { fill: #24384f; font-size: 14px; font-weight: 750; }
.small-label { fill: #53677d; font-size: 11px; font-weight: 600; }
.glow-text { fill: #071b33; font-size: 26px; font-weight: 850; }
.point { fill: var(--emerald); stroke: #063f34; stroke-width: 3; }
.point2 { fill: var(--warn); stroke: #7a4a00; stroke-width: 3; }
.point3 { fill: var(--danger); stroke: #6b1919; stroke-width: 3; }
.helper { stroke: #2d6cdf; stroke-width: 3; stroke-dasharray: 7 6; fill: none; }
.highlight { fill: rgba(162,255,134,0.26); stroke: rgba(0,167,127,0.9); stroke-width: 2; }
.room-wall { fill: #fdfefe; stroke: #102033; stroke-width: 4; }
.furniture { fill: rgba(45,108,223,0.14); stroke: #2d6cdf; stroke-width: 2; }
.door { stroke: #00a77f; stroke-width: 6; stroke-linecap: round; }
.quad { opacity: 0.28; }
.formula-box {
  fill: white;
  stroke: #dce5ef;
  stroke-width: 2;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.08));
}
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .content-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; }
}


/* Karka / Diya avatar, chat, dynamic tutor panel, and collapsible sidebar */
.brand-logo { width: 52px; height: 52px; border-radius: 16px; box-shadow: 0 0 28px rgba(162,255,134,.3); flex: 0 0 auto; }
.collapse-btn { width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.08); color: white; border: 1px solid rgba(255,255,255,.14); margin-bottom: 14px; display: grid; place-items: center; font-size: 18px; }
.tutor-avatar-card { text-align: center; }
.avatar-wrap { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, var(--lime), var(--emerald), var(--blue)); box-shadow: 0 0 28px rgba(162,255,134,.18); }
.avatar-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: white; }
.switch-row { justify-content: center; }
.tutor-response-section { background: #f7fbff; padding: 14px; border-radius: 16px; border: 1px solid #dce5ef; }
.formula-section { background: #fffdf6; padding: 14px; border-radius: 16px; border: 1px solid #f1dfaf; }
.chat-box {
  margin-top: 14px;
  border: 1px solid #dce5ef;
  border-radius: 20px;
  padding: 14px;
  background: #ffffff;
  flex: 0 0 auto;
}
.chat-title-row { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.chat-title { font-weight:850; color:#071b33; }
.chat-subtitle { color:var(--muted); font-size:12px; margin-top:3px; }
.chat-status { font-size:11px; padding:5px 9px; border-radius:999px; background:#edf5ff; color:#2d6cdf; border:1px solid #dcecff; white-space:nowrap; }
.chat-empty { color:#8a99aa; }
.chat-message { margin-bottom:9px; line-height:1.45; }
.chat-message strong { color:#071b33; }
.chat-input-row { display:flex; gap:10px; }
.chat-input-row input { flex:1; border:1px solid #dce5ef; border-radius:999px; padding:12px 14px; font-size:14px; }
.chat-input-row button { background:linear-gradient(135deg,#2d6cdf,#00a77f); color:white; min-width:86px; }
.app-shell.sidebar-collapsed { grid-template-columns: 92px 1fr; }
.app-shell.sidebar-collapsed .sidebar { padding: 20px 12px; }
.app-shell.sidebar-collapsed .brand { justify-content: center; margin-bottom: 16px; }
.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .chapter-pill,
.app-shell.sidebar-collapsed .concept-nav,
.app-shell.sidebar-collapsed .logout-btn { display: none; }
.app-shell.sidebar-collapsed .brand-logo { width: 50px; height: 50px; }


/* Learning mode toolbar: Visual, Formulas, Worked Example, Exemplar Practice, Mock Exam, Exercises */
.mode-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 8px;
  border-radius: 18px;
  background: #f7fbff;
  border: 1px solid #dce5ef;
}

.mode-btn {
  background: #ffffff;
  border: 1px solid #dce5ef;
  color: #31445b;
  box-shadow: 0 6px 16px rgba(7, 27, 51, 0.04);
}
.mode-btn:hover {
  border-color: #b8c9df;
  background: #f7fbff;
  transform: translateY(-1px);
}

.mode-btn.active {
  background: linear-gradient(135deg, #0b1f33, #2563eb);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.replay-btn { margin-left: auto; }

.hidden { display: none !important; }

.mode-content {
  min-height: 560px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid #e8eef6;
  padding: 26px;
  overflow: auto;
}

.mode-card {
  background: #ffffff;
  border: 1px solid #dce5ef;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(18,47,77,0.05);
}

.mode-card h3, .mode-card h4 {
  margin: 0 0 10px;
  color: #071b33;
}

.mode-card p, .mode-card li {
  color: #53677d;
  line-height: 1.55;
}

.formula-grid, .exam-choice-grid, .chapter-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.formula-item, .exam-choice, .chapter-check {
  border: 1px solid #dce5ef;
  background: #f7fbff;
  border-radius: 16px;
  padding: 14px;
}

.formula-symbol {
  display: block;
  font-size: 18px;
  font-weight: 850;
  color: #071b33;
  margin-bottom: 6px;
}

.exam-choice {
  cursor: pointer;
  text-align: left;
}

.exam-choice.active {
  border-color: #00a77f;
  background: #eefcf7;
  color: #071b33;
}

.chapter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #071b33;
  font-weight: 700;
}

.exam-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0;
  padding: 14px;
  background: #fffdf6;
  border: 1px solid #f1dfaf;
  border-radius: 16px;
  color: #071b33;
  font-weight: 750;
}

.start-exam-btn, .practice-btn {
  background: linear-gradient(135deg, #2d6cdf, #00a77f);
  color: white;
  padding: 12px 18px;
}

.warning-text { color: #b45309; font-weight: 750; }

/* Full right-panel chat response mode */
.chat-response-mode { height: 100%; }

.chat-response-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce5ef;
}

.chat-response-header h3 {
  margin: 0;
  color: #071b33;
  font-size: 18px;
}

.chat-response-header p {
  margin: 4px 0 0;
  color: #677489;
  font-size: 13px;
}

.small-ghost {
  background: white;
  border: 1px solid #dce5ef;
  color: #071b33;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.big-response-box {
  background: #f7fbff;
  border: 1px solid #dce5ef;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
}

.big-response-box h4 {
  margin: 0 0 8px;
  color: #071b33;
  font-size: 14px;
}

.big-response-box p {
  margin: 0;
  color: #53677d;
  line-height: 1.6;
  font-size: 15px;
  white-space: pre-line;
}

.formula-box-ui {
  background: #fffdf6;
  border-color: #f1dfaf;
}
.attach-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f7fbff;
  border: 1px solid #dce5ef;
  cursor: pointer;
  font-size: 18px;
  color: #071b33;
  flex: 0 0 auto;
}

.attach-btn,
.premium-attach-btn {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  color: #071b33;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(162,255,134,0.95), rgba(0,167,127,0.85), rgba(45,108,223,0.85)) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 10px 22px rgba(7, 27, 51, 0.08),
    inset 0 0 0 1px rgba(255,255,255,0.75);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.attach-btn:hover,
.premium-attach-btn:hover {
  transform: translateY(-1px);
  color: #00a77f;
  box-shadow:
    0 14px 28px rgba(7, 27, 51, 0.12),
    0 0 0 4px rgba(162,255,134,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.9);
}

.attach-btn:active,
.premium-attach-btn:active {
  transform: translateY(0) scale(0.98);
}

.attach-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.premium-attach-btn.has-file {
  color: #ffffff;
  background:
    linear-gradient(135deg, #00a77f, #2d6cdf) padding-box,
    linear-gradient(135deg, #a2ff86, #00a77f, #2d6cdf) border-box;
}
.attachment-preview {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: #f7fbff;
  border: 1px solid #dce5ef;
  color: #53677d;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.attachment-preview.hidden {
  display: none;
}

.attachment-file-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.attachment-file-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-attachment-btn {
  border: 1px solid #dce5ef;
  background: white;
  color: #071b33;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  flex: 0 0 auto;
}

/* ---- Diya mic button (v2 voice) ---- */
.mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: #00a77f;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease;
}
.mic-btn:hover { background: #00936f; transform: translateY(-1px); }
.mic-btn:active { transform: translateY(0); }
.mic-btn svg { display: block; }

/* ---- v2 richer-animation classes ---- */
.dir-arrow { stroke-width: 4; fill: none; stroke-linecap: round; }
.dir-arrow.pos { stroke: #00a77f; }
.dir-arrow.neg { stroke: #ff6b6b; }
text { transition: opacity .2s ease; }

/* ---- v2 chapter accordion (left panel) ---- */
.concept-nav { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 4px; margin-bottom: 14px; }
.chapter-block { display: flex; flex-direction: column; }
.chapter-header {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: #d9e7f8; text-align: left; width: 100%;
  border-radius: 12px; padding: 11px 12px; cursor: pointer;
  font-size: 13.5px; transition: 0.16s ease;
}
.chapter-header:hover { background: rgba(255,255,255,0.1); }
.chapter-header.current { border-color: rgba(162,255,134,0.5); }
.chapter-header.is-locked { opacity: 0.55; }
.chapter-header .ch-num {
  flex: 0 0 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: rgba(162,255,134,0.16); color: #cfeecf;
}
.chapter-header.is-locked .ch-num { background: rgba(255,255,255,0.08); color: #9fb1c6; }
.chapter-header .ch-title { flex: 1 1 auto; line-height: 1.25; }
.chapter-header .ch-caret { flex: 0 0 auto; font-size: 16px; color: #9fb1c6; }
.subtopic-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px 14px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.1); }
.subtopic-btn {
  border: none; background: transparent; color: #c2d4e8;
  text-align: left; border-radius: 9px; padding: 8px 10px;
  cursor: pointer; font-size: 12.7px; transition: 0.14s ease;
}
.subtopic-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.subtopic-btn.active { background: rgba(162,255,134,0.14); color: #fff; font-weight: 600; }
.subtopic-empty { color: #8aa0b8; font-size: 12px; font-style: italic; padding: 8px 10px; }

/* ---- v2.1 layout: Logout bottom-left, Diya dock bottom-right ---- */

/* Logout pinned at the bottom of the left sidebar */
.logout-btn {
  flex: 0 0 auto;
  margin-top: 4px;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #d9e7f8;
  font-size: 14px;
  cursor: pointer;
  transition: 0.16s ease;
}
.logout-btn:hover { background: rgba(255,255,255,0.12); }

/* Right panel becomes a flex column: explanation scrolls, Diya dock pinned */
.explain-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;            /* inner regions handle their own padding */
  overflow: hidden;
}
.right-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 22px 14px;
}

/* Diya dock at the bottom-right */
.diya-dock {
  flex: 0 0 auto;
  border-top: 1px solid #e3ebf5;
  background: linear-gradient(180deg, #f7fbff, #eef5ff);
  padding: 14px 16px 16px;
  border-radius: 0 0 24px 24px;
}
.diya-dock-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.diya-dock-avatar {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%;
  padding: 3px; background: linear-gradient(135deg, var(--lime), var(--emerald), var(--blue));
}
.diya-dock-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff; }
.diya-dock-meta { line-height: 1.3; }
.diya-dock-name { font-weight: 800; color: #071b33; font-size: 16px; }
.diya-dock-tag { color: var(--muted); font-size: 11.5px; }
.diya-dock-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #2f8f6f; margin-top: 2px; }
.diya-dock-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbf85; box-shadow: 0 0 0 3px rgba(47,191,133,.18); }

.dock-mic { width: 100%; justify-content: center; margin: 0 0 12px; }

/* Session placeholder cards (2-col grid) */
.session-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.session-card {
  background: #fff; border: 1px solid #e3ebf5; border-radius: 12px; padding: 9px 11px;
}
.session-card-label { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #8aa0b8; margin-bottom: 3px; }
.session-card-value { font-size: 12.5px; font-weight: 700; color: #18324c; line-height: 1.25; }
.quota-bar { margin-top: 6px; height: 5px; border-radius: 999px; background: #e3ebf5; overflow: hidden; }
.quota-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--emerald), var(--blue)); }
.exercise-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 4px 4px;
}

.exercise-card {
  padding: 18px 20px;
  border-radius: 18px;
}

.exercise-meta {
  font-size: 11px;
  color: #6b7f95;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.exercise-question {
  line-height: 1.65;
  font-size: 15px;
  margin-bottom: 14px;
}

.exercise-actions {
  gap: 12px;
  margin-top: 10px;
}

.exercise-actions button {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 850;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(7, 27, 51, 0.08);
}
.exercise-actions .view-figure-btn {
  background: #eaf1ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.exercise-actions .show-answer-btn {
  background: #e8fbf5;
  color: #007c5b;
  border: 1px solid #b7f0df;
}

.exercise-answer {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #f7fbff;
  border: 1px solid #dce5ef;
  color: #53677d;
  font-size: 14px;
  line-height: 1.55;
}

.hidden {
  display: none;
}
/* When a full-width learning mode is active */
.content-grid.focus-mode {
  grid-template-columns: 1fr;
}

.content-grid.focus-mode .explain-card {
  display: none;
}

/* Hide the large SVG space for exercise/practice style modes */
.canvas-card.no-visual #stage {
  display: none;
}

.canvas-card.no-visual .interaction-panel {
  padding-top: 0;
}

/* Make exercise/practice cards use full width neatly */
.canvas-card.no-visual .exercise-list {
  margin-top: 18px;
}
.exercise-header {
  padding: 4px 2px 10px;
}

.exercise-header h2 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #071b33;
}

.exercise-header p {
  margin: 0;
  color: #677489;
  font-size: 14px;
}
/* ---- Question rendering, Send to Diya, and Mock Exam additions ---- */
.exercise-actions .send-to-diya-btn,
.exercise-actions .send-to-diya-btn {
  background: linear-gradient(135deg, #2563eb, #00a77f);
  color: #ffffff;
}

.mcq-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mcq-option-btn {
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7fbff;
  border: 1px solid #dce5ef;
  color: #071b33;
  font-weight: 800;
}

.mcq-option-btn.correct {
  background: rgba(0, 167, 127, 0.12);
  border-color: #00a77f;
  color: #007c5b;
}

.mcq-option-btn.wrong {
  background: rgba(255, 107, 107, 0.12);
  border-color: #ff6b6b;
  color: #8a1f1f;
}

.mock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.mock-preset-btn,
.start-mock-btn {
  border-radius: 14px;
  padding: 12px 14px;
  background: #071b33;
  color: white;
  border: 0;
  font-weight: 850;
}

.chapter-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.chapter-check {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  background: #f7fbff;
  font-weight: 750;
}

.mock-summary {
  margin: 14px 0;
  color: #53677d;
  font-weight: 750;
}

@media (max-width: 900px) {
  .mcq-options,
  .mock-grid,
  .chapter-check-grid {
    grid-template-columns: 1fr;
  }
}
.exercise-actions .view-figure-btn {
  background: #2d6cdf;
}
.exercise-actions .view-figure-btn {
  background: #2d6cdf;
  color: #ffffff;
}
/* (toggle styles consolidated in the v2.6 block near end of file) */
.explain-card {
  position: relative;
}

.content-grid.right-collapsed {
  grid-template-columns: minmax(0, 1fr) 48px;
}

.content-grid.right-collapsed .explain-card {
  width: 48px;
  min-width: 48px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
/* hide all right panel content except toggle */
.content-grid.right-collapsed .explain-card > *:not(.right-panel-toggle) {
  display: none !important;
}


/* ============================================================
   WORLD-CLASS REFINEMENT LAYER (v2.4)
   Goals from feedback:
   - softer heading ink (no harsh black)
   - proper BUTTON HIERARCHY (one primary, quiet secondaries)
   - WHITE stage for clean animation contrast
   - fixed, elegant right-panel toggle
   - editorial spacing rhythm + considered detail
   ============================================================ */

/* ---- Display typography: Fraunces, softened weight + colour ---- */
h1, h2, .brand h1, #chapterTitle, .glow-text,
.exercise-header h2, .chat-response-header h3 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 560;
  letter-spacing: -0.015em;
}
h2, #chapterTitle { font-size: 29px; line-height: 1.15; }
.brand h1 { font-size: 21px; font-weight: 600; color: #fff; }
.section h3 { font-family: var(--font-display); font-weight: 560; color: var(--heading); font-size: 16px; letter-spacing: -0.01em; }

.eyebrow {
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 10.5px;
}

/* body copy a touch warmer/softer than pure ink */
.section p, .big-response-box p, #chapterIntro { color: var(--ink-2); }

/* ---- Sidebar: deep slate, hairline edge, calm ---- */
.sidebar {
  background: linear-gradient(180deg, #20293c, #161d2b);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.05);
}
.brand p { color: #97a1b6; font-size: 12px; }
.chapter-pill { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); color: #dfe5f0; }
.chapter-header { border-radius: var(--r-md); font-weight: 550; }
.chapter-header.current { background: rgba(122,148,245,0.13); border-color: rgba(122,148,245,0.45); }
.chapter-header .ch-num { background: rgba(122,148,245,0.2); color: #cdd8fb; border-radius: 7px; font-weight: 700; }
.subtopic-btn.active { background: rgba(122,148,245,0.15); color: #fff; font-weight: 550; }
.nav-btn.active { background: rgba(122,148,245,0.15); border-color: rgba(122,148,245,0.4); }
.logout-btn { border-radius: var(--r-md); }

/* ---- Lesson canvas: generous rhythm ---- */
.lesson { padding: 32px 36px; }
.content-grid { gap: 24px; }

/* ---- Cards: hairline, soft shadow, unified radius ---- */
.canvas-card, .explain-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ---- WHITE STAGE for clean animation contrast (key fix) ---- */
#stage {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ---- Mode toolbar: quiet rail, single ink-filled active ---- */
.mode-toolbar { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); gap: 4px; padding: 5px; }
.mode-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font-weight: 550; border-radius: var(--r-sm); font-size: 13.5px; transition: 0.15s ease;
}
.mode-btn:hover { background: #fff; color: var(--heading); box-shadow: var(--shadow-sm); }
.mode-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--shadow-sm); }
.replay-btn { color: var(--muted); }

/* ============================================================
   BUTTON HIERARCHY (the core fix for "three jarring colours")
   One PRIMARY (filled accent). SECONDARY (quiet outline).
   TERTIARY (ghost/text). Colour signals importance, not variety.
   ============================================================ */

/* global pill buttons calmer */
button { transition: transform .14s ease, box-shadow .14s ease, background .18s ease, border-color .18s ease; font-weight: 600; }
button:hover { transform: translateY(-1px); }

/* top stage controls (Play primary, rest ghost) */
.primary, #topPlayBtn, .primary-btn {
  background: var(--grad); color: #fff; border: none;
  box-shadow: var(--shadow-sm);
}
.primary:hover, #topPlayBtn:hover { background: var(--grad-hover); }
.ghost, .ghost-btn {
  background: #fff; color: var(--ink-2); border: 1px solid var(--line-strong);
}
.ghost:hover, .ghost-btn:hover { background: var(--bg-2); color: var(--heading); }

/* EXERCISE CARD actions — the trio that clashed.
   Primary = Send to Diya (accent, the main action).
   Secondary = Show Answer (quiet outline).
   Tertiary = View Figure (ghost text-button). */
.exercise-actions { gap: 8px; align-items: center; }
.exercise-actions button { border-radius: 999px; padding: 9px 16px; font-size: 13px; }

.exercise-actions .send-to-diya-btn,
.exercise-actions .send-to-diya-rendered-btn {
  background: var(--grad); color: #fff; border: none;
  box-shadow: var(--shadow-sm); order: 1;
}
.exercise-actions .send-to-diya-btn:hover { background: var(--grad-hover); }

.exercise-actions .show-answer-btn {
  background: #fff; color: var(--accent-deep);
  border: 1px solid #d4dbf3; order: 2;
}
.exercise-actions .show-answer-btn:hover { background: var(--accent-soft); }

.exercise-actions .view-figure-btn {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; padding-left: 10px; padding-right: 10px; order: 3;
}
.exercise-actions .view-figure-btn:hover { background: var(--bg-2); color: var(--heading); }

/* exercise cards themselves */
.exercise-card { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.exercise-card:hover { box-shadow: var(--shadow-md); }
.exercise-meta { color: var(--muted); letter-spacing: 0.07em; font-size: 11px; text-transform: uppercase; }
.exercise-question { color: var(--ink); font-weight: 500; line-height: 1.6; }
.exercise-header p { color: var(--muted); }

/* ---- Right-panel response boxes: calm, editorial ---- */
.big-response-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.big-response-box h4 { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.formula-box-ui { background: #fbf8f0; border-color: #ecdfc6; }
.chat-response-header h3 { font-size: 19px; }
.chat-response-header p { color: var(--muted); }
.small-ghost { background: #fff; border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: 999px; }
.small-ghost:hover { background: var(--bg-2); }

/* ---- Chat input row: primary send ---- */
.chat-box { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.chat-input-row input { border: 1px solid var(--line-strong); border-radius: 999px; }
.chat-input-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-input-row button { background: var(--grad); border: none; }
.chat-input-row button:hover { background: var(--grad-hover); }
.chat-status { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid #dde3f7; }

/* ---- Diya dock: warm, refined ---- */
.diya-dock { background: linear-gradient(180deg, #faf9f5, #f1f0ea); border-top: 1px solid var(--line); }
.diya-dock-name { font-family: var(--font-display); font-weight: 600; color: var(--heading); }
.dock-mic { background: var(--grad); border: none; }
.dock-mic:hover { background: var(--grad-hover); }
.session-card { border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; }
.session-card-value { color: var(--heading); }
.quota-bar span { background: linear-gradient(90deg, var(--accent), var(--emerald)); }

/* ---- MCQ options ---- */
.mcq-option-btn { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-weight: 550; }
.mcq-option-btn:hover { background: #fff; box-shadow: var(--shadow-sm); }
.mcq-option-btn.correct { background: var(--emerald-soft); border-color: var(--emerald); color: #1f6b50; }
.mcq-option-btn.wrong { background: #fbeceb; border-color: var(--danger); color: #9a322f; }

/* ============================================================
   RIGHT-PANEL TOGGLE — superseded by the floating-seam version
   at the end of this file. This block intentionally left minimal.
   ============================================================ */
.explain-card { position: relative; }

/* collapsed grid width (toggle position handled in the final block) */
.content-grid.right-collapsed { grid-template-columns: minmax(0,1fr) 48px; }
.content-grid.right-collapsed .explain-card {
  width: 48px; min-width: 48px; padding: 0;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  overflow: visible;
}
.content-grid.right-collapsed .explain-card > *:not(.right-panel-toggle) { display: none !important; }

/* ---- Refined scrollbars ---- */
.concept-nav::-webkit-scrollbar, .right-scroll::-webkit-scrollbar { width: 7px; }
.right-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.concept-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 99px; }
.right-scroll::-webkit-scrollbar-track, .concept-nav::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   v2.5 CORRECTIONS — gradient button system across ALL tabs,
   fix Mock Exam black buttons, refine toggle + active pill.
   ============================================================ */

/* Active mode pill: gradient instead of flat black */
.mode-btn.active {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* MOCK EXAM — was a wall of black buttons. Now: presets = quiet
   outline, "Generate Paper" = the one primary gradient. */
.mock-preset-btn {
  background: #fff;
  color: var(--accent-deep);
  border: 1px solid #cfdcf3;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.mock-preset-btn:hover { background: var(--accent-soft); }
.mock-preset-btn.active,
.mock-preset-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.start-mock-btn {
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.start-mock-btn:hover { background: var(--grad-hover); }

/* chapter checkboxes in the mock grid: clean, light */
.chapter-check { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-weight: 500; }
.chapter-check:hover { border-color: var(--accent); }
.mock-summary { color: var(--muted); }

/* any other stray dark utility buttons -> gradient primary,
   so nothing renders as flat black anywhere */
.interaction-panel button {
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.interaction-panel button:hover { background: var(--grad-hover); }

/* stage stays clean white; surrounding panel tint light-blue */
#stage { background: #ffffff; border: 1px solid var(--line); }
.canvas-card, .explain-card { background: var(--card); }

/* ---- TOGGLE: a clean pill floating ON the seam between panels.
   Anchored to the grid (not the card, which has overflow:hidden and
   would clip it). Sits clear of the panel edge with a soft shadow. ---- */
.content-grid { position: relative; }
.explain-card { position: static; }
.right-panel-toggle {
  position: absolute;
  top: 50%;
  /* centre the pill on the seam: panel 360px + 24px gap from the right
     edge; offset back by half the pill width (14px) to straddle it. */
  right: calc(360px + 24px - 14px);
  transform: translateY(-50%);
  width: 28px; height: 56px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent-deep);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 40;
  padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.right-panel-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.right-panel-toggle .rpt-chevron {
  font-size: 17px; font-weight: 700; line-height: 1;
  transition: transform .2s ease;
}
.right-panel-toggle:hover .rpt-chevron { transform: translateX(-1px); }

/* collapsed: rail is 48px; centre pill on that rail's left seam (48 + 24 gap - 14) */
.content-grid.right-collapsed .right-panel-toggle { right: calc(48px + 24px - 14px); }
.content-grid.right-collapsed .right-panel-toggle .rpt-chevron { transform: rotate(180deg); }

/* ---- Figure renderer text styles ---- */
.fig-label { fill: #1f3a52; font-size: 12px; font-weight: 700; font-family: var(--font-body); }
.fig-small { fill: #53677d; font-size: 12px; font-weight: 600; font-family: var(--font-body); text-anchor: middle; }
.fig-quad  { fill: #8aa0b8; font-size: 13px; font-weight: 700; font-family: var(--font-body); text-anchor: middle; letter-spacing: 0.04em; }
.fig-eq    { fill: #2d6cdf; font-size: 13px; font-weight: 800; font-family: var(--font-body); }

/* ============================================================
   KARKA FINAL UI OVERRIDES
   Premium light theme, cleaner spacing, better toggle behavior
   ============================================================ */

:root {
  --karka-bg: #f5f8fc;
  --karka-card: #ffffff;
  --karka-line: #dbe5f1;
  --karka-line-strong: #c8d5e6;

  --karka-text: #24364a;
  --karka-text-soft: #5f748b;
  --karka-heading: #12263a;

  --karka-blue: #2d6cdf;
  --karka-blue-deep: #1f57bc;
  --karka-blue-soft: #eaf2ff;

  --karka-teal: #12b3a6;
  --karka-teal-deep: #0d9488;
  --karka-teal-soft: #e8fbf8;

  --karka-gold-soft: #fbf7ef;
  --karka-gold-line: #eadfca;

  --karka-grad: linear-gradient(90deg, #2d6cdf 0%, #12b3a6 100%);
  --karka-grad-hover: linear-gradient(90deg, #245dc3 0%, #109c92 100%);

  --karka-shadow-sm: 0 6px 18px rgba(23, 44, 77, 0.06);
  --karka-shadow-md: 0 10px 28px rgba(23, 44, 77, 0.10);

  --karka-radius-sm: 12px;
  --karka-radius-md: 18px;
  --karka-radius-lg: 22px;
}

/* overall surfaces */
body {
  background: var(--karka-bg);
  color: var(--karka-text);
}

.canvas-card,
.explain-card,
.exercise-card,
.chat-box,
.session-card {
  background: var(--karka-card);
  border: 1px solid var(--karka-line);
  box-shadow: var(--karka-shadow-sm);
}

/* keep stage clean */
#stage {
  background: #fff;
  border: 1px solid var(--karka-line);
  border-radius: 16px;
}

/* ------------------------------------------------------------
   TOP MODE BUTTONS / TAB BUTTONS
   ------------------------------------------------------------ */
.mode-btn,
.tab-btn,
button.mode-btn {
  background: #fff;
  color: var(--karka-text);
  border: 1px solid var(--karka-line-strong);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none;
  transition: all 0.18s ease;
}

.mode-btn:hover,
.tab-btn:hover,
button.mode-btn:hover {
  background: var(--karka-blue-soft);
  color: var(--karka-blue-deep);
  border-color: #c9daf8;
}

.mode-btn.active,
.tab-btn.active,
button.mode-btn.active {
  background: var(--karka-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--karka-shadow-sm);
}

/* replay / ghost-style controls */
.ghost,
.ghost-btn,
.small-ghost {
  background: #fff;
  color: var(--karka-text);
  border: 1px solid var(--karka-line-strong);
}

.ghost:hover,
.ghost-btn:hover,
.small-ghost:hover {
  background: #f6f9fd;
  color: var(--karka-heading);
}

/* play / primary buttons */
.primary,
.primary-btn,
#topPlayBtn {
  background: var(--karka-grad);
  color: #fff;
  border: none;
  box-shadow: var(--karka-shadow-sm);
}

.primary:hover,
.primary-btn:hover,
#topPlayBtn:hover {
  background: var(--karka-grad-hover);
}

/* ------------------------------------------------------------
   EXERCISE LAYOUT IMPROVEMENTS
   ------------------------------------------------------------ */
.exercise-card {
  padding: 20px 22px;
  border-radius: var(--karka-radius-md);
}

.exercise-meta {
  color: var(--karka-text-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.exercise-question {
  color: var(--karka-heading);
  font-weight: 500;
  line-height: 1.62;
  margin-top: 8px;
}

.exercise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.exercise-actions button {
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.18s ease;
}

/* View Figure */
.exercise-actions .view-figure-btn {
  background: #fff;
  color: var(--karka-blue-deep);
  border: 1px solid #cddcf5;
}

.exercise-actions .view-figure-btn:hover {
  background: var(--karka-blue-soft);
  border-color: #b8cef4;
}

/* Show Answer */
.exercise-actions .show-answer-btn {
  background: #fff;
  color: #1b8f83;
  border: 1px solid #c8ece8;
}

.exercise-actions .show-answer-btn:hover {
  background: var(--karka-teal-soft);
  border-color: #a8ded7;
}

/* Send to Diya */
.exercise-actions .send-to-diya-btn,
.exercise-actions .send-to-diya-rendered-btn {
  background: var(--karka-grad);
  color: #fff;
  border: none;
  box-shadow: var(--karka-shadow-sm);
}

.exercise-actions .send-to-diya-btn:hover,
.exercise-actions .send-to-diya-rendered-btn:hover {
  background: var(--karka-grad-hover);
}

/* ------------------------------------------------------------
   CHAT / DIYA PANELS
   ------------------------------------------------------------ */
.chat-response-header h3 {
  color: var(--karka-heading);
  font-size: 19px;
}

.chat-response-header p,
.exercise-header p,
.mock-summary,
.chat-status {
  color: var(--karka-text-soft);
}

.big-response-box {
  background: #f8fbff;
  border: 1px solid var(--karka-line);
  border-radius: 18px;
}

.big-response-box h4 {
  color: var(--karka-text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.formula-box-ui {
  background: var(--karka-gold-soft);
  border-color: var(--karka-gold-line);
}

.chat-box {
  border-radius: var(--karka-radius-lg);
  overflow: hidden;
}

.chat-input-row input {
  border: 1px solid var(--karka-line-strong);
  border-radius: 999px;
  background: #fff;
}

.chat-input-row input:focus {
  outline: none;
  border-color: var(--karka-blue);
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.12);
}

.chat-input-row button,
#sendQuestionBtn {
  background: var(--karka-grad);
  color: #fff;
  border: none;
  box-shadow: var(--karka-shadow-sm);
}

.chat-input-row button:hover,
#sendQuestionBtn:hover {
  background: var(--karka-grad-hover);
}

.chat-status {
  background: #eef5ff;
  border: 1px solid #d5e3f8;
  color: var(--karka-blue-deep);
}

/* dock */
.diya-dock {
  background: linear-gradient(180deg, #fafbfc 0%, #f2f6fb 100%);
  border-top: 1px solid var(--karka-line);
}

.diya-dock-name {
  color: var(--karka-heading);
  font-weight: 700;
}

.dock-mic {
  background: var(--karka-grad);
  border: none;
}

.dock-mic:hover {
  background: var(--karka-grad-hover);
}

/* ------------------------------------------------------------
   MOCK EXAM BUTTONS
   ------------------------------------------------------------ */
.mock-preset-btn {
  background: #fff;
  color: var(--karka-blue-deep);
  border: 1px solid #cfdbf1;
  border-radius: 14px;
  font-weight: 600;
}

.mock-preset-btn:hover {
  background: var(--karka-blue-soft);
}

.mock-preset-btn.active,
.mock-preset-btn:focus-visible {
  background: var(--karka-blue-soft);
  border-color: var(--karka-blue);
  color: var(--karka-blue-deep);
}

.start-mock-btn {
  background: var(--karka-grad);
  color: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: var(--karka-shadow-sm);
}

.start-mock-btn:hover {
  background: var(--karka-grad-hover);
}

.chapter-check {
  background: #fff;
  border: 1px solid var(--karka-line);
  border-radius: 14px;
  color: var(--karka-text);
}

.chapter-check:hover {
  border-color: var(--karka-blue);
}

/* ------------------------------------------------------------
   RIGHT PANEL TOGGLE — clean seam placement
   ------------------------------------------------------------ */
.content-grid {
  position: relative;
}

/* expanded state */
.right-panel-toggle {
  position: absolute;
  top: 50%;
  right: calc(360px + 24px - 14px);
  transform: translateY(-50%);
  width: 28px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--karka-line);
  background: #fff;
  color: var(--karka-blue-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--karka-shadow-md);
  z-index: 50;
  padding: 0;
  transition: all 0.18s ease;
}

.right-panel-toggle:hover {
  background: var(--karka-blue-soft);
  border-color: var(--karka-blue);
}

.right-panel-toggle .rpt-chevron {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.18s ease;
}

/* collapsed state */
.content-grid.right-collapsed {
  grid-template-columns: minmax(0, 1fr) 48px !important;
}

.content-grid.right-collapsed .explain-card {
  width: 48px;
  min-width: 48px;
  padding: 0;
  overflow: visible;
}

.content-grid.right-collapsed .explain-card > *:not(.right-panel-toggle) {
  display: none !important;
}

.content-grid.right-collapsed .right-panel-toggle {
  right: calc(48px + 24px - 14px);
}

.content-grid.right-collapsed .right-panel-toggle .rpt-chevron {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------
   FIGURE TEXT / SVG LABEL CLEANUP
   ------------------------------------------------------------ */
.fig-label {
  fill: #1f3a52;
  font-size: 12px;
  font-weight: 700;
}

.fig-small {
  fill: #58718b;
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}

.fig-quad {
  fill: #8aa0b8;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.04em;
}

.fig-eq {
  fill: #2d6cdf;
  font-size: 13px;
  font-weight: 800;
}

/* ------------------------------------------------------------
   MOBILE / SMALL WIDTH SAFETY
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .exercise-actions {
    gap: 8px;
  }

  .exercise-actions button {
    font-size: 13px;
    padding: 8px 14px;
  }

  .right-panel-toggle {
    width: 26px;
    height: 52px;
  }
}

/* ============================================================
   REAL WORLD TAB
   ============================================================ */

.realworld-panel {
  width: 100%;
  padding: 14px 4px 4px;
}

.realworld-header h2 {
  margin: 0 0 6px;
  color: var(--karka-heading, #12263a);
  font-size: 22px;
}

.realworld-header p {
  margin: 0 0 14px;
  color: var(--karka-text-soft, #5f748b);
  font-size: 14px;
}

.realworld-feature-card {
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid var(--karka-line, #dbe5f1);
  background:
    radial-gradient(circle at top right, rgba(45,108,223,0.12), transparent 35%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--karka-shadow-sm, 0 6px 18px rgba(23,44,77,0.06));
  margin-bottom: 14px;
}

.realworld-kicker {
  color: var(--karka-blue-deep, #1f57bc);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.realworld-feature-card h3 {
  margin: 0 0 8px;
  color: var(--karka-heading, #12263a);
  font-size: 20px;
}

.realworld-feature-card p {
  margin: 0 0 14px;
  color: var(--karka-text, #24364a);
  line-height: 1.55;
}

.realworld-play-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--karka-grad, linear-gradient(90deg, #2d6cdf 0%, #12b3a6 100%));
  color: #ffffff;
  font-weight: 800;
  box-shadow: var(--karka-shadow-sm, 0 6px 18px rgba(23,44,77,0.06));
}

.realworld-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.realworld-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--karka-line, #dbe5f1);
  background: #ffffff;
  color: var(--karka-text, #24364a);
  box-shadow: var(--karka-shadow-sm, 0 6px 18px rgba(23,44,77,0.06));
}

.realworld-card span {
  display: block;
  font-weight: 850;
  color: var(--karka-heading, #12263a);
  margin-bottom: 5px;
}

.realworld-card small {
  display: block;
  color: var(--karka-text-soft, #5f748b);
  line-height: 1.45;
}

.realworld-card.active {
  border-color: var(--karka-blue, #2d6cdf);
  background: var(--karka-blue-soft, #eaf2ff);
}
/* ============================================================
   PRACTICE CENTRE + PREMIUM REAL WORLD
   ============================================================ */

.mode-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  /* NOWRAP, not wrap. The scene overlays below are absolutely positioned a fixed
     distance from the top of .canvas-card, which only holds while this toolbar is
     ONE row. Letting it wrap and then raising z-index (the previous fix) did not
     solve that — it just decided who wins the overlap, so on a narrow window the
     second row of tabs sat ON TOP of the concept text instead of under it.
     Reported live: "Karka Board" and "Practice" covering the meristematic-tissue
     paragraph.
     Keeping it to one row preserves the assumption the rest of the layout is built
     on; if the window is too narrow for all five, the row scrolls horizontally
     instead of growing downward into the content. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* NEVER SHRINK. The card is a column flex; in Practice the panel below takes
     flex:1 and this row, with no flex-basis of its own, was squeezed from 38px
     to 9px — overflow-y:hidden then clipped the buttons, which read as "the
     top buttons move up" (owner, 27 Aug). Measured, not guessed. */
  flex: 0 0 auto;
  scrollbar-width: none;          /* Firefox: the row is short, a bar would dominate */
  -webkit-overflow-scrolling: touch;
}
/* Chrome/Safari: hide the scrollbar on the tab row without disabling the scroll. */
.mode-tabs::-webkit-scrollbar { display: none; }
/* The tabs must not squash into unreadable slivers before the row starts scrolling. */
.mode-tabs > * { flex: 0 0 auto; }


.mode-tabs .replay-mode-btn {
  margin-left: auto;
}

.practice-shell {
  padding: 18px;
  width: 100%;
}

.practice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.practice-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 850;
  color: #2d6cdf;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.practice-header h2 {
  margin: 0 0 6px;
  color: #12263a;
  font-size: 24px;
}

.practice-header p {
  margin: 0;
  color: #5f748b;
  font-size: 14px;
}

.practice-mode-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.practice-mode-btn {
  border: 1px solid #dbe5f1;
  background: #ffffff;
  color: #24364a;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.18s ease;
}

.practice-mode-btn:hover {
  background: #eaf2ff;
  color: #1f57bc;
}

.practice-mode-btn.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(90deg, #2d6cdf 0%, #12b3a6 100%);
  box-shadow: 0 8px 20px rgba(45, 108, 223, 0.16);
}

.practice-content {
  width: 100%;
}

.practice-empty {
  border: 1px solid #dbe5f1;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  color: #24364a;
}

.practice-empty h3 {
  margin: 0 0 8px;
  color: #12263a;
}

.realworld-shell {
  padding-top: 8px;
}

.realworld-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.realworld-story-card {
  text-align: left;
  border: 1px solid #dbe5f1;
  background:
    radial-gradient(circle at top right, rgba(45, 108, 223, 0.10), transparent 34%),
    #ffffff;
  border-radius: 20px;
  padding: 18px;
  min-height: 142px;
  box-shadow: 0 8px 24px rgba(23, 44, 77, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
}

.realworld-story-card:hover {
  transform: translateY(-2px);
  border-color: #b7cbef;
  box-shadow: 0 14px 32px rgba(23, 44, 77, 0.10);
}

.realworld-story-card.active {
  border-color: #2d6cdf;
  background:
    radial-gradient(circle at top right, rgba(18, 179, 166, 0.16), transparent 34%),
    #eaf2ff;
}

.realworld-story-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 12px;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(23, 44, 77, 0.08);
}

.realworld-story-title {
  display: block;
  color: #12263a;
  font-weight: 850;
  font-size: 17px;
  margin-bottom: 6px;
}

.realworld-story-card small {
  display: block;
  color: #5f748b;
  font-size: 13px;
  line-height: 1.48;
}

@media (max-width: 1100px) {
  .realworld-card-grid {
    grid-template-columns: 1fr;
  }

  .mode-tabs .replay-mode-btn {
    margin-left: 0;
  }
}
.canvas-card.content-mode-card {
  min-height: auto !important;
}

.canvas-card.content-mode-card #stage {
  display: none !important;
}

.canvas-card.content-mode-card .interaction,
.canvas-card.content-mode-card #interaction {
  margin-top: 0 !important;
}

.practice-shell {
  padding: 18px;
  width: 100%;
}

.practice-mode-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.practice-mode-btn {
  border: 1px solid #dbe5f1;
  background: #ffffff;
  color: #24364a;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 750;
  cursor: pointer;
}

.practice-mode-btn.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(90deg, #2d6cdf 0%, #12b3a6 100%);
}

.practice-content {
  width: 100%;
}

.practice-empty {
  border: 1px solid #dbe5f1;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  color: #24364a;
}

/* Practice chapter dropdown (Exercises + Exemplar) */
.practice-chapter-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.practice-chapter-picker label {
  font-weight: 750;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #5b6b7e);
}
.practice-chapter-select {
  flex: 1;
  max-width: 520px;
  border: 1px solid #dbe5f1;
  background: #ffffff;
  color: #24364a;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.practice-chapter-select:hover { border-color: #2d6cdf; }
.practice-chapter-select:focus {
  outline: none;
  border-color: #2d6cdf;
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.15);
}

/* Flash highlight when returning to a question after viewing its figure */
.exercise-card.question-flash {
  animation: karkaQuestionFlash 1.6s ease;
}
@keyframes karkaQuestionFlash {
  0%   { box-shadow: 0 0 0 0 rgba(45, 108, 223, 0.0); background: rgba(45,108,223,0.10); }
  25%  { box-shadow: 0 0 0 4px rgba(45, 108, 223, 0.35); background: rgba(45,108,223,0.10); }
  100% { box-shadow: 0 0 0 0 rgba(45, 108, 223, 0.0); background: transparent; }
}

/* Diya response rendered inside the Worked Example tab */
.worked-response { width: 100%; max-width: 860px; margin: 0 auto; padding: 4px 2px; }
.worked-response-head { padding: 4px 2px 14px; }
.worked-response-head h2 { font-family: "Fraunces", serif; font-size: 24px; margin: 0 0 4px; color: #1a2b3c; }
.worked-response-head p { margin: 0; color: #5b6b7e; font-size: 14px; }
.worked-response-block {
  border: 1px solid #dce5ef;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.worked-response-block.wr-formula { background: #fffaf0; border-color: #f0e2c4; }
.worked-response-block .wr-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  color: #2d6cdf; margin-bottom: 6px;
}
.worked-response-block.wr-formula .wr-label { color: #b8860b; }
.worked-response-block .wr-body {
  font-size: 15px; line-height: 1.55; color: #24364a; white-space: pre-wrap;
}

/* Fix: keep the right-panel toggle on-screen regardless of content height.
   (Was top:50% of a very tall .content-grid, which pushed it far below the
   fold when Practice rendered a long question list.) */
.right-panel-toggle {
  position: fixed !important;
  top: 320px !important;
  transform: none !important;
}

/* Diya step-by-step worked solution (voice-driven) */
.worked-steps { margin: 4px 0 0; padding-left: 0; list-style: none; }
.worked-step {
  font-size: 15px; line-height: 1.55; color: #24364a;
  margin-bottom: 10px; padding-left: 0;
  display: flex; gap: 10px; align-items: baseline;
}
.worked-step::marker { content: ""; }   /* remove default "1." */
.worked-step-label {
  flex: 0 0 auto; font-weight: 800; color: #2d6cdf;
  min-width: 54px;
}
.worked-step-body { flex: 1 1 auto; }
/* 051b (1): the lesson plan's quick-check - its own line above the steps, never a step */
.worked-quickcheck {
  display: flex; gap: 10px; align-items: baseline;
  margin: 0 0 12px; padding: 8px 12px;
  border-left: 4px solid #b8860b; background: #fffaf0; border-radius: 6px;
  font-size: 15px; line-height: 1.5; color: #24364a;
}
.worked-quickcheck-label { flex: 0 0 auto; font-weight: 800; color: #b8860b; }
.worked-quickcheck-body { flex: 1 1 auto; }

/* Diya live figure in the Worked Example panel */
.worked-figure-slot, .worked-graph-slot { margin: 6px 0 14px; display: flex; flex-direction: column; align-items: center; }
.worked-figure-slot:empty, .worked-graph-slot:empty { margin: 0; }
/* Board Drawing Contract v1 primitives */
/* Visually identical to .fig-label. It exists to carry PRIORITY in the
   layout pass: a measure line's label is bound to its line and moves last,
   free text is bound to nothing and moves first. */
.fig-dim-label { font: 600 12px system-ui, sans-serif; fill: #44566a; }
.fig-dim { stroke: #44566a; stroke-width: 1.4; }
.fig-dim-ext { stroke: #9aa8b6; stroke-width: 1; }
.fig-dim-head { fill: #44566a; }
.fig-right-angle { fill: none; stroke: #44566a; stroke-width: 1.4; }
.fig-surface { stroke: #44566a; stroke-width: 2; }
.fig-hatch { stroke: #7f8c99; stroke-width: 1; }
.fig-curved-arrow { fill: none; stroke: #b45309; stroke-width: 2; }
.fig-curved-arrow-head { fill: #b45309; }
.worked-figure-svg { width: 100%; max-width: 560px; height: auto; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; }
.worked-figure-caption { font-size: 13px; color: #5a6b7e; margin-top: 6px; font-style: italic; }
.fig-grid { stroke: #eef2f7; stroke-width: 1; }
.fig-axis { stroke: #24364a; stroke-width: 1.6; }
.fig-axis-label { font: 600 12px system-ui, sans-serif; fill: #24364a; }
/* the numbers ON the axes — coordinate geometry is unreadable without them */
.fig-axis-num { font: 500 11px system-ui, sans-serif; fill: #6b7a8c; }
.fig-helper { stroke: #2d6cdf; stroke-width: 1.4; stroke-dasharray: 6 4; }
.fig-mirror { stroke: #8a5cf6; stroke-width: 2; }
.fig-seg { stroke: #2d6cdf; stroke-width: 2.2; }
.fig-seg-head { fill: #2d6cdf; stroke: none; }
.fig-leg { stroke: #f59e0b; stroke-width: 2.2; }
.fig-hyp { stroke: #16a34a; stroke-width: 2.4; }
.fig-quad { fill: #2d6cdf; opacity: 0.06; }
.fig-point { fill: #16a34a; stroke: #fff; stroke-width: 1.5; }
.fig-point-image { fill: #8a5cf6; stroke: #fff; stroke-width: 1.5; }
.fig-point-label { font: 600 11px system-ui, sans-serif; fill: #24364a; }
.fig-label { font: 600 12px system-ui, sans-serif; fill: #44566a; }

/* Attachment send status */
.attachment-preview { margin-top: 8px; font-size: 13px; color: #2d6cdf; }
.attachment-preview.attach-error { color: #c0392b; }

/* "Diya is working…" heartbeat in the Worked Example panel */
.diya-working { display: flex; align-items: center; gap: 10px; padding: 14px 4px; color: #2d6cdf; font-size: 14px; }
.diya-working-dots { display: inline-flex; gap: 4px; }
.diya-working-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2d6cdf; display: inline-block; opacity: 0.35; animation: diyaWorkingPulse 1s infinite ease-in-out; }
.diya-working-dots i:nth-child(2) { animation-delay: 0.18s; }
.diya-working-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes diyaWorkingPulse { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Fix: worked-example content must render as a full-height, scrollable block,
   not a vertically-centered flex item (which clipped long answers). */
.interaction-panel:has(.worked-response) {
  display: block;
  align-items: stretch;
  overflow: visible;
}
.canvas-card.content-mode-card {
  overflow-y: auto;            /* allow long worked answers to scroll */
}
.worked-response { padding-bottom: 24px; }   /* breathing room at the end */

/* Light markdown-ish formatting for n8n answers so **bold**, lists, and line
   breaks render readably instead of as literal characters. */
.wr-body strong, .worked-step strong { font-weight: 700; color: #1a2b3c; }
.wr-body em { font-style: italic; }
.wr-body ul, .wr-body ol { margin: 6px 0 6px 20px; padding: 0; }
.wr-body li { margin: 3px 0; }
.wr-body p { margin: 0 0 8px; }
.wr-body p:last-child { margin-bottom: 0; }

/* Phase 2 figure primitives */
.fig-polygon { fill: rgba(45,108,223,0.06); stroke: #2d6cdf; stroke-width: 2.2; stroke-linejoin: round; }
.fig-circle { fill: rgba(22,163,74,0.05); stroke: #16a34a; stroke-width: 2.2; }
.fig-angle-arc { fill: none; stroke: #f59e0b; stroke-width: 2; }
.fig-arc { fill: none; stroke: #8a5cf6; stroke-width: 2.2; }
.fig-sector { fill: rgba(138,92,246,0.12); stroke: #8a5cf6; stroke-width: 2; }

/* =========================
   FORMULAS PANEL CLEANUP
   ========================= */


.formula-bank-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 0;
}

.formula-bank-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #10233f;
  margin: 0 0 20px 0;
}

.formula-bank-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formula-bank-item {
  background: #f4f7fb;
  border: 1px solid #d9e3f0;
  border-radius: 14px;
  padding: 14px 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #20324d;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(16, 35, 63, 0.04);
}
.brand-wordmark {
  font-family: Inter, Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.brand-wordmark .brand-karka {
  color:  #ffffff;
}

.brand-wordmark .brand-labs {
  color: #7d8f5f;
  font-weight: 700;
}

.brand-wordmark sup {
  font-size: 8px;
  font-weight: 700;
  margin-left: 3px;
  position: relative;
  top: -0.9em;
  color: #7d8f5f;
  letter-spacing: 0;
}

.chapter-pill {
  display: none !important;
}

/* ============================================================
   KARKA FINAL SIDEBAR FIX
   Structure:
   #appShell = left sidebar + main lesson
   .content-grid = centre panel + Diya panel
   ============================================================ */

:root {
  --karka-sidebar-width: 320px;
  --karka-diya-width: 360px;
  --karka-content-gap: 18px;
}

/* Prevent horizontal page drift */
html,
body {
  overflow-x: hidden;
}

/* OUTER GRID: sidebar + lesson */
html body #appShell.app-shell {
  display: grid !important;
  grid-template-columns: var(--karka-sidebar-width) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
}

/* Sidebar fixed width in expanded state */
html body #appShell.app-shell > aside.sidebar {
  width: var(--karka-sidebar-width) !important;
  min-width: var(--karka-sidebar-width) !important;
  max-width: var(--karka-sidebar-width) !important;
  box-sizing: border-box !important;
}

/* Main lesson column must take remaining width */
html body #appShell.app-shell > main.lesson {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* INNER GRID: centre learning card + Diya panel */
html body #appShell.app-shell .content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--karka-diya-width) !important;
  gap: var(--karka-content-gap) !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Prevent cards from forcing horizontal overflow */
html body #appShell.app-shell .canvas-card,
html body #appShell.app-shell .explain-card {
  min-width: 0 !important;
  max-width: none !important;
}

/* Student card: match chapter boxes.
   Sidebar already has 20px padding, so no side margin is needed. */
html body #appShell.app-shell > aside.sidebar > .student-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 18px 0 20px 0 !important;
  padding: 18px 22px !important;

  box-sizing: border-box !important;
  align-self: stretch !important;
}

/* Hide chapter pill below student card */
html body #appShell.app-shell > aside.sidebar > .chapter-pill {
  display: none !important;
}

/* Floating sidebar collapse arrow */
html body #collapseSidebarBtn.collapse-btn {
  position: fixed !important;
  top: 50% !important;
  left: calc(var(--karka-sidebar-width) - 16px) !important;
  transform: translateY(-50%) !important;

  width: 32px !important;
  height: 58px !important;
  min-width: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22) !important;

  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  cursor: pointer !important;
  z-index: 9999 !important;
}

html body #collapseSidebarBtn.collapse-btn:hover {
  background: #ffffff !important;
}

html body #sidebarCollapseIcon {
  display: block !important;
  line-height: 1 !important;
}

/* COLLAPSED STATE:
   sidebar column becomes 0;
   lesson gets the released width */
html body #appShell.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) !important;
}

/* Fully hide sidebar panel */
html body #appShell.app-shell.sidebar-collapsed > aside.sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/* Hide sidebar contents except collapse button */
html body #appShell.app-shell.sidebar-collapsed > aside.sidebar > :not(#collapseSidebarBtn) {
  display: none !important;
}

/* Move arrow to far left when collapsed */
html body #appShell.app-shell.sidebar-collapsed #collapseSidebarBtn.collapse-btn {
  left: 14px !important;
}

/* Keep centre + Diya layout stable after sidebar collapse */
html body #appShell.app-shell.sidebar-collapsed .content-grid {
  grid-template-columns: minmax(0, 1fr) var(--karka-diya-width) !important;
}

/* Right panel collapse button position */
html body #appShell.app-shell .right-panel-toggle {
  right: calc(var(--karka-diya-width) + var(--karka-content-gap) - 14px) !important;
}

/* If Diya panel itself is collapsed */
/* When Diya/right panel is collapsed, centre panel gets full inner width */
html body #appShell.app-shell .content-grid.right-collapsed {
  grid-template-columns: minmax(0, 1fr) 0 !important;
  gap: 0 !important;
}

/* Fully hide Diya panel */
html body #appShell.app-shell .content-grid.right-collapsed #rightPanel {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Keep the right-panel toggle visible at the far right */
html body #appShell.app-shell .content-grid.right-collapsed .right-panel-toggle {
  right: 14px !important;
}

/* ============================================================
   FIXED LEFT SIDEBAR WHILE LESSON CONTENT SCROLLS
   Add this at the very bottom of styles.css
   ============================================================ */

/* Lock the app to viewport height */
html,
body {
  height: 100%;
}

/* Prevent the whole browser page from moving horizontally */
body {
  overflow-x: hidden;
}

/* Main shell stays viewport-height */
html body #appShell.app-shell {
  min-height: 100vh !important;
}

/* Sidebar remains fixed/sticky in place */
html body #appShell.app-shell > aside.sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  overflow: hidden !important;
  z-index: 50 !important;
}

/* Only the chapter/subtopic list scrolls inside the sidebar */
html body #appShell.app-shell > aside.sidebar .concept-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

/* Keep logout fixed at bottom of sidebar */
html body #appShell.app-shell > aside.sidebar .logout-btn {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* Lesson area can scroll normally */
html body #appShell.app-shell > main.lesson {
  min-height: 100vh !important;
}

/* ============================================================
   FINAL TOGGLE BUTTON POSITION + SIZE REFINEMENT
   1. Right panel button sits exactly on left edge of Diya panel
   2. Left sidebar collapse button made smaller / cleaner
   ============================================================ */

/* Make content grid the positioning reference for the right panel toggle */
html body #appShell.app-shell .content-grid {
  position: relative !important;
}

/* Right panel collapse button:
   sits exactly on the left edge of the Diya/right panel */
html body #appShell.app-shell .right-panel-toggle {
  position: absolute !important;
  top: 50% !important;

  /*
    Right panel width = --karka-diya-width.
    Button width = 32px.
    So right = panel width - half button width.
  */
  right: calc(var(--karka-diya-width) - 16px) !important;

  transform: translateY(-50%) !important;

  width: 32px !important;
  height: 58px !important;
  min-width: 32px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;

  color: #2563eb !important;
  font-size: 18px !important;
  font-weight: 800 !important;

  z-index: 80 !important;
}

/* ============================================================
   FINAL: MATCH LEFT + RIGHT COLLAPSE BUTTONS
   Same size, same vertical alignment, proper edge placement
   ============================================================ */

:root {
  --karka-toggle-w: 28px;
  --karka-toggle-h: 48px;
}

/* Shared toggle pill styling */
html body #collapseSidebarBtn.collapse-btn,
html body #appShell.app-shell .right-panel-toggle {
  width: var(--karka-toggle-w) !important;
  height: var(--karka-toggle-h) !important;
  min-width: var(--karka-toggle-w) !important;
  min-height: var(--karka-toggle-h) !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;

  color: #2563eb !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  z-index: 9999 !important;
}

/* Left sidebar button: fixed on right edge of left sidebar */
html body #collapseSidebarBtn.collapse-btn {
  position: fixed !important;
  top: 50% !important;
  left: calc(var(--karka-sidebar-width) - (var(--karka-toggle-w) / 2)) !important;
  transform: translateY(-50%) !important;
}

/* When left sidebar is collapsed, move left button to page edge */
html body #appShell.app-shell.sidebar-collapsed #collapseSidebarBtn.collapse-btn {
  left: 10px !important;
}

/* Right panel button: attach to left edge of Diya panel */
html body #appShell.app-shell .content-grid {
  position: relative !important;
}

html body #appShell.app-shell .right-panel-toggle {
  position: absolute !important;
  top: 50% !important;

  /*
    Diya panel width = --karka-diya-width.
    Button sits half over the panel edge.
  */
  right: calc(var(--karka-diya-width) - (var(--karka-toggle-w) / 2)) !important;

  transform: translateY(-50%) !important;
}

/* When Diya panel is collapsed, keep right button on far-right edge */
html body #appShell.app-shell .content-grid.right-collapsed .right-panel-toggle {
  right: 10px !important;
}

/* Normalise arrow icon inside both buttons */
html body #sidebarCollapseIcon,
html body .right-panel-toggle .rpt-chevron {
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
}

/* When right panel is collapsed, keep the right toggle at far-right edge */
html body #appShell.app-shell .content-grid.right-collapsed .right-panel-toggle {
  right: 14px !important;
}

/* Reduce the LEFT sidebar collapse button size */
html body #collapseSidebarBtn.collapse-btn {
  width: 28px !important;
  height: 48px !important;
  min-width: 28px !important;

  /*
    If sidebar width is 320px:
    button sits half-in / half-out of sidebar edge.
  */
  left: calc(var(--karka-sidebar-width) - 14px) !important;

  border-radius: 999px !important;
  font-size: 18px !important;
  padding: 0 !important;
}

/* When left sidebar is collapsed, keep the smaller button on the far-left edge */
html body #appShell.app-shell.sidebar-collapsed #collapseSidebarBtn.collapse-btn {
  left: 10px !important;
}

/* Slightly reduce arrow icon weight/position */
html body #sidebarCollapseIcon {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Practice-mode fix: keep toggle on-screen even when grid is tall.
   position:fixed measures `right` from the VIEWPORT edge, so the value must
   account for everything between the viewport's right edge and the Diya
   panel's left seam:
     - lesson right padding ............ 36px  (main.lesson padding: 32px 36px)
     - Diya panel width ................ var(--karka-diya-width)   (360px)
     - inner grid gap .................. var(--karka-content-gap)  (18px)
   then offset back by half the pill width to straddle the seam. */
html body #appShell.app-shell .right-panel-toggle {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: calc(36px + var(--karka-diya-width) + var(--karka-content-gap) - (var(--karka-toggle-w) / 2)) !important;
}

/* Collapsed Diya panel: pin toggle just inside the far-right edge.
   Still fixed, so this is measured from the viewport edge — sits at the
   lesson's right padding line. */
html body #appShell.app-shell .content-grid.right-collapsed .right-panel-toggle {
  right: calc(36px + 14px) !important;
}

/* Combined "figure + steps" view (Diya's showFigure): figure on the stage
   above, step-by-step solution in the interaction panel below — no toggling. */
body.karka-figure-with-steps .canvas-card #stage {
  display: block !important;          /* keep the figure visible */
  flex: 0 0 auto;
}
/* Shrink the figure ONLY once Diya has actually put steps below it.
   The unconditional shrink meant opening a figure from Practice showed a squat
   ~300px figure above an EMPTY bordered strip, with the Ask Diya box pulled up
   under it — the figure lost half its height to make room for nothing. Until a
   step exists the figure keeps the full #stage height, which in Practice's
   collapsed full-width layout is where it reads best. */
body.karka-figure-with-steps .canvas-card:has(.worked-steps li) #stage {
  height: clamp(300px, 42vh, 440px);  /* shrink so steps fit below */
}
/* Same condition for the steps panel's divider + scroll box: no border or
   padding while it is empty. */
body.karka-figure-with-steps .canvas-card:not(:has(.worked-steps li)) .interaction-panel {
  border-top: 0;
  padding-top: 0;
  min-height: 0;
}
body.karka-figure-with-steps .canvas-card .interaction-panel {
  display: block;
  align-items: stretch;
  max-height: 38vh;
  overflow-y: auto;
  padding-top: 10px;
  border-top: 1px solid var(--karka-line, #dbe5f1);
  margin-top: 8px;
}
body.karka-figure-with-steps .canvas-card.content-mode-card #stage {
  display: block !important;          /* defeat the content-mode hide rule */
}

.worked-figure-svg .fig-area-label  { font-weight:800; font-size:16px; fill:#17283d; }
.worked-figure-svg .fig-area-side   { font-weight:700; font-size:14px; fill:#60748a; }
.worked-figure-svg .fig-area-bracket{ stroke:#60748a; stroke-width:1.5; }

/* JSXGraph board for Diya's drawGraph (function/curve plotting) */
.karka-graph-box { width: 100%; max-width: 460px; height: 360px; margin: 4px auto 8px; border: 1px solid #e8eef6; border-radius: 14px; background: #fff; }

/* ============================================================================
   DIYA MIC — circular avatar mic in the dock.
   Ported from the Aarya dock in CBSEPhysics9 (.aarya-mic*) so the two tutors
   feel like one product: same 78px circle, same avatar-with-ring treatment,
   same four states driven by data-state, same reduced-motion escape.
   The PALETTE is Diya's own (--grad / --accent, blue-teal), not Aarya's
   green-gold — matching the app it lives in rather than copying the other one.
   Replaces the old full-width ".mic-btn.dock-mic" pill.
   ========================================================================== */
.diya-mic-wrap { display: flex; justify-content: center; margin: 2px 0 14px; }
.diya-mic {
  position: relative; width: 78px; height: 78px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 28%, #eaf1ff 0%, #9dc0f5 34%, #2d6cdf 68%, #00a77f 100%);
  box-shadow: 0 16px 36px rgba(45,108,223,.30), 0 6px 16px rgba(16,32,51,.22),
              inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 14px rgba(16,32,51,.20);
  display: grid; place-items: center;
  transition: transform .22s cubic-bezier(.2,.7,.3,1.4), box-shadow .22s ease;
}
.diya-mic:hover { transform: translateY(-3px) scale(1.04);
  box-shadow: 0 22px 48px rgba(45,108,223,.40), 0 8px 20px rgba(16,32,51,.26),
              inset 0 2px 0 rgba(255,255,255,.55), inset 0 -6px 14px rgba(16,32,51,.20); }
.diya-mic:active { transform: translateY(0) scale(.97); }
.diya-mic:focus-visible { outline: 3px solid #1f57c4; outline-offset: 4px; }
.diya-mic:disabled, .diya-mic.is-busy { cursor: default; }
.diya-mic-inner {
  position: absolute; inset: 6px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #eaf1ff, #cfe0fb); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.diya-mic-inner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.diya-mic-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 2rem; color: #1f57c4; }
.diya-mic-ring { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(45,108,223,.7); opacity: 0; }
.diya-mic[data-state="idle"] .diya-mic-ring { opacity: 1; animation: diyaMicIdle 2.4s ease-in-out infinite; }
@keyframes diyaMicIdle { 0%,100% { transform: scale(1); opacity: .7; border-color: rgba(45,108,223,.6); } 50% { transform: scale(1.16); opacity: 0; border-color: rgba(45,108,223,.1); } }
.diya-mic[data-state="connecting"] .diya-mic-ring { opacity: 1; border-color: transparent; border-top-color: #2d6cdf; border-right-color: #00a77f; animation: diyaMicSpin 1s linear infinite; }
@keyframes diyaMicSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.diya-mic[data-state="listening"]::before, .diya-mic[data-state="speaking"]::before {
  content: ""; position: absolute; inset: -13px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(45,108,223,0), rgba(45,108,223,.55), rgba(0,167,127,.5), rgba(45,108,223,0));
  filter: blur(7px); animation: diyaMicOrbit 4s linear infinite;
}
@keyframes diyaMicOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.diya-mic[data-state="listening"] .diya-mic-ring, .diya-mic[data-state="speaking"] .diya-mic-ring {
  opacity: 1; border-color: rgba(0,167,127,.6); animation: diyaMicActive 1.4s ease-in-out infinite;
}
@keyframes diyaMicActive { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.22); opacity: 0; } }
.diya-mic[data-state="speaking"] .diya-mic-inner { animation: diyaMicBreathe 1.1s ease-in-out infinite; }
@keyframes diyaMicBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.diya-mic-glyph { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,32,51,.55), rgba(16,32,51,0) 65%); opacity: 0; transition: opacity .2s ease; }
.diya-mic-glyph svg { width: 28px; height: 28px; fill: #f4f8ff; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.diya-mic:hover .diya-mic-glyph,
.diya-mic[data-state="listening"] .diya-mic-glyph,
.diya-mic[data-state="speaking"] .diya-mic-glyph { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .diya-mic-ring, .diya-mic[data-state="listening"]::before, .diya-mic[data-state="speaking"]::before,
  .diya-mic[data-state="speaking"] .diya-mic-inner { animation: none; }
}


/* ---------------------------------------------------------------------
   PANEL RESIZE HANDLES
   Thin drag strips on the inner edge of each panel. They sit inside the
   panel rather than in the gap, so they never widen the layout, and they
   are hidden when the panel is collapsed or the layout has stacked for a
   narrow screen — a drag handle on a collapsed panel would fight the
   collapse and leave the user with a width they cannot undo.
   --------------------------------------------------------------------- */
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 30;
  cursor: col-resize;
  background: transparent;
  border: 0;
  padding: 0;
  touch-action: none;
}

.resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: rgba(120, 150, 180, 0.28);
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
}

.resize-handle:hover::after,
.resize-handle:focus-visible::after,
.resize-handle[data-dragging]::after {
  opacity: 1;
  background: rgba(90, 170, 240, 0.85);
}

.resize-handle:focus-visible {
  outline: 2px solid rgba(90, 170, 240, 0.9);
  outline-offset: -2px;
}

.sidebar .resize-handle { right: 0; }

/* The dock handle's containing block is .content-grid, NOT .explain-card —
   `.explain-card { position: static }` is deliberate (see the toggle-pill block
   above) and must stay. So `left: 0` put this strip on the far LEFT edge of the
   canvas, 500px away from the panel it resizes. Anchor it to the seam from the
   right instead, off the same variable that sizes the panel. */
.explain-card .resize-handle {
  right: calc(var(--karka-diya-width, 360px) - 6px);
}

.app-shell.sidebar-collapsed .sidebar .resize-handle,
.content-grid.right-collapsed .explain-card .resize-handle,
.content-grid.focus-mode .explain-card .resize-handle {
  display: none;
}

@media (max-width: 1100px) {
  .resize-handle { display: none; }
}

/* ---------------------------------------------------------------------
   HOLD BADGE — shown while the student has asked Diya to pause.
   Ported from CBSEPhysics9 so both tutors signal a hold identically.
   Fixed-position on purpose: it must not shift .canvas-card or the stage.
   The Resume button is the escape hatch if the agent never calls
   resumeFromHold, so a held session can never be stranded.
   ------------------------------------------------------------------- */
.karka-hold-indicator {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(17, 24, 39, 0.92); color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.karka-hold-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; flex: 0 0 auto;
  animation: karkaHoldPulse 1.6s ease-out infinite;
}
@keyframes karkaHoldPulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.karka-hold-resume {
  border: 0; border-radius: 999px; padding: 4px 12px; cursor: pointer;
  background: #fff; color: #111827; font-weight: 700; font-size: 13px;
}
.karka-hold-resume:hover { background: #e5e7eb; }
@media (prefers-reduced-motion: reduce) { .karka-hold-dot { animation: none; } }

/* PRACTICE-TAB GATING BY SESSION MODE
 *
 * "Show Answer" and "Send to Diya" are not for a student mid-question. The point
 * is not to tempt them while they are working; "Show Hint" stays in both modes,
 * because the exercise data calls it "a nudge, not the answer" and that is the
 * help a stuck student should still have.
 *
 * SAME SELECTOR AS THE SCIENCE APP, deliberately. This app has no classroom mode
 * today - nothing ever sets .karka-mode-classroom - so the effect is simply
 * "always hidden". Writing it as :not() rather than a bare rule means the day a
 * teacher mode does arrive, it behaves like Science without anyone re-deriving
 * the intent.
 *
 * This is visibility, not access control: the answer text is still rendered into
 * a .hidden div by the card template, so devtools reaches it either way. That is
 * the requirement - do not tempt, not prevent.
 */
body:not(.karka-mode-classroom) .show-answer-btn,
body:not(.karka-mode-classroom) .send-to-diya-btn {
  display: none;
}

/* The Ask box has no place on the Karka Board or in Practice: the board is the
   answer being built, Practice is the questions — and a box that stays while
   the panels around it collapse is the "layout keeps changing" the owner saw.
   Mode arrives on <body data-karka-mode> from setModeButtonActive. */
body[data-karka-mode="worked"] .chat-box,
body[data-karka-mode="practice"] .chat-box { display: none; }

/* ---- GANITA MANJARI PART 2: the scene timeline (style note, ruled 2026-09-29),
   in the HOUSE style (feedback 2026-09-30): the timeline buttons are the app's
   white "ghost" pills, like Previous / Pause / Next; the scene's own control
   and a real-world slider's buttons keep the app's gradient primary. */
.interaction-panel .p2-controls { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.interaction-panel .p2-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.interaction-panel .p2-row.p2-timeline button.p2-tl {
  background: #ffffff; color: var(--ink, #102033); border: 1px solid var(--line, #dce5ef);
  box-shadow: none; border-radius: 999px; padding: 8px 16px; font-weight: 700;
}
.interaction-panel .p2-row.p2-timeline button.p2-tl:hover { background: var(--bg-2, #eef4fb); }
.interaction-panel .p2-control.is-on { outline: 3px solid #f5a623; outline-offset: 1px; }
.interaction-panel .p2-control:disabled { opacity: .45; cursor: default; }
.interaction-panel input.p2-scrub, .interaction-panel input.p2-rw-slider {
  flex: 1 1 160px; min-width: 120px; padding: 0; border: none; background: transparent; accent-color: #2d6cdf;
}
@media (max-width: 640px) {
  .interaction-panel .p2-row.p2-timeline input.p2-scrub { order: 10; flex-basis: 100%; }
}

/* ============================================================
   THE ROOM VIEW (relay 050 + 050a, 2026-10-02) - classroom launches only
   ------------------------------------------------------------
   Every rule here is scoped under body.room-view, which app.js sets from the
   durable classroom launch and nothing else (karkaRoomViewSync), or under
   .room-strip, which is only ever built in a classroom. A 1:1 page matches
   none of them. (tests/room-view.test.mjs pins the scoping;
   review/browser-room-view.mjs the 1:1 pixels.)

   Sized for a 1080p panel read from 5-6 m: body text >= 32 px, titles >= 48 px
   at 1920 x 1080, on viewport units so a 4K panel scales up instead of keeping
   the same pixels. The stage is everything above the strip (~85% of the
   height) and the page itself never scrolls. The chat column, Ask Diya, the
   input, the transcript, the sidebar and the tabs are hidden, not removed:
   Diya's tools still press them.
   ============================================================ */
body.room-view {
  --room-body: clamp(32px, 1.667vw, 72px);
  --room-title: clamp(48px, 2.5vw, 108px);
  --room-hit: clamp(64px, 6.5vh, 140px);
  --room-ink: #0b1626;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}
/* nothing - not a figure's scrollIntoView, not a focus - may scroll the viewport */
html:has(> body.room-view) { overflow: hidden; height: 100%; }
/* The shell's two grids are pinned with `html body #appShell.app-shell ...
   !important` further up (the sidebar + lesson grid, the card + Diya grid);
   the room view outranks them with the same prefix and its own class. */
html body.room-view #appShell.app-shell {
  display: block !important;
  grid-template-columns: none !important;
  flex: 1 1 auto;
  min-height: 0 !important;   /* the "viewport-height shell" lock, which would push the strip off the screen */
  height: auto;
}
html body.room-view #appShell.app-shell > aside.sidebar,
html body.room-view #appShell.app-shell .topbar,
html body.room-view #appShell.app-shell .mode-tabs,
html body.room-view #appShell.app-shell .chat-box,
html body.room-view #appShell.app-shell #toggleRightPanelBtn,
html body.room-view #appShell.app-shell #rightPanel,
html body.room-view #appShell.app-shell .karka-hold-indicator {
  display: none !important;
}
html body.room-view #appShell.app-shell > main.lesson,
html body.room-view #appShell.app-shell .content-grid {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  height: 100%;
  min-height: 0 !important;
  padding: 0;
  margin: 0;
}
html body.room-view #appShell.app-shell .canvas-card,
html body.room-view #appShell.app-shell .canvas-card.content-mode-card {
  position: relative;
  height: 100%;
  min-height: 0 !important;
  padding: 1vh 1.5vw;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
  /* THE STAGE'S GRID (050c): the scene, and beside it the rail of notes and
     legends; the formula band under both; the board spans the lot. Nothing is
     positioned over the canvas - the canvas is what the grid leaves it. */
  display: grid;
  /* 050f: the rail is 30% of the stage (was 20vw) so its 32 px lines wrap less;
     the scene takes the rest */
  grid-template-columns: minmax(0, 1fr) 30%;
  grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: 24px;
  row-gap: 8px;
  /* 050f: CLIP, not hidden. The scene is fitted to its ink (app.js
     karkaRoomFitScene) and its frame's empty margin runs past the cell; clip
     cuts it at the card exactly as hidden did, but the card is no scroll
     container, so nothing - a wheel, a focus, a script - can ever scroll it */
  overflow: clip;
}
html body.room-view #appShell.app-shell .canvas-card:not(:has(> .room-rail:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}
/* 050f: no rail (a no-legend scene) - the scene takes the full width, centred */
html body.room-view #appShell.app-shell .canvas-card:not(:has(> .room-rail:not([hidden]))) #stage { justify-self: center; }

/* THE SCENE: the SVG stage takes its cell. Its own text and strokes scale with
   it (viewBox), and the 3D canvas follows the stage's box. */
body.room-view #stage {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  height: 100% !important;
  /* 050f: HEIGHT-LED, ASPECT KEPT, AGAINST THE RAIL. width:auto takes the
     scene's own viewBox ratio from its height, so the drawing fills its box
     instead of sitting letterboxed in the middle of a wide cell - and the box
     stands against the rail (the gap is the grid's 24 px). A cell too narrow
     for that width caps it, and the scene letterboxes top and bottom instead.
     With no rail the scene is centred (the rule above). */
  width: auto;
  max-width: 100%;
  justify-self: end;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}
/* the rail, the band and the worksheet page exist only in a classroom launch
   and show only in the room view - never in Desk view's full app */
.room-rail, .room-formula-band, .room-worksheet { display: none; }
/* the callouts the rail now carries are taken off the canvas */
body.room-view #stage [data-room-callout],
body.room-view #stage [data-room-part] { display: none; }
body.room-view .room-rail {
  grid-column: 2;
  grid-row: 1;
  width: auto;   /* 050f: its column's 30% (was 20vw) */
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
  font: 600 var(--room-body)/1.25 Inter, system-ui, sans-serif;
  color: var(--room-ink);
}
body.room-view .room-rail[hidden],
body.room-view .canvas-card:is(.content-mode-card, .no-visual) .room-rail { display: none; }
body.room-view .room-callout {
  border: 3px solid #2d6cdf;
  border-radius: 16px;
  padding: 0.35em 0.6em;
  background: #ffffff;
}
body.room-view .room-callout.is-rule { background: #fff7e6; }
body.room-view .room-callout b { display: block; font-size: var(--room-body); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; }
body.room-view .room-callout p { margin: 0.15em 0 0; font-size: var(--room-body); }
body.room-view .room-legend { display: flex; align-items: center; gap: 0.4em; font-size: var(--room-body); }
body.room-view .room-legend i { flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; }
/* THE FORMULA BAND (050c): never truncated - it wraps, and the scene above
   gives up the height */
body.room-view .room-formula-band {
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 0.25em 0.6em;
  border-radius: 12px;
  background: #fff7e6;
  border: 2px solid #f5a623;
  color: #0f2742;
  font: 800 var(--room-body)/1.25 Inter, system-ui, sans-serif;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
body.room-view .room-formula-band[hidden] { display: none; }
/* THE WORKSHEET PAGE (050c), over the stage while it is open, with its Close */
body.room-view .room-worksheet {
  position: absolute;
  inset: 1vh 1.5vw;
  z-index: 5;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 3px solid #0f2742;
  border-radius: 16px;
  padding: 10px;
}
body.room-view .room-worksheet[hidden] { display: none; }
body.room-view .room-worksheet img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; }
body.room-view .room-worksheet figcaption {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-top: 8px;
  font: 700 var(--room-body)/1.2 Inter, system-ui, sans-serif; color: #0f2742;
}
body.room-view .room-worksheet-close {
  min-height: var(--room-hit); min-width: var(--room-hit); padding: 0 0.8em; border-radius: 16px;
  border: 3px solid #0f2742; background: #0f2742; color: #ffffff; font: 800 var(--room-body)/1 Inter, system-ui, sans-serif; cursor: pointer;
}
/* DESK VIEW (050c): the full app is back; only the way back is added, and the
   dock's mic is hidden - in a classroom it would start the 1:1 agent */
.room-return { display: none; }
body.room-desk .room-return {
  display: block;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  padding: 14px 22px;
  border-radius: 999px;
  border: 0;
  background: #0f2742;
  color: #ffffff;
  font: 800 18px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(15, 39, 66, 0.35);
  cursor: pointer;
}
body.room-desk #voiceMicBtn { display: none; }
/* the scene's timeline row moves to the strip; its buttons stay in the DOM,
   pressable by Diya (pressControl) and by the strip */
body.room-view .canvas-card:not(.content-mode-card):not(.no-visual) #interactionPanel {
  display: none;
}
/* the house "soft" slate is a pale grey on a projector: the room reads it in ink */
body.room-view #stage text[fill="#60748a"],
body.room-view #stage tspan[fill="#60748a"] {
  fill: #24364a;
}

/* THE BOARD, THE QUESTION, THE QUICK-CHECK: everything the class reads. The
   pane is the card's full height; anything taller scrolls INSIDE it. */
body.room-view #interactionPanel {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  border: 0;
  color: var(--room-ink);
  line-height: 1.3;
}
body.room-view #interactionPanel *:not(svg, svg *) {
  font-size: var(--room-body);
  line-height: 1.3;
}
body.room-view #interactionPanel :is(h1, h2) {
  font-size: var(--room-title);
  line-height: 1.15;
  color: var(--room-ink);
  margin: 0 0 0.15em;
}
body.room-view .exercise-list {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.room-view .worked-response-head p,
body.room-view .exercise-header p { color: #24364a; margin: 0; }
/* 050d: the board's head is one line - its title and its "follow along" side by side */
body.room-view .worked-response-head {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  white-space: nowrap;
  overflow: hidden;
}
body.room-view #interactionPanel .worked-response-head h2 { margin: 0; }

/* THE BOARD FOLLOWS HER (050a §2f(a)): the board is exactly the pane. The
   head on top; under it the figure, scaled to fit what is left, and the steps
   in their own column that scrolls - so the figure never leaves the screen and
   the latest step is always on it. No figure: the steps take the width. No
   steps: the figure does. */
body.room-view #interactionPanel:has(> .worked-response) { overflow: hidden; }
body.room-view .worked-response {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.room-view .worked-response > * { min-height: 0; grid-column: 1 / -1; }
body.room-view .worked-response-head { grid-row: 1; }
body.room-view .worked-response > .diya-working { grid-row: 2; }
body.room-view .worked-figure-slot,
body.room-view .worked-graph-slot,
body.room-view .worked-steps { grid-row: 3; }
body.room-view .worked-figure-slot:empty,
body.room-view .worked-graph-slot:empty { display: none; }
/* FIGURE + STEPS (050d): two columns - the figure 45% of the stage beside four or
   more steps, 53% beside three or fewer (the steps then still start inside 55% of
   the width, 050c's rule) - the figure filling its column height-led
   (karkaRoomFitFigure), its ink against the steps, 28 px between.
   050h: these shares are only the first paint. karkaRoomFitFigure then sets the
   columns inline: the figure's column is the figure (its ink + 24 px, capped at
   45%), left-aligned at the stage edge, and the steps start 40 px after its ink
   and take the rest - a tall cone gives the steps ~65%. */
body.room-view .worked-response:has(.worked-figure-slot > svg, .worked-graph-slot > *):has(.worked-steps li) {
  grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  column-gap: 28px;
}
body.room-view .worked-response:has(.worked-figure-slot > svg, .worked-graph-slot > *):has(.worked-steps li:nth-child(4)) {
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}
/* the steps beside a figure: at least 36 px, wrapping */
body.room-view #interactionPanel .worked-response:has(.worked-figure-slot > svg, .worked-graph-slot > *) :is(.worked-step, .worked-step *) {
  font-size: clamp(36px, 1.875vw, 80px);
  white-space: normal;
  overflow-wrap: anywhere;
}
body.room-view .worked-response:has(.worked-steps li) .worked-figure-svg[data-room-fit] { flex: none; max-width: none; }
/* a fitted figure is placed from the left (its empty margin pulled out of view
   by karkaRoomFitFigure); its caption stays centred under the ink */
body.room-view .worked-figure-slot:has(> svg[data-room-fit]) { align-items: flex-start; width: 100%; }
body.room-view .worked-figure-slot:has(> svg[data-room-fit]) .worked-figure-caption { align-self: center; }
body.room-view .worked-response:has(.worked-steps li) .worked-figure-slot,
body.room-view .worked-response:has(.worked-steps li) .worked-graph-slot { grid-column: 1; }
body.room-view .worked-response:has(.worked-figure-slot > svg, .worked-graph-slot > *) .worked-steps { grid-column: 2; }
body.room-view .worked-response:not(:has(.worked-steps li)) .worked-steps { display: none; }
body.room-view .worked-figure-slot,
body.room-view .worked-graph-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.2em 0 0;
  height: 100%;
  overflow: hidden;
}
/* the board lane's figure at a room's scale: the same SVG and the same fit,
   drawn into the space left (viewBox, meet), so labels and strokes grow with it */
body.room-view .worked-figure-svg {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  height: auto;
  border: 0;
}
body.room-view .worked-figure-caption { flex: none; color: #24364a; font-style: normal; font-weight: 700; margin-top: 0.15em; }
body.room-view .worked-figure-svg .fig-axis-num { fill: #24364a; }
body.room-view .worked-figure-svg .fig-dim-ext { stroke: #5b6b7b; }
body.room-view .worked-steps {
  height: 100%;
  overflow-y: auto;
  margin: 0.2em 0 0;
  padding: 0;
}
body.room-view .worked-step { margin: 0 0 0.35em; color: var(--room-ink); }
/* 051b (1): the quick-check line in the room: row 2, above the figure and the steps */
body.room-view .worked-response > .worked-quickcheck { grid-row: 2; margin: 0.2em 0 0.4em; font-size: clamp(30px, 1.6vw, 64px); color: var(--room-ink); }
body.room-view .worked-step-label { color: #1d4ed8; font-weight: 800; margin-right: 0.4em; }
/* STEPS ONLY, NO FIGURE (050b): the working is the whole board - step type at
   title size, the block centred in the stage. Auto margins centre it while it
   fits and fall to 0 when it does not, so a long working still scrolls from
   its first step and the follow still lands the newest at the bottom. */
body.room-view .worked-response:not(:has(.worked-figure-slot > svg, .worked-graph-slot > *)) .worked-steps {
  display: flex;
  flex-direction: column;
}
body.room-view .worked-response:not(:has(.worked-figure-slot > svg, .worked-graph-slot > *)) .worked-steps > li:first-child { margin-top: auto; }
body.room-view .worked-response:not(:has(.worked-figure-slot > svg, .worked-graph-slot > *)) .worked-steps > li:last-child { margin-bottom: auto; }
body.room-view #interactionPanel .worked-response:not(:has(.worked-figure-slot > svg, .worked-graph-slot > *)) :is(.worked-step, .worked-step *) {
  font-size: var(--room-title);
  line-height: 1.25;
}

/* the quick-check: four options fit the stage, two by two, no scrolling */
body.room-view .exercise-card { padding: 0.6em 0.8em; border-width: 2px; }
body.room-view .exercise-question { color: var(--room-ink); font-weight: 700; margin-bottom: 0.5em; }
body.room-view .mcq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em 0.6em; }
body.room-view .mcq-option-btn {
  min-height: var(--room-hit);
  padding: 0.2em 0.6em;
  border-radius: 16px;
  text-align: left;
  font-weight: 700;
}

/* THE STRIP: one band along the bottom, for the teacher. */
.room-strip { display: none; }
/* ONE ROW WHEN IT FITS (050b): the step and formula on the left, the controls
   on the right; only when they do not fit do the controls wrap under - every
   row the strip saves goes to the stage, and the scene scales with it. */
body.room-view .room-strip {
  flex: none;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 8px;
  padding: 10px 1.5vw 12px;
  background: #0f2742;
  color: #ffffff;
  font: 700 var(--room-body)/1.2 Inter, system-ui, sans-serif;
}
body.room-view .room-strip-info {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1.2em;
  min-width: 0;
  white-space: nowrap;
}
body.room-view .room-strip-info > * { font-size: var(--room-body); }
/* THE "WHERE" LABEL (050d): the folded pickers - "Ch 14 · 4. Cones" - tap to open */
body.room-view .room-strip-info > .room-where {
  min-height: var(--room-hit);
  padding: 0 0.5em;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  background: transparent;
  color: #ffffff;
  font: 800 var(--room-body)/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
body.room-view .room-strip-info > .room-where[aria-expanded="true"] { background: #f5a623; border-color: #f5a623; color: #111827; }
/* the place on its first line, the step on its second - one control, one row */
body.room-view .room-strip-info > .room-where {
  display: block;
  max-width: 32vw;
  padding: 3px 0.5em;
  line-height: 1.05;
  text-align: left;
  white-space: normal;
}
/* one flowing text - "Ch 1 · 7. Quadrants and Sign Patterns · Step 3 of 3" - that
   wraps inside the label, so a long name takes two lines, not the strip's width */
body.room-view .room-where > span { font-size: var(--room-body); }
body.room-view .room-where-step { font-weight: 700; opacity: 0.9; }
body.room-view .room-where-step:not([hidden])::before { content: " · "; }
/* THE VIEW MENU (050d): caption, full screen and Desk view, one button on the
   strip, its three items stacked above it while open */
body.room-view .room-view-menu-wrap { position: relative; margin-left: auto; display: inline-flex; }
body.room-view .room-view-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #0f2742;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 20;
}
body.room-view .room-view-menu button { white-space: nowrap; }
body.room-view .room-strip-controls [data-room="view"][aria-expanded="true"] { background: #f5a623; border-color: #f5a623; color: #111827; }
/* THE STRIP STEPS ASIDE (050d): out of the layout - the stage takes the height -
   and slid off the bottom; back in the layout on the frame it is needed */
body.room-view .room-strip { transition: transform 120ms ease-out; }
body.room-view.room-strip-away .room-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform 220ms ease-in;
  pointer-events: none;
}
body.room-view .room-strip-info:not(:has(> :not([hidden]):not(:empty))) { display: none; }
body.room-view .room-strip-step { flex: none; }
/* nothing on the strip is cut with an ellipsis (050c): a message wraps */
body.room-view .room-strip-note { min-width: 0; white-space: normal; color: #fecaca; }
body.room-view .room-strip-info > :is(.room-strip-held, .room-strip-dropped) {
  flex: none;
  font-size: var(--room-title);
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0 0.4em;
  border-radius: 12px;
  background: #f5a623;
  color: #111827;
}
body.room-view .room-strip-info > .room-strip-dropped { background: #dc2626; color: #ffffff; }
/* 062 (1): the mic meter - small, always on the strip; the check before the lesson; the warning */
body.room-view .room-mic { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; pointer-events: none; }
body.room-view .room-mic-bar { display: block; height: 100%; width: 0; background: #22c55e; transition: width 120ms linear; }
body.room-view .room-mic-check { flex: none; color: #fde68a; white-space: normal; }
body.room-view .room-mic-warn { flex: none; padding: 0 0.4em; border-radius: 12px; background: #dc2626; color: #ffffff; font-weight: 800; white-space: normal; }
/* 071 (5): a small text link, never a button sized like Start lesson */
body.room-view .room-strip-controls .room-mic-skip,
body.room-view .room-strip-controls .room-mic-skip:hover {
  min-height: 0; padding: 0 0.2em; border: 0; border-radius: 0; background: none;
  color: #cbd5e1; font: 600 calc(var(--room-body) * 0.6)/1.2 Inter, system-ui, sans-serif;
  text-decoration: underline; text-underline-offset: 2px; box-shadow: none;
}
.room-device-banner { display: none; }
body.room-view .room-device-banner:not([hidden]) {
  display: flex; align-items: center; gap: 0.8em;
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 0.35em 0.9em; border-radius: 14px; background: #dc2626; color: #ffffff;
  font: 800 var(--room-body)/1.2 Inter, system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
body.room-view .room-device-banner button { font: inherit; padding: 0.1em 0.7em; border: 3px solid #ffffff; border-radius: 10px; background: transparent; color: #ffffff; cursor: pointer; }
body.room-view .room-strip [hidden] { display: none !important; }
body.room-view .room-strip-controls {
  flex: 0 1 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
body.room-view .room-strip-controls :is(button, select) {
  min-height: var(--room-hit);
  min-width: var(--room-hit);
  padding: 0 0.6em;
  border: 3px solid #ffffff;
  border-radius: 16px;
  background: #ffffff;
  color: #0f2742;
  font: 800 var(--room-body)/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
/* THE PICKERS (050c): chapter and subtopic, at the right of the info row */
body.room-view .room-strip-pickers { display: flex; gap: 14px; margin-left: auto; min-width: 0; }
body.room-view .room-strip-pickers select {
  min-height: var(--room-hit);
  max-width: 26vw;
  padding: 0 0.4em;
  border: 3px solid #ffffff;
  border-radius: 16px;
  background: #ffffff;
  color: #0f2742;
  font: 800 var(--room-body)/1 Inter, system-ui, sans-serif;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* the board and the scene together (karka-figure-with-steps): one above the other */
body.room-view.karka-figure-with-steps #interactionPanel { grid-row: 2; }
body.room-view .room-strip-controls button:hover { background: #e8eef6; }
body.room-view .room-strip-controls button[aria-pressed="true"] { background: #f5a623; border-color: #f5a623; color: #111827; }
body.room-view .room-strip-controls button:disabled { opacity: 0.45; cursor: default; }
/* START LESSON (050a §2e): the biggest control on the strip until the voice is live */
body.room-view .room-strip-controls .room-start,
body.room-view .room-strip-controls .room-start:disabled {
  min-height: calc(var(--room-hit) * 1.35);
  padding: 0 1em;
  font-size: var(--room-title);
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  opacity: 1;
}
body.room-view .room-strip-controls .room-start:hover { background: #15803d; }
/* before the lesson, after a drop and while ending, the strip is the lesson's
   one button (Start lesson / Reconnect) with Previous / Next, so the stage
   keeps its height. The scene and caption controls come with the voice. */
body.room-view:not([data-room-lesson="live"]) .room-strip-controls :is([data-room="play"], [data-room="realworld"], [data-room="caption"], [data-room="fullscreen"]) {
  display: none;
}
/* while held, Resume needs the room: the worksheet and the caption wait */
body.room-view.room-held .room-strip-controls :is([data-room="worksheet"], [data-room="caption"]) { display: none; }
/* END LESSON (050b): the right end, an ordinary-sized control - smaller than
   Resume - in red, and solid red once armed by the first tap */
body.room-view .room-strip-controls .room-end { border-color: #fca5a5; color: #b91c1c; }
body.room-view .room-strip-controls .room-end.is-armed { background: #dc2626; border-color: #dc2626; color: #ffffff; }
/* HELD: the room sees it from the back, and Resume is the biggest thing on the strip */
body.room-view.room-held .room-strip-controls [data-room="resume"] {
  /* 1.22 x, not 1.35 x (050d): still the biggest thing on the strip, and a held
     lesson's strip stays one row under 110 px */
  min-height: calc(var(--room-hit) * 1.22);
  padding: 0 1em;
  font-size: var(--room-title);
  background: #f5a623;
  border-color: #f5a623;
  color: #111827;
  opacity: 1;
}
/* HOLD (056 H): the teacher's hold, by touch, while the voice one is unproven in a room. It stands
   on the strip's top edge at the right (--room-strip-h, the strip's height as last measured in),
   in ONE place whether the strip is in or has stepped aside - the live strip stays one row
   (050b/050d: every row it saves is the stage's). The strip's height (1.22 x the hit size),
   over twice a strip arrow's area, solid red with white type and a white rim: the room's
   highest contrast (End lesson stays white, two taps). Under the stage's own raised controls
   (a worksheet page and its Close, z 5) and the View menu; above the caption line when it shows. */
.room-hold { display: none; }
body.room-view .room-hold:not([hidden]) {
  display: block;
  position: fixed;
  right: 1.5vw;
  bottom: calc(var(--room-strip-h, 104px) + 12px);
  z-index: 4;
  min-height: calc(var(--room-hit) * 1.22);
  min-width: calc(var(--room-hit) * 2.2);
  padding: 0 0.9em;
  border: 4px solid #ffffff;
  border-radius: 16px;
  background: #dc2626;
  color: #ffffff;
  font: 800 var(--room-body)/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
body.room-view .room-hold:hover { background: #b91c1c; }
body.room-view:has(.room-strip-caption:not([hidden])) .room-hold:not([hidden]) { bottom: calc(var(--room-strip-h, 104px) + 24px + var(--room-body) * 1.9); }
/* the caption: the last thing Diya said, one line, over the foot of the stage */
body.room-view .room-strip-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 0.3em 1.5vw;
  background: rgba(15, 39, 66, 0.92);
  color: #ffffff;
  font-size: var(--room-body);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}