/* vibe-coding-board — 本机运行状态看板
   取向：技术工具型深色看板。数据密度优先、等宽数字、克制的强调色。
   颜色只能来自 :root 的 oklch 令牌，其余处一律用 color-mix 派生。 */

:root {
  color-scheme: dark;

  /* 六个基础令牌 */
  --bg:        oklch(17% 0.014 264);
  --surface:   oklch(21.5% 0.016 264);
  --surface-2: oklch(25.5% 0.018 264);
  --fg:        oklch(99% 0.004 264);
  --muted:     oklch(82% 0.02 262);
  --border:    oklch(31% 0.018 264);
  --accent:    oklch(72% 0.15 293);

  /* 语义状态色 */
  --ok:   oklch(78% 0.16 152);
  --warn: oklch(84% 0.15 88);
  --bad:  oklch(70% 0.19 22);
  --idle: oklch(72% 0.02 264);

  /* 派生 */
  --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
  --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
  --ring:        color-mix(in oklch, var(--accent) 62%, transparent);
  --hairline:    color-mix(in oklch, var(--border) 62%, transparent);
  --sheen:       color-mix(in oklch, var(--fg) 5%, transparent);

  /* 工具型看板：显示与正文同一无衬线族（数据密度优先），数字与标签走等宽。 */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC",
                  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: var(--font-display);
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code",
               Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --fs-label: clamp(0.72rem, 1.5vmin, 0.82rem);
  --fs-name: clamp(0.95rem, 2vmin, 1.2rem);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
::selection { background: color-mix(in oklch, var(--accent) 34%, transparent); }

/* ── 顶栏：品牌 + 连接状态 ─────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem;
  padding: 0.85rem clamp(1.2rem, 2.6vmin, 2.4rem);
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.brand-mark { display: block; width: 25px; height: 25px; color: var(--accent); flex: 0 0 auto; }
header h1 {
  margin: 0;
  font-size: clamp(1.02rem, 2.4vmin, 1.3rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

#connection {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  color: var(--warn);
  background: color-mix(in oklch, var(--warn) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--warn) 40%, transparent);
}
#connection::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 22%, transparent);
}
#connection.ok {
  color: var(--ok);
  background: color-mix(in oklch, var(--ok) 15%, transparent);
  border-color: color-mix(in oklch, var(--ok) 42%, transparent);
}
#connection.bad {
  color: var(--bad);
  background: color-mix(in oklch, var(--bad) 17%, transparent);
  border-color: color-mix(in oklch, var(--bad) 46%, transparent);
}

/* ── 主体网格：资源 | Agent（Agent 吃掉剩余宽度） ───────────── */
main {
  display: grid;
  grid-template-columns: 16rem minmax(19rem, 1fr);
  gap: clamp(1rem, 2vmin, 1.6rem);
  align-items: start;
  padding: clamp(0.6rem, 1.4vmin, 1rem) clamp(1.2rem, 2.6vmin, 2.4rem) clamp(1.6rem, 3vmin, 3rem);
}
/* Agent 板块位于第三列。 */
.agents { display: flex; flex-direction: column; gap: clamp(1rem, 2vmin, 1.6rem); min-width: 0; }
@media (max-width: 1180px) {
  main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .agents { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; }
  .agents { grid-column: auto; }
}
section { display: flex; flex-direction: column; min-width: 0; }
/* 整组没有 agent 时由脚本置 hidden；flex 布局会盖掉 UA 的 [hidden]，需要显式声明。 */
section[hidden] { display: none; }

section > h2 {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}
section > h2.stale { color: color-mix(in oklch, var(--bad) 52%, var(--muted)); }
section > h2.stale::after {
  content: "";
  width: 7px; height: 7px; border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--bad) 20%, transparent);
}

