/* 小玥定制 · 视觉微调
   1. 全局禁用斜体（她不喜欢斜体字）
   2. 统一界面字体为系统 sans（去掉混杂的 Space Mono / Playfair 展示字体，保留代码/输入等宽场景）
   3. 适当放大基础字号（iPhone 16 Pro Max 大屏）
*/

/* 1) 全局禁用斜体 */
*,
*::before,
*::after {
  font-style: normal !important;
}

/* 2) 界面文字统一为干净的系统字体 */
body,
button,
input,
select,
textarea,
label,
li,
span,
a,
p,
h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "HarmonyOS Sans SC", "Noto Sans SC", "Segoe UI", sans-serif !important;
}

/* 保留等宽字体的功能场景（时间、编号等），但去掉斜体观感 */
[class*="mono"],
code,
kbd,
pre,
time {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}

/* 3) 放大基础字号（配合应用内「装扮 → 根字号」使用，此为下限保护） */
html {
  font-size: max(1.0625rem, 1em) !important; /* 不小于 17px */
}

/* ============================================================
   v2 · 尺寸与大气感（iOS 习惯适配）
   4) 返回按钮触控区提到 44px（iOS HIG 标准）
   5) 底部 dock 放大、图标增大
   6) 主要卡片留白加大（信息密度降下来）
   ============================================================ */

/* 4) 返回按钮：可点区域和图标都放大 */
.settings-back-chip,
.chat-topbar-back,
[class*="back-chip"],
button[id*="-back"] {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.settings-back-chip i,
[class*="back-chip"] i,
button[id*="-back"] i {
  font-size: 1.25rem !important;
}

/* 5) 底部 dock：更高、按钮更大、图标更清晰 */
.dock-stack {
  height: 78px !important;
  margin-bottom: max(14px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
}
.dock-btn {
  width: 56px !important;
  height: 56px !important;
}
.dock-btn i {
  font-size: 1.35rem !important;
}
.dock-btn > img.home-app-icon {
  width: 34px !important;
  height: 34px !important;
}

/* 6) 大板块呼吸感：卡片内边距、列表行高放宽 */
.hero-card,
.app-tower,
.widget-label {
  padding-block: 14px !important;
}
.settings-pane,
.chat-list-panel,
.char-pane {
  --pad: 18px;
}
.phone .wallpaper + * {
  /* 占位：防止误伤，实际留白由上面的规则处理 */
}

/* ============================================================
   v3 · 流畅度（iOS PWA 掉帧元凶治理）
   7) 全局关闭毛玻璃 backdrop-filter —— 每次滚动/转场都要实时
      模糊重算，是界面切换不流畅的头号原因。作者自己的 iOS
      PWA 降级方案也是关掉它。关掉后毛玻璃面板退化为半透明
      底色，观感几乎不变，帧率明显改善。
   8) 点按高亮去掉，长列表滚动更跟手
   ============================================================ */

/* 7) 毛玻璃全关 */
*,
*::before,
*::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 8) 去点按高亮（不再给 img 加 content-visibility：iOS 上疑似拖累朋友圈首帧渲染） */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   v4 · 页面切换无叠化（修关毛玻璃后的"双层叠影"）
   9) 原过场问题：style.css 给 .chat-screen/.my-screen 等 8 类
      屏幕用 opacity 0.28s + transform translateY(12px) 同时过渡；
      进出页有 ~280ms 同时半透明 + Y 轴错位。本来看 backdrop-filter
      还能"模糊遮丑"，关掉毛玻璃后两层底色直接叠出来 = 叠化鬼影。
   9.1) 新页用更短淡入（80ms），旧页用更慢淡出（180ms）：
        新页 80ms 内已完全不透明覆盖上层（z-index 更高），
        旧页退场在背后淡出，看不见。
   9.2) Y 轴位移全部取消，新页直接落位，不再有"上滑+叠化"。
   ============================================================ */

.chat-list-screen,
.chat-screen,
.char-screen,
.my-screen,
.world-book-screen,
.settings-screen,
.sticker-screen,
.wardrobe-screen {
  transition: opacity 0.18s ease !important;
  transform: none !important;
}
.chat-list-screen.is-open,
.chat-screen.is-open,
.char-screen.is-open,
.my-screen.is-open,
.world-book-screen.is-open,
.settings-screen.is-open,
.sticker-screen.is-open,
.wardrobe-screen.is-open {
  transition: opacity 0.08s ease !important;
  transform: none !important;
}

/* ============================================================
   v5 · 再治叠化残留 + 顶部模糊装饰
   10) 旧页退场改为"瞬间消失"：叠化感的最后残留来自旧页
       180ms 淡出期间仍半透明。新页反正盖在它上面，旧页
       直接消失即可——进出页永不重叠，彻底无叠影。
   11) 顶部"模糊美化"是 .settings-ambient-blob（filter: blur(48px)
       的彩色光斑，正好压在顶栏文字上）——整个隐藏，顺带省性能。
   ============================================================ */

.chat-list-screen,
.chat-screen,
.char-screen,
.my-screen,
.world-book-screen,
.settings-screen,
.sticker-screen,
.wardrobe-screen {
  transition: none !important;
  transform: none !important;
}
.chat-list-screen.is-open,
.chat-screen.is-open,
.char-screen.is-open,
.my-screen.is-open,
.world-book-screen.is-open,
.settings-screen.is-open,
.sticker-screen.is-open,
.wardrobe-screen.is-open {
  transition: opacity 0.06s ease !important;
  transform: none !important;
}

.settings-ambient-blob {
  display: none !important;
}



/* ============================================================
   v6 · 全局文字层级统一（装扮/设置页为主战场）
   病根：作者把 label 类字号拍在 0.45–0.52rem（≈7.8px），
   而面板/输入框又大又宽 → 「字小到没存在感，和底下大框对比尴尬」。
   方案：建立固定阶梯 —— 辅助小字 12px、区块标题 14.5px、
   正文/描述 14.5px、大标题维持，全部用 rem 保持随根字号缩放。
   ============================================================ */

/* 1) 辅助小字：从 ~8px 提到 12px（0.72rem），字距收窄不再虚散 */
.widget-label,
.settings-api-field-k,
.settings-masthead-k,
.settings-topbar-eyebrow {
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
}

/* 2) 区块标题（01 密谈壳·CSS / 02 全局字体 旁边那行）：升级为真标题 */
.settings-sec-head-text .widget-label {
  font-size: 0.88rem !important;
  font-weight: 650 !important;
  color: var(--text-main) !important;
  letter-spacing: 0.02em !important;
}
.settings-sec-head-text .widget-label i {
  opacity: 0.55;
}
.settings-sec-idx {
  font-size: 1rem !important;
  opacity: 0.16 !important;
  padding-top: 3px !important;
}

/* 3) 面板描述、提示、槽名：正文级可读 */
.settings-masthead-desc,
.settings-ai-blurb {
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
}
.settings-ai-key-note {
  font-size: 0.72rem !important;
}
.wardrobe-toolbar-label,
.ward-preset-k {
  font-size: 0.78rem !important;
  color: var(--text-main) !important;
}

/* 4) 一键美化（00 区块）的控件样式 */
.xv-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 12px;
  padding-bottom: 18px;
}
.xv-swatch {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 14px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.xv-swatch:active {
  transform: scale(0.92);
}
.xv-swatch.is-active {
  box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--accent);
}
.xv-swatch::after {
  content: attr(data-name);
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem;
  line-height: 1;
  color: var(--text-sub);
  white-space: nowrap;
}
.xv-pack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-left: 16px;
  padding-right: 16px;
}
.xv-pack-chip {
  min-height: 36px;
  padding: 0 14px;
}

