/* ============================================================
   YUCHENJI · AI Brain 控制台 V1 (yc-brain-console-v1.css)
   白底 · 清晰 · 扁平 · 高信息密度 · 层级明确
   参考：refine 布局 / tremor 图表语言 / ant Tabs·Table·Drawer /
   Dify 节点图与 Run History / shadcn·radix 原语
   ============================================================ */
.ybc-wrap{max-width:1280px;margin:0 auto;padding:18px 20px 40px}
.ybc-eyebrow2{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--primary,#B0873A);margin-bottom:6px}

/* 子导航 Tab */
.ybc-subnav{display:flex;gap:4px;flex-wrap:wrap;border:1px solid var(--border,#E4E7EC);background:#fff;border-radius:12px;padding:5px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ybc-subbtn{border:0;background:transparent;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--text-2,#475467);cursor:pointer;transition:.15s}
.ybc-subbtn:hover{background:var(--bg-muted,#F7F8FA);color:var(--text,#101828)}
.ybc-subbtn.on{background:var(--primary-soft,rgba(176,135,58,.10));color:var(--primary-dark,#7E5F26)}

/* KPI 卡 */
.ybc-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:16px}
.ybc-kpi{background:#fff;border:1px solid var(--border,#E4E7EC);border-radius:12px;padding:12px 14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ybc-kpi small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3,#98A2B3);margin-bottom:4px}
.ybc-kpi b{display:block;font-size:21px;font-weight:800;color:var(--text,#101828);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ybc-kpi span{display:block;margin-top:3px;font-size:11.5px;color:var(--text-3,#98A2B3)}
.ybc-kpi.is-good b{color:#2e6e4d}
.ybc-kpi.is-bad b{color:#9c4a37}
.ybc-kpi.is-muted b{color:var(--text-3,#98A2B3)}
.ybc-kpi.is-warnk b{color:#9a6b1f}

/* 卡片与网格 */
.ybc-card{background:#fff;border:1px solid var(--border,#E4E7EC);border-radius:12px;padding:14px 16px;box-shadow:0 1px 2px rgba(16,24,40,.04);min-width:0}
.ybc-card>header{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ybc-card>header small{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--primary,#B0873A)}
.ybc-card>header b{font-size:14.5px;font-weight:800;color:var(--text,#101828)}
.ybc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ybc-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px}
.ybc-grid2>.ybc-card,.ybc-grid3>.ybc-card{margin-bottom:0}
.ybc-note{font-size:12px;color:var(--text-3,#98A2B3);line-height:1.7;margin:10px 0 0}
.ybc-note a,.ybc-link{color:var(--primary,#B0873A);font-weight:700;cursor:pointer;background:none;border:0;padding:0;font-size:12.5px}
.ybc-note a:hover,.ybc-link:hover{text-decoration:underline}
.ybc-empty{color:var(--text-3,#98A2B3);font-size:12.5px;padding:10px 0}
.ybc-loading{color:var(--text-3,#98A2B3);font-size:13px;padding:16px 4px}
.ybc-err{color:#9c4a37;font-size:13px;padding:14px;border:1px solid rgba(192,101,79,.35);border-radius:10px;background:rgba(192,101,79,.05)}
.ybc-sub{display:block;font-size:11.5px;color:var(--text-3,#98A2B3);font-weight:400;margin-top:2px}

/* 图表 */
.ybc-chart{width:100%;height:120px;display:block}
.ybc-chart-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3,#98A2B3);padding:2px 2px 0}
.ybc-legend{margin-left:auto;display:flex;gap:10px;font-size:11px;color:var(--text-3,#98A2B3);font-weight:600}
.ybc-legend i{position:relative;padding-left:12px;font-style:normal}
.ybc-legend i:before{content:"";position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:2px;background:var(--c,#B0873A)}

/* 条形排行 */
.ybc-barow{display:flex;align-items:center;gap:10px;padding:4px 0}
.ybc-barow-k{flex:0 0 128px;font-size:12.3px;color:var(--text-2,#475467);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.ybc-barow-track{flex:1;height:10px;border-radius:5px;background:var(--bg-muted,#F2F4F7);overflow:hidden}
.ybc-barow-track i{display:block;height:100%;border-radius:5px;opacity:.85}
.ybc-barow b{flex:0 0 56px;font-size:12.5px;color:var(--text,#101828);font-variant-numeric:tabular-nums}

/* 表格 */
.ybc-table{width:100%;border-collapse:collapse;font-size:12.8px}
.ybc-table th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--text-3,#98A2B3);padding:6px 8px;border-bottom:1px solid var(--border,#E4E7EC);white-space:nowrap}
.ybc-table td{padding:8px;border-bottom:1px solid var(--bg-muted,#F2F4F7);color:var(--text-2,#344054);vertical-align:top}
.ybc-table td b{color:var(--text,#101828)}
.ybc-table tbody tr:hover{background:var(--bg-muted,#FAFAFB)}
.ybc-table tr.is-adopted td{background:rgba(46,110,77,.05)}
.ybc-q{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ybc-kv{width:100%;border-collapse:collapse;font-size:12.6px;margin-bottom:10px}
.ybc-kv th{width:104px;text-align:left;color:var(--text-3,#98A2B3);font-weight:600;padding:4px 8px 4px 0;vertical-align:top;white-space:nowrap}
.ybc-kv td{color:var(--text,#101828);padding:4px 0;word-break:break-word}
.ybc-pre{white-space:pre-wrap;word-break:break-word;font-size:12.4px;line-height:1.75;color:var(--text-2,#344054);background:var(--bg-muted,#F7F8FA);border:1px solid var(--border,#E4E7EC);border-radius:10px;padding:12px;max-height:320px;overflow:auto;margin:0}
.ybc-ul{margin:0;padding-left:18px;font-size:12.8px;line-height:1.8;color:var(--text-2,#344054)}
code{background:var(--bg-muted,#F2F4F7);border-radius:5px;padding:1px 6px;font-size:11.5px}

/* 状态点 / chips / 过滤器 */
.ybc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.ybc-dot.is-ok{background:#2e6e4d;box-shadow:0 0 0 3px rgba(46,110,77,.12)}
.ybc-dot.is-bad{background:#c0654f;box-shadow:0 0 0 3px rgba(192,101,79,.14)}
.ybc-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;border:1px solid var(--border,#E4E7EC);background:#fff;border-radius:999px;padding:3px 10px;color:var(--text-2,#475467)}
.ybc-chip.is-ok{border-color:rgba(46,110,77,.35);background:rgba(46,110,77,.06);color:#2e6e4d}
.ybc-chip.is-warn{border-color:rgba(154,107,31,.35);background:rgba(154,107,31,.06);color:#9a6b1f}
.ybc-chip.is-bad{border-color:rgba(192,101,79,.35);background:rgba(192,101,79,.06);color:#9c4a37}
.ybc-chips{display:flex;gap:6px;flex-wrap:wrap}
.ybc-filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;background:#fff;border:1px solid var(--border,#E4E7EC);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.ybc-filters label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--text-3,#98A2B3)}
.ybc-filters input,.ybc-filters select,.ybc-select{border:1px solid var(--border,#D0D5DD);border-radius:8px;padding:7px 10px;font-size:12.8px;min-width:120px;background:#fff;color:var(--text,#101828)}
.ybc-filters input:focus,.ybc-filters select:focus{outline:2px solid var(--primary-soft,rgba(176,135,58,.25));border-color:var(--primary,#B0873A)}
.ybc-pager{display:flex;gap:12px;align-items:center;justify-content:flex-end;padding:10px 4px 0;font-size:12.5px;color:var(--text-3,#98A2B3)}

/* Drawer */
.ybc-drawer-wrap{position:fixed;inset:0;z-index:999}
.ybc-drawer-mask{position:absolute;inset:0;background:rgba(16,24,40,.35)}
.ybc-drawer{position:absolute;top:0;right:0;bottom:0;width:min(620px,94vw);background:#fff;box-shadow:-16px 0 48px rgba(16,24,40,.18);display:flex;flex-direction:column;animation:ybc-in .22s ease}
@keyframes ybc-in{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.ybc-drawer>header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border,#E4E7EC)}
.ybc-drawer>header small{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--primary,#B0873A)}
.ybc-drawer>header h3{margin:2px 0 0;font-size:16px;color:var(--text,#101828)}
.ybc-drawer-close{border:1px solid var(--border,#E4E7EC);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:13px;color:var(--text-2,#475467)}
.ybc-drawer-close:hover{color:#9c4a37;border-color:rgba(192,101,79,.4)}
.ybc-drawer-body{padding:16px 20px 30px;overflow:auto;flex:1}

/* 链路图（XYFlow 思路节点图） */
.ybc-pipehead{margin-bottom:14px}
.ybc-pipesel select{width:100%;margin-top:4px}
.ybc-pipemeta{margin-top:10px;font-size:12px;line-height:1.7;color:var(--text-3,#98A2B3)}
.ybc-pipegrid{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;align-items:start}
.ybc-pipesvg{width:100%;height:auto;display:block}
.ybc-node rect{fill:#fff;stroke:var(--border,#D0D5DD);stroke-width:1.4;cursor:pointer;transition:.15s}
.ybc-node:hover rect{stroke:var(--primary,#B0873A);filter:drop-shadow(0 3px 8px rgba(176,135,58,.25))}
.ybc-node.is-branch rect{stroke-dasharray:4 3;fill:#FCFCFB}
.ybc-node.is-bad rect{stroke:#c0654f;stroke-width:2;fill:rgba(192,101,79,.04)}
.ybc-node-label{font-size:13px;font-weight:700;fill:#101828}
.ybc-node-ms{font-size:11px;font-weight:700;fill:#B0873A}
.ybc-node-model{font-size:10px;fill:#98A2B3}
.ybc-node-bar{fill:rgba(176,135,58,.5)}
.ybc-edge{fill:none;stroke:#CBD5E1;stroke-width:1.6}
.ybc-edge.is-branch{stroke-dasharray:4 3;stroke:#B7C0CE}

/* 调用链节点列表（Drawer 内） */
.ybc-nodelist{display:flex;flex-direction:column}
.ybc-node-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border,#EEF0F4)}
.ybc-node-row:last-child{border-bottom:0}
.ybc-node-row.is-bad b{color:#9c4a37}
.ybc-node-idx{flex:0 0 20px;height:20px;border-radius:50%;background:var(--primary-soft,rgba(176,135,58,.12));color:var(--primary-dark,#7E5F26);font-size:10.5px;font-weight:800;display:grid;place-items:center;margin-top:2px}
.ybc-node-main{flex:1;min-width:0}
.ybc-node-main b{font-size:13px;color:var(--text,#101828)}
.ybc-node-main code{margin-left:6px}
.ybc-node-kv{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.ybc-node-kv span{font-size:11.8px;color:var(--text-2,#475467)}
.ybc-node-kv em{font-style:normal;color:var(--text-3,#98A2B3);margin-right:6px;font-weight:600}
.ybc-node-ms2{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--primary-dark,#7E5F26);font-variant-numeric:tabular-nums}

/* 主/Fallback 链 */
.ybc-chain{display:flex;align-items:center;gap:10px;margin:8px 0}
.ybc-chain>small{flex:0 0 34px;font-size:11px;font-weight:800;color:var(--text-3,#98A2B3)}
.ybc-chain>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ybc-chain i{color:var(--text-3,#98A2B3);font-style:normal}

/* 响应式（移动端基础可用） */
@media (max-width:1024px){
  /* 修复 yc-admin-v3 用 !important 固定桌面侧栏边距导致的小屏横向溢出 */
  .page-area{margin-left:0!important}
}
@media (max-width:900px){
  .ybc-wrap{padding:12px 10px 30px}
  .ybc-grid2,.ybc-grid3{grid-template-columns:1fr}
  .ybc-kpis{grid-template-columns:repeat(2,1fr)}
  .ybc-kpi b{font-size:18px}
  .ybc-pipegrid{grid-template-columns:1fr}
  .ybc-barow-k{flex-basis:88px;font-size:11.5px}
  .ybc-q{max-width:150px}
  .ybc-table{font-size:11.8px}
  .ybc-drawer{width:100vw}
  .ybc-filters{gap:8px}
  .ybc-filters input,.ybc-filters select{min-width:0;flex:1}
}