/* 语音助教通话页。
 * PC 版优先：桌面下是「左：助教舞台 + 通话键 / 右：对话记录」双栏，不是手机壳；
 * 窄屏（<960px）才回落成单栏竖排。背景纯色，不靠任何图片撑场。
 */
.space-voice {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-hover);
}

.vt-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

/* ===== 顶栏 ===== */
.vt-top {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 4px;
  /* 状态条进顶栏后元素变多：窄屏允许整组换行，不让按钮重叠或把文案挤没 */
  flex-wrap: wrap;
}
.vt-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.vt-back:hover { background: var(--color-surface); color: var(--color-primary); }
.vt-clock {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
}
.vt-engine {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.vt-engine.live { color: var(--color-primary); }

/* ===== 右上角形象切换 ===== */
/* 状态条进顶栏后，靠右的 auto 边距由状态条承担，形象切换只留固定间距 */
.vt-pick { position: relative; margin-left: 12px; flex: none; }
.vt-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 13px;
  cursor: pointer;
}
.vt-pick-btn:hover { border-color: var(--color-border-strong); }
.vt-pick-face {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-control);
  object-fit: cover;
  background: var(--color-surface-hover);
  display: block;
}
.vt-pick-caret { color: var(--color-text-tertiary); }
.vt-pick-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 236px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}
.vt-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-primary);
  font-size: 13px;
}
.vt-pick-item:hover { background: var(--color-surface-hover); }
.vt-pick-item.on { background: var(--color-primary-soft); }
.vt-pick-item img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
  object-fit: cover;
  background: var(--color-surface-hover);
  flex: none;
}
.vt-pick-item-main { min-width: 0; }
.vt-pick-item-name { font-weight: 500; }
.vt-pick-item-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

/* ===== 左栏：助教舞台 ===== */
.vt-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px 0;
}
.vt-title {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.vt-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.3px;
}

.vt-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 4px;
}

/* 头像光环：保留灰色虚线圈；接通后的红色旋转弧已按需求移除 */
.vt-ring {
  position: relative;
  width: 172px;
  height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vt-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.vt-ring-dash {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1.2;
  stroke-dasharray: 2 7;
}

.vt-avatar {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: var(--radius-control);
  object-fit: cover;
  background: var(--color-surface-active);
  user-select: none;
}

.vt-hero-name {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 500;
}
.vt-hero-frame {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
  max-width: 320px;
  text-align: center;
  line-height: 1.5;
}

.vt-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 44px;
  margin-top: 10px;
}
.vt-wave i {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: var(--color-border-strong);
  height: 8px;
  transition: height 0.16s ease;
}
.vt-wave.on i { background: var(--color-primary); animation: vt-pulse 0.9s ease-in-out infinite alternate; }
.vt-wave.on i:nth-child(2n) { animation-duration: 1.15s; }
.vt-wave.on i:nth-child(3n) { animation-duration: 0.75s; }
@keyframes vt-pulse {
  from { height: 8px; }
  to { height: 40px; }
}