/* 6) 小玥补丁 v374 · 主题包卡片 + 异形气泡卡片 */
.xv-sub-label {
  margin: 14px 0 0;
  padding-left: 16px;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  color: var(--text-sub, #8a8a92);
}
.xv-theme-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.xv-theme-row::-webkit-scrollbar {
  display: none;
}
/* v399 · 卡片基样式已上移到 v399 段（内含预览按钮，需重设 flex 基准）。
   这里只保留缩略图与气泡的细节样式，勿再定义 .xv-theme-card 本体，
   否则会与 v399 段冲突（旧版是 <button>，新版是 div 容器）。 */
/* v402 · 卡片内预览场景：顶栏 + 消息区（含壁纸）+ 底部输入区。
   骨架用真实聊天页类名，套装 CSS 直接命中，无需点击。 */
.xv-kit-scene {
  display: flex;
  flex-direction: column;
  height: 176px;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-device, #fff);
}
.xv-theme-thumb .chat-msg-bubble {
  font-size: 0.62rem !important;
  line-height: 1.4;
  padding: 5px 9px 6px !important;
  max-width: 88% !important;
  width: fit-content;
  flex: 0 0 auto;
}
.xv-theme-name {
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text-main, #23232a);
}
.xv-theme-desc {
  padding: 0 10px;
  font-size: 0.62rem;
  color: var(--text-sub, #8a8a92);
}
.xv-bubble-cards {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.xv-bubble-cards::-webkit-scrollbar {
  display: none;
}
.xv-bubble-card {
  flex: 0 0 124px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line, #e6e6ea);
  border-radius: 14px;
  background: var(--bg-card, #fff);
}
.xv-bubble-card.is-cur {
  border-color: var(--accent, #b39b7d);
  box-shadow: 0 0 0 2px rgba(179, 155, 125, 0.25);
}
.xv-bubble-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 86px;
  padding: 8px;
  border-radius: 10px;
  background: #fbf5ec;
  overflow: hidden;
  pointer-events: none;
}
.xv-bubble-thumb--plain {
  background: #f4f2ee;
}
.xv-bubble-thumb .chat-msg-bubble {
  font-size: 0.6rem !important;
  line-height: 1.4;
  padding: 4px 8px 5px !important;
  max-width: 90% !important;
  width: fit-content;
  flex: 0 0 auto;
}
.xv-bubble-name {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-main, #23232a);
}
.xv-bubble-acts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.xv-bubble-acts .chip {
  min-height: 26px;
  padding: 0 8px;
  font-size: 0.66rem !important;
}

/* 5) 小玥补丁 v373 · 装扮页遮挡根修 + 一键美化留白/预览 */
/* 装扮页是纵向 flex + overflow 滚动容器：子元素默认 flex-shrink:1，
   内容一高就被"压扁"而不是滚动 → 顶部 masthead 文字被裁、面板被压、色块圈被吞。
   全部子元素禁止收缩，恢复正常滚动。 */
.wardrobe-body > * {
  flex-shrink: 0 !important;
}
.wardrobe-panel .xv-swatch-row {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 4px;
}
/* 00 区块气泡预览：随经典槽 / 美化包即时变化 */
.xv-pack-preview-field {
  margin-top: 14px;
  border-bottom: none !important;
}
#xv-pack-preview {
  min-height: 132px;
  padding: 12px;
  border: 1px dashed var(--line, #e3e3e3);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* ============================================================
   v384 · 气泡配色卡片（形状 × 配色解耦）
   配色卡比形状卡窄一点，一行能多露几个；
   色条左半＝对方底色、右半＝我方底色，一眼看清成品配色。
   ============================================================ */
.xv-palette-card {
  flex: 0 0 104px;
}
.xv-palette-strip {
  position: relative;
  display: flex;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line, #e6e6ea);
}
.xv-palette-strip-a,
.xv-palette-strip-u {
  flex: 1 1 50%;
}
.xv-palette-strip-a {
  background: var(--pa, #ffffff);
}
.xv-palette-strip-u {
  background: var(--pu, #fbdce6);
}
/* 「形状原配」：用奶油→樱花的斜向渐变示意"跟随形状自带颜色" */
.xv-palette-strip--auto .xv-palette-strip-a {
  background: linear-gradient(135deg, #ffffff 0%, #f3efe8 100%);
}
.xv-palette-strip--auto .xv-palette-strip-u {
  background: linear-gradient(135deg, #e9dbc2 0%, #f6b8cd 100%);
}

/* ============================================================
   v385 · 默认气泡 ＝ 「像素猫兔」的方糖直角
   ------------------------------------------------------------
   写在补丁层且**不带 !important**，优先级最低 —— 主题包、异形气泡
   依旧随时能盖掉它。作用范围排除表情包/正在输入/语音条。
   对方：左上直角（离头像最近的那只角），我方：右上直角 + 奶油粉。
   想换回老样子：把下面这一整段删掉即可。
   ============================================================ */
.chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  border-radius: 4px 14px 14px 14px;
}
.chat-msg--assistant .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  border-left: 1px solid var(--bubble-peer-bd, #d8d2c8);
  border-color: var(--bubble-peer-bd, #d8d2c8);
  background: var(--bubble-peer-bg, #ffffff);
  color: var(--bubble-peer-fg, #5a554c);
}
.chat-msg--user .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  border-radius: 14px 4px 14px 14px;
  background: var(--bubble-self-bg, #fbdce6);
  border-color: var(--bubble-self-bd, #e8b7c8);
  color: var(--bubble-self-fg, #5c4450);
}
/* 暗色：同样保持"我方是粉色"的辨识度，只是压暗一档 */
body.dark .chat-msg--assistant .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  --bubble-peer-bg: #23252b;
  --bubble-peer-bd: #383b43;
  --bubble-peer-fg: #d9d5ce;
}
body.dark .chat-msg--user .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  --bubble-self-bg: #5a3b48;
  --bubble-self-bd: #6d4753;
  --bubble-self-fg: #f7e8ee;
}

/* ============================================================
   v385 · QQ 式分区装扮 UI：顶部大预览 + 入口纽扣 + 分区面板
   ============================================================ */
.xv-ward-field {
  display: block;
}
.xv-ward-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 贴纸会探出气泡 16px，四周留够位置别被裁掉 */
  padding: 20px 16px;
  margin-top: 10px;
  border: 1px dashed var(--line, #e6e6ea);
  border-radius: 18px;
  background: var(--bg-page, #faf9f7);
  overflow: visible;
}
.xv-ward-preview .chat-msg {
  display: flex;
  margin: 0;
}
.xv-ward-preview .chat-msg--user {
  justify-content: flex-end;
}
.xv-ward-preview .chat-msg-inner {
  max-width: 76%;
}
.xv-ward-preview .chat-msg-bubble-stack {
  display: block;
  /* v414 · 玻璃主题的 stack 布局规则（max-width: min(calc(100%-40px),248px) / width:max-content）
     会命中卷宗内的大预览，把气泡压成窄条折行 —— 这里显式收回，预览保持与经典一致的布局 */
  max-width: none !important;
  width: auto !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
/* ---- 四个分区入口 ---- */
.xv-ward-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.xv-ward-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 54px;
  padding: 8px 3px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  border: 1px solid var(--line, #e6e6ea);
  border-radius: 15px;
  background: var(--bg-card, #fff);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.xv-ward-entry:active {
  transform: scale(0.97);
}
.xv-ward-entry > i.ph {
  font-size: 19px;
  line-height: 1;
  color: var(--text-sub, #8a8a92);
}
.xv-ward-entry-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
}
.xv-ward-entry-k {
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--text-main, #23232a);
  line-height: 1.2;
}
.xv-ward-entry-v {
  font-size: 0.6rem;
  line-height: 1.2;
  color: var(--text-sub, #8a8a92);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xv-ward-entry.is-on {
  border-color: var(--accent, #b39b7d);
  background: rgba(179, 155, 125, 0.12);
  box-shadow: 0 0 0 2px rgba(179, 155, 125, 0.18);
}
.xv-ward-entry.is-on > i.ph,
.xv-ward-entry.is-on .xv-ward-entry-v {
  color: var(--accent, #b39b7d);
}
/* ---- 分区面板：同一时刻只显示一个 ---- */
.xv-ward-panel {
  display: none;
}
.xv-ward-panel.is-on {
  display: block;
}
.xv-ward-panel .xv-ward-empty {
  margin: 10px 0 0;
  font-size: 0.68rem;
  color: var(--text-sub, #8a8a92);
}
/* 套装卡：缩略图里多露两行，看得清整体氛围 */
.xv-suit-card {
  flex: 0 0 138px;
}
.xv-suit-card .xv-bubble-thumb {
  height: 96px;
  gap: 5px;
}
/* v412 · 套装卡升级为完整迷你场景（顶栏+壁纸消息区+底栏）：
   卡身加宽容纳场景，场景自带描边圆角与卡片同框；
   场景内气泡带 .xv-live-skip，不被实时形状/贴纸层串染。 */
.xv-ward-panel .xv-suit-card {
  flex: 0 0 156px;
}
.xv-ward-panel .xv-suit-card .xv-kit-scene {
  border: 1px solid var(--line, #e6e6ea);
  border-radius: 10px;
}
/* 贴纸卡：给外侧角贴图留出余量 */
.xv-sticker-card .xv-bubble-thumb {
  height: 96px;
  padding: 13px;
}

/* ============================================================
   v387 · 装扮页（WARDROBE）气泡形状一键切换
   卡片样式复用卷宗的 .xv-bubble-card 体系；这里只补装扮页
   面板内的对齐与留白（与极简美化色块同一水平内边距）。
   ============================================================ */
.wardrobe-panel .xv-ward-shape-cards {
  padding: 2px 16px 6px;
}
.wardrobe-panel .xv-ward-shape-cards .xv-bubble-card {
  flex: 0 0 116px;
}
.wardrobe-panel .xv-ward-shape-cards .xv-bubble-thumb {
  height: 82px;
  background: var(--bg-page, #faf9f7);
}
/* 天使翅膀/贴纸探出缩略图：容器不裁纵向 */
.wardrobe-panel .xv-ward-shape-cards .xv-bubble-thumb {
  overflow: visible;
}

/* v386 · 开屏标题换字平滑过渡（淡出→改字→淡入） */
.boot-splash-title {
  transition: opacity 0.28s ease;
}
.boot-splash-title--swap {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .boot-splash-title {
    transition: none;
  }
}

/* ============================================================
 * v388 · 一键恢复初始状态（设置 · 数据与重置）
 * ============================================================ */
.settings-panel--danger {
  border-color: rgba(214, 122, 138, 0.28) !important;
}
.settings-reset-blurb {
  margin: 0 0 10px;
  color: #8a5a64;
}
body.dark .settings-reset-blurb {
  color: #e8b9c2;
}
.chip.chip-danger {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 74, 96, 0.35) !important;
  background: #fdecef;
  background: linear-gradient(180deg, #fff2f4, #fbdde3);
  color: #a8324b;
  font-weight: 800;
}
.chip.chip-danger:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffe6ea, #f8cfd7);
}
.chip.chip-danger:disabled {
  opacity: 0.55;
}
body.dark .chip.chip-danger {
  border-color: rgba(255, 138, 160, 0.4) !important;
  background: linear-gradient(180deg, #4a2530, #3a1c26);
  color: #ffb3c2;
}
.settings-reset-btn {
  min-height: 38px;
}
.factory-reset-card {
  width: min(460px, calc(100vw - 24px));
}
.factory-reset-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.factory-reset-warn {
  margin: 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(250, 226, 231, 0.9);
  color: #97324a;
  font-size: 0.92rem;
  line-height: 1.6;
}
body.dark .factory-reset-warn {
  background: rgba(96, 40, 54, 0.5);
  color: #ffc4cf;
}
.factory-reset-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #5c4450;
}
body.dark .factory-reset-list {
  color: #d9c6cd;
}
.factory-reset-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #7b6a72;
}
body.dark .factory-reset-note {
  color: #a9959e;
}
.factory-reset-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.factory-reset-actions .chip {
  min-width: 96px;
  min-height: 38px;
  justify-content: center;
}

/* ============================================================
 * v390 · 界面切换加速：未打开的界面不参与全局样式/布局计算
 * ------------------------------------------------------------
 * 现状：13 个界面同时挂在 DOM 里，隐藏方式是 visibility:hidden + opacity:0，
 *       **仍然参与渲染树**（offsetHeight=844），加上 5000+ 节点 / 5700+ 条 CSS 规则，
 *       任何一次 class/aria 改动都会波及整棵树重算 —— 手机上实测单次切换主线程被占 300ms+。
 * 这里用 contain 把每个界面隔离成独立作用域：它内部的改动不再向外冒泡引发全局重算。
 * 注意：刻意【不】用 content-visibility:hidden —— 那样会丢掉聊天页/列表的滚动位置。
 * ============================================================ */
.settings-screen:not(.is-open),
.my-screen:not(.is-open),
.wardrobe-screen:not(.is-open),
.sticker-screen:not(.is-open),
.chat-screen:not(.is-open),
.chat-list-screen:not(.is-open),
.chat-memo-screen:not(.is-open),
.char-screen:not(.is-open),
.world-book-screen:not(.is-open),
.forum-screen:not(.is-open),
.relation-screen:not(.is-open),
.roleplay-screen:not(.is-open),
.checkup-screen:not(.is-open),
.checkup-device-screen:not(.is-open) {
  contain: layout style;
}

/* v390 · 恢复初始状态：分步进度条 */
.factory-reset-progress {
  margin-top: 2px;
}
.factory-reset-progress[hidden] {
  display: none;
}
.factory-reset-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(160, 130, 140, 0.18);
  overflow: hidden;
}
body.dark .factory-reset-progress-track {
  background: rgba(255, 255, 255, 0.14);
}
.factory-reset-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5a9bd, #ec7d9b);
  transition: width 0.25s ease;
}
.factory-reset-progress-label {
  margin: 6px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #7b6a72;
}
body.dark .factory-reset-progress-label {
  color: #bda9b1;
}

/* ============================================================
 * v392 · 桌面视觉修补
 * ============================================================ */
/* Memory Board 空照片槽：img 没有 src 时显示破图 icon + alt 文字，很难看。
   隐藏空图，让卡片保持干净的拍立得相纸；Add Photo 上传后 src 有值即正常显示。 */
.polaroid-card img:not([src]),
.polaroid-card img[src=""] {
  visibility: hidden !important;
}
/* 右下角「M.」水印：right:-6px 出血 + 7.2rem 导致右半被裁掉。
   收进屏内、降一档字号，完整优雅地显示。 */
.watermark {
  right: 12px;
  bottom: 96px;
  font-size: 5.4rem;
}

/* ============================================================
 * v392 · 默认气泡统一奶油白（对方）
 * ------------------------------------------------------------
 * 旧值偏黄偏灰（#F5F1E9 / 暗 #23252b）。改为：
 *   日间：#F8F5EF 干净暖米白（降黄饱和与灰调），描边 #DED7C9 保证边界
 *   夜间：#2E3038 比原来亮一档（原来 #23252b 偏暗沉），描边提到 #545A66
 * ============================================================ */
.chat-msg--assistant .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  --bubble-peer-bg: #f8f5ef;
  --bubble-peer-bd: #ded7c9;
  --bubble-peer-fg: #3b3630;
}
body.dark .chat-msg--assistant .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  --bubble-peer-bg: #2e3038;
  --bubble-peer-bd: #545a66;
  --bubble-peer-fg: #edeae4;
}
/* 形状卡里的形状说明小字 */
.xv-bubble-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #8a7f76;
}
body.dark .xv-bubble-desc {
  color: #a99e95;
}

/* ============================================================
 * v395 · 聊天页顶部「角色心声」卡 + 输入框精简
 * ============================================================ */
.chat-heart-voice-card {
  position: relative;
  margin: 8px 2px 2px;
  /* v424 · 左侧内边距由 14px 提到 30px：给左上角的引号让出位置。
     原值 14px 而引号位于 left:8px、字号 2.4rem（约 38px 宽），
     文字第一行必然压在引号上 —— 就是截图里"引号被文字遮住"。 */
  padding: 10px 40px 10px 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(232, 201, 212, 0.55);
  box-shadow: 0 2px 8px rgba(74, 64, 52, 0.08);
  /* v424 · 去掉 overflow:hidden。它把 ::before 的引号切掉上半截
     （引号 top:-6px 是有意上移做装饰的），是"引号被遮"的直接原因。
     心声卡已无内框、无贴纸，文字自身不再溢出，不需要裁剪。 */
  overflow: visible;
  max-height: 220px;
  transition: max-height 0.28s ease, opacity 0.28s ease, padding 0.28s ease, margin 0.28s ease;
}
/* v424 · 引号：top 由 -6px 收到 2px。
   原来上移 6px 配合 overflow:hidden ＝ 只露下半截；
   现在卡片不裁剪了，但仍留在盒内以免压住上方双头像，
   且 z-index 抬到文字之下，杜绝"文字盖住引号"。 */
.chat-heart-voice-card::before {
  content: "\201C";
  position: absolute;
  left: 6px;
  top: 2px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(232, 155, 180, 0.4);
  pointer-events: none;
  z-index: 0;
}
.chat-heart-voice-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5c4450;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  cursor: pointer;
}
.chat-heart-voice-card.is-expanded .chat-heart-voice-text {
  -webkit-line-clamp: unset;
  overflow: auto;
  max-height: 180px;
}
.chat-heart-voice-close {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #b9a8b0;
  font-size: 1rem;
  cursor: pointer;
}
.chat-heart-voice-card.is-closing {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.dark .chat-heart-voice-card {
  background: rgba(46, 48, 56, 0.72);
  border-color: rgba(125, 85, 102, 0.5);
}
body.dark .chat-heart-voice-text {
  color: #e9d9df;
}
/* 输入框：去 placeholder 后收窄居中，与消息区对齐。
   作用域只到 .chat-composer：.chat-slab 是通用卡类（顶部身份卡 chat-identity-wrap、
   卷宗面板都在用），不能全局缩窄。用 id 选择器：composer 被移出聊天页（面对面挂载）时依然生效。 */
#chat-composer {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
#chat-screen .chat-composer .chat-slab {
  width: 100%;
}

/* ============================================================
 * v399 · 装扮页信息架构重构
 * ------------------------------------------------------------
 * 目标：把零散的装扮项收敛成「美化套装」一层，操作不超过两步。
 * 1) 套装成套展示：壁纸 + 上下边框 + 气泡样式，卡片上明确标出三件套。
 * 2) 列表不再单独显示气泡形状（收进「单独调整」折叠区，套装已含）。
 * 3) 套装卡片带「预览」→ 弹层里渲染完整聊天界面（QQ 主题式）。
 * 4) 主题色区独立说明：仅换主题色，不影响已选套装。
 * 5) 沿用现有设计语言；暗色模式与窄屏各有分支。
 * ============================================================ */

/* v402 · 套装卡片的本体样式已移至文件末尾 v402 段
   （内含卡片内预览场景 .xv-kit-scene）。
   此处不再定义 .xv-theme-card / .xv-theme-thumb，避免与 v402 冲突。
   v399 曾把它做成 div 容器 + 独立预览按钮，v402 已改回 button + 内嵌预览。 */

/* ---- 主题色区：标题 + 说明文案（明确不影响套装） ---- */
.xv-sub-label--split {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 20px;
  padding: 0 16px;
  letter-spacing: 0.06em;
}
.xv-sub-label--split > span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.04em;
}
.xv-sub-label--split > em {
  font-style: normal;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-sub);
  letter-spacing: 0.01em;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-main) 5%, transparent);
}

/* ---- 折叠区：气泡形状 / 气泡预览收进「进阶」 ---- */
.xv-advanced {
  margin: 16px 0 0;
  border: 1px solid var(--line, #e6e6ea);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-body) 45%, var(--bg-card));
  overflow: hidden;
}
.xv-advanced-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.xv-advanced-summary::-webkit-details-marker {
  display: none;
}
.xv-advanced-summary::after {
  content: "\F070"; /* ph-caret-down */
  font-family: "Phosphor";
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--text-sub);
  transition: transform 0.2s ease;
}
.xv-advanced[open] > .xv-advanced-summary::after {
  transform: rotate(180deg);
}
.xv-advanced-summary em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--text-sub);
  margin-left: 2px;
}
.xv-advanced > *:not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}
.xv-advanced > *:last-child {
  margin-bottom: 14px;
}
.xv-advanced .xv-bubble-cards {
  padding-top: 4px;
}

/* ---- 暗夜模式：卡片与折叠区跟随主题 ---- */
body.dark .xv-theme-card {
  background: var(--bg-card, #232529);
}
body.dark .xv-advanced {
  background: color-mix(in srgb, #16181d 55%, var(--bg-card));
}

/* ---- 窄屏：套装卡片缩窄，保证一屏可见两三张 ---- */
@media (max-width: 380px) {
  .xv-theme-row--kit {
    gap: 10px;
  }
  .xv-theme-card {
    flex-basis: 134px;
  }
  .xv-kit-scene {
    height: 160px;
  }
  .xv-sub-label--split {
    padding: 0 12px;
  }
}

/* ============================================================
 * v404 · 顶部模糊终版：顶栏文字整体下移，模糊带只留纯色
 * ------------------------------------------------------------
 * 定性（八轮后锁定，两条事实）：
 *   1) iOS 独立模式的模糊带比 env(safe-area-inset-top) 高出一截。
 *      桌面首页假状态栏文字按 CSS 应在 ~63pt（16px+47pt），已在 47pt
 *      状态栏之下，但截图显示它仍被糊 —— 模糊带实际向下延伸到 ~75-80pt。
 *   2) 被糊的从来不是"页面"，而是【排进那条带里的文字/控件】。
 *      纯色区域被降采样也看不出糊 —— 绕开，不对抗。
 *
 * v401/v403 的 .stage padding 方案已废弃：它会把全站 90 处
 * env(safe-area-inset-top) 的既有布局全部二次让位，造成大片空白。
 *
 * 本版（v405）只做两件最小的事：
 *   A. 桌面首页假状态栏（时间/5G/电池，与 iOS 系统栏信息重复）：
 *      独立模式保持可见，padding-top 抬到 env+30px（与装扮/我的等页顶栏同深度，
 *      真机实测不糊），min-height 归零、不再占位。
 *      ⚠ v404 回归修复：v404 曾把 statusbar 整条 visibility:hidden + 占位 env+44，
 *      结果首页顶部空一大块、假状态栏消失。
 *   B. 各页顶栏（.settings-topbar/.my-topbar/.chat-list-topbar/.chat-screen-topbar）：
 *      padding-top 抬到 env+30px，顶栏文字落在模糊带之外。
 *      ⚠ 有意【不含 .topbar】：首页那条 NIGHT/ALL APPS 胶囊紧跟在 .statusbar 之后，
 *      若也加 env+30，会与 statusbar 让位叠加成 2×安全区（≈192px）把首页顶下去。
 * 仅独立模式生效，网页版零影响。
 * ============================================================ */
@media (display-mode: standalone), (display-mode: fullscreen) {
  /* A · 首页假状态栏：恢复显示，并用与其他页顶栏一致的 env+30 深度
     （该深度已由装扮/我的等页真机实测不糊）。
     v404 曾把它整条 visibility:hidden + 占位 env+44，结果首页顶部空一大块、
     假状态栏消失 —— 用户反馈「间距太宽、模拟状态栏不见了」。 */
  .statusbar {
    visibility: visible !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 30px) !important;
    min-height: 0 !important;
  }
  /* B · 各页顶栏：文字整体下移出模糊带。
     ⚠ 有意【不含 .topbar】：首页那条 NIGHT/ALL APPS 胶囊紧跟在 .statusbar
     之后，若也加 env+30，会与 statusbar 的让位叠加成 2×安全区（≈192px），
     把首页顶部整块顶下去（v405 修复）。 */
  .settings-topbar,
  .my-topbar,
  .chat-list-topbar,
  .chat-screen-topbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 30px) !important;
  }
  /* v409 · 卷宗面板顶栏（右上角 ⋮ 展开的那层）此前只有 env+10px，文字正好落进
     iOS 状态栏降采样模糊带 → 用户反馈"顶部出现模糊"。补齐到同一深度。
     同理补上晤面（长文）的三个绝对定位顶栏元素，见下方独立段。 */
  .chat-thread-detail-toolbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 30px) !important;
  }
  /* 密谈详情里其它二级页顶栏同理（手记 / 表情动作等），凡用 .chat-detail-toolbar 的 */
  .chat-detail-toolbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 30px) !important;
  }
  /* v425 · 世界书内页顶栏：此前只补过卷宗面板、密谈详情等，唯独漏了这里。
     style.css 里 .world-book-reader-bar 的 padding-top 是
     `calc(10px + env(safe-area-inset-top))`（8077 行），比其它页少 20px ——
     在 iOS 独立模式下，「活人感」标题正好落进状态栏降采样模糊带，
     就是用户截图里顶栏文字那层糊。补齐到同一深度。 */
  .world-book-reader-bar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 30px) !important;
  }
}

