/* Nox · 一起看书（共读小说播放器）
 * 色彩全部由 --th-bg / --th-ink / --accent 派生，深浅主题与壁纸自动跟随。 */
#reader-board{position:fixed;inset:0;z-index:94;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:var(--th-bg);color:var(--th-ink);isolation:isolate}
#reader-root{
  --rd-ink:var(--th-ink);
  --rd-soft:color-mix(in srgb,transparent 34%,var(--th-ink));
  --rd-faint:color-mix(in srgb,transparent 62%,var(--th-ink));
  --rd-line:color-mix(in srgb,transparent 80%,var(--th-ink));
  --rd-panel:color-mix(in srgb,var(--th-bg) 78%,transparent);
  --rd-panel-strong:color-mix(in srgb,var(--th-bg) 90%,rgb(var(--accent-rgb)) 10%);
  --rd-paper:color-mix(in srgb,var(--th-bg) 92%,rgb(var(--accent-rgb)) 3%);
  --rd-accent:var(--accent);
  position:relative;width:100%;height:100%;opacity:0;transform:scale(1.015);
  transition:opacity .26s ease,transform .4s cubic-bezier(.2,.75,.2,1);
  background:var(--rd-paper);
}
#reader-root.visible{opacity:1;transform:scale(1)}
body[data-theme="light"] #reader-root{
  --rd-soft:color-mix(in srgb,transparent 26%,var(--th-ink));
  --rd-faint:color-mix(in srgb,transparent 52%,var(--th-ink));
  --rd-line:color-mix(in srgb,transparent 74%,var(--th-ink));
  --rd-panel:color-mix(in srgb,var(--th-bg) 70%,transparent);
  --rd-paper:color-mix(in srgb,var(--th-bg) 94%,rgb(var(--accent-rgb)) 4%);
}
.rd-backdrop{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 82% -4%,rgba(var(--accent-rgb),.14),transparent 42%),
  radial-gradient(circle at 8% 104%,rgba(var(--accent-rgb),.10),transparent 46%)}

/* ───────── 书架 ───────── */
.rd-shelf{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr);
  width:min(100%,680px);margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 18px max(env(safe-area-inset-bottom,0px),12px)}
.rd-shelf-head{min-height:58px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px}
.rd-shelf-heading{text-align:center;display:flex;flex-direction:column;align-items:center}
.rd-shelf-heading small{font:600 9px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.26em;color:var(--rd-faint)}
.rd-shelf-heading strong{margin-top:3px;font:600 18px/1.2 var(--font-chat)}
.rd-icon-btn{min-width:44px;min-height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--rd-ink);border:1px solid var(--rd-line);
  background:color-mix(in srgb,var(--rd-panel) 88%,transparent);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);touch-action:manipulation}
.rd-import-btn{font-size:19px;color:var(--rd-accent)}
.rd-shelf-body{overflow-y:auto;padding:14px 2px calc(env(safe-area-inset-bottom,0px) + 30px);display:flex;flex-direction:column;gap:12px}
.rd-empty{margin-top:16vh;text-align:center;color:var(--rd-faint);font:400 14px/2 var(--font-chat)}
.rd-empty small{font-size:12px;color:var(--rd-faint)}
.rd-empty-icon{display:block;font-size:26px;margin-bottom:10px;color:var(--rd-accent);opacity:.75}
.rd-book{position:relative;display:flex;align-items:center;gap:14px;text-align:left;
  padding:13px 40px 13px 13px;border-radius:18px;border:1px solid var(--rd-line);
  background:color-mix(in srgb,var(--rd-panel) 92%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,transparent 82%,var(--th-bg));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.rd-book:active{transform:scale(.985)}
.rd-cover{position:relative;flex:0 0 52px;height:70px;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(var(--accent-rgb),.28),color-mix(in srgb,var(--th-bg) 70%,rgb(var(--accent-rgb)) 12%));
  border:1px solid color-mix(in srgb,transparent 66%,rgb(var(--accent-rgb)));
  box-shadow:inset 2px 0 0 rgba(var(--accent-rgb),.5)}
