/* ============================================================
   Chip — 深色主题样式
   ============================================================ */
:root {
  --bg: #0f1117;
  --bg-soft: #161922;
  --bg-softer: #1d212d;
  --bg-hover: #262b3a;
  --border: #2a3040;
  --border-light: #353c50;
  --text: #e8eaf0;
  --text-dim: #9aa3b5;
  --text-faint: #7e88a0;
  --accent: #1b95e0;
  --accent-soft: rgba(27, 149, 224, 0.15);
  --user-bubble: #2b3550;
  --danger: #e5484d;
  --ok: #46a758;
  --code-bg: #0b0d13;
  --link: #6cb2ff;
  --radius: 10px;
  --mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
  --sans: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

/* ============ 亮色主题：偏蓝界面 + 白色按钮 ============ */
body.light {
  --bg: #eaf2fa;
  --bg-soft: #ffffff;
  --bg-softer: #e0ecf8;
  --bg-hover: #d6e6f6;
  --border: #d3e2f1;
  --border-light: #bfd4e9;
  --text: #1d2b3c;
  --text-dim: #51667c;
  --text-faint: #7b8ea3;
  --user-bubble: #d6e9fc;
  --accent-soft: rgba(27, 149, 224, 0.14);
  --code-bg: #f2f7fc;
  --link: #146bc4;
}
body.light .btn-primary {
  background: #ffffff;
  color: #1789d6;
  border: 1px solid #bcd6ec;
  box-shadow: 0 1px 3px rgba(23, 105, 180, 0.14);
}
body.light .btn-primary:hover { filter: none; background: #f0f8ff; }
/* 亮色主题：报错框/停止按钮的浅红色是暗色专用，换成深红保证可读 */
body.light .msg .error-box { color: #b3282d; border-color: rgba(197, 40, 45, 0.45); background: rgba(229, 72, 77, 0.08); }
body.light .btn-stop { color: #b3282d; border-color: rgba(197, 40, 45, 0.5); background: rgba(229, 72, 77, 0.1); }
body.light .btn-stop:hover { background: rgba(229, 72, 77, 0.18); }
/* 亮色主题：整个侧栏使用品牌蓝，白色文字 */
body.light #sidebar {
  background: linear-gradient(180deg, #1789d6, #27a3ea);
  border-right-color: transparent;
}
body.light #sidebar .list-caption { color: rgba(255, 255, 255, 0.72); }
body.light #sidebar .session-item,
body.light #sidebar .project-item,
body.light #sidebar .mini-new { color: rgba(255, 255, 255, 0.9); }
body.light #sidebar .session-item:hover,
body.light #sidebar .project-item:hover,
body.light #sidebar .mini-new:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
body.light #sidebar .session-item.active { background: rgba(255, 255, 255, 0.28); color: #ffffff; }
body.light #sidebar .project-children { border-left-color: rgba(255, 255, 255, 0.4); }
body.light #sidebar .session-item .del:hover,
body.light #sidebar .project-item .del:hover { background: #ffffff; color: #e5484d; }
body.light #sidebar .session-item .ren:hover,
body.light #sidebar .project-item .ren:hover { background: #ffffff; color: #1789d6; }
body.light #sidebar .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); }
body.light #sidebar .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #ffffff; color: #ffffff; }
body.light #sidebar .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.35); }
body.light #sidebar .sidebar-tools { border-bottom-color: rgba(255, 255, 255, 0.35); }
body.light #sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); }
body.light #sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.6); }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ============ 扁平线条图标 ============ */
.ic {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.chip-ic { display: inline-flex; color: var(--text-dim); }
.chip-ic .ic { width: 14px; height: 14px; }
.card-ic.ic { width: 22px; height: 22px; color: var(--accent); }

html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
/* 下拉框：改用自绘箭头并向左收进一点（原生箭头太贴右边） */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
  padding-right: 34px;
}
body.light select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351667c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select:disabled { opacity: 0.6; cursor: not-allowed; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 布局 ============ */
#app { display: flex; height: 100vh; height: 100dvh; }

#sidebar {
  width: 264px;
  min-width: 264px;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
  transition: margin-left 0.22s ease;
}
#sidebar.collapsed { margin-left: -264px; }

/* 侧栏顶部的工具入口 */
/* 工具区和下面的项目/对话之间来一条分界线，和底部工具栏那条一个样式 */
.sidebar-tools {
  display: flex; flex-direction: column; gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.tool-entry {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13.5px;
  text-align: left;
}
.tool-entry:hover { background: var(--bg-hover); color: var(--text); }
.tool-entry .ic { width: 15px; height: 15px; }
body.light #sidebar .tool-entry { color: rgba(255, 255, 255, 0.9); }
body.light #sidebar .tool-entry:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; }

/* 文档核对工作区：占满主区，左成稿预览 / 右编辑器 */
#doc-workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.doc-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
/* 参考文档条：拖入的 .docx/.xlsx 落这里，只给名字与操作，不铺内容 */
.doc-ref-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 13px;
}
.doc-ref-bar .ref-name { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-ref-bar .ref-prog { color: var(--accent); }
.doc-ref-bar .btn-ghost, .doc-ref-bar .btn-primary { padding: 4px 12px; font-size: 12.5px; }
/* 拖着文件悬在工作区上方时给个亮边提示 */
#doc-workspace.dragover,
#flow-workspace.dragover { outline: 2px dashed var(--accent); outline-offset: -6px; }
.doc-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.doc-title:hover { color: var(--accent); }
.doc-title-edit {
  font: inherit; font-weight: 600;
  width: min(320px, 60%);
  padding: 2px 8px;
  border: 1px solid var(--accent); border-radius: 6px;
  background: var(--bg-softer); color: var(--text);
}
.doc-bar select { padding: 6px 30px 6px 10px; font-size: 13px; max-width: 220px; }
.doc-bar .btn-primary, .doc-bar .btn-ghost { padding: 7px 14px; font-size: 13px; }

/* 主按钮 + 下拉箭头拼成一个 */
.split-btn { position: relative; display: inline-flex; }
.split-btn > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn > button.caret {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding: 7px 7px; margin-left: 1px;
  display: inline-flex; align-items: center;
}
.doc-bar .split-btn > button.caret .ic { width: 14px; height: 14px; }
.attach-menu.menu-down { top: calc(100% + 6px); bottom: auto; }
.attach-menu.menu-right { left: auto; right: 0; }
/* 顶栏的菜单条目少，比输入区那几个收紧一号 */
.doc-bar .attach-menu { min-width: 140px; padding: 4px; border-radius: 9px; }
.doc-bar .attach-menu .menu-head { padding: 4px 9px 2px; }
.doc-bar .attach-menu .attach-item {
  padding: 6px 9px; border-radius: 6px;
  font-family: var(--sans); font-size: 12.5px;
}

.doc-split { flex: 1; display: flex; min-height: 0; }
.doc-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#doc-view-pane { flex: 0 0 50%; }              /* 拖动中缝时由 JS 改写 */
#doc-edit-pane { flex: 1; }
.doc-pane-head {
  padding: 8px 16px;
  font-size: 12px; color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}
/* 左：Markdown 源码，只读，跟着右边编辑实时重生成 */
.doc-srcwrap { flex: 1; display: flex; min-height: 0; }
.doc-src {
  flex: 1; border: none; border-radius: 0; resize: none;
  padding: 14px 12px 14px 16px;
  font-family: var(--mono); font-size: 12.5px; line-height: 22px;
  white-space: pre; overflow: auto;                 /* 不折行，行号才对得齐 */
  background: var(--bg-softer); color: var(--text-dim);
}
.doc-src:focus { border: none; }
/* 行号贴着中缝放，顺手把中间那条空档填上 */
.doc-lines {
  flex: 0 0 auto; min-width: 30px;
  padding: 14px 9px 14px 7px;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--bg-soft);
  font-family: var(--mono); font-size: 12.5px; line-height: 22px;
  color: var(--text-faint); text-align: right;
  user-select: none;
}
.doc-lines span { display: block; cursor: pointer; }
.doc-lines span:hover { color: var(--text); }
.doc-lines span.cur { color: var(--text); font-weight: 700; }

/* 右：所见即所得正文 */
.doc-editor {
  flex: 1; overflow-y: auto; outline: none;
  padding: 18px 22px 60px;
  font-size: 14px; line-height: 1.85;
}
.doc-editor > :first-child { margin-top: 0; }
.doc-editor table { display: table; width: 100%; }
.doc-editor blockquote { border-left: 3px solid var(--border-light); margin: 8px 0; padding: 2px 12px; color: var(--text-dim); }
/* 编辑器里的代码块没有聊天窗那层标题栏，样式单独给 */
.doc-editor pre {
  margin: 10px 0; padding: 10px 13px; overflow-x: auto;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px;
}
.doc-editor pre code {
  display: block; white-space: pre;
  background: none; border: none; padding: 0;
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--text);
}
.doc-editor .doc-hit { background: rgba(255, 176, 32, 0.18); border-bottom: 2px solid var(--accent); }

/* 中缝：细线 + 加宽的抓取区 */
.doc-gutter {
  flex: 0 0 5px; cursor: col-resize;
  background: var(--border);
  position: relative;
}
.doc-gutter::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px;
}
.doc-gutter:hover, .doc-gutter.dragging { background: var(--accent); }
body.doc-resizing { cursor: col-resize; user-select: none; }

/* 编辑器工具条 */
.doc-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.doc-tools .sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.doc-tools select { padding: 4px 26px 4px 8px; font-size: 12.5px; height: 26px; }
.dt-btn {
  min-width: 28px; height: 26px; padding: 0 7px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12.5px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.dt-btn:hover { background: var(--bg-hover); color: var(--text); }
.dt-btn.b { font-weight: 700; }
.dt-btn.i { font-style: italic; }
.dt-btn.s { text-decoration: line-through; }
.dt-btn.u { text-decoration: underline; }
.dt-btn.mono { font-family: var(--mono); }

@media (max-width: 720px) {
  /* 窄屏改上下排：中缝按不了，直接各占一半 */
  .doc-split { flex-direction: column; }
  #doc-view-pane { flex: 0 0 40% !important; border-bottom: 1px solid var(--border); }
  #doc-edit-pane { flex: 1 !important; }
  .doc-gutter { display: none; }
}

/* ---- 程序设计工作区：左 Mermaid 源码 / 右画布，结构与文档编辑同构 ---- */
#flow-workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* 侧栏是工具面板，不需要半屏；拖动中缝时由 JS 改写。下限保证形状面板两列排得开、文档表格不被压成一列一个字 */
#flow-view-pane { flex: 0 0 280px; min-width: 208px; border-right: none; }
#flow-edit-pane { flex: 1; }
#flow-view-pane .doc-src { color: var(--text); }         /* 源码页可直接改，别做成只读的灰 */
#flow-view-pane .cfg-status { padding: 7px 12px; border-top: 1px solid var(--border); margin: 0; font-size: 12px; }

/* 左栏两页：图形与属性 / 源码 */
.fx-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.fx-tab {
  flex: 1; padding: 8px 6px;
  font-size: 12.5px; color: var(--text-faint);
  border-bottom: 2px solid transparent; border-radius: 0;
}
.fx-tab:hover { color: var(--text); }
.fx-tab.on { color: var(--text); border-bottom-color: var(--accent); background: var(--bg-softer); }
.fx-tabbody { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
#fx-tab-source { overflow: hidden; }

/* 程序设计文档页 */
.fx-doc-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.fx-doc-note {
  padding: 7px 12px;
  font-size: 11.5px; line-height: 1.6;
  color: var(--text-dim);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.fx-doc-body {
  flex: 1; min-height: 0; overflow: auto;
  padding: 12px 14px 24px;
  font-size: 12.5px; line-height: 1.75;
  white-space: normal;
}
/* 生成中直接往里塞纯文本，得让它按原样换行 */
.fx-doc-body:not(:has(*)) { white-space: pre-wrap; font-family: var(--mono); }
.fx-doc-body > :first-child { margin-top: 0; }
.fx-doc-body h1 { font-size: 16px; }
.fx-doc-body h2 { font-size: 14px; }
.fx-doc-body h3 { font-size: 13px; }
/* 表格在窄栏里会被压成一列一个字。给个下限再让它自己横向滚，比挤成条状可读 */
.fx-doc-body table { display: table; width: 100%; min-width: 260px; font-size: 11.5px; }
.fx-doc-body pre { font-size: 11.5px; }
.fx-doc-body pre, .fx-doc-body .code-block { overflow-x: auto; }

.fx-sec-head {
  padding: 10px 12px 6px;
  font-size: 11.5px; color: var(--text-faint);
  line-height: 1.5;
}

/* 形状面板：缩略图用的就是画布那份几何，面板里长什么样落下去就是什么样 */
.fx-palette { padding: 0 8px 6px; }
.fx-pal-group { padding: 8px 4px 4px; font-size: 11px; color: var(--text-faint); }
.fx-pal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.fx-pal-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px 5px;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text-dim); font-size: 11.5px;
  cursor: grab;
}
.fx-pal-cell:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-light); }
.fx-pal-cell.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.fx-pal-cell:active { cursor: grabbing; }
.fx-pal-ic { width: 46px; height: 24px; pointer-events: none; }

/* 属性面板 */
.fx-inspector { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.fx-field { display: flex; flex-direction: column; gap: 4px; }
.fx-field-label { font-size: 11.5px; color: var(--text-faint); }
.fx-input {
  width: 100%; min-width: 0;
  padding: 5px 8px; height: 28px;
  font-size: 12.5px;
}
.fx-textarea { height: auto; min-height: 46px; resize: vertical; font-family: var(--sans); line-height: 1.5; }
.fx-input[readonly] { background: var(--bg-softer); color: var(--text-dim); }
.fx-xy { display: flex; gap: 6px; }
.fx-xy .fx-input { flex: 1; }
.fx-xy .dt-btn { flex: 0 0 auto; height: 28px; }
.fx-hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.65; }
.doc-bar select {
  height: 26px; padding: 3px 24px 3px 8px;
  font-size: 12.5px;
}

/* 画布容器：滚动条交给 SVG 自己的 viewBox，这里只负责铺满和取焦点。
   position: relative 是给就地编辑那个输入框当定位基准的 */
.flow-canvas-host {
  flex: 1; min-height: 0; min-width: 0;
  background: var(--bg-softer);
  outline: none;
  display: flex;
  position: relative;
}
.fx-canvas { flex: 1; width: 100%; height: 100%; display: block; cursor: default; }
.fx-canvas.connecting { cursor: crosshair; }
.fx-canvas.placing { cursor: copy; }
.fx-canvas.pannable { cursor: grab; }
.fx-canvas.panning { cursor: grabbing; }
.fx-canvas.linking { cursor: crosshair; }
/* 框选矩形 */
.fx-band { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.75; }

/* 点阵背景：对齐用。网格步长与拖动吸附是同一个值，看到的点就是能吸到的位置。
   要看得见才有用——用 text-faint 而不是 border-light，后者压在 bg-softer 上几乎没有对比度 */
.fx-dot { fill: var(--text-faint); opacity: 0.42; }

.fx-shape {
  fill: var(--bg-soft);
  stroke: var(--border-light);
  stroke-width: 1.4;
}
.fx-shape-line { stroke: var(--border-light); stroke-width: 1.2; }
.fx-node { cursor: move; }
.fx-node:hover .fx-shape { stroke: var(--text-faint); }
.fx-node.sel .fx-shape { stroke: var(--accent); stroke-width: 2.2; }
.fx-node.from .fx-shape { stroke: var(--accent); stroke-dasharray: 5 3; stroke-width: 2; }
/* 拖线拖到谁头上，谁就整框亮起来——松手会连到这一个，先说清楚 */
.fx-node.target .fx-shape { stroke: var(--accent); stroke-width: 2.6; }
.fx-label {
  fill: var(--text); font-size: 13px;
  font-family: var(--sans);
  pointer-events: none; user-select: none;
}

/* 连接点：鼠标移进框才出现，从它按下去就能拉线 */
.fx-port {
  fill: var(--accent);
  stroke: var(--bg-softer); stroke-width: 1.5;
  cursor: crosshair;
}
.fx-port:hover, .fx-port.live { fill: var(--ok); }
/* 拖到一半的那条线：虚线，和已经落定的实线区分开 */
.fx-linking {
  fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-dasharray: 6 4; pointer-events: none;
}
/* 尺寸把手：四个角 */
.fx-handle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6; }
.fx-h-nw, .fx-h-se { cursor: nwse-resize; }
.fx-h-ne, .fx-h-sw { cursor: nesw-resize; }

