: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;
}

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;
  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;
  /* 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-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;
  --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, 720px);
  overflow: auto;
  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%);
}

/* 聊天发送：微信式底部表情面板 */
#sticker-sheet[data-mode="pick"] .sticker-card {
  left: 50%;
  top: auto;
  bottom: calc(0px + env(safe-area-inset-bottom, 0px));
  width: min(560px, 100vw);
  max-height: min(52vh, 520px);
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
  transform: translate(-50%, 18px);
  opacity: 0;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.18);
}
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: translate(-50%, 0);
}

#sticker-sheet[data-mode="pick"] .sticker-head {
  display: none;
}
#sticker-sheet[data-mode="pick"] .sticker-body {
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#sticker-sheet[data-mode="pick"] .sticker-toolbar,
#sticker-sheet[data-mode="pick"] #sticker-hint {
  display: none !important;
}
#sticker-sheet[data-mode="pick"] #sticker-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 0;
}
#sticker-sheet[data-mode="pick"] #sticker-sheet-cats {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.dark #sticker-sheet[data-mode="pick"] #sticker-sheet-cats {
  border-top-color: rgba(255, 255, 255, 0.10);
}
#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;
}
.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;
}
.sticker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#sticker-sheet[data-mode="pick"] #sticker-export-json,
#sticker-sheet[data-mode="pick"] #sticker-import-json,
#sticker-sheet[data-mode="pick"] #sticker-add-open,
#sticker-sheet[data-mode="pick"] #sticker-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 .sticker-manager {
  max-width: 720px;
  margin: 0 auto;
}
.sticker-screen .settings-body {
  /* iOS grouped background */
  background: rgba(242, 242, 247, 0.92);
}
body.dark .sticker-screen .settings-body {
  background: rgba(16, 17, 19, 0.92);
}
.sticker-screen .settings-inner {
  background: transparent;
}
.sticker-manager-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sticker-screen .sticker-manager-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px 0 12px;
  background: linear-gradient(180deg, rgba(242, 242, 247, 0.92), rgba(242, 242, 247, 0.66));
}
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;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 5;
}
.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, 720px);
  overflow: auto;
  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;
}
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;
}
.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;
}
.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: 100%;
  height: 148px;
  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;
}
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);
}
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-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;
}

.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 {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 460px) {
  .sticker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sticker-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  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: 1 / 1;
  flex-shrink: 0;
  overflow: hidden;
}
.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-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.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-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-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: 红包消息卡（不使用气泡容器包裹） */
.chat-msg-card--redpack {
  max-width: min(100%, 252px);
}
.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);
}
.chat-photo-polaroid--memo:active {
  transform: rotate(-0.32deg) 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--memo:hover,
  .chat-photo-polaroid--memo:active {
    transform: rotate(-0.28deg);
  }
}
.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);
}
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: 100%;
  max-width: 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-family: "Noto Serif SC", "Playfair Display", Georgia, serif;
  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;
}
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-polaroid--memo {
  transform: rotate(-0.28deg);
  padding: 16px 14px 14px;
  min-width: 0;
}
.chat-photo-polaroid--memo:hover {
  transform: rotate(-0.22deg) translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .chat-photo-polaroid--memo:hover {
    transform: rotate(-0.28deg);
  }
}
.chat-photo-polaroid-memo-body {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  padding: 10px 10px 11px;
  border-radius: 10px;
  font-family: "Noto Serif SC", Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--text-main);
  word-break: break-word;
  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-memo-body {
  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-redpack {
  width: 100%;
  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::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -1px 0 rgba(0, 0, 0, 0.04) inset;
  z-index: 1;
}
body.dark .chat-redpack::before {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.26) 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: 12px;
  padding: 12px 12px 10px;
  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: 32px;
  height: 32px;
  border-radius: 12px;
  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: 1.05rem; 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: 4px;
  font-size: 0.86rem;
  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.34rem;
  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: 9px 12px 11px;
  font-size: 0.72rem;
  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);
}