/* ============================================================
 * v406 · 「我的」顶栏缩窄 + 去英文（方案 C）
 * ------------------------------------------------------------
 * 用户反馈：① 顶栏偏宽影响美观；② 中间英文 Notebook/PROFILE 不明所以。
 * 做法：a) 两行英文改为居中单行中文标题「我的」（HTML 已替换，静态、无 JS 依赖）；
 *       b) 顶栏底部留白 8→4pt，内容行仅剩 44pt 返回按钮 → 顶栏 148→125pt；
 *       c) 严守 v405 的 env+30 模糊缓冲，不削缓冲，模糊不复发。
 * ============================================================ */
.my-topbar {
  padding-bottom: 4px !important;
}
.my-topbar-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.my-topbar-title {
  font-family: "Sarasa Gothic SC", "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
  white-space: nowrap;
}
/* 兜底：旧英文标记若残留一律隐藏（「我的」屏为静态 HTML，已无 JS 写入） */
.my-topbar-meta .widget-label,
.my-topbar-eyebrow {
  display: none !important;
}

/* v406 续 · 其余 8 屏英文顶栏 → 居中单行中文（方案 C 全量） */
.topbar-cn-title {
  font-family: "Sarasa Gothic SC", "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
  white-space: nowrap;
}
/* 仅对标记 meta-cn 的顶栏隐藏旧英文，绝不波及语音通话/视频通话等中文顶栏 */
.meta-cn .widget-label,
.meta-cn .settings-topbar-eyebrow {
  display: none !important;
}
/* 广场：kicker/title 为 JS 动态，按 id 隐藏；品牌区居中 */
#forum-topbar-kicker,
#forum-topbar-title {
  display: none !important;
}
#forum-screen .forum-wx-wechat-brand {
  text-align: center;
}