/* 就地改字：一个 textarea 浮在画布上，正好盖住那个框。
   整层 pointer-events:none，只有输入框自己收事件，免得挡住画布拖拽和拖形状进来 */
.fx-overlay { position: absolute; inset: 0; pointer-events: none; }
.fx-inline {
  position: absolute; pointer-events: auto;
  margin: 0; padding: 0 6px;
  box-sizing: border-box;
  border: 1.6px solid var(--accent); border-radius: 6px;
  background: var(--bg-soft); color: var(--text);
  font-family: var(--sans);
  text-align: center;
  resize: none; overflow: hidden; white-space: pre;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.fx-inline:focus { outline: none; border-color: var(--accent); }

.fx-edge { fill: none; stroke: var(--text-faint); stroke-width: 1.5; }
.fx-edge.fx-dotted { stroke-dasharray: 5 4; }
.fx-edge.fx-thick { stroke-width: 2.6; }
.fx-edge.sel { stroke: var(--accent); stroke-width: 2.6; }
.fx-arrow { fill: var(--text-faint); }
.fx-elabel-bg { fill: var(--bg-softer); opacity: 0.94; }
.fx-elabel {
  fill: var(--text-dim); font-size: 11px;
  font-family: var(--sans);
  pointer-events: none; user-select: none;
}

/* 工具条按钮的选中态与危险态（复用文档编辑那套 .dt-btn） */
.dt-btn.on { background: var(--accent-soft); color: var(--text); }
.dt-btn.danger:hover { background: rgba(220, 76, 76, 0.16); color: #ff8b8b; }
.dt-btn:disabled { opacity: 0.35; cursor: default; }
.dt-btn:disabled:hover { background: none; color: var(--text-dim); }
/* 对齐那组挤在一起，靠一点间隙把「左中右」和「上中下」分开 */
#flow-tools .dt-btn.grp { margin-left: 7px; }

@media (max-width: 720px) {
  #flow-view-pane { flex: 0 0 42% !important; border-bottom: 1px solid var(--border); }
  #flow-edit-pane { flex: 1 !important; }
}

#session-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.list-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-faint);
  padding: 10px 2px 4px 6px;
  letter-spacing: 0.5px;
  user-select: none;
}
.list-caption .cap-new { font-size: 12px; padding: 4px 11px; border-radius: 7px; letter-spacing: 0; }

/* 项目条目 */
.project-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  user-select: none;
}
.project-item:hover { background: var(--bg-hover); color: var(--text); }
.project-item .chev { transition: transform 0.15s; display: inline-flex; }
.project-item .chev .ic { width: 12px; height: 12px; }
.project-item.open .chev { transform: rotate(90deg); }
.project-item .p-ic .ic { width: 15px; height: 15px; }
.project-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.project-item .del, .project-item .ren { opacity: 0; padding: 2px 5px; border-radius: 5px; display: inline-flex; }
.project-item:hover .del, .project-item:hover .ren { opacity: 0.7; }
.project-item .del:hover { opacity: 1; background: rgba(229, 72, 77, 0.2); color: var(--danger); }
.project-item .ren:hover { opacity: 1; background: var(--accent-soft); color: var(--accent); }
.project-item .del .ic, .project-item .ren .ic { width: 13px; height: 13px; }
.project-item .fw-tag {
  flex: none;
  font-size: 10px;
  padding: 1px 7px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--text-faint);
  max-width: 108px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.light #sidebar .fw-tag { border-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.85); }

