:root {
  color-scheme: light;
  --bg: #f6f7fb;
  --ink: #202436;
  --muted: #6d7180;
  --quiet: #9297a6;
  --line: #dde1ea;
  --panel: #ffffff;
  --panel-soft: #eef2f8;
  --jade: #287d75;
  --jade-dark: #185f59;
  --rose: #b94c70;
  --amber: #af782b;
  --blue: #486fae;
  --moon: #7c79bd;
  --moon-soft: #eeecff;
  --shadow: 0 18px 48px rgba(29, 35, 55, 0.12);
  --radius: 8px;
  --sidebar: 280px;
  --state: 300px;
  --accent: #7c6af7;
  --theme-bg: #f7f9fc;
  --theme-surface: #ffffff;
  --theme-surface-glass: rgba(255, 255, 255, 0.74);
  --theme-text: #202436;
  --theme-muted: #6d7180;
  --theme-accent: #8eaaf2;
  --theme-accent-soft: rgba(212, 233, 255, 0.62);
  --theme-line: rgba(154, 166, 190, 0.24);
  --theme-shadow: 0 18px 48px rgba(48, 59, 88, 0.11);
  --theme-rose: #f8f3ee;
  --theme-glass-highlight: rgba(255, 255, 255, 0.8);
  --theme-deep-accent: #5168c4;
  --theme-wallet-a: #e1f0ff;
  --theme-wallet-b: #bcd6ff;
  --theme-wallet-c: #6f8edc;
  --theme-wallet-ink: #1f2847;
  --mr-bg: #f7f9fc;
  --mr-bg-warm: #fbf8f6;
  --mr-surface: rgba(255, 255, 255, 0.82);
  --mr-surface-solid: #ffffff;
  --mr-surface-soft: #eef4fb;
  --mr-moon-white: #f8fbff;
  --mr-moon-blue: #dcecff;
  --mr-silver-blue: #b8cbe8;
  --mr-glass-blue: rgba(225, 240, 255, 0.68);
  --mr-rose: #d8a5b8;
  --mr-rose-soft: #f4e3ea;
  --mr-rose-deep: #b96f8b;
  --mr-ink: #202436;
  --mr-muted: #747b8c;
  --mr-quiet: #9aa2b3;
  --mr-ok: #6fae9f;
  --mr-warn: #d7a75f;
  --mr-error: #c56b7a;
  --mr-radius-sm: 10px;
  --mr-radius-md: 16px;
  --mr-radius-lg: 22px;
  --mr-radius-pill: 999px;
  --mr-shadow-soft: 0 12px 32px rgba(58, 76, 112, 0.10);
  --mr-shadow-card: 0 8px 24px rgba(58, 76, 112, 0.08);
  --mr-gap-xs: 4px;
  --mr-gap-sm: 8px;
  --mr-gap-md: 12px;
  --mr-gap-lg: 18px;
  --mr-gap-xl: 24px;
  --chat-font-size: 14px;
  --visual-viewport-height: 100dvh;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.theme-moon-rose-v1 {
  background: var(--mr-bg);
  color: var(--mr-ink);
}

:root[data-theme-skin="plain"] {
  --theme-accent: #9fb7ca;
  --theme-accent-soft: rgba(226, 239, 244, 0.62);
  --theme-rose: #f8fafc;
  --theme-deep-accent: #5f7f95;
  --theme-wallet-a: #e3f1f4;
  --theme-wallet-b: #c9dde4;
  --theme-wallet-c: #7f9fb6;
  --theme-wallet-ink: #253846;
}

:root[data-theme-skin="festival"] {
  --theme-accent: #b6a8e6;
  --theme-accent-soft: rgba(237, 231, 255, 0.62);
  --theme-rose: #fbf3ef;
  --theme-deep-accent: #7b69ba;
  --theme-wallet-a: #eef6ff;
  --theme-wallet-b: #e1d9ff;
  --theme-wallet-c: #b49adf;
  --theme-wallet-ink: #2d2447;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1d2e;
  --ink: #e4e8f4;
  --muted: #8a8fa0;
  --quiet: #5e6375;
  --line: #2e3249;
  --panel: #21253a;
  --panel-soft: #272c42;
  --jade: #3aa89e;
  --jade-dark: #2a8a81;
  --rose: #d4607e;
  --amber: #c99045;
  --blue: #6090cc;
  --moon: #9694d8;
  --moon-soft: #2d2a52;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  --accent: #9084f8;
  --theme-bg: #1a1d2e;
  --theme-surface: #21253a;
  --theme-surface-glass: rgba(33, 37, 58, 0.78);
  --theme-text: #e4e8f4;
  --theme-muted: #a8afc4;
  --theme-accent: #a8c5ff;
  --theme-accent-soft: rgba(92, 111, 162, 0.34);
  --theme-line: rgba(187, 198, 226, 0.16);
  --theme-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  --theme-rose: rgba(248, 243, 238, 0.08);
  --theme-glass-highlight: rgba(39, 44, 66, 0.82);
  --theme-deep-accent: #8faeff;
  --theme-wallet-a: #22304d;
  --theme-wallet-b: #2f4974;
  --theme-wallet-c: #6687d8;
  --theme-wallet-ink: #e4e8f4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1a1d2e;
    --ink: #e4e8f4;
    --muted: #8a8fa0;
    --quiet: #5e6375;
    --line: #2e3249;
    --panel: #21253a;
    --panel-soft: #272c42;
    --jade: #3aa89e;
    --jade-dark: #2a8a81;
    --rose: #d4607e;
    --amber: #c99045;
    --blue: #6090cc;
    --moon: #9694d8;
    --moon-soft: #2d2a52;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
    --accent: #9084f8;
    --theme-bg: #1a1d2e;
    --theme-surface: #21253a;
    --theme-surface-glass: rgba(33, 37, 58, 0.78);
    --theme-text: #e4e8f4;
    --theme-muted: #a8afc4;
    --theme-accent: #a8c5ff;
    --theme-accent-soft: rgba(92, 111, 162, 0.34);
    --theme-line: rgba(187, 198, 226, 0.16);
    --theme-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
    --theme-rose: rgba(248, 243, 238, 0.08);
    --theme-glass-highlight: rgba(39, 44, 66, 0.82);
    --theme-deep-accent: #8faeff;
    --theme-wallet-a: #22304d;
    --theme-wallet-b: #2f4974;
    --theme-wallet-c: #6687d8;
    --theme-wallet-ink: #e4e8f4;
  }
}

* {
  box-sizing: border-box;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
}

html {
  height: 100%;
}

body {
  overflow: hidden;
}

button,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.app-shell {
  display: grid;
  grid-template-columns: minmax(220px, var(--sidebar)) minmax(0, 1fr) minmax(260px, var(--state));
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 720px;
  overflow: hidden;
}
body.focus-mode .app-shell {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}
body.focus-mode .side-rail,
body.focus-mode .state-panel {
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.side-rail,
.state-panel {
  background: #fbfbfe;
  border-color: var(--line);
  border-style: solid;
}

.side-rail {
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100vh;
  overflow: hidden;
  padding: 24px 18px;
  border-width: 0 1px 0 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: var(--ink);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(32, 36, 34, 0.16);
}

.brand-mark svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.brand-lockup strong,
.brand-lockup span {
  display: block;
}

.brand-lockup strong {
  font-size: 17px;
  line-height: 1.1;
}

.brand-lockup span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.session-list {
  display: grid;
  gap: 8px;
}

.session-item {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.session-item:hover {
  background: var(--panel-soft);
}

.session-item:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.session-item:disabled:hover {
  background: transparent;
}

.session-item.active {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 12px 32px rgba(35, 46, 41, 0.08);
}

.session-title {
  font-size: 14px;
  font-weight: 650;
}

.session-meta {
  color: var(--muted);
  font-size: 12px;
}

.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent, #7c79bd);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}
.unread-badge[hidden] {
  display: none;
}

.rail-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.rail-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.soft-dot {
  width: 8px;
  height: 8px;
  background: var(--jade);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(15, 139, 111, 0.12);
}

.rail-endpoint {
  /* gap from .rail-bottom handles spacing */
}

.endpoint-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.endpoint-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--quiet);
  flex-shrink: 0;
}

.endpoint-badge--resolving::before {
  background: var(--quiet);
  animation: endpoint-badge-pulse 1.4s ease-in-out infinite;
}

.endpoint-badge--local {
  color: var(--jade-dark);
  background: rgba(40, 125, 117, 0.10);
}

.endpoint-badge--local::before {
  background: var(--jade);
}

.endpoint-badge--cloud {
  color: var(--blue);
  background: rgba(72, 111, 174, 0.10);
}

.endpoint-badge--cloud::before {
  background: var(--blue);
}

.endpoint-badge--offline {
  color: var(--rose);
  background: rgba(185, 76, 112, 0.10);
}

.endpoint-badge--offline::before {
  background: var(--rose);
}

@keyframes endpoint-badge-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.chat-stage {
  display: flex;
  flex-direction: column;
  height: 100%;           /* fill the app-shell grid cell */
  overflow: hidden;       /* contain children, let message-list scroll internally */
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(246, 247, 251, 0.98) 34%),
    radial-gradient(circle at 16% 6%, rgba(124, 121, 189, 0.11), transparent 29%),
    radial-gradient(circle at 86% 7%, rgba(185, 76, 112, 0.09), transparent 30%),
    radial-gradient(circle at 72% 92%, rgba(40, 125, 117, 0.08), transparent 28%);
}

/* 内部监控面板 — 从 chat-stage 主视图隐藏，保留 DOM 和 JS 不删
   右侧 state-panel 已展示这些信息；chat-stage 只负责聊天
   用 .chat-stage 前缀提高优先级，压住后面的 display:grid 规则 */
.chat-stage .mood-band,
.chat-stage .emotion-visual-card,
.chat-stage .dictionary-editor-card,
.chat-stage .mobile-heartbeat-card,
.chat-stage .central-handoff-card,
.chat-stage .source-provenance-card,
.chat-stage .write-evidence-card,
.chat-stage .rollback-preflight-card,
.chat-stage .private-diary-card {
  display: none;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 18px;
  padding: 22px 28px 16px;
}

.top-bar-left {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}

.top-bar h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}

.top-bar p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.top-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: min(100%, 420px);
  overflow-x: auto;
  scrollbar-width: none;
}

.top-actions::-webkit-scrollbar {
  display: none;
}

.mobile-room-strip {
  display: none;
}

.mobile-life-home,
.mobile-chat-home,
.mobile-discover-home,
.mobile-settings-home,
.mobile-chat-header,
.mobile-tool-tray-button,
.mobile-bottom-tabs {
  display: none;
}

.icon-button,
.tool-button,
.send-button {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}

.icon-button,
.tool-button {
  width: 38px;
  height: 38px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 10px;
}

.icon-button:hover,
.tool-button:hover {
  background: #ffffff;
  border-color: #cbd5d0;
}

.tool-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.icon-button svg,
.tool-button svg,
.send-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Theme toggle icon: show sun in light mode, moon in dark mode */
.theme-icon--dark { display: none; }
[data-theme="dark"] .theme-icon--light,
:root:not([data-theme="light"]) .theme-icon--light { display: none; }
[data-theme="dark"] .theme-icon--dark,
:root:not([data-theme="light"]) .theme-icon--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon--light { display: none; }
  :root:not([data-theme="light"]) .theme-icon--dark  { display: block; }
}

.tool-button--recording {
  background: rgba(220, 50, 50, 0.1);
  border-color: rgba(220, 50, 50, 0.4);
  color: #d02020;
  animation: recording-pulse 1.2s ease-in-out infinite;
}

@keyframes recording-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

#clearHistoryButton:hover {
  background: #fff1f0;
  border-color: #f5a49b;
  color: #c0392b;
}

.mode-button {
  min-width: 72px;
  min-height: 38px;
  padding: 0 14px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  background: var(--ink);
  border: 0;
  border-radius: 10px;
}

.mood-band {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(220px, 1.15fr) minmax(220px, 1fr);
  align-items: center;
  flex-shrink: 0;
  gap: 18px;
  margin: 0 28px 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(33, 43, 38, 0.08);
  backdrop-filter: blur(14px);
}

.mobile-heartbeat-card {
  display: none;
}

.emotion-visual-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(250px, 1.05fr);
  flex-shrink: 0;
  gap: 14px;
  margin: 0 28px 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(33, 43, 38, 0.08);
}

.dictionary-editor-card {
  display: grid;
  gap: 13px;
  margin: 0 28px 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 121, 189, 0.18);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(33, 43, 38, 0.08);
}

.dictionary-editor-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.dictionary-editor-header span,
.dictionary-editor-grid span {
  display: block;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 800;
}

.dictionary-editor-header strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

#dictionaryEditorMode {
  min-width: 86px;
  padding: 6px 9px;
  color: var(--moon);
  text-align: center;
  background: rgba(124, 121, 189, 0.1);
  border: 1px solid rgba(124, 121, 189, 0.2);
  border-radius: 8px;
}

.dictionary-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(180px, 0.85fr);
  gap: 12px;
}

.dictionary-editor-grid article {
  padding: 12px;
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.dictionary-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.diff-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.diff-filter button {
  min-height: 26px;
  padding: 4px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.diff-filter button.active {
  color: var(--ink);
  background: rgba(124, 121, 189, 0.12);
  border-color: rgba(124, 121, 189, 0.28);
}

.dictionary-diff-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.dictionary-diff-list li {
  overflow: hidden;
  background: var(--panel-soft);
  border-radius: 9px;
}

.dictionary-diff-list button {
  display: grid;
  width: 100%;
  gap: 4px;
  min-height: 48px;
  padding: 9px 10px;
  text-align: left;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--moon);
  border-radius: inherit;
}

.dictionary-diff-list li.selected button,
.dictionary-diff-list button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(124, 121, 189, 0.22);
}

.dictionary-diff-list li[data-diff-type="add"] button {
  border-left-color: var(--jade);
}

.dictionary-diff-list li[data-diff-type="tune"] button {
  border-left-color: var(--rose);
}

