:root, [data-theme="day"] {
  --wallpaper-veil: rgba(255,255,255,0.32);
  --veil-blur: 3px;
  --glass-structure: rgba(255,255,255,0.62);
  --glass-bubble: rgba(255,255,255,0.42);
  --glass-bubble-user: rgba(214,228,232,0.5);
  --ink: #2E3338;
  --ink-soft: #737D86;
  --mist: #A9BFC9;
  --mist-text: #567580;
  --accent: #7FA8B8;
  --highlight: rgba(255,255,255,0.5);
  --shadow: 0 8px 32px rgba(0,0,0,0.08);
  --divider: rgba(58,63,69,0.08);
  --dim: rgba(30,36,42,0.25);
}

[data-theme="night"] {
  --wallpaper-veil: rgba(8,10,14,0.38);
  --veil-blur: 3px;
  --glass-structure: rgba(22,26,34,0.62);
  --glass-bubble: rgba(34,40,50,0.48);
  --glass-bubble-user: rgba(46,58,70,0.52);
  --ink: #E8ECF0;
  --ink-soft: #8B95A3;
  --mist: #7E95A6;
  --mist-text: #93ACBD;
  --accent: #8FB6C7;
  --highlight: rgba(255,255,255,0.14);
  --shadow: 0 8px 32px rgba(0,0,0,0.25);
  --divider: rgba(232,236,240,0.08);
  --dim: rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  font-family: 'Noto Sans SC', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}

.app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wallpaper {
  position: absolute;
  inset: -8px;
  background-size: cover;
  background-position: center;
  filter: blur(var(--veil-blur));
  z-index: 0;
  transition: opacity .6s ease;
}
.wallpaper.day { background-image: url("/static/img/wallpaper-day.jpg"); opacity: 1; }
.wallpaper.night { background-image: url("/static/img/wallpaper-night.jpg"); opacity: 0; }
[data-theme="night"] .wallpaper.day { opacity: 0; }
[data-theme="night"] .wallpaper.night { opacity: 1; }

.veil {
  position: absolute;
  inset: 0;
  background: var(--wallpaper-veil);
  z-index: 1;
  transition: background .5s ease;
}

.glass-l1 {
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  background: var(--glass-structure);
  box-shadow: inset 0 0 0 1px var(--highlight), var(--shadow);
  transition: background .5s ease;
}

.glass-l2 {
  background-color: var(--glass-bubble);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px var(--highlight), var(--shadow);
  transition: background-color .5s ease;
}

/* 顶部状态条 */
.topbar {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-radius: 0 0 18px 18px;
}
.topbar .menu-btn, .topbar .theme-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar .status {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* 消息滚动区 */
.scroll {
  position: relative;
  z-index: 5;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: none;
  padding: 14px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 水痕日期分隔线 */
.trace-sep { display:flex; align-items:center; justify-content:center; margin:6px 0 2px; position:relative; user-select:none; }
.trace-sep svg { position:absolute; width:100%; height:20px; }
.trace-chip {
  position:relative;
  font-family:'JetBrains Mono',monospace; font-weight:300;
  font-size:12px; letter-spacing:.16em; color:var(--ink-soft);
  padding:4px 14px; border-radius:10px;
  box-shadow: inset 0 0 0 1px var(--highlight);
}

/* 消息气泡 */
.msg { display:flex; flex-direction:column; max-width:82%; animation:condense .18s ease both; position:relative; }
.msg.ke { align-self:flex-start; }
.msg.me { align-self:flex-end; align-items:flex-end; }
@keyframes condense { from { opacity:0; transform: scale(.96); } to { opacity:1; transform: scale(1); } }

.bubble {
  padding:11px 15px; border-radius:16px;
  font-size:16px; line-height:1.7; font-weight:300;
  letter-spacing:.01em; color:var(--ink);
}
.msg.ke .bubble { border-top-left-radius:6px; }
.msg.me .bubble { background-color:var(--glass-bubble-user); border-top-right-radius:6px; background-image: none; }
.bubble img.msg-image { display:block; max-width:100%; max-height:280px; border-radius:12px; margin-bottom:6px; object-fit:cover; }
.bubble img.msg-image:last-child { margin-bottom:0; }
.stamp {
  font-family:'JetBrains Mono',monospace; font-weight:300;
  font-size:12px; color:var(--ink-soft); letter-spacing:.02em;
  margin-top:5px; padding:0 4px;
}

/* 思考链 */
.thinking { margin-bottom:6px; padding:0 2px; max-width:100%; }
.thinking-text {
  font-size:12.5px; line-height:1.65; font-weight:300;
  color:var(--mist-text); letter-spacing:.02em;
  padding:6px 10px; border-radius:10px;
  background-color: color-mix(in srgb, var(--glass-bubble) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  white-space: pre-wrap;
}
.thinking.collapsed .thinking-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.65; max-width:230px; }
.thinking-toggle {
  background:none; border:none; cursor:pointer;
  font-size:11px; font-weight:300; color:var(--mist-text);
  letter-spacing:.18em; padding:4px 4px 0; display:block;
}
.thinking-toggle:focus-visible { outline:1.5px solid var(--accent); outline-offset:2px; border-radius:4px; }
.thinking:empty, .thinking:not(:has(.thinking-text)) { display: none; }

/* Markdown 内容样式（气泡内） */
.bubble p { margin: 0 0 .6em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble strong { font-weight: 500; color: var(--ink); }
.bubble em { font-style: italic; }
.bubble a { color: var(--accent); text-decoration: underline; }
.bubble ul, .bubble ol { margin: .4em 0; padding-left: 1.4em; }
.bubble li { margin: .2em 0; }
.bubble blockquote {
  margin: .5em 0; padding: 2px 12px;
  border-left: 2px solid var(--mist);
  color: var(--ink-soft);
}
.bubble code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .9em;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  padding: .1em .35em;
  border-radius: 4px;
}
.bubble pre {
  margin: .6em 0; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  overflow-x: auto;
}
.bubble pre code { background: none; padding: 0; font-size: 13px; }

/* 打字机光标 */
.bubble .caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--accent); margin-left: 1px;
  animation: blink 1s step-start infinite; vertical-align: text-bottom;
}
@keyframes blink { 50% { opacity: 0; } }

