/* styles/backend-live.css · 真实后端接入新增组件
 *
 * 只用 main.css 已定义的设计变量 (--ink / --rule / --paper / --vermilion /
 * --success / --warning / --accent / --mono …), 不引入新色值, 不覆盖已有规则。
 * 全部选择器带 .qsl- 前缀, 与现有样式零冲突。
 */

/* ── 审批 / 计划 / 子智能体 卡片外壳 ───────────────────────────── */
.qsl-card-body {
  flex: 1;
  min-width: 0;
}

.qsl-req {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--warning, var(--vermilion));
  border-radius: 6px;
  background: var(--paper, #fff);
  padding: 11px 13px 12px;
  margin-bottom: 8px;
}
.qsl-req:last-child { margin-bottom: 0; }
.qsl-approve.qsl-done .qsl-req { border-left-color: var(--rule); opacity: .75; }

.qsl-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}
.qsl-head i { font-size: 14px; color: var(--warning, var(--vermilion)); }
.qsl-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
}
.qsl-kind {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  background: var(--paper-warm, var(--accent-bg));
  border-radius: 3px;
  padding: 1px 5px;
}

.qsl-q {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 9px;
}

.qsl-detail {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--paper-warm, var(--accent-bg));
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 4px;
  padding: 8px 10px;
  margin: 0 0 9px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 反问型 · 选项 ─────────────────────────────────────────────── */
.qsl-opts { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.qsl-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 5px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.qsl-opt:hover { border-color: var(--accent, var(--vermilion)); background: var(--paper-warm, var(--accent-bg)); }
.qsl-opt input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent, var(--vermilion)); }
.qsl-opt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qsl-opt-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.qsl-opt-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }
.qsl-opt-pro { font-size: 11px; color: var(--success); }
.qsl-opt-con { font-size: 11px; color: var(--vermilion); }

.qsl-text {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  padding: 7px 9px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 5px;
  background: var(--paper, #fff);
  margin-bottom: 9px;
  outline: none;
}
.qsl-text:focus { border-color: var(--accent, var(--vermilion)); }

/* ── 授权范围 ──────────────────────────────────────────────────── */
.qsl-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.qsl-select {
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink);
  padding: 4px 7px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 4px;
  background: var(--paper, #fff);
  outline: none;
}

/* ── 按钮 ──────────────────────────────────────────────────────── */
.qsl-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.qsl-btn {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 6px 15px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: var(--paper, #fff);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.qsl-btn:hover:not(:disabled) { border-color: var(--ink-mute); color: var(--ink); }
.qsl-btn:disabled { opacity: .45; cursor: default; }
.qsl-btn-primary {
  background: var(--accent, var(--vermilion));
  border-color: var(--accent, var(--vermilion));
  color: #fff;
  font-weight: 600;
}
.qsl-btn-primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.qsl-btn-danger { color: var(--vermilion); border-color: var(--vermilion-soft, var(--rule)); }
.qsl-btn-danger:hover:not(:disabled) { background: var(--vermilion-bg, var(--paper-warm)); color: var(--vermilion); }

.qsl-sent {
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--success);
}
.qsl-err {
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--vermilion);
}

/* ── 计划步骤 ──────────────────────────────────────────────────── */
.qsl-steps {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.75;
}
.qsl-steps li { margin-bottom: 3px; }

/* ── 子智能体 ──────────────────────────────────────────────────── */
.qsl-subwrap .qsl-head { margin-bottom: 7px; }
.qsl-subs { display: flex; flex-direction: column; gap: 4px; }
.qsl-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 9px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 5px;
  background: var(--paper, #fff);
}
.qsl-sub-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.qsl-sub-running .qsl-sub-dot { background: var(--accent, var(--vermilion)); animation: qslPulse 1.4s ease-in-out infinite; }
.qsl-sub-success .qsl-sub-dot { background: var(--success); }
.qsl-sub-error   .qsl-sub-dot { background: var(--vermilion); }
.qsl-sub-warning .qsl-sub-dot { background: var(--warning, var(--gold)); }
@keyframes qslPulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.qsl-sub-name { font-family: var(--mono); font-size: 11.5px; color: var(--ink); font-weight: 600; }
.qsl-sub-sum  { color: var(--ink-mute); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qsl-sub-st   { margin-left: auto; font-size: 11px; color: var(--ink-faint); flex-shrink: 0; }

/* ── 产物 ──────────────────────────────────────────────────────── */
.qsl-art-fig { margin: 12px 0; text-align: center; }
.qsl-art-fig img {
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper, #fff);
}
.qsl-art-fig figcaption {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}
.qsl-art-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--accent, var(--vermilion));
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.qsl-art-link:hover { border-bottom-color: currentColor; }

/* 工作区预览 */
.qsl-prev { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.qsl-prev-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule-soft, var(--rule));
  flex-shrink: 0;
}
.qsl-prev-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.qsl-prev-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.qsl-prev-dl { margin-left: auto; }
.qsl-prev-img { max-width: 100%; margin: 12px auto; display: block; }
.qsl-prev-pre {
  flex: 1; margin: 0; padding: 12px;
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
  color: var(--ink-soft); overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.qsl-prev-none {
  padding: 40px 20px; text-align: center;
  font-size: 12px; color: var(--ink-faint); line-height: 2;
}
.qsl-prev-none-ico { font-size: 22px; opacity: .3; margin-bottom: 6px; }

/* ── 项目选择器 ────────────────────────────────────────────────── */
.qsl-proj-wrap { position: relative; margin-left: auto; margin-right: 10px; }
#composerModelWrap { margin-left: 0 !important; }
.qsl-proj-dd { right: 0; min-width: 220px; max-height: 320px; overflow: auto; }

/* ── 历史列表 ──────────────────────────────────────────────────── */
/* main.css 里 .sidebar .history 是 flex 列 + overflow-y:auto, 但子项没有
   flex-shrink:0 —— 条目一多就被**压扁**而不是滚动:
     · 行高被压 -> 文字上下被切掉 (用户报的"字体只显示一半")
     · scrollHeight 恒等于 clientHeight -> 滚不动、拖不动
   这里把子项固定住, 溢出才会真正交给容器滚动。 */
.sidebar .history > * { flex-shrink: 0; }

.qsl-hist {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  /* 文字截断交给 CSS 的 ellipsis, JS 不再预先切 —— 否则双重截断 */
  min-height: 20px;
}
.qsl-hist-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qsl-hist.is-active {
  background: var(--accent-bg, rgba(0, 0, 0, .05));
  color: var(--ink);
  font-weight: 500;
}
/* 进行中的会话给一个呼吸点 —— 离开会话后后台还在跑, 得让用户看得见 */
.qsl-hist-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, var(--vermilion));
  flex-shrink: 0;
  animation: qslPulse 1.4s ease-in-out infinite;
}
.qsl-hist-wait {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warning, var(--gold));
  flex-shrink: 0;
}
.qsl-hist-empty { color: var(--ink-faint); cursor: default; }

