/* 主题入口：新增主题时，只需复制一组 [data-theme] 变量，并在 app.js 的 THEMES 里加一项。 */
:root,
[data-theme="vscode"] {
  color-scheme: dark;
  --bg: #181818; --paper: #1e1e1e; --card: #252526;
  --ink: #d4d4d4; --muted: #bbbbbb; --faint: #858585;
  --line: #2b2b2b; --input: #3c3c3c;
  --me: #04395e; --me-ink: #d4d4d4;
  --ok: #89d185; --wait: #cca700; --bad: #f48771;
  --send: #0078d4; --send-ink: #ffffff;
  --notice: #2a2416; --notice-ink: #e2c08d;
  --selected: #37373d; --hover: #2a2d2e;
  --radius: 6px; --radius-lg: 12px;
  --font: "PingFang SC", "Avenir Next", "Segoe UI", sans-serif;
}
[data-theme="apple-light"] {
  color-scheme: light;
  --bg: #f4f4f6; --paper: #ffffff; --card: #f5f5f7;
  --ink: #1d1d1f; --muted: #6e6e73; --faint: #86868b;
  --line: #e6e6eb; --input: #f5f5f7;
  --me: #007aff; --me-ink: #ffffff;
  --ok: #248a3d; --wait: #c93400; --bad: #d70015;
  --send: #007aff; --send-ink: #ffffff;
  --notice: #fff6e5; --notice-ink: #8a5a00;
  --selected: #e3e6ee; --hover: #ececf0;
  --radius: 14px; --radius-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
}
[data-theme="apple-dark"] {
  color-scheme: dark;
  --bg: #000000; --paper: #1c1c1e; --card: #2c2c2e;
  --ink: #f5f5f7; --muted: #aeaeb2; --faint: #98989d;
  --line: #38383a; --input: #2c2c2e;
  --me: #0a84ff; --me-ink: #ffffff;
  --ok: #30d158; --wait: #ffd60a; --bad: #ff453a;
  --send: #0a84ff; --send-ink: #ffffff;
  --notice: #33290f; --notice-ink: #ffd60a;
  --selected: #3a3a3c; --hover: #2c2c2e;
  --radius: 14px; --radius-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
}
[data-theme="minimal"] {
  color-scheme: light;
  --bg: #f6f5f2; --paper: #fffefa; --card: #f7f5f1;
  --ink: #26241f; --muted: #6f675c; --faint: #8a8378;
  --line: #e8e3da; --input: #efeae2;
  --me: #ece7de; --me-ink: #26241f;
  --ok: #2f6f4f; --wait: #b7791f; --bad: #b3261e;
  --send: #2f6f4f; --send-ink: #ffffff;
  --notice: #fbf3e4; --notice-ink: #6d4d12;
  --selected: #e7e2d8; --hover: #efece6;
  --radius: 12px; --radius-lg: 18px;
  --font: "Avenir Next", "PingFang SC", sans-serif;
}
[data-theme="ai"] {
  color-scheme: dark;
  --bg: #111319; --paper: #16181f; --card: #1d2029;
  --ink: #e6e8ee; --muted: #a3abc0; --faint: #8b93a7;
  --line: #262a35; --input: #262a35;
  --me: #232741; --me-ink: #e6e8ee;
  --ok: #4fa96a; --wait: #d19a3a; --bad: #f48771;
  --send: #7c6cf2; --send-ink: #ffffff;
  --notice: #262117; --notice-ink: #e2c08d;
  --selected: #242838; --hover: #1c1f28;
  --radius: 14px; --radius-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--font); background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; }
.hidden { display: none !important; }

