/* 可缩放流程图：配色沿用 agent-diagrams.css，正文里和旧的动画图放在一起不突兀 */
.zf {
  --zf-ink: #263f30;
  --zf-muted: #5f7262;
  --zf-line: #d9e3d4;
  --zf-edge: #a3afa4;
  --zf-accent: #38664b;
  position: relative;
  margin: 30px 0;
  padding: 0;
  border: 1px solid var(--zf-line);
  border-radius: 12px;
  background: #fbfcf8;
  color: var(--zf-ink);
  line-height: 1.6;
  font-size: 14px;
  overflow: hidden;
}
.zf:focus-visible { outline: 2px solid var(--zf-accent); outline-offset: 2px; }
.zf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zf-fallback { display: block; padding: 16px 18px; color: var(--zf-muted); font-size: 13px; }
.zf-fallback span { display: block; margin: 2px 0 6px; }
.zf-fallback ol { margin: 4px 0 10px; padding-left: 22px; }
.zf-fallback p { margin: 6px 0 0; }

.zf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px 6px 18px; }
.zf-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zf-kicker { font: 500 11px "Cascadia Code", Consolas, monospace; letter-spacing: .06em; color: var(--zf-muted); text-transform: uppercase; }
.zf-title { font-size: 15px; font-weight: 600; }
.zf-tools { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.zf button { font: inherit; color: var(--zf-ink); background: #f2f6ef; border: 1px solid var(--zf-line); border-radius: 8px; cursor: pointer; }
.zf button:hover { border-color: #9fb59d; }
.zf .zf-crumb { height: 28px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--zf-accent); }
.zf .zf-crumb.cur { color: var(--zf-muted); cursor: default; }
.zf-crumb-stage { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zf-ink); font-weight: 600; }
.zf-crumb-stage:empty { display: none; }
.zf-crumb-stage::before { content: "/ "; color: var(--zf-muted); font-weight: 400; }
.zf .zf-zoom { width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1; }

.zf-canvas { padding: 0 8px; }
.zf-canvas svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.zf.zoomed .zf-canvas svg { touch-action: none; cursor: grab; }
.zf.dragging .zf-canvas svg { cursor: grabbing; }
.zf-bg { fill: transparent; }

/* 节点 */
.zf-node { transition: opacity .35s ease; }
.zf-node .box { stroke-width: 1.3; transition: stroke .25s ease, stroke-width .25s ease, fill .25s ease; }
.zf-node .ring, .zf-stage .ring { fill: none; stroke: var(--zf-accent); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0; }
.zf-node .rule { stroke-width: 1; }
.zf-node .label, .zf-slabel .label { font-size: 13px; font-weight: 600; fill: var(--zf-ink); }
.zf-node .sub, .zf-slabel .sub { font-size: 10.5px; fill: var(--zf-muted); }
.zf-node .note { font-size: 11px; fill: var(--zf-muted); }
.zf-node.t-llm .box { fill: #e8f1e2; stroke: #86a982; }
.zf-node.t-human .box, .zf-node.t-ext .box { fill: #f7ede2; stroke: #c9a175; }
.zf-node.t-code .box { fill: #eef1f4; stroke: #8f9cab; }
.zf-node.t-tool .box { fill: #e7eff6; stroke: #85a3c0; }
.zf-node.t-store .box { fill: #f5f1e3; stroke: #b9aa7c; }
.zf-node.t-store .rule { stroke: #b9aa7c; }
.zf-node.t-gate .box { fill: #fbefe9; stroke: #c98d74; }
.zf-node.hit .box { stroke: var(--zf-accent); stroke-width: 2.2; }
.zf-node.t-llm.hit .box { fill: #dcebd4; }
.zf-node.owner .ring, .zf-stage.owner .ring { opacity: .9; animation: zf-march 1.2s linear infinite; }

/* 带细节的阶段 */
.zf-stage.has-detail { cursor: zoom-in; }
.zf.zoomed .zf-stage.has-detail { cursor: inherit; }
.zf-stage .frame { stroke-width: 1.4; transition: stroke .25s ease, stroke-width .25s ease; }
.zf-stage.t-llm .frame { fill: #f3f8ef; stroke: #86a982; }
.zf-stage.t-human .frame, .zf-stage.t-ext .frame { fill: #fbf5ee; stroke: #c9a175; }
.zf-stage.t-code .frame { fill: #f5f7f9; stroke: #8f9cab; }
.zf-stage.t-tool .frame { fill: #f1f6fa; stroke: #85a3c0; }
.zf-stage.t-store .frame { fill: #faf8ef; stroke: #b9aa7c; }
.zf-stage.t-gate .frame { fill: #fdf5f1; stroke: #c98d74; }
.zf-stage.has-detail:hover .frame, .zf-stage.hit .frame { stroke: var(--zf-accent); stroke-width: 2.2; }
.zf-stage.active .frame { stroke: var(--zf-accent); }
.zf-slabel .label { font-size: 14px; paint-order: stroke; stroke: #fbfcf8; stroke-width: 5px; stroke-linejoin: round; }
.zf-slabel .sub { paint-order: stroke; stroke: #fbfcf8; stroke-width: 4px; stroke-linejoin: round; }
.zf-slabel.gone, .zf-detail.mini text, .zf-detail.mini .zf-elabel { visibility: hidden; }
.zf-badge circle { fill: #fff; stroke: var(--zf-accent); stroke-width: 1.2; }
.zf-badge path { stroke: var(--zf-accent); stroke-width: 1.5; stroke-linecap: round; }
.zf-htitle { font-weight: 600; fill: var(--zf-ink); }
.zf-hrule { stroke: var(--zf-line); }

/* 连线 */
.zf-edge { fill: none; stroke: var(--zf-edge); stroke-width: 1.3; transition: stroke .25s ease, stroke-width .25s ease; }
.zf-edge.dashed { stroke-dasharray: 5 4; }
.zf-edge.static { stroke-dasharray: 2 4; stroke: #c3ccc2; }
.zf-edge.on { stroke: var(--zf-accent); stroke-width: 2; }
.zf-arrow { fill: var(--zf-edge); }
.zf-arrow.on { fill: var(--zf-accent); }
.zf-elabel { font-size: 10.5px; fill: var(--zf-muted); paint-order: stroke; stroke: #fbfcf8; stroke-width: 4px; stroke-linejoin: round; }
.zf-packet { fill: var(--zf-accent); stroke: #fff; stroke-width: 2; }

/* 播放条 */
.zf-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 10px; border-top: 1px solid #e6ece2; background: #fff; }
.zf .zf-play { width: 32px; height: 32px; padding: 0; font-size: 11px; color: #fff; background: var(--zf-accent); border-color: var(--zf-accent); }
.zf-caption { display: flex; align-items: baseline; gap: 10px; min-height: 22px; font-size: 13.5px; }
.zf-no { flex: none; font: 600 11px "Cascadia Code", Consolas, monospace; color: var(--zf-accent); }
.zf.in-detail .zf-no { color: #8a6a3f; }
.zf-nav { display: flex; gap: 6px; }
.zf-nav button { width: 30px; height: 30px; padding: 0; font-size: 16px; line-height: 1; }
.zf-track { display: flex; align-items: center; gap: 3px; padding: 0 14px 12px; background: #fff; }
.zf .zf-seg { flex: 2; height: 4px; padding: 0; border: 0; border-radius: 2px; background: #e3e9df; }
.zf .zf-seg.sub { flex: 1; height: 3px; background: #efe6d8; }
.zf .zf-seg.done { background: #a9c3a6; }
.zf .zf-seg.sub.done { background: #d4bf9c; }
.zf .zf-seg.cur { background: var(--zf-accent); }
.zf .zf-seg.sub.cur { background: #a67f45; }
.zf-note { margin: 0; padding: 9px 18px 11px; border-top: 1px solid #e6ece2; background: #fff; color: var(--zf-muted); font-size: 12.5px; }
.zf-note span + span::before { content: " "; }
.zf-hint { color: #7c8c7e; }

@keyframes zf-march { to { stroke-dashoffset: -18; } }
@media (max-width: 640px) {
  .zf { margin: 24px -4px; }
  .zf-head { flex-direction: column; gap: 8px; padding: 12px 12px 4px 14px; }
  .zf-bar { gap: 10px; padding: 8px 12px 10px; }
  .zf-caption { font-size: 13px; }
  .zf-canvas { padding: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .zf-node.owner .ring, .zf-stage.owner .ring { animation: none; }
  .zf-node, .zf-edge, .zf-node .box, .zf-stage .frame { transition: none; }
}