.qsl-hist-more {
  cursor: pointer;
  color: var(--accent, var(--vermilion)) !important;
  font-size: 12px !important;
}
.qsl-hist-count {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--ink-faint);
  cursor: default;
}

.qsl-hist-tools {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-mute);
  padding-bottom: 7px; margin-bottom: 9px;
  border-bottom: 1px dashed var(--rule-soft, var(--rule));
}

/* 恢复会话时的"仍在运行"提示条 */
.qsl-resume {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent, var(--vermilion));
  border-radius: 5px;
  background: var(--paper-warm, var(--accent-bg));
  font-size: 12px;
  color: var(--ink-soft);
}
.qsl-resume i { color: var(--accent, var(--vermilion)); }

/* ── 工作区折叠条上的产物数量角标 ────────────────────────────────
   面板折起来时也得让人知道里面有东西, 否则产物等于不存在 */
.qsl-ws-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-top: 6px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent, var(--vermilion));
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════
   首页工作台 · 进行中 / 最近会话 / 项目
   ══════════════════════════════════════════════════════════════════ */
.qsl-dash {
  max-width: 1180px;
  margin: 4px auto 40px;
  padding: 0 24px;
}
.qsl-dash[hidden] { display: none; }

.qsl-dash-sec { margin-bottom: 26px; }

.qsl-dash-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule-soft, var(--rule));
}
.qsl-dash-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: var(--serif, var(--sans));
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
}
.qsl-dash-hint {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-left: auto;
}
.qsl-dash-empty {
  padding: 22px 4px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.qsl-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--accent, var(--vermilion));
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.qsl-linkbtn:hover {
  border-color: var(--rule);
  background: var(--paper-warm, var(--accent-bg));
}

/* ── 会话卡 ─────────────────────────────────────────────────────── */
.qsl-scards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.qsl-scard {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper, #fff);
  padding: 11px 13px 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.qsl-scard:hover {
  border-color: var(--accent-soft, var(--ink-faint));
  box-shadow: 0 2px 10px -4px rgba(15, 42, 90, .18);
  transform: translateY(-1px);
}
.qsl-scard.is-live { border-left: 2px solid var(--accent, var(--vermilion)); }
.qsl-scard.is-wait { border-left: 2px solid var(--warning, var(--gold)); }
.qsl-scard.is-fail { border-left: 2px solid var(--vermilion); }

.qsl-scard-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.qsl-scard-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--mono);
}
.qsl-scard-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent, var(--vermilion));
  animation: qslPulse 1.4s ease-in-out infinite;
}
.qsl-scard.is-wait .qsl-scard-dot { background: var(--warning, var(--gold)); animation: none; }
.qsl-scard-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--mono);
}
.qsl-scard-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  /* 两行截断 —— 标题长短不一, 卡片高度要齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qsl-scard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-faint);
}
.qsl-scard-meta span { display: inline-flex; align-items: center; gap: 3px; }
.qsl-scard-meta i { font-size: 12px; }

/* ── 项目卡 ─────────────────────────────────────────────────────── */
.qsl-pcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.qsl-pcard {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper, #fff);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.qsl-pcard:hover { border-color: var(--accent-soft, var(--ink-faint)); }
.qsl-pcard.is-active {
  border-color: var(--accent, var(--vermilion));
  background: var(--accent-bg, var(--paper-warm));
}
.qsl-pcard-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  min-width: 0;
}
.qsl-pcard-head i { color: var(--ink-mute); font-size: 14px; flex-shrink: 0; }
.qsl-pcard.is-active .qsl-pcard-head i { color: var(--accent, var(--vermilion)); }
.qsl-pcard-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qsl-pcard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--mono);
}

/* 下拉表头的补充说明 */
.qsl-dd-note {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0;
}

/* ── 中断按钮 (输入框区) ──────────────────────────────────────────
   一个小图标, 放在 send-btn 左侧; 不占独立方块 (原来的独立矩形卡片比
   send-btn 还大, 用户明确嫌丑)。只在真跑一轮时出现, 结束后自动收掉。 */
.qsl-stop-composer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--vermilion);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
  /* 里面的 <i> 图标垂直居中, 文字 (若有) 缩到隐藏尺寸 —— 保留在 DOM 里给
     screen reader, 视觉上不显示 */
}
.qsl-stop-composer:hover:not(:disabled) {
  border-color: var(--vermilion);
  background: var(--vermilion-bg, var(--paper-warm));
  transform: scale(1.05);
}
.qsl-stop-composer:disabled { opacity: .55; cursor: default; }
.qsl-stop-composer i { font-size: 15px; line-height: 1; }
/* 「中断」文字只留给辅助读屏, 视觉隐藏 —— 太挤, 一个图标就够了 */
.qsl-stop-composer .qsl-stop-label {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── 中断按钮 (agent-loop 工具条) ──────────────────────────────── */
.qsl-stop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.qsl-stop:hover:not(:disabled) {
  color: var(--vermilion);
  border-color: var(--vermilion-soft, var(--vermilion));
  background: var(--vermilion-bg, transparent);
}
.qsl-stop:disabled { opacity: .5; cursor: default; }
.qsl-stop i { font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════
   产物浏览器 · 上 2/3 渲染 + 下 1/3 目录
   ══════════════════════════════════════════════════════════════════
   面板整体宽度用 app.js 原有的 #workspaceResizeHandle 左右拖 (上限 1200px)。
   这里管内部的上下分栏、渲染区、目录区。
   ══════════════════════════════════════════════════════════════════ */
.qsl-art {
  --qsl-art-split: 66%;
  display: grid;
  grid-template-rows: var(--qsl-art-split) 6px 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.qsl-art.list-collapsed {
  grid-template-rows: 1fr 0 32px;
}
.qsl-art.list-collapsed .qsl-art-split-h { display: none; }
.qsl-art.list-collapsed .qsl-art-list-body { display: none; }

/* ── 渲染区 ─────────────────────────────────────────────────────── */
.qsl-art-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.qsl-art-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft, var(--rule));
  background: var(--paper, #fff);
}
.qsl-art-kind {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  background: var(--paper-warm, var(--accent-bg));
  border-radius: 3px;
  padding: 1px 6px;
}
.qsl-art-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qsl-art-meta {
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
}
.qsl-art-act {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 4px;
  color: var(--ink-mute);
  text-decoration: none;
}
.qsl-art-act:hover { background: var(--paper-warm, var(--accent-bg)); color: var(--ink); }
.qsl-art-act i { font-size: 15px; }

.qsl-art-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--paper, #fff);
  display: flex;
  flex-direction: column;
}
/* 内容少时也铺满 —— 用户报 "有时没铺满" (纵向) 和 "横向没铺满 (例如代码)"。
   让直接子容器同时**撑满宽高**: flex column 布局默认 stretch, 但 min-content
   width 会让代码块只占 pre 里实际字符宽度; 显式 width:100% 兜到 100%。
   长内容超出后 .qsl-art-body 自己出滚动 (flex-shrink:0 保证子不被压缩)。 */
.qsl-art-body > * {
  flex: 1 0 auto;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.qsl-art-loading {
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

/* 图片 / 矢量图 */
.qsl-art-img-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px;
  min-height: 100%;
  box-sizing: border-box;
}
.qsl-art-img-wrap img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 4px;
  background: #fff;
}

/* PDF / HTML —— 交给浏览器自己的渲染器 */
.qsl-art-frame {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
  background: #fff;
}

/* Markdown */
.qsl-art-md {
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.qsl-art-md h1, .qsl-art-md h2, .qsl-art-md h3, .qsl-art-md h4 {
  color: var(--ink);
  font-family: var(--serif, var(--sans));
  margin: 18px 0 8px;
  line-height: 1.4;
}
.qsl-art-md h1 { font-size: 19px; }
.qsl-art-md h2 { font-size: 16px; }
.qsl-art-md h3 { font-size: 14px; }
.qsl-art-md p { margin: 0 0 10px; }
.qsl-art-md ul, .qsl-art-md ol { margin: 0 0 10px; padding-left: 22px; }
.qsl-art-md li { margin-bottom: 3px; }
.qsl-art-md code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--paper-warm, var(--accent-bg));
  padding: 1px 4px;
  border-radius: 3px;
}
.qsl-art-md pre {
  background: var(--paper-warm, var(--accent-bg));
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 5px;
  padding: 10px 12px;
  overflow: auto;
  font-size: 11.5px;
  line-height: 1.6;
}
.qsl-art-md pre code { background: none; padding: 0; }
.qsl-art-md table { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 12px; }
.qsl-art-md th, .qsl-art-md td {
  border: 1px solid var(--rule-soft, var(--rule));
  padding: 5px 8px;
  text-align: left;
}
.qsl-art-md th { background: var(--paper-warm, var(--accent-bg)); font-weight: 600; color: var(--ink); }
.qsl-art-md img { max-width: 100%; border-radius: 4px; }
.qsl-art-md blockquote {
  margin: 0 0 10px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--rule);
  color: var(--ink-mute);
}
.qsl-art-md a { color: var(--accent, var(--vermilion)); }

