/* ===================== Aurelius — warm iOS chat client ===================== */

@font-face {
  font-family: 'AureliusUINormal';
  src: url('../Fonts/Aurelius_UI-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'AureliusGreetingSerif';
  src: url('../Fonts/aurelius_UI_serif-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  color-scheme: light;
  --serif: 'Newsreader', Georgia, 'Songti SC', 'STSong', serif;
  --system-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'PingFang SC',
          'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --aurelius-ui: 'AureliusUINormal', 'Aurelius_UI', var(--system-sans);
  --sans: var(--aurelius-ui);
  --aurelius-serif: 'AureliusGreetingSerif', 'aurelius_UI_serif', var(--serif);
  --chat-copy: 'AureliusUINormal', 'Aurelius_UI', 'Hiragino Sans GB', 'PingFang SC',
          'Heiti SC', 'STHeitiSC-Light', sans-serif;

  /* light (default) */
  --stage: #d9d7cf;
  --bg: #f9f9f7;
  --text: #393937;
  --text2: #7f7d7a;
  --text3: #b0aea4;
  --icon: #383836;
  --btn: #fafaf8;
  --icon-btn-border: transparent;
  --composer-bg: #ffffff;
  --composer-border: transparent;
  --composer-control-bg: var(--pill);
  --composer-control-muted: var(--text2);
  --btn-line: #ece9e1;
  --btn-shadow: 0 1px 6px rgba(60, 56, 48, .08);
  --bubble: #e9e7df;
  --card: #eae9e2;
  --sheet: #f6f5f0;
  --divider: #e0ded6;
  --pill: #f1efed;
  --accent: #d87858;
  --blue: #2e6fe0;
  --voice-bg: #232220;
  --voice-fg: #f4f3ee;
  --sidebar-new-bg: #232220;
  --sidebar-new-fg: #f4f3ee;
  --scrim: rgba(35, 33, 30, .34);
  --sheet-scrim: rgba(35, 33, 30, .40);
}

[data-theme="dark"] {
  color-scheme: dark;
  --stage: #131312;
  --bg: #20201f;
  --text: #f3f1eb;
  --text2: #9a988e;
  --text3: #6b6a61;
  --icon: #d8d6ce;
  --btn: #34332f;
  --icon-btn-border: #45433f;
  --composer-bg: #20201e;
  --composer-border: #3d3c38;
  --composer-control-bg: #11110f;
  --composer-control-muted: #8f8d86;
  --btn-line: #403e39;
  --btn-shadow: 0 2px 12px rgba(0, 0, 0, .34);
  --bubble: #3a3935;
  --card: #2f2f2c;
  --sheet: #2b2a27;
  --divider: #3c3b36;
  --pill: #3a3935;
  --accent: #d87858;
  --blue: #5089f2;
  --voice-bg: #f3f1eb;
  --voice-fg: #232220;
  --sidebar-new-bg: #f3f1eb;
  --sidebar-new-fg: #232220;
  --scrim: rgba(0, 0, 0, .46);
  --sheet-scrim: rgba(0, 0, 0, .52);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
  margin: 0;
  width: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
  background: var(--bg);
}
html, body {
  margin: 0;
  background: var(--bg);
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  height: var(--app-height, 100vh);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: var(--app-height, 100vh);
  overflow: hidden;
  transition: background .4s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports (height: 100dvh) {
  body {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
  }
}
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; padding: 0; }

/* ===================== stage + device ===================== */
#stage {
  position: fixed; inset: 0;
  width: 100%;
  height: var(--app-height, 100vh);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: var(--app-height, 100vh);
}
#device {
  position: relative;
  width: 100%;
  height: var(--app-height, 100vh);
  min-height: var(--app-height, 100vh);
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg);
  overflow: visible;
  transition: background .4s ease;
}
@supports (height: 100dvh) {
  #stage,
  #device {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
  }
}

/* ===================== app shell / screens ===================== */
.app-shell {
  position: absolute; inset: 0;
  background: var(--bg);
  overflow: hidden;
  border-radius: 0;
  border: 1px solid transparent;
  transform: translate3d(0, 0, 0);
  transition: transform .4s cubic-bezier(.32,.72,0,1), border-radius .4s cubic-bezier(.32,.72,0,1), border-color .24s ease;
  will-change: transform, border-radius;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  touch-action: pan-y;
  z-index: 2;
}
.app-shell.shifted {
  transform: translate3d(72.75%, 0, 0);
  border-radius: 78px;
  border-color: var(--icon-btn-border);
  box-shadow: -14px 0 46px rgba(0,0,0,.18);
}
.app-shell.dragging {
  transition: none;
}
.app-shell.behind {
  transform: scale(.925) translateY(8px);
  border-radius: 40px;
}

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .26s ease;
}
.screen.active { opacity: 1; pointer-events: auto; }

/* ===================== status bar ===================== */
.statusbar { display: none; }
.statusbar-old {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 32px 0 38px;
  display: flex; align-items: center; justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.sb-time { font-size: 15.5px; font-weight: 700; letter-spacing: .2px; color: var(--text); }
.sb-right { display: flex; align-items: center; gap: 7px; color: var(--text); }

/* ===================== home indicator ===================== */
.home-indicator { display: none; }
.home-indicator-old {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: 138px; height: 5px; border-radius: 3px;
  background: var(--text); opacity: .85;
  z-index: 5; pointer-events: none;
}

/* ===================== top bar ===================== */
.topbar {
  flex: 0 0 auto;
  padding: max(8px, calc(env(safe-area-inset-top, 0px) - 6px)) 20px 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  position: relative; z-index: 20;
}
.topbar-title { font-size: 16.5px; font-weight: 700; color: var(--text); letter-spacing: .2px; }
.topbar-spacer { width: 44px; height: 44px; flex: 0 0 44px; pointer-events: none; }
.topbar-center {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.title-text {
  font-family: var(--aurelius-ui);
  font-size: 16px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 8px;
  transition: background .15s ease;
}
.title-text:active { background: var(--pill); }
.title-edit {
  font-family: var(--aurelius-ui);
  font-size: 16px; font-weight: 600; color: var(--text);
  background: transparent;
  border: none; border-bottom: 1.5px solid var(--accent);
  outline: none;
  padding: 4px 2px;
  width: 100%; max-width: 200px;
  text-align: center;
}
.star-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--text3);
  flex: 0 0 auto;
  border-radius: 50%;
  transition: color .2s ease, transform .12s ease;
}
.star-btn:active { transform: scale(.88); }
.star-btn.on { color: var(--accent); }
.topbar-star {
  margin-right: -4px;
}

