/* EnglishReader —— 线装书 · 雕版刻印色系（与 EnglishPrinter print.css 同源 token：宣纸/松烟墨/朱砂）
   为屏幕重写，不引用 A4 打印样式。印刷装饰（框栏/鱼尾/印章）不入触屏 UI，只统一纸墨印三色。
   Last updated: 2026-08-07 */
:root {
  --bg: #f5f0e1;           /* 宣纸底 */
  --ink: #2a261e;          /* 松烟墨，主文字 */
  --ink-soft: #635c4c;     /* 淡墨，次级文本 */
  --ink-stone: #9b917c;    /* 浅墨，元数据 */
  --accent: #a3352a;       /* 朱砂，唯一强调色（印章/朱批/交互） */
  --accent-wash: rgba(163, 53, 42, 0.15);
  --tag-bg: #eae3cd;       /* 旧纸色，标签底 */
  --muted: #9b917c;
  --bubble-left: #efe7d2;  /* 对话·对方（暖沙纸） */
  --bubble-right: #f6ecdf; /* 对话·我方（带朱砂调） */
  --card-bg: #faf7ee;      /* 纸色亮一档，卡片分层（不用纯白） */
  --line: #e2d9c3;         /* 暖沙分界线 */
  --frame: #bd8768;        /* 朱丝栏发丝线（文章头版心线/气泡线族） */
  --bubble-other-line: #d4c7a4;
  --bubble-me-line: #dcbb9f;
  --serif: Charter, Georgia, 'Songti SC', 'Times New Roman', serif;
  --sans: -apple-system, 'Helvetica Neue', 'PingFang SC', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  overflow-wrap: break-word;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 22px calc(56px + env(safe-area-inset-bottom));
}

/* ---------- 书架（文章列表） ---------- */
.app-title {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;  /* 与印刷版标题同气质：宽字距 */
  margin: 18px 0 20px;
}
.article-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--accent-wash);
  display: flex;
  align-items: center;
  gap: 14px;
}
.article-card .card-body { flex: 1; min-width: 0; }
.article-card .cover {
  width: 96px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.article-card:active { background: var(--tag-bg); }
.article-card h2 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 4px;
}
.article-card .subtitle {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.article-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
}
.article-card .meta span {
  background: var(--tag-bg);
  color: var(--ink-stone);
  border-radius: 4px;
  padding: 2px 8px;
}
.article-card .meta .level { color: var(--accent); }
.list-empty {
  color: var(--ink-stone);
  font-family: var(--sans);
  font-size: 14px;
  text-align: center;
  padding: 48px 0;
}
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#btn-vocab {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--accent-wash);
}
#btn-vocab:active { background: var(--accent-wash); }

/* ---------- 生词本 ---------- */
/* 返回按钮与其他导航按钮同款（同时固定导航栏高度，供下方 sticky 工具栏让位） */
#btn-vocab-back {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 8px 8px 8px 0;
  cursor: pointer;
}
/* 工具栏（搜索 + 阶段筛选）：sticky 常驻，长列表随时可搜可筛 */
#vocab-toolbar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 54px); /* 让开 sticky 导航栏(50px) + 其下边距 */
  z-index: 30;
  margin: 0 -22px 10px;
  padding: 6px 22px 8px;
  background: rgba(245, 240, 225, 0.92);
  -webkit-backdrop-filter: blur(10px);
}
.vocab-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px 4px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vocab-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.vocab-search-icon { font-size: 13px; opacity: 0.65; }
#vocab-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--sans);
  font-size: 16px; /* ≥16px：防 iOS 聚焦自动缩放 */
  color: var(--ink);
  padding: 6px 0;
}
#vocab-search-input::placeholder { color: var(--ink-stone); }
#vocab-search-input::-webkit-search-cancel-button { display: none; } /* 用自绘 ✕ 统一样式 */
#vocab-search-clear {
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--tag-bg);
  color: var(--ink-stone);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
#vocab-search-clear:active { background: var(--accent-wash); }
#vocab-kind-filters {
  display: flex;
  gap: 8px;
  padding: 8px 12px 0;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 35;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.vocab-kind-filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-stone);
  background: var(--tag-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.vocab-kind-filter.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* 搜索命中高亮：金色系与「回到语境」定位色一致 */
.vocab-item mark {
  background: rgba(201, 162, 39, 0.3);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* 空状态 */
.vocab-empty {
  text-align: center;
  font-family: var(--sans);
  color: var(--ink-stone);
  padding: 44px 12px;
}
.vocab-empty-icon { font-size: 30px; display: block; margin-bottom: 12px; }
.vocab-empty-title { font-size: 15px; color: var(--ink-soft); margin: 0 0 6px; }
.vocab-empty-hint { font-size: 13px; margin: 0; line-height: 1.6; }

/* 桌面悬停反馈 */
@media (hover: hover) {
  .vocab-item { transition: border-color 0.15s; }
  .vocab-item:hover { border-color: var(--ink-stone); }
}
.vocab-section-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-stone);
  margin: 24px 0 10px;
}
.vocab-item {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 8px 13px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  transition: all 0.15s;
}
.vocab-item--phrase {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.vocab-item--sentence {
  background: linear-gradient(to right, var(--accent-wash) 0%, var(--card-bg) 8px);
}
.vocab-item .v-main { flex: 1; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: var(--accent-wash); }
.v-head { display: flex; align-items: baseline; gap: 8px; }
.v-text { font-size: 17px; font-weight: 600; }
.vocab-item--sentence .v-text { font-size: 16px; font-weight: 400; line-height: 1.6; }
.v-stage {
  flex: none;
  font-family: var(--sans);
  font-size: 11px;
  background: var(--tag-bg);
  color: var(--ink-stone);
  border-radius: 4px;
  padding: 1px 7px;
}
.v-stage--familiar { color: var(--accent); background: var(--accent-wash); }
.v-context { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.6; }
.v-meta { font-family: var(--sans); font-size: 12px; color: var(--ink-stone); margin: 6px 0 0; }
.v-actions { flex: none; display: flex; align-items: center; }
.v-explain,
.v-del {
  background: none;
  border: none;
  color: var(--ink-stone);
  font-size: 14px;
  padding: 2px 8px;
  cursor: pointer;
}
.v-explain { font-size: 16px; }

/* 词分组：同一个词的多个语境 */
.vocab-group { margin-bottom: 10px; }
.vocab-group .vocab-item { margin-bottom: 0; }
details.vocab-contexts {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}
details.vocab-contexts summary {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-stone);
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
}
details.vocab-contexts summary::-webkit-details-marker { display: none; }
details.vocab-contexts summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}
details.vocab-contexts[open] summary::before { transform: rotate(90deg); }
details.vocab-contexts .vocab-item {
  margin-top: 8px;
  opacity: 0.85;
}

