/* Tutorial — Side-by-side text + viz, unified AI */

.tutorial-app {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 0.25s ease;
}
.tutorial-app.nav-collapsed {
  grid-template-columns: 0px 1fr;
}

/* ── Chapter navigation ─────────────────────────────────────────────── */

.chapter-nav {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: opacity 0.2s ease;
}
.nav-collapsed .chapter-nav { opacity: 0; pointer-events: none; }

/* Expand tab shown when nav is collapsed */
.nav-expand-tab {
  position: fixed; top: 12px; left: 0; z-index: 10;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-left: none; border-radius: 0 6px 6px 0;
  color: var(--text-secondary); cursor: pointer;
  width: 28px; height: 36px; display: none;
  align-items: center; justify-content: center;
  font-size: 14px; padding: 0; transition: all 0.15s;
}
.nav-expand-tab:hover { color: var(--accent); border-color: var(--accent); }
.nav-collapsed .nav-expand-tab { display: flex; }
.nav-header {
  padding: 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-home {
  color: var(--accent); text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: 0.08em;
}
.nav-collapse-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-secondary); cursor: pointer; font-size: 14px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0; padding: 0;
}
.nav-collapse-btn:hover { color: var(--accent); border-color: var(--accent); }
.nav-units { flex: 1; overflow-y: auto; padding: 8px 0; }
.nav-unit { margin-bottom: 4px; }
.nav-unit-header {
  padding: 8px 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary); cursor: pointer; user-select: none;
}
.nav-unit-header:hover { color: var(--text-primary); }
.nav-unit-lessons { overflow: hidden; }
.nav-unit.collapsed .nav-unit-lessons { display: none; }
.nav-lesson {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 16px 5px 24px; font-size: 13px;
  color: var(--text-secondary); cursor: pointer; text-decoration: none;
  border-left: 3px solid transparent; transition: all 0.1s;
}
.nav-lesson:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.nav-lesson.active { color: var(--accent); border-left-color: var(--accent); background: rgba(0,204,255,0.05); }
.nav-lesson.completed { color: var(--ket-zero); }
.nav-lesson-num {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
  min-width: 16px; text-align: right; flex-shrink: 0; opacity: 0.6;
}
.nav-lesson .check {
  width: 14px; height: 14px; border: 1.5px solid var(--border);
  border-radius: 3px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 10px;
}
.nav-lesson.completed .check { border-color: var(--ket-zero); color: var(--ket-zero); }
.nav-footer { padding: 12px 16px; border-top: 1px solid var(--border); }
.progress-bar {
  height: 4px; background: var(--bg-panel); border-radius: 2px;
  overflow: hidden; margin-bottom: 6px;
}
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; width: 0%; }
.progress-text { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }

.nav-footer-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}

/* Identity / progress sync area */
.identity-area { flex: 1; min-width: 0; }
.identity-form {
  display: flex; gap: 4px;
}
.identity-form input {
  flex: 1; padding: 6px 8px; min-width: 0;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary);
  font-size: 11px; font-family: var(--font-sans); outline: none;
}
.identity-form input:focus { border-color: var(--accent); }
.identity-form input::placeholder { color: var(--text-secondary); }
.identity-form input.error { border-color: var(--ket-one); }
.identity-form input.error::placeholder { color: var(--ket-one); }
.identity-form button {
  padding: 6px 10px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-secondary); font-size: 11px; cursor: pointer;
  transition: all 0.15s; flex-shrink: 0;
}
.identity-form button:hover { border-color: var(--accent); color: var(--accent); }
.identity-user {
  flex: 1; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; font-size: 11px; gap: 6px;
}
.identity-name { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-logout { color: var(--text-secondary); cursor: pointer; text-decoration: underline; flex-shrink: 0; }
.identity-logout:hover { color: var(--accent); }

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

.lesson-main {
  display: flex; flex-direction: column; overflow: hidden;
}

.lesson-center {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Text panel (left side) ─────────────────────────────────────────── */

.lesson-text {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  font-size: 15px;
  line-height: 1.75;
  min-width: 0;
}

.lesson-text h2 {
  font-size: 18px; font-weight: 700; letter-spacing: 0.01em;
  margin-top: 28px; margin-bottom: 12px;
}
.lesson-text h2:first-child { margin-top: 0; }
.lesson-text h3 {
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  margin-top: 22px; margin-bottom: 8px;
}
.lesson-text p { margin-bottom: 14px; }
.lesson-text ul, .lesson-text ol { margin-bottom: 14px; padding-left: 24px; }
.lesson-text li { margin-bottom: 7px; }

.lesson-text pre {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5;
  margin-bottom: 14px;
}
.lesson-text code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-panel); padding: 2px 5px; border-radius: 3px;
}
.lesson-text pre code { background: none; padding: 0; }
.lesson-text table { width: 100%; font-size: 14px; border-collapse: collapse; margin: 18px 0; }
.lesson-text th, .lesson-text td { padding: 8px 12px; text-align: left; }
.lesson-text th { color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.lesson-text tr { border-bottom: 1px solid var(--border); }
.lesson-text tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }

