/* ============= 全局基础 ============= */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100vh; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 13px;
  color: #2f3033;
  background: #fafafa;
}
body { display: flex; flex-direction: column; }
body > .titlebar { flex-shrink: 0; }
body > #pipelineBanner { flex-shrink: 0; }
body > .workbench { flex: 1; min-height: 0; height: auto; }
body > .studio-grid { flex: 1; min-height: 0; height: auto; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
::-webkit-scrollbar-track { background: transparent; }

/* ============= 顶部 Title Bar（macOS 红黄绿） ============= */
.titlebar {
  height: 36px;
  background: #f5f5f7;
  border-bottom: 1px solid #e5e5e7;
  display: flex; align-items: center; padding: 0 14px;
  -webkit-app-region: drag;
}
.traffic-lights { display: flex; gap: 8px; }
.traffic-lights .dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red    { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green  { background: #27c93f; }

/* ============= 三栏布局 ============= */
.workbench {
  display: grid;
  grid-template-columns: 244px 1fr 380px;
  height: calc(100vh - 36px);
  background: #fff;
}

/* ============= 左栏 ============= */
.left-pane {
  border-right: 1px solid #ebebed;
  display: flex; flex-direction: column;
  background: #fafafa;
  overflow: hidden;
}
.left-toolbar {
  height: 36px; padding: 0 10px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #ebebed;
}
.left-toolbar .icon-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer; color: #666;
}
.left-toolbar .icon-btn:hover { background: #ececec; }
.left-search {
  margin-left: auto; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #888;
}

.tree-section { padding: 6px 0; user-select: none; }
.tree-section-header {
  display: flex; align-items: center; padding: 4px 12px;
  font-size: 12.5px; cursor: pointer; color: #4a4a4a;
}
.tree-section-header:hover { background: #ececec; }
.tree-section-header .chev { width: 14px; display: inline-block; color: #888; font-size: 10px; }
.tree-section-header .name { font-weight: 500; flex: 1; }
.tree-section-header .add { opacity: 0; color: #888; font-size: 14px; padding: 0 4px; cursor: pointer; }
.tree-section-header:hover .add { opacity: 1; }

.tree-children { padding-left: 0; }
.tree-item {
  display: flex; align-items: center;
  padding: 3px 10px 3px 26px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  color: #3a3a3a;
}
.tree-item:hover { background: #eceef0; }
.tree-item.active { background: #e1e7f0; color: #2161d3; }
.tree-item .file-icon { width: 14px; height: 14px; margin-right: 6px; flex-shrink: 0; }
.tree-item .name {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
}
.tree-item .badge-main {
  margin-left: 4px;
  background: #16a34a; color: #fff;
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  font-weight: 500;
  flex-shrink: 0;
}
.tree-item .badge-highlight {
  margin-left: 4px;
  background: #dc2626; color: #fff;
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  font-weight: 500;
  flex-shrink: 0;
}

/* ============= 中栏 ============= */
.middle-pane {
  display: flex; flex-direction: column;
  background: #fff;
  overflow: hidden;
}
.tab-bar {
  height: 36px;
  background: #f5f5f7;
  display: flex;
  border-bottom: 1px solid #ebebed;
  overflow-x: auto;
}
.tab {
  display: flex; align-items: center;
  padding: 0 14px; height: 36px;
  border-right: 1px solid #ebebed;
  font-size: 12.5px;
  color: #555;
  cursor: pointer;
  background: #f5f5f7;
  position: relative;
  gap: 8px;
  flex-shrink: 0;
}
.tab.active {
  background: #fff;
  color: #2161d3;
  border-bottom: 2px solid #2161d3;
}
.tab .close {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; color: #999;
}
.tab .close:hover { background: #e5e5e5; }

.editor-toolbar {
  height: 36px;
  border-bottom: 1px solid #ebebed;
  padding: 0 14px;
  display: flex; align-items: center; gap: 6px;
  background: #fafafa;
  font-size: 12.5px;
  color: #555;
  flex-wrap: wrap;
}
.editor-toolbar .tool {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer;
}
.editor-toolbar .tool:hover { background: #ececec; }
.editor-toolbar .divider { width: 1px; height: 16px; background: #ddd; margin: 0 4px; }

.editor-content {
  flex: 1;
  overflow: auto;
  padding: 24px 36px;
  background: #fff;
}

/* Markdown 渲染 */
.md-body h1 { font-size: 22px; font-weight: 600; margin: 0 0 12px; color: #1f2329; }
.md-body h2 { font-size: 17px; font-weight: 600; margin: 28px 0 12px; color: #1f2329; }
.md-body h3 { font-size: 14.5px; font-weight: 600; margin: 18px 0 8px; color: #1f2329; }
.md-body p { line-height: 1.8; margin: 8px 0; }
.md-body ul, .md-body ol { padding-left: 22px; line-height: 1.9; }
.md-body table {
  border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 12.5px;
}
.md-body th, .md-body td {
  border: 1px solid #e5e5e7; padding: 6px 10px;
}
.md-body th { background: #f5f5f7; font-weight: 600; }
.md-body code {
  background: #f3f4f6; padding: 2px 6px; border-radius: 3px;
  font-family: "SF Mono", Menlo, monospace; font-size: 12px;
}
.md-body hr { border: none; border-top: 1px solid #e5e5e7; margin: 18px 0; }
.md-body em { color: #888; font-style: italic; }

/* Excel 表格预览 */
.excel-meta {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 16px;
}
.excel-meta .k { color: #777; }
.excel-meta .v { color: #1f2329; font-weight: 500; }
.sheet-tabs {
  display: flex; gap: 4px; margin-bottom: 8px;
}
.sheet-tab {
  padding: 4px 12px; font-size: 12px; cursor: pointer;
  background: #f1f5f9; border-radius: 4px 4px 0 0; color: #555;
}
.sheet-tab.active { background: #2161d3; color: #fff; }
.excel-table {
  border-collapse: collapse; font-size: 12px; width: 100%;
}
.excel-table th, .excel-table td {
  border: 1px solid #e2e8f0; padding: 5px 9px; white-space: nowrap;
}
.excel-table th {
  background: #f8fafc; font-weight: 600; color: #475569;
  position: sticky; top: 0;
}
.excel-table td.num { text-align: right; font-family: "SF Mono", monospace; }
.excel-table td.neg { color: #dc2626; }
.excel-table tr.flag { background: #fff7ed; }
.excel-table tr:hover { background: #f1f5f9; }

/* ============= 右栏 ============= */
.right-pane {
  border-left: 1px solid #ebebed;
  display: flex; flex-direction: column;
  background: #fafafa;
  overflow: hidden;
}
.right-tabbar {
  height: 36px;
  display: flex; align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid #ebebed;
  background: #fff;
  gap: 6px;
}
.right-tab {
  padding: 4px 10px; font-size: 12.5px;
  border-radius: 4px; cursor: pointer;
  color: #444;
  display: flex; align-items: center; gap: 6px;
  max-width: 220px;
}
.right-tab.active { background: #eef2ff; color: #2161d3; }
.right-tab .close { color: #999; padding-left: 4px; }
.right-actions { margin-left: auto; display: flex; gap: 4px; }
.right-actions .icon-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer; color: #666;
}
.right-actions .icon-btn:hover { background: #ececec; }

.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* Step 手风琴 */
.step {
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  background: #fff;
}
.step-header {
  display: flex; align-items: center;
  padding: 9px 12px;
  cursor: pointer;
  gap: 8px;
}
.step-header:hover { background: #fafafa; }
.step-header .checkmark {
  width: 18px; height: 18px;
  border-radius: 50%; background: #2161d3;
  color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-header .name {
  flex: 1; font-size: 12.8px; color: #1f2329; font-weight: 500;
}
.step-header .toggle { color: #999; font-size: 11px; }
.step-detail {
  padding: 0 14px 12px;
  font-size: 12.2px; color: #555;
  line-height: 1.7;
  display: none;
  border-top: 1px solid #f1f1f3;
  padding-top: 10px;
}
.step.expanded .step-detail { display: block; }
.step.expanded .toggle { transform: rotate(180deg); }

/* 结论卡片 */
.conclusion {
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  overflow: hidden;
}
.conclusion-title {
  padding: 9px 12px;
  font-size: 12.8px;
  font-weight: 600;
  color: #1f2329;
  border-bottom: 1px solid #f1f1f3;
  display: flex; align-items: center; gap: 6px;
}
.conclusion-body {
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.85;
  color: #2f3033;
}
.conclusion-body ol {
  padding-left: 22px;
  margin: 0;
}
.conclusion-body ol > li {
  margin-bottom: 8px;
}
.conclusion-body strong {
  font-weight: 600; color: #1f2329;
}
.conclusion-body .sub {
  margin-top: 4px;
  font-size: 12.2px;
  color: #4a4a4a;
}
.conclusion-actions {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid #f1f1f3;
  font-size: 11.5px;
  color: #888;
  justify-content: flex-end;
}
.conclusion-actions .act { cursor: pointer; display: flex; align-items: center; gap: 3px; }
.conclusion-actions .act:hover { color: #2161d3; }

/* 输入区 */
.input-area {
  border-top: 1px solid #ebebed;
  background: #fff;
  padding: 10px 12px;
}
.input-box {
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.input-box:focus-within { border-color: #2161d3; box-shadow: 0 0 0 3px rgba(33, 97, 211, 0.08); }
.input-box .editor {
  min-height: 36px; max-height: 120px; overflow-y: auto;
  outline: none; font-size: 13px; color: #2f3033;
}
.input-box .editor:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
}
.input-box .toolbar {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #888;
  min-height: 22px;
}
.input-box .toolbar .chip {
  padding: 1px 7px; border-radius: 4px; cursor: pointer;
}
.input-box .toolbar .chip:hover { background: #f0f0f3; color: #2161d3; }

/* LLM 模式 chip · 状态点 + 短标签，靠近发送键放置 */
.input-box .toolbar .llm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid #e5e5e7;
  border-radius: 10px;
  background: #fff;
  color: #555;
  font-size: 11px;
  user-select: none;
  transition: all 0.12s;
}
.input-box .toolbar .llm-chip:hover {
  border-color: #c9d2e3;
  background: #f5f7fb;
  color: #1f2329;
}
.input-box .toolbar .llm-chip .llm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #cbd5e1; flex-shrink: 0;
}
.input-box .toolbar .llm-chip.is-real {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}
.input-box .toolbar .llm-chip.is-real:hover {
  border-color: #86efac;
  background: #dcfce7;
}
.input-box .toolbar .llm-chip .llm-label { font-weight: 500; }

.input-box .toolbar .send {
  cursor: pointer; color: #888; padding: 2px;
}
.input-box .toolbar .send:hover { color: #2161d3; }

/* @文件 / #Agent 弹出菜单 */
.popup-menu {
  position: absolute;
  left: 14px; bottom: 64px;
  width: 320px;
  max-height: 360px;
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow-y: auto;
  z-index: 50;
  display: none;
}
.popup-menu.show { display: block; }
.popup-menu .header {
  padding: 8px 12px; font-size: 11.5px; color: #888;
  border-bottom: 1px solid #f1f1f3;
}
.popup-menu .item {
  padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 12.5px;
}
.popup-menu .item:hover { background: #f5f7fa; }
.popup-menu .item .pico {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}
.popup-menu .item .pname { color: #1f2329; font-weight: 500; }
.popup-menu .item .pdesc { font-size: 11.5px; color: #777; margin-top: 1px; }

/* Pill 输入区已选标签 */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.5;
  margin-right: 4px;
}
.pill.file { background: #eef2ff; color: #2161d3; }
.pill.agent { background: #fef3c7; color: #b45309; }

/* 资金图谱 / 异常事件块 */
.viz-card {
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  padding: 12px;
}
.viz-title {
  font-size: 12.5px; font-weight: 600; color: #1f2329;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}

/* ============= AI 分析气泡 + 思考过程折叠面板 =============
   用于真模式（reasoning_content + content 流式）和 mock 模式（静态展示推断过程）。
   设计原则：
     · 主答案（content）默认展开 → 民警一眼看到结论
     · 思考过程（reasoning）默认折叠 → 需要做证据链复盘时再展开
     · 浅紫底色区分"AI 推断过程" vs 白底"最终结论"，视觉对比清晰 */
.ai-bubble {
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  padding: 10px 12px 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ai-bubble .ab-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #1f2329;
}
.ai-bubble .ab-pico {
  width: 22px; height: 22px; border-radius: 4px;
  color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-bubble .ab-tag { color: #b45309; font-weight: 600; }
.ai-bubble .ab-mode {
  font-size: 10.5px;
  background: #eef2ff; color: #4338ca;
  padding: 1px 6px; border-radius: 3px;
}
.ai-bubble .ab-mode.real { background: #dcfce7; color: #166534; }
.ai-bubble .ab-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #94a3b8;
}
.ai-bubble .ab-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #94a3b8;
}
.ai-bubble .ab-status.streaming .dot { background: #f59e0b; animation: ab-blink 0.9s ease-in-out infinite; }
.ai-bubble .ab-status.done .dot      { background: #16a34a; }
.ai-bubble .ab-status.error .dot     { background: #dc2626; }
@keyframes ab-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.ai-bubble .ab-user-pre {
  background: #f4f4f5;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11.5px; color: #52525b;
  white-space: pre-wrap; word-wrap: break-word;
}
.ai-bubble .ab-user-pre .label { color: #94a3b8; margin-right: 4px; }

/* 思考过程折叠面板（核心：让民警看到模型推断风险等级的链路） */
.ai-bubble .reasoning {
  background: linear-gradient(180deg, #faf5ff 0%, #fdfaff 100%);
  border: 1px solid #e9d5ff;
  border-radius: 6px;
  font-size: 12px; color: #6b21a8;
}
.ai-bubble .reasoning > summary {
  cursor: pointer; user-select: none;
  list-style: none;
  padding: 7px 10px;
  display: flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.ai-bubble .reasoning > summary::-webkit-details-marker { display: none; }
.ai-bubble .reasoning > summary::before {
  content: '▶'; font-size: 9px; color: #a855f7;
  transition: transform 0.15s;
}
.ai-bubble .reasoning[open] > summary::before { transform: rotate(90deg); }
.ai-bubble .reasoning > summary .r-label { font-weight: 600; color: #6b21a8; }
.ai-bubble .reasoning > summary .r-stats { color: #a855f7; font-size: 11px; margin-left: auto; font-weight: 400; }
.ai-bubble .reasoning .reasoning-body {
  padding: 6px 12px 10px 24px;
  white-space: pre-wrap; word-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11.5px; line-height: 1.6;
  color: #581c87;
  border-top: 1px dashed #e9d5ff;
  max-height: 360px; overflow-y: auto;
}
.ai-bubble .reasoning .reasoning-body .legal-note {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dotted #d8b4fe;
  color: #9333ea; font-size: 10.5px; font-style: italic;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

.ai-bubble .answer {
  font-size: 12.5px; color: #1f2329; line-height: 1.65;
  white-space: pre-wrap; word-wrap: break-word;
}
.ai-bubble .answer .stream-cursor {
  display: inline-block; width: 6px; height: 13px;
  background: #f59e0b; margin-left: 2px; vertical-align: -2px;
  animation: ab-blink 1s ease-in-out infinite;
}
.ai-bubble .ab-error {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px;
  padding: 8px 10px; font-size: 12px; color: #b91c1c;
  white-space: pre-wrap;
}
.ai-bubble .ab-usage {
  font-size: 10.5px; color: #94a3b8;
  display: flex; gap: 10px; flex-wrap: wrap;
  border-top: 1px dashed #e5e5e7; padding-top: 6px;
}

/* 颜色映射用于 Agent icon */
.bg-blue   { background: #2563eb; }
.bg-rose   { background: #e11d48; }
.bg-amber  { background: #d97706; }
.bg-violet { background: #7c3aed; }
.bg-emerald{ background: #059669; }
.bg-sky    { background: #0284c7; }
.bg-indigo { background: #4338ca; }
.bg-slate  { background: #475569; }

/* ============= Agent Studio 样式 ============= */
.studio-body {
  display: grid; grid-template-columns: 280px 1fr 320px;
  height: calc(100vh - 36px);
  background: #fff;
}
.studio-left {
  border-right: 1px solid #ebebed; background: #fafafa; overflow-y: auto;
}
.studio-canvas {
  background:
    radial-gradient(circle, #d4d4d8 1px, transparent 1px),
    #fcfcfd;
  background-size: 18px 18px;
  position: relative; overflow: auto;
}
.studio-right {
  border-left: 1px solid #ebebed; background: #fafafa;
  padding: 16px; overflow-y: auto;
}

.studio-agent-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f2;
}
.studio-agent-item:hover { background: #ececec; }
.studio-agent-item.active { background: #e1e7f0; }
.studio-agent-item .pico {
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: #fff; font-size: 11.5px;
}
.studio-agent-item .pmeta { flex: 1; min-width: 0; }
.studio-agent-item .pmeta .pname { font-size: 12.8px; font-weight: 500; color: #1f2329; }
.studio-agent-item .pmeta .pdesc { font-size: 11.5px; color: #777; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.flow-node {
  position: absolute;
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  padding: 12px 14px;
  width: 180px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-size: 12px;
  cursor: pointer;
}
.flow-node:hover { border-color: #2161d3; box-shadow: 0 4px 12px rgba(33, 97, 211, 0.15); }
.flow-node .nh {
  font-size: 11px; color: #888; margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.flow-node .nt {
  font-size: 13px; font-weight: 500; color: #1f2329;
}
.flow-node.input { border-color: #16a34a; background: #f0fdf4; }
.flow-node.output { border-color: #d97706; background: #fffbeb; }
.flow-node.llm { border-color: #7c3aed; background: #faf5ff; }

/* SVG 连线图层 */
.flow-svg {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
}
.flow-svg path {
  stroke: #94a3b8; stroke-width: 2; fill: none;
  marker-end: url(#arrow);
}

.studio-right h3 {
  font-size: 13.5px; font-weight: 600;
  margin: 0 0 12px; color: #1f2329;
}
.studio-right .field {
  margin-bottom: 14px;
}
.studio-right .field label {
  display: block; font-size: 11.5px; color: #666; margin-bottom: 4px;
}
.studio-right .field input,
.studio-right .field select,
.studio-right .field textarea {
  width: 100%; padding: 6px 10px;
  border: 1px solid #d4d4d8; border-radius: 5px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
}
.studio-right .field input:focus,
.studio-right .field textarea:focus { border-color: #2161d3; }
.studio-right .field textarea { min-height: 70px; resize: vertical; }