.rd-cover b{font:600 22px/1 var(--font-chat);color:var(--rd-ink);text-shadow:0 1px 8px color-mix(in srgb,transparent 50%,var(--th-bg))}
.rd-cover i{position:absolute;left:0;bottom:0;width:3px;background:var(--rd-accent);opacity:.9;border-radius:0 2px 2px 0;transition:height .4s ease}
.rd-book-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.rd-book-info strong{font:600 15.5px/1.35 var(--font-chat);color:var(--rd-ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rd-book-info em{font:400 11.5px/1.2 var(--font-chat);font-style:normal;color:var(--rd-soft)}
.rd-book-info small{font-size:11px;color:var(--rd-faint)}
.rd-book-info .rd-ann-count{color:color-mix(in srgb,var(--rd-accent) 80%,var(--th-ink))}
.rd-book-del{position:absolute;right:6px;top:6px;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;font-size:15px;color:var(--rd-faint)}
.rd-book-del:active{color:var(--danger)}

/* ───────── 阅读页 ───────── */
.rd-read{position:absolute;inset:0;z-index:3;background:var(--rd-paper)}
.rd-read.hidden{display:none}
.rd-chrome{position:absolute;left:0;right:0;z-index:6;display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb,var(--rd-paper) 82%,transparent);
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  transition:transform .3s cubic-bezier(.2,.75,.2,1),opacity .26s ease}
.rd-top{top:0;padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 8px;border-bottom:1px solid var(--rd-line)}
.rd-top.rd-hide{transform:translateY(-110%);opacity:0;pointer-events:none}
.rd-now{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.rd-now strong{font:600 14px/1.3 var(--font-chat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-now span{font-size:11px;color:var(--rd-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-pct{flex:0 0 auto;font:500 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.04em;color:var(--rd-faint);font-variant-numeric:tabular-nums}
.rd-bottom{bottom:0;justify-content:space-around;
  padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 10px);border-top:1px solid var(--rd-line)}
.rd-bottom.rd-hide{transform:translateY(110%);opacity:0;pointer-events:none}
.rd-bottom button{min-width:52px;min-height:42px;border-radius:14px;font-size:21px;color:var(--rd-soft);
  display:inline-flex;align-items:center;justify-content:center;gap:3px;touch-action:manipulation}
.rd-bottom button:active{color:var(--rd-accent)}
.rd-bottom .rd-aa{font:600 15px/1 var(--font-chat)}
.rd-bottom [data-rd-toc-btn] i{display:block;width:16px;height:1.6px;border-radius:2px;background:currentColor;margin:2px 0}
.rd-bottom [data-rd-toc-btn]{flex-direction:column}

.rd-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-anchor:none}
.rd-content{--rd-fs:18px;--rd-lh:1.9;
  max-width:620px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 72px) 24px 30px;
  font-size:var(--rd-fs);line-height:var(--rd-lh);color:var(--text,var(--th-ink))}
.rd-content[data-font="wenkai"]{font-family:'LXGW WenKai','Noto Serif SC',serif}
.rd-content[data-font="serif"]{font-family:'Noto Serif SC','Songti SC',Georgia,serif}
.rd-content[data-font="system"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.rd-ch-heading{margin:0 0 26px;font:600 1.28em/1.5 inherit;letter-spacing:.02em;color:var(--rd-ink)}
.rd-ch-heading::after{content:'';display:block;width:34px;height:2px;margin-top:12px;border-radius:2px;
  background:linear-gradient(90deg,var(--rd-accent),transparent)}
.rd-content p{margin:0 0 1em;text-align:justify;letter-spacing:.01em;word-break:break-word}

/* ── 划线（R 粉 / K 墨蓝，主题变量派生） ── */
.rd-content{-webkit-user-select:text;user-select:text;-webkit-touch-callout:none}
#reader-root{--rd-hl-r:rgba(var(--accent-rgb),.85);--rd-hl-k:color-mix(in srgb,var(--tool,#818cf8) 85%,transparent)}
.rd-hl{background:transparent;color:inherit;border-radius:0;padding-bottom:1px;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
  -webkit-text-decoration-line:underline;-webkit-text-decoration-thickness:2px}
.rd-hl-r{text-decoration-color:var(--rd-hl-r);-webkit-text-decoration-color:var(--rd-hl-r)}
.rd-hl-k{text-decoration-color:var(--rd-hl-k);-webkit-text-decoration-color:var(--rd-hl-k)}
.rd-hl-badge{display:inline-grid;place-items:center;vertical-align:super;
  width:15px;height:15px;margin:0 1px 0 2px;border-radius:50%;
  font:600 8.5px/1 -apple-system,sans-serif;font-style:normal;color:var(--rd-ink);
  background-color:var(--rd-panel-strong);background-size:cover;background-position:center;
  border:1px solid var(--rd-line);cursor:pointer}
.rd-b-r{border-color:color-mix(in srgb,var(--rd-hl-r) 70%,transparent);color:var(--rd-accent)}
.rd-b-k{border-color:color-mix(in srgb,var(--rd-hl-k) 80%,transparent)}

/* 选中文字操作条 —— 固定停在屏幕底部中央，躲开 iOS 系统选字菜单 */
.rd-selbar{position:fixed;z-index:99;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  display:flex;gap:2px;padding:5px;border-radius:18px;
  background:color-mix(in srgb,var(--rd-paper) 96%,transparent);
  border:1px solid var(--rd-line);
  box-shadow:0 12px 36px color-mix(in srgb,transparent 55%,var(--th-bg));
  backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);
  animation:rdSelbarUp .22s cubic-bezier(.2,.75,.2,1)}
@keyframes rdSelbarUp{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.rd-selbar.hidden{display:none}
.rd-selbar button{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 20px;
  border-radius:14px;font:500 14px/1 var(--font-chat);color:var(--rd-ink)}
.rd-selbar button:active{background:color-mix(in srgb,transparent 88%,rgb(var(--accent-rgb)))}
.rd-selbar button b{width:15px;height:0;border-bottom:2.5px solid var(--rd-hl-r);border-radius:2px}

/* 批注展开卡（点头像/划线弹出） */
.rd-pop{position:fixed;z-index:99;width:min(78vw,300px);padding:12px 14px;border-radius:16px;
  background:color-mix(in srgb,var(--rd-paper) 97%,transparent);
  border:1px solid var(--rd-line);
  box-shadow:0 16px 44px color-mix(in srgb,transparent 52%,var(--th-bg));
  backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%)}
.rd-pop.hidden{display:none}
.rd-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rd-pop-av{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:600 11px/1 -apple-system,sans-serif;color:var(--rd-ink);
  background-color:var(--rd-panel-strong);background-size:cover;background-position:center;
  border:1.5px solid var(--rd-line)}
.rd-pop-head strong{font:600 13px/1 var(--font-chat);color:var(--rd-ink)}
.rd-pop-head small{margin-left:auto;font-size:10px;color:var(--rd-faint)}
.rd-pop-head .rd-pop-del{font:400 11px/1 var(--font-chat);font-style:normal;color:var(--rd-faint);padding:4px 2px 4px 8px;cursor:pointer}
.rd-pop-head .rd-pop-del:active{color:var(--danger)}
.rd-pop blockquote{margin:0 0 8px;padding:7px 10px;border-left:2px solid rgba(var(--accent-rgb),.45);border-radius:6px;
  font:400 12px/1.6 var(--font-chat);color:var(--rd-faint);
  background:color-mix(in srgb,transparent 93%,rgb(var(--accent-rgb)));
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rd-pop p{margin:0;font:400 13.5px/1.7 var(--font-chat);color:var(--text,var(--th-ink))}
.rd-pop .rd-pop-hl-only{color:var(--rd-faint);font-size:12px}

/* 连续滚动加载哨兵 */
.rd-more{min-height:80px;padding:26px 0 calc(env(safe-area-inset-bottom,0px) + 96px);text-align:center;
  font:400 12px/1 var(--font-chat);color:var(--rd-faint);letter-spacing:.14em}
.rd-ch{padding-top:8px}
.rd-ch + .rd-ch{margin-top:34px;border-top:1px dashed var(--rd-line);padding-top:34px}

/* 目录抽屉 */
.rd-toc{position:absolute;top:0;bottom:0;left:0;z-index:8;width:min(78%,320px);
  display:grid;grid-template-rows:auto minmax(0,1fr);
  padding:calc(env(safe-area-inset-top,0px) + 14px) 0 env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--rd-paper) 96%,transparent);
  border-right:1px solid var(--rd-line);
  backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);
  transform:translateX(-104%);transition:transform .32s cubic-bezier(.2,.75,.2,1)}
.rd-toc.open{transform:translateX(0)}
.rd-toc-head{display:flex;align-items:baseline;justify-content:space-between;padding:8px 18px 12px;border-bottom:1px solid var(--rd-line)}
.rd-toc-head strong{font:600 15px/1 var(--font-chat)}
.rd-toc-head span{font-size:11px;color:var(--rd-faint)}
.rd-toc-list{overflow-y:auto;padding:6px 0 24px}
.rd-toc-list button{display:block;width:100%;text-align:left;padding:11px 18px;
  font:400 13.5px/1.45 var(--font-chat);color:var(--rd-soft);
  border-left:2px solid transparent}
.rd-toc-list button span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-toc-list button.on{color:var(--rd-accent);border-left-color:var(--rd-accent);
  background:color-mix(in srgb,transparent 90%,rgb(var(--accent-rgb)))}
.rd-mask{position:absolute;inset:0;z-index:7;background:var(--overlay,rgba(0,0,0,.4))}
.rd-mask.hidden{display:none}

/* 顶栏小图标(搜索/书签) */
.rd-top-ic{flex:0 0 auto;min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;color:var(--rd-soft)}
.rd-top-ic svg{width:19px;height:19px}
.rd-top-ic:active{color:var(--rd-accent)}
.rd-top-ic.rd-bm-on{color:var(--rd-accent)}
.rd-top-ic.rd-bm-on svg{fill:rgba(var(--accent-rgb),.35)}

/* 目录/书签页签 */
.rd-toc-tabs{display:flex;gap:2px;border:1px solid var(--rd-line);border-radius:11px;padding:2px;
  background:color-mix(in srgb,var(--rd-panel) 80%,transparent)}
.rd-toc-tabs button{min-height:30px;padding:0 14px;border-radius:9px;font:500 12.5px/1 var(--font-chat);color:var(--rd-soft)}
.rd-toc-tabs button.on{color:var(--rd-accent);background:color-mix(in srgb,transparent 86%,rgb(var(--accent-rgb)))}
.rd-toc-empty{padding:36px 18px;text-align:center;font:400 13px/2 var(--font-chat);color:var(--rd-faint)}
.rd-toc-list .rd-toc-bm{float:right;font-size:11px;opacity:.8}
.rd-bm-item{position:relative;padding-right:38px!important}
.rd-bm-item small{display:block;margin-top:3px;font-size:11px;color:var(--rd-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-bm-item i{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  display:grid;place-items:center;font-style:normal;font-size:14px;color:var(--rd-faint)}
.rd-bm-item i:active{color:var(--danger)}

/* 全文搜索浮层 */
.rd-search{position:absolute;inset:0;z-index:10;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:color-mix(in srgb,var(--rd-paper) 97%,transparent);
  backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%)}
.rd-search.hidden{display:none}
.rd-search-bar{display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 10px;border-bottom:1px solid var(--rd-line)}
.rd-search-bar input{flex:1;min-height:42px;padding:0 16px;border-radius:14px;
  border:1px solid var(--rd-line);background:color-mix(in srgb,var(--rd-panel) 85%,transparent);
  font:400 15px/1 var(--font-chat);color:var(--text,var(--th-ink))}
.rd-search-bar input::placeholder{color:var(--rd-faint)}
.rd-search-bar button{min-width:40px;min-height:40px;font-size:20px;color:var(--rd-soft);border-radius:12px}
.rd-search-list{overflow-y:auto;padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 30px)}
.rd-search-list button{display:block;width:100%;text-align:left;padding:12px 18px;border-bottom:1px solid var(--rd-line)}
.rd-search-list .rd-bm-ch{display:block;font:500 12px/1.3 var(--font-chat);color:var(--rd-accent)}
.rd-search-list small{display:block;margin-top:4px;font:400 13px/1.6 var(--font-chat);color:var(--rd-soft)}
.rd-search-list small mark{background:transparent;color:var(--rd-accent);font-weight:600;
  text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.6);text-underline-offset:3px}