/* ---------- 阅读视图 ---------- */
/* 导航栏 sticky 常驻：任何滚动位置都能一键 返回/视频播放暂停/朗读全文 */
.article-nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 36; /* 盖过视频小窗(34)与词气泡(35)，让位于卡片(50) */
  margin: 0 -22px 4px;
  padding: 8px 22px;
  background: rgba(245, 240, 225, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-actions { display: flex; gap: 8px; }
#btn-back {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 8px 8px 8px 0;
  cursor: pointer;
}
#btn-outline-back {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 8px 8px 8px 0;
  cursor: pointer;
}
/* 脉络页容器：只给底座排版，个性化呈现由脉络文件自带的 .outline 作用域样式负责 */
#outline-container {
  font-family: var(--sans);
  line-height: 1.75;
  touch-action: manipulation;
}
/* 脉络页微注：收藏词后的 ?，点开即现单一语境义（默认收起——先给回想留一拍）。
   行为在 main.js 委托；样式属机制的一部分，app 侧统一提供，脉络文件可在 .outline 内微调 */
#outline-container .g {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  margin-left: 3px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--ink-stone);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.7;
  vertical-align: 0.12em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: var(--accent-wash);
}
#outline-container .g--open {
  background: var(--accent-wash);
  color: var(--ink-soft);
}
/* 全景图节点点击滚到节拍：落点让开 sticky 导航栏 */
#outline-container section[id] { scroll-margin-top: calc(64px + env(safe-area-inset-top)); }
#outline-container [data-beat-target] { cursor: pointer; }
#btn-listen,
#btn-video,
#btn-outline {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--accent-wash);
}
#btn-video { font-variant-numeric: tabular-nums; } /* 实时进度逐秒跳，等宽数字防按钮宽度抖动 */
#btn-listen:active,
#btn-video:active,
#btn-outline:active { background: var(--accent-wash); }
#article-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--frame);  /* 版心线：朱丝栏，呼应印刷版框栏 */
  margin-bottom: 26px;
}
#article-header .head-main { flex: 1; min-width: 0; }
/* 阳文小印「讀」：纯装饰，不参与交互；与印刷版印章同族 */
.head-seal {
  flex-shrink: 0;
  margin-top: 2px;
  width: 26px;
  height: 26px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "STLiti", "STKaiti", "Kaiti SC", "Songti SC", serif;
  font-size: 14px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px var(--paper);  /* 阳文内框 */
}
#article-header .doc-title {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin: 0 0 6px;
}
#article-header .doc-subtitle {
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
#article-header .doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
}
#article-header .doc-meta span {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 4px;
  padding: 2px 8px;
}

#reading-container {
  font-size: 19px;
  line-height: 1.85;
  touch-action: manipulation; /* 去 300ms 延迟 + 防双击缩放 */
}
#reading-container p { margin: 0 0 1.2em; }
/* 书页式缩进：只作用于正文段（.reading-text 直系 p），气泡与字幕文档（.reading）豁免 */
#reading-container > .reading-text > p { text-indent: 1em; }
#reading-container > .reading-text > p:first-child { text-indent: 0; }
#reading-container strong { color: var(--accent); font-weight: 600; }
/* 进度跳回的落点（scrollIntoView block:'start'）让开 sticky 导航栏 */
#reading-container p,
#reading-container .chat-bubble { scroll-margin-top: calc(64px + env(safe-area-inset-top)); }

/* ---------- 文章视频（文件夹式材料）：剧场模式 ---------- */
.video-wrap {
  position: fixed;
  z-index: 39;
  display: none; /* 默认隐藏，进入剧场时显示 */
}
.video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 18px 60px rgba(20, 18, 15, 0.5);
}

/* 剧场态：画面居中，盖过词气泡(35)；低于词卡遮罩(40)/卡片(50) */
.video-wrap--theater {
  display: block;
}

/* 禅模式：视频全屏，无字幕无控制条，纯净观看 */
.video-wrap--zen {
  display: block;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 50; /* 高于剧场背景，低于词卡 */
}
.video-wrap--zen video {
  border-radius: 0;
  box-shadow: none;
}

/* 禅模式退出按钮：右上角，半透明悬浮 */
.zen-exit {
  position: fixed;
  top: max(env(safe-area-inset-top), 20px);
  right: 20px;
  z-index: 51;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: scale(0.9);
}
.zen-exit.on {
  opacity: 1;
  transform: scale(1);
}
.zen-exit::before {
  content: '✕';
  display: block;
  font-size: 22px;
}
.zen-exit:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}
.zen-exit:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