/* 通话结束：外框宽度与红包卡一致（252px），内部略缩放以容纳时间轴 */
.chat-msg-card--call-ended {
  width: min(100%, 252px);
  max-width: min(100%, 252px);
  flex-shrink: 0;
  box-sizing: border-box;
}
.chat-msg--user .chat-msg-card--call-ended {
  margin-left: auto;
}
.chat-msg--call-ended-notice .chat-msg-bubble-stack {
  width: min(100%, 252px);
  max-width: min(100%, 252px);
  flex-shrink: 0;
  box-sizing: border-box;
}
.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 {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.chat-call-recap--from-user {
  flex-direction: row-reverse;
}
.chat-call-recap-track {
  flex: 0 0 auto;
  width: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}
.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: 6px;
  min-height: 22px;
  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 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 128px;
  min-height: 128px;
  max-height: 128px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: none;
  padding: 12px 12px 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.dark .chat-call-recap-sheet {
  border-color: var(--line);
  background: var(--bg-card);
  box-shadow: none;
}
.chat-call-recap-hd {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.chat-call-recap-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-main);
}
.chat-call-recap-kind i {
  font-size: 1.05rem;
  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 10px;
  display: flex;
  align-items: center;
  min-height: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 1.34rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.chat-call-recap--missed .chat-call-recap-dur {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.38;
}
.chat-call-recap-perf {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: 0;
  margin: 0 0 8px;
  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.72rem;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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;
}
.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-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;
  transform: translate(-50%, -50%);
}
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%);
  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-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Source Han Sans", "Noto Sans SC", "Segoe UI",
    system-ui, sans-serif;
  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;
}

/* 角色主动拨入 · 来电浮层（须高于 .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 {
  animation-delay: 0.75s;
  border-color: rgba(var(--tint-rgb), 0.22);
}
.char-incoming-call-pulse--3 {
  animation-delay: 1.45s;
  border-color: rgba(var(--tint-rgb), 0.12);
  border-width: 1px;
}
.char-incoming-call[data-call-mode="video"] .char-incoming-call-pulse {
  border-color: rgba(var(--blush-rgb), 0.38);
}
.char-incoming-call[data-call-mode="video"] .char-incoming-call-pulse--2 {
  border-color: rgba(var(--blush-rgb), 0.2);
}
@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%; }

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;
}

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-msg {
  min-height: 18px;
  margin-top: 10px;
  font-size: 0.68rem;
  color: var(--text-sub);
}
.auth-msg.error {
  color: #c44646;
}
.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-hint {
  margin-top: 8px;
  font-size: 0.62rem;
  line-height: 1.45;
  color: var(--text-sub);
  opacity: 0.9;
}

/* 开屏：浅色层次 + 蝶蜓点缀过渡（无卡片） */
.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-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;
  position: relative;
  overflow: hidden;
  /* 不做实体机外框：避免大屏预览一圈黑边，也与 iOS PWA 全屏观感一致 */
  border-radius: 0;
  background: var(--bg-device);
  box-shadow: none;
  /* Grid：第三行 minmax(0,1fr) 给中间可滚区明确高度，避免部分安卓上 flex+overflow 滚不到底 */
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}

.settings-screen,
.sticker-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--bg-device);
  color: var(--text-main);
  /* 盖住 flex 子项舍入误差，避免底部露 1px 异色 */
  min-height: 100%;
}
.settings-screen {
  z-index: 30;
}
.sticker-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;
}
.settings-screen.is-open,
.sticker-screen.is-open {
  display: flex;
  flex-direction: column;
}