/* 跳转落点闪烁 */
.rd-flash{animation:rdFlash 1.5s ease}
@keyframes rdFlash{0%,60%{background:color-mix(in srgb,transparent 82%,rgb(var(--accent-rgb)));border-radius:6px}100%{background:transparent}}

/* ── K 浮屏陪读 ── */
.rd-k-bubble{position:absolute;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);z-index:11;
  width:62px;height:62px;padding:0;display:grid;place-items:center;background:transparent;border:none}
.rd-k-bubble.hidden{display:none}
/* 外圈: 有机血肉感——边缘随呼吸微微不规则地起伏,两条动画周期互质,永不重复同一形状 */
.rd-k-bubble::before{content:'';position:absolute;inset:-4px;pointer-events:none;
  border:1.5px solid color-mix(in srgb,transparent 46%,rgb(var(--accent-rgb)));
  background:radial-gradient(circle at 38% 30%,rgba(var(--accent-rgb),.14),transparent 65%);
  box-shadow:0 8px 26px color-mix(in srgb,transparent 62%,var(--th-bg)),0 0 16px rgba(var(--accent-rgb),.20);
  border-radius:51% 49% 53% 47%/48% 52% 46% 54%;
  animation:rdBlob 7.3s ease-in-out infinite,rdBreath 3.4s ease-in-out infinite}