/* 剧场背景：压暗虚化正文。z-index 在词气泡(35)之上、词卡遮罩(40)之下 */
.theater-backdrop {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgba(30, 28, 25, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.theater-backdrop.on { opacity: 1; }

/* 剧场关闭按钮：右上角，现代极简风格 */
.theater-close {
  position: fixed;
  top: max(env(safe-area-inset-top), 20px);
  right: 20px;
  z-index: 40;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: rgba(245, 242, 236, 0.9);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.theater-close::before {
  content: '✕';
  display: block;
  font-size: 18px;
  transform: translateY(-0.5px);
}
.theater-close:hover {
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transform: scale(1.08);
}
.theater-close:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

/* 剧场字幕：当前时间戳段的原文克隆（分词 span/收藏标记原样可用）——画面怀里的那句话 */
.theater-sub {
  position: fixed;
  z-index: 39;
  overflow-y: auto;
  color: #f5f2ec;
  font-size: 19px;
  line-height: 1.75;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
}
.theater-sub.on { opacity: 1; }
.theater-sub p { margin: 0; }

/* 段落视频控制条：低调、功能性优先，不抢注意力 */
.para-video-controls {
  position: fixed;
  z-index: 39;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.para-video-controls.on { opacity: 1; }

.para-video-controls__btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  line-height: 1;
}
.para-video-controls__btn:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.1);
}
.para-video-controls__btn:active {
  transform: scale(0.92);
}
.para-video-controls__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.para-video-controls__nav {
  display: flex;
  gap: 4px;
  align-items: center;
}

.para-video-controls__divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.para-video-controls__progress {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.para-video-controls__time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* 变速控制（仿音频控制条交互） */
.para-video-controls__speed-control {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.para-video-controls__speed-label {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  min-width: 42px;
  text-align: center;
}
.para-video-controls__speed-label:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
.para-video-controls__speed-label:active {
  transform: scale(0.95);
}
.para-video-controls__speed-label.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* 变速滑块弹出层 */
.para-video-controls__speed-slider-wrapper {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 8px;
  transition: opacity 0.2s, transform 0.2s;
  transform-origin: bottom center;
}
.para-video-controls__speed-slider-wrapper[hidden] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
}

/* 垂直滑块轨道 */
.para-video-controls__speed-slider {
  width: 32px;
  height: 120px;
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
}

/* 滑块填充（从底部向上） */
.para-video-controls__speed-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* 默认 1.0× = 中间 */
  background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.6));
  border-radius: 16px;
  transition: height 0.1s ease;
  pointer-events: none;
}

/* 滑块手柄 */
.para-video-controls__speed-handle {
  position: absolute;
  bottom: 50%; /* 默认 1.0× = 中间 */
  left: 50%;
  transform: translate(-50%, 50%);
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: width 0.2s, height 0.2s, bottom 0.1s ease;
  pointer-events: none;
}
.para-video-controls__speed-handle.dragging {
  width: 22px;
  height: 22px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.para-video-controls__slider-wrap {
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
  position: relative;
}

.para-video-controls__slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  cursor: pointer;
  transition: height 0.15s ease;
}
.para-video-controls__slider:hover {
  height: 4px;
}

/* Webkit slider thumb */
.para-video-controls__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.para-video-controls__slider:hover::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
}

/* Firefox slider thumb */
.para-video-controls__slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.para-video-controls__slider:hover::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
}

/* 进度条填充效果 */
.para-video-controls__slider {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.5) var(--progress, 0%),
    rgba(255, 255, 255, 0.2) var(--progress, 0%),
    rgba(255, 255, 255, 0.2) 100%
  );
}
/* 字幕语义小群：每组一个段落块，组内句子连续显示 */
.theater-sub .sub-group {
  display: block;
  margin: 0 0 16px;
  padding: 8px 0;
  color: rgba(245, 242, 236, 0.95);
  line-height: 1.6;
}
.theater-sub .sub-group:last-child { margin-bottom: 0; }
.theater-sub strong { color: #ffd98a; font-weight: 600; }
.theater-sub span.w--saved {
  text-decoration: underline dotted rgba(255, 217, 138, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* 字幕里的说话人标签（聊天体材料） */
.theater-sub .chat-bubble__speaker { color: rgba(245, 242, 236, 0.6); font-size: 13px; }

/* 正在播放的段落：淡淡点亮（光晕式，无布局位移）——书房态里「播到哪」的唯一表达 */
#reading-container .video-now {
  background: rgba(163, 53, 42, 0.06);
  box-shadow: 0 0 0 8px rgba(163, 53, 42, 0.06);
  border-radius: 6px;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* 段落时间戳按钮组（视频播放 + 段落音频并排） */
.ts-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

/* 视频播放按钮（原时间戳跳转按钮） */
button.ts-seek {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0 0 2px;
  margin: 0;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--accent-wash);
  user-select: none;
  -webkit-user-select: none; /* 不参与长按选区 */
}
button.ts-seek:active { opacity: 1; }

/* 段落音频播放按钮（新增） */
button.ts-audio {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--accent);
  background: rgba(163, 53, 42, 0.08);
  border: none;
  padding: 2px 8px;
  margin: 0;
  border-radius: 6px;
  opacity: 0.8;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--accent-wash);
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.2s, background 0.2s;
}
button.ts-audio:active {
  opacity: 1;
  background: rgba(163, 53, 42, 0.14);
}

/* 内联音频控制栏（低调融入段落，不干扰阅读） */
.inline-audio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(163, 53, 42, 0.03);
  border: 1px solid rgba(163, 53, 42, 0.08);
  border-radius: 8px;
  margin-top: 12px;
  margin-bottom: 16px;
  user-select: none;
  -webkit-user-select: none;
  max-width: 100%;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.inline-audio-controls:hover {
  background: rgba(163, 53, 42, 0.05);
  border-color: rgba(163, 53, 42, 0.12);
  box-shadow: 0 2px 8px rgba(163, 53, 42, 0.06);
}

