/* ============================================================
   remote-client-ui 样式 v0.1.0-60
   设计：深色开发者工具风格 · 三层结构（顶栏 / 侧栏 / 聊天主区）
   设计系统：8px 间距体系 · 统一圆角 · 语义色（蓝=主操作/选中，绿=成功，黄=警告，红=危险）
   ============================================================ */
:root {
  --bg: #0B0F14;
  --bg-side: #10151D;
  --bg-content: #141A23;
  --bg-card: #1A2230;
  --bg-hover: #222D3D;
  --bg-input: #1E2634;
  --border: #303D52;
  --border-strong: #42526E;
  --text: #F2F6FC;
  --text-dim: #B8C2D0;
  --text-faint: #8A96A8;
  --placeholder: #8E9AAE;
  --accent: #4F8CFF;
  --accent-hover: #6AA0FF;
  --accent-soft: rgba(79, 140, 255, 0.13);
  --success: #35C98A;
  --warn: #F6B84A;
  --danger: #F06464;
  --code-bg: #0D1117;
  --radius: 10px;
  --radius-sm: 7px;
  --mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
  --font: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --col-max: 920px; /* 消息列/输入框/审批横幅共用栅格宽度 */
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--font);
  overflow: hidden;
}
button { font: inherit; }
#app { height: 100%; display: flex; flex-direction: column; }

/* ============ 自定义滚动条（暗色主题统一） ============ */
* {
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #4A5B75 rgba(255, 255, 255, 0.04);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
/* 轨道：极弱浅色底，让滚动区在空闲时也有可发现的视觉存在 */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: #4A5B75;
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background: #6B7F9C; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: #7E93B3; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============ 通用控件 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:hover { background: var(--accent); }
.btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-dim); }
.btn.ghost:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text); }
.btn.danger { background: rgba(240, 100, 100, 0.14); border-color: rgba(240, 100, 100, 0.4); color: var(--danger); }
.btn.danger:hover { background: rgba(240, 100, 100, 0.24); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.block { width: 100%; }
.icon-btn {
  width: 27px;
  height: 27px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }

/* ============ 登录页 ============ */
#login-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1000px 500px at 20% -10%, rgba(79, 140, 255, 0.13), transparent 60%),
    radial-gradient(800px 400px at 90% 110%, rgba(124, 92, 255, 0.11), transparent 60%),
    var(--bg);
}
.login-card {
  width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.login-brand .logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #7C5CFF);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.login-brand h1 { margin: 0; font-size: 19px; font-weight: 650; }
.login-card p.sub { color: var(--text-faint); margin: 0 0 18px; font-size: 12.5px; }
.login-card label { display: block; margin: 13px 0 5px; color: var(--text-dim); font-size: 12px; }
.login-card input, .login-card select {
  width: 100%;
  padding: 9px 11px;
  font-size: 13px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  outline: none;
}
.login-card input:focus, .login-card select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
}
.login-error { color: var(--danger); font-size: 12px; min-height: 18px; margin-top: 10px; }
.login-card .btn.block { margin-top: 6px; padding: 10px; font-size: 13.5px; }

/* ============ 主界面 ============ */
#main-view { flex: 1; display: none; flex-direction: column; min-height: 0; }
#main-view.active { display: flex; }

/* 顶栏 */
#topbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  background: var(--bg-side);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14.5px; }
.brand .logo {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), #7C5CFF);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.brand .ver { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-left: 2px; }
.topbar-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-group + .topbar-group::before { content: ""; width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
.ws-name {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.topbar-spacer { flex: 1; }
.conn { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); min-width: 0; }
#status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); display: inline-block; flex-shrink: 0; }
.status-dot.online { background: var(--success); box-shadow: 0 0 6px rgba(53, 201, 138, 0.5); }
.status-dot.running { background: var(--warn); box-shadow: 0 0 6px rgba(246, 184, 74, 0.5); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* 主体两栏 */
#body { flex: 1; display: flex; min-height: 0; }

/* 侧栏 */
#sidebar {
  width: 284px;
  min-width: 284px;
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.side-section { padding: 13px 12px 0; display: flex; flex-direction: column; min-height: 0; }
.side-section + .side-section { border-top: 1px solid var(--border); margin-top: 10px; }
.ws-section { flex: 0 0 auto; }
.session-section { flex: 1; min-height: 0; }
.side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.side-head h3 { margin: 0; font-size: 11px; font-weight: 650; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.9px; }
.side-head .count { font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
.side-add { display: flex; gap: 6px; margin-bottom: 8px; }
.side-add input {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  font-size: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
}
.side-add input:focus, .side-add input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.18); }
.item-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6.5px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-dim);
  transition: background 0.12s;
}
.item:hover { background: var(--bg-hover); color: var(--text); }
.item.active { background: var(--accent-soft); color: var(--text); border-left-color: var(--accent); }
.item .ico { font-size: 12px; opacity: 0.7; flex-shrink: 0; }
.item .label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.item .running-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }
.item.dim { color: var(--text-faint); cursor: default; }

/* 侧栏底部文件工具（自定义折叠） */
.side-files { margin-top: auto; border-top: 1px solid var(--border); flex-shrink: 0; }
.side-files .side-files-head {
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.side-files .side-files-head:hover { background: var(--bg-hover); color: var(--text); }
.side-files .side-files-head::before { content: "▸"; font-size: 10px; color: var(--accent); transition: transform 0.15s; }
.side-files.open .side-files-head::before { content: "▾"; }
.side-files .files-body { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.files-body .frow { display: flex; gap: 6px; }
.files-body .frow input {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  font-size: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
}
.files-body .frow input:focus { border-color: var(--accent); }
.files-body .btn { width: 100%; justify-content: flex-start; padding: 6.5px 11px; font-size: 12.5px; }
.files-body .download-btn { width: auto; flex-shrink: 0; }

/* ============ 聊天主区 ============ */
#chat-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-content);
  position: relative;
}
#chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 与消息列/输入框共用内容轴（--col-max 居中栅格） */
  padding: 9px calc(max(20px, (100% - var(--col-max)) / 2));
  border-bottom: 1px solid var(--border);
  background: var(--bg-side);
  flex-shrink: 0;
}
.chat-title {
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.chat-meta { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.chat-meta .model-sync-btn {
  width: 27px;
  height: 27px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-dim);
  background: var(--bg-input);
  border: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.3s;
}
.chat-meta .model-sync-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }
.chat-meta .model-sync-btn:active { transform: rotate(180deg); }
.chat-meta .model-sync-btn:disabled { opacity: 0.5; cursor: default; }
.chat-meta select {
  padding: 5px 9px;
  font-size: 12px;
  max-width: 190px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
}
.chat-meta select:focus { border-color: var(--accent); }
.chat-meta select:disabled { opacity: 0.55; }
.chat-meta .meta-label { font-size: 11px; color: var(--text-faint); }
.chat-toolbar { display: flex; justify-content: center; padding: 8px 0 0; flex-shrink: 0; }

/* 审批横幅：流内展示（不遮挡聊天），与消息列同宽居中 */
#approval-panel {
  display: none;
  max-width: var(--col-max);
  width: calc(100% - 40px);
  margin: 10px auto 0;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(246, 184, 74, 0.12), rgba(246, 184, 74, 0.05));
  border: 1px solid rgba(246, 184, 74, 0.35);
  border-radius: var(--radius);
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#approval-panel.active { display: flex; }
#approval-panel .ap-icon { font-size: 16px; flex-shrink: 0; }
#approval-panel .ap-info { flex: 1; min-width: 0; }
#approval-panel .ap-info .ap-title { font-size: 12px; color: var(--warn); font-weight: 650; letter-spacing: 0.3px; }
#approval-panel .ap-info .ap-req { font-size: 12.5px; margin-top: 1px; }
#approval-panel .ap-info .tool-name { font-family: var(--mono); font-weight: 600; }
#approval-panel .ap-info .ap-reason { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; word-break: break-word; }
#approval-panel .ap-divider { width: 1px; align-self: center; height: 32px; background: rgba(246, 184, 74, 0.18); flex-shrink: 0; }
#approval-panel .approval-actions { display: flex; gap: 7px; flex-shrink: 0; }
#approval-panel .approval-actions .btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

/* 消息区：内容列居中 */
#chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px calc(max(20px, (100% - var(--col-max)) / 2)) 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-gutter: stable;
}
/* 关键：flex 列容器内容溢出时子项默认 flex-shrink:1 会被压扁
   （工具卡折叠后内容最小，被压到 2px 变成"一条横线"且无法点击）。
   禁止所有聊天子项收缩，保证内容完整高度。 */
