:root {
  --bg-body: #f0f1f3;
  --bg-card: #ffffff;
  /* 与卡片同源：机内、Dock 缝、墙纸底同一面，无「多出来一块底」的分界感 */
  --bg-device: var(--bg-card);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.86);
  --line: #e7e8ea;
  --text-main: #17191c;
  --text-sub: #6d727b;
  --shadow-card: 0 5px 24px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 12px 36px rgba(0, 0, 0, 0.08);
  --accent: #3a5c89;
  /* Palette：由 app.js 写入，供渐变 / 高光统一换色 */
  --tint-rgb: 58, 92, 137;
  --blush-rgb: 255, 120, 196;
  /* 聊天气泡：默认系统 UI 字体；app.js applyGlobalUiTypography 会统一注入（有全局字体用全局） */
  --chat-msg-content-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

body.dark {
  --bg-body: #101113;
  --bg-card: #232529;
  --bg-device: var(--bg-card);
  /* 与浅色一致：仅用实底/实线，不用半透明磨砂变量 */
  --glass-bg: #232529;
  --glass-border: #353942;
  --line: #2f3136;
  --text-main: #f0f2f6;
  --text-sub: #a2a7b1;
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.4);
  /* accent / tint / blush 由 app.js 按 Palette 与深浅色写入 html 行内变量，勿在此覆盖 */
}

/* 全局不用毛玻璃：安卓易出灰条、浅色下统一实底更清晰 */
.auth-overlay,
.auth-card,
.settings-masthead,
.settings-masthead-tape,
.settings-panel,
.chip.ghost,
.hero-card,
.polaroid-card .tape,
.app-tower,
.dock,
.drawer,
.chat-bubble-actions-backdrop,
.chat-inner-voice-backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chat-send-choice[hidden] {
  display: none;
}

.chat-send-choice {
  position: fixed;
  inset: 0;
  z-index: 10080;
}

.chat-send-choice-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background: rgba(10, 12, 16, 0.38);
}

.chat-more-sheet[hidden] {
  display: none;
}
.chat-more-sheet {
  position: fixed;
  inset: 0;
  z-index: 10085;
  isolation: isolate;
  /* default theme */
  --ms-card-r: 28px;
  --ms-card-bg: var(--bg-card);
  --ms-card-border: rgba(var(--tint-rgb), 0.12);
  --ms-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 22px 64px rgba(0, 0, 0, 0.16);
  --ms-tile-border: rgba(var(--tint-rgb), 0.12);
  --ms-tile-bg: rgba(var(--tint-rgb), 0.02);
  --ms-tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 14px 34px rgba(0, 0, 0, 0.06);
  --ms-ico-bg: rgba(var(--tint-rgb), 0.06);
  --ms-ico-border: rgba(var(--tint-rgb), 0.12);
  --ms-ico-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.chat-more-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 12, 16, 0.38);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.chat-more-sheet.is-open .chat-more-sheet-backdrop { opacity: 1; }

/* Chat "More" uses the app's existing drawer system */
.chat-more-sheet .chat-more-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.chat-more-drawer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chat-more-persona-wrap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.chat-more-persona-wrap[hidden] {
  display: none !important;
}
.chat-more-drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-more-drawer-item i { font-size: 1.08rem; color: var(--accent); }
.chat-more-drawer-item span { font-weight: 600; }
.chat-more-sheet-card {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(22px);
  width: min(520px, calc(100vw - 28px));
  border-radius: var(--ms-card-r);
  border: 1px solid var(--ms-card-border);
  background: var(--ms-card-bg);
  box-shadow: var(--ms-card-shadow);
  padding: 10px 14px 12px;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
body.dark .chat-more-sheet-card {
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 26px 66px rgba(0, 0, 0, 0.48);
}
.chat-more-sheet.is-open .chat-more-sheet-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.chat-more-sheet-handle {
  width: 52px;
  height: 6px;
  border-radius: 99px;
  margin: 4px auto 12px;
  background: rgba(var(--tint-rgb), 0.16);
}
body.dark .chat-more-sheet-handle {
  background: rgba(255, 255, 255, 0.12);
}

/* More sheet → align with inner-voice / archive panels */
.chat-more-panel {
  width: min(404px, calc(100vw - 28px));
  height: min(64vh, 540px);
  max-height: min(64vh, 540px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
.chat-more-sheet.is-open .chat-more-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.redpack-sheet[hidden] {
  display: none;
}
.redpack-sheet {
  position: fixed;
  inset: 0;
  z-index: 10090;
  overscroll-behavior: none;
  touch-action: manipulation;
  --rp-r: 24px;
  --rp-border: rgba(0, 0, 0, 0.08);
  --rp-shadow: 0 18px 70px rgba(0, 0, 0, 0.22);
  --rp-head-border: rgba(0, 0, 0, 0.06);
  --rp-form-bg: rgba(0, 0, 0, 0.02);
  --rp-form-border: rgba(0, 0, 0, 0.06);
  --rp-field-bg: rgba(255, 255, 255, 0.92);
  --rp-field-border: rgba(0, 0, 0, 0.08);
  --rp-ring: rgba(var(--tint-rgb), 0.18);
}
.redpack-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.redpack-sheet.is-open .redpack-sheet-backdrop { opacity: 1; }

.sticker-sheet[hidden] {
  display: none;
}
.sticker-sheet {
  position: fixed;
  inset: 0;
  z-index: 10092;
  /* iOS/Instagram-ish palette */
  --st-r: 24px;
  --st-border: rgba(0, 0, 0, 0.08);
  --st-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  --st-field-bg: rgba(242, 242, 247, 0.92);
  --st-field-border: rgba(0, 0, 0, 0.06);
  --st-hairline: rgba(0, 0, 0, 0.06);
  --st-pill-bg: rgba(255, 255, 255, 0.86);
  --st-pill-border: rgba(0, 0, 0, 0.06);
  --st-ig-a: #ff4fd8;
  --st-ig-b: #ff6a3d;
}
.sticker-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 12, 16, 0.55);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.sticker-sheet.is-open .sticker-sheet-backdrop {
  opacity: 1;
}
.sticker-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(520px, calc(100vw - 28px));
  max-height: min(86vh, calc(100dvh - 24px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--st-r);
  border: 1px solid var(--st-border);
  background: #ffffff;
  box-shadow:
    var(--st-shadow),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
  opacity: 0;
  isolation: isolate;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
body.dark .sticker-card {
  border-color: rgba(255, 255, 255, 0.10);
  background: #1c1e22;
  box-shadow:
    0 42px 140px rgba(0, 0, 0, 0.72),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.sticker-sheet.is-open .sticker-card {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* 聊天发送：微信式底部表情面板（iOS 勿用 left:50%+100vw+translateX，易整卡右偏/右侧留白） */
#sticker-sheet[data-mode="pick"] .sticker-card {
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(0px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 100%;
  height: min(58vh, 560px);
  max-height: min(58vh, 560px);
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
  transform: none;
  opacity: 0;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: opacity 0.18s ease;
}
body.dark #sticker-sheet[data-mode="pick"] .sticker-card {
  background: #1c1e22;
  box-shadow: 0 -30px 120px rgba(0, 0, 0, 0.70);
}
.sticker-sheet.is-open#sticker-sheet[data-mode="pick"] .sticker-card,
#sticker-sheet.is-open[data-mode="pick"] .sticker-card {
  opacity: 1;
  transform: none;
}

#sticker-sheet[data-mode="pick"] .sticker-head {
  display: none;
}
#sticker-sheet[data-mode="pick"] .sticker-body {
  padding: 12px 12px max(10px, env(safe-area-inset-bottom, 0px));
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#sticker-sheet[data-mode="pick"] .sticker-grid {
  flex: 0 0 auto;
  min-height: auto;
  min-width: 0;
  overflow: visible;
  margin-top: 0;
  align-content: start;
  width: 100%;
  box-sizing: border-box;
  /* 聊天底栏表情：固定 3～4 列，勿跟全屏管理页走到 5 列 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
}
@media (min-width: 360px) {
  #sticker-sheet[data-mode="pick"] .sticker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
#sticker-sheet[data-mode="manage"] .sticker-grid,
.sticker-sheet:not([data-mode="pick"]) .sticker-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#sticker-sheet[data-mode="pick"] .sticker-toolbar,
#sticker-sheet[data-mode="pick"] #sticker-hint {
  display: none !important;
}
#sticker-sheet[data-mode="pick"] .sticker-item {
  align-self: start;
  width: 100%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
#sticker-sheet[data-mode="pick"] .sticker-item-cap {
  font-size: 0.52rem;
  padding: 4px 5px 5px;
  min-height: 2.1em;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
#sticker-sheet[data-mode="pick"] #sticker-sheet-cats {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  margin-top: 0;
  padding: 0 0 6px;
  border-top: 0;
  background: #ffffff;
}
body.dark #sticker-sheet[data-mode="pick"] #sticker-sheet-cats {
  background: #1c1e22;
}
#sticker-sheet[data-mode="pick"] #sticker-sheet-cats[hidden] {
  display: none !important;
}

.sticker-suggest[hidden] { display: none; }
.sticker-suggest {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(242, 242, 247, 0.92);
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
body.dark .sticker-suggest {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
}
.sticker-suggest::-webkit-scrollbar { display: none; }
.sticker-suggest-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  cursor: pointer;
}
body.dark .sticker-suggest-item {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}
.sticker-suggest-thumb {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.02);
  flex: 0 0 auto;
}
body.dark .sticker-suggest-thumb {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
}
.sticker-suggest-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.sticker-suggest-name {
  font-size: 0.78rem;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.72);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.dark .sticker-suggest-name {
  color: rgba(255, 255, 255, 0.88);
}
.sticker-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
  border-bottom: 1px solid var(--st-hairline);
}
body.dark .sticker-head {
  background: linear-gradient(180deg, rgba(20, 22, 26, 0.90), rgba(20, 22, 26, 0.66));
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.sticker-badge {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.72);
}
body.dark .sticker-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.50);
  color: rgba(255, 255, 255, 0.88);
}
.sticker-badge i {
  font-size: 1.15rem;
}
.sticker-head-text {
  min-width: 0;
  flex: 1;
}
.sticker-desc {
  margin-top: 2px;
}
.sticker-body {
  padding: 12px 14px 14px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sticker-head {
  flex-shrink: 0;
}
.sticker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#sticker-sheet[data-mode="pick"] #sticker-sheet-export-json,
#sticker-sheet[data-mode="pick"] #sticker-sheet-import-json,
#sticker-sheet[data-mode="pick"] #sticker-add-open,
#sticker-sheet[data-mode="pick"] #sticker-sheet-import-input {
  display: none !important;
}
.sticker-toolbar-spacer {
  flex: 1;
}
.sticker-add {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sticker-manager {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sticker-screen .settings-body {
  /* iOS grouped background；全屏表情库无 Dock，去掉 96px 底预留 */
  background: rgba(242, 242, 247, 0.92);
  padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px)));
}
body.dark .sticker-screen .settings-body {
  background: rgba(16, 17, 19, 0.92);
}
.sticker-screen .settings-inner {
  background: transparent;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sticker-screen .sticker-manager {
  max-width: 720px;
  margin: 0 auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wardrobe-screen .settings-body {
  background: rgba(242, 242, 247, 0.92);
}
body.dark .wardrobe-screen .settings-body {
  background: rgba(16, 17, 19, 0.92);
}
.wardrobe-screen .settings-inner {
  background: transparent;
}
.wardrobe-body {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.wardrobe-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
}
.wardrobe-screen .widget-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.wardrobe-screen .widget-label i {
  font-size: 1.05rem;
  opacity: 0.72;
}
.wardrobe-masthead {
  background:
    linear-gradient(145deg, rgba(var(--tint-rgb), 0.09), transparent 42%),
    var(--bg-card);
}
body.dark .wardrobe-masthead {
  background:
    linear-gradient(145deg, rgba(var(--tint-rgb), 0.12), transparent 48%),
    var(--bg-card);
}
.wardrobe-section {
  margin-bottom: 0;
}
.wardrobe-panel {
  overflow: hidden;
}
.wardrobe-panel-lead {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.55;
}
.wardrobe-panel-lead code {
  font-size: 0.9em;
}
.wardrobe-panel-field {
  padding: 12px 16px 12px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.wardrobe-panel:has(.wardrobe-panel-footer) .wardrobe-panel-field:last-of-type {
  border-bottom: none;
}
.wardrobe-panel > .settings-api-field.wardrobe-panel-field:last-child {
  border-bottom: none;
}
.wardrobe-panel-field--preview .settings-api-field-k {
  margin-bottom: 4px;
}
.wardrobe-preview-hint {
  margin: 0 0 10px;
}
.wardrobe-panel-field--presets {
  padding-bottom: 14px;
}
.wardrobe-panel-field--presets .ward-preset-head {
  margin-bottom: 8px;
}
.wardrobe-panel-field--presets .settings-api-field-k {
  letter-spacing: 0.12em;
}
.wardrobe-io-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.wardrobe-stack > .wardrobe-io-row {
  margin: 0 2px 0 6px;
}
.wardrobe-io-label {
  flex: 1 1 100%;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin: 0 0 2px;
}
@media (min-width: 520px) {
  .wardrobe-io-label {
    flex: 0 1 auto;
    margin: 0 4px 0 0;
  }
}
.wardrobe-io-btn i {
  font-size: 0.95rem;
  opacity: 0.88;
}
.wardrobe-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.04);
}
body.dark .wardrobe-toolbar {
  background: rgba(255, 255, 255, 0.03);
}
.wardrobe-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wardrobe-toolbar-btn i {
  font-size: 0.95rem;
  opacity: 0.88;
}
.wardrobe-toolbar-label {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-right: -2px;
}
.wardrobe-toolbar-sep {
  width: 1px;
  height: 1.1rem;
  margin: 0 2px;
  background: var(--line);
  flex-shrink: 0;
}
.wardrobe-css-kind-note {
  margin: 0 14px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.05);
  line-height: 1.45;
}
/* 装扮与卷宗「自定义 CSS」共用，与主聊天列表视觉对齐的缩略预览壳 */
.chat-detail-thread-ui-css-preview {
  margin-top: 2px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
body.dark .chat-detail-thread-ui-css-preview {
  background: rgba(255, 255, 255, 0.04);
}
#wardrobe-chat-css-preview { width: 100%; box-sizing: border-box; }
#wardrobe-chat-css-preview .chat-msg { width: 100%; }
#wardrobe-chat-css-preview .chat-msg-inner { width: auto; max-width: 100%; }
#wardrobe-chat-css-preview.chat-screen--theme-glass .chat-msg-bubble-stack {
  max-width: min(100%, 248px) !important;
  width: max-content;
}
#wardrobe-chat-css-preview.chat-screen--theme-glass .chat-msg-bubble:not(.chat-msg-bubble--sticker) {
  max-width: min(100%, 248px);
  width: max-content;
}
.wardrobe-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.wardrobe-file-hint {
  font-size: 0.64rem;
  color: var(--text-sub);
  margin: 0;
  flex: 1;
  min-width: 120px;
}
.wardrobe-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
}
.wardrobe-check-row input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent, #6b5cff);
}
.wardrobe-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.wardrobe-size-range {
  flex: 1;
  min-width: 140px;
}
.wardrobe-size-value {
  min-width: 2.75rem;
}
.wardrobe-panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.03);
}
body.dark .wardrobe-panel-footer {
  background: rgba(255, 255, 255, 0.03);
}
.wardrobe-panel-footer .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wardrobe-panel-footer .chip i {
  font-size: 0.95rem;
  opacity: 0.88;
}
.ward-desktop-icons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.ward-desktop-icon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px auto auto;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.02);
}
body.dark .ward-desktop-icon-row {
  background: rgba(255, 255, 255, 0.03);
}
.ward-desktop-icon-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ward-desktop-icon-name {
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--text-main);
}
.ward-desktop-icon-hint {
  font-size: 0.62rem;
  color: var(--text-sub);
}
.ward-desktop-icon-preview {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.06);
  flex-shrink: 0;
}
.ward-desktop-icon-preview.is-empty {
  opacity: 0.38;
}
.ward-desktop-icon-url-field {
  margin-top: 14px;
}
.ward-desktop-icon-url-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.ward-desktop-icon-url-select {
  flex: 0 1 120px;
  min-width: 0;
}
.ward-desktop-icon-url-input {
  flex: 1 1 180px;
  min-width: 0;
}
.ward-desktop-icons-footer {
  margin-top: 4px;
}
.ward-app-tower-bg-panel {
  margin-top: 14px;
}
.ward-dock-bg-panel {
  margin-top: 14px;
}
.dock-plate.has-custom-dock-bg {
  isolation: isolate;
}
.app-tower.has-custom-app-tower-bg {
  isolation: isolate;
}
.app-nora.has-custom-app-tile-bg {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
body.dark .app-nora.has-custom-app-tile-bg {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.ward-hero-card-preview-row {
  margin-top: 8px;
}
.ward-hero-card-preview-wrap {
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: rgba(var(--tint-rgb), 0.04);
  max-width: 100%;
}
.ward-hero-card-preview {
  display: block;
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  min-height: 72px;
}
.ward-hero-card-preview.is-empty {
  opacity: 0.35;
  min-height: 80px;
  object-fit: none;
}
.ward-hero-card-url-input {
  flex: 1 1 200px;
  min-width: 0;
}
.ward-chat-css-textarea {
  min-height: 220px;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.03);
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  color: var(--text-main);
}
.ward-chat-css-textarea::placeholder {
  color: var(--text-sub);
  opacity: 0.65;
}
.ward-chat-css-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
body.dark .ward-chat-css-textarea {
  background: rgba(255, 255, 255, 0.04);
}
.ward-preset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ward-chat-css-presets {
  margin-top: 4px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.02);
  padding: 4px 12px;
  max-height: 220px;
  overflow-y: auto;
}
body.dark .ward-chat-css-presets {
  background: rgba(255, 255, 255, 0.03);
}
.chat-ui-css-preset-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.dark .chat-ui-css-preset-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.chat-ui-css-preset-row:last-child {
  border-bottom: 0;
}
.chat-ui-css-preset-name {
  font-size: 0.8rem;
  max-width: min(200px, 46vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-ui-css-preset-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sticker-manager-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.sticker-screen .sticker-manager-head {
  position: relative;
  z-index: 1;
  padding: 10px 0 8px;
  background: linear-gradient(180deg, rgba(242, 242, 247, 0.92), rgba(242, 242, 247, 0.66));
}
.sticker-screen .sticker-cats {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 4px 2px 6px;
}
.sticker-screen .sticker-hint {
  flex-shrink: 0;
}
body.dark .sticker-screen .sticker-manager-head {
  background: linear-gradient(180deg, rgba(16, 17, 19, 0.72), rgba(16, 17, 19, 0.40));
}
.sticker-manager-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.02);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}
body.dark .sticker-manager-search {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.55);
}
.sticker-manager-search i {
  color: rgba(60, 60, 67, 0.60);
  font-size: 1.05rem;
}
body.dark .sticker-manager-search i {
  color: rgba(235, 235, 245, 0.60);
}
.sticker-manager-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 0.86rem;
}
.sticker-manager-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  z-index: 5;
  flex: 1 1 168px;
  min-width: 0;
}
.sticker-add-cta {
  pointer-events: auto;
}
.sticker-add-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #111 !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  transform: translateZ(0);
  transition: transform 0.12s ease, filter 0.14s ease, box-shadow 0.16s ease;
}
body.dark .sticker-add-cta {
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.55);
}
.sticker-add-cta:hover {
  filter: none;
}
.sticker-add-cta:active {
  transform: scale(0.98);
}
.sticker-add-cta i {
  font-size: 0.95rem;
}
.sticker-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 2px;
}
.sticker-cats::-webkit-scrollbar { display: none; }
.sticker-cat {
  flex: 0 0 auto;
  border: 1px solid var(--st-pill-border);
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--st-pill-bg);
  color: rgba(60, 60, 67, 0.78);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
body.dark .sticker-cat {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(235, 235, 245, 0.72);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.50);
}
.sticker-cat.is-active {
  background: #fff;
  color: #111;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}
body.dark .sticker-cat.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}
.sticker-cat:active {
  transform: scale(0.98);
}
.sticker-add-box {
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 56px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.70) inset;
  overflow: hidden;
}
body.dark .sticker-add-box {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.60);
}
.sticker-add-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 900;
}
.sticker-add-summary:active {
  background: rgba(0, 0, 0, 0.03);
}
body.dark .sticker-add-summary:active {
  background: rgba(255, 255, 255, 0.05);
}
.sticker-add-summary::-webkit-details-marker { display: none; }
.sticker-add-summary i { color: var(--text-sub); }
.sticker-add-box[open] .sticker-add-summary i { transform: rotate(180deg); }
.sticker-add-box .sticker-add-modes { padding: 10px 14px 0; }
.sticker-add-box .sticker-add-body { padding: 12px 14px 14px; }
.sticker-muted {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(var(--tint-rgb), 0.02);
}
body.dark .sticker-muted {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.sticker-add-modal[hidden] { display: none; }
.sticker-add-modal {
  position: fixed;
  inset: 0;
  z-index: 10120;
}
.sticker-add-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 12, 16, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.sticker-add-modal.is-open .sticker-add-backdrop {
  opacity: 1;
}
.sticker-add-card {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  top: auto;
  transform: translateX(-50%) translateY(18px);
  width: min(520px, calc(100vw - 20px));
  max-height: min(78vh, calc(100dvh - 24px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.sticker-add-card::before {
  /* IG subtle gradient header line (no glow) */
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--st-ig-a), var(--st-ig-b));
}
body.dark .sticker-add-card {
  border-color: rgba(255, 255, 255, 0.10);
  background: #1c1e22;
  box-shadow:
    0 42px 130px rgba(0, 0, 0, 0.62),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.sticker-add-modal.is-open .sticker-add-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sticker-export-modal[hidden] { display: none; }
.sticker-export-modal {
  position: fixed;
  inset: 0;
  z-index: 10126;
}
.sticker-export-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 12, 16, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.sticker-export-modal.is-open .sticker-export-backdrop { opacity: 1; }
.sticker-export-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, calc(100vw - 24px));
  max-height: min(72vh, 560px);
  transform: translate(-50%, calc(-50% + 8px));
  opacity: 0;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.18);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
body.dark .sticker-export-card {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(20, 22, 26, 0.98);
  box-shadow: 0 34px 96px rgba(0, 0, 0, 0.56);
}
.sticker-export-modal.is-open .sticker-export-card {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.sticker-export-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
}
body.dark .sticker-export-head {
  border-bottom-color: rgba(255, 255, 255, 0.10);
  background: rgba(20, 22, 26, 0.98);
}
.sticker-export-title { font-weight: 900; letter-spacing: 0.02em; flex: 1 1 auto; }
.sticker-export-body { padding: 12px 14px 14px; overflow: auto; }
.sticker-export-lead { margin: 0 0 10px; color: rgba(0, 0, 0, 0.68); font-size: 0.92rem; }
body.dark .sticker-export-lead { color: rgba(255, 255, 255, 0.70); }
.sticker-export-chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.sticker-export-actions {
  display: flex;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
}
body.dark .sticker-export-actions {
  border-top-color: rgba(255, 255, 255, 0.10);
  background: rgba(20, 22, 26, 0.98);
}
.sticker-export-actions .chip { flex: 1 1 0; justify-content: center; }
.sticker-export-actions .chip.solid { border: 0; background: #111; color: #fff; }
body.dark .sticker-export-actions .chip.solid { background: rgba(255, 255, 255, 0.92); color: #101113; }
.sticker-add-handle {
  width: 56px;
  height: 6px;
  border-radius: 999px;
  margin: 10px auto 2px;
  background: rgba(var(--tint-rgb), 0.22);
}
body.dark .sticker-add-handle {
  background: rgba(255, 255, 255, 0.16);
}
.sticker-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
}
body.dark .sticker-add-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: #1c1e22;
}
.sticker-add-title {
  font-weight: 900;
  letter-spacing: 0.01em;
  font-size: 1.06rem;
}
.sticker-add-modes {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  overflow-x: auto;
  flex-shrink: 0;
}
.sticker-add-mode {
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: #fff;
  color: rgba(0, 0, 0, 0.72);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.sticker-add-mode.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}
body.dark .sticker-add-mode {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}
body.dark .sticker-add-mode.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: #101113;
}
.sticker-add-mode:active {
  transform: scale(0.98);
}
.sticker-add-body {
  padding: 12px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sticker-add-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sticker-add-panel[hidden] { display: none; }
.sticker-add-upload {
  border-radius: 18px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: rgba(var(--tint-rgb), 0.02);
  padding: 16px;
  cursor: pointer;
  user-select: none;
}
body.dark .sticker-add-upload {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.sticker-add-upload-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  color: var(--text-sub);
}
.sticker-add-upload-preview {
  width: min(100%, 220px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: clamp(96px, 28vw, 148px);
  max-height: min(40vh, 180px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  box-sizing: border-box;
}
body.dark .sticker-add-upload-preview {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
}
.sticker-add-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sticker-add-upload-k {
  font-weight: 800;
  color: var(--text-main);
}
.sticker-add-upload-s {
  font-size: 0.72rem;
}
.sticker-add-actions {
  display: flex;
  gap: 10px;
  padding: 10px 16px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
body.dark .sticker-add-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.sticker-add-actions .chip {
  flex: 1;
  justify-content: center;
}
.sticker-add-actions .chip {
  padding: 12px 14px;
  font-weight: 900;
  border-radius: 18px;
}
.sticker-add-actions .chip.solid {
  border: 0;
  background: #111;
  color: #fff;
}
body.dark .sticker-add-actions .chip.solid {
  background: rgba(255, 255, 255, 0.92);
  color: #101113;
}

.wallet-bills-modal[hidden] { display: none; }
.wallet-bills-modal {
  position: fixed;
  inset: 0;
  z-index: 10130;
}
.wallet-bills-modal.is-open .wallet-bills-backdrop { opacity: 1; }
.wallet-bills-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 12, 16, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.wallet-bills-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(520px, calc(100vw - 20px));
  max-height: min(86vh, 720px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.wallet-bills-modal.is-open .wallet-bills-card {
  opacity: 1;
  transform: translate(-50%, -50%);
}
body.dark .wallet-bills-card {
  border-color: rgba(255, 255, 255, 0.10);
  background: #1c1e22;
  box-shadow: 0 42px 130px rgba(0, 0, 0, 0.62);
}
.wallet-bills-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
}
body.dark .wallet-bills-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: #1c1e22;
}
.wallet-bills-title {
  font-weight: 900;
  letter-spacing: 0.01em;
}
.wallet-bills-spacer { flex: 1; }
.wallet-bills-body {
  padding: 10px 14px 14px;
  overflow: auto;
  min-height: 0;
}
.wallet-bills-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wallet-bill {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(242, 242, 247, 0.92);
  display: flex;
  align-items: center;
  gap: 10px;
}
body.dark .wallet-bill {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
}
.wallet-bill-main { flex: 1; min-width: 0; }
.wallet-bill-title {
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.xxji-import-lead {
  margin: 0 0 12px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-sub);
}
.xxji-import-lead strong {
  font-weight: 600;
  color: var(--text-main);
}
.xxji-import-lead.backup-export-privacy-tip {
  border-left: 2px solid var(--line);
  padding-left: 10px;
  margin-top: -4px;
}
.xxji-import-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.xxji-import-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-main);
  cursor: pointer;
}
.xxji-import-check input {
  flex-shrink: 0;
}
.xxji-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.backup-zip-section-title {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.backup-zip-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.backup-zip-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.backup-zip-check-row .xxji-import-check {
  flex: 1;
  min-width: 0;
}
.backup-zip-size {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-sub);
  max-width: 52%;
  text-align: right;
  line-height: 1.35;
}
.backup-zip-size.is-warn {
  color: #8b2e2e;
}
.backup-zip-sep {
  height: 1px;
  margin: 18px 0 14px;
  background: var(--line);
  opacity: 0.85;
}
.backup-zip-import-status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.backup-zip-import-status[hidden] {
  display: none;
}
.backup-zip-import-status.is-pending {
  color: var(--text-muted, #5c6570);
  background: rgba(var(--tint-rgb, 58, 92, 137), 0.08);
  border: 1px solid rgba(var(--tint-rgb, 58, 92, 137), 0.18);
}
.backup-zip-import-status.is-ok {
  color: #1a5c38;
  background: rgba(52, 168, 110, 0.12);
  border: 1px solid rgba(52, 168, 110, 0.35);
}
.backup-zip-import-status.is-err {
  color: #8b2e2e;
  background: rgba(220, 80, 80, 0.1);
  border: 1px solid rgba(220, 80, 80, 0.28);
}
body.dark .backup-zip-import-status.is-ok {
  color: #9de8c0;
  background: rgba(52, 168, 110, 0.16);
  border-color: rgba(52, 168, 110, 0.4);
}
body.dark .backup-zip-import-status.is-err {
  color: #ffb4b4;
  background: rgba(220, 80, 80, 0.14);
  border-color: rgba(220, 80, 80, 0.35);
}
.backup-zip-import-run:disabled {
  opacity: 0.55;
  pointer-events: none;
}
.backup-zip-import-fileline {
  margin: 0 0 10px;
  font-size: 0.74rem;
  color: var(--text-sub);
  word-break: break-all;
}
.wallet-bills-body.backup-zip-body {
  max-height: min(74vh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.backup-cloud-github-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.backup-cloud-github-fields .settings-api-field {
  margin-bottom: 6px;
}
.backup-cloud-github-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.backup-cloud-github-advanced {
  margin: 4px 0 0;
  font-size: 0.76rem;
  color: var(--text-sub);
}
.backup-cloud-github-advanced summary {
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.backup-cloud-github-advanced summary::-webkit-details-marker {
  display: none;
}
.backup-cloud-github-advanced summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
.backup-cloud-github-advanced[open] summary::before {
  transform: rotate(90deg);
}
.backup-cloud-github-advanced-body {
  padding: 6px 0 2px;
}
.backup-cloud-auto-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.dark .backup-cloud-auto-block {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.backup-cloud-auto-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.backup-cloud-auto-head-text {
  flex: 1;
  min-width: 0;
}
.backup-cloud-auto-k {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}
.backup-cloud-auto-interval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.backup-cloud-auto-select {
  min-width: 132px;
  max-width: 180px;
}
.backup-cloud-auto-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.backup-cloud-auto-custom[hidden] {
  display: none !important;
}
.backup-cloud-auto-hours {
  width: 88px;
}
@media (max-width: 520px) {
  .backup-cloud-github-row2 {
    grid-template-columns: 1fr;
  }
}

.wallet-bill-note {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.3;
}
.wallet-bill-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--text-sub);
}
.wallet-bill-delta {
  font-weight: 900;
}
.wallet-bill-delta.is-pos { color: #0a7a3c; }
body.dark .wallet-bill-delta.is-pos { color: rgba(96, 220, 145, 0.92); }
.wallet-bill-delta.is-neg { color: #c01f1f; }
body.dark .wallet-bill-delta.is-neg { color: rgba(255, 120, 120, 0.92); }
.wallet-bill-del {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.dark .wallet-bill-del {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
}

.mask-switch-modal[hidden] { display: none; }
.mask-switch-modal {
  position: fixed;
  inset: 0;
  z-index: 10132;
}
.mask-switch-modal.is-open .mask-switch-backdrop { opacity: 1; }
.mask-switch-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 12, 16, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mask-switch-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(440px, calc(100vw - 20px));
  max-height: min(80vh, 620px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.mask-switch-modal.is-open .mask-switch-card {
  opacity: 1;
  transform: translate(-50%, -50%);
}
body.dark .mask-switch-card {
  border-color: rgba(255, 255, 255, 0.10);
  background: #1c1e22;
  box-shadow: 0 42px 130px rgba(0, 0, 0, 0.62);
}
.mask-switch-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
}
body.dark .mask-switch-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: #1c1e22;
}
.mask-switch-title { font-weight: 900; letter-spacing: 0.01em; }
.mask-switch-spacer { flex: 1; }
.mask-switch-body {
  padding: 10px 14px 14px;
  overflow: auto;
  min-height: 0;
}
.mask-switch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mask-switch-item {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(242, 242, 247, 0.92);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
body.dark .mask-switch-item {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
}
.mask-switch-item.is-active {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.10);
}
body.dark .mask-switch-item.is-active {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}
.mask-switch-av {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}
body.dark .mask-switch-av {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.mask-switch-av-initial {
  font-weight: 900;
  color: rgba(0, 0, 0, 0.72);
}
body.dark .mask-switch-av-initial {
  color: rgba(255, 255, 255, 0.88);
}
.mask-switch-text { min-width: 0; flex: 1; }
.mask-switch-name { font-weight: 900; color: var(--text-main); }
.mask-switch-sub { margin-top: 2px; font-size: 0.78rem; color: var(--text-sub); }
.sticker-add-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
}
.sticker-add-row--textarea {
  align-items: stretch;
}
.sticker-textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--st-field-border);
  background: var(--st-field-bg);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-main);
  outline: none;
  resize: vertical;
  min-height: 70px;
}
body.dark .sticker-textarea {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.10);
}
.sticker-textarea:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.36);
  outline-offset: 2px;
}
.sticker-toolrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.sticker-label {
  font-size: 0.72rem;
  color: var(--text-sub);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sticker-input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--st-field-border);
  background: var(--st-field-bg);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-main);
  outline: none;
}
body.dark .sticker-input {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.10);
}
.sticker-input:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.36);
  outline-offset: 2px;
}
.sticker-hint {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.35;
}
.sticker-grid {
  /* 3 / 4 / 5 列：最多 5 列，避免 6 列过挤 */
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.2vw, 12px);
  min-width: 0;
  width: 100%;
  align-content: start;
}
@media (min-width: 360px) {
  .sticker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 520px) {
  .sticker-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.sticker-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
}
.sticker-item-thumb {
  position: relative;
  width: 100%;
  /* 不用 aspect-ratio：iOS 在 flex 滚动网格里会塌成扁 pill */
  height: 0;
  padding-bottom: 100%;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.02);
}
.sticker-item-thumb img {
  position: absolute;
  top: clamp(6px, 2vw, 10px);
  right: clamp(6px, 2vw, 10px);
  bottom: clamp(6px, 2vw, 10px);
  left: clamp(6px, 2vw, 10px);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
}
body.dark .sticker-item-thumb {
  background: rgba(255, 255, 255, 0.04);
}
.sticker-item-cap {
  padding: 5px 6px 7px;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.28;
  text-align: center;
  color: rgba(0, 0, 0, 0.62);
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: 2.56em;
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark .sticker-item-cap {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.22);
  border-top-color: rgba(255, 255, 255, 0.08);
}
body.dark .sticker-item {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 26px 92px rgba(0, 0, 0, 0.58);
}
.sticker-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
}
.sticker-item:active {
  transform: translateY(0) scale(0.985);
  filter: saturate(1.05);
}
.sticker-item-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.78);
  color: rgba(0, 0, 0, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
body.dark .sticker-item-x {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(20, 22, 26, 0.62);
  color: rgba(255, 255, 255, 0.85);
}
.sticker-item-x:active {
  transform: scale(0.96);
}
.sticker-item-x:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.36);
  outline-offset: 2px;
}
.sticker-screen.is-sticker-multi .sticker-item--multi:not(.is-selected) {
  opacity: 0.58;
  filter: grayscale(0.15);
}
.sticker-item--multi.is-selected {
  border-color: rgba(var(--tint-rgb), 0.42);
  box-shadow:
    0 0 0 2px rgba(var(--tint-rgb), 0.22),
    0 16px 44px rgba(0, 0, 0, 0.12);
}
.sticker-multi-lane {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}
.sticker-multi-lane.is-on {
  border-color: rgb(var(--tint-rgb));
  background: rgb(var(--tint-rgb));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.sticker-multi-lane.is-on::after {
  content: "";
  position: absolute;
  inset: 4px 5px 5px 4px;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
body.dark .sticker-multi-lane {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(20, 22, 26, 0.55);
}
.sticker-multi-bar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: 12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.08);
}
body.dark .sticker-multi-bar {
  background: rgba(28, 30, 34, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
}
.sticker-multi-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sticker-multi-count {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-sub);
}
.sticker-multi-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sticker-screen.is-sticker-multi .sticker-manager-actions .sticker-add-cta,
.sticker-screen.is-sticker-multi .sticker-manager-actions #sticker-export-json,
.sticker-screen.is-sticker-multi .sticker-manager-actions #sticker-import-json {
  opacity: 0.45;
  pointer-events: none;
}
.sticker-item-x i {
  font-size: 0.9rem;
}

.redpack-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(320px, calc(100vw - 28px));
  max-height: min(85vh, 640px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--rp-border);
  background: var(--bg-card);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
  opacity: 0;
  isolation: isolate;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.redpack-card::before {
  content: none;
}
body.dark .redpack-card::before {
  content: none;
}
.redpack-sheet.is-open .redpack-card::after { content: none; }
.redpack-sheet.is-open .redpack-card {
  opacity: 1;
  transform: translate(-50%, -50%);
}
body.dark .redpack-card {
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.62),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
@keyframes redpackSheetSheen {
  0%,
  72% {
    opacity: 0;
    transform: rotate(-9deg) translateX(-28%);
  }
  80% {
    opacity: 0.38;
  }
  90% {
    opacity: 0;
    transform: rotate(-9deg) translateX(24%);
  }
  100% {
    opacity: 0;
    transform: rotate(-9deg) translateX(24%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .redpack-sheet.is-open .redpack-card::after {
    animation: none;
    opacity: 0;
  }
}

.redpack-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 10px;
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.dark .redpack-head { border-bottom-color: rgba(255, 255, 255, 0.08); }
.redpack-kicker {
  margin: 0 0 4px;
}
.redpack-head-text .redpack-title {
  margin-top: 0;
}
.redpack-badge {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  background: rgba(var(--tint-rgb), 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62) inset,
    0 10px 26px rgba(0, 0, 0, 0.10);
  flex: 0 0 auto;
}
body.dark .redpack-badge {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}
.redpack-badge i { font-size: 1.15rem; color: var(--accent); opacity: 0.95; }
.redpack-head-text { flex: 1 1 auto; min-width: 0; }
.redpack-title {
  margin: 2px 0 0;
  letter-spacing: -0.02em;
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--text-main);
}
.redpack-close { flex: 0 0 auto; }

.redpack-body {
  padding: 12px 14px 10px;
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.redpack-label {
  display: block;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  color: var(--text-main);
}
.redpack-form {
  border: 1px solid var(--rp-form-border);
  border-radius: 18px;
  background: var(--rp-form-bg);
  padding: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 14px 34px rgba(0, 0, 0, 0.04);
}
body.dark .redpack-form {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
.redpack-field { padding: 2px 2px 8px; }
.redpack-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 8px 2px 10px;
}
body.dark .redpack-divider { background: rgba(255, 255, 255, 0.08); }
.redpack-field-main { display: block; }
.redpack-amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: var(--rp-field-bg);
  border: 1px solid var(--rp-field-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 10px 22px rgba(0, 0, 0, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
body.dark .redpack-amount-row {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.redpack-currency { font-weight: 900; color: var(--text-main); opacity: 0.9; }
.redpack-amount-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 1.38rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.redpack-amount-row:focus-within {
  border-color: rgba(var(--tint-rgb), 0.28);
  box-shadow: 0 0 0 4px rgba(var(--tint-rgb), 0.10);
}
.redpack-amount-input::placeholder { color: rgba(var(--tint-rgb), 0.55); }

.redpack-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.redpack-quick-btn {
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
body.dark .redpack-quick-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.redpack-quick-btn:hover {
  border-color: rgba(var(--tint-rgb), 0.20);
  background: rgba(255, 255, 255, 0.92);
}
body.dark .redpack-quick-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
.redpack-quick-btn:active { opacity: 0.92; }

.redpack-note-input {
  width: 100%;
  border: 0;
  outline: none;
  background: var(--rp-field-bg);
  border: 1px solid var(--rp-field-border);
  border-radius: 14px;
  padding: 12px 12px;
  font-weight: 850;
  color: var(--text-main);
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
body.dark .redpack-note-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.redpack-note-input:focus {
  border-color: rgba(var(--tint-rgb), 0.28);
  box-shadow: 0 0 0 4px rgba(var(--tint-rgb), 0.10);
}
.redpack-hint { margin: 8px 2px 0; color: var(--text-sub); font-size: 0.84rem; }

.redpack-actions {
  display: flex;
  gap: 10px;
  padding: 0 14px 14px;
  position: relative;
  z-index: 2;
}
.redpack-actions .chip { flex: 1 1 0; justify-content: center; }
.redpack-send i { font-size: 1.05rem; }
.redpack-actions .chip.solid.redpack-send {
  background: rgba(var(--tint-rgb), 0.92);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--bg-device);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 18px 40px rgba(0, 0, 0, 0.12);
}
body.dark .redpack-actions .chip.solid.redpack-send {
  background: rgba(var(--tint-rgb), 0.88);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--bg-device);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 22px 54px rgba(0, 0, 0, 0.32);
}

/* 红包详情查看弹层（点击未处理红包卡打开） */
.redpack-peek-sheet[hidden] { display: none; }
.redpack-peek-sheet {
  position: fixed;
  inset: 0;
  z-index: 10092;
}
.redpack-peek-sheet:not(.is-open) {
  pointer-events: none;
}
.redpack-peek-sheet:not(.is-open) .redpack-peek-backdrop,
.redpack-peek-sheet:not(.is-open) .redpack-peek-card {
  transition: none;
}
.redpack-peek-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.redpack-peek-sheet.is-open .redpack-peek-backdrop { opacity: 1; }
.redpack-peek-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(320px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--bg-card);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.redpack-peek-sheet.is-open .redpack-peek-card {
  opacity: 1;
  transform: translate(-50%, -50%);
}
body.dark .redpack-peek-card {
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62);
}
.redpack-peek-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.dark .redpack-peek-head { border-bottom-color: rgba(255, 255, 255, 0.08); }
.redpack-peek-badge {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(var(--tint-rgb), 0.06);
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset;
  flex: 0 0 auto;
}
body.dark .redpack-peek-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.redpack-peek-badge i { font-size: 1.15rem; color: var(--accent); opacity: 0.95; }
.redpack-peek-head-text { flex: 1 1 auto; min-width: 0; }
.redpack-peek-title {
  margin: 6px 0 0;
  letter-spacing: -0.02em;
  font-weight: 900;
  font-size: 1.08rem;
  color: var(--text-main);
}
.redpack-peek-body {
  padding: 14px 16px 10px;
}
.redpack-peek-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.redpack-peek-k {
  font-weight: 850;
  color: var(--text-sub);
  letter-spacing: 0.02em;
}
.redpack-peek-v {
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: var(--text-main);
}
.redpack-peek-cur { opacity: 0.72; margin-right: 3px; }
.redpack-peek-divider {
  height: 1px;
  margin: 12px 0;
  background: rgba(0, 0, 0, 0.06);
}
body.dark .redpack-peek-divider { background: rgba(255, 255, 255, 0.08); }
.redpack-peek-row--note {
  flex-direction: column;
  align-items: flex-start;
}
.redpack-peek-note {
  width: 100%;
  margin-top: 8px;
  text-align: left;
  color: var(--text-main);
  font-weight: 900;
  line-height: 1.55;
  word-break: break-word;
}
.redpack-peek-actions {
  display: flex;
  padding: 0 16px 16px;
}
.redpack-peek-actions .chip { flex: 1 1 auto; justify-content: center; }

/* 红包卡状态：已领取/已退回时变灰且不可点 */
.chat-msg-card--redpack.is-processed {
  pointer-events: none;
}
.chat-msg-card--redpack.is-processed .chat-redpack {
  opacity: 0.55;
  filter: grayscale(1);
}

/* Chat: 红包 / 通话票根共用紧凑卡尺寸 */
:root {
  --chat-compact-card-w: 252px;
  --chat-compact-card-h: 106px;
}

/* Chat: 红包消息卡（不使用气泡容器包裹） */
.chat-msg-card--redpack {
  max-width: min(100%, var(--chat-compact-card-w));
  cursor: pointer;
}
.chat-msg-card--redpack.is-processed {
  cursor: default;
}
.chat-msg--user .chat-msg-card--redpack {
  margin-left: auto;
}

/* Chat: 照片 —— 拍立得（结构保留；视觉跟普通消息卡同源，少叠层、少混色、轻倾角） */
.chat-msg-card--photo {
  max-width: min(100%, 268px);
  border: none;
  background: transparent;
  box-shadow: none;
  filter: none;
  padding: 6px 2px 10px;
}
.chat-msg--user .chat-msg-card--photo {
  margin-left: auto;
}
.chat-msg-card--photo-desc {
  max-width: min(100%, 280px);
}
.chat-msg--assistant .chat-msg-card--photo-char-desc {
  margin-right: auto;
}

.chat-photo-polaroid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  isolation: isolate;
  padding: 13px 12px 15px;
  border-radius: 14px;
  background-color: var(--bg-card);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transform: rotate(-0.45deg);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.chat-photo-polaroid--assistant {
  transform: rotate(0.45deg);
}
body.dark .chat-photo-polaroid {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 44%);
  box-shadow: var(--shadow-card);
}
.chat-photo-polaroid:hover {
  transform: rotate(-0.35deg) translateY(-1px);
  box-shadow: var(--shadow-float);
}
.chat-photo-polaroid--assistant:hover {
  transform: rotate(0.35deg) translateY(-1px);
}
body.dark .chat-photo-polaroid:hover {
  box-shadow: var(--shadow-float);
}
.chat-photo-polaroid:active {
  transform: rotate(-0.4deg) scale(0.99);
}
.chat-photo-polaroid--assistant:active {
  transform: rotate(0.4deg) scale(0.99);
}
@media (prefers-reduced-motion: reduce) {
  .chat-photo-polaroid {
    transition: none;
  }
  .chat-photo-polaroid:hover {
    transform: rotate(-0.45deg);
  }
  .chat-photo-polaroid--assistant:hover {
    transform: rotate(0.45deg);
  }
  .chat-photo-polaroid:active {
    transform: rotate(-0.45deg);
  }
  .chat-photo-polaroid--assistant:active {
    transform: rotate(0.45deg);
  }
}
.chat-photo-polaroid-tape {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 52px;
  height: 17px;
  margin-left: -26px;
  transform: rotate(-1.2deg);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(var(--tint-rgb), 0.07), rgba(var(--tint-rgb), 0.03));
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0.92;
  pointer-events: none;
  z-index: 3;
}
.chat-photo-polaroid-tape--tint {
  background: linear-gradient(
    100deg,
    rgba(var(--tint-rgb), 0.14),
    rgba(var(--tint-rgb), 0.05)
  );
  border-color: rgba(var(--tint-rgb), 0.15);
}
body.dark .chat-photo-polaroid-tape {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* 去掉 soft-light / screen，避免和相纸底色「化学反应」发灰 */
.chat-photo-polaroid-gloss {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.22) 0%, transparent 40%);
  mix-blend-mode: normal;
  opacity: 0.22;
  pointer-events: none;
  z-index: 2;
}
body.dark .chat-photo-polaroid-gloss {
  opacity: 0.1;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%);
}
.chat-photo-polaroid-inner {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0d10;
  line-height: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
body.dark .chat-photo-polaroid-inner {
  background: #070809;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.chat-photo-polaroid-img {
  display: block;
  width: auto;
  max-width: min(100%, 232px);
  height: auto;
  max-height: 300px;
  object-fit: contain;
  vertical-align: middle;
  background: transparent;
}
.chat-photo-polaroid-footer {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 3px 1px 2px;
}
.chat-photo-polaroid-stamp {
  align-self: flex-start;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--text-sub);
  opacity: 0.75;
}
body.dark .chat-photo-polaroid-stamp {
  color: var(--text-sub);
  opacity: 0.65;
}
.chat-photo-polaroid-line {
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.48;
  color: var(--text-sub);
  word-break: break-word;
}
.chat-photo-polaroid-line--filled {
  color: var(--text-main);
  opacity: 0.92;
}
.chat-photo-polaroid-inner--zoomable {
  cursor: zoom-in;
}
body.dark .chat-photo-polaroid-line {
  color: var(--text-sub);
}
body.dark .chat-photo-polaroid-line--filled {
  color: var(--text-main);
  opacity: 0.9;
}

/* 聊天图片：全屏预览（点缩略图进入） */
.chat-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.chat-photo-viewer.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.chat-photo-viewer-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(10, 12, 18, 0.72);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.dark .chat-photo-viewer-backdrop {
  background: rgba(0, 0, 0, 0.78);
}
.chat-photo-viewer-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
}
.chat-photo-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-photo-viewer-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}
.chat-photo-viewer-img-wrap {
  position: relative;
  flex: 1;
  min-height: 120px;
  max-height: min(72vh, 640px);
  overflow: hidden;
  border-radius: 12px;
  background: #0c0d10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.chat-photo-viewer-img-wrap.chat-photo-polaroid-mount--pending .chat-photo-viewer-img {
  filter: saturate(0.78) brightness(0.9);
}
body.dark .chat-photo-viewer-img-wrap {
  background: #070809;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.chat-photo-viewer-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(72vh, 640px);
  object-fit: contain;
}
.chat-photo-viewer-caption {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-sub);
  word-break: break-word;
  max-height: 5.5em;
  overflow: auto;
}
.chat-photo-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.chat-photo-polaroid-inner--desc {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 10px 10px 11px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--text-main);
  word-break: break-word;
  white-space: pre-wrap;
  background-color: rgba(var(--tint-rgb), 0.03);
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent calc(1.55em - 1px),
    rgba(23, 25, 28, 0.07) calc(1.55em - 1px),
    rgba(23, 25, 28, 0.07) 1.55em
  );
  box-shadow: inset 0 0 0 1px var(--line);
}
body.dark .chat-photo-polaroid-inner--desc {
  background-color: rgba(0, 0, 0, 0.18);
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent calc(1.55em - 1px),
    rgba(255, 255, 255, 0.06) calc(1.55em - 1px),
    rgba(255, 255, 255, 0.06) 1.55em
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.chat-photo-polaroid-mount--pending {
  pointer-events: none;
}
.chat-photo-polaroid--pending .chat-photo-polaroid-img {
  filter: saturate(0.78) brightness(0.9);
}
.chat-photo-polaroid-pending-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: inherit;
  background: rgba(12, 13, 16, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.dark .chat-photo-polaroid-pending-overlay {
  background: rgba(0, 0, 0, 0.55);
}
.chat-photo-polaroid-pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
  font-size: 0.74rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
body.dark .chat-photo-polaroid-pending-chip {
  background: rgba(28, 30, 34, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
}
.chat-photo-polaroid-pending-spin {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(23, 25, 28, 0.14);
  border-top-color: var(--tint);
  border-radius: 50%;
  animation: chat-photo-pending-spin 0.72s linear infinite;
}
body.dark .chat-photo-polaroid-pending-spin {
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: var(--tint);
}
@keyframes chat-photo-pending-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-photo-polaroid-pending-spin {
    animation: none;
    border-top-color: var(--tint);
    opacity: 0.85;
  }
}
.chat-redpack {
  width: 100%;
  min-height: var(--chat-compact-card-h);
  box-sizing: border-box;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.chat-msg-card--redpack .chat-redpack {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}
.chat-msg-card--redpack .chat-redpack:active {
  transform: translateY(1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg-card--redpack .chat-redpack {
    transition: none;
  }
}
.chat-redpack::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* 顶部高光 + 底部暗线（克制） */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62) inset,
    0 -1px 0 rgba(0, 0, 0, 0.05) inset;
  z-index: 1;
}
body.dark .chat-redpack::before {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.24) inset;
}
.chat-redpack::after {
  content: none;
}
.chat-redpack--solo {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.chat-redpack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px 8px;
  color: var(--text-main);
  position: relative;
  z-index: 2;
}
.chat-redpack-headL {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.chat-redpack-headR {
  flex: 0 0 auto;
  padding-top: 1px;
  /* 金额栏固定宽度：不随数字长度挤压布局 */
  width: 116px;
  text-align: right;
}
.chat-redpack-ico {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(var(--tint-rgb), 0.06);
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62) inset,
    0 10px 22px rgba(0, 0, 0, 0.06);
}
body.dark .chat-redpack-ico {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.chat-redpack-ico i { font-size: 0.95rem; color: var(--accent); }
.chat-redpack-meta { min-width: 0; }
.chat-redpack-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sub);
}
body.dark .chat-redpack-pill {
  color: rgba(255, 255, 255, 0.70);
}
.chat-redpack-note {
  margin-top: 3px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-redpack-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -0.03em;
  display: block;
  color: var(--text-main);
  text-shadow: none;
  width: 100%;
  text-align: right;
  white-space: nowrap;
}
body.dark .chat-redpack-amt {
  text-shadow: none;
}
.chat-redpack-cur {
  font-size: 0.78rem;
  opacity: 0.72;
  margin-right: 3px;
}
.chat-redpack-num {
  font-size: 1.2rem;
  color: var(--text-main);
  letter-spacing: -0.02em;
  display: inline;
}

.chat-redpack-divider {
  height: 0;
  margin: 0 12px;
  border-top: 1px dashed rgba(var(--tint-rgb), 0.22);
  position: relative;
  z-index: 2;
}
body.dark .chat-redpack-divider {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.chat-redpack-divider::before,
.chat-redpack-divider::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-body);
  border: 1px solid var(--line);
  box-shadow:
    0 0 0 2px var(--bg-body),
    0 12px 26px rgba(0, 0, 0, 0.10);
}
.chat-redpack-divider::before {
  left: -18px;
}
.chat-redpack-divider::after {
  right: -18px;
}
body.dark .chat-redpack-divider::before,
body.dark .chat-redpack-divider::after {
  background: var(--bg-body);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 2px var(--bg-body),
    0 16px 34px rgba(0, 0, 0, 0.36);
}
.chat-redpack-foot {
  padding: 7px 11px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-sub);
  border-top: 1px solid var(--line);
  background: transparent;
  position: relative;
  z-index: 2;
}
body.dark .chat-redpack-foot {
  background: rgba(255, 255, 255, 0.04);
}

/* 通话结束票根：固定宽 --chat-compact-card-w（与红包一致） */
.chat-msg--call-ended-notice > .chat-msg-inner {
  width: 100%;
  max-width: 100%;
}
.chat-msg--call-ended-notice .chat-msg-bubble-stack {
  width: var(--chat-compact-card-w);
  max-width: 100%;
  flex-shrink: 0;
  align-items: stretch;
}
.chat-msg-card--call-ended {
  width: var(--chat-compact-card-w);
  max-width: 100%;
  flex-shrink: 0;
}
.chat-msg--user .chat-msg-card--call-ended {
  margin-left: auto;
}
.chat-msg-card--call-ended .chat-call-recap-sheet {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-msg-card--call-ended:active .chat-call-recap-sheet {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg-card--call-ended .chat-call-recap-sheet {
    transition: none;
  }
}
.chat-call-recap {
  position: relative;
  width: 100%;
}
.chat-call-recap--from-user .chat-call-recap-track {
  left: auto;
  right: -14px;
}
.chat-call-recap-track {
  position: absolute;
  left: -14px;
  top: 0;
  bottom: 0;
  width: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  pointer-events: none;
}
.chat-call-recap-dot {
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 0 2px rgba(var(--tint-rgb), 0.14),
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 3px 10px rgba(0, 0, 0, 0.07);
}
.chat-call-recap--missed .chat-call-recap-dot {
  background: var(--text-sub);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.06);
}
.chat-call-recap--video .chat-call-recap-dot {
  background: rgba(var(--blush-rgb), 0.92);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 0 0 2px rgba(var(--blush-rgb), 0.18),
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 3px 10px rgba(0, 0, 0, 0.07);
}
.chat-call-recap-line {
  flex: 1 1 auto;
  width: 1px;
  margin-top: 5px;
  min-height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(var(--tint-rgb), 0.28),
    rgba(var(--tint-rgb), 0)
  );
}
.chat-call-recap--missed .chat-call-recap-line {
  opacity: 0.28;
}
.chat-call-recap-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--chat-compact-card-h);
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 9px 11px 8px;
  overflow: hidden;
}
.chat-call-recap-hd {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.chat-call-recap-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-main);
  white-space: nowrap;
}
.chat-call-recap-kind i {
  font-size: 0.95rem;
  color: var(--accent);
  opacity: 0.88;
  flex-shrink: 0;
}
.chat-call-recap--video .chat-call-recap-kind i {
  color: rgba(var(--blush-rgb), 0.95);
  opacity: 0.9;
}
.chat-call-recap-dur {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  min-height: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 1.16rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  white-space: nowrap;
}
.chat-call-recap--missed .chat-call-recap-dur {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.38;
}
.chat-call-recap--declined .chat-call-recap-ft {
  color: #b06054;
}
body.dark .chat-call-recap--declined .chat-call-recap-ft {
  color: #e09888;
}
.chat-call-recap-perf {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: 0;
  margin: 0 0 5px;
  border: 0;
  border-top: 1px solid var(--line);
  opacity: 0.62;
  background: none;
}
.chat-call-recap-ft {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: auto;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 查岗结案票根 · 主控侧摘要卡 */
.chat-msg--checkup-notice > .chat-msg-inner {
  width: 100%;
  max-width: 100%;
}
.chat-msg--checkup-notice .chat-msg-bubble-stack {
  width: var(--chat-compact-card-w);
  max-width: 100%;
  flex-shrink: 0;
  align-items: stretch;
}
.chat-msg-card--checkup {
  width: var(--chat-compact-card-w);
  max-width: 100%;
  flex-shrink: 0;
  cursor: pointer;
}
.chat-msg--user .chat-msg-card--checkup {
  margin-left: auto;
}
.chat-checkup-ticket-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 13px 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.chat-msg-card--checkup:active .chat-checkup-ticket-sheet {
  opacity: 0.88;
}
/* 关系网私聊转发 · 小心机 chatlog 卡片 */
.chat-msg-card--relation-dm-chatlog {
  width: min(240px, 88vw);
  max-width: 100%;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.chat-msg-card--relation-dm-chatlog:active {
  transform: scale(0.98);
  opacity: 0.92;
}
.chat-relation-dm-chatlog-card-body {
  background: #fff;
  padding: 12px 14px;
}
.chat-relation-dm-chatlog-card-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 1.35;
}
.chat-relation-dm-chatlog-card-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-relation-dm-chatlog-card-line {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
}
.chat-relation-dm-chatlog-card-line-name {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: #666;
}
.chat-relation-dm-chatlog-card-line-text {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-relation-dm-chatlog-card-more {
  margin: 0;
  font-size: 10px;
  color: #bbb;
}
.chat-relation-dm-chatlog-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 10px;
}
.chat-relation-dm-chatlog-card-foot-label {
  color: #bbb;
}
.chat-relation-dm-chatlog-card-foot-action {
  color: #999;
  font-weight: 500;
}

/* 论坛广场分享 · 密谈卡片 */
.chat-msg-card--forum-share {
  width: min(268px, 90vw);
  max-width: 100%;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  border: 1px solid rgba(17, 24, 39, 0.08);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.chat-msg-card--forum-share:active {
  transform: scale(0.98);
  opacity: 0.94;
}
.chat-forum-share-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 55%, #e8edf4 100%);
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
.chat-forum-share-card-head-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #111827;
  color: #f9fafb;
  font-size: 15px;
}
.chat-forum-share-card-head-text {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.chat-forum-share-card-sector {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: #6b7280;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(17, 24, 39, 0.06);
}
.chat-forum-share-card-body {
  display: flex;
  gap: 10px;
  padding: 12px 12px 10px;
  background: #fff;
  align-items: flex-start;
}
.chat-forum-share-card-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}
.chat-forum-share-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-forum-share-card-main {
  flex: 1;
  min-width: 0;
}
.chat-forum-share-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 12px;
  color: #111827;
}
.chat-forum-share-card-av {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-forum-share-card-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.chat-forum-share-card-tags {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chat-forum-share-card-tags span {
  font-size: 10px;
  color: #6b7280;
}
.chat-forum-share-card-quote {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: 11px;
  line-height: 1.45;
  color: #6b7280;
}
.chat-forum-share-card-quote strong {
  color: #374151;
}
.chat-forum-share-card-cmts {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}
.chat-forum-share-card-cmts p {
  margin: 0 0 4px;
  font-size: 10px;
  line-height: 1.45;
  color: #9ca3af;
}
.chat-forum-share-card-cmts strong {
  color: #6b7280;
  font-weight: 600;
}
.chat-forum-share-card-cmts-more {
  color: #c4c4c4 !important;
}
.chat-forum-share-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: #f9fafb;
  border-top: 1px solid rgba(17, 24, 39, 0.05);
  font-size: 10px;
}
.chat-forum-share-card-foot-label {
  color: #9ca3af;
}
.chat-forum-share-card-foot-action {
  color: #6b7280;
  font-weight: 600;
}

.chat-forum-share-modal {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.chat-forum-share-modal:not([hidden]) {
  pointer-events: auto;
}
.chat-forum-share-modal.is-open .chat-forum-share-modal-backdrop {
  opacity: 1;
}
.chat-forum-share-modal.is-open .chat-forum-share-modal-panel {
  transform: translateY(0);
  opacity: 1;
}
.chat-forum-share-modal-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  margin: 0;
  padding: 0;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  transition: opacity 0.24s ease;
  cursor: pointer;
}
.chat-forum-share-modal-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}
.chat-forum-share-modal-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid #f3f4f6;
}
.chat-forum-share-modal-hd-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.chat-forum-share-modal-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.chat-forum-share-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
}
.chat-forum-share-modal-meta {
  margin: 4px 0 0;
  font-size: 11px;
  color: #9ca3af;
}
.chat-forum-share-modal-close {
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-forum-share-modal-body {
  padding: 14px 16px 18px;
  overflow: auto;
}
.chat-forum-share-modal-content {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-forum-share-modal-media {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}
.chat-forum-share-modal-media img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}
.chat-forum-share-modal-quote {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f4f6;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}
.chat-forum-share-modal-cmts {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}
.chat-forum-share-modal-cmts-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}
.chat-forum-share-modal-cmt {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}
.chat-forum-share-modal-cmt strong {
  color: #111827;
  margin-right: 6px;
}

/* 关系网私聊转发 · 小心机 chatlog 弹窗 */
.chat-relation-dm-chatlog-modal {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.chat-relation-dm-chatlog-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.chat-relation-dm-chatlog-modal-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.chat-relation-dm-chatlog-modal-panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.15);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
}
.chat-relation-dm-chatlog-modal.is-open .chat-relation-dm-chatlog-modal-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.chat-relation-dm-chatlog-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #1a1a1a;
  flex-shrink: 0;
}
.chat-relation-dm-chatlog-modal-hd-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chat-relation-dm-chatlog-modal-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-relation-dm-chatlog-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.chat-relation-dm-chatlog-modal-count {
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.chat-relation-dm-chatlog-modal-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
}
.chat-relation-dm-chatlog-modal-close:hover {
  color: #fff;
}
.chat-relation-dm-chatlog-modal-body {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 12px 16px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-relation-dm-chatlog-modal-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.chat-relation-dm-chatlog-modal-row--right {
  flex-direction: row-reverse;
}
.chat-relation-dm-chatlog-modal-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #666;
}
.chat-relation-dm-chatlog-modal-row--right .chat-relation-dm-chatlog-modal-avatar {
  background: #999;
}
.chat-relation-dm-chatlog-modal-bubble-wrap {
  max-width: 75%;
}
.chat-relation-dm-chatlog-modal-row--right .chat-relation-dm-chatlog-modal-bubble-wrap {
  text-align: right;
}
.chat-relation-dm-chatlog-modal-speaker {
  margin: 0 0 2px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 500;
  color: #999;
}
.chat-relation-dm-chatlog-modal-bubble {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #1a1a1a;
  background: #fff;
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-relation-dm-chatlog-modal-row--right .chat-relation-dm-chatlog-modal-bubble {
  background: #e8e8e8;
  border-top-left-radius: 12px;
  border-top-right-radius: 4px;
}
.chat-relation-dm-chatlog-modal-bubble--bilingual {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.chat-relation-dm-chatlog-modal-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-relation-dm-chatlog-modal-bubble-trans-rule {
  height: 1px;
  margin: 6px 0 4px;
  background: rgba(0, 0, 0, 0.08);
}
.chat-relation-dm-chatlog-modal-bubble-trans {
  font-size: 12px;
  line-height: 1.4;
  color: #888;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-relation-dm-chatlog-modal-empty {
  text-align: center;
  padding: 32px 16px;
  font-size: 13px;
  color: #bbb;
}
.chat-relation-dm-chatlog-modal-ft {
  flex-shrink: 0;
  padding: 12px 20px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11px;
  color: #bbb;
  text-align: center;
}
.chat-checkup-ticket-hd {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.chat-checkup-ticket-title {
  font-family: "Noto Serif SC", "Noto Serif", serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-main);
}
.chat-checkup-ticket-meta {
  margin: -4px 0 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--text-sub);
}
.chat-checkup-ticket-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-checkup-ticket-chip {
  font-size: 0.64rem;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--text-main);
  color: var(--bg-card);
  font-family: "Noto Serif SC", "Noto Serif", serif;
}
.chat-checkup-ticket-empty {
  font-size: 0.64rem;
  font-style: italic;
  color: var(--text-sub);
  font-family: "Noto Serif SC", "Noto Serif", serif;
}
.chat-checkup-ticket-q {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: "Noto Serif SC", "Noto Serif", serif;
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-checkup-ticket-q::before {
  content: "质问 · ";
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--text-sub);
}
.chat-checkup-ticket-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.chat-checkup-ticket-ft i {
  font-size: 0.72rem;
  opacity: 0.55;
}

.chat-msg--assistant .chat-msg-bubble--redpack,
.chat-msg--system .chat-msg-bubble--redpack {
  border-left: 3px solid var(--accent);
}

/* MiniMax 接入弹层：与红包弹层同壳，层级略高以免叠在红包下 */
.minimax-sheet[hidden] {
  display: none;
}
/* 关层后约一帧～数百毫秒内：仍占 fixed 全屏但 is-open 已去，透明 backdrop 会吃掉下层所有点击（卷宗底部生图开关等） */
.minimax-sheet:not(.is-open) {
  pointer-events: none;
}
.minimax-sheet.is-open {
  pointer-events: auto;
  /* 不用 transform 居中卡片：iOS Safari 下弹层内原生 <select> 常无法弹出 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.minimax-sheet {
  position: fixed;
  inset: 0;
  z-index: 10091;
  --rp-r: 22px;
  --rp-border: rgba(0, 0, 0, 0.08);
  --rp-shadow: 0 18px 70px rgba(0, 0, 0, 0.22);
  --rp-head-border: rgba(0, 0, 0, 0.06);
  --rp-form-bg: rgba(0, 0, 0, 0.02);
  --rp-form-border: rgba(0, 0, 0, 0.06);
  --rp-field-bg: rgba(255, 255, 255, 0.92);
  --rp-field-border: rgba(0, 0, 0, 0.08);
  --rp-ring: rgba(var(--tint-rgb), 0.18);
}
/* 卷宗 · 会话生图自定义风格后缀（与 minimax-sheet 同壳，叠在生图设置之上） */
.chat-detail-imgstyle-sheet {
  z-index: 10093;
}
.chat-detail-imgstyle-card {
  width: min(520px, calc(100vw - 24px));
  max-height: min(560px, calc(100dvh - 48px));
}
.chat-detail-imgstyle-ta {
  min-height: 7rem;
  max-height: min(320px, 38vh);
  resize: vertical;
}
.chat-detail-imgstyle-custom-wrap {
  margin-top: 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.dark .chat-detail-imgstyle-custom-wrap {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.chat-detail-imgstyle-custom-note {
  margin: 4px 0 10px;
}
.imgen-sheet {
  z-index: 10092;
}
/* 弹层 / 卷宗内 <select>：移动端字号与触控区（≥16px 减 iOS 缩放） */
#minimax-sheet .settings-ai-select,
#image-gen-sheet .settings-ai-select,
#chat-detail-imgstyle-sheet .chat-detail-imgstyle-preset-select,
#chat-detail-screen .chat-detail-wb-select.settings-ai-select,
#chat-detail-screen .chat-detail-minimax-voice.settings-ai-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: max(16px, 0.74rem);
  min-height: 44px;
  padding: 10px 14px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}
body.dark #minimax-sheet .settings-ai-select,
body.dark #image-gen-sheet .settings-ai-select,
body.dark #chat-detail-imgstyle-sheet .chat-detail-imgstyle-preset-select,
body.dark #chat-detail-screen .chat-detail-wb-select.settings-ai-select,
body.dark #chat-detail-screen .chat-detail-minimax-voice.settings-ai-select {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
}
.imgen-card {
  width: min(580px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 32px));
}
.imgen-head .imgen-eyebrow {
  margin: 0 0 2px;
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.92;
}
.imgen-badge {
  background: linear-gradient(145deg, rgba(var(--tint-rgb), 0.24), rgba(var(--tint-rgb), 0.05));
  border-color: rgba(var(--tint-rgb), 0.32);
}
.imgen-body {
  padding-top: 10px;
}
.imgen-intro {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-sub);
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  border-left: 3px solid rgba(var(--tint-rgb), 0.5);
  background: rgba(var(--tint-rgb), 0.06);
}
body.dark .imgen-intro {
  background: rgba(var(--tint-rgb), 0.1);
  border-left-color: rgba(var(--tint-rgb), 0.55);
}
.imgen-intro strong {
  color: var(--text-main);
  font-weight: 600;
}
.imgen-intro code {
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  font-family: ui-monospace, monospace;
}
body.dark .imgen-intro code {
  background: rgba(255, 255, 255, 0.08);
}
.imgen-form {
  border-radius: 20px;
}
.imgen-textarea {
  width: 100%;
  min-height: 0;
  resize: vertical;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.imgen-model-custom {
  margin-top: 8px;
}
.imgen-model-tools {
  margin-top: 10px;
}
.imgen-preset-block {
  margin-bottom: 12px;
}
.imgen-preset-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.imgen-preset-select {
  flex: 1;
  min-width: min(200px, 100%);
}
.imgen-preset-hint {
  margin: 6px 0 0;
}
.imgen-preset-api-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-sub);
  cursor: pointer;
  user-select: none;
}
.imgen-preset-api-toggle input {
  margin-top: 3px;
  flex-shrink: 0;
}
.imgen-preset-scope-tag {
  font-weight: 400;
  opacity: 0.72;
  font-size: 0.72rem;
}
.imgen-preset-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.imgen-preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}
body.dark .imgen-preset-row {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.imgen-preset-name {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-main);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imgen-preset-empty {
  margin: 0;
  padding: 4px 0 0;
}
.imgen-nai-wrap {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
body.dark .imgen-nai-wrap {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.imgen-provider-k {
  margin: 4px 0 12px;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--text-sub);
  letter-spacing: -0.01em;
}
.imgen-provider-panel {
  margin: 12px 0 4px;
  padding: 12px 12px 4px;
  border-radius: 14px;
  border: 1px solid rgba(var(--tint-rgb), 0.16);
  background: rgba(var(--tint-rgb), 0.04);
}
body.dark .imgen-provider-panel {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
}
.imgen-provider-head,
.imgen-nai-head {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 850;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.imgen-shared-head {
  margin-top: 4px;
}
.imgen-shared-divider {
  margin: 14px 0 10px;
}
.settings-ai-field-k--nai {
  margin-top: 10px;
  margin-bottom: 2px;
  font-size: 0.62rem;
  color: var(--text-sub);
}
.imgen-nai-slider-row {
  margin-top: 4px;
  margin-bottom: 4px;
}
.imgen-nai-seed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.imgen-nai-seed-row .settings-api-input {
  flex: 1;
  min-width: 0;
}
.imgen-nai-seed-hint,
.imgen-nai-smea-hint {
  margin: 4px 0 0;
}
.imgen-nai-smea-row {
  margin-top: 10px;
  padding-top: 4px;
  align-items: flex-start;
}
.imgen-nai-smea-row .minimax-row-l {
  display: block;
  margin-bottom: 2px;
}
.imgen-base-note {
  margin: -4px 0 10px;
}
.imgen-test-wrap {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--tint-rgb), 0.18);
  background: rgba(var(--tint-rgb), 0.05);
}
body.dark .imgen-test-wrap {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}
.imgen-test-status {
  margin: 0 0 8px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-sub);
}
.imgen-test-status.imgen-test-status--err {
  color: #b42318;
}
body.dark .imgen-test-status.imgen-test-status--err {
  color: #ff8a80;
}
.imgen-test-preview {
  display: block;
  width: 100%;
  max-height: min(52vh, 420px);
  object-fit: contain;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
}
body.dark .imgen-test-preview {
  background: rgba(255, 255, 255, 0.06);
}
.chat-detail-lead--compact {
  margin-top: 4px;
  margin-bottom: 8px;
  font-size: 0.72rem;
  line-height: 1.45;
}
.chat-detail-field--image-ref {
  margin-top: 4px;
}
.chat-detail-image-ref-test {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.12);
}
.chat-detail-image-ref-thumb {
  display: block;
  width: 100%;
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  margin: 0 0 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
}
body.dark .chat-detail-image-ref-thumb {
  background: rgba(255, 255, 255, 0.06);
}
.chat-detail-image-ref-test-prompt {
  width: 100%;
  margin-bottom: 8px;
}
.chat-detail-image-ref-test-wrap {
  margin-bottom: 8px;
}
.minimax-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 12, 16, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.minimax-sheet.is-open .minimax-sheet-backdrop {
  opacity: 1;
}
.minimax-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(560px, calc(100vw - 28px));
  max-height: min(640px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  border-radius: var(--rp-r);
  border: 1px solid var(--rp-border);
  background: var(--bg-card);
  box-shadow: var(--rp-shadow);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.minimax-sheet.is-open .minimax-card {
  opacity: 1;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  flex: 0 1 auto;
  margin: 0;
  max-height: min(640px, calc(100dvh - 32px));
}
body.dark .minimax-card {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62);
}
.minimax-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 10px;
  background: transparent;
  border-bottom: 1px solid var(--rp-head-border);
  flex: 0 0 auto;
}
body.dark .minimax-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.minimax-badge {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}
body.dark .minimax-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.minimax-badge i {
  font-size: 1.15rem;
  color: var(--text-main);
  opacity: 0.88;
}
.minimax-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.minimax-title {
  margin: 2px 0 0;
  letter-spacing: -0.02em;
  font-weight: 900;
  font-size: 1.08rem;
}
.minimax-close {
  flex: 0 0 auto;
}
.minimax-body {
  padding: 14px 16px 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.minimax-form {
  border: 1px solid var(--rp-form-border);
  border-radius: 18px;
  background: var(--rp-form-bg);
  padding: 12px;
}
body.dark .minimax-form {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.minimax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 6px;
}
.minimax-row-l {
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text-main);
}
.minimax-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 8px 2px 10px;
}
body.dark .minimax-divider {
  background: rgba(255, 255, 255, 0.08);
}
.minimax-field {
  padding: 2px 2px 10px;
}
.minimax-label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  font-size: 0.88rem;
}
.minimax-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px 16px;
  flex: 0 0 auto;
  border-top: 1px solid var(--rp-head-border);
}
body.dark .minimax-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.minimax-actions .chip {
  flex: 1 1 120px;
  justify-content: center;
}
.minimax-audio {
  width: 100%;
  height: 34px;
  margin-top: 8px;
  border-radius: 10px;
}

.chat-more-panel .chat-inner-voice-mount {
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
}
.chat-more-panel .chat-slab-mat {
  padding: 0;
  border: none;
  background: transparent;
}
.chat-more-panel .chat-slab-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.chat-more-inset.chat-input-ruled {
  padding: 16px 18px 18px;
}
.chat-more-groups {
  gap: 18px;
}
.chat-more-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}
.chat-more-grid-item {
  border: 1px solid rgba(var(--tint-rgb), 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 12px 26px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  padding: 12px 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.14s ease, background 0.14s ease;
}
body.dark .chat-more-grid-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px rgba(0, 0, 0, 0.28);
}
.chat-more-grid-item:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--tint-rgb), 0.24);
  background: rgba(255, 255, 255, 0.78);
}
.chat-more-grid-item:active { transform: translateY(0); }
.chat-more-grid-ico {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 38%, transparent 72%),
    linear-gradient(165deg, rgba(var(--tint-rgb), 0.18) 0%, rgba(var(--blush-rgb), 0.14) 100%);
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}
body.dark .chat-more-grid-ico {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 38%, transparent 72%),
    linear-gradient(165deg, rgba(var(--tint-rgb), 0.16) 0%, rgba(var(--blush-rgb), 0.16) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.chat-more-grid-ico i { font-size: 1.22rem; color: var(--accent); }
.chat-more-grid-label {
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-main);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .chat-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* More sheet: new layout (quick row + list) */
.chat-more-quick {
  display: flex;
  gap: 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.chat-more-quick::-webkit-scrollbar { display: none; }
.chat-more-quick-item {
  flex: 0 0 auto;
  width: 92px;
  border: 1px solid rgba(var(--tint-rgb), 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 28px rgba(0, 0, 0, 0.06);
  padding: 12px 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.16s ease, background 0.16s ease;
}
body.dark .chat-more-quick-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 44px rgba(0, 0, 0, 0.28);
}
.chat-more-quick-item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--tint-rgb), 0.22);
  background: rgba(255, 255, 255, 0.85);
}
.chat-more-quick-item:active { transform: translateY(0); }
.chat-more-quick-ico {
  width: 54px;
  height: 54px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.62) 38%, transparent 72%),
    linear-gradient(165deg, rgba(var(--tint-rgb), 0.22) 0%, rgba(var(--blush-rgb), 0.18) 100%);
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}
body.dark .chat-more-quick-ico {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 38%, transparent 72%),
    linear-gradient(165deg, rgba(var(--tint-rgb), 0.18) 0%, rgba(var(--blush-rgb), 0.18) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.chat-more-quick-ico i { font-size: 1.38rem; color: var(--accent); }
.chat-more-quick-label {
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-main);
  white-space: nowrap;
}

.chat-more-list {
  border-radius: 18px;
  border: 1px solid rgba(var(--tint-rgb), 0.12);
  background: rgba(var(--tint-rgb), 0.02);
  overflow: hidden;
  margin-bottom: 10px;
}
body.dark .chat-more-list {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.chat-more-list-item {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: background 0.14s ease;
}
.chat-more-list-item + .chat-more-list-item {
  border-top: 1px solid rgba(var(--tint-rgb), 0.1);
}
body.dark .chat-more-list-item + .chat-more-list-item {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.chat-more-list-item:hover { background: rgba(var(--tint-rgb), 0.05); }
body.dark .chat-more-list-item:hover { background: rgba(255, 255, 255, 0.05); }
.chat-more-list-ico {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(var(--tint-rgb), 0.06);
  border: 1px solid rgba(var(--tint-rgb), 0.12);
}
body.dark .chat-more-list-ico {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.chat-more-list-ico i { font-size: 1.1rem; color: var(--accent); }
.chat-more-list-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-more-list-title {
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text-main);
}
.chat-more-list-desc {
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-more-list-item .ph-caret-right {
  color: rgba(var(--tint-rgb), 0.7);
  font-size: 1rem;
}
body.dark .chat-more-list-item .ph-caret-right {
  color: rgba(255, 255, 255, 0.55);
}
.chat-more-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.chat-more-sheet-themes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(var(--tint-rgb), 0.12);
  background: rgba(var(--tint-rgb), 0.03);
}
body.dark .chat-more-sheet-themes {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
}
.chat-more-sheet-theme {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 12px;
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-sub);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chat-more-sheet-theme.is-active {
  color: var(--text-main);
  border-color: rgba(var(--tint-rgb), 0.16);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
body.dark .chat-more-sheet-theme.is-active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.chat-more-sheet-titlewrap {
  min-width: 0;
}
.chat-more-sheet-title {
  margin-top: 2px;
  font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
  font-size: 1.06rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.chat-more-sheet-sub {
  margin: 6px 0 0;
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-sub);
}
.chat-more-sheet-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(var(--tint-rgb), 0.12);
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--text-main);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
body.dark .chat-more-sheet-close {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
}
.chat-more-sheet-close:hover {
  background: rgba(var(--tint-rgb), 0.1);
}
body.dark .chat-more-sheet-close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.chat-more-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.chat-more-sheet-item {
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-main);
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
body.dark .chat-more-sheet-item {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.chat-more-sheet-item:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--tint-rgb), 0.14);
  background: rgba(var(--tint-rgb), 0.04);
}
.chat-more-sheet-item:active {
  transform: translateY(0);
  background: rgba(var(--tint-rgb), 0.06);
}
.chat-more-sheet-ico {
  width: 60px;
  height: 60px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.58) 36%, transparent 72%),
    linear-gradient(165deg, rgba(var(--tint-rgb), 0.18) 0%, rgba(var(--blush-rgb), 0.16) 100%);
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 10px 22px rgba(0, 0, 0, 0.06);
}
body.dark .chat-more-sheet-ico {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 38%, transparent 72%),
    linear-gradient(165deg, rgba(var(--tint-rgb), 0.16) 0%, rgba(var(--blush-rgb), 0.16) 100%);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 30px rgba(0, 0, 0, 0.28);
}
.chat-more-sheet-ico i {
  font-size: 1.4rem;
  color: var(--accent);
}
.chat-more-sheet-label {
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-main);
}
.chat-more-sheet-item--danger .chat-more-sheet-ico i {
  color: #b5473f;
}
body.dark .chat-more-sheet-item--danger .chat-more-sheet-ico i {
  color: #e8938a;
}

.chat-more-sheet-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 86px;
  gap: 12px;
  margin-top: 2px;
  margin-bottom: 10px;
  max-height: min(46vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.chat-more-sheet-bento::-webkit-scrollbar { width: 5px; }
.chat-more-sheet-bento::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(var(--tint-rgb), 0.18);
}
body.dark .chat-more-sheet-bento::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
}

.chat-more-bento-tile {
  border: 1px solid var(--ms-tile-border);
  border-radius: 22px;
  background: var(--ms-tile-bg);
  box-shadow: var(--ms-tile-shadow);
  cursor: pointer;
  padding: 12px 12px 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
body.dark .chat-more-bento-tile {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 48px rgba(0, 0, 0, 0.26);
}
.chat-more-bento-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--tint-rgb), 0.24);
  background: rgba(var(--tint-rgb), 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 20px 44px rgba(0, 0, 0, 0.08);
}
.chat-more-bento-tile:active {
  transform: translateY(0);
}

.chat-more-bento-ico {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--ms-ico-bg);
  border: 1px solid var(--ms-ico-border);
  box-shadow: var(--ms-ico-shadow);
}
body.dark .chat-more-bento-ico {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.chat-more-bento-ico i {
  font-size: 1.32rem;
  color: var(--accent);
}
.chat-more-bento-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-more-bento-title {
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text-main);
}
.chat-more-bento-desc {
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 不对称 bento：2 个主卡占 2x2，其它占 2x1 或 2x1 宽条 */
.chat-more-bento-tile--hero {
  grid-column: 1 / span 2;
  grid-row: span 2;
  padding: 14px;
  border-radius: 26px;
  background: var(--ms-card-bg);
}
.chat-more-bento-tile--hero2 {
  grid-column: 3 / span 2;
  grid-row: span 2;
  padding: 14px;
  border-radius: 26px;
  background: var(--ms-card-bg);
}
.chat-more-bento-tile--hero .chat-more-bento-ico,
.chat-more-bento-tile--hero2 .chat-more-bento-ico {
  width: 56px;
  height: 56px;
  border-radius: 22px;
}
.chat-more-bento-tile--wide {
  grid-column: span 2;
}

@media (max-width: 420px) {
  .chat-more-sheet-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 88px;
  }
  .chat-more-bento-tile--hero,
  .chat-more-bento-tile--hero2,
  .chat-more-bento-tile--wide {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Themes */
.chat-more-sheet[data-theme="ios"] {
  --ms-card-bg: var(--bg-card);
  --ms-card-border: rgba(var(--tint-rgb), 0.12);
  --ms-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 26px 76px rgba(0, 0, 0, 0.14);
  --ms-tile-border: rgba(var(--tint-rgb), 0.12);
  --ms-tile-bg: rgba(255, 255, 255, 0.8);
  --ms-tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 12px 28px rgba(0, 0, 0, 0.05);
  --ms-ico-bg: rgba(var(--tint-rgb), 0.08);
  --ms-ico-border: rgba(var(--tint-rgb), 0.12);
  --ms-ico-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}
.chat-more-sheet[data-theme="poster"] {
  --ms-card-bg:
    radial-gradient(140% 100% at 10% 0%, rgba(var(--blush-rgb), 0.38) 0%, transparent 55%),
    radial-gradient(140% 100% at 90% 0%, rgba(var(--tint-rgb), 0.42) 0%, transparent 58%),
    linear-gradient(180deg, rgba(18, 20, 26, 0.98) 0%, rgba(18, 20, 26, 0.9) 100%);
  --ms-card-border: rgba(255, 255, 255, 0.12);
  --ms-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 110px rgba(0, 0, 0, 0.55);
  --ms-tile-border: rgba(255, 255, 255, 0.1);
  --ms-tile-bg: rgba(255, 255, 255, 0.06);
  --ms-tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 60px rgba(0, 0, 0, 0.25);
  --ms-ico-bg: rgba(255, 255, 255, 0.08);
  --ms-ico-border: rgba(255, 255, 255, 0.14);
  --ms-ico-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.chat-more-sheet[data-theme="soft"] {
  --ms-card-bg:
    radial-gradient(120% 90% at 20% 0%, rgba(var(--blush-rgb), 0.14) 0%, transparent 58%),
    radial-gradient(120% 90% at 85% 0%, rgba(var(--tint-rgb), 0.12) 0%, transparent 62%),
    var(--bg-card);
  --ms-card-border: rgba(var(--tint-rgb), 0.12);
  --ms-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 28px 82px rgba(0,  0,  0, 0.15);
  --ms-tile-border: rgba(var(--tint-rgb), 0.12);
  --ms-tile-bg:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.58) 36%, transparent 70%),
    rgba(var(--tint-rgb), 0.03);
  --ms-tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) inset, 0 16px 40px rgba(0, 0, 0, 0.08);
  --ms-ico-bg:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 38%, transparent 72%),
    linear-gradient(165deg, rgba(var(--tint-rgb), 0.22) 0%, rgba(var(--blush-rgb), 0.18) 100%);
  --ms-ico-border: rgba(var(--tint-rgb), 0.14);
  --ms-ico-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

/* 让主题差异“肉眼明显” */
.chat-more-sheet[data-theme="poster"] .chat-more-sheet-title,
.chat-more-sheet[data-theme="poster"] .chat-more-sheet-sub,
.chat-more-sheet[data-theme="poster"] .chat-more-bento-title,
.chat-more-sheet[data-theme="poster"] .chat-more-bento-desc {
  color: rgba(255, 255, 255, 0.92);
}
.chat-more-sheet[data-theme="poster"] .chat-more-bento-desc {
  color: rgba(255, 255, 255, 0.68);
}
.chat-more-sheet[data-theme="poster"] .chat-more-sheet-close {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}
.chat-more-sheet[data-theme="poster"] .chat-more-sheet-handle {
  background: rgba(255, 255, 255, 0.16);
}

.chat-more-sheet[data-theme="ios"] .chat-more-bento-tile {
  border-radius: 24px;
}
.chat-more-sheet[data-theme="ios"] .chat-more-bento-ico {
  border-radius: 24px;
}

.chat-send-choice-card {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1;
  width: min(520px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  background: var(--bg-card);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 18px 44px rgba(0, 0, 0, 0.18);
  padding: 14px 14px 12px;
}

body.dark .chat-send-choice-card {
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 20px 50px rgba(0, 0, 0, 0.44);
}

.chat-send-choice-title {
  margin-top: 8px;
  margin-bottom: 6px;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--text-main);
}

.chat-send-choice-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.chat-send-choice-actions .chip {
  flex: 1;
  justify-content: center;
}

.chat-reroll-reason-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chat-reroll-reason-tag {
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 7px 12px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.chat-reroll-reason-tag.is-active {
  border-color: transparent;
  background: var(--text-main);
  color: var(--bg-device);
  box-shadow: var(--shadow-card);
}

body.dark .chat-reroll-reason-tag.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
}

.chat-reroll-reason-note-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--text-sub);
}

.chat-reroll-reason-note {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-device);
  color: var(--text-main);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 52px;
}

.chat-reroll-reason-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.chat-reroll-reason-actions .chip {
  flex: 1;
  justify-content: center;
}

/* 角色主动拨入 · 来电浮层（须高于 .auth-overlay 9999；用 .is-open 显隐，避免 [hidden] 与样式打架） */
.char-incoming-call {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px))
    max(28px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
}
.char-incoming-call:not(.is-open) {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}
.char-incoming-call.is-open {
  display: grid !important;
  visibility: visible;
  pointer-events: auto;
}
.char-incoming-call-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(10, 12, 16, 0.52);
}
.char-incoming-call-slab {
  position: relative;
  z-index: 1;
  width: min(380px, calc(100vw - 32px));
  max-width: 100%;
  align-items: flex-end;
}
.char-incoming-call-slab .chat-slab-spine-idx {
  font-family: "Noto Sans SC", "Source Han Sans SC", sans-serif;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.85;
}
.char-incoming-call-cap {
  padding: 0 4px 0 2px;
  margin-bottom: 2px;
}
.char-incoming-call-cap-eyebrow {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.44rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.char-incoming-call-mat {
  padding: 14px 12px 14px;
}
.char-incoming-call-panel {
  transform: rotate(0);
  text-align: center;
  padding: 18px 16px 16px;
  border-radius: 18px 20px 16px 19px;
}
.char-incoming-call[data-call-mode="video"] .char-incoming-call-panel {
  box-shadow:
    4px 5px 0 rgba(var(--blush-rgb), 0.12),
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark .char-incoming-call[data-call-mode="video"] .char-incoming-call-panel {
  box-shadow:
    4px 5px 0 rgba(var(--blush-rgb), 0.1),
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.char-incoming-call-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.char-incoming-call-visual {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
}
.char-incoming-call-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--tint-rgb), 0.42);
  animation: char-incoming-pulse 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
}
.char-incoming-call-pulse--2,
.char-incoming-call-pulse--3 {
  display: none;
}
.char-incoming-call[data-call-mode="video"] .char-incoming-call-pulse {
  border-color: rgba(var(--blush-rgb), 0.38);
}
@keyframes char-incoming-pulse {
  0% {
    transform: scale(0.88);
    opacity: 0.5;
  }
  65% {
    transform: scale(1.42);
    opacity: 0;
  }
  100% {
    transform: scale(1.42);
    opacity: 0;
  }
}
.char-incoming-call-avatar-wrap {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(var(--tint-rgb), 0.12),
    0 12px 32px rgba(0, 0, 0, 0.14);
  background: linear-gradient(155deg, rgba(var(--tint-rgb), 0.14), var(--bg-card));
  display: grid;
  place-items: center;
}
body.dark .char-incoming-call-avatar-wrap {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 14px 40px rgba(0, 0, 0, 0.42);
}
.char-incoming-call-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.char-incoming-call-initial {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.char-incoming-call-initial.is-hidden {
  display: none;
}
.char-incoming-call-name {
  margin: 0;
  max-width: 100%;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: clamp(1.28rem, 4.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-main);
}
.char-incoming-call-type {
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--accent) 38%, var(--text-sub) 62%);
  background: rgba(var(--tint-rgb), 0.045);
  border: 1px solid rgba(var(--tint-rgb), 0.11);
}
.char-incoming-call[data-call-mode="video"] .char-incoming-call-type {
  color: color-mix(in srgb, rgb(var(--blush-rgb)) 40%, var(--text-sub) 60%);
  background: rgba(var(--blush-rgb), 0.06);
  border-color: rgba(var(--blush-rgb), 0.14);
}
body.dark .char-incoming-call[data-call-mode="video"] .char-incoming-call-type {
  color: color-mix(in srgb, rgb(var(--blush-rgb)) 55%, var(--text-sub) 45%);
}
body.dark .char-incoming-call-type {
  background: rgba(var(--tint-rgb), 0.09);
  border-color: rgba(var(--tint-rgb), 0.16);
  color: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, 0.72) 55%);
}
body.dark .char-incoming-call[data-call-mode="video"] .char-incoming-call-type {
  background: rgba(var(--blush-rgb), 0.1);
  border-color: rgba(var(--blush-rgb), 0.18);
}
.char-incoming-call-hint {
  margin: 12px 0 0;
  max-width: 26em;
  font-size: 0.82rem;
  color: var(--text-sub);
  line-height: 1.5;
}
.char-incoming-call-actions {
  display: flex;
  gap: 44px;
  margin-top: 24px;
  justify-content: center;
  align-items: flex-start;
}
.char-incoming-call-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 76px;
}
.char-incoming-call-act-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0.06em;
}
.char-incoming-call-fab {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.18s ease, color 0.18s ease, filter 0.15s ease;
}
.char-incoming-call-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.char-incoming-call-fab:active {
  transform: scale(0.94);
}
.char-incoming-call-fab i {
  font-size: 1.52rem;
  line-height: 1;
}
/* 拒接：中性线框，不强调「危险红」 */
.char-incoming-call-fab--decline {
  color: var(--text-sub);
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 8px 22px rgba(0, 0, 0, 0.05);
}
.char-incoming-call-fab--decline:hover {
  background: rgba(var(--tint-rgb), 0.06);
  border-color: rgba(var(--tint-rgb), 0.22);
  color: var(--text-main);
}
body.dark .char-incoming-call-fab--decline {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.32);
}
body.dark .char-incoming-call-fab--decline:hover {
  background: rgba(var(--tint-rgb), 0.12);
  border-color: rgba(var(--tint-rgb), 0.28);
  color: rgba(255, 255, 255, 0.88);
}
/* 接听：浅色底 + 主题色图标，避免深色实心底（金/棕 Palette 时尤其闷） */
.char-incoming-call-fab--accept {
  color: var(--accent);
  border: 1px solid rgba(var(--tint-rgb), 0.16);
  background: linear-gradient(
    165deg,
    rgba(var(--tint-rgb), 0.1) 0%,
    rgba(var(--tint-rgb), 0.16) 48%,
    rgba(var(--tint-rgb), 0.12) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 6px 18px rgba(var(--tint-rgb), 0.12);
}
.char-incoming-call-fab--accept:hover {
  filter: none;
  background: linear-gradient(
    165deg,
    rgba(var(--tint-rgb), 0.14) 0%,
    rgba(var(--tint-rgb), 0.2) 48%,
    rgba(var(--tint-rgb), 0.15) 100%
  );
  border-color: rgba(var(--tint-rgb), 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 22px rgba(var(--tint-rgb), 0.16);
}
body.dark .char-incoming-call-fab--accept {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--tint-rgb), 0.22);
  background: linear-gradient(
    165deg,
    rgba(var(--tint-rgb), 0.22) 0%,
    rgba(var(--tint-rgb), 0.34) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 22px rgba(0, 0, 0, 0.28);
}
body.dark .char-incoming-call-fab--accept:hover {
  filter: none;
  background: linear-gradient(
    165deg,
    rgba(var(--tint-rgb), 0.28) 0%,
    rgba(var(--tint-rgb), 0.4) 100%
  );
  border-color: rgba(var(--tint-rgb), 0.3);
}
.char-incoming-call-accept-ico[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }

/* 文档与主壳：隐藏滚动条，仍可滚轮 / 触控滑动 */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  display: grid;
  place-items: center;
  min-height: 100%;
  transition: background 0.3s, color 0.3s;
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.is-locked {
  overflow: hidden;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 9, 14, 0.52);
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
}
.auth-overlay.show {
  display: flex;
}
.auth-card {
  width: min(360px, 100%);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-float);
  padding: 18px 16px 14px;
}
.auth-kicker {
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.auth-card h2 {
  margin-top: 8px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.7rem;
}
.auth-desc {
  margin-top: 8px;
  color: var(--text-sub);
  font-size: 0.74rem;
  line-height: 1.5;
}
.auth-form {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.auth-form label {
  display: grid;
  gap: 5px;
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.auth-form input {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  padding: 10px 11px;
  font-size: 0.8rem;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
}
.auth-submit {
  margin-top: 4px;
  width: 100%;
}
.auth-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.auth-actions button {
  flex: 1;
}
.auth-alt {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.auth-alt-k {
  margin: 0;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.auth-discord-btn {
  width: 100%;
  --discord-brand: #5865f2;
  border-color: color-mix(in srgb, var(--discord-brand) 55%, var(--line));
  background: color-mix(in srgb, var(--discord-brand) 12%, var(--bg-card));
  color: var(--text-main);
}
.auth-discord-btn:hover:not(:disabled) {
  border-color: var(--discord-brand);
  background: color-mix(in srgb, var(--discord-brand) 20%, var(--bg-card));
}
.auth-discord-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.auth-alt-hint {
  margin: 0;
  font-size: 0.6rem;
  line-height: 1.4;
  color: var(--text-sub);
  text-align: center;
}
.auth-msg {
  min-height: 18px;
  margin-top: 10px;
  font-size: 0.68rem;
  color: var(--text-sub);
}
.auth-msg.error {
  color: #c44646;
  white-space: pre-line;
  line-height: 1.45;
}
.auth-msg.ok {
  color: #2c7a57;
}

.auth-skip {
  margin-top: 12px;
  width: 100%;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: transparent;
  color: var(--text-sub);
  font-family: "Space Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.auth-skip:hover {
  border-color: var(--accent);
  color: var(--text-main);
}

.auth-toplink-row {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}
.auth-toplink {
  font-family: "Space Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.auth-toplink:hover {
  text-decoration: underline;
}
.auth-toplink-hint {
  font-size: 0.62rem;
  color: var(--text-sub);
  line-height: 1.35;
}
.auth-field-note {
  font-size: 0.58rem;
  color: var(--text-sub);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.auth-form:not(.auth-form--register) .auth-register-only,
.auth-overlay:not(.auth-overlay--register) > .auth-card > .auth-register-only {
  display: none !important;
}

/* 领码全屏层：与 #auth-overlay 二选一显示，同 index 内单独一页 */
.activation-screen[hidden] {
  display: none !important;
}
.activation-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  box-sizing: border-box;
  margin: 0;
  overflow: auto;
  background: var(--bg-body);
  color: var(--text-main);
  -webkit-overflow-scrolling: touch;
}
.activation-doc {
  max-width: 440px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top, 0px)) 18px max(28px, env(safe-area-inset-bottom, 0px));
}
.activation-hero-title {
  margin: 0 0 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.65rem;
}
.activation-panel {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-float);
  padding: 16px 14px 14px;
}
.activation-field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.activation-field span {
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.activation-field input {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  padding: 10px 11px;
  font-size: 0.85rem;
}
.activation-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.activation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.activation-actions .chip {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.activation-result {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.05);
}
.activation-result-k {
  margin: 0 0 6px;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.activation-result-code {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  word-break: break-all;
  color: var(--text-main);
}
.activation-msg {
  min-height: 18px;
  margin-top: 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-sub);
}
.activation-msg.is-err {
  color: #c44646;
}
.activation-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
body.activation-open {
  overflow: hidden;
}

/* 首屏数据未就绪时略降对比，避免开屏后进桌面「假卡住」感 */
html.xxj-boot-data-pending .phone {
  opacity: 0.94;
  transition: opacity 0.35s ease;
}

/* app.js 加载中：底栏细进度条，不挡桌面 */
.app-load-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 180;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
body.dark .app-load-bar {
  background: rgba(255, 255, 255, 0.12);
}
.app-load-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--tint-rgb, 58 92 137), 0.55), rgba(var(--tint-rgb, 58 92 137), 0.95));
  transition: width 0.2s ease;
}
html.xxj-awaiting-app .phone {
  cursor: progress;
}
html.xxj-main-loading .phone {
  cursor: wait;
}

/* 开屏：浅色层次 + 蝶蜓点缀过渡（无卡片） */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  pointer-events: auto;
  color: var(--text-main);
  background-color: var(--bg-body);
  background-image:
    radial-gradient(ellipse 130% 92% at 10% -8%, rgba(var(--tint-rgb), 0.24), transparent 55%),
    radial-gradient(ellipse 100% 78% at 98% 104%, rgba(var(--blush-rgb), 0.2), transparent 50%),
    radial-gradient(ellipse 72% 58% at 50% 118%, rgba(var(--tint-rgb), 0.1), transparent 48%),
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.34) 0%, transparent 42%);
  transition: opacity 0.72s ease, visibility 0.72s ease;
  /* 先飞再标题：标题水波揭示起点与后续副文案时间线 */
  --boot-title-delay: 1.55s;
  --boot-post-title: calc(var(--boot-title-delay) + 0.92s);
}
.boot-splash.boot-splash--ready {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.boot-splash.boot-splash--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-splash-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.boot-splash-orbit {
  position: absolute;
  width: min(88vmin, 620px);
  height: min(88vmin, 620px);
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 36%, rgba(var(--blush-rgb), 0.26), transparent 52%),
    radial-gradient(circle at 68% 58%, rgba(var(--tint-rgb), 0.2), transparent 50%);
  filter: blur(44px);
  opacity: 0.5;
  animation: boot-splash-orbit-drift 18s ease-in-out infinite alternate;
}
.boot-splash.boot-splash--in .boot-splash-orbit {
  animation:
    boot-splash-orbit-pop 1.5s ease-out 0s 1,
    boot-splash-orbit-drift 18s ease-in-out 1.4s infinite alternate;
}
.boot-splash-aurora-mount {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(200vmin, 1400px);
  height: min(200vmin, 1400px);
  translate: -50% -50%;
  pointer-events: none;
}
.boot-splash-aurora {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(
    from 220deg at 50% 50%,
    rgba(var(--blush-rgb), 0.14),
    transparent 70deg,
    rgba(var(--tint-rgb), 0.12),
    transparent 155deg,
    rgba(255, 255, 255, 0.1),
    transparent 245deg,
    rgba(var(--blush-rgb), 0.1),
    transparent 360deg
  );
  filter: blur(72px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
body.dark .boot-splash-aurora {
  mix-blend-mode: screen;
}
.boot-splash.boot-splash--in .boot-splash-aurora-mount {
  animation: boot-splash-aurora-spin 26s linear 0.5s infinite;
}
.boot-splash.boot-splash--in .boot-splash-aurora {
  animation: boot-splash-aurora-in 1.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.boot-splash-shimmer {
  position: absolute;
  inset: -40% -30%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 48%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.18) 54%,
    transparent 62%
  );
  opacity: 0;
  transform: translateX(-18%) rotate(-8deg);
  pointer-events: none;
}
.boot-splash.boot-splash--in .boot-splash-shimmer {
  animation: boot-splash-shimmer-pass 7s ease-in-out 0.35s infinite;
}
.boot-splash-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.04;
  background-image:
    radial-gradient(circle, var(--line) 0.55px, transparent 0.6px);
  background-size: 14px 14px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 48%, #000 12%, transparent 72%);
  pointer-events: none;
}
body.dark .boot-splash-grid {
  opacity: 0.07;
}

.boot-splash-dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}
body.dark .boot-splash-dust {
  mix-blend-mode: soft-light;
}
.boot-splash.boot-splash--in .boot-splash-dust {
  animation: boot-splash-dust-in 0.9s ease 0.2s forwards;
}

.boot-splash-sting {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.12) min(32vw, 200px),
    transparent min(58vw, 72%)
  );
  mix-blend-mode: soft-light;
}
body.dark .boot-splash-sting {
  background: radial-gradient(
    circle at 50% 40%,
    rgba(200, 210, 255, 0.22) 0%,
    rgba(120, 140, 200, 0.06) min(36vw, 220px),
    transparent min(62vw, 78%)
  );
  mix-blend-mode: screen;
}
.boot-splash.boot-splash--in .boot-splash-sting {
  animation: boot-splash-sting-flash 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--boot-title-delay) forwards;
}

.boot-splash-fauna {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.boot-splash-fauna-item {
  position: absolute;
  opacity: 0;
  --fauna-tilt: 0deg;
  color: var(--accent);
  filter: drop-shadow(0 10px 28px rgba(var(--tint-rgb), 0.18)) drop-shadow(0 0 24px rgba(var(--blush-rgb), 0.08));
}
.boot-splash-fauna-item--dragon {
  color: rgba(var(--tint-rgb), 0.82);
}
.boot-splash-fauna-item--butter {
  color: rgba(var(--text-sub), 0.42);
}
body.dark .boot-splash-fauna-item--butter {
  color: rgba(var(--text-sub), 0.55);
}
.boot-splash-fauna-item svg {
  display: block;
}
.boot-splash-fauna-pack {
  transform: rotate(var(--fauna-tilt));
  transform-origin: 50% 50%;
  will-change: transform;
}
.boot-splash-fauna-item--1 {
  top: 12%;
  left: 2%;
}
.boot-splash-fauna-item--2 {
  top: 16%;
  right: 4%;
}
.boot-splash-fauna-item--3 {
  bottom: 20%;
  left: 5%;
}
.boot-splash-fauna-item--4 {
  bottom: 14%;
  right: 2%;
}

.boot-splash-df-wing {
  fill: rgba(var(--tint-rgb), 0.19);
  transform-box: fill-box;
  transform-origin: center;
}
body.dark .boot-splash-df-wing {
  fill: rgba(var(--tint-rgb), 0.3);
}
.boot-splash-bf-path {
  fill: rgba(var(--blush-rgb), 0.15);
}
.boot-splash-bf-path--lo {
  fill: rgba(var(--blush-rgb), 0.1);
}
body.dark .boot-splash-bf-path {
  fill: rgba(var(--blush-rgb), 0.22);
}
body.dark .boot-splash-bf-path--lo {
  fill: rgba(var(--blush-rgb), 0.14);
}

.boot-splash-stage {
  position: relative;
  z-index: 4;
  width: min(24rem, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(22px);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.boot-splash-eyebrow {
  margin: 0.85rem 0 0;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 0.42rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0;
  transform: translateY(8px);
}
.boot-splash-title-shell {
  position: relative;
  display: inline-block;
  margin: 0;
  isolation: isolate;
}
.boot-splash-title-shell::before,
.boot-splash-title-shell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(72vw, 260px);
  height: min(72vw, 260px);
  margin: calc(min(72vw, 260px) / -2) 0 0 calc(min(72vw, 260px) / -2);
  border-radius: 50%;
  border: 1.5px solid rgba(var(--tint-rgb), 0.32);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 48px rgba(var(--tint-rgb), 0.2),
    0 0 96px rgba(var(--blush-rgb), 0.1);
  opacity: 0;
  transform: scale(0.06);
  pointer-events: none;
  z-index: 0;
}
.boot-splash-title-shell::after {
  border-color: rgba(var(--blush-rgb), 0.32);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 56px rgba(var(--blush-rgb), 0.18);
}
.boot-splash-title-glare {
  position: absolute;
  inset: -35% -50%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 38%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.1) 56%,
    transparent 62%
  );
  transform: translateX(-55%) skewX(-12deg);
  opacity: 0;
  mix-blend-mode: soft-light;
}
body.dark .boot-splash-title-glare {
  background: linear-gradient(
    118deg,
    transparent 40%,
    rgba(255, 255, 255, 0.06) 46%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 60%
  );
  mix-blend-mode: overlay;
}
.boot-splash-title {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-family: "Playfair Display", "Noto Sans SC", serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.55rem, 10vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  background: linear-gradient(
    118deg,
    var(--text-main) 0%,
    var(--text-main) 28%,
    var(--accent) 52%,
    rgba(var(--blush-rgb), 0.95) 72%,
    var(--accent) 88%,
    var(--text-main) 100%
  );
  background-size: 240% 100%;
  background-position: 8% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text-main);
  -webkit-clip-path: circle(0% at 50% 54%);
  clip-path: circle(0% at 50% 54%);
  opacity: 1;
  filter: blur(14px);
  will-change: clip-path, filter, transform;
}
body.dark .boot-splash-title {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .boot-splash-title {
    color: transparent;
    text-shadow: none;
  }
}
.boot-splash-meta-row {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  opacity: 0;
  transform: translateY(10px);
}
.boot-splash-ver {
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  color: var(--accent);
}
.boot-splash-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), rgba(var(--blush-rgb), 0.85));
  box-shadow: 0 0 0 1px rgba(var(--tint-rgb), 0.15);
}
.boot-splash-k {
  font-family: "Noto Sans SC", "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--text-sub);
}
.boot-splash-lead {
  margin: 1.45rem 0 0;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0;
  transform: translateY(8px);
}

.boot-splash-enter {
  margin-top: 1.85rem;
  min-width: 11.5rem;
  padding: 13px 28px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--text-main);
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition:
    border-color 0.35s ease,
    background-color 0.35s ease,
    color 0.3s ease;
}
body.dark .boot-splash-enter {
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
}
.boot-splash-enter:disabled {
  cursor: default;
}
.boot-splash--ready .boot-splash-enter:not(:disabled) {
  visibility: visible;
  pointer-events: auto;
  animation: boot-splash-enter-pop 0.75s cubic-bezier(0.34, 1.4, 0.55, 1) both;
}
.boot-splash--ready .boot-splash-enter:not(:disabled):hover {
  border-color: rgba(var(--tint-rgb), 0.45);
  color: var(--accent);
  background: rgba(var(--tint-rgb), 0.1);
}
.boot-splash--ready .boot-splash-enter:not(:disabled):active {
  transform: translateY(1px);
}

.boot-splash-load {
  width: min(280px, 78vw);
  margin: 0 auto 14px;
  text-align: center;
}
.boot-splash-load-track {
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
}
body.dark .boot-splash-load-track {
  background: rgba(255, 255, 255, 0.14);
}
.boot-splash-load-fill {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--tint-rgb, 58 92 137), 0.45), rgba(var(--tint-rgb, 58 92 137), 0.92));
  transition: width 0.28s ease;
}
.boot-splash-load-label {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-sub);
  min-height: 1.2em;
}
.boot-splash--ready .boot-splash-load {
  display: none;
}

.boot-splash-hint {
  margin-top: 0.85rem;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 0.36rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0;
  transition: opacity 0.45s ease 0.08s;
}
.boot-splash--ready .boot-splash-hint {
  opacity: 0.5;
}

.boot-splash.boot-splash--in .boot-splash-fauna-item--1 {
  animation: boot-splash-fauna-appear 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--2 {
  animation: boot-splash-fauna-appear 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--3 {
  animation: boot-splash-fauna-appear 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--4 {
  animation: boot-splash-fauna-appear 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.44s forwards;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--1 .boot-splash-fauna-pack {
  animation: boot-splash-fauna-drift-a 13s ease-in-out 0.75s infinite alternate;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--2 .boot-splash-fauna-pack {
  animation: boot-splash-fauna-drift-b 15s ease-in-out 0.85s infinite alternate;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--3 .boot-splash-fauna-pack {
  animation: boot-splash-fauna-drift-c 14s ease-in-out 0.95s infinite alternate;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--4 .boot-splash-fauna-pack {
  animation: boot-splash-fauna-drift-d 16s ease-in-out 1.05s infinite alternate;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--dragon .boot-splash-df-wing {
  animation: boot-splash-df-glint 0.11s ease-in-out infinite alternate;
}
.boot-splash.boot-splash--in .boot-splash-fauna-item--butter .boot-splash-fauna-pack svg {
  animation: boot-splash-bf-sway 2.1s ease-in-out infinite alternate;
}
.boot-splash.boot-splash--in .boot-splash-stage {
  animation: boot-splash-stage-delayed-rise 0.72s cubic-bezier(0.2, 0.85, 0.22, 1) calc(var(--boot-title-delay) - 0.1s) forwards;
}
.boot-splash.boot-splash--in .boot-splash-title-shell::before {
  animation: boot-splash-ripple-ring 1.28s cubic-bezier(0.22, 1, 0.36, 1) var(--boot-title-delay) forwards;
}
.boot-splash.boot-splash--in .boot-splash-title-shell::after {
  animation: boot-splash-ripple-ring 1.42s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--boot-title-delay) + 0.2s) forwards;
}
.boot-splash.boot-splash--in .boot-splash-title-glare {
  animation: boot-splash-title-glare-sweep 0.78s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--boot-title-delay) + 0.38s) forwards;
}
.boot-splash.boot-splash--in .boot-splash-title {
  animation:
    boot-splash-title-ripple-reveal 1.05s cubic-bezier(0.26, 0.82, 0.14, 1) var(--boot-title-delay) forwards,
    boot-splash-title-hero-pop 0.88s cubic-bezier(0.34, 1.2, 0.55, 1) calc(var(--boot-title-delay) + 0.68s) both,
    boot-splash-title-chrome 9s ease-in-out calc(var(--boot-title-delay) + 0.95s) infinite alternate;
}
.boot-splash.boot-splash--in .boot-splash-eyebrow {
  animation: boot-splash-fade-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--boot-post-title) + 0.08s) forwards;
}
.boot-splash.boot-splash--in .boot-splash-meta-row {
  animation: boot-splash-fade-up 0.78s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--boot-post-title) + 0.22s) forwards;
}
.boot-splash.boot-splash--in .boot-splash-lead {
  animation: boot-splash-fade-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--boot-post-title) + 0.4s) forwards;
}

@keyframes boot-splash-orbit-drift {
  0% {
    transform: translate(-50%, -50%) translate(-3%, -2%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) translate(3%, 2%) scale(1.06);
  }
}
@keyframes boot-splash-orbit-pop {
  0% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.88);
  }
  55% {
    opacity: 0.62;
  }
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes boot-splash-shimmer-pass {
  0% {
    opacity: 0;
    transform: translateX(-28%) rotate(-7deg);
  }
  22% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.16;
    transform: translateX(14%) rotate(-7deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-28%) rotate(-7deg);
  }
}
@keyframes boot-splash-aurora-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 0.5;
    transform: scale(1);
  }
}
@keyframes boot-splash-aurora-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes boot-splash-sting-flash {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}
@keyframes boot-splash-dust-in {
  to {
    opacity: 0.045;
  }
}
@keyframes boot-splash-fauna-appear {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes boot-splash-fauna-drift-a {
  from {
    transform: rotate(var(--fauna-tilt)) translate(-5px, 6px);
  }
  to {
    transform: rotate(var(--fauna-tilt)) translate(10px, -12px);
  }
}
@keyframes boot-splash-fauna-drift-b {
  from {
    transform: rotate(var(--fauna-tilt)) translate(8px, -4px);
  }
  to {
    transform: rotate(var(--fauna-tilt)) translate(-12px, 10px);
  }
}
@keyframes boot-splash-fauna-drift-c {
  from {
    transform: rotate(var(--fauna-tilt)) translate(-8px, -6px);
  }
  to {
    transform: rotate(var(--fauna-tilt)) translate(14px, 8px);
  }
}
@keyframes boot-splash-fauna-drift-d {
  from {
    transform: rotate(var(--fauna-tilt)) translate(6px, 10px);
  }
  to {
    transform: rotate(var(--fauna-tilt)) translate(-10px, -14px);
  }
}
@keyframes boot-splash-df-glint {
  from {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}
@keyframes boot-splash-bf-sway {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(6deg);
  }
}
@keyframes boot-splash-stage-delayed-rise {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  78% {
    opacity: 1;
    transform: translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes boot-splash-ripple-ring {
  0% {
    opacity: 0.48;
    transform: scale(0.06);
  }
  100% {
    opacity: 0;
    transform: scale(2.35);
  }
}
@keyframes boot-splash-title-ripple-reveal {
  0% {
    -webkit-clip-path: circle(0% at 50% 54%);
    clip-path: circle(0% at 50% 54%);
    filter: blur(14px);
    letter-spacing: 0.22em;
  }
  32% {
    filter: blur(5px);
  }
  100% {
    -webkit-clip-path: circle(145% at 50% 54%);
    clip-path: circle(145% at 50% 54%);
    filter: blur(0);
    letter-spacing: 0.1em;
  }
}
@keyframes boot-splash-title-glare-sweep {
  0% {
    opacity: 0;
    transform: translateX(-82%) skewX(-12deg);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(82%) skewX(-12deg);
  }
}
@keyframes boot-splash-title-hero-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.048);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes boot-splash-title-chrome {
  0% {
    background-position: 2% 50%;
  }
  100% {
    background-position: 98% 50%;
  }
}
@keyframes boot-splash-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes boot-splash-enter-pop {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  65% {
    opacity: 1;
    transform: translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-splash {
    transition: opacity 0.32s ease, visibility 0.32s ease;
    --boot-title-delay: 0.08s;
    --boot-post-title: 0.28s;
  }
  .boot-splash-orbit,
  .boot-splash-shimmer,
  .boot-splash-aurora-mount,
  .boot-splash-aurora {
    animation: none !important;
  }
  .boot-splash-aurora {
    opacity: 0.26 !important;
    transform: none !important;
  }
  .boot-splash-sting {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
  .boot-splash-title-glare {
    animation: none !important;
    opacity: 0 !important;
  }
  .boot-splash-dust {
    opacity: 0.04 !important;
    animation: none !important;
  }
  .boot-splash-fauna-item,
  .boot-splash-fauna-pack,
  .boot-splash-fauna-item--dragon .boot-splash-df-wing,
  .boot-splash-fauna-item--butter .boot-splash-fauna-pack svg {
    animation: none !important;
  }
  .boot-splash-fauna-item {
    opacity: 0.88 !important;
    transform: none !important;
  }
  .boot-splash-fauna-pack {
    transform: rotate(var(--fauna-tilt)) !important;
  }
  .boot-splash-stage {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .boot-splash-title-shell::before,
  .boot-splash-title-shell::after {
    animation: none !important;
    opacity: 0 !important;
    transform: scale(0) !important;
  }
  .boot-splash-eyebrow,
  .boot-splash-title,
  .boot-splash-meta-row,
  .boot-splash-lead {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: 0.1em !important;
    animation: none !important;
  }
  .boot-splash-title {
    -webkit-clip-path: none !important;
    clip-path: none !important;
  }
  .boot-splash--ready .boot-splash-hint {
    opacity: 0.55;
  }
  .boot-splash--ready .boot-splash-enter:not(:disabled) {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 380px) {
  .boot-splash-title {
    letter-spacing: 0.04em;
  }
}

/* 开屏：移动端减负（大 blur / SVG 噪点 / 多层混合 / 无限动画 易掉帧） */
@media (max-width: 520px) {
  .boot-splash {
    --boot-title-delay: 1.05s;
    --boot-post-title: calc(var(--boot-title-delay) + 0.65s);
  }
  .boot-splash-orbit {
    filter: blur(22px);
  }
  .boot-splash.boot-splash--in .boot-splash-orbit {
    animation: boot-splash-orbit-pop 1.35s ease-out 0s 1 forwards;
  }
  .boot-splash-aurora {
    filter: blur(32px);
    mix-blend-mode: normal;
  }
  body.dark .boot-splash-aurora {
    mix-blend-mode: normal;
  }
  .boot-splash.boot-splash--in .boot-splash-aurora-mount {
    animation: none;
  }
  .boot-splash.boot-splash--in .boot-splash-shimmer {
    animation: none;
    opacity: 0;
  }
  .boot-splash-grid {
    opacity: 0.032;
  }
  body.dark .boot-splash-grid {
    opacity: 0.05;
  }
  .boot-splash-dust {
    display: none;
  }
  .boot-splash.boot-splash--in .boot-splash-dust {
    animation: none;
  }
  .boot-splash-fauna-item {
    filter: none;
  }
  .boot-splash.boot-splash--in .boot-splash-fauna-item--1 .boot-splash-fauna-pack,
  .boot-splash.boot-splash--in .boot-splash-fauna-item--2 .boot-splash-fauna-pack,
  .boot-splash.boot-splash--in .boot-splash-fauna-item--3 .boot-splash-fauna-pack,
  .boot-splash.boot-splash--in .boot-splash-fauna-item--4 .boot-splash-fauna-pack {
    animation: none;
  }
  .boot-splash.boot-splash--in .boot-splash-fauna-item--dragon .boot-splash-df-wing {
    animation: none;
  }
  .boot-splash.boot-splash--in .boot-splash-fauna-item--butter .boot-splash-fauna-pack svg {
    animation: none;
  }
  .boot-splash-fauna-pack {
    will-change: auto;
  }
  .boot-splash-title-shell::before,
  .boot-splash-title-shell::after {
    box-shadow: 0 0 24px rgba(var(--tint-rgb), 0.12);
  }
  .boot-splash-title-shell::after {
    box-shadow: 0 0 24px rgba(var(--blush-rgb), 0.12);
  }
  .boot-splash-title-glare {
    mix-blend-mode: normal;
    opacity: 0.35;
  }
  body.dark .boot-splash-title-glare {
    mix-blend-mode: normal;
  }
  .boot-splash.boot-splash--in .boot-splash-title-glare {
    animation: none;
    opacity: 0;
  }
  .boot-splash-title {
    filter: blur(8px);
    will-change: clip-path;
  }
  .boot-splash.boot-splash--in .boot-splash-title {
    animation:
      boot-splash-title-ripple-reveal 0.92s cubic-bezier(0.26, 0.82, 0.14, 1) var(--boot-title-delay) forwards,
      boot-splash-title-hero-pop 0.72s cubic-bezier(0.34, 1.2, 0.55, 1) calc(var(--boot-title-delay) + 0.55s) both;
  }
}

.stage { min-height: 100vh; display: grid; place-items: center; padding: 20px; }

.phone {
  width: 390px;
  height: 844px;
  max-height: 100vh;
  max-height: min(100dvh, 100svh);
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-device);
  box-shadow: none;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
}

.settings-screen,
.sticker-screen,
.wardrobe-screen,
.checkup-screen,
.roam-screen,
.forum-screen,
.relation-screen,
.roleplay-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-device);
  color: var(--text-main);
  /* 盖住 flex 子项舍入误差，避免底部露 1px 异色 */
  min-height: 100%;
  z-index: 29;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.settings-screen.is-open,
.sticker-screen.is-open,
.wardrobe-screen.is-open,
.checkup-screen.is-open,
.roam-screen.is-open,
.forum-screen.is-open,
.relation-screen.is-open,
.roleplay-screen.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.settings-screen {
  z-index: 30;
}
.sticker-screen {
  z-index: 30;
}
.wardrobe-screen {
  z-index: 30;
}
.char-screen .settings-inner {
  background: var(--bg-device);
}
.chat-list-screen {
  z-index: 31;
}
.chat-screen {
  z-index: 32;
}
/* 通话页与主聊共用 .chat-screen 过场样式，叠在主聊之上避免切换时误点下层 */
#chat-call-screen.chat-screen {
  z-index: 33;
  /* 软键盘遮挡补偿：由 app.js 根据 visualViewport 写入 */
  --call-keyboard-inset: 0px;
}
#chat-video-call-screen.chat-screen {
  z-index: 33;
  --call-keyboard-inset: 0px;
}
#chat-offline-screen.chat-screen {
  z-index: 34;
}

/* 专注锁屏：挂 body，全视口 fixed（与来电浮层同级思路，避免 #phone 内被聊天页透出） */
.char-lock-screen {
  position: fixed;
  inset: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100dvh;
  z-index: 10090;
  display: none;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  background: var(--bg-device);
  color: var(--text-main);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  transition:
    opacity 0.28s ease,
    visibility 0.28s;
}
.char-lock-screen.is-open {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.char-lock-pin-try-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 28px));
  padding: 10px 14px;
  border-radius: 14px;
  text-align: center;
  font-size: 0.74rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(18, 18, 18, 0.1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.char-lock-pin-try-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
body.dark .char-lock-pin-try-toast {
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  border-color: var(--line);
  box-shadow: var(--shadow-float);
}
body.is-char-lock-open {
  overflow: hidden;
}
#phone.is-char-lock-active > .chat-screen,
#phone.is-char-lock-active > .chat-call-screen,
#phone.is-char-lock-active > .chat-video-call-screen,
#phone.is-char-lock-active > .chat-offline-screen {
  visibility: hidden !important;
  pointer-events: none !important;
}
.char-lock-ambient-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 78% 58% at 50% 8%, transparent 42%, rgba(0, 0, 0, 0.045) 100%);
}
body.dark .char-lock-ambient-vignette {
  background: radial-gradient(ellipse 78% 52% at 50% 6%, transparent 38%, rgba(0, 0, 0, 0.38) 100%);
}
.char-lock-screen > .chat-filmgrain.char-lock-filmgrain {
  z-index: 1;
  opacity: 0.042;
}
body.dark .char-lock-screen > .chat-filmgrain.char-lock-filmgrain {
  opacity: 0.065;
}
.char-lock-screen > .settings-watermark.char-lock-watermark {
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: 12%;
  font-size: clamp(2.4rem, 14vw, 3.25rem);
  opacity: 0.028;
  max-width: min(38vw, 140px);
  overflow: hidden;
  text-align: right;
  pointer-events: none;
}
.char-lock-screen.is-open:has(.char-lock-stage-wrap--reaction) > .settings-watermark.char-lock-watermark {
  opacity: 0.028;
}
body.dark .char-lock-screen > .settings-watermark.char-lock-watermark {
  opacity: 0.075;
}
.char-lock-inner.settings-inner {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--bg-device);
}
.char-lock-screen .settings-topbar.char-lock-topbar {
  gap: 6px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg-device) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.char-lock-char-unlock-btn[hidden] {
  display: none !important;
}
.char-lock-exit-btn[hidden] {
  display: none !important;
}
.char-lock-topbar-spacer {
  flex: 1;
  min-width: 4px;
}
.char-lock-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}
.char-lock-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 18px 10px;
  text-align: center;
}
.char-lock-who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.char-lock-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: var(--bg-card);
  box-shadow: 0 0 0 1px rgba(var(--tint-rgb), 0.1);
}
.char-lock-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.char-lock-avatar-img.is-hidden {
  display: none !important;
}
.char-lock-avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-sub);
  background: linear-gradient(152deg, rgba(var(--tint-rgb), 0.12), rgba(var(--tint-rgb), 0.02));
}
.char-lock-avatar-fallback.is-hidden {
  display: none !important;
}
.char-lock-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.char-lock-q-btn.char-lock-q-btn--disabled {
  pointer-events: none;
  opacity: 0.55;
}
.char-lock-q-layer.char-lock-q-layer--char-picking .char-lock-q-btn {
  pointer-events: none;
}
.char-lock-q-layer.char-lock-q-layer--open-ended .char-lock-q-actions {
  display: none;
}
.char-lock-q-layer.char-lock-q-layer--open-ended .char-lock-q-prompt {
  max-width: min(26ch, 92vw);
  font-size: 1.05rem;
  line-height: 1.65;
}
.user-lock-char-q-block .user-lock-q-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
@media (max-width: 420px) {
  .user-lock-char-q-block .user-lock-q-opts {
    grid-template-columns: 1fr;
  }
}
.user-lock-char-sheet .user-lock-char-lead {
  padding: 0 18px 8px;
  margin: 0;
}
.user-lock-char-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}
.user-lock-char-q-block {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
}
.user-lock-char-q-block h3 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-sub);
}
.user-lock-char-q-block .char-textarea {
  width: 100%;
  margin-bottom: 6px;
  min-height: 2.4em;
}
.user-lock-char-pin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 18px 10px;
}
@media (max-width: 420px) {
  .user-lock-char-pin-row {
    grid-template-columns: 1fr;
  }
}
.user-lock-char-pin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.user-lock-char-pin-k {
  font-size: 0.72rem;
  color: var(--text-sub);
}
.user-lock-char-pin-input {
  width: 100%;
  min-height: 2.2em;
  margin: 0;
}
.user-lock-char-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 4px 18px 8px;
}
.user-lock-char-chat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.user-lock-char-chat-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.user-lock-char-chat-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(var(--tint-rgb), 0.16);
  background: rgba(var(--tint-rgb), 0.1);
  transition: background 160ms ease, border-color 160ms ease;
}
.user-lock-char-chat-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translate(0, -50%);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease;
}
.user-lock-char-chat-toggle input:checked + .user-lock-char-chat-switch {
  background: var(--accent);
  border-color: rgba(var(--tint-rgb), 0.12);
}
.user-lock-char-chat-toggle input:checked + .user-lock-char-chat-switch::after {
  transform: translate(20px, -50%);
}
.user-lock-char-chat-label {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-main);
  white-space: nowrap;
}
.char-lock-status {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-sub);
  font-family: "Space Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  opacity: 0.92;
}
.char-lock-stage-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}
.char-lock-stage {
  flex: 1 1 auto;
  min-height: min(42vh, 100%);
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vh, 28px) clamp(20px, 6vw, 32px);
  box-sizing: border-box;
  transition:
    opacity 0.28s ease,
    filter 0.32s ease;
}
.char-lock-stage.char-lock-stage--deleting {
  opacity: 0.92;
  filter: saturate(0.88);
}
.char-lock-stage.char-lock-stage--quiz-typing {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: min(50vh, calc(100dvh - 200px));
  justify-content: center;
  align-items: center;
}
.char-lock-stage-line {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: min(26ch, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-main);
}
.char-lock-stage-copy {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Noto Serif SC", "Noto Sans SC", Georgia, serif;
  font-size: clamp(1.32rem, 5.2vw, 2.08rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  text-wrap: wrap;
  color: inherit;
}
.char-lock-stage-copy .char-lock-para {
  display: block;
  width: 100%;
  margin: 0 0 0.72em;
  padding: 0;
  text-align: center;
}
.char-lock-stage-copy .char-lock-para:last-child {
  margin-bottom: 0;
}
#char-lock-typing-text.char-lock-stage-copy {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.char-lock-typing-caret {
  position: relative;
  z-index: 1;
  align-self: center;
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  vertical-align: -0.08em;
  border-radius: 1px;
  background: rgba(var(--tint-rgb), 0.88);
  opacity: 0;
}
.char-lock-typing-caret.char-lock-typing-caret--blink {
  opacity: 1;
  animation: char-lock-caret-blink 0.95s step-end infinite;
}
@keyframes char-lock-caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.08;
  }
}
.char-lock-stage-wrap--tap-continue {
  cursor: pointer;
}
.char-lock-stage-wrap--tap-continue .char-lock-stage-footnote {
  opacity: 0.92;
}
.char-lock-stage-footnote {
  margin: 16px auto 0;
  width: 100%;
  max-width: min(32ch, 92vw);
  align-self: center;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-sub);
  font-family: "Space Mono", monospace;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.char-lock-q-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vh, 32px);
  padding: 24px clamp(20px, 6vw, 32px) 32px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bg-device) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* display:flex 会盖掉 [hidden]，题层关不掉时会挡住整屏打字 */
.char-lock-q-layer[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.char-lock-stage-wrap.char-lock-stage-wrap--reaction {
  z-index: 3;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
}
.char-lock-stage-wrap.char-lock-stage-wrap--reaction .char-lock-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  justify-content: center;
  align-items: center;
}
.char-lock-q-prompt {
  margin: 0 auto;
  width: 100%;
  max-width: min(22ch, 90vw);
  font-family: "Noto Serif SC", "Noto Sans SC", Georgia, serif;
  font-size: clamp(1.12rem, 4.8vw, 1.72rem);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  color: var(--text-main);
}
.char-lock-q-actions {
  width: 100%;
  max-width: min(320px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.char-lock-q-btn {
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: var(--bg-card);
  color: var(--text-main);
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.15s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}
.char-lock-q-btn:hover {
  border-color: rgba(var(--tint-rgb), 0.35);
  background: color-mix(in srgb, var(--bg-card) 88%, rgb(var(--tint-rgb)));
}
.char-lock-q-btn:active {
  transform: scale(0.98);
}
.char-lock-stage.char-lock-stage--user-compose {
  position: relative;
  z-index: 2;
  justify-content: center;
  align-items: center;
}
.char-lock-stage-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  resize: none;
  opacity: 0;
  pointer-events: none;
}
.char-lock-stage.char-lock-stage--user-compose .char-lock-stage-input {
  pointer-events: auto;
}
.char-lock-stage.char-lock-stage--user-compose .char-lock-typing-caret {
  opacity: 1;
}
/* iOS WebKit（含 iOS 18+）：clip/1px 隐藏输入框无法稳定唤起键盘，同屏聊改用可见 textarea */
.char-lock-stage.char-lock-stage--user-compose.char-lock-stage--ios-input .char-lock-stage-line {
  display: none;
}
.char-lock-stage.char-lock-stage--user-compose.char-lock-stage--ios-input .char-lock-stage-input {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(26ch, 92vw);
  height: auto;
  min-height: 2.8em;
  max-height: min(42vh, 320px);
  margin: 0 auto;
  padding: 0;
  clip: auto;
  clip-path: none;
  overflow: auto;
  opacity: 1;
  pointer-events: auto;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  white-space: pre-wrap;
  font-family: "Noto Serif SC", "Noto Sans SC", Georgia, serif;
  font-size: clamp(1.32rem, 5.2vw, 2.08rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--text-main);
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: text;
  user-select: text;
  caret-color: rgba(var(--tint-rgb), 0.88);
}
.char-lock-stage.char-lock-stage--user-compose.char-lock-stage--ios-input .char-lock-typing-caret {
  display: none;
}
.char-lock-exit-sheet {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  pointer-events: none;
}
.char-lock-exit-sheet[hidden] {
  display: none !important;
}
.char-lock-exit-sheet.is-open {
  pointer-events: auto;
}
.char-lock-exit-sheet.is-open .char-lock-exit-sheet-card {
  animation: char-lock-exit-sheet-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes char-lock-exit-sheet-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.char-lock-exit-sheet-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 14, 22, 0.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
body.dark .char-lock-exit-sheet-backdrop {
  background: rgba(0, 0, 0, 0.62);
}
.char-lock-exit-sheet-card {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  max-height: min(88vh, calc(100% - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, rgb(var(--tint-rgb)) 18%, var(--line));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 98%, white) 0%, var(--bg-card) 55%),
    var(--bg-device);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.14),
    0 4px 16px rgba(0, 0, 0, 0.06),
    var(--shadow-float);
}
body.dark .char-lock-exit-sheet-card {
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.5),
    0 6px 20px rgba(0, 0, 0, 0.28),
    var(--shadow-float);
}
.char-lock-exit-sheet-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--tint-rgb), 0.55),
    transparent
  );
  pointer-events: none;
}
.char-lock-exit-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.char-lock-exit-sheet-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  font-style: italic;
  color: color-mix(in srgb, rgb(var(--tint-rgb)) 88%, var(--text-main));
  background: color-mix(in srgb, rgb(var(--tint-rgb)) 14%, var(--bg-device));
  border: 1px solid color-mix(in srgb, rgb(var(--tint-rgb)) 22%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.char-lock-exit-sheet-eyebrow {
  margin: 0 0 2px;
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--tint-rgb), 0.88);
}
.char-lock-exit-sheet-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-main);
}
.char-lock-exit-sheet-lead {
  margin: 0 0 12px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-sub);
}
.char-lock-exit-sheet-clue {
  margin: 0 0 14px;
  padding: 12px 13px 11px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, rgb(var(--tint-rgb)) 22%, transparent);
  border-left: 3px solid rgba(var(--tint-rgb), 0.72);
  background: color-mix(in srgb, rgb(var(--tint-rgb)) 9%, var(--bg-device));
}
.char-lock-exit-sheet-clue[hidden] {
  display: none !important;
}
.char-lock-exit-sheet-clue-k {
  margin: 0 0 5px;
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--tint-rgb), 0.9);
}
.char-lock-exit-sheet-clue-text {
  margin: 0;
  font-family: "Noto Serif SC", "Noto Sans SC", Georgia, serif;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-main);
  white-space: pre-wrap;
}
.char-lock-exit-sheet-field {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
}
.char-lock-exit-sheet-field-k {
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.char-lock-exit-sheet-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: var(--bg-device);
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.char-lock-exit-sheet-input::placeholder {
  color: color-mix(in srgb, var(--text-sub) 72%, transparent);
  font-weight: 500;
}
.char-lock-exit-sheet-input:focus {
  border-color: rgba(var(--tint-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.14);
}
.char-lock-exit-sheet-err {
  min-height: 1.2em;
  margin: 0 0 10px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #c44;
}
body.dark .char-lock-exit-sheet-err {
  color: #f08080;
}
.char-lock-exit-sheet-err:empty {
  display: none;
  margin: 0;
  min-height: 0;
}
.char-lock-exit-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
}
.char-lock-exit-sheet-actions .chip {
  justify-content: center;
  width: 100%;
  min-height: 42px;
  font-size: 0.88rem;
  font-weight: 600;
}
.char-lock-exit-unlock-btn {
  box-shadow: 0 4px 18px rgba(var(--tint-rgb), 0.22);
}
.char-lock-exit-force-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  min-height: 36px;
  font-size: 0.78rem;
  color: var(--text-sub);
  opacity: 0.92;
}
.char-lock-exit-force-btn[hidden] {
  display: none !important;
}

/* 密谈列表 / 聊天：常驻 flex 叠层，用 opacity+transform 做过场（避免 display 无法过渡） */
.chat-list-screen,
.chat-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-device);
  color: var(--text-main);
  min-height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  contain: layout style;
}
.chat-list-screen.is-open,
.chat-screen.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .chat-list-screen,
  .chat-screen,
  .char-screen,
  .my-screen,
  .world-book-screen,
  .settings-screen,
  .sticker-screen,
  .wardrobe-screen {
    transition: opacity 0.12s ease, visibility 0.12s ease;
    transform: none;
  }
  .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 {
    transform: none;
  }
}

/* 人设库：与密谈列表 / 聊天相同的过场 */
.char-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-device);
  color: var(--text-main);
  min-height: 100%;
  z-index: 29;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.char-screen.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 我的：与人设库 / 密谈相同的过场 */
.my-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-device);
  color: var(--text-main);
  min-height: 100%;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.my-screen.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 世界书：与人设库 / 我的相同的过场 */
.world-book-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-device);
  color: var(--text-main);
  min-height: 100%;
  z-index: 28;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.world-book-screen.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 条目内页：隐藏与书架重复的「世界书」顶栏（回桌面请先点「书架」回到藏书） */
#world-book-screen.world-book-screen--reader > .settings-inner > .settings-topbar {
  display: none;
}
#world-book-screen.world-book-screen--reader .world-book-reader-bar {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.world-book-body {
  padding-bottom: calc(12px + max(0px, env(safe-area-inset-bottom, 0px)));
  background-image: radial-gradient(
    circle at center,
    rgba(var(--tint-rgb), 0.09) 0.55px,
    transparent 0.6px
  );
  background-size: 12px 12px;
}
body.dark .world-book-body {
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.05) 0.55px,
    transparent 0.6px
  );
}
.world-book-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.world-book-shelf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 6px 0 12px;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}
.world-book-shelf[hidden] {
  display: none !important;
}
.world-book-shelf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 2px 2px;
}
.world-book-shelf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.world-book-shelf-actions .ph {
  margin-right: 4px;
  vertical-align: -0.06em;
  opacity: 0.88;
}
.world-book-import-zip-label {
  cursor: pointer;
  margin: 0;
}
.world-book-shelf-label {
  position: relative;
  padding-left: 13px;
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.world-book-shelf-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 16px;
  margin-top: -8px;
  border-radius: 1px;
  transform: rotate(-10deg);
  background: linear-gradient(180deg, rgba(var(--blush-rgb), 0.55), rgba(var(--blush-rgb), 0.25));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.world-book-add-btn {
  flex-shrink: 0;
}
.world-book-shelf-grid {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.world-book-li--hint {
  padding: 18px 14px;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--text-sub);
  text-align: center;
  border-radius: 18px;
  border: 1px dashed var(--line);
  background: rgba(var(--tint-rgb), 0.04);
}
.world-book-tile-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding-top: 10px;
  transform-origin: 50% 0;
}
.world-book-li:nth-child(odd) .world-book-tile-wrap {
  transform: rotate(-0.5deg);
}
.world-book-li:nth-child(even) .world-book-tile-wrap {
  transform: rotate(0.55deg);
}
.world-book-tile-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 46px;
  height: 14px;
  margin-left: -23px;
  pointer-events: none;
  border-radius: 2px;
  transform: rotate(-2.2deg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(232, 236, 242, 0.72));
  border: 1px solid rgba(188, 195, 208, 0.42);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}
body.dark .world-book-tile-wrap::before {
  background: #353942;
  border-color: #3d4249;
  box-shadow: none;
}
.world-book-tile {
  width: 100%;
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 0;
}
.world-book-tile-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 17px 14px 14px 32px;
  border-radius: 17px 22px 15px 21px;
  border: 1px solid var(--line);
  background:
    linear-gradient(168deg, rgba(var(--tint-rgb), 0.07) 0%, transparent 46%),
    linear-gradient(95deg, rgba(var(--blush-rgb), 0.06) 0%, transparent 32%),
    var(--bg-card);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.world-book-tile-inner::before,
.world-book-tile-inner::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg-body);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  pointer-events: none;
}
.world-book-tile-inner::before {
  top: 19px;
}
.world-book-tile-inner::after {
  bottom: 15px;
}
.world-book-tile-inner.is-off {
  filter: saturate(0.88);
  opacity: 0.9;
}
.world-book-tile-seal {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(var(--blush-rgb), 0.5) 42%, rgba(var(--blush-rgb), 0.28));
  border: 1px solid rgba(var(--blush-rgb), 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.world-book-tile-kicker {
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--blush-rgb), 0.88);
  opacity: 0.92;
}
.world-book-tile:hover .world-book-tile-inner {
  border-color: rgba(var(--tint-rgb), 0.32);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
.world-book-tile:active .world-book-tile-inner {
  transform: translateY(0);
}
.world-book-tile:focus {
  outline: none;
}
.world-book-tile:focus-visible .world-book-tile-inner {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 3px;
}
.world-book-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.world-book-tile-idx {
  font-family: "Space Mono", monospace;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-sub);
}
.world-book-tile-badge {
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-sub);
  background: rgba(var(--tint-rgb), 0.05);
}
.world-book-tile-badge.is-on {
  border-color: rgba(var(--tint-rgb), 0.32);
  color: var(--text-main);
  background: rgba(var(--tint-rgb), 0.1);
}
.world-book-tile-name {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.world-book-tile-kw {
  font-family: "Space Mono", monospace;
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-book-tile-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.world-book-tool-chip {
  min-width: 2rem;
  padding-left: 8px;
  padding-right: 8px;
}
.world-book-tool-chip:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .world-book-li:nth-child(odd) .world-book-tile-wrap,
  .world-book-li:nth-child(even) .world-book-tile-wrap {
    transform: none;
  }
  .world-book-tile:hover .world-book-tile-inner,
  .world-book-tile:active .world-book-tile-inner {
    transform: none;
  }
}
.world-book-reader {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.world-book-reader[hidden] {
  display: none !important;
}
.world-book-reader-bar {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  margin: 0 0 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(105deg, rgba(var(--tint-rgb), 0.06) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 38%),
    var(--bg-card);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.world-book-reader-bar::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0,
    var(--line) 4px,
    transparent 4px,
    transparent 8px
  );
  opacity: 0.55;
  pointer-events: none;
}
body.dark .world-book-reader-bar {
  background:
    linear-gradient(105deg, rgba(var(--tint-rgb), 0.08) 0%, transparent 48%),
    var(--bg-card);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.dark .world-book-reader-bar::after {
  opacity: 0.35;
}
.world-book-reader-back {
  flex-shrink: 0;
}
.world-book-reader-back i {
  margin-right: 3px;
  vertical-align: -0.1em;
}
.world-book-reader-title-display {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 4px 6px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
}
.world-book-reader-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}
.world-book-reader-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: rgba(var(--tint-rgb), 0.08);
  color: var(--text-sub);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.world-book-reader-icon-btn:hover:not(:disabled) {
  background: rgba(var(--tint-rgb), 0.16);
  color: var(--text-main);
}
.world-book-reader-icon-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.world-book-reader-icon-btn--round {
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.42);
}
.world-book-reader-icon-btn--round.is-on {
  background: rgba(var(--tint-rgb), 0.2);
  border-color: rgba(var(--tint-rgb), 0.35);
  color: var(--text-main);
}
body.dark .world-book-reader-icon-btn--round {
  background: rgba(0, 0, 0, 0.22);
}
.world-book-reader-icon-btn i {
  font-size: 0.85rem;
}
.world-book-reader-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.world-book-form-surface {
  flex: 1;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(var(--tint-rgb), 0.07), transparent 52%),
    var(--bg-card);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  padding: 14px 14px 16px;
}
body.dark .world-book-form-surface {
  background: var(--bg-card);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.world-book-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 8px;
  padding-top: 4px;
  border-top: 1px dashed rgba(var(--tint-rgb), 0.18);
}
.world-book-entry-head-k {
  font-family: "Space Mono", monospace;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.world-book-inner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.world-book-inner-head .settings-api-field-k {
  margin-bottom: 0;
}
.world-book-import-btn {
  flex-shrink: 0;
}
.world-book-import-btn i {
  margin-right: 4px;
  vertical-align: -0.06em;
  opacity: 0.88;
}
.world-book-entry-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.world-book-entry-li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
.world-book-entry-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  min-width: 26px;
}
.world-book-entry-toggle i {
  font-size: 0.72rem;
}
.world-book-entry-hint {
  margin: 2px 0 12px;
}
.world-book-entry-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.05);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.world-book-entry-chip:hover {
  border-color: rgba(var(--tint-rgb), 0.28);
  color: var(--text-main);
  background: rgba(var(--tint-rgb), 0.09);
}
.world-book-entry-chip.is-active {
  border-color: rgba(var(--tint-rgb), 0.38);
  background: rgba(var(--tint-rgb), 0.12);
  color: var(--text-main);
  box-shadow: 0 0 0 1px rgba(var(--tint-rgb), 0.08);
}
.world-book-textarea {
  min-height: 168px;
  resize: vertical;
}
.rich-prose--html {
  white-space: normal;
}
.rich-prose--html p,
.rich-prose--html div,
.rich-prose--html li,
.rich-prose--html blockquote {
  margin: 0 0 0.62em;
}
.rich-prose--html p:last-child,
.rich-prose--html ul:last-child,
.rich-prose--html ol:last-child,
.rich-prose--html blockquote:last-child {
  margin-bottom: 0;
}
.rich-prose--html ul,
.rich-prose--html ol {
  margin: 0 0 0.62em;
  padding-left: 1.25em;
}
.rich-prose--html h1,
.rich-prose--html h2,
.rich-prose--html h3,
.rich-prose--html h4 {
  margin: 0.35em 0 0.45em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.45;
}
.rich-prose--html blockquote {
  padding-left: 0.75em;
  border-left: 2px solid rgba(var(--tint-rgb), 0.28);
  opacity: 0.92;
}
#chat-offline-screen .chat-msg-bubble-prose.rich-prose {
  width: 100%;
}
#chat-offline-screen .rich-prose--html {
  white-space: normal;
}
.world-book-inject-note {
  flex: 1;
  min-width: 120px;
  margin: 0;
}
.world-book-scope-field {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--tint-rgb), 0.18);
}
.world-book-scope-hint {
  margin: 6px 0 0;
  font-size: 0.58rem;
  line-height: 1.45;
  color: var(--text-sub);
}
.world-book-scope-hint strong {
  font-weight: 600;
  color: var(--text-main);
}
.world-book-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.world-book-scope-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.05);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.world-book-scope-option:hover {
  border-color: rgba(var(--tint-rgb), 0.28);
  background: rgba(var(--tint-rgb), 0.09);
}
.world-book-scope-option:has(input:checked) {
  border-color: rgba(var(--tint-rgb), 0.38);
  background: rgba(var(--tint-rgb), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--tint-rgb), 0.08);
}
body.dark .world-book-scope-option:has(input:checked) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.world-book-scope-option input {
  margin: 0;
  flex-shrink: 0;
}
.world-book-volume-remove-row {
  margin: 14px 0 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--tint-rgb), 0.14);
  display: flex;
  justify-content: center;
}
.world-book-remove-volume-btn {
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-sub);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.88;
  transition: color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.world-book-remove-volume-btn:hover {
  opacity: 1;
  color: var(--text-main);
  background: rgba(var(--tint-rgb), 0.06);
}
.world-book-save-bar {
  margin-top: 12px;
}

.settings-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.settings-ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
}
.settings-ambient-blob--a {
  width: 200px;
  height: 200px;
  top: -40px;
  right: -30px;
  background: radial-gradient(circle, rgba(var(--tint-rgb), 0.22), transparent 68%);
}
.settings-ambient-blob--b {
  width: 240px;
  height: 240px;
  bottom: 18%;
  left: -80px;
  background: radial-gradient(circle, rgba(var(--blush-rgb), 0.13), transparent 65%);
}
.chat-screen .settings-ambient-blob,
.chat-list-screen .settings-ambient-blob {
  display: none;
}
.settings-screen .settings-watermark,
.char-screen .settings-watermark,
.world-book-screen .settings-watermark,
.checkup-screen .settings-watermark,
.chat-list-screen .settings-watermark,
.chat-screen .settings-watermark,
.char-lock-screen > .settings-watermark.char-lock-watermark {
  position: absolute;
  right: -4px;
  bottom: 22%;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1;
  opacity: 0.04;
  user-select: none;
}
body.dark .settings-screen .settings-watermark,
body.dark .char-screen .settings-watermark,
body.dark .world-book-screen .settings-watermark,
body.dark .checkup-screen .settings-watermark,
body.dark .chat-list-screen .settings-watermark,
body.dark .chat-screen .settings-watermark,
body.dark .char-lock-screen > .settings-watermark.char-lock-watermark {
  opacity: 0.07;
}

/* =========================
   My screen (magazine style)
   ========================= */
.my-screen {
  background: var(--bg-device);
}
.my-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.my-watermark {
  display: none;
}
.my-ambient-ink { display: none; }
.my-ambient-ink {
  position: absolute;
  border-radius: 999px;
  filter: blur(26px);
  opacity: 0.36;
}
.my-ambient-ink--a {
  width: 260px;
  height: 260px;
  left: -120px;
  top: 60px;
  background: rgba(var(--tint-rgb), 0.16);
}
.my-ambient-ink--b {
  width: 300px;
  height: 300px;
  right: -160px;
  top: 180px;
  background: rgba(var(--blush-rgb), 0.16);
}
body.dark .my-ambient-ink { opacity: 0.18; }

/* 韩系 INS：极简奶油风（更干净、更少装饰） */
.my-screen {
  --my-card-r: 24px;
  --my-card-bd: transparent;
  --my-card-bg: rgba(255, 255, 255, 0.92);
  --my-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --my-soft: rgba(var(--tint-rgb), 0.08);
  --my-soft2: rgba(var(--blush-rgb), 0.09);
}
body.dark .my-screen {
  --my-card-bd: transparent;
  --my-card-bg: rgba(255, 255, 255, 0.07);
  --my-card-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

.my-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.my-topbar {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px;
}
.my-topbar-meta {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.my-topbar-meta .widget-label { margin-bottom: 3px; }
.my-topbar-eyebrow {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
}
.my-topbar-spacer { width: 72px; flex-shrink: 0; }

.my-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 14px calc(14px + max(0px, env(safe-area-inset-bottom, 0px)));
}

.my-screen .my-body {
  background:
    radial-gradient(720px 360px at 12% 0%, rgba(var(--tint-rgb), 0.06), transparent 62%),
    radial-gradient(720px 360px at 92% 10%, rgba(var(--blush-rgb), 0.06), transparent 64%),
    var(--bg-device);
}
body.dark .my-screen .my-body {
  background:
    radial-gradient(720px 360px at 12% 0%, rgba(var(--tint-rgb), 0.10), transparent 62%),
    radial-gradient(720px 360px at 92% 10%, rgba(var(--blush-rgb), 0.09), transparent 64%),
    var(--bg-device);
}

.my-cover {
  position: relative;
  border: 1px solid var(--my-card-bd);
  border-radius: var(--my-card-r);
  background:
    radial-gradient(560px 220px at 12% 8%, var(--my-soft), transparent 62%),
    radial-gradient(560px 240px at 95% 16%, var(--my-soft2), transparent 64%),
    var(--my-card-bg);
  box-shadow: var(--my-card-shadow);
  overflow: hidden;
  padding: 18px 18px 16px;
}
.my-cover::before { content: none; }
body.dark .my-cover { box-shadow: var(--my-card-shadow); }
.my-cover-tape {
  display: none;
}
.my-cover-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  opacity: 0.55;
}
body.dark .my-cover-grid {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  opacity: 0.55;
}
.my-cover-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
}
.my-avatar {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  border: 0;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
}
body.dark .my-avatar {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.my-avatar-initial {
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0;
  font-weight: 900;
}
.my-kicker {
  margin: 0 0 4px;
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-sub);
  opacity: 0.95;
}
.my-kicker-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.my-issue {
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-sub);
  opacity: 0.9;
  text-transform: none;
}
.my-title {
  margin: 0;
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.62rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 900;
}
.my-sub {
  margin: 8px 0 0;
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.94rem;
  color: var(--text-sub);
  line-height: 1.4;
}

.my-layout { margin-top: 12px; }
.my-mag-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 520px) {
  .my-mag-grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "wallet feature"
      "list feature";
  }
  .my-card--wallet { grid-area: wallet; }
  .my-card--feature { grid-area: feature; }
  .my-card--list { grid-area: list; }
}

.my-card {
  border: 1px solid var(--my-card-bd);
  border-radius: var(--my-card-r);
  background: var(--my-card-bg);
  box-shadow: var(--my-card-shadow);
  overflow: hidden;
  padding: 16px;
}
body.dark .my-card {
  background: var(--my-card-bg);
  border-color: var(--my-card-bd);
  box-shadow: var(--my-card-shadow);
}
.my-card-k {
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-sub);
}
.my-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.my-wallet-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 0;
  box-shadow: none;
}
body.dark .my-wallet-amount {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.my-wallet-currency {
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.98rem;
  opacity: 0.85;
}
.my-wallet-balance {
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 2.0rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.my-wallet-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}
.my-wallet-actions .chip { flex: 1 1 0; justify-content: center; }

.my-feature-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.my-feature-meta {
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--text-sub);
  opacity: 0.9;
}
.my-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.my-tiles .my-tile:first-child {
  grid-column: 1 / -1;
  background:
    linear-gradient(135deg, rgba(var(--tint-rgb), 0.12), rgba(var(--blush-rgb), 0.12)),
    rgba(255, 255, 255, 0.84);
}
body.dark .my-tiles .my-tile:first-child {
  background:
    linear-gradient(135deg, rgba(var(--tint-rgb), 0.14), rgba(var(--blush-rgb), 0.10)),
    rgba(255, 255, 255, 0.06);
}

/* 小快捷卡：竖排（中文/英文/图标），避免英文被挤没 */
.my-tiles .my-tile:not(:first-child) {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 8px;
  text-align: center;
  justify-items: center;
  align-content: start;
  padding: 14px 12px 14px;
}
.my-tiles .my-tile:not(:first-child) .my-tile-k {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  margin-top: 2px;
}
.my-tiles .my-tile:not(:first-child) .my-tile-t {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  max-width: 100%;
  font-size: 0.98rem;
}
.my-tiles .my-tile:not(:first-child) i {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
}
.my-tile {
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  padding: 12px 12px 12px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 8px;
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.14s ease, background 0.14s ease;
  min-width: 0;
}
body.dark .my-tile {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
}
.my-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--tint-rgb), 0.20);
  background: rgba(255, 255, 255, 0.92);
}
body.dark .my-tile:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.my-tile:active { transform: translateY(0); }
.notify-settings-body .notify-settings-row {
  margin-top: 8px;
}
.notify-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.notify-settings-actions .chip {
  flex: 1 1 auto;
  min-width: 8.5rem;
}
.notify-settings-bg-test-hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.88;
}
.my-tile-k {
  grid-column: 1 / -1;
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-sub);
  opacity: 0.92;
}
.my-tile-t {
  font-family: "DM Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-tile i {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.18rem;
  opacity: 0.9;
  color: rgba(var(--tint-rgb), 0.95);
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 0;
}
body.dark .my-tile i {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}

.my-list { display: grid; gap: 0; }
.my-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 6px;
  cursor: pointer;
}
.my-row + .my-row { border-top: 1px solid rgba(var(--tint-rgb), 0.10); }
body.dark .my-row + .my-row { border-top-color: rgba(255, 255, 255, 0.08); }
.my-row-l { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; }
.my-row-l i {
  color: rgba(var(--tint-rgb), 0.95);
  font-size: 1.12rem;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 0;
}
body.dark .my-row-l i {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}
.my-row-r { color: var(--text-sub); }
.my-row:hover { background: rgba(var(--tint-rgb), 0.035); border-radius: 14px; }
body.dark .my-row:hover { background: rgba(255, 255, 255, 0.05); }
.my-row--readonly {
  cursor: default;
  pointer-events: none;
}
.my-row--readonly:hover {
  background: transparent;
}
.my-storage-usage-text {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  max-width: 58%;
  line-height: 1.35;
  word-break: break-word;
}
.my-row-sep {
  height: 1px;
  background: rgba(var(--tint-rgb), 0.10);
  margin: 8px 2px;
}
body.dark .my-row-sep { background: rgba(255, 255, 255, 0.08); }

.char-lib-group-k {
  margin: 0 2px 0 6px;
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.92;
}
.char-lib-group-k--spaced {
  margin-top: 6px;
}

.char-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* .settings-back-chip 含 display:inline-flex，会盖掉 [hidden] 的默认隐藏，人设库顶栏两颗键会叠显 */
.char-topbar-left .settings-back-chip[hidden] {
  display: none !important;
}
.char-lib-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.char-lib-view {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg-device);
}
.char-lib-view.is-active {
  display: flex;
}
.char-lib-view--picker {
  gap: 16px;
}
.char-lib-view--picker .settings-masthead {
  flex-shrink: 0;
}
.char-lib-view--roster {
  gap: 16px;
}
.char-lib-view--roster .settings-masthead {
  flex-shrink: 0;
}
.char-roster-lead {
  margin: 0 4px 2px 6px;
  padding: 0 2px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-sub);
  letter-spacing: 0.01em;
}
.char-roster-divider {
  height: 0;
  margin: 2px 6px 4px;
  border: 0;
  border-top: 1px dashed rgba(var(--tint-rgb), 0.22);
}
body.dark .char-roster-divider {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.char-roster-grid {
  list-style: none;
  margin: 0;
  padding: 10px 4px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 22px 18px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-content: start;
}
/* 人设库 · 主控面具拍立得：横向滑动，槽位多时不必换行占满屏（卡片比角色网格略大，少留白） */
.char-roster-grid--mask-hscroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 22px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 12px 10px 26px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.char-roster-grid--mask-hscroll::-webkit-scrollbar {
  height: 6px;
}
.char-roster-grid--mask-hscroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--tint-rgb), 0.35);
}
.char-roster-grid--mask-hscroll .char-roster-li {
  flex: 0 0 auto;
  width: min(232px, 88vw);
  min-width: 200px;
  max-width: 268px;
  padding: 12px 6px 8px;
  scroll-snap-align: start;
}
.char-roster-grid--mask-hscroll .char-roster-card {
  min-height: 288px;
  padding: 26px 16px 18px;
}
.char-roster-grid--mask-hscroll .char-roster-card-tape {
  width: 50px;
  height: 15px;
  margin-left: -25px;
}
.char-roster-grid--mask-hscroll .char-roster-card-av {
  max-height: 220px;
  font-size: 2.95rem;
}
.char-roster-grid--mask-hscroll .char-roster-card-name {
  margin-top: 12px;
  min-height: 3em;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}
.char-roster-grid--mask-hscroll .char-roster-empty {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  grid-column: unset;
  box-sizing: border-box;
}
.char-roster-li {
  margin: 0;
  min-width: 0;
  padding: 10px 4px 6px;
}
.char-roster-card {
  --tilt: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-height: 228px;
  padding: 22px 12px 14px;
  border: none;
  border-radius: 4px;
  background: #f8f8f8;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 10px 28px rgba(0, 0, 0, 0.12);
  text-align: center;
  cursor: pointer;
  color: #2a2c33;
  font: inherit;
  overflow: visible;
  transform: rotate(var(--tilt));
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.char-roster-li:nth-child(3n + 1) .char-roster-card {
  --tilt: -3deg;
}
.char-roster-li:nth-child(3n + 2) .char-roster-card {
  --tilt: 1.6deg;
}
.char-roster-li:nth-child(3n + 3) .char-roster-card {
  --tilt: 2.8deg;
}
.char-roster-card-tape {
  position: absolute;
  top: -7px;
  left: 50%;
  z-index: 2;
  width: 44px;
  height: 14px;
  margin-left: -22px;
  transform: translateX(-50%) rotate(-8deg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(232, 236, 242, 0.72));
  border: 1px solid rgba(188, 195, 208, 0.4);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  pointer-events: none;
}
body.dark .char-roster-card-tape {
  background: linear-gradient(145deg, #3a3e48, #353942);
  border-color: #3d4249;
  box-shadow: none;
}
.char-roster-card:hover,
.char-roster-card:focus-visible {
  outline: none;
  transform: rotate(var(--tilt)) translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 14px 32px rgba(0, 0, 0, 0.16);
}
body.dark .char-roster-card {
  background: #f0f0f0;
  color: #2a2c33;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 28px rgba(0, 0, 0, 0.28);
}
body.dark .char-roster-card:hover,
body.dark .char-roster-card:focus-visible {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 14px 34px rgba(0, 0, 0, 0.35);
}
.char-roster-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.char-roster-card-av {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  max-height: 168px;
  margin: 0 auto;
  border-radius: 1px;
  border: none;
  overflow: hidden;
  background: #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 600;
  font-style: italic;
  color: #4a4d55;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
.char-roster-card:hover .char-roster-card-av,
.char-roster-card:focus-visible .char-roster-card-av {
  transform: scale(1.02);
}
body.dark .char-roster-card-av {
  background: #e4e4e4;
}
.char-roster-card-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.char-roster-card-name {
  position: relative;
  z-index: 1;
  min-height: 2.75em;
  margin-top: 10px;
  padding: 6px 4px 2px;
  width: 100%;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #50525a;
  text-align: center;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.char-roster-card.is-active {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 10px 28px rgba(0, 0, 0, 0.12),
    0 0 0 2px rgba(var(--tint-rgb), 0.48);
}
.char-roster-card.is-active:hover,
.char-roster-card.is-active:focus-visible {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 14px 32px rgba(0, 0, 0, 0.16),
    0 0 0 2px rgba(var(--tint-rgb), 0.55);
}
body.dark .char-roster-card.is-active {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(var(--tint-rgb), 0.38);
}
body.dark .char-roster-card.is-active:hover,
body.dark .char-roster-card.is-active:focus-visible {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 14px 34px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(var(--tint-rgb), 0.45);
}
.char-roster-empty {
  grid-column: 1 / -1;
  margin: 4px 2px 8px;
  padding: 40px 20px 44px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 6px 26px 24px 12px;
  background: var(--bg-card);
}
.char-roster-empty-icon {
  margin-bottom: 16px;
  font-size: 2.25rem;
  color: var(--text-main);
  opacity: 0.14;
}
.char-roster-empty-icon i {
  vertical-align: middle;
}
.char-roster-empty-k {
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  color: var(--text-main);
  opacity: 0.72;
  margin: 0 0 10px;
}
.char-roster-empty-p {
  margin: 0 auto;
  max-width: 20em;
  font-size: 0.74rem;
  line-height: 1.55;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  color: var(--text-sub);
}
.char-roster-footer {
  flex-shrink: 0;
  padding: 6px 2px 2px;
}
.char-roster-new-wide {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px 20px 20px 14px;
  font-size: 0.78rem;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  letter-spacing: 0.02em;
  text-transform: none;
  border-width: 1px;
}
.char-roster-new-wide i {
  font-size: 1.05rem;
  opacity: 0.85;
}
.char-roster-tavern-import {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px 18px 16px 12px;
  font-size: 0.72rem;
}
.char-roster-tavern-import i {
  font-size: 1rem;
  opacity: 0.85;
}

.char-st-import-locked {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px dashed rgba(var(--tint-rgb), 0.4);
}

.char-st-unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 10025;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 14px max(20px, env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
}
.char-st-unlock-overlay.is-open {
  display: flex !important;
}
.char-st-unlock-overlay[hidden] {
  display: none !important;
}
.char-st-unlock-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 22, 0.48);
  backdrop-filter: blur(7px);
}
.char-st-unlock-card {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-float);
  padding: 16px 16px 14px;
}
.char-st-unlock-k {
  margin: 0 0 6px;
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.char-st-unlock-lead {
  margin: 0 0 10px;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-sub);
}
.char-st-unlock-steps {
  margin: 0 0 12px;
  padding-left: 1.15rem;
  font-size: 0.64rem;
  line-height: 1.55;
  color: var(--text-sub);
}
.char-st-unlock-steps li + li {
  margin-top: 4px;
}
.char-st-unlock-actions--stack {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 8px;
}
.char-st-unlock-actions--stack .chip {
  width: 100%;
  justify-content: center;
}
.char-st-unlock-file-name {
  margin: 0 0 10px;
  font-size: 0.58rem;
  line-height: 1.45;
  color: var(--text-sub);
  word-break: break-all;
}
.char-st-unlock-err {
  min-height: 16px;
  margin: 0 0 8px;
  font-size: 0.65rem;
  color: #c44646;
}
.char-st-unlock-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.char-remark-reason-body {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: min(42vh, 280px);
  overflow-y: auto;
}

.chat-time-divider--char-remark-tap {
  cursor: pointer;
}
.chat-time-divider--char-remark-tap .chat-time-divider-label {
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-time-divider--char-remark-tap:hover .chat-time-divider-label,
.chat-time-divider--char-remark-tap:focus-visible .chat-time-divider-label {
  border-color: rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.12);
}

.char-persona-switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 0 4px 2px 2px;
  flex-shrink: 0;
}
.char-persona-switch {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 200px;
  min-width: 0;
}
.char-persona-switch-k {
  font-size: 0.38rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.char-active-picker {
  width: 100%;
  max-width: 100%;
}
.char-lib-choice-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 2px 12px;
  min-height: 0;
}
.char-lib-choice {
  position: relative;
  flex: 1 1 auto;
  min-height: 168px;
  max-height: 280px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: 22px 20px 24px;
  text-align: left;
  cursor: pointer;
  color: var(--text-main);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.char-lib-choice:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(var(--tint-rgb), 0.12);
}
body.dark .char-lib-choice:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.char-lib-choice-k {
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.char-lib-choice strong {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.12;
}
.char-lib-choice i {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-size: 1.75rem;
  color: var(--text-main);
  opacity: 0.32;
}
.char-avatar-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 12px;
}
.char-avatar-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-card);
}
.char-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.char-avatar-wrap.has-photo .char-avatar-ph {
  display: none;
}
.char-avatar-img.is-hidden {
  display: none !important;
}
.char-avatar-ph {
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.char-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.char-avatar-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.char-avatar-hint {
  font-size: 0.58rem;
  color: var(--text-sub);
  line-height: 1.4;
}
.char-textarea {
  margin-top: 8px;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  padding: 10px 11px;
  font-size: 0.78rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}
.char-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.char-summary-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.char-summary-import-btn {
  flex-shrink: 0;
}
.char-summary-import-btn i {
  margin-right: 4px;
  vertical-align: -0.06em;
  opacity: 0.88;
}
.settings-api-field--char-summary-only .char-textarea--summary-solo,
.settings-api-field--char-alt-persona .char-textarea--summary-solo {
  margin-top: 0;
}
.char-openings-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.char-openings-hint {
  margin-top: 6px;
  margin-bottom: 0;
}
.char-openings-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.char-opening-row {
  margin: 0;
  padding: 0;
}
.char-opening-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.char-opening-row-k {
  font-family: "Space Mono", monospace;
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.char-opening-input {
  margin-top: 0;
  min-height: 52px;
}
.char-opening-remove {
  flex-shrink: 0;
}
.char-save-bar {
  border-top: none;
  padding: 4px 0 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.char-delete-btn {
  color: #a34a4a;
  border-color: rgba(163, 74, 74, 0.35);
}
body.dark .char-delete-btn {
  color: #e8a0a0;
  border-color: rgba(232, 160, 160, 0.35);
}
.char-delete-btn:hover {
  border-color: rgba(163, 74, 74, 0.55);
  background: rgba(163, 74, 74, 0.06);
}
.char-save-hint {
  font-size: 0.58rem;
  color: var(--text-sub);
  flex: 1 1 100%;
  margin-top: 4px;
}
.char-save-hint.is-dirty {
  color: var(--accent);
}

.settings-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.settings-topbar {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  /* 盖住 ambient 模糊渗色，避免「桌面」胶囊背后一块灰方感 */
  background: var(--bg-device);
  padding: 0 18px 8px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.settings-back-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.settings-back-chip i {
  font-size: 0.95rem;
}
.settings-topbar-meta {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.settings-topbar-meta .widget-label {
  margin-bottom: 3px;
}
.settings-topbar-eyebrow {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--text-sub);
  opacity: 0.9;
}
.settings-topbar-spacer {
  width: 72px;
  flex-shrink: 0;
}

.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 11px;
  -webkit-overflow-scrolling: touch;
}
.settings-body.char-lib-body {
  overflow: hidden;
  /* 与机内底同色，滚动回弹 / 子像素缝不露灰 */
  background: var(--bg-device);
  /* 人设库全屏叠层内无桌面 Dock：去掉 .settings-body 的 96px 底预留，否则浏览器/PWA 宽屏底下一整条空 */
  padding-bottom: max(24px, calc(12px + env(safe-area-inset-bottom, 0px)));
}
/* world-book-body also uses settings-body; avoid dock reserve under shelf list */
.world-book-screen .settings-body.world-book-body {
  padding-bottom: calc(16px + max(0px, env(safe-area-inset-bottom, 0px)));
}
.settings-body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.settings-masthead {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: 18px 16px 16px;
  overflow: hidden;
}
.settings-masthead-tape {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.2deg);
  width: 52px;
  height: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(232, 236, 242, 0.66));
  border: 1px solid rgba(188, 195, 208, 0.36);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
body.dark .settings-masthead-tape {
  background: #353942;
  border-color: #3d4249;
  box-shadow: none;
}
.settings-masthead-inner {
  position: relative;
  z-index: 1;
  padding-top: 6px;
}
.settings-masthead-k {
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.settings-masthead-title {
  margin-top: 8px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.settings-masthead-desc {
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.55;
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.settings-sec-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 2px 0 6px;
}
.settings-sec-idx {
  font-family: "Space Mono", monospace;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-main);
  opacity: 0.11;
  min-width: 1.75rem;
  padding-top: 2px;
}
body.dark .settings-sec-idx {
  opacity: 0.14;
}
.settings-sec-head-text {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-top: 2px;
}
.settings-sec-tape {
  display: block;
  width: 32px;
  height: 11px;
  margin-bottom: 6px;
  margin-left: 1px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(232, 236, 242, 0.66));
  border: 1px solid rgba(188, 195, 208, 0.36);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transform: rotate(-2.5deg);
}
body.dark .settings-sec-tape {
  background: #353942;
  border-color: #3d4249;
  box-shadow: none;
}
.settings-sec-head-text .widget-label {
  margin: 0;
}

.settings-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.settings-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
body.dark .settings-panel::before {
  box-shadow: none;
}
.settings-panel--shine {
  background:
    linear-gradient(160deg, rgba(var(--tint-rgb), 0.08), transparent 56%),
    var(--bg-card);
}
body.dark .settings-panel--shine {
  background: var(--bg-card);
}
.settings-panel--soft {
  border-color: var(--line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
body.dark .settings-panel--soft {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}

.settings-ai-blurb {
  padding: 12px 14px 2px;
  font-size: 0.68rem;
  color: var(--text-sub);
  line-height: 1.5;
}
.wardrobe-panel > .settings-ai-blurb.wardrobe-panel-lead {
  padding: 14px 16px 12px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.settings-mono {
  font-family: "Space Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.04em;
}
.settings-ai-key-note {
  margin-top: 6px;
  font-size: 0.58rem;
  color: var(--text-sub);
  line-height: 1.4;
}

.settings-panel-api .settings-api-field {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.settings-api-field-k {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 0.45rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.settings-api-input {
  margin-top: 8px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  padding: 10px 11px;
  font-size: 0.78rem;
}
.settings-api-input:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-api-field-k--sub {
  margin-top: 10px;
}
.settings-ai-model-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.settings-ai-model-tools-k {
  font-family: "Space Mono", monospace;
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  opacity: 0.88;
}
.settings-ai-temp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.settings-ai-temp-range {
  flex: 1;
  min-width: 0;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  accent-color: var(--text-sub);
}
.settings-ai-temp-range:focus {
  outline: none;
}
.settings-ai-temp-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}
.settings-ai-temp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--text-sub);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.settings-ai-temp-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}
.settings-ai-temp-range::-moz-range-thumb {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--text-sub);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.settings-ai-temp-range::-moz-focus-outer {
  border: 0;
}
.settings-ai-temp-value {
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  color: var(--text-main);
  min-width: 2.5em;
  text-align: right;
}
.settings-range-value-editable {
  cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--text-sub) 55%, transparent);
  border-radius: 2px;
  padding: 0 3px;
  user-select: none;
}
.settings-range-value-editable:hover,
.settings-range-value-editable:focus-visible {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent);
  outline: none;
}
.settings-range-value-input {
  width: 3.4em;
  max-width: 100%;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-main);
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  padding: 1px 4px;
  text-align: right;
  box-sizing: border-box;
}
.settings-range-value-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.settings-ai-select {
  margin-top: 6px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  padding: 9px 10px;
  font-size: 0.74rem;
  cursor: pointer;
}
.settings-ai-select:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-ai-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.settings-ai-field-hint {
  margin-top: 6px;
  margin-bottom: 2px;
  font-size: 0.6rem;
  color: var(--text-sub);
  line-height: 1.45;
}
.settings-api-actions--tight {
  border-top: none;
  padding: 10px 0 4px;
  margin-top: 4px;
}

.settings-api-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
/* 挂 body + fixed：避免 #phone overflow:hidden 与 iOS transform 合成层裁切 */
html.xxj-model-picker-open {
  overflow: hidden;
}
.settings-ai-model-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: rgba(10, 12, 16, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.dark .settings-ai-model-picker-overlay {
  background: rgba(0, 0, 0, 0.62);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .settings-ai-model-picker-overlay {
    background: rgba(10, 12, 16, 0.78);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.dark .settings-ai-model-picker-overlay {
    background: rgba(0, 0, 0, 0.82);
  }
}
.settings-ai-model-picker-panel {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin-top: min(6vh, 40px);
  width: min(560px, calc(100vw - 24px));
  max-height: min(72dvh, calc(100dvh - 32px));
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  color: var(--text-main);
  flex-shrink: 0;
}
.settings-ai-model-picker-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
}
.settings-ai-model-picker-title {
  flex: 1;
  min-width: 0;
}
.settings-ai-model-picker-title strong {
  display: block;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.settings-ai-model-picker-title span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--text-sub);
}
.settings-ai-model-picker-search {
  padding: 0 14px 12px;
}
.settings-ai-model-picker-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-body);
  color: var(--text-main);
  outline: none;
}
.settings-ai-model-picker-hint {
  padding: 8px 14px 0;
  font-size: 0.66rem;
  color: var(--text-sub);
}
.settings-ai-model-picker-scroller {
  border-top: 1px solid var(--line);
  max-height: calc(min(72dvh, 100dvh - 32px) - 118px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.settings-ai-model-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.settings-ai-model-picker-opt {
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.04);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  color: var(--text-main);
}
.settings-ai-model-picker-opt:hover {
  border-color: rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.08);
}
.settings-api-input.settings-ai-model--just-fetched {
  animation: settings-ai-model-flash 1.2s ease;
}
@keyframes settings-ai-model-flash {
  0%,
  100% {
    box-shadow: none;
  }
  35% {
    box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.45);
  }
}
.settings-api-line {
  padding: 8px 14px 10px;
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  line-height: 1.45;
  border-bottom: 1px solid var(--line);
}
.settings-api-line.is-ok {
  color: #2c7a57;
}
body.dark .settings-api-line.is-ok {
  color: #5fd39a;
}
.settings-api-line.is-err {
  color: #c44646;
}

.settings-api-field--sound {
  padding-bottom: 0;
}
.settings-api-field--sound .settings-api-field-k {
  padding-bottom: 4px;
}
.rt-sound-rows {
  margin: 0 -14px;
}
.rt-sound-rows .settings-row {
  border-radius: 0;
}
.rt-sound-rows .settings-row.is-selected {
  background: rgba(var(--tint-rgb), 0.07);
  box-shadow: inset 3px 0 0 rgba(var(--tint-rgb), 0.55);
}
.rt-sound-cap {
  margin: 0;
  padding: 6px 14px 2px;
}
.settings-api-field-note {
  margin: 0;
  padding: 0 14px 12px;
}
.rt-custom-list {
  margin-top: 8px;
}
.rt-custom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 0;
}
.rt-custom-row-info {
  font-size: 0.58rem;
  color: var(--text-sub);
  line-height: 1.4;
  min-width: 0;
}

/* 卷宗 · 角色专属铃声（小心机 ChatDetail 同款能力） */
.rt-char-picker {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rt-char-picker[hidden] {
  display: none !important;
}
.rt-char-cat-k {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-sub);
  margin: 0 0 6px;
}
.rt-char-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rt-char-chip {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.58rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rt-char-chip:hover {
  border-color: rgba(var(--tint-rgb), 0.45);
}
.rt-char-chip.is-selected {
  background: rgba(var(--tint-rgb), 0.12);
  border-color: rgba(var(--tint-rgb), 0.55);
  box-shadow: inset 2px 0 0 rgba(var(--tint-rgb), 0.55);
}
.rt-char-chip--custom {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 语音气泡 → 设为铃声 */
.vr-pick-card {
  max-height: min(92vh, 640px);
}
.vr-pick-sub {
  margin: 4px 0 0;
}
.vr-pick-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vr-pick-status {
  text-align: center;
  padding: 28px 12px;
  font-size: 0.62rem;
  color: var(--text-sub);
}
.vr-pick-status--err {
  color: #c45c5c;
}
.vr-pick-wave {
  position: relative;
  height: 80px;
  margin: 4px 0 8px;
  touch-action: none;
  user-select: none;
}
.vr-pick-dim {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 2;
}
.vr-pick-dim-l {
  left: 0;
}
.vr-pick-dim-r {
  right: 0;
}
.vr-pick-sel {
  position: absolute;
  top: 0;
  bottom: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.12);
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 3;
}
.vr-pick-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent, #07c160);
  z-index: 5;
  pointer-events: none;
  transform: translateX(-50%);
}
.vr-pick-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
  z-index: 1;
}
.vr-pick-bar {
  flex: 1;
  min-width: 2px;
  border-radius: 999px;
  transition: background-color 0.1s ease;
}
.vr-pick-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
}
.vr-pick-handle::after {
  content: "";
  width: 14px;
  height: 36px;
  border-radius: 999px;
  background: var(--text-main, #1a1a1a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.vr-pick-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.vr-pick-time-meta {
  font-size: 0.56rem;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.vr-pick-dur-badge {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-soft, #f3f3f3);
  font-weight: 600;
}
.vr-pick-cap-hint {
  color: #c47a2c;
  font-weight: 600;
}
.vr-pick-cats-k {
  margin: 8px 0 4px;
}
.vr-pick-cats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vr-pick-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft, #fafafa);
  color: var(--text-main);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vr-pick-cat-row:active:not(:disabled) {
  background: var(--line);
}
.vr-pick-cat-row:disabled {
  opacity: 0.55;
  cursor: wait;
}
.vr-pick-cat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-main, #1a1a1a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.vr-pick-cat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vr-pick-cat-label {
  font-size: 0.62rem;
  font-weight: 600;
}
.vr-pick-cat-desc {
  font-size: 0.52rem;
  color: var(--text-sub);
}
.vr-pick-auto-row {
  margin-top: 4px;
}

.settings-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 13px 16px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text-main);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  box-shadow: inset 3px 0 0 transparent;
}
.settings-row:last-child {
  border-bottom: none;
}
.settings-row:hover:not(.settings-row-static) {
  background: rgba(var(--tint-rgb), 0.06);
  box-shadow: inset 3px 0 0 rgba(var(--tint-rgb), 0.45);
}
body.dark .settings-row:hover:not(.settings-row-static) {
  background: rgba(var(--tint-rgb), 0.1);
  box-shadow: inset 3px 0 0 rgba(var(--tint-rgb), 0.55);
}
.settings-row-static {
  cursor: default;
}
.settings-row-l {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}
.settings-row-l i {
  font-size: 1.05rem;
  color: var(--text-sub);
}
.settings-row-r {
  flex-shrink: 0;
  font-size: 0.62rem;
  color: var(--text-sub);
  text-align: right;
  max-width: 52%;
}
.settings-row-r.mono {
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.settings-row-danger .settings-row-l {
  color: #b33a3a;
}
body.dark .settings-row-danger .settings-row-l {
  color: #e57373;
}
.settings-row-danger:hover {
  background: rgba(180, 58, 58, 0.08);
}

.ambience { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wallpaper {
  position: absolute; inset: 0;
  /* 纯色底：与卡片同一面，避免渐变在边角形成「另一块底色」 */
  background: var(--bg-device);
}
.watermark {
  position: absolute; right: -6px; bottom: 98px;
  font-family: "Playfair Display", serif;
  font-style: italic; font-size: 7.2rem; font-weight: 400;
  line-height: 1; opacity: 0.035; user-select: none;
}
body.dark .watermark { opacity: 0.06; }

/* .drawer 勿与此同级：整宽贴底矩形，会盖在 Dock 上形成「方形底」 */
/* .toast 勿放入此组：需高于 .dock-stack(5) 与设置/聊天全屏层(≈30–32)，否则提示被挡住 */
.statusbar, .topbar, .layout-shell, .hero-card, .app-tower, .dock-stack, .dock {
  position: relative;
  z-index: 2;
}

.statusbar {
  grid-row: 1;
  align-self: start;
  padding: calc(16px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 8px max(20px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between;
  font-family: "Space Mono", monospace;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.status-right { display: flex; align-items: center; gap: 8px; }
.battery {
  width: 20px; height: 10px; border: 1px solid currentColor;
  border-radius: 3px; padding: 1px;
}
.battery i { display: block; height: 100%; width: 72%; border-radius: 2px; background: currentColor; }

.topbar {
  grid-row: 2;
  align-self: start;
  padding: 0 max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px));
  display: flex; justify-content: space-between; gap: 8px;
}

.layout-shell {
  grid-row: 3;
  margin-top: 10px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: max(16px, calc(8px + env(safe-area-inset-bottom, 0px)));
}

.layout-shell::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 14px;
  background: transparent;
  color: var(--text-main);
  font-family: "Space Mono", monospace;
  font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
}
.chip.ghost {
  border-color: var(--line);
  background: var(--bg-card);
}
.chip-xs {
  font-size: 0.45rem;
  padding: 6px 10px;
}
.chip.solid {
  border-color: transparent;
  background: var(--text-main);
  color: var(--bg-device);
}

.hero-card {
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-family: "Space Mono", monospace;
  font-size: 0.45rem;
  letter-spacing: 0.15em;
  color: var(--text-sub);
  text-transform: uppercase;
}
.hero-kicker {
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.hero-card h1 {
  margin-top: 8px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.hero-desc {
  margin-top: 10px;
  color: var(--text-sub);
  font-size: 0.76rem;
  line-height: 1.55;
}
.hero-editable {
  border-radius: 12px;
  padding: 6px 8px;
  border: 1px dashed transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hero-editable:focus {
  outline: none;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.35);
}
body.dark .hero-editable:focus {
  background: rgba(255, 255, 255, 0.04);
}
.hero-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-sub);
  opacity: 0.7;
}
.hero-actions { margin-top: 12px; display: flex; gap: 8px; }

.hero-card.has-custom-hero-bg {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-card);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-card.has-custom-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.52) 42%,
    rgba(255, 255, 255, 0.34) 100%
  );
  pointer-events: none;
  z-index: 0;
}
body.dark .hero-card.has-custom-hero-bg::before {
  background: linear-gradient(
    180deg,
    rgba(22, 24, 28, 0.85) 0%,
    rgba(22, 24, 28, 0.48) 42%,
    rgba(22, 24, 28, 0.32) 100%
  );
}
.hero-card.has-custom-hero-bg > * {
  position: relative;
  z-index: 1;
}

.polaroid-board {
  padding: 2px 2px 0;
}
.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 10px 8px;
}
.polaroid-stack {
  height: 156px;
  position: relative;
}
.polaroid-card {
  position: absolute;
  --tx: 0px;
  --rot: 0deg;
  width: 124px;
  height: 148px;
  border: none;
  border-radius: 5px;
  background: #f8f8f8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform: translateX(var(--tx)) rotate(var(--rot));
}
.polaroid-card:hover {
  transform: translateX(var(--tx)) translateY(-2px) rotate(var(--rot));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}
.polaroid-card .tape {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(232, 236, 242, 0.66));
  border: 1px solid rgba(188, 195, 208, 0.36);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
body.dark .polaroid-card .tape {
  background: #353942;
  border-color: #3d4249;
  box-shadow: none;
}
.polaroid-card img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  background: #ececec;
  border-radius: 1px;
  display: block;
}
.polaroid-card small {
  display: block;
  margin-top: 8px;
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  color: #50525a;
  letter-spacing: 0.08em;
}
.polaroid-card.is-empty img {
  background:
    linear-gradient(145deg, #efefef, #e2e2e2);
}
.polaroid-card.is-empty small::after {
  content: " · Tap";
  opacity: 0.65;
}
.polaroid-card.p1 { left: 50%; top: 4px; --tx: -136px; --rot: -4deg; z-index: 3; }
.polaroid-card.p2 { left: 50%; top: 2px; --tx: -54px; --rot: 3deg; z-index: 2; }
.polaroid-card.p3 { left: 50%; top: 7px; --tx: 28px; --rot: -2deg; z-index: 1; }
body.dark .polaroid-card {
  background: #f2f2f2;
}

.widget-label {
  font-family: "Space Mono", monospace;
  font-size: 0.46rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.after-polaroid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.app-tower {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg-card);
  /* 负 spread 减少阴影在 Dock 上方晕成灰带 */
  box-shadow: 0 3px 14px -6px rgba(0, 0, 0, 0.06);
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}
body.dark .app-tower {
  box-shadow: var(--shadow-card);
}
.app-nora-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.app-nora-row-utility {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.app-nora {
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  border-radius: 16px;
  min-height: 70px;
  padding: 10px 11px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  position: relative;
}
.app-nora-main {
  min-height: 86px;
  border-color: var(--glass-border);
  background:
    linear-gradient(160deg, rgba(var(--tint-rgb), 0.08), transparent 55%),
    var(--bg-card);
}
body.dark .app-nora {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.dark .app-nora-main {
  border-color: var(--line);
  background: var(--bg-card);
}
.app-nora-k {
  font-family: "Space Mono", monospace;
  font-size: 0.43rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.app-nora strong {
  font-family: "Playfair Display", serif;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}
.app-nora small {
  font-size: 0.58rem;
  color: var(--text-sub);
}
.app-nora i {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 1rem;
  color: var(--text-main);
  opacity: 0.84;
}
.app-nora-row .app-nora {
  position: relative;
}
.app-nora-mini {
  min-height: 64px;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 8px 6px;
}
.app-nora-mini i {
  position: static;
  font-size: 1.02rem;
}
.app-nora-mini strong {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 500;
}
.dock-stack {
  grid-row: 4;
  position: relative;
  z-index: 5;
  margin: 0 16px max(12px, calc(8px + env(safe-area-inset-bottom, 0px))) 16px;
  height: 68px;
}
.dock-plate {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: none;
  pointer-events: none;
}
.dock {
  position: relative;
  height: 100%;
  border-radius: 100px;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.dock-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* 与胶囊同色底，只留极淡分隔，避免再叠一块白圆 + 阴影 */
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  color: var(--text-sub);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: none;
}
body.dark .dock-btn {
  border-color: rgba(255, 255, 255, 0.08);
}
.dock-btn i { font-size: 1.08rem; }
.dock-btn > img.home-app-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.dock-btn.has-home-app-icon > i {
  display: none !important;
}
.app-nora > img.home-app-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 1.05rem;
  height: 1.05rem;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  z-index: 1;
}
.app-nora-mini > img.home-app-icon {
  position: static;
  width: 1.02rem;
  height: 1.02rem;
  margin: 0 auto;
}
.app-nora.has-home-app-icon > i.ph {
  display: none !important;
}

.drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 默认在墙纸之上、主内容之下；勿与 Dock 同级否则整宽矩形盖住胶囊 */
  z-index: 1;
  transform: translateY(102%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 16px 16px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  border-top: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: none;
  pointer-events: none;
}
.drawer.open {
  z-index: 40;
  transform: translateY(0);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  max-height: min(88dvh, 92vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 500;
}
.drawer-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.drawer-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--text-main);
  padding: 11px 12px;
  text-align: left;
  font-size: 0.78rem;
  cursor: pointer;
}
.chat-more-drawer-item.chat-more-persona-item[hidden] {
  display: none !important;
}
.chat-more-drawer-item.is-active {
  border-color: rgba(var(--tint-rgb), 0.42);
  background: rgba(var(--tint-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb), 0.12);
}
body.dark .chat-more-drawer-item.is-active {
  border-color: rgba(var(--tint-rgb), 0.55);
  background: rgba(var(--tint-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb), 0.18);
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 100px;
  z-index: 10250;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  border-radius: 14px;
  padding: 10px 12px;
  max-width: min(360px, calc(100vw - 24px));
  text-align: center;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(18, 18, 18, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
body.dark .toast {
  color: var(--text-main);
  background: var(--bg-card);
  border-color: var(--line);
  box-shadow: var(--shadow-float);
}

/* —— 聊天页：同一套顶栏 token + 更「内页编辑感」的密谈场 —— */
.chat-screen .settings-inner,
.chat-list-screen .settings-inner {
  min-height: 0;
}

/* 聊天页：顶栏 + 身份条 + 输入区略收紧，中间消息区更大 */
.chat-screen .settings-topbar {
  padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 5px;
}

/* 卷宗 / 记忆摘要 / 更多等：隐藏密谈主顶栏（桌面 / Thread / ⋮），仅用各面板自带工具条。
   #chat-screen + !important：密谈壳自定义里 #chat-screen .chat-screen-topbar { display: … } 不会顶掉隐藏。 */
#chat-screen.chat-screen--memo-open > .settings-inner > .settings-topbar.chat-screen-topbar,
#chat-screen.chat-screen--dossier-open > .settings-inner > .settings-topbar.chat-screen-topbar,
#chat-screen.chat-screen--ext-sb-open > .settings-inner > .settings-topbar.chat-screen-topbar,
#chat-screen:not(.chat-screen--theme-glass).chat-screen--chat-overlay-open
  > .settings-inner
  > .settings-topbar.chat-screen-topbar {
  display: none !important;
}
/* 玻璃 + 更多/红包/表情等：顶栏仅隐视觉、保留高度，避免消息区突然上顶 */
#chat-screen.chat-screen--theme-glass.chat-screen--chat-overlay-open
  > .settings-inner
  > .settings-topbar.chat-screen-topbar {
  visibility: hidden;
  pointer-events: none;
}
.chat-screen .chat-identity-wrap {
  margin-bottom: var(--chat-identity-wrap-tail-after, 2px);
  padding-bottom: 2px;
}
.chat-screen .chat-identity-top {
  margin-bottom: 0;
  padding: 0 2px;
}
.chat-screen .chat-live-pill {
  padding: 3px 7px 3px 6px;
  gap: 4px;
}
.chat-screen .chat-header-duo {
  gap: 10px;
  margin: 2px 0 6px;
}
.chat-screen .chat-header-face {
  width: 40px;
  height: 40px;
}
.chat-screen .chat-header-initial {
  font-size: 0.95rem;
}
.chat-screen .chat-header-initial--user {
  font-size: 0.82rem;
}
.chat-screen .chat-corner-stamp {
  top: 8px;
  right: 8px;
  font-size: 0.34rem;
  letter-spacing: 0.22em;
}
.chat-screen .chat-slab-panel.chat-identity-panel {
  padding: 11px 11px 9px;
}
.chat-screen .chat-identity-head {
  padding: 0 44px 0 8px;
}
.chat-screen .chat-identity-head .settings-masthead-title {
  margin-top: 2px;
  font-size: 1.35rem;
  line-height: 1.08;
}
.chat-screen .chat-scene-pull {
  margin-top: 8px;
  padding: 7px 10px 7px 11px;
  font-size: 0.76rem;
  max-height: 4em;
}
.chat-screen .chat-scroll {
  /* 贴边与 padding/gap 共用变量，自定义 CSS 请同步覆写 */
  --chat-screen-scroll-pad-x: 14px;
  --chat-screen-scroll-pad-bottom: 10px;
  --chat-screen-scroll-gap: 10px;
  --chat-msgs-stack-custom-bg-margin-top: 2px;
  --chat-identity-wrap-tail-after: 2px;
  gap: var(--chat-screen-scroll-gap);
  padding: 0 var(--chat-screen-scroll-pad-x) var(--chat-screen-scroll-pad-bottom);
}
.chat-screen .chat-slab-spine {
  gap: 5px;
  width: 18px;
  padding-bottom: 6px;
}
.chat-screen .chat-slab-spine-line {
  height: 36px;
}
.chat-screen .chat-slab-stack {
  gap: 5px;
}
.chat-screen .chat-slab-mat {
  padding: 8px 8px 9px;
}
.chat-screen .chat-slab-tape {
  width: 48px;
  height: 14px;
  top: -4px;
}
.chat-screen .chat-composer {
  padding: 8px 12px max(12px, env(safe-area-inset-bottom, 0px));
}
.chat-screen .chat-composer-cap {
  padding: 0 4px 0 0;
}
.chat-screen .chat-composer-cap-l {
  font-size: 0.44rem;
  gap: 6px;
}
.chat-screen .chat-composer-cap-r {
  font-size: 0.38rem;
}
.chat-screen .chat-slab-panel.chat-composer-panel {
  padding: 7px 8px 7px 10px;
  gap: 8px;
}
.chat-screen .chat-more-btn,
.chat-screen .chat-send-fab {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.chat-screen .chat-more-btn i,
.chat-screen .chat-send-fab i {
  font-size: 1.05rem;
}
.chat-screen .chat-input {
  min-height: 44px;
  max-height: 108px;
  padding: 7px 9px 7px 10px;
  font-size: 0.78rem;
}
/* 聊天顶栏：左返回 / 中标题 / 右卷宗（胶带 + ⋮） */
.chat-screen-topbar .chat-topbar-left,
.chat-screen-topbar .chat-topbar-right {
  flex: 1;
  min-width: 0;
}
.chat-screen-topbar .chat-topbar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.chat-screen-topbar .chat-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.chat-screen-topbar .settings-topbar-meta {
  flex: 0 1 auto;
}

.chat-thread-detail-tape-btn {
  position: relative;
  width: 42px;
  height: 36px;
  border: none;
  padding: 0;
  margin: 0 1px 0 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-main);
  display: grid;
  place-items: center;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.chat-thread-detail-tape-btn i {
  position: relative;
  z-index: 1;
  font-size: 1.22rem;
  opacity: 0.9;
  margin-top: 1px;
}
.chat-thread-detail-tape-btn-sheen {
  position: absolute;
  inset: 4px 1px 5px;
  transform: rotate(5deg);
  border-radius: 3px;
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(232, 236, 242, 0.8) 45%,
    rgba(255, 255, 255, 0.58) 100%
  );
  border: 1px solid rgba(188, 195, 208, 0.5);
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  pointer-events: none;
}
body.dark .chat-thread-detail-tape-btn-sheen {
  background: linear-gradient(152deg, #434854 0%, #353942 50%, #2c3038 100%);
  border-color: #4a5058;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}
.chat-thread-detail-tape-btn:hover .chat-thread-detail-tape-btn-sheen {
  border-color: rgba(var(--tint-rgb), 0.55);
}
.chat-thread-detail-tape-btn:active .chat-thread-detail-tape-btn-sheen {
  transform: rotate(5deg) scale(0.95);
}
.chat-thread-detail-tape-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-body-stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* 挂在 .chat-body-stack 下（与 index 结构一致），铺满整块聊天内层（含原顶栏），避免详情页仍露出「桌面 / Thread」条 */
.chat-screen .settings-inner > .chat-body-stack > .chat-thread-detail-panel {
  position: absolute;
  inset: 0;
  /* 高于 .chat-inner-voice / .chat-char-recall-overlay（24）等「全屏占位但默认 pointer-events:none」层，
     避免部分 WebView 仍把点击留在透明层上，导致卷宗内开关点不动 */
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bg-device);
  border-top: none;
  box-shadow: none;
}
body.dark .chat-screen .settings-inner > .chat-body-stack > .chat-thread-detail-panel {
  box-shadow: none;
}
.chat-thread-detail-panel[hidden] {
  display: none !important;
}
.chat-thread-detail-panel:not([hidden]) {
  display: flex;
}

/* 备忘子页：流动时间轴优先 · 弱化盒状卡片（尊重 reduced-motion） */
.chat-memo-screen .chat-memo-scroll {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 120% 70% at 50% -25%, rgba(var(--tint-rgb), 0.13), transparent 55%),
    radial-gradient(ellipse 80% 50% at 110% 20%, rgba(var(--tint-rgb), 0.08), transparent 50%),
    radial-gradient(ellipse 60% 45% at -10% 80%, rgba(var(--tint-rgb), 0.06), transparent 45%),
    var(--bg-device);
}

body.dark .chat-memo-screen .chat-memo-scroll {
  background:
    radial-gradient(ellipse 120% 70% at 50% -25%, rgba(var(--tint-rgb), 0.18), transparent 55%),
    radial-gradient(ellipse 80% 50% at 110% 18%, rgba(255, 255, 255, 0.05), transparent 48%),
    radial-gradient(ellipse 60% 45% at -10% 78%, rgba(var(--tint-rgb), 0.1), transparent 45%),
    var(--bg-device);
}

.chat-memo-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 低对比网格 + 微噪声感（无离散粒子） */
.chat-memo-mesh {
  position: absolute;
  inset: -20%;
  opacity: 0.42;
  background:
    linear-gradient(rgba(var(--tint-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tint-rgb), 0.06) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(var(--tint-rgb), 0.06), transparent 70%);
  background-size:
    28px 28px,
    28px 28px,
    100% 100%;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, black 10%, transparent 72%);
  animation: chat-memo-mesh-breathe 28s ease-in-out infinite alternate;
}

body.dark .chat-memo-mesh {
  opacity: 0.35;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(var(--tint-rgb), 0.08), transparent 72%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}

.chat-memo-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  will-change: transform;
}

.chat-memo-aurora--1 {
  width: 260px;
  height: 260px;
  top: -88px;
  right: -56px;
  background: rgba(var(--tint-rgb), 0.42);
  opacity: 0.5;
  animation: chat-memo-aurora-1 26s ease-in-out infinite alternate;
}

.chat-memo-aurora--2 {
  width: 320px;
  height: 320px;
  bottom: 4%;
  left: -120px;
  background: rgba(var(--tint-rgb), 0.22);
  opacity: 0.36;
  animation: chat-memo-aurora-2 34s ease-in-out infinite alternate-reverse;
}

.chat-memo-aurora--3 {
  width: 140px;
  height: 140px;
  top: 42%;
  right: 8%;
  background: rgba(var(--blush-rgb), 0.35);
  opacity: 0.28;
  filter: blur(48px);
  animation: chat-memo-aurora-3 20s ease-in-out infinite alternate;
}

body.dark .chat-memo-aurora--1 {
  opacity: 0.42;
}
body.dark .chat-memo-aurora--2 {
  opacity: 0.3;
}
body.dark .chat-memo-aurora--3 {
  opacity: 0.22;
}

@keyframes chat-memo-mesh-breathe {
  0% {
    opacity: 0.35;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 0.48;
    transform: scale(1.03) rotate(0.8deg);
  }
}

@keyframes chat-memo-aurora-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-18px, 22px) scale(1.08);
  }
}

@keyframes chat-memo-aurora-2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(24px, -20px) scale(1.06);
  }
}

@keyframes chat-memo-aurora-3 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-16px, 14px);
  }
}

@keyframes chat-memo-spine-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(var(--tint-rgb), 0.14);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 36px rgba(var(--blush-rgb), 0.26);
    filter: brightness(1.06);
  }
}

@keyframes chat-memo-spine-flow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 200%;
  }
}

.chat-memo-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6px 0 12px;
  box-sizing: border-box;
}

/* 时间长廊：两侧壁面渐隐，中间略向前（弱化 3D，避免廉价 skew） */
.chat-memo-corridor {
  perspective: 1400px;
  transform-style: preserve-3d;
}

.chat-memo-corridor::before,
.chat-memo-corridor::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -6%;
  width: min(46%, 10rem);
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.chat-memo-corridor::before {
  left: -6%;
  background: linear-gradient(
    98deg,
    rgba(var(--tint-rgb), 0.22) 0%,
    rgba(var(--tint-rgb), 0.05) 55%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 14%,
    black 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 14%,
    black 86%,
    transparent 100%
  );
  transform: rotateY(22deg) translateZ(-24px);
  transform-origin: left center;
}

.chat-memo-corridor::after {
  right: -6%;
  background: linear-gradient(
    262deg,
    rgba(var(--blush-rgb), 0.16) 0%,
    rgba(var(--tint-rgb), 0.04) 55%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 14%,
    black 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 14%,
    black 86%,
    transparent 100%
  );
  transform: rotateY(-22deg) translateZ(-24px);
  transform-origin: right center;
}

body.dark .chat-memo-corridor::before {
  opacity: 0.38;
}

body.dark .chat-memo-corridor::after {
  opacity: 0.32;
}

.chat-memo-corridor .chat-memo-workspace-inner,
.chat-memo-corridor .chat-memo-hero-card {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .chat-memo-corridor {
    perspective: none;
  }
  .chat-memo-corridor::before,
  .chat-memo-corridor::after {
    transform: none;
    opacity: 0.28;
  }
}

/* 顶区：纯排版，不套卡片 */
.chat-memo-hero-card {
  position: relative;
  margin: 0 0 1.35rem;
  padding: 0.15rem 0 0.35rem;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body.dark .chat-memo-hero-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

.chat-memo-hero-card::before,
.chat-memo-hero-card::after {
  display: none;
}

.chat-memo-eyebrow {
  margin: 0 0 0.55rem;
  padding-left: 0.15rem;
  font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(var(--tint-rgb), 0.65);
  opacity: 0.88;
}

.chat-memo-title {
  margin: 0 0 0.65rem;
  padding-left: 0.1rem;
  position: relative;
}

.chat-memo-title::after {
  content: "";
  display: block;
  margin-top: 0.55rem;
  width: 4.5rem;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--tint-rgb), 0.55) 0%,
    rgba(var(--blush-rgb), 0.35) 55%,
    transparent 100%
  );
  opacity: 0.75;
}

.chat-memo-title-main {
  display: inline-block;
  font-family: "Noto Serif SC", "Noto Sans SC", serif;
  font-size: 1.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.22;
  color: var(--text-main);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .chat-memo-title-main {
    background-image: linear-gradient(
      118deg,
      var(--text-main) 0%,
      rgba(var(--tint-rgb), 0.92) 48%,
      rgba(var(--blush-rgb), 0.82) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  body.dark .chat-memo-title-main {
    background-image: linear-gradient(
      120deg,
      #f0f2f7 0%,
      rgba(var(--tint-rgb), 0.95) 45%,
      rgba(var(--blush-rgb), 0.78) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.chat-memo-lead {
  margin: 0;
  max-width: 22rem;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.84rem;
  line-height: 1.72;
  letter-spacing: 0.02em;
  color: var(--text-sub);
}

/* 工作区：无玻璃卡片，直接铺在背景上 */
.chat-memo-workspace {
  margin: 0;
}

.chat-memo-workspace-inner {
  position: relative;
  padding: 0.2rem 0 0.35rem;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.chat-memo-workspace-inner::before {
  display: none;
}

body.dark .chat-memo-workspace-inner {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.dark .chat-memo-workspace-inner::before {
  display: none;
}

.chat-memo-workspace-cap {
  margin: 0 0 0.65rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-memo-workspace-cap::before {
  content: "";
  width: 2px;
  align-self: stretch;
  min-height: 1.1rem;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(var(--tint-rgb), 0.15),
    rgba(var(--blush-rgb), 0.45),
    rgba(var(--tint-rgb), 0.2)
  );
  box-shadow: 0 0 12px rgba(var(--tint-rgb), 0.2);
}

.chat-memo-panel-label {
  font-family: "Playfair Display", "Noto Serif SC", Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-main);
  opacity: 0.88;
  text-shadow: none;
}

body.dark .chat-memo-panel-label {
  text-shadow: none;
}

.chat-memo-action-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 1rem;
  padding: 0 0 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.chat-memo-action-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--tint-rgb), 0.28) 22%,
    rgba(var(--blush-rgb), 0.22) 50%,
    rgba(var(--tint-rgb), 0.22) 78%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

body.dark .chat-memo-action-bar {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.dark .chat-memo-action-bar::after {
  opacity: 0.65;
}

.chat-memo-act {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 1 auto;
  min-height: 2rem;
  padding-left: 0.15rem !important;
  padding-right: 0.15rem !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    text-decoration-thickness 0.2s ease;
}

.chat-memo-act:hover {
  transform: none;
  box-shadow: none !important;
  color: rgba(var(--tint-rgb), 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(var(--tint-rgb), 0.35);
  text-underline-offset: 0.28em;
}

.chat-memo-act:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 3px;
  border-radius: 4px !important;
}

body.dark .chat-memo-act:hover {
  box-shadow: none !important;
  color: rgba(var(--tint-rgb), 0.92);
}

/* 主操作「新条目」保留轻微强调，仍非卡片 */
.chat-memo-action-bar #chat-memo-add-summary {
  padding: 0.35rem 0.65rem !important;
  border-radius: 999px !important;
  background: rgba(var(--tint-rgb), 0.14) !important;
  border: 1px solid rgba(var(--tint-rgb), 0.22) !important;
}

.chat-memo-action-bar #chat-memo-add-summary:hover {
  text-decoration: none;
  background: rgba(var(--tint-rgb), 0.22) !important;
}

.chat-memo-act i {
  font-size: 1.05rem;
  opacity: 0.88;
  margin-top: 1px;
}

.chat-memo-hint {
  margin: 0 0 14px;
  padding: 0 2px;
  font-size: 0.74rem;
  line-height: 1.58;
  color: var(--text-sub);
  opacity: 0.92;
}

.chat-memo-hint strong {
  font-weight: 600;
  color: rgba(var(--tint-rgb), 0.95);
}

.chat-memo-automation {
  position: relative;
  margin: 0 0 1rem;
  padding: 0 2px 14px;
}

.chat-memo-automation::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--tint-rgb), 0.28) 35%,
    rgba(var(--blush-rgb), 0.14) 65%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

.chat-memo-automation-kicker {
  margin: 0 0 10px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.85;
}

.chat-memo-automation-row {
  margin: 0 0 10px;
}

.chat-memo-automation-label {
  display: block;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-sub);
}

.chat-memo-automation-input {
  display: inline-block;
  width: 3rem;
  margin: 0 0.35rem;
  padding: 0.28rem 0.35rem;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgba(var(--tint-rgb), 0.22);
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--text-main);
}

.chat-memo-automation-input:focus {
  outline: none;
  border-color: rgba(var(--tint-rgb), 0.45);
  box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.12);
}

.chat-memo-summary-ai-profile-select {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
  padding: 0.35rem 0.45rem;
  font-family: inherit;
  font-size: 0.76rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--tint-rgb), 0.22);
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--text-main);
}

.chat-memo-summary-ai-profile-select:focus {
  outline: none;
  border-color: rgba(var(--tint-rgb), 0.45);
  box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.12);
}

body.dark .chat-memo-summary-ai-profile-select {
  background: rgba(0, 0, 0, 0.2);
}

.chat-memo-automation-desc {
  display: block;
  margin-top: 5px;
  padding-left: 0.1rem;
  font-size: 0.68rem;
  line-height: 1.5;
  opacity: 0.9;
}

.chat-memo-automation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.chat-memo-automation-save-btn {
  margin-top: 0;
}

.chat-memo-stats-tools {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0 2px;
  min-height: 1.5rem;
}

.chat-memo-status--compact {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.62rem;
  line-height: 1.42;
  letter-spacing: 0.02em;
  color: var(--text-sub);
  white-space: pre-line;
  border: none;
  background: transparent;
}

.chat-memo-prompt-open {
  flex-shrink: 0;
}

.chat-memo-prompt-modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.chat-memo-prompt-modal[hidden] {
  display: none !important;
}

.chat-memo-prompt-modal-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(15, 18, 24, 0.42);
  cursor: pointer;
}

body.dark .chat-memo-prompt-modal-backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.chat-memo-prompt-modal-panel {
  position: relative;
  width: 100%;
  max-width: 20rem;
  max-height: min(72vh, 380px);
  overflow: auto;
  padding: 12px 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  background: var(--bg-card);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.chat-memo-prompt-modal-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.chat-memo-prompt-modal-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
}

.chat-memo-prompt-modal-lead {
  margin: 0 0 10px;
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--text-sub);
}

.chat-memo-prompt-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.1);
}

.chat-memo-prompt-label {
  display: block;
  margin: 8px 0 4px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.chat-memo-prompt-label:first-of-type {
  margin-top: 0;
}

.chat-memo-prompt-modal .chat-memo-prompt-textarea.char-textarea {
  margin-top: 0;
  min-height: 0;
  font-size: 0.74rem;
  line-height: 1.42;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  background: rgba(var(--tint-rgb), 0.04);
}

body.dark .chat-memo-prompt-modal .chat-memo-prompt-textarea.char-textarea {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .chat-memo-automation-input {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.12);
}

.chat-detail-memo-blurb {
  margin: 6px 0 0;
}

.chat-memo-timeline-wrap {
  position: relative;
  margin: 0;
  padding: 0 0 6px;
  min-height: 2rem;
}

.chat-memo-timeline {
  list-style: none;
  margin: 0;
  padding: 6px 0 10px 18px;
  position: relative;
}

.chat-memo-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 16px;
  width: 3px;
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    rgba(var(--tint-rgb), 0.05) 0%,
    rgba(var(--tint-rgb), 0.45) 18%,
    rgba(var(--blush-rgb), 0.5) 50%,
    rgba(var(--tint-rgb), 0.35) 82%,
    rgba(var(--tint-rgb), 0.12) 100%
  );
  background-size: 100% 220%;
  background-repeat: no-repeat;
  box-shadow: 0 0 24px rgba(var(--tint-rgb), 0.2);
  animation:
    chat-memo-spine-glow 9s ease-in-out infinite,
    chat-memo-spine-flow 22s linear infinite;
}

.chat-memo-timeline:empty::before {
  bottom: 46%;
  opacity: 0.65;
}

.chat-memo-timeline:empty::after {
  content: "还没有摘要。点「新条目」写下第一句吧。";
  display: block;
  padding: 18px 0 10px 4px;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--text-sub);
}

.chat-memo-tl-li + .chat-memo-tl-li {
  margin-top: 0;
}

.chat-memo-tl-li {
  position: relative;
  margin: 0;
  padding: 12px 0 1.1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: color 0.2s ease;
}

.chat-memo-tl-li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--tint-rgb), 0.12) 20%,
    rgba(var(--tint-rgb), 0.2) 50%,
    rgba(var(--tint-rgb), 0.1) 80%,
    transparent 100%
  );
  pointer-events: none;
}

body.dark .chat-memo-tl-li:not(:last-child)::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
}

body.dark .chat-memo-tl-li {
  background: transparent;
  border: none;
  box-shadow: none;
}

.chat-memo-tl-li:hover {
  border: none;
  box-shadow: none;
  transform: none;
}

body.dark .chat-memo-tl-li:hover {
  box-shadow: none;
}

.chat-memo-tl-li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 1.05rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  background: radial-gradient(
    circle at 35% 30%,
    #fff 0%,
    rgba(var(--tint-rgb), 0.5) 55%,
    var(--bg-device) 100%
  );
  border: 2px solid rgba(var(--tint-rgb), 0.55);
  box-shadow:
    0 0 0 3px rgba(var(--tint-rgb), 0.12),
    0 0 16px rgba(var(--tint-rgb), 0.18);
  z-index: 1;
  transition:
    box-shadow 0.35s ease,
    border-color 0.25s ease;
}

.chat-memo-tl-li:hover::before {
  border-color: rgba(var(--blush-rgb), 0.55);
  box-shadow:
    0 0 0 3px rgba(var(--blush-rgb), 0.12),
    0 0 20px rgba(var(--blush-rgb), 0.24);
  transform: none;
}

body.dark .chat-memo-tl-li::before {
  background: radial-gradient(
    circle at 35% 30%,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(var(--tint-rgb), 0.35) 50%,
    var(--bg-device) 100%
  );
  border-color: rgba(var(--tint-rgb), 0.65);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(0, 0, 0, 0.45);
}

.chat-memo-tl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.chat-memo-tl-cb {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: rgb(var(--tint-rgb));
  cursor: pointer;
}

.chat-memo-tl-del {
  margin-left: auto;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.65;
  padding: 2px 6px !important;
  border-radius: 0 !important;
  font-size: 0.52rem !important;
}

.chat-memo-tl-li:hover .chat-memo-tl-del {
  opacity: 0.95;
}

.chat-memo-tl-time {
  font-size: 0.62rem;
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sub);
  white-space: nowrap;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.88;
}

body.dark .chat-memo-tl-time {
  background: transparent;
  border: none;
  box-shadow: none;
}

.chat-memo-tl-details {
  margin: 0;
}
.chat-memo-tl-details summary.chat-memo-tl-sum {
  cursor: pointer;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.52;
  padding: 2px 0 0 0.55rem;
  list-style: none;
  color: var(--text-main);
  position: relative;
}
.chat-memo-tl-details summary.chat-memo-tl-sum::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid rgba(var(--tint-rgb), 0.55);
  border-bottom: 1.5px solid rgba(var(--tint-rgb), 0.55);
  opacity: 0.65;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.chat-memo-tl-details[open] summary.chat-memo-tl-sum::before {
  transform: rotate(45deg);
}
.chat-memo-tl-details summary.chat-memo-tl-sum:hover {
  color: rgba(var(--tint-rgb), 0.95);
}
body.dark .chat-memo-tl-details summary.chat-memo-tl-sum:hover {
  color: #e8eaf0;
}
.chat-memo-tl-details summary.chat-memo-tl-sum::-webkit-details-marker {
  display: none;
}

.chat-memo-tl-body {
  width: 100%;
  margin-top: 9px;
  box-sizing: border-box;
  border-radius: 0;
  border: none;
  border-left: 2px solid rgba(var(--tint-rgb), 0.22);
  padding-left: 0.65rem;
  background: transparent;
  box-shadow: none;
}
body.dark .chat-memo-tl-body {
  background: transparent;
  border: none;
  border-left: 2px solid rgba(var(--tint-rgb), 0.32);
}

/* 覆盖全局 .char-textarea 的盒状输入框，保持与时间轴一体 */
.chat-memo-timeline .char-textarea.chat-memo-tl-body {
  margin-top: 9px;
  border: none;
  border-left: 2px solid rgba(var(--tint-rgb), 0.24);
  border-radius: 0;
  background: rgba(var(--tint-rgb), 0.02);
  padding: 0.5rem 0.4rem 0.5rem 0.7rem;
  box-shadow: none;
}
body.dark .chat-memo-timeline .char-textarea.chat-memo-tl-body {
  background: rgba(0, 0, 0, 0.12);
  border-left-color: rgba(var(--tint-rgb), 0.35);
}
.chat-memo-timeline .char-textarea.chat-memo-tl-body:focus {
  border-color: transparent;
  border-left-color: rgba(var(--tint-rgb), 0.65);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .chat-memo-mesh,
  .chat-memo-aurora--1,
  .chat-memo-aurora--2,
  .chat-memo-aurora--3 {
    animation: none !important;
  }
  .chat-memo-mesh {
    opacity: 0.4;
    transform: none !important;
  }
  .chat-memo-timeline::before {
    animation: none !important;
    filter: none !important;
    background-position: 0% 0% !important;
  }
  .chat-memo-tl-li {
    transition: color 0.15s ease;
  }
  .chat-memo-tl-li::before,
  .chat-memo-tl-li:hover::before {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .chat-memo-act:hover {
    transform: none !important;
  }
}

/* 聊天气泡长按：对齐登录页 .auth-overlay / .auth-card（Space Mono kicker + Playfair 标题 + 圆角行 + .auth-skip） */
.chat-screen .settings-inner > .chat-body-stack > .chat-bubble-actions {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}
.chat-bubble-actions[hidden] {
  display: none !important;
}
.chat-bubble-actions.is-open {
  pointer-events: auto;
}
.chat-bubble-actions-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: rgba(7, 9, 14, 0.52);
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.dark .chat-bubble-actions-backdrop {
  background: rgba(0, 0, 0, 0.58);
}
.chat-bubble-actions.is-open .chat-bubble-actions-backdrop {
  opacity: 1;
}
.chat-bubble-actions-sheet {
  position: absolute;
  z-index: 1;
  width: min(320px, calc(100% - 16px));
  min-width: 240px;
  min-height: 0;
  overflow: visible;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 0.18s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-bubble-actions.is-positioned .chat-bubble-actions-sheet {
  visibility: visible;
}
.chat-bubble-actions.is-open .chat-bubble-actions-sheet {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#chat-screen.chat-screen--theme-glass .chat-bubble-actions-sheet {
  transform: none;
  transition: opacity 0.12s ease;
}
#chat-screen.chat-screen--theme-glass .chat-bubble-actions.is-open .chat-bubble-actions-sheet {
  transform: none;
}
#chat-screen.chat-screen--theme-glass .chat-bubble-actions {
  contain: layout style;
}
#chat-screen.chat-screen--theme-glass .chat-bubble-actions-backdrop {
  transition: opacity 0.1s ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#chat-screen.chat-screen--theme-glass .chat-bubble-actions-card {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .chat-bubble-actions-sheet {
    transform: none;
    transition: opacity 0.1s ease;
  }
  .chat-bubble-actions.is-open .chat-bubble-actions-sheet {
    transform: none;
  }
}
.chat-bubble-actions-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: min(72vh, 520px, calc(100dvh - 80px));
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-float);
  padding: 18px 16px 14px;
}
.chat-bubble-actions-card .chat-bubble-actions-title {
  margin: 0;
  margin-top: 8px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--text-main);
}
.chat-bubble-actions-preview.auth-desc {
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}
.chat-bubble-actions-preview[hidden] {
  display: none !important;
}
.chat-bubble-actions-menu.auth-form {
  margin-top: 12px;
  min-height: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.chat-bubble-actions-row {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  padding: 10px 11px;
  font-size: 0.8rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chat-bubble-actions-menu .chat-bubble-actions-row[hidden] {
  display: none !important;
}
.chat-bubble-actions-row:hover {
  border-color: var(--accent);
}
.chat-bubble-actions-row:focus {
  outline: none;
}
.chat-bubble-actions-row:focus-visible {
  border-color: var(--accent);
  outline: 2px solid rgba(var(--tint-rgb), 0.35);
  outline-offset: 2px;
}
.chat-bubble-actions-row i {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--text-sub);
  opacity: 0.88;
}
.chat-bubble-actions-row:hover i {
  color: var(--accent);
  opacity: 1;
}
.chat-bubble-actions-row span {
  flex: 1;
  min-width: 0;
}
.chat-bubble-actions-row--danger {
  border-style: dashed;
  border-color: rgba(181, 71, 63, 0.38);
  color: #b5473f;
}
.chat-bubble-actions-row--danger i,
.chat-bubble-actions-row--danger span {
  color: #b5473f;
}
.chat-bubble-actions-row--danger:hover {
  border-color: #b5473f;
}
body.dark .chat-bubble-actions-row--danger {
  border-color: rgba(232, 147, 138, 0.38);
  color: #e8938a;
}
body.dark .chat-bubble-actions-row--danger i,
body.dark .chat-bubble-actions-row--danger span {
  color: #e8938a;
}

/* 左滑引用：气泡跟手位移 + 右侧提示 */
.chat-msg.is-swipe-quote-active .chat-msg-inner {
  position: relative;
}
.chat-msg.is-swipe-quote-active .chat-msg-inner::after {
  content: "引用";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0.88;
  pointer-events: none;
  user-select: none;
}
.chat-msg--user.is-swipe-quote-active .chat-msg-inner::after {
  right: auto;
  left: 2px;
}

/* 左滑引用：气泡上允许横向手势，纵向仍由 #chat-messages 滚动 */
.chat-msg .chat-msg-bubble,
.chat-msg .chat-msg-card {
  touch-action: pan-y;
}
body.dark .chat-bubble-actions-row--danger:hover {
  border-color: #e8938a;
}
.chat-bubble-actions-card .auth-skip {
  margin-top: 12px;
}

/* —— 顶栏角色头像 → 心声：单卡 + 轻编辑感（纸温、顶谱线、书脊、卷标倾角） —— */
.chat-header-face.chat-header-face--inner-voice {
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-header-face.chat-header-face--inner-voice::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.chat-header-face.chat-header-face--inner-voice:hover {
  transform: scale(1.04);
  box-shadow:
    0 0 0 2px rgba(var(--tint-rgb), 0.12),
    0 6px 18px rgba(0, 0, 0, 0.08);
}
.chat-header-face.chat-header-face--inner-voice:hover::after {
  opacity: 1;
  border-color: rgba(var(--blush-rgb), 0.45);
}
.chat-header-face.chat-header-face--inner-voice:focus {
  outline: none;
}
.chat-header-face.chat-header-face--inner-voice:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .chat-header-face.chat-header-face--inner-voice:hover {
    transform: none;
  }
}

.chat-header-face.chat-header-face--inner-voice.chat-header-face--inner-voice-off {
  cursor: not-allowed;
  opacity: 0.48;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.chat-header-face.chat-header-face--inner-voice.chat-header-face--inner-voice-off:hover {
  transform: none;
  box-shadow: none;
}
.chat-header-face.chat-header-face--inner-voice.chat-header-face--inner-voice-off::after {
  opacity: 0;
}

/* 心声 / 历史心声 / 图片预览：挂在线上屏 #chat-screen 根上（与线下一致），避免在 .chat-body-stack 内打开时牵动消息区重绘 */
#chat-screen.chat-screen > .chat-inner-voice {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}
#chat-screen.chat-screen > .chat-inner-voice.is-open {
  position: fixed;
  inset: 0;
  z-index: 10035;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  pointer-events: auto;
}
#chat-screen.chat-screen > .chat-inner-voice:not(.is-open) .chat-inner-voice-backdrop {
  pointer-events: none;
}
#chat-screen.chat-screen > .chat-char-recall-overlay.chat-inner-voice-history-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}
#chat-screen.chat-screen > .chat-char-recall-overlay.chat-inner-voice-history-overlay.is-open {
  position: fixed;
  inset: 0;
  z-index: 10036;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  pointer-events: auto;
}
#chat-screen.chat-screen > .chat-char-recall-overlay.chat-inner-voice-history-overlay:not(.is-open) .chat-inner-voice-backdrop {
  pointer-events: none;
}
#chat-screen.chat-screen > .chat-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 10037;
}
#chat-screen.chat-screen > .chat-photo-viewer.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.chat-inner-voice[hidden] {
  display: none !important;
}
.chat-inner-voice.is-open {
  pointer-events: auto;
}
.chat-inner-voice:not(.is-open) .chat-inner-voice-backdrop {
  pointer-events: none;
}
.chat-inner-voice-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: rgba(10, 12, 16, 0.46);
  opacity: 0;
  transition: opacity 0.32s ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.dark .chat-inner-voice-backdrop {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.chat-inner-voice.is-open .chat-inner-voice-backdrop {
  opacity: 1;
}
/* 心声：单卡实底、无书脊/胶带/角标，编辑向分组列表 */
.chat-inner-voice-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  width: min(404px, calc(100vw - 28px));
  max-width: 100%;
  /* 给内部 flex 一个“确定高度”，否则下方 body 可能被压成 0 高 */
  height: min(64vh, 540px);
  max-height: min(64vh, 540px);
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: translateY(6px);
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  filter: none;
}
body.dark .chat-inner-voice-panel {
  filter: none;
}
.chat-inner-voice.is-open .chat-inner-voice-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* 小剧场 Tab：更宽更高的弹窗，便于阅读 HTML 截屏与长文 */
#chat-char-inner-voice.is-theater-tab .chat-inner-voice-panel {
  width: min(480px, calc(100vw - 20px));
  height: min(82vh, 720px);
  max-height: min(82vh, 720px);
}
#chat-char-inner-voice.is-theater-tab .chat-theater-inset {
  flex: 1;
  min-height: 0;
}
#chat-char-inner-voice.is-theater-tab .chat-theater-toolbar {
  flex-shrink: 0;
}
#chat-char-inner-voice.is-theater-tab .chat-theater-history:not([hidden]) {
  flex-shrink: 0;
}
#chat-char-inner-voice.is-theater-tab .chat-theater-body {
  min-height: 0;
  max-height: none;
}
#chat-char-inner-voice.is-theater-tab.is-theater-html .chat-theater-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#chat-char-inner-voice.is-theater-tab.is-theater-html .chat-theater-html-frame {
  flex: 1;
  min-height: 0;
  height: auto;
}
#chat-char-inner-voice.is-theater-tab:not(.is-theater-html) .chat-theater-body {
  flex: 0 1 auto;
  overflow: auto;
}
#chat-char-inner-voice.is-theater-tab:not(.is-theater-html) .chat-inner-voice-mount,
#chat-char-inner-voice.is-theater-tab:not(.is-theater-html) .chat-slab-mat,
#chat-char-inner-voice.is-theater-tab:not(.is-theater-html) .chat-inner-voice-slab-panel,
#chat-char-inner-voice.is-theater-tab:not(.is-theater-html) .chat-inner-voice-slab-panel > .chat-inner-voice-pane:not([hidden]),
#chat-char-inner-voice.is-theater-tab:not(.is-theater-html) .chat-theater-inset {
  flex: 0 1 auto;
}
@media (prefers-reduced-motion: reduce) {
  .chat-inner-voice-panel {
    transform: none;
    transition: opacity 0.14s ease;
  }
}
.chat-inner-voice-mount {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  -webkit-font-smoothing: antialiased;
}
body.dark .chat-inner-voice-mount {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-float);
}
/* 与聊天「笔记本」皮肤解耦：不显示书脊、胶带、角标、纸纹光斑 */
.chat-inner-voice-mount .chat-slab-spine,
.chat-inner-voice-mount .chat-slab-tape,
.chat-inner-voice-ornament {
  display: none !important;
}
.chat-inner-voice-mount .chat-slab-mat::before {
  content: none;
  display: none;
}
.chat-inner-voice-mount .chat-slab {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  gap: 0;
}
.chat-inner-voice-mount .chat-slab-stack {
  flex: 1;
  min-height: 0;
}
.chat-inner-voice-hero {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px 8px;
}
.chat-inner-voice-hero[hidden] {
  display: none !important;
}
.chat-inner-voice-hero-img {
  width: min(120px, 30vw);
  height: min(120px, 30vw);
  border-radius: 22px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.chat-inner-voice-mount .chat-inner-voice-capbar {
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 12px 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
}
.chat-inner-voice-mount .chat-inner-voice-capbar::after {
  display: none;
}
.chat-inner-voice-mount .chat-inner-voice-capbar .chat-composer-cap-l {
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 1;
}
.chat-inner-voice-cap-title {
  flex: 1;
  margin: 0;
  min-width: 0;
  padding: 0 4px;
  font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text-main);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
}
.chat-inner-voice-cap-title::before {
  content: none;
  display: none;
}
body.dark .chat-inner-voice-cap-title {
  text-shadow: none;
}
.chat-inner-voice-mount .chat-inner-voice-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--text-sub);
  box-shadow: none;
  transform: none;
  transition: background 0.15s ease, color 0.15s ease;
}
body.dark .chat-inner-voice-mount .chat-inner-voice-close {
  background: transparent;
  box-shadow: none;
  border: none;
}
.chat-inner-voice-mount .chat-inner-voice-close:hover {
  transform: none;
  background: rgba(var(--tint-rgb), 0.1);
  color: var(--text-main);
  box-shadow: none;
  border: none;
}
body.dark .chat-inner-voice-mount .chat-inner-voice-close:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.chat-inner-voice-mount .chat-inner-voice-close:active {
  transform: none;
  background: rgba(var(--tint-rgb), 0.14);
  box-shadow: none;
}
body.dark .chat-inner-voice-mount .chat-inner-voice-close:active {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.chat-inner-voice-mount .chat-inner-voice-close .ph {
  font-size: 1.1rem;
  line-height: 1;
}
.chat-inner-voice-mount .chat-slab-mat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.chat-inner-voice-slab-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.chat-inner-voice-mount .chat-inner-voice-slab-panel.chat-slab-panel {
  transform: none;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.dark .chat-inner-voice-mount .chat-inner-voice-slab-panel.chat-slab-panel {
  border: none;
  background: transparent;
  box-shadow: none;
}
/* 与 composer 的 .chat-input-ruled 复用 class，后段有 overflow:hidden；这里用双列 flex，仅下面 body 区滚动 */
.chat-inner-voice-inset.chat-input-ruled {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  padding: 16px 18px 20px;
  background: transparent;
}
body.dark .chat-inner-voice-inset.chat-input-ruled {
  background: transparent;
}
.chat-inner-voice-mount .chat-slab-mat:focus-within .chat-inner-voice-slab-panel {
  transform: none;
  border: none;
  box-shadow: none;
}
body.dark .chat-inner-voice-mount .chat-slab-mat:focus-within .chat-inner-voice-slab-panel {
  border: none;
  box-shadow: none;
}

.chat-inner-voice-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  flex-shrink: 0;
}
body.dark .chat-inner-voice-toolbar {
  border: none;
  background: none;
  box-shadow: none;
}

.chat-inner-voice-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 14px 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
}
.chat-inner-voice-tab {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 8px 12px 10px;
  margin: 0;
  color: var(--text-sub);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.chat-inner-voice-tab.is-active {
  color: var(--text-main);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.chat-inner-voice-tab[hidden] {
  display: none !important;
}
.chat-inner-voice-tabs[hidden] {
  display: none !important;
}
.chat-inner-voice-pane[hidden] {
  display: none !important;
}
/* slab 内双 pane 时，可见 pane 须撑满剩余高度，否则心声 body（flex:1）会被压成 0 */
.chat-inner-voice-slab-panel > .chat-inner-voice-pane:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-theater-inset {
  position: relative;
  min-height: 0;
}
.chat-theater-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.chat-theater-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.chat-theater-view-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-theater-view-chip {
  font-size: 0.72rem;
}
.chat-theater-view-chip.is-active {
  box-shadow: inset 0 0 0 1px var(--accent, #c45);
}
.chat-theater-reroll-picks {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.72rem;
  color: var(--text-sub);
}
.chat-theater-reroll-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.theater-preset-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.theater-preset-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  cursor: pointer;
}
.theater-preset-check input {
  margin-top: 0.2em;
  flex-shrink: 0;
}
.theater-preset-check-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.theater-preset-check-meta span {
  font-size: 0.68rem;
  color: var(--text-sub);
}
.chat-theater-body {
  position: relative;
  min-height: 120px;
  max-height: min(52vh, 360px);
  overflow: auto;
}
.chat-theater-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--text-main);
}
.chat-theater-html-frame {
  width: 100%;
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf8f5;
}
.chat-theater-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.5;
}
.chat-theater-history {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.chat-theater-history-k {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: var(--text-sub);
}
.chat-theater-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
}
.chat-theater-history-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 0.76rem;
  line-height: 1.45;
  cursor: pointer;
  color: var(--text-main);
}
.chat-theater-history-item.is-active {
  border-color: rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.06);
}
.theater-preset-sheet-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}
.theater-preset-sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.theater-preset-sheet-item-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.theater-preset-sheet-item-meta span {
  font-size: 0.72rem;
  color: var(--text-sub);
}
.theater-preset-sheet-empty {
  font-size: 0.8rem;
  color: var(--text-sub);
  padding: 8px 0;
}
.theater-preset-sheet-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.theater-preset-add-instruction {
  min-height: 72px;
  resize: vertical;
}

.chat-inner-voice-reroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#chat-char-inner-voice.is-inner-voice-rerolling .chat-inner-voice-reroll-btn {
  cursor: wait;
}
#chat-char-inner-voice.is-inner-voice-rerolling #chat-inner-voice-body.chat-inner-voice-modalbody {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.chat-inner-voice-loading-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 12;
  background: radial-gradient(120% 90% at 50% 15%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.28) 70%, rgba(0, 0, 0, 0.38) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
body.dark .chat-inner-voice-loading-cover {
  background: radial-gradient(120% 90% at 50% 15%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.7) 100%);
}
#chat-char-inner-voice.is-inner-voice-rerolling .chat-inner-voice-loading-cover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease;
}

#chat-char-inner-voice.is-inner-voice-rerolling #chat-inner-voice-mood {
  opacity: 0;
  pointer-events: none;
}
.chat-inner-voice-loading-card {
  width: min(368px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(var(--tint-rgb), 0.12);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(var(--tint-rgb), 0.09) 100%);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
  padding: 16px 16px 14px;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  transform: translateZ(0);
  animation: chatInnerVoiceCoverCardIn 0.22s ease-out both;
}
body.dark .chat-inner-voice-loading-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(12, 12, 12, 0.78) 0%, rgba(0, 0, 0, 0.66) 45%, rgba(var(--tint-rgb), 0.1) 100%);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.chat-inner-voice-loading-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  padding: 1px;
  background: conic-gradient(
    from 180deg,
    rgba(var(--tint-rgb), 0) 0deg,
    rgba(var(--tint-rgb), 0.14) 40deg,
    rgba(var(--tint-rgb), 0.52) 90deg,
    rgba(var(--tint-rgb), 0.14) 140deg,
    rgba(var(--tint-rgb), 0) 220deg,
    rgba(var(--tint-rgb), 0.18) 300deg,
    rgba(var(--tint-rgb), 0) 360deg
  );
  animation: chatInnerVoiceCoverRing 2.4s linear infinite;
  pointer-events: none;
  /* mask so it becomes a 1px animated border */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.chat-inner-voice-loading-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background:
    radial-gradient(120px 90px at 18% 18%, rgba(var(--tint-rgb), 0.18), transparent 70%),
    radial-gradient(140px 110px at 82% 10%, rgba(var(--tint-rgb), 0.12), transparent 72%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  opacity: 0.55;
  animation: chatInnerVoiceCoverBreathe 2.8s ease-in-out infinite;
}
.chat-inner-voice-loading-card {
  position: relative;
  overflow: hidden;
}
.chat-inner-voice-loading-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.92;
}
.chat-inner-voice-loading-title {
  margin-top: 6px;
  font-family: "Playfair Display", "Noto Sans SC", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.32;
  color: var(--text);
}
.chat-inner-voice-loading-lines {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.chat-inner-voice-loading-line {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    100deg,
    rgba(var(--tint-rgb), 0.06) 0%,
    rgba(var(--tint-rgb), 0.11) 20%,
    rgba(var(--tint-rgb), 0.22) 34%,
    rgba(var(--tint-rgb), 0.11) 48%,
    rgba(var(--tint-rgb), 0.06) 70%
  );
  background-size: 240% 100%;
  animation: chatInnerVoiceLoadingShimmer 1.25s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
body.dark .chat-inner-voice-loading-line {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.14) 35%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.05) 70%
  );
  background-size: 220% 100%;
}
.chat-inner-voice-loading-lines .chat-inner-voice-loading-line:nth-child(2) {
  animation-delay: 0.08s;
}
.chat-inner-voice-loading-lines .chat-inner-voice-loading-line:nth-child(3) {
  animation-delay: 0.14s;
}
.chat-inner-voice-loading-lines .chat-inner-voice-loading-line:nth-child(4) {
  animation-delay: 0.22s;
}
.chat-inner-voice-loading-line.w-92 {
  width: 92%;
}
.chat-inner-voice-loading-line.w-88 {
  width: 88%;
}
.chat-inner-voice-loading-line.w-76 {
  width: 76%;
}
.chat-inner-voice-loading-line.w-64 {
  width: 64%;
}
@keyframes chatInnerVoiceLoadingShimmer {
  0% {
    background-position: 100% 50%;
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: -100% 50%;
    opacity: 0.85;
  }
}

@keyframes chatInnerVoiceCoverRing {
  to {
    transform: rotate(360deg);
  }
}
@keyframes chatInnerVoiceCoverBreathe {
  0%,
  100% {
    opacity: 0.46;
    transform: translateY(0);
  }
  50% {
    opacity: 0.72;
    transform: translateY(-1px);
  }
}
@keyframes chatInnerVoiceCoverCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 历史心声：独立 overlay，与撤回存档同层宽规，略放宽便于列表 */
.chat-char-recall-overlay.chat-inner-voice-history-overlay .chat-inner-voice-panel.chat-char-recall-dialog {
  width: min(448px, calc(100vw - 28px));
  height: min(64vh, 540px);
  max-height: min(64vh, 540px);
}
.chat-inner-voice-history-screen-slab {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  padding: 16px 18px 18px;
  overflow: hidden;
}
/* 列表区占满 slab 剩余高度；否则中间 div 按内容撑满、ul 的 flex:1 不生效，长列表被 overflow:hidden 裁切且不能滚 */
#chat-inner-voice-history-screen-list-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-inner-voice-history-screen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.chat-inner-voice-history-screen-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.03);
}
body.dark .chat-inner-voice-history-screen-list {
  background: rgba(0, 0, 0, 0.15);
}
.chat-inner-voice-history-screen-item {
  margin: 0;
  padding: 12px 14px 12px 16px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.12s ease;
  box-shadow: none;
}
.chat-inner-voice-history-screen-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 99px;
  background: transparent;
}
.chat-inner-voice-history-screen-item:last-child {
  border-bottom: none;
}
body.dark .chat-inner-voice-history-screen-item {
  box-shadow: none;
}
.chat-inner-voice-history-screen-item:hover {
  background: rgba(var(--tint-rgb), 0.06);
  box-shadow: none;
}
body.dark .chat-inner-voice-history-screen-item:hover {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}
.chat-inner-voice-history-screen-item.is-active {
  background: rgba(var(--tint-rgb), 0.1);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.chat-inner-voice-history-screen-item.is-active::before {
  background: var(--accent);
  opacity: 0.9;
}
body.dark .chat-inner-voice-history-screen-item.is-active {
  background: rgba(255, 255, 255, 0.07);
}
/* 列表「仅心声」：可多行省略，点选在侧栏手记中查看完整独白 */
.chat-inner-voice-history-screen-voice {
  display: block;
  font-size: 0.78rem;
  line-height: 1.5;
  font-weight: 450;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: calc(1.5em * 8);
  overflow: hidden;
}

.chat-inner-voice-mood {
  margin: 0 0 16px;
  padding: 0;
  border: none;
  background: none;
  font-family: "Noto Sans SC", "DM Sans", sans-serif;
  font-size: 0.8rem;
  line-height: 1.55;
  font-weight: 400;
  font-style: italic;
  color: var(--text-sub);
  white-space: pre-wrap;
  word-break: break-word;
  font-variant-emoji: emoji;
  box-shadow: none;
  flex-shrink: 0;
}
body.dark .chat-inner-voice-mood {
  background: none;
  box-shadow: none;
}
/* 内心指标区：占满心情下方剩余高度，内容过长时在此区域滚动 */
.chat-inner-voice-body.chat-inner-voice-modalbody {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--tint-rgb), 0.22) transparent;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(var(--tint-rgb), 0.03);
}
.chat-inner-voice-body.chat-inner-voice-modalbody::-webkit-scrollbar {
  width: 5px;
}
.chat-inner-voice-body.chat-inner-voice-modalbody::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(var(--tint-rgb), 0.22);
}
body.dark .chat-inner-voice-body.chat-inner-voice-modalbody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
}
body.dark .chat-inner-voice-body.chat-inner-voice-modalbody {
  background: rgba(0, 0, 0, 0.18);
}
.chat-inner-voice-bubble {
  margin: 0;
  padding: 14px 16px 15px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.chat-inner-voice-bubble:last-child {
  border-bottom: none;
}
body.dark .chat-inner-voice-bubble {
  box-shadow: none;
}
.chat-inner-voice-bubble--thought,
.chat-inner-voice-bubble--state,
.chat-inner-voice-bubble--affinity {
  border-color: var(--line);
  background: transparent;
  box-shadow: none;
}
body.dark .chat-inner-voice-bubble--thought,
body.dark .chat-inner-voice-bubble--state,
body.dark .chat-inner-voice-bubble--affinity {
  background: transparent;
}
.chat-inner-voice-bubble--deep {
  padding-bottom: 6px;
}
.chat-inner-voice-bubble-label {
  margin: 0 0 6px;
  font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 1;
}
.chat-inner-voice-bubble-label--sub {
  margin-bottom: 6px;
}
.chat-inner-voice-bubble-text {
  margin: 0;
  font-family: "Noto Sans SC", "DM Sans", sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
  font-variant-emoji: emoji;
}
.chat-inner-voice-bubble-text--thought {
  font-family: inherit;
  font-size: 0.84rem;
  line-height: 1.52;
  letter-spacing: 0;
}
.chat-inner-voice-mount .chat-inner-voice-bubble-text--thought::first-letter {
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  line-height: inherit;
  color: var(--text-main);
  padding-right: 0;
  text-shadow: none;
}
body.dark .chat-inner-voice-mount .chat-inner-voice-bubble-text--thought::first-letter {
  text-shadow: none;
}
.chat-inner-voice-bubble-text--thought i,
.chat-inner-voice-bubble-text--thought .thought-italic {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.chat-inner-voice-aff-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.chat-inner-voice-aff-row .chat-inner-voice-bubble-label {
  margin-bottom: 0;
}
.chat-inner-voice-affinity-num {
  flex-shrink: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.chat-inner-voice-affinity-desc {
  margin: 8px 0 0;
  font-family: "Noto Sans SC", "DM Sans", sans-serif;
  font-size: 0.72rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--text-sub);
}
.chat-inner-voice-deep-gate {
  display: flex;
  justify-content: stretch;
  width: 100%;
}
.chat-inner-voice-deep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(var(--tint-rgb), 0.3);
  cursor: pointer;
  background: transparent;
  color: var(--text-main);
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
  transform: none;
  transition: background 0.15s ease, border-color 0.15s ease, border-style 0.15s ease;
}
body.dark .chat-inner-voice-deep-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
  box-shadow: none;
}
.chat-inner-voice-deep-btn span {
  color: var(--text-main);
}
.chat-inner-voice-deep-btn:hover {
  transform: none;
  background: rgba(var(--tint-rgb), 0.08);
  border-style: solid;
  border-color: rgba(var(--tint-rgb), 0.35);
  box-shadow: none;
}
.chat-inner-voice-deep-btn:active {
  transform: none;
  background: rgba(var(--tint-rgb), 0.12);
  box-shadow: none;
}
body.dark .chat-inner-voice-deep-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
body.dark .chat-inner-voice-deep-btn:active {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
.chat-inner-voice-deep-btn .ph {
  font-size: 1.05rem;
  color: var(--accent);
}
.chat-inner-voice-deep-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  background: rgba(var(--tint-rgb), 0.06);
  box-shadow: none;
  outline: none;
}
body.dark .chat-inner-voice-deep-panel {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: none;
}
.chat-inner-voice-aff-track {
  position: relative;
  height: 7px;
  border-radius: 99px;
  background: var(--line);
  box-shadow: none;
  overflow: hidden;
}
body.dark .chat-inner-voice-aff-track {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.chat-inner-voice-aff-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--tint-rgb), 0.42), rgba(var(--blush-rgb), 0.32));
  box-shadow: 0 0 10px rgba(var(--blush-rgb), 0.12);
  transition: width 0.68s cubic-bezier(0.18, 1, 0.22, 1);
}
@media (prefers-reduced-motion: reduce) {
  .chat-inner-voice-aff-fill {
    transition: none;
  }
  .chat-inner-voice-mount .chat-inner-voice-close:hover,
  .chat-inner-voice-deep-btn:hover {
    transform: none;
  }
}
.chat-inner-voice-aff-track[data-aff-unknown="1"] .chat-inner-voice-aff-fill {
  width: 0% !important;
  opacity: 0.35;
}
.chat-inner-voice-aff-track[data-aff-tier="high"] .chat-inner-voice-aff-fill {
  background: linear-gradient(90deg, var(--accent), rgba(var(--blush-rgb), 0.72));
  box-shadow: 0 0 12px rgba(var(--blush-rgb), 0.2);
}
.chat-inner-voice-aff-track[data-aff-tier="mid"] .chat-inner-voice-aff-fill {
  background: linear-gradient(90deg, rgba(var(--tint-rgb), 0.44), rgba(var(--blush-rgb), 0.22));
}
.chat-inner-voice-aff-track[data-aff-tier="low"] .chat-inner-voice-aff-fill {
  background: rgba(120, 124, 132, 0.55);
}
.chat-thread-detail-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px 10px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--bg-device);
  border-bottom: 1px solid var(--line);
}
body.dark .chat-thread-detail-toolbar {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.chat-detail-toolbar-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Source Han Sans", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-sub);
}
.chat-thread-detail-toolbar-spacer {
  flex: 0 0 72px;
  width: 72px;
  pointer-events: none;
}

.chat-thread-detail-scroll {
  flex: 1;
  min-height: 0;
}
.chat-thread-detail-panel .chat-detail-scroll {
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-device);
}
.chat-thread-detail-panel .chat-detail-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.chat-detail-hero {
  padding: 0 4px 14px;
  border-bottom: 1px dashed rgba(var(--tint-rgb), 0.2);
}
body.dark .chat-detail-hero {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.chat-detail-hero-stamp {
  margin: 0 0 7px;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Source Han Sans", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--text-sub);
  opacity: 0.88;
}
.chat-detail-hero-title {
  margin: 0;
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--text-main);
}

.chat-detail-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.chat-detail-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 9px 4px;
}
.chat-detail-group-idx {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Source Han Sans", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-main);
  opacity: 0.14;
  min-width: 1.35rem;
}
body.dark .chat-detail-group-idx {
  opacity: 0.2;
}
.chat-detail-group-label {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Source Han Sans", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-sub);
}

.chat-detail-slab {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 14px 14px 13px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 28px rgba(0, 0, 0, 0.05);
}
body.dark .chat-detail-slab {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 28px rgba(0, 0, 0, 0.28);
}
.chat-detail-slab--quiet {
  background:
    linear-gradient(165deg, rgba(var(--tint-rgb), 0.06), transparent 50%),
    var(--bg-card);
}
body.dark .chat-detail-slab--quiet {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.04), transparent 50%),
    var(--bg-card);
}

.chat-detail-field {
  margin-top: 12px;
}
.chat-detail-slab > .chat-detail-field--first {
  margin-top: 0;
}
.chat-detail-slab > .chat-detail-lead + .chat-detail-field {
  margin-top: 8px;
}
.chat-detail-field-k {
  display: block;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Source Han Sans", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-sub);
  margin-bottom: 6px;
}
label.chat-detail-field-k--label {
  cursor: pointer;
}
.chat-detail-scene-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.chat-detail-scene-head .chat-detail-field-k {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.chat-detail-scene-head .chip {
  flex-shrink: 0;
}
/* 卷宗内开关行：不用 :has()，避免部分 WebView 下样式未命中导致开关错位或难点击 */
.chat-detail-field.chat-detail-field--switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
}
.chat-detail-field.chat-detail-field--switch > .chat-detail-field-k {
  margin-bottom: 0;
  flex: 1;
  min-width: min(100%, 10rem);
}
.chat-detail-field.chat-detail-field--switch > .chat-detail-switch {
  flex-shrink: 0;
}
#chat-detail-persona-fold-field[hidden] {
  display: none !important;
}
.chat-detail-field.chat-detail-field--switch > .chat-detail-field--translation-sub {
  flex: 1 1 100%;
  width: 100%;
}
.chat-detail-field--memory-rounds {
  margin-top: 10px;
}
.chat-detail-memory-mode {
  margin: 8px 0 0;
  padding: 0;
  border: none;
  min-width: 0;
}
.chat-detail-memory-mode-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--text-main);
  cursor: pointer;
}
.chat-detail-memory-mode-opt input {
  margin: 0;
  flex-shrink: 0;
}
.chat-detail-memory-mode .chat-detail-memory-rounds-input {
  margin-top: 6px;
}
.chat-detail-memory-mode .chat-detail-memory-rounds-input:disabled {
  opacity: 0.45;
}
.chat-detail-memory-mode-desc {
  display: block;
  margin: 2px 0 0 1.35rem;
  font-size: 0.68rem;
  color: var(--text-sub);
  line-height: 1.35;
}
.chat-detail-field--memory-rounds .chat-detail-lead--compact {
  margin-top: 6px;
  max-width: 28rem;
}
.chat-detail-memory-rounds-input {
  display: block;
  width: 100%;
  max-width: 148px;
  box-sizing: border-box;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 0.76rem;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-main);
}
.chat-detail-memory-rounds-input:focus {
  outline: none;
  border-color: var(--accent);
}
.chat-detail-scene-input {
  margin-top: 0;
  min-height: 2.6em;
  max-height: 5.2em;
  padding: 6px 9px 7px;
  font-size: 0.72rem;
  line-height: 1.42;
  border-radius: 10px;
  border: 1px dashed rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.04);
  box-shadow: none;
  resize: vertical;
}
body.dark .chat-detail-scene-input {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
}
.chat-detail-scene-input:focus {
  border-color: rgba(var(--tint-rgb), 0.45);
  border-style: solid;
}
body.dark .chat-detail-scene-input:focus {
  border-color: rgba(var(--tint-rgb), 0.4);
}
.chat-detail-field--wb .chat-detail-wb-select {
  margin-top: 4px;
  width: 100%;
}
.chat-detail-wb-summary {
  margin: 0 0 8px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-sub);
}
.chat-detail-wb-empty {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: var(--text-sub);
}
.chat-detail-wb-bind-toggle {
  margin-top: 2px;
}
.chat-detail-wb-picker {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.chat-detail-wb-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  font-size: 0.78rem;
}
.chat-detail-chipbox--picked {
  margin-top: 0;
}
.chat-detail-chipbox--scroll {
  max-height: min(11.5rem, 38vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.chat-detail-chipbox--picked .chat-detail-chip {
  max-width: min(100%, 14em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 主动发消息 / 主动发朋友圈：间隔模式 + 自定义分钟（卷宗内紧凑排版） */
/* 密谈沙盒 ext-sb */
.ext-sb-panel {
  z-index: 10040;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ext-sb-pane[hidden],
.ext-sb-wb-picker[hidden] {
  display: none !important;
}
.chat-screen--ext-sb-open .chat-thread-detail-tape-btn {
  opacity: 0.35;
  pointer-events: none;
}
.ext-sb-panel .ext-sb-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ext-sb-head {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ext-sb-head-side {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ext-sb-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
}
.ext-sb-tab {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-card);
  color: var(--text-sub);
  cursor: pointer;
}
.ext-sb-tab.is-active {
  border-color: var(--accent);
  color: var(--text-main);
  background: rgba(var(--tint-rgb), 0.06);
}
.ext-sb-save-card {
  flex-shrink: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ext-sb-save-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.ext-sb-save-row--pick {
  grid-template-columns: auto 1fr auto;
}
.ext-sb-save-name,
.ext-sb-saved-pick {
  width: 100%;
  min-width: 0;
  font-size: 0.68rem;
}
.ext-sb-status-hint {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.4;
  color: var(--text-sub);
  opacity: 0.9;
}
.ext-sb-delete-saved {
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.35);
}
body.dark .ext-sb-delete-saved {
  color: #f4a9a2;
  border-color: rgba(244, 169, 162, 0.35);
}
.ext-sb-inject-btn.is-on {
  border-color: var(--accent);
  color: var(--text-main);
  background: rgba(var(--tint-rgb), 0.08);
}
.ext-sb-pane {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
  min-height: 0;
}
.ext-sb-work-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
}
.ext-sb-work-toolbar--html {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.ext-sb-work-toolbar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ext-sb-html-note {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.68rem;
}
.ext-sb-work-toolbar-main {
  font-weight: 700;
}
.ext-sb-result-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-body);
  min-width: 0;
}
#ext-sb-pane-text .ext-sb-result-card {
  min-height: min(62vh, calc(100dvh - 12.5rem));
}
.ext-sb-result-card--html {
  flex: 0 0 auto;
  min-height: min(72vh, calc(100dvh - 8rem));
}
.ext-sb-preview-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ext-sb-preview-k {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-sub);
}
.ext-sb-preview-text {
  flex: 1 1 auto;
  min-height: min(56vh, calc(100dvh - 14rem));
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.8rem;
  line-height: 1.62;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}
.ext-sb-result-card--html .ext-sb-preview {
  flex: 0 0 auto;
  width: 100%;
  min-height: min(66vh, calc(100dvh - 10rem));
  height: min(66vh, calc(100dvh - 10rem));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #faf8f5;
  box-sizing: border-box;
}
body.dark .ext-sb-result-card--html .ext-sb-preview {
  background: #1a1c1f;
}
.ext-sb-fold {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 10px 8px;
  background: var(--bg-card);
}
.ext-sb-fold-k {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  list-style: none;
}
.ext-sb-fold-k::-webkit-details-marker {
  display: none;
}
.ext-sb-fold-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ext-sb-field-k,
.ext-sb-wb-k {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-sub);
}
.ext-sb-editor {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.72rem;
  line-height: 1.5;
  background: var(--bg-body);
  color: var(--text-main);
  resize: vertical;
}
.ext-sb-editor--instr {
  min-height: 3rem;
  max-height: min(16vh, 120px);
  resize: none;
}
.ext-sb-wb-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(var(--tint-rgb), 0.14);
}
.ext-sb-wb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.ext-sb-wb-bound {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.ext-sb-wb-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.66rem;
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ext-sb-wb-chip.is-inject {
  border-color: var(--accent);
  color: var(--text-main);
}
.ext-sb-wb-add {
  flex-shrink: 0;
}
.ext-sb-wb-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ext-sb-wb-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(20vh, 108px);
  overflow: hidden;
}
.ext-sb-wb-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow-y: auto;
  max-height: min(16vh, 80px);
}
.ext-sb-wb-pick-chip {
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.66rem;
  background: transparent;
  cursor: pointer;
}
.ext-sb-wb-pick-empty {
  margin: 0;
  font-size: 0.64rem;
  color: var(--text-sub);
}
.ext-sb-wb-search {
  font-size: 0.68rem;
}

.chat-detail-proactive-interval {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-top: 2px;
}
.chat-detail-proactive-interval__modes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-detail-proactive-interval__modes > .chat-detail-field-k--label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sub);
}
.chat-detail-proactive-interval__chiprow.chat-detail-chipbox {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.chat-detail-proactive-interval__chiprow .chat-detail-chip {
  width: 100%;
  justify-content: center;
  border-radius: 10px;
  padding: 9px 8px;
}
.chat-detail-proactive-interval__custom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.05);
}
body.dark .chat-detail-proactive-interval__custom {
  background: rgba(255, 255, 255, 0.04);
}
.chat-detail-proactive-interval__custom[hidden] {
  display: none !important;
}
.chat-detail-proactive-interval__custom > label.chat-detail-field-k--label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}
.chat-detail-proactive-interval__custom > .chat-detail-memory-rounds-input {
  flex: 1 1 4rem;
  min-width: 3.25rem;
  max-width: 6.5rem;
  margin: 0;
}
.chat-detail-proactive-interval__custom > .chip {
  flex-shrink: 0;
  margin: 0 0 0 auto;
}

.chat-detail-chipbox {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chat-detail-chip {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(242, 242, 247, 0.92);
  color: rgba(0, 0, 0, 0.72);
  border-radius: 999px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
body.dark .chat-detail-chip {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.84);
}
.chat-detail-chip.is-active {
  background: #111;
  border-color: #111;
  color: #fff;
}
body.dark .chat-detail-chip.is-active {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: #101113;
}
.chat-detail-chip:active { transform: scale(0.98); }
.chat-detail-chip:focus-visible { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.22); }

.chat-detail-lead {
  margin: 0 0 10px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-sub);
}
.chat-detail-readonly {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-main);
  word-break: break-word;
}
.chat-detail-readonly--scene {
  max-height: 6.5em;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.04);
}
.chat-detail-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  cursor: default;
  font-size: 0.76rem;
  color: var(--text-main);
}
.chat-detail-toggle-row:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}
.chat-detail-toggle-k {
  color: var(--text-sub);
  font-size: 0.72rem;
}
.chat-detail-toggle {
  width: 18px;
  height: 18px;
  accent-color: var(--text-main);
  flex-shrink: 0;
  opacity: 0.45;
}

.chat-detail-switch {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(var(--tint-rgb), 0.16);
  background: rgba(var(--tint-rgb), 0.1);
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-detail-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translate(0, -50%);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.chat-detail-switch[aria-pressed="true"] {
  background: var(--accent);
  border-color: rgba(var(--tint-rgb), 0.12);
  box-shadow: none;
}

.chat-detail-switch[aria-pressed="true"]::after {
  transform: translate(20px, -50%);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* 未满足前置条件时弱化显示；不设原生 disabled，避免 pointer-events:none 导致无法点出「请先设图」提示 */
.chat-detail-switch[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
}

.chat-detail-switch:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.22);
}

.chat-detail-switch:active {
  filter: brightness(0.94);
}
body.dark .chat-detail-switch:active {
  filter: brightness(1.06);
}

body.dark .chat-detail-switch::after {
  background: #f7f8fb;
  border-color: rgba(0, 0, 0, 0.22);
}
.chat-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 大卡圆角 + overflow:hidden 时，直铺文案会贴弧边、笔画像被圆角「吃掉」；仅给无 API 条带内边距的面板加安全区（不改外层桌面 .stage / .phone 布局） */
.char-screen .settings-panel:not(.settings-panel-api) {
  padding: 14px 16px 16px;
}
.char-screen .settings-panel:not(.settings-panel-api) > .char-avatar-block {
  padding-left: 0;
  padding-right: 0;
  padding-top: 10px;
  padding-bottom: 12px;
}

.chat-main,
.chat-list-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.chat-main::before,
.chat-list-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -8deg,
    transparent,
    transparent 31px,
    rgba(0, 0, 0, 0.018) 31px,
    rgba(0, 0, 0, 0.018) 32px
  );
}
body.dark .chat-main::before,
body.dark .chat-list-main::before {
  background: repeating-linear-gradient(
    -8deg,
    transparent,
    transparent 31px,
    rgba(255, 255, 255, 0.02) 31px,
    rgba(255, 255, 255, 0.02) 32px
  );
}
.chat-list-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.chat-list-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.chat-list-below-mask {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
}
.chat-list-inbox-tabs {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
  margin-bottom: 14px;
}
.chat-feature-soon {
  opacity: 0.5;
  cursor: default;
}
body.dark .chat-feature-soon {
  opacity: 0.42;
}
.chat-list-inbox-tabs .chat-list-inbox-tab {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chat-list-inbox-tabs .chat-list-inbox-tab.is-active {
  border-color: transparent;
  background: var(--text-main);
  color: var(--bg-device);
}
.chat-list-inbox-tabs .chat-list-inbox-tab:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 2px;
}
.chat-list-tab-panels {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.chat-list-tab-panel {
  display: none;
}
.chat-list-tab-panel.is-active {
  display: flex;
  flex-direction: column;
}
.chat-list-section {
  margin-top: 0;
  padding-top: 0;
}
.chat-list-section .settings-sec-head {
  margin-bottom: 8px;
}
.chat-list-sec-head {
  align-items: center;
}
.chat-thread-add-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}
.chat-thread-add-btn {
  flex-shrink: 0;
}
.chat-thread-add-btn--group {
  padding-left: 9px;
  padding-right: 9px;
}
.chat-thread-add-btn--group i {
  font-size: 1rem;
  vertical-align: -0.12em;
}
.chat-thread-list-root {
  margin-top: 2px;
  min-height: 0;
}
.chat-thread-empty-all {
  margin: 4px 2px 0;
}
.chat-thread-subview {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 4px;
}
.chat-list-pane--threads .chat-thread-subview {
  flex: 1;
  min-height: 0;
}
.chat-thread-subview .chat-thread-kind-tabs {
  margin-bottom: 12px;
  justify-content: center;
  gap: 16px;
}
.chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab {
  position: relative;
  flex: 0 1 auto;
  min-width: 5.4em;
  padding: 8px 18px 9px;
  border-radius: 3px 6px 4px 5px / 5px 3px 6px 4px;
  border: 1px solid rgba(188, 195, 208, 0.48);
  background: linear-gradient(152deg, rgba(255, 255, 255, 0.68), rgba(232, 236, 242, 0.52));
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: var(--text-sub);
  font-size: 0.48rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab#chat-thread-kind-dm {
  transform: rotate(-2.1deg);
}
.chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab#chat-thread-kind-group {
  transform: rotate(1.85deg);
}
.chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab:hover {
  border-color: rgba(188, 195, 208, 0.62);
  color: var(--text-main);
}
.chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab.is-active {
  border-color: rgba(188, 195, 208, 0.58);
  background: linear-gradient(146deg, rgba(255, 255, 255, 0.9), rgba(238, 242, 248, 0.76));
  color: var(--text-main);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab.is-active::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 3px;
  height: 2px;
  border-radius: 1px;
  opacity: 0.88;
  pointer-events: none;
}
.chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab#chat-thread-kind-dm.is-active::before {
  background: rgba(var(--tint-rgb), 0.58);
}
.chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab#chat-thread-kind-group.is-active::before {
  background: rgba(var(--blush-rgb), 0.55);
}
body.dark .chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab {
  border-color: #464b54;
  background: linear-gradient(148deg, #3c404a, #2f333a);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-sub);
}
body.dark .chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab.is-active {
  border-color: #525865;
  background: linear-gradient(148deg, #454a55, #363a42);
  color: var(--text-main);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab#chat-thread-kind-dm,
  .chat-thread-kind-tabs.chat-list-inbox-tabs .chat-thread-kind-tab#chat-thread-kind-group {
    transform: none;
  }
}
.chat-thread-kind-panel {
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
  overflow: auto;
}
.chat-thread-kind-panel.is-active {
  display: flex;
}
.chat-thread-kind-panel[hidden] {
  display: none !important;
}
.chat-thread-kind-panel .chat-thread-list {
  padding: 2px 22px 8px 12px;
}
.chat-thread-li--col-empty {
  list-style: none;
}
.chat-thread-column-empty-hint {
  margin: 0 2px 2px;
  padding: 12px 10px;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-sub);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(var(--tint-rgb), 0.03);
}
.chat-thread-card--group .chat-thread-slab.chat-slab {
  background:
    linear-gradient(118deg, rgba(var(--blush-rgb), 0.09) 0%, transparent 44%),
    linear-gradient(168deg, rgba(var(--tint-rgb), 0.07) 0%, transparent 46%),
    linear-gradient(95deg, rgba(var(--blush-rgb), 0.07) 0%, transparent 32%),
    var(--bg-card);
}
body.dark .chat-thread-card--group .chat-thread-slab.chat-slab {
  background:
    linear-gradient(118deg, rgba(var(--blush-rgb), 0.11) 0%, transparent 44%),
    linear-gradient(168deg, rgba(var(--tint-rgb), 0.1) 0%, transparent 48%),
    linear-gradient(95deg, rgba(var(--blush-rgb), 0.06) 0%, transparent 30%),
    var(--bg-card);
}
.chat-list-hint strong {
  font-weight: 600;
}
.chat-list-hint--solo {
  margin: 8px 2px 10px 8px;
  padding: 14px 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.45;
}
#moments-items-root {
  min-height: 12px;
}
/* [hidden] 的 display:none 会被作者样式里的 display:flex 盖掉，导致遮罩关不掉、像每次进聊天都弹层 */
.chat-char-pick-sheet[hidden] {
  display: none !important;
}
.chat-char-pick-sheet:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  pointer-events: auto;
}
.chat-char-pick-sheet-bg {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(15, 15, 18, 0.38);
  cursor: pointer;
}
body.dark .chat-char-pick-sheet-bg {
  background: rgba(0, 0, 0, 0.55);
}
.chat-char-pick-panel {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  max-height: 72vh;
  overflow: auto;
  padding: 18px 16px 16px;
  border-radius: 18px 18px 12px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
}
.chat-char-pick-title {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-main);
}
.chat-char-pick-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-char-pick-item {
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-body);
  color: var(--text-main);
  font-size: 0.78rem;
  cursor: pointer;
}
.chat-char-pick-item:hover,
.chat-char-pick-item:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.chat-char-pick-empty {
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.45;
  padding: 8px 4px 12px;
}
.chat-char-pick-item--opening {
  white-space: normal;
  line-height: 1.4;
  font-size: 0.72rem;
}
.chat-char-pick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

/* 发动态弹窗 */
.moments-compose-sheet[hidden] {
  display: none !important;
}
.moments-compose-sheet:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 53;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.moments-compose-bg {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(15, 15, 18, 0.48);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
body.dark .moments-compose-bg {
  background: rgba(0, 0, 0, 0.62);
}
.moments-compose-panel {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(var(--tint-rgb), 0.22);
  background: var(--bg-card);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(var(--blush-rgb), 0.08) inset;
}
.moments-compose-accent {
  height: 3px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--tint-rgb), 0.15),
    rgba(var(--tint-rgb), 0.75) 35%,
    rgba(var(--blush-rgb), 0.7) 70%,
    rgba(var(--tint-rgb), 0.2)
  );
}
.moments-compose-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
}
.moments-compose-head-main {
  position: relative;
  min-width: 0;
  padding-left: 6px;
}
.moments-compose-tape {
  position: absolute;
  left: -2px;
  top: -4px;
  width: 26px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(var(--blush-rgb), 0.55), rgba(var(--tint-rgb), 0.35));
  transform: rotate(-8deg);
  opacity: 0.85;
}
.moments-compose-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--text-main);
}
.moments-compose-sub {
  margin: 5px 0 0;
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--text-sub);
}
.moments-compose-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(var(--tint-rgb), 0.08);
  color: var(--text-sub);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.moments-compose-close:hover,
.moments-compose-close:focus-visible {
  background: rgba(var(--tint-rgb), 0.14);
  color: var(--text-main);
  outline: none;
}
.moments-compose-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 16px 14px;
}
.moments-compose-text {
  width: 100%;
  min-height: 120px;
  max-height: 200px;
  resize: vertical;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--tint-rgb), 0.2);
  background: rgba(var(--tint-rgb), 0.05);
  color: var(--text-main);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.58;
  outline: none;
  box-sizing: border-box;
}
body.dark .moments-compose-text {
  background: rgba(var(--tint-rgb), 0.09);
  border-color: rgba(var(--tint-rgb), 0.26);
}
.moments-compose-text::placeholder {
  color: var(--text-sub);
  opacity: 0.75;
}
.moments-compose-text:focus {
  border-color: rgba(var(--tint-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.12);
}
.moments-compose-media {
  margin-top: 14px;
}
.moments-compose-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}
.moments-compose-media-k {
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.moments-compose-media-count {
  font-size: 0.62rem;
  color: var(--text-sub);
}
.moments-compose-previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.moments-compose-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(var(--tint-rgb), 0.06);
}
.moments-compose-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.moments-compose-thumb--broken {
  background: rgba(var(--tint-rgb), 0.12);
}
.moments-compose-thumb--broken img {
  opacity: 0.35;
}
.moments-compose-thumb-rm {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
}
.moments-compose-thumb-rm:hover,
.moments-compose-thumb-rm:focus-visible {
  background: rgba(0, 0, 0, 0.72);
  outline: none;
}
.moments-compose-thumb--add {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.04);
  color: var(--text-sub);
  font-size: 1.5rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.moments-compose-thumb--add:hover,
.moments-compose-thumb--add:focus-visible {
  border-color: rgba(var(--tint-rgb), 0.55);
  background: rgba(var(--tint-rgb), 0.1);
  color: var(--accent);
  outline: none;
}
.moments-compose-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.12);
  background: linear-gradient(180deg, transparent, rgba(var(--tint-rgb), 0.05));
}
.moments-compose-pick {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--tint-rgb), 0.22);
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--text-main);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.moments-compose-pick:hover,
.moments-compose-pick:focus-visible {
  border-color: rgba(var(--tint-rgb), 0.4);
  background: rgba(var(--tint-rgb), 0.11);
  outline: none;
}
.moments-compose-pick i {
  font-size: 1.15rem;
  opacity: 0.85;
}
.moments-compose-submit {
  flex-shrink: 0;
  min-width: 88px;
  min-height: 42px;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(var(--tint-rgb), 0.92), rgba(var(--blush-rgb), 0.75));
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--tint-rgb), 0.28);
  transition:
    transform 0.12s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}
.moments-compose-submit:hover:not(:disabled),
.moments-compose-submit:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(var(--tint-rgb), 0.34);
  outline: none;
}
.moments-compose-submit:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

/* 朋友圈图片全屏预览 */
.moments-gallery[hidden] {
  display: none !important;
}
.moments-gallery:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.moments-gallery-bg {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(10px);
}
body.dark .moments-gallery-bg {
  background: rgba(0, 0, 0, 0.7);
}
.moments-gallery-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  height: min(76vh, 680px);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(var(--blush-rgb), 0.16), transparent 58%),
    radial-gradient(860px 520px at 90% 22%, rgba(var(--tint-rgb), 0.14), transparent 58%),
    rgba(18, 18, 22, 0.75);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}
.moments-gallery-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
}
.moments-gallery-meta {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.moments-gallery-stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 48px 18px 18px;
}
.moments-gallery-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  transform: translateZ(0);
}
.moments-gallery-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}
.moments-gallery-nav-btn {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, opacity 0.14s ease;
}
.moments-gallery-nav-btn:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.45);
}
.moments-gallery-nav-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.moments-gallery-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 14px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
}

/* 朋友圈 · IG 布局 × 小心机（底部导航见 .chat-list-dock） */
/* 密谈列表 · 顶部分栏（图标保留，横排 + 底边指示） */
.chat-list-dock {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background: var(--bg-device);
  border-bottom: 1px solid var(--line);
}
.chat-list-dock-tabs {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0 14px;
  background: transparent;
}
.chat-list-dock-tab {
  position: relative;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 12px 10px 11px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: transparent;
  color: var(--text-sub);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.chat-list-dock-tab i {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.chat-list-dock-label {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1.2;
}
.chat-list-dock-tab:hover {
  color: var(--text-main);
}
.chat-list-dock-tab.is-active {
  color: var(--text-main);
  border-bottom-color: var(--text-main);
}
.chat-list-dock-tab:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.4);
  outline-offset: -2px;
}
.chat-list-main .chat-list-scroll {
  flex: 1;
  min-height: 0;
  padding-bottom: 20px;
}

/* 朋友圈 · IG 布局 × 小心机配色 */
.chat-list-pane--moments {
  position: relative;
  padding-top: 0;
  background: transparent !important;
}
.chat-list-pane--moments .settings-sec-head {
  display: none;
}
.moments-feed.moments-ins {
  position: relative;
  padding: 0 0 16px;
  color: var(--text-main);
}
.moments-ins-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px 12px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, var(--bg-card) 72%, transparent);
}
.moments-ins-topbar-user {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  position: relative;
}
.moments-ins-topbar-tape {
  position: absolute;
  left: -4px;
  top: -6px;
  width: 28px;
  height: 10px;
  transform: rotate(-4deg);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(232, 236, 242, 0.7));
  border: 1px solid rgba(188, 195, 208, 0.4);
  pointer-events: none;
}
body.dark .moments-ins-topbar-tape {
  background: #3a3f48;
  border-color: #4a505a;
}
.moments-ins-topbar-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.moments-ins-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.moments-char-post-hint {
  margin: 0 0 12px;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-sub);
}
.moments-ins-topbar-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: rgba(var(--tint-rgb), 0.1);
  color: var(--text-main);
  cursor: pointer;
}
.moments-ins-topbar-btn:hover {
  background: rgba(var(--tint-rgb), 0.16);
}
.moments-ins-profile {
  padding: 0 6px 14px;
}
.moments-ins-profile-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}
.moments-ins-avatar {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-sub);
  background: linear-gradient(145deg, rgba(var(--tint-rgb), 0.2), rgba(var(--blush-rgb), 0.14));
  box-shadow:
    0 0 0 3px var(--bg-card),
    0 0 0 4px rgba(var(--tint-rgb), 0.22),
    0 6px 20px rgba(var(--tint-rgb), 0.14);
}
.moments-ins-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moments-ins-stat-summary {
  flex: 1;
  margin: 0;
  align-self: center;
  font-size: 0.72rem;
  color: var(--text-sub);
  letter-spacing: 0.02em;
}
.moments-ins-stat-summary strong {
  font-size: 1rem;
  font-weight: 750;
  color: var(--text);
  margin: 0 2px;
}
.moments-ins-bio {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.moments-ins-bio:hover,
.moments-ins-bio:focus-visible {
  background: rgba(var(--tint-rgb), 0.06);
  outline: none;
}
.moments-ins-bio-name {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 700;
  pointer-events: none;
}
.moments-ins-bio-line {
  margin: 0 0 3px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-sub);
  pointer-events: none;
}
.moments-ins-bio-line--hint {
  font-style: italic;
  opacity: 0.85;
}
.moments-ins-decor {
  padding: 0 6px 14px;
}
.moments-ins-decor-k {
  margin: 0 0 8px 2px;
  font-family: "Space Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.moments-ins-decor-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.moments-ins-decor-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: 1px dashed rgba(var(--tint-rgb), 0.28);
  border-radius: 10px;
  background: rgba(var(--tint-rgb), 0.04);
  color: var(--text-sub);
  font-size: 1.35rem;
  cursor: pointer;
  overflow: hidden;
}
.moments-ins-decor-slot.has-image {
  border-style: solid;
  border-color: rgba(var(--tint-rgb), 0.16);
}
.moments-ins-decor-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.moments-items-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* 朋友圈动态 · Instagram 帖子布局 */
.moments-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.moments-timeline[hidden] {
  display: none !important;
}
.moments-timeline .moments-post {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--card, #fff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.dark .moments-timeline .moments-post {
  background: var(--card, #121212);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.moments-timeline .moments-post:last-child {
  border-bottom: none;
}
.moments-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 6px;
  min-height: 44px;
  position: relative;
}
.moments-post-more-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}
.moments-post-more-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-sub);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.moments-post-more-btn:hover,
.moments-post-more-btn:focus-visible {
  background: rgba(var(--tint-rgb), 0.08);
  color: var(--text-main);
  outline: none;
}
.moments-post-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 12;
  min-width: 7.5rem;
}
.moments-post-more-menu[hidden] {
  display: none !important;
}
.moments-post-av {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 0.58rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
}
.moments-post--user .moments-post-av {
  background: rgba(var(--blush-rgb), 0.2);
  color: rgba(var(--blush-rgb), 0.95);
}
.moments-post-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.moments-post-user-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
}
.moments-post-user {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moments-post-thread-remark {
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moments-post-media {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0;
  background: #000;
}
.moments-post-media--1 {
  grid-template-columns: 1fr;
}
.moments-post-media--desc-only {
  background: transparent;
}
.moments-post-media--few {
  grid-template-columns: repeat(2, 1fr);
}
.moments-post-media--many {
  grid-template-columns: repeat(3, 1fr);
}
.moments-post-media .moments-media {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #111;
  cursor: pointer;
}
.moments-post-media--1 .moments-media {
  aspect-ratio: 1 / 1;
  max-height: none;
}
.moments-post-media .moments-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.moments-post-media .moments-media--desc-card {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  padding: 10px 12px 14px;
  background: transparent;
  cursor: default;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.moments-post-media--1 .moments-media--desc-card {
  justify-content: flex-start;
  padding: 12px 12px 14px;
}
.moments-post-media .moments-media--desc-card .chat-photo-polaroid {
  width: 100%;
  max-width: min(100%, 280px);
  margin: 0;
  box-sizing: border-box;
}
.moments-post-body {
  padding: 4px 12px 10px;
}
.moments-post--no-media .moments-post-body {
  padding-top: 2px;
}
.moments-post-caption {
  margin: 0 0 8px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-main);
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.moments-post--no-media .moments-post-caption {
  margin-top: 0;
}
.moments-post-caption + .moments-post-actions {
  margin-top: 0;
}
.moments-post-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0 0 6px;
}
.moments-post--no-media .moments-post-actions {
  padding-top: 0;
}
.moments-post-act {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-main);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.moments-post-act i {
  font-size: 1.125rem;
  line-height: 1;
}
.moments-post-act:hover,
.moments-post-act:focus-visible {
  opacity: 0.65;
  outline: none;
}
.moments-post-act.is-liked,
.moments-post-act.is-liked i {
  color: #ed4956;
}
.moments-post-likes {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-main);
}
.moments-post-caption-user {
  font-weight: 600;
  margin-right: 0.35em;
}
.moments-post-caption-text {
  font-weight: 400;
}
.moments-post-cmts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}
.moments-post-cmt {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.42;
  color: var(--text-main);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.moments-post-cmt-text {
  font-weight: 400;
  color: var(--text-sub);
  white-space: pre-wrap;
}
.moments-post-cmt-user {
  font-weight: 600;
  margin-right: 0.35em;
}
.moments-post-cmt-at {
  font-weight: 600;
}
.moments-post-cmt-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 10px;
  flex-shrink: 0;
  vertical-align: baseline;
}
.moments-post-cmt-reply,
.moments-post-cmt-del {
  margin: 0;
  padding: 6px 4px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.moments-post-cmt-reply:hover,
.moments-post-cmt-reply:focus-visible {
  color: var(--text-main);
  outline: none;
}
.moments-post-cmt-del:hover,
.moments-post-cmt-del:focus-visible {
  color: var(--danger, #b42318);
  outline: none;
}
body.dark .moments-post-cmt-del:hover,
body.dark .moments-post-cmt-del:focus-visible {
  color: #f87171;
}
.moments-post-time {
  display: block;
  margin: 0 0 4px;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.moments-post-composer {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.1);
}
.moments-post-composer.is-open {
  display: flex;
}
.moments-post-composer-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-main);
  padding: 4px 0;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.35;
  outline: none;
}
.moments-post-composer-input::placeholder {
  color: var(--text-sub);
  opacity: 0.7;
}
.moments-post-composer-post {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 4px 0;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0095f6;
  cursor: pointer;
}
.moments-post-composer-post:disabled {
  opacity: 0.35;
  cursor: default;
}
body.dark .moments-post-composer-post {
  color: #71b8ff;
}
.moments-post-composer-post:hover:not(:disabled),
.moments-post-composer-post:focus-visible:not(:disabled) {
  opacity: 0.8;
  outline: none;
}

.moments-feed.moments-ins .moments-feed-empty {
  margin: 12px 4px 20px;
  padding: 28px 18px;
  text-align: center;
  border-radius: 18px;
  border: 1px dashed rgba(var(--tint-rgb), 0.28);
  background: linear-gradient(
      155deg,
      rgba(var(--blush-rgb), 0.1) 0%,
      transparent 45%
    ),
    var(--bg-card);
  box-shadow: var(--shadow-card);
}
.moments-feed.moments-ins .moments-feed-empty-title {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 650;
}
.moments-feed.moments-ins .moments-feed-empty-desc {
  margin: 0 auto;
  max-width: 20em;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-sub);
}
.chat-list-hint {
  font-size: 0.68rem;
  line-height: 1.55;
  color: var(--text-sub);
  margin: 0 0 16px 2px;
  max-width: 34em;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(var(--tint-rgb), 0.22);
  background: linear-gradient(
    135deg,
    rgba(var(--tint-rgb), 0.06) 0%,
    transparent 48%,
    rgba(var(--blush-rgb), 0.05) 100%
  );
}
body.dark .chat-list-hint {
  border-color: rgba(var(--tint-rgb), 0.28);
  background: linear-gradient(
    135deg,
    rgba(var(--tint-rgb), 0.1) 0%,
    transparent 50%,
    rgba(var(--blush-rgb), 0.06) 100%
  );
}
.chat-list-mask-deck {
  margin-bottom: 14px;
}
.chat-list-mask-compact {
  min-width: 0;
  padding: 10px 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.04);
  box-shadow: var(--shadow-card);
}
.chat-list-mask-deck.is-collapsed .chat-list-mask-compact {
  padding-bottom: 10px;
}
body.dark .chat-list-mask-compact {
  background: rgba(var(--tint-rgb), 0.07);
}
.chat-list-mask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}
.chat-list-mask-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 4px 6px 4px 2px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.chat-list-mask-toggle:hover {
  background: rgba(var(--tint-rgb), 0.07);
}
body.dark .chat-list-mask-toggle:hover {
  background: rgba(var(--tint-rgb), 0.1);
}
.chat-list-mask-toggle-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.chat-list-mask-toggle .widget-label {
  margin: 0;
}
.chat-list-mask-summary {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.chat-list-mask-toggle-icon {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--text-sub);
  opacity: 0.75;
  transition: transform 0.22s ease;
}
.chat-list-mask-deck:not(.is-collapsed) .chat-list-mask-toggle-icon {
  transform: rotate(180deg);
}
.chat-list-mask-slots-wrap {
  overflow: hidden;
  max-height: 200px;
  opacity: 1;
  margin-top: 10px;
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    margin-top 0.22s ease;
}
.chat-list-mask-deck.is-collapsed .chat-list-mask-slots-wrap {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .chat-list-mask-slots-wrap,
  .chat-list-mask-toggle-icon {
    transition: none;
  }
}
.chat-list-mask-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.chat-list-pulse {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-device);
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.chat-list-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
  animation: chat-live-pulse 2.2s ease-out infinite;
}
.chat-list-pulse-txt {
  font-size: 0.38rem;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.chat-list-mask-slots {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.chat-list-mask-slots::-webkit-scrollbar {
  height: 5px;
}
.chat-list-mask-slots::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--tint-rgb), 0.32);
}
.chat-list-mask-slots--bare {
  justify-content: center;
  overflow-x: visible;
  min-height: 44px;
  align-items: center;
}
.chat-list-mask-empty {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-sub);
  font-style: italic;
  text-align: center;
}
.chat-list-mask-pick {
  flex: 0 0 auto;
  width: 92px;
  min-width: 72px;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 9px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.chat-list-mask-pick:hover {
  border-color: rgba(var(--tint-rgb), 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.chat-list-mask-pick.is-active {
  border-color: var(--text-main);
  box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.12);
  background: rgba(var(--tint-rgb), 0.06);
}
body.dark .chat-list-mask-pick.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.2);
}
.chat-list-mask-pick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-list-mask-pick-av {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-device);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent);
}
.chat-list-mask-pick-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-list-mask-pick-name {
  width: 100%;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.chat-list-mask-pick.is-active .chat-list-mask-pick-name {
  color: var(--text-main);
}
.chat-list-mask-edit {
  flex-shrink: 0;
}
.chat-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-thread-li--load-more {
  transform: none;
  display: flex;
  justify-content: center;
  padding: 2px 0 4px;
}
.chat-thread-load-more {
  appearance: none;
  border: 1px dashed rgba(var(--tint-rgb), 0.28);
  background: rgba(var(--tint-rgb), 0.04);
  color: var(--text-sub);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
}
.chat-thread-load-more:hover {
  background: rgba(var(--tint-rgb), 0.08);
  color: var(--text-main);
}
.chat-thread-load-more:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 2px;
}
body.dark .chat-thread-load-more {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
body.dark .chat-thread-load-more:hover {
  background: rgba(255, 255, 255, 0.08);
}
.chat-thread-li {
  position: relative;
  margin: 0;
  transform-origin: 50% 0;
}
/* 右侧珠子：点开菜单（置顶 / 删除），不占卡片主布局 */
.chat-thread-bead-wrap {
  position: absolute;
  top: 50%;
  right: -2px;
  z-index: 8;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
  pointer-events: none;
}
.chat-thread-bead-wrap .chat-thread-bead,
.chat-thread-bead-wrap .chat-thread-bead-menu {
  pointer-events: auto;
}
.chat-thread-bead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 42px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 235, 240, 0.75));
  box-shadow:
    0 0 0 1px rgba(200, 206, 216, 0.45),
    -2px 0 10px rgba(0, 0, 0, 0.06);
  opacity: 0.55;
  transition: opacity 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
body.dark .chat-thread-bead {
  background: linear-gradient(180deg, rgba(58, 60, 66, 0.95), rgba(40, 42, 48, 0.88));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    -2px 0 12px rgba(0, 0, 0, 0.35);
  opacity: 0.5;
}
.chat-thread-bead-grip {
  display: block;
  width: 3px;
  height: 16px;
  margin: 0;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(var(--tint-rgb), 0.35),
    rgba(var(--blush-rgb), 0.25),
    rgba(var(--tint-rgb), 0.3)
  );
  opacity: 0.85;
}
.chat-thread-li:hover .chat-thread-bead,
.chat-thread-bead:hover,
.chat-thread-bead:focus-visible,
.chat-thread-li.is-bead-open .chat-thread-bead {
  opacity: 1;
}
.chat-thread-bead:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 2px;
}
.chat-thread-bead:active {
  transform: scale(0.94);
}
.chat-thread-bead-menu {
  position: relative;
  z-index: 10;
  min-width: 5.75rem;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-float);
}
body.dark .chat-thread-bead-menu {
  border-color: var(--glass-border);
}
.chat-thread-bead-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.chat-thread-bead-menu-item:hover,
.chat-thread-bead-menu-item:focus-visible {
  background: rgba(var(--tint-rgb), 0.08);
}
.chat-thread-bead-menu-item--danger {
  color: #a82a22;
}
body.dark .chat-thread-bead-menu-item--danger {
  color: #e8938c;
}
.chat-thread-bead-menu-item--danger:hover,
.chat-thread-bead-menu-item--danger:focus-visible {
  background: rgba(180, 35, 24, 0.08);
}
@media (hover: none) {
  .chat-thread-bead {
    opacity: 0.72;
  }
}
.chat-thread-li--tilt-a .chat-thread-shell {
  transform: rotate(-0.5deg);
}
.chat-thread-li--tilt-b .chat-thread-shell {
  transform: rotate(0.55deg);
}
.chat-thread-shell {
  position: relative;
  padding-top: 10px;
  transform-origin: 50% 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform 0.2s ease;
}
body.dark .chat-thread-shell {
  background: transparent;
  box-shadow: none;
}
.chat-thread-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 46px;
  height: 14px;
  margin-left: -23px;
  pointer-events: none;
  border-radius: 2px;
  transform: rotate(-2.2deg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(232, 236, 242, 0.72));
  border: 1px solid rgba(188, 195, 208, 0.42);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}
body.dark .chat-thread-shell::before {
  background: #353942;
  border-color: #3d4249;
  box-shadow: none;
}
.chat-thread-card {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  box-shadow: none;
}
.chat-thread-card:focus-visible {
  outline: none;
}
.chat-thread-card:focus-visible .chat-thread-slab.chat-slab {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 3px;
}
.chat-thread-card:hover .chat-thread-slab.chat-slab,
.chat-thread-card:focus-visible .chat-thread-slab.chat-slab {
  border-color: rgba(var(--tint-rgb), 0.32);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
body.dark .chat-thread-card:hover .chat-thread-slab.chat-slab,
body.dark .chat-thread-card:focus-visible .chat-thread-slab.chat-slab {
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.chat-thread-card:active .chat-thread-slab.chat-slab {
  transform: translateY(0);
}
.chat-thread-slab.chat-slab {
  position: relative;
  z-index: 0;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 13px 12px;
  border-radius: 17px 22px 15px 21px;
  border: 1px solid var(--line);
  background:
    linear-gradient(168deg, rgba(var(--tint-rgb), 0.07) 0%, transparent 46%),
    linear-gradient(95deg, rgba(var(--blush-rgb), 0.06) 0%, transparent 32%),
    var(--bg-card);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
body.dark .chat-thread-slab.chat-slab {
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.chat-thread-slab.chat-slab::before,
.chat-thread-slab.chat-slab::after {
  content: "";
  position: absolute;
  left: 30px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg-body);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  z-index: 0;
}
.chat-thread-slab.chat-slab::before {
  top: 17px;
}
.chat-thread-slab.chat-slab::after {
  bottom: 14px;
}
.chat-thread-slab .chat-slab-stack {
  position: relative;
  z-index: 1;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.chat-thread-slab .chat-slab-spine {
  position: relative;
  z-index: 1;
  width: 24px;
  flex-shrink: 0;
  gap: 5px;
  padding-top: 4px;
  align-items: center;
}
.chat-thread-slab .chat-slab-spine-line {
  height: 22px;
  width: 2px;
  border-radius: 2px;
  background: rgba(var(--tint-rgb), 0.28);
  box-shadow: none;
  opacity: 1;
}
.chat-thread-card--group .chat-thread-slab .chat-slab-spine-line {
  background: rgba(var(--blush-rgb), 0.42);
}
.chat-thread-slab .chat-slab-spine-idx {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
  font-family: "Space Mono", monospace;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-sub);
  opacity: 0.88;
  font-variant-numeric: tabular-nums;
}
.chat-thread-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0 18px 0 0;
}
.chat-thread-top .chat-list-pulse {
  padding: 2px 7px;
  gap: 4px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-sub);
  background: rgba(var(--tint-rgb), 0.05);
}
body.dark .chat-thread-top .chat-list-pulse {
  background: rgba(var(--tint-rgb), 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}
.chat-thread-top .chat-thread-stamp {
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.88;
}
.chat-thread-slab .chat-slab-mat {
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}
.chat-thread-slab .chat-slab-tape {
  display: none;
}
.chat-thread-slab .chat-slab-panel.chat-thread-panel {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 4px 0 2px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.chat-thread-slab .chat-slab-panel.chat-thread-panel::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.55),
    rgba(var(--blush-rgb), 0.5) 42%,
    rgba(var(--blush-rgb), 0.28)
  );
  border: 1px solid rgba(var(--blush-rgb), 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.dark .chat-thread-slab .chat-slab-panel.chat-thread-panel::after {
  box-shadow: none;
  border-color: rgba(var(--blush-rgb), 0.38);
}
.chat-thread-card--group .chat-thread-slab .chat-slab-panel.chat-thread-panel::after {
  opacity: 1;
}
.chat-thread-slab .chat-corner-stamp {
  display: none;
}
.chat-thread-card-k {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--blush-rgb), 0.88);
  margin: 0 0 2px;
  padding: 0;
  border: none;
  opacity: 0.92;
}
.chat-thread-card-name {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--text-main);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-thread-card-snippet {
  font-family: "Space Mono", monospace;
  font-size: 0.42rem;
  letter-spacing: 0.06em;
  text-transform: none;
  line-height: 1.45;
  font-weight: 400;
  color: var(--text-sub);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.88;
}
.chat-thread-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1px;
  padding-top: 6px;
  border-top: 1px dashed rgba(var(--tint-rgb), 0.2);
}
body.dark .chat-thread-card-meta {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.chat-thread-card-meta time {
  font-family: "Space Mono", monospace;
  font-style: normal;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}
.chat-thread-card-count {
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-sub);
  background: rgba(var(--tint-rgb), 0.05);
}
.chat-thread-top .chat-list-pulse-txt {
  font-size: 0.4rem;
  letter-spacing: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
  .chat-thread-li--tilt-a .chat-thread-shell,
  .chat-thread-li--tilt-b .chat-thread-shell {
    transform: none;
  }
  .chat-thread-card:hover .chat-thread-slab.chat-slab,
  .chat-thread-card:focus-visible .chat-thread-slab.chat-slab {
    transform: none;
  }
}
.chat-filmgrain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
body.dark .chat-filmgrain {
  mix-blend-mode: screen;
  opacity: 0.07;
}

/* —— 单聊「线下」晤页：每条消息一大卡包住整段气泡栈（多段对白同在一框） —— */
#chat-offline-screen.chat-offline-screen {
  --f2f-rule: rgba(var(--tint-rgb), 0.1);
  --f2f-diary-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --f2f-prose-max: min(100%, 56rem);
  --f2f-composer-max: var(--f2f-prose-max);
  --f2f-card-user: #fff;
  --f2f-card-peer: #fff;
  --f2f-card-border: rgba(18, 22, 36, 0.08);
  --f2f-card-narr: rgba(255, 255, 255, 0.72);
  --f2f-diary-shadow: 0 6px 28px rgba(18, 22, 36, 0.07);
  --f2f-diary-head-bg: rgba(255, 255, 255, 0.42);
  --f2f-comp-surface: rgba(255, 255, 255, 0.94);
  --f2f-comp-border: rgba(22, 20, 38, 0.085);
  --f2f-comp-inner-line: rgba(22, 20, 38, 0.055);
  --f2f-comp-ghost: rgba(var(--tint-rgb), 0.09);
  background: var(--bg-device);
  color: var(--text-main);
}
#chat-offline-screen.chat-offline-screen ::selection {
  background: rgba(var(--tint-rgb), 0.22);
}
body.dark #chat-offline-screen.chat-offline-screen ::selection {
  background: rgba(var(--tint-rgb), 0.38);
}
body.dark #chat-offline-screen.chat-offline-screen {
  --f2f-rule: rgba(255, 255, 255, 0.11);
  --f2f-card-user: rgba(42, 40, 48, 0.96);
  --f2f-card-peer: rgba(42, 40, 48, 0.96);
  --f2f-card-border: rgba(255, 255, 255, 0.1);
  --f2f-card-narr: rgba(46, 44, 52, 0.78);
  --f2f-diary-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  --f2f-diary-head-bg: rgba(38, 36, 44, 0.55);
  --f2f-comp-surface: rgba(38, 36, 44, 0.94);
  --f2f-comp-border: rgba(255, 255, 255, 0.1);
  --f2f-comp-inner-line: rgba(255, 255, 255, 0.07);
  --f2f-comp-ghost: rgba(255, 255, 255, 0.08);
}
#chat-offline-screen .chat-offline-inner {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* 心声 / 历史心声：挂在线下屏 #chat-offline-screen 根上（与 .settings-inner 平级），盖在晤面 UI 之上；
   勿放在已 visibility:hidden 的主 #chat-screen 子树内，否则线下打开时看不见。 */
#chat-offline-screen.chat-screen > .chat-inner-voice {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}
#chat-offline-screen.chat-screen > .chat-inner-voice.is-open {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  pointer-events: auto;
}
#chat-offline-screen.chat-screen > .chat-inner-voice:not(.is-open) .chat-inner-voice-backdrop {
  pointer-events: none;
}
#chat-offline-screen.chat-screen > .chat-char-recall-overlay.chat-inner-voice-history-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}
#chat-offline-screen.chat-screen > .chat-char-recall-overlay.chat-inner-voice-history-overlay.is-open {
  position: fixed;
  inset: 0;
  z-index: 10051;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  pointer-events: auto;
}
#chat-offline-screen.chat-screen > .chat-char-recall-overlay.chat-inner-voice-history-overlay:not(.is-open) .chat-inner-voice-backdrop {
  pointer-events: none;
}
/* 图片全屏预览：线下时挂 #chat-offline-screen 根上，盖晤面 UI，不必退出线下 */
#chat-offline-screen.chat-screen > .chat-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 10052;
}
#chat-offline-screen.chat-screen > .chat-photo-viewer.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
#chat-offline-screen .chat-offline-eyebrow {
  position: absolute;
  top: max(11px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  pointer-events: none;
  z-index: 6;
  max-width: min(240px, 78vw);
  text-align: center;
  line-height: 1.45;
  opacity: 0.92;
  font-family: "Noto Serif SC", "Noto Sans SC", serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: none;
  color: var(--text-sub);
  text-shadow: none;
}
body.dark #chat-offline-screen .chat-offline-eyebrow {
  text-shadow: none;
  color: rgba(255, 255, 255, 0.55);
}
/* 返回：轻量，不抢画面 */
.chat-offline-fab-back {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 8;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  margin: 0;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--f2f-card-border);
  color: var(--text-sub);
  background: var(--f2f-card-peer);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.chat-offline-fab-back:hover {
  background: var(--f2f-card-peer);
  color: var(--text-main);
  border-color: rgba(var(--tint-rgb), 0.24);
}
body.dark .chat-offline-fab-back {
  background: var(--f2f-card-peer);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.76);
}
body.dark .chat-offline-fab-back:hover {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.16);
}
/* 结束晤面：与返回对称钉右上角（写入 offline_end 票根与左上角返回相同） */
.chat-offline-fab-end {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 8;
  min-width: 52px;
  height: 38px;
  padding: 0 12px !important;
  margin: 0;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--f2f-card-border);
  color: var(--text-sub);
  background: var(--f2f-card-peer);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.chat-offline-fab-end:hover {
  background: var(--f2f-card-peer);
  color: var(--text-main);
  border-color: rgba(var(--tint-rgb), 0.28);
}
body.dark .chat-offline-fab-end {
  background: var(--f2f-card-peer);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.76);
}
body.dark .chat-offline-fab-end:hover {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
}
.chat-offline-more-hint {
  margin: -4px 18px 14px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-sub);
  opacity: 0.9;
}
.chat-offline-more-menu-sheet.chat-more-sheet {
  z-index: 10086;
  contain: layout style paint;
}
.chat-offline-more-menu-sheet .chat-more-sheet-backdrop {
  will-change: opacity;
}
.chat-offline-imgstyle-sheet {
  z-index: 10089;
}
.chat-offline-more-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 18px 12px;
}
.chat-offline-more-menu-item {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.chat-offline-more-menu-item--switch {
  cursor: default;
}
.chat-offline-menu-ui-css-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 6.8rem;
  max-width: 48%;
  font-size: 0.72rem;
  padding: 6px 8px;
}
.ward-offline-preset-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.ward-offline-preset-note {
  margin: 0 0 8px;
}
.chat-offline-more-menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.chat-offline-more-menu-item-title {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.chat-offline-more-menu-item-desc {
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-sub);
}
.chat-offline-more-menu-item > .ph {
  flex: 0 0 auto;
  font-size: 1rem;
  opacity: 0.45;
}
.chat-offline-more-menu-item:not(.chat-offline-more-menu-item--switch):active {
  transform: scale(0.99);
}
body.dark .chat-offline-more-menu-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.chat-offline-prose-sheet.chat-more-sheet {
  z-index: 10087;
}
.chat-offline-prose-preset-field {
  margin-bottom: 12px;
}

.chat-offline-prose-preset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chat-offline-prose-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 18px 8px;
}
.chat-offline-prose-fields .chat-offline-prose-sublabel {
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  opacity: 0.92;
}
.chat-offline-prose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 16px;
  justify-content: flex-end;
}
.chat-offline-meet-summary-sheet.chat-more-sheet {
  z-index: 10088;
}
/* 整屏聊天背景：晤面专用壁纸层，固定铺满屏，不随消息列表滚动 */
.chat-offline-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* 独立合成层，避免 iOS 滚动消息时背景层错位叠到卡片上 */
  transform: translateZ(0);
  will-change: transform;
}
.chat-offline-thread-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.chat-offline-thread-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.chat-offline-thread-bg-img.is-loaded {
  opacity: 1;
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-ambient-grad {
  background: transparent;
}
/* 晤面壁纸：整屏 cover 铺满、固定不动；顶栏/输入区透明，卡片在上层滚动 */
#chat-offline-screen.chat-offline--thread-bg.chat-offline-screen {
  contain: none;
  background-color: transparent !important;
  background-image: var(--chat-offline-wallpaper-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* 根层 ::before + img：双保险铺满（含顶栏/底栏安全区），不裁切 */
#chat-offline-screen.chat-offline--thread-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: transparent;
  background-image: var(--chat-offline-wallpaper-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-inner {
  position: relative;
  z-index: 2;
  background: transparent !important;
  min-height: 100%;
  isolation: isolate;
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-thread-bg {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-thread-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  visibility: visible;
  z-index: 0;
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-body,
#chat-offline-screen.chat-offline--thread-bg .chat-offline-dock,
#chat-offline-screen.chat-offline--thread-bg .chat-offline-chat-mount,
#chat-offline-screen.chat-offline--thread-bg .chat-scroll,
#chat-offline-screen.chat-offline--thread-bg .chat-messages-stack,
#chat-offline-screen.chat-offline--thread-bg #chat-composer {
  background: transparent !important;
  background-image: none !important;
}
#chat-offline-screen.chat-offline--thread-bg .chat-scroll {
  isolation: auto;
}
#chat-offline-screen.chat-offline--thread-bg #chat-messages {
  position: relative;
  z-index: 1;
}
#chat-offline-screen.chat-offline--thread-bg .chat-msg,
#chat-offline-screen.chat-offline--thread-bg .chat-msg-inner--f2f-diary,
#chat-offline-screen.chat-offline--thread-bg .chat-msg-bubble-stack.chat-f2f-diary-sheet {
  position: relative;
  z-index: 1;
}
#chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--custom-bg,
#chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--custom-bg .chat-slab-mat {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent;
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-fab-back,
#chat-offline-screen.chat-offline--thread-bg .chat-offline-fab-end {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 2px 12px rgba(18, 22, 36, 0.06);
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-fab-back:hover,
#chat-offline-screen.chat-offline--thread-bg .chat-offline-fab-end:hover {
  background: rgba(255, 255, 255, 0.58);
}
body.dark #chat-offline-screen.chat-offline--thread-bg .chat-offline-fab-back,
body.dark #chat-offline-screen.chat-offline--thread-bg .chat-offline-fab-end {
  background: rgba(38, 36, 44, 0.48);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}
body.dark #chat-offline-screen.chat-offline--thread-bg .chat-offline-fab-back:hover,
body.dark #chat-offline-screen.chat-offline--thread-bg .chat-offline-fab-end:hover {
  background: rgba(38, 36, 44, 0.62);
}
#chat-offline-screen.chat-offline--thread-bg .chat-offline-eyebrow {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.dark #chat-offline-screen.chat-offline--thread-bg .chat-offline-eyebrow {
  background: rgba(38, 36, 44, 0.45);
}
/* 有壁纸：输入栏与日记卡同套不透明白底；壁纸仅在卡片间隙/滚动区露出 */
#chat-offline-screen.chat-offline--thread-bg .chat-offline-chat-mount > .chat-composer.chat-composer--f2f-prose {
  padding-left: clamp(6px, 2vw, 12px);
  padding-right: clamp(6px, 2vw, 12px);
}
#chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--f2f-prose .chat-slab {
  max-width: var(--f2f-composer-max);
}
#chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--f2f-prose .chat-slab-panel.chat-composer-panel {
  background: #fff !important;
  border: 1px solid var(--f2f-card-border) !important;
  box-shadow: var(--f2f-diary-shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
}
#chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--f2f-prose,
#chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--f2f-prose .chat-slab,
#chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--f2f-prose .chat-slab-stack,
#chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--f2f-prose .chat-slab-mat {
  background: transparent !important;
  background-image: none !important;
}
body.dark #chat-offline-screen.chat-offline--thread-bg #chat-composer.chat-composer--f2f-prose .chat-slab-panel.chat-composer-panel {
  background: var(--f2f-card-peer) !important;
  border-color: var(--f2f-card-border) !important;
  box-shadow: var(--f2f-diary-shadow) !important;
}
#chat-offline-screen.chat-offline--thread-bg .chat-f2f-diary-head {
  background: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.dark #chat-offline-screen.chat-offline--thread-bg .chat-f2f-diary-head {
  background: rgba(42, 40, 48, 0.98) !important;
}
.chat-offline-ambient-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-device);
}
body.dark .chat-offline-ambient-grad {
  background: var(--bg-device);
}
#chat-offline-screen .chat-offline-ambient .chat-offline-ambient-grain {
  z-index: 2;
  opacity: 0;
}
body.dark #chat-offline-screen .chat-offline-ambient .chat-offline-ambient-grain {
  opacity: 0;
}
.chat-offline-watermark {
  position: absolute;
  z-index: 3;
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: 20%;
  opacity: 0.038;
  pointer-events: none;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(2.6rem, 14vw, 3.8rem);
  letter-spacing: 0.18em;
  color: var(--text-main);
}
body.dark .chat-offline-watermark {
  opacity: 0.055;
}
.chat-offline-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  padding-top: 0;
}
.chat-offline-dock {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding: 0 0 0;
}
.chat-offline-dock-shade {
  display: none;
}
.chat-offline-dock-panel {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  z-index: 0;
}
body.dark .chat-offline-dock-panel {
  box-shadow: none;
}
.chat-offline-chat-mount {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
}
/* 线下：消息区占满剩余高度，输入栏贴底 */
#chat-offline-screen .chat-offline-chat-mount > .chat-scroll {
  flex: 1 1 0;
  min-width: 0;
}
#chat-offline-screen .chat-scroll > .chat-messages-stack {
  flex: 1 1 0;
  min-height: 0;
}
#chat-offline-screen .chat-offline-chat-mount > .chat-composer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 12px clamp(6px, 2vw, 12px) max(10px, env(safe-area-inset-bottom, 0px));
}
/* 日记输入：外层不留白条，仅白卡本体；背后透出壁纸或页面底 */
#chat-offline-screen .chat-offline-chat-mount > .chat-composer.chat-composer--f2f-prose {
  padding-top: 0;
  padding-left: clamp(6px, 2vw, 12px);
  padding-right: clamp(6px, 2vw, 12px);
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  background: transparent !important;
  border-top: none !important;
}

/* 线下：顶距给浮动返回；每条栏宽居中，头像在上、水平居中，正文在下方左对齐 */
#chat-offline-screen .chat-scroll {
  margin: 0;
  position: relative;
  isolation: isolate;
  padding: calc(10px + env(safe-area-inset-top, 0px) + 34px) clamp(6px, 2vw, 12px) 0 clamp(6px, 2vw, 12px);
  gap: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
body.dark #chat-offline-screen .chat-scroll {
  background: transparent;
}
#chat-offline-screen .chat-scroll::before {
  display: none;
}
#chat-offline-screen .chat-messages-stack {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  padding: 10px 0 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  z-index: 1;
}
#chat-offline-screen .chat-composer--f2f-prose .chat-slab {
  margin-top: 0.65rem;
}
#chat-offline-screen #chat-composer.chat-composer--f2f-prose .chat-slab-stack,
#chat-offline-screen #chat-composer.chat-composer--f2f-prose .chat-slab-mat {
  background: transparent !important;
}
#chat-offline-screen #chat-messages {
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 1;
}
#chat-offline-screen .chat-identity-wrap {
  display: none !important;
}

/* —— 晤面日记卡：信头 + 白卡 —— */
#chat-offline-screen .chat-msg-inner--f2f-diary {
  gap: 0;
  align-items: stretch;
  padding: 0;
}
#chat-offline-screen .chat-f2f-diary-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: end;
  padding: 14px 12px 12px;
  margin: 0 2px;
  border-radius: 3px 3px 0 0;
  background: var(--f2f-diary-head-bg);
  border: 1px solid var(--f2f-card-border);
  border-bottom: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
#chat-offline-screen .chat-f2f-diary-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--tint-rgb), 0.06) 0%, transparent 55%);
  pointer-events: none;
}
#chat-offline-screen .chat-f2f-diary-head-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-bottom: 2px;
}
#chat-offline-screen .chat-f2f-diary-name {
  margin: 0 0 6px;
  font-family: var(--f2f-diary-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--text-main);
}
#chat-offline-screen .chat-f2f-diary-sub {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text-sub);
  opacity: 0.88;
}
#chat-offline-screen .chat-f2f-diary-polaroid {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  min-width: 106px;
  padding: 6px 6px 20px;
  background: #fff;
  border: 1px solid rgba(18, 22, 36, 0.1);
  box-shadow: 0 4px 18px rgba(18, 22, 36, 0.12);
}
body.dark #chat-offline-screen .chat-f2f-diary-polaroid {
  background: rgba(52, 50, 58, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32);
}
#chat-offline-screen.chat-screen .chat-f2f-diary-polaroid .chat-msg-avatar {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 96px !important;
  height: 112px !important;
  min-width: 96px !important;
  min-height: 112px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 1.45rem !important;
  overflow: hidden;
  object-fit: cover;
}
#chat-offline-screen.chat-screen .chat-f2f-diary-polaroid img.chat-msg-avatar,
#chat-offline-screen.chat-screen .chat-f2f-diary-polaroid .chat-msg-avatar--image {
  display: block !important;
  width: 96px !important;
  height: 112px !important;
  min-width: 96px !important;
  min-height: 112px !important;
  object-fit: cover;
  object-position: center top;
}
#chat-offline-screen.chat-screen .chat-f2f-diary-polaroid .chat-msg-avatar--ph,
#chat-offline-screen.chat-screen .chat-f2f-diary-polaroid .chat-msg-avatar--user {
  place-items: center;
}
#chat-offline-screen.chat-screen .chat-f2f-diary-polaroid .chat-msg-avatar--assistant,
#chat-offline-screen.chat-screen .chat-msg--assistant .chat-f2f-diary-polaroid .chat-msg-avatar {
  cursor: pointer;
}
#chat-offline-screen .chat-f2f-diary-sheet {
  position: relative;
  box-sizing: border-box;
  background-color: var(--f2f-card-peer);
  border: 1px solid var(--f2f-card-border);
  border-radius: 0 0 3px 3px;
  box-shadow: var(--f2f-diary-shadow);
}
#chat-offline-screen .chat-msg--user .chat-f2f-diary-sheet {
  background-color: var(--f2f-card-user);
}
#chat-offline-screen .chat-f2f-diary-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(18, 22, 36, 0.06);
}
body.dark #chat-offline-screen .chat-f2f-diary-meta {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
#chat-offline-screen .chat-f2f-diary-date {
  font-family: var(--f2f-diary-serif);
  font-size: 0.62rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  opacity: 0.72;
  white-space: nowrap;
}
#chat-offline-screen .chat-f2f-diary-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  flex-shrink: 0;
  min-height: 24px;
}
#chat-offline-screen .chat-f2f-diary-foot {
  height: 0;
  margin: 0;
  padding: 0 18px 14px;
  border-top: 1px solid rgba(18, 22, 36, 0.06);
}
body.dark #chat-offline-screen .chat-f2f-diary-foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}

#chat-offline-screen.chat-screen .chat-msg-inner > .chat-msg-avatar,
#chat-offline-screen.chat-screen .chat-msg-inner > .chat-msg-avatar-col,
#chat-offline-screen.chat-screen .chat-msg-glass-line .chat-msg-avatar-col {
  display: none !important;
}
#chat-offline-screen .chat-msg {
  /* stretch：center 会让 .chat-msg-inner 按正文 intrinsic 宽度收缩，右侧留白 */
  align-items: stretch;
  width: 100%;
}
#chat-offline-screen .chat-msg-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: var(--f2f-prose-max);
  margin-left: auto;
  margin-right: auto;
  align-self: stretch;
  padding: 0 2px;
  box-sizing: border-box;
}
#chat-offline-screen .chat-msg--user .chat-msg-avatar,
#chat-offline-screen .chat-msg--user .chat-msg-avatar-col {
  order: unset;
}
#chat-offline-screen .chat-msg-avatar-col .chat-msg-meta {
  display: none;
}
#chat-offline-screen .chat-msg-glass-line {
  display: contents;
}
#chat-offline-screen .chat-msg-bubble-stack {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  /* 与同密谈文字小剧场一致：成稿段落流，不靠多条气泡 gap 硬切开 */
  gap: 0;
  align-items: stretch !important;
}
#chat-offline-screen .chat-msg--user .chat-msg-bubble-stack {
  align-items: stretch !important;
}
/* 线下日记白卡：Date 栏下正文区 */
#chat-offline-screen .chat-f2f-diary-sheet:has(.chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing)),
#chat-offline-screen .chat-f2f-diary-sheet:has(.chat-msg-card) {
  padding: 0 0 0;
}
#chat-offline-screen .chat-msg-bubble-stack.chat-f2f-diary-sheet {
  background-color: var(--f2f-card-peer) !important;
  border: 1px solid var(--f2f-card-border) !important;
  box-shadow: var(--f2f-diary-shadow) !important;
}
#chat-offline-screen .chat-msg--user .chat-msg-bubble-stack.chat-f2f-diary-sheet {
  background-color: var(--f2f-card-user) !important;
}
#chat-offline-screen.chat-offline--thread-bg .chat-msg-bubble-stack.chat-f2f-diary-sheet {
  background-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
}
#chat-offline-screen.chat-offline--thread-bg .chat-msg--user .chat-msg-bubble-stack.chat-f2f-diary-sheet {
  background-color: #fff !important;
}
body.dark #chat-offline-screen.chat-offline--thread-bg .chat-msg-bubble-stack.chat-f2f-diary-sheet,
body.dark #chat-offline-screen.chat-offline--thread-bg .chat-msg--user .chat-msg-bubble-stack.chat-f2f-diary-sheet {
  background-color: rgba(42, 40, 48, 0.98) !important;
}
#chat-offline-screen .chat-msg-bubble-stack:not(.chat-f2f-diary-sheet):has(.chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing)),
#chat-offline-screen .chat-msg-bubble-stack:not(.chat-f2f-diary-sheet):has(.chat-msg-card) {
  position: relative;
  padding: 0;
  border-radius: 0;
  box-sizing: border-box;
  background-color: transparent;
  border: none;
  box-shadow: none;
}
#chat-offline-screen .chat-msg--user .chat-msg-bubble-stack:not(.chat-f2f-diary-sheet):has(.chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing)),
#chat-offline-screen .chat-msg--user .chat-msg-bubble-stack:not(.chat-f2f-diary-sheet):has(.chat-msg-card) {
  background-color: transparent;
}
#chat-offline-screen .chat-f2f-diary-sheet > .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):first-of-type,
#chat-offline-screen .chat-f2f-diary-sheet > .chat-msg-card:first-of-type {
  margin-top: 0;
}
#chat-offline-screen .chat-f2f-diary-meta ~ .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-offline-screen .chat-f2f-diary-meta ~ .chat-msg-card {
  padding-left: 18px;
  padding-right: 18px;
}
#chat-offline-screen .chat-f2f-diary-meta + .chat-msg-bubble,
#chat-offline-screen .chat-f2f-diary-meta + .chat-msg-card {
  padding-top: 16px;
}
#chat-offline-screen .chat-f2f-diary-meta ~ .chat-msg-bubble:not(.chat-msg-bubble--sticker):last-of-type {
  padding-bottom: 4px;
}
/* 仅有表情包 / 正在输入等：无大卡底，但仍为工具栏留出内边距 */
#chat-offline-screen .chat-msg-bubble-stack:has(> .chat-msg-quick):not(:has(.chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing))):not(:has(.chat-msg-card)) {
  padding: 1.95rem 1.72rem 0.65rem;
  box-sizing: border-box;
}
#chat-offline-screen .chat-msg--call-ended-notice .chat-msg-bubble-stack {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
/* 卡内连续正文段：段距用 margin（类似小剧场 pre 里空行），不加大号 stack gap */
#chat-offline-screen .chat-msg-bubble-stack > .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice)
  + .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  margin-top: 0.85em;
}
#chat-offline-screen .chat-msg-bubble-stack > .chat-msg-card + .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-offline-screen .chat-msg-bubble-stack > .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) + .chat-msg-card {
  margin-top: 0.78rem;
}
/* 卡内气泡：无边框无独立底 */
#chat-offline-screen .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  border-radius: 0 !important;
  padding: 0 18px !important;
  margin: 0;
  font-family: var(--f2f-diary-serif);
  font-size: 0.94rem !important;
  font-weight: 400;
  line-height: 1.95 !important;
  letter-spacing: 0.02em !important;
  font-feature-settings: "kern" 1;
  border: none !important;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--text-main) !important;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  white-space: pre-wrap;
  word-break: break-word;
}
#chat-offline-screen .chat-f2f-diary-sheet .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#chat-offline-screen .rich-prose--html blockquote {
  text-align: center;
  border: none;
  padding: 0.15em 0.4em;
  margin: 1.05em 0;
  opacity: 1;
  font-style: normal;
  position: relative;
}
#chat-offline-screen .rich-prose--html blockquote::before,
#chat-offline-screen .rich-prose--html blockquote::after {
  content: "";
  display: block;
  max-width: 88%;
  margin: 0.72em auto;
  border-top: 1px dotted rgba(18, 22, 36, 0.22);
}
body.dark #chat-offline-screen .rich-prose--html blockquote::before,
body.dark #chat-offline-screen .rich-prose--html blockquote::after {
  border-top-color: rgba(255, 255, 255, 0.22);
}
#chat-offline-screen .rich-prose--html blockquote p {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(18, 22, 36, 0.28);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
body.dark #chat-offline-screen .rich-prose--html blockquote p {
  text-decoration-color: rgba(255, 255, 255, 0.28);
}
#chat-offline-screen .chat-msg-bubble-prose.rich-prose {
  white-space: pre-wrap;
  word-break: break-word;
}
#chat-offline-screen .chat-msg--assistant .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-offline-screen .chat-msg--system .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-offline-screen .chat-msg--user .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  opacity: 1;
}
/* 附图 / 红包 / 通话条：居中窄幅，不配对话气泡观感 */
#chat-offline-screen .chat-msg-card--photo,
#chat-offline-screen .chat-msg-card--photo-desc,
#chat-offline-screen .chat-msg-card--redpack,
#chat-offline-screen .chat-msg-card--call-ended {
  max-width: min(100%, 19rem) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
#chat-offline-screen .chat-photo-polaroid {
  transform: none !important;
  border-radius: 0;
  padding: 6px 0 16px;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
#chat-offline-screen .chat-photo-polaroid-inner {
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid var(--f2f-card-border);
  box-shadow: none;
}
body.dark #chat-offline-screen .chat-photo-polaroid-inner {
  box-shadow: none;
}
#chat-offline-screen .chat-photo-polaroid-footer {
  opacity: 0.88;
  padding-top: 8px;
  font-size: 0.78rem;
}
#chat-offline-screen .chat-photo-polaroid:hover,
#chat-offline-screen .chat-photo-polaroid:active {
  transform: none !important;
}
#chat-offline-screen .chat-msg-bubble--sticker {
  max-width: 106px !important;
  width: 100%;
  margin: 0;
  align-self: center;
  padding: 6px 0 10px !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
body.dark #chat-offline-screen .chat-msg-bubble--sticker {
  border-bottom: none !important;
}
#chat-offline-screen .chat-msg-bubble--typing {
  max-width: 100% !important;
  margin: 0;
  width: 100%;
  border-radius: 0 !important;
  justify-content: flex-start;
  padding: 2px 2px 8px !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  background: transparent !important;
  opacity: 0.82;
}
#chat-offline-screen .chat-msg-bubble--streaming .chat-msg-bubble-prose::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: color-mix(in srgb, var(--text-main) 72%, transparent);
  animation: chat-offline-stream-cursor 0.85s step-end infinite;
}
@keyframes chat-offline-stream-cursor {
  50% {
    opacity: 0;
  }
}
#chat-offline-screen .chat-time-divider {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 18px 0 10px;
  gap: 0;
}
#chat-offline-screen .chat-time-divider::before,
#chat-offline-screen .chat-time-divider::after {
  display: none;
}
#chat-offline-screen .chat-time-divider-label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  font-size: 0.62rem !important;
  font-weight: 600;
  opacity: 0.48;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--f2f-rule) !important;
}
#chat-offline-screen .chat-time-divider-label::before,
#chat-offline-screen .chat-time-divider-label::after {
  display: none;
}
body.dark #chat-offline-screen .chat-time-divider-label {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  opacity: 0.5;
}
.chat-offline-session-fold-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 12px 0 16px;
  padding: 0 6px;
  box-sizing: border-box;
}
.chat-offline-session-fold-divider::before,
.chat-offline-session-fold-divider::after {
  content: "";
  flex: 1 1 0;
  min-width: 12px;
  height: 0;
  border-top: 1px solid var(--line);
  opacity: 0.65;
}
#chat-offline-screen .chat-offline-session-fold-divider::before,
#chat-offline-screen .chat-offline-session-fold-divider::after {
  border-top-color: var(--f2f-rule, var(--line));
  opacity: 0.55;
}
.chat-offline-session-fold {
  flex: 0 1 auto;
  max-width: 78%;
  margin: 0;
  padding: 2px 2px 3px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-align: center;
  font-family: "Playfair Display", "Noto Serif SC", Georgia, serif;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--text-sub);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.chat-offline-session-fold:hover {
  color: var(--text-main);
  opacity: 0.95;
}
.chat-offline-session-fold:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.4);
  outline-offset: 2px;
  border-radius: 2px;
}
body.dark .chat-offline-session-fold-divider::before,
body.dark .chat-offline-session-fold-divider::after {
  border-top-color: rgba(255, 255, 255, 0.12);
  opacity: 0.7;
}
body.dark .chat-offline-session-fold {
  color: rgba(255, 255, 255, 0.48);
}
body.dark .chat-offline-session-fold:hover {
  color: rgba(255, 255, 255, 0.72);
}

#chat-offline-screen .chat-history-fold--offline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: min(20rem, 100%);
  margin: 8px auto 4px;
  padding: 11px 16px 12px;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.74rem !important;
  font-weight: 500;
  font-style: normal !important;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--text-sub);
  border-radius: 999px;
  border: 1px solid rgba(var(--tint-rgb), 0.18) !important;
  background: rgba(var(--tint-rgb), 0.06) !important;
  box-shadow: none !important;
  opacity: 1;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}
#chat-offline-screen .chat-history-fold--offline::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--tint-rgb), 0.55);
  flex-shrink: 0;
}
#chat-offline-screen .chat-history-fold--offline:hover {
  border-color: rgba(var(--tint-rgb), 0.32) !important;
  background: rgba(var(--tint-rgb), 0.11) !important;
  color: var(--text-main);
  filter: none;
}
body.dark #chat-offline-screen .chat-history-fold--offline {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.62);
}
body.dark #chat-offline-screen .chat-history-fold--offline:hover {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.09) !important;
}
/* 线下输入：日记白卡（与 .chat-f2f-diary-sheet 同套视觉） */
#chat-composer.chat-composer--f2f-prose {
  border-top: none;
  background: transparent;
  padding: 0;
}
#chat-composer.chat-composer--f2f-prose .chat-slab {
  width: 100%;
  max-width: var(--f2f-composer-max);
  margin: 0 auto;
  align-items: stretch;
}
#chat-composer.chat-composer--f2f-prose .chat-slab-spine {
  display: none;
}
#chat-composer.chat-composer--f2f-prose .chat-slab-stack {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}
#chat-composer.chat-composer--f2f-prose .chat-composer-cap {
  display: none;
}
#chat-composer.chat-composer--f2f-prose .chat-slab-mat {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}
#chat-composer.chat-composer--f2f-prose .chat-slab-tape {
  display: none;
}
#chat-composer.chat-composer--f2f-prose .chat-slab-panel.chat-composer-panel {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  border-radius: 3px;
  margin: 0;
  width: 100%;
  border: 1px solid var(--f2f-card-border);
  background: var(--f2f-card-peer);
  box-shadow: var(--f2f-diary-shadow);
  overflow: hidden;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#chat-composer.chat-composer--f2f-prose .chat-slab-mat:focus-within .chat-slab-panel.chat-composer-panel {
  border-color: rgba(var(--tint-rgb), 0.22);
  box-shadow: var(--f2f-diary-shadow);
}
#chat-composer.chat-composer--f2f-prose .chat-slab-panel.chat-composer-panel::before,
#chat-composer.chat-composer--f2f-prose .chat-slab-panel.chat-composer-panel::after {
  content: none !important;
  display: none !important;
}
body.dark #chat-composer.chat-composer--f2f-prose .chat-slab-panel.chat-composer-panel {
  border-color: var(--f2f-card-border);
  background: var(--f2f-card-peer);
}
body.dark #chat-composer.chat-composer--f2f-prose .chat-slab-mat:focus-within .chat-slab-panel.chat-composer-panel {
  border-color: rgba(255, 255, 255, 0.14);
}
#chat-composer.chat-composer--f2f-prose .chat-f2f-diary-compose-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 9px;
  border-bottom: 1px solid rgba(18, 22, 36, 0.06);
  background: transparent;
}
body.dark #chat-composer.chat-composer--f2f-prose .chat-f2f-diary-compose-meta {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
#chat-composer.chat-composer--f2f-prose .chat-f2f-diary-compose-date {
  font-family: var(--f2f-diary-serif);
  font-size: 0.62rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  opacity: 0.72;
  white-space: nowrap;
}
#chat-composer.chat-composer--f2f-prose .chat-f2f-diary-compose-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-shrink: 0;
  min-height: 28px;
}
#chat-composer.chat-composer--f2f-prose .chat-f2f-diary-compose-actions .chat-composer-fabs {
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  padding: 0;
  margin: 0;
  border-top: none;
  background: transparent;
}
#chat-composer.chat-composer--f2f-prose .chat-input-ruled {
  flex: 1 1 auto;
  min-height: 0;
  background-color: transparent !important;
  background-image: none !important;
  padding: 14px 18px 12px;
  position: relative;
}
#chat-composer.chat-composer--f2f-prose .chat-input-ruled::before {
  content: none !important;
  display: none !important;
}
body.dark #chat-composer.chat-composer--f2f-prose .chat-input-ruled {
  background-color: transparent !important;
}
#chat-composer.chat-composer--f2f-prose .chat-input-quote {
  margin: 0 0 10px;
  border-radius: 0;
  border: none;
  border-left: 2px solid rgba(var(--tint-rgb), 0.28);
  padding: 6px 10px 6px 12px;
  font-family: var(--f2f-diary-serif);
  font-size: 0.78rem;
  line-height: 1.5;
  background: rgba(var(--tint-rgb), 0.045);
}
#chat-composer.chat-composer--f2f-prose .chat-input {
  min-height: 52px;
  padding: 0;
  font-family: var(--f2f-diary-serif);
  font-size: 0.92rem;
  line-height: 1.88;
  letter-spacing: 0.02em;
  color: var(--text-main);
  caret-color: rgba(var(--tint-rgb), 0.85);
  resize: none;
}
#chat-composer.chat-composer--f2f-prose .chat-input::placeholder {
  color: var(--text-sub);
  opacity: 0.42;
  font-style: italic;
  font-family: var(--f2f-diary-serif);
}
#chat-composer.chat-composer--f2f-prose .chat-composer-fabs {
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  padding: 10px 18px 12px;
  margin: 0;
  border-top: 1px solid rgba(18, 22, 36, 0.06);
  background: transparent;
}
body.dark #chat-composer.chat-composer--f2f-prose .chat-composer-fabs {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: transparent;
}
#chat-composer.chat-composer--f2f-prose .chat-f2f-diary-compose-meta ~ .chat-input-ruled + .chat-composer-fabs {
  display: none;
}
#chat-composer.chat-composer--f2f-prose .chat-more-btn,
#chat-composer.chat-composer--f2f-prose .chat-send-fab {
  width: 28px;
  height: 28px;
  border-radius: 0;
  transform: none !important;
  box-shadow: none !important;
  border: none;
  background: transparent;
  color: var(--text-sub);
  opacity: 0.44;
  transition: opacity 0.15s ease, color 0.15s ease;
}
#chat-composer.chat-composer--f2f-prose .chat-more-btn:hover,
#chat-composer.chat-composer--f2f-prose .chat-send-fab:hover:not(:disabled) {
  transform: none !important;
  opacity: 0.92;
  color: var(--text-main);
  background: transparent;
  filter: none;
}
#chat-composer.chat-composer--f2f-prose .chat-send-fab:active:not(:disabled) {
  transform: none !important;
  opacity: 1;
  filter: none;
}
body.dark #chat-composer.chat-composer--f2f-prose .chat-more-btn,
body.dark #chat-composer.chat-composer--f2f-prose .chat-send-fab {
  color: rgba(255, 255, 255, 0.48);
  opacity: 0.52;
  background: transparent;
}
body.dark #chat-composer.chat-composer--f2f-prose .chat-more-btn:hover,
body.dark #chat-composer.chat-composer--f2f-prose .chat-send-fab:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.88);
  opacity: 0.95;
}
#chat-composer.chat-composer--f2f-prose .chat-slab-mat:focus-within .chat-more-btn {
  transform: none !important;
}
#chat-composer.chat-composer--f2f-prose .chat-more-btn i,
#chat-composer.chat-composer--f2f-prose .chat-send-fab i {
  color: inherit;
  font-size: 0.96rem;
}
#chat-composer.chat-composer--f2f-prose .chat-send-fab i {
  margin-left: 0;
}
#chat-composer.chat-composer--f2f-prose .chat-send-fab.chat-send-fab--assist-stop {
  opacity: 1;
  color: var(--bg-device);
  background: var(--text-main);
  border-color: var(--line);
  border-radius: 6px;
}
#chat-composer.chat-composer--f2f-prose .chat-send-fab.chat-send-fab--assist-stop:hover:not(:disabled) {
  color: var(--bg-device);
  background: var(--text-main);
  border-color: transparent;
}
body.dark #chat-composer.chat-composer--f2f-prose .chat-send-fab.chat-send-fab--assist-stop {
  color: var(--bg-device);
  background: var(--text-main);
  border-color: var(--line);
}
#chat-offline-screen .chat-messages {
  padding: 8px 10px 10px;
  gap: 12px;
}
#chat-offline-screen .chat-messages-wallpaper::before {
  opacity: 0.65 !important;
}
body.dark #chat-offline-screen .chat-messages-wallpaper::before {
  opacity: 0.85 !important;
}
/* 晤页整屏已铺与线上一致的聊天背景图时，勿在消息栈内再叠同一层（避免只见局部裁切） */
#chat-offline-screen.chat-offline--thread-bg .chat-messages-wallpaper,
#chat-offline-screen.chat-offline--thread-bg .chat-messages-wallpaper-img {
  opacity: 0 !important;
  visibility: hidden;
}
#chat-offline-screen.chat-offline--thread-bg .chat-messages-wallpaper::before {
  opacity: 0 !important;
}

.chat-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  /* 纵向滚动改到 #chat-messages：消息区壁纸在 stack 内 absolute 不随气泡滚 */
  overflow: hidden;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-identity-wrap {
  flex-shrink: 0;
  margin-bottom: 6px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg-device);
  padding-bottom: 4px;
}
.chat-identity-wrap--custom-bg {
  background-color: var(--bg-device);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.chat-identity-wrap--custom-bg::after {
  content: none;
}
.chat-identity-wrap--custom-bg > .chat-slab {
  position: relative;
  z-index: 1;
}
/* 有顶部背景时：身份卡不要用实心底，否则会把 wrap 上的图完全挡住 */
.chat-identity-wrap--custom-bg .chat-slab-mat {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
}
body.dark .chat-identity-wrap--custom-bg .chat-slab-mat {
  background: rgba(35, 37, 41, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}
.chat-identity-wrap--custom-bg .chat-slab-panel.chat-identity-panel:not(.chat-identity-panel--custom-bg) {
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    4px 5px 0 rgba(0, 0, 0, 0.03),
    0 4px 18px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.dark .chat-identity-wrap--custom-bg .chat-slab-panel.chat-identity-panel:not(.chat-identity-panel--custom-bg) {
  background: rgba(35, 37, 41, 0.82);
  box-shadow:
    4px 5px 0 rgba(0, 0, 0, 0.12),
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* 身份卡面板独立背景图（聊天详情里设置） */
.chat-slab-panel.chat-identity-panel.chat-identity-panel--custom-bg {
  background-color: rgba(255, 255, 255, 0.12);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
body.dark .chat-slab-panel.chat-identity-panel.chat-identity-panel--custom-bg {
  background-color: rgba(35, 37, 41, 0.2);
}
.chat-identity-panel--custom-bg::before {
  content: none;
}
.chat-identity-panel--custom-bg > * {
  position: relative;
  z-index: 1;
}
/* 底部输入栏独立背景图 */
.chat-composer.chat-composer--custom-bg {
  background-color: var(--bg-device);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.chat-composer--custom-bg::before {
  content: none;
}
.chat-composer--custom-bg > * {
  position: relative;
  z-index: 1;
}
.chat-composer--custom-bg .chat-slab-mat {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}
body.dark .chat-composer--custom-bg .chat-slab-mat {
  background: rgba(35, 37, 41, 0.38);
  border-color: rgba(255, 255, 255, 0.1);
}
/* 任一分区有背景图：去掉书脊/斜胶带/Dispatch，避免压在壁纸上 */
.chat-scroll--surface-bg .chat-identity-wrap .chat-slab-spine,
.chat-scroll--surface-bg .chat-identity-wrap .chat-slab-tape,
.chat-scroll--surface-bg #chat-composer .chat-slab-spine,
.chat-scroll--surface-bg #chat-composer .chat-slab-tape,
.chat-scroll--surface-bg #chat-composer .chat-composer-cap {
  display: none;
}
.chat-corner-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-family: "Space Mono", monospace;
  font-size: 0.38rem;
  letter-spacing: 0.28em;
  color: var(--accent);
  opacity: 0.45;
  transform: rotate(6deg);
  user-select: none;
  pointer-events: none;
}
.chat-identity-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
  padding: 0 4px 0 2px;
}
.chat-header-duo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 12px;
}
.chat-header-face {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chat-header-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.chat-header-avatar-img.is-hidden {
  display: none !important;
}
.chat-header-face.has-photo .chat-header-initial {
  display: none;
}
.chat-header-initial {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-main);
  line-height: 1;
  user-select: none;
}
.chat-header-initial--user {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}
.chat-header-duo-vs {
  font-family: "Space Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--text-sub);
  opacity: 0.55;
  user-select: none;
}
.chat-thread-stamp {
  font-family: "Space Mono", monospace;
  font-size: 0.45rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.chat-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-device);
  font-family: "Space Mono", monospace;
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.chat-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.45);
  animation: chat-live-pulse 2.2s ease-out infinite;
}
@keyframes chat-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.35);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(46, 204, 113, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}
.chat-identity-head {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 52px 0 12px;
}
.chat-identity-head .settings-masthead-k {
  margin-bottom: 0;
}
.chat-identity-head .settings-masthead-title {
  margin-top: 4px;
}
.chat-scene-pull {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: rgba(var(--tint-rgb), 0.06);
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-sub);
  max-height: 4.6em;
  overflow: hidden;
}
body.dark .chat-scene-pull {
  background: rgba(var(--tint-rgb), 0.09);
}
.chat-scene-pull:empty {
  display: none;
}
.chat-messages-stack {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.chat-messages-wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
}
.chat-messages-wallpaper-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 0;
}
.chat-messages-wallpaper-img.is-loaded {
  opacity: 1;
}
.chat-messages-stack--custom-bg {
  margin-top: var(--chat-msgs-stack-custom-bg-margin-top, 2px);
  border-radius: 14px;
  /* 滚动在 #chat-messages；stack 仅裁切壁纸圆角，勿对 stack overflow:hidden 以外误伤（见上 .chat-messages-stack） */
  /* 圆角裁切由 .chat-messages-wallpaper 自身 overflow:hidden + border-radius 负责。 */
}
.chat-messages-stack--custom-bg .chat-messages-wallpaper::before {
  content: none;
}
.chat-messages-stack--custom-bg .chat-messages-wallpaper-img {
  opacity: 1;
}
.chat-messages-stack--custom-bg .chat-messages-wallpaper-img:not(.is-loaded) {
  opacity: 0;
}
.chat-messages {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  /* iOS：上方表情包/GIF 异步撑高时，滚动锚定会把视口往上顶，表现为「对方回复时列表上滑」 */
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* 与 .chat-messages-stack 配合：仅气泡列表滚动，壁纸层 absolute 铺满 stack 不跟滚 */
  padding-bottom: 8px;
  /* 移动端长按不要触发系统文本选择 / 复制条（操作用自有菜单） */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
}
.chat-messages::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.chat-messages-stack--custom-bg .chat-messages {
  padding: 10px 8px 10px;
}
.chat-messages-stack--custom-bg .chat-messages > * {
  position: relative;
  z-index: 1;
}

/* 消息区背景：贴边铺满时抵消与 .chat-screen .chat-scroll 上列变量一致的留白（不含顶栏/输入栏；输入栏高度不进入本区） */
.chat-screen .chat-scroll > #chat-messages-stack.chat-messages-stack--full-bleed {
  align-self: stretch;
  margin-left: calc(-1 * var(--chat-screen-scroll-pad-x));
  margin-right: calc(-1 * var(--chat-screen-scroll-pad-x));
  margin-top: calc(
    -1 * (var(--chat-screen-scroll-gap) + var(--chat-msgs-stack-custom-bg-margin-top, 2px))
  );
  margin-bottom: calc(-1 * var(--chat-screen-scroll-pad-bottom));
  width: calc(100% + (2 * var(--chat-screen-scroll-pad-x)));
  max-width: none;
  box-sizing: border-box;
}
.chat-screen .chat-scroll > #chat-messages-stack.chat-messages-stack--full-bleed.chat-messages-stack--custom-bg {
  border-radius: 0;
}
.chat-screen .chat-scroll > #chat-messages-stack.chat-messages-stack--full-bleed .chat-messages-wallpaper {
  border-radius: 0;
}
.chat-screen .chat-scroll > #chat-messages-stack.chat-messages-stack--full-bleed .chat-messages-wallpaper::before {
  border-radius: 0;
  /* 贴边铺满时去掉 custom-bg 的淡化叠层，避免壁纸发灰 */
  background: transparent;
}

.chat-screen .chat-scroll > .chat-identity-wrap.chat-identity-wrap--full-bleed.chat-identity-wrap--custom-bg {
  align-self: stretch;
  margin-left: calc(-1 * var(--chat-screen-scroll-pad-x));
  margin-right: calc(-1 * var(--chat-screen-scroll-pad-x));
  margin-bottom: calc(
    -1 * (var(--chat-screen-scroll-gap) + var(--chat-identity-wrap-tail-after, 2px))
  );
  width: calc(100% + (2 * var(--chat-screen-scroll-pad-x)));
  max-width: none;
  box-sizing: border-box;
  border-radius: 0;
}
.chat-screen .chat-scroll > .chat-identity-wrap.chat-identity-wrap--full-bleed.chat-identity-wrap--custom-bg::after {
  background: transparent;
}

/* 旁白：气泡上方、居中；*…* 渲染为斜体 */
.chat-msg-narration {
  width: 100%;
  flex-shrink: 0;
  text-align: center;
  white-space: pre-wrap;
  padding: 6px 12px 2px;
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--text-sub);
  letter-spacing: 0.02em;
}
.chat-msg-narration-em {
  font-style: italic;
  font-weight: 400;
  color: var(--text);
}
body.dark .chat-msg-narration {
  color: rgba(255, 255, 255, 0.62);
}
body.dark .chat-msg-narration-em {
  color: rgba(255, 255, 255, 0.85);
}
.chat-detail-narrator-preview-wall {
  margin-top: 8px;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.05);
}
.chat-msg-narration--preview {
  color: var(--text-sub);
  padding-left: 0;
  padding-right: 0;
}
.chat-detail-narrator-preview-faux-bubble {
  margin: 10px auto 0;
  max-width: 72%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-sub);
  background: rgba(var(--tint-rgb), 0.08);
  border: 1px dashed var(--line);
}
.chat-detail-narrator-range {
  width: 100%;
  max-width: 100%;
  margin: 6px 0 4px;
}
.chat-detail-narrator-range-val {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.chat-detail-narrator-body .minimax-field {
  margin-bottom: 10px;
}

.chat-persona-dispatch {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 1;
  min-width: 0;
  margin-left: 2px;
  border-radius: 5px;
  border: 1px solid var(--line);
  overflow: hidden;
  vertical-align: middle;
  background: color-mix(in srgb, var(--bg-device) 92%, transparent);
}
.chat-persona-dispatch[hidden] {
  display: none !important;
}
.chat-persona-dispatch-chips {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
}
.chat-persona-dispatch-chip {
  min-width: 22px;
  max-width: 72px;
  padding: 1px 7px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-sub);
  font-family: "Space Mono", "Noto Sans SC", monospace;
  font-size: 0.44rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.55;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.chat-persona-dispatch-chip + .chat-persona-dispatch-chip {
  border-left: 1px solid var(--line);
}
.chat-persona-dispatch-chip.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--text-main);
}
.chat-screen .chat-persona-dispatch-chip {
  font-size: 0.4rem;
  padding: 1px 6px;
}
.chat-persona-switch-divider {
  padding: 10px 0 6px;
}
.chat-persona-switch-divider-label {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  border-style: solid;
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.06);
}
.chat-persona-fold-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 12px 0 14px;
  padding: 0 6px;
  box-sizing: border-box;
}
.chat-persona-fold-divider::before,
.chat-persona-fold-divider::after {
  content: "";
  flex: 1 1 0;
  min-width: 12px;
  height: 0;
  border-top: 1px solid var(--line);
  opacity: 0.65;
}
body.dark .chat-persona-fold-divider::before,
body.dark .chat-persona-fold-divider::after {
  opacity: 0.5;
}
.chat-persona-fold-divider .chat-offline-session-fold,
.chat-persona-fold-divider .chat-persona-fold-btn {
  flex: 0 1 auto;
  max-width: 88%;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Playfair Display", "Noto Serif SC", Georgia, serif;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--text-sub);
  padding: 2px 2px 3px;
}
.chat-persona-fold-divider .chat-persona-fold-btn:hover {
  color: var(--text-main);
  opacity: 0.95;
  border: none;
  background: transparent;
}
body.dark .chat-persona-fold-divider .chat-persona-fold-btn {
  color: rgba(255, 255, 255, 0.48);
  background: transparent;
}
body.dark .chat-persona-fold-divider .chat-persona-fold-btn:hover {
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
}
#chat-screen .chat-persona-fold-divider::before,
#chat-screen .chat-persona-fold-divider::after {
  border-top-color: var(--line);
  opacity: 0.65;
}
/* 角色档案 · 制作设定（MiniMax / 生图外貌 / 立绘参考） */
.char-studio-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.char-studio-lead {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-sub);
}
.char-studio-lead strong {
  color: var(--text-main);
  font-weight: 600;
}
.char-studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px) {
  .char-studio-grid {
    grid-template-columns: 1fr 1fr;
  }
  .char-studio-card--wide {
    grid-column: 1 / -1;
  }
}
.char-studio-card {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(var(--tint-rgb, 58, 92, 137), 0.04) 100%);
  padding: 12px 12px 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
body.dark .char-studio-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.12) 100%);
  box-shadow: none;
}
.char-studio-card--voice {
  border-top: 2px solid rgba(88, 120, 200, 0.35);
}
.char-studio-card--image {
  border-top: 2px solid rgba(200, 140, 90, 0.4);
}
.char-studio-card--ref {
  border-top: 2px solid rgba(120, 160, 120, 0.45);
}
.char-studio-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.char-studio-card-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--accent, #3a5c89);
  background: rgba(var(--tint-rgb, 58, 92, 137), 0.1);
}
.char-studio-card-titles {
  min-width: 0;
}
.char-studio-card-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.char-studio-card-sub {
  margin: 3px 0 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--text-sub);
}
.char-studio-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.char-studio-select {
  width: 100%;
}
.char-studio-custom-voice {
  margin-top: 2px;
}
.char-studio-textarea {
  min-height: 4.5em;
  font-size: 0.82rem;
}
.char-studio-ref-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.char-studio-ref-preview {
  width: 96px;
  height: 128px;
  border-radius: 12px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
body.dark .char-studio-ref-preview {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.char-studio-ref-preview.has-photo {
  border-style: solid;
}
.char-studio-ref-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.char-studio-ref-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  color: var(--text-sub);
  opacity: 0.75;
  padding: 8px;
  text-align: center;
}
.char-studio-ref-preview.has-photo .char-studio-ref-ph {
  display: none;
}
.char-studio-ref-side {
  flex: 1;
  min-width: 140px;
}
.call-illust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  width: 100%;
}
.call-illust-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.call-illust-slot-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-sub);
  text-align: center;
  line-height: 1.2;
}
.call-illust-slot-preview {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
body.dark .call-illust-slot-preview {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.call-illust-slot-preview.has-img {
  border-style: solid;
}
.call-illust-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.call-illust-slot-img[hidden] {
  display: none;
}
.call-illust-slot-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  color: var(--text-sub);
  opacity: 0.7;
}
.call-illust-slot-preview.has-img .call-illust-slot-ph {
  display: none;
}
.call-illust-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.call-illust-slot--custom .call-illust-slot-label {
  color: var(--accent, #3a5c89);
}
.call-illust-add-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}
.call-illust-add-btn {
  min-width: 7.5rem;
}
.chat-detail-field--call-illust .call-illust-grid {
  margin-top: 6px;
}
.char-studio-more {
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--text-sub);
}
.char-studio-more-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-main);
  list-style: none;
}
.char-studio-more-summary::-webkit-details-marker {
  display: none;
}
.char-studio-more-list {
  margin: 8px 0 0;
  padding-left: 1.1em;
  line-height: 1.55;
}
.char-studio-more-list li + li {
  margin-top: 4px;
}

.char-alt-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.char-alt-hint {
  margin: 0;
}
.char-alt-enable-row {
  margin-bottom: 4px;
}
.char-alt-avatar-block {
  margin-top: 0;
}

.chat-time-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  padding: 2px 0 0;
}
.chat-time-divider-label {
  max-width: 92%;
  padding: 6px 16px 7px;
  font-family: "Playfair Display", "Noto Sans SC", Georgia, serif;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--text-sub);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
body.dark .chat-time-divider-label {
  background: rgba(var(--tint-rgb), 0.12);
  box-shadow: none;
}

.chat-time-divider--recall-char {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.chat-time-divider--recall-char:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 2px;
  border-radius: 12px;
}
.chat-time-divider-label--recall-char {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-time-divider--recall-char:hover .chat-time-divider-label--recall-char {
  border-color: rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.1);
}

.chat-history-fold {
  display: block;
  max-width: 92%;
  margin: 0 auto;
  padding: 6px 16px 7px;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--text-sub);
  text-align: center;
  cursor: pointer;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: rgba(var(--tint-rgb), 0.05);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chat-history-fold:hover {
  border-color: rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.09);
  color: var(--text);
}
.chat-history-fold:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 2px;
}
body.dark .chat-history-fold {
  background: rgba(var(--tint-rgb), 0.1);
}
body.dark .chat-history-fold:hover {
  background: rgba(var(--tint-rgb), 0.14);
}

/* 撤回存档 / 通话摘录：仍在 .chat-body-stack 内，保留 settings-inner 定位 */
.chat-screen .settings-inner > .chat-body-stack > .chat-char-recall-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}
.chat-screen .settings-inner > .chat-body-stack > .chat-char-recall-overlay.is-open {
  position: fixed;
  inset: 0;
  z-index: 10036;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  pointer-events: auto;
}
.chat-screen .settings-inner > .chat-body-stack > .chat-char-recall-overlay:not(.is-open) .chat-inner-voice-backdrop {
  pointer-events: none;
}
.chat-char-recall-overlay[hidden] {
  display: none !important;
}
.chat-char-recall-overlay.is-open {
  position: fixed;
  inset: 0;
  z-index: 10036;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  pointer-events: auto;
}
.chat-char-recall-overlay.is-open .chat-inner-voice-backdrop {
  opacity: 1;
}
.chat-char-recall-overlay.is-open .chat-inner-voice-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* ========= 语音通话（#chat-call-screen）：拼贴热线 ========= */
.chat-call-screen {
  background:
    radial-gradient(ellipse 100% 80% at 18% 0%, rgba(var(--tint-rgb), 0.14), transparent 50%),
    radial-gradient(ellipse 90% 70% at 100% 20%, rgba(var(--blush-rgb), 0.1), transparent 48%),
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(var(--tint-rgb), 0.08), transparent 52%),
    var(--bg-device);
}
body.dark .chat-call-screen {
  background:
    radial-gradient(ellipse 100% 80% at 16% 0%, rgba(var(--tint-rgb), 0.18), transparent 52%),
    radial-gradient(ellipse 90% 70% at 100% 18%, rgba(var(--blush-rgb), 0.12), transparent 50%),
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(var(--tint-rgb), 0.1), transparent 55%),
    var(--bg-device);
}
.chat-call-screen .settings-ambient {
  z-index: 0;
}
.call-ambient-fog {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(52px);
}
.call-ambient-fog--c {
  width: min(78vw, 300px);
  height: min(78vw, 300px);
  right: -18%;
  bottom: -6%;
  background: radial-gradient(circle, rgba(var(--tint-rgb), 0.42), transparent 68%);
  opacity: 0.38;
}
.call-ambient-fog--d {
  width: min(62vw, 240px);
  height: min(62vw, 240px);
  left: -22%;
  top: 14%;
  background: radial-gradient(circle, rgba(var(--blush-rgb), 0.32), transparent 65%);
  opacity: 0.34;
}
.call-ambient-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(
    -12deg,
    transparent,
    transparent 11px,
    rgba(0, 0, 0, 0.04) 11px,
    rgba(0, 0, 0, 0.04) 12px
  );
}
body.dark .call-ambient-noise {
  mix-blend-mode: overlay;
  opacity: 0.07;
  background-image: repeating-linear-gradient(
    -12deg,
    transparent,
    transparent 11px,
    rgba(255, 255, 255, 0.03) 11px,
    rgba(255, 255, 255, 0.03) 12px
  );
}
.call-ambient-ripples {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.call-ambient-ripples-mount {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 1px;
  height: 1px;
}
.call-ambient-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  opacity: 0;
  transform: scale(0.35);
  transform-origin: center center;
  animation: callAmbientRipple 4.5s ease-out infinite;
}
.call-ambient-ripple--b {
  animation-delay: 1.5s;
}
.call-ambient-ripple--c {
  animation-delay: 3s;
}
body.dark .call-ambient-ripple {
  border-color: rgba(255, 255, 255, 0.14);
}
@keyframes callAmbientRipple {
  0% {
    transform: scale(0.35);
    opacity: 0.42;
  }
  70% {
    opacity: 0.06;
  }
  100% {
    transform: scale(14);
    opacity: 0;
  }
}
/* 拨出后等待对方（模型）接听：隐藏转写与输入，仅保留头像区与返回 */
#chat-call-screen[data-call-stage="dialing"] .call-talk-wrap {
  display: none;
}

/* 用户拨出、等待对方接听：全幅居中「响铃」布局 */
#chat-call-screen[data-call-stage="dialing"] .chat-call-grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  align-content: center;
  justify-items: stretch;
  width: 100%;
  max-width: min(440px, 100%);
  margin: 0 auto;
  padding: 8px 16px 20px;
  min-height: min(72vh, 620px);
  gap: 0;
}
#chat-call-screen[data-call-stage="dialing"] .chat-call-side {
  transform: none;
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
@media (min-width: 920px) {
  #chat-call-screen[data-call-stage="dialing"] .chat-call-grid {
    grid-template-columns: 1fr;
    max-width: min(480px, 100%);
    min-height: min(68vh, 640px);
  }
  #chat-call-screen[data-call-stage="dialing"] .chat-call-side {
    transform: none;
  }
}
#chat-call-screen[data-call-stage="dialing"] .call-hero {
  padding: 28px 20px 22px;
  border-radius: 28px 22px 26px 24px / 24px 28px 22px 26px;
}
#chat-call-screen[data-call-stage="dialing"] .call-hero-visual {
  width: min(200px, 52vw);
  height: min(200px, 52vw);
  max-width: 220px;
  max-height: 220px;
  margin: 10px auto 8px;
}
#chat-call-screen[data-call-stage="dialing"] .call-hero-av {
  width: min(120px, 32vw);
  height: min(120px, 32vw);
  max-width: 140px;
  max-height: 140px;
}
#chat-call-screen[data-call-stage="dialing"] .call-hero-title {
  font-size: clamp(1.2rem, 4.2vw, 1.45rem);
}
#chat-call-screen[data-call-stage="dialing"] .call-hero-sub {
  font-size: 0.86rem;
  opacity: 0.92;
}

.call-outbound-dock {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin-top: 16px;
  padding: 0 4px max(6px, env(safe-area-inset-bottom, 0px));
  position: relative;
}
#chat-call-screen[data-call-stage="dialing"] .call-outbound-dock {
  display: flex;
}
.call-outbound-pulse-ring {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  place-items: center;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
#chat-call-screen[data-call-stage="dialing"] .call-outbound-pulse-ring {
  display: grid;
}
.call-outbound-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: callOutboundRipple 2.1s ease-out infinite;
}
.call-outbound-wave--b,
.call-outbound-wave--c {
  display: none;
}
body.dark .call-outbound-wave {
  border-color: rgba(255, 255, 255, 0.22);
}
@keyframes callOutboundRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.72;
  }
  70% {
    opacity: 0.1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.6);
    opacity: 0;
  }
}
.call-outbound-cancel {
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: min(88px, 22vw);
  height: min(88px, 22vw);
  min-width: 72px;
  min-height: 72px;
  max-width: 96px;
  max-height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.38) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 28px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
body.dark .call-outbound-cancel {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 32px rgba(0, 0, 0, 0.35);
}
.call-outbound-cancel:hover,
.call-outbound-cancel:focus-visible {
  transform: scale(1.04);
  border-color: rgba(var(--tint-rgb), 0.35);
  outline: none;
}
body.dark .call-outbound-cancel:hover,
body.dark .call-outbound-cancel:focus-visible {
  border-color: rgba(var(--tint-rgb), 0.45);
}
.call-outbound-cancel:active {
  transform: scale(0.97);
}
.call-outbound-cancel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-main);
}
.call-outbound-cancel-inner i {
  font-size: 1.65rem;
  line-height: 1;
  opacity: 0.88;
}
.call-outbound-cancel-label {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.call-ambient-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 70% at 50% 42%, transparent 36%, rgba(0, 0, 0, 0.1) 100%);
  mix-blend-mode: multiply;
}
body.dark .call-ambient-vignette {
  mix-blend-mode: normal;
  background: radial-gradient(ellipse 78% 68% at 50% 40%, transparent 28%, rgba(0, 0, 0, 0.62) 100%);
  opacity: 0.9;
}
.call-float-bits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.call-bit {
  position: absolute;
  border-radius: 40% 60% 70% 30% / 45% 35% 65% 55%;
  opacity: 0.22;
  filter: blur(0.3px);
  animation: none;
}
.call-bit--a {
  width: 22px;
  height: 18px;
  left: 8%;
  top: 38%;
  background: rgba(var(--tint-rgb), 0.55);
  --call-rot: -18deg;
}
.call-bit--b {
  width: 14px;
  height: 14px;
  right: 14%;
  top: 52%;
  background: rgba(var(--blush-rgb), 0.45);
  --call-rot: 22deg;
}
.call-bit--c {
  width: 40px;
  height: 8px;
  left: 22%;
  bottom: 18%;
  background: rgba(255, 255, 255, 0.22);
  --call-rot: -8deg;
}
.call-bit--d {
  width: 10px;
  height: 28px;
  right: 6%;
  bottom: 26%;
  background: rgba(var(--tint-rgb), 0.3);
  --call-rot: 12deg;
}

.chat-call-screen .settings-watermark.chat-watermark {
  display: block;
  opacity: 0.06;
  right: 5%;
  bottom: 18%;
  font-size: clamp(2.2rem, 8vw, 3.1rem);
  letter-spacing: 0.2em;
  transform: rotate(-9deg) skewX(-2deg);
  text-transform: uppercase;
  font-style: normal;
  font-weight: 200;
  animation: none;
}
body.dark .chat-call-screen .settings-watermark.chat-watermark {
  opacity: 0.09;
}
.chat-call-top-pill {
  font-size: 0.78rem;
  color: var(--text-main);
  border: 1px solid rgba(var(--tint-rgb), 0.18);
  background: rgba(var(--tint-rgb), 0.10);
  padding: 6px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
body.dark .chat-call-top-pill {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.chat-call-top-pill--in-card {
  font-size: 0.72rem;
  padding: 6px 10px;
  white-space: nowrap;
}
.chat-call-topbar {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 0 11px;
  border-radius: 14px 20px 16px 18px / 18px 14px 20px 16px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 12px 36px rgba(0, 0, 0, 0.07);
  transform: rotate(-0.25deg);
}
body.dark .chat-call-topbar {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(40, 42, 48, 0.72), rgba(22, 24, 28, 0.55));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 44px rgba(0, 0, 0, 0.38);
}

/* 与密谈顶栏一致：左右栏等宽，中间「语音通话」相对屏幕水平居中 */
.chat-call-topbar .chat-topbar-left,
.chat-call-topbar .chat-topbar-right {
  flex: 1;
  min-width: 0;
}
.chat-call-topbar .chat-topbar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.chat-call-topbar .chat-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.chat-call-topbar .settings-topbar-meta {
  flex: 0 1 auto;
}

.chat-call-topbar .settings-topbar-meta,
.call-topbar-meta {
  display: flex;
  flex-direction: column;
  padding-left: 4px;
  padding-right: 4px;
  align-items: center;
  text-align: center;
  gap: 1px;
}
.call-topbar-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.call-topbar-flake {
  font-size: 0.88rem;
  line-height: 1;
  opacity: 0.38;
  transform: rotate(12deg) translateY(-1px);
  animation: callFlakeSpin 24s linear infinite;
}
@keyframes callFlakeSpin {
  to { transform: rotate(378deg) translateY(-1px); }
}
.call-topbar-meta .settings-topbar-eyebrow {
  transform: rotate(-0.45deg);
  margin-top: 1px;
  opacity: 0.88;
}
.call-topbar-kicker {
  display: block;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.72;
  margin-top: 2px;
}
body.dark .call-topbar-kicker {
  color: rgba(255, 255, 255, 0.45);
  opacity: 0.85;
}
.call-channel-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(var(--blush-rgb), 0.95);
  box-shadow: 0 0 0 3px rgba(var(--blush-rgb), 0.2);
  animation: callChannelPulse 1.6s ease-in-out infinite;
}
@keyframes callChannelPulse {
  0%, 100% { opacity: 0.65; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.05); }
}
.call-topbar-channel .widget-label {
  margin: 0;
}
.chat-call-screen.chat-screen .settings-topbar.chat-call-topbar {
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  padding-bottom: 10px;
}
.chat-call-screen .settings-inner {
  overflow: visible;
  position: relative;
  z-index: 1;
  background: transparent;
}
.chat-call-body {
  height: calc(100% - 54px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px) + var(--call-keyboard-inset, 0px));
  box-sizing: border-box;
}
.chat-call-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.chat-call-grid {
  flex: 1;
  min-height: 0;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 0 10px 0 14px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.chat-call-side {
  display: grid;
  gap: 14px;
  transform: rotate(0.12deg);
}

@media (min-width: 920px) {
  .chat-call-grid {
    grid-template-columns: minmax(200px, 248px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px 20px;
    padding: 0 12px 0 20px;
    align-items: stretch;
  }
  .chat-call-side {
    position: sticky;
    top: 72px;
    transform: rotate(-0.35deg) translateY(4px);
    align-self: start;
  }
  .call-talk-wrap {
    transform: rotate(0.35deg) translateY(-2px);
    min-height: 0;
    align-self: stretch;
  }
}

.chat-call-screen .settings-ambient-blob {
  opacity: 0.42;
  filter: blur(30px) saturate(1.15);
}
body.dark .chat-call-screen .settings-ambient-blob {
  opacity: 0.38;
  filter: blur(32px) saturate(1.05);
}
.call-hero {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.16) 100%);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 20px 50px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(var(--tint-rgb), 0.06);
  padding: 22px 18px 20px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  position: relative;
  overflow: visible;
  transform: rotate(-0.35deg);
  animation: none;
}
.call-hero--collage {
  margin-top: 2px;
}
body.dark .call-hero {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(44, 46, 52, 0.75) 0%, rgba(24, 26, 30, 0.58) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 56px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(var(--tint-rgb), 0.1);
}
.call-hero-tape {
  position: absolute;
  height: 20px;
  width: 52px;
  background: linear-gradient(
    92deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0.65) 100%
  );
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transform: rotate(-5deg);
}
.call-hero-tape--r {
  top: 17%;
  right: 10px;
  width: 44px;
  height: 16px;
  transform: rotate(68deg);
  opacity: 0.42;
}
.call-hero-scrawl {
  position: absolute;
  bottom: 10px;
  left: 9%;
  right: auto;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: rgba(var(--blush-rgb), 0.72);
  transform: rotate(-5deg);
  z-index: 5;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}
body.dark .call-hero-scrawl {
  color: rgba(255, 190, 200, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.call-hero::before {
  content: "";
  position: absolute;
  inset: -32% -16%;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from 140deg,
    rgba(var(--tint-rgb), 0.18),
    rgba(var(--blush-rgb), 0.12),
    transparent 40%,
    rgba(var(--tint-rgb), 0.1),
    rgba(255, 255, 255, 0.06),
    transparent 68%
  );
  opacity: 0.38;
  animation: none;
}
.call-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, transparent 40%, transparent 65%, rgba(0, 0, 0, 0.03) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.75;
}
body.dark .call-hero::after {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.1) 0%, transparent 45%);
  mix-blend-mode: normal;
  opacity: 1;
}
.call-hero-visual,
.call-hero-title,
.call-hero-sub,
.call-hero-pillrow,
.call-hero-field {
  position: relative;
  z-index: 2;
}
.call-hero-visual {
  position: relative;
  width: 152px;
  height: 152px;
  margin: 6px auto 4px;
  display: grid;
  place-items: center;
  z-index: 2;
  animation: none;
}
.call-hero-visual::before {
  content: "";
  position: absolute;
  width: 118%;
  height: 118%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 44%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(var(--tint-rgb), 0.22) 28%,
    rgba(var(--blush-rgb), 0.1) 48%,
    transparent 68%
  );
  filter: blur(8px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  animation: none;
}
body.dark .call-hero-visual::before {
  background: radial-gradient(
    circle at 50% 44%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(var(--tint-rgb), 0.28) 32%,
    rgba(var(--blush-rgb), 0.12) 52%,
    transparent 72%
  );
  opacity: 0.65;
}
#chat-call-screen[data-call-stage="connected"] .call-hero-visual::before {
  opacity: 0.58;
}
.call-hero-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
.call-orbit-ring {
  position: absolute;
  width: 124px;
  height: 108px;
  border-radius: 52% 48% 55% 45% / 48% 52% 46% 54%;
  border: 1px solid rgba(var(--tint-rgb), 0.22);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.call-orbit-ring--b {
  width: 138px;
  height: 120px;
  border-color: rgba(var(--blush-rgb), 0.16);
  border-radius: 45% 55% 48% 52% / 55% 45% 52% 48%;
}
.call-orbit-ring--c {
  width: 154px;
  height: 132px;
  border-color: rgba(255, 255, 255, 0.28);
  border-radius: 58% 42% 62% 38% / 42% 58% 44% 56%;
}
.call-orbit-ring--b,
.call-orbit-ring--c {
  display: none;
}
#chat-call-screen[data-call-stage="dialing"] .call-orbit-ring,
#chat-call-screen[data-call-stage="connected"] .call-orbit-ring {
  opacity: 0.4;
  animation: none;
}
.call-hero-av {
  width: 96px;
  height: 96px;
  border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5));
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 1px rgba(var(--tint-rgb), 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  animation: none;
}
body.dark .call-hero-av {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  box-shadow:
    0 0 0 1px rgba(var(--tint-rgb), 0.15),
    0 18px 48px rgba(0, 0, 0, 0.45);
}
.call-hero-av::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(var(--tint-rgb), 0.3), rgba(var(--blush-rgb), 0.1) 45%, transparent 70%);
  filter: blur(6px);
  opacity: 0.0;
  transform: scale(1);
  transition: opacity 220ms ease;
  pointer-events: none;
}
.call-hero-av::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(var(--tint-rgb), 0.25);
  opacity: 0.0;
  pointer-events: none;
}
#chat-call-screen[data-call-stage="dialing"] .call-hero-av::before,
#chat-call-screen[data-call-stage="connected"] .call-hero-av::before {
  opacity: 0.55;
  animation: none;
}
#chat-call-screen[data-call-stage="dialing"] .call-hero-av::after,
#chat-call-screen[data-call-stage="connected"] .call-hero-av::after {
  opacity: 1;
}
.call-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-hero-initial {
  font-weight: 900;
  font-size: 2rem;
  color: var(--text-main);
  letter-spacing: -0.03em;
}
.call-hero-initial.is-hidden {
  visibility: hidden;
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  pointer-events: none;
}
.call-hero-title {
  margin: 0;
  font-size: 1.26rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: rotate(0.25deg);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.dark .call-hero-title {
  text-shadow: 0 1px 18px rgba(var(--tint-rgb), 0.25);
}
.call-hero-sub {
  margin: 0;
  font-size: 0.81rem;
  color: var(--text-sub);
  max-width: 22em;
  transform: translateX(-2px);
  line-height: 1.4;
}
.call-hero-pillrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.call-hero-pill {
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--text-main);
  border: 1px solid rgba(var(--tint-rgb), 0.2);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px 14px 18px 16px / 14px 18px 16px 999px;
  padding: 8px 15px;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: rotate(-0.4deg);
}
body.dark .call-hero-pill {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.call-hero-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(240px, 92%);
  margin: 4px auto 0;
  padding: 0 4px;
}
.call-field-nib {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: rgba(var(--tint-rgb), 0.55);
  box-shadow: 0 0 10px rgba(var(--tint-rgb), 0.35);
  animation: callNibBlink 2.8s ease-in-out infinite;
}
@keyframes callNibBlink {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.call-field-track {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(var(--tint-rgb), 0.15),
    rgba(var(--blush-rgb), 0.35) 42%,
    rgba(var(--tint-rgb), 0.2) 55%,
    rgba(255, 255, 255, 0.35) 100%
  );
  background-size: 200% 100%;
  animation: callFieldFlow 4.5s linear infinite;
  opacity: 0.85;
}
body.dark .call-field-track {
  opacity: 0.9;
  background: linear-gradient(
    90deg,
    rgba(var(--tint-rgb), 0.2),
    rgba(var(--blush-rgb), 0.4) 45%,
    rgba(var(--tint-rgb), 0.25) 58%,
    rgba(255, 255, 255, 0.12) 100%
  );
  background-size: 200% 100%;
}
#chat-call-screen[data-call-stage="connected"] .call-field-track {
  animation-duration: 3.2s;
}
@keyframes callFieldFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.call-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.call-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--blush-rgb), 0.95);
  box-shadow: 0 0 0 4px rgba(var(--blush-rgb), 0.18);
  opacity: 0.9;
}
@keyframes callDotPulse {
  0%, 100% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 4px rgba(var(--blush-rgb), 0.14); }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 8px rgba(var(--blush-rgb), 0.12); }
}
#chat-call-screen[data-call-stage="dialing"] .call-live-dot {
  animation: callDotPulse 0.9s ease-in-out infinite;
}
#chat-call-screen[data-call-stage="connected"] .call-live-dot {
  animation: callDotPulse 1.4s ease-in-out infinite;
}

.call-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}
.call-wave > span {
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: rgba(var(--tint-rgb), 0.55);
  transform-origin: bottom;
  opacity: 0.0;
}
body.dark .call-wave > span {
  background: rgba(255, 255, 255, 0.42);
}
@keyframes callWaveBar {
  0%, 100% { transform: scaleY(0.5); opacity: 0.7; }
  50% { transform: scaleY(1.45); opacity: 1; }
}
#chat-call-screen[data-call-stage="connected"] .call-wave > span {
  opacity: 1;
  animation: callWaveBar 0.85s ease-in-out infinite;
}
#chat-call-screen[data-call-stage="connected"] .call-wave > span:nth-child(2) { animation-delay: 0.12s; }
#chat-call-screen[data-call-stage="connected"] .call-wave > span:nth-child(3) { animation-delay: 0.24s; }
#chat-call-screen[data-call-stage="connected"] .call-wave > span:nth-child(4) { animation-delay: 0.36s; }
#chat-call-screen[data-call-stage="dialing"] .call-wave { display: none; }
#chat-call-screen[data-call-stage="connected"] .call-live-dot { display: none; }

/* 通话页动效收敛：仅保留计时条波形 + 笔迹区（nib / 轨道线） */
#chat-call-screen .call-ambient-ripple,
#chat-call-screen .call-outbound-wave,
#chat-call-screen .call-topbar-flake,
#chat-call-screen .call-channel-dot,
#chat-call-screen .call-live-dot {
  animation: none !important;
}
#chat-call-screen .chat-msg,
#chat-call-screen .chat-msg-bubble--typing::after,
#chat-call-screen .chat-typing > span {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #chat-call-screen .call-wave > span,
  #chat-call-screen .call-field-nib,
  #chat-call-screen .call-field-track {
    animation: none !important;
  }
}

/* 接通后：窄屏头像区收紧，对白轨多占高度；桌面侧栏略窄以让对话更宽 */
@media (max-width: 919px) {
  #chat-call-screen[data-call-stage="connected"] .chat-call-grid {
    gap: 10px;
    padding: 0 8px 0 10px;
  }
  #chat-call-screen[data-call-stage="connected"] .call-hero {
    padding: 10px 12px 10px;
    gap: 5px;
  }
  #chat-call-screen[data-call-stage="connected"] .call-hero-visual {
    width: min(104px, 27vw);
    height: min(104px, 27vw);
    margin: 2px auto 0;
  }
  #chat-call-screen[data-call-stage="connected"] .call-hero-av {
    width: 64px;
    height: 64px;
  }
  #chat-call-screen[data-call-stage="connected"] .call-orbit-ring {
    width: 86px;
    height: 74px;
  }
  #chat-call-screen[data-call-stage="connected"] .call-orbit-ring--b {
    width: 96px;
    height: 82px;
  }
  #chat-call-screen[data-call-stage="connected"] .call-orbit-ring--c {
    width: 106px;
    height: 90px;
  }
  #chat-call-screen[data-call-stage="connected"] .call-hero-title {
    font-size: clamp(0.92rem, 3.6vw, 1.1rem);
  }
  #chat-call-screen[data-call-stage="connected"] .call-hero-sub {
    font-size: 0.72rem;
    line-height: 1.35;
  }
  #chat-call-screen[data-call-stage="connected"] .call-hero-initial {
    font-size: 1.45rem;
  }
}
@media (min-width: 920px) {
  #chat-call-screen[data-call-stage="connected"] .call-hero-visual {
    width: 128px;
    height: 128px;
    margin: 4px auto 2px;
  }
  #chat-call-screen[data-call-stage="connected"] .call-hero-av {
    width: 80px;
    height: 80px;
  }
}

.call-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 8px 12px;
  padding: 14px 14px 16px;
  border-radius: 20px 14px 22px 16px / 16px 20px 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12));
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 14px 36px rgba(0, 0, 0, 0.07);
  transform: rotate(0.2deg);
}
body.dark .call-actions {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(175deg, rgba(38, 40, 46, 0.65), rgba(20, 22, 26, 0.48));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 16px 40px rgba(0, 0, 0, 0.36);
}
@media (min-width: 920px) {
  .call-actions {
    gap: 10px 14px;
    padding: 16px 16px 18px;
  }
}
.call-action {
  appearance: none;
  flex: 1 1 88px;
  min-width: 0;
  max-width: 140px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.58);
  border-radius: 16px 12px 14px 18px / 14px 16px 18px 12px;
  padding: 11px 9px 10px;
  display: grid;
  justify-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.call-action:nth-child(1) {
  transform: rotate(-1.2deg) translateY(1px);
}
.call-action:nth-child(2) {
  transform: translateY(-3px) rotate(0.6deg);
}
.call-action:nth-child(3) {
  transform: rotate(1.4deg) translateY(0) scale(1.02);
}
.call-action:hover,
.call-action:focus-visible {
  transform: translateY(-3px) rotate(0deg) scale(1.02);
  z-index: 2;
  border-color: rgba(var(--tint-rgb), 0.38);
  box-shadow:
    0 8px 22px rgba(var(--tint-rgb), 0.12),
    0 0 0 1px rgba(var(--tint-rgb), 0.08);
}
body.dark .call-action:hover,
body.dark .call-action:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.call-action:active {
  transform: scale(0.97) rotate(0deg);
}
body.dark .call-action {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}
.call-action-ic {
  width: 42px;
  height: 42px;
  border-radius: 14px 10px 12px 12px / 12px 14px 10px 14px;
  display: grid;
  place-items: center;
  background: rgba(var(--tint-rgb), 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 8px 18px rgba(0, 0, 0, 0.06);
}
body.dark .call-action-ic { background: rgba(255, 255, 255, 0.1); }
.call-action-ic i { font-size: 20px; }
.call-action-t { font-size: 0.72rem; font-weight: 800; color: var(--text-main); letter-spacing: 0.02em; }
body.dark .call-action-t { color: rgba(255, 255, 255, 0.92); }
.call-action[aria-pressed="true"] {
  border-color: rgba(var(--tint-rgb), 0.45);
  background: rgba(var(--tint-rgb), 0.16);
}
body.dark .call-action[aria-pressed="true"] {
  border-color: rgba(var(--tint-rgb), 0.4);
  background: rgba(var(--tint-rgb), 0.14);
}
.call-action--danger {
  border-color: rgba(var(--blush-rgb), 0.45);
  background: rgba(var(--blush-rgb), 0.18);
}
body.dark .call-action--danger {
  border-color: rgba(var(--blush-rgb), 0.42);
  background: rgba(var(--blush-rgb), 0.22);
}
.call-action--danger .call-action-ic { background: rgba(var(--blush-rgb), 0.28); }

.chat-call-profile3,
.chat-call-profile3-av,
.chat-call-profile3-img,
.chat-call-profile3-initial,
.chat-call-profile3-title,
.chat-call-profile3-sub {
  display: none !important;
}

.chat-call-card {
  border-radius: 18px 22px 16px 20px / 20px 16px 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.14) 100%);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 18px 48px rgba(0, 0, 0, 0.08);
  padding: 15px 13px 13px;
}
body.dark .chat-call-card {
  border-color: rgba(255, 255, 255, 0.13);
  background: linear-gradient(168deg, rgba(46, 48, 54, 0.72) 0%, rgba(22, 24, 28, 0.55) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 52px rgba(0, 0, 0, 0.4);
}
.chat-call-card-top {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
}
.chat-call-card-meta {
  min-width: 0;
}
.chat-call-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-call-card-av {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--tint-rgb), 0.18);
  background: rgba(var(--tint-rgb), 0.10);
  display: grid;
  place-items: center;
}
body.dark .chat-call-card-av {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.chat-call-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-call-card-initial {
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--text-main);
}
.chat-call-card-kicker {
  display: none;
}
.chat-call-card-title {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-call-card-sub {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-sub);
  background: rgba(var(--tint-rgb), 0.08);
  border: 1px solid rgba(var(--tint-rgb), 0.16);
  border-radius: 999px;
  padding: 6px 10px;
  width: fit-content;
}
body.dark .chat-call-card-sub {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}
.chat-call-card-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.chat-call-actionbtn {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  padding: 10px 10px 9px;
  display: grid;
  justify-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.dark .chat-call-actionbtn {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
}
.chat-call-actionbtn:active { transform: scale(0.98); }
.chat-call-actionbtn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.18); }
.chat-call-actionbtn-ic {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(var(--tint-rgb), 0.10);
}
body.dark .chat-call-actionbtn-ic {
  background: rgba(255, 255, 255, 0.08);
}
.chat-call-actionbtn-ic i { font-size: 20px; }
.chat-call-actionbtn-t {
  font-size: 0.78rem;
  color: var(--text-main);
  font-weight: 900;
}
body.dark .chat-call-actionbtn-t { color: rgba(255, 255, 255, 0.9); }
.chat-call-actionbtn[aria-pressed="true"] {
  border-color: rgba(var(--tint-rgb), 0.34);
  background: rgba(var(--tint-rgb), 0.10);
}
body.dark .chat-call-actionbtn[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
}
.chat-call-actionbtn--danger {
  border-color: rgba(var(--blush-rgb), 0.35);
  background: rgba(var(--blush-rgb), 0.14);
}
body.dark .chat-call-actionbtn--danger {
  border-color: rgba(var(--blush-rgb), 0.35);
  background: rgba(var(--blush-rgb), 0.18);
}
.chat-call-actionbtn--danger .chat-call-actionbtn-ic {
  background: rgba(var(--blush-rgb), 0.18);
}

.call-talk-wrap {
  position: relative;
  min-height: 0;
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin-top: -4px;
  padding-top: 4px;
}
@media (min-width: 920px) {
  .call-talk-wrap {
    margin-top: 0;
    padding-top: 0;
  }
}
.call-talk-pin {
  position: absolute;
  top: 4px;
  left: 24%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 26%, #ffb3be 0%, #e85d6f 42%, #a83245 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 2px 6px rgba(180, 40, 60, 0.35);
  z-index: 4;
  pointer-events: none;
}
body.dark .call-talk-pin {
  background: radial-gradient(circle at 28% 26%, #ffc4ce 0%, #f07082 42%, #c04055 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 2px 8px rgba(0, 0, 0, 0.45);
}

.chat-call-card--talk {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 7px;
  align-content: stretch;
  overflow: hidden;
  padding: 11px 10px 9px;
}
/* 软键盘展开：隐藏静音/免提/挂断条，避免压在输入框上；输入条随 visualViewport 贴键盘 */
#chat-call-screen.is-call-ime .chat-call-card--talk > .call-actions--dock {
  display: none !important;
}
#chat-call-screen.is-call-ime .chat-call-card--talk {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#chat-call-screen.is-call-ime .chat-call-card--talk > .chat-call-composer2 {
  position: relative;
  z-index: 2;
}
.chat-call-card--talk > .chat-call-composer2 {
  min-height: 0;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  padding: 7px 8px 4px;
}
.chat-call-card--talk .chat-call-input2 {
  min-height: 42px;
  padding: 9px 11px;
}
.chat-call-card--talk .chat-call-send2 {
  width: 42px;
  height: 42px;
}
.chat-call-card--talk .chat-call-send2 i {
  font-size: 17px;
}
.chat-call-card--talk > .call-actions--dock {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  transform: none;
  gap: 6px 8px;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  border-radius: 16px 12px 18px 14px / 14px 16px 12px 16px;
}
.chat-call-card--talk > .call-actions--dock .call-action {
  flex: 1 1 68px;
  max-width: 112px;
  padding: 6px 6px 5px;
  gap: 4px;
  border-radius: 13px 10px 12px 14px / 12px 13px 14px 10px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.05);
}
.chat-call-card--talk > .call-actions--dock .call-action:nth-child(3) {
  transform: rotate(1deg) translateY(0) scale(1);
}
.chat-call-card--talk > .call-actions--dock .call-action-ic {
  width: 34px;
  height: 34px;
  border-radius: 11px 9px 10px 10px / 10px 11px 9px 11px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 5px 12px rgba(0, 0, 0, 0.05);
}
.chat-call-card--talk > .call-actions--dock .call-action-ic i {
  font-size: 17px;
}
.chat-call-card--talk > .call-actions--dock .call-action-t {
  font-size: 0.62rem;
  font-weight: 700;
}
@media (min-width: 920px) {
  .chat-call-card--talk > .call-actions--dock {
    gap: 7px 10px;
    padding: 9px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
}
.call-talk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 4px;
}
.chat-call-card--talk .call-talk-head {
  gap: 8px;
  padding: 0 1px 1px;
}
.call-talk-head-tag {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.62;
}
.call-talk-head-tag--r {
  letter-spacing: 0.12em;
  text-transform: none;
  font-size: 0.58rem;
  opacity: 0.52;
}
body.dark .call-talk-head-tag {
  color: rgba(255, 255, 255, 0.38);
}
body.dark .call-talk-head-tag--r {
  color: rgba(255, 255, 255, 0.42);
}
.call-talk-head-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--tint-rgb), 0.28) 22%,
    rgba(var(--blush-rgb), 0.22) 50%,
    rgba(var(--tint-rgb), 0.15) 78%,
    transparent 100%
  );
  opacity: 0.75;
}
.chat-call-talk-scroll {
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  border-radius: 16px 12px 18px 14px / 14px 16px 12px 18px;
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  padding: 9px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.chat-call-card--talk .chat-call-talk-scroll {
  padding: 8px 9px;
}
body.dark .chat-call-talk-scroll {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.chat-call-talk-scroll > .chat-messages,
.chat-call-talk-scroll > .call-transcript-list {
  padding: 4px 2px;
}
.chat-call-chipbtn[aria-pressed="true"] {
  border-color: rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.10);
}
body.dark .chat-call-chipbtn[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}
.chat-call-hangup,
body.dark .chat-call-hangup {
  display: none !important;
}
.chat-call-iconbtn2 {
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text-main);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-call-iconbtn2 i { font-size: 18px; }
body.dark .chat-call-iconbtn2 {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
}
.chat-call-iconbtn2:active { transform: scale(0.98); }
.chat-call-iconbtn2:focus-visible { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.18); }
.chat-call-iconbtn2[aria-pressed="true"] {
  background: rgba(var(--tint-rgb), 0.14);
  border-color: rgba(var(--tint-rgb), 0.30);
}
body.dark .chat-call-iconbtn2[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
}
.chat-call-iconbtn2--danger {
  background: rgba(255, 76, 92, 0.12);
  border-color: rgba(255, 76, 92, 0.26);
}
body.dark .chat-call-iconbtn2--danger {
  background: rgba(255, 76, 92, 0.14);
  border-color: rgba(255, 76, 92, 0.24);
}
.chat-call-captions {
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.12);
  padding: 10px 10px 10px;
  overflow: hidden;
}
body.dark .chat-call-captions {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(20, 22, 27, 0.48);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
}
#chat-call-transcript {
  display: block;
}
#chat-call-transcript::-webkit-scrollbar {
  width: 10px;
}
#chat-call-transcript::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}
body.dark #chat-call-transcript::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
}

/* 语音通话：脚本式对白轨（非气泡）；括号内为声音/状态 */
.call-transcript-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-main);
}
.call-transcript-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 10px 4px 11px;
  border-bottom: 1px dashed rgba(var(--tint-rgb), 0.14);
}
.call-transcript-row:last-child {
  border-bottom: none;
}
body.dark .call-transcript-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.call-transcript-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.call-transcript-speaker {
  font-weight: 650;
  color: var(--text-main);
  letter-spacing: 0.01em;
}
.call-transcript-row--assistant .call-transcript-speaker {
  color: rgba(var(--blush-rgb), 0.95);
}
.call-transcript-row--user .call-transcript-speaker {
  color: rgba(var(--tint-rgb), 0.92);
}
.call-transcript-time {
  font-family: "Space Mono", ui-monospace, monospace;
  opacity: 0.78;
}
.call-transcript-body {
  white-space: pre-wrap;
  word-break: break-word;
  padding-left: 1px;
  -webkit-user-select: text;
  user-select: text;
}
.call-transcript-body--restoring {
  font-size: 0.85em;
  color: var(--text-sub);
  opacity: 0.92;
}
body.dark .call-transcript-body--restoring {
  color: rgba(255, 255, 255, 0.52);
}
.call-transcript-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.call-transcript-seg {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.call-transcript-trans {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-sub);
  opacity: 0.88;
  padding: 0 1px 0 2px;
  border-left: 2px solid rgba(var(--tint-rgb), 0.28);
  margin-left: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}
body.dark .call-transcript-trans {
  color: rgba(255, 255, 255, 0.45);
  border-left-color: rgba(255, 255, 255, 0.14);
}

/* 主聊天：通话结束后的时间戳式一行，点击打开通话转写弹窗 */
.chat-time-divider--call-transcript {
  margin: 0;
  padding: 8px 0 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.chat-time-divider--call-transcript:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 2px;
  border-radius: 12px;
}
.chat-time-divider--call-transcript .chat-time-divider-label {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-time-divider--call-transcript:hover .chat-time-divider-label {
  border-color: rgba(var(--tint-rgb), 0.35);
  background: rgba(var(--tint-rgb), 0.1);
}
body.dark .chat-time-divider--call-transcript:hover .chat-time-divider-label {
  background: rgba(var(--tint-rgb), 0.12);
}
.chat-call-transcript-peek-scroll {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 6px 4px 8px;
  -webkit-overflow-scrolling: touch;
}
.chat-call-transcript-peek-scroll .call-transcript-row {
  padding: 8px 2px 9px;
  font-size: 0.76rem;
}

/* 与正文同色同字重，不单独高亮（仍保留 span 便于以后扩展） */
.call-transcript-stage {
  font-style: inherit;
  color: inherit;
  opacity: 1;
}
.chat-call-composer2 {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 10px;
  align-items: end;
  padding: 9px 9px 5px;
  margin: 0 -2px;
  border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12));
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  transform: rotate(-0.12deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
body.dark .chat-call-composer2 {
  border-color: rgba(255, 255, 255, 0.11);
  background: linear-gradient(175deg, rgba(36, 38, 44, 0.55), rgba(16, 18, 22, 0.42));
}
.chat-call-messages-stack {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.dark .chat-call-messages-stack {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.chat-call-messages-stack > .chat-messages,
.chat-call-messages-stack > .call-transcript-list {
  padding: 4px 2px;
}
.chat-call-input2 {
  width: 100%;
  resize: none;
  min-height: 46px;
  max-height: 120px;
  padding: 12px 13px;
  border-radius: 12px 14px 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text-main);
  outline: none;
  line-height: 1.28;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
body.dark .chat-call-input2 {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.chat-call-input2:focus-visible { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.18); }
.chat-call-send2 {
  appearance: none;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  border: 1px solid rgba(var(--tint-rgb), 0.28);
  background: linear-gradient(155deg, rgba(var(--tint-rgb), 0.22), rgba(var(--blush-rgb), 0.14));
  color: var(--text-main);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 16px rgba(var(--tint-rgb), 0.12);
}
body.dark .chat-call-send2 {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(var(--tint-rgb), 0.32);
  background: linear-gradient(155deg, rgba(var(--tint-rgb), 0.32), rgba(var(--blush-rgb), 0.14));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 8px 20px rgba(0, 0, 0, 0.38);
}
.chat-call-send2:active { transform: scale(0.96); }
.chat-call-send2:focus-visible { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.25); }
.chat-call-send2 i { font-size: 19px; }

.chat-call-controls3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 10px;
}
.chat-call-roundbtn {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text-main);
  border-radius: 22px;
  padding: 12px 10px 10px;
  display: grid;
  justify-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-call-roundbtn i { font-size: 20px; }
.chat-call-roundbtn-t {
  font-size: 0.78rem;
  color: var(--text-sub);
}
body.dark .chat-call-roundbtn {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
}
body.dark .chat-call-roundbtn-t { color: rgba(255, 255, 255, 0.72); }
.chat-call-roundbtn:active { transform: scale(0.98); }
.chat-call-roundbtn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.18); }
.chat-call-roundbtn[aria-pressed="true"] {
  background: rgba(var(--tint-rgb), 0.14);
  border-color: rgba(var(--tint-rgb), 0.30);
}
body.dark .chat-call-roundbtn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
}
.chat-call-roundbtn--danger {
  background: rgba(255, 76, 92, 0.16);
  border-color: rgba(255, 76, 92, 0.30);
}
body.dark .chat-call-roundbtn--danger {
  background: rgba(255, 76, 92, 0.18);
  border-color: rgba(255, 76, 92, 0.26);
}
.chat-char-recall-overlay .chat-inner-voice-panel.chat-char-recall-dialog {
  width: min(540px, calc(100vw - 28px));
  height: auto;
  max-height: min(78vh, 640px);
}
@media (prefers-reduced-motion: reduce) {
  .chat-char-recall-overlay .chat-inner-voice-panel {
    transform: none;
    transition: opacity 0.14s ease;
  }
}
.chat-char-recall-overlay .chat-inner-voice-mount .chat-slab-mat {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.chat-char-recall-overlay .chat-slab-spine,
.chat-char-recall-overlay .chat-slab-tape,
.chat-char-recall-overlay .chat-inner-voice-ornament {
  display: none !important;
}
.chat-char-recall-overlay .chat-inner-voice-mount .chat-slab-mat::before {
  display: none !important;
}
.chat-char-recall-overlay .chat-inner-voice-mount .chat-slab-mat {
  padding: 14px 14px 16px;
}
.chat-char-recall-overlay .chat-inner-voice-mount .chat-inner-voice-slab-panel.chat-slab-panel {
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 14px 16px 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 18px 60px rgba(0, 0, 0, 0.06);
}
body.dark .chat-char-recall-overlay .chat-inner-voice-mount .chat-inner-voice-slab-panel.chat-slab-panel {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 22px 70px rgba(0, 0, 0, 0.38);
}
.chat-char-recall-field-k {
  margin-top: 10px;
  margin-bottom: 4px;
}
.chat-char-recall-overlay .chat-inner-voice-slab-panel > .chat-char-recall-field-k:first-of-type {
  margin-top: 0;
}
.chat-char-recall-pre {
  margin: 0;
  padding: 12px 12px;
  max-height: min(36vh, 240px);
  overflow: auto;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-main);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 12px 28px rgba(0, 0, 0, 0.04);
}
body.dark .chat-char-recall-pre {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px rgba(0, 0, 0, 0.28);
}
.chat-char-recall-pre--sub {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-sub);
}
.chat-char-recall-foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chat-detail-bg-status {
  margin-top: 4px;
  font-size: 0.68rem;
}
.chat-detail-bg-actions {
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
@keyframes chat-msg-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chat-msg {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  opacity: 1;
  animation: none;
}
.chat-msg.chat-msg--animate-in {
  opacity: 0;
  animation: chat-msg-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.chat-msg--user {
  align-items: flex-end;
}
.chat-msg--assistant,
.chat-msg--system {
  align-items: flex-start;
}
.chat-msg .chat-msg-inner {
  width: auto;
  max-width: 100%;
}
/* 线下晤页：Date 栏右侧轻工具栏 */
#chat-offline-screen .chat-f2f-diary-actions .chat-msg-quick {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}
#chat-offline-screen .chat-msg-quick {
  position: absolute;
  top: 0.38rem;
  right: 0.42rem;
  z-index: 5;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  margin: 0;
  padding: 2px 1px;
  flex-shrink: 0;
  line-height: 1;
}
#chat-offline-screen .chat-msg-quick-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  box-sizing: border-box;
  background: transparent;
  color: var(--text-sub);
  font-size: 0.76rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0.44;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
#chat-offline-screen .chat-msg-quick-btn:hover {
  opacity: 0.92;
  color: var(--text-main);
  background-color: rgba(var(--tint-rgb), 0.07);
}
#chat-offline-screen .chat-msg-quick-btn:focus-visible {
  opacity: 1;
  outline: 1px solid rgba(var(--tint-rgb), 0.35);
  outline-offset: 2px;
}
#chat-offline-screen .chat-msg-quick-btn:active {
  opacity: 1;
}
#chat-offline-screen .chat-msg-quick-btn--del {
  color: var(--text-sub);
}
#chat-offline-screen .chat-msg-quick-btn--del:hover {
  opacity: 0.95;
  color: #b06054;
  background-color: rgba(180, 96, 84, 0.06);
}
body.dark #chat-offline-screen .chat-msg-quick-btn {
  color: rgba(255, 255, 255, 0.42);
  opacity: 0.48;
}
body.dark #chat-offline-screen .chat-msg-quick-btn:hover {
  opacity: 0.95;
  color: rgba(255, 255, 255, 0.88);
  background-color: rgba(255, 255, 255, 0.06);
}
body.dark #chat-offline-screen .chat-msg-quick-btn--del:hover {
  color: #e09888;
  background-color: rgba(224, 152, 136, 0.07);
}
@media (prefers-reduced-motion: reduce) {
  #chat-offline-screen .chat-msg-quick-btn {
    transition: none;
  }
}
.chat-msg.chat-msg--instant {
  animation: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg.chat-msg--animate-in {
    animation: none;
    opacity: 1;
  }
}
.chat-msg-bubble--rise {
  opacity: 0;
  animation: chat-msg-rise 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg-bubble--rise {
    animation: none;
    opacity: 1;
  }
}
.chat-msg-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.chat-msg--multi .chat-msg-inner {
  align-items: center;
}
.chat-msg--multi .chat-msg-bubble-stack {
  overflow: visible;
}
#chat-screen.chat-screen--theme-glass .chat-msg--multi .chat-msg-glass-line,
#chat-screen.chat-screen--theme-glass .chat-msg--multi .chat-msg-glass-line .chat-msg-bubble-stack {
  overflow: visible;
}

/* 多选：未选段落退后变暗，选中高亮 + 角标对勾 */
.is-msg-multi .chat-msg-multi-host {
  position: relative;
  cursor: pointer;
  transition:
    filter 0.28s ease,
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.28s ease;
}
.is-msg-multi .chat-msg-multi-host:not(.is-selected) {
  filter: grayscale(78%);
  opacity: 0.36;
  transform: scale(0.985);
}
.is-msg-multi .chat-msg-multi-host.is-selected {
  filter: none;
  opacity: 1;
  transform: scale(1.015);
  box-shadow: 0 0 0 1.5px rgba(18, 18, 18, 0.88);
  z-index: 2;
}
body.dark .is-msg-multi .chat-msg-multi-host.is-selected {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.82);
}
.is-msg-multi .chat-msg-multi-host::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 18px;
  height: 18px;
  background: #121212;
  border-radius: 50%;
  border: 2px solid #fff;
  opacity: 0;
  transform: scale(0);
  transition:
    transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 6;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='216 72 104 184 48 128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.is-msg-multi .chat-msg--assistant .chat-msg-multi-host::after,
.is-msg-multi .chat-msg--system .chat-msg-multi-host::after {
  right: -6px;
}
.is-msg-multi .chat-msg--user .chat-msg-multi-host::after {
  left: -6px;
}
.is-msg-multi .chat-msg-multi-host.is-selected::after {
  opacity: 1;
  transform: scale(1);
}
.is-msg-multi .chat-msg-narration.chat-msg-multi-host::after {
  left: 50%;
  right: auto;
  transform: translateX(-50%) scale(0);
}
.is-msg-multi .chat-msg-narration.chat-msg-multi-host.is-selected::after {
  transform: translateX(-50%) scale(1);
}
.is-msg-multi .chat-msg-multi-host:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.45);
  outline-offset: 3px;
}

/* 多选时隐藏输入栏，底部浮出操作舱 */
#chat-screen.is-msg-multi .chat-composer {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
#chat-screen .chat-composer {
  transition: transform 0.38s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.32s ease;
}
.chat-msg-multi-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.35s ease;
}
body.dark .chat-msg-multi-bar {
  background: rgba(18, 18, 18, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.chat-msg-multi-bar.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.chat-msg-multi-cancel {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 0.88rem;
  font-weight: 400;
  padding: 4px 2px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
body.dark .chat-msg-multi-cancel {
  color: rgba(255, 255, 255, 0.72);
}
.chat-msg-multi-cancel:active {
  opacity: 0.55;
}
.chat-msg-multi-bar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.chat-msg-multi-action {
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 4px 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.dark .chat-msg-multi-action {
  color: #fff;
}
.chat-msg-multi-action:active:not(:disabled) {
  transform: scale(0.96);
}
.chat-msg-multi-action:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.chat-multi-forward-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow: auto;
  margin-top: 8px;
}
.chat-multi-forward-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
body.dark .chat-multi-forward-row {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.chat-multi-forward-cb {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--tint, #121212);
}
.chat-multi-forward-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.chat-multi-forward-title {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-multi-forward-tag {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-sub);
}
body.dark .chat-multi-forward-tag {
  background: rgba(255, 255, 255, 0.08);
}
.chat-multi-forward-empty {
  margin: 12px 0;
  font-size: 0.88rem;
  color: var(--text-sub);
  text-align: center;
}
.chat-multi-forward-card {
  max-height: min(88vh, 640px);
}
.chat-msg-multi-action--delete .chat-msg-multi-count {
  display: inline-block;
  min-width: 1.25rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: #121212;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
body.dark .chat-msg-multi-action--delete .chat-msg-multi-count {
  background: #fff;
  color: #121212;
}
.chat-msg-multi-count:empty {
  display: none;
}
.chat-multi-summary-sheet {
  z-index: 10094;
}
.chat-multi-summary-card {
  width: min(520px, calc(100vw - 24px));
  max-height: min(640px, calc(100dvh - 40px));
}
.chat-multi-summary-ta {
  min-height: 10rem;
  max-height: min(360px, 42vh);
  resize: vertical;
}
.chat-msg--user .chat-msg-inner {
  flex-direction: row-reverse;
}
.chat-screen .chat-msg-avatar {
  display: none !important;
}

.chat-msg-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-main);
  user-select: none;
}
.chat-msg-avatar--user {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  color: var(--accent);
}
.chat-msg-avatar--ph {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.85rem;
}
.chat-msg-avatar--image {
  padding: 0;
  object-fit: cover;
}
.chat-msg-bubble-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex: 0 1 auto;
  max-width: min(100%, 280px);
  min-width: 0;
}
.chat-msg--user .chat-msg-bubble-stack {
  align-items: flex-end;
}
/* 与 user 对称：每条按内容宽度，不要整列拉成最长那条的宽度 */
.chat-msg--assistant .chat-msg-bubble-stack,
.chat-msg--system .chat-msg-bubble-stack {
  align-items: flex-start;
}
.chat-msg--assistant .chat-msg-bubble-stack:has(.chat-msg-bubble--bilingual),
.chat-msg--system .chat-msg-bubble-stack:has(.chat-msg-bubble--bilingual) {
  gap: 11px;
}
/* 消息正文：默认系统 UI（JS 注入前兜底）；有装扮全局字体时由 applyGlobalUiTypography 覆盖 */
#chat-screen .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-offline-screen .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-call-screen .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-video-call-screen .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-screen .chat-photo-polaroid-line,
#chat-screen .chat-photo-polaroid-inner--desc,
#chat-offline-screen .chat-photo-polaroid-line,
#chat-offline-screen .chat-photo-polaroid-inner--desc,
.chat-msg-bubble--voice .chat-voice-reveal {
  font-family: var(--chat-msg-content-font);
}
.chat-msg-block-badge {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fa5151;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.chat-msg--assistant .chat-msg-block-badge {
  top: -5px;
  left: -5px;
}
.chat-msg--user .chat-msg-block-badge {
  top: -5px;
  right: -5px;
}
.chat-msg-bubble {
  position: relative;
  flex: 0 1 auto;
  max-width: min(100%, 280px);
  padding: 11px 14px 12px;
  font-size: 0.8rem;
  line-height: 1.52;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: loose;
  color: var(--text-main);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
}
.chat-msg-bubble--sticker {
  padding: 0;
  max-width: min(100%, 112px);
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}
.chat-sticker-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 112px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* WebKit：避免长按/触控与系统「图片预览」争用导致异常（尤其 WKWebView / iOS） */
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
}
.chat-image-sheet-hint {
  margin: 6px 2px 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-sub);
}
.chat-image-desc-ta {
  min-height: 4.5em;
  resize: vertical;
  line-height: 1.45;
}
.chat-image-file-btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.chat-msg-bubble--typing {
  padding: 11px 12px;
  width: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.chat-msg-bubble--typing::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120px 56px at 16% 0%, rgba(var(--tint-rgb), 0.14), transparent 55%),
    radial-gradient(120px 56px at 84% 100%, rgba(var(--tint-rgb), 0.10), transparent 60%);
  opacity: 0.85;
}
.chat-msg-bubble--typing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 22%,
    transparent 45%,
    transparent 100%
  );
  transform: translateX(-60%);
  opacity: 0.35;
  animation: chatTypingShine 1.65s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.dark .chat-msg-bubble--typing::after {
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 22%,
    transparent 45%,
    transparent 100%
  );
  opacity: 0.26;
}
.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}
.chat-typing > span {
  width: 3px;
  height: 12px;
  border-radius: 99px;
  background:
    linear-gradient(180deg, rgba(var(--tint-rgb), 0.62), rgba(var(--tint-rgb), 0.36));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 20px rgba(0, 0, 0, 0.06);
  transform-origin: 50% 100%;
  animation: chatTypingBar 0.92s ease-in-out infinite;
}
.chat-typing > span:nth-child(2) { animation-delay: 0.14s; height: 9px; opacity: 0.92; }
.chat-typing > span:nth-child(3) { animation-delay: 0.28s; height: 13px; opacity: 0.88; }
@keyframes chatTypingBar {
  0%, 100% { transform: scaleY(0.72); opacity: 0.55; }
  50% { transform: scaleY(1.05); opacity: 1; }
}
@keyframes chatTypingShine {
  0% { transform: translateX(-70%); }
  55% { transform: translateX(135%); }
  100% { transform: translateX(135%); }
}
.chat-msg-bubble-stack .chat-msg-bubble {
  max-width: 100%;
}
.chat-msg--assistant .chat-msg-bubble {
  border-left: 3px solid var(--accent);
}
/* 引用气泡：与 user 同款细边框+阴影，不用左侧色条 */
.chat-msg--assistant .chat-msg-bubble--composer-quote,
.chat-msg--system .chat-msg-bubble--composer-quote {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.chat-msg--system .chat-msg-bubble--composer-quote {
  border-style: solid;
  color: var(--text-main);
  font-size: 0.8rem;
}
.chat-msg--user .chat-msg-bubble {
  background: var(--bg-card);
}
/* 表情包：裸图展示，不吃文字气泡的底色/左边条/圆角（优先级高于上方 role 规则） */
.chat-msg--assistant .chat-msg-bubble--sticker,
.chat-msg--system .chat-msg-bubble--sticker,
.chat-msg--user .chat-msg-bubble--sticker,
#chat-screen .chat-msg--assistant .chat-msg-bubble--sticker,
#chat-screen .chat-msg--system .chat-msg-bubble--sticker,
#chat-screen .chat-msg--user .chat-msg-bubble--sticker {
  padding: 0;
  max-width: min(100%, 112px);
  background: transparent;
  border: none;
  border-left: none;
  box-shadow: none;
  border-radius: 0;
}

/* Fake voice bubble (text stored, UI shows voice) */
.chat-msg-bubble--voice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 140px;
  cursor: pointer;
}
.chat-voice-ico {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  background: rgba(var(--tint-rgb), 0.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  flex-shrink: 0;
}
body.dark .chat-voice-ico {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.chat-voice-ico i { font-size: 1.05rem; color: var(--accent); }
.chat-voice-waves {
  display: grid;
  grid-auto-flow: column;
  align-items: end;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  height: 14px;
  opacity: 0.92;
}
.chat-voice-waves > span {
  width: 3px;
  border-radius: 99px;
  background: rgba(var(--tint-rgb), 0.45);
  height: 6px;
}
.chat-msg--user .chat-voice-waves > span {
  background: rgba(var(--tint-rgb), 0.55);
}
.chat-voice-waves > span:nth-child(2) { height: 12px; }
.chat-voice-waves > span:nth-child(3) { height: 9px; }
.chat-voice-waves > span:nth-child(4) { height: 14px; }
.chat-voice-dur {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  flex-shrink: 0;
}
.chat-voice-reveal {
  margin: 2px 0 0;
  padding: 0 2px;
  font-size: 0.76rem;
  line-height: 1.48;
  color: var(--text-sub);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-user-select: text;
  user-select: text;
  opacity: 0.95;
}
.chat-voice-reveal--trans {
  margin-top: 4px;
  opacity: 0.82;
  font-size: 0.74rem;
}
/* 引用 + 正文：同一气泡内上下分区（己方与对方均可） */
.chat-msg--user .chat-msg-bubble--composer-quote,
.chat-msg--assistant .chat-msg-bubble--composer-quote,
.chat-msg--system .chat-msg-bubble--composer-quote {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 14px 11px;
  -webkit-user-select: text;
  user-select: text;
  -moz-user-select: text;
}
.chat-msg--user .chat-msg-bubble--composer-quote .chat-msg-bubble-quote,
.chat-msg--assistant .chat-msg-bubble--composer-quote .chat-msg-bubble-quote,
.chat-msg--system .chat-msg-bubble--composer-quote .chat-msg-bubble-quote {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-sub);
  opacity: 0.92;
  padding-bottom: 7px;
  margin: 0 -2px 0;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.14);
  white-space: pre-wrap;
  word-break: break-word;
  font-variant-emoji: emoji;
  -webkit-user-select: text;
  user-select: text;
  -moz-user-select: text;
}
.chat-msg-bubble-quote-who {
  font-style: normal;
  font-weight: 600;
  color: var(--text-main);
}
.chat-msg-bubble-quote-sep {
  font-style: normal;
}
.chat-msg-bubble-quote-text {
  font-style: italic;
}
body.dark .chat-msg--user .chat-msg-bubble--composer-quote .chat-msg-bubble-quote,
body.dark .chat-msg--assistant .chat-msg-bubble--composer-quote .chat-msg-bubble-quote,
body.dark .chat-msg--system .chat-msg-bubble--composer-quote .chat-msg-bubble-quote {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.chat-msg--user .chat-msg-bubble--composer-quote .chat-msg-bubble-body,
.chat-msg--assistant .chat-msg-bubble--composer-quote .chat-msg-bubble-body,
.chat-msg--system .chat-msg-bubble--composer-quote .chat-msg-bubble-body {
  margin: 0;
  padding: 1px 0 0;
  font-size: 0.8rem;
  line-height: 1.52;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: loose;
  -webkit-user-select: text;
  user-select: text;
  -moz-user-select: text;
}
.chat-msg-bubble--bilingual {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  -webkit-user-select: text;
  user-select: text;
  -moz-user-select: text;
}
.chat-msg-bubble-trans-rule {
  height: 0;
  margin: 8px 0 7px;
  border: 0;
  border-top: 1px solid rgba(var(--tint-rgb), 0.2);
  flex-shrink: 0;
}
body.dark .chat-msg-bubble-trans-rule {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.chat-msg-bubble-body--primary {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: loose;
}
.chat-msg--assistant .chat-msg-bubble-body--translation,
.chat-msg--system .chat-msg-bubble-body--translation {
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  line-height: 1.48;
  color: var(--text-sub);
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: loose;
}
.chat-msg--assistant .chat-msg-bubble--composer-quote .chat-msg-bubble-body--translation {
  padding-top: 1px;
}
.chat-detail-field--translation-sub {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.chat-msg--system .chat-msg-bubble:not(.chat-msg-bubble--composer-quote) {
  border-style: dashed;
  color: var(--text-sub);
  font-size: 0.72rem;
  box-shadow: none;
  background: var(--bg-card);
  border-left: 3px solid var(--line);
}
.chat-msg-meta {
  display: block;
  margin-top: 8px;
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.88;
}
.chat-composer {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  /* 底缘：取「最小留白」与「安全区」的较大值，避免 18px + inset 在部分 iOS PWA 上过厚 */
  padding: 14px 14px max(18px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg-device);
}
.chat-slab {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: 100%;
}
.chat-slab-spine {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 22px;
  padding-bottom: 10px;
  user-select: none;
}
.chat-slab-spine-line {
  width: 3px;
  height: 48px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.55;
}
.chat-slab-spine-idx {
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  letter-spacing: 0.18em;
  color: var(--text-sub);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateX(1px);
}
.chat-slab-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-composer-cap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 0 2px;
}
.chat-composer-cap-l {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-main);
  opacity: 0.9;
}
.chat-composer-cap-dispatch-label {
  flex-shrink: 0;
}
.chat-composer-cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.65;
  flex-shrink: 0;
}
.chat-composer-cap-r {
  flex: 0 0 auto;
  min-width: 0;
  font-family: "Space Mono", monospace;
  font-size: 0.4rem;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  line-height: 1.35;
  text-align: right;
}
.chat-slab-mat {
  position: relative;
  padding: 11px 11px 12px;
  border-radius: 22px;
  border: 1px dashed rgba(var(--tint-rgb), 0.22);
  background: rgba(var(--tint-rgb), 0.03);
}
body.dark .chat-slab-mat {
  border-color: rgba(var(--tint-rgb), 0.22);
  background: rgba(var(--tint-rgb), 0.05);
}
.chat-slab-tape {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.8deg);
  width: 56px;
  height: 17px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(232, 236, 242, 0.72));
  border: 1px solid rgba(188, 195, 208, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
body.dark .chat-slab-tape {
  background: #353942;
  border-color: #3d4249;
  box-shadow: none;
}
.chat-slab-panel {
  position: relative;
  border-radius: 17px 20px 15px 21px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow:
    4px 5px 0 rgba(0, 0, 0, 0.04),
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: rotate(-0.35deg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.dark .chat-slab-panel {
  box-shadow:
    4px 5px 0 rgba(0, 0, 0, 0.18),
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.chat-slab-panel.chat-composer-panel {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 10px 10px 12px;
}
.chat-composer-fabs {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-more-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08);
  transform: rotate(-2.5deg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.chat-more-btn i {
  font-size: 1.2rem;
}
.chat-slab-mat:focus-within .chat-more-btn {
  transform: rotate(0deg);
}
.chat-more-btn:hover {
  transform: translateY(-2px) rotate(0deg);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.06);
  border-color: rgba(var(--tint-rgb), 0.35);
}
body.dark .chat-more-btn {
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28);
}
body.dark .chat-more-btn:hover {
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.4);
}
.chat-more-btn:active {
  transform: translateY(1px) rotate(0deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
body.dark .chat-more-btn:active {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.chat-more-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.chat-slab-panel.chat-identity-panel {
  padding: 18px 14px 14px;
}
.chat-slab-mat:focus-within .chat-slab-panel.chat-composer-panel {
  transform: rotate(0deg);
  border-color: rgba(var(--tint-rgb), 0.42);
  box-shadow:
    3px 4px 0 rgba(var(--tint-rgb), 0.06),
    var(--shadow-card),
    0 0 0 3px rgba(var(--tint-rgb), 0.1);
}
body.dark .chat-slab-mat:focus-within .chat-slab-panel.chat-composer-panel {
  border-color: rgba(var(--tint-rgb), 0.45);
  box-shadow:
    3px 4px 0 rgba(0, 0, 0, 0.2),
    var(--shadow-card),
    0 0 0 3px rgba(var(--tint-rgb), 0.12);
}
.chat-input-ruled {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(var(--tint-rgb), 0.04);
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent calc(1.45em - 1px),
    rgba(var(--tint-rgb), 0.11) calc(1.45em - 1px),
    rgba(var(--tint-rgb), 0.11) 1.45em
  );
}
body.dark .chat-input-ruled {
  background-color: rgba(var(--tint-rgb), 0.06);
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent calc(1.45em - 1px),
    rgba(var(--tint-rgb), 0.14) calc(1.45em - 1px),
    rgba(var(--tint-rgb), 0.14) 1.45em
  );
}
/* 心声手写区与输入框共用 .chat-input-ruled：后段规则会加 overflow:hidden + 格纸底，在此覆盖，避免无法滚动 */
.chat-inner-voice-inset.chat-input-ruled {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background-color: transparent !important;
  background-image: none !important;
}
body.dark .chat-inner-voice-inset.chat-input-ruled {
  background-color: transparent !important;
  background-image: none !important;
}
.chat-input-quote[hidden] {
  display: none !important;
}
.chat-input-quote {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 8px 8px 12px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.14);
  background: rgba(var(--tint-rgb), 0.045);
}
body.dark .chat-input-quote {
  border-bottom-color: rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.12);
}
.chat-input-quote-inner {
  flex: 1;
  min-width: 0;
}
.chat-input-quote-tag {
  display: block;
  margin-bottom: 3px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: 0.65;
}
.chat-input-quote-body {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-sub);
  opacity: 0.9;
  white-space: pre-wrap;
  word-break: break-word;
  font-variant-emoji: emoji;
}
.chat-input-quote-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0 -2px 0 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-sub);
  opacity: 0.55;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.chat-input-quote-clear:hover {
  opacity: 0.95;
  background: rgba(var(--tint-rgb), 0.08);
}
.chat-input-quote-clear .ph {
  font-size: 0.95rem;
  line-height: 1;
}
.chat-input {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 52px;
  max-height: 120px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-main);
  padding: 9px 10px 9px 12px;
  font-size: 0.8rem;
  font-family: inherit;
  line-height: 1.45;
  resize: none;
}
.chat-input::placeholder {
  color: var(--text-sub);
  opacity: 0.72;
  font-style: italic;
}
.chat-input:focus {
  outline: none;
}
/* 移动端：减少部分浏览器为「双击缩放」保留的触摸→click 延迟；桌面无负面影响 */
.chat-input,
.chat-send-fab {
  touch-action: manipulation;
}
.chat-send-fab {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--text-main);
  color: var(--bg-device);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.12);
  transform: rotate(2.5deg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.chat-send-fab i {
  font-size: 1.15rem;
  margin-left: 2px;
}
.chat-slab-mat:focus-within .chat-send-fab {
  transform: rotate(0deg);
}
.chat-send-fab:hover:not(:disabled) {
  transform: translateY(-2px) rotate(0deg);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
  border-color: transparent;
}
body.dark .chat-send-fab:hover:not(:disabled) {
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
}
.chat-send-fab:active:not(:disabled) {
  transform: translateY(1px) rotate(0deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}
.chat-send-fab:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: rotate(2.5deg);
  box-shadow: none;
}
.chat-send-fab.chat-send-fab--assist-stop {
  opacity: 1;
  cursor: pointer;
  background: var(--text-main);
  color: var(--bg-device);
  border-color: var(--line);
}
.chat-send-fab.chat-send-fab--assist-stop:hover:not(:disabled) {
  transform: translateY(-2px) rotate(0deg);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
  border-color: transparent;
}
body.dark .chat-send-fab.chat-send-fab--assist-stop {
  background: var(--text-main);
  color: var(--bg-device);
  border-color: var(--line);
}
body.dark .chat-send-fab.chat-send-fab--assist-stop:hover:not(:disabled) {
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
}
.chat-send-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 窄屏全屏：dvh/svh/lvh 叠 100vh；.phone 另用 max-height: min(100dvh,100svh) 压 Chrome 大视口 vh */
@media (max-width: 520px) {
  html {
    height: 100%;
    min-height: 100vh;
    min-height: max(100dvh, 100svh, 100lvh);
    background: var(--bg-device);
  }
  body {
    margin: 0;
    min-height: 100vh;
    min-height: max(100dvh, 100svh, 100lvh);
    background: var(--bg-device);
    place-items: stretch stretch;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .stage {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }
  .phone {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    /* 全屏 PWA：继承的 max-height:min(100dvh,100svh) 在部分 iOS 上会矮一截，底缘露机身灰条 */
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  .layout-shell {
    padding-right: 14px;
  }

  /* 首页：压缩顶部时钟卡 + Nora 卡，拍立得区尺寸不变 */
  .hero-card {
    padding: 11px 12px 10px;
    border-radius: 20px;
  }
  .hero-meta {
    margin-bottom: 5px;
    gap: 6px;
    font-size: 0.41rem;
  }
  .hero-kicker {
    font-size: 0.45rem;
  }
  .hero-card h1 {
    margin-top: 4px;
    font-size: 2.15rem;
  }
  .hero-desc {
    margin-top: 6px;
    font-size: 0.71rem;
    line-height: 1.45;
  }
  .hero-actions {
    margin-top: 8px;
    gap: 6px;
  }

  .app-tower {
    padding: 8px;
    gap: 6px;
    border-radius: 18px;
  }
  .app-nora-row {
    gap: 6px;
  }
  .app-nora {
    min-height: 58px;
    padding: 8px 9px 7px;
    border-radius: 14px;
    gap: 3px;
  }
  .app-nora-main {
    min-height: 72px;
  }
  .app-nora-k {
    font-size: 0.4rem;
  }
  .app-nora strong {
    font-size: 0.88rem;
  }
  .app-nora small {
    font-size: 0.54rem;
  }
  .app-nora i {
    right: 8px;
    top: 8px;
    font-size: 0.92rem;
  }
  .app-nora-mini {
    min-height: 52px;
    gap: 4px;
    padding: 6px 5px;
  }
  .app-nora-mini i {
    font-size: 0.95rem;
  }
  .app-nora-mini strong {
    font-size: 0.58rem;
  }

  /*
   * Android Chrome / WebView：100lvh 常大于当前可见视口 + max-height:none 会失去「整机封顶」，
   * body 再高会被 overflow:hidden 从底部裁切，Dock 消失。不在 html 上使用 lvh；.phone 沿用 dvh/svh 封顶。
   * iOS 全屏 / PWA 保持上文（含 max(…,100lvh) 与 max-height:none）以降低底缘灰条几率。
   */
  html.xxj-platform-android {
    min-height: max(100dvh, 100svh);
  }
  html.xxj-platform-android body {
    min-height: max(100dvh, 100svh);
  }
  html.xxj-platform-android:not(.xxj-xiaomi-mi-browser) .phone {
    max-height: min(100dvh, 100svh);
  }

  /* 小米自带浏览器：网页标签 Dock 保底留白（--xxj-mi-browser-bottom-inset 由 index 写入） */
  html.xxj-platform-android.xxj-xiaomi-mi-browser {
    --xxj-mi-browser-bottom-inset: 0px;
  }
  html.xxj-platform-android.xxj-xiaomi-mi-browser.xxj-mi-browser-tab-bottom {
    --xxj-mi-browser-bottom-inset: 42px;
  }
  html.xxj-platform-android.xxj-xiaomi-mi-browser .dock-stack {
    margin-bottom: max(12px, calc(8px + env(safe-area-inset-bottom, 0px) + var(--xxj-mi-browser-bottom-inset, 0px)));
  }
  html.xxj-platform-android.xxj-xiaomi-mi-browser .chat-composer,
  html.xxj-platform-android.xxj-xiaomi-mi-browser #chat-offline-screen .chat-offline-chat-mount > .chat-composer {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px), var(--xxj-mi-browser-bottom-inset, 0px));
  }
}

/* 密谈 · 顶部新消息条（高于密谈全屏层 z≈32–34；toast 在底部 z50 不冲突） */
.chat-notify-host {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10034;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: calc(52px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 0
    max(12px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.chat-notify-host:not([hidden]) {
  pointer-events: none;
}
.chat-notify-host .chat-notify-card {
  pointer-events: auto;
}
.chat-notify-card {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 10px 10px 8px;
  border: 1px solid var(--line);
  border-radius: 16px 18px 14px 17px;
  background: var(--bg-card);
  box-shadow:
    3px 4px 0 rgba(var(--tint-rgb), 0.08),
    var(--shadow-float);
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  transform: translateY(-120%);
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.32s ease;
}
.chat-notify-card.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.chat-notify-card.is-cover-in {
  z-index: 2;
}
.chat-notify-card.is-being-covered {
  z-index: 1;
  pointer-events: none;
}
.chat-notify-card.is-being-covered.is-covered-out {
  transform: translateY(10px) scale(0.97);
  opacity: 0.28;
}
.chat-notify-card.is-dismiss {
  transform: translateY(-28px);
  opacity: 0;
  pointer-events: none;
}
.chat-notify-card::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 14px;
  width: 34px;
  height: 10px;
  border-radius: 1px;
  background: rgba(var(--blush-rgb), 0.22);
  transform: rotate(-4deg);
  pointer-events: none;
}
body.dark .chat-notify-card {
  box-shadow:
    3px 4px 0 rgba(var(--tint-rgb), 0.12),
    var(--shadow-float);
}
.chat-notify-card:focus-visible {
  outline: 2px solid rgba(var(--tint-rgb), 0.55);
  outline-offset: 2px;
}
.chat-notify-visual {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.chat-notify-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid rgba(var(--tint-rgb), 0.35);
  animation: chat-notify-pulse 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
}
@keyframes chat-notify-pulse {
  0% {
    transform: scale(0.92);
    opacity: 0.45;
  }
  70% {
    transform: scale(1.28);
    opacity: 0;
  }
  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}
.chat-notify-avatar {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(var(--tint-rgb), 0.1);
  background: linear-gradient(155deg, rgba(var(--tint-rgb), 0.12), var(--bg-card));
}
body.dark .chat-notify-avatar {
  border-color: rgba(255, 255, 255, 0.12);
}
.chat-notify-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-notify-initial {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
}
.chat-notify-body {
  min-width: 0;
}
.chat-notify-eyebrow {
  display: block;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.88;
  margin-bottom: 2px;
}
.chat-notify-name {
  display: block;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.2;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-notify-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 3px;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-sub);
}

/* 玻璃 · 即时密谈（样式代码含 @theme-glass 时由 app.js 挂 chat-screen--theme-glass） */
#chat-screen.chat-screen--theme-glass {
  background: transparent;
}
#chat-screen.chat-screen--theme-glass:not(:has(.chat-messages-stack--custom-bg)) {
  background: var(--bg-device);
}
body.dark #chat-screen.chat-screen--theme-glass:not(:has(.chat-messages-stack--custom-bg)) {
  background: var(--bg-device);
}
/* 内层实底：避免 .chat-scroll 左右 padding 透出外壳渐变成「两侧留白」 */
#chat-screen.chat-screen--theme-glass:not(:has(.chat-messages-stack--custom-bg)) .settings-inner,
#chat-screen.chat-screen--theme-glass:not(:has(.chat-messages-stack--custom-bg)) .chat-body-stack,
#chat-screen.chat-screen--theme-glass:not(:has(.chat-messages-stack--custom-bg)) .chat-main,
#chat-screen.chat-screen--theme-glass:not(:has(.chat-messages-stack--custom-bg)) .chat-scroll {
  background: var(--bg-device);
}
#chat-screen.chat-screen--theme-glass:not(:has(.chat-messages-stack--custom-bg)) .chat-messages-stack {
  background: var(--bg-device);
}
#chat-screen.chat-screen--theme-glass .chat-main::before {
  display: none;
}
#chat-screen.chat-screen--theme-glass .settings-ambient-blob--a,
#chat-screen.chat-screen--theme-glass .settings-ambient-blob--b,
#chat-screen.chat-screen--theme-glass .chat-watermark,
#chat-screen.chat-screen--theme-glass .chat-filmgrain {
  opacity: 0 !important;
}
#chat-screen.chat-screen--theme-glass .chat-identity-wrap {
  display: none !important;
}
#chat-screen.chat-screen--theme-glass:not(.chat-screen--dossier-open):not(.chat-screen--memo-open):not(.chat-screen--ext-sb-open):not(.chat-screen--chat-overlay-open)
  .chat-screen-topbar {
  position: relative;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  margin: 0;
}
#chat-screen.chat-screen--theme-glass .settings-topbar-meta {
  display: none;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-glass-topbar-title {
  display: none;
}
#chat-screen.chat-screen--theme-glass .chat-glass-topbar-title {
  display: block;
  position: absolute;
  left: 50%;
  top: calc(50% + env(safe-area-inset-top, 0px) * 0.12);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 7px 18px;
  max-width: min(46vw, 10.5rem);
  box-sizing: border-box;
  text-align: center;
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.25;
  transition: box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
  border-radius: 999px;
  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);
}
#chat-screen.chat-screen--theme-glass .chat-glass-topbar-title:not(.chat-glass-topbar-title--inner-voice-off):hover {
  transform: translate(-50%, -50%) scale(1.03);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.07),
    0 0 0 2px rgba(var(--tint-rgb), 0.1);
}
#chat-screen.chat-screen--theme-glass .chat-glass-topbar-title:focus {
  outline: none;
}
#chat-screen.chat-screen--theme-glass .chat-glass-topbar-title:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.45);
}
#chat-screen.chat-screen--theme-glass .chat-glass-topbar-title--inner-voice-off {
  cursor: not-allowed;
  opacity: 0.48;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #chat-screen.chat-screen--theme-glass .chat-glass-topbar-title:not(.chat-glass-topbar-title--inner-voice-off):hover {
    transform: translate(-50%, -50%);
  }
}
#chat-screen.chat-screen--theme-glass #chat-close:not(.chat-topbar-btn--img-surface),
#chat-screen.chat-screen--theme-glass .chat-thread-detail-tape-btn:not(.chat-topbar-btn--img-surface) {
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0 !important;
  border-radius: 50%;
  display: inline-grid !important;
  place-items: center;
  justify-content: center;
  align-items: center;
  gap: 0 !important;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  color: var(--text-main);
}
#chat-screen.chat-screen--theme-glass #chat-close i,
#chat-screen.chat-screen--theme-glass .chat-thread-detail-tape-btn i {
  font-size: 1.05rem;
  line-height: 1;
  margin: 0;
  grid-area: 1 / 1;
  display: block;
}
#chat-screen.chat-screen--theme-glass .chat-thread-detail-tape-btn-sheen {
  display: none;
}
/* 经典顶栏：与玻璃圆钮、装扮误写实底区分 */
#chat-screen:not(.chat-screen--theme-glass) .chat-thread-detail-tape-btn:not(.chat-topbar-btn--img-surface) {
  width: 42px;
  height: 36px;
  min-width: unset;
  max-width: unset;
  border: none;
  border-radius: 12px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  font-size: inherit;
  line-height: normal;
  overflow: visible;
  display: grid;
  gap: unset;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-thread-detail-tape-btn-sheen {
  display: block;
}
#chat-screen:not(.chat-screen--theme-glass) #chat-close:not(.chat-topbar-btn--img-surface) {
  width: auto;
  height: auto;
  min-width: unset;
  max-width: unset;
  border: none;
  border-radius: inherit;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
  display: inline-flex;
}

/* 经典 · 功能卡（拍立得/红包/票根）：与玻璃磨砂卡区分；装扮误写时由 app.js 护栏兜底 */
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--photo-desc .chat-photo-polaroid-tape,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--photo-desc .chat-photo-polaroid-gloss,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--photo-desc .chat-photo-polaroid-footer,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid-tape,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid-gloss {
  display: revert;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--photo-desc .chat-photo-polaroid-footer {
  display: flex;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-photo-polaroid,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--photo-desc .chat-photo-polaroid,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--redpack .chat-redpack,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-card--call-ended .chat-call-recap-sheet,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-narration {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-redpack-head {
  background: transparent;
  color: var(--text-main);
}
#chat-screen:not(.chat-screen--theme-glass) .chat-messages-stack--custom-bg .chat-messages-wallpaper {
  opacity: 1;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-identity-wrap .chat-slab-spine {
  display: none;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-identity-wrap--custom-bg::after,
#chat-screen:not(.chat-screen--theme-glass) .chat-identity-wrap--full-bleed.chat-identity-wrap--custom-bg::after {
  background: transparent;
}
/* 经典 · 身份卡：白 mat、无倾斜、无顶部胶带灰条 */
#chat-screen:not(.chat-screen--theme-glass) .chat-identity-wrap .chat-slab-mat {
  background: var(--bg-card);
  border-color: var(--line);
}
#chat-screen:not(.chat-screen--theme-glass) .chat-identity-wrap .chat-slab-panel.chat-identity-panel {
  transform: none;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
#chat-screen:not(.chat-screen--theme-glass) .chat-identity-wrap .chat-slab-tape {
  display: none;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-identity-wrap .chat-header-duo {
  background: var(--bg-card);
}
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-avatar-col,
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-meta {
  display: none;
}
#chat-screen:not(.chat-screen--theme-glass) .chat-msg-glass-line {
  display: contents;
}

#chat-screen.chat-screen--theme-glass .chat-messages-wallpaper.chat-messages-wallpaper--screen-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
}
#chat-screen.chat-screen--theme-glass .chat-messages-wallpaper--screen-fill::before {
  content: none;
}
#chat-screen.chat-screen--theme-glass .chat-messages-wallpaper--screen-fill .chat-messages-wallpaper-img {
  object-fit: cover;
  object-position: center;
}
#chat-screen.chat-screen--theme-glass .chat-messages-wallpaper {
  opacity: 1;
}
#chat-screen.chat-screen--theme-glass .chat-messages-stack--custom-bg .chat-messages-wallpaper::before {
  background: transparent;
}
#chat-screen.chat-screen--theme-glass .chat-messages-stack,
#chat-screen.chat-screen--theme-glass .chat-messages {
  position: relative;
  z-index: 1;
}
#chat-screen.chat-screen--theme-glass .chat-scroll {
  --chat-screen-scroll-pad-x: 12px;
  --chat-screen-scroll-pad-bottom: 8px;
  --chat-screen-scroll-gap: 8px;
}
#chat-screen.chat-screen--theme-glass .chat-msg-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-end;
}
#chat-screen.chat-screen--theme-glass .chat-msg-avatar {
  display: grid !important;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
#chat-screen.chat-screen--theme-glass .chat-msg-inner {
  gap: 8px;
  align-items: flex-end;
}
#chat-screen.chat-screen--theme-glass .chat-msg--user .chat-msg-inner {
  flex-direction: row;
  justify-content: flex-end;
}
#chat-screen.chat-screen--theme-glass .chat-msg-inner--glass-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}
#chat-screen.chat-screen--theme-glass .chat-msg--user .chat-msg-inner--glass-stacked {
  align-items: flex-end;
}
#chat-screen.chat-screen--theme-glass .chat-msg-glass-line {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}
#chat-screen.chat-screen--theme-glass .chat-msg--user .chat-msg-glass-line {
  justify-content: flex-end;
}
#chat-screen.chat-screen--theme-glass .chat-msg-bubble-stack {
  /* 经典主题头像不占行宽；玻璃头像+栈同一 flex 行，须防 min-width:0 挤窄（勿给气泡本身加 width:max-content+百分比 max-width） */
  max-width: min(calc(100% - 40px), 248px);
  width: max-content;
  flex-shrink: 0;
  min-width: auto;
}
/* 群聊：发言人条在栈内、常无旁侧头像，勿用 calc(100% - 40px) 挤窄换行 */
#chat-screen.chat-screen--theme-glass .chat-msg--group-assistant .chat-msg-bubble-stack,
#chat-screen.chat-screen--theme-glass .chat-msg--group-assistant .chat-msg-glass-line .chat-msg-bubble-stack {
  max-width: min(100%, 248px);
}
#chat-screen.chat-screen--theme-glass .chat-msg--group-assistant .chat-msg-inner {
  align-items: flex-start;
}
#chat-screen.chat-screen--theme-glass .chat-msg-meta {
  display: block;
  margin-top: 0;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-sub);
  opacity: 0.78;
  white-space: nowrap;
}
#chat-screen.chat-screen--theme-glass .chat-msg--assistant .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-screen.chat-screen--theme-glass .chat-msg--system .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-screen.chat-screen--theme-glass .chat-msg--user .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  padding: 9px 12px 10px;
  font-size: 0.76rem;
  line-height: 1.48;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  border-left-width: 1px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#chat-screen.chat-screen--theme-glass .chat-composer {
  position: relative;
  z-index: 2;
  margin: 0 10px max(10px, env(safe-area-inset-bottom, 0px));
  padding: 0;
  border-top: none;
  background: transparent;
}
#chat-screen.chat-screen--theme-glass .chat-slab-spine,
#chat-screen.chat-screen--theme-glass .chat-composer-cap,
#chat-screen.chat-screen--theme-glass .chat-slab-tape {
  display: none !important;
}
/* 输入栏：磨砂只画在 .chat-composer .chat-slab-mat（表情联想在 mat 外，不包进同一块） */
#chat-screen.chat-screen--theme-glass .chat-composer .chat-slab-mat {
  position: relative;
  isolation: isolate;
  padding: 0;
  border: none;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.82),
    0 2px 14px rgba(0, 0, 0, 0.05);
}
#chat-screen.chat-screen--theme-glass .chat-slab-panel.chat-composer-panel {
  transform: none;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 4px 6px 4px 12px;
  gap: 4px;
  overflow: visible;
}
#chat-screen.chat-screen--theme-glass .chat-slab-mat:focus-within .chat-slab-panel.chat-composer-panel {
  transform: none;
  border: none;
  box-shadow: none;
}
#chat-screen.chat-screen--theme-glass .chat-composer .chat-slab-mat:focus-within {
  box-shadow:
    0 0 0 1px rgba(var(--tint-rgb), 0.42),
    0 2px 14px rgba(0, 0, 0, 0.05),
    0 0 0 3px rgba(var(--tint-rgb), 0.1);
}
/* 玻璃 + 消息区壁纸：压过装扮注入的 composer 白底；不挂 chat-composer--custom-bg，::before 仅防 stale class */
#chat-screen.chat-screen--theme-glass:has(.chat-messages-stack--custom-bg) .chat-composer,
#chat-screen.chat-screen--theme-glass .chat-composer.chat-composer--custom-bg {
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important;
}
#chat-screen.chat-screen--theme-glass .chat-composer.chat-composer--custom-bg::before {
  content: none !important;
}
#chat-screen.chat-screen--theme-glass .chat-composer .chat-input-ruled {
  border-radius: 0;
  background-color: transparent;
  background-image: none;
}
#chat-screen.chat-screen--theme-glass .chat-input {
  min-height: 34px;
  max-height: 88px;
  padding: 6px 2px;
  font-size: 0.76rem;
  line-height: 1.45;
  background: transparent;
}
#chat-screen.chat-screen--theme-glass .chat-input-ruled {
  border: none;
  background: transparent;
}
#chat-screen.chat-screen--theme-glass .chat-more-btn,
#chat-screen.chat-screen--theme-glass .chat-send-fab {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-sub);
  transform: none !important;
}
#chat-screen.chat-screen--theme-glass .chat-more-btn i,
#chat-screen.chat-screen--theme-glass .chat-send-fab i {
  font-size: 1.05rem;
}
#chat-screen.chat-screen--theme-glass .chat-send-fab {
  color: var(--accent);
}
#chat-screen.chat-screen--theme-glass .sticker-suggest {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.82),
    0 2px 12px rgba(0, 0, 0, 0.04);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-glass-topbar-title {
  background: rgba(30, 32, 36, 0.62);
  border-color: rgba(255, 255, 255, 0.12);
}
body.dark #chat-screen.chat-screen--theme-glass #chat-close:not(.chat-topbar-btn--img-surface),
body.dark #chat-screen.chat-screen--theme-glass .chat-thread-detail-tape-btn:not(.chat-topbar-btn--img-surface) {
  background: rgba(30, 32, 36, 0.58);
  border-color: rgba(255, 255, 255, 0.12);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-avatar {
  background: rgba(30, 32, 36, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-msg--assistant .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
body.dark #chat-screen.chat-screen--theme-glass .chat-msg--system .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
body.dark #chat-screen.chat-screen--theme-glass .chat-msg--user .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) {
  background: rgba(30, 32, 36, 0.62);
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-composer .chat-slab-mat {
  background: rgba(30, 32, 36, 0.65);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 14px rgba(0, 0, 0, 0.18);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-composer .chat-slab-mat:focus-within {
  box-shadow:
    0 0 0 1px rgba(var(--tint-rgb), 0.45),
    0 2px 14px rgba(0, 0, 0, 0.18),
    0 0 0 3px rgba(var(--tint-rgb), 0.12);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--redpack .chat-redpack::before {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid-inner {
  background: rgba(0, 0, 0, 0.22);
}
body.dark #chat-screen.chat-screen--theme-glass .sticker-suggest {
  background: rgba(30, 32, 36, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 12px rgba(0, 0, 0, 0.12);
}

/* 玻璃主题 · 心声 / 历史心声 / 更多（更多在 #chat-screen 外，用 html 标记） */
html.chat-theme-glass-active #chat-screen .chat-inner-voice-mount,
html.chat-theme-glass-active #chat-screen .chat-inner-voice-history-screen-slab,
html.chat-theme-glass-active .chat-more-sheet-card {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
html.chat-theme-glass-active #chat-screen .chat-inner-voice-mount .chat-inner-voice-capbar,
html.chat-theme-glass-active .chat-more-sheet-head {
  background: rgba(255, 255, 255, 0.42);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
body.dark html.chat-theme-glass-active #chat-screen .chat-inner-voice-mount,
body.dark html.chat-theme-glass-active #chat-screen .chat-inner-voice-history-screen-slab,
body.dark html.chat-theme-glass-active .chat-more-sheet-card {
  background: rgba(30, 32, 36, 0.62);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
body.dark html.chat-theme-glass-active #chat-screen .chat-inner-voice-mount .chat-inner-voice-capbar,
body.dark html.chat-theme-glass-active .chat-more-sheet-head {
  background: rgba(30, 32, 36, 0.48);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

#chat-screen.chat-screen--theme-glass .chat-msg-narration {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 描述式 + 实拍：玻璃同款磨砂相框 + PHOTO */
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc {
  width: min(100%, 280px);
  max-width: min(calc(100% - 40px), 280px);
  min-width: min(100%, 168px);
  flex-shrink: 0;
  align-self: flex-start;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) {
  padding: 0;
  filter: none;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
  border-radius: 18px;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid {
  transform: none;
  padding: 8px;
  border-radius: 18px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.55);
  background-image: none;
  border: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.78),
    0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid:hover,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid:active,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid:hover,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid:active {
  transform: none;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid-tape,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid-gloss,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid-tape,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid-gloss {
  display: none !important;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid-inner--desc,
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid-inner {
  border-radius: 12px;
  box-shadow: none;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid-inner--desc {
  min-height: 44px;
  padding: 10px 10px 11px;
  font-size: 0.76rem;
  line-height: 1.48;
  color: var(--text-main);
  background: rgba(var(--tint-rgb), 0.04);
  background-image: none;
  word-break: break-word;
  white-space: pre-wrap;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid-footer {
  display: flex !important;
  margin-top: 0;
  padding: 0 2px 2px;
}
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid,
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid {
  background-color: rgba(30, 32, 36, 0.62);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 12px rgba(0, 0, 0, 0.04);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--photo-desc .chat-photo-polaroid-inner--desc {
  background: rgba(0, 0, 0, 0.16);
}
/* 实拍图卡内框圆角（描述式见 .chat-photo-polaroid-inner--desc） */
#chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid-inner {
  border-radius: 10px;
}
#chat-screen.chat-screen--theme-glass .chat-msg-bubble--voice {
  padding: 9px 12px 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#chat-screen.chat-screen--theme-glass .chat-voice-reveal {
  contain: layout style;
}
#chat-screen.chat-screen--theme-glass .chat-msg-bubble--typing {
  width: 52px;
  min-width: 52px;
  max-width: min(calc(100% - 40px), 248px);
  padding: 9px 14px 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

#chat-screen.chat-screen--theme-glass .chat-msg-card:not(.chat-msg-card--photo-desc) {
  border-radius: 18px;
  overflow: hidden;
}

/* 红包卡：磨砂玻璃（保留撕口；固定紧凑卡宽，避免 flex 挤成竖条） */
#chat-screen.chat-screen--theme-glass .chat-msg-card--redpack {
  width: min(100%, var(--chat-compact-card-w));
  max-width: min(100%, var(--chat-compact-card-w));
  min-width: min(100%, 200px);
  flex-shrink: 0;
  align-self: flex-start;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
}
#chat-screen.chat-screen--theme-glass .chat-msg--user .chat-msg-card--redpack {
  align-self: flex-end;
}
#chat-screen.chat-screen--theme-glass .chat-msg-glass-line:has(.chat-msg-avatar-col) .chat-msg-card--redpack {
  width: min(calc(100% - 40px), var(--chat-compact-card-w));
  max-width: min(calc(100% - 40px), var(--chat-compact-card-w));
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--redpack .chat-redpack {
  width: 100%;
  min-height: var(--chat-compact-card-h);
  border-radius: 18px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.55);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--redpack .chat-redpack::before {
  border-radius: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) inset;
}
#chat-screen.chat-screen--theme-glass .chat-redpack-head {
  background: rgba(var(--tint-rgb), 0.1);
  color: var(--text-main);
}
#chat-screen.chat-screen--theme-glass .chat-redpack-pill {
  color: var(--text-sub);
}
#chat-screen.chat-screen--theme-glass .chat-redpack-note,
#chat-screen.chat-screen--theme-glass .chat-redpack-amt,
#chat-screen.chat-screen--theme-glass .chat-redpack-num {
  color: var(--text-main);
}
#chat-screen.chat-screen--theme-glass .chat-redpack-ico {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}
#chat-screen.chat-screen--theme-glass .chat-redpack-divider {
  border-top-color: rgba(255, 255, 255, 0.5);
}
#chat-screen.chat-screen--theme-glass .chat-redpack-divider::before,
#chat-screen.chat-screen--theme-glass .chat-redpack-divider::after {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
#chat-screen.chat-screen--theme-glass .chat-redpack-foot {
  border-top-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-sub);
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--redpack.is-processed .chat-redpack {
  opacity: 0.65;
  filter: grayscale(0.9) saturate(0.7);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-redpack-head {
  background: rgba(255, 255, 255, 0.06);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-redpack-divider::before,
body.dark #chat-screen.chat-screen--theme-glass .chat-redpack-divider::after {
  background: rgba(30, 32, 36, 0.62);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(30, 32, 36, 0.55);
}

/* 语音 / 视频通话结束票根（固定紧凑卡宽，避免 flex 挤成竖条） */
#chat-screen.chat-screen--theme-glass .chat-msg--call-ended-notice .chat-msg-bubble-stack {
  width: min(100%, var(--chat-compact-card-w));
  max-width: min(calc(100% - 40px), var(--chat-compact-card-w));
  min-width: min(100%, 200px);
  flex-shrink: 0;
  align-items: stretch;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--call-ended {
  width: min(100%, var(--chat-compact-card-w));
  max-width: min(100%, var(--chat-compact-card-w));
  min-width: min(100%, 200px);
  flex-shrink: 0;
  align-self: flex-start;
  overflow: hidden;
  border-radius: 18px;
}
#chat-screen.chat-screen--theme-glass .chat-msg--user .chat-msg-card--call-ended {
  align-self: flex-end;
}
#chat-screen.chat-screen--theme-glass .chat-msg--call-ended-notice .chat-msg-inner:has(.chat-msg-avatar-col) .chat-msg-bubble-stack,
#chat-screen.chat-screen--theme-glass .chat-msg--call-ended-notice .chat-msg-inner:has(.chat-msg-avatar-col) .chat-msg-card--call-ended {
  width: min(calc(100% - 40px), var(--chat-compact-card-w));
  max-width: min(calc(100% - 40px), var(--chat-compact-card-w));
}
#chat-screen.chat-screen--theme-glass .chat-msg--checkup-notice > .chat-msg-inner {
  width: 100%;
  max-width: 100%;
}
#chat-screen.chat-screen--theme-glass .chat-msg--checkup-notice .chat-msg-bubble-stack {
  width: var(--chat-compact-card-w);
  max-width: 100%;
  flex-shrink: 0;
  align-items: stretch;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--checkup {
  width: var(--chat-compact-card-w);
  max-width: 100%;
  flex-shrink: 0;
  align-self: flex-start;
  overflow: hidden;
  border-radius: 18px;
}
#chat-screen.chat-screen--theme-glass .chat-msg--user .chat-msg-card--checkup {
  align-self: flex-end;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--checkup .chat-checkup-ticket-sheet {
  width: 100%;
  min-width: 0;
  border-radius: 18px;
}

#chat-screen.chat-screen--theme-glass .chat-msg-card--call-ended .chat-call-recap-sheet {
  transform: none;
  width: 100%;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.55);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#chat-screen.chat-screen--theme-glass .chat-call-recap-perf {
  border-top-color: rgba(255, 255, 255, 0.48);
  opacity: 0.72;
}
/* 深色：功能卡 / 气泡 / 旁白（统一玻璃底） */
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-narration,
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--photo:not(.chat-msg-card--photo-desc) .chat-photo-polaroid,
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-bubble--voice,
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-bubble--typing,
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--redpack .chat-redpack,
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--call-ended .chat-call-recap-sheet {
  background: rgba(30, 32, 36, 0.62);
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-msg-card--redpack .chat-redpack::before {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset;
}
body.dark #chat-screen.chat-screen--theme-glass .chat-redpack-ico {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-redpack-divider {
  border-top-color: rgba(255, 255, 255, 0.14);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-redpack-divider::before,
body.dark #chat-screen.chat-screen--theme-glass .chat-redpack-divider::after {
  background: rgba(30, 32, 36, 0.62);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(30, 32, 36, 0.55);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-redpack-foot {
  border-top-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
body.dark #chat-screen.chat-screen--theme-glass .chat-call-recap-perf {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.chat-ui-theme-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.chat-ui-theme-btn.is-active {
  border-color: rgba(var(--tint-rgb), 0.28);
  background: rgba(var(--tint-rgb), 0.08);
  color: var(--text-main);
  font-weight: 650;
}
.chat-ui-theme-note {
  margin: 8px 0 0;
}

/* ── 视频通话（独立页 · 玻璃主题） ── */
.chat-video-call-screen {
  --vcall-glass-bg: rgba(255, 255, 255, 0.52);
  --vcall-glass-border: rgba(255, 255, 255, 0.55);
  --vcall-glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  background: #0c0e12;
  color: #f4f6fa;
  overflow: hidden;
}
body.dark .chat-video-call-screen {
  --vcall-glass-bg: rgba(18, 20, 26, 0.58);
  --vcall-glass-border: rgba(255, 255, 255, 0.14);
  --vcall-glass-shadow: 0 22px 56px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.vcall-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.vcall-bg-img {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  filter: blur(28px) saturate(1.12) brightness(0.72);
  transform: scale(1.06);
  opacity: 0.92;
}
.vcall-bg-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%, rgba(var(--tint-rgb), 0.35), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 30%, rgba(var(--blush-rgb), 0.28), transparent 50%),
    linear-gradient(165deg, #1a1d24 0%, #0a0c10 48%, #12151c 100%);
}
.vcall-bg-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 28%, transparent 62%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0, 0, 0, 0.45), transparent 55%);
  pointer-events: none;
}
.vcall-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(
    -14deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.04) 10px,
    rgba(255, 255, 255, 0.04) 11px
  );
  pointer-events: none;
}
.chat-video-call-screen.is-open {
  display: flex;
  flex-direction: column;
}
.vcall-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.vcall-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.vcall-illust-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%, rgba(var(--tint-rgb), 0.28), transparent 55%),
    linear-gradient(165deg, #1a1d24 0%, #0a0c10 48%, #12151c 100%);
}
.vcall-illust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 0.38s ease;
}
.vcall-illust-initial {
  position: relative;
  z-index: 1;
  font-size: clamp(2.8rem, 14vw, 4rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.03em;
}
.vcall-illust-initial.is-hidden {
  display: none;
}
.vcall-glass {
  background: var(--vcall-glass-bg);
  border: 1px solid var(--vcall-glass-border);
  box-shadow: var(--vcall-glass-shadow);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.vcall-glass-pill {
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.vcall-topbar {
  position: absolute;
  z-index: 4;
  left: 10px;
  right: 10px;
  top: calc(8px + env(safe-area-inset-top, 0px));
  max-width: calc(100% - 112px);
  margin: 0;
  padding: 8px 10px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 10px;
  pointer-events: auto;
}
.vcall-back {
  align-self: start;
  margin-top: 2px;
  color: inherit;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}
.vcall-topbar-meta {
  min-width: 0;
}
.vcall-topbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vcall-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
}
.vcall-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d5a;
  box-shadow: 0 0 0 4px rgba(255, 77, 90, 0.28);
  animation: vcallLivePulse 1.5s ease-in-out infinite;
}
@keyframes vcallLivePulse {
  0%, 100% { opacity: 0.85; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
.vcall-topbar-label {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.vcall-topbar-name {
  margin: 2px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcall-topbar-sub {
  margin: 3px 0 0;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcall-user-pip {
  position: absolute;
  z-index: 6;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 82px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.vcall-user-pip.is-dragging {
  cursor: grabbing;
  transition: none;
}
.vcall-pip-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.vcall-pip-initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.vcall-pip-initial.is-hidden {
  display: none;
}
.vcall-pip-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
}
.vcall-status {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  top: calc(52px + env(safe-area-inset-top, 0px));
  bottom: auto;
  margin: 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
#chat-video-call-screen[data-call-stage="connected"] .vcall-status {
  display: none;
}
.vcall-dialing {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px calc(88px + env(safe-area-inset-bottom, 0px));
  gap: 20px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.28);
}
.vcall-dialing .vcall-btn {
  pointer-events: auto;
}
.vcall-dialing-ring {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 1px;
  height: 1px;
}
.vcall-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  animation: vcallRing 3.2s ease-out infinite;
}
.vcall-ring--b { animation-delay: 1s; }
.vcall-ring--c { animation-delay: 2s; }
@keyframes vcallRing {
  0% { transform: scale(0.4); opacity: 0.5; }
  100% { transform: scale(3.2); opacity: 0; }
}
/* 对话气泡：叠在立绘中央，无外框 */
.vcall-chat-center {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  top: calc(52px + env(safe-area-inset-top, 0px));
  bottom: calc(58px + env(safe-area-inset-bottom, 0px) + var(--call-keyboard-inset, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.vcall-chat-center .vcall-transcript-scroll {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 4px;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(40%, 120px);
}
.vcall-chat-center .vcall-transcript-scroll::-webkit-scrollbar {
  width: 4px;
}
.vcall-chat-center .vcall-transcript-scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
}
.vcall-bottom {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 14px calc(10px + env(safe-area-inset-bottom, 0px) + var(--call-keyboard-inset, 0px));
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.38) 72%);
}
.vcall-bottom > * {
  pointer-events: auto;
}
/* 视频通话：中央电影字幕（无气泡框） */
.vcall-caption-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  width: 100%;
  max-width: 36em;
  margin: 0 auto;
  padding: 0 8px;
  text-align: center;
}
.vcall-caption {
  margin: 0;
  max-width: 100%;
  font-size: clamp(0.88rem, 3.6vw, 1.02rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
  color: rgba(255, 255, 255, 0.96);
  text-shadow:
    0 0 24px rgba(0, 0, 0, 0.65),
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 12px rgba(0, 0, 0, 0.45);
  animation: vcallCaptionIn 0.32s ease-out both;
}
@keyframes vcallCaptionIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.vcall-caption--user {
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 0 20px rgba(var(--tint-rgb), 0.35),
    0 0 24px rgba(0, 0, 0, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.85);
}
.vcall-caption--assistant {
  font-weight: 520;
}
.vcall-caption--restoring {
  font-size: 1.4rem;
  letter-spacing: 0.35em;
  opacity: 0.7;
  animation: vcallCaptionPulse 1.2s ease-in-out infinite;
}
@keyframes vcallCaptionPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
.vcall-caption-stage {
  font-size: 0.82em;
  font-weight: 400;
  font-style: italic;
  opacity: 0.72;
  letter-spacing: 0.03em;
}
.vcall-caption-strong {
  font-weight: 650;
  letter-spacing: 0.02em;
}
.vcall-caption-trans {
  margin: -0.2em 0 0;
  font-size: 0.76em;
  font-weight: 400;
  line-height: 1.45;
  opacity: 0.62;
  font-style: italic;
  letter-spacing: 0.01em;
}
.vcall-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 22px;
  flex-shrink: 0;
}
.vcall-bar-field {
  flex: 1;
  min-width: 0;
}
.vcall-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  max-height: 72px;
  resize: none;
  border: none;
  border-radius: 16px;
  padding: 9px 14px;
  font-size: 0.84rem;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  outline: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.vcall-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.vcall-input:focus {
  background: rgba(0, 0, 0, 0.3);
  box-shadow:
    0 0 0 1px rgba(var(--tint-rgb), 0.35),
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.vcall-bar-cluster {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 3px 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.vcall-bar-sep {
  width: 1px;
  height: 22px;
  margin: 0 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.22) 30%,
    rgba(255, 255, 255, 0.22) 70%,
    transparent
  );
  flex-shrink: 0;
}
.vcall-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 0.12s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.vcall-btn:active {
  transform: scale(0.94);
}
.vcall-btn i {
  font-size: 17px;
}
.vcall-btn--tool {
  width: 32px;
  height: 32px;
  opacity: 0.92;
}
.vcall-btn--tool i {
  font-size: 15px;
}
.vcall-btn--send {
  background: linear-gradient(
    145deg,
    rgba(var(--tint-rgb), 0.65),
    rgba(var(--tint-rgb), 0.38)
  );
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 14px rgba(var(--tint-rgb), 0.28);
}
.vcall-btn--danger {
  background: linear-gradient(145deg, rgba(255, 90, 100, 0.75), rgba(220, 50, 70, 0.55));
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(255, 60, 80, 0.3);
}
.vcall-btn--tool[aria-pressed="true"],
.vcall-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.35);
}
#chat-video-call-screen[data-call-stage="dialing"] .vcall-bottom,
#chat-video-call-screen[data-call-stage="dialing"] .vcall-chat-center {
  display: none;
}
#chat-video-call-screen[data-call-stage="dialing"] .vcall-user-pip {
  opacity: 0.55;
  pointer-events: none;
}
#chat-video-call-screen[data-call-stage="dialing"] .vcall-dialing {
  display: flex;
}
#chat-video-call-screen:not([data-call-stage="dialing"]) .vcall-dialing {
  display: none;
}
#chat-video-call-screen.is-call-ime .vcall-bar-cluster {
  display: none;
}
#chat-video-call-screen.is-call-ime .vcall-bar-sep {
  display: none;
}
#chat-video-call-screen.is-call-ime .vcall-chat-center {
  bottom: calc(52px + env(safe-area-inset-bottom, 0px) + var(--call-keyboard-inset, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .vcall-caption {
    animation: none;
  }
}

/* 通话小窗 · 可拖动；挂 #phone 内 */
.call-pip-float {
  position: absolute;
  z-index: 10038;
  left: 12px;
  top: calc(58px + env(safe-area-inset-top, 0px));
  width: min(196px, calc(100% - 24px));
  pointer-events: none;
  touch-action: none;
  transition: opacity 0.18s ease;
}
.call-pip-float:not([hidden]) {
  pointer-events: auto;
}
.call-pip-float.is-dragging {
  transition: none;
  will-change: transform;
}
.call-pip-float.is-dragging .call-pip-shell {
  filter: none;
}
.call-pip-float.is-dragging .call-pip-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 22px rgba(12, 16, 28, 0.2);
}
.call-pip-float.is-dragging .call-pip-live-dot {
  animation: none;
}
.call-pip-shell {
  position: relative;
  touch-action: none;
  filter: drop-shadow(0 8px 22px rgba(12, 16, 28, 0.2));
}
.call-pip-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 8px 8px 8px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(20, 24, 36, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.call-pip-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.call-pip-main:active {
  opacity: 0.88;
}
.call-pip-av-ring {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px var(--bg-card, #fff),
    0 0 0 3.5px rgba(var(--tint-rgb), 0.58);
}
.call-pip-av,
.call-pip-illust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call-pip-initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(
    145deg,
    rgba(var(--tint-rgb), 0.92),
    rgba(var(--tint-rgb), 0.62)
  );
}
.call-pip-initial.is-hidden {
  display: none;
}
.call-pip-live {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.call-pip-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: call-pip-live-pulse 1.4s ease-in-out infinite;
}
@keyframes call-pip-live-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.82);
    opacity: 0.72;
  }
}
.call-pip-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.call-pip-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.call-pip-name {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #141824;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.call-pip-mode {
  flex-shrink: 0;
  font-family: "Space Mono", monospace;
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(var(--tint-rgb), 0.12);
}
.call-pip-timer {
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(20, 24, 36, 0.62);
}
.call-pip-snippet {
  font-size: 0.58rem;
  line-height: 1.35;
  color: rgba(20, 24, 36, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0.78rem;
}
.call-pip-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  touch-action: manipulation;
}
.call-pip-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 36, 0.06);
  color: #141824;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.15s ease, transform 0.12s ease;
}
.call-pip-btn:active {
  transform: scale(0.94);
}
.call-pip-btn[aria-pressed="true"] {
  background: rgba(129, 52, 175, 0.16);
  color: #8134af;
}
.call-pip-btn--end {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.call-pip-float[data-call-mode="video"] .call-pip-illust:not([hidden]) ~ .call-pip-av {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .call-pip-live-dot {
    animation: none;
  }
}

.offline-inline-trans {
  color: var(--text-sub);
  font-size: 0.92em;
  font-weight: 500;
  opacity: 0.9;
}
body.dark .offline-inline-trans {
  opacity: 0.82;
}

/* 语音通话 · 仅 #phone 内锁定竖版，避免桌面宽视口触发 920px 双栏把界面挤乱（不改原有视觉） */
#phone #chat-call-screen .chat-call-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
}
#phone #chat-call-screen .chat-call-side {
  transform: none !important;
  position: static !important;
  top: auto !important;
}
#phone #chat-call-screen .call-talk-wrap {
  transform: none !important;
  min-height: 0;
  flex: 1;
}

/* —— 中插 HTML 卡片（聊天气泡内渲染） —— */
.chat-msg-card--inline-html {
  max-width: min(100%, 380px);
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.chat-msg-card--inline-html .chat-inline-html-prose {
  width: 100%;
  overflow: visible;
}
.chat-msg-card--inline-html .chat-inline-html-prose.rich-prose--html {
  font-size: 1rem;
  line-height: normal;
}

/* 中插 HTML 实体样式（xxj-ih / xxj-ihc 与自由 class；layout 类 inline style 经插卡消毒白名单保留） */
.chat-inline-html-prose .xxj-ih {
  --ih-bg: #faf8f5;
  --ih-accent: #5a78a8;
  --ih-border: rgba(140, 160, 200, 0.38);
  --ih-shadow: rgba(18, 22, 36, 0.14);
  --ih-text: #1e2430;
  --ih-soft: rgba(255, 255, 255, 0.55);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ih-text);
  line-height: 1.6;
  word-break: break-word;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.chat-inline-html-prose .xxj-ih--tilt-l {
  transform: rotate(-1.15deg);
}
.chat-inline-html-prose .xxj-ih--tilt-r {
  transform: rotate(0.95deg);
}

/* 布局差异（与材质叠用） */
.chat-inline-html-prose .xxj-ih--layout-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.chat-inline-html-prose .xxj-ih--layout-offset {
  padding: 22px 16px 14px 26px !important;
}
.chat-inline-html-prose .xxj-ih--compact {
  padding: 12px 14px 10px !important;
  gap: 7px;
}
.chat-inline-html-prose .xxj-ih--loose {
  padding: 24px 22px 20px !important;
  gap: 14px;
}
.chat-inline-html-prose .xxj-ih--sharp {
  border-radius: 6px !important;
}
.chat-inline-html-prose .xxj-ih--round {
  border-radius: 26px !important;
}

/* 肤形（无材质壳时的不同 silhouette） */
.chat-inline-html-prose .xxj-ih--skin-paper {
  padding: 18px 18px 16px;
  border-radius: 4px;
  background-color: var(--ih-bg);
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 23px,
    color-mix(in srgb, var(--ih-border) 35%, transparent) 23px,
    color-mix(in srgb, var(--ih-border) 35%, transparent) 24px
  );
  border: 1px solid var(--ih-border);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--ih-border) 50%, transparent);
}
.chat-inline-html-prose .xxj-ih--skin-strip {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--ih-bg);
  border: 2px dashed var(--ih-accent);
  box-shadow: none;
  max-width: 92%;
  align-self: flex-start;
}
.chat-inline-html-prose .xxj-ih--skin-bubble {
  padding: 16px 18px 14px;
  border-radius: 22px 22px 22px 6px;
  background: var(--ih-bg);
  border: 1px solid var(--ih-border);
  box-shadow: 0 8px 24px var(--ih-shadow);
}
.chat-inline-html-prose .xxj-ih--skin-bubble::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--ih-bg);
  border-left: 1px solid var(--ih-border);
  border-bottom: 1px solid var(--ih-border);
  transform: rotate(45deg);
}
.chat-inline-html-prose .xxj-ih--skin-tag {
  padding: 16px 16px 14px 22px;
  border-radius: 4px 14px 14px 4px;
  background: var(--ih-bg);
  border: 1px solid var(--ih-border);
  box-shadow: 3px 4px 0 var(--ih-shadow);
}
.chat-inline-html-prose .xxj-ih--skin-tag::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  border: 2px solid var(--ih-accent);
  background: color-mix(in srgb, var(--ih-bg) 80%, white);
}

/* 可选道具壳（模型自选，非默认） */
.chat-inline-html-prose .xxj-ih--prop {
  padding: 20px 20px 18px;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--ih-bg);
  border: 1px solid var(--ih-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 16px 40px var(--ih-shadow),
    0 3px 10px rgba(0, 0, 0, 0.06);
}
.chat-inline-html-prose .xxj-ih--prop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--ih-accent),
    color-mix(in srgb, var(--ih-accent) 42%, transparent)
  );
  z-index: 1;
  pointer-events: none;
}
.chat-inline-html-prose .xxj-ih--prop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: radial-gradient(circle at 20% 30%, #000 0.6px, transparent 0.6px);
  background-size: 8px 8px;
  z-index: 0;
}
.chat-inline-html-prose .xxj-ih--prop > * {
  position: relative;
  z-index: 2;
}

/* 磨砂玻璃卡 */
.chat-inline-html-prose .xxj-ih--glass {
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--ih-bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ih-border) 80%, white);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 14px 36px var(--ih-shadow);
}

/* 便签卡 */
.chat-inline-html-prose .xxj-ih--notecard {
  padding: 22px 20px 18px 24px;
  border-radius: 4px 18px 18px 18px;
  background-color: var(--ih-bg);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ih-accent) 8%, transparent) 0,
    transparent 48px
  );
  border: 1px solid var(--ih-border);
  border-left: 4px solid var(--ih-accent);
  box-shadow: 3px 5px 0 color-mix(in srgb, var(--ih-border) 65%, transparent), 0 10px 28px var(--ih-shadow);
  transform: rotate(-0.35deg);
}
.chat-inline-html-prose .xxj-ih--notecard::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8ecf4, #b8c0d0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  opacity: 0.85;
}
@keyframes xxj-ih-grad-drift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes xxj-ih-shimmer-drift {
  0%,
  100% {
    transform: translateX(-8%) translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateX(8%) translateY(-4%);
    opacity: 0.55;
  }
}

/* 氛围色调：纯色纸面/描边（无渐变铺底） */
.chat-inline-html-prose .xxj-ih--tint-warm{
  --ih-bg: #faf6f0;
  --ih-accent: #c86848;
  --ih-border: #d8b8a0;
  --ih-shadow: rgba(80, 60, 40, 0.12);
  --ih-text: #3a2820;
}
.chat-inline-html-prose .xxj-ih--tint-cool{
  --ih-bg: #f4f8fc;
  --ih-accent: #4888b8;
  --ih-border: #a8c0d8;
  --ih-shadow: rgba(50, 80, 120, 0.1);
  --ih-text: #1a2838;
}
.chat-inline-html-prose .xxj-ih--tint-blush{
  --ih-bg: #fff6f8;
  --ih-accent: #c84878;
  --ih-border: #e8b0c0;
  --ih-shadow: rgba(160, 80, 100, 0.12);
  --ih-text: #3a2030;
}
.chat-inline-html-prose .xxj-ih--tint-mint{
  --ih-bg: #f4fcf8;
  --ih-accent: #38a080;
  --ih-border: #a0d8c0;
  --ih-shadow: rgba(50, 120, 90, 0.1);
  --ih-text: #1a3028;
}
.chat-inline-html-prose .xxj-ih--tint-sunset{
  --ih-bg: #fff8f0;
  --ih-accent: #d07030;
  --ih-border: #e8c0a0;
  --ih-shadow: rgba(160, 90, 40, 0.12);
  --ih-text: #3a2818;
}
.chat-inline-html-prose .xxj-ih--tint-dusk{
  --ih-bg: #222838;
  --ih-accent: #98a8d8;
  --ih-border: #4a5068;
  --ih-shadow: rgba(0, 0, 0, 0.35);
  --ih-text: #e8ecf8;
}
.chat-inline-html-prose .xxj-ih--tint-lavender{
  --ih-bg: #f8f4ff;
  --ih-accent: #7868b8;
  --ih-border: #c8b8e8;
  --ih-shadow: rgba(100, 80, 150, 0.1);
  --ih-text: #2a2040;
}
.chat-inline-html-prose .xxj-ih--tint-amber{
  --ih-bg: #fffaf4;
  --ih-accent: #c89028;
  --ih-border: #e8d090;
  --ih-shadow: rgba(160, 120, 40, 0.1);
  --ih-text: #3a3018;
}
.chat-inline-html-prose .xxj-ih--tint-rain{
  --ih-bg: #f0f4f8;
  --ih-accent: #5878a0;
  --ih-border: #b0c0d0;
  --ih-shadow: rgba(70, 90, 120, 0.12);
  --ih-text: #283040;
}
.chat-inline-html-prose .xxj-ih--tint-ocean{
  --ih-bg: #f0f8fc;
  --ih-accent: #2888b8;
  --ih-border: #98c8e0;
  --ih-shadow: rgba(40, 100, 140, 0.1);
  --ih-text: #143040;
}
.chat-inline-html-prose .xxj-ih--tint-rose{
  --ih-bg: #fff4f6;
  --ih-accent: #b84868;
  --ih-border: #e8a8b8;
  --ih-shadow: rgba(150, 70, 90, 0.1);
  --ih-text: #381820;
}
.chat-inline-html-prose .xxj-ih--tint-peach{
  --ih-bg: #fff6f2;
  --ih-accent: #d08058;
  --ih-border: #e8c0a8;
  --ih-shadow: rgba(160, 100, 70, 0.1);
  --ih-text: #382820;
}
.chat-inline-html-prose .xxj-ih[class*="xxj-ih--tint-"]:not(.xxj-ih--slip):not(.xxj-ih--memo):not(.xxj-ih--ticket):not(.xxj-ih--quote):not(.xxj-ih--list):not(.xxj-ih--night):not(.xxj-ih--letter):not(.xxj-ih--polaroid):not(.xxj-ih--postcard):not(.xxj-ih--prop):not(.xxj-ih--glass):not(.xxj-ih--notecard):not([class*="xxj-ih--skin-"]) {
  color: var(--ih-text, #1e2430);
}
.chat-inline-html-prose .xxj-ih--prop[class*="xxj-ih--tint-"],
.chat-inline-html-prose .xxj-ih--glass[class*="xxj-ih--tint-"],
.chat-inline-html-prose .xxj-ih--notecard[class*="xxj-ih--tint-"],
.chat-inline-html-prose [class*="xxj-ih--skin-"][class*="xxj-ih--tint-"] {
  color: var(--ih-text);
  background-color: var(--ih-bg);
  border-color: var(--ih-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 16px 40px var(--ih-shadow),
    0 3px 10px rgba(0, 0, 0, 0.06);
}
.chat-inline-html-prose .xxj-ih__badge{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.72;
}
.chat-inline-html-prose .xxj-ih__title{
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.45;
}
.chat-inline-html-prose .xxj-ih__body{
  font-size: 0.92rem;
  white-space: pre-wrap;
  line-height: 1.72;
}
.chat-inline-html-prose .xxj-ih__meta{
  font-size: 0.78rem;
  line-height: 1.45;
}
.chat-inline-html-prose .xxj-ih__meta--dim{
  opacity: 0.72;
  margin-top: 6px;
  font-size: 0.72rem;
}
.chat-inline-html-prose .xxj-ih__foot--dash{
  margin-top: 14px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(92, 72, 48, 0.35) 0 4px, transparent 4px 8px);
}

/* 传阅纸条 */
.chat-inline-html-prose .xxj-ih--slip{
  padding: 18px 20px 16px;
  border-radius: 3px 3px 14px 14px;
  background-color: #faf6ee;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 23px,
    rgba(92, 72, 48, 0.07) 23px,
    rgba(92, 72, 48, 0.07) 24px
  );
  border: 1px dashed #b8a088;
  box-shadow: 2px 3px 0 rgba(92, 72, 48, 0.08), 0 8px 20px rgba(48, 38, 28, 0.12);
  transform: rotate(-0.5deg);
  font-family: Georgia, "Times New Roman", serif;
  color: #3d342c;
}

/* 磁贴便签 */
.chat-inline-html-prose .xxj-ih--memo{
  position: relative;
  padding: 20px 18px 16px;
  border-radius: 2px;
  background-color: #fff9c4;
  border: 1px solid #e6d44a;
  box-shadow: 2px 5px 0 rgba(0, 0, 0, 0.07), 0 10px 24px rgba(0, 0, 0, 0.1);
  color: #3a3520;
}
.chat-inline-html-prose .xxj-ih__pin{
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ececec, #8a8a8a);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

/* 票券 */
.chat-inline-html-prose .xxj-ih--ticket{
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(20, 24, 40, 0.18);
  border: 1px solid #2a3142;
}
.chat-inline-html-prose .xxj-ih__ticket-main{
  flex: 1;
  padding: 16px 14px;
  background: linear-gradient(135deg, #2f3648, #1a1f2e);
  color: #f4f6fb;
}
.chat-inline-html-prose .xxj-ih__badge--ticket{
  color: #9aa8c4;
}
.chat-inline-html-prose .xxj-ih__title--ticket{
  color: #fff;
}
.chat-inline-html-prose .xxj-ih__ticket-tear{
  width: 10px;
  flex-shrink: 0;
  background: repeating-linear-gradient(180deg, #d8dce8 0 5px, #f5f6fa 5px 10px);
}
.chat-inline-html-prose .xxj-ih__ticket-stub{
  width: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  background: #e8ebf2;
  color: #5c6478;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
}

/* 摘录 */
.chat-inline-html-prose .xxj-ih--quote{
  padding: 22px 22px 20px;
  border-radius: 4px 18px 18px 18px;
  background: #f4f8fc;
  border: 1px solid #c5d4ea;
  border-left: 5px solid #3a5c89;
  box-shadow: 0 6px 18px rgba(58, 92, 137, 0.1);
  font-family: Georgia, serif;
  color: #1a2230;
}
.chat-inline-html-prose .xxj-ih__quote-mark{
  font-size: 2.2rem;
  line-height: 1;
  color: #3a5c89;
  opacity: 0.35;
  margin-bottom: 4px;
}
.chat-inline-html-prose .xxj-ih__cite{
  margin-top: 12px;
  font-size: 0.72rem;
  font-family: system-ui, sans-serif;
  color: #5c6478;
  text-align: right;
}

/* 清单 */
.chat-inline-html-prose .xxj-ih--list{
  padding: 16px 18px 14px;
  border-radius: 6px 14px 14px 6px;
  background-color: #ffffff;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 27px,
    rgba(58, 92, 137, 0.09) 27px,
    rgba(58, 92, 137, 0.09) 28px
  );
  border: 1px solid #d8dee8;
  border-left: 4px solid #3a5c89;
  box-shadow: 0 6px 18px rgba(18, 22, 36, 0.08);
}
.chat-inline-html-prose .xxj-ih__badge--list{
  color: #5c6478;
}
.chat-inline-html-prose .xxj-ih__check-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
}
.chat-inline-html-prose .xxj-ih__check-box{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 4px;
  border: 2px solid #3a5c89;
  background: #f0f4fa;
}
.chat-inline-html-prose .xxj-ih__check-text{
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* 夜读 */
.chat-inline-html-prose .xxj-ih--night{
  padding: 18px 20px;
  border-radius: 12px;
  background: #1e222c;
  border: 1px solid #3a4050;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  font-family: Georgia, serif;
  color: #e2e6f0;
}
.chat-inline-html-prose .xxj-ih__badge--night{
  color: #8b95ad;
}
.chat-inline-html-prose .xxj-ih__body--night{
  color: #d8dce8;
}

body.dark .chat-inline-html-prose .xxj-ih--slip{
  background: linear-gradient(168deg, #3a342c 0%, #2a2520 100%);
  border-color: #6a5a48;
  color: #f0e8dc;
}
body.dark .chat-inline-html-prose .xxj-ih--quote{
  background: linear-gradient(165deg, #1e2838 0%, #141820 100%);
  border-color: #3a4a62;
  color: #e8ecf4;
}
body.dark .chat-inline-html-prose .xxj-ih--list{
  background: #1e222c;
  border-color: #3a4050;
  color: #e8ecf0;
}

/* 聊天贴士 */
.chat-inline-html-prose .xxj-ih--tips{
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px 16px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff5f8 0%, #fff0f5 55%, #ffffff 100%);
  border: 1px solid #f0c4d0;
  border-left: 4px solid #f7a8b8;
  box-shadow: 0 8px 22px rgba(200, 100, 130, 0.12);
  color: #3a2830;
}
.chat-inline-html-prose .xxj-ih__tips-tag{
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d46888;
  opacity: 0.85;
}
.chat-inline-html-prose .xxj-ih__tips-icon{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffb8c8, #f07898);
  box-shadow: 0 3px 8px rgba(220, 90, 120, 0.35);
}
.chat-inline-html-prose .xxj-ih__tips-icon::after{
  content: "!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}
.chat-inline-html-prose .xxj-ih__tips-main{
  flex: 1;
  min-width: 0;
  padding-right: 28px;
}
.chat-inline-html-prose .xxj-ih__title--tips{
  font-size: 0.98rem;
  margin-bottom: 6px;
  color: #5a3040;
}
.chat-inline-html-prose .xxj-ih__body--tips{
  font-size: 0.88rem;
  color: #4a3840;
}

/* 翻转相册 */
.chat-inline-html-prose .xxj-ih--flip{
  text-align: center;
}
.chat-inline-html-prose .xxj-ih__flip-stage{
  perspective: 900px;
  cursor: pointer;
  outline: none;
  border-radius: 14px;
}
.chat-inline-html-prose .xxj-ih__flip-stage:focus-visible{
  box-shadow: 0 0 0 2px var(--accent, #3a5c89);
}
.chat-inline-html-prose .xxj-ih__flip-inner{
  position: relative;
  min-height: 140px;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.chat-inline-html-prose .xxj-ih__flip-stage.is-flipped .xxj-ih__flip-inner{
  transform: rotateY(180deg);
}
.chat-inline-html-prose .xxj-ih__flip-face{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  border-radius: 14px;
  backface-visibility: hidden;
  box-shadow: 0 10px 28px rgba(20, 28, 48, 0.16);
  border: 1px solid #d0d8e8;
}
.chat-inline-html-prose .xxj-ih__flip-face--front{
  background: #f4f8fc;
  color: #1a2438;
}
.chat-inline-html-prose .xxj-ih__flip-face--back{
  background: #2a3448;
  color: #eef2fa;
  transform: rotateY(180deg);
  border-color: #3a4458;
}
.chat-inline-html-prose .xxj-ih__flip-label{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 8px;
}
.chat-inline-html-prose .xxj-ih__flip-hint{
  margin-top: 10px;
  font-size: 0.72rem;
  color: #7a8498;
  letter-spacing: 0.06em;
}

/* 点击旋转（自由 html） */
.chat-inline-html-prose [data-xxj-rotate]{
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-origin: center center;
  outline: none;
}
.chat-inline-html-prose [data-xxj-rotate]:focus-visible{
  box-shadow: 0 0 0 2px var(--accent, #3a5c89);
}
.chat-inline-html-prose [data-xxj-rotate].is-rotated{
  transform: rotate(var(--xxj-rot-deg, 180deg));
}

/* 展开便笺 */
.chat-inline-html-prose .xxj-ih--peek{
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, #ffffff 38%),
    linear-gradient(135deg, #f4f8ff, #ffffff);
  border: 1px solid #d8dee8;
  box-shadow: 0 8px 24px rgba(18, 22, 36, 0.1);
  overflow: hidden;
}
.chat-inline-html-prose .xxj-ih__peek{
  margin: 0;
}
.chat-inline-html-prose .xxj-ih__peek-sum{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: #2a3448;
  background: linear-gradient(90deg, #f4f8ff, #ffffff);
}
.chat-inline-html-prose .xxj-ih__peek-sum::-webkit-details-marker{
  display: none;
}
.chat-inline-html-prose .xxj-ih__peek-sum::before{
  content: "▸";
  font-size: 0.8rem;
  color: #5a78a8;
  transition: transform 0.2s ease;
}
.chat-inline-html-prose .xxj-ih__peek[open] .xxj-ih__peek-sum::before{
  transform: rotate(90deg);
}
.chat-inline-html-prose .xxj-ih__peek-body{
  padding: 0 16px 16px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #3a4050;
  border-top: 1px dashed #e0e6f0;
}

/* 拍立得 */
.chat-inline-html-prose .xxj-ih--polaroid{
  padding: 14px 14px 18px;
  border-radius: 4px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  transform: rotate(-1deg);
  max-width: 280px;
}
.chat-inline-html-prose .xxj-ih__polaroid-frame{
  background: #1a1a1a;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-inline-html-prose .xxj-ih__polaroid-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-inline-html-prose .xxj-ih__polaroid-ph{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(145deg, #4a5878, #2a3448);
}
.chat-inline-html-prose .xxj-ih__polaroid-cap{
  margin-top: 12px;
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: 0.95rem;
  text-align: center;
  color: #3a3840;
}

/* 互动二选一 */
.chat-inline-html-prose .xxj-ih--pick{
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: #f4f8fc;
  border: 2px dashed #8aa8d0;
  box-shadow: 0 6px 18px rgba(58, 92, 137, 0.08);
}
.chat-inline-html-prose .xxj-ih__title--pick{
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.chat-inline-html-prose .xxj-ih__pick-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chat-inline-html-prose .xxj-ih__pick-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  background: #ffffff;
  border: 2px solid #8aa8d0;
  color: #2a4870;
  box-shadow: 0 3px 10px rgba(58, 92, 137, 0.12);
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.chat-inline-html-prose .xxj-ih__pick-chip:hover{
  transform: translateY(-1px);
  border-color: #5a88c0;
}
.chat-inline-html-prose .xxj-ih__pick-chip.is-picked{
  background: var(--ih-accent, #3a68a0);
  border-color: var(--ih-accent, #3a68a0);
  color: #ffffff;
}
.chat-inline-html-prose .xxj-ih__pick-reveal{
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #4a5870;
  font-style: italic;
}

body.dark .chat-inline-html-prose .xxj-ih--tips{
  background: linear-gradient(135deg, #3a2830 0%, #2a2028 100%);
  border-color: #6a4858;
  border-left-color: #d47898;
  color: #f0e8ec;
}
body.dark .chat-inline-html-prose .xxj-ih--peek{
  background: #1e222c;
  border-color: #3a4050;
}
body.dark .chat-inline-html-prose .xxj-ih__peek-sum{
  color: #e8ecf4;
  background: linear-gradient(90deg, #252a38, #1e222c);
}
body.dark .chat-inline-html-prose .xxj-ih--polaroid{
  background: #2a2a2a;
  border-color: #4a4a4a;
}
body.dark .chat-inline-html-prose .xxj-ih--pick{
  background: linear-gradient(165deg, #1e2838 0%, #141820 100%);
  border-color: #3a4a62;
}

/* 心情便签（扁平，无渐变动画） */
.chat-inline-html-prose .xxj-ih--gradient-mood{
  position: relative;
  padding: 22px 22px 20px 26px;
  border-radius: 4px 14px 14px 4px;
  overflow: hidden;
  border: 1px solid var(--ih-border, #d8c8e0);
  background: var(--ih-bg, #fff6f8);
  color: var(--ih-text, #2a2030);
  box-shadow: 3px 4px 0 var(--ih-border, rgba(180, 150, 200, 0.4)), 0 8px 22px var(--ih-shadow, rgba(120, 80, 140, 0.1));
}
.chat-inline-html-prose .xxj-ih__mood-pin{
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #b0b0b0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  z-index: 2;
}
.chat-inline-html-prose .xxj-ih__gradient-tag{
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ih-accent, #c84878);
  margin-bottom: 10px;
}
.chat-inline-html-prose .xxj-ih__title--gradient{
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.chat-inline-html-prose .xxj-ih__body--gradient{
  font-size: 0.9rem;
  line-height: 1.75;
  white-space: pre-wrap;
}

/* 私语气泡 */
.chat-inline-html-prose .xxj-ih--whisper{
  max-width: 92%;
  margin-left: 6px;
  padding: 14px 16px 12px;
  border-radius: 18px 18px 18px 4px;
  background: var(--ih-bg, #fff8f8);
  border: 1px solid var(--ih-border, #e8c0d0);
  box-shadow: 0 6px 16px var(--ih-shadow, rgba(140, 80, 100, 0.12));
  color: var(--ih-text, #3a2830);
}
.chat-inline-html-prose .xxj-ih__whisper-tail{
  position: absolute;
  left: -6px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  background: var(--ih-bg, #fff8f8);
  border-left: 1px solid var(--ih-border, #e8c0d0);
  border-bottom: 1px solid var(--ih-border, #e8c0d0);
  transform: rotate(45deg);
  border-radius: 0 0 0 3px;
}
.chat-inline-html-prose .xxj-ih__body--whisper{
  font-size: 0.9rem;
  line-height: 1.7;
}
.chat-inline-html-prose .xxj-ih__whisper-from{
  margin-top: 10px;
  font-size: 0.72rem;
  text-align: right;
  opacity: 0.72;
  font-style: italic;
}

/* 氛围标签 */
.chat-inline-html-prose .xxj-ih--vibe{
  padding: 18px 18px 16px;
  border-radius: 12px;
  border: 2px solid var(--ih-border, #c8b8e8);
  background: var(--ih-bg, #f8f4ff);
  color: var(--ih-text, #2a2040);
  box-shadow: 0 6px 18px var(--ih-shadow, rgba(100, 80, 150, 0.1));
}
.chat-inline-html-prose .xxj-ih__vibe-glow{
  display: none;
}
.chat-inline-html-prose .xxj-ih__title--vibe{
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.75;
  margin-bottom: 12px;
}
.chat-inline-html-prose .xxj-ih__vibe-row{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chat-inline-html-prose .xxj-ih__vibe-chip{
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--ih-border, rgba(160, 130, 220, 0.35));
  color: var(--ih-text, #2a2040);
  backdrop-filter: blur(4px);
}

/* 封信小笺 */
.chat-inline-html-prose .xxj-ih--letter{
  padding: 22px 22px 18px;
  border-radius: 6px 6px 14px 14px;
  background: linear-gradient(168deg, var(--ih-grad-1, #fffaf5), var(--ih-grad-3, #fff5ee));
  border: 1px solid var(--ih-border, rgba(200, 170, 140, 0.45));
  box-shadow: 0 10px 28px var(--ih-shadow, rgba(120, 90, 70, 0.14));
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ih-text, #3a3028);
}
.chat-inline-html-prose .xxj-ih__letter-seal{
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ih-accent, #c84868), #8a2848);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.25), 0 4px 12px rgba(80, 30, 50, 0.35);
  opacity: 0.92;
}
.chat-inline-html-prose .xxj-ih__letter-seal::after{
  content: "封";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 240, 235, 0.9);
  font-family: system-ui, sans-serif;
}
.chat-inline-html-prose .xxj-ih__letter-sal{
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
  padding-right: 44px;
}
.chat-inline-html-prose .xxj-ih__body--letter{
  font-size: 0.92rem;
  line-height: 1.8;
  padding-right: 8px;
}
.chat-inline-html-prose .xxj-ih__letter-sign{
  margin-top: 16px;
  text-align: right;
  font-size: 0.88rem;
  font-style: italic;
  opacity: 0.85;
}

/* 翻转卡面色调 */
.chat-inline-html-prose .xxj-ih--flip[class*="xxj-ih--tint-"] .xxj-ih__flip-face--front{
  background: var(--ih-bg, #f4f8fc);
  color: var(--ih-text, #1a2438);
  border-color: var(--ih-border, #d0d8e8);
}
.chat-inline-html-prose .xxj-ih--flip[class*="xxj-ih--tint-"] .xxj-ih__flip-face--back{
  background: var(--ih-accent, #3a4870);
  color: #fff;
  border-color: var(--ih-border, #3a4458);
}

/* 自由组合壳 + 积木 */
.chat-inline-html-prose .xxj-ih--compose{
  padding: 20px 20px 18px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ih-border, #d0d8e4);
  background-color: var(--ih-bg, #faf8f5);
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 27px,
    rgba(0, 0, 0, 0.04) 27px,
    rgba(0, 0, 0, 0.04) 28px
  );
  color: var(--ih-text, #1e2430);
  box-shadow: 3px 4px 0 var(--ih-border, rgba(160, 170, 200, 0.35)), 0 8px 22px var(--ih-shadow, rgba(30, 36, 56, 0.1));
}
.chat-inline-html-prose .xxj-ih__compose-tape{
  position: absolute;
  top: -7px;
  left: 50%;
  width: 52px;
  height: 18px;
  margin-left: -26px;
  background: rgba(255, 230, 140, 0.88);
  border: 1px solid rgba(200, 170, 80, 0.55);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 2;
  opacity: 0.92;
}
.chat-inline-html-prose .xxj-ih--compose.xxj-ih--tint-dusk{
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 3px 4px 0 #1a2030, 0 10px 28px rgba(0, 0, 0, 0.35);
}
.chat-inline-html-prose .xxj-ih--compose.xxj-ih--tint-blush{
  border-radius: 20px;
}
.chat-inline-html-prose .xxj-ihc-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.chat-inline-html-prose .xxj-ihc-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.chat-inline-html-prose .xxj-ihc-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ih-accent);
  opacity: 0.88;
}
.chat-inline-html-prose .xxj-ihc-title {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ih-text);
}
.chat-inline-html-prose .xxj-ihc-sub {
  font-size: 0.82rem;
  opacity: 0.76;
  margin-top: -6px;
  line-height: 1.45;
}
.chat-inline-html-prose .xxj-ihc-body {
  font-size: 0.92rem;
  line-height: 1.78;
  white-space: pre-wrap;
  color: var(--ih-text);
}
.chat-inline-html-prose .xxj-ihc-meta {
  font-size: 0.72rem;
  line-height: 1.45;
  opacity: 0.68;
  letter-spacing: 0.04em;
}
.chat-inline-html-prose .xxj-ihc-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ih-text) 88%, var(--ih-accent));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--ih-soft) 90%, white),
    color-mix(in srgb, var(--ih-bg) 70%, var(--ih-accent) 8%)
  );
  border: 1px solid var(--ih-border);
  box-shadow: 0 2px 10px var(--ih-shadow);
}
.chat-inline-html-prose .xxj-ihc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ih-soft) 95%, white),
    color-mix(in srgb, var(--ih-bg) 80%, transparent)
  );
  border: 1.5px solid var(--ih-border);
  color: var(--ih-text);
  box-shadow: 0 2px 8px var(--ih-shadow);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-inline-html-prose .xxj-ihc-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--ih-shadow);
  border-color: var(--ih-accent);
}
.chat-inline-html-prose .xxj-ihc-chip.is-picked {
  background: var(--ih-accent);
  border-color: color-mix(in srgb, var(--ih-accent) 80%, black);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ih-accent) 45%, transparent);
}
.chat-inline-html-prose .xxj-ihc-divider {
  height: 1px;
  margin: 2px 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ih-border) 12%,
    var(--ih-border) 88%,
    transparent
  );
  opacity: 0.9;
}
.chat-inline-html-prose .xxj-ihc-callout {
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ih-accent) 10%, var(--ih-bg));
  border: 1px solid var(--ih-border);
  border-left: 4px solid var(--ih-accent);
  font-size: 0.88rem;
  line-height: 1.68;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 自由拼贴零件 */
.chat-inline-html-prose .xxj-ihc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.chat-inline-html-prose .xxj-ihc-banner {
  margin: -4px -6px 4px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in srgb, var(--ih-text) 15%, white);
  background: var(--ih-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ih-accent) 40%, transparent);
}
.chat-inline-html-prose .xxj-ihc-ribbon {
  position: absolute;
  top: 12px;
  left: -4px;
  padding: 4px 14px 4px 10px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ih-accent);
  border-radius: 0 8px 8px 0;
  box-shadow: 2px 3px 8px var(--ih-shadow);
  z-index: 2;
}
.chat-inline-html-prose .xxj-ihc-crossout {
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ih-accent) 85%, #c03030);
  text-decoration-thickness: 2px;
  opacity: 0.82;
  letter-spacing: 0.02em;
}
.chat-inline-html-prose .xxj-ihc-receipt {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ih-bg) 55%, white);
  border: 1px dashed var(--ih-border);
  letter-spacing: 0.04em;
}
.chat-inline-html-prose .xxj-ihc-hand {
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 1.02rem;
  line-height: 1.65;
  transform: rotate(-0.6deg);
}

.chat-inline-html-prose .xxj-ihc-media{
  border-radius: 12px;
  overflow: hidden;
  background: #1a2030;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-inline-html-prose .xxj-ihc-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-inline-html-prose .xxj-ihc-media--ph{
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: linear-gradient(145deg, #3a4868, #1a2438);
}
.chat-inline-html-prose .xxj-ihc-panel{
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed var(--ih-border, rgba(140, 160, 200, 0.45));
  font-size: 0.88rem;
  line-height: 1.65;
}
.chat-inline-html-prose .xxj-ihc-panel.xxj-ihc-collapsed{
  display: none;
}
.chat-inline-html-prose .xxj-ihc-reveal{
  min-height: 1.2em;
  font-size: 0.86rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ih-accent, #4a5870);
}
.chat-inline-html-prose .xxj-ihc-tabs{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-inline-html-prose .xxj-ihc-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 900;
  color: rgba(255, 248, 245, 0.95);
  background: radial-gradient(
    circle at 32% 28%,
    color-mix(in srgb, var(--ih-accent) 88%, white),
    color-mix(in srgb, var(--ih-accent) 55%, #2a1828)
  );
  border: 2px solid color-mix(in srgb, var(--ih-accent) 70%, white);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--ih-accent) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: rotate(11deg);
  z-index: 3;
}

/* 迷你对话条 */
.chat-inline-html-prose .xxj-ihc-mini-chat{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--ih-border, rgba(140, 160, 200, 0.35));
}
.chat-inline-html-prose .xxj-ihc-mini-row{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}
.chat-inline-html-prose .xxj-ihc-mini-row--char{
  flex-direction: row-reverse;
}
.chat-inline-html-prose .xxj-ihc-mini-who{
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0.55;
  width: 1.2em;
  text-align: center;
}
.chat-inline-html-prose .xxj-ihc-mini-bubble{
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.84rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.chat-inline-html-prose .xxj-ihc-mini-row--user .xxj-ihc-mini-bubble{
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(160, 180, 210, 0.45);
  border-bottom-left-radius: 4px;
}
.chat-inline-html-prose .xxj-ihc-mini-row--char .xxj-ihc-mini-bubble{
  background: var(--ih-accent, #5a88c0);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* 刮刮卡 */
.chat-inline-html-prose .xxj-ihc-scratch{
  position: relative;
  min-height: 88px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--ih-border, rgba(140, 160, 200, 0.5));
  background: rgba(255, 255, 255, 0.25);
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.chat-inline-html-prose [data-xxj-scratch]{
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.chat-inline-html-prose .xxj-ihc-scratch-cover,
.chat-inline-html-prose [data-xxj-scratch-cover]{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(50, 40, 30, 0.85);
  background: #c8c0b0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.15) 4px,
    rgba(255, 255, 255, 0.15) 8px
  );
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 2;
}
.chat-inline-html-prose .xxj-ihc-scratch-body{
  padding: 16px 14px;
  font-size: 0.88rem;
  line-height: 1.65;
  min-height: 88px;
  display: flex;
  align-items: center;
}
.chat-inline-html-prose .xxj-ihc-scratch--step-1 .xxj-ihc-scratch-cover,
.chat-inline-html-prose [data-xxj-scratch].xxj-ihc-scratch--step-1 [data-xxj-scratch-cover]{
  opacity: 0.82;
}
.chat-inline-html-prose .xxj-ihc-scratch--step-2 .xxj-ihc-scratch-cover,
.chat-inline-html-prose [data-xxj-scratch].xxj-ihc-scratch--step-2 [data-xxj-scratch-cover]{
  opacity: 0.55;
}
.chat-inline-html-prose .xxj-ihc-scratch--step-3 .xxj-ihc-scratch-cover,
.chat-inline-html-prose [data-xxj-scratch].xxj-ihc-scratch--step-3 [data-xxj-scratch-cover]{
  opacity: 0.35;
}
.chat-inline-html-prose .xxj-ihc-scratch--step-4 .xxj-ihc-scratch-cover,
.chat-inline-html-prose [data-xxj-scratch].xxj-ihc-scratch--step-4 [data-xxj-scratch-cover]{
  opacity: 0.18;
}
.chat-inline-html-prose .xxj-ihc-scratch.is-scratch-tap,
.chat-inline-html-prose [data-xxj-scratch].is-scratch-tap{
  transform: scale(0.985);
  transition: transform 0.12s ease;
}
.chat-inline-html-prose .xxj-ihc-scratch.is-revealed .xxj-ihc-scratch-cover,
.chat-inline-html-prose [data-xxj-scratch].is-revealed .xxj-ihc-scratch-cover,
.chat-inline-html-prose [data-xxj-scratch].is-revealed [data-xxj-scratch-cover],
.chat-inline-html-prose .xxj-ihc-scratch.is-revealed [data-xxj-scratch-cover],
.chat-inline-html-prose .xxj-ihc-scratch-cover.is-revealed,
.chat-inline-html-prose [data-xxj-scratch-cover].is-revealed{
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
  visibility: hidden;
}

/* 印记铭牌（扁平） */
.chat-inline-html-prose .xxj-ih--prism{
  padding: 18px 20px 16px;
  border-radius: 6px;
  border: 3px solid var(--ih-accent, #7868b8);
  background: var(--ih-bg, #faf8fc);
  color: var(--ih-text, #2a2030);
  box-shadow: 4px 5px 0 var(--ih-border, #c8b8e8), 0 8px 20px var(--ih-shadow, rgba(80, 60, 120, 0.1));
}
.chat-inline-html-prose .xxj-ih__prism-notch{
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 14px 0 0;
  border-color: var(--ih-accent, #7868b8) transparent transparent transparent;
  opacity: 0.85;
}
.chat-inline-html-prose .xxj-ih__prism-tag{
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ih-accent, #7868b8);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ih-accent, #7868b8);
}
.chat-inline-html-prose .xxj-ih__title--prism{
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.chat-inline-html-prose .xxj-ih__body--prism{
  font-size: 0.9rem;
  line-height: 1.72;
  white-space: pre-wrap;
}

/* 复古明信片 */
.chat-inline-html-prose .xxj-ih--postcard{
  padding: 20px 20px 18px 22px;
  border-radius: 4px;
  background-color: #faf6f0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 25px,
    rgba(58, 92, 137, 0.07) 25px,
    rgba(58, 92, 137, 0.07) 26px
  );
  border: 1px solid #c8b8a0;
  box-shadow: 2px 3px 0 rgba(92, 72, 48, 0.1), 0 8px 22px rgba(48, 38, 28, 0.12);
  font-family: Georgia, "Times New Roman", serif;
  color: #3a3028;
  transform: rotate(0.6deg);
}
.chat-inline-html-prose .xxj-ih__postcard-stamp{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px dashed #a87858;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #a85848;
  opacity: 0.82;
  transform: rotate(12deg);
  background: #fff8f0;
}
.chat-inline-html-prose .xxj-ih__postcard-lines{
  position: absolute;
  top: 18px;
  left: 18px;
  width: 42%;
  height: 36px;
  border-bottom: 1px solid rgba(92, 72, 48, 0.2);
  pointer-events: none;
  opacity: 0.55;
}
.chat-inline-html-prose .xxj-ih__postcard-lines::before{
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 100%;
  border-bottom: 1px solid rgba(92, 72, 48, 0.16);
}
.chat-inline-html-prose .xxj-ih__postcard-place{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a5848;
  margin-bottom: 14px;
  padding-right: 58px;
}
.chat-inline-html-prose .xxj-ih__body--postcard{
  font-size: 0.92rem;
  line-height: 1.8;
  padding-right: 8px;
}

body.dark .chat-inline-html-prose .xxj-ih--gradient-mood,
body.dark .chat-inline-html-prose .xxj-ih--vibe {
  filter: brightness(0.92) saturate(1.05);
}
body.dark .chat-inline-html-prose .xxj-ih__vibe-chip {
  background: rgba(0, 0, 0, 0.28);
}
body.dark .chat-inline-html-prose .xxj-ih--compose,
body.dark .chat-inline-html-prose .xxj-ih--prop,
body.dark .chat-inline-html-prose .xxj-ih--glass,
body.dark .chat-inline-html-prose .xxj-ih--notecard {
  filter: brightness(0.94);
}
body.dark .chat-inline-html-prose .xxj-ih--prism,
body.dark .chat-inline-html-prose .xxj-ih--postcard {
  filter: brightness(0.9) saturate(1.08);
}
body.dark .chat-inline-html-prose .xxj-ihc-chip {
  background: rgba(0, 0, 0, 0.25);
}
body.dark .chat-inline-html-prose .xxj-ihc-callout,
body.dark .chat-inline-html-prose .xxj-ihc-panel {
  background: rgba(0, 0, 0, 0.22);
}
body.dark .chat-inline-html-prose .xxj-ih--prop::after {
  opacity: 0.06;
}

/* 声明书 / 表单 / 印章（模型自由组合 class，非固定模板） */
.chat-inline-html-prose .xxj-ihc-cert {
  padding: 18px 16px 16px;
  border: 2px double var(--ih-border, rgba(140, 160, 200, 0.55));
  border-radius: 4px;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ih-bg, #faf8f5) 92%, white),
    color-mix(in srgb, var(--ih-soft, rgba(255, 255, 255, 0.55)) 80%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ih-soft) 70%, transparent);
}
.chat-inline-html-prose .xxj-ihc-cert .xxj-ihc-title {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  margin-bottom: 12px;
}
.chat-inline-html-prose .xxj-ihc-form-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--ih-border) 65%, transparent);
  font-size: 0.88rem;
}
.chat-inline-html-prose .xxj-ihc-form-row:last-child {
  border-bottom: none;
}
.chat-inline-html-prose .xxj-ihc-form-row > :first-child {
  flex: 0 0 auto;
  min-width: 4.2em;
  font-weight: 700;
  opacity: 0.72;
  letter-spacing: 0.06em;
}
.chat-inline-html-prose .xxj-ihc-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 3px solid #c62828;
  color: #c62828;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  transform: rotate(-12deg);
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.22);
  user-select: none;
}
.chat-inline-html-prose .xxj-ihc-handnote {
  font-family: "Segoe Script", "Apple Chancery", "Comic Sans MS", cursive;
  font-size: 1.02rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
}
.chat-inline-html-prose .xxj-ihc-doc-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ih-border) 55%, transparent);
  font-size: 0.78rem;
  opacity: 0.68;
  text-align: right;
  letter-spacing: 0.04em;
}
body.dark .chat-inline-html-prose .xxj-ihc-cert {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ih-bg, #1a1c24) 88%, black),
    color-mix(in srgb, var(--ih-soft) 40%, transparent)
  );
}

/* —— 更多形态壳（自由叠 class，非固定模板） —— */
.chat-inline-html-prose .xxj-ih--receipt {
  max-width: 17.5rem;
  margin-inline: auto;
  padding: 14px 12px 18px;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  background: #f4f2ee;
  color: #2a2824;
  border: none;
  box-shadow: 0 2px 0 #ddd8cf, 0 8px 22px rgba(0, 0, 0, 0.08);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 98% 100%, 96% calc(100% - 8px), 94% 100%, 92% calc(100% - 8px), 90% 100%, 88% calc(100% - 8px), 86% 100%, 84% calc(100% - 8px), 82% 100%, 80% calc(100% - 8px), 78% 100%, 76% calc(100% - 8px), 74% 100%, 72% calc(100% - 8px), 70% 100%, 68% calc(100% - 8px), 66% 100%, 64% calc(100% - 8px), 62% 100%, 60% calc(100% - 8px), 58% 100%, 56% calc(100% - 8px), 54% 100%, 52% calc(100% - 8px), 50% 100%, 48% calc(100% - 8px), 46% 100%, 44% calc(100% - 8px), 42% 100%, 40% calc(100% - 8px), 38% 100%, 36% calc(100% - 8px), 34% 100%, 32% calc(100% - 8px), 30% 100%, 28% calc(100% - 8px), 26% 100%, 24% calc(100% - 8px), 22% 100%, 20% calc(100% - 8px), 18% 100%, 16% calc(100% - 8px), 14% 100%, 12% calc(100% - 8px), 10% 100%, 8% calc(100% - 8px), 6% 100%, 4% calc(100% - 8px), 2% 100%, 0 calc(100% - 8px));
}
.chat-inline-html-prose .xxj-ih--coupon {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px dashed var(--ih-accent, #5a78a8);
  background: color-mix(in srgb, var(--ih-bg) 90%, var(--ih-accent) 6%);
}
.chat-inline-html-prose .xxj-ih--coupon > :last-child {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 12px 10px;
  border-left: 2px dashed color-mix(in srgb, var(--ih-accent) 55%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-inline-html-prose .xxj-ih--chalk {
  padding: 16px 14px;
  border-radius: 8px;
  background: linear-gradient(155deg, #2a3238 0%, #1a2024 100%);
  color: #eef2f0;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.2);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
}
.chat-inline-html-prose .xxj-ih--neon {
  padding: 18px 16px;
  border-radius: 10px;
  background: #0a0a12;
  color: #ff6eb4;
  text-shadow: 0 0 8px #ff6eb4, 0 0 18px rgba(255, 110, 180, 0.45);
  box-shadow: inset 0 0 24px rgba(255, 110, 180, 0.08), 0 0 20px rgba(255, 110, 180, 0.15);
  border: 1px solid rgba(255, 110, 180, 0.35);
}
.chat-inline-html-prose .xxj-ih--sticky {
  padding: 16px 14px 14px;
  min-height: 5rem;
  background: linear-gradient(165deg, #fff9a8 0%, #ffe566 100%);
  color: #3a3200;
  box-shadow: 2px 4px 12px rgba(80, 70, 0, 0.18);
  transform: rotate(-1.2deg);
}
.chat-inline-html-prose .xxj-ih--sticky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
}
.chat-inline-html-prose .xxj-ih--label {
  padding: 12px 14px;
  border: 2px solid #222;
  border-radius: 4px;
  background: #fff;
  font-size: 0.78rem;
  font-family: ui-monospace, monospace;
  line-height: 1.45;
}
.chat-inline-html-prose .xxj-ih--label::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid #222;
  opacity: 0.25;
}
.chat-inline-html-prose .xxj-ih--stack {
  padding: 18px 16px 14px;
  background: var(--ih-bg);
  border-radius: 12px;
  box-shadow:
    0 1px 0 var(--ih-border),
    0 8px 0 -2px color-mix(in srgb, var(--ih-bg) 92%, var(--ih-accent)),
    0 8px 0 0 var(--ih-border),
    0 16px 0 -4px color-mix(in srgb, var(--ih-bg) 84%, var(--ih-accent)),
    0 16px 0 0 var(--ih-border),
    0 10px 28px var(--ih-shadow);
}
.chat-inline-html-prose .xxj-ih--washi {
  padding-top: 22px;
}
.chat-inline-html-prose .xxj-ih--washi::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12%;
  right: 12%;
  height: 22px;
  background: color-mix(in srgb, var(--ih-accent) 35%, #f5e6c8);
  opacity: 0.82;
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  z-index: 3;
  pointer-events: none;
}

/* —— 形似壳：奖状/通缉/处方/菜单/警告/工牌（与 prompt 类型对照） —— */
.chat-inline-html-prose .xxj-ih--cert {
  position: relative;
  padding: 26px 18px 20px;
  border-radius: 4px;
  background: linear-gradient(168deg, #fffdf6 0%, #f6ecd8 42%, #fff9ee 100%);
  border: 3px double #c8a048;
  box-shadow:
    inset 0 0 0 3px #fffef8,
    inset 0 0 0 5px #dcc070,
    0 10px 32px rgba(100, 72, 28, 0.16);
  font-family: Georgia, "SimSun", "Songti SC", "Noto Serif SC", serif;
  color: #3a2e18;
  text-align: center;
}
.chat-inline-html-prose .xxj-ih--cert::before,
.chat-inline-html-prose .xxj-ih--cert::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid #c8a048;
  opacity: 0.55;
  pointer-events: none;
}
.chat-inline-html-prose .xxj-ih--cert::before {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}
.chat-inline-html-prose .xxj-ih--cert::after {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
}
.chat-inline-html-prose .xxj-ih--cert .xxj-ihc-banner {
  position: relative;
  margin: 0 auto 14px;
  max-width: 88%;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: #4a3408;
  background: linear-gradient(90deg, #a87818, #e8c858 35%, #f0d878 50%, #e8c858 65%, #a87818);
  box-shadow: 0 4px 14px rgba(140, 100, 20, 0.28);
}
.chat-inline-html-prose .xxj-ih--cert .xxj-ihc-cert {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 4px 8px 0;
  text-align: center;
}
.chat-inline-html-prose .xxj-ih--cert .xxj-ihc-title {
  text-align: center;
  letter-spacing: 0.22em;
  font-size: 1.08rem;
}
.chat-inline-html-prose .xxj-ih--cert .xxj-ihc-kicker {
  margin-bottom: 8px;
  letter-spacing: 0.28em;
  opacity: 0.75;
}
.chat-inline-html-prose .xxj-ihc-recipient {
  display: block;
  text-align: center;
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin: 10px auto 12px;
  padding: 0 8px 10px;
  border-bottom: 1px solid rgba(160, 120, 48, 0.38);
  color: #5a4018;
}
.chat-inline-html-prose .xxj-ih--cert .xxj-ihc-body {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.85;
  margin: 8px 0 14px;
}
.chat-inline-html-prose .xxj-ih--cert .xxj-ihc-doc-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(160, 120, 48, 0.35);
  text-align: right;
}

.chat-inline-html-prose .xxj-ih--diploma {
  padding: 24px 20px 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, #faf6ee 0%, #f0e8d8 100%);
  border: 4px solid #2a4060;
  outline: 2px solid #c8a860;
  outline-offset: -8px;
  font-family: Georgia, "Times New Roman", "SimSun", serif;
  color: #1a2838;
  box-shadow: 0 8px 28px rgba(30, 40, 60, 0.14);
}
.chat-inline-html-prose .xxj-ih--diploma .xxj-ihc-title {
  text-align: center;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  border-bottom: 2px solid #2a4060;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.chat-inline-html-prose .xxj-ih--wanted {
  padding: 18px 16px 16px;
  border-radius: 2px;
  background: #f0e4a8;
  border: 3px solid #2a2010;
  color: #1a1008;
  box-shadow: 4px 5px 0 rgba(40, 30, 10, 0.18);
  font-family: "Arial Black", "Impact", sans-serif;
  text-align: center;
}
.chat-inline-html-prose .xxj-ih--wanted .xxj-ihc-banner,
.chat-inline-html-prose .xxj-ih--wanted .xxj-ihc-title {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.25;
}
.chat-inline-html-prose .xxj-ih--wanted .xxj-ihc-body {
  font-family: Georgia, serif;
  font-size: 0.88rem;
  font-weight: 400;
  text-align: left;
  line-height: 1.65;
}

.chat-inline-html-prose .xxj-ih--prescription {
  padding: 16px 14px 14px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #c8d0d8;
  border-top: 4px solid #c03030;
  font-family: system-ui, sans-serif;
  color: #1a2430;
  box-shadow: 0 4px 16px rgba(30, 40, 60, 0.08);
}
.chat-inline-html-prose .xxj-ih--prescription::before {
  content: "Rx";
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 1.4rem;
  font-weight: 900;
  font-style: italic;
  color: #c03030;
  opacity: 0.85;
  pointer-events: none;
}
.chat-inline-html-prose .xxj-ih--prescription .xxj-ihc-kicker {
  padding-left: 2.2rem;
  margin-bottom: 10px;
}

.chat-inline-html-prose .xxj-ih--menu {
  padding: 16px 14px 14px;
  border-radius: 8px;
  background: #faf6f0;
  border: 1px solid #c8b8a0;
  font-family: Georgia, "Times New Roman", serif;
  color: #3a3028;
  box-shadow: 0 6px 20px rgba(60, 48, 32, 0.1);
}
.chat-inline-html-prose .xxj-ih--menu .xxj-ihc-banner,
.chat-inline-html-prose .xxj-ih--menu .xxj-ihc-title {
  text-align: center;
  letter-spacing: 0.14em;
  border-bottom: 1px dashed rgba(90, 72, 48, 0.35);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.chat-inline-html-prose .xxj-ih--menu .xxj-ihc-form-row {
  justify-content: space-between;
}
.chat-inline-html-prose .xxj-ih--menu .xxj-ihc-price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.chat-inline-html-prose .xxj-ih--warning {
  padding: 16px 14px 14px 18px;
  border-radius: 6px;
  background: repeating-linear-gradient(
    -45deg,
    #f0c020,
    #f0c020 8px,
    #1a1a1a 8px,
    #1a1a1a 16px
  );
  border: 3px solid #1a1a1a;
  color: #1a1000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.chat-inline-html-prose .xxj-ih--warning > * {
  background: #f0c020;
  padding: 12px 14px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: center;
}

.chat-inline-html-prose .xxj-ih--badge-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  max-width: 16.5rem;
  padding: 14px 14px 12px;
  border-radius: 10px;
  background: linear-gradient(145deg, #f4f8fc, #e8eef8);
  border: 2px solid #8898b0;
  box-shadow: 0 6px 18px rgba(40, 60, 100, 0.12);
  font-family: system-ui, sans-serif;
  color: #1a2438;
}
.chat-inline-html-prose .xxj-ih--badge-card .xxj-ihc-panel:first-child,
.chat-inline-html-prose .xxj-ih--badge-card > :first-child:not(.xxj-ihc-title):not(.xxj-ihc-body) {
  width: 72px;
  height: 88px;
  border-radius: 6px;
  background: linear-gradient(145deg, #8898b0, #5a6880);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.08em;
}
.chat-inline-html-prose .xxj-ih--badge-card .xxj-ihc-title {
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.chat-inline-html-prose .xxj-ih--badge-card .xxj-ihc-meta {
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
}

body.dark .chat-inline-html-prose .xxj-ih--cert {
  background: linear-gradient(168deg, #2a2418 0%, #1e1a10 100%);
  border-color: #a88830;
  color: #f0e8d0;
  box-shadow:
    inset 0 0 0 3px #1a1810,
    inset 0 0 0 5px #806820,
    0 10px 32px rgba(0, 0, 0, 0.35);
}
body.dark .chat-inline-html-prose .xxj-ih--cert .xxj-ihc-recipient {
  color: #e8d8a8;
  border-bottom-color: rgba(200, 160, 72, 0.35);
}
body.dark .chat-inline-html-prose .xxj-ih--wanted {
  background: #3a3420;
  border-color: #c8b878;
  color: #f0e8c0;
}
body.dark .chat-inline-html-prose .xxj-ih--prescription {
  background: #1e222c;
  border-color: #3a4050;
  color: #e8ecf4;
}
body.dark .chat-inline-html-prose .xxj-ih--menu {
  background: #242018;
  border-color: #4a4030;
  color: #e8e0d0;
}
body.dark .chat-inline-html-prose .xxj-ih--badge-card {
  background: linear-gradient(145deg, #1e2838, #141820);
  border-color: #4a5870;
  color: #e8ecf4;
}

/* 组件：时间轴 / 进度 / 清单 / 对话泡 / 价签 … */
.chat-inline-html-prose .xxj-ihc-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.chat-inline-html-prose .xxj-ihc-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--ih-accent) 45%, var(--ih-border));
}
.chat-inline-html-prose .xxj-ihc-timeline-node {
  position: relative;
  padding: 8px 0 12px 12px;
  font-size: 0.84rem;
  line-height: 1.55;
}
.chat-inline-html-prose .xxj-ihc-timeline-node::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ih-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ih-accent) 25%, transparent);
}
.chat-inline-html-prose .xxj-ihc-meter {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ih-border) 40%, transparent);
  overflow: hidden;
}
.chat-inline-html-prose .xxj-ihc-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ih-accent), color-mix(in srgb, var(--ih-accent) 70%, white));
  min-width: 8%;
  transition: width 0.35s ease;
}
.chat-inline-html-prose .xxj-ihc-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-inline-html-prose .xxj-ihc-pill-row > span,
.chat-inline-html-prose .xxj-ihc-pill-row > .xxj-ihc-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--ih-accent) 12%, var(--ih-bg));
  border: 1px solid var(--ih-border);
}
.chat-inline-html-prose .xxj-ihc-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-inline-html-prose .xxj-ihc-checklist li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.5;
}
.chat-inline-html-prose .xxj-ihc-checklist li::before {
  content: "□";
  flex-shrink: 0;
  font-weight: 700;
  opacity: 0.55;
}
.chat-inline-html-prose .xxj-ihc-checklist li.is-done::before {
  content: "☑";
  color: var(--ih-accent);
  opacity: 1;
}
.chat-inline-html-prose .xxj-ihc-barcode {
  display: block;
  height: 2.2rem;
  margin: 8px 0;
  background: repeating-linear-gradient(
    90deg,
    #111 0,
    #111 2px,
    #fff 2px,
    #fff 4px,
    #111 4px,
    #111 5px,
    #fff 5px,
    #fff 8px
  );
  opacity: 0.85;
}
.chat-inline-html-prose .xxj-ihc-speech {
  position: relative;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: color-mix(in srgb, var(--ih-soft) 90%, white);
  border: 1px solid var(--ih-border);
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 92%;
}
.chat-inline-html-prose .xxj-ihc-speech--right {
  margin-left: auto;
  border-radius: 14px 14px 4px 14px;
  background: color-mix(in srgb, var(--ih-accent) 18%, var(--ih-bg));
}
.chat-inline-html-prose .xxj-ihc-price {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ih-accent);
}
.chat-inline-html-prose .xxj-ihc-price small {
  font-size: 0.62em;
  font-weight: 700;
  opacity: 0.72;
}
body.dark .chat-inline-html-prose .xxj-ih--receipt {
  background: #2a2826;
  color: #e8e4dc;
}
body.dark .chat-inline-html-prose .xxj-ih--sticky {
  color: #2a2400;
}
body.dark .chat-inline-html-prose .xxj-ih--label {
  background: #1e1e22;
  border-color: #888;
  color: #eee;
}

#chat-screen .chat-msg-bubble-stack > .chat-msg-card--inline-html + .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice),
#chat-screen .chat-msg-bubble-stack > .chat-msg-bubble:not(.chat-msg-bubble--sticker):not(.chat-msg-bubble--typing):not(.chat-msg-bubble--voice) + .chat-msg-card--inline-html {
  margin-top: 0.72rem;
}
#chat-screen.chat-screen--theme-glass .chat-msg-card--inline-html {
  border-radius: 0;
  background: transparent;
}