/* ============================================================
   哦游 Ohyou 手机端交互界面 — 基于 Daisy Days 设计系统
   （奶油画布 + pastel 色面 + 炭黑描边 + 硬偏移阴影 + 手绘 SVG 装饰）
   ============================================================ */

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

:root {
  --cream: #F5F0E6;
  --turquoise: #7ECDC0;
  --soft-pink: #F7C8D4;
  --butter: #FDE68A;
  --mint: #A8E6CF;
  --lavender: #D4A5E8;
  --peach: #FFCBA4;
  --sky: #A8D8F0;
  --coral: #F8635F;
  --text-dark: #2D2D2D;
  --text-muted: #6B6B6B;
  --white: #FFFFFF;

  --border: 3px solid var(--text-dark);
  --border-thin: 2px solid var(--text-dark);
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 50px;
  --radius-chip: 15px;
  --shadow: 6px 6px 0 var(--text-dark);
  --shadow-sm: 4px 4px 0 var(--text-dark);

  /* 正文字体：与豆包一致的系统黑体，直观易读 */
  --font-display: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.75;
  overflow: hidden;
  /* 桌面浏览器打开时，页面两侧用略深的奶油色衬托中间的"手机" */
}

button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img, svg { display: block; }

/* ---------- 整体外壳：两档响应式 ----------
   手机档（<768px）铺满全屏、无左栏；PC 档（≥768px）固定 1280×768 居中卡片 + 左栏历史容器 */
.phone-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;                /* 窄屏铺满，不露两侧大背景 */
  margin: 0 auto;
  background: var(--mint);   /* 默认聊天背景：薄荷 */
  overflow: hidden;
}

/* 左栏历史容器：手机档隐藏，PC 档显示（空骨架，列表接线见后续任务） */
#historySidebar { display: none; }

/* 右栏对话窗：顶栏/.stage/dock 与「只覆盖右栏的覆盖层」的 position 定位上下文 */
.chat-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  body { background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
  .phone-shell {
    width: min(1280px, 100vw);
    height: min(768px, calc(100dvh - 64px));   /* 为底部 footer 留出空间，防重叠 */
    border: var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    flex-direction: row;          /* 左栏 + 对话窗 (+ 通话面板) */
    flex: none;
  }
  #historySidebar {
    display: flex; flex-direction: column; width: 280px; flex: none;
    border-right: var(--border); background: var(--cream);
  }
  .chat-pane { flex: 1; }
  .chat-message { max-width: 78%; }   /* 气泡最大行宽，防超长行难读 */
  /* 原 540px 档的 .stage 间距微调并入本档 */
  .stage {
    gap: 20px;
    padding: 20px 20px 12px;
  }
}

/* ---------- PC 档页面底部：版权署名 + 备案号（手机档隐藏） ---------- */
.site-footer { display: none; }

@media (min-width: 768px) {
  .site-footer {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    flex: none;
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    white-space: nowrap;
  }
  .site-footer a { color: var(--text-muted); text-decoration: none; }
  .site-footer a:hover { color: var(--text-dark); text-decoration: underline; }
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: relative;
  z-index: 5;   /* 高于消息区，保证喇叭提示框不被气泡遮挡 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
/* 标题同时是设置入口按钮：展示为名字，可点击 */
.topbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.topbar-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.topbar-chevron { width: 13px; height: 13px; }
.topbar-subtitle {
  font-size: .72rem;
  font-weight: 400;
  color: var(--text-muted);
}
.topbar-right { display: flex; gap: 18px; align-items: center; }

/* 顶栏右侧裸图标（无圆形按钮底） */
.topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dark);
}
.topbar-btn svg { width: 24px; height: 24px; }