/* ============================================================
 * v408 · 密谈顶栏统一显示角色姓名（经典 / 玻璃同逻辑）
 * ------------------------------------------------------------
 * 病根：姓名胶囊 #chat-glass-topbar-title 仅在玻璃主题下显示
 *       （style.css:23568 `display:none`），经典主题下顶栏中间是
 *       静态文案「对话」。同一位置因主题显示不同内容 → 交互逻辑混乱。
 * 做法：新增 #chat-topbar-char-name，两种主题都居中显示角色姓名；
 *       主题只影响美学（字体/底色/胶囊感），不影响显示与行为。
 *       经典：居中纯文字按钮；玻璃：加胶囊底色，与旧胶囊观感一致。
 * 姓名可点＝打开角色心声（与点头像 chat-header-char-face 同行为）。
 * ============================================================ */
/* 真正居中：左右容器等宽，标题绝对定位到 50% —— 姓名长短不影响对称 */
.chat-screen-topbar .chat-topbar-left,
.chat-screen-topbar .chat-topbar-right {
  flex: 1 1 0;
  min-width: 0;
}
.chat-screen-topbar #chat-topbar-meta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(46vw, 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.chat-screen-topbar #chat-topbar-meta > * {
  pointer-events: auto;
}
.chat-topbar-char-name {
  font-family: "Sarasa Gothic SC", "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--text-main);
  background: none;
  border: 0;
  padding: 4px 8px;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 手记关闭时不可点：与玻璃旧胶囊的 aria-disabled 语义保持一致 */
.chat-topbar-char-name[aria-disabled="true"] {
  cursor: default;
  opacity: 0.72;
}
.chat-topbar-char-name:not([aria-disabled="true"]):hover {
  background: color-mix(in srgb, var(--tint-rgb) 10%, transparent);
}
.chat-topbar-char-name:not([aria-disabled="true"]):active {
  transform: scale(0.97);
}
.chat-topbar-char-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 经典主题：旧英文/副标题照旧隐藏，只留姓名（由 .meta-cn 规则负责英文隐藏） */
#chat-topbar-meta .widget-label,
#chat-topbar-meta .settings-topbar-eyebrow {
  display: none !important;
}
/* 玻璃主题：姓名外加胶囊玻璃底，保留原视觉语言 */
#chat-screen.chat-screen--theme-glass .chat-topbar-char-name {
  padding: 7px 18px;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-topbar-char-name {
  background: rgba(24, 26, 32, 0.62);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
/* 玻璃主题下旧的姓名胶囊隐藏：职责并入新元素，避免同一位置两个姓名 */
#chat-screen.chat-screen--theme-glass .chat-glass-topbar-title {
  display: none !important;
}
/* v409 · memo 关闭态的置灰。app.js:37978 给新按钮挂的是 chat-topbar-char-name--inner-voice-off
   （原误用旧胶囊的类名，CSS 里没有对应规则 → 关闭手记时按钮看着可点其实 aria-disabled）。
   这里补上与旧胶囊一致的表现。 */
#chat-screen .chat-topbar-char-name--inner-voice-off {
  cursor: default;
  opacity: 0.62;
  pointer-events: none;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-topbar-char-name {
  padding: 4px 8px;
  font-size: 0.95rem;
  background: none;
  border: 0;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-topbar-char-name--inner-voice-off:hover {
  background: none;
  box-shadow: none;
}

/* v408 · 「TA 对我的备注」申请按钮：该值只读，改动需角色同意 */
.chat-detail-remark-request-btn {
  align-self: flex-start;
  min-height: 30px;
  flex-shrink: 0;
}
.char-remark-request-input {
  width: 100%;
  margin: 10px 0 4px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-main);
  background: var(--bg-card, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  border-radius: 14px;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}
.char-remark-request-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
body.dark .char-remark-request-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.char-remark-request-count {
  margin: 0 0 4px;
  text-align: right;
  opacity: 0.7;
}

/* v408 · 换图板块缩略图：一眼看到「现在设的是什么」 */
.ward-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-main) 5%, transparent);
  border: 0.5px solid var(--line, rgba(0, 0, 0, 0.08));
  display: grid;
  place-items: center;
}
.ward-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ward-thumb-ph {
  font-size: 0.78rem;
  color: var(--text-sub);
  letter-spacing: 0.02em;
}
.ward-thumb-k {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 未设置时给一点可识别的占位纹理，避免看起来像加载失败 */
.ward-thumb[data-empty="1"] {
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--text-main) 4%, transparent) 0 8px,
      transparent 8px 16px
    ),
    color-mix(in srgb, var(--text-main) 5%, transparent);
}
.ward-thumb[data-empty="1"] .ward-thumb-k {
  background: rgba(0, 0, 0, 0.28);
}
body.dark .ward-thumb {
  border-color: rgba(255, 255, 255, 0.1);
}