.gate { height: 100%; display: grid; place-items: center; background: var(--bg); }
.gate-card { width: min(420px, calc(100% - 32px)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.quiet, .hint, .chat-top p, .task small { color: var(--faint); }
.quiet { margin: 0 0 8px; font-size: 12px; }
.gate-card h1, .chat-top h1 { margin: 0; }
.gate-card h1 { font-size: 24px; font-weight: 650; }
label { display: block; margin: 22px 0 8px; font-size: 12px; color: var(--muted); }
input, textarea { width: 100%; border: 1px solid var(--input); border-radius: 10px; background: var(--input); color: var(--ink); padding: 11px 12px; }
.gate-card button, .send, .choice.yes { border: 0; background: var(--send); color: var(--send-ink); border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.gate-card button { width: 100%; margin-top: 14px; }
.hint { min-height: 18px; margin: 10px 0 0; font-size: 12px; }

.workspace { height: 100%; display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.workspace.sidebar-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.workspace.sidebar-hidden aside { display: none; }
aside { background: var(--bg); border-right: 1px solid var(--line); min-height: 0; display: flex; flex-direction: column; }
.side-top, .chat-top { height: 58px; display: flex; align-items: center; justify-content: space-between; }
.side-top { padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.side-top strong { font-size: 12px; font-weight: 620; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.side-top strong::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--send); }
.text-btn { border: 1px solid transparent; background: transparent; color: var(--faint); cursor: pointer; font-size: 11px; padding: 4px 8px; border-radius: 6px; }
.text-btn:hover { color: var(--muted); background: var(--hover); }
.side-actions { display: flex; gap: 6px; padding: 8px 10px 2px; }
.side-actions button { flex: 1; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
.side-actions button:hover { background: var(--hover); color: var(--ink); }
.tasks { overflow: auto; padding: 4px 8px 16px; }
.side-group { margin-top: 8px; }
.task-row { display: flex; align-items: center; }
.task-row .task { flex: 1; }
.task-row.active .task { background: var(--selected); }
.rename-btn { flex: none; border: 0; background: transparent; color: var(--faint); font-size: 11px; padding: 4px 6px; border-radius: 6px; cursor: pointer; opacity: 0; }
.task-row:hover .rename-btn, .side-group h2:hover .rename-btn, .rename-btn:focus-visible { opacity: 1; }
.side-group h2 { display: flex; align-items: center; justify-content: space-between; }
.picker { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0,0,0,.42); }
.picker-card { width: min(560px, calc(100% - 28px)); max-height: min(720px, calc(100% - 28px)); overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.picker-card h2 { margin: 0 0 4px; font-size: 18px; }
.picker-nav { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.picker-nav span, .picker-list button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-nav span { min-width: 0; color: var(--faint); font-size: 12px; }
.picker-list { max-height: 280px; margin-top: 8px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.picker-list button { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 8px 10px; text-align: left; cursor: pointer; }
.picker-list button:hover { background: var(--hover); }
.picker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
#projectHint { min-height: 18px; margin: 8px 0 0; color: var(--bad); font-size: 12px; }
.group-empty, .group-path { margin: 2px 10px 8px; color: var(--faint); font-size: 12px; }
.group-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks h2 { margin: 16px 10px 5px; font-size: 10.5px; letter-spacing: .1em; color: var(--faint); font-weight: 620; }
.task { position: relative; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: var(--radius); padding: 8px 10px 8px 12px; margin: 1px 0; display: flex; gap: 10px; cursor: pointer; color: inherit; transition: background .1s; }
.task:hover { background: var(--hover); }
.task.active { background: var(--selected); }
.task.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--send); border-radius: 2px; }
.task-text { min-width: 0; flex: 1; }
.task b { display: block; font-size: 13px; font-weight: 500; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task small { display: block; margin-top: 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task.active small { color: var(--muted); }
.dot { width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.dot.wait { background: var(--wait); }
.dot.idle { background: var(--faint); }
.dot.bad { background: var(--bad); }

main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-top { padding: 0 24px; border-bottom: 1px solid var(--line); gap: 12px; }
.chat-top h1 { font-size: 15px; font-weight: 650; }
.chat-top p { margin: 2px 0 0; font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.live { display: flex; align-items: center; gap: 7px; color: var(--ok); font-size: 12px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live.bad { color: var(--bad); }

.theme-wrap { position: relative; }
.theme-menu { position: absolute; right: 0; top: 34px; min-width: 158px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.theme-menu p { margin: 4px 8px 6px; font-size: 10.5px; letter-spacing: .08em; color: var(--faint); }
.theme-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; text-align: left; }
.theme-menu button:hover { background: var(--hover); }
.theme-menu button.on::after { content: "✓"; color: var(--send); }

.thread { flex: 1; min-height: 0; overflow: auto; padding: 26px 8vw 18px; display: flex; flex-direction: column; gap: 15px; }
.me { align-self: flex-end; max-width: min(720px, 82%); background: var(--me); color: var(--me-ink); border-radius: var(--radius-lg) var(--radius-lg) 5px var(--radius-lg); padding: 11px 14px; line-height: 1.7; white-space: pre-wrap; }
.assistant { max-width: min(780px, 94%); }
.who { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 630; }
.body { font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.fold, .tool { width: min(780px, 94%); border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); color: var(--muted); font-size: 12.5px; }
.fold summary, .tool { padding: 8px 12px; }
.fold summary { cursor: pointer; }
.fold .thinking-body { max-height: 220px; overflow: auto; padding: 0 12px 10px; white-space: pre-wrap; line-height: 1.6; }
.tool { display: flex; justify-content: space-between; gap: 12px; }
.notice { margin: 0 8vw 8px; background: var(--notice); color: var(--notice-ink); border-radius: var(--radius); padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notice b { display: block; font-size: 13px; }
.notice span, .bar small { font-size: 12px; color: var(--faint); }
.notice div:last-child, .bar div { display: flex; gap: 8px; }
.choice { border: 1px solid var(--line); background: transparent; color: var(--notice-ink); border-radius: 8px; padding: 6px 10px; cursor: pointer; }

.composer { padding: 0 8vw 22px; }
.box { position: relative; border: 1px solid var(--line); border-radius: 24px; background: var(--card); padding: 12px 16px 10px; }
.box:focus-within { border-color: var(--send); }
textarea { border: 0; border-radius: 0; background: transparent; padding: 2px 0; min-height: 48px; max-height: 160px; resize: none; outline: none; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; min-height: 32px; }
.composer-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.model-control { min-width: 0; display: flex; align-items: center; gap: 4px; }
.model-label { flex: none; padding-left: 4px; color: var(--faint); font-size: 11px; }
#modelSelect { min-width: 0; max-width: min(310px, 50vw); border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 6px 8px; font-size: 12px; cursor: pointer; outline: none; text-overflow: ellipsis; }
#modelSelect:hover:not(:disabled), #modelSelect:focus-visible { background: var(--hover); color: var(--ink); }
#modelSelect:disabled { cursor: default; opacity: .58; }
#modelSelect option { background: var(--card); color: var(--ink); }
#sendBtn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--send); color: var(--send-ink); padding: 0; font-size: 18px; line-height: 32px; cursor: pointer; }
.empty { color: var(--faint); font-size: 13px; }

@media (max-width: 800px) {
  .workspace, .workspace.sidebar-hidden { grid-template-columns: 1fr; }
  aside { display: none; }
  .thread, .composer, .notice { padding-left: 14px; padding-right: 14px; margin-left: 0; margin-right: 0; }
  .chat-top { padding: 0 14px; }
  .chat-top p { display: none; }
}