/* 教学流（t-20261026-wybz flow）：讲解闸门「考呗 / 没懂」、没懂点段旁问、单元完成卡、下一个单元卡、对话流里的单元行。
   沿用「考场白纸，一支蓝笔」：颜色只引用 kaopy.css 的 token；蓝是要去的方向，绿是已经做到的状态。
   动效按分级：按下回弹 T0（120–200ms），点「考呗」的涟漪与题卡扫出 T1（按下到扫完约 600ms），盖章、进度格涂满在 T1–T2 之间；
   全屏庆祝交给动效体系（workspace-celebrate.js 听 kaopy:celebrate）。减少动态时只画终态。 */

/* JS 按位置写进来的几何量（涟漪半径、扫出圆心、第几段 / 第几格），这里给默认值 */
.gate-ripple { --ripple-r: 320px; }
.is-sweeping { --sweep-x: 50%; --sweep-y: 0px; --sweep-r: 150%; }
.kp-pickable { --pick-i: 0; }
.answer-sheet i, .unit-track i { --cell-i: 0; }
.unit-finish { --ca-off: 0ms; }

/* 实心大按钮共用的一道「底边」：按下去时底边收进去，像真的按下一颗键。深色里蓝更浅，底边往画布色压暗 */
.quiz-gate__btn.is-got,
.unit-finish__btn.is-go,
.next-unit-card__go { --edge: var(--accent-strong); }
.quiz-gate__btn.is-got.is-pressed { --edge: color-mix(in srgb, var(--success) 72%, var(--ink)); }
[data-theme="dark"] :is(.quiz-gate__btn.is-got, .unit-finish__btn.is-go, .next-unit-card__go) { --edge: color-mix(in srgb, var(--accent) 52%, var(--canvas)); }
[data-theme="dark"] .quiz-gate__btn.is-got.is-pressed { --edge: color-mix(in srgb, var(--success) 52%, var(--canvas)); }

/* ---------- 讲解闸门：正中一颗大号「考呗」，旁边贴一颗很小很灰的「没懂」 ---------- */
.quiz-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  width: 100%;
  margin: 26px 0 14px;
}
.seg-gate { margin: 10px 0 4px; }
.quiz-gate__btn { font-family: var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quiz-gate__btn:disabled { cursor: default; }
.quiz-gate__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.quiz-gate__btn.is-got {
  grid-column: 2;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 164px;
  height: 52px;
  padding: 0 28px 0 11px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .12s cubic-bezier(.3, .7, .4, 1.5), box-shadow .12s ease, background-color .18s ease;
}
.quiz-gate__btn.is-got:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 var(--edge); }
.quiz-gate__btn.is-got:active:not(:disabled),
.quiz-gate__btn.is-got.is-pressed { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.quiz-gate__btn.is-got.is-pressed { background: var(--success); }
.quiz-gate__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--on-accent);
  color: var(--accent);
}
.quiz-gate__badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.quiz-gate__tick { stroke-dasharray: 22; stroke-dashoffset: 0; }
/* 按下到闸门让位给题卡只有 160ms：钩在这之前画完，圆章弹一下 */
.quiz-gate__btn.is-pressed .quiz-gate__badge { color: var(--success); animation: gate-badge-pop .2s cubic-bezier(.2, 1.4, .4, 1) both; }
.quiz-gate__btn.is-pressed .quiz-gate__tick { animation: gate-tick .14s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gate-tick { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes gate-badge-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* 闸门第一次出现：「考呗」轻轻弹出来（enterOnce 只给第一次） */
.quiz-gate.shell-enter { animation: none; }
.quiz-gate.shell-enter .quiz-gate__btn.is-got { animation: gate-pop .42s cubic-bezier(.2, 1.3, .4, 1) .06s both; }
.quiz-gate.shell-enter .quiz-gate__btn.is-ask { animation: shell-fade-in .3s ease .2s both; }
@keyframes gate-pop { from { opacity: 0; transform: translateY(6px) scale(.86); } to { opacity: 1; transform: none; } }

/* 没懂：很小、很灰，贴在「考呗」右边；进了点段状态时变成浅蓝的「按下」 */
.quiz-gate__btn.is-ask {
  grid-column: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px 0 7px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--faint);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1;
  transition: background-color .14s ease, color .14s ease;
}
.quiz-gate__btn.is-ask .icon,
.quiz-gate__btn.is-ask svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quiz-gate__btn.is-ask:hover:not(:disabled) { background: var(--surface-subtle); color: var(--muted); }
.quiz-gate__btn.is-ask.is-on { background: var(--accent-soft); color: var(--accent-strong); }
.quiz-gate.is-going .quiz-gate__btn.is-ask { opacity: 0; transition: opacity .12s linear; }

/* 点「考呗」：从按钮向下扩散的两圈涟漪（只画圆心以下的半圈），后面的题卡从同一个圆心扫出来 */
.msg-assistant.has-gate-ripple { position: relative; }
.gate-ripple { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; }
.gate-ripple i {
  position: absolute;
  left: calc(var(--ripple-r) * -1);
  top: calc(var(--ripple-r) * -1);
  width: calc(var(--ripple-r) * 2);
  height: calc(var(--ripple-r) * 2);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 72%, color-mix(in srgb, var(--accent) 10%, transparent) 96%, transparent);
  -webkit-clip-path: inset(50% -4px -4px -4px);
  clip-path: inset(50% -4px -4px -4px);
  opacity: 0;
  transform: scale(.06);
  animation: gate-ripple .46s cubic-bezier(.2, .7, .3, 1) forwards;
}
.gate-ripple i + i { border-width: 1.5px; background: none; animation-delay: .06s; }
@keyframes gate-ripple { 0% { opacity: .75; transform: scale(.06); } 65% { opacity: .38; } 100% { opacity: 0; transform: scale(1); } }
.is-sweeping { animation: gate-sweep .42s cubic-bezier(.25, .8, .3, 1) both; }
/* 闸门后放出的题卡：扫出就是它的入场，淡入同时直接到终态；摘掉 is-sweeping 后同名淡入已播完，不再从透明重播（t-20261027-xe4d） */
.shell-enter.is-sweeping { animation: gate-sweep .42s cubic-bezier(.25, .8, .3, 1) both, shell-fade-in .42s step-start both; }
@keyframes gate-sweep {
  from { -webkit-clip-path: circle(0 at var(--sweep-x) var(--sweep-y)); clip-path: circle(0 at var(--sweep-x) var(--sweep-y)); }
  to { -webkit-clip-path: circle(var(--sweep-r) at var(--sweep-x) var(--sweep-y)); clip-path: circle(var(--sweep-r) at var(--sweep-x) var(--sweep-y)); }
}