.rd-k-bubble::after{content:'';position:absolute;inset:-11px;pointer-events:none;
  border:1px solid rgba(var(--accent-rgb),.16);
  border-radius:47% 53% 49% 51%/54% 46% 55% 45%;
  animation:rdBlob 9.1s ease-in-out infinite reverse,rdBreath 3.4s ease-in-out .35s infinite}
.rd-k-bubble span{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font:600 19px/1 var(--font-chat);color:var(--rd-ink);
  background-color:var(--rd-panel-strong);background-size:cover;background-position:center;
  border:1px solid color-mix(in srgb,transparent 62%,rgb(var(--accent-rgb)));
  animation:rdBreath 3.4s ease-in-out infinite}
@keyframes rdBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes rdBlob{
  0%,100%{border-radius:51% 49% 53% 47%/48% 52% 46% 54%;transform:rotate(0deg) scale(1)}
  25%{border-radius:46% 54% 48% 52%/55% 45% 52% 48%;transform:rotate(1.6deg) scale(1.02)}
  50%{border-radius:54% 46% 51% 49%/46% 54% 49% 51%;transform:rotate(-1.2deg) scale(.99)}
  75%{border-radius:49% 51% 46% 54%/52% 48% 55% 45%;transform:rotate(.8deg) scale(1.015)}
}
@media (prefers-reduced-motion:reduce){.rd-k-bubble::before,.rd-k-bubble::after,.rd-k-bubble span{animation:none}}