/* 音色真相条：绿=助教音色已接通（可试听），红=没接通（必须一眼看见） */
.vt-voicebar {
  width: 100%;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
/* 顶栏内形态：靠右、单行省略，长文案不把头部撑破 */
.vt-top .vt-voicebar {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46vw;
  margin: 0 0 0 auto;
  padding: 6px 10px;
}
.vt-top .vt-voicebar-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vt-voicebar.ok { background: var(--color-success-soft); color: var(--color-success); }
.vt-voicebar.bad { background: var(--color-error-soft); color: var(--color-error); }
.vt-voicebar-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: currentColor;
}
.vt-voicebar.ok .vt-voicebar-dot { box-shadow: 0 0 0 4px var(--color-success-soft); }
.vt-voicebar.bad .vt-voicebar-dot { box-shadow: 0 0 0 4px var(--color-error-soft); animation: vt-blink 1.1s ease-in-out infinite; }
@keyframes vt-blink { 50% { opacity: 0.3; } }
.vt-voicebar-txt { flex: 1; min-width: 0; }
.vt-voicebar-acts { flex: none; display: flex; gap: 6px; }
.vt-voicebar-btn {
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  padding: 3px 11px;
  font-size: 12px;
  text-decoration: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.vt-voicebar-btn[hidden] { display: none; }

/* ===== 课堂控制行（谁在说 / 要不要答 / 打断） ===== */
.vt-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  max-width: 360px;
}
.vt-ctrl {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.vt-ctrl:hover { color: var(--color-text-primary); border-color: var(--color-text-tertiary); }
.vt-ctrl[aria-pressed="true"],
.vt-ctrl.on {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}
.vt-ctrl[hidden] { display: none; }

/* ===== 底部通话键 ===== */
.vt-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 16px 20px 26px;
}
.vt-btn {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 必须自建定位上下文：.vt-btn.ringing::after 是 absolute 定位的振铃圈，
     否则它会以视口为包含块，画成一个盖住整页的 2px 品牌红圆角边框 */
  position: relative;
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.vt-btn:hover { transform: scale(1.05); }
.vt-mini { width: 52px; height: 52px; }
/* 未拨通（含拨号回铃阶段）：绿色「拨打」键；接通后（.live）：红色「挂断」键 */
.vt-hangup { width: 66px; height: 66px; background: var(--color-success); color: var(--color-text-on-strong); }
.vt-hangup.live { background: var(--color-primary); color: var(--color-primary-foreground); }
.vt-btn.off { opacity: 0.4; }
/* 振铃圈只出现在拨号阶段（.ringing 由 JS 在接通后换成 .live），所以圈是绿色 */
.vt-btn.ringing::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-control);
  border: 2px solid var(--color-success);
  animation: vt-ring-ping 1.6s ease-out infinite;
}
/* 振铃圈动画：从按钮边缘扩散并淡出（此前 keyframes 缺失，animation 名落空） */
@keyframes vt-ring-ping {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.25); opacity: 0; }
}

/* ===== 右栏：对话记录 ===== */
.vt-bubbles {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vt-bubble {
  /* 宽屏下右栏可达 1400px+：纯百分比宽度会让气泡变成横跨右栏的整幅色块，
     封顶 640px 保证行长可读；窄屏单栏由下方媒体查询的 88% 接管 */
  max-width: min(76%, 640px);
  padding: 11px 15px;
  border-radius: var(--radius-control);
  font-size: 15px;
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
}
/* 谁在说话：小标签贴在气泡左上角，老师与学生的提问一眼分得开 */
.vt-who {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-tertiary);
  vertical-align: 1px;
}
.vt-bubble.ai .vt-who { color: var(--color-primary); }
.vt-bubble-text { display: inline; }
/* 左右分侧固定规则：老师（自己）统一右对齐，助教统一左对齐，谁在说话看小标签 */
.vt-bubble.me {
  align-self: flex-end;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.vt-bubble.ai {
  align-self: flex-start;
  background: var(--color-primary-soft);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-primary);
}
/* 新对话引导：不是助教说的话，用弱提示样式，挂断/开口后自然消失 */
.vt-hint {
  align-self: flex-start;
  max-width: 82%;
  padding: 9px 12px;
  border-left: 2px solid var(--color-border-strong);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-tertiary);
}
/* ===== 文字兜底面板 ===== */
.vt-dock {
  width: 100%;
  max-width: 460px;
  padding: 0 20px 26px;
}
.vt-dock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.vt-dock-label { font-size: 13px; color: var(--color-text-secondary); }
.vt-dock select {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-size: 13px;
  color: var(--color-text-primary);
}
#vtInput {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-primary);
  resize: vertical;
}
.vt-dock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.vt-ghost, .vt-send {
  border: none;
  border-radius: var(--radius-control);
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
}
.vt-ghost { background: var(--color-surface); color: var(--color-text-secondary); }
.vt-send { background: var(--color-primary); color: var(--color-primary-foreground); }