/* v408 · 卷宗主列表：一行一项 + 右侧当前值 + 箭头 */
.chat-detail-mainlist {
  margin: 0 0 4px;
  border-radius: var(--border-radius-lg, 12px);
  overflow: hidden;
  background: var(--bg-card, rgba(255, 255, 255, 0.84));
  border: 0.5px solid var(--line, rgba(0, 0, 0, 0.08));
}
.chat-detail-ml-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
}
.chat-detail-ml-row + .chat-detail-ml-row {
  border-top: 0.5px solid var(--line, rgba(0, 0, 0, 0.07));
}
.chat-detail-ml-k {
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}
.chat-detail-ml-v {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 0.82rem;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-detail-ml-go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 0.78rem;
  color: var(--text-sub);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-detail-ml-go:hover {
  background: color-mix(in srgb, var(--tint-rgb) 10%, transparent);
}
.chat-detail-ml-go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* 「申请」是主动作，用强调色区别于普通跳转箭头 */
.chat-detail-ml-go--accent {
  font-weight: 600;
  color: var(--accent);
  padding: 0 12px;
}
.chat-detail-ml-switch {
  flex-shrink: 0;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-main) 16%, transparent);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.chat-detail-ml-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-detail-ml-switch[aria-pressed="true"] {
  background: var(--accent);
}
.chat-detail-ml-switch[aria-pressed="true"]::after {
  transform: translateX(18px);
}
.chat-detail-ml-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-detail-ml-row--more {
  padding: 0;
}
.chat-detail-ml-more-btn {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--text-sub);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-detail-ml-more-btn i {
  transition: transform 0.2s ease;
}
.chat-detail-ml-more-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.chat-detail-more-pane {
  margin-top: 10px;
}
.chat-detail-more-pane[hidden] {
  display: none;
}
/* 从主列表跳进二级时，目标字段闪一下提示「你在这」 */
.chat-detail-flash {
  animation: chatDetailFlash 1.2s ease-out;
  border-radius: 12px;
}
@keyframes chatDetailFlash {
  0% { background: color-mix(in srgb, var(--accent) 26%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-detail-flash { animation: none; }
}

/* ============================================================
 * v407 · 装扮页「大卡片」瘦身（用户圈图反馈）
 * ------------------------------------------------------------
 * 问题：装扮页顶部 masthead 卡片（APPEARANCE / 装扮 / 密谈壳说明）
 *       标题 2.1rem 过大，整张卡比下面真正的功能区还抢眼。
 * 做法：a) 标题降到 1.7rem（两档），并放宽行高避免中文挤压；
 *       b) 说明文字不动 —— 本文件 v6 段已把 .settings-masthead-desc 与
 *          .settings-ai-blurb（下方「挑一套美化套装…」引导语）统一为
 *          0.85rem !important，两处本就是同一字号，这里只作注释锁定，
 *          防止后续改动把两者拆散。
 * 作用域：仅 wardrobe-masthead，不影响设置/角色库等其他页的 masthead。
 * ============================================================ */
.wardrobe-masthead .settings-masthead-title {
  font-size: 1.7rem;
  line-height: 1.12;
}
/* 灰字与「挑一套美化套装…」同为 0.85rem（见 v6 段 !important 规则），
   这里补一条等值声明，把「两者必须同字号」这条约束显式写进代码。 */
.wardrobe-masthead .settings-masthead-desc {
  font-size: 0.85rem;
  line-height: 1.65;
  margin-top: 8px;
}

/* ============================================================
 * v402 · 套装预览改为「卡片内直接铺满」+ 去掉两道灰线
 * ------------------------------------------------------------
 * 用户反馈：① 必须点击才能看到预览 → 改为卡片内直接铺满完整聊天界面，
 *   一眼看清套装在背景/顶栏/气泡/底部输入区下的整体效果；
 * ② 顶部/底部那两道灰色横线要去掉 → 边框颜色改由套装自身的
 *   .chat-screen-topbar / .chat-slab 决定（套装 CSS 会覆盖底色与描边），
 *   不再额外画灰线。
 * 布局：卡面 = 顶栏(20%) + 消息区(60%) + 底部输入区(20%)。
 * ============================================================ */
.xv-theme-row--kit {
  gap: 12px;
}
.xv-theme-card {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 9px;
  border: 1px solid var(--line, #e6e6ea);
  border-radius: 18px;
  background: var(--bg-card, #fff);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.xv-theme-card:active {
  transform: scale(0.98);
}
.xv-theme-card:focus-visible {
  outline: 2px solid var(--accent, #3a5c89);
  outline-offset: 2px;
}

/* 预览场景：整块就是「迷你聊天界面」 */
.xv-kit-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 178px;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-device, #fff);
}
/* 顶栏：对应真实 .chat-screen-topbar。
   去掉真实顶栏的 env(safe-area-inset-top) 让位，卡内不需要 */
.xv-kit-scene .settings-topbar,
.xv-kit-scene .chat-screen-topbar {
  flex: 0 0 auto;
  padding: 8px 10px !important;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.xv-kit-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.xv-kit-name {
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 消息区：壁纸由套装 CSS 的 .chat-messages-stack 提供 */
.xv-kit-scene .chat-messages-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px 9px;
  overflow: hidden;
  background: transparent;
}
.xv-kit-scene .chat-msg {
  margin: 0;
  display: flex;
}
.xv-kit-scene .chat-msg--user {
  justify-content: flex-end;
}
.xv-kit-scene .chat-msg-inner {
  min-width: 0;
  max-width: 88%;
}
.xv-kit-scene .chat-msg-bubble {
  font-size: 0.6rem !important;
  line-height: 1.4;
  padding: 4px 8px 5px !important;
  max-width: 100% !important;
  width: fit-content;
  border-radius: 12px;
}
/* 底部输入区：对应真实 .chat-slab + .chat-input */
.xv-kit-scene .chat-slab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 9px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.xv-kit-fake-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  border-radius: 999px;
  opacity: 0.55;
}

/* 名称与描述 */
.xv-theme-name {
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text-main, #23232a);
}
.xv-theme-desc {
  padding: 0 10px;
  font-size: 0.62rem;
  color: var(--text-sub, #8a8a92);
}

/* 暗色模式 */
body.dark .xv-theme-card {
  background: var(--bg-card, #232529);
}
body.dark .xv-advanced {
  background: color-mix(in srgb, #16181d 55%, var(--bg-card));
}

/* 窄屏 */
@media (max-width: 380px) {
  .xv-theme-row--kit {
    gap: 10px;
  }
  .xv-theme-card {
    flex-basis: 134px;
  }
  .xv-kit-scene {
    height: 160px;
  }
}

/* ══════════════════════════════════════════════════════════════
   v409 · 聊天页顶饰改造：删掉「贺小玥大王」装饰入口，装饰卡缩小成心声条
   —— 用户反馈：经典模式下 NORA CARD 装饰卡仍完整存在、心声卡悬浮其上、
      底部还有一条"小玥大王"文字装饰入口，纯冗余。
   做法：把整块 .chat-identity-wrap 压成一条紧凑「双头像 + 心声」横条。
        装饰性节点（spine 序号 / ENCRYPTED THREAD / live 胶囊 / 胶带 /
        CONFIDENTIAL 角标 / NORA CARD 大标题 / 场景装饰文案）全部 display:none，
        但保留 DOM —— app.js 有 10 处 getElementById 引用这些 id，删 DOM 会炸。
   ══════════════════════════════════════════════════════════════ */

/* 1) 装饰层整体隐藏（DOM 保留；v410：.chat-scene-pull 的 DOM 已整个删除，无需再隐藏） */
#chat-screen .chat-identity-wrap .chat-slab-spine,
#chat-screen .chat-identity-wrap .chat-identity-top,
#chat-screen .chat-identity-wrap .chat-slab-tape,
#chat-screen .chat-identity-wrap .chat-corner-stamp,
#chat-screen .chat-identity-wrap .chat-identity-head {
  display: none !important;
}

/* 2) 外层去掉 sticky 占位，让它像普通内容一样随消息滚走，不悬浮压住对话 */
#chat-screen .chat-identity-wrap {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  padding: 8px 0 2px !important;
}

/* 3) 卡片瘦身：内芯与面板 padding 砍半，去掉多余描边与阴影 */
#chat-screen .chat-identity-wrap .chat-slab {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#chat-screen .chat-identity-wrap .chat-slab-mat {
  padding: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#chat-screen .chat-identity-wrap .chat-slab-panel.chat-identity-panel {
  padding: 8px 10px !important;
  border-radius: 16px !important;
  background: var(--bg-card, rgba(255, 255, 255, 0.72)) !important;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.06)) !important;
  box-shadow: 0 1px 6px rgba(18, 22, 36, 0.05) !important;
}
body.dark #chat-screen .chat-identity-wrap .chat-slab-panel.chat-identity-panel {
  background: var(--bg-card, rgba(42, 40, 48, 0.9)) !important;
}

/* 4) 双头像：与气泡同排、尺寸减半（48 → 28），窄一点更紧凑 */
#chat-screen .chat-identity-wrap .chat-header-duo {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 0 !important;
  flex-wrap: wrap;
}
#chat-screen .chat-identity-wrap .chat-header-face {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  overflow: visible; /* v409 · 别裁翅膀类装饰 */
}
#chat-screen .chat-identity-wrap .chat-header-avatar-img {
  width: 28px !important;
  height: 28px !important;
}
#chat-screen .chat-identity-wrap .chat-header-initial {
  font-size: 0.72rem !important;
}
#chat-screen .chat-identity-wrap .chat-header-duo-vs {
  font-size: 0.6rem !important;
  opacity: 0.5;
}

/* 5) 心声卡：与头像同排横条，不再是"悬浮在装饰卡上"的大块
   —— 心声卡本身是 .chat-slab-panel 的子节点，装饰层隐藏后它自然成为主体。 */
#chat-screen .chat-identity-wrap .chat-heart-voice-card {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 4px !important;
  padding: 7px 30px 7px 11px !important;
  border-radius: 12px !important;
  max-height: 96px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(232, 201, 212, 0.5) !important;
  align-self: center;
}
/* 心声关闭态（hidden）时不该占位：面板里只剩头像，卡片自动收成一条小行 */
#chat-screen .chat-identity-wrap .chat-heart-voice-card[hidden] {
  display: none !important;
}
#chat-screen .chat-identity-wrap .chat-heart-voice-text {
  font-size: 0.72rem !important;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#chat-screen .chat-identity-wrap .chat-heart-voice-card.is-expanded {
  max-height: 46vh !important;
}
#chat-screen .chat-identity-wrap .chat-heart-voice-card.is-expanded .chat-heart-voice-text {
  -webkit-line-clamp: unset;
  display: block;
}
#chat-screen .chat-identity-wrap .chat-heart-voice-close {
  top: 50% !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
}

/* 6) 头像行作为可点的整体：点角色头像 = 打开心声（经典/玻璃一致） */
#chat-screen .chat-identity-wrap .chat-header-face--inner-voice {
  cursor: pointer;
  touch-action: manipulation;
}

/* 7) 面板本身要 flex 才能让「双头像 + 心声卡」同排 */
#chat-screen .chat-identity-wrap .chat-slab-panel.chat-identity-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px;
}

/* 8) v409 · 顶栏快捷开关按钮 + 头像隐藏态 */
#chat-screen .chat-topbar-quick-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.07));
  background: var(--bg-card, rgba(255, 255, 255, 0.7));
  color: var(--text-main, #2a2a32);
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0;
}
#chat-screen .chat-topbar-quick-btn:active {
  transform: scale(0.94);
}
#chat-screen .chat-topbar-quick-btn.is-off {
  opacity: 0.42;
}
#chat-screen .chat-topbar-quick-btn:focus-visible {
  outline: 2px solid var(--text-main, #2a2a32);
  outline-offset: 2px;
}
#chat-screen.chat-screen--theme-glass .chat-topbar-quick-btn {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(255, 255, 255, 0.8);
}
/* v437 · 玻璃主题下身份横条被快捷开关唤起时：跟随顶栏按钮的玻璃质感，
   不用经典主题的白实底卡（在玻璃页面上太突兀）；文字底色同理收半透明。 */
