/* ============================================================================
 * 回家讲课（#886b · 2026-10-20）· SPA 壳页样式（app.html #/teach）
 * ----------------------------------------------------------------------------
 * 定位：费曼学习法 —— 孩子当「小老师」，把知识点讲给小伴听；小伴只听不打断，
 *   最多追问 3 轮，最后**如实**说「讲清楚 N 个、还有 M 个没讲到」。
 * 视觉母题（不靠换肤色变量防雷同）：**声波 + 讲台**。
 *   · 顶部 5 步「讲台阶梯」进度轨：台阶逐级点亮，讲台一级比一级高；
 *   · 对话气泡带「声波」尾鳍（me 向右下 / ai 向左下），孩子的话是主声源；
 *   · 追问轮次用三格「麦克风刻度」表示，占满即止（纪律：最多 3 轮）。
 * 壳纪律：本文件复刻 quest-shell.css:151 的 44px 通栏规则并追加 :not(.teach-shell)，
 *   仅把本页中屏内边距降回 24px（不碰共享文件）；色值全部走 .teach-shell 作用域令牌，
 *   深浅双色自动跟随、对宿主页零污染。
 * 🔴 红线落地：页面**没有任何一处**渲染参考要点清单 —— 收尾只显示 covered/missed
 *   两个计数与一句通用鼓励（后端同样只回计数，双保险）。
 * ============================================================================ */
.myquest-shell.teach-shell{
  --tt-surface:#FFFFFF;
  --tt-surface-2:#F6F1FF;
  --tt-line:#EAE4F6;
  --tt-line-strong:#D9C9F7;
  --tt-brand:#7F4AE0;
  --tt-brand-soft:#F1E9FF;
  --tt-warm:#E07B3A;
  --tt-warm-soft:#FDF1E6;
  --tt-ok:#2E9E6B;
  background:var(--mq-main-bg,#FCFAFF);
}
[data-theme="dark"] .myquest-shell.teach-shell{
  --tt-surface:#221C3D;
  --tt-surface-2:#2D2748;
  --tt-line:#3A3164;
  --tt-line-strong:#5B4EA6;
  --tt-brand:#C9B6FF;
  --tt-brand-soft:rgba(143,90,240,.22);
  --tt-warm:#F0A868;
  --tt-warm-soft:rgba(224,123,58,.18);
  --tt-ok:#5FD3A0;
}

/* 中屏内边距降回 24px：复刻 quest-shell.css:151 的 44px 通栏规则并排除本页
   （同特异性 + 后加载 ⇒ 本页回落到基础 .myquest-shell>.mq-main 的 24px）。 */
.xb-app .myquest-shell:not(.exam-shell):not(.math-mastery-shell):not(.rc-math-shell):not(.subjects-hub-shell):not(.partner-shell):not(.teach-shell) > .mq-main{
  padding-left:44px;
  padding-right:44px;
}

/* ---------- 布局：讲台为纵向一列（自然流，整页可滚；控件坞贴卡片底） ---------- */
.teach-shell > .mq-main{ padding:0 24px; }
.tt-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 0 22px;
}