/* 语音播放开关：开启 = 圆形按钮 + 黑色喇叭；关闭 = 裸静音图标（两种状态占位大小一致） */
#ttsToggleBtn {
  width: 42px;
  height: 42px;
  border: var(--border-thin);
  border-radius: 50%;
  background: var(--white);
  color: var(--text-dark);
}
#ttsToggleBtn[aria-pressed="false"] {
  border-color: transparent;
  background: none;
}

/* 喇叭提示框：与 mode-popover 相同的进出动画 */
.tts-toast {
  position: absolute;
  top: calc(100% - 8px);
  right: 20px;
  z-index: 30;
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 8px 16px;
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.96);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}
.tts-toast.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: var(--border-thin);
  border-radius: 50%;
  background: var(--white);
  transition: background .12s;
  flex: none;
}
.icon-btn:active { background: var(--cream); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- 主内容区 ---------- */
.stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0px 10px 15px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;          /* 隐藏滚动条 */
}
.stage::-webkit-scrollbar { display: none; }

.hero { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.avatar-ring {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: var(--border);
  background: var(--butter);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex: none;
  user-select: none;
  -webkit-user-select: none;
}
.avatar-svg { width: 100%; height: 100%; }

.intro-bubble {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  padding: 16px 22px;
  font-weight: 500;
  font-size: .98rem;
  line-height: 1.8;
  max-width: 100%;
}
/* 能力关键词强调：下划线 + 加粗 */
.intro-kw {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- 预设输入：横向滑动（与消息气泡同列同宽，作为聊天流的一部分被挤走） ---------- */
.preset-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
  flex: none;
  user-select: none;          /* 拖动滑动时不选中文本 */
  -webkit-user-select: none;
}
.preset-scroll::-webkit-scrollbar { display: none; }

.preset-grid {
  position: relative;       /* 按钮由 JS 绝对定位，紧凑排列（仅 10px 间隔） */
  width: max-content;
}
.preset-grid .preset-chip { position: absolute; }

.preset-chip {
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 8px 18px;
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
  transition: background .12s;
}
.preset-chip:active { filter: brightness(.96); }

/* ---------- 底部停靠区 ---------- */
.dock {
  position: relative;
  z-index: 2;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 功能选项：横向滑动 */
.feature-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 6px;
  user-select: none;          /* 拖动滑动时不选中文本 */
  -webkit-user-select: none;
}
.feature-scroll::-webkit-scrollbar { display: none; }

.feature-row { display: flex; gap: 10px; width: max-content; }

.feature-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  transition: background .12s;
}
.feature-chip svg { width: 17px; height: 17px; }
/* 按压瞬间高亮，松开即恢复（不再常驻选中态） */
.feature-chip:active { background: var(--butter); }
.feature-chip.active { background: var(--butter); }

/* 快速 / 深度思考 模式选择弹层（锚定在 dock 上，位于功能选项行正上方） */
.mode-select { position: relative; flex: none; }
.mode-popover {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 6px;
  /* 进出动画：默认隐藏，.open 时淡入上滑 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.96);
  transform-origin: bottom left;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}
.mode-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mode-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
}
.mode-option svg { width: 16px; height: 16px; }
.mode-option:active, .mode-option:hover { background: var(--cream); }
.mode-option.selected { background: var(--butter); }

/* ---------- 输入栏 ---------- */
.input-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 10px;
}
.input-bar .icon-btn {
  width: 38px;
  height: 38px;
  border: none;
  box-shadow: none;
  background: transparent;
}
.input-bar .icon-btn:active { transform: none; box-shadow: none; background: var(--cream); }

.text-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text-dark);
  line-height: 38px;
}
.text-input::placeholder { color: var(--text-muted); font-weight: 500; }

.hold-talk-bar {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--white);
  font-weight: 600;
  font-size: .95rem;
  user-select: none;
  -webkit-user-select: none;
}
/* 文本相对整条输入栏绝对居中，不受左右按钮宽度影响 */
.hold-talk-bar span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}
.hold-talk-bar:active { background: var(--cream); }