#chat-screen.chat-screen--theme-glass .chat-identity-wrap .chat-slab-panel.chat-identity-panel {
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.8) !important;
}
#chat-screen.chat-screen--theme-glass .chat-identity-wrap .chat-heart-voice-card {
  background: rgba(255, 255, 255, 0.5) !important;
}
body.dark #chat-screen.chat-screen--theme-glass .chat-topbar-quick-btn {
  background: rgba(24, 26, 32, 0.62);
  border-color: rgba(255, 255, 255, 0.14);
}

/* 头像关闭：整行隐藏（含分隔符） */
#chat-screen.chat-screen--no-top-avatars .chat-identity-wrap .chat-header-duo {
  display: none !important;
}
/* 头像关闭时面板只留心声卡，给它完整宽度 */
#chat-screen.chat-screen--no-top-avatars .chat-identity-wrap .chat-heart-voice-card {
  margin-left: 0 !important;
}

/* 9) v409 · 异形气泡翅膀不再被祖先裁掉。
   消息滚动容器（.chat-messages）与壁纸层（.chat-messages-stack）都带 overflow，
   气泡向外溢出的翅膀/尾巴会被切掉一半。给它们留出内边距空间：
   .chat-messages 自身不改成 visible（那是滚动容器，改了会连带坏掉滚动），
   而是把裁切边界由 padding 让开 —— 气泡层的父级允许可见。 */
#chat-screen .chat-msg-inner,
#chat-screen .chat-msg-bubble-stack,
#chat-screen .chat-msg {
  overflow: visible;
}

/* ══════════════════════════════════════════════════════════════
   v409 · 晤面（长文）原地编辑 + 重 roll
   ══════════════════════════════════════════════════════════════ */

/* 重 roll 按钮：与删除区分（删除是红色，reroll 用主色） */
#chat-screen .chat-msg-quick-btn--reroll {
  color: var(--accent, #3a5c89);
}
#chat-screen .chat-msg-quick-btn--reroll:active {
  transform: scale(0.92);
}

/* 原地编辑：直接盖在气泡卡片上，自撑高度，不再是底部那个小输入框 */
#chat-screen .chat-f2f-diary-card.is-inline-editing {
  position: relative;
}
#chat-screen .chat-f2f-inline-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bg-body, rgba(255, 255, 255, 0.96));
  border: 1px solid var(--accent, #3a5c89);
  box-shadow: 0 4px 18px rgba(18, 22, 36, 0.12);
  animation: xvInlineEditIn 0.18s ease-out;
}
@keyframes xvInlineEditIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
#chat-screen .chat-f2f-inline-edit-text {
  width: 100%;
  min-height: 96px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  background: var(--bg-card, #fff);
  color: var(--text-main, #23232a);
  font-family: var(--f2f-diary-serif, inherit);
  font-size: 0.86rem;
  line-height: 1.72;
  outline: none;
}
#chat-screen .chat-f2f-inline-edit-text:focus {
  border-color: var(--accent, #3a5c89);
}
#chat-screen .chat-f2f-inline-edit-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (prefers-reduced-motion: reduce) {
  #chat-screen .chat-f2f-inline-edit { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   v409 · 设置页「导入与上传」区块 + 贴纸库「一键批量导入」
   ══════════════════════════════════════════════════════════════ */
#settings-screen .settings-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0 10px;
}
#settings-screen .settings-import-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  min-height: 62px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.07));
  background: var(--bg-card, rgba(255, 255, 255, 0.7));
  color: var(--text-main, #2a2a32);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
#settings-screen .settings-import-card:hover {
  box-shadow: 0 3px 12px rgba(18, 22, 36, 0.08);
}
#settings-screen .settings-import-card:active {
  transform: scale(0.97);
}
#settings-screen .settings-import-card:focus-visible {
  outline: 2px solid var(--accent, #3a5c89);
  outline-offset: 2px;
}
#settings-screen .settings-import-card-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent, #3a5c89) 12%, transparent);
  color: var(--accent, #3a5c89);
  font-size: 1rem;
}
#settings-screen .settings-import-card-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#settings-screen .settings-import-card-txt strong {
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}
#settings-screen .settings-import-card-txt em {
  font-style: normal;
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--text-sub, #8a8a92);
}
body.dark #settings-screen .settings-import-card {
  background: rgba(255, 255, 255, 0.04);
}

/* 贴纸库顶部的一键批量导入 */
.sticker-quick-import {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed var(--line, rgba(0, 0, 0, 0.1));
  background: color-mix(in srgb, var(--accent, #3a5c89) 5%, transparent);
}
.sticker-quick-import-hint {
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--text-sub, #8a8a92);
  flex: 1 1 160px;
  min-width: 0;
}
@media (max-width: 380px) {
  #settings-screen .settings-import-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   v409 · 世界书页面重排（A 扁平清单 + D 统计胶囊 + C 条目搜索）
   ============================================================ */

/* ---- 搜索框 ---- */
#world-book-screen .world-book-searchbar {
  margin: 0.6rem 0 0.55rem;
}
#world-book-screen .world-book-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.7rem;
  background: var(--bg-card);
  border: 0.5px solid var(--line);
  color: var(--text-sub, #8a8a92);
  cursor: text;
}
#world-book-screen .world-book-search-wrap:focus-within {
  border-color: var(--accent, #6e4dbd);
}
#world-book-screen .world-book-search-wrap .ph {
  font-size: 0.92rem;
  flex: none;
}
#world-book-screen .world-book-search-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-main, #1d1d22);
  font-size: 0.82rem;
  line-height: 1.4;
  outline: none;
}
#world-book-screen .world-book-search-wrap input::placeholder {
  color: var(--text-sub, #8a8a92);
}
#world-book-screen .world-book-search-wrap input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--text-sub, #8a8a92);
  cursor: pointer;
}

/* ---- 统计胶囊 ---- */
#world-book-screen .world-book-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
#world-book-screen .world-book-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.2rem;
  border-radius: 0.6rem;
  background: var(--bg-card);
  border: 0.5px solid var(--line);
}
#world-book-screen .world-book-stat b {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--text-main, #1d1d22);
}
#world-book-screen .world-book-stat span {
  font-size: 0.64rem;
  line-height: 1.2;
  color: var(--text-sub, #8a8a92);
}
#world-book-screen .world-book-stat.is-on b {
  color: #1d9e75;
}
#world-book-screen .world-book-stat.is-global b {
  color: #534ab7;
}

/* ---- 说明行 ---- */
#world-book-screen .world-book-hint {
  margin: 0 0 0.7rem;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--text-sub, #8a8a92);
}

/* ---- 清单行 ---- */
#world-book-screen .world-book-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#world-book-screen .world-book-li {
  margin: 0;
  padding: 0;
}
#world-book-screen .world-book-li--hint {
  padding: 1.1rem 0.8rem;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-sub, #8a8a92);
}
#world-book-screen .world-book-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.7rem;
  background: var(--bg-card);
  border: 0.5px solid var(--line);
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
#world-book-screen .world-book-row-face {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
#world-book-screen .world-book-row-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--accent, #6e4dbd);
  font-size: 1rem;
}
#world-book-screen .world-book-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
#world-book-screen .world-book-row-title {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-main, #1d1d22);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#world-book-screen .world-book-row-sub {
  font-size: 0.66rem;
  line-height: 1.3;
  color: var(--text-sub, #8a8a92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#world-book-screen .world-book-row-tag {
  flex: none;
  align-self: center;
  padding: 0.1rem 0.34rem;
  border-radius: 0.3rem;
  font-size: 0.6rem;
  line-height: 1.5;
  color: #534ab7;
  background: rgba(83, 74, 183, 0.12);
}
/* 整本关闭：整行压暗，但内容仍可读可点 */
#world-book-screen .world-book-li.is-off .world-book-row {
  opacity: 0.52;
}
#world-book-screen .world-book-li.is-off .world-book-row-sub {
  color: #993556;
}

/* ---- 开关：44×26，整行右侧，触控区够大 ---- */
#world-book-screen .world-book-row-switch {
  flex: none;
  position: relative;
  width: 2.75rem;
  height: 1.625rem;
  padding: 0;
  border: 0;
  border-radius: 0.8125rem;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
#world-book-screen .world-book-row-switch.is-on {
  background: #1d9e75;
}
#world-book-screen .world-book-row-switch-knob {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}
#world-book-screen .world-book-row-switch.is-on .world-book-row-switch-knob {
  transform: translateX(1.125rem);
}

/* ---- 搜索命中的条目摘要 ---- */
#world-book-screen .world-book-hit-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0 0 0 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#world-book-screen .world-book-hit {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.45rem;
  border-left: 2px solid var(--accent, #6e4dbd);
  background: var(--bg-card);
}
#world-book-screen .world-book-hit-keys {
  font-size: 0.62rem;
  line-height: 1.35;
  color: #534ab7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#world-book-screen .world-book-hit-text {
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-sub, #8a8a92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 旧书架网格退役：内页之外不再使用 ---- */
#world-book-screen .world-book-shelf-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- 深色态 ---- */
body.dark #world-book-screen .world-book-row-icon {
  background: rgba(255, 255, 255, 0.07);
}
body.dark #world-book-screen .world-book-hit {
  background: rgba(255, 255, 255, 0.05);
}
body.dark #world-book-screen .world-book-row-switch-knob {
  background: #f2f2f5;
}
body.dark #world-book-screen .world-book-stat.is-on b {
  color: #5dcaa5;
}
body.dark #world-book-screen .world-book-stat.is-global b {
  color: #afa9ec;
}
body.dark #world-book-screen .world-book-row-tag {
  color: #afa9ec;
  background: rgba(175, 169, 236, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  #world-book-screen .world-book-row-switch-knob {
    transition: none;
  }
}

/* ============================================================
   v418 · 顶栏两处修正
   1) 返回键去掉「列表 / 桌面」文字后要固定成圆形，否则空内容会塌成一条缝；
      箭头由 1.25rem 收回 1rem，与中间角色名（0.95rem）视觉同级，
      触控区仍保留 38px（≥36px 下限，防误触）。
   2) 右上角心声卡内联 SVG 描边调粗到 2，与相邻 Phosphor 字体图标
      （ph-user-circle / dots-three）视觉重量一致。
   ============================================================ */
