/* ============================================================
   双语通 · 主界面
   结构：左侧功能导航 + 右侧内容区（顶栏在右侧内容区顶部）
   顶栏右上角放额度与账号；左侧只管"选什么、怎么调"
   内容字号统一由 --content-fs 驱动
   ============================================================ */

:root {
  /* 内容框字号：JS 按用户选择改写，大屏展示时调大即可 */
  --content-fs: 32px;
  /* 侧栏宽度：要放得下"我说的是 / 翻译成"两个语言块并排。
     每块名字可用宽 = (侧栏 - 滚动区padding24 - 边框2 - 互换42)/2 - 块内padding24 - 滚动条8
     344px 时只剩 106px，"中文（简体）"实测要 102px 就没有余量了；
     352px 时约 110px，常见 6 字语言名能完整显示 */
  --side-w: 352px;
  --top-h: 64px;
}

html, body { height: 100%; }

body {
  overflow: hidden;   /* 滚动交给内部面板，避免整页滚动把导航带走 */
}

/* ============================================================
   骨架
   ============================================================ */

.layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
}

.sidebar {
  width: var(--side-w);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--line);
}

.stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* 顶栏固定，只有内容区滚 */
}

/* ============================================================
   左侧导航
   ============================================================ */

.side-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  flex: none;
}
.side-brand svg {
  width: 30px; height: 30px;
  flex: none;
  padding: 4px;
  border-radius: var(--r-xs);
  color: #fff;
  background: linear-gradient(140deg, var(--brand) 0%, #4b93ff 100%);
  box-shadow: 0 3px 10px rgba(22, 104, 227, .28);
}
.side-brand-text { min-width: 0; }
.side-brand-text b {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.25;
}
.side-brand-text span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: .3px;
}

.side-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-1) var(--sp-3) var(--sp-4);
  overscroll-behavior: contain;
  /* 滚动条做窄：Windows 上默认宽滚动条要吃 15px 左右，
     正好把"中文（简体）"这类名字挤成省略号 */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.side-scroll::-webkit-scrollbar { width: 8px; }
.side-scroll::-webkit-scrollbar-track { background: transparent; }
.side-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}
.side-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

.side-group { margin-bottom: var(--sp-5); }

.side-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .8px;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ---------- 模式：带图标的功能项 ---------- */

.side-item {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease),
    box-shadow .14s var(--ease), transform .08s var(--ease);
}
.side-item:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.side-item:active { transform: translateY(1px); }