.dictionary-diff-list strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.dictionary-diff-list span {
  color: var(--quiet);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.diff-detail {
  min-height: 56px;
  margin: 10px 0 12px;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.editor-checks {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.editor-checks div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 8px 9px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.editor-checks dt {
  color: var(--quiet);
  font-size: 11px;
  font-weight: 800;
}

.editor-checks dd {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}

.visual-header {
  display: flex;
  grid-column: 1 / -1;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.visual-header span,
.emotion-sidecar span {
  display: block;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 800;
}

.visual-header strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.35;
}

#starPointCount {
  min-width: 72px;
  padding: 6px 9px;
  color: var(--blue);
  text-align: center;
  background: rgba(72, 111, 174, 0.1);
  border: 1px solid rgba(72, 111, 174, 0.18);
  border-radius: 8px;
}

.emotion-plot {
  position: relative;
  min-height: 270px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(185, 76, 112, 0.09), rgba(40, 125, 117, 0.09)),
    linear-gradient(180deg, rgba(224, 138, 95, 0.11), rgba(95, 127, 168, 0.10)),
    #fbfcff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.axis {
  position: absolute;
  background: rgba(32, 36, 54, 0.18);
}

.axis-x {
  top: 50%;
  right: 12px;
  left: 12px;
  height: 1px;
}

.axis-y {
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
}

.axis-label {
  position: absolute;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 800;
}

.axis-label-top {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.axis-label-bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.axis-label-left {
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
}

.axis-label-right {
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
}

.quadrant-label {
  position: absolute;
  max-width: 38%;
  color: rgba(32, 36, 54, 0.48);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  pointer-events: none;
}

.quadrant-label-happy {
  top: 28px;
  right: 16px;
}

.quadrant-label-calm {
  right: 16px;
  bottom: 28px;
}

.quadrant-label-low {
  bottom: 28px;
  left: 16px;
}

.quadrant-label-tense {
  top: 28px;
  left: 16px;
}

.emotion-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--moon);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(32, 36, 54, 0.16);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.emotion-dot:hover,
.emotion-dot:focus-visible,
.emotion-dot.selected {
  outline: none;
  box-shadow:
    0 0 0 5px rgba(72, 111, 174, 0.16),
    0 8px 18px rgba(32, 36, 54, 0.2);
}

.emotion-dot.positive_high_arousal,
.emotion-dot.positive_low_arousal {
  background: var(--jade);
}

.emotion-dot.negative_high_arousal,
.emotion-dot.negative_low_arousal {
  background: var(--rose);
}

.emotion-dot.current {
  width: 15px;
  height: 15px;
  background: var(--ink);
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 5px rgba(32, 36, 54, 0.12),
    0 8px 18px rgba(32, 36, 54, 0.2);
  z-index: 2;
}

.emotion-dot.chord-anchor {
  width: 12px;
  height: 12px;
  background: #e08a5f;
  border-radius: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.emotion-sidecar {
  display: grid;
  gap: 12px;
  align-content: start;
}

.emotion-sidecar > div {
  padding: 12px;
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.emotion-sidecar p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.dictionary-candidates {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.dictionary-candidates li {
  display: grid;
  gap: 3px;
  min-height: 45px;
  padding: 8px 9px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.dictionary-candidates li.curated-scene {
  border-color: rgba(209, 93, 110, 0.45);
  background: color-mix(in srgb, var(--panel-soft) 82%, rgba(209, 93, 110, 0.18));
}

.dictionary-candidates strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dictionary-candidates span {
  color: var(--quiet);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mini-bars {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.mini-bars li {
  display: grid;
  grid-template-columns: minmax(86px, 0.9fr) minmax(80px, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.mini-bars b {
  position: relative;
  height: 7px;
  overflow: hidden;
  background: var(--panel-soft);
  border-radius: 999px;
}

.mini-bars b::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 50%);
  content: "";
  background: linear-gradient(90deg, var(--jade), var(--moon));
  border-radius: inherit;
}

.decay-chart {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.decay-chart-svg {
  width: 100%;
  min-height: 96px;
  overflow: visible;
  background: linear-gradient(180deg, #ffffff, #f6f8fb);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.decay-grid {
  fill: none;
  stroke: rgba(32, 36, 54, 0.11);
  stroke-width: 0.7;
}

.decay-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.decay-line--pa {
  stroke: #e08a5f;
}

.decay-line--na {
  stroke: #5f7fa8;
}

.decay-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decay-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.decay-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.decay-swatch--pa {
  background: #e08a5f;
}

.decay-swatch--na {
  background: #5f7fa8;
}

.emotion-chord-card {
  position: relative;
  border-color: rgba(224, 138, 95, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(224, 138, 95, 0.12), rgba(255, 255, 255, 0.92)),
    #fffdf9 !important;
}

.emotion-chord-card.curated-scene {
  border-color: rgba(209, 93, 110, 0.5) !important;
  background:
    linear-gradient(135deg, rgba(209, 93, 110, 0.16), rgba(255, 255, 255, 0.94)),
    #fffdf9 !important;
}

.emotion-chord-card::before {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(224, 138, 95, 0.72);
  font-size: 18px;
  content: "♪";
}

.emotion-chord-card strong {
  display: block;
  max-width: calc(100% - 24px);
  margin-top: 6px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.35;
}

.emotion-chord-card p {
  color: #5f4c43;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.emotion-chord-card small {
  display: block;
  margin-top: 7px;
  color: var(--quiet);
  font-size: 11px;
  line-height: 1.35;
}

.central-handoff-card,
.source-provenance-card,
.write-evidence-card,
.rollback-preflight-card,
.private-diary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  margin: 0 28px 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(33, 43, 38, 0.08);
}

.central-handoff-card span,
.central-handoff-card strong,
.central-handoff-card p,
.source-provenance-card span,
.source-provenance-card strong,
.source-provenance-card p,
.write-evidence-card span,
.write-evidence-card strong,
.write-evidence-card p,
.rollback-preflight-card span,
.rollback-preflight-card strong,
.rollback-preflight-card p,
.private-diary-card span,
.private-diary-card strong,
.private-diary-card p {
  display: block;
}

.central-handoff-card span,
.source-provenance-card span,
.write-evidence-card span,
.rollback-preflight-card span,
.private-diary-card span {
  color: var(--quiet);
  font-size: 11px;
  font-weight: 800;
}

.central-handoff-card strong,
.source-provenance-card strong,
.write-evidence-card strong,
.rollback-preflight-card strong,
.private-diary-card strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.central-handoff-card p,
.source-provenance-card p,
.write-evidence-card p,
.rollback-preflight-card p,
.private-diary-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.source-provenance-card {
  grid-template-columns: 1fr;
  background: rgba(246, 251, 250, 0.86);
  border-color: rgba(40, 125, 117, 0.18);
}

.private-diary-card {
  grid-template-columns: 1fr;
  background: rgba(255, 251, 253, 0.86);
  border-color: rgba(185, 76, 112, 0.18);
}

.write-evidence-card {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.56fr);
  background: rgba(255, 249, 238, 0.86);
  border-color: rgba(175, 120, 43, 0.2);
}

.rollback-preflight-card {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.56fr);
  background: rgba(246, 248, 255, 0.88);
  border-color: rgba(72, 92, 154, 0.2);
}

.rollback-gate-panel {
  display: grid;
  gap: 8px;
}

.rollback-gate-panel button {
  width: 100%;
  min-height: 34px;
  color: var(--quiet);
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: not-allowed;
}

.rollback-gate-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.evidence-mini-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.evidence-mini-grid div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.evidence-mini-grid dt {
  color: var(--quiet);
  font-size: 10px;
  font-weight: 800;
}

.evidence-mini-grid dd {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.handoff-counts {
  display: grid;
  grid-template-columns: repeat(4, 58px);
  gap: 7px;
  align-content: center;
}

.handoff-counts span {
  min-height: 46px;
  padding: 7px 6px;
  text-align: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.handoff-counts strong {
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
}

.mood-label,
.mood-meter span {
  display: block;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mood-primary strong {
  display: block;
  margin-top: 4px;
  font-size: 23px;
  line-height: 1.1;
}

.mood-meter {
  display: grid;
  gap: 9px;
}

.mood-meter div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

meter {
  width: 100%;
  height: 8px;
}

meter::-webkit-meter-bar {
  background: #edf1ee;
  border: 0;
  border-radius: 999px;
}

meter::-webkit-meter-optimum-value {
  background: var(--jade);
  border-radius: 999px;
}

#naMeter::-webkit-meter-optimum-value {
  background: var(--rose);
}

.mood-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  color: var(--jade-dark);
  font-size: 12px;
  font-weight: 700;
  background: rgba(15, 139, 111, 0.1);
  border: 1px solid rgba(15, 139, 111, 0.2);
  border-radius: 999px;
}

.tag.moon {
  color: var(--moon);
  background: var(--moon-soft);
  border-color: rgba(124, 121, 189, 0.22);
}

.tag.warn {
  color: var(--rose);
  background: rgba(189, 63, 93, 0.1);
  border-color: rgba(189, 63, 93, 0.2);
}

.message-area {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.scroll-progress-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 0%;
  background: linear-gradient(to bottom, var(--accent), var(--jade));
  border-radius: 0 0 2px 2px;
  opacity: 0;
  pointer-events: none;
  transition: height 80ms linear, opacity 0.25s;
  z-index: 5;
}
.message-area:hover .scroll-progress-bar,
.scroll-progress-bar.visible {
  opacity: 0.55;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  padding: 20px 28px 30px;
  overflow: auto;
}

.room-context-card {
  display: grid;
  gap: 8px;
  margin: 0 28px 0;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(29, 35, 55, 0.08);
}

.room-context-card[hidden] {
  display: none;
}

.room-context-card span {
  color: var(--quiet);
  font-size: 11px;
  font-weight: 800;
}

.room-context-card strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}

.room-context-card p {
  margin: 0;
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.5;
}

.room-context-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.room-context-flags span {
  padding: 4px 8px;
  color: var(--ink);
  background: #eef3f6;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.shared-send-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}

.shared-send-status[hidden] {
  display: none;
}

.shared-send-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--quiet);
}

.shared-send-status[data-phase="sending"]::before {
  background: var(--amber);
  animation: endpoint-badge-pulse 1.2s ease-in-out infinite;
}

.shared-send-status[data-phase="ok"]::before {
  background: var(--jade);
}

.shared-send-status[data-phase="fallback"]::before {
  background: var(--rose);
}

.shared-receipt-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(238, 243, 246, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.shared-receipt-details[hidden] {
  display: none;
}

.shared-receipt-details dt {
  color: var(--quiet);
  font-weight: 800;
}

.shared-receipt-details dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.message {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start; /* 顶部对齐，长回复时 avatar 不漂移 */
}
.reaction-bar {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.message:hover .reaction-bar {
  opacity: 1;
  pointer-events: auto;
}
.reaction-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  padding: 2px 5px;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.1s;
}
.reaction-btn:hover { transform: scale(1.2); }
.msg-reply-btn,
.msg-moment-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1;
  color: var(--muted);
  margin-left: 2px;
  transition: color 0.15s, transform 0.1s;
}
.msg-reply-btn:hover,
.msg-moment-btn:hover { color: var(--accent); transform: scale(1.1); }
.reaction-display {
  grid-column: 1 / -1;
  padding-left: 46px;
  font-size: 16px;
  line-height: 1.4;
  margin-top: -4px;
}
.message.user .reaction-display { padding-left: 0; text-align: right; }

.message:not(.msg--history) {
  animation: msg-in 0.18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .message:not(.msg--history) {
    animation: none;
  }
}

.message.user {
  grid-template-columns: minmax(0, 1fr) 36px;
  justify-content: end;
}

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  background: var(--ink);
  border-radius: 10px;
  flex-shrink: 0;
  margin-top: 2px; /* 轻微下沉，跟气泡第一行文字对齐 */
}

.avatar--qianqian,
.avatar--yechenyi,
.avatar--guyanshen {
  color: transparent;
  text-shadow: none;
}

.avatar--qianqian,
.room-avatar--qianqian {
  background: var(--avatar-qianqian-bg,
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.86), transparent 34%),
    linear-gradient(135deg, #e1f0ff 0%, #d4e9ff 38%, #c4daff 70%, #a8c5ff 100%));
}

.avatar--yechenyi {
  background: var(--avatar-yechenyi-bg,
    linear-gradient(rgba(20, 24, 36, 0.02), rgba(20, 24, 36, 0.02)),
    url("../assets/avatars/yechenyi-avatar.jpg") center 24% / cover no-repeat);
}

.avatar--guyanshen {
  background: var(--avatar-guyanshen-bg,
    linear-gradient(rgba(20, 24, 36, 0.02), rgba(20, 24, 36, 0.02)),
    url("../assets/avatars/guyanshen-avatar.jpg") center 26% / cover no-repeat);
}

.message.user .avatar {
  grid-column: 2;
  background: var(--jade);
}

.message.user .avatar--qianqian {
  background: var(--avatar-qianqian-bg,
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.86), transparent 34%),
    linear-gradient(135deg, #e1f0ff 0%, #d4e9ff 38%, #c4daff 70%, #a8c5ff 100%));
}

.bubble {
  padding: 14px 17px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(33, 43, 58, 0.07), 0 1px 3px rgba(33, 43, 58, 0.05);
  max-width: 680px;
}

.message.user .bubble {
  grid-column: 1;
  grid-row: 1;
  color: #ffffff;
  background: linear-gradient(135deg, var(--jade-dark) 0%, #216b5e 100%);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(24, 95, 89, 0.25);
}

.message--money-action .bubble,
.message.user.message--money-action .bubble {
  width: min(206px, 66vw);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
}

.money-message-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  color: #ffffff;
  background:
    radial-gradient(circle at 78% 38%, rgba(255, 218, 151, 0.24), transparent 34%),
    linear-gradient(135deg, #f0a24a 0%, #dd6c44 58%, #c95a48 100%);
  border-radius: 13px;
  box-shadow: 0 7px 16px rgba(168, 75, 62, 0.14);
}

.money-message-card--received {
  color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at 78% 38%, rgba(255, 238, 201, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(244, 177, 92, 0.7) 0%, rgba(220, 119, 78, 0.62) 58%, rgba(199, 91, 74, 0.58) 100%);
  box-shadow: 0 5px 14px rgba(168, 75, 62, 0.1);
}

.money-message-card--claimable {
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.16s ease, transform 0.16s ease;
}

.money-message-card--claimable:active {
  filter: brightness(0.96);
  transform: scale(0.99);
}

.money-message-card__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 17px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
}

.money-message-card--received .money-message-card__icon {
  color: rgba(69, 55, 43, 0.72);
  background: rgba(255, 242, 220, 0.72);
  font-family: "Songti SC", "STSong", serif;
  font-size: 15px;
}

.money-message-card__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.money-message-card__body strong {
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}

.money-message-card__state {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 600;
}

.money-message-card__amount {
  font-size: 16px;
  font-weight: 740;
  letter-spacing: 0;
}

.money-message-card__note {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-action-sheet[hidden] {
  display: none;
}

.money-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  align-items: stretch;
}

.money-action-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: #eeeeef;
}

.money-action-sheet__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 24px;
  width: min(430px, 100vw);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  background: #eeeeef;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.money-action-sheet__header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  color: #111827;
}

.money-action-sheet__header h2 {
  margin: 0;
  text-align: center;
  color: #111827;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: 0;
}

.money-action-sheet__header span {
  color: #111827;
  text-align: right;
  letter-spacing: 3px;
}

.money-action-sheet__back {
  width: 36px;
  height: 36px;
  padding: 0;
  color: #111827;
  background: transparent;
  border: 0;
  font-size: 34px;
  line-height: 1;
}

.money-action-sheet__recipient {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 6px;
}

.money-action-sheet__recipient div {
  display: grid;
  gap: 5px;
}

.money-action-sheet__recipient strong {
  color: #111827;
  font-size: 18px;
  font-weight: 760;
}

.money-action-sheet__recipient span {
  color: #737780;
  font-size: 14px;
  font-weight: 650;
}

.money-action-sheet__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1f766e, #24283a);
  border-radius: 9px;
  font-size: 18px !important;
}

.money-action-sheet--red-packet .money-action-sheet__recipient {
  display: none;
}

.money-action-sheet__body {
  display: grid;
  gap: 12px;
}

.money-action-sheet label span {
  color: var(--muted);
  font-size: 13px;
}

.money-action-sheet__amount,
.money-action-sheet__note {
  display: grid;
  gap: 8px;
  padding: 20px 18px;
  background: #ffffff;
  border-radius: 6px;
}

.money-action-sheet__amount-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.money-action-sheet__amount-row strong {
  color: #111827;
  font-size: 40px;
  font-weight: 800;
}

.money-action-sheet input {
  width: 100%;
  min-height: 42px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font: inherit;
  outline: none;
}

.money-action-sheet__amount input {
  font-size: 40px;
  font-weight: 780;
}

.money-action-sheet__note {
  min-height: 64px;
}

.money-action-sheet--red-packet .money-action-sheet__amount,
.money-action-sheet--red-packet .money-action-sheet__note,
.money-action-sheet__cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 72px;
  padding: 16px 18px;
  background: #ffffff;
  border-radius: 6px;
}

.money-action-sheet--red-packet .money-action-sheet__amount-row {
  justify-self: end;
  width: 160px;
  gap: 4px;
}

.money-action-sheet--red-packet .money-action-sheet__amount-row strong,
.money-action-sheet--red-packet .money-action-sheet__amount input {
  font-size: 21px;
  text-align: right;
}

.money-action-sheet--red-packet .money-action-sheet__note {
  grid-template-columns: minmax(0, 1fr);
}

.money-action-sheet--red-packet .money-action-sheet__note input {
  color: #7a7d85;
  font-size: 18px;
}

.money-action-sheet__cover div {
  display: grid;
  gap: 6px;
}

.money-action-sheet__cover strong {
  color: #111827;
  font-size: 18px;
}

.money-action-sheet__cover span {
  color: #737780;
  font-size: 14px;
}

.money-action-sheet__cover-preview {
  display: grid;
  place-items: center;
  width: 54px;
  height: 74px;
  color: rgba(255, 255, 255, 0.9) !important;
  background: linear-gradient(180deg, #e95542, #ff6b52);
  border-radius: 7px;
  font-size: 18px !important;
}

.money-action-sheet__total {
  align-self: end;
  justify-self: center;
  color: #111827;
  font-size: 44px;
  font-weight: 820;
  letter-spacing: 0;
}

.money-action-sheet__submit {
  justify-self: center;
  width: min(100%, 210px);
  min-height: 52px;
  color: #ffffff;
  background: #ff5a46;
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 760;
}

.money-action-sheet__footnote {
  margin: 0;
  color: #777b83;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
}

/* ── 气泡内容区 ── */
.bubble-content {
  margin: 0;
  font-size: var(--chat-font-size, 14px);
  line-height: 1.7;
  white-space: pre-wrap;   /* 流式阶段原样展示 */
  word-break: break-word;
}

/* Long message collapse */
.bubble-content--long.bubble-content--collapsed {
  max-height: 160px;
  overflow: hidden;
  position: relative;
}
.bubble-content--long.bubble-content--collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.96));
  pointer-events: none;
}
.msg-expand-btn {
  display: block;
  margin-top: 6px;
  padding: 2px 0;
  background: transparent;
  border: none;
  color: var(--accent, #7c79bd);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.85;
}
.msg-expand-btn:hover {
  opacity: 1;
}

/* Markdown 渲染后关闭 pre-wrap，让块级元素正常排版 */
.bubble-content.markdown {
  white-space: normal;
}

.bubble-content.markdown p {
  margin: 0 0 0.7em;
}

.bubble-content.markdown p:last-child {
  margin-bottom: 0;
}

.bubble-content.markdown h1,
.bubble-content.markdown h2,
.bubble-content.markdown h3,
.bubble-content.markdown h4 {
  margin: 0.8em 0 0.35em;
  font-weight: 700;
  line-height: 1.35;
}

.bubble-content.markdown h1 { font-size: 1.18em; }
.bubble-content.markdown h2 { font-size: 1.1em; }
.bubble-content.markdown h3 { font-size: 1.04em; }
.bubble-content.markdown h4 { font-size: 1em; }

.bubble-content.markdown ul,
.bubble-content.markdown ol {
  margin: 0.4em 0 0.6em;
  padding-left: 1.5em;
}

.bubble-content.markdown li {
  margin: 0.25em 0;
  line-height: 1.6;
}

.code-block {
  position: relative;
}

/* Line numbers — shown when pre has data-lines attribute */
.bubble-content.markdown pre[data-lines] {
  padding-left: 3.4em;
}
.bubble-content.markdown pre[data-lines]::before {
  content: attr(data-lines);
  position: absolute;
  left: 0;
  top: 11px; /* match pre padding-top */
  width: 2.6em;
  text-align: right;
  padding-right: 0.55em;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--quiet);
  white-space: pre;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  user-select: none;
  pointer-events: none;
}
[data-theme="dark"] .bubble-content.markdown pre[data-lines]::before {
  border-right-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bubble-content.markdown pre[data-lines]::before {
    border-right-color: rgba(255, 255, 255, 0.08);
  }
}

.code-copy-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.code-block:hover .code-copy-btn {
  opacity: 1;
}
.code-lang-badge {
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--quiet);
  text-transform: lowercase;
  user-select: none;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.code-block--collapsed pre {
  max-height: 240px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}
.code-expand-btn {
  display: block;
  width: 100%;
  padding: 4px 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin-top: 2px;
}
.code-expand-btn:hover { opacity: 0.7; }

.bubble-content.markdown pre {
  background: rgba(0, 0, 0, 0.055);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 11px 14px;
  overflow-x: auto;
  margin: 0.6em 0;
}

.message.user .bubble-content.markdown pre {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.bubble-content.markdown pre code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
}