.rd-comp{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:12;
  max-height:52vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
  border-radius:22px;border:1px solid var(--rd-line);overflow:hidden;
  background:color-mix(in srgb,var(--rd-paper) 95%,transparent);
  box-shadow:0 20px 60px color-mix(in srgb,transparent 45%,var(--th-bg));
  backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%)}
.rd-comp.hidden{display:none}
.rd-comp-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--rd-line)}
.rd-comp-av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:600 13px/1 var(--font-chat);color:var(--rd-ink);
  background-color:var(--rd-panel-strong);background-size:cover;background-position:center;
  border:1.5px solid color-mix(in srgb,transparent 55%,rgb(var(--accent-rgb)))}
.rd-comp-title{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.rd-comp-title strong{font:600 13.5px/1.2 var(--font-chat)}
.rd-comp-title button{align-self:flex-start;font:400 10.5px/1.2 var(--font-chat);color:var(--rd-faint);padding:1px 0}
.rd-comp-min{min-width:36px;min-height:36px;font-size:16px;color:var(--rd-soft);border-radius:10px}
.rd-comp-msgs{overflow-y:auto;padding:12px 12px 6px;display:flex;flex-direction:column;gap:8px;min-height:110px}
.rd-comp-msg{max-width:86%;padding:8px 12px;border-radius:16px;font:400 13.5px/1.65 var(--font-chat)}
.rd-comp-msg p{margin:0;white-space:pre-wrap;word-break:break-word}
.rd-comp-msg .rd-comp-q{display:block;margin-bottom:4px;font-size:11px;font-style:normal;color:var(--rd-faint);
  border-left:2px solid rgba(var(--accent-rgb),.5);padding-left:7px}
.rd-comp-k{align-self:flex-start;border-bottom-left-radius:5px;color:var(--text,var(--th-ink));
  background:color-mix(in srgb,var(--rd-panel-strong) 92%,transparent);border:1px solid var(--rd-line)}
.rd-comp-r{align-self:flex-end;border-bottom-right-radius:5px;color:var(--text,var(--th-ink));
  background:color-mix(in srgb,transparent 84%,rgb(var(--accent-rgb)));
  border:1px solid rgba(var(--accent-rgb),.28)}
.rd-comp-typing p{display:flex;gap:4px;padding:3px 2px}
.rd-comp-typing i{width:5px;height:5px;border-radius:50%;background:var(--rd-faint);animation:rdTyping 1.2s ease-in-out infinite}
.rd-comp-typing i:nth-child(2){animation-delay:.15s}
.rd-comp-typing i:nth-child(3){animation-delay:.3s}
@keyframes rdTyping{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.rd-comp-quote{display:flex;align-items:center;gap:8px;margin:0 12px;padding:7px 10px;border-radius:10px;
  border-left:2px solid rgba(var(--accent-rgb),.55);
  background:color-mix(in srgb,transparent 92%,rgb(var(--accent-rgb)))}
.rd-comp-quote span{flex:1;font:400 11.5px/1.5 var(--font-chat);color:var(--rd-soft);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rd-comp-quote b{font-weight:400;color:var(--rd-faint);padding:2px 6px;cursor:pointer}
.rd-comp-quote.hidden{display:none}
.rd-comp-input{display:flex;align-items:flex-end;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)/3)}
.rd-comp-input textarea{flex:1;max-height:90px;min-height:38px;padding:9px 14px;border-radius:14px;resize:none;
  border:1px solid var(--rd-line);background:color-mix(in srgb,var(--rd-panel) 85%,transparent);
  font:400 14px/1.5 var(--font-chat);color:var(--text,var(--th-ink))}
.rd-comp-input textarea::placeholder{color:var(--rd-faint)}
.rd-comp-input button{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:var(--th-bg);background:var(--rd-accent)}
.rd-comp-input button svg{width:17px;height:17px}
.rd-comp-picker{position:absolute;left:10px;right:10px;top:52px;bottom:10px;z-index:3;overflow-y:auto;
  border-radius:16px;border:1px solid var(--rd-line);
  background:color-mix(in srgb,var(--rd-paper) 98%,transparent)}
.rd-comp-picker.hidden{display:none}
.rd-comp-picker button{display:block;width:100%;text-align:left;padding:11px 16px;border-bottom:1px solid var(--rd-line)}
.rd-comp-picker strong{display:block;font:500 13.5px/1.3 var(--font-chat);color:var(--rd-ink)}
.rd-comp-picker small{display:block;margin-top:2px;font-size:11px;color:var(--rd-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Aa 设置 */
.rd-prefs{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);z-index:8;
  padding:16px 18px;border-radius:20px;display:flex;flex-direction:column;gap:14px;
  background:color-mix(in srgb,var(--rd-paper) 94%,transparent);
  border:1px solid var(--rd-line);
  box-shadow:0 18px 50px color-mix(in srgb,transparent 60%,var(--th-bg));
  backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .24s ease,transform .3s cubic-bezier(.2,.75,.2,1)}
.rd-prefs.open{opacity:1;transform:translateY(0);pointer-events:auto}
.rd-prefs-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rd-prefs-row>span{font:400 13px/1 var(--font-chat);color:var(--rd-soft)}
.rd-seg{display:flex;align-items:center;gap:2px;border:1px solid var(--rd-line);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--rd-panel) 80%,transparent)}
.rd-seg button{min-width:46px;min-height:36px;font:500 13px/1 var(--font-chat);color:var(--rd-soft);padding:0 10px}
.rd-seg button:active{color:var(--rd-accent)}
.rd-seg button.on{color:var(--rd-accent);background:color-mix(in srgb,transparent 86%,rgb(var(--accent-rgb)))}
.rd-seg b{min-width:38px;text-align:center;font:500 12px/1 -apple-system,sans-serif;color:var(--rd-ink);font-variant-numeric:tabular-nums}