/* ===== 窄屏：单栏（手机/小窗），仍是竖排通话页 ===== */
@media (max-width: 959px) {
  /* 单栏页允许整页滚动：原来 100dvh + overflow:hidden，在 900px 宽的小笔记本上
     会把底部的通话键整块裁掉，老师点不到「挂断/拨打」 */
  .space-voice { height: auto; min-height: 100dvh; overflow-y: auto; }
  .vt-stage { justify-content: flex-start; overflow: visible; }
  .vt-top { padding: 10px 16px 4px; }
  .vt-left { width: 100%; max-width: 460px; padding: 8px 18px 0; }
  .vt-title { font-size: 18px; text-align: center; }
  .vt-ring { width: 148px; height: 148px; }
  .vt-avatar { width: 138px; height: 138px; }
  .vt-right { width: 100%; max-width: 460px; }
  .vt-bubbles { flex: none; max-height: 46vh; padding: 12px 18px 14px; }
  .vt-bar { gap: 26px; padding: 12px 20px 24px; }
  .vt-bubble { max-width: 88%; }
  .vt-controls { max-width: 100%; }
  .vt-dock { padding-bottom: 20px; }
}

@media (max-width: 420px) {
  .vt-bar { gap: 22px; }
  .vt-engine { display: none; }
  .vt-top .vt-voicebar { max-width: 100%; }
}

/* ===== 宽屏 PC：左舞台 / 右对话双栏 ===== */
@media (min-width: 960px) {
  .vt-stage {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "left chat";
    height: 100%;
    min-height: 0;
  }
  /* 口语教练为「左栏 + 会话区」工作台：顶行随工作台撑满，不再私有限宽 1280 */
  .vt-top { grid-area: top; min-width: 0; }
  .vt-left {
    grid-area: left;
    /* 内容比一屏高时（1366×768 之类）允许左栏自己滚：原来 overflow:hidden
       直接把底部通话键裁掉，安全中心对齐还会把顶部标题切掉。
       safe center：装不下时退回从顶部开始，不丢内容。 */
    justify-content: center;
    justify-content: safe center;
    overflow-y: auto;
    min-height: 0;
    padding: 8px 0 4px 24px;
  }
  /* 关掉对话字幕：右栏没有内容了，就别再给它留 1fr 的空位——
     助教与通话键从 400px 左栏里解放出来整屏居中，尺寸也放大一档 */
  .vt-stage.vt-nocaption {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "left";
  }
  .vt-stage.vt-nocaption .vt-right { display: none; }
  .vt-stage.vt-nocaption .vt-left {
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  /* 用显式尺寸而不是 transform: scale() 放大：transform 不参与布局回流，
     放大后会压到下方的声波点阵与「小正 · 男助教」文字上 */
  .vt-stage.vt-nocaption .vt-ring { width: 216px; height: 216px; }
  .vt-stage.vt-nocaption .vt-avatar { width: 204px; height: 204px; }
  .vt-stage.vt-nocaption .vt-title { font-size: 23px; }
  .vt-right {
    grid-area: chat;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 0 30px 0 34px;
    border-left: 1px solid var(--color-border);
  }
  .vt-ring { width: 216px; height: 216px; }
  .vt-avatar { width: 204px; height: 204px; }
  .vt-bubbles { padding: 22px 26px 20px; }
  .vt-bar { padding: 18px 0 24px; }
}

/* 低高度显示器（1366×768 / 1440×800）：把舞台整体收一档，
   否则左栏内容 + 拨号键会顶到视口外面 */
@media (min-width: 960px) and (max-height: 860px) {
  .vt-title { font-size: 18px; }
  .vt-sub { margin-top: 4px; }
  .vt-hero { padding: 8px 0 0; }
  .vt-ring { width: 168px; height: 168px; }
  .vt-avatar { width: 156px; height: 156px; }
  .vt-wave { height: 34px; margin-top: 6px; }
  .vt-hero-name { margin-top: 8px; font-size: 16px; }
  .vt-controls { margin-top: 8px; }
  .vt-bar { padding: 10px 0 14px; gap: 28px; }
  .vt-mini { width: 46px; height: 46px; }
  .vt-hangup { width: 58px; height: 58px; }
  .vt-stage.vt-nocaption .vt-ring { width: 188px; height: 188px; }
  .vt-stage.vt-nocaption .vt-avatar { width: 176px; height: 176px; }
}

/* 字幕关闭时任何屏宽都不留右栏空位（窄屏下 .vt-right 没有独立样式，故规则放在媒体查询之外） */
.vt-nocaption > .vt-right { display: none; }