.home-topbar .icon-btn {
  position: relative;
  left: -1px;
  top: 5px;
}

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--btn);
  border: 1px solid var(--icon-btn-border);
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  color: var(--icon);
  box-shadow: var(--btn-shadow);
  flex: 0 0 auto;
  transition: transform .12s ease, background .3s ease;
}
.icon-btn:active { transform: scale(.93); }

[data-theme="dark"] .home-topbar .icon-btn {
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%),
    linear-gradient(145deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .010) 44%, rgba(0, 0, 0, .06)),
    #232322;
  border-color: rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 0 0 .5px rgba(255, 255, 255, .035),
    0 8px 18px rgba(0, 0, 0, .12);
}

[data-theme="dark"] .home-topbar .icon-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .045);
  background: linear-gradient(145deg, rgba(255, 255, 255, .040), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

[data-theme="dark"] .home-topbar .icon-btn::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  width: 24px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 68%);
  transform: rotate(-18deg);
  pointer-events: none;
}

.home-topbar .icon-btn svg {
  position: relative;
  z-index: 1;
}

.pill-group {
  display: flex; align-items: center; gap: 2px;
  background: var(--btn);
  border-radius: 26px;
  padding: 5px;
  box-shadow: var(--btn-shadow);
}
.pill-btn {
  width: 36px; height: 34px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--icon);
  transition: transform .12s ease;
}
.pill-btn:active { transform: scale(.9); }
.pill-btn.compose { color: var(--text); }

/* ===================== home screen ===================== */
.home-center {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  margin-top: 22px;
  padding: 0 32px;
  pointer-events: none;
  transform: translateY(-6.5px);
}
.home-center .spark-wrap { transform: translateY(.25px); }
.home-greet {
  font-family: var(--aurelius-serif);
  font-size: 31px; font-weight: 400;
  letter-spacing: .1px;
  color: var(--text);
  text-align: center;
}

