/* ═══════════════════════════════════════════════════════════════════
   执行瀑布图 —— static/js/TraceWaterfall.js

   目标只有一个：让人在三秒内指着说出“就是这一段”。所以
     · 条形按**真实时间轴**摆（左偏移 = 开始时刻），并行 / 串行一眼可分；
     · 颜色按阶段归组（模型 / 工具 / 沙箱 / 准备），跨执行可比；
     · 归因标签放在标题行 —— 大多数人只想知道结论。

   设计令牌走 ZhiHe（--zh-*），并对老页面回退到 legacy 别名（--tx1 等），
   自动跟随明暗主题。字号只用 14 / 12。
   ═══════════════════════════════════════════════════════════════════ */

.tw {
  margin: 12px 0 4px;
  border: 1px solid var(--zh-border, var(--brd, #E5E6EB));
  border-radius: 8px;
  background: var(--zh-surface, var(--bg2, #fff));
  font-family: var(--zh-font-sans, var(--sans, inherit));
  overflow: hidden;
}

/* ── 标题行（可折叠）───────────────────────────────────────── */
.tw-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: var(--zh-fg-1, var(--tx1, #1D2129));
}
.tw-head:hover { background: var(--zh-surface-2, var(--bg3, #F7F8FA)); }
.tw-title { font-weight: 600; }
.tw-total {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--zh-fg-2, var(--tx2, #4E5969));
}
.tw-caret {
  width: 12px;
  flex: none;
  font-size: 12px;
  color: var(--zh-fg-3, var(--tx3, #86909C));
}
.tw-caret-ph { visibility: hidden; }

/* 归因标签：中性色 —— 它是提示不是判决 */
.tw-flag {
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--zh-surface-2, var(--bg3, #F2F3F5));
  color: var(--zh-fg-2, var(--tx2, #4E5969));
  border: 1px solid var(--zh-border, var(--brd, #E5E6EB));
  white-space: nowrap;
}

/* 展开/折叠全部：默认只展开轮次与大头分支，这个口子留给“我要看全部” */
.tw-expand {
  /* 不加 margin-left:auto —— .tw-total 已经用它把右侧一组顶到底了，
     再来一个 auto 会把剩余空间对半分，反而把总耗时挤到中间 */
  font-size: 12px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--zh-fg-2, var(--tx2, #4E5969));
  border: 1px solid var(--zh-border, var(--brd, #E5E6EB));
}
.tw-expand:hover {
  color: var(--zh-primary, #2F6BFF);
  border-color: var(--zh-primary, #2F6BFF);
}

.tw-body { border-top: 1px solid var(--zh-border, var(--brd, #E5E6EB)); }

/* ── 阶段占比条（phase_ms 汇总）────────────────────────────── */
.tw-phases { padding: 12px 12px 8px; }
.tw-phasebar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--zh-surface-2, var(--bg3, #F2F3F5));
}
.tw-phaseseg { height: 100%; }
.tw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--zh-fg-2, var(--tx2, #4E5969));
}
.tw-leg { display: inline-flex; align-items: center; gap: 4px; }
.tw-leg i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

/* ── 瀑布行 ─────────────────────────────────────────────── */
.tw-rows {
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 0 10px;
}
.tw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 0;
  font-size: 12px;
  color: var(--zh-fg-2, var(--tx2, #4E5969));
}
.tw-row:hover { background: var(--zh-surface-2, var(--bg3, #F7F8FA)); }
.tw-row.err .tw-label { color: var(--zh-danger, #F53F3F); }

.tw-name {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 200px;
  flex: none;
  min-width: 0;
}
.tw-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-sub {
  color: var(--zh-fg-3, var(--tx3, #86909C));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.tw-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tw-badge-err {
  color: var(--zh-danger, #F53F3F);
  font-size: 12px;
  flex: none;
}

/* 时间轴：条形的 left/width 由组件按 offset_ms / dur_ms 算 */
.tw-track {
  position: relative;
  flex: 1 1 auto;
  height: 12px;
  min-width: 60px;
  background: var(--zh-surface-2, var(--bg3, #F2F3F5));
  border-radius: 3px;
  overflow: hidden;
}
.tw-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  min-width: 2px;
}

.tw-dur {
  width: 72px;
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--zh-fg-3, var(--tx3, #86909C));
}

.tw-note {
  padding: 6px 12px 10px;
  font-size: 12px;
  color: var(--zh-fg-3, var(--tx3, #86909C));
}

/* 窄屏：名字列收窄，避免时间轴被挤没 */
@media (max-width: 720px) {
  .tw-name { width: 130px; }
  .tw-sub { display: none; }
  .tw-dur { width: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════
   执行性能看板（static/js/PerfTab.js）—— 只补 ins-* 没有的几块，
   其余（页面骨架 / 表格 / 卡片 / 弹层）一律复用“用户行为洞察”的令牌。
   ═══════════════════════════════════════════════════════════════════ */

.pf-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}
.pf-kpi-v {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zh-fg-1, var(--tx1, #1D2129));
  font-variant-numeric: tabular-nums;
}
.pf-kpi-v.warn { color: #FF7D00; }
.pf-kpi-v.bad  { color: var(--zh-danger, #F53F3F); }

/* 阶段占比条（与瀑布图 .tw-phasebar 同形，但这里是页面级、稍高） */
.pf-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--zh-surface-2, var(--bg3, #F2F3F5));
}
.pf-bar-seg { height: 100%; }
.pf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--zh-fg-2, var(--tx2, #4E5969));
  align-items: center;
}
.pf-leg { display: inline-flex; align-items: center; gap: 5px; }
.pf-leg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.pf-dot {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 6px;
}

/* 趋势图：柱=执行数、两条折线=P50/P95。纯 SVG，零依赖 */
.pf-trend-svg {
  width: 100%;
  height: 120px;
  display: block;
  overflow: visible;
}

/* 专家排行行可点（点击把慢单列表筛到该专家） */
.pf-row-click { cursor: pointer; }
.pf-row-click:hover { background: var(--zh-surface-2, var(--bg3, #F7F8FA)); }