.project-children {
  margin: 2px 0 4px 13px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.project-children .session-item { padding: 7px 9px; font-size: 13px; }
.mini-new {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-faint);
  cursor: pointer;
  user-select: none;
}
.mini-new:hover { background: var(--bg-hover); color: var(--text); }
.session-item {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  user-select: none;
}
.session-item:hover { background: var(--bg-hover); color: var(--text); }
.session-item.active { background: var(--accent-soft); color: var(--text); }
.session-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 导出/重命名/删除：平时不出现，鼠标放上去才显形，三个挤成一组少占地方 */
.session-item .del, .session-item .ren, .session-item .exp {
  opacity: 0; flex: none;
  padding: 2px 3px; border-radius: 5px; display: inline-flex;
}
.session-item .exp, .session-item .ren { margin-right: -6px; }
.project-item .ren { margin-right: -4px; }
.session-item .del .ic, .session-item .ren .ic, .session-item .exp .ic { width: 13px; height: 13px; }
.session-item:hover .del, .session-item:hover .ren, .session-item:hover .exp { opacity: 0.7; }
.session-item .del:hover { opacity: 1; background: rgba(229, 72, 77, 0.2); color: var(--danger); }
.session-item .ren:hover, .session-item .exp:hover { opacity: 1; background: var(--accent-soft); color: var(--accent); }