/* ===================== composer ===================== */
.composer-wrap { flex: 0 0 auto; padding: 0 15px var(--composer-bottom-pad, max(33px, calc(env(safe-area-inset-bottom, 0px) + 1px))); }
.composer {
  position: relative;
  background: var(--composer-bg);
  border: 1px solid var(--composer-border);
  border-radius: 26px;
  box-shadow: var(--btn-shadow);
  padding: 15px 7px 7px;
  display: flex; flex-direction: column; gap: 15px;
}
.composer-input {
  font-family: var(--aurelius-ui);
  font-size: 17px; color: var(--text); font-weight: 400;
  line-height: 1.25; padding: 1px 6px;
  border: 0; outline: 0; resize: none; width: 100%;
  background: transparent;
  max-height: 132px; overflow-y: auto;
}
.composer-input::-webkit-scrollbar { width: 0; }
.composer-input::placeholder { color: var(--text2); opacity: 1; font-weight: 400; }
.composer-row { display: flex; align-items: center; gap: 8px; }
.comp-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--composer-control-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--icon); flex: 0 0 auto;
  transition: transform .12s ease;
}
.comp-circle:active { transform: scale(.9); }
.model-chip {
  font-family: var(--aurelius-ui);
  display: flex; align-items: center; gap: 5px;
  background: var(--composer-control-bg);
  border-radius: 20px;
  box-sizing: border-box;
  padding: 8px 18px;
  width: auto;
  min-width: 0;
  height: 36px;
  justify-content: center;
  font-size: 13.25px; font-weight: 700; color: var(--text);
  white-space: nowrap;
  transition: transform .12s ease;
}
.model-chip:active { transform: scale(.96); }
.model-chip .muted { color: var(--composer-control-muted); font-weight: 700; }
.composer-spacer { flex: 1 1 auto; }
.voice-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--voice-bg); color: var(--voice-fg);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: transform .12s ease;
}
.voice-btn:active { transform: scale(.92); }
.send-btn {
  width: 36px; height: 36px; border-radius: 50%;
  margin-left: 0;
  background: var(--composer-control-bg); color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: background .2s ease, color .2s ease, transform .12s ease;
}
.send-btn.on { background: var(--accent); color: #fff; }
.send-btn:active { transform: scale(.9); }

/* ===================== chat screen ===================== */
.chat-scroll {
  flex: 1 1 auto; overflow-y: auto;
  padding: 14px 22px 10px;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.chat-scroll::-webkit-scrollbar { width: 0; }


.chat-empty {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  text-align: center; padding-bottom: 40px;
}
.chat-empty .spark-wrap { opacity: .9; }
.chat-empty-text {
  font-family: var(--aurelius-ui); font-size: 19px; line-height: 1.5;
  color: var(--text2); font-style: italic; letter-spacing: .2px;
}

.chat-error-banner {
  align-self: center;
  max-width: min(86%, 360px);
  margin: 4px 0 18px;
  padding: 9px 13px;
  border-radius: 14px;
  background: rgba(179, 83, 49, .1);
  color: #9b4a31;
  font-family: var(--aurelius-ui);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
[data-theme="dark"] .chat-error-banner {
  background: rgba(216, 120, 88, .14);
  color: #d78c73;
}

.assistant-turn { display: flex; flex-direction: column; animation: msgrise .32s ease both; }
.msg-user { animation: msgrise .28s ease both; }
@keyframes msgrise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.msg-user { display: flex; justify-content: flex-end; margin: 8px 0 22px; }
.bubble {
  background: var(--bubble);
  border-radius: 20px;
  padding: 11px 16px;
  font-family: var(--chat-copy);
  font-size: 16.5px; line-height: 1.45; color: var(--text);
  max-width: 80%;
}

.thinking-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 4px 2px 4px 0;
  color: var(--text2);
  margin-bottom: 14px;
}
.thinking-row:disabled { cursor: default; }
.thinking-row .label { font-family: var(--aurelius-ui); font-size: 14px; font-weight: 500; letter-spacing: .2px; transition: opacity .4s ease; }
.thinking-row .grow { flex: 1 1 auto; }

.think-icon-wrap { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
.think-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease; }
.think-icon.spark { opacity: 1; }
.think-icon.spark.out { opacity: 0; }
.think-icon.clock { opacity: 0; }
.think-icon.clock.in { opacity: 1; }

.thinking-row .chev { color: var(--text2); transition: opacity .4s ease, transform .4s ease; }
.thinking-row .chev.hidden { opacity: 0; transform: translateX(-6px); }

.status-hint { font-size: 12px; color: var(--text3); padding: 2px 12px 6px; font-family: var(--aurelius-ui); }
.thinking-row.live { color: var(--text2); }
.think-ell { display: inline-flex; margin-left: 1px; letter-spacing: 1px; }
.think-ell i { opacity: 0; font-style: normal; }
.think-ell i:nth-child(1) { animation: tdot1 1.5s steps(1) infinite; }
.think-ell i:nth-child(2) { animation: tdot2 1.5s steps(1) infinite; }
.think-ell i:nth-child(3) { animation: tdot3 1.5s steps(1) infinite; }
@keyframes tdot1 { 0% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes tdot2 { 0%, 25% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes tdot3 { 0%, 50% { opacity: 0; } 75%, 100% { opacity: 1; } }

.think-time {
  font-size: 12px;
  color: var(--text3);
  margin-left: 6px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.thinking-preview {
  font-size: 13px;
  color: var(--text3);
  padding: 2px 0 4px 28px;
  line-height: 1.4;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 0.7; } }

.assistant-text.streaming { animation: text-enter .4s ease both; }
@keyframes text-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.streaming-spark { padding: 4px 0 8px; color: var(--accent); }

.activity-list {
  display: flex; flex-direction: column; gap: 5px;
  margin: -2px 0 12px;
}
.activity-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; line-height: 1.35; color: var(--text2);
  letter-spacing: .1px;
}
.activity-row.done { opacity: .7; }
.activity-row.done .activity-icon { filter: grayscale(.3); }
.activity-icon {
  flex: 0 0 auto; font-size: 13px; line-height: 1;
}
.activity-text { flex: 1 1 auto; min-width: 0; }
.activity-pulse {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: actpulse 1s ease-in-out infinite;
}
@keyframes actpulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

.type-caret {
  display: inline-block; width: 8px; height: 1.05em; margin-left: 2px;
  vertical-align: -2px; border-radius: 2px;
  background: var(--accent);
  animation: caretblink .9s steps(1) infinite;
}
@keyframes caretblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.assistant-text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  margin-bottom: 20px;
}
.assistant-bubble {
  max-width: 92%;
  font-family: var(--chat-copy);
  font-size: 16.5px; line-height: 1.5; color: var(--text);
  letter-spacing: .2px;
  text-wrap: pretty;
}
.assistant-voice {
  display: inline-block;
  margin-right: 6px;
  font-size: 13.5px;
  vertical-align: 1px;
  opacity: .78;
}

/* ---- Markdown rendering in assistant messages ---- */
.markdown-body p { margin: 0 0 0.6em; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body strong { font-weight: 600; }
.markdown-body em { font-style: italic; }
.markdown-body a { color: var(--accent, #d87858); text-decoration: underline; }
.markdown-body a:active { opacity: 0.7; }
.markdown-body code {
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
  font-size: 0.88em;
  background: var(--code-bg, rgba(0,0,0,0.06));
  padding: 0.15em 0.35em;
  border-radius: 4px;
}
[data-theme="dark"] .markdown-body code {
  background: rgba(255,255,255,0.1);
}
.markdown-body pre {
  background: var(--code-bg, rgba(0,0,0,0.06));
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0.5em 0;
  -webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .markdown-body pre {
  background: rgba(255,255,255,0.08);
}
.markdown-body pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
  line-height: 1.5;
}
.markdown-body ul, .markdown-body ol {
  padding-left: 1.4em;
  margin: 0.4em 0;
}
.markdown-body li { margin: 0.2em 0; }
.markdown-body blockquote {
  border-left: 3px solid var(--accent, #d87858);
  margin: 0.5em 0;
  padding: 0.3em 0 0.3em 12px;
  opacity: 0.85;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-weight: 600;
  margin: 0.6em 0 0.3em;
}
.markdown-body h1 { font-size: 1.15em; }
.markdown-body h2 { font-size: 1.1em; }
.markdown-body h3 { font-size: 1.05em; }
.markdown-body hr {
  border: none;
  border-top: 1px solid rgba(128,128,128,0.2);
  margin: 0.8em 0;
}
.markdown-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0.4em 0;
  cursor: pointer;
}

.action-row { display: flex; align-items: center; gap: 6px; color: var(--text2); margin-bottom: 30px; animation: msgrise .28s ease both; }
.action-row button { color: var(--text2); display: flex; transition: transform .12s ease, color .2s ease; }
.action-row button:active { transform: scale(.88); }
.usage-line {
  margin-left: 6px;
  color: var(--text3);
  font-family: var(--aurelius-ui);
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.disclaimer-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  margin-top: 4px;
}
.disclaimer-row .spark-wrap { color: var(--accent); flex: 0 0 auto; padding-top: 4px; }
.disclaimer {
  font-size: 14.5px; line-height: 1.5; color: var(--text2); font-weight: 600;
  text-align: right; max-width: 230px;
}

/* ===================== chats list ===================== */
.chats-search {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  margin: 4px 16px 6px; padding: 11px 14px;
  background: var(--btn); border-radius: 16px;
  box-shadow: var(--btn-shadow); color: var(--text3);
}
.chats-search-input {
  flex: 1 1 auto; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 16px; color: var(--text);
}
.chats-search-input::placeholder { color: var(--text3); }
.search-clear {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pill); color: var(--text2); flex: 0 0 auto;
}
.chats-filter-row {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 4px 16px 8px;
}
.chats-filter-chip {
  flex: 1 1 0;
  height: 38px;
  border-radius: 19px;
  background: var(--pill);
  color: var(--text2);
  font-family: var(--aurelius-ui);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.chats-filter-chip.on {
  background: var(--voice-bg);
  color: var(--voice-fg);
}
.chats-filter-chip:active { transform: scale(.96); }

.chats-scroll {
  flex: 1 1 auto; overflow-y: auto;
  padding: 2px 0 8px;
}
.chats-scroll::-webkit-scrollbar { width: 0; }

.chat-group-head {
  font-size: 13px; font-weight: 600; letter-spacing: .4px;
  color: var(--text3); text-transform: none;
  padding: 14px 22px 6px;
}
.chats-empty {
  text-align: center; color: var(--text3); font-size: 15px;
  padding: 60px 30px; line-height: 1.6;
}

/* swipe actions row */
.chat-row { position: relative; overflow: hidden; }
.chat-actions {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 176px; display: flex; justify-content: flex-end;
}
.chat-star-action,
.chat-del {
  width: 88px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: 13px; font-weight: 600;
}
.chat-star-action {
  background: #3f3f3c;
  color: #fff;
}
.chat-star-action.on {
  background: #b36a34;
}
.chat-del {
  background: var(--danger, #c2542f); color: #fff;
}
.chat-item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 20px 14px 22px;
  background: var(--bg);
  touch-action: pan-y;
  transition: transform .22s cubic-bezier(.32,.72,0,1), background .15s ease;
}
.chat-item:active { background: var(--pill); }
.chat-item .ci-main { flex: 1 1 auto; min-width: 0; }
.chat-item .ci-title {
  font-size: 17px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item .ci-preview {
  font-size: 14.5px; color: var(--text2); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item .ci-side {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  align-self: flex-start; margin-top: 2px;
}
.chat-item .chev { color: var(--text3); flex: 0 0 auto; }

/* floating new-chat */
.chats-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 8px 16px max(18px, env(safe-area-inset-bottom));
}
.chats-foot .chats-search { margin: 0; }
.newchat-btn {
  align-self: flex-end;
  display: flex; align-items: center; gap: 9px;
  background: var(--voice-bg); color: var(--voice-fg);
  padding: 13px 22px 13px 18px; border-radius: 28px;
  font-size: 16px; font-weight: 600;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.4);
  transition: transform .12s ease;
}
.newchat-btn:active { transform: scale(.95); }

/* ===================== sidebar ===================== */
.sidebar-host {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex; flex-direction: column;
  padding: 26px 0 0;
  opacity: 0; transition: opacity .3s ease;
}
.sidebar-host.open { opacity: 1; }
.sidebar {
  width: 76%; height: 100%;
  display: flex; flex-direction: column;
  padding: 18px 26px 30px;
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 6px 19px;
}
.wordmark {
  background: none; cursor: default; padding: 0;
  display: flex; align-items: center;
  margin-left: -13px;
  transform: translateY(8px);
}
.wordmark-image {
  display: block;
  width: 132px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.wordmark-image-dark { display: none; }
[data-theme="dark"] .wordmark-image-light { display: none; }
[data-theme="dark"] .wordmark-image-dark { display: block; }
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: -13px;
  transform: translateY(3px);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 8px;
  font-size: 18px; font-weight: 600; color: var(--text);
  border-radius: 14px;
  transition: background .15s ease;
}
.nav-item:active { background: var(--pill); }
.nav-item .nav-ico { width: 27px; display: flex; justify-content: center; color: var(--icon); }
.nav-item .nav-ico.spark { color: var(--accent); }
.sidebar-starred {
  margin: 169px 0 0 -1px;
  padding: 0;
  max-width: 300px;
}
.sidebar-starred-title {
  color: var(--text2);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 24px;
}
.sidebar-starred-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden;
}
.sidebar-starred-item {
  font-family: var(--aurelius-ui);
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.16;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.sidebar-starred-item:active { opacity: .72; }
.sidebar-starred-empty {
  color: var(--text3);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.settings-icon-only {
  width: 52px;
  height: 52px;
  justify-content: center;
  padding: 0;
  gap: 0;
}
.settings-icon-only .nav-ico { width: auto; }

.sidebar-foot { margin-top: auto; }
.sidebar-foot-row { display: flex; align-items: center; justify-content: space-between; }
.sidebar-new-btn {
  font-family: var(--aurelius-ui);
  height: 52px; min-width: 138px; border-radius: 28px;
  background: var(--sidebar-new-bg); color: var(--sidebar-new-fg);
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 0 22px 0 19px;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.55);
  transition: transform .12s ease;
}
.sidebar-new-btn:active { transform: scale(.96); }
.settings-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px 24px; }
.settings-body::-webkit-scrollbar { width: 0; }
.settings-label {
  font-size: 13.5px; font-weight: 700; color: var(--text2);
  letter-spacing: .6px; margin: 14px 8px 10px;
}
.scale-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border-radius: 22px;
  padding: 18px 20px;
}
.scale-slider {
  flex: 1 1 auto; height: 4px; accent-color: var(--accent);
  cursor: pointer;
}
.scale-val {
  font-size: 16px; font-weight: 700; color: var(--text);
  min-width: 52px; text-align: right; font-variant-numeric: tabular-nums;
}
.scale-hint {
  font-size: 13px; color: var(--text2); font-weight: 500;
  margin: 10px 8px;
}
.theme-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 8px;
  font-size: 16.5px; font-weight: 600; color: var(--text);
}
.theme-row .grow { flex: 1 1 auto; }

/* iOS switch */
.switch {
  width: 52px; height: 31px; border-radius: 16px;
  background: var(--divider); position: relative;
  transition: background .25s ease; flex: 0 0 auto;
}
.switch.on { background: var(--blue); }
.switch .knob {
  position: absolute; top: 2.5px; left: 2.5px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25);
  transition: transform .25s cubic-bezier(.3,1.3,.5,1);
}
.switch.on .knob { transform: translateX(21px); }

/* scrim over app-shell when sidebar open */
.shell-scrim {
  position: absolute; inset: 0; z-index: 9;
  background: transparent;
}

/* ===================== sheets ===================== */
.sheet-scrim {
  position: absolute; inset: 0; z-index: 10;
  background: var(--sheet-scrim);
  opacity: 0; pointer-events: none;
  transition: opacity .42s ease;
}
.sheet-scrim.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
  background: var(--sheet);
  border-radius: 34px 34px 0 0;
  transform: translateY(102%);
  transition: transform .46s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  max-height: 86%;
  box-shadow: 0 -10px 50px rgba(0,0,0,.18);
}
.sheet.open { transform: translateY(0); }
.sheet.expanded {
  max-height: 100%;
  height: var(--app-height, 100vh);
  border-radius: 0;
}
@supports (height: 100dvh) {
  .sheet.expanded { height: var(--app-height, 100dvh); }
}