/* 没出题的一拍点「考呗」：涟漪扫完之前，学生那句和导师的下一拍先不露出；扫完再淡入（字最后出现） */
#streamSlot > .msg-assistant.is-gate-holding ~ :is(.msg-user, .msg-assistant) { opacity: 0; }
#streamSlot > .msg-assistant.is-gate-released ~ :is(.msg-user, .msg-assistant) { animation: shell-fade-in .24s cubic-bezier(.2, .8, .2, 1) both; }

/* ---------- 没懂：这一拍的段落亮起来，点哪段就就那段旁问 ---------- */
/* 底色只向左右各伸出 8px，上下不伸：段与段之间原来的 14px 间距照旧分得开，进出点段状态时排版一点不动
   （不加段距，下面的「考呗」「没懂」不会被挤出视口）。行高里本来就有上下留白，底色盖得住字 */
.msg-assistant.is-picking .kp-pickable {
  position: relative;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
  box-shadow: -8px 0 0 0 color-mix(in srgb, var(--accent-soft) 42%, transparent), 8px 0 0 0 color-mix(in srgb, var(--accent-soft) 42%, transparent);
  cursor: pointer;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.msg-assistant.is-picking .kp-pickable:hover,
.msg-assistant.is-picking .kp-pickable:focus-visible {
  outline: none;
  background: var(--accent-soft);
  box-shadow: -8px 0 0 0 var(--accent-soft), 8px 0 0 0 var(--accent-soft), -11px 0 0 0 var(--accent);
}
.msg-assistant.is-pick-wave .kp-pickable { animation: pick-wave .7s ease-out calc(var(--pick-i, 0) * 50ms) backwards; }
@keyframes pick-wave {
  0% { background: transparent; box-shadow: -8px 0 0 0 transparent, 8px 0 0 0 transparent; }
  35% { background: var(--accent-soft); box-shadow: -8px 0 0 0 var(--accent-soft), 8px 0 0 0 var(--accent-soft); }
}

/* 行内公式和紧跟着的标点不拆到两行（第 7 条） */
.math-hold { white-space: nowrap; }

/* 单元收尾那条回答（带完成卡）和两个单元之间那一轮（选了「休息一下」后导师的一句）：
   给下一单元备课的那一步不在这里露出（第 9 条）。由完成卡和单元线的位置推出，不看字 */
.msg-assistant.is-between-units > .tool-activity-group,
.msg-assistant:has(> .api-questionnaire.is-unit-finish) > .tool-activity-group { display: none; }

/* ---------- 单元章、答题卡格子、单元进度格（单元行、完成卡、下一个单元卡共用） ---------- */
.unit-seal {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font: 600 13px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.unit-seal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.unit-seal.is-done { background: var(--success); color: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--success) 55%, transparent); transform: rotate(-10deg); }
.unit-seal.is-skipped { border: 1.5px dashed var(--border-strong); color: var(--muted); }
.unit-seal.is-live { background: var(--accent); color: var(--on-accent); }
.unit-seal.is-pending { border: 1.5px solid var(--border-strong); color: var(--muted); }