#chat-screen .chat-topbar-left #chat-close {
  min-width: 38px !important;
  min-height: 38px !important;
  width: 38px;
  padding: 0 !important;
  gap: 0;
  border-radius: 50%;
  justify-content: center;
}
#chat-screen .chat-topbar-left #chat-close i {
  font-size: 1rem !important;
}

/* ============================================================
   v420 · 身份横条空壳残留修复
   现象：顶栏下方残留一条全宽白色空长条。
   原因：.chat-slab-panel（身份横条外壳）自带底色 + 1px 描边 + padding 8px 10px
        （见上方规则 3）。当「双头像」被顶栏👤开关隐藏、且心声卡也处于 hidden 时，
        面板内已无任何可见内容，但外壳的底色与内边距仍在 → 渲染成空白长条。
   处理：app.js 的 syncChatIdentityWrapEmpty() 在两者皆空时给
        .chat-identity-wrap 加 --empty 标记，这里整块 display:none，不留残影。
        只要双头像或心声卡任一可见，标记不存在，行为与之前完全一致。
   ============================================================ */
#chat-screen .chat-identity-wrap.chat-identity-wrap--empty {
  display: none !important;
}

/* ============================================================
   v421 · 聊天气泡行三项修正
   ------------------------------------------------------------
   1) 头像左右位置纠正
      症状：对方（assistant）头像被推到行外右侧（截图里左侧边缘只露出半个黑头像），
            自己（user）头像跑到气泡左边 —— 与 glass 主题的表现正好相反。
      根因：style.css:22290 有 `.chat-msg--user .chat-msg-inner{flex-direction:row-reverse}`，
            而 glass 主题在 style.css:23783 把它覆盖回了 `row`。经典主题没有这层覆盖，
            于是 row-reverse 生效：app.js 里 user 行 DOM 顺序是 [stack, avatar]，
            反转后 avatar 跑到左边；assistant 行 DOM 顺序本来就是 [avatar, stack]，
            反转后 avatar 跑到右边、被行宽裁掉。
      处理：把 user 行改回 row（与 glass 一致），并让 user 行靠右对齐。
   ============================================================ */
#chat-screen .chat-msg--user .chat-msg-inner {
  flex-direction: row !important;
  justify-content: flex-end;
}
#chat-screen .chat-msg--assistant .chat-msg-inner {
  flex-direction: row !important;
  justify-content: flex-start;
}

/* ------------------------------------------------------------
   v424 修正 · 头像被裁 / 关头像后翅膀被裁（与 v421 的横向锁定是两件事）
      症状（用户截图）：assistant 行左侧头像只露出一半；关闭双方头像后，
                气泡左上/右上的淡天使翅膀被切掉一块。
      v421 只锁了横向滚动（.chat-messages overflow-x:hidden），治的是"能被拖走"，
      但裁切本身还在 —— 因为把内容推出容器边缘这件事没被阻止。

      根因链（三处叠加）：
      ① `.chat-msg-inner` 是 `width:100%`（style.css），而里面的
         `.chat-msg-bubble-stack` 又是 `flex:0 1 auto` + 内容自适应宽度。
         一旦气泡内容比容器宽，stack 撑满后 8px gap + 34px 头像就超出
         100% 这个宽度，头像作为行内第一个子项被挤出容器左缘。
      ② `.chat-messages-stack` 是 `overflow:hidden`（style.css:19192），
         溢出的头像与翅膀直接被切掉 —— 图上"只剩半个"正是这个。
      ③ 翅膀是 `::after` 绝对定位、left:-5px / top:-3px（app.js xvBubblesCss），
         本来就该溢出气泡盒；外层一裁就缺角。v409 曾把外扩量从 8px/5px
         收到 5px/3px 试图绕过，那只是把刀磨小，没有拆刀。

      处理：
      · stack 允许收缩（min-width:0）并给气泡行留出头像+gap 的空间，
        保证"头像 + 气泡"整体永远在容器内 —— 不再溢出，裁切自然消失；
      · 允许气泡区可见地溢出（overflow:visible），翅膀与头像角都能露全，
        同时保留外层横向滚动锁定，不引入横向滚动条。
   ------------------------------------------------------------ */
#chat-screen .chat-msg-inner {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
/* 气泡组可收缩：宽度不足时优先压气泡，绝不把头像挤出容器。
   v439 · max-width 从 100% 收回微信式上限 76%：
   v424 写 100% 时把 style.css 的 min(100%,280px) 上限顶掉了，
   长文本气泡会一路延伸到对面头像列底下（两侧不对称）。
   76% ≈ 旧 280px 上限在常见屏宽下的比例，气泡左右两侧都给头像留位，
   恢复「你一句我一句」的对齐观感；超宽内容仍由 flex-shrink 压缩。 */
#chat-screen .chat-msg-bubble-stack {
  min-width: 0 !important;
  max-width: min(100%, 76%);
  flex-shrink: 1 !important;
}
/* 头像列：不参与收缩，且不允许被压扁（v421 加的 min-width:0 会让它被压到 0，
   正是"头像只剩半个/消失"的一环 —— 这里收紧为固定尺寸） */
#chat-screen .chat-msg-avatar,
#chat-screen .chat-msg-avatar-col {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  width: 34px !important;
}
/* 头像本体不被裁：圆形图完整显示 */
#chat-screen .chat-msg-avatar {
  overflow: hidden;
  object-fit: cover;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   v424 修正二 · 翅膀装饰被切角（问题 2 的另一半）
      翅膀是气泡的 ::after，绝对定位在气泡盒外：
        对方 left:-5px top:-3px / 19×18.3px rotate(-10deg)
        我方 right:-5px top:-3px / 19×18.3px rotate(10deg)
      即它**本来就该溢出气泡边界**。但外层 `.chat-messages-stack`
      是 `overflow:hidden`（style.css:19192），把溢出部分整体切掉 ——
      关闭双方头像后气泡变宽、装饰随之外扩，缺口就露出来了。

      v409 的处理是把外扩量从 8px/5px 收到 5px/3px，等于"把刀磨小"，
      缺口仍在，只是变小。这里改为拆刀：让 stack 允许纵向溢出可见，
      同时横向仍锁死（配合上面 .chat-messages 的 overflow-x:hidden），
      因此不会产生横向滚动条，也不会让整块内容被横向拖走。

      注意用 `:not()` 排除自定义壁纸态：那种模式下 stack 还要负责裁剪
      壁纸圆角，不能一并放开。

      ⚠️ 必须写 `overflow: visible hidden` 简写，不能只写 overflow-y：
      style.css 的基础声明是 `overflow: hidden`（简写，一次设两个方向）。
      分开写 `overflow-y: visible` 会与之竞争并被压制 —— 实测正是
      `overflow: hidden auto`，说明分写无效。这里用简写一次覆盖两方向。
   ------------------------------------------------------------ */
#chat-screen .chat-messages-stack:not(.chat-messages-stack--custom-bg) {
  overflow: visible hidden !important;
}

/* ------------------------------------------------------------
   2) 聊天区只允许垂直滚动，横向位移锁死
      症状：左右滑动时能把头像和气泡一起拖出可视区（截图里左侧头像只剩半个）。
      根因：`.chat-messages` 原本只写了 `overflow-y:auto`，横向 overflow-x 是可见的
            默认值 —— 一旦某行内容（长英文、宽卡片、group collage）比容器宽，
            整块内容就能被横向拖走。
      处理：overflow-x 明确置 hidden，横向拖不动；再给行内层补 min-width:0 与
            max-width:100%，让超宽内容自己收缩而不是把容器撑宽。
            触摸手势上再加 touch-action: pan-y，浏览器层面直接不响应横向平移。
   ------------------------------------------------------------ */
#chat-screen .chat-messages {
  overflow-x: hidden !important;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}
/* 行内层与气泡行：允许收缩、不得超过容器，避免单行内容把横向滚动条撑出来。
   v439 · .chat-msg-bubble-stack 移出本组——它微信式上限（76%）由前面
   v424 段规则统一管理，此处若再写 max-width:100% 会按出现顺序把上限顶掉。 */
#chat-screen .chat-msg-inner,
#chat-screen .chat-msg-glass-line {
  min-width: 0;
  max-width: 100%;
}
#chat-screen .chat-msg-bubble,
#chat-screen .chat-msg-card {
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* ------------------------------------------------------------
   v424 · 删除 v421 遗留的这段头像补丁
   原注释写的是「允许它贴到容器右缘而不被裁 —— 靠 min-width:0」，
   但 min-width:0 在 flex 行里恰恰是**允许被压缩到 0** 的意思，
   与意图完全相反：气泡一宽，头像就先被压扁/挤出行外，
   这就是用户截图里 assistant 侧头像「只剩半个」的成因之一。
   v423 已在前面用 `flex:0 0 auto; min-width:34px; width:34px`
   正确定死头像尺寸，此处旧规则（含更晚出现的同优先级声明）必须删掉，
   否则会反向覆盖新规则。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   4) 心声卡：去掉内框与 ✕，文字直接铺在身份面板里
      症状A：心声被套在一个白色圆角内框里，右上角还有一个 ✕。
      症状B：第一次点击只显示成两行窄文字框，第二次点才铺满。
      根因A：tweak.css 规则 5 给 .chat-heart-voice-card 自己加了
             background: rgba(255,255,255,.6) + border + padding，
             在本就有底色的 .chat-identity-panel 里套出第二层框。
      根因B：同一规则把卡片限死 max-height:96px + -webkit-line-clamp:2，
             文字被裁成两行 → 视觉上就是「窄框」；点一下加 .is-expanded
             才放开到 46vh，于是要点第二次才铺满。
      处理：卡片自身底色/边框/内边距全部归零，文字直接落在身份面板底色上；
             展开态取消高度与行数裁剪，一次性铺满（仍保留 is-expanded 类，
             供 app.js 既有 toggle 逻辑使用，不改 JS 行为）。
             ✕ 按钮已从 HTML 移除，关闭改由顶栏 💗 开关承担。
   ------------------------------------------------------------ */
/* v424 · 左侧内边距 10px → 26px，给 ::before 的引号让位。
   v421 归零内边距时把引号位置一起吃掉了，导致引号压在文字上。 */