/* 密谈列表 / 聊天：常驻 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: translateY(12px);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-list-screen.is-open,
.chat-screen.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .chat-list-screen,
  .chat-screen,
  .char-screen,
  .my-screen,
  .world-book-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 {
    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-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-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;
}
.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-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,
.chat-list-screen .settings-watermark,
.chat-screen .settings-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 .chat-list-screen .settings-watermark,
body.dark .chat-screen .settings-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); }
.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-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-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);
}
.settings-api-field--char-summary-only .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;
  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 {
  width: 4px;
}
.settings-body::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.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;
}
.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-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);
}
.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-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;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* 与 .dock-stack 对齐：bottom + height + 空隙（Dock 略缩后为 68px 高） */
  padding-bottom: calc(32px + 68px + max(18px, calc(14px + env(safe-area-inset-bottom, 0px))));
}

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

.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; }

.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-plate（与导航同形的胶囊） */
.dock-stack {
  position: absolute;
  left: 16px;
  right: 16px;
  /* PWA 里 safe-area 偶发偏小，用 max 保底；略抬高 1～2px 让底边少挤 */
  bottom: max(20px, calc(14px + env(safe-area-inset-bottom, 0px)));
  height: 68px;
  z-index: 5;
}
.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; }

.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;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 100px;
  z-index: 50;
  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);
}

/* —— 聊天页：同一套顶栏 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;
}
.chat-screen .chat-identity-wrap {
  margin-bottom: 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 {
  gap: 10px;
  padding: 0 14px 10px;
}
.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 calc(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;
}

/* 挂在 .settings-inner 下，铺满整块聊天内层（含原顶栏），避免详情页仍露出「桌面 / Thread」条 */
.chat-screen .settings-inner > .chat-thread-detail-panel {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--bg-device);
  border-top: none;
  box-shadow: none;
}
body.dark .chat-screen .settings-inner > .chat-thread-detail-panel {
  box-shadow: none;
}
.chat-thread-detail-panel[hidden] {
  display: none !important;
}
.chat-thread-detail-panel:not([hidden]) {
  display: flex;
}

/* 聊天气泡长按：对齐登录页 .auth-overlay / .auth-card（Space Mono kicker + Playfair 标题 + 圆角行 + .auth-skip） */
.chat-screen .settings-inner > .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;
  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-open .chat-bubble-actions-sheet {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@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;
}
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 .settings-inner > .chat-inner-voice {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}
.chat-screen .settings-inner > .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;
}
.chat-inner-voice[hidden] {
  display: none !important;
}
.chat-inner-voice.is-open {
  pointer-events: auto;
}
.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);
}
@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-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 {
  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 {
  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-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-inner-voice-slab-panel {
  position: relative;
}
#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;
}
.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-time {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 5px;
}
.chat-inner-voice-history-screen-preview {
  display: block;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-inner-voice-history-detail-panel {
  margin-top: 8px;
}
.chat-inner-voice-history-detail-panel .chat-inner-voice-mood {
  margin: 0 0 12px;
}
.chat-inner-voice-history-detail-panel .chat-inner-voice-body.chat-inner-voice-modalbody {
  max-height: min(46vh, 420px);
}
.chat-inner-voice-history-detail-meta {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-main);
}
.chat-inner-voice-history-detail-foot {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.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;
  -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 {
  width: 4px;
}
.chat-thread-detail-panel .chat-detail-scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.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;
}
.chat-detail-field--memory-rounds {
  margin-top: 10px;
}
.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-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);
}

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

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;
  padding: 0 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.chat-list-scroll::-webkit-scrollbar {
  width: 4px;
}
.chat-list-scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.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;
}
/* 主分区「聊天 / 朋友圈」：胶带 tab（与单聊·群聊子 tab 同视觉语言） */
.chat-list-inbox-tabs:not(.chat-thread-kind-tabs) {
  justify-content: center;
  gap: 16px;
}
.chat-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-tab {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 8px 12px 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-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-tab#chat-list-tab-threads {
  transform: rotate(-2deg);
}
.chat-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-tab#chat-list-tab-moments {
  transform: rotate(1.75deg);
}
.chat-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-tab:hover {
  border-color: rgba(188, 195, 208, 0.62);
  color: var(--text-main);
}
.chat-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-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-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-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-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-tab#chat-list-tab-threads.is-active::before {
  background: rgba(var(--tint-rgb), 0.58);
}
.chat-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-tab#chat-list-tab-moments.is-active::before {
  background: rgba(var(--blush-rgb), 0.55);
}
body.dark .chat-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-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-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-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);
}
.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,
  .chat-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-tab#chat-list-tab-threads,
  .chat-list-inbox-tabs:not(.chat-thread-kind-tabs) .chat-list-inbox-tab#chat-list-tab-moments {
    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-feed.moments-ins 控制） */