/* 答题卡：一题一格（像答题卡上涂的那一小格），答对涂满绿，答错是一格浅红框 */
.answer-sheet { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.answer-sheet i { display: block; width: 13px; height: 7px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.answer-sheet i.is-right { background: var(--success); box-shadow: none; }
.answer-sheet i.is-wrong { background: var(--danger-soft); box-shadow: inset 0 0 0 1.5px var(--danger); }
.answer-sheet.is-more::after { content: ''; width: 6px; height: 2px; margin-left: 2px; border-radius: 2px; background: var(--border-strong); }

/* 单元进度格：整门课一格一单元。学完涂绿、先放下灰、当前这一格蓝框 */
.unit-track { display: flex; align-items: center; gap: 4px; min-width: 0; }
.unit-track i { position: relative; display: block; flex: 1 1 0; min-width: 6px; max-width: 44px; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--border); }
.unit-track i.is-done { background: var(--success); box-shadow: none; }
.unit-track i.is-skipped { background: var(--border-strong); box-shadow: none; }
.unit-track i.is-here { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---------- 对话流里的单元行 ---------- */
.unit-line { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 22px 0 14px; color: var(--muted); font: 400 var(--fs-caption)/1.5 var(--font-sans); }
.unit-line__rule { flex: 1 1 24px; min-width: 12px; height: 0; border-top: 1px solid var(--border); }
.unit-line__toggle {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin: -4px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.unit-line__toggle:focus-visible, .unit-line__fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unit-line__text { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.unit-line__prefix { flex: none; color: var(--muted); font: 500 var(--fs-caption)/1.45 var(--font-sans); white-space: nowrap; }
.unit-line__title { min-width: 0; overflow: hidden; color: var(--ink); font: 600 15px/1.45 var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.unit-line__chev { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--faint); transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .14s ease, color .14s ease; }
.unit-line__chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.unit-line--start { margin-top: 36px; }
.stage-chapter--head + .unit-line--start { margin-top: 0; }
.unit-line--start:not(.is-folded) .unit-line__chev { transform: rotate(180deg); }
.unit-line--start:not(.is-closed):hover .unit-line__chev { color: var(--muted); }
.unit-line--start.is-live .unit-line__prefix { color: var(--accent-strong); }

/* 学完的单元：一条有成就感的「过关条」——斜盖的绿章、单元名、涂好的答题卡，右边「进入单元」胶囊。
   默认收起成这一条；点开后同一条当单元标题，单元末尾一条小章收尾 */
.unit-line--start.is-closed {
  gap: 10px;
  margin: 12px 0;
  padding: 10px 8px 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--success-soft), var(--surface) 46%);
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.unit-line--start.is-closed.is-skipped { background: linear-gradient(90deg, var(--surface-subtle), var(--surface) 46%); }
/* 两个单元之间的那一轮（休息前导师的一句）和上面的过关条隔开 */
.msg-assistant.is-between-units { margin-top: 22px; }
.unit-line--start.is-closed + .unit-line--start.is-closed,
.unit-folded + .unit-line--start.is-closed { margin-top: 8px; }
.unit-line--start.is-closed:hover { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.unit-line--start.is-closed.is-skipped:hover { border-color: var(--border-strong); }
.unit-line--start.is-closed .unit-line__rule { visibility: hidden; }
.unit-line--start.is-closed .unit-line__toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.unit-line--start.is-closed .unit-seal { grid-row: 1 / span 2; width: 32px; height: 32px; }
.unit-line--start.is-closed .unit-seal svg { width: 19px; height: 19px; }
.unit-line--start.is-closed .unit-line__text { grid-column: 2; grid-row: 1; }
.unit-line--start.is-closed .answer-sheet { grid-column: 2; grid-row: 2; }
.unit-line--start.is-closed .unit-line__toggle:not(:has(.answer-sheet)) { grid-template-rows: auto; row-gap: 0; }
.unit-line--start.is-closed .unit-line__toggle:not(:has(.answer-sheet)) .unit-seal { grid-row: 1; }
.unit-line--start.is-closed:hover .unit-line__chev { background: var(--surface-subtle); color: var(--muted); }
/* 学完却没有一条消息的单元：一条过关条，没有可展开的，不画展开键 */
.unit-line--start.is-empty, .unit-line--start.is-empty .unit-line__toggle { cursor: default; }
.unit-line--start.is-empty .unit-line__chev { visibility: hidden; }
.unit-line__room { flex: none; }
/* 刚学完的单元自己收起来的那一下：章从上面盖下来，答题卡一格格涂上 */
.unit-line--start.is-stamping { animation: unit-strip-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.unit-line--start.is-stamping .unit-seal { animation: seal-stamp .52s cubic-bezier(.2, 1.35, .4, 1) .12s both; }
.unit-line--start.is-stamping .answer-sheet i { animation: cell-fill .22s ease-out calc(.4s + var(--cell-i, 0) * 45ms) both; }
@keyframes unit-strip-in { from { opacity: .4; transform: scaleY(.6); } to { opacity: 1; transform: none; } }
@keyframes seal-stamp { 0% { opacity: 0; transform: scale(2.1) rotate(-34deg); } 55% { opacity: 1; transform: scale(.88) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-10deg); } }
@keyframes cell-fill { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

/* 结束线：一枚小章「第三单元学完」，右端一颗收起键 */
.unit-line--end { margin: 18px 0 26px; }
.unit-line--end .unit-line__text { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--success); font-weight: 600; }
.unit-line--end.is-skipped .unit-line__text { color: var(--muted); }
.unit-line--end .unit-seal { width: 20px; height: 20px; box-shadow: none; }
.unit-line--end .unit-seal svg { width: 13px; height: 13px; }
.unit-line__fold { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; transition: border-color .14s ease, color .14s ease; }
.unit-line__fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.unit-line__fold:hover { border-color: var(--border-strong); color: var(--ink); }

/* 单元（原单元教室）页顶：回到主线是一颗带返回箭头的胶囊 */
.unit-room-head { align-items: center; }
.unit-room-head__back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--fs-caption)/1 var(--font-sans);
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.unit-room-head__back:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.unit-room-head__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unit-room-head__arrow { display: grid; place-items: center; }
.unit-room-head__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 页顶右端：这一单元的小章 + 学完的日子 */
.unit-room-head__done { display: inline-flex; align-items: center; gap: 6px; }
.unit-room-head__done .unit-seal { width: 20px; height: 20px; box-shadow: none; }
.unit-room-head__done .unit-seal svg { width: 13px; height: 13px; }

/* ---------- 单元完成卡：一张过关卡 ---------- */
.api-questionnaire.is-unit-finish { max-width: 720px; padding: 0; border: 0; background: none; box-shadow: none; }
.api-questionnaire.is-unit-finish > .api-questionnaire-head { display: none; }
.api-questionnaire.is-unit-finish > .api-questionnaire-grid { display: block; }
.unit-finish.api-question-section {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 19px 22px 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-top: 4px solid var(--accent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.unit-finish.api-question-section:disabled { opacity: 1; }
.unit-finish.is-finished { border-color: color-mix(in srgb, var(--success) 38%, var(--border)); border-top-color: var(--success); box-shadow: none; }
.unit-finish.is-finished.is-set-aside { border-color: var(--border); border-top-color: var(--border-strong); }
.unit-finish.is-stale { opacity: .78; border-color: var(--border); border-top-color: var(--border-strong); box-shadow: none; }
.unit-finish__head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.unit-finish__seal.unit-seal { width: 56px; height: 56px; font-size: 24px; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.unit-finish__seal.unit-seal.is-done { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px color-mix(in srgb, var(--success) 50%, transparent); }
/* 还没定：一枚等着盖的章，虚线圈里写序号 */
.unit-finish__seal.unit-seal.is-await { border: 2px dashed color-mix(in srgb, var(--accent) 70%, var(--border)); background: var(--accent-soft); color: var(--accent-strong); box-shadow: none; }
.unit-finish__seal.unit-seal svg { width: 32px; height: 32px; stroke-width: 2.6; }
.unit-finish__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.unit-finish__kicker { color: var(--accent-strong); font: 600 var(--fs-caption)/1.4 var(--font-sans); letter-spacing: .04em; }
.unit-finish.is-finished .unit-finish__kicker { color: var(--success); }
.unit-finish.is-set-aside .unit-finish__kicker { color: var(--muted); }
.unit-finish__title { overflow: hidden; color: var(--ink); font: 600 20px/1.35 var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.unit-finish__copy .answer-sheet { gap: 4px; margin-top: 4px; }
.unit-finish__copy .answer-sheet i { width: 16px; height: 8px; border-radius: 3px; }
.unit-finish__track { margin: 18px 0 0; }
.unit-finish__track i { max-width: none; height: 10px; }
.unit-finish__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 22px; }
.unit-finish__btn {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 176px;
  height: 52px;
  padding: 0 24px 0 11px;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-pill);
  font: 600 16px/1 var(--font-sans);
  cursor: pointer;
  transition: transform .12s cubic-bezier(.3, .7, .4, 1.5), box-shadow .12s ease, background-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.unit-finish__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.unit-finish__btn:disabled { cursor: default; }
.unit-finish__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; transition: transform .2s cubic-bezier(.2, 1.3, .4, 1); }
.unit-finish__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.unit-finish__btn.is-go { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--edge); }
.unit-finish__btn.is-go .unit-finish__icon { background: var(--on-accent); color: var(--accent); }
.unit-finish__btn.is-rest { --edge: var(--border); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 var(--edge); }
.unit-finish__btn.is-rest .unit-finish__icon { background: var(--marker-soft); color: var(--marker-ink); }
.unit-finish__btn:hover:not(:disabled) { transform: translateY(-1px); }
.unit-finish__btn.is-go:hover:not(:disabled) { box-shadow: 0 5px 0 var(--edge); }
.unit-finish__btn.is-rest:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--edge), 0 5px 0 var(--edge); }
.unit-finish__btn.is-go:hover:not(:disabled) .unit-finish__icon { transform: translateX(3px); }
.unit-finish__btn.is-rest:hover:not(:disabled) .unit-finish__icon { transform: rotate(-12deg); }
/* 「休息一下」的杯子：平时不冒气；指上去两缕热气从杯口升起来、留着（升一次，不循环）。交过卡的签上一直冒着 */
.unit-finish__steam { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(3px) scaleY(.5); transition: opacity .2s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.unit-finish__btn.is-rest:hover:not(:disabled) .unit-finish__steam,
.unit-finish__btn.is-rest:focus-visible .unit-finish__steam,
.unit-finish__btn.is-rest.is-chosen .unit-finish__steam,
.unit-finish__picked .unit-finish__steam { opacity: 1; transform: none; }
/* 按下去那一下：「开始下一单元」的箭头从圆里冲出去、再从左边进来；「休息一下」的杯子晃一下 */
.unit-finish__btn.is-go .unit-finish__icon { overflow: hidden; }
.unit-finish__btn.is-go.is-chosen .unit-finish__icon svg { animation: go-dash .46s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes go-dash { 0% { transform: none; } 44% { transform: translateX(18px); opacity: 0; } 45% { transform: translateX(-18px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.unit-finish__btn.is-rest.is-chosen .unit-finish__icon { animation: rest-sip .5s cubic-bezier(.3, .7, .4, 1.4) both; }
@keyframes rest-sip { 0% { transform: rotate(-12deg); } 45% { transform: rotate(10deg) scale(1.08); } 100% { transform: none; } }
/* 「开始下一单元」上掠过一道光：只在指上去时掠一次，不循环 */
.unit-finish__btn.is-go::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 34%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--on-accent) 34%, transparent), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
.unit-finish__btn.is-go:hover:not(:disabled)::after { animation: finish-shine .62s ease-out both; }
@keyframes finish-shine { from { opacity: 1; transform: skewX(-18deg) translateX(0); } to { opacity: 1; transform: skewX(-18deg) translateX(520%); } }
.unit-finish__btn:active:not(:disabled),
.unit-finish__btn.is-chosen { transform: translateY(4px); }
.unit-finish__btn.is-go:active:not(:disabled), .unit-finish__btn.is-go.is-chosen { box-shadow: 0 0 0 var(--edge); }
.unit-finish__btn.is-rest:active:not(:disabled), .unit-finish__btn.is-rest.is-chosen { box-shadow: inset 0 0 0 2px var(--edge), 0 0 0 var(--edge); }
/* 按下去那一颗：一圈光从按钮上漾开；另一颗退到一边 */
.unit-finish__btn.is-chosen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: finish-press .5s ease-out both;
  pointer-events: none;
}
@keyframes finish-press { to { box-shadow: 0 0 0 14px transparent; } }
.unit-finish.is-deciding .unit-finish__btn:not(.is-chosen),
.unit-finish.is-deciding .unit-finish__ask { opacity: .4; transition: opacity .16s linear; }
/* 继续问：小的灰色胶囊，排在两颗大按钮后面；点开在卡里原地出输入框 */
.unit-finish__ask {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  margin-left: auto;
  padding: 0 14px 0 11px;
  border: 0;
  border-radius: var(--r-pill);
  /* 平时就是一颗很淡的胶囊（浅底 + 细边），看得出是按钮，又比两颗大按钮弱得多 */
  background: var(--surface-subtle);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--muted);
  font: 500 var(--fs-ui)/1 var(--font-sans);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.unit-finish__ask svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.unit-finish__ask:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--ink); }
.unit-finish__ask.is-on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent-strong); }
.unit-finish__ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unit-finish__box { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; padding: 8px 8px 8px 14px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); animation: shell-fade-in .22s cubic-bezier(.2, .8, .2, 1) both; }
.unit-finish__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.unit-finish__box textarea { flex: 1; min-width: 0; min-height: 34px; max-height: 140px; padding: 6px 0; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: 400 15px/1.5 var(--font-sans); }
.unit-finish__box textarea::placeholder { color: var(--faint); }
.unit-finish__send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.unit-finish__send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.unit-finish__send:disabled { background: var(--surface-subtle); color: var(--faint); cursor: default; }
/* 定过了：只留选的那一颗，扁平、淡色 */
.unit-finish__picked { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 6px 12px 6px 9px; border-radius: var(--r-pill); background: var(--surface-subtle); color: var(--muted); font: 600 var(--fs-caption)/1 var(--font-sans); }
.unit-finish__picked svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 单元页里回看的原对话：完成卡只是完成记录，不留当时选的那一颗 */
.unit-room-origin__body .unit-finish__picked { display: none; }
/* 本页刚交的完成卡：章盖下去（0–460ms），盖到一半这一单元那一格从左往右涂绿（300–560ms）；同一刻最多这两样。
   答题卡格子交卡前就在，不再重播 */
