/* A2UI Demo 聊天外壳样式：头部 / 布局 / 消息 / 欢迎页 / 轨迹面板 / Markdown
 * 依赖 assets/a2ui.css（设计令牌与组件样式由它提供） */
  body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* ===== Header ===== */
  header {
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 18px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
    z-index: 10;
  }
  header .logo {
    width: 32px; height: 32px; border-radius: 10px; flex: none;
    background: var(--grad);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 12.5px; letter-spacing: .4px;
    box-shadow: var(--sh-brand);
    position: relative;
    overflow: hidden;
  }
  /* 顶部一层柔和高光，避免纯色块显得死板 */
  header .logo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%);
  }
  header h1 {
    font-size: 15.5px; font-weight: 600; margin: 0;
    letter-spacing: -.1px; display: flex; align-items: center;
    white-space: nowrap;
  }
  header .sub {
    font-size: 12px; color: var(--ink-3); font-weight: 400;
    margin-left: 12px; padding-left: 12px;
    border-left: 1px solid var(--line-2);
  }
  header .spacer { flex: 1; }

  header .pill {
    font-size: 12px; padding: 6px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink-2);
    display: flex; align-items: center; gap: 7px; font-weight: 500;
    max-width: 260px;
  }
  header .pill .pill-k { color: var(--ink-4); font-weight: 500; }
  /* 构建标记：显示 app.js 的版本号，用于一眼判断「浏览器跑的是不是最新代码」 */
  header .pill-build { max-width: none; padding: 5px 10px; }
  header .pill-build .pill-v {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
    color: var(--ink-4); letter-spacing: .2px;
  }
  header .pill .pill-v {
    max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  }
  header .ghost-btn {
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 999px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    transition: border-color .16s, color .16s, background .16s;
    font-family: inherit; white-space: nowrap;
  }
  header .ghost-btn:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
  /* 入口链接复用按钮外观：去掉 a 默认的下划线与蓝色 */
  header a.ghost-btn { text-decoration: none; }
  header .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
    flex: none;
  }
  header .dot.off { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); animation: pulse 1.4s ease-in-out infinite; }
  header .dot.err { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .16); }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

  /* ===== Layout ===== */
  .main { flex: 1; display: flex; min-height: 0; }

  .chat-col {
    flex: 1 1 0;
    display: flex; flex-direction: column;
    min-width: 0;
    background:
      radial-gradient(1200px 420px at 50% -160px, rgba(139, 92, 246, .07), transparent 70%),
      var(--bg);
  }
  .stream {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 26px 24px 14px;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 18px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }

  .composer {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 24px 18px;
    background: linear-gradient(180deg, rgba(246, 247, 251, 0), var(--bg) 26px);
  }
  /* 消息滚动到输入框上方时做一段渐隐：否则最后一行会被硬生生切一半，
     看起来像布局坏了。纯视觉层，不拦截点击。 */
  .composer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -36px; height: 36px;
    background: linear-gradient(180deg, rgba(246, 247, 251, 0), var(--bg) 92%);
    pointer-events: none;
  }
  .composer-inner {
    display: flex; gap: 8px; align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    padding: 8px 8px 8px 16px;
    box-shadow: var(--sh-2);
    transition: border-color .18s, box-shadow .18s;
    max-width: 860px; margin: 0 auto;
  }
  .composer-inner:focus-within {
    border-color: var(--brand-line);
    box-shadow: 0 0 0 4px var(--brand-ring), var(--sh-2);
  }
  .composer-inner textarea {
    flex: 1; border: none; outline: none; resize: none;
    font: inherit; font-size: 14.5px; line-height: 1.6;
    /* 单行也要有呼吸感：44px 可容纳一行并让文字垂直居中，多行时自动长高到 120px */
    min-height: 44px;
    max-height: 120px;
    background: transparent; color: var(--ink);
    padding: 10px 0; overflow-y: auto;
  }
  .composer-inner textarea::placeholder { color: var(--ink-4); }
  .composer-inner button {
    border: none; cursor: pointer; font-family: inherit;
    background: var(--brand);
    color: #fff; font-weight: 500; font-size: 13.5px;
    padding: 10px 18px; border-radius: var(--r-md);
    white-space: nowrap; flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: var(--sh-brand);
    transition: background .14s, transform .12s, box-shadow .14s;
  }
  .composer-inner button::after { content: "↑"; font-weight: 700; font-size: 14px; line-height: 1; }
  .composer-inner button:hover:not(:disabled) { background: #4c46c4; transform: translateY(-1px); }
  .composer-inner button:active:not(:disabled) { transform: translateY(0); }
  .composer-inner button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

  /* 语音按钮：必须逐项覆盖上面那条通用规则。
     不覆盖的话它会继承品牌底色和 ::after 的 ↑ —— 变成第二个「发送键」。 */
  .composer-inner button.mic {
    width: 40px; height: 38px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ink-3);
    box-shadow: none; border-radius: var(--r-md);
    transition: background .14s, color .14s, box-shadow .2s;
  }
  .composer-inner button.mic::after { content: none; }
  .composer-inner button.mic:hover:not(:disabled) {
    background: var(--surface-2); color: var(--brand); transform: none;
  }
  .composer-inner button.mic:active:not(:disabled) { transform: none; }

  /* 录音中：红色 + 呼吸环，让「正在听」这件事无需读文字 */
  .composer-inner button.mic.is-listening {
    background: #fee2e2; color: #dc2626;
    animation: mic-pulse 1.4s ease-out infinite;
  }
  @keyframes mic-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); }
    70%  { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  }

  /* 首次按住要下载 268MB 模型：按钮上直接显示进度，避免用户以为没点上 */
  .composer-inner button.mic.is-preparing { color: var(--brand); }
  .composer-inner button.mic.is-preparing svg { animation: mic-breathe 1.1s ease-in-out infinite; }
  @keyframes mic-breathe {
    0%, 100% { opacity: .35; transform: scale(.94); }
    50%      { opacity: 1;   transform: scale(1.04); }
  }

  /* 语音状态文案复用输入框下方那行提示，不额外占空间 */
  .composer-hint.is-voice { color: var(--brand); }

  /* 检测到麦克风静音时才挂出来的设备下拉（默认设备可能是虚拟声卡，收到全 0） */
  .mic-pick {
    margin-left: 8px; max-width: 300px; vertical-align: middle;
    font: inherit; font-size: 11.5px; padding: 2px 6px;
    border: 1px solid var(--line-2); border-radius: 6px;
    background: var(--surface); color: var(--ink-2); cursor: pointer;
  }
  .mic-pick:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }

  /* 快捷示例：固定一行。文案在 JS 里用短标签，完整请求放 title。
     一行约 32px，比原来「整句当按钮」的 4 行（约 120px）省下近 90px。 */
  .suggestions {
    display: flex; flex-wrap: nowrap; gap: 6px;
    margin: 8px auto 0; justify-content: center; max-width: 860px;
    overflow-x: auto; scrollbar-width: none;
  }
  .suggestions::-webkit-scrollbar { display: none; }
  /* 只有真的溢出时才加渐隐与左对齐，由 JS 挂 is-scroll */
  .suggestions.is-scroll {
    justify-content: flex-start; padding: 0 20px 2px 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .composer .suggestions button {
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    font-size: 12px; font-family: inherit; padding: 6px 11px; border-radius: 999px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    flex: 0 0 auto; white-space: nowrap;
    transition: border-color .16s, color .16s, background .16s, transform .12s;
  }
  .composer .suggestions button:hover {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand-ink);          /* 背景与文字一起改，避免深底深字 */
    transform: translateY(-1px);
  }
  .suggestions .sg-icon { font-size: 13px; line-height: 1; opacity: .9; }
  .composer-hint { text-align: center; font-size: 11.5px; color: var(--ink-4); margin-top: 8px; }

  /* ===== Messages ===== */
  .msg { display: flex; gap: 11px; max-width: 860px; width: 100%; }
  .msg.user { flex-direction: row-reverse; }
  .msg .avatar {
    width: 34px; height: 34px; border-radius: 11px; flex: 0 0 34px;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 600; letter-spacing: .2px;
    user-select: none;
  }
  .msg.agent .avatar { background: var(--grad); color: #fff; box-shadow: var(--sh-brand); }
  .msg.user .avatar { background: #e8eaf4; color: #5a5f7a; }

  .bubble {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 13px 16px;
    font-size: 14px; line-height: 1.7;
    color: var(--ink);
    box-shadow: var(--sh-1);
    min-width: 0; overflow: hidden; max-width: 100%;
  }
  .msg.agent .bubble { border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 6px; }
  .msg.user .bubble {
    background: var(--brand); color: #fff; border-color: transparent;
    border-radius: var(--r-lg) var(--r-lg) 6px var(--r-lg);
    box-shadow: var(--sh-brand);
  }

  .typing { display: inline-flex; gap: 5px; padding: 4px 0; align-items: center; }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: blink 1.2s infinite; }
  .typing i:nth-child(2) { animation-delay: .18s; }
  .typing i:nth-child(3) { animation-delay: .36s; }
  .typing-text { margin-left: 7px; color: var(--ink-3); font-size: 13px; }
  @keyframes blink { 0%, 80%, 100% { opacity: .22; transform: scale(.82); } 40% { opacity: 1; transform: scale(1); } }

  /* ===== 欢迎区：浅色主视觉 + 点阵纹理 ===== */
  .welcome { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 860px; }
  .welcome-hero {
    position: relative; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 26px 28px;
    box-shadow: var(--sh-2);
  }
  /* 点阵纹理：只在左上角可见，向右下淡出，制造纵深而不抢内容 */
  .welcome-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(var(--brand-line) 1px, transparent 1px);
    background-size: 15px 15px;
    opacity: .7;
    -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
    mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
  }
  /* 右上角柔光，与主色同源 */
  .welcome-hero::after {
    content: ""; position: absolute; right: -80px; top: -100px;
    width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(139, 92, 246, .16), transparent 68%);
  }
  .welcome-badge {
    display: inline-block; position: relative; z-index: 1;
    font-size: 11px; font-weight: 600; letter-spacing: .5px;
    padding: 4px 11px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand-ink);
    border: 1px solid var(--brand-line);
    margin-bottom: 12px;
  }
  .welcome-title {
    position: relative; z-index: 1;
    font-size: 22px; font-weight: 800; letter-spacing: -.3px;
    line-height: 1.3; margin-bottom: 10px;
    background: linear-gradient(100deg, #221d47 0%, #5952d4 58%, #8b5cf6 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .welcome-desc { position: relative; z-index: 1; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
  .welcome-desc b {
    background: var(--brand-soft); color: var(--brand-ink);
    padding: 1px 6px; border-radius: 6px; font-weight: 600;
  }

  .welcome-caps { display: flex; flex-direction: column; gap: 10px; }
  .cap-section { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .cap-section-title {
    font-size: 13.5px; font-weight: 600; color: var(--ink);
    display: inline-flex; align-items: center; gap: 8px; letter-spacing: -.1px;
  }
  .cap-section-title::before {
    content: ""; width: 3px; height: 13px; border-radius: 3px;
    background: var(--grad); flex: none;
  }
  .cap-section-sub { font-size: 12px; color: var(--ink-3); }

  .welcome-cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: 12px;
  }
  .cap-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 15px 15px;
    box-shadow: var(--sh-1);
    transition: transform .18s, box-shadow .18s, border-color .18s;
  }
  .cap-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--brand-line); }
  .cap-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
  .cap-icon {
    width: 29px; height: 29px; border-radius: 9px; flex: none;
    display: grid; place-items: center; font-size: 14px;
    background: var(--brand-soft); color: var(--brand);
  }
  .cap-titles { display: flex; flex-direction: column; min-width: 0; }
  .cap-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; }
  .cap-sub { font-size: 11px; color: var(--ink-4); font-weight: 400; }
  .cap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
  .cap-list li {
    position: relative; padding-left: 13px;
    font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
  }
  .cap-list li::before {
    content: ""; position: absolute; left: 1px; top: .62em;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand); opacity: .45;
  }
  .welcome-tip {
    font-size: 12.5px; color: var(--ink-2); line-height: 1.75;
    background: var(--surface-2); border: 1px dashed var(--line-2);
    border-radius: var(--r-md); padding: 11px 14px;
  }

  /* ===== 左侧：会话列表（话题线程） =====
     一列一身份、一条一线程：新建会话 = 新开一段上下文，互不影响。
     侧栏只放「容器」（标题/时间），内容在点开时按需拉取。 */
  .threads-col {
    flex: 0 0 238px; width: 238px;
    border-right: 1px solid var(--line);
    background: var(--surface);
    display: flex; flex-direction: column; min-height: 0;
  }
  .threads-hd { padding: 12px 12px 6px; }
  .threads-new {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 12px; border-radius: 10px; cursor: pointer;
    border: 1px dashed var(--line-2); background: transparent;
    color: var(--ink-2); font-family: inherit; font-size: 13px; font-weight: 500;
    transition: border-color .15s, color .15s, background .15s;
  }
  .threads-new:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
  .threads-list {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 2px;
  }
  /* 左下角设置入口：模型配置与摘要配置的唯一入口 */
  .threads-ft {
    border-top: 1px solid var(--line);
    padding: 8px;
    flex: 0 0 auto;
  }
  .settings-entry {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 10px;
    color: var(--ink-2); text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: background .15s, color .15s;
  }
  .settings-entry:hover { background: var(--brand-soft); color: var(--brand); }
  .settings-entry-icon { font-size: 15px; line-height: 1; }
  .threads-empty { padding: 12px; font-size: 12px; line-height: 1.6; color: var(--ink-4); }
  .thread {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 9px; border-radius: 9px; cursor: pointer;
    border: 1px solid transparent; background: transparent;
    color: var(--ink-2); font-size: 13px; line-height: 1.35;
    transition: background .12s, border-color .12s, color .12s;
  }
  .thread:hover { background: var(--surface-2); }
  .thread.is-active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); font-weight: 500; }
  .thread-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .thread-time { flex: 0 0 auto; font-size: 10.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
  .thread-badge {
    flex: 0 0 auto; font-size: 9.5px; line-height: 1; padding: 2px 4px;
    color: var(--ink-4); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 4px;
  }
  .thread-del {
    flex: 0 0 auto; opacity: 0; border: none; background: transparent; cursor: pointer;
    color: var(--ink-4); font-size: 15px; line-height: 1; padding: 1px 4px; border-radius: 5px;
    transition: opacity .12s, color .12s, background .12s;
  }
  .thread:hover .thread-del, .thread:focus-within .thread-del { opacity: 1; }
  .thread-del:hover { color: #b91c1c; background: #fef2f2; }
  .threads-toggle { display: none !important; }

  /* ===== 右侧：A2UI 消息流 / 运行轨迹 ===== */
  .json-col {
    flex: 0 0 392px; width: 392px;
    border-left: 1px solid #1b1f2a;
    background: #0e1016; color: #d5dae6;
    display: flex; flex-direction: column;
  }
  .json-col .hd {
    padding: 9px 12px; font-size: 11px; font-weight: 600; letter-spacing: .5px;
    color: #7f8798; border-bottom: 1px solid #1b1f2a;
    display: flex; align-items: center; gap: 8px;
  }
  .json-col .hd .tag { color: var(--brand-2); font-size: 10px; }
  .trace-tabs { display: flex; gap: 2px; }
  .trace-tab {
    border: none; background: transparent; color: #7f8798; cursor: pointer;
    font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: .3px;
    padding: 5px 11px; border-radius: 7px; transition: .15s;
  }
  .trace-tab:hover { color: #c3c9d6; background: #171b25; }
  .trace-tab.is-active { color: #fff; background: #232838; }

  .json-body { flex: 1; overflow-y: auto; padding: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.65; }
  .json-body::-webkit-scrollbar-thumb { background: #2a2f3d; border: 3px solid transparent; background-clip: content-box; }
  .json-item { margin-bottom: 12px; border-left: 2px solid #262b38; padding-left: 11px; animation: pop .3s ease; }
  .json-item .kind {
    font-size: 10px; font-weight: 700; color: #8b93ff;
    text-transform: uppercase; letter-spacing: .6px;
  }
  .json-item pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; color: #c2cad9; font-family: var(--mono); }
  .json-item .key { color: #ff7ab2; }
  .json-item .str { color: #9ece6a; }
  .json-item .num { color: #ff9e64; }
  .json-item .bool { color: #bb9af7; }

  .trace-run { margin-bottom: 15px; border-left: 2px solid #262b38; padding-left: 12px; animation: pop .3s ease; }
  .trace-run-hd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
  .trace-run-id { font-family: var(--mono); font-size: 10.5px; color: #8b93ff; }
  .trace-chip { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: #1c2130; color: #949cab; }
  .trace-chip.is-warn { background: #3a2a17; color: #ffb454; }
  .trace-agent-chip { font-size: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
  .trace-agent-ui { background: #241f38; color: #b6aefb; border-color: #4b43a8; }
  .trace-agent-order { background: #18242d; color: #85c7f2; border-color: #1c5c99; }
  .trace-agent-analytics { background: #1a2620; color: #a3d98a; border-color: #3b6d11; }
  .trace-agent-a2a { background: #2e2318; color: #f0b569; border-color: #7d4a0a; }
  .trace-step { display: flex; gap: 8px; padding: 4px 0; font-size: 11.5px; line-height: 1.6; }
  .trace-step-kind {
    flex: none; width: 72px; font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: #8b93ff; padding-top: 2px;
  }
  .trace-step.is-blocked .trace-step-kind { color: #ffb454; }
  .trace-step.is-error .trace-step-kind { color: #ff7ab2; }
  .trace-step-main { flex: 1; min-width: 0; }
  .trace-step-title { color: #ced5e2; word-break: break-word; }
  .trace-step-detail { color: #757e8d; font-family: var(--mono); font-size: 10.5px; word-break: break-all; margin-top: 2px; }
  .trace-step-ms { color: #5a6272; font-size: 10.5px; flex: none; padding-top: 2px; }

  .empty-hint { color: #596172; font-size: 12px; text-align: center; margin-top: 44px; line-height: 1.9; }

  /* ===== Markdown 内容 ===== */
  .md { line-height: 1.72; font-size: 14px; word-break: break-word; }
  .md > *:first-child { margin-top: 0; }
  .md > *:last-child { margin-bottom: 0; }
  .md p { margin: 0 0 10px; }
  .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
    margin: 16px 0 8px; font-weight: 600; line-height: 1.4; letter-spacing: -.1px;
  }
  .md h1 { font-size: 19px; }
  .md h2 { font-size: 17px; }
  .md h3 { font-size: 15.5px; }
  .md h4 { font-size: 14.5px; }
  .md h5, .md h6 { font-size: 14px; }
  .md ul, .md ol { margin: 0 0 10px; padding-left: 21px; }
  .md li { margin: 3px 0; }
  .md li::marker { color: var(--brand); }
  .md blockquote {
    margin: 0 0 10px; padding: 9px 14px;
    border-left: 3px solid var(--brand-line); background: var(--brand-soft);
    border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2);
  }
  .md code {
    font-family: var(--mono); background: #f2f3f8; border-radius: 5px;
    padding: 1px 6px; font-size: 12.5px; color: #b5306d;
  }
  .md .md-codeblock { position: relative; margin-bottom: 12px; }
  .md .md-code-lang {
    position: absolute; top: 8px; right: 12px; font-size: 10.5px;
    color: #8b93ff; font-family: var(--mono); letter-spacing: .4px; opacity: .8;
  }
  .md pre {
    background: #11131a; color: #e3e7ef; border-radius: var(--r-md);
    padding: 14px 15px; overflow-x: auto; margin: 0 0 12px;
  }
  .md .md-codeblock pre { margin-bottom: 0; padding-top: 16px; }
  .md pre code, .md .md-codeblock code {
    background: transparent; color: inherit; padding: 0; font-size: 12.5px;
  }
  .md hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
  .md a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-line); }
  .md a:hover { border-bottom-color: var(--brand); }
  .md .md-table-wrap { overflow-x: auto; margin-bottom: 12px; }
  .md table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
  .md th, .md td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; }
  .md th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); }
  .md strong { font-weight: 600; }
  .md em { font-style: italic; }
  .md del { color: var(--ink-4); }

  /* ===== 响应式 ===== */
  @media (max-width: 1180px) {
    .threads-col { flex: 0 0 200px; width: 200px; }
  }
  @media (max-width: 1080px) {
    .json-col { flex: 0 0 340px; width: 340px; }
  }
  @media (max-width: 900px) {
    .json-col { display: none; }
    /* 侧栏变抽屉：窄屏没有横向空间，但「切会话」是必须保留的能力 */
    .threads-col {
      position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
      width: 264px; flex-basis: 264px;
      box-shadow: 0 12px 40px rgba(16, 18, 27, .22);
      transform: translateX(-103%); transition: transform .2s ease;
    }
    .threads-col.is-open { transform: none; }
    .threads-toggle { display: inline-flex !important; }
    .stream { padding: 18px 16px 12px; }
    .composer { padding: 8px 16px 14px; }
    header { padding: 0 12px; gap: 8px; }
    header .sub { display: none; }
    header .pill .pill-k { display: none; }
    header .pill-model { display: none; }
  }
  @media (max-width: 560px) {
    header h1 { font-size: 14.5px; }
    header .pill-model, header .pill-build { display: none; }   /* 只收模型名与构建号，保留在线状态灯 */
    .welcome-hero { padding: 20px 20px; border-radius: var(--r-lg); }
    .welcome-title { font-size: 19px; }
    .welcome-cap-grid { grid-template-columns: 1fr; }
    .bubble { font-size: 13.5px; padding: 12px 14px; }
    .approval-consequences { grid-template-columns: 1fr; }
    .composer-inner button { padding: 10px 14px; }
  }

  /* 尊重系统「减少动态效果」偏好 */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }

/* ── 摘要（上下文压缩）配置面板 ───────────────────────────────── */
.settings-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 14, .38); backdrop-filter: blur(2px);
}
.settings-overlay[hidden] { display: none; }

.settings-panel {
  width: min(920px, 94vw); height: min(640px, 88vh);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.settings-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.settings-hd h2 { margin: 0 0 4px; font-size: 15px; font-weight: 500; color: var(--ink); }
.settings-sub { margin: 0; font-size: 12px; color: var(--ink-3); }
.settings-hd .ghost-btn { margin-left: auto; }

.settings-body { flex: 1; display: flex; min-height: 0; }

.settings-list {
  width: 216px; flex: 0 0 auto; overflow-y: auto;
  padding: 10px 8px; border-right: 1px solid var(--line);
  background: var(--surface-2);
}
.settings-group {
  margin: 10px 8px 6px; font-size: 10.5px; letter-spacing: .4px;
  color: var(--ink-4); text-transform: uppercase;
}
.settings-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; margin-bottom: 2px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-2); font-size: 12.5px; line-height: 1.4;
}
.settings-item:hover { background: var(--surface); }
.settings-item.is-active { background: var(--surface); color: var(--brand); font-weight: 500; box-shadow: inset 2px 0 0 var(--brand); }

.settings-form { flex: 1; overflow-y: auto; padding: 18px 22px 26px; }
.settings-form h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--ink); }
.settings-desc { margin: 0 0 16px; font-size: 12px; color: var(--ink-3); line-height: 1.6; }

.settings-section { margin-bottom: 18px; }
.settings-section > .settings-section-title {
  font-size: 11px; color: var(--ink-4); letter-spacing: .3px; margin-bottom: 8px;
}
.settings-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.settings-row label { flex: 0 0 132px; font-size: 12.5px; color: var(--ink-2); padding-top: 6px; }
.settings-row .settings-control { flex: 1; min-width: 0; }
.settings-row .settings-help { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-4); line-height: 1.5; }

.settings-control select,
.settings-control input[type="number"],
.settings-control input[type="text"],
.settings-control textarea {
  width: 100%; box-sizing: border-box;
  padding: 6px 8px; font-size: 12.5px; font-family: inherit;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: 6px;
}
.settings-control textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.settings-control input:focus, .settings-control select:focus, .settings-control textarea:focus {
  outline: none; border-color: var(--brand);
}
.settings-control .is-invalid { border-color: #c0392b; }

.settings-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.settings-checks label {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; padding-top: 0; font-size: 12.5px; cursor: pointer;
}

.settings-ft {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.settings-status { flex: 1; font-size: 12px; color: var(--ink-3); min-height: 18px; }
.settings-status.is-error { color: #c0392b; }
.settings-status.is-ok { color: #1f7a4d; }
.settings-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.settings-actions button, .settings-hd .ghost-btn {
  padding: 6px 14px; font-size: 12.5px; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2);
}
.settings-actions button:hover { border-color: var(--ink-4); }
.settings-actions button.primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.settings-actions button.primary:hover { filter: brightness(1.05); }
.settings-actions button:disabled { opacity: .5; cursor: default; }

@media (max-width: 720px) {
  .settings-list { width: 150px; }
  .settings-row { display: block; }
  .settings-row label { display: block; padding: 0 0 4px; }
}

.settings-switch-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.settings-switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer; user-select: none;
}
.settings-switch input { accent-color: var(--brand); cursor: pointer; }
.settings-switch-hint { font-size: 11.5px; color: var(--ink-4); }
.settings-body.is-disabled { opacity: .5; }

/* 「生效中 / 未保存」徽标：与「正在查看」的高亮区分开 */
.settings-badge {
  display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 4px;
  font-size: 10.5px; font-weight: 400; line-height: 1.7; vertical-align: middle;
  color: #0F6E55; background: #E1F5EE; border: 1px solid #9FE1CB;
}
.settings-badge.is-pending {
  color: var(--ink-4); background: var(--surface); border-color: var(--line-2);
}
.settings-item .settings-badge { float: right; margin-left: 6px; }

/* 流水线执行顺序（只读展示，不提供拖拽） */
.settings-order {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0 0; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
}
.settings-order-label { font-size: 11px; color: var(--ink-4); margin-right: 2px; }
.settings-order-item {
  font-size: 12px; color: var(--ink-2);
  padding: 1px 8px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--line-2);
}
.settings-order-arrow { font-size: 11px; color: var(--ink-4); }

/* ══════════════════════════════════════════════════════════════
   小屏布局：右侧「消息流」改为可收起的抽屉
   背景：≤1180px 时 392px 固定栏会把聊天区压到 550px 左右，
   欢迎卡与建议项被挤成窄条。改为抽屉后聊天区始终占满。
   ══════════════════════════════════════════════════════════════ */
header .json-toggle { display: none; }
.json-close {
  display: none; margin-left: auto; flex: none;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid #262b38; background: #171b25; color: #9aa3b2;
  font-size: 12px; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
}
.json-close:hover { color: #fff; background: #232838; }

@media (max-width: 1180px) {
  .json-col {
    display: flex;                       /* 覆盖 ≤900 的 display:none：改为抽屉而非消失 */
    position: fixed; top: 58px; right: 0; bottom: 0; z-index: 55;
    width: min(392px, 88vw); flex: 0 0 auto;
    transform: translateX(103%);
    transition: transform .22s ease;
    box-shadow: -18px 0 46px rgba(16, 18, 27, .26);
  }
  .json-col.is-open { transform: none; }
  header .json-toggle { display: inline-flex; }
  .json-close { display: inline-flex; }


  .welcome-hero { padding: 20px 22px; }
  .welcome-title { font-size: 20px; }
  .welcome-desc { font-size: 13.5px; line-height: 1.75; }
  .stream { gap: 14px; }
}

/* 高度也不够时（笔记本小窗 / 分屏），进一步压掉非必要留白 */
@media (max-height: 700px) {
  .stream { padding-top: 14px; gap: 12px; }
  .welcome-hero { padding: 16px 18px; }
  .welcome-badge { margin-bottom: 8px; }
  .welcome-title { font-size: 18px; margin-bottom: 6px; }
  .welcome-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  /* 高度不够时先让位给「输入框 + 最近消息」：能力卡片是介绍性内容，
     留着只会被输入框截断，看起来像坏掉了；发一条消息后照样能看到能力。 */
  .welcome-caps { display: none; }
  .composer { padding-bottom: 10px; }
  .composer-hint { margin-top: 5px; }
}

@media (max-width: 560px) {
  .json-toggle .btn-label { display: none; }   /* 只留 ◧ 图标，给标题腾位置 */
  .json-col { width: 92vw; top: 54px; }
  .welcome-hero { padding: 15px 16px; }
  .welcome-title { font-size: 17.5px; }
  .composer-inner { padding-left: 12px; }
  .composer-inner textarea { font-size: 14px; }
}

/* ===== 降级提示（notice）=====
   与红色 error 分开：红色是「这次失败了」，黄色是「某项能力暂时缺了」。
   变红只有一种情况：SSE 直接报错。 */
.notice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  line-height: 1.6;
}
.notice.is-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }