:root {
  --bg: #16181d;
  --bg2: #1e2128;
  --bg3: #262a33;
  --fg: #e6e8ee;
  --fg2: #9aa2b1;
  --accent: #4f8cff;
  --ok: #46b56b;
  --warn: #d8a03a;
  --err: #e0564f;
  --user: #2b3a55;
  --agent: #22252d;
  --tool: #33301f;
  --border: #30343d;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }

/* ---------- 滚动条：深色细条 · overlay 观感 ----------
   默认滚动条是 15px 浅灰粗条 + 上下箭头，在深色主题里非常突兀；
   侧边栏只有 220px 宽，15px 就吃掉 7% 宽度。
   做法：10px 轨道（透明）+ 2px 透明边框 + padding-box 裁剪 → 视觉 6px 细芯 pill，
   静止时半透明低调，hover / 拖动时变亮。 */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: rgba(155, 165, 185, .35);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(155, 165, 185, .55); }
*::-webkit-scrollbar-thumb:active { background-color: rgba(155, 165, 185, .72); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Firefox 走标准属性。**必须**只在「不支持 ::-webkit-scrollbar」的浏览器里生效：
   Chrome 121+ 一旦看到 scrollbar-color / scrollbar-width，就会忽略上面整套
   ::-webkit-scrollbar 自定义样式，直接退回默认丑滚动条。 */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 165, 185, .35) transparent;
  }
}
body {
  display: flex;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ---------- sidebar ---------- */
#sidebar {
  width: 220px;
  min-width: 220px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-right: 1px solid var(--border);
}
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.logo { font-weight: 700; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 6px; }
.logo-ico { width: 16px; height: 16px; display: block; }
#sessions {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  scrollbar-gutter: stable;  /* 溢出前后不抖动（滚动条出现/消失不推动文字） */
  flex: 0 1 auto;       /* 按内容自适应高度，不再撑满 */
  max-height: 46vh;     /* 列表过长时封顶并滚动 */
}
#sessions li {
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg2);
}
#sessions li:hover { background: var(--bg3); color: var(--fg); }
#sessions li.active { background: var(--bg3); color: var(--fg); font-weight: 600; }
#sessions li { display: flex; align-items: center; gap: 6px; }
#sessions li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#sessions li .badge { font-size: 11px; flex: none; }
#sessions li .badge.run { color: var(--warn); }
#sessions li .badge.tool { color: #a78bfa; }
#sessions li .badge.blocked { color: var(--warn); }

/* 运行中徽标：转圈指示器（替代静态「…」，直观表达「正在动」）。
   用 border 造环 + 顶部缺口，旋转该环即成常见 loading 样式；
   环宽/尺寸与 11px 徽标文字视觉对齐。 */
#sessions li .badge .spin {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sess-spin .7s linear infinite;
  vertical-align: -1px;
}
@keyframes sess-spin {
  to { transform: rotate(360deg); }
}
/* 尊重系统「减弱动态效果」偏好：不转，改为静态环形提示 */
@media (prefers-reduced-motion: reduce) {
  #sessions li .badge .spin {
    animation: none;
    border-top-color: currentColor;
    opacity: .55;
  }
}

/* 会话目录树：文件夹标题行（flex）+ 内容区（块级，会话各占一行） */
#sessions li.dir { display: block; padding: 0; }
#sessions li.dir:hover { background: transparent; }
#sessions .dir-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  color: var(--fg2);
}
#sessions .dir-head:hover { background: var(--bg3); }
#sessions .dir-head .toggle { flex: none; width: 12px; opacity: .7; }
#sessions .dir-head .dirname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 目录分组上的「新建空白会话」按钮：平时淡显，悬停分组时变亮，避免干扰阅读 */
#sessions .dir-head .dir-add {
  flex: none;
  border: none;
  background: transparent;
  color: var(--fg2);
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0;
}
#sessions .dir-head:hover .dir-add { opacity: .8; }
#sessions .dir-head .dir-add:hover { opacity: 1; color: var(--ok); }
#sessions .dir-children { list-style: none; margin: 0; padding: 0 0 0 16px; }
#sessions li.sess { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
#sessions li .badge.failed { color: var(--err); }
#sessions li .badge.done { color: var(--ok); }
#sessions li .ops { display: none; gap: 2px; flex: none; }
#sessions li:hover .ops, #sessions li.active .ops { display: flex; }
#sessions li .ops button { padding: 0 5px; font-size: 13px; line-height: 16px; }