/* 代码 / JSON —— 带行号 */
.qsl-art-body .qsl-code {
  display: flex;
  align-items: stretch;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
  min-height: 100%;
}
.qsl-code-gutter {
  margin: 0;
  padding: 12px 8px 12px 12px;
  text-align: right;
  color: var(--ink-faint);
  background: var(--paper-warm, var(--accent-bg));
  border-right: 1px solid var(--rule-soft, var(--rule));
  user-select: none;
  flex-shrink: 0;
  font: inherit;
}
.qsl-code-body {
  margin: 0;
  padding: 12px 14px;
  color: var(--ink-soft);
  white-space: pre;
  flex: 1;
  min-width: 0;
  font: inherit;
}

/* 表格 (CSV / TSV) */
.qsl-art-table-wrap { padding: 12px; }
.qsl-art-table {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
  width: 100%;
}
.qsl-art-table th, .qsl-art-table td {
  border: 1px solid var(--rule-soft, var(--rule));
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
}
.qsl-art-table th {
  background: var(--paper-warm, var(--accent-bg));
  color: var(--ink);
  font-weight: 600;
  position: sticky;
  top: 0;
}
.qsl-art-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .015); }
.qsl-art-note { margin-top: 8px; font-size: 11px; color: var(--ink-faint); }

/* 无法预览 / 空态 */
.qsl-art-none, .qsl-art-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 200px;
  padding: 30px 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.qsl-art-none-ico { font-size: 24px; opacity: .3; }
.qsl-art-none-sub { font-size: 11.5px; color: var(--ink-faint); }

/* ── 上下分隔条 ─────────────────────────────────────────────────── */
.qsl-art-split-h {
  cursor: ns-resize;
  background: var(--rule-soft, var(--rule));
  position: relative;
}
.qsl-art-split-h::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 2px;
  border-radius: 2px;
  background: var(--ink-faint);
  opacity: .4;
}
.qsl-art-split-h:hover { background: var(--accent, var(--vermilion)); }
.qsl-art-split-h:hover::after { opacity: .8; background: #fff; }

/* ── 目录区 ─────────────────────────────────────────────────────── */
.qsl-art-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-soft, var(--paper-warm));
}
.qsl-art-list-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule-soft, var(--rule));
}
.qsl-art-fold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}
.qsl-art-fold:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.qsl-art-fold i { font-size: 14px; }

.qsl-art-list-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
.qsl-art-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-soft);
}
.qsl-art-item:hover { background: rgba(0, 0, 0, .04); }
.qsl-art-item.is-sel {
  background: var(--accent-bg, rgba(0, 0, 0, .06));
  color: var(--ink);
  font-weight: 500;
}
.qsl-art-item-dot {
  width: 6px; height: 6px; border-radius: 1px;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.qsl-art-item-dot.k-image, .qsl-art-item-dot.k-svg { background: var(--accent, var(--vermilion)); }
.qsl-art-item-dot.k-pdf { background: var(--vermilion); }
.qsl-art-item-dot.k-md, .qsl-art-item-dot.k-text { background: var(--teal, var(--ink-mute)); }
.qsl-art-item-dot.k-code, .qsl-art-item-dot.k-json, .qsl-art-item-dot.k-notebook { background: var(--gold, var(--warning)); }
.qsl-art-item-dot.k-table { background: var(--success); }
.qsl-art-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qsl-art-item-meta {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
}

/* 分子结构 (PDB / CIF / SDF …) —— 3Dmol 视图 + 工具条 */
.qsl-art-mol { display: flex; flex-direction: column; height: 100%; min-height: 300px; }
.qsl-art-mol-view { flex: 1; min-height: 240px; position: relative; background: var(--paper, #fbfaf7); }
.qsl-art-mol-bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--rule-soft, var(--rule));
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
}
.qsl-art-mol-bar button {
  font-family: inherit; font-size: 10.5px;
  padding: 3px 9px; margin-left: auto;
  border: 1px solid var(--rule); border-radius: 4px;
  background: transparent; color: var(--ink-mute); cursor: pointer;
}
.qsl-art-mol-bar button + button { margin-left: 0; }
.qsl-art-mol-bar button:hover { color: var(--ink); border-color: var(--ink-mute); }

/* ══════════════════════════════════════════════════════════════════
   对话设置面板 (composer 配置按钮) · 对齐 Claude Science 的会话开关
   ══════════════════════════════════════════════════════════════════
   面板是向上弹的 (main.css: bottom: calc(100% + 8px))。7 行 × 两行文字
   一度撑到 459px 高, 顶部溢出视口 106px 被裁掉 —— 所以这里:
     · 行压成**单行** (说明文字挪到 title 提示, 不再占第二行)
     · 字号收一档
     · 加高度上限 + 内滚
   再配合 JS 侧的翻转 (上方不够就往下弹, 见 backend-live.js _placeConfigMenu)。
   ══════════════════════════════════════════════════════════════════ */
#composerConfigMenu {
  min-width: 336px;
  max-width: 380px;
  /* 上限按视口给, 小屏也不会顶出去 */
  max-height: min(58vh, 380px);
  overflow-y: auto;
  scrollbar-width: thin;
}
#composerConfigMenu::-webkit-scrollbar { width: 5px; }
#composerConfigMenu::-webkit-scrollbar-thumb {
  background: var(--rule); border-radius: 4px;
}
/* 往下弹的形态 (JS 判断上方空间不足时加这个类) */
#composerConfigMenu.qsl-cfg-down {
  bottom: auto;
  top: calc(100% + 8px);
}