.moments-item-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.moments-item-main {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}
.moments-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.moments-item-av {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.moments-item-av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.moments-item-av.moments-item-av--img {
  background: transparent !important;
  color: transparent !important;
}

/* 朋友圈互动弹层（评论/回复） */
.moments-sheet[hidden] {
  display: none !important;
}
.moments-sheet:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: max(14px, 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));
}
.moments-sheet-bg {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(15, 15, 18, 0.42);
  cursor: pointer;
}
body.dark .moments-sheet-bg {
  background: rgba(0, 0, 0, 0.6);
}
.moments-sheet-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: 76vh;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
}
.moments-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.moments-sheet-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}
.moments-sheet-sub {
  margin: 4px 0 0;
  font-size: 0.66rem;
  color: var(--text-sub);
  line-height: 1.4;
}
.moments-sheet-body {
  padding: 12px 14px 14px;
  overflow: auto;
}
.moments-sheet-like-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(var(--tint-rgb), 0.18);
  background: rgba(var(--tint-rgb), 0.06);
  margin-bottom: 10px;
  color: var(--text-main);
  font-size: 0.72rem;
}
.moments-sheet-like-row i {
  font-size: 1rem;
  opacity: 0.7;
  color: #e24b6a;
}
.moments-sheet-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.moments-cmt {
  border: 1px solid rgba(var(--tint-rgb), 0.16);
  background: rgba(var(--tint-rgb), 0.04);
  border-radius: 14px;
  padding: 10px 10px 9px;
}
body.dark .moments-cmt {
  background: rgba(var(--tint-rgb), 0.07);
  border-color: rgba(var(--tint-rgb), 0.22);
}
.moments-cmt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.moments-cmt-name {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-main);
}
.moments-cmt-time {
  font-size: 0.62rem;
  color: var(--text-sub);
  flex-shrink: 0;
}
.moments-cmt-body {
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--text-main);
  word-break: break-word;
}
.moments-cmt-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.moments-cmt-reply {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.66rem;
  color: var(--text-sub);
  cursor: pointer;
}
.moments-cmt-reply:hover,
.moments-cmt-reply:focus-visible {
  color: var(--accent);
  outline: none;
}
.moments-sheet-composer {
  display: flex;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(var(--tint-rgb), 0.05));
}
.moments-sheet-input {
  flex: 1;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(var(--tint-rgb), 0.22);
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--text-main);
  padding: 10px 11px;
  font-size: 0.78rem;
  outline: none;
}
body.dark .moments-sheet-input {
  background: rgba(var(--tint-rgb), 0.09);
  border-color: rgba(var(--tint-rgb), 0.28);
}
.moments-sheet-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.12);
}


/* 朋友圈图片全屏预览 */
.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-feed.moments-ins） */
.chat-list-pane--moments > .settings-sec-head {
  display: none;
}
.chat-list-pane--moments {
  padding-top: 0;
  background: transparent !important;
}
.moments-feed.moments-ins {
  padding: 0 8px 12px;
}
.moments-feed.moments-ins .moments-surface-head {
  margin: 0 !important;
  padding: 8px 2px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--bg-device) !important;
  backdrop-filter: none !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