.side-goal {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--fg2);
  flex: 0 0 auto;      /* 按内容高度（不参与撑满/收缩） */
  max-height: 14vh;    /* 过长封顶并滚动 */
  max-height: 22vh;    /* 最多约 5 行（超出滚动） */
  overflow-y: auto;
}
.side-goal.hidden { display: none; }
.side-goal .goal-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.side-goal .goal-ico { flex: none; }
.side-goal .goal-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 5;      /* 最后输入最多 5 行 */
  -webkit-box-orient: vertical;
}
/* 侧栏任务清单（todolist）：会话列表/goal 下方，展示当前计划步骤 */
.side-todo {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--fg2);
  flex: 0 0 auto;      /* 按内容高度（不参与撑满/收缩） */
  max-height: 32vh;
  overflow-y: auto;
}
.side-todo li .t-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-todo li.done { color: var(--ok); }
.side-todo li.running { color: var(--warn); }
.side-todo li.failed { color: var(--err); }
/* 侧栏输入队列（排队等待执行的用户输入） */
.side-queue {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--fg2);
  flex: 0 0 auto;      /* 按内容高度 */
  max-height: 32vh;
  overflow-y: auto;
}
.side-queue .queue-head { color: var(--fg); font-weight: 600; }
.side-queue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.side-queue li { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.side-queue li .q-idx { flex: none; color: var(--fg2); }
.side-queue li .t-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 空占位（todolist / 队列为空时） */
.side-todo li.empty, .side-queue li.empty { color: var(--fg2); opacity: .6; font-style: italic; }
.side-todo li { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.side-todo li .t-ico { flex: none; }
.side-todo li.done { color: var(--ok); }
.side-todo li.running { color: var(--warn); }
.side-todo li.failed { color: var(--err); }
.side-foot {
  margin-top: auto;   /* 顶到侧栏底部（内容不足时把空白集中于此） */
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg2);
}
.conn.ok { color: var(--ok); }
.conn.err { color: var(--err); }

/* ---------- main ---------- */
main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
#toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.cur { font-weight: 600; }
.run { color: var(--fg2); font-size: 12px; }
.run.busy { color: var(--warn); }
.spacer { flex: 1; }
#messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;  /* 同上：内容增长时不抖动 */
  padding: 14px 18px;
}

.entry {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
}
.entry.user { background: var(--user); }
.entry.agent, .entry.log { background: var(--agent); border-left: 3px solid var(--accent); }