/* ---------- 讲台阶梯 · 5 步进度轨 ---------- */
.tt-steps{
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding:0 2px;
}
.tt-step{
  flex:1 1 0;
  min-width:0;
  position:relative;
  border:1px solid var(--tt-line);
  background:var(--tt-surface);
  border-radius:10px 10px 6px 6px;
  padding:7px 8px 6px;
  text-align:left;
  cursor:default;
  /* 阶梯：第 n 级比第 n-1 级高 6px ⇒ 讲台一级一级升高 */
  margin-bottom:calc(var(--tt-rung,0) * 6px);
}
.tt-step:nth-child(1){ --tt-rung:0 }
.tt-step:nth-child(2){ --tt-rung:1 }
.tt-step:nth-child(3){ --tt-rung:2 }
.tt-step:nth-child(4){ --tt-rung:3 }
.tt-step:nth-child(5){ --tt-rung:4 }
.tt-step-i{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--tt-brand);
  opacity:.72;
}
.tt-step-t{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2,#4A3B6B);
  line-height:1.25;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tt-step.on{
  background:var(--tt-brand);
  border-color:var(--tt-brand);
  box-shadow:0 8px 20px -10px rgba(127,74,224,.55);
}
.tt-step.on .tt-step-i{ color:#fff;opacity:.85 }
.tt-step.on .tt-step-t{ color:#fff }
.tt-step.done{
  background:var(--tt-brand-soft);
  border-color:var(--tt-line-strong);
}
.tt-step.done .tt-step-t{ color:var(--tt-brand) }

/* ---------- 讲台卡 ---------- */
.tt-stage{
  display:flex;
  flex-direction:column;
  min-height:min(60vh,600px);
  background:var(--tt-surface);
  border:1px solid var(--tt-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(80,60,140,.35);
}

/* 状态条：学科 / 知识点 / 阶段 */
.tt-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:11px 16px;
  border-bottom:1px solid var(--tt-line);
  background:var(--tt-surface-2);
}
.tt-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:600;
  color:var(--tt-brand);
  background:var(--tt-surface);
  border:1px solid var(--tt-line-strong);
  border-radius:999px;
  padding:3px 11px;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tt-chip.warm{ color:var(--tt-warm);border-color:var(--tt-warm);background:var(--tt-warm-soft) }
.tt-chip.plain{ color:var(--ink-2,#4A3B6B);background:transparent;border-style:dashed }
.tt-chip.ro{ color:var(--ink-3,#665E85);background:var(--tt-surface-2,#fff);border-style:dotted;opacity:.92 }
.tt-meta-sp{ flex:1 1 auto }
.tt-phase{
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--tt-warm);
}

/* ---------- 对话流 ---------- */
.tt-flow{
  flex:1 1 auto;
  overflow-y:auto;
  max-height:46vh;
  padding:16px 18px 6px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tt-empty{
  margin:auto;
  text-align:center;
  max-width:420px;
  padding:20px 0 26px;
}
/* 声波母题：五根柱， idle 时轻微呼吸 */
.tt-wave{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:46px;
  margin-bottom:14px;
}
.tt-wave i{
  display:block;
  width:5px;
  border-radius:3px;
  background:var(--tt-brand);
  opacity:.5;
  animation:tt-breathe 2.4s ease-in-out infinite;
}
.tt-wave i:nth-child(1){ height:14px;animation-delay:0s }
.tt-wave i:nth-child(2){ height:26px;animation-delay:.18s }
.tt-wave i:nth-child(3){ height:38px;animation-delay:.36s }
.tt-wave i:nth-child(4){ height:26px;animation-delay:.54s }
.tt-wave i:nth-child(5){ height:16px;animation-delay:.72s }
@keyframes tt-breathe{
  0%,100%{ transform:scaleY(.55);opacity:.35 }
  50%{ transform:scaleY(1);opacity:.7 }
}
@media (prefers-reduced-motion:reduce){
  .tt-wave i{ animation:none }
}
.tt-empty-t{
  font-size:15px;
  font-weight:700;
  color:var(--ink,#221838);
  line-height:1.5;
}
.tt-empty-s{
  margin-top:8px;
  font-size:13px;
  color:var(--ink-2,#4A3B6B);
  line-height:1.7;
}

/* 气泡：带「声波尾鳍」三角 */
.tf-msg{ display:flex;gap:8px;align-items:flex-end;max-width:100% }
.tf-msg.me{ flex-direction:row-reverse }
.tf-av{
  flex:0 0 26px;
  width:26px;height:26px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  background:var(--tt-brand-soft);
  border:1px solid var(--tt-line-strong);
  overflow:hidden;padding:0;
}
/* [2026-10-20] 小伴头像改用公仔图（与 error-book/chat.html 的 <img class="ava"> 同资源同口径） */
.tf-av-img{ display:block;width:100%;height:100%;object-fit:cover;border-radius:50% }
/* 「我（小老师）」现在挂学生真实头像（czs_avatar_photo）—— 与 chat.html / app.js 的 me 气泡同口径 */
.tf-bub{
  position:relative;
  max-width:min(560px,78%);
  padding:9px 13px;
  border-radius:14px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink,#221838);
  background:var(--tt-surface-2);
  border:1px solid var(--tt-line);
  white-space:pre-wrap;
  word-break:break-word;
}
.tf-msg.me .tf-bub{
  background:var(--tt-brand);
  border-color:var(--tt-brand);
  color:#fff;
}
/* 尾鳍：右下（me）/ 左下（ai）小三角 */
.tf-bub::after{
  content:"";
  position:absolute;
  bottom:0;
  width:10px;height:10px;
  background:inherit;
  border-right:inherit;
  border-bottom:inherit;
}
.tf-msg.ai .tf-bub::after{ left:-5px;transform:skewX(-24deg) }
.tf-msg.me .tf-bub::after{ right:-5px;transform:skewX(24deg) }
.tf-bub.sys{
  background:var(--tt-warm-soft);
  border-color:var(--tt-warm);
  border-style:dashed;
  font-size:13px;
}
.tf-bub.sys::after{ display:none }
.tf-tag{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-3,#665E85);
  margin-bottom:3px;
}
/* 角色名压在紫色气泡上时，--ink-3 的灰紫几乎看不清 ⇒ 换白色高对比 */
.tf-msg.me .tf-tag{ color:rgba(255,255,255,.92) }

/* 追问轮次刻度（三格麦克风） */
.tt-rounds{ display:flex;align-items:center;gap:4px }
.tt-rounds i{
  display:block;width:7px;height:12px;border-radius:2px;
  background:var(--tt-line-strong);
}
.tt-rounds i.on{ background:var(--tt-warm) }

/* 候选列表（B/C 层：让孩子自己选） */
.tf-cands{ display:flex;flex-direction:column;gap:7px;margin-top:9px }
.tf-cand{
  display:flex;align-items:center;gap:8px;
  text-align:left;
  font-size:13px;font-weight:600;
  color:var(--ink,#221838);
  background:var(--tt-surface);
  border:1px solid var(--tt-line-strong);
  border-radius:11px;
  padding:8px 11px;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.tf-cand:hover{ border-color:var(--tt-brand);background:var(--tt-brand-soft) }
.tf-cand b{ color:var(--tt-brand);font-size:12px;flex:0 0 auto }

/* ---------- 控制坞 ---------- */
.tt-dock{
  border-top:1px solid var(--tt-line);
  background:var(--tt-surface-2);
  padding:11px 16px 13px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.tt-dock-row{ display:flex;align-items:center;gap:9px }
.tt-hint{
  flex:1 1 auto;
  min-width:0;
  font-size:12px;
  color:var(--ink-2,#4A3B6B);
  line-height:1.5;
}
.tt-hint b{ color:var(--tt-brand) }
.tt-in{
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  font-family:inherit;
  color:var(--ink,#221838);
  background:var(--tt-surface);
  border:1px solid var(--tt-line-strong);
  border-radius:12px;
  padding:9px 12px;
  outline:none;
}
.tt-in:focus{ border-color:var(--tt-brand) }
.tt-in::placeholder{ color:var(--ink-3,#665E85) }
.tt-btn{
  flex:0 0 auto;
  font-size:13px;font-weight:700;
  font-family:inherit;
  color:var(--tt-brand);
  background:var(--tt-surface);
  border:1px solid var(--tt-line-strong);
  border-radius:12px;
  padding:9px 15px;
  cursor:pointer;
  white-space:nowrap;
}
.tt-btn:hover{ border-color:var(--tt-brand);background:var(--tt-brand-soft) }
.tt-btn.pri{ background:var(--tt-brand);border-color:var(--tt-brand);color:#fff }
.tt-btn.pri:hover{ filter:brightness(1.06) }
.tt-btn.warm{ background:var(--tt-warm);border-color:var(--tt-warm);color:#fff }
.tt-btn[disabled]{ opacity:.45;cursor:not-allowed }
/* 麦克风：讲台主声源，录音中变暖橙 + 声波柱 */
.tt-mic{
  flex:0 0 auto;
  position:relative;
  width:52px;height:52px;
  border-radius:50%;
  border:2px solid var(--tt-brand);
  background:var(--tt-brand-soft);
  color:var(--tt-brand);
  font-size:22px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}
.tt-mic:hover{ background:var(--tt-brand);color:#fff }
.tt-mic.rec{
  background:var(--tt-warm);
  border-color:var(--tt-warm);
  color:#fff;
  animation:tt-pulse 1.4s ease-in-out infinite;
}
@keyframes tt-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(224,123,58,.42) }
  50%{ box-shadow:0 0 0 9px rgba(224,123,58,0) }
}
@media (prefers-reduced-motion:reduce){
  .tt-mic.rec{ animation:none }
}

/* ---------- 右看板：本场记录（只放真实态） ---------- */
.tt-board-title{ font-size:13px;font-weight:700;color:var(--ink,#221838);margin-bottom:10px }
.tt-board-sec{ margin-top:14px }
.tt-board-sec-h{
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-3,#665E85);
  margin-bottom:7px;
}
.tt-kv{ display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:5px 0;border-bottom:1px dashed var(--tt-line) }
.tt-kv:last-child{ border-bottom:none }
.tt-kv span{ color:var(--ink-2,#4A3B6B);flex:0 0 auto }
.tt-kv b{ color:var(--ink,#221838);font-weight:700;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.tt-board-empty{
  font-size:12px;line-height:1.7;color:var(--ink-2,#4A3B6B);
  background:var(--tt-surface-2);
  border:1px dashed var(--tt-line-strong);
  border-radius:12px;
  padding:11px 12px;
}
.tt-board-tip{
  font-size:12px;line-height:1.75;color:var(--ink-2,#4A3B6B);
  background:var(--tt-warm-soft);
  border:1px solid var(--tt-warm);
  border-radius:12px;
  padding:10px 12px;
}
.tt-board-tip b{ color:var(--tt-warm) }

/* 左屏小伴：本页主交互在中屏讲台，左屏输入口按 #t887 口径收起（CSS 隐藏 + 指路 hint） */
.teach-shell .mq-ai .asp-input-row{ display:none !important }
.teach-ai-foot-hint{
  font-size:11px;line-height:1.55;color:var(--ink-2,#4A3B6B);
  background:var(--tt-surface-2);
  border:1px solid var(--tt-line-strong);
  border-radius:10px;
  padding:8px 10px;
  margin-top:8px;
}

/* ---------- 窄屏：阶梯轨压缩为序号，讲台降高 ---------- */
@media (max-width:900px){
  .tt-step-t{ font-size:11px }
  .tt-stage{ min-height:52vh }
  .tt-flow{ max-height:40vh }
  .tf-bub{ max-width:88% }
}

/* ---------- [2026-10-20] 题目卡：错题本带过来的完整题面 + 选项 ----------
   固定在状态条与对话流之间：孩子边看题边讲，不随小伴追问滚走。
   颜色一律走 --tt-* / --ink-* 变量，深色档自动跟随，不另写一套。 */
.tt-qcard{
  border-bottom:1px solid var(--tt-line);
  background:var(--tt-surface-2);
  padding:9px 16px 11px;
}
.tt-qc-h{ display:flex;align-items:center;gap:8px }
.tt-qc-t{ font-size:12px;font-weight:700;color:var(--ink-2,#4A3B6B) }
.tt-qc-tg{
  margin-left:auto;
  border:1px solid var(--tt-line-strong);
  background:transparent;
  color:var(--ink-3,#665E85);
  font-size:11px;line-height:1.4;
  padding:2px 9px;border-radius:999px;cursor:pointer;
}
.tt-qc-tg:hover{ background:var(--tt-brand-soft);color:var(--tt-brand) }
.tt-qc-b{ margin-top:7px;max-height:23vh;overflow:auto }
.tt-qc-stem{
  font-size:14px;line-height:1.75;
  color:var(--ink,#221838);
  white-space:pre-wrap;
}
.tt-qc-opts{
  margin-top:8px;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;
}
.tt-qc-opt{
  display:flex;gap:7px;align-items:flex-start;
  font-size:13px;line-height:1.6;color:var(--ink-2,#4A3B6B);
}
.tt-qc-opt b{
  flex:0 0 17px;width:17px;height:17px;margin-top:2px;
  border-radius:50%;
  background:var(--tt-brand-soft);color:var(--tt-brand);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

@media (max-width:900px){
  .tt-qc-opts{ grid-template-columns:1fr }
  .tt-qc-b{ max-height:18vh }
}