.moments-feed.moments-ins .moments-surface-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.moments-feed.moments-ins .moments-surface-head-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.moments-feed.moments-ins .moments-surface-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.15;
}
.moments-feed.moments-ins .moments-surface-sub {
  margin: 2px 0 0;
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--text-sub);
  opacity: 0.85;
}
.moments-feed.moments-ins .moments-surface-sub:empty {
  display: none;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-add {
  flex-shrink: 0;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--text-main) !important;
  font-weight: 600 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.02em;
  box-shadow: none !important;
}
body.dark .chat-list-pane--moments .moments-feed.moments-ins .moments-add {
  border-color: var(--line) !important;
  background: transparent !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-items-root {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 0 8px !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item {
  padding: 0 !important;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item:last-child {
  border-bottom: none;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px !important;
  padding: 14px 2px 12px !important;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.dark .chat-list-pane--moments .moments-feed.moments-ins .moments-item-row {
  background: transparent !important;
  box-shadow: none !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-av {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 0 0 1px var(--line) !important;
  background: transparent !important;
  color: var(--text-sub) !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-av.moments-item-av--img {
  border: none !important;
  box-shadow: none !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-av.moments-item-av--img::after {
  content: none !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-main {
  padding-top: 0;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-head {
  margin: 0 0 8px !important;
  align-items: center;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-name {
  font-family: inherit !important;
  font-style: normal !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-main) !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-time {
  font-size: 0.58rem !important;
  font-weight: 400 !important;
  color: var(--text-sub) !important;
  opacity: 0.75 !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-text {
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: var(--text-main) !important;
  margin: 0 0 8px !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid + .moments-item-text {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  gap: 2px !important;
  margin: 0 0 2px !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid--n1 {
  grid-template-columns: 1fr;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid--n1 .moments-media {
  aspect-ratio: 4 / 5 !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid--n2,
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid--n3,
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid--n4 {
  grid-template-columns: repeat(2, 1fr);
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid--n3 .moments-media:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media-grid--n4 .moments-media {
  aspect-ratio: 1 / 1;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 3px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.dark .chat-list-pane--moments .moments-feed.moments-ins .moments-media {
  background: transparent !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media::after {
  content: none !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media img {
  transition: opacity 0.15s ease !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-media:hover img {
  transform: none !important;
  opacity: 1;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 !important;
  margin: 2px 0 0 !important;
  padding: 4px 0 0 !important;
  border-top: none !important;
}
body.dark .chat-list-pane--moments .moments-feed.moments-ins .moments-item-actions {
  border-top: none !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-more-btn:hover,
.chat-list-pane--moments .moments-feed.moments-ins .moments-more-btn:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}
body.dark .chat-list-pane--moments .moments-feed.moments-ins .moments-more-btn:hover,
body.dark .chat-list-pane--moments .moments-feed.moments-ins .moments-more-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-more-btn i {
  font-size: 1.35rem;
  opacity: 0.85;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-more-menu[hidden] {
  display: none !important;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-more-menu:not([hidden]) {
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: #4c4c4e;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}
body.dark .chat-list-pane--moments .moments-feed.moments-ins .moments-more-menu:not([hidden]) {
  background: #3d3d40;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-menu-item {
  margin: 0;
  padding: 0 16px;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  line-height: 40px;
  -webkit-tap-highlight-color: transparent;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-menu-item:last-child {
  border-right: none;
}
.chat-list-pane--moments .moments-feed.moments-ins .moments-menu-item:hover,
.chat-list-pane--moments .moments-feed.moments-ins .moments-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.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 {
  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-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: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52));
}
body.dark .chat-identity-wrap--custom-bg::after {
  background: linear-gradient(180deg, rgba(22, 24, 28, 0.72), rgba(22, 24, 28, 0.48));
}
.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: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.5);
}
body.dark .chat-identity-panel--custom-bg::before {
  background: rgba(22, 24, 28, 0.45);
}
.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: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.48);
}
body.dark .chat-composer--custom-bg::before {
  background: rgba(20, 22, 26, 0.42);
}
.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);
}
.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: 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: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.52);
}
body.dark .chat-messages-stack--custom-bg .chat-messages-wallpaper::before {
  background: rgba(20, 22, 26, 0.42);
}
.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;
  -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 {
  width: 4px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.chat-messages-stack--custom-bg .chat-messages {
  padding: 10px 8px 10px;
}
.chat-messages-stack--custom-bg .chat-messages > * {
  position: relative;
  z-index: 1;
}
.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);
}

/* 角色撤回 / 撤回存档：与「心声」同层逻辑（absolute → fixed + is-open、backdrop、slab 面板） */
.chat-screen .settings-inner > .chat-char-recall-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}
/* 嵌在 settings-inner 里时，仅用 .is-open 的 fixed 会被上面更高特异性规则压成 absolute，导致弹窗只在局部顶部；此处强制铺满视口并居中 */
.chat-screen .settings-inner > .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[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 {
  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 {
  animation-delay: 0.7s;
}
.call-outbound-wave--c {
  animation-delay: 1.4s;
}
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: callBitDrift 22s ease-in-out infinite;
}
.call-bit--a {
  width: 22px;
  height: 18px;
  left: 8%;
  top: 38%;
  background: rgba(var(--tint-rgb), 0.55);
  --call-rot: -18deg;
  animation-delay: -2s;
}
.call-bit--b {
  width: 14px;
  height: 14px;
  right: 14%;
  top: 52%;
  background: rgba(var(--blush-rgb), 0.45);
  --call-rot: 22deg;
  animation-delay: -7s;
}
.call-bit--c {
  width: 40px;
  height: 8px;
  left: 22%;
  bottom: 18%;
  background: rgba(255, 255, 255, 0.22);
  --call-rot: -8deg;
  animation-delay: -11s;
}
.call-bit--d {
  width: 10px;
  height: 28px;
  right: 6%;
  bottom: 26%;
  background: rgba(var(--tint-rgb), 0.3);
  --call-rot: 12deg;
  animation-delay: -5s;
}
@keyframes callBitDrift {
  0%, 100% { transform: translate(0, 0) rotate(var(--call-rot, 0deg)); }
  33% { transform: translate(3px, -5px) rotate(calc(var(--call-rot, 0deg) + 4deg)); }
  66% { transform: translate(-4px, 3px) rotate(calc(var(--call-rot, 0deg) - 3deg)); }
}

.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: callWatermarkWobble 16s ease-in-out infinite;
}
@keyframes callWatermarkWobble {
  0%, 100% { transform: rotate(-9deg) skewX(-2deg) translate(0, 0); }
  50% { transform: rotate(-7deg) skewX(1deg) translate(-3px, 2px); }
}
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 14px;
}
.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(260px, 320px) 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: callHeroMouth 14s ease-in-out infinite;
}
.call-hero--collage {
  margin-top: 2px;
}
@keyframes callHeroMouth {
  0%, 100% { border-radius: 22px 26px 20px 24px / 24px 20px 26px 22px; }
  50% { border-radius: 24px 20px 26px 22px / 20px 26px 22px 24px; }
}
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: callHeroAura 18s linear infinite;
}
@keyframes callHeroAura {
  to { transform: rotate(360deg); }
}
.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: callHeroFloat 7s ease-in-out infinite;
}
@keyframes callHeroFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(-2px, -3px) rotate(-0.6deg); }
  75% { transform: translate(2px, 2px) rotate(0.5deg); }
}
.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(14px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: callSpotPulse 6.5s ease-in-out infinite;
}
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.88;
  animation-duration: 5s;
}
@keyframes callSpotPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.94); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}
.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%;
}
#chat-call-screen[data-call-stage="dialing"] .call-orbit-ring,
#chat-call-screen[data-call-stage="connected"] .call-orbit-ring {
  opacity: 1;
}
@keyframes callOrbitDrift {
  0%, 100% { transform: scale(0.96); opacity: 0.28; }
  50% { transform: scale(1.02); opacity: 0.72; }
}
#chat-call-screen[data-call-stage="dialing"] .call-orbit-ring {
  animation: callOrbitDrift 1.35s ease-in-out infinite;
}
#chat-call-screen[data-call-stage="dialing"] .call-orbit-ring--b {
  animation-delay: 0.22s;
}
#chat-call-screen[data-call-stage="dialing"] .call-orbit-ring--c {
  animation-delay: 0.44s;
}
#chat-call-screen[data-call-stage="connected"] .call-orbit-ring {
  animation: callOrbitDrift 2.5s ease-in-out infinite;
}
#chat-call-screen[data-call-stage="connected"] .call-orbit-ring--b {
  animation-delay: 0.4s;
}
#chat-call-screen[data-call-stage="connected"] .call-orbit-ring--c {
  animation-delay: 0.8s;
}
.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: callAvSquish 8s ease-in-out infinite;
}
@keyframes callAvSquish {
  0%, 100% { border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; }
  50% { border-radius: 52% 48% 50% 50% / 48% 52% 50% 50%; }
}
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.35), rgba(var(--blush-rgb), 0.12) 45%, transparent 70%);
  filter: blur(12px);
  opacity: 0.0;
  transform: scale(0.96);
  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.95;
}
#chat-call-screen[data-call-stage="dialing"] .call-hero-av::after,
#chat-call-screen[data-call-stage="connected"] .call-hero-av::after {
  opacity: 1;
}
@keyframes callHaloBreathe {
  0%, 100% { transform: scale(0.96); opacity: 0.4; }
  50% { transform: scale(1.06); opacity: 0.75; }
}
#chat-call-screen[data-call-stage="dialing"] .call-hero-av::before {
  animation: callHaloBreathe 1.05s ease-in-out infinite;
}
#chat-call-screen[data-call-stage="connected"] .call-hero-av::before {
  animation: callHaloBreathe 1.9s ease-in-out infinite;
}
.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; }