/* ---------- 设置页：从右向左滑入覆盖 ---------- */
.settings-page {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  transform: translateX(100%);
  /* visibility 随过渡结束才隐藏，保证从左往右的关闭动画完整播放 */
  transition: transform .28s ease, visibility .28s;
  visibility: hidden;
}
.settings-page.open {
  transform: translateX(0);
  visibility: visible;
}

.settings-topbar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
}
.settings-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.settings-title svg { width: 20px; height: 20px; }

.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;          /* 隐藏滚动条 */
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.settings-body::-webkit-scrollbar { display: none; }

.settings-group { display: flex; flex-direction: column; gap: 10px; }
.settings-label {
  font-weight: 700;
  font-size: .95rem;
}

/* 背景颜色选项 */
.bg-options { display: flex; flex-wrap: wrap; gap: 10px; }
.bg-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 8px 14px;
  font-weight: 600;
  font-size: .88rem;
}
.bg-swatch::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: var(--border-thin);
  background: var(--sw);
}
.bg-swatch.selected { background: var(--butter); }

/* 音色选项 */
.voice-options { display: flex; flex-direction: column; gap: 8px; }
.voice-option {
  text-align: left;
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 12px 16px;
  font-weight: 600;
  font-size: .92rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.voice-option.selected { background: var(--butter); }
/* 音色描述：| 分隔，弱化处理 */
.voice-option .voice-desc {
  color: var(--text-muted);
  font-weight: 400;
  font-size: .78rem;
}
.voice-option .voice-desc::before { content: "| "; }

/* 通用设置行（关于 / 删除聊天记录） */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 12px 16px;
  font-weight: 600;
  font-size: .92rem;
  text-align: left;
}
.settings-row svg { width: 14px; height: 14px; }
.settings-row.danger { color: var(--coral); justify-content: center; }
/* 设置行点击动画（按压缩放反馈） */
.settings-row { transition: transform .12s ease, filter .12s ease; }
.settings-row:active { transform: scale(.97); filter: brightness(.95); }

/* 设置页底部标记 */
.settings-footer {
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.9;
}
.settings-footer a { color: var(--text-muted); text-decoration: none; }
.settings-footer a:hover { color: var(--text-dark); text-decoration: underline; }