/* 批注编辑 */
.rd-note{position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);z-index:9;
  padding:15px 16px;border-radius:20px;display:flex;flex-direction:column;gap:10px;
  background:color-mix(in srgb,var(--rd-paper) 96%,transparent);
  border:1px solid var(--rd-line);
  box-shadow:0 18px 50px color-mix(in srgb,transparent 55%,var(--th-bg));
  backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%)}
.rd-note.hidden{display:none}
.rd-note blockquote{margin:0;padding:8px 12px;border-left:2px solid rgba(var(--accent-rgb),.45);border-radius:8px;
  font:400 12.5px/1.6 var(--font-chat);color:var(--rd-faint);
  background:color-mix(in srgb,transparent 92%,rgb(var(--accent-rgb)));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rd-note textarea{width:100%;resize:none;border:none;outline:none;padding:4px 2px;
  font:400 15px/1.7 var(--font-chat);color:var(--text,var(--th-ink));background:transparent}
.rd-note-actions{display:flex;justify-content:flex-end;gap:8px}
.rd-note-actions button{min-height:38px;padding:0 18px;border-radius:12px;font:500 13px/1 var(--font-chat);color:var(--rd-soft)}
.rd-note-actions .rd-primary{color:var(--th-bg);background:var(--rd-accent)}

@media (prefers-reduced-motion:reduce){
  #reader-root,.rd-toc,.rd-prefs,.rd-chrome{transition:none}
}