/* <button> 不能可靠地当 flex 容器，布局一律放内层 span */
.side-item-row { display: flex; align-items: center; gap: var(--sp-3); }
.si-icon {
  width: 34px; height: 34px;
  flex: none;
  padding: 7px;
  border-radius: var(--r-xs);
  background: var(--card-3);
  color: var(--text-2);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.side-item:hover .si-icon { background: var(--brand-soft-2); color: var(--brand); }
.si-body { min-width: 0; display: block; }
.si-name {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.1px;
}
.si-tip {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 1px;
}

.side-item.is-active {
  background: linear-gradient(135deg, var(--brand) 0%, #2f7bf0 100%);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(22, 104, 227, .26);
}
.side-item.is-active .si-icon { background: rgba(255, 255, 255, .2); color: #fff; }
.side-item.is-active .si-name { color: #fff; }
.side-item.is-active .si-tip { color: rgba(255, 255, 255, .78); }

/* 工具类小项（打字/历史/自检）：不占地方，一行一个 */
.side-item.slim { padding: var(--sp-2) var(--sp-3); }
.side-item.slim .side-item-row { gap: var(--sp-2); }
.side-item.slim .si-icon { width: 26px; height: 26px; padding: 5px; background: transparent; }
.side-item.slim .si-name { font-size: var(--fs-sm); font-weight: 550; }

/* ---------- 语言对 ---------- */

/* 源语言 | 互换 | 目标语言 —— 三列并排，一眼看到"从什么译成什么" */
.lang-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
}
.side-lang {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px var(--sp-3);
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--ease);
}
.side-lang:hover { background: var(--brand-soft); }
.side-lang-role {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: .3px;
}
.side-lang-name {
  display: block;
  font-size: var(--fs-md);
  font-weight: 650;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 互换按钮夹在两块之间，改成竖分隔条 */
.side-swap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  min-height: 0;
  padding: 0 var(--sp-2);
  border: none;
  border-left: 1px dashed var(--line-strong);
  border-right: 1px dashed var(--line-strong);
  background: var(--card-2);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.side-swap:hover { background: var(--brand-soft); color: var(--brand); }
.side-swap svg { width: 14px; height: 14px; }

/* ---------- 字号步进器 ---------- */

.font-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
}
.fs-btn {
  width: 46px;
  min-height: 42px;
  flex: none;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.fs-btn:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.fs-btn:disabled { opacity: .35; cursor: not-allowed; }

/* 数值居中，用等宽数字避免位数变化时左右跳动 */
.fs-value {
  flex: 1;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 旧版遗留的 side-font / side-mini 保留兼容（管理后台等可能引用） */
.side-font { display: flex; gap: var(--sp-2); }
.side-mini {
  flex: 1;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.side-mini:hover:not(:disabled) { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }
.side-mini:disabled { opacity: .4; cursor: not-allowed; }
.side-mini.wide { width: 100%; margin-top: var(--sp-2); flex: none; }

/* ============================================================
   顶栏（右侧内容区顶部）—— 账号信息在右上角
   ============================================================ */

.stage-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--top-h);
  padding: var(--sp-3) var(--sp-5);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

/* 窄屏把导航拉出来的按钮：直接排在顶栏最左边，不做悬浮 */
.stage-menu {
  width: 40px; height: 40px;
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.stage-menu svg { width: 20px; height: 20px; }
.stage-menu:hover { border-color: var(--brand-line); color: var(--brand); }

.stage-heading { min-width: 0; flex: 1; }
.stage-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* 额度：状态用颜色区分，一眼能看出快用完 */
.quota-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.quota-chip:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.quota-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  box-shadow: 0 0 0 3px var(--ok-soft);
}
.quota-chip.low { border-color: var(--warn-line); color: var(--warn); }
.quota-chip.low .quota-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.quota-chip.empty { border-color: var(--danger-line); color: var(--danger); background: var(--danger-soft); }
.quota-chip.empty .quota-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* ---------- 用户菜单（右上角） ---------- */

.user-menu { position: relative; }
.user-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-2) 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.user-btn:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.user-avatar {
  width: 30px; height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand) 0%, #4b93ff 100%);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 650;
}
.user-name {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 550;
}
.user-caret { width: 14px; height: 14px; flex: none; color: var(--text-3); transition: transform .16s var(--ease); }
.user-btn.open .user-caret { transform: rotate(180deg); }

.user-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 240px;
  padding: var(--sp-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  animation: pop-in .14s var(--ease);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.user-pop-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.user-pop-avatar {
  width: 38px; height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand) 0%, #4b93ff 100%);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 650;
}
.user-pop-name { font-size: var(--fs-sm); font-weight: 650; line-height: 1.35; }
.user-pop-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.user-pop-item:hover { background: var(--brand-soft); color: var(--brand-ink); }
.user-pop-item svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.user-pop-item:hover svg { color: var(--brand); }
.user-pop-item.danger { color: var(--danger); }
.user-pop-item.danger:hover { background: var(--danger-soft); color: var(--danger); }
.user-pop-item.danger svg { color: var(--danger); }
.user-pop-divider { height: 1px; background: var(--line); margin: var(--sp-2) 0; }

/* ============================================================
   内容区
   ============================================================ */

.stage-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  overflow: hidden;
}

#banner, #engineWarn { flex: none; margin: 0; }

.mode-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------- 面板 ---------- */

.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.pane.grow { flex: 1; }
.pane-out { flex: 1.12; }
.pane-in { flex: 0.88; }

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: none;
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--text-3);
  text-transform: uppercase;
}
.pane-tools { display: flex; gap: 6px; align-items: center; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease);
}
.tool-btn:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }

/* 内容文本：字号吃 --content-fs，行高放宽便于远看 */
.pane-text {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--content-fs);
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pane-text:empty::before { content: '　'; }
.pane-text.muted { font-size: calc(var(--content-fs) * .7); color: var(--text-3); }
.pane-in .pane-text { color: var(--text-2); }

/* ---------- 底部操作区 ---------- */

.stage-bar {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* 按住说话：主按钮，做成整块可按住的大目标 */
.talk-btn {
  display: block;
  width: 100%;
  min-height: 84px;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand) 0%, #2f7bf0 55%, #4b93ff 100%);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(22, 104, 227, .28);
  transition: filter .14s var(--ease), transform .08s var(--ease), box-shadow .14s var(--ease);
  user-select: none;
  touch-action: manipulation;
  -webkit-appearance: none;
}
.talk-btn:hover { filter: brightness(1.04); box-shadow: 0 10px 26px rgba(22, 104, 227, .32); }
.talk-btn:active { transform: scale(.994); }
.talk-btn.listening {
  background: linear-gradient(135deg, var(--danger) 0%, #ea6a6e 100%);
  box-shadow: 0 8px 22px rgba(220, 58, 63, .34);
  animation: talk-pulse 1.4s ease-in-out infinite;
}
.talk-btn.busy { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); }
.talk-btn:disabled { opacity: .5; cursor: not-allowed; animation: none; }

/* 图标放在浅色圆底上，比裸线条图标更有分量 */
.talk-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}
.talk-icon {
  width: 46px; height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.talk-icon svg { width: 24px; height: 24px; display: block; }
.talk-text { text-align: left; min-width: 0; }
.talk-label {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: .5px;
  line-height: 1.3;
}
.talk-sub {
  display: block;
  font-size: var(--fs-xs);
  opacity: .82;
  line-height: 1.4;
  margin-top: 2px;
}

@keyframes talk-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(220, 58, 63, .34); }
  50% { box-shadow: 0 8px 34px rgba(220, 58, 63, .58); }
}

.mic-hint {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  color: #7d4c04;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.quick-row { display: flex; gap: var(--sp-2); }
.quick-btn {
  flex: 1;
  min-height: var(--h-md);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 550;
  cursor: pointer;
  transition: border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease);
}
.quick-btn:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }

.stage-status {
  min-height: 18px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-align: center;
}

/* ============================================================
   交流模式
   ============================================================ */

.mode-exchange { flex-direction: column; gap: var(--sp-3); }

.ex-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: var(--sp-3);
}

.ex-room {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.ex-room-main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ex-room-badge {
  flex: none;
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .4px;
  background: var(--card-3);
  color: var(--text-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.ex-room-badge.live { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.ex-room-badge.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.ex-room-text { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }
.ex-room-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.ex-title { display: inline-flex; align-items: center; gap: 7px; }
.ex-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--line-strong);
  flex: none;
}
.ex-dot.on {
  background: var(--ok);
  border-color: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
}
.ex-role { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); text-transform: none; }

.ex-pane {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-3);
  overflow: hidden;
  position: relative;
}
/* 顶部一道彩条区分甲乙，面对面时一眼能分辨 */
.ex-pane::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
#exPaneA::before { background: linear-gradient(90deg, var(--brand) 0%, #4b93ff 100%); }
#exPaneB::before { background: linear-gradient(90deg, var(--accent) 0%, #ffa96b 100%); }

#exPaneB .talk-btn {
  background: linear-gradient(135deg, var(--accent) 0%, #f79a5c 100%);
  box-shadow: 0 8px 22px rgba(240, 129, 60, .26);
}
#exPaneB .talk-btn:hover { box-shadow: 0 10px 26px rgba(240, 129, 60, .3); }
#exPaneB .talk-btn.listening {
  background: linear-gradient(135deg, var(--danger) 0%, #ea6a6e 100%);
  animation: talk-pulse 1.4s ease-in-out infinite;
}