.grabber {
  width: 40px; height: 5px; border-radius: 3px;
  background: var(--text3); opacity: .6;
  margin: 11px auto 0;
  flex: 0 0 auto;
}
.sheet-head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 20px 22px;
  flex: 0 0 auto;
}
.sheet-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.sheet-x {
  position: absolute; left: 20px; top: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--btn); color: var(--icon);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--btn-shadow);
  transition: transform .12s ease;
}
.sheet-x:active { transform: scale(.92); }

.sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 18px 24px; }
.sheet-body::-webkit-scrollbar { width: 0; }

.subpage { animation: slideUp .3s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* thought process text */
.thought-p {
  font-size: 15px; line-height: 1.62; color: var(--text);
  margin: 0 6px 22px;
}

/* grouped card / option list */
.group-card {
  background: var(--card);
  border-radius: 22px;
  padding: 2px 15px;
  margin-bottom: 16px;
}
.opt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px;
  position: relative;
  width: 100%; text-align: left;
}
.opt + .opt { border-top: 1px solid var(--divider); }
.opt .opt-main { flex: 1 1 auto; }
.opt .opt-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opt .opt-name { font-size: 15.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.opt .opt-desc { font-size: 13px; color: var(--text2); margin-top: 3px; font-weight: 500; }
.opt .opt-check { color: var(--blue); flex: 0 0 auto; }
.tag {
  font-size: 11px; font-weight: 700; color: var(--text);
  background: var(--pill); border-radius: 9px; padding: 4px 10px;
  white-space: nowrap;
}

/* row pill (Effort / context links) */
.row-link {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--card);
  border-radius: 22px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.row-link .rl-name { font-size: 15.5px; font-weight: 600; color: var(--text); }
.row-link .grow { flex: 1 1 auto; }
.row-link .rl-val { font-size: 14px; color: var(--text2); font-weight: 500; }
.row-link .chev { color: var(--text3); }
.row-link:active { filter: brightness(.98); }

.sheet-back {
  position: absolute; left: 20px; top: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--btn); color: var(--icon);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--btn-shadow);
  transition: transform .12s ease;
}
.sheet-back:active { transform: scale(.92); }

