/* 基础样式沿用 10/19 原型（dashboard-prototype/index.html），下方追加真实版新增部分 */
    :root {
      --bg: #f3f2ee;
      --surface: #ffffff;
      --surface-2: #ecebe6;
      --ink: #181917;
      --muted: #5b5e57;
      --line: #d8d7d1;
      --green: #18715a;
      --green-soft: #dcece5;
      --coral: #d65f42;
      --coral-soft: #f6dfd8;
      --amber: #9a6913;
      --amber-soft: #f3e7c7;
      --blue: #346b8c;
      --blue-soft: #dce8ef;
      --sidebar: #20211f;
      --sidebar-2: #292a27;
      --radius: 6px;
      --shadow: 0 1px 2px rgba(20, 21, 19, .06);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
    button, input, textarea { font: inherit; letter-spacing: 0; }
    button { cursor: pointer; }
    .app { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0, 1fr); }
    .sidebar { position: sticky; top: 0; height: 100vh; background: var(--sidebar); color: #f7f7f3; padding: 18px 14px; display: flex; flex-direction: column; }
    .brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 21px; border-bottom: 1px solid #393a36; }
    .brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: #f3f1e8; color: var(--sidebar); border-radius: 50%; font: 700 15px Georgia, serif; }
    .brand h1 { margin: 0; font-size: 18px; font-weight: 650; }
    .brand small { display: block; color: #9fa19a; font-size: 10px; margin-top: 2px; }
    .nav { padding-top: 18px; display: grid; gap: 4px; }
    .nav-separator { height: 1px; background: #393a36; margin: 10px 8px 7px; }
    .nav-label { padding: 0 11px 5px; color: #898c84; font-size: 10px; }
    .nav button { width: 100%; height: 40px; border: 0; border-radius: 5px; background: transparent; color: #bfc1ba; display: flex; align-items: center; gap: 11px; padding: 0 11px; text-align: left; font-size: 13px; }
    .nav button:hover { background: var(--sidebar-2); color: #fff; }
    .nav button.active { background: #f3f1e8; color: #1f201e; font-weight: 650; }
    .nav svg { width: 17px; height: 17px; stroke-width: 1.8; }
    .side-foot { margin-top: auto; border-top: 1px solid #393a36; padding: 15px 8px 2px; }
    .connection { display: flex; align-items: center; gap: 8px; color: #c9cbc4; font-size: 11px; }
    .pulse { width: 7px; height: 7px; background: #70c9a0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(112,201,160,.1); }
    .demo-note { margin-top: 11px; color: #888b83; font-size: 10px; line-height: 1.5; }
    main { min-width: 0; }
    .topbar { height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: rgba(243,242,238,.95); position: sticky; top: 0; z-index: 5; }
    .crumb { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
    .crumb b { color: var(--ink); font-weight: 650; }
    .top-actions { display: flex; align-items: center; gap: 8px; }
    .demo-badge { color: var(--amber); background: var(--amber-soft); border: 1px solid #dfc989; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
    .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; color: var(--muted); }
    .icon-btn:hover { color: var(--ink); border-color: #b8b7b0; }
    .icon-btn svg { width: 16px; height: 16px; }
    .content { padding: 26px 28px 40px; max-width: 1500px; margin: 0 auto; }
    .view { display: none; }
    .view.active { display: block; }
    .conversation { max-width: 930px; margin: 0 auto; min-height: calc(100vh - 132px); display: flex; flex-direction: column; }
    .conversation-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 7px 0 19px; border-bottom: 1px solid var(--line); }
    .conversation-head h2 { margin: 0; font-size: 25px; font-weight: 660; }
    .conversation-head p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
    .call-button { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 38px; padding: 0 15px; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 5px; font-size: 12px; font-weight: 620; }
    .call-button:hover { background: #393b36; }
    .head-actions { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; min-width: 0; }
    .chat-search { position: relative; width: 260px; max-width: 100%; }
    .chat-search svg { position: absolute; left: 11px; top: 11px; width: 15px; height: 15px; color: var(--muted); }
    .chat-search input { width: 100%; height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; padding: 0 34px 0 34px; outline: 0; font-size: 12px; color: var(--ink); }
    .chat-search input:focus { border-color: #8a8b84; }
    .chat-search .count { position: absolute; right: 10px; top: 12px; font-size: 10px; color: var(--muted); }
    .dialogue mark { background: var(--amber-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
    .message.dim { opacity: .28; }
    .call-button svg { width: 16px; height: 16px; }
    .dialogue { flex: 1; padding: 30px 0 22px; display: flex; flex-direction: column; gap: 25px; }
    .dialogue-note { align-self: center; color: var(--muted); font-size: 11px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; background: #faf9f6; }
    .message { max-width: 680px; min-width: 0; }
    .message.mine { align-self: flex-end; max-width: min(80%, 620px); background: #e8e7e1; padding: 13px 17px; border-radius: 12px 12px 3px 12px; }
    .message.from-kola { align-self: flex-start; padding-left: 18px; border-left: 2px solid var(--green); }
    .speaker { display: block; font-size: 11px; font-weight: 700; color: var(--green); margin-bottom: 9px; }
    .message p { margin: 0 0 9px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
    .message p:last-child { margin-bottom: 0; }
    .message-meta { display: block; color: var(--muted); font-size: 10px; margin-top: 8px; }
    .run-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; color: var(--muted); font-size: 10px; }
    .run-meta .sep { color: var(--line); }
    .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 650; }
    .tag.degraded { color: var(--amber); background: var(--amber-soft); }
    .tag.model { color: var(--ink); background: var(--surface-2); font-weight: 600; }
    .degraded-note { margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--amber); background: #fffcf3; color: #4f4a3a; font-size: 11px; line-height: 1.6; }
    .message.limit-card { border-left-color: var(--amber); }
    .limit-card .speaker { color: var(--amber); }
    .limit-card p { color: var(--ink); }
    .limit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .budget-list { padding: 6px 15px 14px; }
    .budget-row { padding: 10px 0; border-bottom: 1px solid #ecebe7; font-size: 11px; }
    .budget-row:last-child { border: 0; }
    .budget-top { display: flex; justify-content: space-between; gap: 10px; }
    .budget-top span { color: var(--muted); }
    .bar { height: 5px; background: var(--surface-2); border-radius: 3px; margin-top: 7px; overflow: hidden; }
    .bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
    .bar i.warn { background: var(--amber); }
    .context-link { border: 0; background: transparent; color: var(--muted); font-size: 11px; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; }
    .composer-wrap { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 16px); padding: 22px 0 4px; }
    .composer { background: var(--surface); border: 1px solid #c9c8c0; border-radius: 9px; box-shadow: 0 7px 25px rgba(20,21,19,.06); padding: 12px 14px 10px; }
    .composer textarea { display: block; width: 100%; min-height: 56px; max-height: 160px; resize: vertical; border: 0; outline: 0; background: transparent; font-size: 13px; line-height: 1.6; color: var(--ink); }
    .composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .composer-left { display: flex; gap: 6px; }
    .composer-icon { border: 0; background: transparent; color: var(--muted); height: 31px; width: 31px; display: grid; place-items: center; border-radius: 5px; }
    .composer-icon:hover { background: var(--surface-2); }
    .composer-icon svg { height: 17px; width: 17px; }
    .send-button { background: var(--ink); color: #fff; border: 0; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; }
    .composer-right { display: flex; align-items: center; gap: 6px; }
    .model-picker { position: relative; }
    .model-trigger { height: 31px; border: 0; background: transparent; border-radius: 6px; padding: 0 6px 0 9px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 560; white-space: nowrap; }
    .model-trigger:hover, .model-trigger[aria-expanded="true"] { background: var(--surface-2); }
    .model-trigger svg { width: 14px; height: 14px; color: var(--muted); transition: transform .15s ease; }
    .model-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .model-menu { position: absolute; right: -38px; bottom: calc(100% + 10px); width: 344px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(20,21,19,.14); padding: 6px; display: none; z-index: 20; }
    .model-menu.open { display: block; }
    .model-menu-label { padding: 7px 10px 5px; color: var(--muted); font-size: 10px; }
    .model-option { width: 100%; border: 0; background: transparent; border-radius: 8px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto 30px 8px 16px; align-items: center; gap: 9px; padding: 9px 10px; text-align: left; color: var(--ink); font-size: 12px; }
    .model-option:hover { background: #f5f4f0; }
    .model-option.selected { background: var(--surface-2); }
    .model-option[disabled] { cursor: default; opacity: .62; }
    .model-option[disabled]:hover { background: transparent; }
    .model-logo { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 700 11px Georgia, serif; color: #fff; }
    .model-logo.anthropic { background: #c96f4b; }
    .model-logo.openai { background: #181917; }
    .model-logo.deepseek { background: #4d6bfe; }
    .model-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .model-use { color: var(--muted); font-size: 11px; white-space: nowrap; }
    .model-cost { color: var(--muted); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
    .model-health { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    .model-health.partial { background: var(--amber); }
    .model-check { width: 15px; height: 15px; visibility: hidden; }
    .model-option.selected .model-check { visibility: visible; }
    .model-menu-foot { border-top: 1px solid #ecebe7; margin: 4px 4px 0; padding: 8px 6px 4px; color: var(--muted); font-size: 10px; line-height: 1.55; }
    .send-button svg { width: 16px; height: 16px; }
    .composer-foot { color: var(--muted); font-size: 10px; text-align: center; padding-top: 9px; }
    .page-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 21px; }
    .page-head h2 { margin: 0; font-size: 23px; font-weight: 660; }
    .page-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
    .timestamp { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .status-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; }
    .status-item { min-height: 92px; padding: 16px; border-right: 1px solid var(--line); }
    .status-item:last-child { border-right: 0; }
    .status-label { color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; align-items: center; }
    .status-value { margin-top: 11px; font-size: 20px; font-weight: 660; font-variant-numeric: tabular-nums; }
    .status-sub { margin-top: 4px; font-size: 11px; color: var(--muted); line-height: 1.4; }
    .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
    .dot.green { background: var(--green); } .dot.amber { background: #c78d25; } .dot.coral { background: var(--coral); } .dot.blue { background: var(--blue); }
    .grid-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 18px; }
    .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
    .panel-head { min-height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--line); }
    .panel-head h3 { margin: 0; font-size: 13px; font-weight: 660; }
    .panel-head span { color: var(--muted); font-size: 10px; }
    .activity-list { display: grid; }
    .activity-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 66px; padding: 10px 15px; border-bottom: 1px solid #ecebe7; }
    .activity-row > div:nth-child(2) { min-width: 0; }
    .activity-row:last-child { border-bottom: 0; }
    .activity-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 5px; background: var(--surface-2); color: var(--muted); }
    .activity-icon svg { width: 14px; height: 14px; }
    .activity-title { font-size: 12px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .activity-meta { margin-top: 4px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .state { padding: 4px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
    .state.run { color: var(--blue); background: var(--blue-soft); }
    .state.done { color: var(--green); background: var(--green-soft); }
    .state.wait { color: var(--amber); background: var(--amber-soft); }
    .state.fail { color: var(--coral); background: var(--coral-soft); }
    .body-map { padding: 16px; }
    .body-node { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-bottom: 1px solid #ecebe7; }
    .body-node:last-child { border-bottom: 0; }
    .body-name { display: flex; align-items: center; gap: 8px; font-size: 11px; }
    .body-name svg { width: 15px; height: 15px; color: var(--muted); }
    .body-state { font-size: 10px; color: var(--muted); }
    .trace { margin-top: 18px; }
    .trace-flow { padding: 17px 15px 15px; display: grid; grid-template-columns: repeat(6, minmax(80px,1fr)); gap: 8px; overflow-x: auto; }
    .trace-step { min-width: 92px; position: relative; }
    .trace-step:not(:last-child)::after { content: ''; position: absolute; right: -8px; top: 15px; width: 8px; height: 1px; background: #aaa9a3; }
    .trace-step b { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 10px; display: grid; place-items: center; }
    .trace-step span { display: block; margin-top: 8px; font-size: 10px; font-weight: 620; }
    .trace-step small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
    .toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
    .search { flex: 1; position: relative; }
    .search svg { position: absolute; left: 11px; top: 9px; width: 15px; height: 15px; color: var(--muted); }
    .search input { width: 100%; height: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; padding: 0 10px 0 34px; outline: 0; }
    .search input:focus { border-color: #8a8b84; }
    .control { height: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; padding: 0 11px; font-size: 11px; color: var(--ink); }
    .table-wrap { overflow: auto; }
    table { width: 100%; border-collapse: collapse; min-width: 720px; }
    th { text-align: left; font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 650; padding: 11px 13px; background: #f8f8f5; border-bottom: 1px solid var(--line); }
    td { padding: 13px; font-size: 11px; border-bottom: 1px solid #ecebe7; vertical-align: middle; }
    tbody tr:hover { background: #fafaf7; }
    .mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
    .memory-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); min-height: 550px; }
    .memory-list { border-right: 1px solid var(--line); background: #fafaf7; }
    .memory-filter { padding: 10px; border-bottom: 1px solid var(--line); }
    .memory-filter input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 4px; padding: 0 9px; background: #fff; }
    .memory-item { padding: 13px 12px; border-bottom: 1px solid #e9e8e3; cursor: pointer; }
    .memory-item.active { background: var(--surface); border-left: 3px solid var(--green); padding-left: 9px; }
    .memory-kind { color: var(--green); font-size: 9px; font-weight: 700; text-transform: uppercase; }
    .memory-item b { display: block; margin-top: 5px; font-size: 11px; line-height: 1.45; }
    .memory-item small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
    .editor { padding: 20px; }
    .editor-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
    .editor-top h3 { margin: 0; font-size: 15px; }
    .editor textarea { width: 100%; min-height: 270px; resize: vertical; border: 1px solid var(--line); border-radius: 5px; padding: 14px; line-height: 1.7; font: 12px/1.7 Inter, "PingFang SC", sans-serif; outline: 0; }
    .editor textarea:focus { border-color: #8a8b84; }
    .meta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
    .meta-block { border-top: 1px solid var(--line); padding-top: 10px; }
    .meta-block small { color: var(--muted); font-size: 9px; }
    .meta-block b { display: block; margin-top: 4px; font-size: 10px; }
    .primary { height: 32px; border: 0; border-radius: 5px; padding: 0 12px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 650; }
    .recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .metric-list { padding: 4px 15px 14px; }
    .metric-row { display: flex; justify-content: space-between; align-items: center; min-height: 47px; border-bottom: 1px solid #ecebe7; font-size: 11px; }
    .metric-row:last-child { border: 0; }
    .metric-row span { color: var(--muted); }
    .error-item { margin: 13px 15px; border-left: 3px solid var(--coral); padding: 10px 11px; background: #fdf8f6; }
    .error-item b { font-size: 11px; }
    .error-item p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
    .file-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 520px; }
    .tree { border-right: 1px solid var(--line); padding: 12px; background: #fafaf7; }
    .tree-row { height: 31px; display: flex; align-items: center; gap: 7px; padding: 0 7px; border-radius: 4px; font-size: 11px; color: #4d4e49; }
    .tree-row.active { background: var(--surface-2); color: var(--ink); font-weight: 650; }
    .tree-row.indent { padding-left: 26px; }
    .tree-row svg { width: 14px; height: 14px; }
    .file-main { padding: 16px; }
    .file-path { font: 10px "SFMono-Regular", monospace; color: var(--muted); margin-bottom: 13px; }
    .file-list { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
    .file-row { min-height: 43px; display: grid; grid-template-columns: minmax(0,1fr) 90px 120px 30px; gap: 10px; align-items: center; padding: 0 11px; border-bottom: 1px solid #ecebe7; font-size: 10px; }
    .file-row:last-child { border: 0; }
    .file-name { display: flex; align-items: center; gap: 8px; font-size: 11px; }
    .file-name svg { width: 15px; height: 15px; color: var(--muted); }
    .muted { color: var(--muted); }
    .toast { position: fixed; right: 20px; bottom: 22px; z-index: 30; background: #20211f; color: #fff; border-radius: 5px; padding: 11px 14px; font-size: 11px; box-shadow: 0 10px 28px rgba(0,0,0,.16); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
    .toast.show { opacity: 1; transform: translateY(0); }
    @media (max-width: 900px) {
      .app { grid-template-columns: 66px minmax(0,1fr); }
      .sidebar { padding: 14px 8px; }
      .brand { padding: 4px 8px 16px; justify-content: center; }
      .brand > div:last-child, .nav span, .side-foot { display: none; }
      .nav button { justify-content: center; padding: 0; }
      .content { padding: 20px 16px 32px; }
      .topbar { padding: 0 16px; }
      .status-strip { grid-template-columns: 1fr 1fr; }
      .status-item:nth-child(2) { border-right: 0; }
      .status-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .grid-main, .recovery-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .app { display: block; }
      .sidebar { height: 58px; width: 100%; position: fixed; top: auto; bottom: 0; z-index: 20; flex-direction: row; padding: 7px; }
      .brand, .side-foot { display: none; }
      .nav { width: 100%; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); }
      .nav { grid-template-columns: repeat(6,1fr); align-items: center; }
      .nav button { height: 44px; }
      .nav-separator, .nav-label { display: none; }
      .conversation { min-height: calc(100dvh - 178px); }
      .conversation-head { padding: 2px 0 14px; }
      .conversation-head h2 { font-size: 20px; }
      .conversation-head p { font-size: 11px; }
      .call-button { height: 35px; padding: 0 10px; }
      .conversation-head { flex-wrap: wrap; }
      .head-actions { flex-basis: 100%; }
      .chat-search { flex: 1; width: auto; }
      .dialogue { padding-top: 24px; gap: 22px; }
      .message.mine { max-width: 88%; }
      .message p { font-size: 13px; }
      .composer-wrap { bottom: calc(58px + env(safe-area-inset-bottom)); }
      .composer textarea { min-height: 44px; }
      .model-menu { position: fixed; left: 12px; right: 12px; width: auto; bottom: calc(150px + env(safe-area-inset-bottom)); }
      .model-use { display: none; }
      .model-option { grid-template-columns: 22px minmax(0,1fr) 30px 8px 16px; }
      .topbar { height: 54px; }
      .content { padding: 18px 12px calc(78px + env(safe-area-inset-bottom)); }
      .sidebar { height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
      .page-head { align-items: start; }
      .timestamp { display: none; }
      .status-strip { grid-template-columns: 1fr 1fr; }
      .status-item { min-height: 82px; }
      .memory-layout, .file-layout { grid-template-columns: 1fr; }
      .memory-list, .tree { border-right: 0; border-bottom: 1px solid var(--line); max-height: 210px; overflow: auto; }
      .meta-grid { grid-template-columns: 1fr; }
      .toast { left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); }
      .toolbar { flex-wrap: wrap; }
      .search { flex-basis: 100%; }
    }
  

/* ── 真实版新增（2026-11-11） ───────────────────────────── */
select.control { padding-right: 8px; }
.conn-badge { color: var(--green); background: var(--green-soft); border: 1px solid #b9d9cb; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.conn-badge.bad { color: var(--coral); background: var(--coral-soft); border-color: #eebfb2; }
.conn-badge.warn { color: var(--amber); background: var(--amber-soft); border-color: #dfc989; }
.pulse.bad { background: var(--coral); box-shadow: 0 0 0 4px rgba(214,95,66,.15); }
.pulse.warn { background: #e0b04d; box-shadow: 0 0 0 4px rgba(224,176,77,.15); }
.login { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: none; place-items: center; padding: 20px; }
.login.show { display: grid; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px rgba(20,21,19,.08); padding: 28px; }
.login-card h2 { margin: 14px 0 6px; font-size: 20px; }
.login-card p { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.login-card input[type=password] { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 5px; padding: 0 12px; outline: 0; font-size: 13px; }
.login-card input:focus { border-color: #8a8b84; }
.login-card label.keep { display: flex; gap: 7px; align-items: center; margin: 12px 0 16px; font-size: 11px; color: var(--muted); }
.login-card .primary { width: 100%; height: 38px; font-size: 12px; }
.login-error { color: var(--coral); font-size: 11px; min-height: 16px; margin-top: 10px; }
.login .brand-mark { background: var(--sidebar); color: #f3f1e8; }
.empty { padding: 26px 15px; color: var(--muted); font-size: 11px; text-align: center; line-height: 1.6; }
.load-more { align-self: center; border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 6px 14px; font-size: 11px; color: var(--muted); }
.load-more:hover { color: var(--ink); }
.message.pending .thinking { color: var(--muted); font-size: 13px; }
.message.failed { border-left-color: var(--coral); }
.message.failed .speaker { color: var(--coral); }
.fail-note { margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--coral); background: #fdf8f6; color: #5a3a32; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.tag.fx { color: var(--blue); background: var(--blue-soft); }
.tag.fail { color: var(--coral); background: var(--coral-soft); }
.send-button[disabled] { opacity: .45; cursor: default; }
.model-health.unknown { background: #b8b7b0; }
tbody tr.clickable { cursor: pointer; }
.cell-preview { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-mask { position: fixed; inset: 0; background: rgba(20,21,19,.22); z-index: 40; display: none; }
.drawer-mask.show { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100%); background: var(--bg); z-index: 41; box-shadow: -10px 0 40px rgba(20,21,19,.14); transform: translateX(100%); transition: transform .2s ease; display: flex; flex-direction: column; }
.drawer.show { transform: translateX(0); }
.drawer-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.drawer-head h3 { margin: 0; font-size: 14px; }
.drawer-body { overflow: auto; padding: 18px; display: grid; gap: 14px; align-content: start; }
.kv { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 7px 12px; padding: 14px 15px; font-size: 11px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.seg-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 70px; gap: 10px; padding: 8px 15px; border-bottom: 1px solid #ecebe7; font-size: 11px; }
.seg-row:last-child { border: 0; }
.seg-row .over { color: var(--coral); font-weight: 650; }
.ev { padding: 9px 15px; border-bottom: 1px solid #ecebe7; font-size: 11px; }
.ev:last-child { border: 0; }
.ev-top { display: flex; justify-content: space-between; gap: 10px; }
.ev-type { font-weight: 650; }
.ev pre, .fx pre { margin: 6px 0 0; padding: 8px 10px; background: #f8f8f5; border: 1px solid #ecebe7; border-radius: 4px; font: 10px/1.55 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.ev details summary { cursor: pointer; color: var(--muted); font-size: 10px; margin-top: 4px; }
.fx { padding: 10px 15px; border-bottom: 1px solid #ecebe7; font-size: 11px; }
.fx:last-child { border: 0; }
.mem-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.editor-actions { display: flex; gap: 8px; align-items: center; }
.editor-actions .control { height: 32px; font-size: 10px; }
.reason-input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 5px; padding: 0 10px; margin-top: 10px; font-size: 11px; outline: 0; }
.snap { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ecebe7; font-size: 11px; }
.snap:last-child { border: 0; }
.snap p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; white-space: pre-wrap; max-height: 64px; overflow: hidden; }
.snap .control { height: 28px; font-size: 10px; flex: none; }
.memory-list-scroll { max-height: 640px; overflow: auto; }
.memory-filter { display: grid; gap: 7px; }
.memory-filter select { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 11px; }
.memory-item b { font-weight: 560; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cand-list { display: grid; }
.cand { padding: 12px 15px; border-bottom: 1px solid #ecebe7; font-size: 12px; line-height: 1.65; }
.cand:last-child { border: 0; }
.cand small { display: block; color: var(--muted); font-size: 10px; margin-top: 5px; }
.cand .limit-actions { margin-top: 8px; }
.cand .control { height: 30px; font-size: 10px; }
.notice { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 5px; color: var(--muted); font-size: 11px; line-height: 1.6; background: #faf9f6; }
.placeholder-page { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.8; }
.placeholder-page svg { width: 28px; height: 28px; color: #a5a49d; }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) {
  .kv { grid-template-columns: 90px minmax(0,1fr); }
  .seg-row { grid-template-columns: minmax(0,1fr) 70px 54px; }
}

/* 第 8 段压缩（C 0.8.0）：已压进摘要的轮次淡一点，分隔条可点开看摘要 */
.message.compacted { opacity: .62; }
.summary-note { margin: 18px 0; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; background: rgba(0,0,0,.02); font-size: 13px; }
.summary-note > summary { cursor: pointer; color: var(--muted); line-height: 1.5; }
.summary-note .summary-body { margin-top: 10px; }
.summary-note .summary-body p { margin: 0 0 8px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.summary-note .summary-meta { color: var(--muted); font-size: 12px; margin: 6px 0; }

/* 花费对账（C 0.9.0） */
.budget-sub { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.5; overflow-wrap: anywhere; }
.budget-row .notice .context-link { margin-left: 8px; }

/* 超限暂停：追加 / 结束 */
.limit-card { margin-top: 8px; padding: 10px 12px; border-left: 2px solid var(--amber); background: #fffcf3; color: #4f4a3a; font-size: 11px; line-height: 1.6; }
.limit-card p { margin: 0 0 8px; }
.limit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.limit-actions button { font-size: 11px; }
.limit-actions button:disabled { opacity: .5; cursor: default; }
.message.limit-waiting { border-color: var(--amber); }