.iac-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(163, 53, 42, 0.08);
  color: var(--ink-stone);
  border: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.iac-play:hover {
  background: rgba(163, 53, 42, 0.12);
  color: var(--accent);
}

.iac-play:active {
  transform: scale(0.94);
}

/* 重播：回到当前段开头（与播放按钮同族但更轻量） */
.iac-replay {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(163, 53, 42, 0.06);
  color: var(--ink-light);
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.iac-replay:hover {
  background: rgba(163, 53, 42, 0.12);
  color: var(--accent);
}
.iac-replay:active {
  transform: scale(0.94);
}

.iac-progress-wrapper {
  flex: 1;
  padding: 10px 0;
  touch-action: none; /* iOS：拖动轨道时禁止原生滚动手势抢占 */
  user-select: none;
  -webkit-user-select: none;
}

.iac-progress-bar {
  position: relative;
  height: 4px;
  background: rgba(163, 53, 42, 0.1);
  border-radius: 2px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: height 0.2s, background 0.2s;
}

.iac-progress-bar:hover {
  height: 6px;
  background: rgba(163, 53, 42, 0.15);
}

.iac-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: rgba(163, 53, 42, 0.3);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear, background 0.2s;
  pointer-events: none;
}

.iac-progress-bar:hover .iac-progress-fill {
  background: rgba(163, 53, 42, 0.4);
}

.iac-progress-handle {
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid rgba(163, 53, 42, 0.4);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s;
  cursor: grab;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
}

.iac-progress-bar:hover .iac-progress-handle {
  opacity: 1;
}

.iac-progress-handle:hover {
  transform: translate(-50%, -50%) scale(1.2);
  border-color: var(--accent);
}

.iac-progress-handle.dragging {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 2px 8px rgba(163, 53, 42, 0.3);
  border-color: var(--accent);
  cursor: grabbing;
}

.iac-time {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 90px;
  text-align: right;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.inline-audio-controls:hover .iac-time {
  color: var(--ink-stone);
}

/* 变速控制（按需弹出的垂直滑动条） */
.iac-speed-control {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.iac-speed-label {
  padding: 6px 12px;
  background: rgba(163, 53, 42, 0.06);
  color: var(--ink-light);
  border: 1px solid rgba(163, 53, 42, 0.1);
  border-radius: 16px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.iac-speed-label:hover {
  background: rgba(163, 53, 42, 0.1);
  border-color: rgba(163, 53, 42, 0.15);
  color: var(--accent);
}

.iac-speed-label:active {
  transform: scale(0.96);
}

.iac-speed-label.active {
  background: rgba(163, 53, 42, 0.12);
  border-color: rgba(163, 53, 42, 0.2);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(163, 53, 42, 0.06);
}

.iac-speed-slider-wrapper {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px;
  background: white;
  border: 1px solid rgba(163, 53, 42, 0.1);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  transform-origin: bottom center;
}

.iac-speed-slider-wrapper:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
  animation: slideUpFade 0.2s ease-out;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.iac-speed-slider {
  position: relative;
  width: 4px;
  height: 100px;
  background: rgba(163, 53, 42, 0.12);
  border-radius: 2px;
  cursor: pointer;
  touch-action: none; /* iOS：垂直拖变速时禁止原生滚动手势抢占 */
  user-select: none;
  -webkit-user-select: none;
  transition: width 0.15s, background 0.15s;
}

.iac-speed-slider:hover {
  width: 6px;
  background: rgba(163, 53, 42, 0.18);
}

.iac-speed-track {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: rgba(163, 53, 42, 0.35);
  border-radius: 2px;
  transition: height 0.1s linear, background 0.15s;
  pointer-events: none;
}

.iac-speed-slider:hover .iac-speed-track {
  background: rgba(163, 53, 42, 0.45);
}

.iac-speed-handle {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, 50%);
  width: 14px;
  height: 14px;
  background: white;
  border: 2px solid rgba(163, 53, 42, 0.4);
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  cursor: grab;
  pointer-events: none;
}

.iac-speed-slider:hover .iac-speed-handle {
  border-color: var(--accent);
  transform: translate(-50%, 50%) scale(1.1);
}

.iac-speed-handle.dragging {
  transform: translate(-50%, 50%) scale(1.35);
  box-shadow: 0 2px 10px rgba(163, 53, 42, 0.35);
  border-color: var(--accent);
  cursor: grabbing;
}

span.w { border-radius: 3px; }
span.w--active { background: var(--accent-wash); }
/* 阅读中复现：已收藏的词淡虚线下划，低调提示「见过它」；掌握后不再下发标记，自然退场 */
span.w--saved {
  text-decoration: underline dotted rgba(163, 53, 42, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* 生词本「回到语境」的落点：滚到视野中央后脉冲两下，自然消退（词和整句块共用） */
.locate-flash {
  animation: locate-pulse 1.2s ease 2;
  border-radius: 6px;
}
@keyframes locate-pulse {
  0%, 100% { background: transparent; box-shadow: none; }
  40% { background: var(--accent-wash); box-shadow: 0 0 0 5px var(--accent-wash); }
}

/* 对话气泡（自 print.css 适配屏幕）：笺纸风 —— 一角小圆 + 发丝边 + 小尾巴 */
.chat-row { display: flex; margin: 0 0 14px; }
.chat-row--right { justify-content: flex-end; }
.chat-bubble {
  position: relative;
  max-width: 80%;
  background: var(--bubble-left);
  border: 1px solid var(--bubble-other-line);
  border-radius: 3px 12px 12px 12px;
  padding: 10px 14px;
  font-size: 17px;
  line-height: 1.7;
}
.chat-bubble--right {
  background: var(--bubble-me);
  border-color: var(--bubble-me-line);
  border-radius: 12px 3px 12px 12px;
}
/* 尾巴：藏在角落的旋转小方块，同底色同边色 */
.chat-bubble--left::before,
.chat-bubble--right::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 10px;
  height: 10px;
}
.chat-bubble--left::before {
  left: -6px;
  background: var(--bubble-left);
  border-left: 1px solid var(--bubble-other-line);
  border-top: 1px solid var(--bubble-other-line);
  border-radius: 2px 0 0 0;
}
.chat-bubble--right::after {
  right: -6px;
  background: var(--bubble-me);
  border-right: 1px solid var(--bubble-me-line);
  border-top: 1px solid var(--bubble-me-line);
  border-radius: 0 2px 0 0;
}
.chat-bubble p { margin: 0; text-indent: 0; }
.chat-bubble__speaker {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-stone);
  margin-bottom: 3px;
}

/* 朗读全文：当前句高亮（Highlight API），块级底色兜底 */
::highlight(reading-sentence) { background: var(--accent-wash); }

/* 收藏句「回到语境」驻留高亮：金色（收藏星同色系，与朗读蓝区分），
   纯内存不碰 DOM，换文章/刷新即消失；找不到精确区间时整块淡金兜底 */
::highlight(vocab-located) { background: rgba(201, 162, 39, 0.24); }
.sentence-located {
  background: rgba(201, 162, 39, 0.13);
  border-radius: 8px;
  box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.13);
}
.reading-current {
  background: rgba(163, 53, 42, 0.05);
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(163, 53, 42, 0.05);
}
.chat-bubble.reading-current { box-shadow: 0 0 0 2px var(--accent-wash); }

/* ---------- 词气泡（单行：词 + 音标 + 🔊 + 📖 + ↺ 回溯，贴词弹出） ---------- */
#popover {
  position: fixed;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 94vw;
  padding: 7px 8px 7px 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(43, 41, 38, 0.2);
  font-family: var(--sans);
  animation: pop-in 0.14s ease;
}
#popover[hidden] { display: none; } /* display:flex 会压过 UA 的 [hidden]，必须显式补 */
#pop-word {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pop-phonetic {
  color: var(--ink-soft);
  font-size: 14px;
  white-space: nowrap;
}
#pop-speak,
#pop-origin,
#pop-explain,
#pop-trace {
  font-size: 16px;
  background: var(--tag-bg);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  min-width: 46px; /* 「…」加载态不引起宽度跳动 */
}
#pop-speak:active,
#pop-origin:active,
#pop-explain:active,
#pop-trace:active { background: var(--accent-wash); }
/* 已收藏词的回溯按钮：右上角金色 ⭐ 角标（绝对定位叠加，不引宽度跳动） */
#pop-trace { position: relative; }
#pop-trace.saved::after {
  content: '⭐';
  position: absolute;
  top: -5px;
  right: -3px;
  font-size: 9px;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 选区操作条（仅选区存在时出现在底部；iOS 系统菜单贴选区浮动，到不了底缘） ---------- */