/* ---------- 聊天消息气泡 ---------- */
.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}
.chat-message {
  align-self: flex-end;
  max-width: 82%;
  background: var(--sky);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 10px 14px;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.6;
  word-break: break-word;
}
.chat-message.voice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 132px;         /* 语音气泡加宽 */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.voice-body img { width: 13px; height: 13px; }
.voice-body { display: flex; align-items: center; gap: 10px; }
/* 转写后的语音气泡：正常文本 + 文本下方的小号音频重播 */
.chat-message.voice-transcribed {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.chat-message.voice-transcribed.has-photo { align-items: stretch; }
.chat-message.voice-transcribed.has-photo .voice-text,
.chat-message.voice-transcribed.has-photo .voice-replay { align-self: flex-end; }
.voice-replay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 600;
  opacity: .55;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.voice-replay img { width: 9px; height: 9px; }
/* 带图语音气泡：与带图文字气泡同宽（图片正常大小），语音为独立音频块 */
.chat-message.voice.has-photo {
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.chat-message.voice.has-photo .voice-body {
  background: var(--sky);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 6px 14px;
  align-self: flex-end;
  min-width: 110px;
}
/* AI 助手气泡：白色、左侧 */
.chat-message.ai {
  align-self: flex-start;
  background: var(--white);
}

/* ---------- 按住说话：底部黑色渐变遮罩 ---------- */
.voice-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  z-index: 45;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 150px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.voice-mask.show { opacity: 1; }
.voice-mask span {
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .06em;
  opacity: .9;
  /* 白字黑边：描边绘制在文字填充之下，避免吃掉字形 */
  -webkit-text-stroke: 2px #000000;
  paint-order: stroke fill;
}
/* 上移取消状态：红字黑边（描边颜色沿用 span 的黑色描边） */
.voice-mask span.cancel { color: #FF3B30; }
/* 不支持 text-stroke 的浏览器用四向阴影近似描边 */
@supports not (-webkit-text-stroke: 1px black) {
  .voice-mask span {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }
}
/* 按住时输入栏抬到遮罩之上 */
.input-bar.pressing { z-index: 50; }
.input-bar.pressing .hold-talk-bar { background: var(--cream); }

/* 发送图标（引用素材文件） */
.icon-btn img.icon-send { width: 20px; height: 20px; }

/* ---------- 回到底部浮动按钮 ---------- */
.scroll-bottom-btn {
  position: absolute;
  right: 16px;
  bottom: 150px;              /* dock 上方 */
  z-index: 25;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: var(--border-thin);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.scroll-bottom-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-bottom-btn img { width: 16px; height: 16px; }

/* ============================================================
   通话页 / 历史会话 / 图片 / 弹窗 组件
   ============================================================ */

/* ---------- 通用弹窗（授权 / 确认） ---------- */
.modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 20px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  transform: translateY(10px) scale(.96);
  transition: transform .2s ease;
}
.modal-overlay.open .modal-card { transform: none; }
.modal-icon { width: 34px; height: 34px; margin: 0 auto 12px; }
.modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.modal-text {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}
.modal-actions { display: flex; gap: 10px; }
.modal-btn {
  flex: 1;
  padding: 10px 0;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .92rem;
  background: var(--white);
}
.modal-btn.primary { background: var(--butter); }
.modal-btn.danger { background: var(--coral); color: #fff; }

/* ---------- 通话面板与通话页 ----------
   .call-pane 是通话页内容的容器：手机档下即原全屏覆盖层，
   继承原 .call-page 的 position:absolute; inset:0; translateY(100%) 滑入语义，
   任一通话页 .open 时滑入（.open 由 JS 同时加在面板与通话页上，手机档经 :has 联动面板）；
   PC 档切换为卡片行内右侧 400px 并排面板（QQ 式），见下方媒体查询 */
.call-pane {
  position: absolute;
  inset: 0;
  z-index: 55;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s;
}
.call-pane:has(.call-page.open) { transform: translateY(0); visibility: visible; }
.call-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* visibility 随过渡结束才隐藏，保证面板下滑离场动画完整播放 */
  visibility: hidden;
  transition: visibility .3s;
}
.call-page.open { visibility: visible; }

/* PC 档：通话面板切换为卡片行内右侧 400px 并排面板（QQ 式，D2）。
   用 position:relative 而非 static：.call-page 整棵子树（.call-video/角落按钮/
   灵动岛/对焦圈）都以面板为定位上下文，面板留在文档流的同时须保持可定位；
   无通话时 display:none 不占位，JS 给 .call-pane 加 .open 即出现（无滑入动画）。
   400px 面板宽度接近手机屏，视频画面（object-fit:contain）、变焦/对焦手势区、
   气泡区与挂断控制均随面板自适应收窄，无需额外规则 */
@media (min-width: 768px) {
  .call-pane {
    position: relative;
    inset: auto;
    z-index: auto;
    transform: none;
    visibility: visible;
    transition: none;
    display: none;
    width: 400px;
    flex: none;
    border-left: var(--border);
  }
  .call-pane.open { display: flex; flex-direction: column; }
}

/* 角落按钮（退出 / 切换摄像头），与主页顶栏按钮位置对齐 */
.call-corner-btn {
  position: absolute;
  top: 20px;
  z-index: 6;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--border-thin);
  background: rgba(255, 255, 255, .85);
  color: var(--text-dark);
}
.call-corner-btn.left { left: 20px; }
.call-corner-btn.right { right: 20px; }
.call-corner-btn img { width: 17px; height: 17px; }

/* 状态小字 */
.call-status {
  text-align: center;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .04em;
  padding: 4px 0 8px;
}
.call-status.dark { color: var(--text-muted); }

/* 底部控制按钮 */
.call-controls {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 8px 0 calc(26px + env(safe-area-inset-bottom, 0px));
}
.call-ctrl-btn {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--border-thin);
  background: rgba(255, 255, 255, .9);
}
.call-ctrl-btn img { width: 22px; height: 22px; }
.call-ctrl-btn.off { opacity: .45; }

/* AI 半透明气泡（通话页无用户气泡） */
.call-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px;
}
/* 底部对齐但保持可滚动：用 margin-top:auto 代替 justify-content:flex-end
   （flex-end 会让顶部溢出内容无法上滑查看） */