.sheet-caption {
  font-size: 14.5px; line-height: 1.5; color: var(--text2);
  font-weight: 500; margin: 2px 8px 22px; text-wrap: pretty;
}

.toggle-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: 22px;
  padding: 12px 16px;
}
.toggle-card .tc-main { flex: 1 1 auto; }
.toggle-card .tc-name { font-size: 15.5px; font-weight: 600; color: var(--text); }
.toggle-card .tc-desc { font-size: 13px; color: var(--text2); margin-top: 3px; font-weight: 500; }

/* ===================== 记忆库 ===================== */
/* 概览条:桶数 · 钉选 · 锚点 */
.mem-stats {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  margin: 0 24px 10px; font-size: 12.5px; color: var(--text2); font-weight: 500;
}
.mem-stats b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.mem-stats-dot { color: var(--text3); }
.mem-anchor { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.mem-anchor b { color: var(--accent); }
.mem-stats-live { font-size: 11.5px; color: var(--text3); font-weight: 600; }

/* 搜索栏 */
.mem-searchbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  margin: 0 22px 10px; padding: 11px 15px;
  background: var(--btn); border-radius: 16px; box-shadow: var(--btn-shadow);
  color: var(--text2);
}
.mem-searchbar input {
  flex: 1 1 auto; border: none; background: none; outline: none;
  font-family: inherit; font-size: 15px; color: var(--text);
}
.mem-searchbar input::placeholder { color: var(--text3); }
.icon-btn.active { background: var(--accent); color: #fff; }

/* 筛选栏(替代横向滚动 chip) */
.mem-filterbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 2px 22px 12px;
}
.mem-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 14px;
  background: var(--btn); box-shadow: var(--btn-shadow);
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.mem-filter-btn svg:first-child { color: var(--text2); }
.mem-filter-btn svg:last-child { color: var(--text3); }
.mem-filter-btn.active { background: var(--accent); color: #fff; }
.mem-filter-btn.active svg { color: #fff; }
.mem-filter-clear { font-size: 13px; font-weight: 600; color: var(--text2); padding: 6px 4px; }

/* 筛选弹层平铺网格 */
.flt-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 4px; }
.flt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 14px;
  background: var(--card); color: var(--text2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.flt-chip svg { color: var(--text3); }
.flt-chip.on { background: var(--accent); color: #fff; }
.flt-chip.on svg { color: #fff; }

/* 列表滚动区 */
.mem-scroll {
  flex: 1 1 auto; overflow-y: auto;
  padding: 12px 18px 88px;
  display: flex; flex-direction: column; gap: 10px;
}
.mem-scroll::-webkit-scrollbar { width: 0; }

/* 空态 */
.mem-empty { text-align: center; color: var(--text3); font-size: 14px; font-weight: 500; padding: 40px 0; }

/* 记忆卡 */
.mem-card {
  background: var(--btn); border-radius: 20px;
  padding: 15px 16px 13px;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; text-align: left;
  border: 1px solid var(--btn-line); box-shadow: var(--btn-shadow);
  transition: transform .12s ease, filter .2s ease;
}
.mem-card:active { transform: scale(.985); filter: brightness(.98); }
.mem-card-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.mem-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.mem-name {
  font-size: 16px; font-weight: 600; color: var(--text);
  flex: 1 1 auto; min-width: 0;
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.38;
}
.mem-content {
  font-size: 14px; line-height: 1.55; color: var(--text2); font-weight: 500;
  text-wrap: pretty;
  display: block; overflow: visible;
}
.mem-meta {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px;
  font-size: 12.5px; color: var(--text3); font-weight: 500;
  margin-top: 1px;
}
.mem-domain { color: var(--text2); font-weight: 600; }
.mem-dotsep { color: var(--text3); }
.mem-imp { font-variant-numeric: tabular-nums; }
.mem-grow { flex: 1 1 auto; }
.mem-time { color: var(--text3); flex: 0 0 auto; }

/* 标签 + 状态 */
.mem-meta { gap: 8px; }
.mem-tags { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; overflow: visible; }
.mem-tagchip { font-size: 11.5px; font-weight: 600; color: var(--text3); white-space: nowrap; }
.mem-state {
  font-size: 10.5px; font-weight: 700; border-radius: 7px; padding: 2px 8px; flex: 0 0 auto;
  line-height: 1.5;
}
.mem-state.s-unresolved, .md-chip.state.s-unresolved { color: var(--blue); background: rgba(46,111,224,.13); }
.mem-state.s-digested, .md-chip.state.s-digested { color: #1f8a5b; background: rgba(31,138,91,.13); }
.mem-state.s-archived, .md-chip.state.s-archived { color: var(--text2); background: rgba(139,137,127,.18); }

/* 置顶标记 */
.mem-pin {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: rgba(203,115,81,.14); border-radius: 8px; padding: 3px 8px 3px 6px;
}

/* 情绪词(直观显示情感基调) */
.mem-mood {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 12.5px; font-weight: 600; color: var(--text2); white-space: nowrap;
}

/* 详情弹层 */
.mem-detail-sheet { max-height: 90%; }
.sheet-edit {
  position: absolute; right: 20px; top: 12px;
  min-width: 44px; height: 44px; padding: 0 16px; border-radius: 22px;
  background: var(--btn); color: var(--icon);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; box-shadow: var(--btn-shadow);
}
.sheet-edit:active { transform: scale(.94); }
.md-top { display: flex; align-items: center; gap: 11px; margin: 2px 4px 14px; }
.mem-dot.lg { width: 15px; height: 15px; }
.md-name { font-size: 21px; font-weight: 700; color: var(--text); flex: 1 1 auto; font-family: var(--aurelius-ui); }
.md-name-input {
  flex: 1 1 auto; border: none; border-bottom: 1.5px solid var(--accent); background: none;
  font-family: var(--aurelius-ui); font-size: 21px; font-weight: 700; color: var(--text); outline: none; padding: 2px 0;
}
.md-content { font-size: 15.5px; line-height: 1.62; color: var(--text); margin: 0 4px 8px; text-wrap: pretty; }
.md-content-input {
  width: 100%; border: 1.5px solid var(--divider); border-radius: 14px; background: var(--bg);
  font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--text);
  padding: 12px 14px; outline: none; resize: none; margin-bottom: 8px;
}
.md-section-label { font-size: 12.5px; font-weight: 700; color: var(--text2); letter-spacing: .5px; margin: 18px 4px 9px; }
.md-coord { display: none; }
.md-hint { font-size: 12.5px; color: var(--text2); font-weight: 500; margin: 8px 4px 0; text-wrap: pretty; }
.md-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.md-chip { font-size: 12.5px; font-weight: 600; color: var(--text2); background: var(--pill); border-radius: 10px; padding: 6px 12px; }
.md-chip.domain { color: var(--accent); background: rgba(203,115,81,.13); }
.md-chip.feel { color: #c2410c; background: rgba(194,65,12,.12); }
.md-meta { font-size: 12.5px; color: var(--text3); font-weight: 500; margin: 16px 4px 6px; }
.md-actions { display: flex; gap: 10px; margin-top: 10px; }
.md-act {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 16px; background: var(--card);
  font-size: 14.5px; font-weight: 600; color: var(--text); transition: filter .15s ease;
}
.md-act.on { background: rgba(203,115,81,.14); color: var(--accent); }
.md-act.danger { color: #d3543f; }
.md-act:active { filter: brightness(.96); }

/* ===================== 记忆中心 Hub 子标签 ===================== */
.hub-tabs {
  flex: 0 0 auto; display: flex; gap: 5px;
  margin: 0 18px 14px; padding: 5px;
  background: var(--pill); border-radius: 17px;
}
.hub-tab {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 4px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--text2);
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.hub-tab svg { color: var(--text3); transition: color .22s ease; }
.hub-tab.on { background: var(--btn); color: var(--text); box-shadow: var(--btn-shadow); }
.hub-tab.on svg { color: var(--accent); }

/* 记忆概览条里的搜索按钮 */
.mem-search-btn {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--btn); color: var(--icon); box-shadow: var(--btn-shadow);
}
.mem-search-btn.on { background: var(--accent); color: #fff; }

/* 锚点容量条底部 + 新增 */
.anc-cap-foot { display: flex; align-items: baseline; gap: 10px; }
.anc-add {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--btn); color: var(--icon); box-shadow: var(--btn-shadow);
}
.anc-add:active { transform: scale(.92); }

/* ===================== 信 Letters ===================== */
.lt-filter {
  flex: 0 0 auto; display: flex; gap: 20px; align-items: center;
  margin: 0 26px 14px;
}
.lt-filter-tab {
  font-size: 14.5px; font-weight: 600; color: var(--text3);
  padding: 2px 0; position: relative; white-space: nowrap;
  transition: color .18s ease;
}
.lt-filter-tab.on { color: var(--text); }
.lt-filter-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2.5px; border-radius: 2px; background: var(--accent);
}

/* 写信 悬浮按钮 */
.lt-fab {
  position: absolute; right: 20px; bottom: 26px; z-index: 8;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(168,92,60,.6); transition: transform .12s ease;
}
.lt-fab:active { transform: scale(.92); }

.lt-card {
  background: var(--btn); border-radius: 20px; padding: 16px;
  display: flex; flex-direction: column; gap: 11px; width: 100%; text-align: left;
  border: 1px solid var(--btn-line); box-shadow: var(--btn-shadow);
  transition: transform .12s ease, filter .2s ease;
}
.lt-card:active { transform: scale(.985); filter: brightness(.98); }
.lt-card-head { display: flex; align-items: center; gap: 12px; }
.lt-seal {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; font-family: var(--aurelius-ui);
}
.lt-seal.from-ai { color: var(--accent); background: rgba(203,115,81,.15); }
.lt-seal.from-user { color: var(--blue); background: rgba(46,111,224,.13); }
.lt-card-info { flex: 1 1 auto; min-width: 0; }
.lt-title { font-size: 16.5px; font-weight: 600; color: var(--text); font-family: var(--aurelius-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-route { font-size: 12px; color: var(--text3); font-weight: 500; margin-top: 2px; }
.lt-preview {
  font-size: 13.5px; line-height: 1.6; color: var(--text2); font-weight: 500; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 读信 — 居中信卡,像一封真正的信 */
.lt-modal-scrim {
  position: absolute; inset: 0; z-index: 13;
  background: var(--sheet-scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 22px;
  opacity: 0; pointer-events: none; transition: opacity .32s ease;
}
.lt-modal-scrim.open { opacity: 1; pointer-events: auto; }
.lt-letter {
  position: relative; width: 100%; max-width: 330px; max-height: 78%;
  display: flex; flex-direction: column;
  background: var(--sheet); border-radius: 22px;
  padding: 30px 22px 24px;
  box-shadow: 0 26px 64px rgba(0,0,0,.34);
  transform: scale(.9) translateY(8px); transition: transform .34s cubic-bezier(.32,.72,0,1);
}
.lt-modal-scrim.open .lt-letter { transform: scale(1) translateY(0); }
.lt-close {
  position: absolute; right: 13px; top: 13px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card); color: var(--icon);
  display: flex; align-items: center; justify-content: center;
}
.lt-close:active { transform: scale(.92); }
.lt-letter-scroll { overflow-y: auto; }
.lt-letter-scroll::-webkit-scrollbar { width: 0; }
.lt-paper-route { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .5px; text-align: center; }
.lt-paper-title { font-size: 21px; font-weight: 700; color: var(--text); font-family: var(--aurelius-ui); text-align: center; margin: 9px 8px 20px; line-height: 1.3; text-wrap: pretty; }
.lt-paper-greet { font-size: 16px; font-family: var(--aurelius-ui); color: var(--text); margin-bottom: 12px; }
.lt-paper-body {
  font-size: 16px; line-height: 1.95; color: var(--text); font-family: var(--aurelius-ui);
  text-wrap: pretty; white-space: pre-wrap;
}
.lt-paper-sign { font-size: 16px; font-family: var(--aurelius-ui); color: var(--text2); text-align: right; margin-top: 22px; }
.lt-from-pick { display: flex; gap: 8px; margin-bottom: 14px; }
.lt-from-pick button {
  flex: 1 1 0; padding: 11px; border-radius: 14px;
  background: var(--card); color: var(--text2); font-size: 14px; font-weight: 600;
}
.lt-from-pick button.on { background: rgba(203,115,81,.14); color: var(--accent); }
.lt-title-input {
  width: 100%; border: none; border-bottom: 1.5px solid var(--divider); background: none;
  font-family: var(--aurelius-ui); font-size: 19px; font-weight: 700; color: var(--text);
  outline: none; padding: 6px 2px; margin-bottom: 12px;
}
.mem-seg {
  flex: 0 0 auto; margin: 0 22px 4px;
  display: flex; gap: 4px;
  background: var(--pill); border-radius: 16px; padding: 4px;
}
.mem-seg-btn {
  flex: 1 1 0; padding: 9px 6px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; color: var(--text2);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .2s ease, color .2s ease;
}
.mem-seg-btn.on { background: var(--btn); color: var(--text); box-shadow: var(--btn-shadow); }
.mem-seg-n {
  font-size: 11.5px; font-weight: 700; color: var(--text2);
  background: var(--bg); border-radius: 8px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.mem-seg-btn.on .mem-seg-n { color: var(--accent); }

/* ===================== 锚点 Anchors ===================== */
.anc-cap {
  flex: 0 0 auto; margin: 0 22px 14px; padding: 14px 16px;
  background: var(--btn); border-radius: 18px;
  border: 1px solid var(--btn-line); box-shadow: var(--btn-shadow);
}
.anc-cap-head { display: flex; align-items: center; gap: 8px; }
.anc-cap-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.anc-cap-count { font-size: 13px; color: var(--text2); font-weight: 500; }
.anc-cap-count b { font-size: 17px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.anc-cap-bar { height: 6px; border-radius: 4px; background: var(--bg); overflow: hidden; margin: 10px 0 7px; }
.anc-cap-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s ease; }
.anc-cap-hint { font-size: 12px; color: var(--text3); font-weight: 500; }

.anc-card {
  background: var(--btn); border-radius: 20px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--btn-line); box-shadow: var(--btn-shadow);
  transition: transform .12s ease, filter .2s ease;
}
.anc-card:active { transform: scale(.985); filter: brightness(.98); }
.anc-card-top { display: flex; align-items: center; }
.anc-domain {
  font-size: 11.5px; font-weight: 700; color: var(--accent); letter-spacing: .5px;
  background: rgba(203,115,81,.13); border-radius: 8px; padding: 3px 10px;
}
.anc-since { font-size: 12px; color: var(--text3); font-weight: 500; }
.anc-text { font-size: 15.5px; line-height: 1.55; color: var(--text); font-weight: 500; font-family: var(--aurelius-ui); text-wrap: pretty; }

.anc-mark { color: var(--accent); display: flex; justify-content: center; margin: 4px 0 14px; opacity: .85; }
.anc-detail-text { font-size: 19px; line-height: 1.6; color: var(--text); font-family: var(--aurelius-ui); text-align: center; margin: 0 6px 6px; text-wrap: pretty; }
.anc-note {
  font-size: 13px; line-height: 1.55; color: var(--text2); font-weight: 500;
  background: var(--card); border-radius: 14px; padding: 12px 14px; margin-top: 16px; text-wrap: pretty;
}
.anc-add { background: var(--pill); }

/* ===================== 计划 Plans ===================== */
.plan-intro { flex: 0 0 auto; font-size: 14.5px; color: var(--text2); font-weight: 500; padding: 0 24px 14px; font-family: var(--aurelius-ui); }
.plan-seg { margin-bottom: 12px; }

.plan-card {
  background: var(--btn); border-radius: 20px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--btn-line); box-shadow: var(--btn-shadow);
}
.plan-card.st-done, .plan-card.st-dropped { opacity: .72; }
.plan-top { display: flex; align-items: center; }
.plan-badge { font-size: 11px; font-weight: 700; border-radius: 8px; padding: 3px 10px; }
.plan-badge.st-active { color: var(--accent); background: rgba(203,115,81,.14); }
.plan-badge.st-done { color: #1f8a5b; background: rgba(31,138,91,.14); }
.plan-badge.st-dropped { color: var(--text2); background: rgba(139,137,127,.18); }
.plan-due { font-size: 12px; color: var(--text3); font-weight: 500; }
.plan-text { font-size: 15px; line-height: 1.55; color: var(--text); font-weight: 500; text-wrap: pretty; }
.plan-card.st-done .plan-text, .plan-card.st-dropped .plan-text { text-decoration: line-through; text-decoration-color: var(--text3); }
.plan-foot { display: flex; align-items: center; gap: 10px; }
.plan-made { font-size: 12px; color: var(--text3); font-weight: 500; }
.plan-acts { display: flex; gap: 8px; }
.plan-act {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; border-radius: 12px; padding: 7px 14px;
  background: var(--btn); color: var(--text); box-shadow: var(--btn-shadow);
  transition: filter .15s ease;
}
.plan-act:active { filter: brightness(.95); }
.plan-act.done { color: #1f8a5b; }
.plan-act.drop { color: var(--text2); }
.plan-act.react { color: var(--accent); }

.composer-wrap { position: relative; }
.clawd-pet {
  position: absolute;
  bottom: 100%;
  right: 18px;
  width: 84px;
  height: 84px;
  z-index: 6;
  cursor: pointer;
  overflow: hidden;
}
.clawd-pet svg { width: 100% !important; height: 100% !important; display: block; }

.spark-thinking { display: inline-block; overflow: hidden; line-height: 0; vertical-align: middle; flex: 0 0 auto; min-width: 0; min-height: 0; color: var(--accent); }
.spark-thinking-stack { display: block; animation: spark-step 810ms steps(9, jump-none) infinite; }
@keyframes spark-step { from { transform: translateY(0); } to { transform: translateY(-88.8889%); } }

/* ===================== message menu (long-press) ===================== */
.msg-menu-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .25);
  opacity: 0;
  animation: menuScrimIn .18s ease forwards;
}
@keyframes menuScrimIn { to { opacity: 1; } }
.msg-menu-scrim.closing {
  animation: menuScrimOut .15s ease forwards;
}
@keyframes menuScrimOut { from { opacity: 1; } to { opacity: 0; } }

.msg-menu {
  position: fixed; z-index: 51;
  background: var(--sheet);
  border-radius: 16px;
  padding: 6px;
  min-width: 170px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .08);
  opacity: 0;
  transform: scale(.92);
  animation: menuIn .18s cubic-bezier(.32, .72, 0, 1) forwards;
}
@keyframes menuIn { to { opacity: 1; transform: scale(1); } }
.msg-menu.closing {
  animation: menuOut .15s ease forwards;
}
@keyframes menuOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.92); } }

.msg-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 16px;
  border-radius: 11px;
  font-family: var(--aurelius-ui);
  font-size: 15.5px; font-weight: 600; color: var(--text);
  transition: background .12s ease;
}
.msg-menu-item:active { background: var(--pill); }
.msg-menu-item .menu-icon { font-size: 18px; flex: 0 0 auto; line-height: 1; }
.msg-menu-item.danger { color: #d3543f; }

/* ===================== user message column ===================== */
.msg-user-col {
  display: flex; flex-direction: column; align-items: flex-end;
  max-width: 80%;
}

/* ===================== image preview in composer ===================== */
.upload-error {
  font-size: 13px;
  color: #d3543f;
  padding: 6px 14px 2px;
  animation: fadeIn 0.2s ease;
}

.image-preview-bar {
  display: flex;
  gap: 8px;
  padding: 8px 12px 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.image-preview-bar::-webkit-scrollbar { width: 0; height: 0; }
.image-preview-item {
  position: relative;
  flex: 0 0 auto;
}
.image-preview-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}
.image-preview-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* ===================== images in messages ===================== */
.msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.msg-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
}

/* ===================== full screen image viewer ===================== */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.image-viewer img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
}