#selchip {
  position: fixed;
  left: 50%;
  /* transform 由 selectionbar.js place() 内联接管（视觉视口定位+缩放补偿）；
     这里只是无 visualViewport 浏览器的兜底。origin 定在底缘中心：scale 补偿时底边不动 */
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 45; /* 盖过剧场背景(38)/词卡遮罩(40)，让位于卡片(50) */
  display: flex;
  align-items: stretch;
  max-width: 92vw;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(43, 41, 38, 0.3);
  animation: chip-in 0.16s ease;
  overflow: hidden;
  /* 拖选扫过条子时不让按钮文字被选进原生选区（锚选区形态下条子就在选区旁边） */
  -webkit-user-select: none;
  user-select: none;
}
#selchip[hidden] { display: none; }
/* 鼠标/触摸板设备：锚在选区尾部下方（文档坐标，随内容滚动/缩放，永远贴着选中的字） */
#selchip.anchored { position: absolute; }
/* 词气泡同口径：桌面端 absolute + 文档坐标，放大/滚动后仍贴词可见（selectionbar 实测过的方案） */
#popover.anchored { position: absolute; }
#selchip button {
  background: none;
  border: none;
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 18px;
  cursor: pointer;
  white-space: nowrap;
}
#selchip button:active { background: rgba(255, 255, 255, 0.16); }
#chip-origin {
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  min-width: 92px; /* 「…」加载态不引起宽度跳动 */
}
#chip-speak {
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  min-width: 96px; /* 「…」加载态不引起宽度跳动 */
}
@keyframes chip-in {
  /* 只动 opacity：transform 已由 place() 内联控制，关键帧若带 transform 会在入场
     0.16s 内覆盖内联值，把条子甩回错误位置 */
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 底部卡片（词卡 #sheet 与回溯卡 #trace-sheet 共用骨架） ---------- */
#sheet-backdrop,
#trace-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(43, 41, 38, 0.25);
}
#sheet,
#trace-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  max-width: 720px;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 28px rgba(43, 41, 38, 0.18);
  max-height: 52vh;
  display: flex;
  flex-direction: column;
  padding: 6px 20px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform 0.25s ease;
}
#sheet.open,
#trace-sheet.open { transform: translateY(0); }
#sheet-handle,
#trace-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 6px auto 10px;
  flex: none;
}
#sheet-head,
#trace-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
#sheet-title,
#trace-title {
  font-size: 20px;
  font-weight: 500;
}
#sheet-audio,
#trace-audio {
  font-size: 18px;
  background: var(--tag-bg);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