/* Links in lesson text */
.lesson-text a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(92,184,214,0.3);
  transition: border-color 0.15s;
}
.lesson-text a:hover { border-bottom-color: var(--accent); }

/* AI response styling in the text panel */
.ai-response {
  margin-top: 16px;
  padding: 16px;
  background: rgba(0, 204, 255, 0.04);
  border: 1px solid rgba(0, 204, 255, 0.15);
  border-radius: var(--radius);
}
.ai-response-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent); margin-bottom: 8px;
}
.ai-response-body { font-size: 14px; line-height: 1.7; }
.ai-response-dismiss {
  display: inline-block; margin-top: 10px; font-size: 12px;
  color: var(--text-secondary); cursor: pointer;
  text-decoration: underline;
}
.ai-response-dismiss:hover { color: var(--text-primary); }

/* Callouts */
.callout {
  padding: 14px 18px; border-radius: var(--radius); margin: 18px 0; font-size: 14px;
  line-height: 1.7;
}
.callout-lab { background: rgba(0,204,255,0.06); border-left: 3px solid var(--accent); }
.callout-lab::before {
  content: "In the Lab"; display: block; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 4px;
}
.callout-math { background: rgba(255,170,0,0.06); border-left: 3px solid #ffaa00; }
.callout-math::before {
  content: "Key Equation"; display: block; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: #ffaa00; margin-bottom: 4px;
}
.callout-try { background: rgba(78,205,196,0.06); border-left: 3px solid var(--ket-zero); }
.callout-try::before {
  content: "Try It"; display: block; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ket-zero); margin-bottom: 4px;
}
.callout-connection { background: rgba(136,136,170,0.06); border-left: 3px solid var(--text-secondary); }
.callout-connection::before {
  content: "Connection"; display: block; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 4px;
}

/* Viz-action buttons in text */
.viz-btn {
  display: inline-block; padding: 3px 10px;
  background: var(--bg-panel); border: 1px solid var(--accent-dim);
  border-radius: var(--radius); color: var(--accent);
  font-family: var(--font-mono); font-size: 13px;
  cursor: pointer; transition: all 0.15s; margin: 1px 2px;
}
.viz-btn:hover { background: rgba(0,204,255,0.1); border-color: var(--accent); }

/* ── Visualization panel (right side) ───────────────────────────────── */

.lesson-viz {
  flex: 0 0 45%;
  max-width: 50%;
  border-left: 1px solid var(--border);
  position: relative;
  background: var(--bg-primary);
}

.lesson-viz.hidden { display: none; }
.lesson-viz.hidden + .lesson-text { flex: 1; max-width: 100%; }

.lesson-viz canvas { width: 100%; height: 100%; display: block; }

.viz-controls {
  position: absolute; bottom: 8px; left: 12px;
  display: flex; gap: 5px; flex-wrap: wrap;
}
.viz-controls .gate-btn { width: 32px; height: 28px; font-size: 12px; }