.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;
}
.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;
  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(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.chat-msg {
  display: flex;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  opacity: 0;
  animation: chat-msg-rise 0.44s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.chat-msg.chat-msg--instant {
  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--user {
  justify-content: flex-end;
}
.chat-msg--assistant,
.chat-msg--system {
  justify-content: flex-start;
}
.chat-msg-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.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;
}
.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%, 132px);
  border-radius: 12px;
  overflow: hidden;
}
.chat-sticker-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 104px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
.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);
}

/* 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;
  font-style: italic;
  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;
}
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;
  padding: 14px 14px calc(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;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px 0 2px;
}
.chat-composer-cap-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.65;
  flex-shrink: 0;
}
.chat-composer-cap-r {
  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:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 真机 / PWA：含 iPhone Pro Max 等宽 >420 仍要全屏。
 * iOS 15+ 独立 PWA：100vh 与 innerHeight 常短于实底；Safari 15.4+ 才有较完整的 dvh/svh/lvh，故先写 100vh 再叠现代单位 + JS --ios-vh。
 * 勿单用 -webkit-fill-available 盖在 svh/dvh 上（会偏矮出底缝）。 */
@media (max-width: 520px) {
  html {
    height: 100%;
    min-height: 100vh;
    /* 先取动态/小/大视口较高者；有 JS 时用 innerHeight/visualViewport 像素更准 */
    min-height: max(100dvh, 100svh, 100lvh);
    min-height: var(--ios-vh, max(100dvh, 100svh, 100lvh));
    background: var(--bg-device);
  }
  body {
    margin: 0;
    min-height: 100vh;
    min-height: max(100dvh, 100svh, 100lvh);
    min-height: var(--ios-vh, 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%;
    /* 覆盖桌面预览的 height:844px / max-height:100vh，否则真机 flex 锁不住、内层 1fr 失效 */
    flex: 1 1 auto;
    /* 与 html 同源：父链偶发短于实高时，仍至少铺满可视高；先 100vh 兼容 iOS15.0–15.3 无 dvh 情形 */
    min-height: 100%;
    min-height: max(100%, 100vh);
    min-height: max(100%, max(100dvh, 100svh, 100lvh));
    min-height: max(100%, var(--ios-vh, max(100dvh, 100svh, 100lvh)));
    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;
  }
}