.config-menu-body { padding: 2px 0; }

.qsl-cfg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  min-height: 26px;
}
.qsl-cfg-row + .qsl-cfg-row { border-top: 1px solid var(--rule-soft, var(--rule)); }
.qsl-cfg-meta { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
.qsl-cfg-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap;
}
.qsl-cfg-label em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  background: var(--paper-warm, var(--accent-bg));
  border-radius: 2px;
  padding: 0 3px;
}
/* 说明文字改成 title 提示, 不再占一行 —— 留一个虚下划线暗示可悬停 */
.qsl-cfg-label[title] { border-bottom: 1px dotted var(--rule); cursor: help; }

/* 分段控件 */
.qsl-cfg-seg {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.qsl-cfg-opt {
  font-family: inherit;
  font-size: 10.5px;
  padding: 2px 7px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
}
.qsl-cfg-opt + .qsl-cfg-opt { border-left: 1px solid var(--rule-soft, var(--rule)); }
.qsl-cfg-opt:hover { background: var(--paper-warm, var(--accent-bg)); color: var(--ink); }
.qsl-cfg-opt.is-on {
  background: var(--accent, var(--vermilion));
  color: #fff;
  font-weight: 600;
}

/* 开关 */
.qsl-cfg-sw {
  flex-shrink: 0;
  position: relative;
  width: 30px; height: 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-warm, var(--accent-bg));
  cursor: pointer;
  padding: 0;
  transition: background .15s, border-color .15s;
}
.qsl-cfg-sw.is-on {
  background: var(--accent, var(--vermilion));
  border-color: var(--accent, var(--vermilion));
}
.qsl-cfg-knob {
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .15s;
}
.qsl-cfg-sw.is-on .qsl-cfg-knob { transform: translateX(14px); }

.qsl-cfg-foot, .cfg-hint {
  padding: 5px 10px 3px;
  font-size: 10px;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule-soft, var(--rule));
  line-height: 1.45;
}
.cfg-hint { border-top: 0; }

/* ══════════════════════════════════════════════════════════════════
   项目选择 chip (工作台第一段 · 输入框下面)
   ══════════════════════════════════════════════════════════════════
   之前试过放输入框上方做成横滚 bar —— 太挤、不好看。放到下面按段落排、
   自动换行, 干净得多。
   ══════════════════════════════════════════════════════════════════ */
.qsl-pchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qsl-pchip2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper, #fff);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  max-width: 100%;
}
.qsl-pchip2:hover { border-color: var(--ink-mute); color: var(--ink); }
.qsl-pchip2.is-on {
  border-color: var(--accent, var(--vermilion));
  background: var(--accent-bg, var(--paper-warm));
  color: var(--ink);
}
.qsl-pchip2 i { font-size: 14px; opacity: .7; flex-shrink: 0; }
.qsl-pchip2.is-on i { opacity: 1; color: var(--accent, var(--vermilion)); }
.qsl-pchip2-name {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qsl-pchip2-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.qsl-pchip2.is-on .qsl-pchip2-meta { color: var(--ink-mute); }

/* ── 代码高亮 (自带的轻量高亮器) ────────────────────────────────── */
.qsl-code-body .hl-c { color: var(--ink-faint); font-style: italic; }   /* 注释 */
.qsl-code-body .hl-s { color: var(--success); }                          /* 字符串 */
.qsl-code-body .hl-n { color: var(--vermilion); }                        /* 数字 */
.qsl-code-body .hl-k { color: var(--accent, var(--vermilion)); font-weight: 600; } /* 关键字 */
.qsl-code-body .hl-f { color: var(--teal, var(--brand)); }               /* 函数 */
.qsl-code-body .hl-d { color: var(--gold, var(--warning)); }             /* 装饰器/注解 */

/* ── 对话里的产物引用 · 点了在工作空间打开 ───────────────────────── */
.qsl-art-open {
  display: inline-block;
  max-width: 100%;
  border-radius: 6px;
  cursor: zoom-in;
  transition: box-shadow .15s, transform .12s;
}
.qsl-art-open:hover {
  box-shadow: 0 4px 16px -6px rgba(15, 42, 90, .28);
  transform: translateY(-1px);
}
.qsl-art-fig .qsl-art-open img { display: block; }
.qsl-art-link i { font-size: 13px; }

/* ── 后端离线卡片 (工作台位置) ───────────────────────────────────── */
.qsl-offline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--warning, var(--vermilion));
  border-radius: 8px;
  background: var(--paper, #fff);
}
.qsl-offline-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.qsl-offline-head i { font-size: 16px; color: var(--warning, var(--vermilion)); }
.qsl-offline-body {
  font-size: 12px; color: var(--ink-mute); line-height: 1.7;
}
.qsl-offline-body code {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--paper-warm, var(--accent-bg));
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 4px;
  padding: 4px 8px;
  width: fit-content;
}

/* ══════════════════════════════════════════════════════════════════
   子智能体条 (对话框上方) + 详情面板
   ══════════════════════════════════════════════════════════════════
   对话流里那套行是"这一轮发生了什么"的时间线, 保留不动;
   这条是"现在谁在干活"的常驻状态条 —— 对话滚上去了也一眼可见。
   ══════════════════════════════════════════════════════════════════ */
/* 子智能体条 —— 长在输入框卡片**内部**的顶沿。
   跟卡片共用一张底、一条发丝线分隔, 上圆角跟 .chat-input-inner 对齐 (8px),
   所以它读起来是输入框的一部分, 不是浮在上面的第二张卡。 */
