/* ──────────────────────────────────────────────────────────────
       设计系统 · Design Tokens
       - 字号标尺 Typography Scale
       - 字重 Font Weights
       - 行高 Line Heights
       - 字距 Letter Spacing
       - 间距 Spacing Scale
       所有组件的 font-size / padding / gap 都应引用这里的变量，
       禁止再出现零散的 13.5px / 11.5px 这类半值。
    ────────────────────────────────────────────────────────────── */
    :root {
      /* ── 字号 · 只保留 10 档 ──────── */
      --fs-10: 10px;   /* micro · 徽章 / 小计数 */
      --fs-11: 11px;   /* caption · 标签、胶囊、meta 小字 */
      --fs-12: 12px;   /* small · 次要说明、行内 meta */
      --fs-13: 13px;   /* body-sm · 次要正文、列表项 */
      --fs-14: 14px;   /* body · 默认正文、按钮、输入框（基准） */
      --fs-15: 15px;   /* body-lg · 强调正文 / 小节标题 */
      --fs-16: 16px;   /* subtitle · 面板次标题 */
      --fs-18: 18px;   /* title · 模态 / 面板标题 */
      --fs-20: 20px;   /* h2 · 视图次标题 */
      --fs-22: 22px;   /* h1 · 视图主标题 */
      --fs-28: 28px;   /* display · Hero 标题 */
      --fs-32: 32px;   /* display-lg · 空状态大标题 */

      /* ── 字重 ──────── */
      --fw-regular: 400;
      --fw-medium: 500;
      --fw-semibold: 600;
      --fw-bold: 700;

      /* ── 行高 ──────── */
      --lh-tight: 1.3;    /* 标题 */
      --lh-snug: 1.45;    /* UI 控件 */
      --lh-base: 1.55;    /* 默认正文 */
      --lh-relaxed: 1.7;  /* 长文本 / 气泡 */

      /* ── 字距（仅用于全大写 / 小号标签） ──────── */
      --ls-tight: -0.2px;
      --ls-normal: 0;
      --ls-wide: 0.4px;
      --ls-uppercase: 0.6px;

      /* ── 间距标尺（4-based） ──────── */
      --sp-1: 4px;
      --sp-2: 6px;
      --sp-3: 8px;
      --sp-4: 12px;
      --sp-5: 16px;
      --sp-6: 20px;
      --sp-7: 24px;
      --sp-8: 32px;
    }

    :root,
    [data-theme="light"] {
      color-scheme: light;

      /* ── 主色板：纯黑白灰（无任何彩色强调） ────── */
      --bg: #f5f5f7;
      --bg-soft: #ececef;
      --panel: #ffffff;
      --panel-alt: #f8f8fa;

      --border: #e6e6ea;
      --border-strong: #d4d4d9;
      --divider: #efeff2;

      --fg: #0f0f13;
      --fg-soft: #2a2a31;
      --fg-dim: #6f6f79;
      --muted: #a6a6ae;

      /* 主强调色：墨黑（不再是紫色） */
      --brand-1: #2a2a31;
      --brand-2: #4a4a52;
      --brand: #0f0f13;
      --brand-deep: #0f0f13;
      --accent: #0f0f13;
      --accent-soft: #ececef;

      /* 状态灯色（绿）— 保留做在线/成功指示，其他地方不再引用 */
      --mint: #7ed6a8;
      --mint-deep: #38a973;
      --mint-soft: #e4f5ec;

      /* 墨黑强调按钮专用 */
      --ink: #0f0f13;
      --ink-soft: #24242a;

      --ok: #38a973;
      --warn: #b58428;
      --err: #c94a4a;

      --code-bg: #f4f4f6;
      --code-border: #e6e6ea;

      /* 渐变主品牌卡：深灰到纯黑 */
      --grad-card: linear-gradient(135deg, #2b2b32 0%, #0f0f13 100%);
      --grad-card-soft: linear-gradient(135deg, #f0f0f3 0%, #e3e3e7 100%);

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
      --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.08);

      --radius-sm: 10px;
      --radius: 12px;
      --radius-lg: 16px;
      --radius-pill: 999px;
    }

    /* ══ Manus 风格深色主题 ════════════════════ */
    [data-theme="dark"] {
      color-scheme: dark;

      /* 主色调：分层炭灰 */
      --bg: #181818;          /* 主内容区背景 */
      --bg-soft: #1e1e1e;    /* hover 层 / 次级表面 */
      --panel: #232323;       /* 卡片/容器背景 */
      --panel-alt: #2a2a2a;  /* 次要卡片 / 用户气泡 */

      --border: #2e2e2e;
      --border-strong: #3a3a3a;
      --divider: #262626;

      --fg: #f5f5f5;          /* 主标题 / 高亮 */
      --fg-soft: #e0e0e0;     /* 正文 */
      --fg-dim: #a0a0a0;      /* 次要文字 */
      --fg-muted: #888888;    /* 占位 / 弱化文字 */

      --brand-1: #f5f5f5;
      --brand-2: #e0e0e0;
      --brand: #ffffff;
      --brand-deep: #ffffff;
      --accent: #ffffff;
      --accent-soft: rgba(255, 255, 255, 0.08);

      /* 蓝色强调色（参考图 Manus New 标签色） */
      --blue-accent: #165DFF;
      --blue-soft: rgba(22, 93, 255, 0.15);

      --mint: #7ed6a8;
      --mint-deep: #5fcc96;
      --mint-soft: rgba(126, 214, 168, 0.14);

      --ink: #ffffff;
      --ink-soft: #e6e6ea;

      --ok: #5fcc96;
      --warn: #d8a54d;
      --err: #e87373;

      --code-bg: #111111;
      --code-border: #2e2e2e;

      /* 圆角层次 */
      --radius-sm: 8px;
      --radius: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-pill: 999px;

      /* 无/弱阴影（Manus 风格靠描边分层） */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
      --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.35);
    }

    /* 补 --fg-muted 在 light 主题 */
    :root,
    [data-theme="light"] {
      --fg-muted: var(--muted);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      background: var(--bg);
      color: var(--fg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
      font-size: var(--fs-14);
      line-height: var(--lh-base);
      font-weight: var(--fw-regular);
      letter-spacing: var(--ls-normal);
      display: flex;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: "kern", "liga", "calt";
      transition: background-color 0.25s ease, color 0.25s ease;
    }
    /* 让 h1~h6 等默认元素不再依赖浏览器默认字号 */
    h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
    button, input, textarea, select { font-family: inherit; font-size: var(--fs-14); }
    small { font-size: var(--fs-12); color: var(--fg-dim); }
    code, kbd, samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
    aside, main, .bubble, .tool-card, .composer, .example, .model-badge,
    .session-item, .thinking, aside > footer {
      transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    /* ── 主题切换按钮 ────────────────────── */
    .theme-toggle {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--panel);
      border: 1px solid var(--border);
      color: var(--fg-dim);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      padding: 0;
    }
    .theme-toggle:hover {
      color: var(--fg);
      border-color: var(--border-strong);
    }
    .theme-toggle svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .theme-toggle .icon-moon { display: none; }
    [data-theme="dark"] .theme-toggle .icon-sun { display: none; }
    [data-theme="dark"] .theme-toggle .icon-moon { display: block; }
    .sidebar-footer-actions .theme-toggle {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      box-shadow: none;
      flex: 0 0 auto;
    }
    .sidebar-footer-actions .theme-toggle svg {
      width: 14px;
      height: 14px;
    }

    ::selection { background: rgba(15, 15, 19, 0.18); }
    [data-theme="dark"] ::selection { background: rgba(255, 255, 255, 0.22); }

    /* ── 侧边栏 ──────────────────────────── */
    /* ── 侧边栏（Manus 风格） ────────────────── */
    aside {
      width: 240px;
      background: var(--panel);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }
    [data-theme="dark"] aside {
      background: #141414;
      border-right-color: #222222;
    }
    aside > header {
      padding: 16px 16px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .brand {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: var(--fs-15);
      font-weight: 700;
    }
    [data-theme="dark"] .brand { color: #000; }
    .brand-text h1 {
      font-size: var(--fs-14);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-tight);
      color: var(--fg);
      line-height: var(--lh-tight);
    }
    .brand-text small {
      font-size: var(--fs-10);
      color: var(--fg-dim);
      letter-spacing: var(--ls-wide);
      font-weight: var(--fw-regular);
    }

    .new-chat {
      margin: 4px 12px 10px;
      padding: 9px 14px;
      background: var(--panel-alt);
      color: var(--fg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: inherit;
      font-size: var(--fs-13);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-normal);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
    }
    .new-chat:hover { background: #333; border-color: var(--border-strong); }
    [data-theme="dark"] .new-chat { color: var(--fg); }
    [data-theme="dark"] .new-chat:hover { background: #333; }
    .new-chat .new-chat-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;
    }
    .sidebar-close {
      display: none;
    }

    .section-title {
      padding: 12px 16px 4px;
      font-size: var(--fs-10);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-uppercase);
      color: var(--fg-dim);
      text-transform: uppercase;
    }

    .session-list {
      flex: 1;
      overflow-y: auto;
      padding: 0 8px 12px;
    }
    .session-item {
      padding: 7px 10px;
      margin: 1px 0;
      border-radius: 8px;
      font-size: var(--fs-12);
      line-height: var(--lh-snug);
      color: var(--fg-dim);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      transition: background 0.12s;
    }
    .session-item:hover { background: var(--bg-soft); color: var(--fg-soft); }
    .session-item.active {
      background: var(--accent-soft);
      color: var(--brand-deep);
      font-weight: var(--fw-medium);
    }
    .session-item .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .session-item .del,
    .session-item .ren {
      opacity: 0;
      color: var(--muted);
      font-size: var(--fs-14);
      padding: 0 4px;
      transition: color 0.12s, opacity 0.12s;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
    }
    .session-item .del { font-size: var(--fs-15); }
    .session-item:hover .del,
    .session-item:hover .ren { opacity: 0.6; }
    .session-item .ren:hover { color: var(--brand-deep); opacity: 1; }
    .session-item .del:hover { color: var(--err); opacity: 1; }
    .session-item .title-input {
      flex: 1;
      min-width: 0;
      font: inherit;
      color: var(--fg);
      background: var(--panel);
      border: 1px solid var(--accent-soft);
      border-radius: 6px;
      padding: 3px 6px;
      outline: none;
    }
    .session-item .title-input:focus {
      border-color: var(--brand-deep);
      box-shadow: 0 0 0 2px var(--accent-soft);
    }
    .session-item .run-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--mint-deep, #3ea67a);
      margin-left: 6px;
      vertical-align: middle;
      box-shadow: 0 0 0 0 rgba(62,166,122,0.6);
      animation: pulse-dot 1.4s infinite;
    }
    @keyframes pulse-dot {
      0%   { box-shadow: 0 0 0 0 rgba(62,166,122,0.55); }
      70%  { box-shadow: 0 0 0 7px rgba(62,166,122,0); }
      100% { box-shadow: 0 0 0 0 rgba(62,166,122,0); }
    }

    aside > footer {
      padding: 8px 12px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    [data-theme="dark"] aside > footer {
      border-top-color: #222;
    }
    .sidebar-footer-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }
    .version-pill {
      flex: 1;
      font-size: var(--fs-10);
      color: var(--fg-muted);
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sidebar-action {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--fg-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    .sidebar-action:hover {
      color: var(--fg);
      border-color: var(--border-strong);
      background: rgba(255,255,255,0.06);
    }
    .sidebar-action svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ── 侧栏导航按钮（Manus 风格） ──── */
    .sidebar-nav {
      padding: 0 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .nav-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 7px 10px;
      background: transparent;
      border: none;
      border-radius: 8px;
      font-family: inherit;
      font-size: var(--fs-12);
      font-weight: var(--fw-medium);
      color: var(--fg-dim);
      cursor: pointer;
      text-align: left;
      transition: background 0.12s, color 0.12s;
    }
    .nav-btn:hover { background: rgba(255,255,255,0.06); color: var(--fg-soft); }
    [data-theme="dark"] .nav-btn:hover { background: rgba(255,255,255,0.06); }
    .nav-btn.active {
      background: rgba(255,255,255,0.1);
      color: var(--fg);
      font-weight: var(--fw-medium);
    }
    [data-theme="dark"] .nav-btn.active { background: rgba(255,255,255,0.1); }
    .nav-btn .nav-icon {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: transparent;
      color: var(--fg-dim);
      flex: 0 0 auto;
      transition: color 0.15s;
    }
    .nav-btn .nav-icon > svg { width: 15px; height: 15px; display: block; }
    .nav-btn:hover .nav-icon { color: var(--fg-soft); }
    .nav-btn.active .nav-icon {
      color: var(--fg);
    }
    .nav-btn .nav-label { flex: 1; line-height: var(--lh-snug); font-size: var(--fs-12); }
    .nav-btn .nav-count {
      font-size: var(--fs-10);
      font-weight: var(--fw-medium);
      color: var(--fg-muted);
      background: transparent;
      padding: 0;
      border-radius: 0;
      letter-spacing: var(--ls-normal);
      font-variant-numeric: tabular-nums;
    }
    .nav-btn.active .nav-count {
      color: var(--brand-deep);
    }