/* ── 卡片 ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.2vmin, 1.5rem);
  box-shadow: inset 0 1px 0 var(--sheen);
}

/* ── 本机资源环形图 ───────────────────────────────────────────── */
.pie-row {
  display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.6vmin, 1.2rem);
  align-items: flex-start; justify-content: space-around;
}
#system-card .pie-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; justify-items: center; }
#system-card .pie-cell { min-width: 0; }
.pie-cell {
  flex: 1 1 110px; min-width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center;
}
.donut { width: clamp(70px, 10.5vmin, 100px); height: auto; overflow: visible; }
.donut .track { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.donut .arc {
  fill: none; stroke-width: 12; stroke-linecap: round;
  transition: stroke-dasharray 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.donut .fill-ok { stroke: var(--ok); }
.donut .fill-warn { stroke: var(--warn); }
.donut .fill-bad { stroke: var(--bad); }
.donut .fill-idle { stroke: var(--idle); }
.donut .icon { color: color-mix(in oklch, var(--fg) 46%, var(--muted)); opacity: 0.92; }
.donut .donut-value {
  fill: var(--fg);
  font-family: var(--font-mono);
  font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
/* stale：有旧数据但当前采集失败，饼与数值变灰，不喧宾夺主 */
.pie-row.stale .donut .arc { stroke: var(--idle); opacity: 0.45; }
.pie-row.stale .donut .donut-value { fill: var(--muted); }
.pie-row.stale .donut .icon { color: var(--muted); opacity: 0.6; }

/* 状态文字工具类 */
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .idle { color: var(--idle); }
.fill-ok { background: var(--ok); } .fill-warn { background: var(--warn); }
.fill-bad { background: var(--bad); } .fill-idle { background: var(--idle); }

/* ── Herdr Agent ───────────────────────────────────────────────── */
#spaces { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.6vmin, 1rem); }
.space {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(0.9rem, 1.8vmin, 1.25rem);
  box-shadow: inset 0 1px 0 var(--sheen);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.space.blocked {
  background: color-mix(in oklch, var(--bad) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 42%, var(--border));
}
.space.done {
  background: color-mix(in oklch, var(--ok) 9%, var(--surface));
  border-color: color-mix(in oklch, var(--ok) 38%, var(--border));
}
.space h3 {
  margin: 0 0 0.7rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 650; letter-spacing: -0.005em;
}
.space h3::before {
  content: "";
  width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: 2px;
  background: var(--muted);
}
.space.blocked h3::before { background: var(--bad); }
.space.done h3::before { background: var(--ok); }

.agent {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
}
.agent + .agent { margin-top: 0.5rem; }
.agent.blocked {
  background: color-mix(in oklch, var(--bad) 12%, var(--surface-2));
  border-color: color-mix(in oklch, var(--bad) 40%, transparent);
}
.agent.done {
  background: color-mix(in oklch, var(--ok) 10%, var(--surface-2));
  border-color: color-mix(in oklch, var(--ok) 34%, transparent);
}
.agent .dot {
  width: 6px; min-width: 6px; height: 26px; min-height: 26px;
  border-radius: 999px; flex: 0 0 auto;
}
.agent .kind { flex: 0 0 auto; font-weight: 650; font-size: 0.92rem; }
.agent .title {
  flex: 1 1 auto; min-width: 0;
  color: var(--muted); font-size: 0.82rem;
  overflow-wrap: anywhere;
}
/* delivery pipeline 环节徽标：只在运行中出现，与状态徽标区分。 */
.agent .pipe {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.28em 0.62em; border-radius: 999px; white-space: nowrap;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
}
.agent .pipe-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pipe-pulse 1.6s ease-in-out infinite;
}
@keyframes pipe-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.65); } }

/* ── space 标题上的仓库分支 ──────────────────────────────────────── */
/* 分支属于目录这一层（同一个 space 的 agent 共享），所以挂在 h3 上。 */
.space h3 .branch {
  display: inline-flex; align-items: center; gap: 0.3rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.16em 0.55em; border-radius: 999px; white-space: nowrap;
  color: var(--muted);
  background: var(--fg-soft);
  border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
}
.space h3 .branch:hover {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in oklch, var(--accent) 42%, transparent);
}
.branch-mark { color: var(--accent); font-size: 0.82rem; line-height: 1; }
.agent .status {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.3em 0.7em; border-radius: 999px; white-space: nowrap;
}
.agent .status.ok { color: var(--ok); background: color-mix(in oklch, var(--ok) 16%, transparent); }
.agent .status.warn { color: var(--warn); background: color-mix(in oklch, var(--warn) 16%, transparent); }
.agent .status.bad { color: var(--bad); background: color-mix(in oklch, var(--bad) 18%, transparent); }
.agent .status.idle { color: var(--muted); background: var(--fg-soft); }

.note { font-size: 0.8rem; margin-top: 0.7rem; }
.note.bad { color: var(--bad); }
.note.warn { color: var(--warn); }