.qsl-substrip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 5px 10px 5px 12px;
  border: 0;
  border-bottom: 1px solid var(--rule-soft, var(--rule));
  border-radius: 8px 8px 0 0;
  background: var(--paper-cool, var(--paper, #fff));
  font-size: 11.5px;
}
.qsl-substrip[hidden] { display: none; }
.qsl-substrip-label {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  height: 22px;          /* 跟一行 chip 等高, 多行时不跟着往下飘 */
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.qsl-substrip-label i { font-size: 14px; }
/* 复核 chip 靠右单独一簇 —— 子智能体那格 flex:1 会把它推到右边, 中间的空白
   就是分隔, 不用再画竖线 (画了反而像落在大间隙左缘的游离标记)。 */
.qsl-substrip-tail { flex: 0 0 auto; overflow: visible; max-height: none; }
.qsl-substrip-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 6px;
  min-width: 0;
}
/* chip **一行排开、横向拖着看**。换行版在子智能体一多 (堆铺开之后更甚) 就装
   不下了, 而输入框里塞不进更多行 —— 现在一行到底, 拖出去看。 */
.qsl-substrip-scroll {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-bottom: 6px;      /* 给拖动条留的地, 免得它压在 chip 字上 */
}
.qsl-substrip-scroll > .qsl-substrip-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;    /* 原生滚动条不要, 用下面那根 */
  touch-action: pan-x;      /* 触屏交给浏览器原生横滚 */
  overscroll-behavior-x: contain;
}
.qsl-substrip-scroll > .qsl-substrip-chips::-webkit-scrollbar { display: none; }
.qsl-substrip-scroll.is-scroll > .qsl-substrip-chips { cursor: grab; }
.qsl-substrip-scroll.is-drag > .qsl-substrip-chips { cursor: grabbing; user-select: none; }
/* 两端渐隐: 只淡"那边还有东西"的一侧, 硬切会把 RESEARCHER 切成 RESEARCH */
.qsl-substrip-scroll.can-r > .qsl-substrip-chips {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
}
.qsl-substrip-scroll.can-l > .qsl-substrip-chips {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px);
  mask-image: linear-gradient(to right, transparent, #000 16px);
}
.qsl-substrip-scroll.can-l.can-r > .qsl-substrip-chips {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
/* 拖动条 —— 平时不画 (这层只有 30px 高, 常驻一条会被看成第二条分隔线),
   鼠标进到条子上才淡入。但**始终可抓**: 只靠 :hover 才给 pointer-events 的话,
   浏览器要等下一次鼠标移动才重新命中测试, "看得见却按不下去"; 它只有 4px 高,
   躺在给它留的空档里, 也抢不到 chip 的点击。 */
.qsl-substrip-bar {
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 4px;
  border-radius: 999px;
  background: var(--rule-soft, var(--rule));
  opacity: 0;
  transition: opacity .14s ease;
}
.qsl-substrip-scroll:not(.is-scroll) .qsl-substrip-bar { display: none; }
.qsl-substrip-scroll.is-scroll:hover .qsl-substrip-bar,
.qsl-substrip-scroll.is-scroll.is-hover .qsl-substrip-bar,
.qsl-substrip-scroll.is-drag .qsl-substrip-bar { opacity: 1; }
.qsl-substrip-thumb {
  display: block;
  height: 100%;
  min-width: 28px;
  border-radius: 999px;
  background: var(--ink-mute, #9a9a9a);
  cursor: grab;
}
.qsl-substrip-thumb:hover { background: var(--ink-faint, #777); }
.qsl-substrip-scroll.is-drag .qsl-substrip-thumb {
  background: var(--ink); cursor: grabbing;
}
.qsl-substrip-count {
  flex-shrink: 0;
  line-height: 22px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
}

.qsl-subchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 11px;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;      /* 一行排开时不许把 RESEARCHER 折成两行 */
  transition: border-color .15s, color .15s, background .15s;
}
.qsl-subchip:hover { color: var(--ink); border-color: var(--ink-mute); }
.qsl-subchip.is-open {
  border-color: var(--accent, var(--vermilion));
  background: var(--accent-bg, var(--paper-warm));
  color: var(--ink);
}
.qsl-subchip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
/* 运行中 —— 闪烁 */
.qsl-subchip.is-live .qsl-subchip-dot,
.qsl-subchip-dot.is-live {
  background: var(--accent, var(--vermilion));
  animation: qslBlink 1s ease-in-out infinite;
}
.qsl-subchip.is-live { border-color: var(--accent-soft, var(--accent, var(--vermilion))); }
.qsl-subchip.is-bad .qsl-subchip-dot { background: var(--vermilion); }
@keyframes qslBlink { 0%,100% { opacity: 1 } 50% { opacity: .2 } }

.qsl-subchip-name { font-family: var(--mono); font-weight: 600; }
.qsl-subchip-st { color: var(--ink-faint); }

/* ── 详情面板 ───────────────────────────────────────────────────── */
.qsl-subdetail {
  max-width: 760px;
  margin: 0 auto 6px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent, var(--vermilion));
  border-radius: 8px;
  background: var(--paper, #fff);
  overflow: hidden;
}
.qsl-subdetail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule-soft, var(--rule));
  font-size: 12px;
  color: var(--ink);
}
.qsl-subdetail-head strong { font-family: var(--mono); font-size: 11.5px; }
.qsl-subdetail-st { font-size: 11px; color: var(--ink-mute); }
.qsl-subdetail-sum {
  font-size: 11px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qsl-subdetail-x {
  margin-left: auto; flex-shrink: 0;
  width: 20px; height: 20px;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--ink-mute);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.qsl-subdetail-x:hover { background: rgba(0,0,0,.05); color: var(--ink); }

.qsl-subdetail-body {
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.qsl-subdetail-empty { color: var(--ink-faint); font-size: 11.5px; }

.qsl-submsg { display: flex; gap: 8px; margin-bottom: 9px; }
.qsl-submsg-who {
  flex-shrink: 0;
  width: 30px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  padding-top: 2px;
}
.qsl-submsg-body { flex: 1; min-width: 0; }
.qsl-submsg-body > :first-child { margin-top: 0; }
.qsl-submsg-body > :last-child { margin-bottom: 0; }
.qsl-submsg.is-in .qsl-submsg-body { color: var(--ink-mute); }
.qsl-submsg-body img { max-width: 100%; border-radius: 4px; }
.qsl-submsg-body pre {
  background: var(--paper-warm, var(--accent-bg));
  border-radius: 4px; padding: 6px 8px;
  font-family: var(--mono); font-size: 11px; overflow: auto;
}

.qsl-subtool {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 5px 6px 0;
  padding: 1px 7px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 10px;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute);
}
.qsl-subtool i { font-size: 11px; }

.qsl-subarts {
  margin-top: 6px; padding-top: 7px;
  border-top: 1px dashed var(--rule-soft, var(--rule));
  font-size: 11.5px; color: var(--ink-faint);
}
.qsl-subarts .qsl-art-link { font-size: 11.5px; }

/* 子智能体详情 · 任务书 / 结构化输出 */
.qsl-subbrief {
  margin: 0 0 9px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 5px;
  background: var(--paper-warm, var(--accent-bg));
}
.qsl-subbrief > summary {
  padding: 5px 9px;
  font-size: 11px;
  color: var(--ink-mute);
  cursor: pointer;
  user-select: none;
}
.qsl-subbrief > summary:hover { color: var(--ink); }
.qsl-subbrief pre {
  margin: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--rule-soft, var(--rule));
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
}
.qsl-substep { margin-bottom: 8px; }
.qsl-subjson {
  margin: 4px 0 0;
  padding: 7px 9px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 4px;
  background: var(--paper-warm, var(--accent-bg));
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}

/* ── 子智能体行 · 可点开 (对话流内) ─────────────────────────────── */
.qsl-subs-hist { margin-bottom: 10px; }
.qsl-sub-clickable { cursor: pointer; transition: border-color .15s, background .15s; }
.qsl-sub-clickable:hover {
  border-color: var(--ink-mute);
  background: var(--paper-warm, var(--accent-bg));
}
.qsl-sub-chev {
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: transform .15s;
}
.qsl-sub-clickable.is-open .qsl-sub-chev { transform: rotate(180deg); }
.qsl-sub-clickable.is-open {
  border-color: var(--accent, var(--vermilion));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 就地展开的详情 —— 紧贴在行下面, 视觉上是一体 */
.qsl-sub-inline {
  border: 1px solid var(--accent, var(--vermilion));
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: var(--paper, #fff);
  margin: -1px 0 4px;
  overflow: hidden;
}
.qsl-sub-inline .qsl-subdetail-body {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ── 同类子智能体叠放 (对话流内) ─────────────────────────────────
   长会话里 verifier 会按转录窗口反复复核 (chunk 1/3 · window 226-373 …),
   十几行平铺会把对话挤没 —— 折叠成一行, 点开才铺出单条。 */
.qsl-subgroup { display: flex; flex-direction: column; gap: 4px; }
.qsl-subgroup-head { cursor: pointer; }
.qsl-subgroup-head:hover {
  border-color: var(--ink-mute);
  background: var(--paper-warm, var(--accent-bg));
}
.qsl-subgroup-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  background: var(--paper-warm, var(--accent-bg));
  border-radius: 3px;
  padding: 0 5px;
  flex-shrink: 0;
}
.qsl-subgroup-list { display: none; flex-direction: column; gap: 4px; padding-left: 16px; }
.qsl-subgroup.is-open > .qsl-subgroup-list { display: flex; }
.qsl-subgroup.is-open > .qsl-subgroup-head .qsl-sub-chev { transform: rotate(180deg); }
.qsl-subgroup.is-open > .qsl-subgroup-head { border-color: var(--ink-mute); }

/* ── 条条上的叠放 ───────────────────────────────────────────────── */
.qsl-subpile { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qsl-subchip-pile .qsl-subpile-n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
}
.qsl-subchip-pile i { font-size: 12px; color: var(--ink-faint); }
.qsl-subpile.is-open > .qsl-subchip-pile {
  border-color: var(--ink-mute);
  background: var(--paper-warm, var(--accent-bg));
}

/* ══════════════════════════════════════════════════════════════════
   复核 (verification) —— 对齐 Claude Science 的呈现
   ══════════════════════════════════════════════════════════════════
   长会话里 verifier 会跑几十轮, 但那些 REVIEWER 子 frame 全是 is_hidden、
   属于内部管道。CS 里"review 很少"= 只摆结论: N 轮折成一个计数, 用户看
   claim / verdict / severity / evidence。
   ══════════════════════════════════════════════════════════════════ */
.qsl-verifychip .qsl-subchip-dot { background: var(--success); }
.qsl-verifychip.is-warn .qsl-subchip-dot { background: var(--warning, var(--gold)); }
.qsl-verifychip.is-warn { border-color: var(--warning, var(--gold)); }
.qsl-verifychip.is-live .qsl-subchip-dot {
  background: var(--accent, var(--vermilion));
  animation: qslBlink 1s ease-in-out infinite;
}
.qsl-verifychip .qsl-subpile-n {
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
}
.qsl-subdetail-head > i { font-size: 15px; color: var(--accent, var(--vermilion)); }

.qsl-vcheck {
  border: 1px solid var(--rule-soft, var(--rule));
  border-left: 2px solid var(--ink-faint);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--paper, #fff);
}
.qsl-vcheck:last-child { margin-bottom: 0; }
.qsl-vcheck-ok   { border-left-color: var(--success); }
.qsl-vcheck-warn { border-left-color: var(--warning, var(--gold)); }
.qsl-vcheck-bad  { border-left-color: var(--vermilion); }

.qsl-vcheck-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 5px;
}
.qsl-vcheck-verdict {
  font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  background: var(--paper-warm, var(--accent-bg));
  color: var(--ink);
}
.qsl-vcheck-warn .qsl-vcheck-verdict { color: var(--warning, var(--gold)); }
.qsl-vcheck-bad  .qsl-vcheck-verdict { color: var(--vermilion); }
.qsl-vcheck-ok   .qsl-vcheck-verdict { color: var(--success); }
.qsl-vcheck-sev, .qsl-vcheck-res, .qsl-vcheck-ref {
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
}
.qsl-vcheck-claim {
  font-size: 12px; font-weight: 500; color: var(--ink);
  line-height: 1.55; margin-bottom: 4px;
}
.qsl-vcheck-ev, .qsl-vcheck-reb {
  font-size: 11.5px; color: var(--ink-mute); line-height: 1.6;
}
.qsl-vcheck-reb { margin-top: 4px; color: var(--ink-faint); }

/* ── 文件上传 ───────────────────────────────────────────────────── */
/* 待传附件 chip (沿用 .attached-chip 的底样式, 这里只加状态与细节) */
.qsl-att { gap: 5px; }
.qsl-att i { font-size: 12px; flex-shrink: 0; }
.qsl-att-name {
  max-width: 190px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.qsl-att-size { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.qsl-att-up { opacity: .75; }
.qsl-att-bad { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }
.qsl-spin { animation: qslSpin .9s linear infinite; }
@keyframes qslSpin { to { transform: rotate(360deg); } }

/* 附件 = 用户气泡**下面**的子泡, 不是气泡旁边另起一块。
   .message-user 原本是 flex 行 + justify-content:flex-end, 附件塞进去会被排到
   气泡右侧 (观感很散); 改成列方向右对齐, 气泡本身的位置不变。 */
.message-user { flex-direction: column; align-items: flex-end; }

.qsl-msg-atts {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px;
  margin: 4px 0 0;
  max-width: 85%;                 /* 跟气泡同宽上限, 视觉上是一组 */
}
/* 子泡: 跟气泡同色系同圆角, 只是矮一些淡一些 —— 一眼看出是这条消息的附属 */
.qsl-msg-att {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper-warm);
  font-size: 12.5px; color: var(--ink-soft); text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.qsl-msg-att:hover { border-color: var(--ink-mute); color: var(--ink); }
.qsl-msg-att i { font-size: 14px; color: var(--ink-faint); flex-shrink: 0; }
.qsl-msg-att-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qsl-msg-att-size {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
}

/* 修 J: video/img/audio 内嵌预览 —— 附件容器 .qsl-msg-atts 是 max-width:85%
   跟用户气泡同宽, 但视频/图片默认按 intrinsic 尺寸 (1920x1080) 撑破容器,
   凸出到对话流外面。强制 width:100% 让内容缩到容器内, 高度自适应。 */
.qsl-msg-att-fig {
  margin: 0;
  width: 100%;
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper-warm);
  overflow: hidden;
}
.qsl-msg-att-media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 420px;              /* 长竖图/长视频不至于把对话推得老长 */
  object-fit: contain;
  background: #000;               /* 视频加载时的底色, 别露出气泡色 */
}
.qsl-msg-att-fig > audio.qsl-msg-att-media {
  height: 36px;
  background: transparent;
  max-height: none;
}
.qsl-msg-att-cap {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 11.5px; color: var(--ink-mute);
  border-top: 1px solid var(--rule-soft, var(--rule));
}
.qsl-msg-att-cap .qsl-msg-att-size { margin-left: auto; }

/* 提示条 */
.qsl-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  z-index: 9999;
  max-width: min(560px, 86vw);
  padding: 9px 14px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.qsl-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ══ 新派生子智能体的右下角浮窗 ═══════════════════════════════════════
   右下角、纵向堆叠、最多三条。计时条走完自己关掉; 鼠标停上去 (.is-hold)
   动画和计时一起停 —— 人还在读的时候把它抽走最气人。 */
.qsl-subtoasts {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 9998;            /* 比中间那条 .qsl-toast (9999) 低一层 */
  display: flex;
  flex-direction: column-reverse;   /* 新的贴着底边出现, 老的往上排 */
  gap: 8px;
  pointer-events: none;     /* 容器不吃点击, 只有卡片吃 */
}
.qsl-subtoast {
  position: relative;
  overflow: hidden;
  width: 300px;
  padding: 9px 11px 10px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent, var(--vermilion));
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .13);
  font-size: 12px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .22s ease, transform .22s ease, box-shadow .15s ease;
}
.qsl-subtoast.is-on { opacity: 1; transform: translateX(0); }
.qsl-subtoast.is-off { pointer-events: none; }   /* 淡出中, 别再吃点击 */
.qsl-subtoast:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.qsl-subtoast-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
}
.qsl-subtoast-agent {
  font-family: var(--mono); font-weight: 600; font-size: 11.5px;
  color: var(--ink);
}
.qsl-subtoast-st { font-size: 10.5px; color: var(--ink-faint); }
.qsl-subtoast-x {
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 2px; border: 0; border-radius: 4px;
  background: transparent; color: var(--ink-faint);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.qsl-subtoast-x:hover { color: var(--ink); background: var(--paper-cool, transparent); }
.qsl-subtoast-task {
  color: var(--ink-mute);
  line-height: 1.5;
  /* 任务书可能很长 —— 最多三行, 剩下的进详情看 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.qsl-subtoast-task.is-wait { color: var(--ink-faint); font-style: italic; }
.qsl-subtoast-foot {
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: 10.5px; color: var(--ink-faint);
}
/* 计时条 —— 也是"还剩多久"的可见反馈, 不然自动消失像是闪了一下就没了 */
.qsl-subtoast-timer {
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--accent-soft, var(--accent, var(--vermilion)));
  transform-origin: left center;
  animation: qsl-subtoast-count var(--qsl-subtoast-ms, 9000ms) linear forwards;
}
.qsl-subtoast.is-hold .qsl-subtoast-timer { animation-play-state: paused; }
@keyframes qsl-subtoast-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 从浮窗跳过去时, 对话流里那一行闪一下 —— 不然滚过去了也不知道看哪 */
.qsl-sub.is-flash, .qsl-sub[data-sub-row].is-flash {
  animation: qsl-sub-flash 1.4s ease-out 1;
}
@keyframes qsl-sub-flash {
  0%, 100% { background: transparent; }
  15%, 55% { background: var(--accent-bg, var(--paper-warm)); }
}

/* ══ `/` 技能补全弹层 ═══════════════════════════════════════════════
   浮在 textarea 上方/下方 (方向根据视口空间自适应), 位置由 JS 每次
   打开时按 getBoundingClientRect 算, resize 时同步。 */
.qsl-skillpop {
  position: fixed;
  z-index: 9997;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .18);
  font-size: 12.5px;
}
.qsl-skillpop[hidden] { display: none; }
.qsl-skillpop-row {
  padding: 6px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s;
}
.qsl-skillpop-row:hover,
.qsl-skillpop-row.is-active {
  background: var(--paper-cool, var(--accent-bg));
}
.qsl-skillpop-name {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}
.qsl-skillpop-slash {
  color: var(--ink-faint);
  font-weight: 400;
}
.qsl-skillpop-badge {
  margin-left: auto;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-faint);
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 3px;
  padding: 0 5px;
}
.qsl-skillpop-desc {
  margin-top: 2px;
  color: var(--ink-mute);
  font-size: 11.5px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.qsl-skillpop-empty {
  padding: 8px 10px;
  color: var(--ink-faint);
  font-size: 12px;
}

/* ══ 追溯: 单条思考步骤展开完整内容 ═════════════════════════════════
   历史会话恢复时, traces 里每一步除了简短标签, 都塞了 detailHtml。
   点头部(trace-head) 可展开; 保留整体折叠。detail 上有 onclick=stopPropagation
   防止里面的链接/代码块把 detail 顺手收起。 */
.trace-line.has-detail {
  display: block;      /* 覆盖 .trace-line 的 flex —— head + detail 竖排 */
  padding: 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.trace-line.has-detail:last-child { border-bottom: none; }
.trace-line.has-detail .trace-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 4px;
  cursor: pointer;
  transition: background .12s;
}
.trace-line.has-detail .trace-head:hover { background: var(--paper-cool, rgba(0,0,0,.02)); }
.trace-line.has-detail .trace-chev {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-faint);
  transition: transform .18s ease;
  align-self: center;
}
.trace-line.has-detail.is-open .trace-chev { transform: rotate(180deg); }
.trace-line.has-detail .trace-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
  padding: 0 4px;
}
.trace-line.has-detail.is-open .trace-detail {
  max-height: 620px;      /* 超长的进内部滚动条, 别把整个思考链撑爆 */
  overflow: auto;
  padding: 8px 4px 10px;
  border-top: 1px dashed var(--rule-soft, var(--rule));
}
.trace-type.trace-tool   { color: var(--disc-material, var(--accent, var(--vermilion))); }
.trace-type.trace-result { color: var(--success, var(--ink-soft)); }
.trace-type.trace-err    { color: var(--vermilion); }
.qsl-trace-pre {
  margin: 0;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--paper-warm, var(--accent-bg));
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 520px;
  overflow: auto;
}
.qsl-trace-pre.is-error {
  color: var(--vermilion);
  border-color: var(--vermilion-soft, var(--rule));
  background: var(--vermilion-bg, var(--paper-warm));
}
.qsl-trace-note { color: var(--ink-faint); font-style: italic; font-size: 11.5px; }