#chat-screen .chat-identity-wrap .chat-heart-voice-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 2px 2px 26px !important;
  border-radius: 0 !important;
  max-height: none !important;
  align-self: stretch;
  /* v424 · 同步放开裁剪，否则前面改的 overflow:visible 会被这条覆盖 */
  overflow: visible !important;
}
/* v424 · 引号在心声卡内的定位（跟随 v421 去掉内框后的新位置） */
#chat-screen .chat-identity-wrap .chat-heart-voice-card::before {
  left: 2px;
  top: 0;
  z-index: 0;
}
/* 文字不再被裁成两行 —— 一次铺满 */
#chat-screen .chat-identity-wrap .chat-heart-voice-text {
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial;
  display: block !important;
  overflow: visible !important;
  max-height: none;
  /* v424 · 抬到引号之上：引号是 ::before（z-index:0），
     若不加定位层，正文会与引号同层叠放、谁先画谁被压。
     这里让文字明确高于装饰，引号只作为底纹露出。 */
  position: relative;
  z-index: 1;
  font-size: 0.75rem !important;
  line-height: 1.62;
  color: var(--text-main, #2a2a32);
}
/* 兜底：若旧缓存里还留着 ✕ 按钮节点，直接隐藏（重进页面即消失） */
#chat-screen .chat-identity-wrap .chat-heart-voice-close {
  display: none !important;
}
/* 卡片变成纯文字块后不再需要 align-self:center 的居中，跟随面板高度自然撑开 */
#chat-screen.chat-screen--no-top-avatars .chat-identity-wrap .chat-heart-voice-card {
  margin-left: 0 !important;
}

/* ------------------------------------------------------------
   v421 修正 · user 行用 row-reverse 才能把头像甩到右侧
   app.js 里 user 行的 DOM 顺序是 [bubble-stack, avatar]（经典主题走
   appendChatMsgInnerBubbleRow 的 else 分支：先 append stack 再 append avatarSlot）。
   · row        → stack 在左、avatar 在右，但整组靠左排（justify-content 决定）
   · row-reverse→ 视觉顺序翻转成 avatar 在右、stack 在左，整组仍靠右
   所以 user 行要「row-reverse + 靠右」，assistant 行要「row + 靠左」。
   glass 主题原本就是 row-reverse（style.css:23783 只把方向改回 row 却没配合对齐），
   这里统一按 DOM 顺序推导，两主题表现一致。
   ------------------------------------------------------------ */
#chat-screen .chat-msg--user .chat-msg-inner {
  flex-direction: row-reverse !important;
  justify-content: flex-end;
}
#chat-screen .chat-msg--assistant .chat-msg-inner,
#chat-screen .chat-msg--system .chat-msg-inner {
  flex-direction: row !important;
  justify-content: flex-start;
}

/* ------------------------------------------------------------
   v421 修正二 · user 行最终组合：row + flex-end
   踩坑记录：曾试过 row-reverse + flex-end 组合，两者语义冲突 ——
   row-reverse 会把 flex-end 解释成「主轴起点＝右」，于是 justify-content
   把整组推去左边，等于没推。实测（headless）：
     row-reverse + flex-end → bs.x=406 av.x=364（头像反而在气泡左边）
     row          + flex-end → 视觉顺序 stack 左 / avatar 右，整组靠右 ✅
   app.js 的 user 行 DOM 顺序是 [stack, avatar]，所以 row 就已经能把头像甩到右边，
   不需要 row-reverse；justify-content:flex-end 只负责把整组贴到右缘。
   ------------------------------------------------------------ */
#chat-screen .chat-msg--user .chat-msg-inner {
  flex-direction: row !important;
  justify-content: flex-end;
}

/* ============================================================
   v426 · 玻璃唯一化 + 气泡/头像渲染修复
   ------------------------------------------------------------
   背景：v426 起玻璃是唯一保留外观（经典分支与其切换入口一并删除），
   本段一次性收拾玻璃态下遗留的三处渲染缺陷。这些都是「覆盖前面
   v421/v423/v424 的 !important 补丁」—— 那些补丁当年为双主题而写，
   在玻璃唯一化后其中部分结论反了，故在此以更高优先级纠正。

   ① 气泡被拆成竖排细条 / 看起来"重复"（用户截图 2）
      症状：一条消息里的多个气泡横向排开，每个被压成 60~80px 的细长条、
            文字一个字一行；头像夹在气泡之间，整屏看起来像同一句话重复很多遍。
      根因：`.chat-msg-inner--glass-stacked`（style.css）负责把多个
            `.chat-msg-glass-line` **纵向**堆叠；但本文件 v421 段的
            `#chat-screen .chat-msg--assistant .chat-msg-inner
             { flex-direction: row !important }`
            权重更高且带 !important，把它压成 row，纵向堆叠失效，
            所有 glass-line 挤进同一行 flex 里均分宽度。
            再叠加 style.css 的 `max-width: min(calc(100% - 40px), 248px)`
            + `width: max-content`，长句就被压成极窄竖条。
      实测（headless 390px）：修复前 b-multi 行 dir=row、三个 stack
      宽 84/78/61px、气泡高 117/97/155px（一个字一行）。
      处理：把 glass-stacked 的纵向排列写成高权重 !important 规则，
            并让该状态下 bubble-stack 回到「按内容宽度」，不再同行均分。

   ② 头像被裁 / 变形
      症状：左侧头像只露出一半；或被压成非正圆。
      根因：① 的 row !important 让「头像 + 气泡」在窄行里争空间，
            stack 的 max-content 把整行撑到超出容器，被
            `.chat-messages-stack` 的 overflow 裁掉，即"只剩半个"。
            另外玻璃态头像声明 `width:32px;height:32px`，而本文件 v424 段
            写了 `width:34px !important`，实测出现 34×32 的非正方形 —— 圆头像被压扁即"变形"。
      处理：玻璃下头像宽高一致地锁死为 34×34，avatar-col 不参与压缩。

   ③ 套装预览被压成窄条
      症状：截图 3 三张套装预览里的气泡被压成竖排细条。
      根因：玻璃 stack 的 `width:max-content` + `max-width:min(...,248px)`
            命中预览区；v414 段只回收了 max-width/width，
            没回收 flex-direction 与 max-content 的组合效应。
      处理：预览区强制纵向堆叠 + 按内容宽度。
   ============================================================ */

/* ① 玻璃多气泡行：恢复纵向堆叠。
      ⚠️ 权重必须与 v421 段的 `#chat-screen .chat-msg--assistant .chat-msg-inner`
      （id + 2 class = 0,2,0）**齐平或更高**，否则那条 row !important 会赢。
      这里补一个 `.chat-msg--assistant/.chat-msg--system/.chat-msg--user` 的
      角色限定，使本规则达到 id + 2 class，与对手同权重；
      再靠「源文件里出现得更晚」胜出（同权重时后者生效）。
      实测（headless）：修正前 computed=row、三个气泡宽 84/78/61px；
      修正后应为 column、每条 glass-line 独占一行。 */
#chat-screen .chat-msg--assistant .chat-msg-inner--glass-stacked,
#chat-screen .chat-msg--system .chat-msg-inner--glass-stacked,
#chat-screen .chat-msg--user .chat-msg-inner--glass-stacked {
  flex-direction: column !important;
  /* v440 · 与消息行 `.chat-messages` 的 12px 统一，消除第一条与第二条之间
     间距明显更大的割裂感（此前内层 8px / 外层 12px 不一致）。 */
  gap: 12px;
  width: 100%;
  max-width: 100%;
}
#chat-screen .chat-msg--assistant .chat-msg-inner--glass-stacked,
#chat-screen .chat-msg--system .chat-msg-inner--glass-stacked {
  align-items: flex-start !important;
}
#chat-screen .chat-msg--user .chat-msg-inner--glass-stacked {
  align-items: flex-end !important;
}
/* ② 单气泡行：v421 的方向结论在玻璃下依然正确，用 :not() 排除多气泡行即可 */
#chat-screen .chat-msg--assistant .chat-msg-inner:not(.chat-msg-inner--glass-stacked),
#chat-screen .chat-msg--system .chat-msg-inner:not(.chat-msg-inner--glass-stacked) {
  flex-direction: row !important;
  justify-content: flex-start;
}
#chat-screen .chat-msg--user .chat-msg-inner:not(.chat-msg-inner--glass-stacked) {
  flex-direction: row !important;
  justify-content: flex-end;
}
/* ② 头像正方形锁死：此前只有 min-width:34px + width:34px，
      与玻璃的 32×32 撞车导致 34×32 压扁变形 */
#chat-screen .chat-msg-avatar,
#chat-screen .chat-msg-avatar-col {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  width: 34px !important;
  max-width: 34px !important;
}
#chat-screen .chat-msg-avatar {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}
/* ① 每个 glass-line 内部：头像列 + 气泡栈同行，整组不撑破容器 */
#chat-screen .chat-msg-glass-line {
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  width: auto;
}
/* 修复：用户多气泡（玻璃纵向堆叠）头像翻到左侧的问题。
   JS 在 appendChatMsgInnerBubbleRow 里对 user 行执行 line.append(groupStack, av)
   （气泡在前、头像在后）。若此处用 row-reverse，头像作为末子元素被推到左侧，
   与「用户头像在右」的玻璃规范相反——这就是带符号（图片协议/插卡/空行分段）
   发多气泡消息时头像翻过去的根因。正确方向应为 row（与单气泡 :not(.glass-stacked)
   规则一致），justify-content:flex-end 把整组贴右。 */
#chat-screen .chat-msg--user .chat-msg-glass-line {
  flex-direction: row !important;
  justify-content: flex-end;
}
/* ① 纵向堆叠下的气泡栈：按内容宽度；去掉 style.css 里
      min(calc(100% - 40px), 248px) 的同行预留（纵向不需要给头像留横向位置） */
#chat-screen .chat-msg-inner--glass-stacked .chat-msg-glass-line .chat-msg-bubble-stack,
#chat-screen .chat-msg-inner--glass-stacked > .chat-msg-bubble-stack {
  width: max-content;
  max-width: 100% !important;
  min-width: 0;
  flex-shrink: 1;
}
/* ③ 套装预览：同样强制纵向堆叠 + 内容宽度 */
.xv-ward-preview .chat-msg-inner,
.xv-ward-preview .chat-msg-glass-line {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px;
}
.xv-ward-preview .chat-msg--user .chat-msg-inner,
.xv-ward-preview .chat-msg--user .chat-msg-glass-line {
  align-items: flex-end !important;
}
.xv-ward-preview .chat-msg-bubble-stack {
  width: max-content !important;
  max-width: 100% !important;
}