.sidebar-footer { display: flex; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.sidebar-footer button { flex: 1; }

#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
#chat-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 顶栏右上角的公司标（月亮左边）。只用 RD 字标那一截：整张 Logo 缩到这个高度，
   下面「RISING DIGITAL」那行会糊成一团灰。
   拿 PNG 当遮罩、颜色取 --text，深色主题得浅色标、亮色主题自动变深，不用维护两张图。 */
/* 顶栏右侧一组：语言和主题贴在一起（都是开关），竖线之后才是 Logo。
   整组交给顶栏的 align-items:center 上下居中，不再各自偏移。 */
.header-tools { display: flex; align-items: center; gap: 0; }
.header-sep {
  width: 1px; height: 22px;
  margin: 0 9px 0 8px;
  background: var(--border-light);
}

.brand-mark {
  display: block;
  width: 26px; height: 17px;
  flex: 0 0 auto;
  margin-right: -4px;          /* 往右吃掉一点顶栏内边距，贴近角落 */
  background-color: var(--text);
  opacity: 0.7;
  cursor: pointer;             /* 仍然可点，只是不做悬停反馈——业主不要那个变化 */
  -webkit-mask-image: url("../assets/logo-mark.png");
  mask-image: url("../assets/logo-mark.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
/* 语言切换：显示的是「切过去会变成哪种语言」，不是当前语言——按钮上写当前语言等于
   让人点了才知道会切到哪 */
.btn-lang {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px;
  width: auto; min-width: 34px; padding: 0 7px;
}

/* 工具闸门：只读档位弱化、全自动档位提醒（它意味着 AI 可以直接改工程） */
.btn-model.hot { color: var(--accent); border-color: var(--accent); }
/* 工具调用确认弹窗 */
.consent-head { display: flex; align-items: center; gap: 8px; padding: 12px 20px 0; }
.consent-badge { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.consent-badge.edit { color: var(--accent); border-color: var(--accent); }
.consent-badge.danger { color: #e5484d; border-color: rgba(229, 72, 77, 0.6); }
.consent-tool { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.consent-args {
  margin: 10px 20px 0;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.consent-actions { flex-wrap: wrap; }
/* 被拒绝的工具调用：与失败区分开，不是出错而是没被允许 */
.tool-call.denied > summary .tstate { color: var(--text-faint); }
/* 输入区的模型 / 思考深度选择器 */
.model-wrap { position: relative; }
.btn-model {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-dim);
  background: var(--bg-softer);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.btn-model .ic { width: 13px; height: 13px; }
.btn-model span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-model:hover { border-color: var(--accent); color: var(--text); }
/* 左侧按钮的菜单向右展开（默认菜单是靠右对齐的） */
.model-menu.menu-left { left: 0; right: auto; }
.model-menu {
  left: auto; right: 0;
  min-width: 232px;
  /* 每页最多七八行，正常不该出滚动条；上限只防极端情况（几十个型号的自定义网关） */
  max-height: min(480px, calc(100vh - 120px));
  overflow-y: auto;
  overflow-x: hidden;
}
/* 服务商行 = 全名 + 右侧记住的型号，比型号行长，给足宽度免得挤出横向滚动条 */
#provider-menu { min-width: 268px; }
#provider-menu .attach-item .desc { flex-shrink: 0; }
/* 输入区三个药丸按钮的弹出菜单与各自按钮水平居中对齐（其余复用 model-menu 类的菜单不受影响） */
#thinking-menu, #provider-menu, #model-menu {
  left: 50%; right: auto;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
}
.model-menu .attach-item { font-family: var(--mono); font-size: 13px; }
.model-menu .attach-item.action { font-family: var(--sans); font-size: 13px; color: var(--text-dim); }
.model-menu .attach-item.current { color: var(--accent); }
.model-menu .menu-sep { border-top: 1px solid var(--border); margin: 4px 2px; }
.model-menu .menu-head {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--sans);
  padding: 7px 12px 3px;
  letter-spacing: 0.4px;
  user-select: none;
}
.model-menu .attach-item .desc { margin-left: auto; font-family: var(--sans); font-size: 11px; color: var(--text-faint); }
/* 当前模型不支持的思考档位：置灰不可点，菜单顶部给出原因 */
.model-menu .attach-item.disabled { opacity: 0.42; cursor: not-allowed; }
.model-menu .attach-item.disabled:hover { background: transparent; }
.model-menu .menu-tip {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--sans);
  padding: 4px 12px 6px;
  max-width: 300px;
  white-space: normal;
  user-select: none;
}
/* 思考深度按钮：当前模型不吃思考参数时置灰提示 */
.btn-model.na { opacity: 0.45; }   /* 思考按钮不适用 / 工具闸门未接工具时都用它压暗 */

/* ============ 按钮 ============ */
.btn-primary {
  background: linear-gradient(135deg, #1789d6, #27a3ea); /* 公司品牌蓝 */
  color: #fff;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary.big { padding: 12px 26px; font-size: 15px; margin-top: 26px; }
/* 欢迎页的行动按钮离卡片远一点，别贴着卡片底边 */
.welcome > .btn-primary.big { margin-top: 72px; }
.btn-ghost {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-ghost .ic { width: 14px; height: 14px; }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
/* inline-flex 居中，不能只靠 padding：里面是内联 SVG 时，它坐在文字基线上，基线下方的降部
   空间会把图形顶高（实测按钮框心 y=27、图形心 y=25）。改成 flex 居中，图文两种内容都摆正。 */
.btn-icon {
  font-size: 16px; padding: 6px 9px; border-radius: 7px; color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text); }
.btn-tool {
  font-size: 13px;
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-tool .ic { width: 14px; height: 14px; }
.btn-tool:hover { background: var(--bg-hover); color: var(--text); }
.btn-stop {
  background: rgba(229, 72, 77, 0.15);
  color: #ff8a8e;
  border: 1px solid rgba(229, 72, 77, 0.4);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
}
.btn-stop:hover { background: rgba(229, 72, 77, 0.28); }

/* ============ 消息区：用户靠右、AI 靠左 ============ */
#messages { flex: 1; overflow-y: auto; padding: 22px 0 10px; }
.msg { max-width: 860px; margin: 0 auto 22px; padding: 0 24px; display: flex; }
.msg.assistant { justify-content: flex-start; }
.msg.user { justify-content: flex-end; }
.msg.assistant .body { flex: 1; min-width: 0; }
.msg.user .body {
  max-width: 82%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.msg .role-name { font-size: 12px; color: var(--text-faint); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.msg .role-name .ic { width: 20px; height: 20px; }

.msg.user .text {
  background: var(--user-bubble);
  border-radius: 14px 14px 4px 14px;
  padding: 10px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  display: inline-block;
  max-width: 100%;
  text-align: left;
}
.msg.assistant .text { line-height: 1.75; word-break: break-word; }
.msg.user .attach-list { justify-content: flex-end; }

.msg .attach-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  background: var(--bg-softer);
  border: 1px solid var(--border-light);
  border-radius: 7px;
  padding: 4px 9px;
  color: var(--text-dim);
  max-width: 260px;
}
.attach-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip img.thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; }
.attach-chip .rm { cursor: pointer; opacity: 0.6; padding: 0 2px; }
.attach-chip .rm:hover { opacity: 1; color: var(--danger); }

.msg .thinking { margin-bottom: 10px; }
.msg .thinking summary {
  cursor: pointer; font-size: 13px; color: var(--text-faint);
  user-select: none; list-style: none;
}
.msg .thinking summary::before { content: "▸ "; }
.msg .thinking[open] summary::before { content: "▾ "; }
.msg .thinking .thinking-body {
  font-size: 13px; color: var(--text-faint);
  border-left: 2px solid var(--border-light);
  padding: 4px 12px; margin-top: 6px;
  white-space: pre-wrap; word-break: break-word;
}
/* 还没有任何输出时的状态行；呼吸动画表明还在跑、没卡死 */
.msg .thinking-busy {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 10px;
  animation: busy-pulse 1.4s ease-in-out infinite;
}
@keyframes busy-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.msg .error-box {
  background: rgba(229, 72, 77, 0.1);
  border: 1px solid rgba(229, 72, 77, 0.35);
  color: #ff9b9e;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 8px;
  word-break: break-word;
  white-space: pre-wrap;
}
/* 桥卡住时自动跑出来的诊断结论 + 一键修复 */
.msg .error-box .diag-note {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(229, 72, 77, 0.28);
  color: var(--text-dim); font-size: 12.5px; line-height: 1.7;
}
.msg .error-box .diag-fix { margin-top: 9px; padding: 6px 13px; font-size: 12.5px; }
.msg .aborted-note { color: var(--text-faint); font-size: 12px; margin-top: 6px; }

/* 贴着消息放，按钮之间靠内边距分隔就够了——间距一大反而像和消息不相干。
   负 margin 是在抵消 .body 的 flex gap（6px），净距约 2px */
.msg .actions { display: flex; gap: 2px; margin-top: -4px; opacity: 0; transition: opacity 0.15s; }
.msg:hover .actions { opacity: 1; }
.msg .actions button { font-size: 12px; color: var(--text-faint); padding: 2px 6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; }
.msg .actions button .ic { width: 12px; height: 12px; }
.msg .actions button:hover { background: var(--bg-hover); color: var(--text); }
.msg .usage-note { font-size: 11px; color: var(--text-faint); margin-left: auto; align-self: center; }
/* 自己发的那条靠右，操作按钮也跟着靠右 */
.msg.user .user-actions { justify-content: flex-end; }

.cursor-blink { display: inline-block; width: 8px; height: 16px; background: var(--accent); vertical-align: text-bottom; animation: blink 0.9s step-end infinite; margin-left: 2px; border-radius: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* ============ Markdown 渲染 ============ */
.md h1, .md h2, .md h3, .md h4 { margin: 18px 0 10px; line-height: 1.4; }
.md h1 { font-size: 1.45em; } .md h2 { font-size: 1.28em; } .md h3 { font-size: 1.12em; } .md h4 { font-size: 1em; }
.md p { margin: 9px 0; }
.md ul, .md ol { margin: 9px 0; padding-left: 26px; }
.md li { margin: 4px 0; }
.md blockquote {
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  padding: 8px 14px; margin: 10px 0;
  border-radius: 0 8px 8px 0;
  color: var(--text-dim);
}
.md hr { border: none; border-top: 1px solid var(--border-light); margin: 16px 0; }
.md code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}
.md .code-block {
  position: relative;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-bg);
}
.md .code-block .code-head {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-softer);
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--mono);
  border-bottom: 1px solid var(--border);
}
.md .code-block .code-copy { font-size: 12px; color: var(--text-faint); padding: 2px 8px; border-radius: 5px; }
.md .code-block .code-copy:hover { color: var(--text); background: var(--bg-hover); }
.md .code-block pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.md .code-block pre code {
  background: none; border: none; padding: 0;
  font-size: 13px; line-height: 1.6;
  white-space: pre;
}
.md table { border-collapse: collapse; margin: 12px 0; font-size: 14px; display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { border: 1px solid var(--border-light); padding: 7px 12px; text-align: left; }
.md th { background: var(--bg-softer); }
.md a { color: var(--link); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md img { max-width: 100%; border-radius: 8px; }

/* ============ 欢迎页 ============ */
/* 卡片 + 按钮整体在可视区内垂直居中（不再固定顶距，窗口高矮都不会偏上） */
.welcome {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.welcome > .btn-primary.big { align-self: center; }

.welcome-brand { display: flex; justify-content: center; margin-bottom: 34px; }
.brand-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text);   /* 加粗还压在 text-dim 上会显脏，字重上去了颜色也跟着提一档 */
}

.welcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; text-align: left; }
.welcome-cards .card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  font-size: 20px;
  line-height: 1.5;
}
.welcome-cards .card b { display: block; font-size: 15px; margin: 8px 0 4px; }
.welcome-cards .card span { display: block; font-size: 13px; color: var(--text-dim); }

/* ============ 输入区 ============ */
#composer { padding: 8px 24px 10px; max-width: 908px; margin: 0 auto; width: 100%; }
#attachment-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 8px; }
#input-wrap {
  position: relative;   /* 斜杠命令面板的定位基准 */
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 10px 12px 8px;
  transition: border-color 0.15s;
}
#input-wrap:focus-within { border-color: var(--accent); }
#input-wrap.dragover { border-color: var(--accent); background: var(--accent-soft); }
#input {
  width: 100%;
  background: none; border: none;
  resize: none;
  font-size: 15px;
  line-height: 1.55;
  padding: 2px 4px;
  overflow-y: auto;
}
#input-resize {
  height: 10px;
  margin: -8px -4px 0;
  cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
#input-resize::after {
  content: '';
  width: 46px; height: 3px;
  border-radius: 2px;
  background: var(--border-light);
  opacity: 0;
  transition: opacity 0.12s;
}
#input-wrap:hover #input-resize::after, #input-resize.dragging::after { opacity: 1; }
#composer-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.tool-left, .tool-right { display: flex; gap: 4px; align-items: center; }
.tool-left { gap: 8px; }

/* ＋ 附件菜单 */
.attach-wrap { position: relative; }
.btn-plus {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  color: var(--text-dim);
  font-size: 19px; line-height: 1;
  transition: background 0.12s, color 0.12s, transform 0.15s;
}
.btn-plus:hover { background: var(--bg-hover); color: var(--text); }
.btn-plus.open { background: var(--bg-hover); color: var(--text); border-color: var(--accent); }
.attach-menu {
  position: absolute;
  bottom: calc(100% + 10px); left: 0;
  min-width: 208px;
  background: var(--bg-softer);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  z-index: 60;
}
.attach-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
}
.attach-item:hover { background: var(--bg-hover); }
#ctx-hint { font-size: 12px; color: var(--text-faint); margin-right: 8px; }
.composer-footnote { text-align: center; font-size: 11px; color: var(--text-faint); padding-top: 7px; }

/* ============ 弹层 ============ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(5, 7, 12, 0.62);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.panel {
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
.panel.wide { width: min(760px, calc(100vw - 32px)); }
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.panel-header h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.panel-header h2 .ic { width: 16px; height: 16px; color: var(--text-dim); }
.panel-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; }
.panel-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
}
.panel-footer .hint { margin-right: auto; font-size: 12px; color: var(--text-faint); }

/* 站内对话框 */
.panel.dialog { width: min(380px, calc(100vw - 40px)); }
.dialog-msg { padding: 20px 20px 4px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.dialog-input { display: block; margin: 10px 20px 0; width: calc(100% - 40px); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px 18px; }
.dialog-label { font-size: 13px; color: var(--text-dim); padding: 14px 20px 0; }
.panel.dialog.dialog-wide { width: clamp(320px, 50vw, calc(100vw - 40px)); }
/* 弹窗内一行放多个输入框：仓库链接（宽）+ 个人分支（窄） */
.dialog-row { display: flex; gap: 8px; margin: 10px 20px 0; }
.dialog-row .dialog-input { margin: 0; width: auto; min-width: 0; }
.dialog-row .dialog-input:first-child { flex: 2.6; }
.dialog-row .dialog-input:last-child { flex: 1; }
/* 知识库沉淀：起草结果预览，正文可当场改 */
.panel.dialog.kb-preview { width: clamp(360px, 62vw, calc(100vw - 40px)); }
.kb-preview-meta {
  padding: 2px 20px 0;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.6;
  word-break: break-word;
}
.kb-preview-text {
  display: block;
  margin: 12px 20px 0;
  width: calc(100% - 40px);
  height: min(52vh, 460px);
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 12.5px;
  line-height: 1.65;
}
/* 新建项目：拖拽识别 Git 仓库的落区 */
.drop-dir {
  margin: 10px 20px 0;
  padding: 12px 14px;
  border: 1.5px dashed var(--border-light);
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.6;
  transition: border-color 0.15s, background 0.15s;
}
.drop-dir.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
/* GGA：工程路径检测状态（不是拖拽区，用实线边框区分） */
.drop-dir.gga-hint { border-style: solid; text-align: left; }
/* 自动填入且不可改的字段（如已有仓库的远程地址）弱化显示 */
.dialog-input[readonly] { background: var(--bg-softer); color: var(--text-dim); cursor: default; }
/* 工作区创建进度 */
.overlay.git-progress { z-index: 120; }
.gp-bar {
  margin: 14px 20px 0;
  height: 8px;
  border-radius: 5px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  overflow: hidden;
}
.gp-fill {
  height: 100%;
  width: 2%;
  border-radius: 5px;
  background: linear-gradient(90deg, #1789d6, #27a3ea);
  transition: width 0.4s ease;
}
.gp-step { margin: 8px 20px 18px; font-size: 12.5px; color: var(--text-dim); min-height: 17px; }
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
}
.btn-danger:hover { filter: brightness(1.12); }

/* 设置面板：已配置 Key 的服务商列表（每家各存一个 Key，互不覆盖） */
.key-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.key-summary .ks-cap { font-size: 12px; color: var(--text-faint); }
.ks-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.ks-chip:hover { border-color: var(--accent); color: var(--text); }
.ks-chip.current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ks-chip .ks-x {
  font-size: 13px; line-height: 1;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--text-faint);
}
.ks-chip .ks-x:hover { background: rgba(229, 72, 77, 0.18); color: var(--danger); }