/* 章从不到一倍半大落下：卡片要裁圆角（overflow: hidden），章放大的那一下留在卡的内边距里，不被卡的左边框切掉一块 */
.unit-finish.is-live .unit-finish__seal { animation: finish-seal-stamp .46s cubic-bezier(.2, 1.35, .4, 1) var(--ca-off, 0ms) both; }
@keyframes finish-seal-stamp { 0% { opacity: 0; transform: scale(1.36) rotate(-30deg); } 55% { opacity: 1; transform: scale(.9) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-10deg); } }
.unit-finish.is-live .unit-track i.is-this::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--surface-subtle); transform-origin: right; animation: track-fill .26s cubic-bezier(.4, 0, .2, 1) calc(var(--ca-off, 0ms) + 300ms) both; }
@keyframes track-fill { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- 下一个单元（输入框上方的停靠区） ---------- */
.next-unit-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-top: 3px solid var(--accent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.next-unit-card[hidden] { display: none; }
/* 左右边和阅读列（过关条、正文）对齐：≥720px 阅读列比输入框那一列左边多让出 32px（导师小标挂在那里，
   workspace-navigation.css 的 60px 对 28px）；窄屏输入框那一列离屏边更近，卡片收进来，两边都留 16px */
@media (min-width: 720px) { .next-unit-card { margin-left: 32px; } }
@media (max-width: 719px) { .next-unit-card { margin-inline: max(0px, calc(16px - var(--next-unit-edge, 12px))); } }
@media (max-width: 480px) { .next-unit-card { --next-unit-edge: 8px; } }
.next-unit-card__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  /* 一枚关卡币：蓝圈、底下一道厚边，和「开始」同一套按键语言 */
  box-shadow: inset 0 0 0 2px var(--accent), 0 3px 0 color-mix(in srgb, var(--accent) 45%, var(--surface));
  font: 600 22px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.next-unit-card__copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.next-unit-card__eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.next-unit-card__title { display: block; overflow: hidden; color: var(--ink); font: 600 var(--fs-body)/1.4 var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.next-unit-card__track { margin-top: 6px; }
.next-unit-card__go {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: 600 16px/1 var(--font-sans);
  letter-spacing: .04em;
  box-shadow: 0 4px 0 var(--edge);
  cursor: pointer;
  transition: transform .12s cubic-bezier(.3, .7, .4, 1.5), box-shadow .12s ease, background-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.next-unit-card__go svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.next-unit-card__go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 var(--edge); }
.next-unit-card__go:active:not(:disabled), .next-unit-card.is-starting .next-unit-card__go { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.next-unit-card__go:disabled { cursor: default; }
.next-unit-card:not(.is-starting) .next-unit-card__go:disabled { background: var(--surface-subtle); color: var(--faint); box-shadow: 0 4px 0 var(--border); }
.next-unit-card__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 按下「开始」：和完成卡的按钮同一圈光，从按钮上漾开 */
.next-unit-card.is-starting .next-unit-card__go::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: finish-press .5s ease-out both; pointer-events: none; }
/* 刚学完一个单元、这张卡进来（整段约 800ms，T2）：卡和「开始」一出来就在、能点（160ms 升上来）；
   完成卡的章盖完、那一格涂完以后（560ms 起），关卡币弹一下、下一格亮一圈，只是强调。同一刻最多两样在动 */
.next-unit-card.is-arriving { animation: next-rise .16s cubic-bezier(.2, .8, .2, 1) both; }
.next-unit-card.is-arriving .next-unit-card__badge { animation: badge-pop .24s cubic-bezier(.2, 1.4, .4, 1) .56s both; }
.next-unit-card.is-arriving .unit-track i.is-here { animation: here-glow .24s ease-out .56s both; }
@keyframes next-rise { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 关卡币只是弹一下（从原大小鼓起再落回），不是从小变大地出现：在这之前它一直是原样 */
@keyframes badge-pop { 0%, 100% { transform: none; } 50% { transform: scale(1.16); } }
@keyframes here-glow { 0% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 100% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 8px transparent; } }

/* 触屏：「没懂」「继续问」看着小，手指点得到（点按区补到 44px 高，不改样子） */
@media (pointer: coarse) {
  .quiz-gate__btn.is-ask, .unit-finish__ask { position: relative; }
  .quiz-gate__btn.is-ask::after { content: ''; position: absolute; inset: -8px -6px; }
  .unit-finish__ask::after { content: ''; position: absolute; inset: -6px -4px; }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
  .quiz-gate { column-gap: 8px; margin: 22px 0 12px; }
  .quiz-gate__btn.is-got { min-width: 148px; height: 50px; }
  .unit-line { gap: 8px; margin: 18px 0 12px; }
  .unit-line__rule { flex-basis: 12px; }
  .unit-line--start { margin-top: 28px; }
  .unit-line--start .unit-line__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
  .unit-line--start.is-closed { padding: 10px 6px 10px 12px; }
  .unit-line--start.is-closed .unit-line__text { flex-wrap: wrap; row-gap: 0; }
  .unit-line--start.is-closed .unit-line__title { -webkit-line-clamp: 1; }
  .unit-line--start.is-closed .unit-line__rule { display: none; }
  .unit-line--start.is-closed .unit-line__toggle { flex: 1 1 auto; }
  .unit-finish.api-question-section { padding: 18px 16px 16px; }
  .unit-finish__seal.unit-seal { width: 48px; height: 48px; font-size: 21px; }
  .unit-finish__title { font-size: 18px; white-space: normal; }
  .unit-finish__btn { flex: 1 1 140px; min-width: 0; height: 50px; padding: 0 16px 0 9px; font-size: 15px; }
  .unit-finish__ask { margin-left: 0; }
  .next-unit-card { gap: 12px; padding: 12px; }
  .next-unit-card__badge { width: 42px; height: 42px; font-size: 19px; }
  .next-unit-card__go { height: 44px; padding: 0 18px 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-gate.shell-enter .quiz-gate__btn,
  .quiz-gate__btn.is-pressed .quiz-gate__badge,
  .quiz-gate__btn.is-pressed .quiz-gate__tick,
  .gate-ripple i,
  .is-sweeping,
  .msg-assistant.is-pick-wave .kp-pickable,
  .unit-line--start.is-stamping,
  .unit-line--start.is-stamping .unit-seal,
  .unit-line--start.is-stamping .answer-sheet i,
  .unit-finish.is-live .unit-finish__seal,
  .unit-finish.is-live .unit-track i.is-this::after,
  .unit-finish__btn.is-go:hover::after,
  .unit-finish__btn.is-chosen::before,
  .next-unit-card.is-starting .next-unit-card__go::before,
  .unit-finish__btn.is-go.is-chosen .unit-finish__icon svg,
  .unit-finish__btn.is-rest.is-chosen .unit-finish__icon,
  .unit-finish__box,
  .next-unit-card.is-arriving,
  .next-unit-card.is-arriving *,
  .next-unit-card.is-arriving .unit-track i::after { animation: none !important; }
  .msg-assistant.is-gate-released ~ :is(.msg-user, .msg-assistant) { animation: none !important; }
  .quiz-gate__btn, .unit-finish__btn, .unit-finish__icon, .unit-finish__steam, .next-unit-card__go, .unit-line__chev, .msg-assistant.is-picking .kp-pickable { transition: none; }
  .unit-finish.is-live .unit-track i.is-this::after { display: none; }
}

/* ---------- 待决卡统一（t-20261027-i1dr b5b6） ----------
   一、旧卡的状态签：已完成 / 已跳过 / 已过期，一个小图标加一个词，不带动效。
   二、完成卡停靠：学生在完成卡后面又问了别的，卡退成卡头，页底停靠一张同样的完成卡，可收成一颗小圆泡。
   三、输入框上方待决事项同一刻只展开最新一件，其余收成小圆泡。 */
.card-state { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); background: var(--surface-subtle); color: var(--muted); font: 600 var(--fs-caption)/1 var(--font-sans); white-space: nowrap; }
.card-state svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card-state.is-done svg { color: var(--success); }
.card-state.is-expired { color: var(--faint); }
.api-questionnaire-head { position: relative; }
.api-questionnaire-head > .card-state { position: absolute; top: -3px; right: 0; margin: 0; }
/* 过期的题卡 / 问卷：整张禁用，淡一档（同旧计划卡） */
.api-question-section.is-expired { opacity: .78; }
.api-question-section.is-expired .api-question-actions,
.api-question-section.is-expired [data-quiz-skip] { display: none; }
/* 过期的检测题卡不再浮起、不再有主色顶边：退成中性的纸，不用读字也看得出已经失效（题卡本来的主色顶边与浮起在 kaopy31.css） */
.api-questionnaire.has-expired:not(.is-survey):not(.is-segmented):not(.is-stepped):has(.api-question-section[data-block-type="quiz"]) { border-color: var(--border); box-shadow: none; }
.api-questionnaire:is(.is-segmented, .is-stepped) .api-question-section.is-expired[data-block-type="quiz"] { box-shadow: inset 0 0 0 1px var(--border); }
/* 完成卡退成卡头（按钮在页底停靠卡）：和没在等的旧卡一样淡一档，章仍是等着盖的虚线圈 */
.unit-finish.is-docked { opacity: .78; border-color: var(--border); border-top-color: var(--border-strong); box-shadow: none; }
/* 忙的时候（导师还在回答）卡上的大按钮统一置灰：灰底灰字、去掉立体边；正在交的那一颗不在此列 */
.unit-finish:not(.is-deciding) .unit-finish__btn:disabled { background: var(--surface-subtle); color: var(--faint); box-shadow: none; }
.unit-finish:not(.is-deciding) .unit-finish__btn:disabled .unit-finish__icon { background: var(--surface); color: var(--faint); }

/* 页底停靠的完成卡：和「下一个单元」卡同一个位置、同一套边与左右留白；一枚章 + 单元名 + 两颗图标钮 + 收起 */
.finish-dock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-top: 3px solid var(--accent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  animation: finish-dock-in var(--motion-land) var(--ease-out) both;
}
.finish-dock[hidden] { display: none; }
@keyframes finish-dock-in { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 720px) { .finish-dock { margin-left: 32px; } }
@media (max-width: 719px) { .finish-dock { margin-inline: max(0px, calc(16px - var(--next-unit-edge, 12px))); } }
@media (max-width: 480px) { .finish-dock { --next-unit-edge: 8px; } }
.finish-dock__seal.unit-seal { width: 40px; height: 40px; font-size: 18px; }
.unit-seal.is-await { border: 2px dashed color-mix(in srgb, var(--accent) 70%, var(--border)); background: var(--accent-soft); color: var(--accent-strong); box-shadow: none; }
.finish-dock__copy { display: flex; flex: 1 1 auto; min-width: 0; }
.finish-dock__title { overflow: hidden; color: var(--ink); font: 600 var(--fs-body)/1.35 var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.finish-dock__acts { display: flex; flex: none; align-items: center; gap: 8px; }
.finish-dock__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: transform .12s var(--ease-out), background-color .14s ease; -webkit-tap-highlight-color: transparent; }
.finish-dock__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.finish-dock__btn.is-go { background: var(--accent); color: var(--on-accent); }
.finish-dock__btn.is-go:hover:not(:disabled) { background: var(--accent-strong); }
.finish-dock__btn.is-rest { background: var(--marker-soft); color: var(--marker-ink); }
.finish-dock__btn.is-rest:hover:not(:disabled) { transform: rotate(-10deg); }
.finish-dock__btn[hidden] { display: none; }
.finish-dock__btn:disabled { background: var(--surface-subtle); color: var(--faint); cursor: default; }
.finish-dock__btn:focus-visible, .finish-dock__fold:focus-visible, .dock-bubble:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.finish-dock.is-deciding .finish-dock__acts { opacity: .6; }
.finish-dock__fold { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; transition: color .14s ease, background-color .14s ease; }
.finish-dock__fold svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.finish-dock__fold:hover { background: var(--surface-subtle); color: var(--ink); }

/* 收成泡的待决事项：一排 40px 的小圆泡，靠右；点一颗它成为最新、展开 */
[data-dock-bubble] { display: none !important; }
.dock-bubbles { display: flex; justify-content: flex-end; gap: 8px; }
.dock-bubbles[hidden] { display: none; }
@media (min-width: 720px) { .dock-bubbles { margin-right: 0; } }
.dock-bubble { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-pop); color: var(--muted); cursor: pointer; transition: border-color .14s ease, color .14s ease; animation: finish-dock-in var(--motion-land) var(--ease-out) both; }
.dock-bubble svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dock-bubble:hover { border-color: var(--accent); color: var(--accent-strong); }
/* 等你决定：提醒黄点，和计划那一行、档案停靠卡头同一个点 */
.dock-bubble::after { content: ''; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--marker); box-shadow: 0 0 0 2px var(--surface); }
.dock-bubble .unit-seal { width: 28px; height: 28px; font-size: 14px; }
/* 完成卡收成的泡就是那枚等着盖的章：不再套一圈外框 */
.dock-bubble.is-finish { border: 0; background: var(--surface); }
.dock-bubble.is-finish .unit-seal { width: 40px; height: 40px; font-size: 18px; }
@media (prefers-reduced-motion: reduce) {
  .finish-dock, .dock-bubble { animation: none; }
  .finish-dock__btn, .finish-dock__fold, .dock-bubble { transition: none; }
}