.ex-pane .pane-head {
  border-bottom: none;
  background: transparent;
  padding: 0 var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.ex-pane .pane-text {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-2);
  padding: var(--sp-3) var(--sp-4);
}
.ex-talk { min-height: 64px; }
.ex-talk .talk-inner { padding: var(--sp-3); gap: var(--sp-3); }
.ex-talk .talk-icon { width: 38px; height: 38px; }
.ex-talk .talk-icon svg { width: 20px; height: 20px; }
.ex-talk .talk-label { font-size: var(--fs-md); }

/* ============================================================
   历史记录抽屉
   ============================================================ */

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  z-index: 60;
  animation: drawer-in .18s var(--ease);
}
@keyframes drawer-in {
  from { transform: translateX(16px); opacity: .6; }
  to { transform: none; opacity: 1; }
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-md);
  font-weight: 650;
}
.drawer-head .row { display: flex; gap: var(--sp-2); }
.history-list { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-5); }
.history-item { padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line); }
.history-item .h-src { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; }
.history-item .h-dst { font-size: var(--fs-md); margin-top: 3px; line-height: 1.5; }
.history-empty { color: var(--text-3); font-size: var(--fs-sm); text-align: center; padding: var(--sp-8) 0; }

/* ============================================================
   响应式
   ============================================================ */

.side-scrim {
  position: fixed;
  inset: 0;
  background: rgba(19, 28, 41, .42);
  z-index: 55;
  animation: mask-in .16s var(--ease);
}

@media (max-width: 980px) {
  .stage-menu { display: flex; }

  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    box-shadow: var(--shadow-3);
    padding-top: env(safe-area-inset-top);
  }
  .sidebar.open { transform: translateX(0); }

  .stage-top { padding-left: var(--sp-3); padding-right: var(--sp-4); gap: var(--sp-2); }
  .stage-title { font-size: var(--fs-md); }
  .stage-sub { display: none; }
  .stage-body { padding: var(--sp-3); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .user-name { display: none; }
  .user-btn { padding: 0 var(--sp-1) 0 3px; }
  .quota-chip { padding: 0 var(--sp-3); font-size: var(--fs-xs); min-height: 36px; }

  /* 手机上两块竖排比拼成两列可读得多 */
  .mode-exchange { flex-direction: row; }
  .ex-grid { flex-direction: column; }

  /* 手机上导航是抽屉，宽度不够并排，语言对回到竖排 */
  .lang-pair { grid-template-columns: minmax(0, 1fr); }
  .side-lang { padding: 10px var(--sp-4); }
  .side-swap {
    flex-direction: row;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    padding: 0;
    border-left: none;
    border-right: none;
    border-top: 1px dashed var(--line-strong);
    border-bottom: 1px dashed var(--line-strong);
  }

  .talk-btn { min-height: 76px; }
  .talk-inner { gap: var(--sp-3); }
}

@media (max-width: 480px) {
  .stage-title { font-size: var(--fs-body); }
  .pane-text { padding: var(--sp-3) var(--sp-4); }
  .pane-head { padding: 9px var(--sp-4); }
  .talk-label { font-size: var(--fs-md); }
  /* 语言名太长时优先保住额度与头像 */
  .quota-chip span:last-child { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
}

/* 横屏手机：交流模式恢复并排 */
@media (max-width: 980px) and (orientation: landscape) {
  .ex-grid { flex-direction: row; }
}

/* 大屏：导航和内容都再放大一档，便于投屏 */
@media (min-width: 1440px) {
  :root { --side-w: 364px; --top-h: 70px; }
  .stage-top { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .stage-body { padding: var(--sp-5) var(--sp-6); }
}

@media (min-width: 1800px) {
  :root { --side-w: 376px; }
}