/* ── 运行浮层：阶段 → 文档 → 内容 ──────────────────────── */
/* 胶囊可点：data-run 是运行标识，浮层据此取分阶段进度与文档。 */
.agent .pipe[data-run] { cursor: pointer; }
.agent .pipe[data-run]:hover { background: color-mix(in oklch, var(--accent) 24%, transparent); }

.sheet-wrap {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.6rem, 2.4vmin, 1.8rem);
}
/* 显式声明：浮层的 flex 会盖掉 UA 的 [hidden]。 */
.sheet-wrap[hidden] { display: none; }
/* 遮罩只压暗背景，不开模糊：模糊会把看板数据读成糊面，且与浮层的层次差得不够。 */
.sheet-scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
}
/* 浮层比页面表层亮一档，并加一圈描边，与背景明确分层。
   高度固定：切换文档时不能让整个面板高矮跳动。 */
/* 浮层是纸面浅色面板（令牌见下方的「浮层浅色主题」）：看板主体深色、浮层反色，
   长文与代码在浅底上更好读，也让浮层与背后的看板同屏区分得开。 */
.sheet {
  /* 浮层内部的区域分割线：比全局 hairline 明显，高出背景一档。 */
  --sheet-line: color-mix(in oklch, var(--fg) 26%, var(--border));
  /* 顶栏/底栏与左栏比主体再深一点，形成清晰的三个区。 */
  --sheet-bar-bg: color-mix(in oklch, var(--surface) 42%, var(--bg));
  --sheet-side-bg: color-mix(in oklch, var(--bg) 88%, var(--surface));
  position: relative; display: flex; flex-direction: column;
  width: min(1120px, 100%); height: min(88vh, 820px);
  background: color-mix(in oklch, var(--bg) 74%, var(--surface));
  border: 1px solid var(--sheet-line);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--fg) 6%, transparent),
    0 30px 72px -18px oklch(0% 0 0 / 0.8),
    inset 0 1px 0 color-mix(in oklch, var(--fg) 7%, transparent);
  overflow: hidden;
}

/* ── 浮层浅色主题 ───────────────────────────────────────────────
   只覆盖 .sheet 内的令牌。派生令牌（--fg-soft、--accent-soft、--hairline 等）
   本身就是 color-mix 表达式，会随 var() 在浮层内重新求值，不必逐个重写。
   看板主体与遮罩仍为深色：浅色面板叠在压暗的看板上，层次照旧。 */
.sheet {
  color-scheme: light;
  /* 令牌只重定义不生效：继承下来的是 body 算好的颜色值，必须在浮层上重置 color。 */
  color: var(--fg);
  --bg:        oklch(97% 0.004 264);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(94.5% 0.008 264);
  --fg:        oklch(24% 0.02 264);
  --muted:     oklch(47% 0.018 262);
  --border:    oklch(88% 0.01 264);
  --accent:    oklch(50% 0.19 293);
  --ok:        oklch(52% 0.15 152);
  --warn:      oklch(55% 0.14 76);
  --bad:       oklch(52% 0.19 22);
  --idle:      oklch(55% 0.02 264);
  /* 三个区：顶栏/底栏纯白，主体纸面，左栏压暗一档。 */
  --sheet-line:    color-mix(in oklch, var(--fg) 14%, var(--border));
  --sheet-bar-bg:  var(--surface);
  --sheet-side-bg: color-mix(in oklch, var(--surface-2) 62%, var(--bg));
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--fg) 8%, transparent),
    0 26px 60px -20px oklch(0% 0 0 / 0.5);
}
/* 浅底下「比纸面再亮一档」不可见：代码块与表头改为压暗一档。 */
.sheet .md pre { background: color-mix(in oklch, var(--fg) 5%, var(--surface)); }
.sheet .md th { background: color-mix(in oklch, var(--fg) 4%, var(--surface)); }
.sheet-head {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: clamp(0.7rem, 1.8vmin, 1.05rem) clamp(0.9rem, 2vmin, 1.3rem);
  border-bottom: 1px solid var(--sheet-line);
  background: var(--sheet-bar-bg);
}
.sheet-id { min-width: 0; flex: 1 1 auto; }
.sheet-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sheet-sub {
  margin-top: 0.2rem;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  overflow-wrap: anywhere;
}
/* 仓库浮层标题栏：可切换仓库的按钮组。
   按钮只显示目录名，分支与完整路径在 hover tip；当前项用强调色调。 */