/* ============ 设置：接入方式分页（API Key / 订阅登录） ============ */
.mode-tabs { display: flex; gap: 4px; padding: 3px; background: var(--bg); border: 1px solid var(--border-light); border-radius: 9px; }
.mode-tab {
  flex: 1; padding: 7px 10px; border-radius: 7px;
  font-size: 13px; color: var(--text-dim); white-space: nowrap;
}
.mode-tab:hover { color: var(--text); }
.mode-tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mode-tab.wip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mode-tab .wip-badge {
  font-size: 10px; font-weight: 400; letter-spacing: 0;
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border-light); color: var(--text-faint);
}
.mode-tab.wip.active .wip-badge { border-color: currentColor; color: inherit; opacity: 0.8; }
body.light .mode-tab.active { background: #ffffff; color: #1789d6; box-shadow: 0 1px 3px rgba(23,105,180,0.14); }
.sub-cli { display: flex; flex-direction: column; gap: 8px; }
.sub-cli-actions { display: flex; gap: 8px; }
.sub-cli-actions .btn-ghost { flex: 1; }
.sub-cli-hint { font-size: 12px; color: var(--text-faint); line-height: 1.7; }
.server-note {
  font-size: 12.5px; line-height: 1.8; color: var(--text-dim);
  white-space: pre-wrap; word-break: break-all;
  background: var(--accent-soft); border: 1px solid var(--border-light);
  border-radius: 9px; padding: 10px 12px;
}

/* ============ 侧栏用量统计 ============ */
.usage-panel {
  border-top: 1px solid var(--border);
  padding: 9px 4px 4px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.usage-panel .usage-cap {
  font-size: 11px; color: var(--text-faint); letter-spacing: 0.5px; padding-bottom: 2px;
  display: flex; align-items: center; justify-content: space-between;
}
.usage-detail-btn {
  font-size: 11px; color: var(--accent);
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--border-light);
}
.usage-detail-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
body.light #sidebar .usage-detail-btn { color: #ffffff; border-color: rgba(255,255,255,0.5); }
body.light #sidebar .usage-detail-btn:hover { background: rgba(255,255,255,0.16); border-color: #ffffff; }

/* 会话窗口内的上下文读条 */
#ctx-bar { display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px; }
#ctx-bar .cb-track { flex: 1; height: 4px; border-radius: 3px; background: var(--bg-softer); overflow: hidden; }
#ctx-bar .cb-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.4s ease; }
#ctx-bar .cb-fill.warn { background: #d9a132; }
#ctx-bar .cb-fill.danger { background: var(--danger); }
#ctx-bar .cb-text { flex: none; font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
#btn-compact {
  flex: none;
  font-size: 11px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 10px;
}
#btn-compact:hover { background: var(--bg-hover); color: var(--text); }