/* 底部输入区 */
.composer {
  position: relative; z-index: 10; flex-shrink: 0;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
}
.composer-preview {
  display:none; align-items:center; gap:8px; margin-bottom:8px;
  position:relative; width:fit-content;
}
.composer-preview.show { display:flex; }
.composer-preview img {
  width:52px; height:52px; object-fit:cover; border-radius:10px;
  box-shadow: inset 0 0 0 1px var(--highlight);
}
.composer-preview-remove {
  position:absolute; top:-6px; left:44px; width:18px; height:18px;
  border-radius:50%; border:none; cursor:pointer;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  color:#fff; font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.composer-tools { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.chip.model {
  display:flex; align-items:center; gap:6px;
  background: color-mix(in srgb, var(--glass-bubble) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border: none; border-radius: 20px; padding: 5px 12px;
  cursor: pointer; color: var(--ink);
}
.chip.model .dot { width:6px; height:6px; border-radius:50%; background: var(--accent); }
.chip.model .name { font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 400; }
.budget-btn {
  display:flex; align-items:center; gap:3px;
  background: color-mix(in srgb, var(--glass-bubble) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border: none; border-radius: 20px; padding: 5px 12px;
  cursor: pointer; color: var(--ink);
}
.budget-bar { width:3px; height:9px; border-radius:2px; background: var(--divider); }
.budget-btn[data-level="1"] .budget-bar:nth-child(1),
.budget-btn[data-level="2"] .budget-bar:nth-child(-n+2),
.budget-btn[data-level="3"] .budget-bar:nth-child(-n+3) { background: var(--accent); }
.budget-label { font-size: 11px; color: var(--ink-soft); margin-left: 3px; }

.composer-main { display:flex; align-items:flex-end; gap:8px; }
.icon-btn {
  flex-shrink:0; width:36px; height:36px; border-radius:11px; border:none;
  background: color-mix(in srgb, var(--glass-bubble) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  color: var(--ink); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.field {
  flex:1;
  background: color-mix(in srgb, var(--glass-bubble) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border:none; border-radius:13px; padding:10px 14px;
  font-family:'Noto Sans SC',sans-serif;
  font-size:16px; font-weight:300; line-height:1.6;
  color:var(--ink); resize:none; max-height:120px; min-height:42px;
  transition:box-shadow .3s;
}
.field::placeholder { color:var(--ink-soft); font-weight:300; }
.field:focus { outline:none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.send {
  flex-shrink:0; width:40px; height:40px; border-radius:12px; border:none;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  color:var(--ink); font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, transform .15s;
}
.send:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.send:active { transform:scale(.94); }
.send:disabled { opacity: .5; cursor: default; }
.send:focus-visible { outline:1.5px solid var(--accent); outline-offset:2px; }

/* 选择面板（模型 / 思考深度） */
.picker-dim {
  position: absolute; inset: 0; z-index: 22;
  background: var(--dim); opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.picker-dim.open { opacity: 1; pointer-events: auto; }
.picker-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 23;
  border-radius: 18px 18px 0 0;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .25s ease;
  max-height: 60vh; overflow-y: auto;
  pointer-events: none;
}
.picker-sheet.open { transform: none; pointer-events: auto; }
.picker-title {
  font-weight: 300; font-size: 13px; letter-spacing: .24em;
  color: var(--ink-soft); margin-bottom: 12px;
}
.picker-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 14.5px; font-weight: 300; color: var(--ink);
  background: none; border: none; border-bottom: 1px solid var(--divider);
  padding: 10px 2px; text-align: left; cursor: pointer;
}
.picker-option:last-child { border-bottom: none; }
.picker-option .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--divider); flex-shrink: 0; }
.picker-option.active { font-weight: 400; }
.picker-option.active .dot { background: var(--accent); }
.picker-option:focus-visible { outline: 1.5px solid var(--accent); outline-offset: -2px; border-radius: 6px; }

.error-note {
  align-self: center;
  font-size: 13px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--glass-bubble) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border-radius: 10px;
  padding: 8px 14px;
}

/* 窗台抽屉 */
.drawer-dim {
  position: absolute; inset: 0; z-index: 30;
  background: var(--dim); opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.drawer-dim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 31;
  width: min(78vw, 300px);
  padding: calc(20px + env(safe-area-inset-top)) 14px 20px;
  transform: translateX(-100%); transition: transform .25s ease;
  pointer-events: none;
  border-radius: 0 18px 18px 0;
}
.drawer.open { transform: none; pointer-events: auto; }
.drawer-item {
  position: relative;
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 14.5px; font-weight: 300; color: var(--ink);
  background: none; border: none; border-radius: 10px;
  padding: 10px 8px; text-align: left; cursor: pointer;
}
.drawer-item:hover { background: color-mix(in srgb, var(--glass-bubble) 50%, transparent); }
.drawer-item-icon { font-size: 15px; color: var(--ink-soft); width: 18px; text-align: center; }
.drawer-item-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  margin-left: auto;
}

/* Backstage 成本面板：全应用玻璃透明度最低的一页 */
.backstage {
  position: absolute; inset: 0; z-index: 25;
  display: flex; flex-direction: column;
  transform: translateX(100%); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  background: color-mix(in srgb, var(--glass-structure) 94%, transparent);
}
.backstage.open { transform: none; opacity: 1; pointer-events: auto; }
.backstage-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--divider);
}
.back-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--ink-soft); padding: 4px 6px;
}
.backstage-title {
  font-family: 'JetBrains Mono', monospace; font-weight: 300;
  font-size: 13px; letter-spacing: .2em; color: var(--ink-soft);
}
.backstage-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.backstage-block {
  background: color-mix(in srgb, var(--glass-bubble) 40%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border-radius: 12px; padding: 12px 14px;
}
.backstage-row { display: flex; align-items: baseline; justify-content: space-between; }
.backstage-label { font-size: 13px; color: var(--ink-soft); font-weight: 300; }
.backstage-value {
  font-family: 'JetBrains Mono', monospace; font-weight: 400;
  font-size: 18px; color: var(--ink);
}
.backstage-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--ink-soft); margin-top: 4px;
}
.backstage-empty { font-size: 12.5px; color: var(--ink-soft); }
.model-split-row { display: flex; align-items: center; gap: 8px; }
.model-split-row + .model-split-row { margin-top: 8px; }
.model-split-name {
  font-size: 12.5px; color: var(--ink-soft); width: 88px; flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-split-track { flex: 1; height: 5px; border-radius: 3px; background: var(--divider); overflow: hidden; }
.model-split-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.model-split-pct {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--ink-soft); width: 32px; text-align: right; flex-shrink: 0;
}
.backstage-progress-track { height: 8px; border-radius: 4px; background: var(--divider); overflow: hidden; }
.backstage-progress-fill {
  display: block; height: 100%; border-radius: 4px; background: var(--accent);
  transition: width .3s ease;
}
.backstage-progress-note { font-size: 12px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; }
.backstage-limit-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.backstage-limit-row input {
  width: 80px; background: color-mix(in srgb, var(--glass-bubble) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border: none; border-radius: 8px; padding: 6px 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink);
}
.backstage-limit-row input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.backstage-save-btn {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer;
  font-size: 13px; color: var(--ink);
}
.backstage-save-btn:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* 登录页 */
.login-wrap {
  position: relative; z-index: 5;
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 300px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 22px; border-radius: 20px;
}
.login-title {
  font-family: 'Noto Sans SC', sans-serif; font-weight: 400;
  font-size: 20px; color: var(--ink); text-align: center; letter-spacing: .04em;
}
.login-input {
  background: color-mix(in srgb, var(--glass-bubble) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border: none; border-radius: 13px; padding: 11px 14px;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 16px; font-weight: 300; color: var(--ink);
  transition: box-shadow .3s;
}
.login-input::placeholder { color: var(--ink-soft); font-weight: 300; }
.login-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.login-error {
  font-size: 12.5px; color: var(--ink-soft); text-align: center; line-height: 1.6;
}
.login-btn {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--highlight);
  border: none; border-radius: 13px; padding: 11px; cursor: pointer;
  font-family: 'Noto Sans SC', sans-serif; font-size: 15px; font-weight: 400; color: var(--ink);
  transition: background .25s, transform .15s;
}
.login-btn:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.login-btn:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .msg, .wallpaper, .veil, .glass-l1, .glass-l2, .send, .bubble .caret, .picker-dim, .picker-sheet, .drawer-dim, .drawer, .backstage, .login-btn, .login-input { animation: none !important; transition: none !important; }
}