#sheet-audio:active,
#trace-audio:active { background: var(--accent-wash); }
#sheet-save {
  font-size: 19px;
  color: var(--ink-stone);
  background: var(--tag-bg);
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  min-width: 46px; /* 「…」加载态不引起宽度跳动 */
}
#sheet-save.saved { color: #c9a227; }
#sheet-save:active { background: var(--accent-wash); }

/* 收藏按钮组：类型选择器 + 收藏按钮 */
#sheet-save-group {
  margin-left: auto; /* 靠右，与标题/发音拉开 */
  display: flex;
  align-items: center;
  gap: 6px;
}
#sheet-kind-select {
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--tag-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--sans);
}
#sheet-kind-select:focus {
  outline: none;
  border-color: var(--accent);
}
/* 图钉：默认灰（浮着，点外面会关）；钉住变彩色+微倾斜，遮罩撤除、底下页面可操作 */
#sheet-pin {
  font-size: 16px;
  background: var(--tag-bg);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.55;
}
#sheet-pin.pinned {
  filter: none;
  opacity: 1;
  background: var(--accent-wash);
  transform: rotate(-18deg);
}
#sheet-pin:active { background: var(--accent-wash); }
#sheet-body,
#trace-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 10px;
  font-size: 15.5px;
  line-height: 1.75;
}
#sheet-body p { margin: 0 0 0.7em; }
#sheet-body ul { margin: 0 0 0.7em; padding-left: 1.3em; }
#sheet-body li { margin-bottom: 0.25em; }
#sheet-body strong { color: var(--accent); font-weight: 600; }
/* 发音锚点音节（「怎么读」行内的 IPA 加粗段）：放大+着色，一眼锁定 */
#sheet-body strong.ipa-anchor {
  font-size: 1.25em;
  color: var(--accent);
}
/* 弱音节（「怎么读」骨架行的 ~~…~~ 段）：灰小 = 自动弱化、不必刻意记 */
#sheet-body .ipa-weak {
  font-size: 0.85em;
  color: var(--muted);
}
/* 词记忆插画：顶部显示，圆角卡片样式 */
.illustration-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 16px;
}
.illustration-wrap::after {
  content: attr(data-word);
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: "Georgia", "Times New Roman", serif;
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.32);
  pointer-events: none;
  line-height: 1;
  text-transform: lowercase;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  padding-bottom: 2px;
  z-index: 2;
}
.illustration-dl-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 3;
}
.illustration-wrap:hover .illustration-dl-btn {
  opacity: 0.9;
  transform: scale(1);
}
.illustration-dl-btn:hover {
  opacity: 1 !important;
  background: var(--card-bg);
  color: var(--accent, #a3352a);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
#sheet-body .word-illustration {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 12px;
  margin: 0 auto;
  display: block;
  background: var(--canvas);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#sheet-body .illustration-loading {
  text-align: center;
  padding: 16px;
  color: var(--ink-fade);
  font-size: 14px;
  margin-bottom: 16px;
  background: var(--tag-bg);
  border-radius: 8px;
}
  color: #b3542e;
  font-weight: 700;
}
#sheet-body h4 { margin: 0.6em 0 0.3em; font-size: 15px; }
#sheet-body code {
  font-family: var(--sans);
  background: var(--tag-bg);
  border-radius: 4px;
  padding: 0 4px;
}
#sheet-body .error {
  color: #a04030;
  font-family: var(--sans);
  font-size: 14px;
}

/* 追问对话：问题右对齐气泡，回答沿用分析区排版 */
#sheet-body .ask-q {
  margin: 14px 0 10px auto;
  max-width: 85%;
  width: fit-content;
  background: var(--bubble-right);
  border-radius: 14px 14px 4px 14px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 14.5px;
}
#sheet-body .ask-q.structure-label {
  background: var(--accent-wash);
  border-radius: 8px;
  margin: 16px 0 8px 0;
  max-width: 100%;
  padding: 10px 14px;
  font-weight: 500;
}
#sheet-body .structure-analysis {
  background: var(--tag-bg);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
#sheet-body .analysis + .ask-q,
#sheet-body .ask-q + .analysis { border: none; }

#sheet-ask {
  flex: none;
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
#ask-input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--tag-bg);
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  outline: none;
}
#ask-input::placeholder { color: var(--ink-stone); }
#structure-analyze {
  flex: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--tag-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
#structure-analyze:disabled { opacity: 0.4; }
#ask-send {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#ask-send:disabled { opacity: 0.4; }

/* 流式骨架（已弃用，保留给旧代码兼容） */
.skeleton {
  height: 14px;
  border-radius: 4px;
  margin: 10px 0;
  background: linear-gradient(90deg, var(--tag-bg) 25%, #e9e6df 45%, var(--tag-bg) 65%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
.skeleton:nth-child(2) { width: 82%; }
.skeleton:nth-child(3) { width: 60%; }
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ThinkingOrb Canvas Loading */
.thinking-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}
.thinking-loader span {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  font-family: var(--sans);
}
.thinking-loader canvas {
  display: block;
}
#sheet-body .thinking-loader {
  padding: 30px 0;
}
.analysis .thinking-loader {
  padding: 15px 0;
}