.repo-switch {
  display: flex; align-items: center; gap: 0.3rem;
  overflow-x: auto; overflow-y: hidden;
  padding: 0.1rem 0 0.15rem;
  scrollbar-width: thin;
}
.repo-pill {
  flex: 0 0 auto; max-width: 16rem;
  appearance: none;
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--sheet-line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: var(--font-body); font-size: 0.78rem; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.repo-pill:hover { color: var(--fg); background: var(--fg-soft); }
.repo-pill.active {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in oklch, var(--accent) 42%, transparent);
  font-weight: 600;
}
.sheet-stage {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 650; letter-spacing: 0.02em;
  padding: 0.3em 0.7em; border-radius: 999px; white-space: nowrap;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
}
.sheet-close {
  flex: 0 0 auto; cursor: pointer;
  padding: 0 0.35rem; border-radius: 6px;
  color: var(--muted); line-height: 1.2;
}
.sheet-close:hover { color: var(--fg); background: var(--fg-soft); }
.sheet-body {
  display: grid; grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.sheet-phases {
  overflow-y: auto; min-width: 0; min-height: 0;
  padding: 0.6rem 0.55rem 0.9rem;
  border-right: 1px solid var(--sheet-line);
  background: var(--sheet-side-bg);
}
.sheet-doc { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sheet-doc-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.6rem clamp(0.9rem, 2vmin, 1.2rem);
  border-bottom: 1px solid var(--sheet-line);
}
/* 未选中文档时不占位。 */
.sheet-doc-head:empty { display: none; }
.sheet-doc-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0.2rem clamp(0.9rem, 2vmin, 1.2rem) 1.2rem;
}
.sheet-foot {
  padding: 0.45rem clamp(0.9rem, 2vmin, 1.2rem);
  border-top: 1px solid var(--sheet-line);
  background: var(--sheet-bar-bg);
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  overflow-wrap: anywhere;
}

/* 阶段行 */
.ph-head {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.42rem 0.55rem; border-radius: var(--radius-sm);
}
.ph-head:hover { background: var(--fg-soft); }
.ph-head.pending { opacity: 0.7; }
.ph-mark { flex: 0 0 1em; text-align: center; font-size: 0.78rem; color: var(--muted); }
.ph-head.done .ph-mark { color: var(--ok); }
.ph-head.current .ph-mark { color: var(--accent); animation: pipe-pulse 1.6s ease-in-out infinite; }
.ph-name { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: 0.86rem; color: var(--fg); }
.ph-head.current .ph-name { color: var(--accent); }
.ph-stamp { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }

/* 文档条目 */
.doc-list {
  margin: 0.1rem 0 0.45rem 1.35rem;
  padding-left: 0.45rem;
  border-left: 1px solid var(--sheet-line);
}
.doc-row {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.28rem 0.5rem; border-radius: 6px;
}
.doc-row:hover { background: var(--fg-soft); }
.doc-row.active { background: var(--accent-soft); }
.doc-row.active .doc-name { color: var(--accent); }
.doc-name { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; overflow-wrap: anywhere; color: var(--fg); }
.doc-stamp { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }
.doc-round {
  margin: 0.4rem 0 0.1rem;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.doc-empty { margin: 0.1rem 0 0.5rem 1.35rem; font-size: 0.76rem; color: color-mix(in oklch, var(--fg) 55%, var(--muted)); }
.doc-empty.bad { color: var(--bad); }
.doc-title { font-weight: 700; font-size: 0.88rem; }
.doc-tag {
  font-family: var(--font-mono); font-size: 0.66rem;
  padding: 0.12em 0.45em; border-radius: 5px;
  color: var(--muted); background: var(--surface-2);
}
.doc-meta {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  overflow-wrap: anywhere;
}
/* 窄屏返回按钮：只在文档视图下出现。 */
.sheet-back { display: none; cursor: pointer; color: var(--muted); font-size: 0.78rem; }
.sheet-back:hover { color: var(--fg); }

/* Git 工作区：两段变更清单 */
/* 段标题：默认带一层浅底，让「已暂存 / 已修改」读起来像分组带；hover 再深一档，
   与树行一视同仁地给鼠标所在那一条反馈。 */
.git-head {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0.45rem 0 0.15rem;
  padding: 0.26rem 0.4rem;
  border-radius: 5px;
  background: color-mix(in oklch, var(--fg) 7%, transparent);
  cursor: pointer;
  font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0; text-transform: none;
  color: var(--fg);
}
.git-head:hover { background: color-mix(in oklch, var(--fg) 13%, transparent); }
/* 段标题的折叠标记与树行图标同宽，标题文字不会因展开/收起而横移。 */
.git-mark { flex: 0 0 0.85em; color: var(--muted); font-size: 0.7rem; }
.git-count {
  padding: 0.02em 0.4em; border-radius: 999px;
  font-size: 0.62rem; letter-spacing: 0;
  color: var(--fg); background: color-mix(in oklch, var(--fg) 12%, transparent);
}
.change-code {
  flex: 0 0 auto; width: 1.15em;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  text-align: center; border-radius: 3px;
}
.change-code.tone-warn { color: var(--warn); background: color-mix(in oklch, var(--warn) 18%, transparent); }
.change-code.tone-ok { color: var(--ok); background: color-mix(in oklch, var(--ok) 18%, transparent); }
.change-code.tone-bad { color: var(--bad); background: color-mix(in oklch, var(--bad) 20%, transparent); }
.change-code.tone-accent { color: var(--accent); background: var(--accent-soft); }
.change-code.tone-muted { color: var(--muted); background: var(--fg-soft); }

/* 行内浮动操作：hover 时出现在行尾，徽标同时让位（窄栏里两层叠不下）。
   按钮尺寸跟行高对齐，避免 hover 时行高跳动：树行 1.15rem、段标题 0.95rem。 */
.row-acts { display: none; margin-left: auto; flex: 0 0 auto; align-items: center; gap: 0.1rem; }
.tree-row:hover .row-acts, .git-head:hover .row-acts { display: inline-flex; }
/* 只让变更字母让位：段标题的计数有用且不占位，保留。 */
.tree-row:hover .change-code { display: none; }
/* 树内空态与段标题、树行一致：等宽字体、0.8rem、正常前景色。
   缩进沿用 .doc-empty 的 1.35rem（树行 0.45rem + 图标 0.85em + 间距 0.3rem），
   与第一层目录/文件的名字齐平，但不带图标位。错误态保留红色。 */
.repo-tree .doc-empty { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg); }
.repo-tree .doc-empty.bad { color: var(--bad); }
.row-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1;
  color: color-mix(in oklch, var(--fg) 55%, var(--muted)); cursor: pointer; user-select: none;
}
.git-head .row-act { width: 0.95rem; height: 0.95rem; font-size: 0.72rem; }
.row-act:hover { color: var(--fg); background: var(--fg-soft); }
/* 三个动作各自给语义色：绿色加、中性减、红色撤销；打开保持强调色。 */
.row-act[data-git-act="stage"]:hover { color: var(--ok); background: color-mix(in oklch, var(--ok) 16%, transparent); }
.row-act[data-git-act="discard"]:hover { color: var(--bad); background: color-mix(in oklch, var(--bad) 16%, transparent); }
.row-act[data-git-act="open"]:hover { color: var(--accent); background: var(--accent-soft); }