/* 长文本折叠展开 —— 之前 tool_result 4000/8000 字硬截断改成这个,
   短的照旧直出, 超过阈值默认收起, 点开看全文 (不再丢内容)。
   summary 的颜色/字号跟已有的 .qsl-subbrief > summary 一样, 视觉一致。 */
.qsl-longfold { margin: 4px 0; }
.qsl-longfold > summary {
cursor: pointer;
  font-size: 11.5px;
  color: var(--ink-mute);
  padding: 4px 0;
  user-select: none;
}
.qsl-longfold > summary:hover { color: var(--ink); }
.qsl-longfold-body { margin-top: 4px; }
.qsl-longfold-body > :first-child { margin-top: 0; }
.qsl-longfold-body > :last-child { margin-bottom: 0; }

/* 修 G: 每段中间思考铺开成独立 assistant 气泡时, 顶部的 '研究完成 思考 …'
   thinking 小卡多余 (traces 是空的); 用 data-scene-round 标记的气泡把它隐掉,
   只保留 response 的正文 + 紧跟的紧凑工具卡片。 */
.message-assistant[data-scene-round="qsl-thought-only"] > .message-thinking {
  display: none;
}
.message-assistant[data-scene-round="qsl-thought-only"] > .message-response {
  padding-top: 4px;
}