/* ---------- 回溯卡（气泡 ↺：收藏语境 + 书架其他出现；骨架与词卡共用上方 #sheet 族） ---------- */
#trace-phonetic {
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 14px;
}
.tb-section {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-stone);
  margin: 14px 0 8px;
}
.tb-section:first-child { margin-top: 2px; }
.tb-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--accent-wash);
}
.tb-row:active { background: var(--tag-bg); }
.tb-source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-stone);
  margin: 0;
}
.tb-badge {
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 4px;
  padding: 1px 6px;
}
.tb-sent {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.65;
  /* 窄屏：最多两行截断（卡片高度受限），点击行可展开 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tb-sent:hover {
  background: var(--tag-bg);
}
.tb-sent.expanded {
  -webkit-line-clamp: unset;
  display: block;
}
/* 句中目标词：金色高亮（与收藏星/驻留高亮同色系） */
.tb-hl {
  background: rgba(201, 162, 39, 0.24);

  border-radius: 3px;
  padding: 0 1px;
}
.tb-empty {
  color: var(--ink-stone);
  font-family: var(--sans);
  font-size: 14px;
  margin: 0 0 6px;
}

/* 收藏语境卡片容器 */
.tb-context-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 24px;
}

.tb-context-card .tb-row {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.tb-context-card .tb-row:hover {
  background: transparent;
}

/* 回溯卡中的分析内容 */
.tb-analysis-toggle {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin: 12px 0 0;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.tb-analysis-toggle:hover {
  background: var(--accent);
  color: white;
}

.tb-analysis-toggle:active {
  transform: scale(0.98);
}

.tb-analysis {
  margin: 12px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
  max-height: 3000px;
  opacity: 1;
}

.tb-analysis.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: none;
}

.tb-illustration-part {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 渐进式展开按钮 */
.tb-section-toggle {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: var(--tag-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.tb-section-toggle:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}

.tb-section-toggle:active {
  transform: scale(0.98);
}

/* 渐进式展开的内容 */
.tb-section-content {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  max-height: 1000px;
  opacity: 1;
  padding: 12px 0 0;
}

.tb-section-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
}

.tb-section-content .tb-analysis-content {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.tb-illustration {
  width: 100%;
  max-width: 280px;
  display: block;
  margin: 0 auto 16px;
  border-radius: 6px;
}

.tb-analysis-content {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.tb-analysis-content h2,
.tb-analysis-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 8px;
  color: var(--accent);
}

.tb-analysis-content h2:first-child {
  margin-top: 0;
}

.tb-analysis-content p {
  margin: 8px 0;
}

.tb-analysis-content strong {
  font-weight: 600;
  color: var(--ink);
}

.tb-analysis-content .ipa-anchor {
  font-size: 1.15em;
  color: var(--accent);
}

.tb-analysis-content code {
  font-family: 'SF Mono', 'Consolas', monospace;
  background: var(--tag-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.95em;
}

.tb-analysis-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.tb-analysis-content li {
  margin: 4px 0;
}


/* ── 词级高亮（视频播放时的逐词卡拉OK效果，2026-07-24） ── */
/* 短语级高亮：渲染结构匹配数据结构，短语 = 容器元素 */
.phrase {
  display: inline;
  /* 跨行时每行各自渲染圆角和背景（而非连成一个长条） */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.phrase-active {
  background: rgba(255, 215, 0, 0.35);
  border-radius: 4px;
  padding: 2px 4px;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15);
  transition: background 0.15s ease-out;
}

/* 剧场字幕 theater group 容器（无背景色，只保留当前词高亮） */
#theater-subtitle .sub-group {
  padding: 8px 12px;
  margin: 4px 0;
}

/* ── 说话人 / 意思群边界（2026-07-29 渐进人工标注，存区间不存缝） ── */
/* 视觉切分、逻辑不切：<span class="brk"> 是零内容元素，靠 ::before 撑出块级换行。
   段落 DOM 结构不变（仍是一个 .para/一个 <p>），所以阅读进度的 blockIndex、段落音频的
   para-N.mp3、origclip 的 .para 对齐缓存、.ts 跳转四者全部零改动。
   渐进呈现：只有标过的区间有变化，未标注处完全保持原样。 */
span.brk {
  display: block;
  height: 0;
}
span.brk::before {
  content: '';
  display: block;
  margin-top: 15px;
}
/* 区间起点画一条短线；终点只换行不画线（一段插话不被两条线夹住） */
span.brk[data-edge='open']::before {
  border-top: 1px solid var(--divider);
  width: 36px;
}

/* 剧场字幕里的区间：.phrase 本身就是元素，加类名即换行 */
#theater-subtitle .phrase--brk {
  display: block !important;  /* 强制覆盖 .phrase { display: inline } */
  margin-top: 14px;
}
#theater-subtitle .phrase--brk::before {
  content: '';
  display: block;
  height: 0;
}

/* 选区操作条里的标注按钮：已标注态点亮（同一按钮 = 设置/撤销开关，不藏第二处入口） */
#selchip #chip-break.marked {
  background: var(--accent-wash);
}

/* ========== 响应式：宽屏2栏布局（≥1024px，iPad横屏/Mac） ========== */
@media (min-width: 1024px) {
  /* 回溯卡：从底部卡片变为右侧栏 */
  #trace-sheet {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    max-width: 480px;
    max-height: none;
    border-radius: 0;
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
    transform: translateX(100%); /* 初始在屏幕右侧外 */
  }
  #trace-sheet.open {
    transform: translateX(0); /* 滑入 */
  }

  /* 原文区域为右侧卡片让路 */
  body.trace-open #app {
    margin-right: 40vw;
    max-margin-right: 480px;
    transition: margin-right 0.3s ease;
  }

  /* 宽屏：句子完全展开，无需点击（右侧栏高度充足） */
  #trace-sheet .tb-sent {
    -webkit-line-clamp: unset;
    display: block;
    cursor: default; /* 不再可点击展开 */
  }
  #trace-sheet .tb-sent:hover {
    background: transparent; /* 去掉悬停效果 */
  }

  /* 遮罩保留，压暗左侧原文区域（焦点引导到右侧卡片） */
  #trace-backdrop {
    /* 保持全屏遮罩，与窄屏行为一致 */
  }
}