.viz-info {
  position: absolute; bottom: 8px; right: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); text-align: right; max-width: 50%;
}

/* ── Bottom bar ─────────────────────────────────────────────────────── */

.bottom-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.step-btn {
  padding: 6px 14px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); font-size: 14px; cursor: pointer;
  transition: all 0.15s; flex-shrink: 0;
}
.step-btn:hover { border-color: var(--accent); color: var(--accent); }
.step-btn:disabled { opacity: 0.3; cursor: default; }
.step-btn:disabled:hover { border-color: var(--border); color: var(--text-primary); }

.step-indicator {
  font-size: 12px; color: var(--text-secondary);
  font-family: var(--font-mono); flex-shrink: 0; min-width: 40px; text-align: center;
}

.ai-input-wrap {
  flex: 1; display: flex; gap: 6px; margin-left: 8px;
  flex-wrap: wrap; align-items: center;
}
.ai-input-wrap input {
  flex: 1; padding: 7px 14px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary);
  font-size: 13px; font-family: var(--font-sans); outline: none;
}
.ai-input-wrap input:focus { border-color: var(--accent); }
.ai-input-wrap input::placeholder { color: var(--text-secondary); }

.ai-send-btn {
  padding: 7px 14px; background: var(--accent-dim);
  border: none; border-radius: var(--radius);
  color: white; font-size: 13px; cursor: pointer;
  transition: background 0.15s; flex-shrink: 0;
}
.ai-send-btn:hover { background: var(--accent); }

/* Mode toggle (KB / AI) */
.mode-toggle {
  padding: 5px 10px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-secondary); font-size: 11px; font-weight: 700;
  font-family: var(--font-mono); cursor: pointer;
  transition: all 0.15s; flex-shrink: 0; letter-spacing: 0.04em;
}
.mode-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* KB search results */
.kb-result {
  margin-top: 12px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kb-result:last-of-type { border-bottom: none; padding-bottom: 0; }
.kb-result-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px;
}
.kb-result-category {
  font-size: 11px; color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.kb-result-content {
  font-size: 13px; line-height: 1.65; color: var(--text-primary); opacity: 0.9;
}

/* Upload button */
.upload-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 34px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  font-size: 16px; flex-shrink: 0; transition: all 0.15s;
  user-select: none;
}
.upload-btn:hover { border-color: var(--accent); background: rgba(0,204,255,0.08); }
.upload-btn.uploading { opacity: 0.5; pointer-events: none; }

/* Document pills */
.doc-pills {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
.doc-pills:empty { display: none; }
.doc-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px; background: rgba(0,204,255,0.08);
  border: 1px solid rgba(0,204,255,0.2); border-radius: 12px;
  font-size: 11px; color: var(--accent); max-width: 160px;
  white-space: nowrap;
}
.doc-pill-name {
  overflow: hidden; text-overflow: ellipsis;
}
.doc-pill-remove {
  cursor: pointer; font-size: 13px; line-height: 1;
  color: var(--text-secondary); transition: color 0.15s;
  flex-shrink: 0;
}
.doc-pill-remove:hover { color: var(--accent); }

/* Sources section in lessons */
.callout-sources {
  background: rgba(92,184,214,0.04); border-left: 3px solid var(--accent);
}
.callout-sources::before {
  content: "Sources"; display: block; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 6px;
}
.callout-sources ul { padding-left: 18px; margin-bottom: 0; }
.callout-sources li { font-size: 13px; line-height: 1.6; margin-bottom: 4px; color: var(--text-secondary); }
.callout-sources li strong { color: var(--text-primary); }

/* References */
.ref {
  font-size: 13px;
  line-height: 1.65;
  padding-left: 24px;
  text-indent: -24px;
  border-left: 2px solid var(--border);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.015);
}

/* KaTeX */
.katex-display { margin: 18px 0; overflow-x: auto; padding-right: 2px; }
.katex-display::-webkit-scrollbar { height: 0; }
.katex-display { scrollbar-width: none; }