/* 斜杠命令面板：贴在输入框上方 */
#slash-menu {
  position: absolute;
  left: 8px; bottom: calc(100% + 6px);
  min-width: 320px; max-width: min(520px, 90vw);
  max-height: 300px; overflow-y: auto;
  z-index: 60;
}
#slash-menu .attach-item span:first-child { font-family: var(--mono); font-size: 13px; }

/* 用量详情面板 */
.usage-section { display: flex; flex-direction: column; gap: 8px; }
.usage-sec-title { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.usage-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.usage-table th, .usage-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: right; white-space: nowrap; }
.usage-table th:first-child, .usage-table td:first-child { text-align: left; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.usage-table th { background: var(--bg-softer); color: var(--text-faint); font-weight: 500; }
.usage-table td { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
.usage-table td:first-child { font-family: var(--sans); }
.usage-quota-line { font-size: 12.5px; color: var(--text-dim); }

/* MCP 面板：连接列表 */
.mcp-sec-title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 10px 0 4px; }
.mcp-server summary {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 7px; cursor: pointer;
  font-size: 13.5px; color: var(--text);
  list-style: none;
}
.mcp-server summary::-webkit-details-marker { display: none; }
.mcp-server summary:hover { background: var(--bg-hover); }
.mcp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.mcp-dot.on { background: #35c06f; }
.mcp-dot.off { background: var(--danger); }
.mcp-dot.pending { background: #d9a132; }
.mcp-tool-names {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-faint);
  padding: 4px 8px 8px 24px; line-height: 1.7; word-break: break-all;
}

/* MCP 面板：Mac/Linux 桥安装命令 */
.bridge-install-cmd {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0;
  word-break: break-all;
  user-select: all;
}
.btn-copy-cmd { font-size: 12px; padding: 3px 12px; margin-right: 6px; }

/* 详情面板：日/周/月/年粒度页签 */
.usage-grans { display: flex; gap: 6px; }
.usage-gran {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
  background: transparent;
}
.usage-gran:hover { background: var(--bg-hover); }
.usage-gran.on {
  background: linear-gradient(135deg, #1789d6, #27a3ea);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

/* 消耗趋势图（纯 SVG 堆叠柱状） */
.usage-chart { display: flex; flex-direction: column; gap: 6px; }
.usage-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-dim); }
.usage-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.usage-legend-item i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.usage-svg { width: 100%; height: auto; max-height: 220px; display: block; }
.uc-in    { fill: #27a3ea; }
.uc-out   { fill: #1667a8; }
.uc-think { fill: #8f7ae0; }
.usage-legend-item i.uc-in    { background: #27a3ea; }
.usage-legend-item i.uc-out   { background: #1667a8; }
.usage-legend-item i.uc-think { background: #8f7ae0; }
.uc-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.uc-grid.base { stroke-dasharray: none; }
.uc-axis, .uc-label { fill: var(--text-faint); font-size: 9.5px; font-family: var(--mono); }
.uc-empty { fill: var(--text-faint); font-size: 12px; }
.uc-hot { fill: transparent; }
svg .uc-hot:hover { fill: rgba(127, 160, 200, 0.08); }
.usage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.usage-row .ul { color: var(--text-faint); white-space: nowrap; }
.usage-row .uv { color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; }
.usage-bar { height: 4px; border-radius: 3px; background: var(--bg-softer); overflow: hidden; margin-top: 1px; }
.usage-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.4s ease; }
.usage-fill.warn { background: #d9a132; }
.usage-fill.danger { background: var(--danger); }
.usage-note-line { font-size: 10.5px; color: var(--text-faint); text-align: right; }
body.light #sidebar .usage-panel { border-top-color: rgba(255,255,255,0.35); }
body.light #sidebar .usage-cap,
body.light #sidebar .usage-row .ul,
body.light #sidebar .usage-note-line { color: rgba(255,255,255,0.75); }
body.light #sidebar .usage-row .uv { color: #ffffff; }
body.light #sidebar .usage-bar { background: rgba(255,255,255,0.25); }
body.light #sidebar .usage-fill { background: #ffffff; }

/* ============ MCP / Unity 工具 ============ */
.mcp-guide { font-size: 12.5px; color: var(--text-faint); line-height: 1.7; }
#mcp-project-list { display: flex; flex-direction: column; gap: 7px; }
.mcp-row { display: flex; gap: 8px; align-items: center; }
.mcp-row .mcp-pname { flex: none; width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-dim); }
.mcp-row .mcp-path { flex: 1; min-width: 0; font-size: 13px; }
.mcp-row .mcp-pstate { flex: none; font-size: 12px; color: var(--text-faint); min-width: 56px; text-align: right; }

/* 设置面板：模型自绘下拉（向下展开，覆盖在面板内容上方） */
.cfg-model-wrap { position: relative; }
/* 输入框右端的下拉箭头：明示这里可以点开选择 */
.cfg-model-wrap input { padding-right: 32px; }
.cfg-model-caret {
  margin-left: -32px;
  width: 28px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  cursor: pointer;
  z-index: 1;
}
.cfg-model-caret:hover { color: var(--text); }
.cfg-model-caret .ic { width: 15px; height: 15px; }
.cfg-model-menu {
  top: calc(100% + 6px);
  bottom: auto;
  left: 0;
  width: 100%;
  min-width: 0;
  max-height: 240px;
  overflow-y: auto;
  z-index: 130;
}
.cfg-model-menu .attach-item { font-family: var(--mono); font-size: 13px; }

/* 聊天中的工具调用折叠块 */
.msg .tool-call {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-soft);
  font-size: 13px;
}
.msg .tool-call summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px;
  color: var(--text-dim);
}
.msg .tool-call summary::before { content: "▸"; color: var(--text-faint); }
.msg .tool-call[open] summary::before { content: "▾"; }
.msg .tool-call summary .ic { width: 13px; height: 13px; }
.msg .tool-call summary .tname { font-family: var(--mono); font-size: 12.5px; }
.msg .tool-call summary .tstate { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.msg .tool-call.running summary .tstate { color: var(--accent); }
.msg .tool-call.error { border-color: rgba(229, 72, 77, 0.4); }
.msg .tool-call.error summary .tstate { color: var(--danger); }
.msg .tool-call.ok summary .tstate { color: var(--ok); }
.msg .tool-call .tool-body { border-top: 1px solid var(--border); padding: 8px 11px; display: flex; flex-direction: column; gap: 6px; }
.msg .tool-call .tool-body pre {
  margin: 0; padding: 6px 8px;
  background: var(--code-bg);
  border-radius: 6px;
  font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; color: var(--text-dim); }
.field.checkbox { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.field.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }
.key-row { display: flex; gap: 6px; }
.key-row input { flex: 1; min-width: 0; }
.cfg-status { font-size: 13px; min-height: 18px; white-space: pre-wrap; word-break: break-word; }
.cfg-status.ok { color: var(--ok); }
.cfg-status.err { color: var(--danger); }
/* 提示里的链接原来是浏览器默认的深蓝，压在红字上根本看不清 */
.cfg-status a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.cfg-status a:hover { color: var(--text); }
.btn-inline { padding: 4px 12px; font-size: 12.5px; vertical-align: middle; }

/* MCP 面板：一行一项的连接状态，不写大段说明 */
.mcp-stat { display: flex; flex-direction: column; gap: 2px; }
.mcp-stat-row { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 26px; }
.mcp-stat-name { color: var(--text-dim); min-width: 62px; }
.mcp-stat-val { color: var(--text); }
.mcp-stat-val.ok { color: var(--ok); }
.mcp-stat-val.err { color: var(--danger); }
.mcp-stat-val.pending { color: var(--text-faint); }
.mcp-stat-row .btn-inline { margin-left: auto; }
.mcp-install-hint { margin-top: 4px; font-size: 12px; color: var(--text-faint); line-height: 1.9; }
.mcp-install-hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.mcp-install-hint .bridge-install-cmd {
  display: block; margin: 5px 0;
  padding: 6px 9px; border-radius: 7px;
  background: var(--bg-softer); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
  word-break: break-all; user-select: all;
}
.mcp-alt-install { margin-left: 10px; }

/* ============ 工程文件选择 ============ */
.folder-toolbar { display: flex; gap: 8px; align-items: center; }
#folder-filter { flex: 1; }
#folder-summary { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
#folder-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 46vh;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 13px;
}
.folder-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(42, 48, 64, 0.4);
}
.folder-row:hover { background: var(--bg-hover); }
.folder-row input { accent-color: var(--accent); }
.folder-row .path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.folder-row.checked .path { color: var(--text); }
.folder-row .size { font-size: 11px; color: var(--text-faint); }
.folder-empty { padding: 22px; text-align: center; color: var(--text-faint); font-family: var(--sans); }

/* ============ Toast ============ */
#toast {
  position: fixed;
  left: 50%; top: 64px;   /* 顶部提示：底部会挡住输入区操作；下移避开标题栏 */
  transform: translateX(-50%);
  background: var(--bg-softer);
  border: 1px solid var(--border-light);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  z-index: 200;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  max-width: 80vw;
  white-space: pre-line;  /* 参数转换说明可多行显示 */
  pointer-events: none;   /* 提示只读，不拦截鼠标 */
  text-align: center;
}

/* 窄窗口：侧栏改为悬浮抽屉 + 遮罩，正文占满宽度不被遮挡 */
@media (max-width: 1000px) {
  #sidebar {
    position: fixed; top: 0; left: 0; z-index: 50; height: 100%;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.45);
  }
  #btn-toggle-sidebar { position: relative; z-index: 60; }
  body.drawer-open #btn-toggle-sidebar { visibility: hidden; } /* 抽屉打开时不与侧栏内容重叠 */
  #sidebar-scrim {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(5, 7, 12, 0.5);
  }
  .msg { padding: 0 14px; }
  .msg.user .body { max-width: 92%; }
  #composer { padding: 8px 12px 10px; }
  #chat-header { padding: 0 12px; }
  #chat-title { font-size: 14px; }
}
/* 宽窗口下遮罩永不出现 */
@media (min-width: 1001px) { #sidebar-scrim { display: none !important; } }

@media (max-width: 620px) {
  .msg { padding: 0 10px; }
  #ctx-bar .cb-text { font-size: 10px; }
  .composer-footnote { display: none; }
  .welcome-cards { grid-template-columns: 1fr; }
}