.call-messages > :first-child { margin-top: auto; }
.call-messages::-webkit-scrollbar { display: none; }
.call-msg {
  align-self: flex-start;
  max-width: 85%;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(45, 45, 45, .65);
  border-radius: var(--radius-chip);
  padding: 10px 14px;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-dark);
}

/* ---------- 视频通话页 ---------- */
.video-call-page { background: #151515; }
.call-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain：宽度填满、上下留黑，不裁剪不变形（手机竖屏发竖幅、桌面横幅） */
  object-fit: contain;
  background: #000;
  touch-action: none;        /* 双指捏合缩放下阻止页面级手势 */
  transform-origin: center;  /* 软件变焦以画面中心放大 */
}
/* 点按对焦圈反馈 */
.focus-ring {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .4);
  pointer-events: none;
  z-index: 5;
  animation: focusRing .6s ease-out forwards;
}
@keyframes focusRing {
  0% { transform: scale(1.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
.call-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
  font-weight: 500;
  padding: 40px;
  text-align: center;
}
/* display:flex 会覆盖 hidden 属性，需显式补规则 */
.call-video-fallback[hidden] { display: none; }

/* 灵动岛（与两侧角落按钮同一高度：top 20 + 高 40，中心对齐） */
.call-island {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .55);
  border-radius: var(--radius-pill);
  padding: 0 16px;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.call-island[hidden] { display: none; }
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  animation: recPulse 1.2s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}
/* 视频页气泡与状态置于视频上方 */
.video-call-page .call-messages { position: relative; z-index: 5; }
.video-call-page .call-status,
.video-call-page .call-controls { position: relative; z-index: 5; }
.video-call-page .call-island { margin-top: 0; }
/* 视频页顶部留白给灵动岛与角落按钮 */
.video-call-page .call-messages { margin-top: 68px; }

/* ---------- 语音通话页 ---------- */
.voice-call-page { background: var(--cream); }
.voice-call-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 72px 20px 8px;
}
.voice-call-hero .avatar-ring { width: 148px; height: 148px; }
.voice-call-page .call-messages { flex: 1; }
.voice-call-page .call-msg {
  background: rgba(255, 255, 255, .8);
  border: var(--border-thin);
}

/* 嘴巴张合由 pages.js 以 rAF 驱动 path d（端点固定、中间弯度变化） */