.bubble-content code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.07);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Syntax highlight tokens (light mode) ──────────────────────────────────── */
.tok-keyword  { color: #7c6af7; font-weight: 600; }
.tok-string   { color: #0e7f5e; }
.tok-comment  { color: #9aa29d; font-style: italic; }
.tok-number   { color: #b05b2b; }
.tok-punct    { color: #7a8b85; }
.tok-variable { color: #2e6da4; }

/* diff highlighting */
.tok-diff-add  { display: block; background: rgba(40, 125, 117, 0.13); color: #1c6b58; }
.tok-diff-del  { display: block; background: rgba(185, 76, 112, 0.13); color: #9b3459; }
.tok-diff-hunk { display: block; color: var(--moon); }
.tok-diff-meta { display: block; color: var(--muted); font-style: italic; }

.message.user .bubble-content code {
  background: rgba(255, 255, 255, 0.18);
}

.bubble-content.markdown hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.85em 0;
}

/* Task list items */
.bubble-content.markdown .task-item {
  list-style: none;
  margin-left: -1.2em;
}
.bubble-content.markdown .task-item input[type="checkbox"] {
  margin-right: 0.4em;
  vertical-align: middle;
  accent-color: var(--accent);
}

/* Auto-linked URLs */
.bubble-content.markdown a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.bubble-content.markdown a:hover { opacity: 0.8; }

/* ── Markdown tables ─────────────────────────────────────────────────────── */
.bubble-content.markdown .md-table {
  border-collapse: collapse;
  font-size: 13px;
  margin: 0.7em 0;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}
.bubble-content.markdown .md-table th,
.bubble-content.markdown .md-table td {
  padding: 5px 12px;
  border: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.bubble-content.markdown .md-table th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
}
.bubble-content.markdown .md-table tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .bubble-content.markdown .md-table th {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .bubble-content.markdown .md-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bubble-content.markdown .md-table th {
    background: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]) .bubble-content.markdown .md-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
  }
}

.bubble-content.markdown strong { font-weight: 700; }
.bubble-content.markdown em { font-style: italic; }
.bubble-content.markdown del { text-decoration: line-through; opacity: 0.65; }

/* Inline images */
.md-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  margin: 0.4em 0;
}

/* Figure / figcaption */
.md-figure {
  display: inline-block;
  margin: 0.6em 0;
  max-width: 100%;
}
.md-figure .md-img { margin: 0; }
.md-figure figcaption {
  font-size: 0.82em;
  color: var(--ink-dim, #888);
  text-align: center;
  margin-top: 0.3em;
  font-style: italic;
}

/* Footnotes */
.md-fn-ref { font-size: 0.75em; vertical-align: super; line-height: 0; }
.md-fn-ref a { color: var(--accent); text-decoration: none; }
.md-fn-ref a:hover { text-decoration: underline; }
.md-footnotes {
  margin-top: 1.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line);
  font-size: 0.85em;
  color: var(--muted);
}
.md-footnotes ol { padding-left: 1.4em; margin: 0; }
.md-footnotes li { margin: 0.25em 0; line-height: 1.5; }
.md-fn-back { color: var(--quiet); text-decoration: none; margin-left: 0.3em; }
.md-fn-back:hover { color: var(--accent); }

/* ── Auto-TOC [TOC] ────────────────────────────────────────────────────────── */
nav.md-toc {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6em 0.9em;
  margin: 0.5em 0;
  font-size: 0.9em;
}
nav.md-toc::before {
  content: 'Contents';
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4em;
}
.md-toc-item { line-height: 1.7; }
.md-toc-item a { color: var(--accent); text-decoration: none; }
.md-toc-item a:hover { text-decoration: underline; }
.md-toc-l1 { padding-left: 0; }
.md-toc-l2 { padding-left: 1em; }
.md-toc-l3 { padding-left: 2em; }
.md-toc-l4 { padding-left: 3em; }

/* ── Spoiler ||text|| ──────────────────────────────────────────────────────── */
.md-spoiler {
  background: var(--ink);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.md-spoiler:hover, .md-spoiler.revealed {
  background: color-mix(in srgb, var(--ink) 15%, transparent);
  color: inherit;
}
[data-theme="dark"] .md-spoiler {
  background: #e0e0e0;
  color: #e0e0e0;
}
[data-theme="dark"] .md-spoiler:hover {
  background: color-mix(in srgb, #e0e0e0 15%, transparent);
  color: inherit;
}

/* ── @mention ──────────────────────────────────────────────────────────────── */
.md-mention {
  color: var(--accent);
  font-weight: 500;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 3px;
  padding: 0 2px;
}

/* ── GFM alert / callout blocks ───────────────────────────────────────────── */
.md-alert {
  border-left: 4px solid;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.6em 0.9em;
  margin: 0.6em 0;
}
.md-alert-title {
  font-weight: 600;
  font-size: 0.85em;
  margin-bottom: 0.25em;
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.md-alert-body { font-size: 0.9em; line-height: 1.55; }
/* note */
.md-alert-note   { border-color: var(--blue);  background: color-mix(in srgb, var(--blue) 8%, transparent); }
.md-alert-note   .md-alert-title { color: var(--blue); }
/* tip */
.md-alert-tip    { border-color: var(--jade);  background: color-mix(in srgb, var(--jade) 8%, transparent); }
.md-alert-tip    .md-alert-title { color: var(--jade); }
/* important */
.md-alert-important { border-color: var(--moon); background: color-mix(in srgb, var(--moon) 8%, transparent); }
.md-alert-important .md-alert-title { color: var(--moon); }
/* warning */
.md-alert-warning { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.md-alert-warning .md-alert-title { color: var(--amber); }
/* caution */
.md-alert-caution { border-color: var(--rose);  background: color-mix(in srgb, var(--rose) 8%, transparent); }
.md-alert-caution .md-alert-title { color: var(--rose); }

/* ── Keyboard key tags [[key]] ─────────────────────────────────────────────── */
kbd.md-kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em;
  line-height: 1.4;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  white-space: nowrap;
}
[data-theme="dark"] kbd.md-kbd {
  color: var(--ink);
  background: #2a2d3e;
  border-color: #3d4158;
}

/* ── Collapsible +++ sections ──────────────────────────────────────────────── */
details.md-details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0.5em 0;
  overflow: hidden;
}
details.md-details summary {
  padding: 0.45em 0.8em;
  cursor: pointer;
  font-weight: 500;
  background: var(--panel-soft);
  user-select: none;
  list-style: none;
}
details.md-details summary::before {
  content: '▶ ';
  font-size: 0.7em;
  color: var(--quiet);
  transition: transform 0.15s;
}
details.md-details[open] summary::before { content: '▼ '; }
details.md-details .md-details-body {
  padding: 0.6em 0.9em;
  border-top: 1px solid var(--line);
}

/* ── 定义列表 ────────────────────────────────────────────────────── */
dl.md-dl {
  margin: 0.6em 0;
  padding: 0;
}
dl.md-dl dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.5em;
}
dl.md-dl dd {
  margin: 0.1em 0 0.2em 1.5em;
  color: var(--muted);
  padding-left: 0.4em;
  border-left: 2px solid var(--line);
}
[data-theme="dark"] dl.md-dl dt { color: var(--ink); }
[data-theme="dark"] dl.md-dl dd { border-left-color: var(--line); }

/* ── 行内差异 ─────────────────────────────────────────────────────── */
del.md-diff-del {
  background: rgba(185, 76, 112, 0.12);
  color: var(--rose);
  text-decoration: line-through;
  padding: 0.08em 0.25em;
  border-radius: 3px;
  font-style: normal;
}
ins.md-diff-ins {
  background: rgba(40, 125, 117, 0.12);
  color: var(--jade);
  text-decoration: none;
  padding: 0.08em 0.25em;
  border-radius: 3px;
  font-style: normal;
}
[data-theme="dark"] del.md-diff-del { background: rgba(185, 76, 112, 0.2); }
[data-theme="dark"] ins.md-diff-ins { background: rgba(40, 125, 117, 0.2); }

/* ── 行内数学 ────────────────────────────────────────────────────── */
.md-math {
  font-family: var(--font-mono, ui-monospace, 'Courier New', monospace);
  font-style: italic;
  font-size: 0.95em;
  color: var(--ink);
  background: var(--panel-soft);
  padding: 0.08em 0.35em;
  border-radius: 3px;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .md-math {
  background: rgba(255, 255, 255, 0.07);
}

/* ── 块级数学 $$...$$ ─────────────────────────────────────────────── */
.md-math-block {
  display: block;
  font-family: var(--font-mono, ui-monospace, 'Courier New', monospace);
  font-style: italic;
  font-size: 0.97em;
  color: var(--ink);
  background: var(--panel-soft);
  padding: 0.6em 1em;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  margin: 0.6em 0;
  overflow-x: auto;
  white-space: pre;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .md-math-block {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--accent);
}

/* ── Mermaid 图表容器 ─────────────────────────────────────────────── */
.md-mermaid {
  overflow-x: auto;
  margin: 0.75em 0;
  text-align: center;
  background: var(--bg-2, rgba(0,0,0,0.04));
  border-radius: 8px;
  padding: 1em;
  min-height: 2em;
}
.md-mermaid svg { max-width: 100%; height: auto; }
[data-theme="dark"] .md-mermaid {
  background: rgba(255,255,255,0.05);
}

/* ── 缩写 abbr ─────────────────────────────────────────────────────── */
.bubble-content.markdown abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
  color: inherit;
}

/* ── 颜色色块预览 ─────────────────────────────────────────────────── */
.md-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
  vertical-align: baseline;
}
.md-color-swatch::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}
[data-theme="dark"] .md-color-swatch::before {
  border-color: rgba(255, 255, 255, 0.2);
}

.bubble-content.markdown blockquote {
  margin: 0.5em 0;
  padding: 0.3em 0.85em;
  border-left: 3px solid var(--moon);
  background: rgba(124, 121, 189, 0.07);
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-style: italic;
}

.message.user .bubble-content.markdown blockquote {
  border-left-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

/* ── 复制按钮 ─────────────────────────────────────────────────────── */
.message.assistant .bubble {
  position: relative;
}

.copy-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, background 0.15s, color 0.15s;
  padding: 0;
}

.message.assistant .bubble:hover .copy-btn,
.copy-btn:focus-visible {
  opacity: 1;
}

.copy-btn:hover {
  background: rgba(124, 121, 189, 0.12);
  color: var(--moon);
}

.copy-btn:active {
  transform: scale(0.92);
}

.copy-btn.copied {
  color: #4caf87;
  opacity: 1;
}

.copy-btn.copied::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: rgba(76, 175, 135, 0.12);
}

/* 等待期三点动画 */
@keyframes waiting-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.thinking-waiting::after {
  content: '●  ●  ●';
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  animation: waiting-blink 1.4s ease-in-out infinite;
}

@keyframes stream-cursor {
  50% { opacity: 0; }
}
.message--streaming .bubble-content::after {
  content: '▋';
  display: inline;
  opacity: 0.7;
  color: var(--accent);
  animation: stream-cursor 0.65s steps(1) infinite;
}

/* 思考链区域 — 推理模型（GLM 5.1 等）才会出现 */
.thinking-block {
  margin-bottom: 10px;
  border-left: 2px solid rgba(124, 121, 189, 0.35);
  padding-left: 10px;
}

.thinking-summary {
  font-size: 12px;
  color: var(--moon);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.75;
}

.thinking-summary::-webkit-details-marker { display: none; }
.thinking-summary:focus { outline: none; }
.thinking-summary:focus-visible {
  outline: 1px dashed rgba(124, 121, 189, 0.5);
  outline-offset: 2px;
  border-radius: 3px;
}

.thinking-summary::before {
  content: '▶';
  font-size: 9px;
  transition: transform 0.2s;
}

details[open] > .thinking-summary::before {
  transform: rotate(90deg);
}

.thinking-body {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.bubble .meta-line {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bubble:hover .meta-line {
  opacity: 1;
}

.message.user .meta-line {
  color: rgba(255, 255, 255, 0.72);
}

.msg-time {
  grid-column: 2;
  margin-top: -6px;
  padding-left: 2px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.72;
  user-select: none;
  pointer-events: none;
}

.message:hover .msg-time {
  opacity: 0.9;
}

.message.user .msg-time {
  grid-column: 1;
  grid-row: 2;
  color: var(--muted);
  text-align: right;
}

/* Approach 消息 — 醒来提醒的主动靠近气泡 */
/* 日期分隔线 */
.date-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  color: var(--muted);
  font-size: 11px;
  user-select: none;
}

.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, rgba(0, 0, 0, 0.08));
}

/* ── Approach 消息 */
.message--approach .bubble {
  border-left: 3px solid var(--moon);
  background: rgba(124, 121, 189, 0.06);
  padding-left: 12px;
}

.message--approach .bubble .meta-line {
  color: var(--moon);
}

.env-sense-badge {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.env-sense-phase {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.error-notice {
  margin: 8px auto;
  padding: 6px 14px;
  max-width: 480px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  opacity: 0.82;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.retry-btn {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.retry-btn:hover {
  opacity: 0.7;
}

.quick-reply-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  z-index: 50;
  overflow: hidden;
}
.quick-reply-panel[hidden] { display: none; }
.quick-reply-item {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.quick-reply-item:hover { background: var(--panel-soft); }

.markdown-preview-pane {
  margin: 0 28px 8px;
  padding: 12px 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: var(--chat-font-size, 14px);
  line-height: 1.7;
  max-height: 240px;
  overflow-y: auto;
  color: var(--ink);
}
.markdown-preview-pane[hidden] { display: none; }
.markdown-preview-content + .room-context-card--preview {
  margin-top: 10px;
}
.room-context-card--preview {
  margin: 0;
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}
.room-context-card--preview strong {
  font-size: 14px;
}
.room-context-card--preview p {
  font-size: 12px;
}
.room-context-card--preview .room-context-flags span {
  padding: 3px 7px;
  font-size: 11px;
}

.reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 28px 4px;
  padding: 6px 10px 6px 12px;
  background: var(--panel-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--muted);
}
.reply-preview[hidden] { display: none; }
.reply-preview-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-preview-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--quiet);
}
.reply-preview-close:hover { color: var(--ink); }
.markdown-preview-pane:empty::before {
  content: "（无内容）";
  color: var(--quiet);
  font-style: italic;
}

.composer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  flex-shrink: 0;   /* stay at bottom, don't compress when message-list is large */
  gap: 10px;
  margin: 0 28px 24px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.composer-tools {
  display: flex;
  gap: 6px;
  padding-bottom: 1px;
}

.ambient-presence {
  grid-column: 2 / 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  margin: -2px 2px -3px;
  color: color-mix(in srgb, var(--muted) 86%, var(--accent));
  font-size: 11px;
  line-height: 1;
  opacity: 0.74;
  pointer-events: none;
  user-select: none;
}

.ambient-presence-mark {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.96) 0 18%, transparent 19%),
    radial-gradient(circle at 40% 56%, rgba(92, 190, 177, 0.92) 0 42%, rgba(124, 121, 189, 0.78) 74%, transparent 75%);
  box-shadow: 0 0 0 1px rgba(124, 121, 189, 0.12), 0 0 12px rgba(92, 190, 177, 0.18);
}

.composer[data-ambient-state="ready"] {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: var(--shadow), 0 0 22px rgba(92, 190, 177, 0.1);
}

.composer[data-ambient-state="ready"] .input-wrap {
  box-shadow: inset 0 0 0 1px rgba(92, 190, 177, 0.16);
}

.composer[data-ambient-state="preview"] .ambient-presence {
  color: var(--muted);
  opacity: 0.62;
}

.composer[data-ambient-state="shared"] .ambient-presence-mark {
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.96) 0 17%, transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(124, 121, 189, 0.88) 0 46%, rgba(92, 190, 177, 0.5) 76%, transparent 77%);
}

.summon-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.summon-bar[hidden] {
  display: none;
}

.summon-bar::-webkit-scrollbar {
  display: none;
}

.summon-button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink);
  min-height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
}

.summon-button--both {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.summon-button:disabled {
  opacity: 0.56;
}

.summon-status {
  flex: 1 1 auto;
  min-width: 128px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keyboard-hint {
  display: none;  /* 触屏默认隐藏 */
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.55;
  padding: 0 2px 2px;
  user-select: none;
  pointer-events: none;
}

@media (pointer: fine) {
  .keyboard-hint {
    display: block;
  }
}

/* G6 聊天图片预览：选完图后在 textarea 上方显示缩略图 */
.chat-image-preview {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(124, 121, 189, 0.08);
  border-radius: 8px;
  max-width: 100%;
}
.chat-image-preview[hidden] { display: none; }
.chat-image-preview img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.chat-image-preview-info {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.chat-image-preview-status {
  flex: 1;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-image-preview-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.1);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

/* G6 消息气泡里的图片 — 双保险：class 限宽 + bubble 内所有 img 兜底 */
.message-image,
.bubble img {
  display: block;
  max-width: min(240px, 100%);
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: 10px;
  margin-top: 4px;
  cursor: pointer;
  object-fit: cover;
}

/* G6 纯图消息：去掉气泡装饰，图直接显示 */
.msg--image-only .bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.msg--image-only .bubble-content {
  display: none;
}
.msg--image-only .bubble img {
  margin-top: 0;
}

.input-wrap {
  display: block;
  position: relative;
  min-width: 0;
  border-radius: 10px;
  transition: box-shadow 0.16s ease;
}

.input-wrap--warn {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 54%, transparent);
}

.input-wrap--limit {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rose) 62%, transparent);
}

.char-count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 10px;
  line-height: 1;
  color: var(--quiet);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.char-count:not(:empty) { opacity: 1; }
.char-count.char-count--warn  { color: var(--amber); }
.char-count.char-count--limit { color: var(--rose); font-weight: 600; }

/* In-chat search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(4px);
  position: sticky;
  top: 0;
  z-index: 15;
}
.search-bar[hidden] {
  display: none;
}
.search-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  outline: none;
  background: transparent;
  color: var(--text);
}
.search-input:focus {
  border-color: var(--accent, #7c79bd);
}
.search-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 40px;
  text-align: right;
}
.search-close {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Search match highlight */
.msg--search-match .bubble {
  outline: 2px solid var(--accent, #7c79bd);
  outline-offset: 2px;
  border-radius: 12px;
}
@keyframes search-focus-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(124, 106, 247, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(124, 106, 247, 0); }
}
.msg--search-focus .bubble {
  animation: search-focus-pulse 0.55s ease-out forwards;
}

mark.search-highlight {
  background: rgba(124, 106, 247, 0.22);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
[data-theme="dark"] mark.search-highlight {
  background: rgba(124, 106, 247, 0.38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark.search-highlight {
    background: rgba(124, 106, 247, 0.38);
  }
}

mark.md-highlight {
  background: rgba(175, 120, 43, 0.18);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
[data-theme="dark"] mark.md-highlight {
  background: rgba(201, 144, 69, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark.md-highlight {
    background: rgba(201, 144, 69, 0.28);
  }
}

/* Syntax token dark mode overrides */
[data-theme="dark"] .tok-keyword  { color: #a89cf5; }
[data-theme="dark"] .tok-string   { color: #5ec49a; }
[data-theme="dark"] .tok-comment  { color: #6d7e78; }
[data-theme="dark"] .tok-number   { color: #d08060; }
[data-theme="dark"] .tok-punct    { color: #5a6a64; }
[data-theme="dark"] .tok-variable { color: #5fa8e0; }
[data-theme="dark"] .tok-diff-add  { background: rgba(40, 125, 117, 0.22); color: #5ec49a; }
[data-theme="dark"] .tok-diff-del  { background: rgba(185, 76, 112, 0.22); color: #d08090; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tok-keyword  { color: #a89cf5; }
  :root:not([data-theme="light"]) .tok-string   { color: #5ec49a; }
  :root:not([data-theme="light"]) .tok-comment  { color: #6d7e78; }
  :root:not([data-theme="light"]) .tok-number   { color: #d08060; }
  :root:not([data-theme="light"]) .tok-punct    { color: #5a6a64; }
  :root:not([data-theme="light"]) .tok-variable { color: #5fa8e0; }
  :root:not([data-theme="light"]) .tok-diff-add { background: rgba(40, 125, 117, 0.22); color: #5ec49a; }
  :root:not([data-theme="light"]) .tok-diff-del { background: rgba(185, 76, 112, 0.22); color: #d08090; }
}

/* Network status banner */
.network-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  padding: calc(7px + env(safe-area-inset-top, 0px)) 16px 7px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
}
.network-banner--offline {
  background: #e8850a;
  color: #fff;
}
.network-banner--online {
  background: #3a8a4a;
  color: #fff;
}
.network-banner[hidden] {
  display: none;
}

.today-trace-modal[hidden] {
  display: none;
}

.today-trace-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: blur(8px);
}

.today-trace-dialog {
  width: min(720px, 100%);
  max-height: min(760px, 92dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.today-trace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.today-trace-header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.today-trace-header h2 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.today-trace-body {
  overflow: auto;
  padding: 14px 18px 18px;
}

.today-trace-heads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.today-trace-head {
  border: 1px solid color-mix(in srgb, var(--trace-accent, var(--accent)) 42%, var(--line));
  border-left: 4px solid var(--trace-accent, var(--accent));
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 12px;
}

.today-trace-section {
  border-top: 1px solid var(--line);
  padding-top: 13px;
  margin-top: 13px;
}

.today-trace-section h3 {
  margin: 0 0 9px;
  font-size: 15px;
  letter-spacing: 0;
}

.today-trace-section--collapsed .today-trace-list {
  max-height: 96px;
  overflow: hidden;
}

.today-trace-list {
  display: grid;
  gap: 8px;
}

.today-trace-item {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.today-trace-item strong {
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
}

.today-trace-item span,
.today-trace-empty {
  color: var(--muted);
  font-size: 12px;
}

body.today-trace-open {
  overflow: hidden;
}

.moments-modal[hidden] {
  display: none;
}

.moments-modal {
  position: fixed;
  inset: 0;
  z-index: 83;
  display: block;
  padding: 0;
  background: var(--theme-bg);
  overflow: hidden;
}

.moments-dialog {
  position: relative;
  width: min(540px, 100%);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: var(--theme-surface);
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.moments-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 6px;
  border-bottom: 0;
  background: transparent;
}

.moments-header > div:first-of-type {
  min-width: 0;
  text-align: center;
}

.moments-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moments-back-button,
.moments-camera-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-text);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.72);
}

.moments-back-button svg {
  width: 26px;
  height: 26px;
}

.moments-camera-button svg {
  width: 24px;
  height: 24px;
}

.moments-camera-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--jade) 12%, var(--theme-surface));
}

.moments-sync-button {
  display: none;
  height: 34px;
  min-width: 46px;
  padding: 0 10px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-surface) 86%, var(--jade) 14%);
  color: var(--theme-text);
  font-size: 13px;
}

.moments-sync-button:disabled {
  opacity: 0.58;
}

.moments-more-button {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-text);
}

.moments-more-button svg {
  width: 24px;
  height: 24px;
}

.moments-header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.moments-header #momentsStatus {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.moments-header h2 {
  margin: 0;
  overflow: hidden;
  color: var(--theme-text);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: 0;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.78);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moments-cover {
  position: relative;
  min-height: 318px;
  background: var(--theme-bg);
}

.moments-cover-art {
  position: relative;
  height: 270px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.7), transparent 22%),
    linear-gradient(140deg, color-mix(in srgb, var(--theme-accent) 18%, #f9fbff), color-mix(in srgb, var(--theme-bg) 56%, #c9d9f7 44%));
}

:root[data-theme-skin="plain"] .moments-cover-art {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.74), transparent 22%),
    linear-gradient(140deg, #f4f7fb, #dfe7f0);
}

:root[data-theme-skin="festival"] .moments-cover-art {
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.78), transparent 22%),
    linear-gradient(140deg, #fff6f0, #d7e8ff 58%, #ffe9ef);
}

.moments-cover-moon,
.moments-cover-rose,
.moments-cover-glow {
  position: absolute;
  pointer-events: none;
}

.moments-cover-moon {
  right: 42px;
  top: 34px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fff, #eaf1ff 58%, rgba(255, 255, 255, 0.08) 60%);
  box-shadow: 0 16px 60px rgba(119, 143, 190, 0.28);
}

.moments-cover-rose {
  left: 34px;
  bottom: 34px;
  width: 160px;
  height: 110px;
  border-radius: 46% 54% 60% 40%;
  background:
    radial-gradient(circle at 26% 36%, rgba(255, 255, 255, 0.88), transparent 18%),
    radial-gradient(circle at 46% 42%, rgba(244, 231, 239, 0.72), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(216, 230, 255, 0.28));
  opacity: 0.78;
  filter: blur(0.2px);
}

.moments-cover-glow {
  inset: auto 0 0;
  height: 78px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.55));
}

.moments-profile {
  position: absolute;
  right: 28px;
  bottom: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: end;
  gap: 12px;
  width: min(78%, 340px);
  color: #fff;
  text-align: right;
  text-shadow: 0 2px 12px rgba(15, 23, 42, 0.28);
}

.moments-profile strong {
  align-self: center;
  overflow: hidden;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moments-profile-avatar {
  width: 72px;
  height: 72px;
  border: 3px solid var(--theme-surface);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
  color: transparent;
  text-shadow: none;
}

.moments-composer {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: min(540px, 100%);
  min-height: 100dvh;
  padding: 0;
  border: 0;
  background: var(--theme-surface);
}

.moments-composer[hidden] {
  display: none;
}

.moments-publish-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px 8px;
}

.moments-publish-cancel,
.moments-publish-submit {
  min-width: 56px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-text);
  font-size: 17px;
  font-weight: 650;
  flex-shrink: 0;
}

.moments-publish-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--theme-text);
  pointer-events: none;
}

.moments-publish-submit {
  padding: 0 14px;
  background: color-mix(in srgb, var(--jade) 72%, #36c275 28%);
  color: #fff;
}

.moments-composer[data-mode="text-only"] .moments-image-preview,
.moments-composer[data-mode="text-only"] .moments-photo-add,
.moments-composer[data-mode="text-only"] #momentsImageInput {
  display: none;
}

.moments-composer[data-mode="text-only"] .moments-publish-body {
  grid-template-columns: 1fr;
}

.moments-composer[data-mode="text-only"] textarea {
  min-height: 200px;
}

.moments-publish-body {
  display: grid;
  grid-template-columns: 128px 128px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 22px 40px;
}

.moments-composer textarea,
.moment-candidate-card select,
.moment-candidate-card textarea,
.moment-comment-form select,
.moment-comment-form input {
  min-width: 0;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
}

.moments-composer select,
.moments-composer input,
.moment-candidate-card select,
.moment-comment-form select,
.moment-comment-form input {
  height: 36px;
  padding: 0 10px;
}

.moments-composer textarea,
.moment-candidate-card textarea {
  width: 100%;
  resize: vertical;
  min-height: 112px;
  max-height: 180px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1.48;
}

.moments-composer textarea {
  grid-column: 1 / -1;
}

.moments-image-preview {
  grid-column: 1;
  display: grid;
  gap: 12px;
}

.moments-image-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 128px;
}

.moments-image-preview-grid[data-count="1"] {
  grid-template-columns: 1fr;
}

.moments-image-preview-grid[data-count="2"],
.moments-image-preview-grid[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}

.moments-image-preview-grid img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 0;
  border: 0;
}

.moments-image-preview-grid:not([data-count="1"]) img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.moments-image-preview button,
.moments-composer-actions button,
.moment-candidate-actions button,
.moment-comment-form button {
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
}

.moments-photo-add {
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--theme-bg) 72%, var(--theme-surface) 28%);
  color: var(--muted);
}

.moments-photo-add span {
  font-size: 52px;
  font-weight: 250;
  line-height: 1;
}

.moments-publish-options {
  display: grid;
  grid-column: 1 / -1;
  margin-top: 42px;
  border-top: 1px solid var(--theme-line);
}