#chat-scroll > * { flex-shrink: 0; }
.msg {
  max-width: var(--col-max);
  padding: 10px 14px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.68;
  color: #D8E1EE; /* 正文稍柔和，避免全白 */
}
.msg .msg-body { min-width: 0; }
.msg.user {
  align-self: flex-end;
  max-width: 68%;
  background: rgba(79, 140, 255, 0.18);
  border: 1px solid rgba(79, 140, 255, 0.32);
  border-bottom-right-radius: 5px;
  color: var(--text);
}
.msg.user.pending { opacity: 0.62; }
.msg.assistant { align-self: flex-start; background: transparent; padding: 2px 4px; }
/* 流式指示：正文尾部闪烁光标（不占额外行） */
.msg.assistant.streaming .msg-body::after {
  content: "▍";
  color: var(--accent);
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.msg.assistant .think-block {
  margin: 4px 0 8px;
  background: rgba(138, 150, 168, 0.07);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 8px;
  font-size: 12px;
}
/* 自定义折叠组件（不用原生 details/summary） */
.col .col-head {
  cursor: pointer;
  user-select: none;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.col .col-head::before { content: "▸"; font-size: 10px; color: var(--accent); }
.col.open .col-head::before { content: "▾"; }
.col .col-head:hover { background: var(--bg-hover); color: var(--text); }
/* 折叠时隐藏内容体（覆盖任意内容体类名：col-body / tool-args-body / tool-result …） */
.col > :not(.col-head) { display: none; }
.col.open > :not(.col-head) { display: block; }
.col.open .col-head { border-bottom: 1px solid var(--border); }
.msg.assistant .think-block .col-head { color: var(--text-dim); }
.msg.assistant .think-block .col-head::before { content: "▸ 🧠"; font-size: 11px; color: var(--accent); }
.msg.assistant .think-block.open .col-head::before { content: "▾ 🧠"; }
.msg.assistant .think-block .think-body {
  padding: 6px 12px 12px;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  max-height: 320px;
  overflow-y: auto;
}
.msg.assistant .think-block.live .col-head::after { content: " ●"; color: var(--accent); animation: pulse 1.2s infinite; }
.msg.assistant .think-block.live { border-left-color: var(--accent); }
.msg.assistant.md { white-space: normal; }
.msg.assistant.md p { margin: 6px 0; }
.msg.assistant.md p:first-child { margin-top: 0; }
.msg.assistant.md h1, .msg.assistant.md h2, .msg.assistant.md h3,
.msg.assistant.md h4, .msg.assistant.md h5, .msg.assistant.md h6 {
  font-size: 15px;
  font-weight: 650;
  margin: 12px 0 5px;
}
.msg.assistant.md h1:first-child, .msg.assistant.md h2:first-child, .msg.assistant.md h3:first-child { margin-top: 0; }
.msg.assistant.md h4, .msg.assistant.md h5, .msg.assistant.md h6 { font-size: 13.5px; }
.msg.assistant.md a { color: var(--accent); }
.msg.assistant.md ul, .msg.assistant.md ol { margin: 6px 0; padding-left: 22px; }
.msg.assistant.md li { margin: 3px 0; }
.msg.assistant.md blockquote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(79, 140, 255, 0.06);
  color: var(--text-dim);
  border-radius: 0 6px 6px 0;
}
.msg.assistant.md blockquote p { margin: 2px 0; }
.msg.assistant.md hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.msg.assistant.md table {
  border-collapse: collapse;
  margin: 8px 0;
  max-width: 100%;
  display: block;
  overflow-x: auto;
  font-size: 13px;
}
.msg.assistant.md th, .msg.assistant.md td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.msg.assistant.md thead th { background: var(--bg-input); font-weight: 600; border-bottom: 1px solid var(--border-strong); }
.msg.assistant.md tbody tr:nth-child(odd) { background: rgba(30, 38, 52, 0.5); }
.msg.assistant.md input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--accent); }
.msg.assistant.md img { max-width: 100%; border-radius: 8px; }
.msg.assistant.md del { color: var(--text-faint); }
.msg pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.msg code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: rgba(79, 140, 255, 0.12);
  color: #A9C9FF;
  padding: 1.5px 5px;
  border-radius: 4px;
  white-space: nowrap;      /* 行内代码不折行断词 */
  overflow-wrap: anywhere;  /* 超长时整段换行，避免 Remove-/Item 式断词 */
}
.msg pre code { background: none; color: inherit; padding: 0; }
.msg.system {
  align-self: center;
  background: rgba(138, 150, 168, 0.09);
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11.5px;
  padding: 3px 12px;
  border-radius: 20px;
}

/* 工具卡片 */
.tool-card {
  align-self: flex-start;
  width: min(620px, 90%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 12.5px;
}
.tool-card .tc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(26, 34, 48, 0.7);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 0;
}
/* 两级折叠：卡片头部是外层折叠头 */
.tool-card .tc-head.col-head {
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  user-select: none;
}
.tool-card .tc-head.col-head::before { content: "▸"; font-size: 12px; color: var(--accent); flex-shrink: 0; font-weight: 700; }
.tool-card.col.open .tc-head.col-head::before { content: "▾"; }
.tool-card .tc-head.col-head:hover { background: var(--bg-hover); }
.tool-card .tc-body { display: none; }
.tool-card.col.open .tc-body { display: block; }
/* 子层折叠头缩进，与外层头形成层级 */
.tool-card .tc-body .col .col-head { padding-left: 22px; }
.tool-card .tc-icon { font-size: 13px; opacity: 0.85; }
.tool-card .tool-name { font-family: var(--mono); font-weight: 600; font-size: 12.5px; }
.tool-card .tc-spacer { flex: 1; }
.tool-card .tc-dur { font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.status-chip.running { background: rgba(79, 140, 255, 0.14); color: #7FB0FF; }
.status-chip.running::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
.status-chip.done { background: rgba(53, 201, 138, 0.13); color: var(--success); }
.status-chip.fail { background: rgba(240, 100, 100, 0.13); color: var(--danger); }
.tool-card .col { border-top: 1px solid var(--border); }
.tool-card .col .col-head {
  padding: 7px 12px;
  font-size: 12px;
}
.tool-card .col .col-body, .tool-card .col .tool-args-body, .tool-card .col .tool-result {
  margin: 0;
  padding: 8px 12px;
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  overflow: auto;
  max-height: 260px;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
}
.tool-card .tool-result { color: var(--text-dim); }

/* ============ 输入区 ============ */
#composer {
  padding: 12px calc(max(20px, (100% - var(--col-max)) / 2));
  background: var(--bg-side);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.composer-box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: var(--col-max);
  margin: 0 auto;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 5px 5px 5px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.14); }
.composer-box textarea {
  flex: 1;
  resize: none;
  min-height: 36px;
  max-height: 150px;
  padding: 7px 0;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
}
.composer-box textarea::placeholder { color: var(--placeholder); }
.send-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  box-shadow: 0 1px 4px rgba(79, 140, 255, 0.35);
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn:active { transform: scale(0.95); }
.send-btn:disabled {
  background: var(--bg-hover);
  color: var(--text-faint);
  cursor: default;
  box-shadow: none;
  border: 1px solid var(--border);
}
.send-btn:disabled:hover { background: var(--bg-hover); }
.composer-hint {
  max-width: var(--col-max);
  margin: 5px auto 0;
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
/* 权限标签与当前会话预设切换 */
.permission-control { display: inline-flex; align-items: center; gap: 6px; }
.permission-control select {
  min-width: 132px;
  padding: 2px 24px 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: 11px;
}
.permission-control select:disabled { opacity: .58; cursor: not-allowed; }
.perm-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}
.perm-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.perm-readonly { color: var(--text-faint); border-color: var(--border); }
.perm-readonly::before { background: var(--text-faint); }
.perm-write { color: var(--warn); border-color: rgba(246, 184, 74, 0.35); }
.perm-write::before { background: var(--warn); }
.perm-full { color: var(--danger); border-color: rgba(240, 100, 100, 0.35); }
.perm-full::before { background: var(--danger); }

/* ============ Toast ============ */
#toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 12.5px;
  display: none;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-width: 80%;
}
#toast.error { border-color: var(--danger); color: var(--danger); }
#toast.show { display: block; }

/* ============ 目录浏览弹层 ============ */
#browse-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
}
#browse-modal .modal-backdrop { position: absolute; inset: 0; background: rgba(5, 8, 12, 0.72); backdrop-filter: blur(2px); }
#browse-modal .modal {
  position: relative;
  width: 500px;
  max-width: calc(100vw - 40px);
  max-height: 72vh;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
#browse-modal h4 { margin: 0; font-size: 14px; }
.modal-path { display: flex; gap: 8px; }
.modal-path input {
  flex: 1;
  padding: 7px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.modal-path input:focus { border-color: var(--accent); }
.modal-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; max-height: 340px; }
.modal-list .dir-item { padding: 6px 9px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-dim); }
.modal-list .dir-item:hover { background: var(--bg-hover); color: var(--text); }
.modal-list .dir-item.selected { background: var(--accent-soft); color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================
   Visual refresh v0.1.0-39
   仅覆盖视觉呈现；保留全部 DOM 挂载点、状态类与交互结构。
   ============================================================ */
:root {
  --bg: #080b11;
  --bg-side: #0d1119;
  --bg-content: #10151f;
  --bg-card: #171e2b;
  --bg-hover: #1d2737;
  --bg-input: #141b27;
  --border: #273246;
  --border-strong: #3a4860;
  --text: #f5f7fb;
  --text-dim: #b6c0d0;
  --text-faint: #78859a;
  --placeholder: #69768b;
  --accent: #7c6cff;
  --accent-hover: #9185ff;
  --accent-soft: rgba(124, 108, 255, 0.14);
  --success: #43d39e;
  --warn: #f6c45b;
  --danger: #ff747f;
  --code-bg: #090d14;
  --radius: 13px;
  --radius-sm: 9px;
  --col-max: 1040px;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.3);
}

html, body {
  background: var(--bg);
  font-size: 14px;
  letter-spacing: 0.005em;
}