/* 并排差异：左列旧侧，右列新侧；内容区自己滚动，右侧索引条常驻。 */
#repo-file-body.is-diff { overflow: hidden; }
.diff-wrap { display: flex; height: 100%; min-height: 0; }
.diff-view {
  flex: 1 1 auto; min-width: 0; overflow: auto;
  padding: 0.3rem 0 0.8rem;
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.6;
}
.diff-ruler {
  position: relative; flex: 0 0 12px;
  margin: 0.45rem 0.3rem 0.45rem 0;
  border-radius: 4px;
  background: color-mix(in oklch, var(--fg) 7%, transparent);
  border: 1px solid var(--sheet-line);
  cursor: pointer;
}
/* 每个色块是一处差异：位置与高度按行号比例。 */
.diff-mark {
  position: absolute; left: 1px; right: 1px; min-height: 4px;
  border-radius: 2px; background: color-mix(in oklch, var(--warn) 88%, transparent);
}
.diff-mark.add { background: color-mix(in oklch, var(--ok) 88%, transparent); }
.diff-mark.del { background: color-mix(in oklch, var(--bad) 88%, transparent); }
.diff-mark:hover, .diff-mark.active { outline: 1px solid var(--fg); }
/* 差异处数与上下跳按钮整组贴右：头部占满整行，这组靠 margin-left:auto 落到最右侧。 */
.diff-tail { display: inline-flex; align-items: baseline; gap: 0.6rem; margin-left: auto; }
.diff-open {
  padding: 0 0.4rem; border-radius: 4px; cursor: pointer;
  font-size: 0.72rem; color: var(--muted);
}
.diff-open:hover { color: var(--accent); background: var(--accent-soft); }
.diff-nav { display: inline-flex; gap: 0.15rem; }
.diff-nav span {
  padding: 0 0.4rem; border-radius: 4px; cursor: pointer;
  font-size: 0.72rem; color: var(--muted);
}
.diff-nav span:hover { color: var(--fg); background: var(--fg-soft); }
.diff-row { display: grid; grid-template-columns: 1fr 1fr; }
.diff-cell { display: flex; gap: 0.6rem; min-width: 0; padding: 0 0.6rem; }
.diff-cell + .diff-cell { border-left: 1px solid var(--sheet-line); }
.diff-cell.del { background: color-mix(in oklch, var(--bad) 16%, transparent); }
.diff-cell.add { background: color-mix(in oklch, var(--ok) 16%, transparent); }
.diff-no {
  flex: 0 0 3.2em; text-align: right;
  color: color-mix(in oklch, var(--muted) 55%, var(--fg));
  user-select: none;
}
.diff-text { flex: 1 1 auto; min-width: 0; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-labels { display: inline-flex; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.diff-labels span + span { padding-left: 0.7rem; border-left: 1px solid var(--sheet-line); }

/* 提交历史：顶部上游摘要、提交行、提交内文件树与右侧详情 */
.history-summary {
  display: flex; flex-direction: column; gap: 0.16rem;
  padding: 0.1rem 0.45rem 0.55rem;
  border-bottom: 1px solid var(--sheet-line);
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
}
.history-branch { color: var(--fg); font-size: 0.72rem; }
.history-upstream-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.history-upstream { overflow-wrap: anywhere; }
.history-actions { display: flex; gap: 0.1rem; }
.history-action {
  width: 1.35rem; height: 1.35rem; padding: 0;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--fg); cursor: pointer;
  font: 600 0.82rem/1 var(--font-display);
}
.history-action:hover:not(:disabled) { background: var(--fg-soft); color: var(--accent); }
.history-action:disabled { opacity: 0.48; cursor: not-allowed; }
.history-message { font-family: var(--font-display); font-size: 0.68rem; color: var(--ok); }
.history-message.is-error { color: var(--bad); overflow-wrap: anywhere; }
.commit-row {
  margin: 0.12rem 0; padding: 0.34rem 0.4rem;
  border-radius: 6px; cursor: pointer;
}
.commit-row:hover { background: color-mix(in oklch, var(--fg) 8%, transparent); }
.commit-row.active { background: var(--accent-soft); }
.commit-line { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.commit-sha {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.74rem;
  color: var(--accent);
}
/* 列表里的提交信息只占一行：超出宽度省略，完整内容在右栏与 title 里看。 */
.commit-subject {
  flex: 1 1 auto; min-width: 0; font-size: 0.8rem; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.commit-row.active .commit-subject { color: var(--accent); font-weight: 600; }
.commit-push {
  flex: 0 0 auto; padding: 0.04em 0.4em; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6rem;
}
.commit-push.tone-ok { color: var(--ok); background: color-mix(in oklch, var(--ok) 16%, transparent); }
.commit-push.tone-warn { color: var(--warn); background: color-mix(in oklch, var(--warn) 18%, transparent); }
.commit-push.tone-muted { color: var(--muted); background: var(--fg-soft); }
.commit-meta {
  padding-left: 1.2rem;
  font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.commit-files { margin: 0.1rem 0 0.3rem 0.55rem; padding-left: 0.2rem; border-left: 1px solid var(--sheet-line); }
.history-more {
  margin: 0.5rem 0.4rem 0.2rem; padding: 0.4rem;
  border: 1px dashed var(--sheet-line); border-radius: 6px;
  font-size: 0.74rem; text-align: center; color: var(--muted); cursor: pointer;
}
.history-more:hover { color: var(--fg); background: var(--fg-soft); }

/* 右侧提交详情：元数据表格 + 提交信息 */
/* 提交信息整段展示：换行按提交时的原样保留，长行折行，不横向滚动。 */
.commit-detail { padding: 0.9rem clamp(0.8rem, 1.8vmin, 1.1rem) 1.8rem; }
.commit-grid {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.32rem 1rem; margin: 0;
  font-size: 0.8rem;
}
.commit-grid dt { color: var(--muted); white-space: nowrap; }
.commit-grid dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.commit-grid dd.mono { font-family: var(--font-mono); font-size: 0.76rem; }
.commit-msg-block { margin-top: 0.9rem; }
.commit-msg-label {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.commit-msg {
  margin: 0; padding: 0.55rem 0.75rem;
  border-left: 2px solid var(--sheet-line);
  background: color-mix(in oklch, var(--fg) 4%, transparent);
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* markdown 预览（.md 默认视图） */
/* markdown 预览与代码视图同宽：不限制行宽，左右内边距一致，整块区域宽度统一。 */
.repo-file-body .md-doc {
  padding: 0.9rem clamp(0.8rem, 1.8vmin, 1.1rem) 1.8rem;
}

/* 「预览 / 原文」切换 */
.file-modes {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; gap: 0.12rem;
  padding: 0.1rem; border-radius: 999px;
  background: color-mix(in oklch, var(--fg) 9%, transparent);
  border: 1px solid var(--sheet-line);
}
.file-mode {
  padding: 0.08rem 0.55rem; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  font-size: 0.68rem; color: var(--muted);
}
.file-mode:hover { color: var(--fg); }
.file-mode.active { color: var(--accent); background: var(--accent-soft); }

/* markdown 正文（web/markdown.js 的输出） */
.md {
  color: var(--fg);
  font-size: 0.88rem; line-height: 1.66;
  overflow-wrap: anywhere;
}
.md > :first-child { margin-top: 0.5rem; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  margin: 1.25em 0 0.5em;
  color: var(--fg); font-weight: 680; letter-spacing: -0.01em; line-height: 1.3;
}
.md h1 { font-size: 1.16rem; }
.md h2 { font-size: 1.05rem; }
.md h3 { font-size: 0.96rem; }
.md h4, .md h5, .md h6 { font-size: 0.9rem; }
.md p { margin: 0.55em 0; }
.md code {
  font-family: var(--font-mono); font-size: 0.9em;
  padding: 0.1em 0.34em; border-radius: 4px;
  background: var(--fg-soft);
}
.md pre {
  margin: 0.7rem 0; padding: 0.7rem 0.85rem;
  background: color-mix(in oklch, var(--surface) 58%, var(--bg));
  border: 1px solid var(--sheet-line); border-radius: var(--radius-sm);
  overflow-x: auto;
}
.md pre code { padding: 0; background: none; font-size: 0.78rem; line-height: 1.5; }
.md ul, .md ol { margin: 0.45rem 0; padding-left: 1.4rem; }
.md li { margin: 0.16rem 0; }
.md blockquote {
  margin: 0.7rem 0; padding: 0.1rem 0.85rem;
  border-left: 2px solid color-mix(in oklch, var(--accent) 55%, transparent);
  color: color-mix(in oklch, var(--fg) 74%, var(--muted));
}
.md table { width: 100%; margin: 0.7rem 0; border-collapse: collapse; font-size: 0.8rem; }
.md th, .md td { border: 1px solid var(--sheet-line); padding: 0.32rem 0.5rem; vertical-align: top; }
.md th { background: color-mix(in oklch, var(--surface) 70%, var(--bg)); font-weight: 650; }
.md .ta-left { text-align: left; }
.md .ta-center { text-align: center; }
.md .ta-right { text-align: right; }
.md a { color: var(--accent); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md hr { margin: 1.1rem 0; border: 0; border-top: 1px solid var(--sheet-line); }
.md del { opacity: 0.7; }

/* ── 仓库浮层：图标栏 → 文件树 → 内容 ────────────────────── */
/* 接近全屏：外圈只留极窄的边，宽高都撑满可用区域。 */
.sheet-wrap:has(.sheet.repo) { padding: clamp(0.3rem, 1vmin, 0.6rem); }
.sheet.repo { width: 100%; height: 100%; }
.repo-body {
  display: grid;
  grid-template-columns: 3.1rem minmax(13rem, 19rem) minmax(0, 1fr);
  flex: 1 1 auto; min-height: 0;
}

/* 最左图标栏：文件树 / Git 工作区（后者后续接入）。 */
.repo-rail {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0;
  border-right: 1px solid var(--sheet-line);
  background: var(--sheet-bar-bg);
}
.rail-item {
  display: flex; align-items: center; justify-content: center;
  width: 2.05rem; height: 2.05rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem; color: var(--muted);
  cursor: pointer;
}
.rail-item:hover { color: var(--fg); background: var(--fg-soft); }
.rail-item.active { color: var(--accent); background: var(--accent-soft); }

/* 左栗：文件树（独立滚动区） */
.repo-side {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
  border-right: 1px solid var(--sheet-line);
  background: var(--sheet-side-bg);
}
.repo-side-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.8rem;
  border-bottom: 1px solid var(--sheet-line);
  background: var(--sheet-bar-bg);
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
/* 左栏标题右侧的刷新：只转图标，不换行。 */
.side-refresh {
  margin-left: auto; cursor: pointer;
  padding: 0 0.25rem; border-radius: 4px;
  font-size: 0.9rem; line-height: 1;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}
.side-refresh:hover { color: var(--fg); background: var(--fg-soft); }
.side-refresh.loading { animation: side-spin 0.8s linear infinite; }
@keyframes side-spin { to { transform: rotate(360deg); } }
.repo-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0.35rem 0.3rem 0.8rem; }
.tree-row {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.16rem 0.4rem 0.16rem calc(0.45rem + var(--depth, 0) * 0.8rem);
  border-radius: 5px; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--fg);
  white-space: nowrap;
}
.tree-row:hover { background: color-mix(in oklch, var(--fg) 8%, transparent); }
.tree-row.active { background: var(--accent-soft); color: var(--accent); }
/* 被 .gitignore 匹配的条目灰显但可点：需要時仍能查看。 */
.tree-row.is-ignored { opacity: 0.62; }
.tree-row.is-ignored:hover { opacity: 0.88; }
.tree-mark { flex: 0 0 0.85em; color: var(--muted); font-size: 0.7rem; }
.tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail-item.active, .tree-row.active .tree-name { font-weight: 600; }

/* 右侧：文件头 + 内容 */
.repo-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.repo-main-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.42rem clamp(0.8rem, 1.8vmin, 1.1rem);
  border-bottom: 1px solid var(--sheet-line);
  background: var(--sheet-bar-bg);
}
.repo-file-head { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.repo-file-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.repo-file-body .doc-empty { margin: 0.9rem clamp(0.8rem, 1.8vmin, 1.1rem); }

/* 代码视图：行号 + 原文。长行折行，不横向滚动，行号始终可见。 */.code-view { padding: 0.35rem 0 0.8rem; }
.code-row { display: flex; gap: 0.9rem; padding: 0 clamp(0.8rem, 1.8vmin, 1.1rem); }
.code-row:hover { background: color-mix(in oklch, var(--fg) 9%, transparent); }
.code-no {
  flex: 0 0 3.4em; text-align: right;
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.66;
  color: color-mix(in oklch, var(--muted) 55%, var(--fg));
  user-select: none;
}
.code-text {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.66;
  color: var(--fg);
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4;
}

/* 窄屏：图标栏保留，文件树与内容两态切换（见文件末尾的 900px 媒体查询）。 */

/* 窄屏：单列逐级下钻，阶段列表与正文不同时占屏。 */
@media (max-width: 900px) {
  .sheet { height: 92vh; }
  .sheet-body { grid-template-columns: minmax(0, 1fr); }
  .sheet-phases { border-right: 0; }
  .sheet[data-view="doc"] .sheet-phases { display: none; }
  .sheet:not([data-view="doc"]) .sheet-doc { display: none; }
  .sheet[data-view="doc"] .sheet-back { display: inline; }

  /* 仓库浮层：图标栏保留，文件树与内容不同时占屏。 */
  .repo-body { grid-template-columns: 3rem minmax(0, 1fr); }
  .repo-side { border-right: 0; }
  .sheet.repo[data-view="file"] .repo-side { display: none; }
  .sheet.repo:not([data-view="file"]) .repo-main { display: none; }
  .sheet.repo[data-view="file"] .repo-main-head .sheet-back { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .agent .pipe-dot { animation: none; }
  .ph-head.current .ph-mark { animation: none; }
  .side-refresh.loading { animation: none; }
  .donut .arc { transition: none; }
}