/* Image sending compatibility classes required by the chat upload flow. */
.image-preview {
  display: flex;
  gap: 8px;
  padding: 8px 12px 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.msg-user .msg-images { justify-content: flex-end; }
.assistant-turn .msg-images {
  justify-content: flex-start;
  margin: 0 0 8px 2px;
}
.msg-image {
  max-width: 70%;
  height: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.image-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.image-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
}

/* ---------- CHATNEST-INSPIRED ADDITIONS ---------- */

/* vote buttons in action-row */
.action-row .vote-btn { opacity: .6; }
.action-row .vote-btn.active { opacity: 1; color: var(--accent); }

/* TTS speak button active state */
.action-row button.on { color: var(--accent); }

/* inline message edit */
.msg-user.editing { padding: 4px 0; }
.edit-banner-mini {
  font-size: 12px; color: var(--text3); padding: 0 0 6px;
  font-family: var(--aurelius-ui);
}
.edit-textarea {
  width: 100%; min-height: 40px; max-height: 132px;
  padding: 10px 14px; border: 0; outline: 0; resize: none;
  background: var(--bubble-user, #eeeeec); color: var(--text1);
  border-radius: 18px; font-size: 16px; line-height: 1.45;
  font-family: inherit; box-sizing: border-box;
}
.edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.edit-cancel {
  padding: 6px 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text2); font-size: 14px;
}
.edit-send {
  padding: 6px 16px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 500;
}
.edit-send:disabled { opacity: .4; }

/* composer drag-over highlight */
.composer-wrap.drag-over .composer {
  border-color: var(--accent);
  background: rgba(217, 119, 87, .06);
}

/* activity row clickable */
.activity-row.clickable { cursor: pointer; }
.activity-row.clickable:active { opacity: .6; }

/* tool detail viewer */
.tool-detail-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .2s ease;
}
.tool-detail-card {
  width: 100%; max-width: 520px;
  max-height: 70vh; overflow: hidden;
  background: var(--bg-primary, #f9f9f7);
  border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  animation: toolDetailUp .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes toolDetailUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tool-detail-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.06));
}
.tool-detail-icon { font-size: 18px; flex: 0 0 auto; }
.tool-detail-title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text1, #1f1e1d);
}
.tool-detail-close {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  font-size: 22px; color: var(--text2, #6e6d66);
}
.tool-detail-body { padding: 14px 18px 24px; overflow-y: auto; }
.tool-detail-label {
  font-size: 12px; font-weight: 600; opacity: .5;
  margin-bottom: 6px; color: var(--text1, #1f1e1d);
}
.tool-detail-pre {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  background: var(--bg-sunken, #e6e6e4);
  padding: 10px 12px; border-radius: 10px;
  color: var(--text1, #1f1e1d);
  margin: 0; max-height: 50vh; overflow-y: auto;
}