/* ========== 动态双栏：阅读模式 ↔ 双栏模式 ==========
   默认单栏阅读（一切照旧）；body.dual-pane 时进入双栏：
   - body 变 flex：#app 正文在左、#aside 展示区在右——流内布局，随文档缩放/滚动，
     fixed 锚布局视口那套捏合问题在结构上不存在（CHANGELOG 2026-07-19 晚五）
   - 词卡/回溯卡迁入 #aside 变块级常驻卡片；视频 dock 迁入 #aside 顶部
   宽屏判定用 JS 维护的 body.wide（布局视口 clientWidth ≥1024）——不用 @media：
   Safari 捏合缩放是视觉视口缩放，@media (min-width) 会按视觉视口重评而失效
   （WebKit 口径，同 innerWidth 报视觉宽），双栏必须脱离媒体查询才能捏合下成立。
   触发/退出由 main.js 双栏状态机管理：展示内容激活 → 双栏；全部清空 → 回单栏 */
#aside {
  display: none; /* 默认隐藏：单栏阅读模式 */
  flex: none;
  width: 480px; /* 固定宽：vw 在 Safari 捏合下口径不稳（同 innerWidth），不赌 */
  flex-direction: column;
  background: var(--card-bg);
  border-left: 1px solid var(--line);
  padding: calc(12px + env(safe-area-inset-top)) 18px 24px;
  min-height: 100vh;
  box-sizing: border-box;
}
body.wide.dual-pane {
  display: flex;
  align-items: stretch;
}
body.wide.dual-pane #app {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
}
/* 正文阅读区保持 720 舒适行宽，在左栏内居中（nav 顶栏仍横跨全宽） */
body.wide.dual-pane #view-article > header,
body.wide.dual-pane #view-article > #reading-container {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
body.wide.dual-pane #aside {
  display: flex;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  min-height: 0; /* 覆盖 base 的 min-height:100vh——固定视口高，内容超了内部滚 */
  overflow: hidden;
  z-index: 45; /* 剧场背景(z38)/字幕(z39)是 fixed 全屏，卡片在 #aside 内是 static 无层叠上下文——
                  #aside 提层，词卡/回溯卡在剧场上仍亮（查词优先） */
}
#aside-video {
  flex: none;
  margin-bottom: 14px;
  display: none; /* 剧场模式不需要 aside 视频占位 */
}
#aside-cards {
  flex: 1;
  min-height: 0;
  overflow-y: auto; /* 视频+卡片超一屏时整栏内部滚（sticky 钉住，不会滚出视口） */
  display: flex;
  flex-direction: column;
}
/* ---- 卡片迁入 #aside：块级常驻，不再 fixed/悬浮 ----
   选择器限定 #aside 内：双栏时若卡片还没迁入（关闭态/切换间隙），
   它仍按原 fixed 形态待在 body 下（关闭态 translate 出屏，无碍） */
#aside #sheet,
#aside #trace-sheet {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(43, 41, 38, 0.08);
  padding: 6px 14px 14px;
  transform: none; /* 迁入即见，无位移/滑入 */
  transition: none;
  flex: 1;
  min-height: 0;
}
/* 卡片在右栏内时内容区填满并内部滚动（底部卡片靠 max-height，双栏靠 flex） */
#aside #sheet-body,
#aside #trace-body {
  flex: 1;
  min-height: 0;
}
/* 双栏下卡片有固定家：图钉不再需要；handle 作为鼠标关闭把手保留并加大（已绑定关闭） */
body.wide.dual-pane #sheet-pin {
  display: none;
}
#aside #sheet-handle,
#aside #trace-handle {
  display: block;
  width: 56px;
  height: 6px;
  margin: 8px auto 10px;
  cursor: pointer;
  background: var(--line);
}
/* 双栏下卡片有固定家：遮罩无意义，隐藏（事件时序无关，纯 CSS 保险） */
body.wide.dual-pane #sheet-backdrop,
body.wide.dual-pane #trace-backdrop {
  display: none;
}

/* ========== 生词本语境面板 ========== */
#context-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 38, 30, 0.4);
  z-index: 49;
  backdrop-filter: blur(3px);
}

#context-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 85vw);
  background: var(--card-bg);
  border-left: 1.5px solid var(--line);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

#context-panel:not([hidden]) {
  transform: translateX(0);
}

#context-panel-handle {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  width: 36px;
  margin: 12px auto 8px;
  cursor: grab;
}

#context-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

#context-panel-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

#context-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#context-panel-close:hover {
  background: var(--tag-bg);
  color: var(--ink);
}

#context-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  -webkit-overflow-scrolling: touch;
}

#context-panel-body .context-paragraph {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 16px;
}

#context-panel-body .context-paragraph:last-child {
  margin-bottom: 0;
}

/* 高亮目标词 */
#context-panel-body .context-target {
  background: linear-gradient(120deg, rgba(163, 53, 42, 0.15) 0%, rgba(163, 53, 42, 0.08) 100%);
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--accent);
}

/* 无原文提示 */
#context-panel-body .context-hint {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  font-style: italic;
}

/* 媒体控制按钮 */
.context-media-controls {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.context-media-btn {
  flex: 1;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--bg-light);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.context-media-btn:hover {
  background: var(--tag-bg);
  border-color: var(--accent);
}

.context-media-btn:active {
  transform: scale(0.98);
}

#context-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  flex: none;
  background: var(--bg);
}

#context-panel-goto {
  width: 100%;
  height: 48px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#context-panel-goto:hover {
  background: #8d2d24;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163, 53, 42, 0.3);
}

#context-panel-goto:active {
  transform: translateY(0);
}