/* ============================================================
   划词词典 · 组件样式层
   主题一致性：所有颜色引用站点 theme.css 的设计令牌（--paper /
   --ink / --ink-soft / --line / --accent 等），与全站简白风联动。
   ============================================================ */

/* ---------- 划词弹窗 ---------- */
.dict-popup {
  position: absolute;
  z-index: 1000;
  width: min(340px, calc(100vw - 24px));
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--shadow-2, 0 10px 34px rgba(31,35,41,.16));
  font-family: var(--font-ui, sans-serif);
  color: var(--ink);
  overflow: hidden;
  transition: opacity .12s ease, transform .12s ease;
}
.dict-popup.dict-in { animation: dict-pop .18s cubic-bezier(.2, .9, .3, 1.15); }
.dict-popup.dict-closing { opacity: 0; transform: translateY(6px) scale(.98); }
@keyframes dict-pop {
  from { opacity: 0; transform: translateY(5px) scale(.985); }
}

.dict-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 8px;
}
.dict-word {
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  font-family: Georgia, "Songti SC", serif;
  flex: 1 1 auto;
  word-break: break-all;
}
.dict-star {
  flex: none;
  border: none; background: transparent; cursor: pointer;
  font-size: 17px; line-height: 1;
  color: var(--accent);
  padding: 2px 4px; border-radius: 6px;
}
.dict-star:hover { background: rgba(52,120,246,.1); }
.dict-star.on { color: #f5a623; }

.dict-phon {
  padding: 0 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: .02em;
}

.dict-body {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  padding: 8px 14px 12px;
  font-size: 13.5px;
  line-height: 1.7;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.dict-body .dict-sec { margin: 6px 0; }
.dict-body .dict-sec-label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .08em;
  margin: 10px 0 2px;
}
.dict-body .dict-pos { color: var(--accent); font-style: italic; }
.dict-body .dict-def { display: block; }
.dict-body .dict-empty { color: var(--ink-soft); }
.dict-body a { color: var(--accent); }

.dict-err {
  padding: 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}
.dict-err b { color: var(--ink); font-family: Georgia, serif; }

.dict-loading {
  padding: 16px 14px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  animation: dict-blink 1.1s ease infinite;
}
@keyframes dict-blink { 50% { opacity: .45; } }

/* 生词本入口（弹窗底部） */
.dict-foot {
  border-top: 1px solid var(--line);
  padding: 6px 14px 8px;
  font-size: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.dict-foot a { color: var(--accent); text-decoration: none; }
.dict-foot .dict-src { color: var(--ink-soft); }

/* ---------- 阅读器内嵌时的主题联动 ----------
   V12：弹层浮于阅读区之上 → 跟随阅读器主题（body[data-rtheme]）而非站点深浅色。
   在弹层作用域内重映射站点令牌，内部组件无需各自适配。保留旧选择器兼容。 */
.dict-popup { --dp-bg: var(--surface, #fff); --dp-line: var(--line); }
body[data-rtheme="original"] .dict-popup,
body[data-rtheme="original"] .dict-sheet {
  --surface: #ffffff; --ink: #1f2329; --ink-soft: #8a9099;
  --line: #e5e6eb; --line-strong: #d3d7de; --paper-dark: #f7f8fa; --accent: #3478f6;
}
body[data-rtheme="paper"] .dict-popup,
body[data-rtheme="paper"] .dict-sheet {
  --surface: #f2f3f4; --ink: #1f2329; --ink-soft: #7e848d;
  --line: #e0e2e5; --line-strong: #ccd0d5; --paper-dark: #e8eaed; --accent: #3478f6;
}
body[data-rtheme="focus"] .dict-popup,
body[data-rtheme="focus"] .dict-sheet {
  --surface: #fbf6e9; --ink: #3c3a2f; --ink-soft: #8d8871;
  --line: #e5dfcd; --line-strong: #d5cdb2; --paper-dark: #f3ecd9; --accent: #3478f6;
}
body[data-rtheme="calm"] .dict-popup,
body[data-rtheme="calm"] .dict-sheet {
  --surface: #e8ddc3; --ink: #453f2f; --ink-soft: #837a5f;
  --line: #d8cba9; --line-strong: #c6b78e; --paper-dark: #dfd3b4; --accent: #3478f6;
}
body[data-rtheme="retro"] .dict-popup,
body[data-rtheme="retro"] .dict-sheet {
  --surface: #f5efdc; --ink: #3a2f1f; --ink-soft: #96876b;
  --line: #e2d8bf; --line-strong: #d1c4a2; --paper-dark: #efe6cd; --accent: #3478f6;
}
#reader.theme-sepia .dict-popup,
body[data-rtheme="retro"] .dict-popup {
  background: #f5efdc; border-color: rgba(58,47,31,.18);
}
#reader.theme-night .dict-popup,
body[data-rtheme="quiet"] .dict-popup,
body[data-rtheme="quiet"] .dict-sheet {
  --surface: #3a3a3a; --ink: #eceef0; --ink-soft: #a8acb2;
  --line: #565656; --line-strong: #6a6a6a; --paper-dark: #464646; --accent: #6aa1ff;
  background: #3a3a3a; border-color: #565656;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
#reader.theme-night .dict-star.on { color: #f5a623; }

/* ---------- V12 浮层组件：发音行 / 口音切换 / 生词按钮 / 更多 ---------- */
.dict-pos {
  font-size: 12.5px; font-style: italic;
  color: var(--ink-soft);
  font-family: Georgia, serif;
  flex: none;
}
.dict-more {
  flex: none; display: inline-flex; align-items: center; gap: 1px;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-soft); font-size: 12.5px; font-family: var(--font-ui);
  padding: 3px 6px; border-radius: 6px;
}
.dict-more svg.lucide { width: 13px; height: 13px; }
.dict-more:hover { color: var(--accent); background: rgba(52,120,246,.08); }

.dict-pronrow {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px 8px;
  font-size: 13px;
}
.dict-phon-label { color: var(--ink-soft); flex: none; }
.dict-phon { color: var(--ink-soft); letter-spacing: .02em; font-family: Georgia, serif; }
.dict-phon-none { display: none; }
.dict-speak {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: none; background: transparent; cursor: pointer;
  color: var(--accent); border-radius: 50%;
  transition: background .14s ease;
}
.dict-speak svg.lucide { width: 16px; height: 16px; }
.dict-speak:hover { background: rgba(52,120,246,.1); }
.dict-speak.sm { width: 24px; height: 24px; }
.dict-speak.sm svg.lucide { width: 14px; height: 14px; }

.dict-accents {
  margin-left: auto; display: inline-flex;
  border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
}
.dict-accents button {
  border: none; background: transparent; cursor: pointer;
  font-size: 11.5px; font-family: var(--font-ui);
  color: var(--ink-soft); padding: 3px 9px;
  transition: all .14s ease;
}
.dict-accents button + button { border-left: 1px solid var(--line); }
.dict-accents button.on { background: var(--ink); color: var(--on-ink); font-weight: 600; }

.dict-defline {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 2px 0 4px;
}
.dict-defline .dict-def { flex: 1; }
.dict-zh-toggle {
  border: none; background: transparent; cursor: pointer;
  color: var(--accent); font-size: 12.5px; font-family: var(--font-ui);
  padding: 2px 0; margin-top: 2px;
}
.dict-zh-toggle:hover { text-decoration: underline; }

.dict-savebar {
  border-top: 1px solid var(--line);
  padding: 8px 14px 10px;
  display: flex; justify-content: center;
}
.dict-savebtn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d9a05b; color: #b26f2e;
  background: rgba(217,160,91,.08);
  font-size: 13px; font-family: var(--font-ui);
  padding: 6px 22px; border-radius: 999px; cursor: pointer;
  transition: all .14s ease;
}
.dict-savebtn svg.lucide { width: 14px; height: 14px; }
.dict-savebtn:hover { background: rgba(217,160,91,.16); }
.dict-savebtn.saved {
  border-color: var(--line-strong); color: var(--ink-soft);
  background: var(--paper-dark);
}
#reader.theme-night .dict-savebtn,
body[data-rtheme="quiet"] .dict-savebtn { color: #e2b077; }
#reader.theme-night .dict-savebtn.saved,
body[data-rtheme="quiet"] .dict-savebtn.saved { color: #9aa1ab; }

/* 划词高亮拾色器（阅读器注入到浮层头部尾部） */
.hl-picker { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; }
.hl-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(31,35,41,.25); cursor: pointer; padding: 0;
  transition: transform .12s ease;
}
.hl-dot:hover { transform: scale(1.18); }
.hl-dot-y { background: #f7e7a1; }
.hl-dot-g { background: #cde8cf; }
.hl-dot-b { background: #cfe0f7; }

/* ---------- V12 词典详情面板（底部弹层，移动端全宽 / 桌面居中卡） ---------- */
.dict-sheet-backdrop {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(31,35,41,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.dict-sheet-backdrop.show { opacity: 1; pointer-events: auto; }
.dict-sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 1100;
  transform: translate(-50%, 105%);
  width: min(560px, 100vw);
  max-height: min(84vh, 740px);
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-2, 0 12px 40px rgba(31,35,41,.16));
  font-family: var(--font-ui, sans-serif); color: var(--ink);
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}
.dict-sheet.open { transform: translate(-50%, 0); }
@media (min-width: 640px) {
  .dict-sheet { bottom: 18px; border-bottom: 1px solid var(--line); border-radius: 16px; }
}
.ds-grip { flex: none; padding: 9px 0 3px; cursor: grab; touch-action: none; }
.ds-grip::before {
  content: ""; display: block; width: 40px; height: 4px;
  border-radius: 999px; background: var(--line-strong, #d3d7de); margin: 0 auto;
}
.ds-body { flex: 1; overflow-y: auto; padding: 2px 18px 14px; }
.ds-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 2px 0 8px; border-bottom: 1px solid var(--line);
}
.ds-word {
  font-size: 24px; font-weight: 700; color: var(--ink);
  font-family: Georgia, "Songti SC", serif; word-break: break-all;
}
.ds-zh-toggle {
  margin-left: auto; flex: none;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  color: var(--ink-soft); font-size: 12px; font-family: var(--font-ui);
  padding: 3px 10px; border-radius: 999px;
}
.ds-zh-toggle:hover { color: var(--accent); border-color: var(--accent); }
.ds-head .dict-pronrow, .dict-sheet .dict-pronrow { padding: 10px 0 4px; }
.ds-forms {
  font-size: 12.5px; color: var(--ink-soft);
  padding: 2px 0 8px; line-height: 1.6;
}
.ds-sec { margin: 12px 0 4px; }
.ds-sec-label {
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: .08em; margin-bottom: 6px;
}
.ds-context {
  background: var(--paper-dark, #f7f8fa);
  border-radius: 10px; padding: 10px 12px;
}
.ds-context-text { font-size: 13.5px; line-height: 1.7; margin-bottom: 4px; }
.ds-defline {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 0; border-bottom: 1px dashed var(--line);
  font-size: 13.5px; line-height: 1.7;
}
.ds-defline:last-child { border-bottom: none; }
.ds-defline .dict-def { flex: 1; }
.ds-foot {
  flex: none; border-top: 1px solid var(--line);
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}
.dict-sheet .dict-accents button.on { background: var(--ink); color: var(--on-ink); }

/* 详情面板主题联动（站点暗色走变量即可；阅读器静谧主题显式覆盖） */
body[data-rtheme="quiet"] .dict-sheet {
  background: #3a3a3a; border-color: #565656; color: #d9dbde;
}
body[data-rtheme="quiet"] .dict-sheet .ds-head { border-bottom-color: #565656; }
body[data-rtheme="quiet"] .dict-sheet .ds-word { color: #eceef0; }
body[data-rtheme="quiet"] .dict-sheet .ds-context { background: #464646; }
body[data-rtheme="quiet"] .dict-sheet .ds-defline { border-bottom-color: #4d4d4d; }
body[data-rtheme="quiet"] .dict-sheet .ds-foot { border-top-color: #565656; }
body[data-rtheme="quiet"] .dict-sheet .dict-accents { border-color: #565656; }
body[data-rtheme="quiet"] .dict-sheet .dict-accents + .dict-accents button { border-left-color: #565656; }
body[data-rtheme="quiet"] .dict-sheet .ds-grip::before { background: #5c5c5c; }

/* 全局轻提示（如存储已满） */
.dict-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 32px; z-index: 1200;
  max-width: min(420px, calc(100vw - 32px));
  background: var(--ink, #1f2329); color: var(--on-ink, #fff);
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-family: var(--font-ui, sans-serif);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: opacity .4s ease;
}
.dict-toast.dict-toast-out { opacity: 0; }