/* 2Talk —— live conversation experience */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;
  --bg: #f2faf7;
  --panel: #ffffff;
  --panel-soft: #f7fcfa;
  --border: #cfe4dd;
  --text: #183b35;
  --muted: #68807a;
  --accent: #16877b;
  --live: #278a63;
  --warn: #b77818;
}

body {
  background:
    radial-gradient(circle at 8% -8%, rgba(91, 214, 180, 0.24), transparent 32rem),
    radial-gradient(circle at 96% 4%, rgba(104, 183, 231, 0.2), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}

.stage {
  width: min(1080px, 100vw);
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    calc(164px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topbar {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.topbar h1 { font-size: 20px; letter-spacing: 1px; }
.topbar h1 small {
  margin-left: 5px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  vertical-align: middle;
}
.status { font-size: 13px; color: var(--muted); }
.status.live { color: var(--live); }
.status.warn { color: var(--warn); }
.minutes-entry {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid rgba(167, 139, 250, 0.46);
  border-radius: 999px;
  color: #ddd6fe;
  background: rgba(124, 58, 237, 0.12);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.minutes-entry:hover { background: rgba(124, 58, 237, 0.24); }
.top-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.account-points {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(22, 135, 123, 0.2);
  border-radius: 999px;
  color: #176f66;
  background: rgba(54, 179, 151, 0.08);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.account-points:hover { background: rgba(54, 179, 151, 0.16); }
.top-menu { position: relative; }
.top-menu > summary {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.top-menu > summary::-webkit-details-marker { display: none; }
.top-menu > summary::after { content: "⌄"; margin-left: 6px; font-size: 11px; }
.top-menu[open] > summary::after { content: "⌃"; }
.top-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: 180px;
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 42px rgba(30, 81, 69, 0.16);
}
.top-menu-group { display: grid; gap: 3px; }
.top-menu-group + .top-menu-group {
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(67, 121, 108, 0.13);
}
.top-menu-group-label {
  padding: 5px 10px 2px;
  color: #82958f;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
}
.top-menu-popover a {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.top-menu-popover a:hover { background: rgba(54, 179, 151, 0.09); }
.education-entry {
  padding: 6px 12px;
  border: 1px solid rgba(76, 154, 255, 0.42);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.1);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.education-entry:hover { background: rgba(37, 99, 235, 0.2); }
.mode-switch-entry {
  min-height:31px;
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border:1px solid rgba(116,82,157,.22);
  border-radius:999px;
  color:#654d82;
  background:rgba(250,248,252,.82);
  font-size:12px;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
}
.mode-switch-entry:hover { background:#faf8fc; }
.mode-switch-entry[aria-current="page"] {
  color:#176f66;
  border-color:rgba(22,135,123,.34);
  background:rgba(54,179,151,.12);
  box-shadow:inset 0 0 0 1px rgba(22,135,123,.06);
}
.interview-mode-entry[aria-current="page"] {
  color:#654d82;
  border-color:rgba(116,82,157,.32);
  background:rgba(116,82,157,.1);
}
.companion-mode-entry[aria-current="page"] {
  color:#8b572f;
  border-color:rgba(181,114,62,.34);
  background:rgba(222,157,93,.12);
}
.top-menu-popover a[aria-current="page"] { color:#176f66; background:rgba(54,179,151,.12); font-weight:780; }

/* 通话双栏：单人时为受访者/角色 A，双人时为角色 A/角色 B。 */
.call-view {
  --conversation-scene-image: url("/static/assets/scenes/generic-lounge.webp?v=0f83831b6b28c9f2");
  --conversation-scene-position: center center;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 开场先建立共同情境，再允许外教发出第一句话。 */
.scene-intro {
  position: absolute;
  inset: 0;
  z-index: 42;
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 56px);
  color: #173e38;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(104, 211, 176, 0.28), transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(107, 181, 218, 0.24), transparent 38%),
    rgba(239, 250, 246, 0.94);
  backdrop-filter: blur(14px) saturate(0.82);
  transition: opacity 260ms ease;
}
.scene-intro.visible { pointer-events: auto; opacity: 1; }
.scene-intro.leaving { opacity: 0; }
.scene-intro-card {
  width: min(720px, 94%);
  max-height: 100%;
  padding: clamp(24px, 5vw, 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(73, 143, 124, 0.26);
  border-radius: clamp(20px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 24px 70px rgba(38, 96, 82, 0.16), inset 0 1px rgba(255, 255, 255, 0.86);
  transform: translateY(10px) scale(0.985);
  transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
}
.scene-intro.visible .scene-intro-card { transform: translateY(0) scale(1); }
.scene-intro-kicker {
  display: inline-block;
  color: #27816e;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 850;
  letter-spacing: 0.13em;
}
.scene-intro-lead {
  margin: clamp(18px, 3vh, 28px) 0 4px;
  color: #66857e;
  font-size: clamp(13px, 1.8vw, 17px);
}
.scene-intro h2 {
  max-width: 18em;
  margin: 0 auto;
  color: #173f37;
  font-size: clamp(27px, 5vw, 56px);
  font-weight: 820;
  line-height: 1.2;
  text-wrap: balance;
}
.scene-intro-note {
  max-width: 42em;
  margin: clamp(14px, 2.5vh, 22px) auto 0;
  color: #54736c;
  font-size: clamp(13px, 1.65vw, 17px);
  line-height: 1.65;
}
.scene-intro-ready {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(18px, 3vh, 28px);
  color: #347467;
  font-size: 12px;
  font-weight: 750;
}
.scene-intro-ready i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3cb896;
  box-shadow: 0 0 0 6px rgba(60, 184, 150, 0.13);
  animation: scene-ready-pulse 1.25s ease-in-out infinite;
}
.scene-intro-prompt {
  margin: 12px auto 0;
  color: #6a837d;
  font-size: 11px;
  line-height: 1.5;
}
.scene-intro-start {
  min-width: min(280px, 100%);
  min-height: 50px;
  margin-top: 12px;
  padding: 11px 24px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #238d76, #177366);
  box-shadow: 0 12px 28px rgba(27, 117, 96, .24);
  font: inherit;
  font-size: 15px;
  font-weight: 820;
  cursor: pointer;
  touch-action: manipulation;
}
.scene-intro-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 9px;
  margin-top: 15px;
}
.scene-intro-actions .scene-intro-start { margin-top: 0; }
.scene-intro-cancel {
  min-width: 82px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid rgba(45, 105, 91, .24);
  border-radius: 999px;
  color: #315f56;
  background: rgba(255, 255, 255, .78);
  font: inherit;
  font-weight: 780;
  cursor: pointer;
}
.scene-intro-cancel:hover { background: #fff; }
.scene-intro-start:hover:not(:disabled) { filter: brightness(1.04); }
.scene-intro-start:active:not(:disabled) { transform: translateY(1px); }
.scene-intro-start:disabled { cursor: wait; opacity: .72; }
.scene-intro[data-state="entering"] .scene-intro-ready i { animation: none; }
@keyframes scene-ready-pulse {
  50% { box-shadow: 0 0 0 10px rgba(60, 184, 150, 0.04); }
}
.scene-chip {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 24;
  max-width: min(70%, 680px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  color: #315f56;
  background: rgba(245, 252, 249, 0.88);
  box-shadow: 0 7px 22px rgba(30, 82, 69, 0.12);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.scene-chip span {
  color: #358674;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
}
.scene-chip strong {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-presence {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 32;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: #164d45;
  background: rgba(247, 253, 250, .9);
  box-shadow: 0 8px 24px rgba(24, 71, 62, .16);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  pointer-events: none;
}
.conversation-presence i { width: 8px; height: 8px; border-radius: 50%; background: #7d948e; }
.conversation-presence[data-state="listening"] i { background: #2d8bb1; animation: presence-pulse 1.1s ease-in-out infinite; }
.conversation-presence[data-state="thinking"] i { background: #d19a38; animation: presence-pulse 1.1s ease-in-out infinite; }
.conversation-presence[data-state="speaking"] i { background: #2d9b76; animation: presence-pulse .8s ease-in-out infinite; }
.conversation-presence[data-state="paused"] i { background: #6f817d; }
.conversation-presence[data-state="connecting"] i,
.conversation-presence[data-state="saving"] i { background: #d19a38; animation: presence-pulse 1.1s ease-in-out infinite; }
.conversation-presence[data-state="offline"] { color: #8e3d45; background: rgba(255, 245, 245, .94); }
.conversation-presence[data-state="offline"] i { background: #c84f59; }
.conversation-presence[data-state="warning"] { color: #7b4b14; background: rgba(255, 249, 237, .95); }
.conversation-presence[data-state="warning"] i { background: #d39434; }
@keyframes presence-pulse { 50% { transform: scale(1.45); opacity: .58; } }

@media (max-width: 720px) {
  .scene-intro { padding: 14px; }
  .scene-intro-card { width: 100%; padding: 22px 18px; -webkit-overflow-scrolling: touch; }
  .scene-intro-actions { grid-template-columns: minmax(0, 1fr); }
  .scene-intro-start,
  .scene-intro-cancel { width: 100%; min-height: 48px; }
  .scene-chip { top: 7px; max-width: calc(100% - 24px); }
}
@media (max-height: 560px) {
  .scene-intro { padding: 10px; }
  .scene-intro-card { padding: 16px; }
  .scene-intro-lead { margin-top: 9px; }
  .scene-intro h2 { font-size: clamp(23px, 7vh, 38px); }
  .scene-intro-note { margin-top: 8px; line-height: 1.45; }
  .scene-intro-ready { margin-top: 10px; }
  .scene-intro-prompt { margin-top: 7px; }
  .scene-intro-start { min-height: 46px; margin-top: 8px; }
}
@media (max-width: 720px) {
  .call-view { grid-template-columns: 1fr; }
}

/* solo 模式（?solo=1，demo 录制用）：隐藏用户画面，数字人 16:9 全宽居中。
   注意必须用 grid 轨道尺寸 + justify-content 居中——
   max-width + margin auto 在 flex/grid 嵌套下会把容器宽度压成 0（头像消失）*/
body.solo .call-view,
body.conversation-single.guest-hidden .call-view {
  grid-template-columns: min(1080px, 100%);
  justify-content: center;
}
body.solo .cam-wrap,
body.conversation-single.guest-hidden .cam-wrap,
body.conversation-double .cam-wrap { display: none; }
body.solo .avatar-wrap,
body.conversation-single.guest-hidden .avatar-wrap { aspect-ratio: 16 / 9; }
body.conversation-double .call-view { grid-template-columns: 1fr 1fr; }
body.conversation-double .persona-pane { aspect-ratio: 1; }
body.conversation-triple .call-view { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.conversation-triple .persona-pane,
body.conversation-triple .cam-wrap { aspect-ratio: 1; }
@media (max-width: 720px) {
  body.conversation-double .call-view,
  body.conversation-triple .call-view { grid-template-columns: 1fr; }
}

/* 通话实时大字幕：独立放在画面下方，绝不覆盖人物肖像。 */
.live-caption {
  position: relative;
  width: 100%;
  min-height: clamp(104px, 13vw, 152px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px clamp(14px, 4vw, 52px) 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(76, 154, 255, 0.09), transparent 62%),
    color-mix(in srgb, var(--panel) 92%, black);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
.live-caption-speaker {
  padding: 2px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(13, 17, 23, 0.72);
  font-size: clamp(11px, 1.4vw, 15px);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.live-caption-text {
  display: block;
  width: 100%;
  height: 3.54em;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  color: #ffe66d;
  font-size: clamp(26px, 4.2vw, 52px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.025em;
  text-align: left;
  text-wrap: wrap;
  -webkit-text-stroke: clamp(0.6px, 0.08vw, 1.2px) rgba(15, 18, 26, 0.98);
  text-shadow:
    0 2px 0 #111827,
    0 0 8px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(255, 196, 61, 0.26);
}
.live-caption-text::-webkit-scrollbar { display: none; }
.live-caption-measure {
  position: fixed !important;
  top: 0;
  left: -10000px;
  visibility: hidden;
  pointer-events: none;
}
.live-caption.user .live-caption-text {
  color: #8de8ff;
  text-shadow:
    0 2px 0 #082f49,
    0 0 8px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(76, 201, 240, 0.3);
}
.live-caption.speaker-b .live-caption-text {
  color: #d9b8ff;
  text-shadow:
    0 2px 0 #2e1065,
    0 0 8px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(168, 85, 247, 0.34);
}
.live-caption.speaker-c .live-caption-text {
  color: #ffd18a;
  text-shadow:
    0 2px 0 #451a03,
    0 0 8px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(245, 158, 11, 0.34);
}

/* 外教的句子允许多停留、多展示两行；播完后由下一轮发言主动替换。 */
body.conversation-tutor .live-caption {
  min-height: clamp(142px, 18vw, 216px);
}
body.conversation-tutor .live-caption-text {
  height: 5.9em;
  font-size: clamp(22px, 3.5vw, 42px);
}

@media (max-width: 720px) {
  .live-caption { padding-inline: 8px; }
  .live-caption-text { font-size: clamp(24px, 8vw, 38px); }
}

.cam-wrap,
.avatar-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.avatar-wrap.active-speaker {
  border-color: color-mix(in srgb, var(--live) 82%, white);
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.2), 0 12px 34px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}
.avatar-wrap.active-speaker .pane-label {
  color: #fff;
  background: rgba(35, 134, 54, 0.88);
}
.cam-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* 镜像，符合自拍直觉 */
}
.cam-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
}
.cam-wrap.live .cam-fallback { display: none; }
.pane-label {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  background: rgba(13, 17, 23, 0.6);
  z-index: 6;
}
.avatar-still,
#avatar-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#avatar-video { display: none; z-index: 5; }
/* WebRTC 模式：video 上屏（DOM 序 video 在 img 后，天然置顶） */
.avatar-wrap.webrtc.streaming #avatar-video { display: block; }
.lipsync-preview-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 8;
}
.avatar-wrap.lipsync-previewing .lipsync-preview-video { display: block; }
.lipsync-preview-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 9;
  padding: 3px 9px;
  border: 1px solid rgba(210, 153, 34, 0.55);
  border-radius: 999px;
  color: #ffd166;
  background: rgba(13, 17, 23, 0.78);
  font-size: 11px;
}

/* 浏览器端轻量 2D 舞台：肖像居中，局部贴片与低频整套微动保持同一坐标系。 */
.avatar-visual {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, #e8f4ef, #dcece5);
}
.avatar-visual::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(247, 252, 249, 0.08), rgba(32, 74, 62, 0.13)),
    url("/static/assets/scenes/generic-lounge.webp?v=0f83831b6b28c9f2") center 48% / cover no-repeat;
  filter: saturate(0.82) brightness(1.01) blur(0.8px);
  transform: scale(1.025);
}
.avatar-visual.hidden { display: none; }
.avatar-motion {
  position: relative;
  z-index: 1;
  width: var(--avatar-rig-size, 900px);
  height: var(--avatar-rig-size, 900px);
  min-width: var(--avatar-rig-size, 900px);
  min-height: var(--avatar-rig-size, 900px);
  flex: 0 0 var(--avatar-rig-size, 900px);
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 78%;
  transition: transform 320ms cubic-bezier(.22, .7, .25, 1);
  will-change: transform;
}
/* 换图按钮：数字人画面右下角 */
.img-upload {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  z-index: 5;
}
.img-upload:hover { color: var(--text); border-color: var(--muted); }

/* 跳舞舞台：点舞触发，全屏播放素材 */
.dance-stage {
  position: fixed;
  inset: 0;
  background: #000;
  background-size: cover;
  background-position: center;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
/* 海报背景的暗化压角，突出舞台主体 */
.dance-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(22px) brightness(0.35);
}
/* 摇头光束：左/右/中三束，各自扫摆 */
.stage-beam {
  position: absolute;
  top: -12%;
  width: 34vmax;
  height: 125vmax;
  transform-origin: top center;
  filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.lights-on .stage-beam { opacity: 1; }
.beam-l {
  left: 6%;
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg,
    rgba(64, 156, 255, 0.5) 12deg, transparent 24deg);
  animation: sway-l 3.6s ease-in-out infinite alternate;
}
.beam-r {
  right: 6%;
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg,
    rgba(255, 92, 182, 0.45) 12deg, transparent 24deg);
  animation: sway-r 4.2s ease-in-out infinite alternate;
}
.beam-c {
  left: 50%;
  margin-left: -17vmax;
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg,
    rgba(255, 200, 87, 0.4) 12deg, transparent 24deg);
  animation: sway-c 5s ease-in-out infinite alternate;
}
@keyframes sway-l { from { transform: rotate(-16deg); } to { transform: rotate(20deg); } }
@keyframes sway-r { from { transform: rotate(16deg); } to { transform: rotate(-20deg); } }
@keyframes sway-c { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
/* 霓虹 LOGO：左上角台标，下方挂轮换口号 */
.dance-logo {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 3;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 6px #ff5cb6, 0 0 16px #ff2d9e, 0 0 30px #d1007a;
  animation: neon-flicker 3s linear infinite;
  pointer-events: none;
  white-space: nowrap;
}
.dance-logo span {
  margin-left: 0.25em;
  color: rgba(155, 231, 255, 0.92);
  text-shadow: 0 0 6px #40c9ff, 0 0 16px #1e9fff, 0 0 30px #0d7fd6;
}
.dance-slogan {
  position: absolute;
  top: calc(20px + clamp(34px, 4vw, 54px));
  left: 26px;
  z-index: 3;
  font-size: clamp(14px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #ffd957;
  text-shadow: 0 0 8px rgba(255, 180, 0, 0.8), 0 1px 2px #000;
  pointer-events: none;
  transition: opacity 0.35s;
}
.dance-slogan.fade { opacity: 0; }
/* 右上横排金牌：与左侧台标对称 */
.dance-stamp {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 3;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ffd957;
  text-shadow: 0 0 10px rgba(255, 180, 0, 0.75), 0 1px 2px #000;
  border: 2px solid rgba(255, 217, 87, 0.65);
  border-radius: 8px;
  padding: 6px 16px;
  pointer-events: none;
  white-space: nowrap;
  animation: stamp-glow 2.4s ease-in-out infinite alternate;
}
@keyframes stamp-glow {
  from { box-shadow: 0 0 6px rgba(255, 200, 60, 0.25); }
  to { box-shadow: 0 0 22px rgba(255, 200, 60, 0.7); }
}
/* 底部跑马灯 */
.dance-ticker {
  position: absolute;
  left: 0; right: 0; bottom: 34px;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(15px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 0 8px #ff5cb6, 0 0 20px rgba(255, 45, 158, 0.6);
  animation: ticker-roll 18s linear infinite;
}
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* 两侧均衡器跳动条 */
.dance-eq {
  position: absolute;
  bottom: 84px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 64px;
  pointer-events: none;
}
.eq-l { left: 26px; }
.eq-r { right: 26px; }
.dance-eq i {
  width: 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, #40c9ff, #ff5cb6);
  box-shadow: 0 0 8px rgba(64, 201, 255, 0.55);
  animation: eq-bounce 0.9s ease-in-out infinite alternate;
}
.dance-eq i:nth-child(1) { animation-delay: 0s; }
.dance-eq i:nth-child(2) { animation-delay: 0.22s; }
.dance-eq i:nth-child(3) { animation-delay: 0.5s; }
.dance-eq i:nth-child(4) { animation-delay: 0.13s; }
.dance-eq i:nth-child(5) { animation-delay: 0.36s; }
.eq-r i:nth-child(1) { animation-delay: 0.41s; }
.eq-r i:nth-child(2) { animation-delay: 0.07s; }
.eq-r i:nth-child(3) { animation-delay: 0.58s; }
.eq-r i:nth-child(4) { animation-delay: 0.29s; }
.eq-r i:nth-child(5) { animation-delay: 0.15s; }
@keyframes eq-bounce {
  from { height: 12%; }
  to { height: 100%; }
}
@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.55; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}
.dance-stage video {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dance-hint {
  position: absolute;
  bottom: 18px;
  z-index: 3;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.avatar-fallback {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: rgba(13, 17, 23, 0.75);
}
.hidden { display: none !important; }

/* 对话状态角标（右上角）：倾听=绿、思考=琥珀，speaking/idle 时 hidden */
.avatar-wrap > [id$="avatar-state"] {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  background: rgba(13, 17, 23, 0.6);
  z-index: 7;
}
.human-state {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 7;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(35, 134, 54, 0.9);
  border: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.human-state:disabled {
  cursor: default;
  opacity: 0.82;
}
.cam-wrap.active-speaker {
  border-color: color-mix(in srgb, var(--live) 82%, white);
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.2), 0 12px 34px rgba(0, 0, 0, 0.28);
}
.avatar-wrap > [id$="avatar-state"].state-listening {
  color: #3fb950;
  animation: state-breathe 1.6s ease-in-out infinite;
}
.avatar-wrap > [id$="avatar-state"].state-thinking {
  color: #d29922;
  animation: state-breathe 1s ease-in-out infinite;
}
@keyframes state-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.interview-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  overflow: clip;
}
.interview-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.interview-summary::-webkit-details-marker { display: none; }
.interview-summary:hover { background: rgba(255, 255, 255, 0.035); }
.interview-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.interview-summary strong { font-size: 15px; }
.setup-summary {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
.interview-panel[open] .summary-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}
.interview-setup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}
.setup-heading,
.setup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.setup-heading strong {
  color: var(--text);
  font-size: 15px;
}
.setup-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.setup-basics {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 0.22fr)) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(76, 154, 255, 0.07), transparent 58%);
}
.provider-advanced {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}
.conversation-advanced {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}
.conversation-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.conversation-advanced > summary span { font-size: 10px; }
.conversation-advanced-content {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  gap: 12px;
  padding: 2px 13px 13px;
}
.conversation-advanced .style-field { grid-column: auto; }
.provider-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.provider-advanced > summary span { color: color-mix(in srgb, var(--muted) 78%, transparent); font-size: 10px; }
.provider-advanced-content { display: grid; grid-template-columns: minmax(220px, .55fr) 1fr; gap: 16px; align-items: center; padding: 2px 13px 13px; }
.provider-advanced-content > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.provider-description {
  min-height: 2.8em;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.style-field { grid-column: 1 / -1; }
.human-participant-panel {
  display: grid;
  grid-template-columns: auto minmax(150px, 0.55fr) minmax(280px, 1.45fr);
  align-items: start;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(63, 185, 80, 0.32);
  border-radius: 12px;
  background: rgba(35, 134, 54, 0.07);
}
.human-name-field {
  display: grid;
  gap: 5px;
  min-width: 160px;
}
.human-name-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.human-name-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
  color: var(--text);
  font: inherit;
}
.human-identity-fields {
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) minmax(240px, 1.4fr);
  gap: 10px;
  min-width: 0;
}
.human-identity-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.human-identity-fields label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.human-identity-fields input,
.human-identity-fields textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.setup-control,
.role-control,
.role-advanced-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.setup-control > span,
.role-control > span,
.role-advanced-fields label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.045em;
}
.setup-control input,
.setup-control select,
.role-card input,
.role-card select,
.role-card textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
  color: var(--text);
  font: inherit;
}
.setup-control select,
.role-card select {
  padding-right: 30px;
}
.setup-control input::placeholder,
.role-card input::placeholder,
.role-card textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}
.setup-control input:focus,
.setup-control select:focus,
.role-card input:focus,
.role-card select:focus,
.role-card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.12);
}
.setup-control input:disabled,
.setup-control select:disabled,
.role-card:disabled { opacity: 0.62; }
.learning-setup {
  padding: 14px;
  border: 1px solid rgba(76, 154, 255, 0.34);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(76, 154, 255, 0.12), transparent 42%),
    rgba(13, 17, 23, 0.36);
}
.learning-setup-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}
.learning-setup-heading p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.learning-setup-heading p a { color: #bfdbfe; text-underline-offset: 2px; }
.learning-language {
  padding: 4px 9px;
  border: 1px solid rgba(76, 154, 255, 0.46);
  border-radius: 999px;
  color: #bfdbfe;
  font-size: 11px;
  white-space: nowrap;
}
.learning-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.learning-control {
  display: grid;
  align-content: start;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.learning-control > span,
.learning-focus-field legend { color: var(--text); font-weight: 650; }
.learning-control em { color: #93c5fd; font-style: normal; font-size: 10px; }
.learning-control input,
.learning-control select,
.learning-control textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  background: rgba(13, 17, 23, 0.74);
  font: inherit;
  font-size: 13px;
}
.learning-control textarea { resize: vertical; line-height: 1.45; }
.learning-control input:focus,
.learning-control select:focus,
.learning-control textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.12);
}
.learning-control input:disabled,
.learning-control select:disabled,
.learning-control textarea:disabled,
.learning-focus-field:disabled { opacity: 0.62; cursor: not-allowed; }
.learning-goal-field { grid-column: span 2; }
.learning-focus-field {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0;
  border: 0;
}
.learning-focuses { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.learning-focuses label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(22, 27, 34, 0.82);
  cursor: pointer;
  font-size: 12px;
}
.learning-focuses label:has(input:checked) {
  border-color: rgba(76, 154, 255, 0.55);
  color: #dbeafe;
  background: rgba(76, 154, 255, 0.13);
}
.learning-focuses input { accent-color: var(--accent); }
.conversation-tutor .topic-field,
.conversation-tutor .style-field { display: none; }
.conversation-tutor .role-deck { grid-template-columns: minmax(0, 1fr); }
.role-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.conversation-single .role-deck {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.conversation-triple .role-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.conversation-triple.includes-human .role-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conversation-triple .role-card-controls { grid-template-columns: 1fr; }
.conversation-triple .role-card-controls .role-control:first-child { grid-column: auto; }
.role-card {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(76, 154, 255, 0.08), transparent 42%),
    color-mix(in srgb, var(--bg) 68%, var(--panel));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
.role-card-b {
  background:
    radial-gradient(circle at 100% 0%, rgba(180, 120, 255, 0.09), transparent 42%),
    color-mix(in srgb, var(--bg) 68%, var(--panel));
}
.role-card-c {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.1), transparent 42%),
    color-mix(in srgb, var(--bg) 68%, var(--panel));
}
.role-card legend {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px 0 2px;
  color: var(--text);
}
.role-card legend > span:last-child {
  display: grid;
  gap: 1px;
}
.role-card legend strong { font-size: 14px; }
.role-card legend small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}
.role-badge {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  color: #0d1117;
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.role-card-b .role-badge {
  color: #fff;
  background: #8957e5;
}
.role-card-c .role-badge {
  color: #111827;
  background: #f59e0b;
}
.role-card-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.role-card-controls .role-control:first-child { grid-column: 1 / -1; }
.role-advanced {
  margin-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.role-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 2px 0;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  list-style: none;
}
.role-advanced summary::-webkit-details-marker { display: none; }
.role-advanced summary::before {
  content: "+";
  margin-right: 7px;
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}
.role-advanced[open] summary::before { content: "−"; }
.role-advanced summary span {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}
.role-advanced.configured summary span { color: var(--live); }
.role-advanced-fields {
  display: grid;
  gap: 10px;
  padding-top: 11px;
}
.conversation-single .role-advanced-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.role-card textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
}
.role-card:disabled input,
.role-card:disabled select,
.role-card:disabled textarea,
.role-card:disabled summary { cursor: not-allowed; }
.role-card:disabled .role-advanced summary { pointer-events: none; }
.setup-footer {
  padding-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
}
.setup-footer-options,
.setup-footer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.guest-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 9px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.guest-toggle:hover { background: rgba(255, 255, 255, 0.04); }
.guest-toggle input { accent-color: var(--accent); }
.setup-state {
  flex: 0 0 auto;
  text-align: right;
}
.setup-state.ready { color: var(--live); }
.setup-state.warn { color: var(--warn); }

@media (max-width: 760px) {
  .interview-setup { padding: 14px; }
  .setup-heading,
  .setup-footer { align-items: flex-start; flex-direction: column; }
  .setup-basics,
  .learning-fields,
  .role-deck,
  .conversation-single .role-deck,
  .conversation-triple .role-deck,
  .conversation-triple.includes-human .role-deck,
  .conversation-single .role-advanced-fields { grid-template-columns: 1fr; }
  .setup-basics { padding: 12px; }
  .learning-goal-field { grid-column: auto; }
  .learning-setup-heading { flex-direction: column; }
  .role-card-controls { grid-template-columns: 1fr; }
  .role-card-controls .role-control:first-child { grid-column: auto; }
  .setup-state { text-align: left; }
  .interview-summary { grid-template-columns: auto minmax(0, 1fr) 16px; }
  .human-participant-panel,
  .human-identity-fields { grid-template-columns: 1fr; }
  .human-participant-panel { align-items: stretch; }
  .conversation-advanced-content { grid-template-columns: 1fr; }
}

.session-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}
.session-options select {
  min-width: 130px;
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
.session-options select:disabled { opacity: 0.62; }
.option-button {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel);
  font: inherit;
  cursor: pointer;
}
.option-button:hover:not(:disabled) { border-color: var(--accent); }
.option-button:disabled { opacity: 0.48; cursor: default; }
.option-state {
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(22, 27, 34, 0.72);
}
.option-state.locked { color: var(--live); border-color: rgba(63, 185, 80, 0.45); }
.option-state.experimental { color: #ffd166; border-color: rgba(210, 153, 34, 0.55); }

.transcript {
  flex: 1;
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.7;
}
.transcript .line { margin-bottom: 6px; }
.transcript .who { font-weight: 600; margin-right: 6px; }
.transcript .user .who { color: var(--accent); }
.transcript .user.asr-uncertain { color: #a16207; }
.transcript .user.asr-uncertain .who { color: #b45309; }
.transcript .assistant .who { color: var(--live); }
.transcript .sys { color: var(--muted); font-size: 12px; text-align: center; }
.transcript .learning-feedback {
  padding: 11px 12px;
  border: 1px solid rgba(76, 154, 255, 0.4);
  border-radius: 11px;
  background: rgba(30, 64, 175, 0.12);
}
.learning-feedback-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}
.learning-feedback-original {
  margin-top: 6px;
  color: #fca5a5;
  text-decoration: line-through;
  text-decoration-color: rgba(248, 113, 113, 0.45);
}
.learning-feedback-improved { margin-top: 3px; color: #bbf7d0; font-weight: 650; }
.learning-feedback-reason { margin-top: 5px; color: var(--muted); font-size: 12px; }
.learning-feedback-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.learning-feedback-actions { margin-top: 8px; }
.learning-feedback-actions button,
.learning-actions button {
  padding: 6px 10px;
  border: 1px solid rgba(76, 154, 255, 0.38);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(76, 154, 255, 0.1);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.learning-feedback-actions button:hover:not(:disabled),
.learning-actions button:hover:not(:disabled) { background: rgba(76, 154, 255, 0.2); }
.learning-feedback-actions button:disabled,
.learning-actions button:disabled { opacity: 0.5; cursor: default; }
.learning-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(76, 154, 255, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(76, 154, 255, 0.1), transparent 72%),
    color-mix(in srgb, var(--panel) 94%, black);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
.learning-actions button {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  touch-action: manipulation;
}
.learning-actions button:active:not(:disabled) { transform: translateY(1px); }
.diagnostic-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(30, 64, 175, 0.24), rgba(15, 23, 42, 0.94));
}
.diagnostic-progress-copy { display: grid; gap: 3px; min-width: 0; }
.diagnostic-progress-copy span { color: #93c5fd; font-size: 11px; font-weight: 750; letter-spacing: 0.08em; }
.diagnostic-progress-copy strong { color: #f8fafc; font-size: 15px; }
.diagnostic-progress-copy small { color: #a8b3c5; line-height: 1.45; }
.diagnostic-progress-meter { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.2); }
.diagnostic-progress-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #818cf8); transition: width 220ms ease; }
.diagnostic-result-link { color: #07111f; background: #bfdbfe; border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.diagnostic-result-link:focus-visible { outline: 3px solid #f8fafc; outline-offset: 3px; }
.lesson-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 240px) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(52, 211, 153, 0.32);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(6, 95, 70, 0.23), rgba(15, 23, 42, 0.94));
}
.lesson-progress-copy { display: grid; gap: 3px; min-width: 0; }
.lesson-progress-copy span { color: #6ee7b7; font-size: 11px; font-weight: 750; letter-spacing: 0.08em; }
.lesson-progress-copy strong { color: #f8fafc; font-size: 15px; }
.lesson-progress-copy small { color: #a8b3c5; line-height: 1.45; }
.lesson-progress-status { display: grid; gap: 6px; }
.lesson-progress-status small { color: #a7f3d0; font-size: 11px; text-align: right; }
.lesson-phase-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.lesson-phase-track > span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: #7d938d;
  background: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.lesson-phase-track > span b {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: rgba(125, 147, 141, 0.13);
  font-size: 9px;
}
.lesson-phase-track > span.active {
  border-color: rgba(28, 136, 108, 0.4);
  color: #176f55;
  background: rgba(64, 180, 134, 0.12);
}
.lesson-phase-track > span.active b { color: #fff; background: #218a68; }
.lesson-phase-track > span.completed { color: #247755; background: rgba(64, 180, 134, 0.08); }
.lesson-phase-track > span.completed b { color: #fff; background: #54a982; }
.lesson-progress-meter { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.2); }
.lesson-progress-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34d399, #22d3ee); transition: width 220ms ease; }
.lesson-home-link { color: #052e2b; background: #a7f3d0; border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.lesson-home-link:focus-visible { outline: 3px solid #f8fafc; outline-offset: 3px; }
.vocabulary-book {
  width: 100%;
  padding: 13px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(251, 191, 36, 0.1), transparent 55%),
    color-mix(in srgb, var(--panel) 94%, black);
}
.vocabulary-book-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vocabulary-book-head > div { display: grid; gap: 2px; }
.vocabulary-book-head strong { color: #fde68a; font-size: 16px; }
.vocabulary-book-head span { color: var(--muted); font-size: 12px; }
.vocabulary-book-head button,
.vocabulary-card button {
  padding: 5px 9px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(251, 191, 36, 0.08);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.vocabulary-empty { margin: 12px 0 1px; color: var(--muted); font-size: 13px; }
.vocabulary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  margin-top: 11px;
}
.vocabulary-card {
  padding: 11px 12px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 11px;
  background: rgba(120, 53, 15, 0.09);
}
.vocabulary-card-title { display: flex; align-items: baseline; gap: 7px; }
.vocabulary-card-title strong { color: #fff3b0; font-size: 17px; }
.vocabulary-card-title span { color: #d1d5db; font-size: 12px; }
.vocabulary-card-title .vocabulary-saved-badge {
  padding: 2px 7px;
  border: 1px solid rgba(98, 211, 178, 0.42);
  border-radius: 999px;
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.12);
  font-size: 10px;
  font-weight: 750;
}
.vocabulary-card-meaning { margin: 5px 0 0; color: #f9fafb; }
.vocabulary-card-example { margin: 5px 0 0; color: #bfdbfe; font-size: 12px; line-height: 1.55; }
.vocabulary-card-actions { display: flex; gap: 6px; margin-top: 8px; }
@media (max-width: 720px) {
  .provider-advanced-content { grid-template-columns: 1fr; }
  .diagnostic-progress { grid-template-columns: 1fr; gap: 10px; }
  .lesson-progress { grid-template-columns: 1fr; gap: 10px; }
  .lesson-progress-status small { text-align: left; }
  .lesson-home-link { text-align: center; }
  .diagnostic-result-link { text-align: center; }
  .learning-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }
  .vocabulary-book-head { align-items: flex-start; }
  .vocabulary-list { grid-template-columns: 1fr; }
}

.controls {
  position: sticky;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 20;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 16px;
  text-align: center;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}
.session-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(201, 117, 44, 0.34);
  border-radius: 11px;
  color: #7c4b18;
  background: rgba(255, 244, 222, 0.96);
  font-size: 12px;
  line-height: 1.45;
}
.session-alert span { min-width: 0; overflow-wrap: anywhere; }
.session-alert button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(170, 95, 30, 0.32);
  border-radius: 999px;
  color: #754315;
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.session-alert button:disabled { opacity: 0.55; cursor: wait; }
.session-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.session-progress {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.session-progress .director-status { margin-bottom: 0; }
.conversation-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(76, 154, 255, 0.46);
  border-radius: 999px;
  background: rgba(76, 154, 255, 0.1);
  color: #bfdbfe;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.conversation-timer strong {
  min-width: 38px;
  color: #eff6ff;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.conversation-timer.warn {
  border-color: rgba(245, 158, 11, 0.62);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}
.conversation-timer.closing {
  border-color: rgba(167, 139, 250, 0.68);
  background: rgba(124, 58, 237, 0.16);
  color: #ddd6fe;
}
.conversation-timer.closing strong {
  min-width: auto;
  color: #f5f3ff;
}
.conversation-timer.paused {
  border-color: rgba(45, 139, 170, 0.5);
  background: rgba(45, 139, 170, 0.14);
  color: #bae6fd;
}
.conversation-timer.paused strong { min-width: auto; color: #e0f2fe; }
.conversation-timer.awaiting {
  border-color: rgba(39, 138, 99, 0.5);
  color: #d1fae5;
  background: rgba(39, 138, 99, 0.14);
}
.conversation-timer.awaiting strong { min-width: auto; color: #ecfdf5; }
.continuation-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 4px 11px;
  border: 1px solid rgba(39, 138, 99, 0.38);
  border-radius: 999px;
  color: #d1fae5;
  background: rgba(17, 94, 89, 0.2);
  font-size: 11px;
}
.continuation-actions button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #f0fdfa;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.continuation-actions button:first-of-type { color: white; background: #16877b; }
.continuation-actions button:disabled { opacity: 0.55; cursor: wait; }
.mic-btn {
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: #0d1117;
  font-weight: 600;
  cursor: pointer;
}
.mic-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mic-btn.live { background: var(--live); }
.human-online-btn {
  min-width: 148px;
  padding: 12px 24px;
  border: 1px solid rgba(63, 185, 80, 0.72);
  border-radius: 999px;
  background: rgba(35, 134, 54, 0.18);
  color: #bbf7d0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.human-online-btn:hover:not(:disabled) { background: rgba(35, 134, 54, 0.3); }
.human-online-btn:disabled { opacity: 0.72; cursor: default; }
.human-online-btn.online {
  border-color: rgba(63, 185, 80, 0.9);
  background: rgba(35, 134, 54, 0.32);
  color: #dcfce7;
}
.stop-btn {
  min-width: 168px;
  padding: 12px 32px;
  border: 1px solid rgba(248, 113, 113, 0.68);
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(220, 38, 38, 0.28);
}
.stop-btn:hover { background: #ef4444; }
.stop-btn:disabled { opacity: 0.55; cursor: wait; }
.pause-btn {
  min-width: 126px;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid rgba(45, 139, 170, 0.5);
  border-radius: 999px;
  background: rgba(45, 139, 170, 0.15);
  color: #dff7ff;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}
.pause-btn:hover:not(:disabled) { background: rgba(45, 139, 170, 0.26); }
.pause-btn[aria-pressed="true"] {
  border-color: rgba(39, 138, 99, 0.52);
  background: rgba(64, 180, 134, 0.15);
  color: #d1fae5;
}
.pause-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.minutes-btn {
  min-width: 148px;
  padding: 12px 28px;
  border: 1px solid rgba(167, 139, 250, 0.7);
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.2);
  color: #ede9fe;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.minutes-btn:hover { background: rgba(124, 58, 237, 0.34); }
.recording-btn {
  min-width: 160px;
  padding: 12px 24px;
  border: 1px solid rgba(45, 139, 170, 0.48);
  border-radius: 999px;
  color: #dff7ff;
  background: rgba(45, 139, 170, 0.18);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.recording-btn:hover:not(:disabled) { background: rgba(45, 139, 170, 0.3); }
.recording-btn:disabled { opacity: 0.66; cursor: wait; }
.after-talk-btn {
  min-width: 174px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid rgba(31, 141, 117, 0.42);
  border-radius: 999px;
  color: #f2fffb;
  background: linear-gradient(135deg, #168b79, #277a94);
  box-shadow: 0 8px 22px rgba(30, 124, 105, 0.2);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.after-talk-btn:hover { filter: brightness(1.05); }
.after-talk-btn span {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #176f66;
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  vertical-align: 1px;
}
.finish-speaking-btn {
  min-width: 140px;
  padding: 12px 24px;
  border: 1px solid rgba(76, 154, 255, 0.62);
  border-radius: 999px;
  background: rgba(76, 154, 255, 0.16);
  color: #dbeafe;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.finish-speaking-btn { border-color: rgba(63, 185, 80, 0.7); color: #bbf7d0; background: rgba(35, 134, 54, 0.2); }
.director-status {
  margin-bottom: 8px;
  color: #c7d2fe;
  font-size: 12px;
  font-weight: 650;
}
.hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* 位图形象：底图与所有口型贴片必须共用同一正方形坐标画布。 */
.avatar-portrait {
  position: relative;
  width: var(--avatar-rig-size, 100%);
  height: var(--avatar-rig-size, auto);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 46% 46% 22px 22px; transform-origin: 50% 78%;
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: 0 30px 68px rgba(61,54,91,0.16), 0 3px 12px rgba(61,54,91,0.07);
  transform: none; animation: none;
}
.avatar-visual[data-companion-profile="true"] .avatar-portrait,
.avatar-visual[data-avatar-profile="fashion"] .avatar-portrait {
  z-index: 1;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 22px 35px rgba(18, 48, 39, 0.22));
}
.avatar-portrait-image {
  width: 100%; height: 100%; display: block; object-fit: contain;
  pointer-events: none; user-select: none;
  filter: saturate(0.98); transition: filter 0.35s ease;
}
.avatar-expression-rig,
.avatar-speech-expression-rig,
.avatar-face-deform-rig,
.avatar-viseme-rig {
  position: absolute; z-index: 2; inset: 0; pointer-events: none;
}
.avatar-expression-rig { z-index: 4; }
.avatar-viseme-rig { z-index: 3; }
.avatar-expression-layer,
.avatar-speech-expression-layer,
.avatar-face-deform-layer,
.avatar-viseme-layer,
.avatar-blink-layer {
  position: absolute; display: block;
  opacity: 0; pointer-events: none; user-select: none;
  will-change: opacity;
}
.avatar-face-deform-layer {
  transition: opacity 0.08s ease-out;
  transform-origin: 50% 55%;
  will-change: opacity, transform;
}
.avatar-face-deform-midface {
  left: var(--avatar-midface-left, 36.667%); top: var(--avatar-midface-top, 33.333%);
  width: var(--avatar-midface-width, 26.667%); height: var(--avatar-midface-height, 22.778%);
  transform: translateY(var(--avatar-midface-y, 0px)) scaleX(var(--avatar-midface-scale-x, 1));
  -webkit-mask-image: radial-gradient(ellipse 46% 42% at 50% 62%, #000 30%, rgba(0,0,0,.9) 58%, rgba(0,0,0,.35) 78%, transparent 96%);
  mask-image: radial-gradient(ellipse 46% 42% at 50% 62%, #000 30%, rgba(0,0,0,.9) 58%, rgba(0,0,0,.35) 78%, transparent 96%);
}
.avatar-face-deform-jaw {
  left: var(--avatar-jaw-left, 33.889%); top: var(--avatar-jaw-top, 48.333%);
  width: var(--avatar-jaw-width, 32.222%); height: var(--avatar-jaw-height, 22.222%);
  transform: translateY(var(--avatar-jaw-y, 0px)) scaleX(var(--avatar-jaw-scale-x, 1));
  transform-origin: 50% 28%;
  -webkit-mask-image: radial-gradient(ellipse 43% 47% at 50% 46%, #000 36%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.36) 80%, transparent 97%);
  mask-image: radial-gradient(ellipse 43% 47% at 50% 46%, #000 36%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.36) 80%, transparent 97%);
}
.avatar-visual[data-avatar-rig="sprite"][data-avatar-state="speaking"] .avatar-face-deform-layer,
.avatar-visual[data-avatar-rig="sprite"][data-face-settling="true"] .avatar-face-deform-layer {
  opacity: 1;
}
.avatar-speech-expression-layer,
.avatar-blink-layer {
  left: var(--avatar-speech-left, 21.111%); top: var(--avatar-speech-top, 27.222%);
  width: var(--avatar-speech-width, 57.778%); height: var(--avatar-speech-height, 25%);
}
.avatar-expression-layer {
  left: var(--avatar-expression-left, 21.111%); top: var(--avatar-expression-top, 23.333%);
  width: var(--avatar-expression-width, 57.778%); height: var(--avatar-expression-height, 42.222%);
  transition: opacity 0.16s ease;
  -webkit-mask-image: radial-gradient(ellipse 47% 45% at 50% 48%, #000 48%, rgba(0,0,0,.9) 64%, transparent 88%);
  mask-image: radial-gradient(ellipse 47% 45% at 50% 48%, #000 48%, rgba(0,0,0,.9) 64%, transparent 88%);
}
.avatar-speech-expression-layer {
  transition: opacity 0.18s ease;
  -webkit-mask-image: radial-gradient(ellipse 45% 40% at 50% 49.11%, #000 42%, rgba(0,0,0,.88) 58%, transparent 78%);
  mask-image: radial-gradient(ellipse 45% 40% at 50% 49.11%, #000 42%, rgba(0,0,0,.88) 58%, transparent 78%);
}
.avatar-viseme-layer {
  left: var(--avatar-viseme-left, 37.778%); top: var(--avatar-viseme-top, 45%);
  width: var(--avatar-viseme-width, 24.444%); height: var(--avatar-viseme-height, 16.667%);
  visibility: hidden;
  transition: none;
  -webkit-mask-image: radial-gradient(ellipse 48% 43% at 50% 50%, #000 52%, rgba(0,0,0,.96) 68%, rgba(0,0,0,.45) 84%, transparent 98%);
  mask-image: radial-gradient(ellipse 48% 43% at 50% 50%, #000 52%, rgba(0,0,0,.96) 68%, rgba(0,0,0,.45) 84%, transparent 98%);
}
.avatar-blink-layer {
  z-index: 2; transition: opacity 0.045s ease-out;
  -webkit-mask-image: radial-gradient(ellipse 43.27% 26.4% at 50% 52.71%, #000 45%, rgba(0,0,0,.9) 61%, transparent 82%);
  mask-image: radial-gradient(ellipse 43.27% 26.4% at 50% 52.71%, #000 45%, rgba(0,0,0,.9) 61%, transparent 82%);
}
.avatar-visual[data-avatar-rig="sprite"][data-expression="warm"] [data-expression-layer="warm"],
.avatar-visual[data-avatar-rig="sprite"][data-expression="curious"] [data-expression-layer="curious"],
.avatar-visual[data-avatar-rig="sprite"][data-expression="empathy"] [data-expression-layer="empathy"],
.avatar-visual[data-avatar-rig="sprite"][data-expression="surprised"] [data-expression-layer="surprised"],
.avatar-visual[data-avatar-rig="sprite"][data-expression="laughing"] [data-expression-layer="laughing"],
.avatar-visual[data-avatar-rig="sprite"][data-expression="emphatic"] [data-expression-layer="emphatic"] {
  opacity: var(--avatar-expression-opacity, 0.76);
}
.avatar-visual[data-avatar-state="speaking"] .avatar-expression-layer { opacity: 0 !important; }
.avatar-visual[data-preview-motion="true"] .avatar-expression-layer { opacity: 0 !important; }
/* 真正的大笑是一组连贯的全脸肌肉变化，不能再覆盖中性说话嘴。 */
.avatar-visual[data-avatar-rig="sprite"][data-laugh-phase="laughing"] [data-expression-layer="laughing"] {
  opacity: 1 !important;
}
.avatar-visual[data-avatar-rig="sprite"][data-laugh-phase="laughing"] .avatar-viseme-layer,
.avatar-visual[data-avatar-rig="sprite"][data-laugh-phase="laughing"] .avatar-speech-expression-layer {
  opacity: 0 !important;
}
.avatar-visual[data-avatar-rig="sprite"][data-blink="true"] .avatar-blink-layer { opacity: 1; }
.avatar-visual[data-avatar-rig="sprite"]:not([data-viseme="rest"]) .avatar-viseme-layer {
  visibility: visible;
  opacity: var(--avatar-viseme-opacity, 1);
}
.avatar-visual[data-avatar-rig="sprite"][data-speech-expression="warm"] [data-speech-expression-layer="warm"],
.avatar-visual[data-avatar-rig="sprite"][data-speech-expression="curious"] [data-speech-expression-layer="curious"],
.avatar-visual[data-avatar-rig="sprite"][data-speech-expression="empathy"] [data-speech-expression-layer="empathy"],
.avatar-visual[data-avatar-rig="sprite"][data-speech-expression="surprised"] [data-speech-expression-layer="surprised"],
.avatar-visual[data-avatar-rig="sprite"][data-speech-expression="laughing"] [data-speech-expression-layer="laughing"],
.avatar-visual[data-avatar-rig="sprite"][data-speech-expression="emphatic"] [data-speech-expression-layer="emphatic"] {
  opacity: var(--avatar-speech-expression-opacity, 0);
}
.avatar-mouth-rig {
  position: absolute; z-index: 2; left: 50%; top: var(--avatar-mouth-y, 52.22%);
  width: 14%; height: 7%; overflow: hidden; border-radius: 48%;
  transform: translate(-50%, -50%) scaleX(var(--avatar-mouth-shape-x, 1)) scaleY(var(--avatar-mouth-shape-y, 1));
  transform-origin: 50% 50%; transition: transform 0.07s ease-out, border-radius 0.07s ease-out;
  pointer-events: none;
}
.avatar-visual[data-mouth-rig="sprite"] .avatar-mouth-rig { display: none; }
.avatar-visual[data-mouth-rig="fallback"][data-viseme="a"] {
  --avatar-mouth-shape-x: 0.94; --avatar-mouth-shape-y: 1.12;
}
.avatar-visual[data-mouth-rig="fallback"][data-viseme="e"] {
  --avatar-mouth-shape-x: 1.1; --avatar-mouth-shape-y: 0.92;
}
.avatar-visual[data-mouth-rig="fallback"][data-viseme="o"] {
  --avatar-mouth-shape-x: 0.76; --avatar-mouth-shape-y: 1.16;
}
.avatar-visual[data-mouth-rig="fallback"][data-viseme="u"] {
  --avatar-mouth-shape-x: 0.72; --avatar-mouth-shape-y: 1.02;
}
.avatar-visual[data-mouth-rig="fallback"][data-viseme="f"] {
  --avatar-mouth-shape-x: 1.02; --avatar-mouth-shape-y: 0.82;
}
.avatar-mouth-cavity {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 70%; height: 50%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #7e3444 0 48%, #3b111d 78%);
  box-shadow: inset 0 1px 2px rgba(35,5,13,0.42);
}
.avatar-mouth-slice {
  position: absolute; z-index: 1; inset: 0;
  background-image: var(--avatar-image);
  background-repeat: no-repeat;
  background-size: 714.2858% auto;
  background-position: 50% var(--avatar-mouth-bg-y, 52.39%);
  transition: transform 0.055s linear;
  will-change: transform;
}
.avatar-mouth-upper { clip-path: inset(0 0 50% 0); }
.avatar-mouth-lower { clip-path: inset(50% 0 0 0); }
.avatar-visual[data-mouth="1"] .avatar-mouth-upper { transform: translateY(-0.6px); }
.avatar-visual[data-mouth="1"] .avatar-mouth-lower { transform: translateY(0.7px); }
.avatar-visual[data-mouth="2"] .avatar-mouth-upper { transform: translateY(-1.25px); }
.avatar-visual[data-mouth="2"] .avatar-mouth-lower { transform: translateY(1.55px); }
.avatar-visual[data-mouth="3"] .avatar-mouth-upper { transform: translateY(-2px); }
.avatar-visual[data-mouth="3"] .avatar-mouth-lower { transform: translateY(2.6px); }
.avatar-visual[data-avatar-state="thinking"] .avatar-portrait { --avatar-pose: translateY(1px) rotate(-0.65deg); }
.avatar-visual[data-avatar-state="listening"] .avatar-portrait { --avatar-pose: translateY(0) rotate(0.25deg); }
.avatar-visual[data-avatar-state="interrupted"] .avatar-portrait { --avatar-pose: translateY(2px) rotate(0); }
.avatar-visual[data-avatar-rig="fallback"][data-expression="warm"] .avatar-portrait-image { filter: saturate(1.035) brightness(1.008); }
.avatar-visual[data-expression="curious"] .avatar-portrait { --avatar-pose: translateY(0) rotate(0.65deg); }
.avatar-visual[data-expression="empathy"] .avatar-portrait { --avatar-pose: translateY(1px) rotate(-0.45deg); }
.avatar-visual[data-avatar-rig="fallback"][data-expression="surprised"] .avatar-portrait-image { filter: saturate(1.02) brightness(1.012); }
.avatar-visual[data-nod="true"] .avatar-portrait { animation: avatar-portrait-nod 0.52s ease-in-out; }
.avatar-visual[data-speech-gesture="emphasis"] .avatar-portrait {
  animation: avatar-portrait-emphasis 0.62s cubic-bezier(.2,.72,.25,1);
}
.avatar-visual[data-speech-gesture="settle"] .avatar-portrait {
  animation: avatar-portrait-settle 0.56s ease-in-out;
}
.avatar-visual[data-performance-mode="restrained"][data-nod="true"] .avatar-portrait {
  animation: avatar-portrait-nod-restrained 0.48s ease-in-out;
}
.avatar-visual[data-performance-mode="star"][data-nod="true"] .avatar-portrait {
  animation: avatar-portrait-nod-star 0.62s cubic-bezier(.2,.72,.25,1);
}
.avatar-visual[data-performance-mode="restrained"][data-speech-gesture="emphasis"] .avatar-portrait {
  animation: avatar-portrait-emphasis-restrained 0.5s ease-in-out;
}
.avatar-visual[data-performance-mode="star"][data-speech-gesture="emphasis"] .avatar-portrait {
  animation: avatar-portrait-emphasis-star 0.72s cubic-bezier(.16,.86,.28,1);
}
.avatar-visual[data-performance-cue="smile"] .avatar-portrait {
  animation: avatar-performance-smile 0.82s ease-in-out;
}
.avatar-visual[data-performance-cue="laugh"] .avatar-portrait {
  animation: avatar-performance-laugh 1.08s cubic-bezier(.2,.72,.25,1);
}
.avatar-visual[data-performance-mode="restrained"][data-performance-cue="laugh"] .avatar-portrait {
  animation: avatar-performance-smile 0.82s ease-in-out;
}
.avatar-visual[data-performance-mode="star"][data-performance-cue="laugh"] .avatar-portrait {
  animation: avatar-performance-laugh-star 1.08s cubic-bezier(.16,.86,.28,1);
}
.avatar-visual[data-performance-cue="surprise"] .avatar-portrait {
  animation: avatar-performance-surprise 0.82s cubic-bezier(.2,.72,.25,1);
}
.avatar-visual[data-performance-mode="star"][data-performance-cue="surprise"] .avatar-portrait {
  animation: avatar-performance-surprise-star 0.9s cubic-bezier(.16,.86,.28,1);
}
.avatar-visual[data-performance-cue="emphasis"] .avatar-portrait {
  animation: avatar-portrait-emphasis 0.62s cubic-bezier(.2,.72,.25,1);
}
.avatar-visual[data-performance-mode="restrained"][data-performance-cue="emphasis"] .avatar-portrait {
  animation: avatar-portrait-emphasis-restrained 0.5s ease-in-out;
}
.avatar-visual[data-performance-mode="star"][data-performance-cue="emphasis"] .avatar-portrait {
  animation: avatar-portrait-emphasis-star 0.72s cubic-bezier(.16,.86,.28,1);
}

@keyframes avatar-portrait-breathe {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  50% { transform: var(--avatar-pose) scale(1.004); }
}
@keyframes avatar-portrait-nod {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(6px) rotate(0.25deg); }
  72% { transform: translateY(2px) rotate(-0.15deg); }
}
@keyframes avatar-portrait-nod-restrained {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  48% { transform: translateY(2px) rotate(0.1deg) scale(1); }
}
@keyframes avatar-portrait-nod-star {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  34% { transform: translateY(8px) rotate(0.6deg) scale(1.006); }
  68% { transform: translateY(1px) rotate(-0.32deg) scale(1.002); }
}
@keyframes avatar-portrait-emphasis {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  38% { transform: translateY(-1.8px) rotate(-0.28deg) scale(1.002); }
  72% { transform: translateY(-0.4px) rotate(0.1deg) scale(1.001); }
}
@keyframes avatar-portrait-emphasis-restrained {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  45% { transform: translateY(-0.8px) rotate(-0.1deg) scale(1.001); }
}
@keyframes avatar-portrait-emphasis-star {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  28% { transform: translateY(-5px) rotate(-0.8deg) scale(1.012); }
  62% { transform: translateY(1px) rotate(0.5deg) scale(1.004); }
}
@keyframes avatar-performance-smile {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  48% { transform: translateY(-1px) rotate(-0.2deg) scale(1.003); }
}
@keyframes avatar-performance-laugh {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  28% { transform: translateY(-3px) rotate(-0.35deg) scale(1.008); }
  58% { transform: translateY(2px) rotate(0.25deg) scale(1.003); }
  82% { transform: translateY(-1px) rotate(-0.12deg) scale(1.004); }
}
@keyframes avatar-performance-laugh-star {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  20% { transform: translateY(-7px) rotate(-1deg) scale(1.018); }
  44% { transform: translateY(4px) rotate(0.75deg) scale(1.008); }
  68% { transform: translateY(-4px) rotate(-0.55deg) scale(1.014); }
  86% { transform: translateY(1px) rotate(0.2deg) scale(1.004); }
}
@keyframes avatar-performance-surprise {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  32% { transform: translateY(1px) scale(1.009); }
  70% { transform: translateY(-1px) scale(1.003); }
}
@keyframes avatar-performance-surprise-star {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  24% { transform: translateY(4px) scale(0.982); }
  56% { transform: translateY(-3px) scale(1.022); }
  82% { transform: translateY(0) scale(1.006); }
}
@keyframes avatar-portrait-settle {
  0%, 100% { transform: var(--avatar-pose) scale(1); }
  48% { transform: translateY(3px) rotate(0.16deg) scale(1); }
  76% { transform: translateY(0.8px) rotate(-0.08deg) scale(1); }
}

/* 人像主体始终固定：整套 900×900 rig 只在父层做一次等比缩放。 */
.avatar-visual .avatar-portrait {
  transform: scale(var(--avatar-rig-scale, 1)) !important;
  transform-origin: 50% 50%;
  animation: none !important;
}

/* 稳定脸型的整套素材在外层做低频微动，嘴、眼睛和底图始终共用同一矩阵。 */
.avatar-visual[data-face-shape="stable"][data-avatar-state="idle"] .avatar-motion {
  animation: avatar-stable-breathe 7.2s ease-in-out infinite;
}
.avatar-visual[data-face-shape="stable"][data-avatar-state="listening"] .avatar-motion {
  animation: avatar-stable-attentive 5.8s ease-in-out infinite;
}
.avatar-visual[data-face-shape="stable"][data-avatar-state="thinking"] .avatar-motion {
  transform: translateY(0.7px) rotate(-0.16deg);
}
.avatar-visual[data-face-shape="stable"][data-micro-motion="acknowledge"] .avatar-motion {
  animation: avatar-stable-acknowledge 760ms cubic-bezier(.22, .72, .24, 1);
}
.avatar-visual[data-face-shape="stable"][data-micro-motion="consider"] .avatar-motion {
  animation: avatar-stable-consider 920ms cubic-bezier(.22, .72, .24, 1);
}
.avatar-visual[data-face-shape="stable"][data-micro-motion="speech"] .avatar-motion {
  animation: avatar-stable-speech 680ms cubic-bezier(.2, .72, .25, 1);
}

@keyframes avatar-stable-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -0.7px, 0) scale(1.0015); }
}
@keyframes avatar-stable-attentive {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  48% { transform: translate3d(0, 0.6px, 0) rotate(0.08deg); }
}
@keyframes avatar-stable-acknowledge {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  42% { transform: translate3d(0, 2.2px, 0) rotate(0.12deg); }
  72% { transform: translate3d(0, 0.7px, 0) rotate(-0.05deg); }
}
@keyframes avatar-stable-consider {
  0%, 100% { transform: translate3d(0, 0.7px, 0) rotate(-0.16deg); }
  48% { transform: translate3d(0, 0.1px, 0) rotate(-0.3deg); }
}
@keyframes avatar-stable-speech {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  40% { transform: translate3d(0, -1.1px, 0) rotate(-0.1deg); }
  74% { transform: translate3d(0, -0.25px, 0) rotate(0.04deg); }
}


/* 底图、嘴和眼睛保持原始 900px 坐标，只继承上面的同一个缩放矩阵。 */
.avatar-visual .avatar-portrait {
  width: var(--avatar-rig-size, 900px);
  height: var(--avatar-rig-size, 900px);
  aspect-ratio: 1 / 1;
  min-width: var(--avatar-rig-size, 900px);
  min-height: var(--avatar-rig-size, 900px);
  max-width: none;
  max-height: none;
  flex: 0 0 var(--avatar-rig-size, 900px);
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-motion {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .avatar-portrait-image,
  .avatar-mouth-slice,
  .avatar-expression-layer,
  .avatar-speech-expression-layer,
  .avatar-face-deform-layer,
  .avatar-viseme-layer,
  .avatar-blink-layer { transition-duration: 0.001ms !important; }
}

/* ── 统一界面层级 v2：设置态先配置，对话态先交流 ───────────── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.topbar { order: 0; min-width: 0; }
.interview-panel { order: 1; }
.call-view { order: 2; }
.diagnostic-progress { order: 3; }
.lesson-progress { order: 3; }
.live-caption { order: 3; }
.learning-actions { order: 4; }
.vocabulary-book { order: 5; }
.advanced-options { order: 6; }
.transcript-panel { order: 7; }
.controls { order: 8; }

body.conversation-active .call-view { order: 1; }
body.conversation-active .diagnostic-progress { order: 2; }
body.conversation-active .lesson-progress { order: 2; }
body.conversation-active .live-caption { order: 2; }
body.conversation-active .learning-actions { order: 3; }
body.conversation-active .vocabulary-book { order: 4; }
body.conversation-active .transcript-panel { order: 5; }
body.conversation-active .interview-panel { order: 6; }
body.conversation-active .advanced-options { order: 7; }
body.conversation-active.conversation-tutor .transcript-panel { order: 4; }
body.conversation-active.conversation-tutor .vocabulary-book { order: 5; }

.topbar {
  align-items: center;
  flex-wrap: wrap;
}
.topbar h1,
.top-actions { flex: 0 0 auto; }
.status {
  flex: 1 1 180px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 主操作始终可触达，不再要求先滚到页面末尾。 */
.controls {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(1048px, calc(100vw - 24px));
  transform: translateX(-50%);
  z-index: 100;
}
.session-actions { flex-wrap: wrap; }
body.conversation-active .controls .hint { display: none; }
body.conversation-active .controls { padding-block: 8px; }
body.conversation-active .setup-footer-status,
.setup-footer-options #user-gender-state { display: none; }

/* 大字幕允许选择与回看，按钮区不会覆盖字幕本身。 */
.live-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: auto;
  text-align: left;
}
.live-caption-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.live-caption-text {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  touch-action: pan-y;
  cursor: text;
}
.live-caption-text::selection {
  color: #083f39;
  background: rgba(255, 214, 92, 0.78);
  text-shadow: none;
}
.live-caption-text:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 5px;
}
.live-caption-controls {
  display: flex;
  width: 104px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.live-caption-controls button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 8px;
  color: #dbeafe;
  background: rgba(76, 154, 255, 0.1);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.live-caption-controls #caption-save-btn:not(:disabled) {
  border-color: rgba(22, 135, 123, 0.48);
  color: #0e695f;
  background: rgba(54, 179, 151, 0.18);
}
.live-caption-controls #caption-save-btn:disabled {
  opacity: 0.62;
}
.live-caption-controls button:disabled { opacity: 0.38; cursor: default; }
.live-caption.caption-pinned {
  border-color: rgba(251, 191, 36, 0.58);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.08);
}
.live-caption.caption-pinned #caption-pin-btn {
  border-color: rgba(251, 191, 36, 0.54);
  color: #fde68a;
  background: rgba(251, 191, 36, 0.1);
}

/* 次级内容全部渐进展开，避免空面板和技术选项挤占主流程。 */
.vocabulary-book,
.advanced-options,
.transcript-panel {
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 92%, black);
  overflow: clip;
}
.vocabulary-book > summary,
.advanced-options > summary,
.transcript-panel > summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.vocabulary-book > summary::-webkit-details-marker,
.advanced-options > summary::-webkit-details-marker,
.transcript-panel > summary::-webkit-details-marker { display: none; }
.vocabulary-book > summary::after,
.advanced-options > summary::after,
.transcript-panel > summary::after {
  content: "展开";
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.vocabulary-book[open] > summary::after,
.advanced-options[open] > summary::after,
.transcript-panel[open] > summary::after { content: "收起"; }
.vocabulary-book-head > .vocabulary-count,
.transcript-count {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}
.vocabulary-book.empty { border-color: var(--border); background: var(--panel); }
/* 配置阶段不展示空生词本；进入课堂后再作为可预期的学习区出现。 */
body:not(.conversation-active) .vocabulary-book.empty { display: none; }
.vocabulary-book-content {
  padding: 0 13px 13px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.vocabulary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.vocabulary-toolbar button {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(251, 191, 36, 0.08);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.vocabulary-list {
  max-height: min(44dvh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}
.vocabulary-group {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 5px 0 8px;
  padding: 7px 4px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 96%, black);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
}
.advanced-options > summary { justify-content: flex-start; color: var(--muted); font-size: 13px; }
.advanced-options .session-options {
  padding: 12px;
  border-top: 1px solid var(--border);
}
.transcript-panel > summary > span:first-child { font-weight: 700; }
.transcript-panel .transcript {
  max-height: min(42dvh, 420px);
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

/* 一致的键盘焦点，避免 outline:none 后失去定位。 */
:where(button, a, select, input, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .stage {
    gap: 9px;
    padding-inline: max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
    padding-bottom: calc(188px + env(safe-area-inset-bottom));
  }
  .topbar { gap: 8px; }
  .topbar h1 { font-size: 18px; }
  .status {
    flex-basis: calc(100% - 150px);
    order: 3;
    width: 100%;
    font-size: 12px;
  }
  .top-actions { gap: 5px; }
  .minutes-entry,
  .education-entry { padding: 5px 8px; font-size: 11px; }

  /* 多人画面横向滑动；当前发言人自动排到最前，字幕不再被三张大图推走。 */
  body.conversation-double .call-view,
  body.conversation-triple .call-view {
    display: flex;
    grid-template-columns: none;
    gap: 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  body.conversation-double .call-view::-webkit-scrollbar,
  body.conversation-triple .call-view::-webkit-scrollbar { display: none; }
  body.conversation-double .persona-pane,
  body.conversation-triple .persona-pane,
  body.conversation-triple .cam-wrap {
    flex: 0 0 min(82vw, 430px);
    width: min(82vw, 430px);
    aspect-ratio: 1;
    scroll-snap-align: center;
  }
  body.conversation-double .active-speaker,
  body.conversation-triple .active-speaker { order: -1; }

  /* 单人/外教模式保留主角色大画面，把本人摄像头缩为画中画。 */
  body.conversation-single .call-view { display: block; }
  body.conversation-single .avatar-wrap { aspect-ratio: 1; }
  body.conversation-single .cam-wrap:not(.hidden) {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 12;
    width: min(29vw, 132px);
    aspect-ratio: 3 / 4;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
  }

  .live-caption {
    grid-template-columns: 1fr;
    padding: 10px 9px;
  }
  .live-caption-controls {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-left: 0;
  }
  .live-caption-controls button {
    min-height: 34px;
    flex: 1 1 78px;
  }
  body.conversation-tutor .live-caption-text { height: 4.72em; }

  .controls {
    bottom: 0;
    width: 100%;
    padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 16px 16px 0 0;
  }
  .session-actions { gap: 7px; }
  .session-actions > button {
    min-width: min(138px, calc(50vw - 16px));
    padding-inline: 14px;
    font-size: 14px;
  }
  .controls .hint {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .vocabulary-book-head > div { min-width: 0; }
  .vocabulary-book-head span:not(.vocabulary-count) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .interview-summary { grid-template-columns: 1fr 16px; }
  .interview-summary > strong { grid-column: 1; }
  .setup-summary { grid-column: 1; text-align: left; }
  .summary-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .session-progress { flex-wrap: wrap; }
  .vocabulary-toolbar { align-items: flex-start; flex-direction: column; padding-block: 8px; }
}

/* 纪要/学习报告留在当前页面，以右侧抽屉承载完整文档。 */
.report-drawer {
  width: min(940px, 94vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--text);
  background: #0d1117;
  box-shadow: -24px 0 80px rgba(0, 0, 0, 0.46);
}
.report-drawer[open] { animation: report-slide-in 180ms ease-out; }
.report-drawer::backdrop {
  background: rgba(1, 4, 9, 0.68);
  backdrop-filter: blur(3px);
  animation: report-backdrop-in 150ms ease-out;
}
@keyframes report-slide-in {
  from { transform: translateX(32px); opacity: 0.5; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes report-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.report-drawer-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.report-drawer-frame-home { flex: 1 1 auto; min-height: 0; display: flex; }
.report-drawer-frame-home > .report-frame-wrap { width: 100%; }
.report-drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(22, 27, 34, 0.96);
}
.report-drawer-heading { min-width: 0; }
.report-drawer-heading > span {
  color: #a78bfa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.report-drawer-heading h2 {
  margin: 3px 0 2px;
  overflow: hidden;
  font-size: clamp(17px, 2.2vw, 22px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-drawer-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.report-drawer-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.report-drawer-actions button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 9px;
  color: #ddd6fe;
  background: rgba(124, 58, 237, 0.1);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.report-drawer-actions button:hover { background: rgba(124, 58, 237, 0.2); }
.report-drawer-actions .report-close-btn {
  width: 38px;
  padding: 0;
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.035);
  font-size: 22px;
}
.report-frame-wrap { position: relative; flex: 1 1 auto; min-height: 0; background: #0d1117; }
.report-frame { width: 100%; height: 100%; border: 0; background: #0d1117; }
.report-frame-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  color: var(--text);
}
.report-frame-loading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.report-spinner {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 3px solid rgba(167, 139, 250, 0.18);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: report-spin 0.9s linear infinite;
}
@keyframes report-spin { to { transform: rotate(360deg); } }
.report-frame-wrap:not(.loading) .report-frame-loading { display: none; }

@media (max-width: 720px) {
  .report-drawer { width: 100vw; border-left: 0; }
  .report-drawer-head { padding-left: max(12px, env(safe-area-inset-left)); }
  .report-drawer-actions #report-refresh-btn { padding-inline: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .report-drawer[open],
  .report-drawer::backdrop { animation: none; }
}

/* 默认隐藏的延迟诊断：?debug=1 或 ⌘/Ctrl + Shift + L 打开。 */
.latency-diagnostics {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 140;
  width: min(720px, calc(100vw - 20px));
  max-height: min(82dvh, 720px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(76, 154, 255, 0.48);
  border-radius: 14px;
  color: var(--text);
  background: rgba(9, 13, 20, 0.96);
  box-shadow: 0 18px 64px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(16px);
}
.latency-diagnostics-head,
.latency-diagnostics-actions,
.latency-record-head,
.latency-record-values {
  display: flex;
  align-items: center;
}
.latency-diagnostics-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.latency-diagnostics-head > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.latency-diagnostics-head strong { font-size: 15px; }
#latency-context { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.latency-diagnostics-actions { flex: 0 0 auto; gap: 5px; }
.latency-diagnostics button {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #dbeafe;
  background: rgba(76, 154, 255, 0.1);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
#latency-close-btn { width: 30px; padding: 0; font-size: 18px; }
.latency-waiting { padding: 18px 8px; color: var(--muted); text-align: center; }
.latency-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.latency-stage {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.latency-stage span { display: block; color: var(--muted); font-size: 10px; line-height: 1.35; }
.latency-stage strong { display: block; margin-top: 4px; color: #86efac; font: 700 16px ui-monospace, SFMono-Regular, Menlo, monospace; }
.latency-stage.warn strong { color: #fde68a; }
.latency-stage.slow strong { color: #fca5a5; }
.latency-bottleneck { margin: 8px 2px 0; color: #bfdbfe; font-size: 12px; }
.latency-records { display: grid; gap: 6px; margin-top: 11px; }
.latency-record {
  padding: 8px 9px;
  border: 1px solid rgba(48, 54, 61, 0.86);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.018);
}
.latency-record-head { justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.latency-record-head strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.latency-record-values { flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.latency-record-values span {
  padding: 3px 6px;
  border-radius: 999px;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.09);
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.latency-rtc-stats,
.latency-diagnostics-note { margin-top: 9px; color: var(--muted); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.latency-rtc-stats { color: #86efac; white-space: pre-line; }

@media (max-width: 620px) {
  .latency-diagnostics {
    top: max(6px, env(safe-area-inset-top));
    right: 6px;
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px - env(safe-area-inset-top));
  }
  .latency-diagnostics-head { align-items: flex-start; }
  .latency-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 清新浅色主题：保留高对比字幕与人物画面，降低设置区的控制台感 ── */
body:not(.dance-library-page) .topbar {
  padding: 9px 11px;
  border: 1px solid rgba(207, 228, 221, 0.9);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 30px rgba(37, 91, 78, 0.08);
  backdrop-filter: blur(14px);
}
body:not(.dance-library-page) .topbar h1 { color: #123c35; }
body:not(.dance-library-page) .topbar h1 small {
  border-color: rgba(22, 135, 123, 0.28);
  color: #157b70;
  background: rgba(77, 191, 164, 0.1);
}
.education-entry {
  border-color: rgba(22, 135, 123, 0.24);
  color: #176f66;
  background: rgba(54, 179, 151, 0.09);
}
.education-entry:hover { background: rgba(54, 179, 151, 0.17); }
.minutes-entry {
  border-color: rgba(126, 105, 171, 0.25);
  color: #68518f;
  background: rgba(154, 128, 201, 0.09);
}
.minutes-entry:hover { background: rgba(154, 128, 201, 0.16); }

.cam-wrap,
.avatar-wrap {
  border-color: #c8ded7;
  background: linear-gradient(145deg, #e9f5f1, #dcece7);
  box-shadow: 0 12px 34px rgba(30, 81, 69, 0.08);
}
.pane-label,
.avatar-wrap > [id$="avatar-state"] { color: #fff; }
.avatar-fallback { color: #e4efec; }
.live-caption {
  border-color: #c9e3dc;
  background:
    radial-gradient(circle at 50% 0%, rgba(64, 190, 159, 0.15), transparent 62%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(30, 81, 69, 0.08);
}
.live-caption-speaker { background: rgba(20, 103, 93, 0.9); }
.live-caption-text {
  color: #126f64;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 12px rgba(18, 111, 100, 0.12);
}
.live-caption.user .live-caption-text {
  color: #176e91;
  text-shadow: 0 2px 12px rgba(23, 110, 145, 0.12);
}
.live-caption.speaker-b .live-caption-text {
  color: #74529d;
  text-shadow: 0 2px 12px rgba(116, 82, 157, 0.12);
}
.live-caption.speaker-c .live-caption-text {
  color: #9a621a;
  text-shadow: 0 2px 12px rgba(154, 98, 26, 0.12);
}
.live-caption-controls button,
.learning-feedback-actions button,
.learning-actions button {
  border-color: rgba(22, 135, 123, 0.26);
  color: #176f66;
  background: rgba(54, 179, 151, 0.09);
}
.live-caption-controls button:hover:not(:disabled),
.learning-feedback-actions button:hover:not(:disabled),
.learning-actions button:hover:not(:disabled) {
  background: rgba(54, 179, 151, 0.17);
}
.live-caption.caption-pinned #caption-pin-btn {
  color: #865912;
  background: rgba(251, 191, 36, 0.12);
}

.interview-panel,
.vocabulary-book,
.advanced-options,
.transcript-panel {
  border-color: #cfe4dd;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 32px rgba(30, 81, 69, 0.06);
}
.interview-summary:hover,
.guest-toggle:hover { background: rgba(54, 179, 151, 0.06); }
.setup-basics {
  border-color: rgba(22, 135, 123, 0.2);
  background: linear-gradient(135deg, rgba(78, 195, 166, 0.1), rgba(117, 190, 226, 0.05));
}
.provider-advanced,
.conversation-advanced { background: rgba(235, 247, 243, 0.6); }
.human-participant-panel {
  border-color: rgba(39, 138, 99, 0.24);
  background: rgba(64, 180, 134, 0.07);
}
.setup-control input,
.setup-control select,
.role-card input,
.role-card select,
.role-card textarea,
.human-name-field input,
.human-identity-fields input,
.human-identity-fields textarea,
.learning-control input,
.learning-control select,
.learning-control textarea,
.session-options select,
.option-button {
  border-color: #c9ded8;
  color: var(--text);
  background: rgba(255, 255, 255, 0.94);
}
.setup-control input:focus,
.setup-control select:focus,
.role-card input:focus,
.role-card select:focus,
.role-card textarea:focus,
.learning-control input:focus,
.learning-control select:focus,
.learning-control textarea:focus {
  box-shadow: 0 0 0 3px rgba(22, 135, 123, 0.12);
}
.learning-setup {
  border-color: rgba(45, 139, 170, 0.23);
  background:
    radial-gradient(circle at 100% 0%, rgba(100, 190, 222, 0.15), transparent 44%),
    rgba(241, 250, 248, 0.92);
}
.learning-setup-heading p a,
.learning-control em { color: #277a94; }
.learning-language {
  border-color: rgba(45, 139, 170, 0.28);
  color: #277a94;
  background: rgba(100, 190, 222, 0.08);
}
.learning-focuses label { color: var(--muted); background: #f7fcfa; }
.learning-focuses label:has(input:checked) {
  border-color: rgba(22, 135, 123, 0.42);
  color: #176f66;
  background: rgba(54, 179, 151, 0.11);
}
.role-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(72, 191, 164, 0.13), transparent 44%),
    #fbfefd;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
}
.role-card-b {
  background:
    radial-gradient(circle at 100% 0%, rgba(158, 123, 202, 0.12), transparent 44%),
    #fdfcff;
}
.role-card-c {
  background:
    radial-gradient(circle at 100% 0%, rgba(231, 167, 76, 0.12), transparent 44%),
    #fffdfa;
}
.role-badge { color: #fff; }
.option-state { background: rgba(241, 248, 246, 0.92); }
.transcript { background: rgba(255, 255, 255, 0.92); }
.transcript .learning-feedback {
  border-color: rgba(45, 139, 170, 0.22);
  background: rgba(100, 190, 222, 0.08);
}
.learning-feedback-head { color: #277a94; }
.learning-feedback-original { color: #b64b57; }
.learning-feedback-improved { color: #22734f; }
.learning-actions {
  border-color: rgba(22, 135, 123, 0.2);
  background:
    radial-gradient(circle at 50% 0%, rgba(54, 179, 151, 0.12), transparent 72%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(30, 81, 69, 0.06);
}

.controls {
  border-color: rgba(190, 218, 210, 0.94);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 38px rgba(28, 77, 66, 0.14);
}
.mic-btn { color: #fff; box-shadow: 0 8px 22px rgba(22, 135, 123, 0.22); }
.human-online-btn,
.finish-speaking-btn {
  border-color: rgba(39, 138, 99, 0.34);
  color: #20734f;
  background: rgba(64, 180, 134, 0.1);
}
.human-online-btn:hover:not(:disabled) { background: rgba(64, 180, 134, 0.18); }
.human-online-btn.online {
  border-color: rgba(39, 138, 99, 0.48);
  color: #1d6848;
  background: rgba(64, 180, 134, 0.16);
}
.minutes-btn {
  border-color: rgba(126, 105, 171, 0.3);
  color: #68518f;
  background: rgba(154, 128, 201, 0.1);
}
.minutes-btn:hover { background: rgba(154, 128, 201, 0.18); }
.recording-btn {
  border-color: rgba(45, 139, 170, 0.28);
  color: #277a94;
  background: rgba(100, 190, 222, 0.1);
}
.recording-btn:hover:not(:disabled) { background: rgba(100, 190, 222, 0.18); }
.conversation-timer {
  border-color: rgba(22, 135, 123, 0.28);
  color: #176f66;
  background: rgba(54, 179, 151, 0.09);
}
.conversation-timer strong { color: #145e57; }
.conversation-timer.warn { color: #925f10; }
.conversation-timer.closing {
  border-color: rgba(126, 105, 171, 0.34);
  color: #68518f;
  background: rgba(154, 128, 201, 0.1);
}
.conversation-timer.closing strong { color: #5a427d; }
.conversation-timer.paused {
  border-color: rgba(45, 139, 170, 0.3);
  color: #277a94;
  background: rgba(100, 190, 222, 0.1);
}
.conversation-timer.paused strong { color: #226c82; }
.conversation-timer.awaiting {
  border-color: rgba(39, 138, 99, 0.34);
  color: #176f66;
  background: rgba(54, 179, 151, 0.1);
}
.conversation-timer.awaiting strong { color: #145e57; }
.continuation-actions {
  border-color: rgba(39, 138, 99, 0.28);
  color: #315f56;
  background: rgba(255, 255, 255, 0.86);
}
.continuation-actions button { color: #37675e; border-color: #cfe4dd; background: #f6fbf9; }
.continuation-actions button:first-of-type { color: #fff; border-color: #16877b; background: #16877b; }
.pause-btn {
  border-color: rgba(45, 139, 170, 0.3);
  color: #277a94;
  background: rgba(100, 190, 222, 0.1);
}
.pause-btn:hover:not(:disabled) { background: rgba(100, 190, 222, 0.18); }
.pause-btn[aria-pressed="true"] {
  border-color: rgba(39, 138, 99, 0.34);
  color: #20734f;
  background: rgba(64, 180, 134, 0.12);
}
.director-status { color: #53659a; }
.option-state.experimental { color: #8d6218; }

.diagnostic-progress {
  border-color: rgba(72, 150, 194, 0.24);
  background: linear-gradient(110deg, rgba(218, 241, 250, 0.95), rgba(246, 251, 255, 0.96));
}
.diagnostic-progress-copy span { color: #287694; }
.diagnostic-progress-copy strong { color: var(--text); }
.diagnostic-progress-copy small { color: var(--muted); }
.lesson-progress {
  border-color: rgba(39, 138, 99, 0.24);
  background: linear-gradient(110deg, rgba(222, 246, 236, 0.96), rgba(248, 253, 251, 0.96));
}
.lesson-progress-copy span,
.lesson-progress-status small { color: #247755; }
.lesson-progress-copy strong { color: var(--text); }
.lesson-progress-copy small { color: var(--muted); }

.vocabulary-book-head strong,
.vocabulary-toolbar button { color: #90611d; }
.vocabulary-card {
  border-color: rgba(205, 149, 58, 0.2);
  background: rgba(255, 248, 230, 0.72);
}
.vocabulary-card-title strong { color: #805515; }
.vocabulary-card-title span { color: var(--muted); }
.vocabulary-card-title .vocabulary-saved-badge {
  color: #176f66;
  border-color: rgba(22, 135, 123, 0.28);
  background: rgba(54, 179, 151, 0.1);
}
.vocabulary-card-meaning { color: var(--text); }
.vocabulary-card-example { color: #277a94; }
.vocabulary-card-reason { margin: 8px 0 0; color: #6d5b31; font-size: 11px; line-height: 1.5; }
.vocabulary-card-evidence { margin-top: 7px; color: var(--muted); font-size: 11px; }
.vocabulary-card-evidence summary { width: max-content; cursor: pointer; }
.vocabulary-card-evidence p { margin: 6px 0 0; padding: 8px 10px; border-radius: 9px; background: rgba(31, 122, 148, .07); line-height: 1.5; }
.vocabulary-group { background: rgba(255, 255, 255, 0.96); }

.report-drawer,
.report-frame-wrap,
.report-frame { background: var(--bg); }
.report-drawer { box-shadow: -24px 0 80px rgba(30, 81, 69, 0.18); }
.report-drawer::backdrop { background: rgba(31, 62, 55, 0.28); }
.report-drawer-head { background: rgba(255, 255, 255, 0.96); }
.report-drawer-heading > span { color: #74529d; }
.report-drawer-actions button {
  border-color: rgba(126, 105, 171, 0.25);
  color: #68518f;
  background: rgba(154, 128, 201, 0.09);
}
.report-drawer-actions .report-close-btn { background: #f4f9f7; }

.latency-diagnostics {
  border-color: rgba(22, 135, 123, 0.34);
  color: var(--text);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 64px rgba(30, 81, 69, 0.2);
}
.latency-diagnostics button {
  color: #176f66;
  background: rgba(54, 179, 151, 0.09);
}
.latency-stage,
.latency-record { background: #f7fcfa; border-color: #d5e7e1; }
.latency-stage strong,
.latency-rtc-stats { color: #247755; }
.latency-stage.warn strong { color: #8d6218; }
.latency-stage.slow strong { color: #b34f58; }
.latency-bottleneck { color: #277a94; }
.latency-record-values span {
  color: #526a64;
  background: rgba(104, 128, 122, 0.09);
}

/* 课程与访谈设置使用模态层，主对话页面不再被完整表单拉长。 */
.setup-dialog {
  width: min(1000px, calc(100vw - 28px));
  max-width: none;
  max-height: min(92dvh, 900px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  color: var(--text);
  background: transparent;
  box-shadow: 0 30px 100px rgba(30, 81, 69, 0.28);
}
.setup-dialog::backdrop {
  background: rgba(31, 62, 55, 0.36);
  backdrop-filter: blur(5px);
}
.setup-dialog-shell {
  display: flex;
  min-height: 0;
  max-height: min(92dvh, 900px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(190, 218, 210, 0.95);
  border-radius: inherit;
  background:
    radial-gradient(circle at 100% 0%, rgba(100, 190, 222, 0.12), transparent 34rem),
    #f7fcfa;
}
.setup-dialog-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid #d7e8e2;
  background: rgba(255, 255, 255, 0.94);
}
.setup-dialog-head span {
  color: #277a94;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
}
.setup-dialog-head h2 { margin-top: 2px; font-size: 20px; letter-spacing: -0.02em; }
.setup-dialog-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #cfe4dd;
  border-radius: 50%;
  color: #526a64;
  background: #f5faf8;
  font: 500 24px/1 inherit;
  cursor: pointer;
}
.setup-dialog-close:hover { color: #176f66; background: #eaf6f2; }
.setup-dialog .interview-panel {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overscroll-behavior: contain;
}
.setup-dialog .interview-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid rgba(207, 228, 221, 0.86);
  background: rgba(247, 252, 250, 0.95);
  backdrop-filter: blur(10px);
}
.setup-dialog .interview-setup { padding: 18px 22px 24px; }
.setup-dialog-actionbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid #cfe4dd;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -12px 30px rgba(30, 81, 69, 0.08);
}
.setup-dialog-action-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.setup-dialog-action-copy strong {
  overflow: hidden;
  color: #244f44;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setup-dialog-action-copy small {
  color: #6c8580;
  font-size: 11px;
  line-height: 1.35;
}
.setup-dialog-start {
  min-width: 184px;
  min-height: 52px;
  padding: 11px 22px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #2e9a82, #176f66);
  box-shadow: 0 10px 24px rgba(23, 111, 102, 0.22);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.setup-dialog-start:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 13px 28px rgba(23, 111, 102, 0.28);
}
.setup-dialog-start:active:not(:disabled) { transform: scale(0.985); }
.setup-dialog-start:focus-visible { outline: 3px solid rgba(46, 154, 130, 0.25); outline-offset: 3px; }
.setup-dialog-start:disabled {
  color: #77908a;
  background: #e5efec;
  box-shadow: none;
  cursor: wait;
}
.setup-dialog-actionbar.scene-selected { animation: setup-action-ready 420ms ease both; }
@keyframes setup-action-ready {
  0% { background: rgba(220, 246, 236, 0.98); }
  100% { background: rgba(255, 255, 255, 0.98); }
}
.setup-dialog-btn {
  min-width: 118px;
  padding: 11px 20px;
  border: 1px solid rgba(22, 135, 123, 0.3);
  border-radius: 999px;
  color: #176f66;
  background: rgba(54, 179, 151, 0.09);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}
.setup-dialog-btn:hover:not(:disabled) { background: rgba(54, 179, 151, 0.17); }
.setup-dialog-btn:disabled { opacity: 0.55; cursor: wait; }

@media (max-width: 720px) {
  .top-actions { justify-content: flex-end; }
  .top-menu > summary,
  .education-entry,
  .mode-switch-entry { padding: 5px 9px; font-size: 11px; }
  .top-menu-popover { width: min(190px, calc(100vw - 24px)); }
  .session-alert { align-items: stretch; flex-direction: column; text-align: left; }
  .session-alert button { width: 100%; }
  .setup-dialog {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }
  .setup-dialog-shell { max-height: 100dvh; min-height: 100dvh; border: 0; }
  .setup-dialog-head { padding-top: max(14px, env(safe-area-inset-top)); }
  .setup-dialog .interview-setup { padding: 15px 12px calc(24px + env(safe-area-inset-bottom)); }
}

/* ── 单屏沉浸式对话舱：主页面不滚动，工具内容进入浮层 ── */
html.conversation-app,
html.conversation-app body {
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.conversation-app body { display: block; }
html.conversation-app .stage {
  width: min(1440px, 100vw);
  height: var(--app-height, 100dvh);
  min-height: 0;
  margin: 0 auto;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
}
html.conversation-app .topbar {
  position: relative;
  z-index: 160;
  isolation: isolate;
  overflow: visible;
  min-height: 46px;
  padding: 7px 10px;
  flex-wrap: nowrap;
}
/* 顶栏的 backdrop-filter 会创建独立堆叠上下文；显式抬高后，菜单不会落到人物视频层后面。 */
html.conversation-app .top-menu[open] { z-index: 1; }
html.conversation-app .top-menu-popover {
  max-height: min(60dvh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.conversation-app .conversation-cockpit {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  overflow: hidden;
}
html.conversation-app .conversation-cockpit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  border: 1px solid transparent;
  border-radius: 17px;
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
html.conversation-app body[data-conversation-state="listening"] .conversation-cockpit::before {
  border-color: rgba(45, 123, 146, 0.32);
  box-shadow: inset 0 0 34px rgba(100, 190, 222, 0.06);
}
html.conversation-app body[data-conversation-state="thinking"] .conversation-cockpit::before {
  border-color: rgba(183, 120, 24, 0.32);
  box-shadow: inset 0 0 34px rgba(239, 190, 105, 0.07);
}
html.conversation-app body[data-conversation-state="speaking"] .conversation-cockpit::before {
  border-color: rgba(39, 138, 99, 0.38);
  box-shadow: inset 0 0 38px rgba(91, 214, 180, 0.08);
}
html.conversation-app .call-view {
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: 8px;
  overflow: hidden;
}
html.conversation-app .cam-wrap,
html.conversation-app .avatar-wrap {
  min-width: 0;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}
html.conversation-app body.conversation-single .call-view,
html.conversation-app body.conversation-single.guest-hidden .call-view {
  display: block;
}
html.conversation-app body.conversation-single .avatar-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
html.conversation-app body.conversation-single .cam-wrap:not(.hidden) {
  position: absolute;
  right: clamp(9px, 1.5vw, 18px);
  bottom: clamp(9px, 1.5vw, 18px);
  z-index: 20;
  width: clamp(118px, 17vw, 220px);
  height: clamp(142px, 28%, 260px);
  aspect-ratio: 3 / 4;
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(30, 81, 69, 0.22);
}
/* 外教学习是师生双席位：两边始终等大，不继承单人访谈的画中画。 */
html.conversation-app body.conversation-tutor .call-view,
html.conversation-app body.conversation-tutor.guest-hidden .call-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.conversation-app body.conversation-tutor .avatar-wrap,
html.conversation-app body.conversation-tutor .cam-wrap:not(.hidden) {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  box-shadow: 0 10px 28px rgba(30, 81, 69, 0.12);
}
html.conversation-app body.conversation-double .call-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.conversation-app body.conversation-triple .call-view {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.conversation-app body.conversation-double .persona-pane,
html.conversation-app body.conversation-triple .persona-pane,
html.conversation-app body.conversation-triple .cam-wrap {
  height: 100%;
  aspect-ratio: auto;
}

/* 字幕留在人物舞台下方的安全 HUD，不再遮挡面部。 */
html.conversation-app .live-caption,
html.conversation-app body.conversation-tutor .live-caption {
  min-height: 0;
  max-height: min(19dvh, 154px);
  padding: 8px 10px;
  border-radius: 13px;
}
html.conversation-app .live-caption-copy { gap: 3px; }
html.conversation-app .live-caption-text {
  height: 2.36em;
  font-size: clamp(21px, 3.2dvh, 36px);
  line-height: 1.18;
}
html.conversation-app body.conversation-tutor .live-caption-text {
  height: 3.54em;
  font-size: clamp(20px, 2.9dvh, 33px);
}
html.conversation-app .live-caption-controls { width: 96px; gap: 4px; }
html.conversation-app .live-caption-controls button { min-height: 28px; padding: 4px 7px; }
html.conversation-app .learning-actions {
  min-height: 0;
  padding: 6px;
  gap: 6px;
}
html.conversation-app .learning-actions button {
  min-height: 44px;
  padding: 7px 10px;
}
html.conversation-app .learning-coach-card {
  min-width: 0;
  min-height: 0;
  max-height: min(24dvh, 176px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid rgba(45, 139, 170, 0.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(100, 190, 222, 0.15), transparent 46%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(30, 81, 69, 0.09);
}
html.conversation-app body.learning-coach-open .learning-actions { display: none !important; }
html.conversation-app .learning-coach-copy { min-width: 0; display: grid; gap: 3px; }
html.conversation-app .learning-coach-kicker {
  color: #277a94;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
html.conversation-app .learning-coach-comparison {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: clamp(14px, 1.8dvh, 18px);
  line-height: 1.3;
}
html.conversation-app .learning-coach-comparison del { color: #a85c67; }
html.conversation-app .learning-coach-comparison span { color: #7d948e; }
html.conversation-app .learning-coach-comparison strong { color: #176f55; }
html.conversation-app .learning-coach-reason {
  color: #526b65;
  font-size: 12px;
  line-height: 1.35;
}
html.conversation-app .learning-coach-status {
  margin: 0;
  color: #3a6259;
  font-size: 12px;
  font-weight: 650;
}
html.conversation-app .learning-coach-actions {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 7px;
}
html.conversation-app .learning-coach-actions button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(22, 135, 123, 0.26);
  border-radius: 11px;
  color: #176f66;
  background: rgba(54, 179, 151, 0.08);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
html.conversation-app .learning-coach-actions button.primary {
  border-color: #198775;
  color: #fff;
  background: #198775;
}
html.conversation-app .learning-coach-actions button:disabled { opacity: 0.5; cursor: default; }
html.conversation-app .learning-coach-card[data-state="mastered"],
html.conversation-app .learning-coach-card[data-state="transfer"] {
  border-color: rgba(37, 155, 96, 0.4);
  background: linear-gradient(110deg, rgba(225, 248, 236, 0.98), rgba(255, 255, 255, 0.96));
}
html.conversation-app .learning-coach-card[data-state="retry"],
html.conversation-app .learning-coach-card[data-state="practice"] {
  border-color: rgba(205, 143, 42, 0.36);
}

/* 课程/诊断进度悬浮在舞台上沿，不占用纵向轨道。 */
html.conversation-app .diagnostic-progress,
html.conversation-app .lesson-progress {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 30;
  width: min(880px, calc(100% - 20px));
  min-height: 54px;
  padding: 8px 12px;
  transform: translateX(-50%);
  grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) auto;
  gap: 12px;
  border-radius: 13px;
  box-shadow: 0 12px 34px rgba(30, 81, 69, 0.16);
  backdrop-filter: blur(14px);
}
html.conversation-app .lesson-progress {
  width: min(1040px, calc(100% - 20px));
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) auto;
}
html.conversation-app .diagnostic-progress-copy,
html.conversation-app .lesson-progress-copy { gap: 1px; }
html.conversation-app .diagnostic-progress-copy small,
html.conversation-app .lesson-progress-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 底部操作舱是固定网格的一部分，不再覆盖正文，也不需要预留空白。 */
html.conversation-app .controls {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  transform: none;
  padding: 7px 9px;
  border-radius: 15px;
}
html.conversation-app .session-progress {
  min-height: 0;
  margin-bottom: 5px;
}
html.conversation-app .session-progress:not(:has(> :not(.hidden))) { display: none; }
html.conversation-app .session-actions {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 7px;
}
html.conversation-app .session-primary-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
html.conversation-app .session-primary-actions > button {
  min-height: 44px;
  padding-block: 9px;
  white-space: nowrap;
  touch-action: manipulation;
}
html.conversation-app .session-more { position: relative; flex: 0 0 auto; }
html.conversation-app .session-more > summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid rgba(67, 121, 108, .24);
  border-radius: 999px;
  color: #526a64;
  background: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
html.conversation-app .session-more > summary::-webkit-details-marker { display: none; }
html.conversation-app .session-more > summary::after { content: "···"; margin-left: 6px; letter-spacing: 1px; }
html.conversation-app .session-more[open] > summary { color: #176f66; background: #edf8f4; }
html.conversation-app .session-more-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 90;
  width: min(260px, calc(100vw - 24px));
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid #cfe3dd;
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 50px rgba(30, 81, 69, .2);
  text-align: left;
}
html.conversation-app .session-more-popover > button {
  width: 100%;
  min-width: 0 !important;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 13px;
  box-shadow: none;
}
html.conversation-app .session-more-popover > button.hidden { display: none; }
html.conversation-app .session-language-mode-field {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 9px;
  padding: 9px 10px;
  border: 1px solid rgba(81, 139, 124, .18);
  border-radius: 12px;
  color: #315f56;
  background: #f4faf8;
}
html.conversation-app .session-language-mode-field.hidden { display: none; }
html.conversation-app .session-language-mode-field > span {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
html.conversation-app .session-language-mode-field > select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 28px 6px 9px;
  border: 1px solid #c9e0d9;
  border-radius: 9px;
  color: #176f66;
  background-color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}
html.conversation-app .session-language-mode-field > small {
  grid-column: 1 / -1;
  color: #70827d;
  font-size: 11px;
}
html.conversation-app .mic-btn,
html.conversation-app .stop-btn { min-width: 168px; }
html.conversation-app .pause-btn { min-width: 112px; }

body.conversation-paused .avatar-visual,
body.conversation-paused .partner-avatar-visual,
body.conversation-paused .third-avatar-visual,
body.conversation-paused .cam-wrap {
  filter: saturate(0.72) brightness(0.96);
}
html.conversation-app .cockpit-tool-btn {
  min-width: 76px;
  padding: 9px 13px;
  border: 1px solid rgba(67, 121, 108, 0.24);
  border-radius: 999px;
  color: #526a64;
  background: rgba(91, 130, 120, 0.07);
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}
html.conversation-app .cockpit-tool-btn:hover,
html.conversation-app .cockpit-tool-btn[aria-pressed="true"] {
  color: #176f66;
  background: rgba(54, 179, 151, 0.14);
}
html.conversation-app .cockpit-tool-btn span {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 999px;
  color: #176f66;
  background: rgba(54, 179, 151, 0.12);
  font-size: 10px;
}
html.conversation-app .controls .hint {
  max-width: 900px;
  margin: 5px auto 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 生词本与完整记录共用右侧工具抽屉。 */
.tool-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 180;
  width: min(540px, 94vw);
  max-width: none;
  height: var(--app-height, 100dvh);
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--text);
  background: transparent;
}
.tool-drawer::backdrop { background: rgba(31, 62, 55, 0.3); backdrop-filter: blur(4px); }
.tool-drawer[open] { animation: tool-drawer-enter 180ms ease-out both; }
@keyframes tool-drawer-enter {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
.tool-drawer-shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-left: 1px solid #cfe4dd;
  background:
    radial-gradient(circle at 100% 0%, rgba(100, 190, 222, 0.12), transparent 32rem),
    #f7fcfa;
  box-shadow: -22px 0 70px rgba(30, 81, 69, 0.2);
}
.tool-drawer-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: max(18px, env(safe-area-inset-top)) 18px 15px;
  border-bottom: 1px solid #d7e8e2;
  background: rgba(255, 255, 255, 0.94);
}
.tool-drawer-head > div:first-child { min-width: 0; }
.tool-drawer-head > div:first-child > span {
  color: #277a94;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.12em;
}
.tool-drawer-head h2 { margin-top: 3px; font-size: 21px; }
.tool-drawer-head p {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-drawer-head-actions { display: flex; align-items: center; gap: 8px; }
.after-talk-history { display: none; }
.tool-drawer-head-actions > button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid #cfe4dd;
  border-radius: 50%;
  color: #526a64;
  background: #f5faf8;
  font: 500 24px/1 inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.tool-drawer .vocabulary-book,
.tool-drawer .transcript-panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.tool-drawer .vocabulary-book.empty:not(.hidden) { display: block; }
.tool-drawer .vocabulary-book-content { height: 100%; padding: 0 16px 16px; border: 0; }
.tool-drawer .vocabulary-list {
  max-height: none;
  height: calc(100% - 52px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tool-drawer .transcript-panel .transcript {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  -webkit-overflow-scrolling: touch;
}
.after-talk-drawer {
  width: var(--after-talk-width, clamp(480px, 46vw, 760px));
  min-width: min(480px, 94vw);
}
.after-talk-drawer::backdrop { background: transparent; backdrop-filter: none; }
.after-talk-drawer .tool-drawer-shell { position: relative; }
.after-talk-resize-handle {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 8;
  width: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}
html.resizing-after-talk,
html.resizing-after-talk * { cursor: ew-resize !important; user-select: none !important; }
html.resizing-after-talk body { transition: none !important; }
.after-talk-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 4px;
  height: 72px;
  border-radius: 999px;
  background: #83bdb0;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.72), 0 8px 24px rgba(30, 81, 69, 0.18);
  transform: translateY(-50%);
}
.after-talk-resize-handle:focus-visible::after { outline: 3px solid rgba(22, 135, 123, 0.3); }
.after-talk-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  overflow: hidden;
}
.after-talk-content {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px 18px max(26px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.after-talk-content > #after-talk-session-picker { order: 0; }
.after-talk-content > #review-audio-section { order: 1; }
.after-talk-content > #after-talk-report-choice { order: 2; }
.after-talk-content > #review-report-section { order: 3; }
.after-talk-content > .after-talk-secondary { order: 4; }
.after-talk-content > #review-conversation-section { order: 5; }
.after-talk-content > .after-talk-chat { order: 6; }
.after-talk-content > #review-vocabulary-section { order: 7; }
.after-talk-content > #after-talk-feedback { order: 8; }
.after-talk-content > #after-talk-share { order: 9; }
.after-talk-content > .after-talk-note { order: 10; }
.after-talk-menu {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 9px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border-left: 1px solid #d7e8e2;
  background: rgba(244, 250, 248, 0.96);
}
.after-talk-menu button {
  min-height: 62px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 7px 4px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #59736c;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
  touch-action: manipulation;
}
.after-talk-menu button > span { color: #16877b; font-size: 16px; line-height: 1; }
.after-talk-menu button:hover,
.after-talk-menu button[aria-current="true"] {
  border-color: #c8e1da;
  color: #145e57;
  background: #fff;
  box-shadow: 0 8px 22px rgba(30, 81, 69, 0.08);
}
.after-talk-menu button:disabled { opacity: 0.38; cursor: not-allowed; }
.review-workspace-section {
  scroll-margin-top: 12px;
  display: grid;
  gap: 14px;
  padding: 17px;
  border: 1px solid #d4e7e1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}
.review-workspace-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.review-workspace-section > header span { color: #277a94; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.review-workspace-section > header h3 { margin: 3px 0 0; color: var(--text); font-size: 17px; }
.review-workspace-section > header small { color: var(--muted); font-size: 10px; text-align: right; }
.review-audio-session-meta { display: none; }
.review-workspace-section > header button,
.review-media-download {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid #c9e1da;
  border-radius: 10px;
  color: #176f66;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.review-vocabulary-list { display: grid; gap: 9px; }
.review-vocabulary-list .vocabulary-card { margin: 0; }
.review-section-placeholder {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed #c9e1da;
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}
.after-talk-report-host .report-frame-wrap {
  width: 100%;
  height: min(72vh, 780px);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid #d4e7e1;
  border-radius: 14px;
}
.review-media-section audio { width: 100%; min-height: 54px; }
.review-media-section > p { margin: 0; color: var(--muted); font-size: 11px; }
.review-media-section.unavailable audio,
.review-media-section.unavailable .recording-caption,
.review-media-section.unavailable .review-media-download { display: none; }
.recording-caption {
  min-height: 116px;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 17px 18px;
  border: 1px solid #c9e3dc;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(234, 249, 244, 0.96), rgba(246, 250, 255, 0.96));
  transition: border-color 160ms ease, background 160ms ease;
}
.recording-caption[data-speaker="human"] {
  border-color: #cadcea;
  background: linear-gradient(145deg, rgba(237, 246, 255, 0.98), rgba(249, 251, 255, 0.96));
}
.recording-caption[data-uncertain="true"] {
  border-color: #e3d5af;
  background: linear-gradient(145deg, rgba(255, 249, 230, 0.98), rgba(255, 252, 242, 0.96));
}
.recording-caption > span {
  width: max-content;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: #268b7d;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .04em;
}
.recording-caption[data-speaker="human"] > span { background: #397da3; }
.recording-caption[data-uncertain="true"] > span { background: #9a6a1f; }
.recording-caption > p {
  margin: 0;
  color: #163f37;
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 720;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.recording-caption[data-active="false"] > span { background: #78928c; }
.recording-caption[data-active="false"] > p {
  color: #6b817c;
  font-size: 13px;
  font-weight: 560;
}
.after-talk-session-picker {
  display: grid;
  gap: 6px;
  padding: 2px 2px 4px;
}
.after-talk-session-picker > span {
  color: #5d7670;
  font-size: 11px;
  font-weight: 750;
}
.after-talk-session-picker select {
  width: 100%;
  min-height: 46px;
  padding: 9px 38px 9px 12px;
  border: 1px solid #c9e1da;
  border-radius: 13px;
  color: #20483f;
  background: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.after-talk-transcript-block,
.after-talk-chat {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cee4dd;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(45, 98, 86, 0.07);
}
.after-talk-transcript-block > header,
.after-talk-chat > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid #deebe7;
  background: linear-gradient(120deg, rgba(232, 248, 242, 0.78), rgba(245, 250, 255, 0.72));
}
.after-talk-transcript-block > header > div,
.after-talk-chat > header > div { min-width: 0; }
.after-talk-transcript-block > header span,
.after-talk-chat > header span {
  display: block;
  margin-bottom: 3px;
  color: #27806f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.after-talk-transcript-block h3,
.after-talk-chat h3 { margin: 0; color: #173d36; font-size: 16px; }
.after-talk-transcript-block header small,
.after-talk-chat header small {
  flex: 0 0 auto;
  color: #667e78;
  font-size: 10px;
  text-align: right;
}
.after-talk-transcript-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.after-talk-transcript-actions button {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid #c8e1da;
  border-radius: 10px;
  color: #176f66;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
  touch-action: manipulation;
}
.after-talk-transcript-actions button:hover:not(:disabled) { border-color: #86c5b7; }
.after-talk-transcript-actions button:disabled { opacity: .48; cursor: default; }
.after-talk-sequence {
  max-height: min(42dvh, 390px);
  margin: 0;
  padding: 8px 14px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.after-talk-sequence.expanded {
  max-height: none;
  overflow-y: visible;
}
.after-talk-sequence-item {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(207, 228, 221, 0.72);
}
.after-talk-sequence-item:last-child { border-bottom: 0; }
.after-talk-sequence-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #55716a;
  background: #edf6f3;
  font-size: 10px;
  font-weight: 800;
}
.after-talk-sequence-copy { min-width: 0; }
.after-talk-sequence-copy > div {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}
.after-talk-sequence-speaker { color: #1d7165; font-size: 12px; font-weight: 820; }
.after-talk-sequence-item[data-speaker="learner"] .after-talk-sequence-speaker { color: #74529d; }
.after-talk-sequence-copy p {
  margin: 0;
  color: #203f39;
  font-size: 14px;
  line-height: 1.62;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}
.after-talk-sequence-copy .after-talk-sequence-translation {
  margin-top: 5px;
  color: #72847f;
  font-size: 12px;
  line-height: 1.5;
}
.after-talk-sequence-translation::before {
  content: attr(data-label) " · ";
  color: #369080;
  font-size: 10px;
  font-weight: 780;
}
.after-talk-sequence[data-bilingual-visible="false"] .after-talk-sequence-chinese {
  display: none;
}
.after-talk-natural-english-note {
  padding: 2px 6px;
  border-radius: 999px;
  color: #216f63 !important;
  background: #e4f5f0;
  font-size: 9px !important;
  font-weight: 780;
  letter-spacing: 0 !important;
}
.after-talk-asr-note {
  padding: 2px 6px;
  border-radius: 999px;
  color: #8a641d;
  background: #fff4d5;
  font-size: 9px;
  font-weight: 760;
}
.after-talk-sequence-empty {
  padding: 22px 8px;
  color: #70837e;
  font-size: 12px;
  text-align: center;
}
.after-talk-chat { padding-bottom: 12px; }
.after-talk-chat-messages {
  max-height: min(34dvh, 310px);
  display: grid;
  gap: 9px;
  padding: 12px 14px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.after-talk-chat-empty {
  margin: 2px 0 7px;
  color: #667e78;
  font-size: 12px;
  line-height: 1.55;
}
.after-talk-chat-message {
  max-width: 92%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d8e8e3;
  border-radius: 14px 14px 14px 5px;
  color: #23443e;
  background: #f7fbfa;
  font-size: 13px;
  line-height: 1.62;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.after-talk-chat-message[data-role="user"] {
  justify-self: end;
  border-color: rgba(23, 133, 118, 0.3);
  border-radius: 14px 14px 5px 14px;
  color: #115e55;
  background: #e6f6f0;
}
.after-talk-chat-prompts {
  display: flex;
  gap: 7px;
  padding: 9px 14px 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.after-talk-chat-prompts::-webkit-scrollbar { display: none; }
.after-talk-chat-prompts button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #c8e1da;
  border-radius: 999px;
  color: #2b7166;
  background: #f8fcfa;
  font: inherit;
  font-size: 11px;
  font-weight: 720;
  cursor: pointer;
  touch-action: manipulation;
}
.after-talk-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 8px 14px 0;
}
.after-talk-chat-form textarea {
  width: 100%;
  min-height: 46px;
  max-height: 120px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid #c9dfd9;
  border-radius: 12px;
  color: #173d36;
  background: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.after-talk-chat-form button {
  min-width: 62px;
  min-height: 46px;
  padding: 9px 13px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #168779;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.after-talk-chat-form button:disabled,
.after-talk-chat-prompts button:disabled { opacity: 0.48; cursor: wait; }
.after-talk-chat-status {
  min-height: 1.3em;
  margin: 6px 15px 0;
  color: #637b75;
  font-size: 10px;
}
.after-talk-card {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #d4e8e2;
  border-radius: 16px;
  color: #173d36;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(45, 98, 86, 0.07);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.after-talk-card:hover:not(:disabled) {
  border-color: #8fcfc0;
  background: #fff;
  transform: translateY(-1px);
}
.after-talk-share-card {
  border-color: rgba(28, 139, 118, 0.32);
  background: linear-gradient(135deg, rgba(231, 249, 242, 0.98), rgba(244, 250, 255, 0.98));
}
.after-talk-card:disabled { opacity: 0.54; cursor: wait; }
.after-talk-card > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.after-talk-card strong { font-size: 16px; }
.after-talk-card small { overflow: hidden; color: #657d77; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.after-talk-card > b { color: #3a8171; font-size: 26px; font-weight: 400; }
.after-talk-primary {
  border-color: rgba(22, 135, 123, .48);
  background: linear-gradient(120deg, rgba(226, 247, 239, .98), rgba(248, 253, 251, .98));
  box-shadow: 0 12px 28px rgba(30, 111, 92, .1);
}
.after-talk-primary strong { color: #126f65; font-size: 18px; }
.after-talk-report-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 9px;
}
.after-talk-report-skip {
  min-width: 96px;
  padding: 10px 14px;
  border: 1px solid #d4e7e1;
  border-radius: 16px;
  color: #607a73;
  background: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
  touch-action: manipulation;
}
.after-talk-report-skip:hover { border-color: #9bcfc3; color: #216b61; background: #fff; }
.after-talk-secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.after-talk-secondary .after-talk-card { min-width: 0; grid-template-columns: auto minmax(0, 1fr); }
.after-talk-secondary .after-talk-card > b { display: none; }
.after-talk-feedback { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(236, 247, 243, .72); }
.after-talk-feedback > strong { color: #244c46; font-size: 14px; }
.after-talk-feedback > div { display: flex; flex-wrap: wrap; gap: 7px; }
.after-talk-feedback button { min-height: 40px; padding: 8px 12px; border: 1px solid rgba(22, 135, 123, .22); border-radius: 999px; color: #286b61; background: rgba(255, 255, 255, .82); font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.after-talk-feedback button[aria-pressed="true"] { border-color: #168779; color: #fff; background: #168779; }
.after-talk-feedback > span { min-height: 1.2em; color: #53716b; font-size: 12px; }
@media (max-width: 700px) {
  .after-talk-report-choice { grid-template-columns: 1fr; }
  .after-talk-report-skip { min-height: 44px; }
  .after-talk-secondary { grid-template-columns: 1fr; }
  .after-talk-transcript-block > header,
  .after-talk-chat > header { align-items: flex-start; }
  .after-talk-transcript-block header small,
  .after-talk-chat header small { max-width: 40%; }
  .after-talk-sequence { max-height: 44dvh; }
  .after-talk-chat-message { max-width: 96%; }
  .conversation-presence { bottom: 8px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
}
.after-talk-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #176f66;
  background: linear-gradient(145deg, #e5f6f0, #eaf4fa);
  font-size: 15px;
  font-weight: 850;
}
.after-talk-note {
  margin: 3px 4px 0;
  color: #6c827c;
  font-size: 11px;
  line-height: 1.6;
}
.share-preview-wrap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.share-preview-wrap > img {
  width: min(100%, 430px);
  min-height: 240px;
  align-self: center;
  border: 1px solid #cfe4dd;
  border-radius: 20px;
  background: linear-gradient(145deg, #dfeee9, #f7fbfa);
  box-shadow: 0 16px 42px rgba(31, 73, 65, 0.14);
}
.share-preview-wrap > img:not([src]) { opacity: 0.58; }
.share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.share-actions button,
.share-actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid #cfe4dd;
  border-radius: 13px;
  color: #277a94;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.share-actions #share-native { color: #fff; border-color: #16877b; background: #16877b; }
.share-actions .button-danger { color: #a14d5c; border-color: rgba(188, 86, 103, 0.24); }
.share-actions [aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.share-privacy-note { margin: 0 2px; color: #657d77; font-size: 11px; line-height: 1.65; }
.recording-toggle span { display: inline-flex; align-items: baseline; gap: 6px; }
.recording-toggle small { color: var(--muted); font-size: 10px; font-weight: 500; }
.recording-player {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  overflow-y: auto;
}
.recording-player-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #cfe4dd;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}
.recording-player-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding-left: 3px;
  border-radius: 50%;
  color: #fff;
  background: #2d8baa;
}
.recording-player-card strong { color: var(--text); font-size: 15px; }
.recording-player-card p,
.recording-privacy-note { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.recording-player audio { width: 100%; min-height: 54px; }
.recording-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recording-actions a,
.recording-actions button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid #cfe4dd;
  border-radius: 12px;
  color: #277a94;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.recording-actions button { color: #a14d5c; border-color: rgba(188, 86, 103, 0.24); }

/* 画面选项属于设置流程，不再占主页面高度。 */
.setup-dialog .setup-visual-options {
  width: 100%;
  border-color: #cfe4dd;
  background: rgba(235, 247, 243, 0.62);
  box-shadow: none;
}
.setup-dialog .setup-visual-options > summary {
  justify-content: space-between;
  color: var(--text);
  font-weight: 700;
}
.setup-dialog .setup-visual-options > summary span { color: var(--muted); font-size: 10px; }
.setup-dialog,
.setup-dialog-shell { max-height: min(var(--app-height, 100dvh), 900px); }

/* 矮屏桌面：压缩非关键文案，把空间优先让给人物和字幕。 */
@media (max-height: 800px) {
  html.conversation-app .stage { padding-block: max(7px, env(safe-area-inset-top)); gap: 6px; }
  html.conversation-app .topbar { min-height: 40px; padding-block: 5px; }
  html.conversation-app .conversation-cockpit { gap: 6px; }
  html.conversation-app .controls { padding-block: 6px; }
  html.conversation-app .controls .hint { display: none; }
  html.conversation-app .session-actions > button { min-height: 42px; padding-block: 7px; }
  html.conversation-app .live-caption,
  html.conversation-app body.conversation-tutor .live-caption { max-height: 132px; padding-block: 6px; }
  html.conversation-app .live-caption-text { font-size: clamp(20px, 3dvh, 26px); }
  html.conversation-app body.conversation-tutor .live-caption-text { font-size: clamp(19px, 2.75dvh, 24px); }
  html.conversation-app .learning-actions { padding: 4px; }
  html.conversation-app .learning-actions button { min-height: 42px; padding-block: 5px; }
  html.conversation-app .learning-coach-card { max-height: 138px; padding-block: 7px; }
  html.conversation-app .learning-coach-actions button { min-height: 42px; padding-block: 6px; }
  html.conversation-app .diagnostic-progress-copy small,
  html.conversation-app .lesson-progress-copy small { display: none; }
}

/* 平板触控：不依赖 hover，所有操作达到手指可点尺寸。 */
html.pad-surface .stage {
  width: 100%;
  max-width: none;
  padding-inline: max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
}
html.pad-surface #fullscreen-btn { display: none; }
html.pad-surface :where(
  .session-actions > button,
  .live-caption-controls button,
  .learning-actions button,
  .learning-coach-actions button,
  .top-menu > summary,
  .education-entry,
  .setup-dialog button,
  .report-drawer-actions button
) { min-height: 48px; }
html.pad-surface :where(button, summary, a, select) { touch-action: manipulation; }

@media (pointer: coarse) {
  html.conversation-app :where(button, summary, a, select) { touch-action: manipulation; }
  html.conversation-app .session-actions > button,
  html.conversation-app .live-caption-controls button,
  html.conversation-app .learning-actions button,
  html.conversation-app .learning-coach-actions button,
  html.conversation-app .top-menu > summary,
  html.conversation-app .education-entry { min-height: 44px; }
  html.conversation-app .top-menu-popover a { min-height: 44px; display: flex; align-items: center; }
  html.conversation-app .setup-dialog-close,
  html.conversation-app .report-close-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  html.conversation-app .setup-dialog :where(input, select, button),
  html.conversation-app .report-drawer-actions button { min-height: 44px; }
  html.conversation-app .avatar-wrap.active-speaker { transform: none; }
}

/* 平板竖屏：当前发言人为主画面，其余席位成为底部缩略栏。 */
@media (orientation: portrait) and (pointer: coarse) {
  html.conversation-app .stage { gap: 7px; padding-inline: max(8px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  html.conversation-app .topbar { flex-wrap: wrap; gap: 5px 8px; }
  html.conversation-app .status { flex-basis: min(44vw, 260px); }
  html.conversation-app .conversation-cockpit { gap: 7px; }
  html.conversation-app body.conversation-double .call-view,
  html.conversation-app body.conversation-triple .call-view {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 92px;
    gap: 6px;
    overflow: hidden;
  }
  html.conversation-app body.conversation-double .call-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.conversation-app body.conversation-triple .call-view { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.conversation-app body.conversation-triple.includes-human .call-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.conversation-app body.conversation-double .call-view > .persona-pane,
  html.conversation-app body.conversation-triple .call-view > .persona-pane,
  html.conversation-app body.conversation-triple .call-view > .cam-wrap {
    grid-row: 2;
    height: 92px;
    min-height: 0;
  }
  html.conversation-app body.conversation-double .call-view #avatar-wrap,
  html.conversation-app body.conversation-triple .call-view #avatar-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 100%;
  }
  html.conversation-app body.conversation-double .call-view #partner-avatar-wrap { grid-column: 2; }
  html.conversation-app body.conversation-triple .call-view #partner-avatar-wrap { grid-column: 1; }
  html.conversation-app body.conversation-triple .call-view #third-avatar-wrap { grid-column: 2; }
  html.conversation-app body.conversation-triple .call-view #cam-wrap { grid-column: 3; }
  html.conversation-app body.conversation-triple.includes-human .call-view #cam-wrap { grid-column: 2; }

  html.conversation-app body.conversation-double .call-view[data-active-speaker="b"] #partner-avatar-wrap,
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="b"] #partner-avatar-wrap,
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="c"] #third-avatar-wrap,
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="human"] #cam-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 100%;
  }
  html.conversation-app body.conversation-double .call-view[data-active-speaker="b"] #avatar-wrap,
  html.conversation-app body.conversation-triple .call-view:not([data-active-speaker="a"]) #avatar-wrap {
    grid-column: 1;
    grid-row: 2;
    height: 92px;
  }
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="b"] #third-avatar-wrap { grid-column: 2; }
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="c"] #partner-avatar-wrap,
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="human"] #partner-avatar-wrap { grid-column: 2; }
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="b"] #cam-wrap,
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="c"] #cam-wrap { grid-column: 3; }
  html.conversation-app body.conversation-triple .call-view[data-active-speaker="human"] #third-avatar-wrap { grid-column: 3; }

  html.conversation-app .live-caption,
  html.conversation-app body.conversation-tutor .live-caption { max-height: min(19dvh, 160px); }
  html.conversation-app .learning-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.conversation-app .session-actions {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html.conversation-app .session-actions::-webkit-scrollbar { display: none; }
  html.conversation-app .session-actions > button { flex: 0 0 auto; }
  .tool-drawer { width: min(88vw, 540px); }
  .tool-drawer.after-talk-drawer { width: min(94vw, var(--after-talk-width, 980px)); }
}

@media (max-width: 720px) {
  html.conversation-app,
  html.conversation-app body,
  html.conversation-app .stage,
  html.conversation-app .topbar,
  html.conversation-app .conversation-cockpit,
  html.conversation-app .call-view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  html.conversation-app .controls {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }
  html.conversation-app .stage {
    gap: 6px;
    padding: max(6px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
  }
  html.conversation-app .topbar {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "status status";
    align-items: center;
    gap: 3px 7px;
    padding: 5px 7px;
    overflow: visible;
  }
  html.conversation-app .topbar h1 {
    grid-area: brand;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    font-size: 18px;
    white-space: nowrap;
  }
  html.conversation-app .topbar h1 small {
    min-width: 0;
    max-width: 108px;
    margin-left: 0;
    overflow: hidden;
    font-size: 8px;
    letter-spacing: 1px;
    text-overflow: clip;
    white-space: nowrap;
  }
  html.conversation-app .top-actions {
    grid-area: actions;
    min-width: 0;
    max-width: 47vw;
    margin-left: 0;
    justify-content: flex-end;
  }
  html.conversation-app .education-entry,
  html.conversation-app .mode-switch-entry { display: none; }
  html.conversation-app .account-points {
    min-width: 0;
    max-width: 112px;
    overflow: hidden;
    padding-inline: 8px;
    text-overflow: ellipsis;
  }
  html.conversation-app .top-menu > summary {
    width: 42px;
    min-width: 42px;
    justify-content: center;
    padding-inline: 8px;
    overflow: hidden;
    font-size: 0;
  }
  html.conversation-app .top-menu > summary::before {
    content: "•••";
    font-size: 13px;
    letter-spacing: 2px;
  }
  html.conversation-app .top-menu > summary::after { display: none; }
  html.conversation-app .top-menu-popover a { min-height: 44px; }
  html.conversation-app .status {
    grid-area: status;
    width: 100%;
    min-width: 0;
    flex-basis: auto;
    font-size: 11px;
  }
  html.conversation-app body.conversation-tutor .call-view,
  html.conversation-app body.conversation-tutor.guest-hidden .call-view,
  html.conversation-app body.conversation-tutor.camera-voice-only .call-view,
  html.conversation-app body.conversation-tutor.camera-voice-only.guest-hidden .call-view {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.conversation-app .cam-wrap,
  html.conversation-app .avatar-wrap { min-width: 0; max-width: 100%; }
  html.conversation-app .controls { bottom: auto; width: 100%; padding: 6px 7px; border: 1px solid rgba(190, 218, 210, 0.94); border-radius: 14px; }
  html.conversation-app .controls .hint { display: none; }
  html.conversation-app .session-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    overflow: visible;
  }
  html.conversation-app .session-primary-actions { flex: 1 1 auto; }
  html.conversation-app .session-primary-actions > button,
  html.conversation-app .mic-btn,
  html.conversation-app .stop-btn,
  html.conversation-app .pause-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 5px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
  }
  html.conversation-app .session-more > summary { width: 52px; padding-inline: 8px; font-size: 0; }
  html.conversation-app .session-more > summary::after { margin: 0; font-size: 14px; }
  html.conversation-app #fullscreen-btn { display: none; }
  html.conversation-app .live-caption-controls { width: 100%; }
  html.conversation-app .lesson-progress {
    grid-template-columns: minmax(0, 1fr);
    max-height: 156px;
    overflow: auto;
  }
  html.conversation-app .lesson-home-link { display: none; }
  html.conversation-app .learning-coach-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    max-height: min(28dvh, 190px);
  }
  html.conversation-app .learning-coach-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.conversation-app .learning-coach-actions button { min-width: 0; padding-inline: 6px; }
  .tool-drawer { width: 100vw; }
  .tool-drawer-shell { border-left: 0; }
}

@media (max-width: 360px) {
  html.conversation-app .topbar h1 small { max-width: 72px; }
  html.conversation-app .account-points { max-width: 92px; }
  html.conversation-app .after-talk-btn span { display: none; }
  html.conversation-app .session-actions > button { font-size: 11px; }
}

/* ── 场景化 2Talk：背景与人物分层，人物原图/口型坐标保持不变 ── */
.call-view.scene-active .scene-intro {
  background:
    linear-gradient(135deg, rgba(232, 248, 242, 0.9), rgba(239, 245, 250, 0.84)),
    var(--conversation-scene-image) var(--conversation-scene-position, center center) / cover no-repeat;
  backdrop-filter: blur(5px) saturate(0.82);
}
.call-view.scene-active .scene-intro-card {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px) saturate(0.92);
}
.call-view.scene-active .avatar-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(16, 39, 34, 0.03), rgba(12, 32, 28, 0.2)),
    var(--conversation-scene-image) var(--conversation-scene-position, center center) / cover no-repeat;
  transform: scale(1.015);
}
.call-view.scene-active .avatar-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 72% at 50% 54%, transparent 40%, rgba(18, 42, 36, 0.12) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(19, 43, 37, 0.12));
}
.call-view.scene-active .avatar-visual {
  inset: 0;
  z-index: 2;
  background: transparent;
}
.call-view.scene-active .avatar-visual::before { display: none; }
.call-view.scene-active .avatar-portrait {
  /* 900px 逻辑舞台已由父层统一 scale；这里不能再次按容器缩放。 */
  max-width: none;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 22px 35px rgba(18, 48, 39, 0.25));
}
.call-view.scene-active .avatar-still {
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  filter: drop-shadow(0 22px 35px rgba(18, 48, 39, 0.25));
}
.call-view.scene-active #avatar-video,
.call-view.scene-active .lipsync-preview-video { z-index: 5; }

/* 只有麦克风时仍保留一个有生命的用户席位，不显示黑框或失败占位符。 */
.cam-wrap.voice-only .cam-fallback {
  display: flex;
  isolation: isolate;
  color: #f5fffb;
  background:
    linear-gradient(160deg, rgba(19, 55, 46, 0.64), rgba(30, 74, 65, 0.76)),
    var(--conversation-scene-image) var(--conversation-scene-position, center center) / cover no-repeat;
}
.cam-wrap.voice-only .cam-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 45%, rgba(104, 226, 187, 0.2), transparent 42%);
  backdrop-filter: blur(5px) saturate(0.72);
}
.voice-presence {
  width: min(320px, 82%);
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.voice-presence strong { color: #315f56; font-size: clamp(17px, 2.2vw, 25px); }
.voice-presence>span { max-width: 260px; color: #607a74; font-size: 11px; line-height: 1.55; }
.cam-wrap.voice-only .voice-presence strong { color: #fff; }
.cam-wrap.voice-only .voice-presence>span { color: rgba(236, 255, 249, 0.78); }
.voice-presence button {
  min-height: 40px;
  margin-top: 5px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  color: #effcf7;
  background: rgba(255, 255, 255, 0.12);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}
.voice-presence button:hover { background: rgba(255, 255, 255, 0.2); }
.voice-orb {
  width: clamp(78px, 11vw, 116px);
  height: clamp(78px, 11vw, 116px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 4px;
  border: 1px solid rgba(176, 242, 220, 0.34);
  border-radius: 50%;
  background: rgba(26, 89, 72, 0.42);
  box-shadow: 0 0 0 var(--voice-ring, 0px) rgba(102, 226, 184, 0.12), 0 18px 46px rgba(8, 32, 26, 0.2);
  transition: box-shadow 90ms linear, transform 90ms linear;
}
.voice-orb i {
  width: 4px;
  height: var(--voice-bar, 11px);
  border-radius: 99px;
  background: linear-gradient(#d8fff1, #65d8b2);
  transition: height 70ms linear;
}
.voice-orb i:nth-child(2),.voice-orb i:nth-child(4) { height: var(--voice-bar-soft, 17px); }
.voice-orb i:nth-child(3) { height: var(--voice-bar-tall, 22px); }
.cam-wrap.voice-active .voice-orb { transform: scale(1.025); }
html.conversation-app body.conversation-tutor.camera-voice-only .call-view,
html.conversation-app body.conversation-tutor.camera-voice-only.guest-hidden .call-view {
  grid-template-columns: minmax(210px, 0.58fr) minmax(0, 1.42fr);
}

@media (max-width: 720px) {
  html.conversation-app body.conversation-tutor.camera-voice-only .call-view,
  html.conversation-app body.conversation-tutor.camera-voice-only.guest-hidden .call-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .voice-presence>span { display: none; }
  .voice-presence button { min-height: 44px; }
  .tool-drawer.after-talk-drawer { width: 100vw; min-width: 0; }
  .after-talk-resize-handle { display: none; }
  .after-talk-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .after-talk-menu {
    grid-row: 2;
    flex-direction: row;
    gap: 4px;
    padding: 7px max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #d7e8e2;
    border-left: 0;
  }
  .after-talk-menu button { min-width: 66px; min-height: 52px; flex: 1 0 66px; }
  .after-talk-report-host .report-frame-wrap { min-height: 480px; height: 68dvh; }
  .continuation-actions { width: 100%; justify-content: center; flex-wrap: wrap; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html.conversation-app .conversation-cockpit::before,
  html.conversation-app .avatar-wrap { transition: none !important; }
  .scene-intro,
  .scene-intro-card { transition: none !important; }
  .scene-intro-ready i { animation: none !important; }
  .tool-drawer { animation: none !important; scroll-behavior: auto; }
}

/* 本次回顾是并排工作区，不是阻断式弹窗：主对话保持清晰并在剩余区域居中。 */
@media (min-width: 960px) {
  html.conversation-app body.after-talk-open {
    padding-inline-end: var(--after-talk-panel-width, clamp(480px, 46vw, 760px));
  }
  html.conversation-app body.after-talk-open .stage {
    width: min(1440px, 100%);
    margin-inline: auto;
  }
  html.conversation-app body.after-talk-open .session-actions {
    justify-content: flex-start;
    /* PC 诊断侧栏打开时，“更多”浮层必须能越过操作栏边界。 */
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (max-width: 959px) {
  .tool-drawer.after-talk-drawer { width: 100vw; min-width: 0; }
  .after-talk-resize-handle { display: none; }
  .after-talk-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .after-talk-menu {
    grid-row: 2;
    flex-direction: row;
    gap: 4px;
    padding: 7px max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #d7e8e2;
    border-left: 0;
  }
  .after-talk-menu button { min-width: 66px; min-height: 52px; flex: 1 0 66px; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  html.conversation-app body { transition: padding-inline-end 180ms ease; }
}

/* 身份安全表演：嘴唇局部＋眼眉微表情；鼻子、脸颊、下巴和全脸始终来自原图。 */
.avatar-visual[data-face-shape="stable"] .avatar-face-deform-rig,
.avatar-visual[data-face-shape="stable"] .avatar-mouth-rig,
.avatar-visual[data-face-shape="stable"] .avatar-expression-layer {
  display: none !important;
}
.avatar-visual[data-face-shape="stable"] .avatar-speech-expression-layer {
  /* 表情贴片只替换两侧眉毛。眼睛身份始终来自底图，眼睑动作由独立眨眼层
     完成；这样不会再把两双位置略有差异的眼睛半透明叠在一起。 */
  transition: opacity 90ms linear;
  -webkit-mask-image:
    radial-gradient(ellipse 16% 13% at 34% 28%, #000 64%, rgba(0, 0, 0, .94) 76%, rgba(0, 0, 0, .36) 88%, transparent 100%),
    radial-gradient(ellipse 16% 13% at 66% 28%, #000 64%, rgba(0, 0, 0, .94) 76%, rgba(0, 0, 0, .36) 88%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 16% 13% at 34% 28%, #000 64%, rgba(0, 0, 0, .94) 76%, rgba(0, 0, 0, .36) 88%, transparent 100%),
    radial-gradient(ellipse 16% 13% at 66% 28%, #000 64%, rgba(0, 0, 0, .94) 76%, rgba(0, 0, 0, .36) 88%, transparent 100%);
  mask-composite: add;
}
.avatar-visual[data-face-shape="stable"] .avatar-viseme-layer {
  /* 张嘴贴片的实心区完整覆盖底图嘴唇与两侧嘴角；只在嘴唇之外羽化。
     否则闭嘴底图会从贴片边缘漏出，形成截图中的黑线和“双嘴”。 */
  transition: none;
  -webkit-mask-image: radial-gradient(
    ellipse var(--avatar-viseme-mask-rx, 36%) var(--avatar-viseme-mask-ry, 25%) at var(--avatar-viseme-mask-cx, 50%) var(--avatar-viseme-mask-cy, 63%),
    #000 86%, rgba(0, 0, 0, .98) 92%, rgba(0, 0, 0, .58) 97%, transparent 100%
  );
  mask-image: radial-gradient(
    ellipse var(--avatar-viseme-mask-rx, 36%) var(--avatar-viseme-mask-ry, 25%) at var(--avatar-viseme-mask-cx, 50%) var(--avatar-viseme-mask-cy, 63%),
    #000 86%, rgba(0, 0, 0, .98) 92%, rgba(0, 0, 0, .58) 97%, transparent 100%
  );
}
.avatar-visual[data-face-shape="stable"] .avatar-blink-layer {
  /* 眨眼只覆盖左右眼，不再用一整块脸部贴片覆盖鼻梁和双颊。 */
  -webkit-mask-image:
    radial-gradient(ellipse 17.5% 28% at 32.3% 45%, #000 52%, rgba(0, 0, 0, .92) 70%, transparent 100%),
    radial-gradient(ellipse 17.5% 28% at 69.2% 45%, #000 52%, rgba(0, 0, 0, .92) 70%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 17.5% 28% at 32.3% 45%, #000 52%, rgba(0, 0, 0, .92) 70%, transparent 100%),
    radial-gradient(ellipse 17.5% 28% at 69.2% 45%, #000 52%, rgba(0, 0, 0, .92) 70%, transparent 100%);
  mask-composite: add;
}

/* CSP-safe dance library */
.dance-library-page .stage { gap: 16px; }
.dance-library-panel { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.dance-library-panel h2 { margin: 0 0 12px; font-size: 15px; }
.dance-library-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.dance-library-row label { min-width: 86px; color: var(--muted); font-size: 13px; }
.dance-library-row input[type="text"], .dance-library-row textarea, .dance-library-row select { flex: 1; min-width: 180px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--bg); font-size: 13px; }
.dance-library-row textarea { min-height: 64px; resize: vertical; font-family: inherit; }
.dance-library-row input[type="file"] { flex: none; color: var(--muted); font-size: 12px; }
.dance-library-button { padding: 9px 22px; border: 0; border-radius: 8px; color: #fff; cursor: pointer; background: var(--accent); font-size: 14px; }
.dance-library-button:disabled { opacity: .5; cursor: default; }
.dance-library-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dance-library-card { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.dance-library-card > video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.dance-library-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.dance-library-name { overflow-wrap: anywhere; font-size: 14px; }
.dance-library-delete { border: 0; color: var(--muted); cursor: pointer; background: none; font-size: 12px; }
.dance-library-delete:hover { color: #f85149; }
.dance-library-card-status { padding: 18px 12px; color: var(--warn); text-align: center; font-size: 13px; }
.dance-library-seed { margin-left: auto; color: var(--muted); font-size: 11px; }
.dance-library-hint { color: var(--muted); font-size: 12px; line-height: 1.7; }
.dance-library-back { color: var(--accent); text-decoration: none; font-size: 13px; }
.dance-library-fullbody { max-height: 160px; border: 1px solid var(--border); border-radius: 8px; }
.dance-library-driving { padding: 0 12px 8px; color: var(--muted); font-size: 12px; }
.dance-library-driving summary { cursor: pointer; }
.dance-library-driving video { width: 100%; margin-top: 6px; border-radius: 8px; background: #000; }
.dance-library-preview-video { flex: none; width: auto; max-width: 320px; max-height: 220px; border: 1px solid var(--border); border-radius: 8px; background: #000; }

@media (max-width: 620px) {
  .dance-library-row { align-items: stretch; flex-direction: column; }
  .dance-library-row label { min-width: 0; }
  .dance-library-row input[type="text"], .dance-library-row textarea, .dance-library-row select, .dance-library-button { width: 100%; }
}

/* 2Talk is a zero-input doorway: identity, scene and difficulty stay backstage. */
html.conversation-app body.conversation-tutor #setup-basics,
html.conversation-app body.conversation-tutor #conversation-advanced,
html.conversation-app body.conversation-tutor #provider-advanced,
html.conversation-app body.conversation-tutor #learning-setup,
html.conversation-app body.conversation-tutor #role-deck,
html.conversation-app body.conversation-tutor #setup-visual-options,
html.conversation-app body.conversation-tutor .setup-footer-status,
html.conversation-app body.conversation-tutor #user-gender-state {
  display: none !important;
}
.native-age-gate {
  display: grid;
  gap: 15px;
  padding: 20px;
  border: 1px solid rgba(73, 142, 124, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(252, 255, 254, .98), rgba(237, 249, 244, .96));
  box-shadow: 0 14px 34px rgba(43, 94, 81, .08);
}
.native-age-gate.hidden { display: none !important; }
.native-age-heading strong { display: block; color: #244f44; font-size: 19px; }
.native-age-heading p,
.native-age-status { margin: 5px 0 0; color: #58766e; font-size: 12px; line-height: 1.55; }
.native-age-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.native-age-options button {
  min-height: 50px;
  padding: 10px 8px;
  border: 1px solid rgba(73, 142, 124, .22);
  border-radius: 14px;
  color: #315e52;
  background: rgba(255, 255, 255, .82);
  font: 720 13px/1.2 inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.native-age-options button:hover { border-color: rgba(45, 139, 117, .48); }
.native-age-options button[aria-checked="true"] {
  border-color: #2d8b75;
  color: #176a56;
  background: rgba(215, 242, 230, .86);
  box-shadow: 0 0 0 2px rgba(45, 139, 117, .1);
}
.native-guardian-confirm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(198, 150, 65, .24);
  border-radius: 14px;
  background: rgba(255, 249, 235, .76);
}
.native-guardian-confirm.hidden { display: none !important; }
.native-guardian-confirm label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.native-guardian-confirm input { width: 20px; height: 20px; margin-top: 1px; accent-color: #2d8b75; }
.native-guardian-confirm strong,
.native-guardian-confirm small { display: block; }
.native-guardian-confirm strong { color: #5d4b28; font-size: 12px; }
.native-guardian-confirm small { margin-top: 4px; color: #806f50; font-size: 10px; line-height: 1.45; }
.native-guardian-confirm button {
  min-height: 46px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: #2d8b75;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}
.native-auto-setup {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(73, 142, 124, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 12%, rgba(216, 241, 230, 0.92), transparent 34%),
    linear-gradient(135deg, rgba(251, 255, 253, 0.98), rgba(239, 249, 245, 0.96));
  box-shadow: 0 14px 34px rgba(43, 94, 81, 0.08);
}
.native-auto-setup.hidden { display: none !important; }
.native-auto-orbit {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(69, 133, 116, 0.2);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #7db6a4, #4e8f7d);
  box-shadow: 0 8px 22px rgba(56, 119, 101, 0.2);
  font: 750 23px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
.native-auto-copy { min-width: 0; }
.native-auto-kicker {
  display: block;
  margin-bottom: 4px;
  color: #5d8d80;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.native-auto-copy strong {
  display: block;
  color: #244f44;
  font-size: 16px;
  line-height: 1.35;
}
.native-companion-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 152px));
  gap: 8px;
  margin-top: 10px;
}
.native-companion-picker button {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border: 1px solid rgba(64, 125, 111, .2);
  border-radius: 14px;
  color: #315e52;
  background: rgba(255, 255, 255, .72);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.native-companion-picker button:hover {
  border-color: rgba(45, 139, 117, .52);
  background: rgba(244, 252, 248, .96);
}
.native-companion-picker button[aria-checked="true"] {
  border-color: #2d8b75;
  background: rgba(215, 242, 230, .76);
  box-shadow: 0 0 0 2px rgba(45, 139, 117, .08);
}
.native-companion-picker button:disabled { opacity: .55; cursor: wait; }
.native-companion-picker img {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: cover;
  object-position: center 24%;
  border-radius: 11px;
  background: linear-gradient(145deg, #e4f4ed, #d6ebe3);
}
.native-companion-picker button > span { min-width: 0; }
.native-companion-picker b,
.native-companion-picker small { display: block; }
.native-companion-picker b { font-size: 13px; line-height: 1.2; }
.native-auto-copy .native-companion-picker small {
  margin-top: 2px;
  overflow: hidden;
  color: #78938c;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.native-companion-picker i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: rgba(64, 125, 111, .08);
  font: 800 11px/1 inherit;
  font-style: normal;
}
.native-companion-picker button[aria-checked="true"] i {
  color: #fff;
  background: #2d8b75;
}
.native-auto-copy p {
  margin: 6px 0 3px;
  color: #416b60;
  font-size: 13px;
  line-height: 1.55;
}
.native-auto-copy small {
  color: #78938c;
  font-size: 11px;
  line-height: 1.45;
}
.native-auto-ready {
  align-self: start;
  padding: 5px 9px;
  border: 1px solid rgba(73, 142, 124, 0.16);
  border-radius: 999px;
  color: #4e806f;
  background: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  white-space: nowrap;
}
.native-scene-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.native-scene-actions button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(64, 125, 111, .22);
  border-radius: 999px;
  color: #37675c;
  background: rgba(255, 255, 255, .88);
  font: 720 12px/1.2 inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.native-scene-actions button:hover,
.native-scene-actions button[aria-expanded="true"] {
  border-color: rgba(45, 139, 117, .5);
  color: #176a56;
  background: rgba(226, 246, 237, .92);
}
.native-scene-actions button:disabled,
.native-scene-categories button:disabled,
.native-scene-custom-form button:disabled,
.native-scene-custom-form input:disabled {
  opacity: .55;
  cursor: wait;
}
.native-scene-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(64, 125, 111, .17);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
}
.native-scene-picker.hidden { display: none !important; }
.native-scene-picker-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.native-scene-picker-heading strong {
  color: #315e52;
  font-size: 13px;
}
.native-scene-picker-heading span {
  color: #78938c;
  font-size: 10px;
  text-align: right;
}
.native-scene-categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.native-scene-categories button {
  min-height: 40px;
  padding: 7px 6px;
  border: 1px solid rgba(64, 125, 111, .18);
  border-radius: 11px;
  color: #416b60;
  background: rgba(248, 253, 251, .9);
  font: 700 11px/1.25 inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.native-scene-categories button:hover,
.native-scene-categories button[aria-pressed="true"] {
  border-color: #2d8b75;
  color: #176a56;
  background: rgba(215, 242, 230, .72);
}
.native-scene-custom-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}
.native-scene-custom-form label,
.native-scene-custom-form label span { display: block; }
.native-scene-custom-form label span {
  margin-bottom: 5px;
  color: #638078;
  font-size: 10px;
  font-weight: 700;
}
.native-scene-custom-form input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(64, 125, 111, .2);
  border-radius: 11px;
  color: #244f44;
  background: rgba(255, 255, 255, .94);
  font: 500 13px/1.3 inherit;
}
.native-scene-custom-form input:focus {
  outline: 2px solid rgba(45, 139, 117, .18);
  border-color: #2d8b75;
}
.native-scene-custom-form > button {
  min-height: 42px;
  padding: 9px 14px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: #2d8b75;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}
.native-scene-status {
  min-height: 1.35em;
  margin: -3px 0 0;
  color: #638078;
  font-size: 10px;
  line-height: 1.35;
}
.native-scene-status.warn { color: #a05a2c; }
html.conversation-app body.conversation-tutor .setup-footer {
  justify-content: flex-start;
  padding-top: 4px;
  border-top-color: rgba(73, 142, 124, 0.12);
}
html.conversation-app body.conversation-tutor .setup-footer-options {
  width: 100%;
}
html.conversation-app .learning-actions {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html.conversation-app .learning-actions > summary {
  width: fit-content;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid rgba(64, 125, 111, 0.22);
  border-radius: 999px;
  color: #37675c;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(30, 81, 69, 0.08);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
html.conversation-app .learning-actions > summary::-webkit-details-marker { display: none; }
html.conversation-app .learning-actions > summary::after {
  content: " +";
  color: #7a9a92;
}
html.conversation-app .learning-actions[open] > summary::after { content: " −"; }
html.conversation-app .learning-action-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: min(760px, calc(100vw - 28px));
  margin-top: 7px;
  padding: 7px;
  border: 1px solid rgba(64, 125, 111, 0.18);
  border-radius: 15px;
  background: rgba(250, 255, 253, 0.96);
  box-shadow: 0 12px 30px rgba(30, 81, 69, 0.1);
}
html.conversation-app .learning-action-buttons button {
  min-height: 44px;
  padding: 8px 10px;
}

@media (max-width: 760px) {
  .setup-dialog-actionbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  }
  .setup-dialog-action-copy small { display: none; }
  .setup-dialog-start { width: 100%; min-height: 56px; }
  .native-age-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .native-guardian-confirm { grid-template-columns: 1fr; }
  .native-guardian-confirm button { width: 100%; }
  .native-auto-setup { grid-template-columns: auto minmax(0, 1fr); }
  .native-auto-ready { display: inline-flex; grid-column: 2; justify-self: start; white-space: normal; }
  .native-companion-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .native-scene-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .native-scene-picker-heading { display: block; }
  .native-scene-picker-heading span { display: block; margin-top: 3px; text-align: left; }
  .native-scene-custom-form { grid-template-columns: 1fr; }
  .native-scene-custom-form > button { width: 100%; }
  html.conversation-app .learning-action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 430px) {
  .native-auto-setup { padding: 14px; }
  .native-auto-orbit { display: none; }
  .native-auto-copy { grid-column: 1 / -1; }
  .native-companion-picker button {
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    min-height: 50px;
  }
  .native-companion-picker img { width: 36px; height: 36px; }
}

/* ── 外教会话视觉收束：画面为主，字幕和操作只占必要高度 ── */
html.conversation-app body.conversation-tutor #avatar-label {
  /* 角色名在字幕与回应状态中已经持续可见；隐藏重复角标，避免与位于
     双栏分界处的场景标签相互遮挡。 */
  display: none;
}
html.conversation-app body.conversation-tutor .live-caption-text {
  height: 2.36em;
}
html.conversation-app .live-caption-controls {
  position: relative;
  width: 184px;
  height: 61px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 28px);
  align-self: center;
  align-content: initial;
  gap: 5px;
}
html.conversation-app .live-caption-controls #caption-save-btn {
  grid-column: 1 / -1;
}
html.conversation-app .live-caption-controls.caption-selection-active > :not(#caption-save-btn) {
  display: none;
}
html.conversation-app .live-caption-controls.caption-selection-active #caption-save-btn {
  grid-row: 1 / -1;
  align-self: center;
}
html.conversation-app .live-caption-controls .learning-actions {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}
html.conversation-app .live-caption-controls .learning-actions > summary {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 11px;
  white-space: nowrap;
}
html.conversation-app .live-caption-controls .learning-actions > summary::after,
html.conversation-app .live-caption-controls .learning-actions[open] > summary::after {
  content: "";
}
html.conversation-app .live-caption-controls .learning-actions:not([open]) .learning-action-buttons {
  display: none;
}
html.conversation-app .live-caption-controls .learning-action-buttons {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 80;
  width: min(540px, calc(100vw - 28px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 8px;
}

@media (min-width: 761px) {
  html.conversation-app body.conversation-tutor .call-view,
  html.conversation-app body.conversation-tutor.guest-hidden .call-view {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(177, 211, 201, .9);
    border-radius: 18px;
    background: rgba(224, 241, 235, .88);
    box-shadow: 0 14px 34px rgba(30, 81, 69, .09);
  }
  html.conversation-app body.conversation-tutor .call-view > .cam-wrap,
  html.conversation-app body.conversation-tutor .call-view > .avatar-wrap {
    border: 0;
    border-radius: 14px;
    box-shadow: none;
  }
  html.conversation-app body.conversation-tutor .call-view > .active-speaker {
    transform: none;
    box-shadow: inset 0 0 0 2px rgba(42, 147, 111, .52);
  }

  html.conversation-app body.conversation-active .controls {
    width: fit-content;
    max-width: calc(100vw - 24px);
    justify-self: center;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 999px;
  }
  html.conversation-app body.conversation-active .controls .session-alert {
    grid-column: 1 / -1;
  }
  html.conversation-app body.conversation-active .session-progress {
    min-height: 0;
    margin: 0;
  }
  html.conversation-app body.conversation-active .session-actions {
    gap: 5px;
  }
  html.conversation-app body.conversation-active .session-more > summary {
    min-height: 34px;
    padding: 6px 12px;
  }
}

@media (max-width: 760px) {
  html.conversation-app .live-caption-controls {
    width: 100%;
    height: 42px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 28px;
    padding: 7px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-left: 0;
  }
  html.conversation-app .live-caption-controls #caption-save-btn {
    grid-column: 1 / -1;
  }
  html.conversation-app body.conversation-tutor .live-caption-text {
    height: 3.54em;
  }
}

/* ── 手机外教会话：人物优先，次要席位与工具按需出现 ───────────── */
@media (max-width: 760px),
  (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  /* 手机只保留一行产品栏；连接、聆听和回答状态统一由画面内胶囊承担。 */
  html.conversation-app .topbar {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions";
    gap: 6px;
    padding: 5px 7px;
  }
  html.conversation-app .topbar .status,
  html.conversation-app body.conversation-active .topbar h1 small {
    display: none;
  }

  /* 对话伙伴是手机主画面；语音占位不再浪费半屏。 */
  html.conversation-app body.conversation-tutor .call-view,
  html.conversation-app body.conversation-tutor.guest-hidden .call-view,
  html.conversation-app body.conversation-tutor.camera-voice-only .call-view,
  html.conversation-app body.conversation-tutor.camera-voice-only.guest-hidden .call-view {
    display: block;
    width: 100%;
    grid-template-columns: none;
  }
  html.conversation-app body.conversation-tutor .avatar-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    border-radius: 15px;
  }
  html.conversation-app body.conversation-single .avatar-visual[data-companion-profile="true"] .avatar-portrait,
  html.conversation-app body.conversation-single .avatar-visual[data-avatar-profile="fashion"] .avatar-portrait,
  html.conversation-app body.conversation-tutor .avatar-visual[data-companion-profile="true"] .avatar-portrait,
  html.conversation-app body.conversation-tutor .avatar-visual[data-avatar-profile="fashion"] .avatar-portrait {
    /* 手机竖向舞台比 900×900 人物画布更高：使用统一的半身构图，把底图、
       嘴型和眉眼一起放大并落到舞台底部，避免人物像悬在背景中央。 */
    transform:
      translateY(var(--avatar-rig-mobile-bottom-shift, var(--avatar-rig-bottom-shift, 0px)))
      scale(var(--avatar-rig-mobile-scale, var(--avatar-rig-scale, 1))) !important;
  }
  html.conversation-app body.conversation-single .call-view.scene-active .avatar-still,
  html.conversation-app body.conversation-tutor .call-view.scene-active .avatar-still {
    /* 首帧海报与动态 rig 使用同一放大倍率，切换时人物不再忽大忽小。 */
    transform: scale(var(--avatar-rig-mobile-zoom, 1.44));
    transform-origin: center bottom;
  }
  html.conversation-app body.conversation-tutor .cam-wrap:not(.live) {
    display: none;
  }
  html.conversation-app body.conversation-tutor .cam-wrap.live {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
    z-index: 38;
    display: block;
    width: 82px;
    height: 108px;
    min-height: 0;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(20, 67, 57, .24);
    overflow: hidden;
  }
  html.conversation-app body.conversation-tutor .cam-wrap.live .pane-label {
    top: 5px;
    left: 5px;
    padding: 1px 7px;
    font-size: 10px;
  }
  html.conversation-app body.conversation-tutor #avatar-label {
    display: none;
  }
  html.conversation-app body.conversation-tutor .scene-chip {
    top: 8px;
    left: 8px;
    max-width: min(64%, 240px);
    padding: 5px 9px;
    transform: none;
  }

  /* 字幕最多保留两行；分页不存在时不展示无效按钮。 */
  html.conversation-app body.conversation-tutor .live-caption {
    max-height: 140px;
    padding: 6px 8px;
    gap: 3px;
  }
  html.conversation-app body.conversation-tutor .live-caption-copy {
    gap: 2px;
  }
  html.conversation-app body.conversation-tutor .live-caption-text {
    height: 2.36em;
    font-size: clamp(19px, 5.3vw, 24px);
    line-height: 1.18;
  }
  html.conversation-app body.conversation-tutor .live-caption-speaker {
    padding: 1px 9px;
    font-size: 10px;
  }
  html.conversation-app .live-caption-controls {
    width: 100%;
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 5px;
    padding: 4px 0 0;
  }
  html.conversation-app .live-caption-controls #caption-prev-btn:disabled,
  html.conversation-app .live-caption-controls #caption-next-btn:disabled {
    display: none;
  }
  html.conversation-app .live-caption-controls > button,
  html.conversation-app .live-caption-controls .learning-actions {
    width: auto;
    min-width: 0;
    flex: 1 1 92px;
  }
  html.conversation-app .live-caption-controls button,
  html.conversation-app .live-caption-controls .learning-actions > summary {
    min-height: 44px;
    padding: 6px 8px;
  }
  html.conversation-app .live-caption-controls #caption-save-btn {
    flex-basis: 100%;
  }

  /* 计时、暂停、结束与更多合成一条底栏，不再留下空白卡片。 */
  html.conversation-app body.conversation-active .controls {
    min-height: 52px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 14px;
  }
  html.conversation-app body.conversation-active .controls .session-alert {
    grid-column: 1 / -1;
  }
  html.conversation-app body.conversation-active .session-progress {
    min-height: 0;
    margin: 0;
    justify-content: flex-start;
  }
  html.conversation-app body.conversation-active .session-progress:has(.continuation-actions:not(.hidden)),
  html.conversation-app body.conversation-active .controls:has(.continuation-actions:not(.hidden)) .session-actions {
    grid-column: 1 / -1;
    width: 100%;
  }
  html.conversation-app body.conversation-active .session-actions {
    min-width: 0;
    justify-content: flex-end;
    gap: 4px;
  }
  html.conversation-app body.conversation-active .session-primary-actions {
    min-width: 0;
    flex: 0 1 auto;
    gap: 4px;
  }
  html.conversation-app body.conversation-active .session-primary-actions > button {
    width: auto;
    min-width: 54px;
    min-height: 44px;
    padding: 7px 9px;
    font-size: 11px;
  }
  html.conversation-app body.conversation-active .session-primary-actions > .stop-btn {
    color: #97434d;
    border-color: rgba(166, 70, 82, .25);
    background: rgba(194, 78, 92, .08);
  }
  html.conversation-app body.conversation-active .session-more > summary {
    width: 42px;
    min-width: 42px;
    min-height: 44px;
    padding: 7px;
  }
  html.conversation-app body.conversation-active .session-more > summary::after {
    margin: 0;
  }
}

@media (max-width: 360px) {
  html.conversation-app body.conversation-active .conversation-timer span {
    display: none;
  }
  html.conversation-app body.conversation-active .conversation-timer {
    padding-inline: 8px;
  }
  html.conversation-app body.conversation-active .session-primary-actions > button {
    min-width: 48px;
    padding-inline: 7px;
  }
}

/* ── 手机会话工具与会后诊断：低频操作按需展开 ───────────────── */
@media (max-width: 760px),
  (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  /* 三点按钮打开一张易点按的操作卡；通话中不再重复展示已锁定的情境设置。 */
  html.conversation-app .session-more[open] { z-index: 530; }
  html.conversation-app .session-more-popover {
    position: fixed;
    inset: auto max(10px, env(safe-area-inset-right))
      calc(64px + max(8px, env(safe-area-inset-bottom)))
      max(10px, env(safe-area-inset-left));
    z-index: 520;
    width: auto;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    box-shadow: 0 22px 64px rgba(18, 61, 52, .28);
  }
  html.conversation-app .session-more-popover::before {
    content: "会话工具";
    grid-column: 1 / -1;
    padding: 1px 3px 3px;
    color: #3d625a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
  }
  html.conversation-app .session-language-mode-field {
    grid-column: 1 / -1;
    min-height: 60px;
    padding: 10px 12px;
    border-radius: 14px;
  }
  html.conversation-app .session-more-popover > button {
    min-height: 54px;
    justify-content: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(81, 139, 124, .18);
    border-radius: 14px;
    background: #f7fbfa;
    font-size: 13px;
  }
  html.conversation-app .session-more-popover > button::before {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #176f66;
    background: #e5f4ef;
    font-size: 12px;
    font-weight: 850;
  }
  html.conversation-app .session-more-popover > button > span {
    margin-left: auto;
  }
  html.conversation-app body.conversation-active #setup-dialog-btn {
    display: none;
  }
  html.conversation-app body.conversation-active #vocabulary-drawer-btn::before {
    content: "Aa";
  }
  html.conversation-app body.conversation-active #transcript-drawer-btn::before {
    content: "“";
    font-size: 19px;
  }
  html.conversation-app body.conversation-active #recording-btn::before {
    content: "▶";
  }
  html.conversation-app body.conversation-active #minutes-btn::before {
    content: "✦";
  }
  html.conversation-app .session-more[open] > summary::after {
    content: "×";
    font-size: 21px;
    line-height: 1;
  }

  /* 手机会后只保留录音与核心诊断；大标题收成一条可关闭的吸顶栏，
     会话时间与场景移入录音卡片，避免重复信息占掉首屏。 */
  .after-talk-drawer .tool-drawer-head {
    min-height: 52px;
    align-items: center;
    padding: max(6px, env(safe-area-inset-top)) 8px 6px 14px;
  }
  .after-talk-drawer .tool-drawer-head > div:first-child {
    min-width: 0;
  }
  .after-talk-drawer .tool-drawer-head > div:first-child > span,
  .after-talk-drawer .tool-drawer-head p {
    display: none;
  }
  .after-talk-drawer .tool-drawer-head h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
  }
  .after-talk-drawer .tool-drawer-head-actions > button {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }
  .after-talk-drawer .after-talk-content {
    gap: 9px;
    padding: 8px 10px max(16px, env(safe-area-inset-bottom));
  }
  .after-talk-drawer #after-talk-session-picker,
  .after-talk-drawer .after-talk-secondary,
  .after-talk-drawer #review-conversation-section,
  .after-talk-drawer .after-talk-chat,
  .after-talk-drawer #review-vocabulary-section,
  .after-talk-drawer #after-talk-share,
  .after-talk-drawer .after-talk-note {
    display: none !important;
  }
  .after-talk-drawer #after-talk-feedback {
    order: 8;
    padding: 12px;
  }
  .after-talk-drawer #after-talk-feedback button { min-height: 44px; }
  .after-talk-drawer:not([data-report-state="ready"]) #review-report-section,
  .after-talk-drawer[data-report-state="ready"] #after-talk-report-choice {
    display: none !important;
  }
  .after-talk-drawer .review-workspace-section {
    gap: 9px;
    padding: 14px;
    border-radius: 16px;
  }
  .after-talk-drawer .review-audio-session-meta {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #607a74;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .after-talk-drawer .review-media-section > header > div > span {
    display: none;
  }
  .after-talk-drawer .review-media-section > header h3 {
    margin-top: 0;
  }
  .after-talk-drawer .review-workspace-section > header {
    gap: 8px;
  }
  .after-talk-drawer .review-workspace-section > header small {
    max-width: 46%;
    line-height: 1.45;
  }
  .after-talk-drawer .recording-caption {
    min-height: 88px;
    padding: 13px 14px;
  }
  .after-talk-drawer .review-media-download {
    min-height: 44px;
  }
  .after-talk-drawer .after-talk-report-choice {
    gap: 8px;
  }
  .after-talk-drawer .after-talk-card {
    min-height: 68px;
  }
  .after-talk-drawer .after-talk-report-host .report-frame-wrap {
    min-height: 480px;
    height: 70dvh;
  }
  .after-talk-drawer .after-talk-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 7px max(7px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(7px, env(safe-area-inset-left));
    overflow: visible;
  }
  .after-talk-drawer .after-talk-menu button {
    min-width: 0;
    min-height: 52px;
    flex: none;
  }
  .after-talk-drawer .after-talk-menu button[data-review-target="review-vocabulary-section"],
  .after-talk-drawer .after-talk-menu button[data-review-target="review-conversation-section"] {
    display: none;
  }
}
/* 深度访谈：把旧工作室能力收敛成“选结构 + 一句话主题 + 时长”。 */
.interview-quick-setup {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.28fr);
  gap: 24px;
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid rgba(22, 122, 105, .2);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(226, 248, 241, .9), rgba(255, 255, 255, .96));
}

.interview-quick-setup > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.interview-quick-kicker {
  color: #167a69;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.interview-quick-setup strong { color: #173d37; font-size: 1.25rem; }
.interview-quick-setup p { margin: 0; color: #58756f; line-height: 1.55; }

.interview-language-field {
  width: min(100%, 300px);
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 5px 10px;
  margin-top: 8px;
  color: #294f48;
}

.interview-language-field > span {
  font-size: .84rem;
  font-weight: 800;
}

.interview-language-field select {
  min-width: 0;
  min-height: 42px;
  padding: 8px 34px 8px 11px;
  border: 1px solid rgba(29, 87, 77, .2);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .92);
  color: #173d37;
  font: inherit;
  font-weight: 700;
}

.interview-language-field small {
  grid-column: 1 / -1;
  color: #718a85;
  line-height: 1.4;
}

.interview-format-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.interview-format-options button {
  min-width: 0;
  min-height: 78px;
  padding: 12px 10px;
  border: 1px solid rgba(29, 87, 77, .16);
  border-radius: 15px;
  background: rgba(255, 255, 255, .88);
  color: #294f48;
  text-align: left;
  cursor: pointer;
}

.interview-format-options button b,
.interview-format-options button small { display: block; }
.interview-format-options button b { margin-bottom: 5px; font-size: .94rem; }
.interview-format-options button small { color: #718a85; line-height: 1.35; }
.interview-format-options button:hover { border-color: rgba(22, 122, 105, .5); }
.interview-format-options button.selected {
  border-color: #168b76;
  background: #168b76;
  color: #fff;
  box-shadow: 0 8px 20px rgba(22, 122, 105, .16);
}
.interview-format-options button.selected small { color: rgba(255, 255, 255, .82); }

.conversation-interview .setup-basics .preset-field,
.conversation-interview .setup-basics .mode-field { display: none !important; }
.conversation-interview .setup-basics {
  grid-template-columns: minmax(150px, .34fr) minmax(320px, 1fr);
}
.conversation-interview .topic-field span::before { content: "一句话说明"; }
.conversation-interview .topic-field > span { font-size: 0; }
.conversation-interview .topic-field > span::before { font-size: .86rem; }
.conversation-interview .after-talk-drawer[data-review-scope="interview"] .after-talk-note {
  color: #4d6d66;
}

@media (max-width: 900px) {
  .interview-quick-setup { grid-template-columns: 1fr; }
  .interview-format-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conversation-interview .setup-basics { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .interview-quick-setup { padding: 16px; border-radius: 17px; }
  .interview-language-field { width: 100%; }
  .interview-format-options { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .interview-format-options button { flex: 0 0 150px; min-height: 70px; }
}

/* 陪伴聊天：共享稳定的实时音画能力，但设置和会后内容保持独立。 */
.companion-quick-setup {
  display:grid;
  grid-template-columns:minmax(240px,.72fr) minmax(420px,1.28fr);
  gap:24px;
  padding:22px;
  margin-bottom:18px;
  border:1px solid rgba(181,114,62,.24);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,244,231,.92),rgba(255,255,255,.97));
}
.companion-quick-setup > div:first-child { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; }
.companion-quick-kicker { color:#a36438; font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.companion-quick-setup strong { color:#4a3425; font-size:1.25rem; }
.companion-quick-setup p { margin:0; color:#735f50; line-height:1.58; }
.companion-starter-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.companion-starter-options button {
  min-width:0;
  min-height:78px;
  padding:12px;
  border:1px solid rgba(181,114,62,.2);
  border-radius:15px;
  color:#654a37;
  background:rgba(255,255,255,.9);
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
}
.companion-starter-options button b,.companion-starter-options button small { display:block; }
.companion-starter-options button b { margin-bottom:5px; font-size:.94rem; }
.companion-starter-options button small { color:#8d7666; line-height:1.35; }
.companion-starter-options button:hover { border-color:rgba(181,114,62,.55); }
.companion-starter-options button.selected {
  border-color:#a96b3f;
  color:#fff;
  background:#a96b3f;
  box-shadow:0 8px 20px rgba(143,82,40,.17);
}
.companion-starter-options button.selected small { color:rgba(255,255,255,.82); }
.companion-quick-setup footer {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 14px;
  padding-top:14px;
  border-top:1px solid rgba(181,114,62,.16);
  color:#735f50;
  font-size:.78rem;
}
.companion-quick-setup footer a { color:#8b572f; font-weight:750; }
.companion-quick-setup footer small { flex-basis:100%; color:#8d7666; line-height:1.5; }
.conversation-companion .setup-basics { grid-template-columns:minmax(180px,320px); }
.conversation-companion .setup-basics .preset-field,
.conversation-companion .setup-basics .mode-field,
.conversation-companion .setup-basics .topic-field { display:none!important; }
.conversation-companion .setup-basics .duration-field { grid-column:1; }
.conversation-companion .scene-intro { border-color:rgba(181,114,62,.28); }
.after-talk-drawer[data-review-scope="companion"] .after-talk-note { color:#735f50; }

@media (max-width:900px) {
  .companion-quick-setup { grid-template-columns:1fr; }
  .conversation-companion .setup-basics { grid-template-columns:1fr; }
}
@media (max-width:540px) {
  .companion-quick-setup { padding:16px; border-radius:17px; }
  .companion-starter-options { grid-template-columns:1fr 1fr; gap:7px; }
  .companion-starter-options button { min-height:72px; padding:10px; }
  .after-talk-drawer[data-review-scope="companion"] #review-conversation-section { display:grid!important; }
  .after-talk-drawer[data-review-scope="companion"] .after-talk-menu button[data-review-target="review-conversation-section"] { display:flex!important; }
}

/* ── 稳定舞台 HUD 与可定位画中画 ───────────────────────────── */
/* 字幕属于 call-view 的覆盖层，不再作为网格行挤压人物画面。 */
html.conversation-app .call-view > .live-caption,
html.conversation-app body.conversation-tutor .call-view > .live-caption {
  position: absolute;
  inset: auto clamp(10px, 1.8vw, 24px) clamp(10px, 1.8vw, 20px);
  z-index: 34;
  width: auto;
  min-height: 0;
  max-height: min(42%, 154px);
  margin: 0;
  border-color: rgba(199, 226, 218, .94);
  background:
    linear-gradient(180deg, rgba(250, 255, 253, .95), rgba(246, 253, 250, .94));
  box-shadow: 0 14px 36px rgba(19, 62, 53, .22);
  backdrop-filter: blur(10px) saturate(1.02);
}
html.conversation-app .call-view > .live-caption .live-caption-text {
  color: #0b6259;
  text-shadow: 0 2px 12px rgba(11, 98, 89, .14);
}
html.conversation-app .call-view > .live-caption.user {
  border-color: rgba(162, 209, 225, .96);
  background:
    linear-gradient(180deg, rgba(249, 254, 255, .96), rgba(242, 250, 253, .95));
}
html.conversation-app .call-view > .live-caption.user .live-caption-speaker {
  background: rgba(11, 95, 130, .96);
}
html.conversation-app .call-view > .live-caption.user .live-caption-text {
  color: #0b5f82;
  text-shadow: 0 2px 12px rgba(11, 95, 130, .14);
}
html.conversation-app .call-view > .live-caption.speaker-b .live-caption-speaker {
  background: rgba(104, 68, 143, .96);
}
html.conversation-app .call-view > .live-caption.speaker-b .live-caption-text {
  color: #68448f;
  text-shadow: 0 2px 12px rgba(104, 68, 143, .14);
}
html.conversation-app .call-view > .live-caption.speaker-c .live-caption-speaker {
  background: rgba(130, 80, 15, .96);
}
html.conversation-app .call-view > .live-caption.speaker-c .live-caption-text {
  color: #82500f;
  text-shadow: 0 2px 12px rgba(130, 80, 15, .14);
}
html.conversation-app .call-view:has(> .live-caption:not(.hidden)) > .conversation-presence {
  opacity: 0;
}

html.conversation-app body.pip-positionable {
  --pip-edge-gap: clamp(9px, 1.5vw, 18px);
}
html.conversation-app body.pip-positionable .call-view > .cam-wrap {
  transition:
    top 180ms ease,
    right 180ms ease,
    bottom 180ms ease,
    left 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
html.conversation-app body.pip-positionable[data-pip-position="top-left"] .call-view > .cam-wrap:not(.hidden) {
  top: var(--pip-edge-gap);
  right: auto;
  bottom: auto;
  left: var(--pip-edge-gap);
}
html.conversation-app body.pip-positionable[data-pip-position="top-right"] .call-view > .cam-wrap:not(.hidden) {
  top: var(--pip-edge-gap);
  right: var(--pip-edge-gap);
  bottom: auto;
  left: auto;
}
html.conversation-app body.pip-positionable[data-pip-position="bottom-left"] .call-view > .cam-wrap:not(.hidden) {
  top: auto;
  right: auto;
  bottom: var(--pip-edge-gap);
  left: var(--pip-edge-gap);
}
html.conversation-app body.pip-positionable[data-pip-position="bottom-right"] .call-view > .cam-wrap:not(.hidden) {
  top: auto;
  right: var(--pip-edge-gap);
  bottom: var(--pip-edge-gap);
  left: auto;
}
html.conversation-app body.pip-positionable .call-view > .cam-wrap.pip-dragging {
  z-index: 41;
  transition: none !important;
  user-select: none;
}
html.conversation-app .cam-wrap.pip-positionable:has(.pip-position-options:not(.hidden)) {
  overflow: visible;
}
html.conversation-app .cam-wrap.pip-positionable > :is(video, .cam-fallback) {
  border-radius: inherit;
}

.pip-position-toggle {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 46;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 10px;
  color: #fff;
  background: rgba(17, 63, 55, .7);
  box-shadow: 0 5px 16px rgba(10, 40, 34, .22);
  backdrop-filter: blur(10px);
  font: 800 18px/1 system-ui, sans-serif;
  cursor: grab;
  touch-action: none;
}
.pip-position-toggle:active,
.pip-dragging .pip-position-toggle { cursor: grabbing; }
.pip-position-toggle:hover,
.pip-position-toggle:focus-visible,
.pip-position-toggle[aria-expanded="true"] {
  background: rgba(16, 112, 96, .9);
}
.pip-position-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pip-position-options {
  position: absolute;
  top: 48px;
  right: 7px;
  z-index: 46;
  width: 97px;
  display: grid;
  grid-template-columns: repeat(2, 40px);
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 12px;
  background: rgba(17, 63, 55, .84);
  box-shadow: 0 10px 24px rgba(10, 40, 34, .28);
  backdrop-filter: blur(12px);
}
.pip-position-options button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font: 800 17px/1 system-ui, sans-serif;
  cursor: pointer;
}
html.conversation-app body[data-pip-position$="-left"] .pip-position-options {
  right: auto;
  left: 7px;
}
html.conversation-app body[data-pip-position^="bottom-"] .pip-position-options {
  top: auto;
  bottom: 48px;
}
.pip-position-options button:hover,
.pip-position-options button:focus-visible,
.pip-position-options button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, .9);
  background: #168b76;
}

/* 桌面端底角画中画占据字幕侧边安全区；字幕本身仍不改变舞台高度。 */
.mobile-call-header,
.mobile-audio-stage,
.mobile-mode-switch,
.mobile-desktop-link {
  display: none;
}

@media (min-width: 761px) {
  html.conversation-app body.pip-positionable[data-pip-position="bottom-left"] .call-view > .live-caption {
    left: calc(clamp(118px, 17vw, 220px) + 34px);
  }
  html.conversation-app body.pip-positionable[data-pip-position="bottom-right"] .call-view > .live-caption {
    right: calc(clamp(118px, 17vw, 220px) + 34px);
  }
}

/* 小屏底角位置保留完整字幕宽度，把 HUD 抬到画中画上方。 */
@media (max-width: 760px),
  (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  html.conversation-app body.pip-positionable { --pip-edge-gap: 8px; }
  html.conversation-app body.pip-positionable[data-pip-position^="bottom-"] .call-view > .live-caption {
    bottom: calc(clamp(142px, 28%, 260px) + 16px);
  }
  html.conversation-app body.conversation-tutor.pip-positionable[data-pip-position^="bottom-"] .call-view > .live-caption {
    bottom: 126px;
  }
  .pip-position-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .pip-position-options {
    top: 55px;
    width: 105px;
    grid-template-columns: repeat(2, 44px);
  }
  html.conversation-app body[data-pip-position^="bottom-"] .pip-position-options {
    top: auto;
    bottom: 55px;
  }
  .pip-position-options button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}