/* 更轻、更聚焦的交互控件 */
.btn,
.icon-btn,
.chat-meta select,
.side-add input,
.files-body .frow input,
.modal-path input {
  transition: color .16s ease, background .16s ease, border-color .16s ease,
    box-shadow .16s ease, transform .12s ease;
}
.btn {
  min-height: 34px;
  border-radius: 10px;
  font-weight: 580;
  box-shadow: 0 5px 16px rgba(124, 108, 255, 0.18);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.ghost { box-shadow: none; background: rgba(255,255,255,.025); }
.icon-btn {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,.025);
}
.icon-btn:hover { transform: translateY(-1px); }

/* 顶栏：强化品牌区，弱化传统工具栏边框感 */
#topbar {
  height: 60px;
  padding: 0 20px;
  gap: 18px;
  background: rgba(11, 15, 23, .94);
  border-bottom-color: rgba(76, 91, 116, .52);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px);
}
.brand { gap: 10px; font-size: 15px; letter-spacing: -.01em; }
.brand .logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(145deg, #8172ff, #5f8dff 62%, #49c6dd);
  box-shadow: 0 7px 20px rgba(104, 111, 255, .32), inset 0 1px rgba(255,255,255,.25);
}
.brand .ver {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  background: rgba(255,255,255,.025);
}
.topbar-group + .topbar-group::before { background: rgba(104,119,145,.38); }
.ws-name { color: #d7ddec; font-weight: 540; }
.conn {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(76,91,116,.42);
}
.status-dot { width: 7px; height: 7px; }

/* 左栏：导航面板化，保持原有上下分区 */
#sidebar {
  width: 300px;
  min-width: 300px;
  background:
    radial-gradient(340px 260px at 20% 0%, rgba(124,108,255,.08), transparent 70%),
    var(--bg-side);
  border-right-color: rgba(76, 91, 116, .55);
}
.side-section { padding: 18px 14px 0; }
.side-section + .side-section {
  border-top: 0;
  margin-top: 12px;
  padding-top: 16px;
  position: relative;
}
.side-section + .side-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.side-head { margin: 0 3px 10px; }
.side-head h3 {
  font-size: 11px;
  letter-spacing: 1.25px;
  color: #8996aa;
}
.side-head .count {
  min-width: 22px;
  padding: 1px 7px;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.side-add { gap: 7px; margin-bottom: 10px; }
.side-add input,
.files-body .frow input {
  min-height: 34px;
  padding: 7px 11px;
  background: rgba(20,27,39,.82);
  border-color: rgba(64,78,101,.76);
}
.item-list { gap: 4px; }
.item {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-left: 1px solid transparent;
  border-radius: 10px;
}
.item:hover {
  background: rgba(255,255,255,.045);
  border-color: rgba(78,94,120,.46);
}
.item.active {
  color: #fff;
  background: linear-gradient(100deg, rgba(124,108,255,.22), rgba(73,115,210,.11));
  border-color: rgba(124,108,255,.34);
  box-shadow: inset 3px 0 0 #8c7fff, 0 7px 20px rgba(0,0,0,.12);
}
.item .ico { opacity: .9; color: #a89fff; }
.item .running-dot { box-shadow: 0 0 9px rgba(246,196,91,.56); }

.side-files {
  margin: auto 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(20,27,39,.7);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.side-files .side-files-head { padding: 10px 12px; }
.side-files .files-body { padding: 2px 10px 11px; gap: 8px; }
.files-body .btn { border-color: rgba(64,78,101,.72); background: rgba(255,255,255,.02); }
.files-body .btn:hover { background: var(--bg-hover); }

/* 主内容：细腻背景、宽内容栅格、悬浮式头部 */
#chat-pane {
  background:
    radial-gradient(900px 500px at 65% -18%, rgba(73,104,193,.11), transparent 68%),
    linear-gradient(180deg, #101620, #0e141d 62%, #0c121a);
}
#chat-header {
  min-height: 52px;
  padding: 9px calc(max(28px, (100% - var(--col-max)) / 2));
  background: rgba(14,19,28,.78);
  border-bottom-color: rgba(61,75,98,.56);
  backdrop-filter: blur(16px);
}
.chat-title {
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -.012em;
}
.chat-meta { gap: 8px; }
.chat-meta .meta-label { text-transform: uppercase; letter-spacing: .8px; }
.chat-meta select {
  min-height: 32px;
  padding: 5px 30px 5px 10px;
  background: rgba(20,27,39,.9);
  border-color: rgba(64,78,101,.85);
}
.chat-meta select:hover { border-color: var(--border-strong); }
.chat-meta .model-sync-btn { width: 32px; height: 32px; }

#chat-scroll {
  padding: 24px calc(max(28px, (100% - var(--col-max)) / 2)) 34px;
  gap: 18px;
}
.msg {
  font-size: 14px;
  line-height: 1.75;
  color: #dce3ef;
}
.msg.user {
  max-width: min(76%, 760px);
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(91,111,215,.34), rgba(124,108,255,.24));
  border-color: rgba(143,132,255,.4);
  border-radius: 16px 16px 5px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.17);
}
.msg.assistant {
  width: 100%;
  padding: 0 4px;
}
.msg.assistant .md-content { max-width: 940px; }
.msg.assistant.md h1,
.msg.assistant.md h2,
.msg.assistant.md h3 {
  color: #f7f8fc;
  letter-spacing: -.012em;
}
.msg.assistant.md blockquote {
  background: rgba(124,108,255,.07);
  border-left-color: #8c7fff;
}
.msg pre {
  border-color: rgba(63,77,101,.88);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.14);
}
.msg code { color: #c4bcff; background: rgba(124,108,255,.13); }
.msg.assistant .think-block {
  margin: 5px 0 12px;
  max-width: 940px;
  background: rgba(19,26,38,.7);
  border-color: rgba(66,80,104,.72);
  border-left-color: #786cf0;
  box-shadow: 0 7px 22px rgba(0,0,0,.12);
}
.col .col-head { min-height: 36px; }
.col .col-head::before { color: #a69dff; }
.col .col-head:hover { background: rgba(255,255,255,.035); }

/* 工具卡：占满内容列，状态更清楚 */
.tool-card {
  width: min(780px, 94%);
  background: rgba(22,29,42,.88);
  border-color: rgba(61,76,101,.86);
  border-radius: 12px;
  box-shadow: 0 9px 28px rgba(0,0,0,.15);
}
.tool-card .tc-head {
  min-height: 42px;
  padding: 9px 13px;
  background: linear-gradient(90deg, rgba(30,39,56,.94), rgba(23,30,43,.78));
}
.tool-card .tool-name { color: #edf0f7; }
.tool-card .tc-icon { color: #9f96ff; }
.status-chip { padding: 3px 9px; border: 1px solid transparent; }
.status-chip.running { border-color: rgba(124,108,255,.25); color: #ada5ff; }
.status-chip.done { border-color: rgba(67,211,158,.2); }
.status-chip.fail { border-color: rgba(255,116,127,.22); }

/* 审批与输入区：同一内容轴和浮层质感 */
#approval-panel {
  margin-top: 14px;
  padding: 13px 16px;
  background: linear-gradient(135deg, rgba(246,196,91,.13), rgba(55,44,24,.32));
  border-color: rgba(246,196,91,.34);
  box-shadow: var(--shadow-sm);
}
#composer {
  padding: 14px calc(max(28px, (100% - var(--col-max)) / 2)) 12px;
  background: rgba(10,14,21,.9);
  border-top-color: rgba(61,75,98,.6);
  backdrop-filter: blur(18px);
}
.composer-box {
  min-height: 64px;
  padding: 8px 8px 8px 16px;
  background: rgba(21,29,42,.96);
  border-color: rgba(73,88,115,.92);
  border-radius: 15px;
  box-shadow: 0 12px 36px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
}
.composer-box:focus-within {
  border-color: #8e82ff;
  box-shadow: 0 0 0 3px rgba(124,108,255,.13), 0 14px 40px rgba(0,0,0,.24);
}
.composer-box textarea { min-height: 44px; font-size: 14px; }
.send-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, #8d7fff, #647ef2);
  box-shadow: 0 7px 18px rgba(101,98,235,.3);
}
.composer-hint { margin-top: 7px; color: var(--text-faint); }
.perm-label { background: rgba(255,255,255,.025); }

/* 登录与弹层同步新视觉 */
#login-view {
  background:
    radial-gradient(900px 520px at 16% 0%, rgba(124,108,255,.18), transparent 64%),
    radial-gradient(760px 460px at 90% 100%, rgba(68,144,206,.12), transparent 65%),
    #080b11;
}
.login-card,
#browse-modal .modal {
  background: rgba(20,27,39,.94);
  border-color: rgba(72,87,114,.88);
  box-shadow: var(--shadow-md), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
}
.login-card { border-radius: 20px; padding: 34px 30px 28px; }
.login-brand .logo {
  background: linear-gradient(145deg, #8172ff, #5f8dff 62%, #49c6dd);
  box-shadow: 0 9px 25px rgba(104,111,255,.3);
}
.login-card input,
.login-card select { min-height: 42px; background: #111824; border-color: var(--border-strong); }
#browse-modal .modal-backdrop { background: rgba(4,7,11,.78); backdrop-filter: blur(6px); }

/* 窄屏：功能结构不变，适度压缩导航与控制项 */
@media (max-width: 980px) {
  :root { --col-max: 760px; }
  #sidebar { width: 260px; min-width: 260px; }
  .brand .ver, .chat-meta .meta-label { display: none; }
  #status-text { max-width: 190px; }
  .chat-meta select { max-width: 145px; }
}

@media (max-width: 720px) {
  #topbar { padding: 0 12px; gap: 10px; }
  .topbar-group:nth-of-type(2), .ws-name { display: none; }
  #sidebar { width: 220px; min-width: 220px; }
  #chat-header,
  #chat-scroll,
  #composer { padding-left: 16px; padding-right: 16px; }
  .chat-title { display: none; }
  .msg.user { max-width: 90%; }
  .tool-card { width: 100%; }
}

/* ============================================================
   Compact process rows v0.1.0-40
   工具调用与思考过程在折叠时采用 DSH 式无框紧凑行；
   展开后仅内容区出现弱边界，不改变现有折叠结构与事件逻辑。
   ============================================================ */

/* 普通内容仍保持舒展；连续过程项通过负间距形成紧凑组。 */
#chat-scroll { gap: 14px; }
.tool-card + .tool-card { margin-top: -10px; }
.tool-card + .msg.assistant,
.msg.assistant + .tool-card { margin-top: -3px; }

/* 工具折叠行：透明、无外框、无阴影。 */
.tool-card {
  width: min(900px, 96%);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-size: 12.5px;
}
.tool-card .tc-head,
.tool-card .tc-head.col-head {
  min-height: 31px;
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
}
.tool-card .tc-head.col-head::before {
  width: 10px;
  color: #8176e9;
  font-size: 10px;
  opacity: .9;
}
.tool-card.col.open .tc-head.col-head::before { content: "▾"; }
.tool-card .tc-head.col-head:hover {
  background: rgba(255,255,255,.032);
  color: var(--text);
}
.tool-card .tc-icon {
  font-size: 11px;
  color: #8278dc;
  opacity: .85;
}
.tool-card .tool-name {
  color: #cdd4e1;
  font-size: 12px;
  font-weight: 580;
}
.tool-card .tc-dur {
  font-size: 10.5px;
  color: #68758a;
}

/* 状态弱化：成功接近纯文字；运行与失败仍保持辨识度。 */
.status-chip {
  min-height: 20px;
  padding: 1px 6px;
  gap: 4px;
  border: 0;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 520;
  background: transparent;
}
.status-chip.done {
  color: #58bd94;
  background: transparent;
  border: 0;
}
.status-chip.done::before { content: "✓"; font-size: 10px; opacity: .85; }
.status-chip.running {
  color: #9c93f4;
  background: rgba(124,108,255,.08);
  border: 0;
}
.status-chip.running::before { width: 5px; height: 5px; }
.status-chip.fail {
  color: var(--danger);
  background: rgba(255,116,127,.07);
  border: 0;
}

/* 展开工具：标题仍无框，内容用左侧导轨和弱底色组织。 */
.tool-card .tc-body,
.tool-card.col.open .tc-body {
  margin: 2px 0 5px 17px;
  border-left: 1px solid rgba(105, 98, 187, .48);
  background: rgba(10,14,21,.2);
  border-radius: 0 7px 7px 0;
  overflow: hidden;
}
.tool-card .tc-body .col {
  border-top: 1px solid rgba(52,65,86,.55);
}
.tool-card .tc-body .col:first-child { border-top: 0; }
.tool-card .tc-body .col .col-head {
  min-height: 30px;
  padding: 4px 9px 4px 12px;
  color: #8f9aad;
  font-size: 11px;
}
.tool-card .tc-body .col .col-head:hover { background: rgba(255,255,255,.025); }
.tool-card .tc-body .col .col-body,
.tool-card .tc-body .col .tool-args-body,
.tool-card .tc-body .col .tool-result {
  padding: 8px 12px;
  border-top-color: rgba(52,65,86,.55);
  background: rgba(7,10,16,.72);
}

/* 思考过程：折叠时也是一条无框过程行。 */
.msg.assistant .think-block {
  margin: 2px 0 7px;
  max-width: 940px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
.msg.assistant .think-block .col-head {
  min-height: 31px;
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  color: #8d99ab;
  font-size: 11.5px;
}
.msg.assistant .think-block .col-head::before {
  content: "▸  ◌";
  width: 20px;
  color: #8176e9;
  font-size: 10px;
}
.msg.assistant .think-block.open .col-head::before { content: "▾  ◌"; }
.msg.assistant .think-block .col-head:hover { background: rgba(255,255,255,.03); }
.msg.assistant .think-block.open .col-head {
  border-bottom: 0;
  color: #aeb8c7;
}
.msg.assistant .think-block .think-body {
  margin: 2px 0 3px 17px;
  padding: 7px 11px 9px;
  border-left: 1px solid rgba(105,98,187,.48);
  border-radius: 0 7px 7px 0;
  background: rgba(10,14,21,.38);
  color: #909bad;
}
.msg.assistant .think-block.live {
  border-left: 0;
  background: transparent;
}
.msg.assistant .think-block.live .col-head::after {
  content: "  生成中";
  color: #9187ed;
  font-size: 10.5px;
}

@media (max-width: 720px) {
  .tool-card { width: 100%; }
  .tool-card .tc-head,
  .tool-card .tc-head.col-head { padding-left: 3px; padding-right: 3px; }
}

/* v0.1.0-41：进一步压缩过程列表，接近原生日志行密度。 */
#chat-scroll { gap: 12px; }
.tool-card + .tool-card { margin-top: -10px; }
.tool-card + .msg.assistant,
.msg.assistant + .tool-card { margin-top: -5px; }

.tool-card .tc-head,
.tool-card .tc-head.col-head {
  min-height: 24px;
  padding: 1px 4px;
  gap: 5px;
  border-radius: 5px;
  line-height: 1.25;
}
.tool-card .tc-head.col-head::before {
  width: 8px;
  font-size: 8px;
}
.tool-card .tc-icon { font-size: 9px; }
.tool-card .tool-name { font-size: 11.5px; }
.tool-card .tc-dur { font-size: 10px; }
.status-chip {
  min-height: 16px;
  padding: 0 4px;
  gap: 3px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.15;
}
.status-chip.done::before { font-size: 9px; }
.status-chip.running::before { width: 4px; height: 4px; }

.tool-card .tc-body,
.tool-card.col.open .tc-body { margin: 1px 0 3px 12px; }
.tool-card .tc-body .col .col-head {
  min-height: 25px;
  padding: 2px 7px 2px 9px;
  line-height: 1.25;
}
.tool-card .tc-body .col .col-body,
.tool-card .tc-body .col .tool-args-body,
.tool-card .tc-body .col .tool-result { padding: 6px 9px; }

.msg.assistant .think-block { margin: 0 0 4px; }
.msg.assistant .think-block .col-head {
  min-height: 24px;
  padding: 1px 4px;
  gap: 5px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.25;
}
.msg.assistant .think-block .col-head::before {
  width: 17px;
  font-size: 8px;
}
.msg.assistant .think-block .think-body {
  margin: 1px 0 2px 12px;
  padding: 5px 9px 7px;
}
.msg.assistant .think-block.live .col-head::after { font-size: 10px; }

/* v0.1.0-42：放大行内识别元素，但锁定 v41 的高度与密度。 */
.tool-card .tc-head,
.tool-card .tc-head.col-head {
  height: 24px;
  min-height: 24px;
  line-height: 1;
  overflow: hidden;
}
.tool-card .tc-head.col-head::before {
  width: 10px;
  font-size: 11px;
  line-height: 1;
}
.tool-card .tc-icon {
  font-size: 12px;
  line-height: 1;
}
.tool-card .tool-name {
  font-size: 12.5px;
  line-height: 1;
}
.tool-card .tc-dur {
  font-size: 11px;
  line-height: 1;
}
.status-chip {
  height: 18px;
  min-height: 18px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1;
}
.status-chip.done::before { font-size: 10.5px; }
.status-chip.running::before { width: 5px; height: 5px; }

.msg.assistant .think-block .col-head {
  height: 24px;
  min-height: 24px;
  font-size: 12px;
  line-height: 1;
  overflow: hidden;
}
.msg.assistant .think-block .col-head::before {
  width: 20px;
  font-size: 11px;
  line-height: 1;
}
.msg.assistant .think-block.live .col-head::after {
  font-size: 11px;
  line-height: 1;
}

/* ============================================================
   Single-layer tool details v0.1.0-43
   折叠行保留状态/耗时并增加摘要；展开后直接显示参数键值与结果。
   ============================================================ */
.tool-card .tool-summary {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1;
}

.tool-card .tool-io,
.tool-card.col.open .tool-io {
  padding: 0;
  background: rgba(8, 12, 18, .42);
}
.tool-params {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
}
.tool-param-row {
  display: grid;
  grid-template-columns: minmax(76px, max-content) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.tool-param-key {
  color: #7f8ba0;
  white-space: nowrap;
}
.tool-param-value {
  min-width: 0;
  color: #c6cfdd;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tool-param-raw,
.tool-output {
  margin: 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #c6cfdd;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 280px;
  overflow: auto;
}
.tool-output.error { color: #ff9099; }
.tool-io-divider {
  height: 1px;
  margin: 0;
  background: rgba(65, 79, 103, .68);
}
/* .col.open 的通用 display:block 会覆盖浏览器 hidden 规则，需显式保留。 */
.tool-output[hidden],
.tool-io-divider[hidden] { display: none !important; }

@media (max-width: 720px) {
  .tool-card .tool-summary { max-width: 45%; }
  .tool-param-row { grid-template-columns: minmax(62px, max-content) minmax(0, 1fr); gap: 7px; }
}

/* ============================================================
   Markdown code blocks v0.1.0-45
   助手正文代码块：语言栏 + 复制，保留围栏代码原始换行。
   ============================================================ */
.msg.assistant.md .md-code-block {
  margin: 9px 0;
  overflow: hidden;
  border: 1px solid rgba(65, 79, 103, .72);
  border-radius: 10px;
  background: var(--code-bg);
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}
.msg.assistant.md .md-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(65, 79, 103, .62);
  background: rgba(255,255,255,.025);
  color: #8e9aad;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
}
.msg.assistant.md .md-code-language { user-select: none; }
.msg.assistant.md .md-code-copy {
  padding: 2px 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #a7b1c0;
  font: inherit;
  cursor: pointer;
}
.msg.assistant.md .md-code-copy:hover {
  background: rgba(255,255,255,.055);
  color: var(--text);
}
.msg.assistant.md .md-code-copy:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
.msg.assistant.md .md-code-block > pre {
  margin: 0;
  max-height: 360px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: auto;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.msg.assistant.md .md-code-block > pre > code {
  display: block;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

/* ============================================================
   Ten-line content windows v0.1.0-46
   参数、结果和 Markdown 代码各自最多显示 10 行，超出独立滚动。
   ============================================================ */
.tool-io > .tool-params {
  /* 10 行行高 + 9 个 3px 行间距 + 上下 padding 16px。 */
  max-height: calc(10 * 17.25px + 9 * 3px + 16px);
  overflow: auto;
}
.tool-io > .tool-output {
  max-height: calc(10 * 17.25px + 16px);
  overflow: auto;
}
.tool-io > .tool-params .tool-param-raw {
  max-height: calc(10 * 17.25px + 16px);
  overflow: auto;
}
.msg.assistant.md .md-code-block > pre {
  /* 12.5px × 1.55 = 19.375px；上下 padding 20px。 */
  max-height: calc(10 * 19.375px + 20px);
  overflow: auto;
}

/* ============================================================
   vision_present preview v0.1.0-48
   专属正文缩略图；点击后以完整 contain 模式展示原图。
   ============================================================ */
.vision-present-preview {
  margin: 5px 0 10px 22px;
  width: min(340px, calc(100% - 28px));
  color: var(--text-faint);
}
.vision-present-thumb {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(65, 79, 103, .78);
  border-radius: 10px;
  background: rgba(8, 12, 18, .58);
  cursor: zoom-in;
}
.vision-present-preview.loading .vision-present-thumb {
  min-height: 96px;
  cursor: wait;
}
.vision-present-thumb img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  object-position: center;
}
.vision-present-preview figcaption {
  margin-top: 5px;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 42px;
}
#image-lightbox.open { display: flex; }
.image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 5, 10, .86);
  cursor: zoom-out;
  backdrop-filter: blur(4px);
}
.image-lightbox-image {
  position: relative;
  z-index: 1;
  display: block;
  max-width: calc(100vw - 84px);
  max-height: calc(100vh - 84px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0,0,0,.48);
}
.image-lightbox-close {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(8, 12, 18, .78);
  color: #fff;
  font-size: 24px;
  line-height: 30px;
  cursor: pointer;
}
.image-lightbox-caption {
  position: fixed;
  z-index: 2;
  right: 56px;
  bottom: 14px;
  left: 56px;
  overflow: hidden;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 720px) {
  .vision-present-preview { margin-left: 16px; width: min(300px, calc(100% - 20px)); }
  #image-lightbox { padding: 18px; }
  .image-lightbox-image { max-width: calc(100vw - 36px); max-height: calc(100vh - 56px); }
}

/* ============================================================
   Running indicator v0.1.0-50
   呼吸星标 + 扫描线，仅使用 transform/opacity/background-position。
   ============================================================ */
.running-indicator {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 1px 0 2px 4px;
  color: #8f9ab0;
  font-size: 11.5px;
  line-height: 1;
  user-select: none;
}
.running-star {
  color: #9b8cff;
  font-size: 16px;
  filter: drop-shadow(0 0 5px rgba(124, 105, 255, .68));
  transform-origin: center;
  animation: running-star-breathe 1.8s ease-in-out infinite;
}
.running-label {
  max-width: min(420px, 56vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.running-scan {
  position: relative;
  width: 76px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(111, 123, 151, .18);
}
.running-scan::after {
  content: '';
  position: absolute;
  top: 0;
  left: -42%;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #8c7cff 48%, #51c8ff 70%, transparent);
  box-shadow: 0 0 7px rgba(100, 151, 255, .65);
  animation: running-scan-pass 1.45s ease-in-out infinite;
}
@keyframes running-star-breathe {
  0%, 100% { transform: scale(.82); opacity: .48; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes running-scan-pass {
  0% { transform: translateX(0); opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateX(340%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .running-star,
  .running-scan::after { animation: none; }
  .running-star { opacity: .9; transform: none; }
  .running-scan::after { left: 29%; opacity: .85; }
}

/* ============================================================
   Light orange theme v0.1.0-51
   暖白浅色肤色 + 橙色强调；保留全部布局、密度、状态和交互结构。
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #f7f4ef;
  --bg-side: #fffaf3;
  --bg-content: #fbf9f6;
  --bg-card: #ffffff;
  --bg-hover: #fff0de;
  --bg-input: #ffffff;
  --border: #e7ddd1;
  --border-strong: #d5c3b1;
  --text: #332b25;
  --text-dim: #665a50;
  --text-faint: #94877b;
  --placeholder: #a89b90;
  --accent: #ed7a1f;
  --accent-hover: #d9650e;
  --accent-soft: rgba(237, 122, 31, .12);
  --success: #238a5a;
  --warn: #c87816;
  --danger: #c84b4b;
  --code-bg: #fffaf4;
  --shadow-sm: 0 8px 24px rgba(104, 68, 34, .08);
  --shadow-md: 0 18px 48px rgba(104, 68, 34, .13);
}

html, body { background: var(--bg); color: var(--text); }
* { scrollbar-color: #d7bda5 rgba(120, 78, 40, .06); }
::-webkit-scrollbar-track { background: rgba(120, 78, 40, .06); }
::-webkit-scrollbar-thumb { background: #d7bda5; }
::-webkit-scrollbar-thumb:hover { background: #c59f7c; }
::-webkit-scrollbar-thumb:active { background: #b98d65; }

.btn { box-shadow: 0 5px 16px rgba(237, 122, 31, .18); }
.btn.ghost,
.icon-btn { background: rgba(255, 255, 255, .68); }
.btn.danger { background: rgba(200, 75, 75, .08); border-color: rgba(200, 75, 75, .28); }
.btn.danger:hover { background: rgba(200, 75, 75, .14); }

#topbar {
  background: rgba(255, 252, 247, .94);
  border-bottom-color: rgba(207, 187, 167, .72);
  box-shadow: 0 7px 24px rgba(104, 68, 34, .08);
}
.brand .logo,
.login-brand .logo {
  background: linear-gradient(145deg, #ff9a45, #ed7419 64%, #d65a09);
  box-shadow: 0 7px 20px rgba(224, 101, 13, .24), inset 0 1px rgba(255,255,255,.42);
}
.brand .ver,
.conn { background: rgba(255, 242, 226, .72); border-color: rgba(216, 183, 151, .62); }
.topbar-group + .topbar-group::before { background: rgba(193, 164, 138, .5); }
.ws-name { color: #5a4c41; }
.status-dot.online { box-shadow: 0 0 6px rgba(35, 138, 90, .34); }
.status-dot.running { box-shadow: 0 0 6px rgba(200, 120, 22, .38); }

#sidebar {
  background:
    radial-gradient(360px 270px at 14% 0%, rgba(246, 145, 54, .11), transparent 70%),
    var(--bg-side);
  border-right-color: rgba(207, 187, 167, .72);
}
.side-section + .side-section::before { background: linear-gradient(90deg, transparent, #e4d4c4, transparent); }
.side-head h3 { color: #8b7868; }
.side-head .count { background: rgba(245, 225, 204, .5); }
.side-add input,
.files-body .frow input { background: rgba(255,255,255,.9); border-color: #dfcfbf; }
.side-add input:focus,
.side-add input:focus-visible { box-shadow: 0 0 0 2px rgba(237, 122, 31, .14); }
.item:hover { background: rgba(244, 135, 38, .08); border-color: rgba(221, 170, 124, .42); }
.item.active {
  color: #71360e;
  background: linear-gradient(100deg, rgba(255, 160, 73, .24), rgba(255, 219, 181, .48));
  border-color: rgba(230, 132, 48, .34);
  box-shadow: inset 3px 0 0 #ed7a1f, 0 6px 18px rgba(134, 78, 31, .08);
}
.item .ico { color: #d76916; }
.item .running-dot { box-shadow: 0 0 9px rgba(213, 127, 21, .42); }
.side-files { background: rgba(255,255,255,.74); }
.files-body .btn { border-color: #dfcfbf; background: rgba(255,255,255,.72); }

#chat-pane {
  background:
    radial-gradient(960px 520px at 68% -18%, rgba(255, 174, 96, .13), transparent 68%),
    linear-gradient(180deg, #fffdf9, #faf7f2 62%, #f7f3ed);
}
#chat-header {
  background: rgba(255, 252, 247, .84);
  border-bottom-color: rgba(215, 195, 175, .72);
}
.chat-meta select { background: rgba(255,255,255,.92); border-color: #dccbbb; color: var(--text); }
.msg { color: #443a32; }
.msg.user {
  color: #5b2d0f;
  background: linear-gradient(135deg, rgba(255, 178, 104, .42), rgba(255, 218, 178, .7));
  border-color: rgba(225, 133, 54, .38);
  box-shadow: 0 9px 26px rgba(130, 73, 27, .1);
}
.msg.assistant.md h1,
.msg.assistant.md h2,
.msg.assistant.md h3 { color: #302720; }
.msg.assistant.md blockquote { background: rgba(237, 122, 31, .07); border-left-color: #ed7a1f; }
.msg code { color: #a94e0b; background: rgba(237, 122, 31, .1); }
.msg pre { border-color: #e1d2c3; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 7px 20px rgba(106,67,32,.07); }

.tool-card .tc-head.col-head::before,
.tool-card .tc-icon { color: #d76a18; }
.tool-card .tc-head.col-head:hover,
.col .col-head:hover,
.msg.assistant .think-block .col-head:hover { background: rgba(237, 122, 31, .06); }
.tool-card .tool-name { color: #54473d; }
.tool-card .tc-dur,
.tool-card .tool-summary { color: #948477; }
.status-chip.done { color: var(--success); }
.status-chip.running { color: #c06418; background: rgba(237, 122, 31, .09); }
.status-chip.fail { background: rgba(200, 75, 75, .07); }
.tool-card .tc-body,
.tool-card.col.open .tc-body {
  border-left-color: rgba(224, 119, 30, .42);
  background: rgba(255, 244, 231, .66);
}
.tool-card .tc-body .col { border-top-color: #eadfd4; }
.tool-card .tc-body .col .col-head { color: #88796d; }
.tool-card .tc-body .col .col-body,
.tool-card .tc-body .col .tool-args-body,
.tool-card .tc-body .col .tool-result,
.tool-card .tool-io,
.tool-card.col.open .tool-io { background: rgba(255,255,255,.72); border-top-color: #eadfd4; }
.tool-param-key { color: #9b6d47; }
.tool-param-value,
.tool-param-raw,
.tool-output { color: #50443a; }
.tool-output.error { color: #c84b4b; }
.tool-io-divider { background: #e5d7c9; }

.msg.assistant .think-block .col-head,
.msg.assistant .think-block.open .col-head { color: #887a6e; }
.msg.assistant .think-block .col-head::before { color: #d76a18; }
.msg.assistant .think-block .think-body {
  border-left-color: rgba(224, 119, 30, .42);
  background: rgba(255, 244, 231, .64);
  color: #75675b;
}
.msg.assistant .think-block.live .col-head::after { color: #c5641b; }

#approval-panel {
  background: linear-gradient(135deg, rgba(255, 190, 104, .24), rgba(255, 242, 219, .76));
  border-color: rgba(216, 139, 46, .38);
}
#composer {
  background: rgba(250, 246, 240, .92);
  border-top-color: rgba(211, 190, 169, .74);
}
.composer-box {
  background: rgba(255,255,255,.98);
  border-color: #dac7b6;
  box-shadow: 0 11px 32px rgba(104,68,34,.1), inset 0 1px rgba(255,255,255,.9);
}
.composer-box:focus-within {
  border-color: #ed7a1f;
  box-shadow: 0 0 0 3px rgba(237,122,31,.12), 0 13px 34px rgba(104,68,34,.12);
}
.composer-box textarea { color: var(--text); }
.send-btn {
  background: linear-gradient(145deg, #ff963d, #df6812);
  box-shadow: 0 7px 18px rgba(218, 99, 15, .24);
}
.perm-label { background: rgba(255, 242, 226, .72); }

.msg.assistant.md .md-code-block {
  border-color: #e0d1c1;
  background: #fffaf4;
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}
.msg.assistant.md .md-code-head {
  border-bottom-color: #e4d7ca;
  background: #f8eee3;
  color: #8a7768;
}
.msg.assistant.md .md-code-copy { color: #8a6d57; }
.msg.assistant.md .md-code-copy:hover { background: rgba(237,122,31,.08); color: #8f4109; }

.vision-present-thumb { border-color: #decdbd; background: #fff; box-shadow: 0 7px 22px rgba(104,68,34,.09); }
.running-indicator { color: #8c7969; }
.running-star { color: #e8731b; filter: drop-shadow(0 0 5px rgba(237, 122, 31, .5)); }
.running-scan { background: rgba(183, 127, 81, .16); }
.running-scan::after {
  background: linear-gradient(90deg, transparent, #f28a32 48%, #ffc064 70%, transparent);
  box-shadow: 0 0 7px rgba(237, 122, 31, .52);
}

#login-view {
  background:
    radial-gradient(920px 540px at 14% 0%, rgba(255, 157, 66, .23), transparent 64%),
    radial-gradient(760px 460px at 92% 100%, rgba(255, 207, 148, .28), transparent 65%),
    #f8f4ee;
}
.login-card,
#browse-modal .modal {
  background: rgba(255, 252, 247, .96);
  border-color: #e0cfbe;
  box-shadow: var(--shadow-md), inset 0 1px rgba(255,255,255,.82);
}
.login-card input,
.login-card select { background: #fff; border-color: var(--border-strong); color: var(--text); }
.login-card input:focus,
.login-card select:focus { box-shadow: 0 0 0 3px rgba(237, 122, 31, .13); }
#browse-modal .modal-backdrop { background: rgba(73, 49, 31, .32); }
.modal-list .dir-item.selected { background: var(--accent-soft); color: #7f3d0c; }

/* 浅色主题下提升辅助信息可读性，并清除旧主题遗留的冷灰底。 */
.msg.system {
  background: rgba(244, 224, 204, .54);
  border-color: #e3d2c1;
  color: #77685c;
}
.msg.assistant.md tbody tr:nth-child(odd) { background: rgba(245, 229, 211, .4); }
.chat-meta .meta-label,
.composer-hint,
.brand .ver { color: #837367; }
.status-chip.done { color: #257a53; }

/* ============================================================
   Muted terracotta refinement v0.1.0-52
   降低饱和度与光泽，改用陶土棕、燕麦白和柔和沙色。
   ============================================================ */
:root {
  --bg: #f5f2ed;
  --bg-side: #f8f5f0;
  --bg-content: #faf8f4;
  --bg-card: #fffdf9;
  --bg-hover: #eee7df;
  --bg-input: #fffdf9;
  --border: #ddd5cc;
  --border-strong: #cbbfb3;
  --text: #3d3833;
  --text-dim: #6e655d;
  --text-faint: #968b81;
  --placeholder: #aaa097;
  --accent: #b9744f;
  --accent-hover: #9f6041;
  --accent-soft: rgba(185, 116, 79, .11);
  --warn: #a8733f;
  --code-bg: #f7f3ee;
  --shadow-sm: 0 7px 22px rgba(80, 62, 47, .06);
  --shadow-md: 0 16px 42px rgba(80, 62, 47, .1);
}

* { scrollbar-color: #cbbeb2 rgba(91, 72, 55, .045); }
::-webkit-scrollbar-track { background: rgba(91, 72, 55, .045); }
::-webkit-scrollbar-thumb { background: #cbbeb2; }
::-webkit-scrollbar-thumb:hover { background: #b9a797; }
::-webkit-scrollbar-thumb:active { background: #aa9583; }

.btn { box-shadow: 0 4px 12px rgba(145, 88, 57, .12); }
#topbar {
  background: rgba(250, 248, 244, .96);
  border-bottom-color: rgba(203, 191, 179, .72);
  box-shadow: 0 5px 18px rgba(80, 62, 47, .055);
}
.brand .logo,
.login-brand .logo {
  background: #b9744f;
  box-shadow: 0 4px 12px rgba(132, 79, 51, .16), inset 0 1px rgba(255,255,255,.25);
}
.brand .ver,
.conn { background: rgba(238, 231, 223, .68); border-color: rgba(203, 189, 176, .62); }
.ws-name { color: #625950; }

#sidebar {
  background:
    radial-gradient(360px 250px at 14% 0%, rgba(185, 116, 79, .065), transparent 72%),
    var(--bg-side);
  border-right-color: rgba(203, 191, 179, .72);
}
.side-head h3 { color: #887b70; }
.side-head .count { background: rgba(231, 222, 213, .62); }
.item:hover { background: rgba(185, 116, 79, .055); border-color: rgba(190, 157, 134, .34); }
.item.active {
  color: #694632;
  background: #eee2d8;
  border-color: #d7bda9;
  box-shadow: inset 3px 0 0 #b9744f, 0 4px 12px rgba(94, 68, 49, .05);
}
.item .ico { color: #a86745; }
.side-files { background: rgba(255,253,249,.7); }

#chat-pane {
  background:
    radial-gradient(960px 500px at 68% -18%, rgba(185, 116, 79, .055), transparent 70%),
    linear-gradient(180deg, #fcfaf7, #f8f5f0 64%, #f5f2ed);
}
#chat-header { background: rgba(250, 248, 244, .88); border-bottom-color: rgba(207, 196, 185, .72); }
.msg { color: #48413b; }
.msg.user {
  color: #5c4030;
  background: #ead8ca;
  border-color: #d8bca8;
  box-shadow: 0 6px 18px rgba(93, 65, 47, .07);
}
.msg.assistant.md blockquote { background: rgba(185, 116, 79, .055); border-left-color: #b9744f; }
.msg code { color: #8e5436; background: rgba(185, 116, 79, .09); }

.tool-card .tc-head.col-head::before,
.tool-card .tc-icon,
.msg.assistant .think-block .col-head::before { color: #a96745; }
.status-chip.running { color: #9a5f3f; background: rgba(185, 116, 79, .075); }
.tool-card .tc-body,
.tool-card.col.open .tc-body,
.msg.assistant .think-block .think-body {
  border-left-color: rgba(166, 104, 70, .35);
  background: rgba(239, 231, 223, .62);
}
.tool-card .tc-body .col .col-body,
.tool-card .tc-body .col .tool-args-body,
.tool-card .tc-body .col .tool-result,
.tool-card .tool-io,
.tool-card.col.open .tool-io { background: rgba(255,253,249,.7); }
.tool-param-key { color: #8f6e59; }

#approval-panel {
  background: #f1e5d8;
  border-color: #d9bea4;
}
#composer { background: rgba(247, 244, 239, .94); border-top-color: rgba(205, 193, 181, .74); }
.composer-box {
  background: rgba(255,253,249,.98);
  border-color: #d2c5b9;
  box-shadow: 0 8px 24px rgba(80,62,47,.075), inset 0 1px rgba(255,255,255,.8);
}
.composer-box:focus-within {
  border-color: #b9744f;
  box-shadow: 0 0 0 3px rgba(185,116,79,.1), 0 9px 26px rgba(80,62,47,.08);
}
.send-btn { background: #b9744f; box-shadow: 0 5px 14px rgba(132,79,51,.16); }

.msg.assistant.md .md-code-block { border-color: #ddd3c9; background: #f7f3ee; }
.msg.assistant.md .md-code-head { border-bottom-color: #ded4ca; background: #eee8e1; color: #81756b; }
.msg.assistant.md .md-code-copy:hover { background: rgba(185,116,79,.07); color: #75452e; }
.vision-present-thumb { border-color: #d8ccc0; box-shadow: 0 5px 16px rgba(80,62,47,.065); }

.running-star { color: #ad6d4b; filter: drop-shadow(0 0 4px rgba(185,116,79,.32)); }
.running-scan { background: rgba(150, 119, 97, .14); }
.running-scan::after {
  background: linear-gradient(90deg, transparent, #b9744f 48%, #d7a17e 70%, transparent);
  box-shadow: 0 0 5px rgba(185,116,79,.34);
}

#login-view {
  background:
    radial-gradient(900px 520px at 14% 0%, rgba(185,116,79,.11), transparent 66%),
    radial-gradient(760px 460px at 92% 100%, rgba(205,178,151,.14), transparent 66%),
    #f5f2ed;
}
.login-card,
#browse-modal .modal { background: rgba(252,250,247,.97); border-color: #d8ccc0; }
.msg.system { background: rgba(231, 222, 213, .62); border-color: #d9cec4; color: #71675f; }
/* 保持素雅的同时，略微抬高辅助文字对比度。 */
:root { --text-faint: #887e75; --placeholder: #978c83; }

/* ============================================================
   Self-hosted fixed fonts v0.1.0-54
   拉丁字符优先 Cascadia Mono；缺失的中文字形逐字回退到思源黑体。
   字体由 Remote 本地静态服务提供，不依赖客户端安装或外网。
   ============================================================ */
@font-face {
  font-family: "Remote Cascadia Mono";
  src: url("CascadiaMono.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Remote Source Han Sans";
  src: url("SourceHanSansCN-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font: "Remote Cascadia Mono", "Remote Source Han Sans", sans-serif;
  --mono: "Remote Cascadia Mono", "Remote Source Han Sans", monospace;
}
button,
input,
select,
textarea { font-family: var(--font); }

/* ============================================================
   Cleaner sidebar utilities v0.1.0-55
   顶栏去除字母图标；文件工具默认折叠，展开后按任务分组而非挤在一行。
   ============================================================ */
#topbar .brand { gap: 8px; }

.side-files {
  margin: auto 12px 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.side-files .side-files-head,
.side-files.open .side-files-head {
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #d8cec4;
  border-radius: 11px;
  background: rgba(255,253,249,.76);
  color: var(--text-dim);
  box-shadow: 0 3px 10px rgba(80,62,47,.035);
}
.side-files .side-files-head:hover {
  border-color: #c8b8aa;
  background: #f3ece5;
}
.side-files .side-files-head::before {
  width: 11px;
  color: #9d674a;
  flex: 0 0 11px;
}
.file-tools-title {
  color: #514941;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.file-tools-note {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-files .files-body,
.side-files.open .files-body {
  padding: 10px 0 0;
  gap: 11px;
}
.file-action,
.file-download {
  width: 100%;
  border: 1px solid #ded4ca;
  border-radius: 10px;
  background: rgba(255,253,249,.82);
}
.file-action {
  min-height: 48px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.file-action:hover {
  border-color: #cdbbae;
  background: #f2eae3;
  transform: translateY(-1px);
}
.file-action:active { transform: none; }
.file-action-icon {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27px;
  border-radius: 8px;
  background: #ece0d6;
  color: #925d40;
  font-size: 15px;
  font-weight: 650;
}
.file-action-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.file-action-copy strong {
  color: #554b43;
  font-size: 11.5px;
  font-weight: 620;
  line-height: 1.35;
}
.file-action-copy small {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 9.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-download { padding: 8px 9px 9px; }
.file-download > label {
  display: block;
  margin: 0 0 6px;
  color: #665b52;
  font-size: 10.5px;
  font-weight: 600;
}
.file-download-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.file-download-row input {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 5px 8px;
  border: 1px solid #d8ccc1;
  border-radius: 8px;
  background: #fffdfa;
  color: var(--text);
  outline: none;
  font-size: 10.5px;
}
.file-download-row input:focus {
  border-color: #b9744f;
  box-shadow: 0 0 0 2px rgba(185,116,79,.09);
}
.file-download-row .download-btn {
  min-width: 48px;
  height: 31px;
  padding: 0 9px;
  border: 1px solid #ccb9aa;
  border-radius: 8px;
  background: #f0e6de;
  color: #704c38;
  font-size: 10.5px;
  cursor: pointer;
}
.file-download-row .download-btn:hover { background: #e8d8cc; }

/* ============================================================
   Compact file controls + directory up v0.1.0-56
   展开区压缩为三条轻量工具行；目录弹窗增加上一级图标按钮。
   ============================================================ */
.side-files .files-body,
.side-files.open .files-body {
  padding-top: 7px;
  gap: 5px;
}
.side-files .file-action {
  min-height: 30px;
  height: 30px;
  padding: 0 9px;
  gap: 7px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: #62584f;
  font-size: 10.5px;
  font-weight: 540;
}
.side-files .file-action:hover {
  border-color: #ded1c5;
  background: #f0e8e1;
  transform: none;
}
.side-files .file-action > span {
  width: 16px;
  color: #9a6243;
  font-size: 12px;
  text-align: center;
}
.side-files .file-download-row {
  min-height: 32px;
  padding: 0;
  gap: 5px;
}
.side-files .file-download-row input {
  height: 30px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 9.5px;
}
.side-files .file-download-row .download-btn {
  min-width: 43px;
  height: 30px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 9.5px;
}
.modal-path .modal-up {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  border: 1px solid #d6c9bd;
  border-radius: 9px;
  background: #f3ece5;
  color: #79533d;
  font-size: 15px;
  cursor: pointer;
}
.modal-path .modal-up:hover:not(:disabled) { background: #e9ddd3; border-color: #c8b5a6; }
.modal-path .modal-up:disabled { opacity: .36; cursor: default; }
.modal-path input { min-width: 0; }

/* ============================================================
   Agent question composer v0.1.0-58
   ask_user_question 等待期间接管普通输入区，支持单选、多选和自定义回答。
   ============================================================ */
#question-panel {
  display: none;
  flex: 0 0 auto;
  padding: 12px calc(max(28px, (100% - var(--col-max)) / 2)) 14px;
  border-top: 1px solid rgba(205, 193, 181, .74);
  background: rgba(247, 244, 239, .96);
}
#question-panel.active { display: block; }
.question-form {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid #d8cabd;
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 8px 24px rgba(80,62,47,.075);
}
.question-form-heading {
  margin-bottom: 10px;
  color: #77503a;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
}
.question-item + .question-item {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5dbd2;
}
.question-header {
  margin-bottom: 3px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
}
.question-title {
  color: #403832;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}
.question-detail {
  max-height: 180px;
  margin-top: 7px;
  padding: 8px 10px;
  overflow: auto;
  border-left: 2px solid #c99373;
  border-radius: 0 7px 7px 0;
  background: #f5eee8;
  color: #655a52;
  font-size: 11px;
  line-height: 1.55;
}
.question-detail > :first-child { margin-top: 0; }
.question-detail > :last-child { margin-bottom: 0; }
.question-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 7px;
  margin-top: 9px;
}
.question-option {
  min-width: 0;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #ddd1c5;
  border-radius: 9px;
  background: #fbf7f2;
  cursor: pointer;
}
.question-option:hover { border-color: #c9ad9b; background: #f4ebe4; }
.question-option:has(input:checked) { border-color: #b9744f; background: #eee0d6; }
.question-option input { margin: 3px 0 0; accent-color: #a96643; }
.question-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.question-option-copy strong { color: #50463f; font-size: 11.5px; font-weight: 620; line-height: 1.4; }
.question-option-copy small { color: var(--text-faint); font-size: 10px; line-height: 1.4; }
.question-custom {
  width: 100%;
  height: 34px;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid #d8ccc1;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  outline: none;
  font-size: 11px;
}
.question-custom:focus { border-color: #b9744f; box-shadow: 0 0 0 2px rgba(185,116,79,.09); }
.question-actions { display: flex; justify-content: flex-end; margin-top: 11px; }
.question-submit { min-width: 92px; }
@media (max-width: 720px) {
  #question-panel { padding: 10px 16px 12px; }
  .question-form { padding: 12px; }
  .question-options { grid-template-columns: 1fr; }
}

/* ============================================================
   Compact sidebar rows + restored version badge v0.1.0-59
   保持字号不变，只收紧列表项盒模型和间距。
   ============================================================ */
#topbar .brand .ver {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  font-size: 9.5px;
  line-height: 1.35;
}
.item-list { gap: 2px; }
#workspace-list .item,
#session-list .item {
  min-height: 29px;
  padding: 4px 8px;
  border-radius: 8px;
}

/* ============================================================
   Pasted image prompts + generic user image rendering v0.1.0-60
   ============================================================ */
.image-drafts {
  display: none;
  max-width: var(--col-max);
  margin: 0 auto 8px;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 4px;
}
.image-drafts.active { display: flex; }
.image-draft {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  overflow: hidden;
  border: 1px solid #d6c7ba;
  border-radius: 10px;
  background: #eee7df;
}
.image-draft img { width: 100%; height: 100%; display: block; object-fit: cover; }
.image-draft-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background: rgba(62,50,42,.78);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 17px;
}
.msg.user.user-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  white-space: normal;
}
.user-message-text { white-space: pre-wrap; }
.message-image {
  position: relative;
  width: min(220px, 52vw);
  min-height: 76px;
  max-height: 240px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(163,123,95,.34);
  border-radius: 9px;
  background: #eee7df;
  color: var(--text-faint);
  cursor: zoom-in;
}
.message-image img {
  width: 100%;
  max-height: 240px;
  display: block;
  object-fit: contain;
}
.message-image.loading::after {
  content: "图片加载中…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: 10px;
}
.message-image.failed { padding: 18px; cursor: default; }
@media (max-width: 720px) {
  .image-draft { width: 62px; height: 62px; flex-basis: 62px; }
  .message-image { width: min(210px, 68vw); }
}

/* ============ Agent preset 新建会话选择 ============ */
.agent-preset-chip {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--bg-input);
  font-size: 11px;
}
.simple-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: none;
  align-items: center;
  justify-content: center;
}
.simple-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(73, 49, 31, .32);
  backdrop-filter: blur(6px);
}
.simple-modal .modal {
  position: relative;
  width: 430px;
  max-width: calc(100vw - 40px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #d8ccc0;
  border-radius: 14px;
  background: rgba(252,250,247,.98);
  box-shadow: 0 20px 60px rgba(69,45,29,.2);
}
.simple-modal h4 { margin: 0; }
.simple-modal label { font-size: 12px; color: var(--text-dim); }
.simple-modal select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg-input);
  font: inherit;
}
.modal-note { min-height: 34px; margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.modal-error { min-height: 18px; color: var(--danger); font-size: 12px; }
@media (max-width: 720px) {
  .agent-preset-chip { display: none; }
}

/* ============================================================
   Unified permission select + session-row-density file tools v0.1.0-64
   ============================================================ */
.permission-control { gap: 0; }
.permission-control select {
  min-width: 152px;
  height: 24px;
  padding: 1px 25px 1px 10px;
  border-radius: 12px;
  background-color: rgba(255,253,249,.86);
  font-size: 11px;
  font-weight: 540;
  line-height: 20px;
  cursor: pointer;
  outline: none;
}
.permission-control select:focus-visible {
  border-color: #b9876b;
  box-shadow: 0 0 0 2px rgba(185,116,79,.1);
}
.permission-control select:disabled {
  opacity: 1;
  cursor: default;
}
.permission-control select.perm-readonly {
  color: #716a64;
  border-color: #d8cec4;
}
.permission-control select.perm-write {
  color: #8a5b16;
  border-color: #ddc393;
  background-color: #fff9ed;
}
.permission-control select.perm-full {
  color: #b54b42;
  border-color: #e4b9b3;
  background-color: #fff5f3;
}

.side-files {
  margin: auto 12px 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(190,157,134,.28);
}
.side-files .side-files-head,
.side-files.open .side-files-head {
  min-height: 29px;
  height: 29px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}
.side-files .side-files-head:hover,
.side-files.open .side-files-head:hover {
  border-color: rgba(190,157,134,.34);
  background: rgba(185,116,79,.055);
}
.side-files.open .side-files-head { border-bottom-color: transparent; }
.side-files .side-files-head::before {
  width: 12px;
  flex-basis: 12px;
  color: #a86745;
  font-size: 9px;
}
.file-tools-title {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 520;
}
.side-files .files-body,
.side-files.open .files-body {
  padding: 4px 0 0;
  gap: 2px;
}
.side-files .file-action {
  min-height: 29px;
  height: 29px;
  padding: 4px 8px;
  gap: 7px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}
.side-files .file-action > span {
  width: 14px;
  font-size: 11px;
}
.side-files .file-download-row {
  min-height: 29px;
  height: 29px;
  gap: 4px;
}
.side-files .file-download-row input {
  height: 29px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 10px;
}
.side-files .file-download-row .download-btn {
  min-width: 42px;
  height: 29px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 10px;
}
.browse-roots {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: var(--text-faint);
  font-size: 11px;
}
.browse-roots select {
  min-width: 0;
  height: 31px;
  padding: 4px 28px 4px 9px;
  border: 1px solid #d8ccc1;
  border-radius: 8px;
  background: #fffdfa;
  color: var(--text-dim);
  font-size: 11px;
  outline: none;
}
.browse-roots select:focus { border-color: #b9744f; }
.browse-roots select:disabled { opacity: .72; }
.browse-selection-hint {
  min-height: 19px;
  padding: 0 2px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.55;
}
.modal-list .dir-item {
  width: 100%;
  min-height: 31px;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.modal-list .dir-item:hover {
  border-color: rgba(190,157,134,.28);
  background: rgba(185,116,79,.055);
}
.modal-list .dir-item.selected {
  border-color: rgba(185,116,79,.38);
  background: rgba(185,116,79,.11);
  color: #7f3d0c;
}
.browse-item-icon {
  width: 13px;
  flex: 0 0 13px;
  color: #a86745;
  text-align: center;
}
.dir-item.file .browse-item-icon { color: #8b8178; }
.browse-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#browse-modal .modal-actions .btn:disabled {
  opacity: .42;
  cursor: default;
}

/* ============================================================
   Persistent toggle button + non-persistent sidebar state
   折叠只改变布局；DOM、工作区、会话和连接状态保持不变。
   ============================================================ */
.sidebar-toggle {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(203, 191, 179, .78);
  border-radius: 8px;
  background: rgba(255, 253, 249, .74);
  color: #76695f;
  font: 600 15px/1 var(--mono);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.sidebar-toggle:hover {
  border-color: rgba(185, 116, 79, .5);
  background: rgba(185, 116, 79, .08);
  color: #8b4d2d;
}
.sidebar-toggle:active { transform: scale(.96); }
.sidebar-toggle:focus-visible { outline: 2px solid rgba(185, 116, 79, .38); outline-offset: 2px; }
#sidebar {
  transition: width .18s ease, min-width .18s ease, opacity .12s ease, border-color .18s ease;
}
#main-view.sidebar-collapsed #sidebar {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0;
  border-right-color: transparent;
  pointer-events: none;
}
@media (max-width: 720px) {
  .sidebar-toggle { width: 27px; height: 27px; flex-basis: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar, .sidebar-toggle { transition: none; }
}

/* ============================================================
   Reader-owned streaming scroll v0.1.0-68
   用户离开底部后保留阅读位置；回到底部后恢复流式跟随。
   ============================================================ */
.chat-scroll-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}
.chat-scroll-wrap #chat-scroll {
  width: 100%;
  height: 100%;
  /* 尾部流式增长由显式 follow 状态控制，避免浏览器原生锚点偷偷移动读者位置。 */
  overflow-anchor: none;
}
.back-to-bottom {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 8;
  transform: translateX(-50%);
  padding: 6px 11px;
  border: 1px solid rgba(185, 116, 79, .38);
  border-radius: 999px;
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 7px 22px rgba(91, 66, 48, .16);
  color: #7c4b31;
  font: 600 11px/1.35 var(--font);
  cursor: pointer;
  backdrop-filter: blur(7px);
}
.back-to-bottom:hover { background: #fff9f3; border-color: rgba(185, 116, 79, .62); }
.back-to-bottom:focus-visible { outline: 2px solid rgba(185, 116, 79, .4); outline-offset: 2px; }
.back-to-bottom[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .back-to-bottom { scroll-behavior: auto; }
}