/* 紧凑工具卡片 —— 对齐 8998 'Ran a command, ran a search / 2 steps' 表现 */
.qsl-tcard {
  margin: 8px 0 4px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 6px;
  background: var(--paper-warm, var(--accent-bg));
  overflow: hidden;
}
.qsl-tcard.has-failure { border-color: var(--vermilion-soft, var(--vermilion)); }
.qsl-tcard-head {
  padding: 6px 10px;
  font-size: 12px;
color: var(--ink-mute);
  border-bottom: 1px solid var(--rule-soft, var(--rule));
  background: transparent;
}
.qsl-tcard-rows { padding: 2px 4px; }
.qsl-tcard-row { margin: 2px 0; }
.qsl-tcard-row > summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
  user-select: none;
}
.qsl-tcard-row > summary::-webkit-details-marker { display: none; }
.qsl-tcard-row > summary:hover { background: var(--rule-soft, rgba(0,0,0,0.03)); }
.qsl-tcard-row.is-error > summary { color: var(--vermilion); }
.qsl-tcard-title { font-weight: 500; color: var(--ink); }
.qsl-tcard-name  { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
       background: rgba(0,0,0,0.04); border-radius: 3px; padding: 1px 5px; }
.qsl-tcard-tool  { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.qsl-tcard-kw   { color: var(--ink-mute); font-family: var(--mono); font-size: 11px; }
.qsl-tcard-sum  { color: var(--ink-mute); margin-left: auto; font-size: 11.5px; }
.qsl-tcard-body { padding: 4px 10px 10px; }
.qsl-tcard-pre {
  margin: 4px 0;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}
.qsl-tcard-pre.is-error {
  color: var(--vermilion);
  background: var(--vermilion-bg, rgba(200,50,50,0.05));
}
.qsl-tcard-note { color: var(--ink-faint); font-style: italic; font-size: 11.5px; }


/* markdown 图片: agent 写 ![alt](url) 时的目标样式; 别撑爆对话流宽度 */
.al-md-img, .qsl-art-md img {
  max-width: 100%;
  border-radius: 6px;
  margin: 8px 0;
  border: 1px solid var(--rule-soft, var(--rule));
  background: var(--paper);
  cursor: zoom-in;
}

/* ══ Alpha 测试小徽 ══════════════════════════════════════════════════
   放在侧栏"千枢"和首页 hero 标题后, 一眼看出还没转正; 用小号 mono +
   低饱和红边框, 别抢主标题的视觉重量。
   **临时**: 用户要求"暂时隐藏 alpha 测试字样", 加了一条 !important 覆盖
   在下面。将来要恢复只需删掉那一句就行, 徽记本身的样式全部保留。 */
.brand-alpha, .home-alpha {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border: 1px solid var(--vermilion, #c74a2b);
  border-radius: 3px;
  background: var(--vermilion-bg, rgba(199, 74, 43, .06));
  color: var(--vermilion, #c74a2b);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: .06em;
  line-height: 1.55;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
}
/* 侧栏那格 brand-name 空间紧, tag 挤到下一行 —— 主品牌名保留原尺寸, tag
   缩到 9px 挂在下方, 折叠状态下跟着 brand-name 一起隐藏。 */
.sidebar .brand-name .brand-alpha {
  display: block;
  margin: 4px 0 0;
  padding: 0 5px;
  font-size: 9px;
  letter-spacing: .04em;
  width: max-content;
  max-width: 100%;
}
body.sidebar-collapsed .sidebar .brand-name .brand-alpha { display: none; }
/* 侧栏抽屉那格空间大点, 也用行内的紧凑版 */
.nav-drawer-logo-mark .brand-alpha { margin-left: 8px; }
/* 首页 hero 标题字号比侧栏大很多, tag 要跟着放大点; 顶端对齐更好看 */
.home-alpha {
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 12px;
  vertical-align: 0.35em;
}

/* ══ 模型下拉的"更多模型"折叠 ═════════════════════════════════════════
   打开下拉时只显示常用三家 (kimi/deepseek/glm); claude 家族 + gpt 收进
   这个折叠区, 点了再展开。 */
.model-more-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--rule-soft, var(--rule));
  background: transparent;
  color: var(--ink-mute);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .15s;
}
.model-more-toggle:hover { background: var(--paper-warm, var(--accent-bg)); color: var(--ink); }
.model-more-lbl { font-family: var(--mono, 'JetBrains Mono', monospace); letter-spacing: .05em; }
.model-more-n {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  color: var(--ink-faint);
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 3px;
  padding: 0 5px;
}
.model-more-chev {
  margin-left: auto;
  font-size: 14px;
  transition: transform .18s ease;
}
.model-more-toggle.is-open .model-more-chev { transform: rotate(180deg); }
.model-more[hidden] { display: none; }

/* ── Alpha 徽记 · 临时隐藏 ─────────────────────────────────────────
   用户要求"暂时隐藏 alpha 测试字样"。用一条 !important 覆盖上面的
   display:inline-flex —— 徽记结构和 HTML 都留着 (index.html 里的
   .brand-alpha / .home-alpha 元素照旧), 恢复时只要删这一句。
   .sidebar 侧栏原来还有 body.sidebar-collapsed 时的 display:none 兜底,
   现在这条比它更强, 收起/展开状态都不显示。 */
.brand-alpha, .home-alpha { display: none !important; }