.moments-publish-options button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  min-height: 54px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--theme-line);
  background: transparent;
  color: var(--theme-text);
  text-align: left;
}

.moments-publish-options span {
  color: var(--theme-text);
  font-size: 20px;
  text-align: center;
}

.moments-publish-options strong {
  font-size: 17px;
  font-weight: 580;
}

.moments-publish-options i {
  color: var(--muted);
  font-style: normal;
  font-size: 18px;
}

.moments-album-sheet {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  align-items: end;
  background: rgba(15, 23, 42, 0.48);
}

.moments-album-sheet[hidden] {
  display: none;
}

.moments-album-backdrop {
  position: absolute;
  inset: 0;
}

.moments-album-panel {
  position: relative;
  display: grid;
  width: min(540px, 100%);
  margin: 0 auto;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
  border-radius: 18px 18px 0 0;
  background: var(--theme-surface);
  box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.moments-album-action,
.moments-album-cancel {
  min-height: 58px;
  border: 0;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 18px;
  font-weight: 600;
}

.moments-album-cancel {
  margin-top: 8px;
  border-top: 8px solid var(--theme-bg);
}

.moments-candidates {
  display: grid;
  gap: 10px;
  padding: 12px 18px 2px;
  background: var(--theme-surface);
}

.moments-candidates:empty {
  display: none;
}

.moments-candidates-title {
  color: var(--muted);
  font-size: 12px;
}

.moment-candidate-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, var(--theme-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-accent) 8%, var(--theme-surface));
}

.moment-candidate-head,
.moment-candidate-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.moment-candidate-head {
  color: var(--muted);
  font-size: 12px;
}

.moment-candidate-fields {
  display: grid;
  grid-template-columns: minmax(92px, 120px) minmax(0, 1fr);
  gap: 8px;
}

.moment-candidate-card textarea {
  min-height: 56px;
  border: 1px solid var(--theme-line);
  background: var(--theme-surface);
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.moment-candidate-actions {
  justify-content: flex-end;
}

.moment-candidate-actions button {
  height: 32px;
  min-width: 64px;
  padding: 0 10px;
  color: var(--muted);
}

.moment-candidate-actions [data-candidate-action="publish"] {
  border-color: color-mix(in srgb, var(--jade) 42%, var(--theme-line));
  background: color-mix(in srgb, var(--jade) 12%, var(--theme-surface));
  color: var(--theme-text);
}

.moments-feed {
  display: grid;
  gap: 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 92px);
  background: var(--theme-surface);
}

.moments-empty {
  margin: 24px 26px 80px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.moment-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--theme-line);
  background: var(--theme-surface);
}

.moment-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-accent) 24%, var(--theme-surface));
  color: var(--theme-text);
  font-weight: 650;
}

.moment-avatar--qianqian {
  background: var(--avatar-qianqian-bg, color-mix(in srgb, var(--rose) 20%, var(--theme-surface)));
  background-position: center;
  background-size: cover;
  color: transparent;
  text-shadow: none;
}

.moment-avatar--yechenyi {
  background: var(--avatar-yechenyi-bg, url("../assets/avatars/yechenyi-avatar.jpg") center 24% / cover no-repeat);
  color: transparent;
  text-shadow: none;
}

.moment-avatar--guyanshen {
  background: var(--avatar-guyanshen-bg, url("../assets/avatars/guyanshen-avatar.jpg") center 26% / cover no-repeat);
  color: transparent;
  text-shadow: none;
}

.moment-body {
  min-width: 0;
}

.moment-body header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.moment-body header strong {
  color: #536a97;
  font-size: 16px;
  font-weight: 720;
}

.moment-like-line,
.moment-comment {
  color: var(--muted);
  font-size: 12px;
}

.moment-text {
  margin: 6px 0 10px;
  color: var(--theme-text);
  font-size: 16px;
  line-height: 1.48;
  white-space: pre-wrap;
}

.moment-image {
  display: block;
  width: min(320px, 100%);
  max-height: 360px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--theme-line);
  cursor: zoom-in;
}

.moment-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: min(320px, 100%);
}

.moment-image-grid[data-count="2"],
.moment-image-grid[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(214px, 100%);
}

.moment-image-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  cursor: zoom-in;
}

.moment-image:focus-visible,
.moment-image-grid img:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.34);
  outline-offset: 2px;
}

.moment-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + 58px) 18px calc(env(safe-area-inset-bottom, 0px) + 58px);
  background: rgba(0, 0, 0, 0.92);
  touch-action: pan-y;
}

.moment-image-viewer[hidden] {
  display: none;
}

.moment-image-viewer-bar {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  min-height: 56px;
  padding: 8px 12px;
  color: #fff;
}

.moment-image-viewer-close,
.moment-image-viewer-nav {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.moment-image-viewer-close svg,
.moment-image-viewer-nav svg {
  width: 24px;
  height: 24px;
}

.moment-image-viewer-counter {
  justify-self: center;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  font-weight: 560;
}

.moment-image-viewer img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 82dvh;
  object-fit: contain;
  border-radius: 4px;
}

.moment-image-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.moment-image-viewer-nav[hidden] {
  display: none;
}

.moment-image-viewer-nav--prev {
  left: 14px;
}

.moment-image-viewer-nav--next {
  right: 14px;
}

.moment-meta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.moment-more-button {
  justify-self: end;
  width: 38px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-bg) 78%, var(--theme-surface) 22%);
  color: #536a97;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.moment-action-menu {
  position: absolute;
  right: 46px;
  top: -2px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-width: 264px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(40, 40, 40, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
}

.moment-action-menu[hidden] {
  display: none;
}

.moment-action-menu button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 560;
}

.moment-action-menu button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.moment-action-delete {
  color: #ffd6d6;
}

.moment-action-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.moment-action-menu button[aria-pressed="true"] .moment-action-icon--heart,
.moment-like-line .moment-action-icon--heart {
  color: #e84d5b;
}

.moment-action-menu button[aria-pressed="true"] .moment-action-icon--heart path,
.moment-like-line .moment-action-icon--heart path {
  fill: currentColor;
  stroke: currentColor;
}

.moment-social {
  margin-top: 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--theme-bg) 82%, var(--theme-surface) 18%);
  overflow: hidden;
}

.moment-social[hidden] {
  display: none;
}

.moment-like-line,
.moment-comment {
  margin: 0;
  padding: 7px 10px;
  line-height: 1.45;
}

.moment-like-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #536a97;
  font-size: 14px;
  font-weight: 560;
}

.moment-comment {
  border-top: 1px solid color-mix(in srgb, var(--theme-line) 58%, transparent);
  color: var(--theme-text);
  font-size: 14px;
}

.moment-like-line + .moment-comment {
  border-top-color: color-mix(in srgb, var(--theme-line) 72%, transparent);
}

.moment-comment-author {
  color: #536a97;
  font-weight: 650;
  cursor: pointer;
}
.moment-comment-author:active {
  opacity: 0.6;
}

.moment-comment-text {
  color: var(--theme-text);
  font-weight: 400;
}

.moment-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--theme-line) 58%, transparent);
}

.moment-comment-form[hidden] {
  display: none;
}

.moment-comment-form button {
  height: 36px;
}

body.moments-open {
  overflow: hidden;
}

.wallets-modal[hidden] {
  display: none;
}

.wallets-modal {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(8px);
}

.wallets-dialog {
  width: min(720px, 100%);
  max-height: min(760px, 92dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--theme-wallet-a) 54%, transparent), transparent 36%),
    linear-gradient(180deg, var(--theme-surface-glass), color-mix(in srgb, var(--theme-bg) 74%, var(--theme-surface) 26%));
  box-shadow: var(--theme-shadow);
  backdrop-filter: blur(22px) saturate(1.08);
}

.wallets-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 104px;
  padding: 18px 18px 34px;
  border-bottom: 0;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--theme-wallet-c) 26%, transparent), transparent 30%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--theme-deep-accent) 22%, transparent), transparent 34%),
    linear-gradient(145deg, var(--theme-glass-highlight), color-mix(in srgb, var(--theme-wallet-a) 56%, var(--theme-surface) 44%));
}

.wallets-header::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 48px;
  bottom: 26px;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--theme-wallet-ink) 24%, transparent),
    color-mix(in srgb, var(--theme-deep-accent) 18%, transparent),
    transparent
  );
}

.wallets-header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.wallets-header .icon-button {
  align-self: flex-start;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 10px;
  margin-top: 2px;
}

.wallets-header .icon-button svg {
  width: 14px;
  height: 14px;
}

.wallets-header h2 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.wallets-body {
  position: relative;
  overflow: auto;
  padding: 0 18px 18px;
  margin-top: -20px;
}

.wallet-intro-row {
  position: absolute;
  right: 30px;
  bottom: 24px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  min-height: 24px;
  margin: 0;
}

.wallet-intro {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.wallet-rules-disclosure {
  position: relative;
  flex: 0 0 auto;
}

.wallet-rules-disclosure summary {
  list-style: none;
}

.wallet-rules-disclosure summary::-webkit-details-marker {
  display: none;
}

.wallet-info-button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--theme-deep-accent) 18%, var(--theme-line));
  border-radius: 999px;
  background:
    linear-gradient(135deg, var(--theme-glass-highlight), color-mix(in srgb, var(--theme-wallet-a) 52%, var(--theme-surface) 48%));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-deep-accent) 10%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

.wallet-info-button:hover,
.wallet-rules-disclosure[open] .wallet-info-button {
  border-color: color-mix(in srgb, var(--theme-deep-accent) 34%, var(--theme-line));
  color: var(--ink);
}

.wallet-rules-panel {
  position: absolute;
  top: auto;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 5;
  width: min(360px, calc(100vw - 56px));
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--theme-deep-accent) 16%, var(--theme-line));
  border-radius: 18px;
  background:
    linear-gradient(145deg, var(--theme-glass-highlight), color-mix(in srgb, var(--theme-wallet-a) 32%, var(--theme-surface) 68%));
  box-shadow: 0 22px 54px color-mix(in srgb, var(--theme-deep-accent) 16%, transparent);
  backdrop-filter: blur(18px) saturate(1.08);
}

.wallet-rules-panel > strong {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
}

.wallet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.wallet-card {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 100%;
  min-height: 104px;
  padding: 18px 12px 17px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--theme-deep-accent) 18%, var(--theme-line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--theme-wallet-a) 72%, transparent), transparent 34%),
    radial-gradient(circle at 92% 94%, color-mix(in srgb, var(--theme-wallet-c) 34%, transparent), transparent 36%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--theme-wallet-a) 84%, var(--theme-surface) 16%),
      color-mix(in srgb, var(--theme-wallet-b) 70%, var(--theme-surface) 30%) 52%,
      color-mix(in srgb, var(--theme-wallet-c) 54%, var(--theme-surface) 46%)
    );
  box-shadow: 0 16px 34px color-mix(in srgb, var(--theme-deep-accent) 13%, transparent);
  color: inherit;
  font: inherit;
  appearance: none;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wallet-card:hover,
.wallet-card--active {
  border-color: color-mix(in srgb, var(--theme-deep-accent) 42%, var(--theme-line));
  box-shadow:
    0 17px 38px color-mix(in srgb, var(--theme-deep-accent) 17%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--theme-deep-accent) 14%, transparent);
}

.wallet-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-deep-accent) 58%, transparent);
  outline-offset: 3px;
}

.wallet-card-icon {
  position: static;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: color-mix(in srgb, var(--theme-deep-accent) 68%, var(--theme-wallet-ink) 32%);
  margin-bottom: 1px;
}

.wallet-card-icon svg {
  width: 24px;
  height: 24px;
}

.wallet-card span,
.wallet-card p,
.wallet-ledger-item span,
.wallet-empty {
  color: var(--muted);
  font-size: 12px;
}

.wallet-card > span:not(.wallet-card-icon) {
  color: color-mix(in srgb, var(--theme-wallet-ink) 86%, var(--theme-muted) 14%);
  font-size: 13px;
  font-weight: 620;
}

.wallet-card strong {
  color: var(--theme-wallet-ink);
  font-size: 21px;
  letter-spacing: 0;
}

.wallet-section {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.wallet-section h3 {
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 560;
  letter-spacing: 0;
}

.wallet-section-hint {
  margin: -3px 0 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.wallet-ledger-item {
  display: grid;
  gap: 1px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
}

.wallet-ledger-item strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

.wallet-ledger-main {
  display: block;
}

.wallet-ledger-amount {
  color: color-mix(in srgb, #16794f 78%, var(--ink) 22%);
}

.wallet-ledger-item--out .wallet-ledger-amount {
  color: color-mix(in srgb, #b25139 74%, var(--ink) 26%);
}

.wallet-ledger-item span {
  font-size: 11px;
  line-height: 1.25;
}

.wallet-hard-stops {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wallet-hard-stop {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 12px;
}

[data-theme="dark"] .wallet-info-button {
  border-color: color-mix(in srgb, var(--theme-deep-accent) 26%, var(--theme-line));
  background:
    linear-gradient(135deg, var(--theme-glass-highlight), color-mix(in srgb, var(--theme-wallet-a) 64%, var(--theme-surface) 36%));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .wallets-dialog {
  border-color: var(--theme-line);
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--theme-wallet-b) 28%, transparent), transparent 36%),
    linear-gradient(180deg, var(--theme-surface-glass), color-mix(in srgb, var(--theme-bg) 78%, var(--theme-surface) 22%));
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.38);
}

[data-theme="dark"] .wallets-header {
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--theme-wallet-c) 22%, transparent), transparent 30%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--theme-deep-accent) 18%, transparent), transparent 34%),
    linear-gradient(145deg, var(--theme-glass-highlight), color-mix(in srgb, var(--theme-wallet-a) 62%, var(--theme-surface) 38%));
}

[data-theme="dark"] .wallets-header::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--theme-wallet-ink) 20%, transparent),
    color-mix(in srgb, var(--theme-deep-accent) 18%, transparent),
    transparent
  );
}

[data-theme="dark"] .wallet-rules-panel {
  border-color: color-mix(in srgb, var(--theme-deep-accent) 22%, var(--theme-line));
  background:
    linear-gradient(145deg, var(--theme-surface-glass), color-mix(in srgb, var(--theme-wallet-a) 42%, var(--theme-surface) 58%));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .wallet-card {
  border-color: color-mix(in srgb, var(--theme-deep-accent) 24%, var(--theme-line));
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--theme-wallet-c) 18%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-wallet-a) 76%, var(--theme-surface) 24%), color-mix(in srgb, var(--theme-wallet-b) 60%, var(--theme-surface) 40%));
}

[data-theme="dark"] .wallet-card-icon {
  color: color-mix(in srgb, var(--theme-deep-accent) 70%, var(--theme-wallet-ink) 30%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wallet-info-button {
    border-color: color-mix(in srgb, var(--theme-deep-accent) 26%, var(--theme-line));
    background:
      linear-gradient(135deg, var(--theme-glass-highlight), color-mix(in srgb, var(--theme-wallet-a) 64%, var(--theme-surface) 36%));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  }

  :root:not([data-theme="light"]) .wallets-dialog {
    border-color: var(--theme-line);
    background:
      radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--theme-wallet-b) 28%, transparent), transparent 36%),
      linear-gradient(180deg, var(--theme-surface-glass), color-mix(in srgb, var(--theme-bg) 78%, var(--theme-surface) 22%));
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.38);
  }

  :root:not([data-theme="light"]) .wallets-header {
    background:
      radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--theme-wallet-c) 22%, transparent), transparent 30%),
      radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--theme-deep-accent) 18%, transparent), transparent 34%),
      linear-gradient(145deg, var(--theme-glass-highlight), color-mix(in srgb, var(--theme-wallet-a) 62%, var(--theme-surface) 38%));
  }

  :root:not([data-theme="light"]) .wallets-header::after {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--theme-wallet-ink) 20%, transparent),
      color-mix(in srgb, var(--theme-deep-accent) 18%, transparent),
      transparent
    );
  }

  :root:not([data-theme="light"]) .wallet-rules-panel {
    border-color: color-mix(in srgb, var(--theme-deep-accent) 22%, var(--theme-line));
    background:
      linear-gradient(145deg, var(--theme-surface-glass), color-mix(in srgb, var(--theme-wallet-a) 42%, var(--theme-surface) 58%));
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
  }

  :root:not([data-theme="light"]) .wallet-card {
    border-color: color-mix(in srgb, var(--theme-deep-accent) 24%, var(--theme-line));
    background:
      radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--theme-wallet-c) 18%, transparent), transparent 34%),
      linear-gradient(145deg, color-mix(in srgb, var(--theme-wallet-a) 76%, var(--theme-surface) 24%), color-mix(in srgb, var(--theme-wallet-b) 60%, var(--theme-surface) 40%));
  }

  :root:not([data-theme="light"]) .wallet-card-icon {
    color: color-mix(in srgb, var(--theme-deep-accent) 70%, var(--theme-wallet-ink) 30%);
  }
}

.wallets-dialog {
  width: min(620px, 100%);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fffaf4 80%, var(--theme-surface) 20%), color-mix(in srgb, #f7f3ee 74%, var(--theme-bg) 26%));
}