/* ---------- 历史会话页 ---------- */
.history-dim {
  position: absolute;
  inset: 0;
  z-index: 58;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.history-dim.open { opacity: 1; visibility: visible; }
.history-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 75%;
  z-index: 59;
  background: var(--white);
  border-right: var(--border);
  border-radius: 0 var(--radius-chip) var(--radius-chip) 0;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s;
}
.history-panel.open { transform: translateX(0); visibility: visible; }
/* PC 档：左侧 #historySidebar 取代滑出面板，旧面板与遮罩不渲染（D2） */
@media (min-width: 768px) {
  .history-panel, .history-dim { display: none !important; }
}
.history-header {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 22px 20px 14px;
  border-bottom: 2px solid var(--text-dark);
}
.history-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-list::-webkit-scrollbar { display: none; }
.history-item {
  display: flex;
  align-items: stretch;
  gap: 12px;
  text-align: left;
  background: var(--cream);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 12px 14px;
}
.history-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-title { font-weight: 700; font-size: .92rem; }
.history-preview {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-time { font-size: .72rem; font-weight: 500; color: var(--text-muted); }
/* 「总结」tag：旅程总结功能标识 */
.history-tag {
  margin-top: 6px;
  align-self: flex-start;
  background: var(--butter);
  border: 2px solid var(--text-dark);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
}
/* 右侧视频通话精彩瞬间预览图 */
.history-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 2px solid var(--text-dark);
  border-radius: 12px;
  align-self: center;
  flex: none;
}
.history-new-btn {
  margin: 12px 14px 10px;
  padding: 12px 0;
  background: var(--butter);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .95rem;
}

/* ---------- 图片预览浮窗（待发送） ---------- */
.photo-preview {
  position: absolute;
  left: 14px;
  bottom: 138px;              /* dock 上方左侧 */
  z-index: 26;
  width: 68px;
  height: 68px;
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  overflow: visible;
  background: var(--white);
}
.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-chip) - 2px);
}
.photo-remove {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-dark);
  background: var(--coral);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 气泡内的图片（位于文本/语音上方） */
.chat-message.has-photo { display: flex; flex-direction: column; gap: 8px; }
.msg-photo {
  display: block;
  width: 168px;
  max-width: 100%;
  border: 2px solid var(--text-dark);
  border-radius: 12px;
  cursor: zoom-in;
}

/* 全屏看图 */
.photo-viewer {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  cursor: zoom-out;
}
.photo-viewer.open { opacity: 1; visibility: visible; }
.photo-viewer img {
  max-width: 94%;
  max-height: 90%;
  border-radius: 8px;
}

/* ---------- 通用提示 toast（与 mode-popover 同款主题样式） ---------- */
.page-toast {
  position: absolute;
  left: 50%;
  bottom: 170px;
  transform: translateX(-50%) translateY(8px) scale(.96);
  transform-origin: bottom center;
  z-index: 95;
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  color: var(--text-dark);
  font-size: .85rem;
  font-weight: 600;
  padding: 9px 18px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: calc(100% - 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}
.page-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ---------- 通话页：用户气泡 / 轮序消失动画 ---------- */
.call-msg.user {
  align-self: flex-end;
  background: rgba(168, 216, 240, .78);   /* 主题蓝半透明 */
}
.call-msg.user .voice-body { display: flex; align-items: center; gap: 10px; }
.call-msg.user .voice-body img { width: 13px; height: 13px; }
.call-msg.user .voice-body { cursor: pointer; }
/* 视频页：10s 后轮序上滑消失 */
.call-msg.fade-up {
  transition: opacity .4s ease, transform .4s ease;
  opacity: 0;
  transform: translateY(-14px);
}

/* ---------- AI 流式指示器（小绿点）与气泡换行 ---------- */
.streaming-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34C759;
  margin-left: 6px;
  vertical-align: 2px;
  animation: streamPulse 1s ease-in-out infinite;
}
@keyframes streamPulse {
  0%, 100% { opacity: .3; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1); }
}
/* phase 分段换行可见（\n 需要 pre-line 才渲染为换行） */
.chat-message.ai span, .call-msg span { white-space: pre-line; }

/* ---------- 关键词「?」角标与漫画风解释对话框 ---------- */
.intro-kw { cursor: pointer; }
.kw-q {
  font-size: .6rem;
  font-weight: 700;
  margin-left: 1px;
  vertical-align: super;
}
.kw-tip {
  position: absolute;
  z-index: 70;
  max-width: 240px;
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-chip);
  padding: 10px 14px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-dark);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(.8) translateY(6px);
  transform-origin: var(--arrow-x, 50%) 0;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.kw-tip.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}