/* ===== markdown 渲染（大模型输出）===== */
.entry.md > :first-child { margin-top: 0; }
.entry.md > :last-child { margin-bottom: 0; }
.entry.md p { margin: 6px 0; }
.entry.md h1, .entry.md h2, .entry.md h3,
.entry.md h4, .entry.md h5, .entry.md h6 {
  margin: 10px 0 4px;
  line-height: 1.3;
  color: var(--fg);
}
.entry.md h1 { font-size: 17px; }
.entry.md h2 { font-size: 15.5px; }
.entry.md h3 { font-size: 14.5px; }
.entry.md h4, .entry.md h5, .entry.md h6 { font-size: 13.5px; }
.entry.md ul, .entry.md ol { margin: 5px 0; padding-left: 20px; }
.entry.md li { margin: 2px 0; }
.entry.md blockquote {
  margin: 6px 0;
  padding: 2px 10px;
  border-left: 3px solid var(--border);
  color: var(--fg2);
}
.entry.md hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.entry.md strong { color: var(--fg); font-weight: 600; }
.entry.md em { font-style: italic; }
.entry.md del { opacity: .6; }
.entry.md code {
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(255, 255, 255, .07);
  border-radius: 3px;
  padding: 1px 4px;
}
.entry.md pre.md-code {
  margin: 7px 0;
  padding: 8px 10px;
  background: #14171c;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
}
.entry.md pre.md-code code { background: none; padding: 0; font-size: 12px; }
.entry.md table {
  border-collapse: collapse;
  margin: 7px 0;
  font-size: 12.5px;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.entry.md th, .entry.md td {
  border: 1px solid var(--border);
  padding: 3px 8px;
  text-align: left;
  vertical-align: top;
}
.entry.md th { background: rgba(255, 255, 255, .05); font-weight: 600; }
.entry.md a { color: var(--accent); text-decoration: underline; }
.entry.tool {
  background: var(--tool);
  border-left: 3px solid var(--warn);
  color: #e8dfae;
}
.entry.think {
  background: #1d2027;
  color: var(--fg2);
  border-left: 3px solid #555b68;
  font-size: 12px;
}
.entry .meta { color: var(--fg2); font-size: 12px; margin-bottom: 4px; }
.entry pre { margin: 4px 0 0; white-space: pre-wrap; }
.think-live {
  background: #1d2027;
  border: 1px dashed #4a505d;
  border-radius: 8px;
  color: var(--fg2);
  font-size: 12px;
  padding: 8px 10px;
  margin: 0 0 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.tail { border-left: 3px solid var(--ok); background: var(--agent); }

/* ---------- plan ---------- */
.plan {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 8px 14px;
  font-size: 13px;
}
.plan .step { color: var(--fg2); }
.plan .step.running { color: var(--warn); }
.plan .step.done { color: var(--ok); }
.plan .step.failed { color: var(--err); }

/* ---------- composer ---------- */
#dock { background: var(--bg); }
.panel {
  margin: 0 14px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}
.panel .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--fg2);
  margin-bottom: 4px;
}
.panel .hd button { padding: 2px 8px; font-size: 12px; }
.panel.plan { border-color: #3d4a63; background: var(--bg2); max-height: 160px; }
.panel.queue { border-color: #6b5420; background: #241f14; }
.panel.think { border-color: #3a4554; background: #1d2027; color: var(--fg2); font-size: 12px; }
.panel.think pre { margin: 0; white-space: pre-wrap; font-family: var(--mono); font-size: 12px; }

.slash {
  position: relative;
  margin: 0 14px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #12141a;
  max-height: 240px;
  overflow: auto;
  z-index: 5;
}
.slash button {
  display: flex;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 6px 10px;
}
.slash button .cmd { min-width: 140px; color: var(--fg); font-family: var(--mono); }
.slash button .desc { color: var(--fg2); font-size: 12px; }
.slash button.active, .slash button:hover { background: #3b2f63; }
.slash .empty { padding: 6px 10px; color: var(--fg2); font-size: 12px; }
.entry.cmd {
  background: transparent;
  border-left: 3px solid #6d5b9a;
  color: var(--fg2);
  font-size: 12px;
}

/* 输入区：页面底部横向排列；输入框多行自适应，最多 5 行 */
#composer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.send-col { display: flex; flex-direction: column; gap: 6px; }
#btn-force { color: var(--warn); }
#input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  resize: none;
  background: var(--bg3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  line-height: 1.45;
  outline: none;
  min-height: calc(1.45em + 18px);      /* 约 1 行 */
  max-height: calc(1.45em * 5 + 18px);  /* 最多 5 行（超出滚动） */
  overflow-y: auto;
}
#input:focus { border-color: var(--accent); }
button {
  background: var(--bg3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font: inherit;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
#btn-send { background: var(--accent); border-color: var(--accent); font-weight: 600; }
#btn-stop { color: var(--err); }

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal .box.wide { width: min(720px, 94vw); max-height: 86vh; overflow: auto; }
.modal h4 { margin: 14px 0 8px; font-size: 13px; }
.modal label { display: block; margin: 8px 0; font-size: 12px; color: var(--fg2); }
.modal label input {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 8px;
  font: inherit;
}
.hint { color: var(--fg2); font-size: 12px; margin: 6px 0; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { font-size: 12px; padding: 4px 8px; }
.model-picks { max-height: 180px; overflow: auto; margin-top: 8px; }
.model-picks label { display: flex; gap: 8px; align-items: center; }
.params { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.params label { display: flex; align-items: center; gap: 8px; }
.params input { flex: 1; }
.params button { align-self: flex-start; }
.model-picks label { display: flex; gap: 8px; align-items: center; }
.ep {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0;
}
.ep .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
/* 模型按钮用 flex + wrap：本地模型名普遍很长（如 qwen3-coder-30b-local:latest），
   inline 排列会挤成一行、互相挤压；改为整齐换行并保留统一间距。 */
.ep .models { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ep .models button { font-size: 12px; padding: 3px 8px; margin: 0; }

/* 当前会话正在使用的模型：绿色描边 + 柔光，作为「已选中」的确认标记。
   用 outline 而非 border：不改变按钮尺寸，避免切换时出现 1px 抖动；
   outline-offset 让描边离开按钮边界一圈，视觉上更像「包围」。 */
.ep .models button.current {
  outline: 2px solid var(--ok);
  outline-offset: 1px;
  color: var(--ok);
  box-shadow: 0 0 0 3px rgba(70, 181, 107, 0.18);
  font-weight: 600;
}
/* 尊重「减弱动态效果」偏好：不额外加过渡（本就无动画，此处仅声明语义） */
@media (prefers-reduced-motion: reduce) {
  .ep .models button.current { box-shadow: none; }
}
.modal .box {
  width: min(560px, 92vw);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.modal h3 { margin: 0 0 8px; font-size: 15px; }
.modal pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  max-height: 200px;
  overflow: auto;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.options { margin-top: 10px; }
.options label { display: block; padding: 4px 0; cursor: pointer; }
#modal-text {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 10px;
  font: inherit;
}

/* ---------- misc ---------- */
.hidden { display: none !important; }
.statsbar, .statusbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 14px;
  font-size: 12px;
  color: var(--fg2);
  background: #12141a;
  border-top: 1px solid var(--border);
  min-height: 26px;
  overflow: hidden;
  white-space: nowrap;
}
.statusbar { justify-content: space-between; }
.statusbar .busy { color: var(--warn); }
#picker-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 360px; overflow: auto; }
#picker-list li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
#picker-list li:hover, #picker-list li.active { background: var(--bg3); }
#ns-dirs, #ns-recent { list-style: none; margin: 4px 0 0; padding: 0; max-height: 190px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
#ns-dirs li, #ns-recent li { padding: 5px 10px; cursor: pointer; font-family: var(--mono); font-size: 12px; }
#ns-dirs li:hover, #ns-recent li:hover { background: var(--bg3); }
#ns-recent li .ns-base { color: var(--fg); }
#ns-recent li .ns-parent { color: var(--fg2); opacity: .7; }
.ns-sec { margin-top: 10px; }
.ns-sec-title { font-size: 11px; color: var(--fg2); opacity: .85; margin-bottom: 4px; }
.ns-bar { display: flex; gap: 8px; margin-top: 10px; }
/* 会话名提示行：默认弱化；error（如重名/目录名不可作会话名）时用错误色强调 */
#ns-name-line { margin-top: 10px; }
#ns-name-line.ns-error { color: var(--err); opacity: 1; }
#ns-msg { min-height: 16px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--err);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  z-index: 60;
  max-width: 80vw;
}

/* 工具调用：默认折叠（只显示一行标题），点击标题展开参数与输出 */
.entry.tool .tool-head {
  cursor: pointer;
  user-select: none;
}
.entry.tool .tool-head::before {
  content: "▸ ";
  opacity: .7;
}
.entry.tool.open .tool-head::before {
  content: "▾ ";
}
.entry.tool .tool-detail {
  display: none;
  margin: 6px 0 0;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 12px;
  opacity: .9;
}
.entry.tool.open .tool-detail {
  display: block;
}

/* ---- 待发送图片附件（粘贴/上传/拖拽）---- */
.attachments {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attach-item {
  position: relative;
  width: 68px;
  height: 68px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg3);
}
.attach-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.attach-item .rm {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  line-height: 16px;
  text-align: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.attach-item .sz {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 10px;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

/* ---- 消息内图片（历史回显 / 本次发送）---- */
.msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.msg-images img {
  max-width: 220px;
  max-height: 220px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: zoom-in;
}

/* ---- 工具调用二级列表（一级组 + 二级条目）----
   一级「🔧 工具调用 (N)」默认收拢，二级「工具名」默认收拢（展开为 参数 + 返回值）。 */
.entry.toolgroup {
  background: var(--tool);
  border-left: 3px solid var(--warn);
  color: #e8dfae;
  padding: 6px 10px;
}
.entry.toolgroup > .tg-head {
  cursor: pointer;
  user-select: none;
}
.entry.toolgroup > .tg-head::before {
  content: "▸ ";
  opacity: .7;
}
.entry.toolgroup.open > .tg-head::before {
  content: "▾ ";
}
.entry.toolgroup > .tg-body {
  display: none;
}
.entry.toolgroup.open > .tg-body {
  display: block;
}

/* 二级：组内的单个工具——不再重复外框，仅缩进 + 左侧细线 */
.entry.tool.toolitem {
  background: none;
  border-left: 2px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  margin: 6px 0 0 8px;
  padding: 0 0 0 10px;
  font-size: 12.5px;
}

/* ---- 工具改动统计（增删行 / 增删文件；为 0 的部分不渲染）----
   一级组显示「行 + 文件」汇总，二级条目只显示本次工具的行数。 */
.entry.toolgroup > .tg-head {
  display: flex;
  align-items: baseline;
}
.entry.toolgroup > .tg-head .tg-label {
  flex: 0 0 auto;
}
.entry.toolgroup > .tg-head .tg-stat {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  font-size: 11.5px;
}
.tstat {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  font-weight: 400;
}
.tstat-chip {
  padding: 0 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.tstat-chip.add {
  color: #4ade80;
  background: rgba(74, 222, 128, .12);
}
.tstat-chip.del {
  color: #f87171;
  background: rgba(248, 113, 113, .12);
}

/* ---- 待处理输入队列：每条带「编辑 / 删除」操作 ---- */
.panel.queue .q-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 3px 0;
}
.panel.queue .q-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.panel.queue .q-ops {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 4px;
}
.panel.queue .q-btn {
  padding: 1px 7px;
  font-size: 11.5px;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg3);
  color: var(--fg2);
  cursor: pointer;
}
.panel.queue .q-btn:hover { color: var(--fg); border-color: var(--fg2); }
.panel.queue .q-del:hover { color: #f87171; border-color: #f87171; }
.panel.queue .q-edit:hover { color: #7dd3fc; border-color: #7dd3fc; }

/* ---- 思考条目（顶层 / 工具组内）：默认收拢，点击展开全文 ----
   与工具条目同构：head（标题+展开按钮）常显，body（pre 全文）仅在 .open 时显示。 */
.entry.think > .think-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.entry.think > .think-head::before {
  content: "▸ ";
  opacity: .7;
}
.entry.think.open > .think-head::before {
  content: "▾ ";
}
.entry.think > .think-head .think-title { flex: 1 1 auto; min-width: 0; }
.entry.think > .think-head .think-toggle {
  flex: 0 0 auto;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1.6;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg3);
  color: var(--fg2);
  cursor: pointer;
}
.entry.think > .think-body { display: none; }
.entry.think.open > .think-body { display: block; }

/* 组内思考行：与组内工具行一致的缩进/左侧细线（不重复外框） */
.entry.think.thinkitem {
  background: none;
  border-left: 2px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  margin: 6px 0 0 8px;
  padding: 0 0 0 10px;
  font-size: 12px;
}

/* ---- 轮次块（大模型思考与工具调用）：默认收拢，body 内为 思考 / 工具调用列表 ---- */
.entry.turn {
  background: rgba(255, 255, 255, .02);
  border-left: 3px solid var(--accent);
  padding: 6px 10px;
}
.entry.turn > .turn-head {
  display: flex;
  align-items: baseline;
  cursor: pointer;
  user-select: none;
  color: var(--fg2);
}
.entry.turn > .turn-head::before { content: "▸ "; opacity: .7; }
.entry.turn.open > .turn-head::before { content: "▾ "; }
.entry.turn > .turn-head .turn-label { flex: 0 0 auto; }
.entry.turn > .turn-head .turn-stat {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  font-size: 11.5px;
}
.entry.turn > .turn-body { display: none; }
.entry.turn.open > .turn-body { display: block; margin-top: 4px; }

/* 轮次块内的 思考 / 工具调用列表：与轮次左缘对齐缩进一档 */
.entry.turn > .turn-body > .entry.think,
.entry.turn > .turn-body > .entry.toolgroup {
  margin: 6px 0 0 8px;
}

/* ---- 轮次块标题的汇总统计：实时状态 + 已思考/已工具调用次数 + 增删 ---- */
.entry.turn > .turn-head .turn-live {
  margin-left: 8px;
  color: #7dd3fc;
  font-size: 12px;
}
.entry.turn > .turn-head .turn-live:empty { display: none; }
.entry.turn > .turn-head .turn-meta {
  margin-left: 8px;
  color: var(--fg2);
  font-size: 12px;
}
.entry.turn > .turn-head .turn-stat {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  font-size: 11.5px;
}
/* 轮次耗时汇总（总/思考/工具）：与次数统计同排，等宽字体便于扫读数值 */
.entry.turn > .turn-head .turn-dur {
  margin-left: 8px;
  color: var(--fg2);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
  opacity: .85;
}
.entry.turn > .turn-head .turn-dur:empty { display: none; }

/* ---------- 标题美化：左侧栏分区标题 + dock 面板标题（放大 + 加粗 + 分隔线） ---------- */
.side-todo > .todo-head,
.side-queue > .queue-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: .4px;
  line-height: 1.35;
  padding-bottom: 5px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
/* 会话目录分组名（会话树的项目标题） */
#sessions .dir-head { font-size: 12.5px; }
#sessions .dir-head .dirname { font-weight: 600; }
/* 底部 dock 面板标题（任务计划 / 待处理输入队列 / 思考） */
.panel > .hd {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: .3px;
}
/* 侧栏「当前目标」标签也略作强调 */
.side-goal .goal-text { font-size: 12.5px; }

/* ---------- modal 布局美化（用户输入 / 权限确认） ---------- */
/* 标题/描述层次 */
.modal h3 { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.modal #modal-desc { font-size: 13.5px; color: var(--fg); line-height: 1.5; }

/* 选项卡片化（单选/多选：选项在前、整行可点、选中高亮）。
   注意：必须带 .modal 前缀提高特异性——否则被上面的
   `.modal label input { display:block; width:100% }` 压过，单选圆点会被撑成满行。 */
.modal .options {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal .options label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
}
.modal .options label:hover { background: var(--bg3); border-color: var(--fg2); }
.modal .options label:has(input:checked) {
  border-color: var(--accent);
  background: rgba(79, 140, 255, .12);
}
.modal .options input {
  display: inline-block;
  width: 15px;
  height: 15px;
  min-width: 15px;
  margin: 2px 0 0;
  padding: 0;
  flex: none;
  accent-color: var(--accent);
}

/* 文本输入：明确的可输入区域（更大、聚焦高亮、可纵向拉伸） */
.modal #modal-text {
  width: 100%;
  min-height: 92px;
  padding: 9px 11px;
  margin-top: 12px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}
.modal #modal-text:focus { outline: none; border-color: var(--accent); }

/* 按钮主次：主操作（提交/允许）用主色填充 */
.modal .actions button { padding: 7px 16px; }
.modal .actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.modal .actions button.primary:hover:not(:disabled) { filter: brightness(1.08); }
/* 文件引用 chip（拖入非图片文件后显示）。
   设计要点：**只读**——路径不可编辑（可编辑会改坏与真实文件的对应关系），
   仅提供 × 删除。发送时才由 composeMessage 把路径拼进消息正文。 */
.file-refs {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.file-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 6px 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg3);
  font-size: 12px;
  line-height: 18px;
  /* 只读语义：禁止文本选择/编辑，避免用户误以为可改 */
  user-select: none;
  cursor: default;
}
.file-ref .ico { flex: none; opacity: .8; }
.file-ref .fname {
  flex: 0 1 auto;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}
.file-ref .fsize { flex: none; color: var(--fg2); opacity: .75; font-size: 11px; }
.file-ref .rm {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  line-height: 14px;
  text-align: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--fg2);
  font-size: 13px;
  cursor: pointer;
}
.file-ref .rm:hover { background: var(--border); color: var(--err); }

/* 消息时间浮层（悬停显示时间）。
   为什么不用原生 title：原生 tooltip 有 1~2 秒延迟、样式不可控、在 macOS 上
   常在鼠标停下后才出现，用户容易以为「没生效」。这里自绘一个 fixed 浮层，
   150ms 内出现、样式与主题一致、位置随鼠标。 */
.msg-tip {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(24, 27, 33, .97);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;      /* 支持「调用时间/结果返回」两行 */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  pointer-events: none;       /* 浮层不能挡住鼠标，否则会抖动 */
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease;
}
.msg-tip.on { opacity: 1; transform: translateY(0); }