/* 设计 token：灰白负责结构、蓝白负责交互。
   亮色为默认，html[data-theme="dark"] 覆盖；自定义强调色由 theme.js 覆盖 --accent。 */
:root {
  --bg: #ffffff;
  --sidebar: #f9f9f9;
  --surface: #ffffff;

  /* 结构（灰） */
  --control-bg: #f7f7f7;
  --control-hover: #eeeeee;
  --control-active: #e9e9e9;
  --surface-hover: var(--control-hover);
  --surface-active: var(--control-active);
  --border-subtle: #eeeeee;
  --border-control: #e3e3e3;
  --border: #e9e9e9;
  --border-2: #dedede;
  --header-bg: rgba(255, 255, 255, .9);
  --drop-bg: rgba(255, 255, 255, .7);

  --text: #0d0d0d;
  --text-2: #5d5d5d;
  --text-3: #8f8f8f;

  --user-bubble: #f4f4f4;
  --code-bg: #f7f7f8;
  --code-inline: #f0f0f0;
  --send-off-bg: #f7f7f7;
  --send-off-fg: #b0b0b0;

  /* 交互（蓝） */
  --interactive: #0285ff;
  --interactive-soft: rgba(2, 133, 255, .10);
  --interactive-border: rgba(2, 133, 255, .32);
  --link: #0285ff;
  --reason-track: #f3f3f3;
  --accent: var(--interactive);
  --accent-contrast: #ffffff;

  --danger: #d92d20;
  --ok: #067647;
  --shadow-popover: 0 8px 28px rgba(0, 0, 0, .10);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-composer: 26px;
  --col: 48rem;

  /* ---- Portal 设计系统（Agent 聊天页继续用上面的 token，互不影响） ---- */
  --page: #f7f7f8;
  --surface-muted: #f3f4f6;
  --border-strong: #dadade;
  --text-secondary: #6b6b70;
  --text-tertiary: #9a9aa0;
  --brand: #0a84ff;
  --brand-hover: #0077e6;
  --brand-soft: rgba(10, 132, 255, .09);
  --grid-line: #d9d9de;
  --radius-control: 10px;
  --radius-cta: 12px;
  --radius-card: 16px;
  --radius-popover: 14px;
  --radius-large: 22px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-raised: 0 12px 32px rgba(16, 24, 40, .10);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #212121;
  --sidebar: #171717;
  --surface: #212121;
  --control-bg: #2a2a2a;
  --control-hover: #2f2f2f;
  --control-active: #303030;
  --border-subtle: #2c2c2c;
  --border-control: #3a3a3a;
  --border: #333333;
  --border-2: #4a4a4a;
  --header-bg: rgba(33, 33, 33, .9);
  --drop-bg: rgba(33, 33, 33, .72);
  --text: #ececec;
  --text-2: #b4b4b4;
  --text-3: #8f8f8f;
  --user-bubble: #303030;
  --code-bg: #171717;
  --code-inline: #2f2f2f;
  --send-off-bg: #2a2a2a;
  --send-off-fg: #7a7a7a;
  --interactive: #4da3ff;
  --interactive-soft: rgba(77, 163, 255, .16);
  --interactive-border: rgba(77, 163, 255, .38);
  --link: #7cb8ff;
  --reason-track: #2f2f2f;
  --accent: var(--interactive);
  --accent-contrast: #0d0d0d;
  --shadow-popover: 0 8px 28px rgba(0, 0, 0, .5);
  --page: #131316;
  --surface-muted: #1c1c20;
  --border-strong: #3b3b41;
  --text-secondary: #a3a3ab;
  --text-tertiary: #707078;
  --brand: #0a84ff;
  --brand-hover: #2f97ff;
  --brand-soft: rgba(10, 132, 255, .16);
  --grid-line: #3a3a40;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text); overflow: hidden;
  font: 15.5px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--interactive-soft); }
:focus-visible { outline: 2px solid var(--interactive-border); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
[hidden] { display: none !important; }

.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i.lg { width: 18px; height: 18px; }
.i.sm { width: 13px; height: 13px; }
.spacer { flex: 1; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes screenOut { to { opacity: 0; transform: translateY(-6px); } }

#app.enter, #login.enter { animation: screenIn .28s cubic-bezier(.2,.8,.2,1); }
#app.leave, #login.leave { animation: screenOut .16s ease forwards; }