/* 漫画对话框箭头：白底黑边小方块旋转 45°（默认对话框在关键词上方，箭头朝下） */
.kw-tip::before {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-right: 2px solid var(--text-dark);
  border-bottom: 2px solid var(--text-dark);
  transform: translateX(-50%) rotate(45deg);
}
/* 关键词靠近顶部时对话框翻转到下方，箭头朝上 */
.kw-tip.below::before {
  bottom: auto;
  top: -7px;
  border: none;
  border-left: 2px solid var(--text-dark);
  border-top: 2px solid var(--text-dark);
}

/* 系统通知气泡（轮外压缩提示，2026-08-24）：主页与通话页共用居中灰字 */
.chat-message.system,
.call-msg.system {
  align-self: center;
  background: none;
  color: #999;
  font-size: 12px;
  padding: 4px 8px;
}

/* ---------- 思维过程 trace 小字条目（2026-09-07 二期 Task 7） ----------
   思考/工具/说话/记忆的过程留痕：小字浅灰、左对齐、不占满宽、默认折叠。
   kind 分色参考排查页 THINK/TOOL/SPEAK 标签色系，融入 pastel 视觉。 */
.trace-entry {
  align-self: flex-start;
  max-width: 82%;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-muted);
}
/* 设置页「显示思考过程」关闭时整体隐藏（不删 DOM，可恢复） */
.messages.trace-hidden .trace-entry { display: none; }
.trace-entry > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}
.trace-entry > summary::-webkit-details-marker { display: none; }
/* 折叠箭头：轻量 ▸，展开时旋转 */
.trace-entry > summary::before {
  content: "▸";
  font-size: .7rem;
  opacity: .5;
  transition: transform .15s ease;
}
.trace-entry[open] > summary::before { transform: rotate(90deg); }
.trace-icon { font-size: .8rem; }
/* kind 标签：pastel 底 + 分色文字小 pill */
.trace-tag {
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .72rem;
}
.trace-thinking .trace-tag { color: #6F42C1; background: #EFE6FD; }
.trace-tool .trace-tag { color: #9A6700; background: #FFF8C5; }
.trace-speak .trace-tag { color: #0E7C86; background: #D7F5F3; }
.trace-memory .trace-tag { color: #BF3989; background: #FFEEF7; }
/* 状态标记：running 省略号呼吸 / done 绿勾 / stopped 灰叉 */
.trace-state { font-weight: 700; }
.trace-state.running { animation: streamPulse 1s ease-in-out infinite; }
.trace-state.done { color: #34C759; }
.trace-state.stopped { opacity: .6; }
/* 展开详情：kind 色左边线 + 小字段行，超高可滚动 */
.trace-body {
  margin: 6px 0 2px 14px;
  padding-left: 10px;
  border-left: 2px solid rgba(45, 45, 45, .18);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow-y: auto;
}
.trace-thinking .trace-body { border-left-color: rgba(111, 66, 193, .4); }
.trace-tool .trace-body { border-left-color: rgba(154, 103, 0, .4); }
.trace-speak .trace-body { border-left-color: rgba(14, 124, 134, .4); }
.trace-memory .trace-body { border-left-color: rgba(191, 57, 137, .4); }
.trace-field + .trace-field { margin-top: 6px; }
.trace-field-label { font-weight: 700; color: var(--text-dark); opacity: .7; }

/* ---------- 设置行内开关（显示思考过程等，Daisy Days 描边风） ---------- */
.settings-row .toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: var(--white);
  transition: background .15s ease;
}
.settings-row .toggle-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: var(--border-thin);
  background: var(--cream);
  transition: left .15s ease, background .15s ease;
}
.settings-row[aria-pressed="true"] .toggle-switch { background: var(--butter); }
.settings-row[aria-pressed="true"] .toggle-switch::before {
  left: 24px;
  background: var(--white);
}