.wallets-header {
  min-height: 72px;
  padding: 16px 18px 18px;
  border-bottom: 1px solid color-mix(in srgb, #8f2f3f 12%, var(--theme-line) 88%);
  background: color-mix(in srgb, #fffaf4 76%, var(--theme-surface) 24%);
}

.wallets-header::after,
.wallet-intro-row {
  display: none;
}

.wallets-body {
  margin-top: 0;
  padding: 14px 18px 18px;
}

.wallet-view-shell {
  display: grid;
  gap: 14px;
}

.wallet-masthead {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  border: 1px solid color-mix(in srgb, #8f2f3f 18%, var(--theme-line) 82%);
  border-radius: 10px;
  background: color-mix(in srgb, #fffaf4 84%, var(--theme-surface) 16%);
}

.wallet-title-wordmark {
  margin: 0;
  color: color-mix(in srgb, #301d20 86%, var(--theme-wallet-ink) 14%);
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
}

.wallet-access-note {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--muted) 82%, #8f2f3f 18%);
  font-size: 12px;
  line-height: 1.45;
}

.wallet-emblem,
.wallet-masthead .wallet-card-icon {
  width: 30px;
  height: 30px;
  color: color-mix(in srgb, #8f2f3f 72%, var(--theme-wallet-ink) 28%);
}

.wallet-grid--overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 2px;
}

.wallet-card {
  min-height: 116px;
  border-radius: 10px;
  border-color: color-mix(in srgb, #8f2f3f 16%, var(--theme-line) 84%);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fffdf8 88%, var(--theme-wallet-a) 12%), color-mix(in srgb, #f4eee8 76%, var(--theme-surface) 24%));
  box-shadow: 0 14px 26px color-mix(in srgb, #8f2f3f 9%, transparent);
  cursor: default;
}

.wallet-card:hover,
.wallet-card--active {
  border-color: color-mix(in srgb, #8f2f3f 28%, var(--theme-line) 72%);
  box-shadow: 0 14px 26px color-mix(in srgb, #8f2f3f 11%, transparent);
  transform: none;
}

.wallet-card--private {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff9f6 86%, #f1d9dc 14%), color-mix(in srgb, #f5eceb 82%, var(--theme-surface) 18%));
}

.wallet-card strong {
  color: color-mix(in srgb, #24181b 86%, var(--theme-wallet-ink) 14%);
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-size: 25px;
  font-weight: 650;
}

.wallet-card-caption {
  margin: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.wallet-section {
  margin-top: 2px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #8f2f3f 12%, var(--theme-line) 88%);
  border-radius: 10px;
  background: color-mix(in srgb, #fffaf4 72%, var(--theme-surface) 28%);
}

.wallet-section h3 {
  color: color-mix(in srgb, #36527a 78%, var(--ink) 22%);
  font-size: 15px;
  font-weight: 650;
}

.wallet-ledger-item {
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 82%, var(--panel-soft) 18%);
}

.wallet-ledger-amount {
  color: color-mix(in srgb, #8f2f3f 78%, var(--ink) 22%);
}

.wallet-ledger-item--out .wallet-ledger-amount {
  color: color-mix(in srgb, #7a4a37 78%, var(--ink) 22%);
}

.wallet-empty--blocked {
  padding: 14px 12px;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  background: var(--panel-soft);
}

[data-theme="dark"] .wallets-dialog {
  background:
    linear-gradient(180deg, color-mix(in srgb, #201817 74%, var(--theme-surface) 26%), color-mix(in srgb, #171312 76%, var(--theme-bg) 24%));
}

[data-theme="dark"] .wallets-header,
[data-theme="dark"] .wallet-masthead,
[data-theme="dark"] .wallet-section {
  background: color-mix(in srgb, #231a18 72%, var(--theme-surface) 28%);
}

[data-theme="dark"] .wallet-card,
[data-theme="dark"] .wallet-card--private {
  background:
    linear-gradient(180deg, color-mix(in srgb, #2a211f 78%, var(--theme-wallet-a) 22%), color-mix(in srgb, #1f1918 78%, var(--theme-surface) 22%));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wallets-dialog {
    background:
      linear-gradient(180deg, color-mix(in srgb, #201817 74%, var(--theme-surface) 26%), color-mix(in srgb, #171312 76%, var(--theme-bg) 24%));
  }

  :root:not([data-theme="light"]) .wallets-header,
  :root:not([data-theme="light"]) .wallet-masthead,
  :root:not([data-theme="light"]) .wallet-section {
    background: color-mix(in srgb, #231a18 72%, var(--theme-surface) 28%);
  }

  :root:not([data-theme="light"]) .wallet-card,
  :root:not([data-theme="light"]) .wallet-card--private {
    background:
      linear-gradient(180deg, color-mix(in srgb, #2a211f 78%, var(--theme-wallet-a) 22%), color-mix(in srgb, #1f1918 78%, var(--theme-surface) 22%));
  }
}

@media (max-width: 560px) {
  .wallet-grid--overview {
    grid-template-columns: 1fr;
  }

  .wallet-masthead {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }
}

body.wallets-open {
  overflow: hidden;
}

.schedules-modal[hidden] {
  display: none;
}

.schedules-modal {
  position: fixed;
  inset: 0;
  z-index: 84;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: blur(8px);
}

.schedules-dialog {
  width: min(720px, 100%);
  max-height: min(760px, 92dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.schedules-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.schedules-header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.schedules-header h2 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.schedules-body {
  overflow: auto;
  padding: 14px 18px 18px;
}

.schedule-intro {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.schedule-list {
  display: grid;
  gap: 10px;
}

.schedule-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.schedule-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.schedule-card-top strong {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 0;
}

.schedule-card-top span,
.schedule-card > span {
  color: var(--muted);
  font-size: 12px;
}

.schedule-card p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.schedule-action {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
}

.schedule-action:disabled {
  cursor: default;
  opacity: 0.76;
}

.schedule-action-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.schedule-section {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.schedule-section h3 {
  margin: 0 0 9px;
  font-size: 15px;
  letter-spacing: 0;
}

.schedule-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.schedule-rule {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 12px;
}

body.schedules-open {
  overflow: hidden;
}

body.pwa-standalone .chat-stage {
  min-height: var(--visual-viewport-height);
}

body.keyboard-open .chat-stage {
  height: var(--visual-viewport-height);
}

body.keyboard-open .message-list {
  scroll-padding-bottom: 132px;
}

.stops-modal[hidden] {
  display: none;
}

.stops-modal {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: blur(8px);
}

.stops-dialog {
  width: min(760px, 100%);
  max-height: min(780px, 92dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.stops-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.stops-header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.stops-header h2 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.stops-body {
  overflow: auto;
  padding: 14px 18px 18px;
}

.stops-intro,
.stops-confirmation {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.stops-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.stops-meta span,
.stop-boundary {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 12px;
}

.stop-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stop-rule-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.stop-rule-card strong {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
}

.stop-rule-card span,
.stop-rule-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.stops-section {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.stops-section h3 {
  margin: 0 0 9px;
  font-size: 15px;
  letter-spacing: 0;
}

.stop-preview-actions,
.stop-boundaries {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.stop-preview-action {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
}

.stops-confirmation {
  margin: 12px 0 0;
}

body.stops-open {
  overflow: hidden;
}

.emotion-panel-modal[hidden] {
  display: none;
}

.emotion-panel-modal {
  position: fixed;
  inset: 0;
  z-index: 87;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: blur(8px);
}

.emotion-panel-dialog {
  width: min(920px, 100%);
  max-height: min(760px, 92dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.emotion-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.emotion-panel-header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.emotion-panel-header h2 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.emotion-panel-body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 14px 18px 18px;
}

.emotion-panel-body .mood-band,
.emotion-panel-body .emotion-visual-card,
.emotion-panel-body .dictionary-editor-card {
  margin: 0;
  box-shadow: none;
}

.home-center-modal[hidden] {
  display: none;
}

.home-center-modal {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: blur(8px);
}

.home-center-dialog {
  width: min(520px, 100%);
  max-height: min(620px, 92dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.home-center-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.home-center-header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.home-center-header h2 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.home-center-body {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 14px 18px 18px;
}

.home-center-tile {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 13px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.home-center-tile:hover {
  background: var(--panel);
}

.home-center-tile:disabled {
  cursor: default;
  opacity: 0.58;
}

.home-center-tile strong {
  font-size: 14px;
  letter-spacing: 0;
}

.home-center-tile span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.pwa-readiness-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.pwa-readiness-card strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
}

.pwa-readiness-card span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.pwa-readiness-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pwa-readiness-item {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.pwa-readiness-item::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 1px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--muted);
  border-radius: 999px;
}

.pwa-readiness-item--ok {
  color: var(--ink);
}

.pwa-readiness-item--ok::before {
  border-color: var(--accent);
  background: var(--accent);
}

.pwa-usage-stage {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.pwa-usage-stage > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pwa-usage-stage strong {
  color: var(--ink);
  font-size: 13px;
}

.pwa-usage-stage span {
  margin: 0;
  color: var(--moon);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pwa-usage-stage ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pwa-usage-stage li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.pwa-lan-access {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.pwa-lan-access strong {
  color: var(--ink);
  font-size: 13px;
}

.pwa-lan-access span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.pwa-lan-access code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.45;
}

.pwa-manual-checks {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.pwa-manual-checks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pwa-manual-checks strong {
  color: var(--ink);
  font-size: 13px;
}

.pwa-manual-checks-head span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.pwa-manual-checks ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pwa-manual-check {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.pwa-manual-check label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.pwa-manual-check input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.pwa-manual-check input:checked + span {
  color: var(--ink);
}

.pwa-manual-reset {
  justify-self: start;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
}

.pwa-manual-reset:hover {
  color: var(--ink);
  background: var(--panel);
}

body.home-center-open {
  overflow: hidden;
}

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  z-index: 300;
  pointer-events: none;
}
.toast {
  background: rgba(30, 32, 50, 0.88);
  color: #fff;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  max-width: 280px;
  text-align: center;
}
.toast--visible {
  opacity: 1;
  transform: none;
}

/* Scroll-to-bottom floating button */
.scroll-bottom-btn {
  position: fixed;
  bottom: 96px;
  right: 32px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(29, 35, 55, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  z-index: 20;
  transition: opacity 0.2s, transform 0.2s;
}
.scroll-bottom-btn[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 9px;
  background: var(--accent, #7c6af7);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.scroll-bottom-btn:hover {
  opacity: 0.8;
  transform: translateY(1px);
}
.scroll-bottom-btn[hidden] {
  display: none;
}

/* Sidebar drawer — hidden on desktop, shown as overlay on mobile */
.sidebar-toggle {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

textarea {
  display: block;
  width: 100%;
  max-height: 142px;
  min-height: 40px;
  padding: 9px 2px;
  color: var(--ink);
  line-height: 1.55;
  resize: none;
  background: transparent;
  border: 0;
  outline: none;
}

textarea::placeholder {
  color: #9aa29d;
}

.send-button {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
  border-radius: 50%;
}

.send-button:hover {
  background: #111513;
}

.send-button--cancel {
  background: var(--jade);
  border-color: var(--jade);
}

.send-button--cancel:hover {
  background: #1f8377;
  border-color: #1f8377;
}

.send-button:disabled {
  cursor: default;
  opacity: 0.45;
}

@keyframes send-success {
  0%   { transform: scale(1); background: var(--jade); border-color: var(--jade); }
  40%  { transform: scale(1.12); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); background: var(--jade); border-color: var(--jade); }
}

.send-button--sent {
  animation: send-success 0.42s ease forwards;
  color: #ffffff;
}

.state-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 24px 18px;
  border-width: 0 0 0 1px;
  overflow-y: auto;  /* 右侧面板内容多时可滚动，不溢出锁死 */
}

.state-panel section {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(33, 43, 38, 0.07);
}

.state-panel h2 {
  margin: 0 0 14px;
  font-size: 14px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-heading h2 {
  margin: 0;
}

.switch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  background: #d5ddd8;
  border-radius: 999px;
  transition:
    background 150ms ease,
    box-shadow 150ms ease;
}

.switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  content: "";
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(33, 43, 38, 0.22);
  transition: transform 150ms ease;
}

.switch input:checked + span {
  background: var(--jade);
  box-shadow: 0 0 0 4px rgba(15, 139, 111, 0.12);
}

.switch input:checked + span::after {
  transform: translateX(18px);
}

.mode-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.heartbeat-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.heartbeat-steps li {
  min-height: 28px;
  padding: 7px 8px;
  color: var(--moon);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  background: var(--moon-soft);
  border: 1px solid rgba(124, 121, 189, 0.18);
  border-radius: 8px;
}

.mode-segment button {
  min-height: 32px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-radius: 7px;
}

.mode-segment button.active {
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(33, 43, 38, 0.08);
}

.wake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: 8px;
  margin-top: 12px;
}

.wake-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wake-grid span {
  color: var(--quiet);
  font-size: 11px;
  font-weight: 700;
}

.wake-grid input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 7px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

.wake-grid input:focus {
  border-color: rgba(15, 139, 111, 0.58);
  box-shadow: 0 0 0 3px rgba(15, 139, 111, 0.1);
}

.wake-summary {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.wide-button {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  background: var(--ink);
  border: 0;
  border-radius: 10px;
}

.wide-button:hover {
  background: #111513;
}

dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

dt {
  color: var(--quiet);
}

dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

.signal-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signal-list li {
  padding: 9px 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  background: var(--panel-soft);
  border-radius: 8px;
}

@media (max-width: 1320px) {
  .app-shell {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
  }

  .state-panel {
    display: none;
  }

  .top-bar {
    padding-right: 22px;
  }

  .top-actions {
    max-width: min(50vw, 420px);
  }
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .side-rail {
    align-items: center;
    padding: 18px 12px;
  }

  .brand-lockup div:last-child,
  .session-list,
  .rail-footer span:last-child {
    display: none;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .mood-band {
    grid-template-columns: 1fr;
  }

  .emotion-visual-card {
    grid-template-columns: 1fr;
  }

  .mood-tags {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  body {
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mobile-life-home button,
  .mobile-chat-home button,
  .mobile-discover-home button,
  .mobile-settings-home button,
  .mobile-chat-header button,
  .mobile-bottom-tabs button,
  .mobile-room-row,
  .mobile-settings-row,
  .mobile-discover-row,
  .mobile-avatar-card,
  .mobile-theme-card,
  .mobile-calendar-grid button,
  .mobile-calendar-month-controls button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    user-select: none;
  }

  .mobile-life-home button:focus:not(:focus-visible),
  .mobile-chat-home button:focus:not(:focus-visible),
  .mobile-discover-home button:focus:not(:focus-visible),
  .mobile-settings-home button:focus:not(:focus-visible),
  .mobile-chat-header button:focus:not(:focus-visible),
  .mobile-bottom-tabs button:focus:not(:focus-visible),
  .mobile-room-row:focus:not(:focus-visible),
  .mobile-settings-row:focus:not(:focus-visible),
  .mobile-discover-row:focus:not(:focus-visible),
  .mobile-avatar-card:focus:not(:focus-visible),
  .mobile-theme-card:focus:not(:focus-visible),
  .mobile-calendar-grid button:focus:not(:focus-visible),
  .mobile-calendar-month-controls button:focus:not(:focus-visible) {
    outline: 0;
  }

  .app-shell {
    display: block;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }

  .side-rail {
    display: none;
  }

  .side-rail--open {
    display: none;
    z-index: 200;
  }

  .side-rail--open .session-list {
    display: flex;
    flex-direction: column;
  }

  .side-rail--open .brand-lockup div:last-child,
  .side-rail--open .rail-footer span:last-child {
    display: block;
  }

  .sidebar-backdrop--visible {
    display: none;
  }

  .sidebar-toggle {
    display: none;
  }

  .top-bar-left {
    gap: 4px;
    min-width: 0;
  }

  .chat-stage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: #f5f6f8;
  }

  .top-bar {
    display: none;
  }

  .top-actions {
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(42vw, 160px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-actions::-webkit-scrollbar {
    display: none;
  }

  #focusModeToggle,
  #soundToggle,
  #keyboardHelpBtn,
  #exportHistoryButton,
  #clearHistoryButton,
  #refreshMoodButton {
    display: none;
  }

  .mobile-room-strip {
    display: none;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 58px;
    padding: 0 16px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-room-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-room-pill {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    flex: 0 0 auto;
    min-width: 104px;
    max-width: 148px;
    min-height: 48px;
    padding: 8px 10px;
    color: var(--ink);
    text-align: left;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(29, 35, 55, 0.08);
  }

  .mobile-room-pill.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ink), #33425a);
    border-color: transparent;
  }

  .mobile-room-pill:disabled {
    opacity: 0.5;
  }

  .mobile-room-pill .session-title,
  .mobile-room-pill .session-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-room-pill .session-title {
    grid-column: 1 / -1;
    font-size: 13px;
    line-height: 1.2;
  }

  .mobile-room-pill .session-meta {
    color: currentColor;
    font-size: 11px;
    opacity: 0.72;
  }

  .mobile-room-pill .unread-badge {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin-left: 8px;
  }

  .mobile-life-home,
  .mobile-chat-home,
  .mobile-discover-home,
  .mobile-settings-home {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: calc(16px + env(safe-area-inset-top)) 18px calc(74px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-home-open .mobile-life-home,
  body.mobile-chat-list-open:not(.mobile-chat-detail-open) .mobile-chat-home,
  body.mobile-discover-open .mobile-discover-home,
  body.mobile-settings-open .mobile-settings-home {
    display: block;
  }

  body.mobile-home-open .mobile-life-home {
    display: grid;
  }

  .mobile-discover-home .mobile-home-titlebar,
  .mobile-settings-home .mobile-home-titlebar {
    display: none;
  }

  .mobile-discover-home,
  .mobile-settings-home {
    background:
      radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--theme-wallet-a) 46%, transparent), transparent 34%),
      radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--theme-wallet-b) 32%, transparent), transparent 36%),
      linear-gradient(180deg, var(--theme-bg) 0%, color-mix(in srgb, var(--theme-bg) 88%, #eef1f6 12%) 56%, #eef1f6 100%);
  }

  .mobile-discover-home {
    padding-top: calc(8px + env(safe-area-inset-top));
  }

  .mobile-settings-home {
    padding-top: 0;
  }

  body.mobile-home-open .mobile-chat-home {
    display: none;
  }

  .mobile-life-home {
    display: none;
    align-content: start;
    gap: 12px;
    padding-top: 12px;
  }

  .mobile-home-dashboard {
    display: grid;
    align-content: start;
    gap: 12px;
  }

  .mobile-home-dashboard[hidden] {
    display: none;
  }

  .mobile-home-brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
    padding: 0 2px 2px;
    color: var(--mr-muted, #747b8c);
  }

  .mobile-home-brand span {
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-home-brand strong {
    color: var(--mr-ink, #202436);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: 0;
  }

  .mobile-glass-surface,
  .mobile-life-home .mobile-calendar-card,
  .mobile-life-home .mobile-calendar-detail,
  .mobile-life-home .mobile-home-tile,
  .mobile-days-row {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 10px 26px rgba(31, 36, 54, 0.055);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    backdrop-filter: blur(18px) saturate(1.08);
  }

  .mobile-home-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0 14px;
  }

  .mobile-home-titlebar h2 {
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
  }

  .mobile-section-kicker {
    margin: 0 0 4px;
    color: var(--quiet);
    font-size: 12px;
    font-weight: 660;
    letter-spacing: 0;
  }

  .mobile-avatar-entry {
    min-width: 52px;
    min-height: 34px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 660;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .mobile-days-card,
  .mobile-note-card,
  .mobile-calendar-card,
  .mobile-home-tile,
  .mobile-discover-row,
  .mobile-settings-row {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(209, 214, 226, 0.78);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(29, 35, 55, 0.07);
  }

  .mobile-days-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .mobile-days-row {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 4px;
    min-height: 68px;
    padding: 12px 13px;
    border-radius: 14px;
  }

  .mobile-days-row::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 9px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.74), rgba(213, 229, 248, 0.24) 62%, transparent 70%);
    opacity: 0.75;
    pointer-events: none;
  }

  .mobile-days-row span,
  .mobile-days-row em,
  .mobile-note-kicker,
  .mobile-calendar-card span,
  .mobile-home-tile em,
  .mobile-discover-row em,
  .mobile-settings-row span {
    color: var(--muted);
    font-style: normal;
    font-size: 13px;
  }

  .mobile-days-row strong,
  .mobile-calendar-card strong,
  .mobile-home-tile strong,
  .mobile-discover-row strong,
  .mobile-settings-row strong {
    min-width: 0;
    font-size: 15px;
    font-weight: 680;
    line-height: 1.25;
  }

  .mobile-days-row em {
    justify-self: start;
    padding: 2px 8px;
    color: #6e777f;
    background: rgba(247, 249, 252, 0.76);
    border-radius: 999px;
  }

  .mobile-appearance-entry,
  .mobile-theme-entry {
    gap: 8px;
  }

  .mobile-appearance-options,
  .mobile-theme-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    margin: 2px 0 0;
    font-style: normal;
  }

  .mobile-appearance-options i,
  .mobile-theme-swatches i {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(226, 224, 245, 0.78));
    color: #5f6574;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(191, 197, 214, 0.45);
  }

  .mobile-appearance-options i.is-active {
    color: #1c2234;
    background: linear-gradient(135deg, rgba(233, 229, 255, 0.96), rgba(221, 242, 238, 0.88));
    box-shadow: inset 0 0 0 1px rgba(138, 121, 210, 0.28);
  }

  .mobile-note-card {
    position: relative;
    overflow: visible;
    display: grid;
    min-height: 96px;
    padding: 0;
    border: 0;
    border-radius: var(--mr-radius-lg, 22px);
    background: transparent;
    box-shadow: none;
  }

  .mobile-note-card::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    z-index: 2;
    width: 74px;
    height: 18px;
    border: 1px solid rgba(216, 165, 184, 0.24);
    border-radius: var(--mr-radius-pill, 999px);
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0.36)),
      rgba(244, 227, 234, 0.66);
    box-shadow: 0 5px 12px rgba(58, 76, 112, 0.08);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .mobile-note-paper {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--mr-gap-sm, 8px);
    min-height: 96px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(216, 165, 184, 0.34);
    border-radius: var(--mr-radius-lg, 22px);
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.58), transparent 42%),
      linear-gradient(135deg, rgba(222, 242, 244, 0.14), rgba(232, 226, 255, 0.3) 76%, transparent),
      repeating-linear-gradient(180deg, transparent 0 25px, rgba(184, 203, 232, 0.14) 26px 27px),
      linear-gradient(135deg, var(--mr-moon-white, #f8fbff), var(--mr-rose-soft, #f4e3ea) 78%, var(--mr-bg-warm, #fbf8f6));
    box-shadow:
      var(--mr-shadow-soft, 0 12px 32px rgba(58, 76, 112, 0.10)),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  .mobile-note-paper::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 34px;
    height: 34px;
    background:
      linear-gradient(135deg, rgba(216, 165, 184, 0.04) 0 48%, rgba(184, 203, 232, 0.34) 49% 52%, rgba(255, 255, 255, 0.68) 53% 100%);
    box-shadow: -6px -5px 14px rgba(58, 76, 112, 0.06);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
  }

  .mobile-note-kicker {
    color: var(--mr-rose-deep, #b96f8b);
    font-weight: 720;
  }

  .mobile-note-card p {
    margin: 0;
    max-width: 22em;
    color: var(--mr-ink, #202436);
    font-size: 15px;
    line-height: 1.58;
  }

  .mobile-note-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mr-gap-sm, 8px);
    margin-top: 2px;
  }

  .mobile-note-push-button {
    min-height: 32px;
    padding: 5px 12px;
    color: #5e6f93;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid rgba(184, 203, 232, 0.44);
    border-radius: var(--mr-radius-pill, 999px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    cursor: pointer;
  }

  .mobile-note-push-button:disabled {
    color: var(--mr-quiet, #9aa2b3);
    cursor: wait;
    opacity: 0.78;
  }

  .mobile-note-hint {
    flex: 1 1 100%;
    margin: 0;
    color: var(--mr-muted, #747b8c);
    font-size: 12px;
    line-height: 1.5;
  }

  .mobile-calendar-card {
    display: grid;
    gap: 13px;
    min-height: 0;
    padding: 16px;
    border-radius: 16px;
  }

  .mobile-diary-books {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mobile-diary-book {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: end;
    gap: 6px;
    min-height: 148px;
    padding: 16px;
    color: var(--mr-ink, #202436);
    text-align: left;
    background:
      radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.72), transparent 18%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(236, 244, 255, 0.72) 58%, rgba(244, 227, 234, 0.72));
    border: 1px solid rgba(184, 203, 232, 0.42);
    border-radius: var(--mr-radius-lg, 22px);
    box-shadow: var(--mr-shadow-card, 0 8px 24px rgba(58, 76, 112, 0.08));
  }

  .mobile-diary-book::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: linear-gradient(180deg, rgba(216, 165, 184, 0.62), rgba(184, 203, 232, 0.56));
  }

  .mobile-diary-book::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 15px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 32%, #fff, rgba(220, 236, 255, 0.82) 56%, transparent 70%);
    opacity: 0.72;
    pointer-events: none;
  }

  .mobile-diary-book--guyanshen {
    background:
      radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.72), transparent 18%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(239, 236, 251, 0.72) 58%, rgba(246, 238, 244, 0.7));
  }

  .mobile-diary-book-kicker,
  .mobile-diary-book em {
    position: relative;
    z-index: 1;
    color: var(--mr-muted, #747b8c);
    font-style: normal;
    font-size: 13px;
    line-height: 1.35;
  }

  .mobile-diary-book strong {
    position: relative;
    z-index: 1;
    font-size: 23px;
    font-weight: 720;
    line-height: 1.05;
  }

  .mobile-calendar-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
  }

  .mobile-calendar-summary strong {
    text-align: center;
  }

  .mobile-calendar-summary em {
    color: var(--muted);
    font-style: normal;
    font-size: 13px;
    white-space: nowrap;
  }

  .mobile-calendar-summary[aria-expanded="false"]::after {
    content: "";
    justify-self: end;
    width: 8px;
    height: 8px;
    border: solid rgba(32, 36, 54, 0.42);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .mobile-calendar-summary[aria-expanded="true"]::after {
    content: "";
    justify-self: end;
    width: 8px;
    height: 8px;
    border: solid rgba(32, 36, 54, 0.42);
    border-width: 2px 0 0 2px;
    transform: rotate(45deg);
  }

  .mobile-calendar-body {
    display: grid;
    gap: 13px;
  }

  .mobile-calendar-body[hidden] {
    display: none;
  }

  .mobile-calendar-card p {
    margin: 0;
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.58;
  }

  .mobile-calendar-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .mobile-calendar-kicker,
  .mobile-calendar-head em {
    color: var(--muted);
    font-style: normal;
    font-size: 13px;
  }

  .mobile-calendar-month-controls strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }

  .mobile-calendar-month-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
  }

  .mobile-calendar-month-controls button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: rgba(32, 36, 54, 0.52);
    background: rgba(246, 247, 251, 0.72);
    border: 1px solid rgba(218, 223, 236, 0.7);
    border-radius: 999px;
  }

  .mobile-calendar-month-controls span {
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 720;
    text-align: center;
  }

  .mobile-diary-page {
    display: grid;
    align-content: start;
    gap: 12px;
  }

  .mobile-diary-page[hidden] {
    display: none;
  }

  .mobile-diary-back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 10px;
    color: var(--mr-muted, #747b8c);
    font-size: 13px;
    font-weight: 720;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(184, 203, 232, 0.42);
    border-radius: var(--mr-radius-pill, 999px);
  }

  .mobile-diary-back svg {
    width: 17px;
    height: 17px;
  }

  .mobile-diary-shell {
    display: grid;
    gap: 10px;
    min-height: 360px;
    padding: 22px;
    background:
      radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.78), transparent 18%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(236, 244, 255, 0.68) 58%, rgba(244, 227, 234, 0.62));
    border: 1px solid rgba(184, 203, 232, 0.42);
    border-radius: var(--mr-radius-lg, 22px);
    box-shadow: var(--mr-shadow-soft, 0 12px 32px rgba(58, 76, 112, 0.10));
  }

  .mobile-diary-kicker,
  .mobile-diary-days {
    margin: 0;
    color: var(--mr-muted, #747b8c);
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-diary-shell h2 {
    margin: 0;
    color: var(--mr-ink, #202436);
    font-size: 28px;
    font-weight: 760;
    line-height: 1.12;
  }

  .mobile-diary-entries {
    display: grid;
    gap: 12px;
    margin-top: 14px;
  }

  .mobile-diary-entries p {
    margin: 0;
    color: rgba(32, 36, 54, 0.74);
    font-size: 14.5px;
    line-height: 1.68;
  }

  .mobile-diary-entries p.mobile-diary-empty,
  .mobile-calendar-detail-entries p.mobile-calendar-empty {
    color: rgba(32, 36, 54, 0.54);
    font-weight: 680;
  }

  .mobile-calendar-month-controls button:active,
  .mobile-calendar-grid button:active,
  .mobile-avatar-entry:active,
  .mobile-avatar-card:active,
  .mobile-theme-card:active,
  .mobile-bottom-tab:active,
  .mobile-discover-row:active,
  .mobile-settings-row:active,
  .mobile-room-row:active {
    transform: translateY(1px);
    opacity: 0.86;
  }

  .mobile-calendar-month-controls svg {
    width: 16px;
    height: 16px;
  }

  .mobile-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-calendar-grid button {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    color: rgba(32, 36, 54, 0.68);
    font-size: 10px;
    font-weight: 700;
    background: rgba(241, 243, 248, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 8px;
  }

  .mobile-calendar-grid button.has-birthday {
    box-shadow: inset 0 0 0 1px rgba(174, 151, 211, 0.24), 0 10px 18px rgba(31, 36, 54, 0.08);
  }

  .mobile-calendar-cake {
    position: absolute;
    right: 5px;
    top: 5px;
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    color: rgba(32, 36, 54, 0.46);
    pointer-events: none;
  }

  .mobile-calendar-cake svg {
    width: 13px;
    height: 13px;
  }

  .mobile-calendar-cake path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-calendar-grid .mood-sage { background: #dbe4d6; }
  .mobile-calendar-grid .mood-lilac { background: #ddd8ea; }
  .mobile-calendar-grid .mood-mist { background: #d9e5e7; }
  .mobile-calendar-grid .mood-rose { background: #ead8dd; }
  .mobile-calendar-grid .mood-blue { background: #d6deee; }

  .mobile-calendar-grid .mood-duo {
    background: linear-gradient(135deg, #ead8dd 0 50%, #ddd8ea 50% 100%);
  }

  .mobile-calendar-grid .is-today {
    color: rgba(35, 42, 66, 0.86);
    background:
      linear-gradient(135deg, rgba(232, 243, 250, 0.8), rgba(224, 228, 246, 0.68));
    border-color: rgba(150, 170, 218, 0.36);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 6px 12px rgba(93, 112, 154, 0.08);
  }

  .mobile-calendar-grid button[aria-pressed="true"] {
    outline: 2px solid rgba(173, 130, 18, 0.9);
    outline-offset: 1px;
  }

  .mobile-calendar-detail {
    display: grid;
    min-height: 42px;
    padding: 2px 2px 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .mobile-calendar-detail[hidden] {
    display: none;
  }

  .mobile-calendar-detail.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-calendar-detail.is-hiding {
    opacity: 0;
    transform: translateY(6px);
  }

  .mobile-calendar-detail-entries {
    display: grid;
    gap: 4px;
  }

  .mobile-calendar-detail-entries section {
    min-width: 0;
  }

  .mobile-calendar-detail-entries p {
    margin: 0;
    color: rgba(32, 36, 54, 0.76);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
  }

  .mobile-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mobile-home-tile {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 4px 10px;
    min-height: 74px;
    padding: 12px;
    text-align: left;
  }

  .mobile-home-tile strong {
    align-self: end;
  }

  .mobile-home-tile em {
    grid-column: 2;
    align-self: start;
  }

  .mobile-home-tile span,
  .mobile-discover-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 760;
    background:
      linear-gradient(135deg, rgba(32, 36, 54, 0.98), rgba(56, 61, 84, 0.92)),
      linear-gradient(135deg, rgba(222, 242, 244, 0.24), rgba(232, 226, 255, 0.22));
    border-radius: 10px;
  }

  .mobile-discover-list,
  .mobile-settings-list {
    display: grid;
    margin: 0 -18px;
    padding: 10px 18px;
    overflow: hidden;
    background:
      linear-gradient(135deg, var(--theme-glass-highlight), rgba(250, 251, 255, 0.36)),
      radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--theme-wallet-a) 38%, transparent), transparent 36%),
      radial-gradient(circle at 100% 28%, color-mix(in srgb, var(--theme-wallet-b) 28%, transparent), transparent 40%);
    border: solid color-mix(in srgb, var(--theme-line) 58%, rgba(255, 255, 255, 0.58));
    border-width: 1px 0;
    border-radius: 24px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(255, 255, 255, 0.36),
      0 18px 36px rgba(31, 36, 54, 0.04);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }

  .mobile-discover-row,
  .mobile-settings-row {
    position: relative;
    display: grid;
    align-items: center;
    gap: 4px 12px;
    min-height: 74px;
    padding: 15px 2px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-discover-row {
    grid-template-columns: 42px minmax(0, 1fr) 20px;
  }

  .mobile-discover-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .mobile-discover-icon {
    position: relative;
    overflow: hidden;
    color: #31364c;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
      inset 0 0 0 1px rgba(203, 209, 225, 0.56),
      0 8px 18px rgba(31, 36, 54, 0.06);
  }

  .mobile-discover-icon svg {
    width: 21px;
    height: 21px;
  }

  .mobile-discover-icon--moments {
    background: linear-gradient(135deg, rgba(225, 244, 240, 0.92), rgba(236, 234, 252, 0.72));
  }

  .mobile-discover-icon--wallet {
    background: linear-gradient(135deg, rgba(242, 244, 236, 0.95), rgba(226, 242, 238, 0.78));
  }

  .mobile-discover-icon--memory {
    background: linear-gradient(135deg, rgba(239, 236, 251, 0.92), rgba(246, 240, 244, 0.78));
  }

  .mobile-discover-icon--diary {
    background: linear-gradient(135deg, rgba(224, 244, 241, 0.9), rgba(231, 237, 250, 0.74));
  }

  .mobile-discover-icon--diary-g {
    background: linear-gradient(135deg, rgba(238, 235, 252, 0.9), rgba(246, 238, 244, 0.72));
  }

  .mobile-settings-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 136px;
    margin: 0 -18px 0;
    padding: 22px 24px;
    overflow: hidden;
    color: var(--theme-wallet-ink);
    background:
      radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.72), transparent 13%),
      radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--theme-wallet-b) 38%, transparent), transparent 36%),
      radial-gradient(circle at 0% 74%, color-mix(in srgb, var(--theme-wallet-a) 34%, transparent), transparent 40%),
      linear-gradient(135deg, var(--theme-glass-highlight), rgba(250, 251, 255, 0.34));
    border: solid color-mix(in srgb, var(--theme-line) 54%, rgba(255, 255, 255, 0.6));
    border-width: 1px 0;
    border-radius: 24px 24px 16px 16px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(255, 255, 255, 0.34),
      0 20px 42px rgba(31, 36, 54, 0.045);
    -webkit-backdrop-filter: blur(22px) saturate(1.08);
    backdrop-filter: blur(22px) saturate(1.08);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }

  .mobile-settings-list {
    margin-top: -10px;
    padding-top: 18px;
    border-radius: 16px 16px 24px 24px;
  }

  .mobile-settings-hero span {
    position: relative;
    z-index: 2;
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .mobile-settings-hero-moon,
  .mobile-settings-hero-orbit {
    position: absolute;
    pointer-events: none;
  }

  .mobile-settings-hero-moon {
    right: 48px;
    top: 26px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
      -15px 3px 0 color-mix(in srgb, var(--theme-wallet-a) 76%, var(--theme-surface) 24%),
      0 12px 28px rgba(86, 100, 142, 0.1);
    opacity: 0.82;
  }

  .mobile-settings-hero-orbit {
    right: 22px;
    top: 40px;
    width: 120px;
    height: 56px;
    border-top: 1px solid color-mix(in srgb, var(--theme-deep-accent) 28%, transparent);
    border-radius: 50%;
    transform: rotate(-14deg);
    opacity: 0.42;
  }

  .mobile-avatar-settings[hidden],
  .mobile-external-settings[hidden],
  .mobile-theme-settings[hidden] {
    display: none;
  }

  .mobile-settings-home.mobile-avatar-settings-open .mobile-settings-hero,
  .mobile-settings-home.mobile-avatar-settings-open .mobile-settings-list,
  .mobile-settings-home.mobile-external-settings-open .mobile-settings-hero,
  .mobile-settings-home.mobile-external-settings-open .mobile-settings-list,
  .mobile-settings-home.mobile-theme-settings-open .mobile-settings-hero,
  .mobile-settings-home.mobile-theme-settings-open .mobile-settings-list {
    display: none;
  }

  .mobile-avatar-settings,
  .mobile-external-settings,
  .mobile-theme-settings {
    display: grid;
    gap: 14px;
  }

  .mobile-avatar-settings-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    min-height: 44px;
    margin: -6px 0 2px;
  }

  .mobile-avatar-settings-head strong {
    justify-self: center;
    color: var(--ink);
    font-size: 18px;
    font-weight: 720;
  }

  .mobile-avatar-back {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
  }

  .mobile-avatar-back svg {
    width: 22px;
    height: 22px;
  }

  .mobile-external-note {
    margin: 0;
    color: rgba(37, 42, 58, 0.74);
    font-size: 13.5px;
    line-height: 1.55;
  }

  .mobile-external-type-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 0;
  }

  .mobile-external-type-strip span {
    padding: 5px 10px;
    color: #4f637f;
    font-size: 12.5px;
    font-weight: 700;
    background: rgba(236, 242, 250, 0.84);
    border: 1px solid rgba(209, 214, 226, 0.62);
    border-radius: 999px;
  }

  .mobile-external-note {
    padding: 0 2px;
    color: var(--muted);
  }

  .mobile-external-list-wrap,
  .mobile-external-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(209, 214, 226, 0.64);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(29, 35, 55, 0.045);
  }

  .mobile-external-section-head {
    display: grid;
    gap: 3px;
  }

  .mobile-external-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px 0;
    cursor: pointer;
  }

  .mobile-external-toggle[aria-expanded="true"] span::before {
    content: '▾ ';
  }

  .mobile-external-toggle[aria-expanded="false"] span::before {
    content: '▸ ';
  }

  .mobile-external-section-head strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.25;
  }

  .mobile-external-section-head span {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
  }

  .mobile-external-connection-list[hidden] {
    display: none;
  }

  .mobile-external-connection-list,
  .mobile-external-group {
    display: grid;
    gap: 9px;
  }

  .mobile-external-group > strong {
    color: #6a7486;
    font-size: 12px;
    font-weight: 760;
  }

  .mobile-external-group > p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }

  .mobile-external-connection {
    display: grid;
    gap: 5px;
    padding: 10px;
    background: rgba(248, 250, 253, 0.82);
    border: 1px solid rgba(219, 224, 236, 0.72);
    border-radius: 11px;
  }

  .mobile-external-connection div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .mobile-external-connection b {
    min-width: 0;
    overflow: hidden;
    color: #536a93;
    font-size: 14px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-external-connection em,
  .mobile-external-connection i {
    color: #667085;
    font-size: 12px;
    font-style: normal;
  }

  .mobile-external-connection span {
    min-width: 0;
    overflow: hidden;
    color: rgba(37, 42, 58, 0.74);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-external-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid rgba(219, 224, 236, 0.45);
    margin-top: 4px;
  }

  .mobile-external-edit,
  .mobile-external-delete {
    border: 0;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .mobile-external-edit {
    background: rgba(83, 106, 147, 0.12);
    color: #536a93;
  }

  .mobile-external-delete {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
  }

  .mobile-external-form label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
  }

  .mobile-external-form input,
  .mobile-external-form select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    color: var(--ink);
    font: inherit;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(209, 214, 226, 0.86);
    border-radius: 10px;
  }

  .mobile-external-form button {
    min-height: 42px;
    color: #263044;
    font-size: 14px;
    font-weight: 760;
    background: linear-gradient(135deg, rgba(225, 244, 240, 0.94), rgba(236, 234, 252, 0.86));
    border: 1px solid rgba(174, 185, 211, 0.48);
    border-radius: 11px;
  }

  .mobile-avatar-preview-list {
    display: grid;
    margin: 0 -18px;
    padding: 8px 18px;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(250, 251, 255, 0.34)),
      linear-gradient(135deg, rgba(224, 244, 241, 0.22), rgba(232, 226, 255, 0.18));
    border: solid rgba(255, 255, 255, 0.52);
    border-width: 1px 0;
    border-radius: 18px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(255, 255, 255, 0.4),
      0 16px 34px rgba(31, 36, 54, 0.045);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }

  .mobile-avatar-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 13px 2px;
    color: var(--ink);
    text-align: left;
    background: transparent;
    border: 0;
  }

  .mobile-avatar-card::after {
    content: "";
    position: absolute;
    left: 58px;
    right: -18px;
    bottom: 0;
    height: 1px;
    background: rgba(184, 191, 211, 0.2);
    pointer-events: none;
  }

  .mobile-avatar-card:last-child::after {
    display: none;
  }

  .mobile-avatar-card span:not(.room-avatar) {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .mobile-avatar-card strong {
    min-width: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.25;
  }

  .mobile-avatar-card em,
  .mobile-avatar-card i {
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
  }

  .mobile-avatar-card i {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 0 0 1px rgba(191, 197, 214, 0.36);
  }

  .mobile-avatar-card.is-custom i {
    color: #5f6b85;
    background: rgba(225, 240, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(168, 197, 255, 0.42);
  }

  .mobile-theme-grid {
    display: grid;
    gap: 12px;
    margin: 0 -18px;
    padding: 10px 18px;
  }

  .mobile-theme-card {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: center;
    min-height: 88px;
    padding: 14px;
    color: var(--ink);
    text-align: left;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(250, 251, 255, 0.42)),
      linear-gradient(135deg, rgba(224, 244, 241, 0.2), rgba(232, 226, 255, 0.18));
    border: 1px solid rgba(212, 218, 232, 0.46);
    border-radius: 18px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 14px 28px rgba(31, 36, 54, 0.05);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    backdrop-filter: blur(18px) saturate(1.05);
  }

  .mobile-theme-card::after {
    content: "当前使用";
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    color: rgba(81, 87, 122, 0.78);
    font-size: 11px;
    font-weight: 640;
    line-height: 1;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(205, 214, 232, 0.54);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
  }

  .mobile-theme-card.is-active {
    border-color: rgba(126, 114, 220, 0.42);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 14px 30px rgba(105, 98, 170, 0.11);
  }

  .mobile-theme-card.is-active::after {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-theme-preview {
    position: relative;
    grid-row: 1 / span 2;
    overflow: hidden;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.72),
      0 10px 18px rgba(31, 36, 54, 0.06);
  }

  .mobile-theme-preview::before,
  .mobile-theme-preview::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  .mobile-theme-preview::before {
    top: 12px;
    height: 6px;
    opacity: 0.72;
  }

  .mobile-theme-preview::after {
    bottom: 12px;
    height: 20px;
    border-radius: 8px;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.48));
  }

  .mobile-theme-preview--moon-rose {
    background:
      radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.95) 0 18%, transparent 19%),
      linear-gradient(135deg, #e1f0ff, #d4e9ff 38%, #c4daff 68%, #a8c5ff);
  }

  .mobile-theme-preview--plain {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 250, 0.82)),
      linear-gradient(135deg, #eef7f5, #f4f5fb);
  }

  .mobile-theme-preview--festival {
    background:
      radial-gradient(circle at 72% 26%, rgba(255, 255, 255, 0.9) 0 12%, transparent 13%),
      linear-gradient(135deg, #eef6ff, #f1eefe 45%, #f8efe8);
  }

  .mobile-theme-card strong {
    align-self: end;
    color: var(--ink);
    font-size: 16px;
    font-weight: 720;
  }

  .mobile-theme-card em,
  .mobile-theme-note {
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
  }

  .mobile-theme-note {
    margin: 0;
    padding: 0 2px;
    line-height: 1.6;
  }

  .mobile-theme-swatches i.is-active {
    color: rgba(83, 88, 146, 0.94);
    background: rgba(226, 240, 255, 0.78);
    box-shadow:
      inset 0 0 0 1px rgba(168, 197, 255, 0.35),
      0 6px 14px rgba(68, 76, 134, 0.06);
  }

  .mobile-discover-chevron {
    display: grid;
    place-items: center;
    color: rgba(92, 100, 122, 0.48);
  }

  .mobile-discover-chevron svg {
    width: 17px;
    height: 17px;
  }

  .mobile-discover-row::after,
  .mobile-settings-row::after,
  .mobile-room-row::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: 0;
    height: 1px;
    background: rgba(184, 191, 211, 0.2);
    pointer-events: none;
  }

  .mobile-discover-row::after {
    left: 56px;
  }

  .mobile-settings-row::after {
    left: 0;
  }

  .mobile-room-row::after {
    left: 60px;
  }

  .mobile-discover-row:last-child::after,
  .mobile-settings-row:last-child::after,
  .mobile-room-row:last-child::after {
    display: none;
  }

  .mobile-settings-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-settings-list--unified .mobile-settings-row {
    min-height: 70px;
  }

  .mobile-search-field {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin-bottom: 12px;
    padding: 0 14px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(209, 214, 226, 0.88);
    border-radius: 10px;
  }

  .mobile-search-field svg {
    width: 19px;
    height: 19px;
  }

  .mobile-search-field input {
    min-width: 0;
    color: var(--muted);
    font-size: 16px;
    background: transparent;
    border: 0;
    outline: 0;
    -webkit-text-fill-color: var(--muted);
    opacity: 1;
  }

  .mobile-conversation-list {
    display: grid;
    gap: 0;
    margin: 0 -18px;
    padding: 0 18px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .mobile-room-row {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 2px;
    color: var(--ink);
    text-align: left;
    background: transparent;
    border: 0;
  }

  .mobile-room-row.active {
    background: linear-gradient(90deg, rgba(232, 226, 255, 0.16), rgba(236, 248, 246, 0.08));
  }

  .room-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 760;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(29, 35, 55, 0.14);
  }

  .room-avatar--yechenyi {
    color: transparent;
    text-shadow: none;
    background: var(--avatar-yechenyi-bg,
      linear-gradient(rgba(20, 24, 36, 0.02), rgba(20, 24, 36, 0.02)),
      url("../assets/avatars/yechenyi-avatar.jpg") center 24% / cover no-repeat);
  }

  .room-avatar--guyanshen {
    color: transparent;
    text-shadow: none;
    background: var(--avatar-guyanshen-bg,
      linear-gradient(rgba(20, 24, 36, 0.02), rgba(20, 24, 36, 0.02)),
      url("../assets/avatars/guyanshen-avatar.jpg") center 26% / cover no-repeat);
  }

  .mobile-room-row strong {
    font-weight: 720;
  }

  .room-avatar--shared {
    background: linear-gradient(135deg, #287d75, #c7698b);
  }

  .room-avatar--yechenyi-work {
    font-size: 13px;
    background: linear-gradient(135deg, #17324d, #2563eb);
  }

  .room-avatar--guyanshen-work {
    font-size: 13px;
    background: linear-gradient(135deg, #3a2c59, #7c3aed);
  }

  .room-avatar--project-room {
    background: linear-gradient(135deg, #405a78, #d9a441);
  }

  .mobile-room-row-main {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  .mobile-room-row-main strong,
  .mobile-room-row-main .session-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-room-row-main strong {
    font-size: 16px;
    line-height: 1.2;
  }

  .mobile-room-row-main .session-meta {
    color: var(--muted);
    font-size: 13px;
  }

  .mobile-room-row-time {
    align-self: start;
    margin-top: 4px;
    color: var(--quiet);
    font-size: 12px;
    white-space: nowrap;
  }

  .mobile-room-row .unread-badge {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    justify-self: end;
  }

  .mobile-chat-header {
    display: none;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: calc(54px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 8px 0;
    background: #f1f2f4;
    border-bottom: 1px solid rgba(209, 214, 226, 0.78);
  }

  body.mobile-chat-detail-open .mobile-chat-header {
    display: grid;
  }

  .mobile-chat-header strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chat-back,
  .mobile-chat-more {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--ink);
    background: transparent;
    border: 0;
  }

  .mobile-chat-back svg,
  .mobile-chat-more svg {
    width: 24px;
    height: 24px;
  }

  .message-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .room-context-card {
    margin: 0 16px;
    padding: 10px 12px;
  }

  .room-context-card strong {
    font-size: 14px;
  }

  .room-context-card p {
    font-size: 12px;
  }

  .shared-send-status {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.35;
  }

  .top-bar {
    flex: 0 0 auto;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    padding: calc(12px + env(safe-area-inset-top)) 12px 9px;
  }

  .top-bar h1 {
    font-size: 19px;
  }

  .top-bar p {
    max-width: min(54vw, 260px);
    margin-top: 3px;
    font-size: 12px;
  }

  .mode-button {
    display: none;
  }

  .mood-band,
  .emotion-visual-card,
  .dictionary-editor-card,
  .central-handoff-card,
  .source-provenance-card,
  .write-evidence-card,
  .rollback-preflight-card,
  .private-diary-card,
  .composer {
    margin-right: 16px;
    margin-left: 16px;
  }

  .mood-band {
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
  }

  .emotion-visual-card {
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
  }

  .dictionary-editor-card {
    padding: 12px;
    border-radius: 12px;
  }

  .dictionary-editor-grid {
    grid-template-columns: 1fr;
  }

  .emotion-plot {
    min-height: 150px;
  }

  .visual-header {
    align-items: stretch;
  }

  .mini-bars li {
    grid-template-columns: 1fr;
  }

  .mood-primary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .mood-primary strong {
    font-size: 20px;
  }

  .mobile-heartbeat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 16px 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(29, 35, 55, 0.08);
  }

  .mobile-heartbeat-card span,
  .mobile-heartbeat-card strong {
    display: block;
  }

  .mobile-heartbeat-card span {
    color: var(--quiet);
    font-size: 11px;
    font-weight: 800;
  }

  .mobile-heartbeat-card strong {
    margin-top: 4px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
  }

  .mobile-heartbeat-card button {
    flex: 0 0 auto;
    min-width: 56px;
    min-height: 34px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    background: var(--ink);
    border: 0;
    border-radius: 9px;
  }

  .central-handoff-card,
  .source-provenance-card,
  .write-evidence-card,
  .rollback-preflight-card,
  .private-diary-card {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 0;
    padding: 12px;
    border-radius: 12px;
  }

  .handoff-counts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .evidence-mini-grid div {
    grid-template-columns: minmax(80px, 0.45fr) minmax(0, 1fr);
  }

  .message-list {
    gap: 14px;
    padding: 12px 12px 18px;
    background: #f1f2f4;
  }

  .message,
  .message.user {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .message.user {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .bubble {
    max-width: min(100%, 72ch);
    padding: 12px 14px;
    border-radius: 15px;
  }

  .bubble-content {
    line-height: 1.62;
  }

  .reaction-bar {
    display: none;
  }

  .msg-time {
    opacity: 0.72;
  }

  .bubble .meta-line {
    display: none;
  }

  .composer {
    flex: 0 0 auto;
    position: relative;
    bottom: auto;
    grid-template-columns: 40px minmax(0, 1fr) 42px;
    gap: 9px;
    margin: 0;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(248, 248, 249, 0.98);
    border-width: 1px 0 0;
    border-radius: 0;
  }

  .composer .input-wrap {
    grid-column: 2;
    min-height: 38px;
    border-radius: 8px;
  }

  .composer .ambient-presence {
    grid-column: 2;
    min-height: 14px;
    margin: -2px 2px -2px;
    font-size: 10px;
  }

  .composer textarea {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 16px;
  }

  .send-button {
    grid-column: 3;
    width: 40px;
    min-width: 40px;
    height: 40px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(209, 214, 226, 0.9);
    border-radius: 50%;
  }

  .send-button:not(:disabled):hover {
    background: #ffffff;
    border-color: rgba(190, 198, 214, 0.98);
  }

  .send-button--cancel,
  .send-button--cancel:not(:disabled):hover {
    color: #ffffff;
    background: var(--jade);
    border-color: var(--jade);
  }

  .send-button svg {
    width: 21px;
    height: 21px;
  }

  .mobile-tool-tray-button {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(209, 214, 226, 0.9);
    border-radius: 50%;
  }

  .mobile-tool-tray-button svg {
    width: 22px;
    height: 22px;
  }

  .composer-tools {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 18px 6px 10px;
  }

  body.mobile-tool-tray-open .composer-tools {
    display: grid;
  }

  .composer-tools .tool-button {
    display: grid;
    grid-template-rows: 54px auto;
    place-items: center;
    gap: 5px;
    width: 64px;
    height: 76px;
    justify-self: center;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    border: 0;
    border-radius: 16px;
  }

  .composer-tools .tool-button svg {
    box-sizing: content-box;
    width: 25px;
    height: 25px;
    padding: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(209, 214, 226, 0.85);
    border-radius: 16px;
  }

  .composer-tools .tool-button span {
    display: block;
    color: var(--muted);
    line-height: 1.2;
  }

  body.pwa-standalone .composer {
    padding-bottom: calc(10px + max(env(safe-area-inset-bottom), 8px));
  }

  .mobile-bottom-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    box-sizing: border-box;
    z-index: 170;
    min-height: calc(58px + env(safe-area-inset-bottom));
    padding: 5px 10px calc(5px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(209, 214, 226, 0.92);
    box-shadow: 0 -10px 26px rgba(29, 35, 55, 0.1);
    backdrop-filter: blur(16px);
  }

  body.mobile-chat-detail-open .mobile-bottom-tabs {
    display: none;
  }

  .mobile-bottom-tab {
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    background: transparent;
    border: 0;
  }

  .mobile-bottom-tab svg {
    width: 23px;
    height: 23px;
  }

  .mobile-bottom-tab .mobile-discover-compass {
    width: 24px;
    height: 24px;
    transform: rotate(-8deg);
  }

  .mobile-bottom-tab.active {
    color: var(--accent);
  }

  /* G5 红点 — 底部发现 tab */
  .mobile-bottom-tab {
    position: relative;
  }
  .moments-new-dot {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f44;
    pointer-events: none;
  }
  .moments-new-dot[hidden] { display: none; }

  /* G5 红点 — 发现页朋友圈入口行 */
  .mobile-discover-row .moments-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f44;
    flex-shrink: 0;
    margin-right: 4px;
  }
  .mobile-discover-row .moments-row-dot[hidden] { display: none; }

  body:not(.mobile-chat-detail-open) .mobile-room-strip,
  body:not(.mobile-chat-detail-open) .mobile-heartbeat-card,
  body:not(.mobile-chat-detail-open) .central-handoff-card,
  body:not(.mobile-chat-detail-open) .source-provenance-card,
  body:not(.mobile-chat-detail-open) .write-evidence-card,
  body:not(.mobile-chat-detail-open) .rollback-preflight-card,
  body:not(.mobile-chat-detail-open) .private-diary-card,
  body:not(.mobile-chat-detail-open) .room-context-card,
  body:not(.mobile-chat-detail-open) .message-area,
  body:not(.mobile-chat-detail-open) .markdown-preview-pane,
  body:not(.mobile-chat-detail-open) .reply-preview,
  body:not(.mobile-chat-detail-open) .composer {
    display: none;
  }

  body.keyboard-open .composer {
    box-shadow: 0 -10px 28px rgba(29, 35, 55, 0.12);
  }

  body.keyboard-open .message-list {
    padding-bottom: 10px;
  }

  .composer-tools {
    grid-column: 1 / -1;
    gap: 5px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0;
    scrollbar-width: none;
  }

  .composer-tools::-webkit-scrollbar {
    display: none;
  }

  .keyboard-hint {
    display: none;
  }

  .tool-button {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .composer-tools .tool-button {
    width: 64px;
    height: 76px;
    border-radius: 16px;
  }

  .summon-bar {
    grid-column: 1 / -1;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 12px;
  }

  .summon-button {
    min-height: 30px;
    padding: 0 9px;
  }

  .summon-status {
    flex: 0 1 auto;
    min-width: 92px;
    max-width: 42vw;
  }

  .input-wrap {
    min-width: 0;
  }

  textarea {
    width: 100%;
    min-height: 38px;
    max-height: 108px;
    padding: 8px 2px;
  }

  .send-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .error-notice {
    max-width: calc(100vw - 24px);
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
  }

  .retry-btn {
    flex: 0 0 auto;
    min-width: 64px;
    min-height: 36px;
  }

  .markdown-preview-pane,
  .reply-preview {
    margin-right: 12px;
    margin-left: 12px;
  }

  .quick-reply-panel {
    max-width: calc(100vw - 24px);
    min-width: 210px;
  }
}

@media (max-width: 390px) {
  .top-bar {
    gap: 8px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .top-bar p {
    max-width: 46vw;
  }

  .top-actions {
    max-width: 38vw;
  }

  .icon-button,
  .tool-button {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .home-center-modal,
  .emotion-panel-modal,
  .today-trace-modal,
  .wallets-modal,
  .schedules-modal,
  .stops-modal {
    align-items: end;
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .home-center-dialog,
  .emotion-panel-dialog,
  .today-trace-dialog,
  .wallets-dialog,
  .schedules-dialog,
  .stops-dialog {
    max-height: min(720px, 88dvh);
  }

  .home-center-body,
  .emotion-panel-body,
  .today-trace-body,
  .schedules-body,
  .stops-body {
    padding: 12px;
  }

  .wallets-header {
    min-height: 96px;
    padding: 16px 16px 30px;
  }

  .wallets-body {
    padding: 0 12px 12px;
    margin-top: -18px;
  }

  .wallet-intro-row {
    right: 26px;
    bottom: 22px;
  }

  .home-center-tile,
  .stop-rule-card,
  .schedule-card,
  .wallet-card {
    padding: 11px;
  }

  .stop-rule-grid {
    grid-template-columns: 1fr;
  }

  .wallet-grid {
    gap: 8px;
  }

  .wallet-card {
    min-height: 96px;
    padding: 16px 10px 15px;
  }

  .composer {
    gap: 7px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .summon-bar {
    gap: 6px;
  }

  .summon-button {
    min-height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }

  .summon-status {
    min-width: 72px;
    max-width: 34vw;
    font-size: 11px;
  }

  .handoff-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .handoff-counts span {
    min-height: 42px;
  }

  .rollback-gate-panel button {
    min-height: 38px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   模型与 Prompt 设置弹窗
   ══════════════════════════════════════════════════════════════════════════ */

.settings-modal[hidden] { display: none; }

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 38, 0.5);
  backdrop-filter: blur(2px);
}

.settings-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(20, 24, 38, 0.35);
  overflow: hidden;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.settings-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 22px 0;
}

.settings-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
}

.settings-tab:hover { background: var(--panel-soft); }
.settings-tab.active {
  background: var(--moon-soft);
  color: var(--moon);
}

.settings-scope-hint {
  margin: 0;
  padding: 9px 22px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 10px;
}

.settings-select,
.settings-input,
.settings-textarea {
  width: 100%;
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}

.settings-select:focus,
.settings-input:focus,
.settings-textarea:focus {
  border-color: var(--moon);
}

.settings-textarea {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 180px;
  white-space: pre-wrap;
}

.settings-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.settings-hint--note {
  color: var(--moon);
  background: var(--moon-soft);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.settings-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-link-button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--moon);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  font-weight: 600;
}

.settings-link-button:hover { text-decoration: underline; }

.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}

.settings-actions {
  display: flex;
  gap: 8px;
}

.settings-button {
  appearance: none;
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

.settings-button:hover { filter: brightness(1.05); }
.settings-button:active { transform: translateY(1px); }
.settings-button:disabled { opacity: 0.5; cursor: not-allowed; }

.settings-button--ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

.settings-button--primary {
  background: var(--ink);
  color: #fff;
}

[data-type='error'] { color: var(--rose); }

body.settings-open { overflow: hidden; }

@media (max-width: 680px) {
  .settings-modal { padding: 12px; }
  .settings-dialog { max-height: calc(100vh - 24px); }
  .settings-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 10px 14px 0;
  }
  .settings-tab {
    min-height: 40px;
    padding: 8px 10px;
  }
  .settings-row { grid-template-columns: 1fr; }
  .settings-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  .settings-footer #settingsStatus {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .settings-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .settings-button {
    min-height: 44px;
  }
}


/* Keyboard help modal */
.kb-help-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kb-help-modal[hidden] { display: none; }
.kb-help-inner {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 32px 24px;
  min-width: 320px;
  max-width: 420px;
  width: calc(100% - 32px);
}
.kb-help-title {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.kb-help-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kb-help-row { display: flex; align-items: center; gap: 12px; }
.kb-help-row dt { display: flex; align-items: center; gap: 4px; min-width: 140px; flex-shrink: 0; }
.kb-help-row dd { margin: 0; color: var(--muted); font-size: 13px; }
.kb-help-row dt span { color: var(--quiet); font-size: 12px; }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.kb-help-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
}
.kb-help-close:hover { background: var(--panel-soft); color: var(--ink); }

/* Dark theme mobile shell: keep phone surfaces readable instead of translucent. */
[data-theme="dark"] .chat-stage {
  background:
    linear-gradient(180deg, #171923 0%, #1c1f2b 46%, #171923 100%),
    radial-gradient(circle at 18% 4%, rgba(124, 121, 189, 0.18), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(40, 125, 117, 0.12), transparent 28%);
}

[data-theme="dark"] .side-rail,
[data-theme="dark"] .state-panel {
  color: #e8ecf5;
  background: #171923;
  border-color: #343a50;
}

[data-theme="dark"] .side-rail .brand-lockup,
[data-theme="dark"] .side-rail .session-item,
[data-theme="dark"] .side-rail .rail-footer {
  color: #e8ecf5;
}

[data-theme="dark"] .side-rail .brand-lockup span,
[data-theme="dark"] .side-rail .session-meta,
[data-theme="dark"] .side-rail .rail-footer span {
  color: #aeb6c8;
}

[data-theme="dark"] .side-rail .brand-mark {
  color: #ffffff;
  background: #262c42;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .side-rail .session-item:hover {
  background: #242a3e;
  border-color: #353c55;
}

[data-theme="dark"] .side-rail .session-item.active {
  color: #ffffff;
  background: #252b40;
  border-color: #46506d;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .side-rail .session-item.active .session-meta {
  color: #b8c0d2;
}

[data-theme="dark"] .endpoint-badge--local {
  color: #a2ded6;
  background: rgba(58, 168, 158, 0.14);
}

[data-theme="dark"] .state-panel section {
  color: #e8ecf5;
  background: #202538;
  border-color: #343b55;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .state-panel input,
[data-theme="dark"] .state-panel button {
  color: #e8ecf5;
  background: #252b40;
  border-color: #3d4662;
}

[data-theme="dark"] .top-bar,
[data-theme="dark"] .chat-stage,
[data-theme="dark"] .mobile-chat-header,
[data-theme="dark"] .composer,
[data-theme="dark"] .mobile-room-strip,
[data-theme="dark"] .message-list {
  background: #171b28;
}

[data-theme="dark"] .mobile-days-card,
[data-theme="dark"] .mobile-note-card,
[data-theme="dark"] .mobile-calendar-card,
[data-theme="dark"] .mobile-home-tile,
[data-theme="dark"] .mobile-discover-row,
[data-theme="dark"] .mobile-settings-row,
[data-theme="dark"] .mobile-discover-list,
[data-theme="dark"] .mobile-settings-list,
[data-theme="dark"] .mobile-conversation-list,
[data-theme="dark"] .mobile-search-field,
[data-theme="dark"] .mobile-avatar-entry,
[data-theme="dark"] .mobile-bottom-tabs {
  color: #e8ecf5;
  background: #202538;
  border-color: #343b55;
}

[data-theme="dark"] .mobile-days-card {
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] .mobile-days-row {
  color: #e8ecf5;
  background: rgba(32, 37, 56, 0.72);
  border-color: rgba(86, 94, 125, 0.42);
}

[data-theme="dark"] .mobile-days-row em {
  color: #c0c7d7;
  background: #2a3043;
}

[data-theme="dark"] .mobile-appearance-options i,
[data-theme="dark"] .mobile-theme-swatches i {
  color: #d8deee;
  background: linear-gradient(135deg, rgba(43, 49, 72, 0.96), rgba(65, 60, 88, 0.86));
  box-shadow: inset 0 0 0 1px rgba(118, 128, 166, 0.36);
}

[data-theme="dark"] .mobile-appearance-options i.is-active {
  color: #f8fbff;
  background: linear-gradient(135deg, rgba(104, 98, 150, 0.9), rgba(65, 98, 100, 0.76));
  box-shadow: inset 0 0 0 1px rgba(182, 190, 230, 0.32);
}

[data-theme="dark"] .mobile-life-home .mobile-calendar-card,
[data-theme="dark"] .mobile-life-home .mobile-calendar-detail,
[data-theme="dark"] .mobile-life-home .mobile-home-tile {
  background: rgba(32, 37, 56, 0.72);
  border-color: rgba(86, 94, 125, 0.42);
}

[data-theme="dark"] .mobile-note-card {
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] .mobile-note-card::before {
  border-color: rgba(216, 165, 184, 0.2);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0.08)),
    rgba(92, 85, 104, 0.66);
}

[data-theme="dark"] .mobile-note-paper {
  color: #edf0f7;
  border-color: rgba(216, 165, 184, 0.18);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(135deg, #202538, #252b41 58%, #302938);
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-note-kicker {
  color: #e3b7c7;
}

[data-theme="dark"] .mobile-note-card p {
  color: #eef1f7;
}

[data-theme="dark"] .mobile-note-push-button {
  color: #d9e3f5;
  background: rgba(42, 48, 70, 0.72);
  border-color: rgba(132, 151, 190, 0.34);
}

[data-theme="dark"] .mobile-note-hint {
  color: #b9c1d4;
}

[data-theme="dark"] .mobile-calendar-grid button {
  color: rgba(232, 236, 245, 0.68);
  background: rgba(48, 54, 76, 0.74);
  border-color: rgba(103, 111, 144, 0.28);
}

[data-theme="dark"] .mobile-calendar-grid .mood-sage { background: #586653; }
[data-theme="dark"] .mobile-calendar-grid .mood-lilac { background: #5d5871; }
[data-theme="dark"] .mobile-calendar-grid .mood-mist { background: #4f6268; }
[data-theme="dark"] .mobile-calendar-grid .mood-rose { background: #6c5660; }
[data-theme="dark"] .mobile-calendar-grid .mood-blue { background: #536176; }

[data-theme="dark"] .mobile-calendar-grid .mood-duo {
  background: linear-gradient(135deg, #6c5660 0 50%, #5d5871 50% 100%);
}

[data-theme="dark"] .mobile-calendar-grid .is-today {
  color: rgba(238, 243, 252, 0.86);
  background: linear-gradient(135deg, rgba(74, 94, 119, 0.7), rgba(82, 78, 112, 0.58));
  border-color: rgba(175, 190, 226, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .mobile-calendar-month-controls button {
  color: rgba(232, 236, 245, 0.7);
  background: rgba(48, 54, 76, 0.56);
  border-color: rgba(103, 111, 144, 0.3);
}

[data-theme="dark"] .mobile-calendar-cake {
  color: rgba(232, 236, 245, 0.62);
}

[data-theme="dark"] .mobile-calendar-detail-entries p {
  color: rgba(232, 236, 245, 0.78);
}

[data-theme="dark"] .mobile-discover-home,
[data-theme="dark"] .mobile-settings-home {
  background:
    radial-gradient(circle at 14% 0%, rgba(63, 92, 90, 0.28), transparent 36%),
    radial-gradient(circle at 92% 10%, rgba(79, 70, 110, 0.26), transparent 38%),
    linear-gradient(180deg, #171b28 0%, #191e2d 58%, #151927 100%);
}

[data-theme="dark"] .mobile-discover-icon {
  color: #e8ecf5;
  background: rgba(40, 46, 68, 0.84);
  box-shadow: inset 0 0 0 1px rgba(103, 111, 144, 0.34);
}

[data-theme="dark"] .mobile-discover-icon--moments {
  background: linear-gradient(135deg, rgba(55, 82, 82, 0.78), rgba(72, 68, 96, 0.72));
}

[data-theme="dark"] .mobile-discover-icon--wallet {
  background: linear-gradient(135deg, rgba(74, 81, 65, 0.72), rgba(50, 76, 75, 0.7));
}

[data-theme="dark"] .mobile-discover-icon--memory {
  background: linear-gradient(135deg, rgba(72, 68, 96, 0.78), rgba(82, 65, 78, 0.7));
}

[data-theme="dark"] .mobile-discover-icon--diary {
  background: linear-gradient(135deg, rgba(55, 82, 82, 0.78), rgba(66, 74, 98, 0.7));
}

[data-theme="dark"] .mobile-discover-icon--diary-g {
  background: linear-gradient(135deg, rgba(72, 68, 96, 0.78), rgba(82, 65, 78, 0.7));
}

[data-theme="dark"] .mobile-settings-hero {
  color: #e8ecf5;
  background:
    radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.14), transparent 13%),
    radial-gradient(circle at 100% 8%, rgba(142, 162, 224, 0.16), transparent 36%),
    radial-gradient(circle at 0% 74%, rgba(75, 122, 122, 0.14), transparent 40%),
    linear-gradient(135deg, rgba(35, 41, 61, 0.58), rgba(41, 47, 70, 0.3));
  border-color: rgba(125, 133, 164, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px rgba(5, 8, 18, 0.14);
}

[data-theme="dark"] .mobile-settings-hero-moon {
  background: rgba(226, 233, 249, 0.82);
  box-shadow:
    -15px 3px 0 rgba(40, 50, 77, 0.88),
    0 12px 28px rgba(5, 8, 18, 0.16);
  opacity: 0.5;
}

[data-theme="dark"] .mobile-settings-hero-orbit {
  border-top-color: rgba(180, 194, 240, 0.24);
  opacity: 0.36;
}

[data-theme="dark"] .mobile-avatar-preview-list {
  background:
    linear-gradient(135deg, rgba(35, 41, 61, 0.54), rgba(41, 47, 70, 0.28)),
    linear-gradient(135deg, rgba(66, 104, 101, 0.16), rgba(91, 78, 126, 0.14));
  border-color: rgba(125, 133, 164, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px rgba(5, 8, 18, 0.14);
}

[data-theme="dark"] .mobile-theme-card {
  color: #e8ecf5;
  background:
    linear-gradient(135deg, rgba(35, 41, 61, 0.64), rgba(41, 47, 70, 0.36)),
    linear-gradient(135deg, rgba(66, 104, 101, 0.16), rgba(91, 78, 126, 0.14));
  border-color: rgba(125, 133, 164, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 28px rgba(5, 8, 18, 0.16);
}

[data-theme="dark"] .mobile-theme-card.is-active {
  border-color: rgba(176, 188, 235, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 30px rgba(5, 8, 18, 0.24);
}

[data-theme="dark"] .mobile-theme-card::after {
  color: rgba(214, 222, 245, 0.82);
  background: rgba(35, 41, 61, 0.72);
  border-color: rgba(126, 136, 176, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-theme-card strong {
  color: #e8ecf5;
}

[data-theme="dark"] .mobile-theme-swatches i.is-active {
  color: #e8ecf5;
  background: rgba(60, 68, 102, 0.72);
  box-shadow: inset 0 0 0 1px rgba(142, 154, 202, 0.28);
}

[data-theme="dark"] .mobile-avatar-card {
  color: #e8ecf5;
}

[data-theme="dark"] .mobile-avatar-card::after {
  background: rgba(88, 98, 132, 0.24);
}

[data-theme="dark"] .mobile-avatar-card i {
  background: rgba(40, 46, 68, 0.6);
  box-shadow: inset 0 0 0 1px rgba(118, 128, 166, 0.28);
}

[data-theme="dark"] .mobile-avatar-card.is-custom i {
  color: #dfe8ff;
  background: rgba(82, 104, 148, 0.46);
  box-shadow: inset 0 0 0 1px rgba(147, 169, 221, 0.28);
}

[data-theme="dark"] .mobile-discover-chevron {
  color: rgba(216, 222, 238, 0.48);
}

[data-theme="dark"] .mobile-discover-list,
[data-theme="dark"] .mobile-settings-list {
  background:
    linear-gradient(135deg, rgba(35, 41, 61, 0.54), rgba(41, 47, 70, 0.28)),
    radial-gradient(circle at 8% 12%, rgba(66, 104, 101, 0.16), transparent 36%),
    radial-gradient(circle at 100% 28%, rgba(91, 78, 126, 0.14), transparent 40%);
  border-color: rgba(125, 133, 164, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px rgba(5, 8, 18, 0.14);
}

[data-theme="dark"] .mobile-discover-row,
[data-theme="dark"] .mobile-settings-row {
  background: transparent;
}

[data-theme="dark"] .mobile-discover-row::after,
[data-theme="dark"] .mobile-settings-row::after,
[data-theme="dark"] .mobile-room-row::after {
  background: rgba(88, 98, 132, 0.24);
}

[data-theme="dark"] .mobile-room-row {
  color: #e8ecf5;
  border-color: #343b55;
}

[data-theme="dark"] .mobile-chat-header,
[data-theme="dark"] .composer,
[data-theme="dark"] .mobile-discover-row,
[data-theme="dark"] .mobile-settings-row {
  border-color: #343b55;
}

[data-theme="dark"] .mobile-chat-back,
[data-theme="dark"] .mobile-chat-more,
[data-theme="dark"] .mobile-tool-tray-button,
[data-theme="dark"] .composer-tools .tool-button svg,
[data-theme="dark"] .composer .input-wrap {
  color: #e8ecf5;
  background: #202538;
  border-color: #343b55;
}

[data-theme="dark"] .mobile-room-row.active {
  background: rgba(92, 190, 177, 0.08);
}

[data-theme="dark"] .mobile-search-field input {
  -webkit-text-fill-color: #aab1c2;
}

[data-theme="dark"] .icon-button,
[data-theme="dark"] .tool-button,
[data-theme="dark"] .sidebar-toggle {
  color: var(--ink);
  background: #252938;
  border-color: #3d4358;
}

[data-theme="dark"] .icon-button:hover,
[data-theme="dark"] .tool-button:hover,
[data-theme="dark"] .sidebar-toggle:hover {
  background: #303548;
  border-color: #545b76;
}

[data-theme="dark"] .mobile-room-pill {
  color: var(--ink);
  background: #242837;
  border-color: #3b4055;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .mobile-room-pill.active {
  color: #ffffff;
  background: linear-gradient(135deg, #2b3144 0%, #3a5470 100%);
  border-color: #5f7ea0;
}

[data-theme="dark"] .composer {
  background: #171923;
  border-color: #363b4f;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] textarea {
  color: var(--ink);
}

[data-theme="dark"] textarea::placeholder {
  color: #8f96aa;
}

[data-theme="dark"] .send-button:not(.send-button--cancel) {
  color: #e8ecf5;
  background: #202538;
  border-color: #343b55;
}

[data-theme="dark"] .send-button:not(.send-button--cancel):not(:disabled):hover {
  background: #252b40;
  border-color: #3e4660;
}

[data-theme="dark"] .send-button:disabled,
[data-theme="dark"] .tool-button:disabled {
  opacity: 0.42;
}

[data-theme="dark"] .bubble {
  background: #222636;
  border-color: #363c50;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .message.user .bubble {
  background: linear-gradient(135deg, #1d726b 0%, #226b5f 100%);
  box-shadow: 0 10px 24px rgba(13, 80, 74, 0.26);
}

[data-theme="dark"] .avatar {
  color: #ffffff;
  background: #2b3041;
}

[data-theme="dark"] .side-rail--open {
  background: #171923;
  border-right: 1px solid #343a50;
  box-shadow: 12px 0 36px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .side-rail--open .brand-lockup,
[data-theme="dark"] .side-rail--open .session-item,
[data-theme="dark"] .side-rail--open .rail-footer {
  color: #e8ecf5;
}

[data-theme="dark"] .side-rail--open .brand-lockup span,
[data-theme="dark"] .side-rail--open .session-meta,
[data-theme="dark"] .side-rail--open .rail-footer span {
  color: #aeb6c8;
}

[data-theme="dark"] .side-rail--open .brand-mark {
  color: #ffffff;
  background: #262c42;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .side-rail--open .session-item:hover {
  background: #242a3e;
  border-color: #353c55;
}

[data-theme="dark"] .side-rail--open .session-item.active {
  color: #ffffff;
  background: #252b40;
  border-color: #46506d;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .side-rail--open .session-item.active .session-meta {
  color: #b8c0d2;
}

[data-theme="dark"] .room-context-card,
[data-theme="dark"] .room-context-card--preview,
[data-theme="dark"] .markdown-preview-pane {
  color: #e8ecf5;
  background: #222638;
  border-color: #3a415a;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .room-context-card span,
[data-theme="dark"] .room-context-card p,
[data-theme="dark"] .room-context-card--preview p {
  color: #aeb6c8;
}

[data-theme="dark"] .room-context-flags span {
  color: #dfe5f2;
  background: #2b3146;
  border-color: #444c66;
}

[data-theme="dark"] .emotion-panel-dialog,
[data-theme="dark"] .settings-dialog {
  color: #e8ecf5;
  background: #202538;
  border-color: #343b55;
}

[data-theme="dark"] .emotion-panel-header,
[data-theme="dark"] .settings-header,
[data-theme="dark"] .settings-footer {
  background: #202538;
  border-color: #343b55;
}

[data-theme="dark"] .emotion-panel-body .mood-band,
[data-theme="dark"] .emotion-panel-body .emotion-visual-card,
[data-theme="dark"] .emotion-panel-body .dictionary-editor-card,
[data-theme="dark"] .emotion-visual-card,
[data-theme="dark"] .dictionary-editor-card {
  color: #e8ecf5;
  background: #eef1f6;
  border-color: #626b81;
  box-shadow: none;
}

[data-theme="dark"] .emotion-panel-body .mood-band,
[data-theme="dark"] .emotion-panel-body .emotion-visual-card,
[data-theme="dark"] .emotion-panel-body .dictionary-editor-card {
  color: #1f2435;
}

[data-theme="dark"] .emotion-panel-body .mood-band *,
[data-theme="dark"] .emotion-panel-body .emotion-visual-card *,
[data-theme="dark"] .emotion-panel-body .dictionary-editor-card * {
  text-shadow: none;
}

[data-theme="dark"] .emotion-panel-body .mood-band span,
[data-theme="dark"] .emotion-panel-body .mood-band p,
[data-theme="dark"] .emotion-panel-body .visual-header span,
[data-theme="dark"] .emotion-panel-body .emotion-sidecar span,
[data-theme="dark"] .emotion-panel-body .dictionary-editor-header span,
[data-theme="dark"] .emotion-panel-body .dictionary-editor-grid span,
[data-theme="dark"] .emotion-panel-body .axis-label,
[data-theme="dark"] .emotion-panel-body .quadrant-label,
[data-theme="dark"] .emotion-panel-body .editor-checks dt {
  color: #606a7d;
}

[data-theme="dark"] .emotion-panel-body .mood-band strong,
[data-theme="dark"] .emotion-panel-body .visual-header strong,
[data-theme="dark"] .emotion-panel-body .dictionary-editor-header strong,
[data-theme="dark"] .emotion-panel-body .editor-checks dd {
  color: #1f2435;
}

[data-theme="dark"] .emotion-panel-body #dictionaryEditorMode,
[data-theme="dark"] .emotion-panel-body #starPointCount {
  color: #324b78;
  background: #e3e9f4;
  border-color: #b7c4d8;
}

[data-theme="dark"] .emotion-plot,
[data-theme="dark"] .emotion-sidecar > div,
[data-theme="dark"] .dictionary-editor-grid article,
[data-theme="dark"] .diff-detail,
[data-theme="dark"] .editor-checks div {
  color: #1f2435;
  background: #f8fafc;
  border-color: #697386;
}

[data-theme="dark"] .dictionary-candidates li,
[data-theme="dark"] .dictionary-diff-list li,
[data-theme="dark"] .dictionary-diff-list button {
  color: #e8ecf5;
  background: #252b40;
  border-color: #3d4662;
}

[data-theme="dark"] .dictionary-candidates strong,
[data-theme="dark"] .dictionary-diff-list strong {
  color: #ffffff;
}

[data-theme="dark"] .dictionary-candidates span,
[data-theme="dark"] .dictionary-diff-list span {
  color: #aeb6c8;
}

[data-theme="dark"] .diff-filter button {
  color: #2a3147;
  background: #f4f6fb;
  border-color: #a5adbc;
}

[data-theme="dark"] .diff-filter button.active {
  color: #ffffff;
  background: #2f315d;
  border-color: #5d61a6;
}

[data-theme="dark"] .settings-button--primary {
  color: #1f2435;
  background: #eef2ff;
  border-color: #eef2ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chat-stage {
    background:
      linear-gradient(180deg, #171923 0%, #1c1f2b 46%, #171923 100%),
      radial-gradient(circle at 18% 4%, rgba(124, 121, 189, 0.18), transparent 30%),
      radial-gradient(circle at 88% 8%, rgba(40, 125, 117, 0.12), transparent 28%);
  }

  :root:not([data-theme="light"]) .icon-button,
  :root:not([data-theme="light"]) .tool-button,
  :root:not([data-theme="light"]) .sidebar-toggle {
    color: var(--ink);
    background: #252938;
    border-color: #3d4358;
  }

  :root:not([data-theme="light"]) .mobile-room-pill {
    color: var(--ink);
    background: #242837;
    border-color: #3b4055;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  }

  :root:not([data-theme="light"]) .mobile-room-pill.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2b3144 0%, #3a5470 100%);
    border-color: #5f7ea0;
  }

  :root:not([data-theme="light"]) .composer {
    background: #171923;
    border-color: #363b4f;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.28);
  }

  :root:not([data-theme="light"]) textarea::placeholder {
    color: #8f96aa;
  }

  :root:not([data-theme="light"]) .send-button:not(.send-button--cancel) {
    color: #e8ecf5;
    background: #202538;
    border-color: #343b55;
  }

  :root:not([data-theme="light"]) .bubble {
    background: #222636;
    border-color: #363c50;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  }

  :root:not([data-theme="light"]) .side-rail,
  :root:not([data-theme="light"]) .state-panel,
  :root:not([data-theme="light"]) .side-rail--open {
    color: #e8ecf5;
    background: #171923;
    border-color: #343a50;
  }

  :root:not([data-theme="light"]) .side-rail--open {
    box-shadow: 12px 0 36px rgba(0, 0, 0, 0.34);
  }

  :root:not([data-theme="light"]) .side-rail .brand-lockup,
  :root:not([data-theme="light"]) .side-rail .session-item,
  :root:not([data-theme="light"]) .side-rail .rail-footer,
  :root:not([data-theme="light"]) .side-rail--open .brand-lockup,
  :root:not([data-theme="light"]) .side-rail--open .session-item,
  :root:not([data-theme="light"]) .side-rail--open .rail-footer {
    color: #e8ecf5;
  }

  :root:not([data-theme="light"]) .side-rail .brand-lockup span,
  :root:not([data-theme="light"]) .side-rail .session-meta,
  :root:not([data-theme="light"]) .side-rail .rail-footer span,
  :root:not([data-theme="light"]) .side-rail--open .brand-lockup span,
  :root:not([data-theme="light"]) .side-rail--open .session-meta,
  :root:not([data-theme="light"]) .side-rail--open .rail-footer span {
    color: #aeb6c8;
  }

  :root:not([data-theme="light"]) .side-rail .brand-mark,
  :root:not([data-theme="light"]) .side-rail--open .brand-mark {
    color: #ffffff;
    background: #262c42;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  }

  :root:not([data-theme="light"]) .side-rail .session-item:hover,
  :root:not([data-theme="light"]) .side-rail--open .session-item:hover {
    background: #242a3e;
    border-color: #353c55;
  }

  :root:not([data-theme="light"]) .side-rail .session-item.active,
  :root:not([data-theme="light"]) .side-rail--open .session-item.active {
    color: #ffffff;
    background: #252b40;
    border-color: #46506d;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  }

  :root:not([data-theme="light"]) .side-rail--open .session-item.active .session-meta {
    color: #b8c0d2;
  }

  :root:not([data-theme="light"]) .state-panel section {
    color: #e8ecf5;
    background: #202538;
    border-color: #343b55;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  }

  :root:not([data-theme="light"]) .room-context-card,
  :root:not([data-theme="light"]) .room-context-card--preview,
  :root:not([data-theme="light"]) .markdown-preview-pane {
    color: #e8ecf5;
    background: #222638;
    border-color: #3a415a;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
  }

  :root:not([data-theme="light"]) .room-context-flags span {
    color: #dfe5f2;
    background: #2b3146;
    border-color: #444c66;
  }

  :root:not([data-theme="light"]) .emotion-panel-dialog,
  :root:not([data-theme="light"]) .settings-dialog {
    color: #e8ecf5;
    background: #202538;
    border-color: #343b55;
  }

  :root:not([data-theme="light"]) .emotion-panel-body .mood-band,
  :root:not([data-theme="light"]) .emotion-panel-body .emotion-visual-card,
  :root:not([data-theme="light"]) .emotion-panel-body .dictionary-editor-card {
    color: #1f2435;
    background: #eef1f6;
    border-color: #626b81;
    box-shadow: none;
  }

  :root:not([data-theme="light"]) .emotion-panel-body .mood-band span,
  :root:not([data-theme="light"]) .emotion-panel-body .mood-band p,
  :root:not([data-theme="light"]) .emotion-panel-body .visual-header span,
  :root:not([data-theme="light"]) .emotion-panel-body .emotion-sidecar span,
  :root:not([data-theme="light"]) .emotion-panel-body .dictionary-editor-header span,
  :root:not([data-theme="light"]) .emotion-panel-body .dictionary-editor-grid span,
  :root:not([data-theme="light"]) .emotion-panel-body .axis-label,
  :root:not([data-theme="light"]) .emotion-panel-body .quadrant-label,
  :root:not([data-theme="light"]) .emotion-panel-body .editor-checks dt {
    color: #606a7d;
  }

  :root:not([data-theme="light"]) .emotion-panel-body .mood-band strong,
  :root:not([data-theme="light"]) .emotion-panel-body .visual-header strong,
  :root:not([data-theme="light"]) .emotion-panel-body .dictionary-editor-header strong,
  :root:not([data-theme="light"]) .emotion-panel-body .editor-checks dd {
    color: #1f2435;
  }

  :root:not([data-theme="light"]) .emotion-panel-body #dictionaryEditorMode,
  :root:not([data-theme="light"]) .emotion-panel-body #starPointCount {
    color: #324b78;
    background: #e3e9f4;
    border-color: #b7c4d8;
  }

  :root:not([data-theme="light"]) .emotion-plot,
  :root:not([data-theme="light"]) .emotion-sidecar > div,
  :root:not([data-theme="light"]) .dictionary-editor-grid article,
  :root:not([data-theme="light"]) .diff-detail,
  :root:not([data-theme="light"]) .editor-checks div {
    color: #1f2435;
    background: #f8fafc;
    border-color: #697386;
  }

  :root:not([data-theme="light"]) .dictionary-candidates li,
  :root:not([data-theme="light"]) .dictionary-diff-list li,
  :root:not([data-theme="light"]) .dictionary-diff-list button {
    color: #e8ecf5;
    background: #252b40;
    border-color: #3d4662;
  }

  :root:not([data-theme="light"]) .dictionary-candidates strong,
  :root:not([data-theme="light"]) .dictionary-diff-list strong {
    color: #ffffff;
  }

  :root:not([data-theme="light"]) .dictionary-candidates span,
  :root:not([data-theme="light"]) .dictionary-diff-list span {
    color: #aeb6c8;
  }

  :root:not([data-theme="light"]) .diff-filter button {
    color: #2a3147;
    background: #f4f6fb;
    border-color: #a5adbc;
  }

  :root:not([data-theme="light"]) .diff-filter button.active {
    color: #ffffff;
    background: #2f315d;
    border-color: #5d61a6;
  }
}