/* Workflows view (workflows.js) and the workflow graph (workflow_graph.js).
   The graph follows the console mock-up's workflow preview: dotted canvas, layers top to bottom, typed cards,
   smoothstep edges, "input required" on a waiting gate. All colours come from app.css tokens plus the type hues below. */
:root{
  --wf-agent:#c2417e; --wf-tool:#6d4aff; --wf-gate:#d38b1d; --wf-branch:#3b6fd8; --wf-fan:#0891b2; --wf-loop:#64748b;
  --wf-agent-soft:rgba(194,65,126,.12); --wf-tool-soft:rgba(109,74,255,.10); --wf-gate-soft:#fdf3e3; --wf-branch-soft:rgba(59,111,216,.12);
  --wf-fan-soft:rgba(8,145,178,.12); --wf-loop-soft:rgba(100,116,139,.14);
  --wf-agent-fg:#a8326a; --wf-tool-fg:#4a2ed1; --wf-gate-fg:#b45309; --wf-branch-fg:#2f5cc0; --wf-fan-fg:#0e7490; --wf-loop-fg:#475569;
  --wf-edge:#8a90a8; --wf-card-sh:0 0 0 1px var(--line), 0 1px 2px rgba(11,16,35,.05);
}
:root[data-theme="dark"]{
  --wf-agent:#d1558f; --wf-tool:#8b6dff; --wf-gate:#d99a33; --wf-branch:#5b8be8; --wf-fan:#22a6c4; --wf-loop:#7c879b;
  --wf-agent-soft:rgba(209,85,143,.18); --wf-tool-soft:rgba(139,109,255,.18); --wf-gate-soft:#2a2113; --wf-branch-soft:rgba(91,139,232,.18);
  --wf-fan-soft:rgba(34,166,196,.18); --wf-loop-soft:rgba(124,135,155,.2);
  --wf-agent-fg:#f08fbe; --wf-tool-fg:#b7a3ff; --wf-gate-fg:#e0a14a; --wf-branch-fg:#9dbcf5; --wf-fan-fg:#6fd3ea; --wf-loop-fg:#aeb7c7;
  --wf-edge:#6b7186; --wf-card-sh:0 0 0 1px var(--line-2), 0 1px 2px rgba(0,0,0,.4);
}

/* ================= the graph ================= */
.wfg{position:relative;width:100%;height:100%;min-height:160px;overflow:hidden;background-color:var(--bg-2);background-image:radial-gradient(var(--line-2) 1px,transparent 1.2px);background-size:20px 20px;cursor:grab;outline:0;touch-action:none;user-select:none}
.wfg.panning{cursor:grabbing}
.wfg-cv{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.wfg-cv.glide{transition:transform .36s cubic-bezier(.2,.7,.2,1)}
.wfg svg.edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.wfg .edges path{fill:none;stroke:var(--wf-edge);stroke-width:1.5;opacity:.85;transition:stroke .25s,opacity .25s}
.wfg .edges path.pend{stroke:var(--line-2);opacity:1}
.wfg .edges path.fade{stroke:var(--line-2);opacity:.9;stroke-dasharray:2 4}
.wfg .edges path.live{stroke:var(--accent);opacity:.55;animation:wf-live 2.4s ease-in-out infinite}
.wfg .edges path.run{stroke:var(--accent);opacity:1;stroke-dasharray:5 4;animation:wf-dash .8s linear infinite}
.wfg .edges path.wait{stroke:var(--warn);opacity:1;stroke-dasharray:3 3}
.wfg .edges path.bad{stroke:var(--signal);opacity:1}
.wfg .edges path.drawing{animation:none;opacity:1}
.wfg .edges .dot{fill:var(--wf-fan);filter:drop-shadow(0 0 3px var(--wf-fan))}
@keyframes wf-dash{to{stroke-dashoffset:-18}}
@keyframes wf-live{50%{opacity:.95}}
.wfg .se{position:absolute;transform:translateX(-50%);font:600 var(--fs-1)/var(--lh-1,16px) var(--mono);letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase;pointer-events:none}
.wfg-bands{position:absolute;inset:0;pointer-events:none}
.wfg-bands .band{position:absolute;left:8px;border-radius:var(--r16);background:color-mix(in srgb,var(--fg) 2.2%,transparent)}
.wfg-bands .band.alt{background:color-mix(in srgb,var(--accent) 3.5%,transparent)}
.wfg-bands .band span{position:absolute;left:8px;top:10px;writing-mode:vertical-rl;transform:rotate(180deg);font:600 10px/12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;max-height:calc(100% - 16px);overflow:hidden}
.wfg-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--fg-3);font-size:var(--fs-2);padding:var(--sp-5);text-align:center;pointer-events:none}
.wfg-tools{position:absolute;right:var(--sp-3);bottom:var(--sp-3);z-index:3;cursor:default}
.wfg-tools .seg{box-shadow:var(--sh-2);background:var(--bg)}
.wfg-tools .seg button{min-width:26px;font-variant-numeric:tabular-nums}
.wfg.compact .wfg-tools{right:var(--sp-2);bottom:var(--sp-2)}

/* cards */
.wfn{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border-radius:var(--r16);background:var(--bg);box-shadow:var(--wf-card-sh);text-align:left;cursor:pointer;transition:box-shadow .15s,opacity .3s,filter .3s;z-index:1}
.wfn:hover{box-shadow:0 0 0 1px var(--line-2),0 6px 16px -8px rgba(11,16,35,.25)}
.wfn.on{box-shadow:0 0 0 1.5px var(--fg),0 6px 16px -8px rgba(11,16,35,.3)!important;z-index:2}
.wfn .r1{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.wfn .ti2{width:22px;height:22px;border-radius:var(--r8);display:grid;place-items:center;color:#fff;flex:none}
.wfn .ti2 svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wfn .nm{font-size:var(--fs-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.wfn .ty{font:600 10px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 var(--sp-1);border-radius:var(--r4);flex:none}
.wfn .r2{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-1);color:var(--fg-2);min-width:0;line-height:16px}
.wfn .r2 .ds{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.wfn.ty-agent .r2 .ds,.wfn.ty-tool .r2 .ds{font-family:var(--mono);font-size:10.5px}
.wfn .av{display:inline-flex;flex:none}.wfn .av.run svg{animation:spin 6s linear infinite}
.wfn .sg2{flex:none;display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-1);font-variant-numeric:tabular-nums;color:var(--fg-3);white-space:nowrap}
.wfn .sg2 .x{font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.wfn .sg2 .spin{width:9px;height:9px}
.bg-agent{background:var(--wf-agent)}.bg-tool{background:var(--wf-tool)}.bg-approval,.bg-human{background:var(--wf-gate)}.bg-branch{background:var(--wf-branch)}.bg-fanout,.bg-join{background:var(--wf-fan)}.bg-loop,.bg-item{background:var(--wf-loop)}
.ty-agent>.r2 .ty,.wf-ty.ty-agent{background:var(--wf-agent-soft);color:var(--wf-agent-fg)}
.ty-tool>.r2 .ty,.wf-ty.ty-tool{background:var(--wf-tool-soft);color:var(--wf-tool-fg)}
.ty-approval>.r2 .ty,.ty-human>.r2 .ty,.wf-ty.ty-approval,.wf-ty.ty-human{background:var(--wf-gate-soft);color:var(--wf-gate-fg)}
.ty-branch>.r2 .ty,.wf-ty.ty-branch{background:var(--wf-branch-soft);color:var(--wf-branch-fg)}
.ty-fanout>.r2 .ty,.ty-join>.r2 .ty,.wf-ty.ty-fanout,.wf-ty.ty-join{background:var(--wf-fan-soft);color:var(--wf-fan-fg)}
.ty-loop>.r2 .ty,.ty-item>.r2 .ty,.wf-ty.ty-loop,.wf-ty.ty-item{background:var(--wf-loop-soft);color:var(--wf-loop-fg)}
.wf-ty{font:600 10px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 var(--sp-1);border-radius:var(--r4);flex:none}

/* status */
.wfn.st-running{box-shadow:0 0 0 1.5px var(--accent),0 0 0 5px var(--accent-soft)}
.wfn.st-running .sg2{color:var(--accent)}
.wfn.st-running::after{content:"";position:absolute;inset:-5px;border-radius:calc(var(--r16) + 5px);box-shadow:0 0 0 1px var(--accent);opacity:0;animation:wf-ring 2s ease-out infinite;pointer-events:none}
.wfn.st-waiting{box-shadow:0 0 0 1.5px var(--warn),0 0 0 5px var(--warn-soft);animation:wf-wait 1.8s ease-in-out infinite}
.wfn.st-waiting .sg2{color:var(--warn)}
.wfn.st-failed{box-shadow:0 0 0 1.5px var(--signal),0 0 0 4px var(--signal-soft);background:color-mix(in srgb,var(--signal) 4%,var(--bg))}
.wfn.st-failed .sg2{color:var(--signal);font-weight:600}
.wfn.st-done .sg2{color:var(--ok)}
.wfn.st-pending{box-shadow:0 0 0 1px var(--line-2)}
.wfn.st-pending>.r1,.wfn.st-pending>.r2{opacity:.6}
.wfn.st-skipped{box-shadow:none;outline:1px dashed var(--line-2);outline-offset:-1px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.wfn.st-skipped>.r1,.wfn.st-skipped>.r2{opacity:.42;filter:grayscale(1)}
.wfn.st-cancelled{box-shadow:0 0 0 1px var(--line-2)}
.wfn.st-cancelled>.r1,.wfn.st-cancelled>.r2{opacity:.6}
.wfn.ph{box-shadow:none;outline:1.5px dashed var(--wf-fan);outline-offset:-1px;background:var(--bg)}
.wfn.ph::before{content:"";position:absolute;inset:5px -5px -5px 5px;border-radius:var(--r16);outline:1.5px dashed color-mix(in srgb,var(--wf-fan) 45%,transparent);outline-offset:-1px;z-index:-1;background:var(--bg-2)}
.wfn.ph>.r1,.wfn.ph>.r2{opacity:.8}
.wfn .needs{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font:600 10px/16px var(--mono);letter-spacing:.04em;padding:0 var(--sp-2);border-radius:var(--r-full);background:var(--warn-soft);color:var(--warn);box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 40%,transparent);white-space:nowrap;cursor:pointer}
.wfn .needs:hover{background:var(--warn);color:var(--bg)}
@keyframes wf-wait{50%{box-shadow:0 0 0 1.5px var(--warn),0 0 0 9px transparent}}
@keyframes wf-ring{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.06,1.2)}}
.wfn.enter{animation:wf-enter .42s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes wf-enter{from{opacity:0;transform:translate(var(--dx,0),var(--dy,-10px)) scale(.55)}60%{opacity:1}to{opacity:1;transform:none}}
.wfn.leave{opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s;pointer-events:none}
.wfn.shake{animation:wf-shake .42s ease-in-out}
@keyframes wf-shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.wfn.pop{animation:wf-pop .42s ease-out}
@keyframes wf-pop{35%{transform:scale(1.07)}}
/* compact cards (chat side pane): one line */
.wfg.compact .wfn{padding:0 var(--sp-2);border-radius:var(--r12)}
.wfg.compact .wfn .ti2{width:18px;height:18px;border-radius:5px}.wfg.compact .wfn .ti2 svg{width:10px;height:10px}
.wfg.compact .wfn .nm{font-size:var(--fs-1)}
.wfg.compact .wfn .needs{bottom:-8px;font-size:9px;line-height:14px}
.wfg.compact .wfn.ph::before{inset:4px -4px -4px 4px;border-radius:var(--r12)}

.wf-leg{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;font-size:var(--fs-1);color:var(--fg-2);padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--line);background:var(--bg);min-height:32px}
.wf-leg i{display:inline-block;width:8px;height:8px;border-radius:var(--r-full);margin-right:var(--sp-1);vertical-align:0}
.wf-leg .dash{width:16px;height:0;border-radius:0;border-top:1.5px dashed var(--fg-3);vertical-align:3px}
.wf-leg{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}.wf-leg>span{flex:none}
.wf-leg .end{margin-left:auto;color:var(--fg-3);flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.wfg.plan .wfn.st-pending>.r1,.wfg.plan .wfn.st-pending>.r2{opacity:1}
.wfg.plan .wfn.st-pending{box-shadow:var(--wf-card-sh)}
.wfg.plan .edges path.pend{stroke:var(--wf-edge)}

/* ================= the Workflows view ================= */
#v-workflows{grid-template-columns:var(--list) minmax(0,1fr)}
.wf-side .wf-row{position:relative;display:flex;flex-direction:column;gap:var(--sp-h);width:100%;text-align:left;padding:var(--sp-2) var(--sp-4);border-radius:0;min-width:0}
.wf-side .wf-row:hover{background:var(--bg-3)}.wf-side .wf-row.on{background:var(--sel)}
.wf-side .wf-row.on::before{content:"";position:absolute;left:0;top:var(--sp-2);bottom:var(--sp-2);width:2px;background:var(--accent);border-radius:var(--r4)}
.wf-row b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:var(--sp-2)}
.wf-row b span.t{overflow:hidden;text-overflow:ellipsis}
.wf-row .sub{font-size:var(--fs-2);color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wf-row .m{font-size:var(--fs-1);color:var(--fg-3);display:flex;gap:var(--sp-2);align-items:center;margin-top:2px}
.wf-main{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0;background:var(--bg)}
.wf-main.run{grid-template-rows:auto auto minmax(0,1fr)}
.wf-head{padding:var(--sp-4) var(--sp-5) var(--sp-3);min-width:0}
.wf-ht{display:flex;align-items:center;gap:var(--sp-2);min-width:0;flex-wrap:wrap}
.wf-ht h2{margin:0;font-size:var(--fs-6);line-height:28px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wf-ht .grow{flex:1}
.wf-hd{margin:var(--sp-1) 0 0;max-width:92ch;color:var(--fg-2)}
.wf-hm{margin-top:var(--sp-1);font-size:var(--fs-2);color:var(--fg-3);display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.wf-tabs{height:38px;display:flex;align-items:center;gap:var(--sp-1);padding:0 var(--sp-3) 0 var(--sp-4);border-bottom:1px solid var(--line)}
.wf-tab{position:relative;height:38px;padding:0 var(--sp-2);font-weight:500;color:var(--fg-2);border-radius:0;display:inline-flex;align-items:center;gap:var(--sp-2)}
.wf-tab:hover{color:var(--fg)}.wf-tab.on{color:var(--accent-deep)}
.wf-tab.on::after{content:"";position:absolute;left:var(--sp-2);right:var(--sp-2);bottom:-1px;height:2px;background:var(--accent);border-radius:var(--r4)}
.wf-tab .n{font-size:var(--fs-1);color:var(--fg-3);font-weight:400}
.wf-body{min-height:0;min-width:0;overflow:hidden;display:grid}
.wf-scroll{overflow:auto;padding:var(--sp-4) var(--sp-5) var(--sp-7)}
.wf-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);text-align:center;padding:var(--sp-8) var(--sp-6);color:var(--fg-2);height:100%}
.wf-empty b{font-size:var(--fs-4);font-weight:600;color:var(--fg)}
.wf-empty p{margin:0 0 var(--sp-2);max-width:62ch}
.wf-trust{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-2);color:var(--fg-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r12);background:var(--warn-soft);box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 22%,transparent)}
.wf-trust svg{color:var(--warn);margin-top:2px}
.wf-trust b{color:var(--fg);font-weight:600}

/* overview: form on the left, static graph on the right */
.wf-over{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);min-height:0}
.wf-form{overflow:auto;padding:var(--sp-4) var(--sp-4) var(--sp-6) var(--sp-5);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-3)}
.wf-form h5,.wf-det h5{margin:0;font:600 var(--fs-1)/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);display:flex;align-items:center;gap:var(--sp-2)}
.wf-f{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.wf-f label,.wf-f .lb{font-size:var(--fs-2);font-weight:500;color:var(--fg);display:flex;align-items:baseline;gap:var(--sp-2)}
.wf-f label .req,.wf-f .lb .req{color:var(--signal);font-weight:600}
.wf-f label .tp,.wf-f .lb .tp{margin-left:auto;font:400 10px/14px var(--mono);color:var(--fg-3);letter-spacing:.04em}
.wf-f .hint{margin:0}
.wf-in{width:100%;min-width:0;height:30px;border:0;border-radius:var(--r8);box-shadow:0 0 0 1px var(--line-2);background:var(--bg);padding:0 var(--sp-2);font-size:var(--fs-3)}
textarea.wf-in{height:auto;padding:var(--sp-2);line-height:20px;resize:vertical;display:block;min-height:64px}
.wf-in.mono{font-family:var(--mono);font-size:var(--fs-2)}
.wf-in::placeholder{color:var(--fg-3)}
.wf-f.bad .wf-in,.wf-f.bad .dd{box-shadow:0 0 0 1.5px var(--err)}
.wf-f .err{color:var(--err);font-size:var(--fs-2)}
.wf-check{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-3);cursor:pointer}
.wf-check input{accent-color:var(--accent);width:14px;height:14px;margin:0}
.wf-runrow{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1)}
.wf-runrow .btn.primary{height:32px;padding:0 var(--sp-4)}
.wf-canvas{position:relative;min-height:0;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr)}

/* code */
.wf-code{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);min-height:0}
.wf-code.ro{grid-template-columns:minmax(0,1fr)}
.wf-ed{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0;border-right:1px solid var(--line)}
.wf-edbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);border-bottom:1px solid var(--line);min-height:40px;flex-wrap:wrap}
.wf-edbar .st{font-size:var(--fs-2);display:inline-flex;align-items:center;gap:var(--sp-1)}
.wf-edbar .st.ok{color:var(--ok)}.wf-edbar .st.bad{color:var(--err)}
.wf-edwrap{position:relative;overflow:auto;min-height:0;background:var(--bg);display:grid;grid-template-columns:44px minmax(0,1fr)}
.wf-gutter{font:400 var(--fs-2)/19px var(--mono);color:var(--fg-3);text-align:right;padding:var(--sp-3) var(--sp-2) var(--sp-6) 0;user-select:none;background:var(--bg-2);border-right:1px solid var(--line);min-height:100%}
.wf-gutter span{display:block;position:relative}
.wf-gutter span.e{color:var(--err);font-weight:600}
.wf-gutter span.e::before{content:"";position:absolute;left:6px;top:6px;width:7px;height:7px;border-radius:var(--r-full);background:var(--err)}
.wf-gutter span.w::before{content:"";position:absolute;left:6px;top:6px;width:7px;height:7px;border-radius:var(--r-full);background:var(--warn)}
.wf-lay{position:relative;min-width:0}
.wf-lay pre,.wf-lay textarea{margin:0;padding:var(--sp-3) var(--sp-4) var(--sp-6);font:400 var(--fs-2)/19px var(--mono);font-variant-ligatures:none;white-space:pre;tab-size:4;border:0;letter-spacing:0;word-break:normal;overflow-wrap:normal}
.wf-lay pre{pointer-events:none;min-height:100%;overflow:visible}
.wf-lay pre .ln{display:block;min-height:19px}
.wf-lay pre .ln.e{background:var(--err-soft);box-shadow:inset 2px 0 0 var(--err)}
.wf-lay pre .ln.w{background:var(--warn-soft)}
.wf-lay pre .msg{display:block;white-space:normal;font:400 var(--fs-2)/17px var(--font);color:var(--err);background:var(--err-soft);padding:2px var(--sp-2) 4px var(--sp-4);box-shadow:inset 2px 0 0 var(--err);margin:0 0 0 calc(-1 * var(--sp-4));padding-left:calc(var(--sp-4) + var(--sp-4))}
.wf-lay pre .msg.w{color:var(--warn);background:var(--warn-soft);box-shadow:none}
.wf-lay textarea{position:absolute;inset:0;width:100%;height:100%;resize:none;background:transparent;color:transparent;caret-color:var(--fg);outline:0;overflow:hidden}
.wf-lay textarea::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:transparent}
.py-k{color:var(--accent-deep);font-weight:500}.py-s{color:var(--role-ctx)}.py-c{color:var(--fg-3);font-style:italic}.py-n{color:var(--role-tool)}
.py-a{color:var(--wf-agent-fg);font-weight:600}.py-d{color:var(--role-user)}
.wf-errs{border-top:1px solid var(--line);max-height:132px;overflow:auto;background:var(--bg)}
.wf-errs button{display:flex;gap:var(--sp-2);align-items:baseline;width:100%;text-align:left;padding:var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-5);border-radius:0;font-size:var(--fs-2)}
.wf-errs button:hover{background:var(--bg-3)}
.wf-errs .l{font-family:var(--mono);color:var(--err);flex:none;min-width:52px}
.wf-errs .w .l{color:var(--warn)}
.wf-side2{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0}
.wf-side2 .cap{padding:0 var(--sp-4);border-bottom:1px solid var(--line);min-height:40px;display:flex;align-items:center;gap:var(--sp-2);font:600 var(--fs-1)/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.wf-side2 .cap .hint{letter-spacing:0;text-transform:none;font-family:var(--font);font-weight:400}

/* runs table */
.wf-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.wf-tbl th{text-align:left;font:600 var(--fs-1)/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);white-space:nowrap}
.wf-tbl td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line-soft);vertical-align:top}
.wf-tbl tbody tr{cursor:pointer}.wf-tbl tbody tr:hover{background:var(--bg-2)}
.wf-tbl .p{color:var(--fg-2);max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-bar{display:flex;height:6px;border-radius:var(--r4);overflow:hidden;background:var(--bg-3);width:120px;gap:1px}
.wf-bar i{display:block}.wf-bar .d{background:var(--ok)}.wf-bar .r{background:var(--accent)}.wf-bar .w{background:var(--warn)}.wf-bar .f{background:var(--signal)}.wf-bar .s{background:var(--line-2)}

/* run page: graph + inspector */
.wf-run{display:grid;grid-template-columns:minmax(0,1fr) 352px;min-height:0}
.wf-run .wf-canvas{border-right:1px solid var(--line)}
.wf-det{overflow:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;font-size:var(--fs-2);background:var(--bg)}
.wf-det>*{flex:none}
.wf-det .r{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.wf-det .r b{font-size:var(--fs-4);font-weight:600;min-width:0;overflow-wrap:anywhere;flex:1}
.wf-kv{display:grid;grid-template-columns:minmax(72px,max-content) minmax(0,1fr);gap:var(--sp-1) var(--sp-3);font-size:var(--fs-2)}
.wf-kv>span:nth-child(odd){color:var(--fg-3)}
.wf-kv>span:nth-child(even){overflow-wrap:anywhere;min-width:0}
.wf-det pre.codeblock{margin:0;max-height:240px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-1);line-height:17px}
.wf-det .out{max-height:420px;overflow:auto;border-radius:var(--r12);box-shadow:var(--sh-1);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2)}
.wf-det .out>:first-child{margin-top:0}.wf-det .out>:last-child{margin-bottom:0}
.wf-det .out table{font-size:var(--fs-1)}
.wf-det .acts{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.wf-ask{border-radius:var(--r12);background:var(--warn-soft);box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 30%,transparent);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
.wf-ask .q{font-weight:600;color:var(--fg);font-size:var(--fs-3)}
.wf-ask pre{margin:0;white-space:pre-wrap;font-size:var(--fs-1);color:var(--fg-2);max-height:160px;overflow:auto}
.wf-ask .wf-in{background:var(--bg)}
.wf-ev{display:flex;flex-direction:column}
.wf-ev .e{display:grid;grid-template-columns:58px 14px minmax(0,1fr);gap:var(--sp-2);padding:3px 0;align-items:baseline;font-size:var(--fs-1);color:var(--fg-2);border-radius:var(--r4);text-align:left;width:100%}
.wf-ev button.e:hover{background:var(--bg-2)}
.wf-ev .t{font-family:var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.wf-ev .g{text-align:center}
.wf-ev .g.ok{color:var(--ok)}.wf-ev .g.run{color:var(--accent)}.wf-ev .g.bad{color:var(--signal)}.wf-ev .g.wait{color:var(--warn)}
.wf-ev .x{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-ev .x b{font-weight:500;color:var(--fg)}
.wf-phases{display:flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap}
.wf-phases .ph{font:500 var(--fs-1)/18px var(--mono);padding:0 var(--sp-2);border-radius:var(--r-full);background:var(--bg-3);color:var(--fg-3)}
.wf-phases .ph.on{background:var(--accent-soft);color:var(--accent-deep)}
.wf-phases .ph.done{background:var(--ok-soft);color:var(--ok)}
.wf-phases .sep{color:var(--line-2)}

/* chat: the card of a run_workflow call, and the side-pane tab */
.wf-chat{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-1) 0}
.wf-chat .ln{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-2)}
.wf-chat .ln b{font-weight:600}
.wf-pane{display:flex;flex-direction:column;flex:1;min-height:0;height:100%}
.wf-pane>.hd{flex:none}
.wf-pane #wfp-graph{flex:1;min-height:120px}
.wf-pane>.wf-det{flex:none;overflow:auto}
.wf-pane .hd{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);min-width:0}
.wf-pane .hd b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wf-pane .wf-leg{padding:var(--sp-1) var(--sp-3);min-height:26px;gap:var(--sp-2)}
.wf-pane .wf-det{border-top:1px solid var(--line);max-height:46%;padding:var(--sp-3)}
.pbody.wf-flush{padding:0!important;overflow:hidden!important}
.pbody.wf-flush #pn-main{height:100%}

@media (max-width:1180px){.wf-run{grid-template-columns:minmax(0,1fr) 320px}.wf-over{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.wfn.st-running::after{display:none}}
.wf-tbl td.num{white-space:nowrap}

/* ================= workflows written by the agent (workflow_author.js): the side-pane tab and the chat cards ================= */
.wfa{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;min-width:0}
.wfa-pick{flex:none;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line)}
.wfa-pick[hidden]{display:none}
.wfa-body{flex:1;min-height:0;min-width:0;overflow:auto;display:flex;flex-direction:column}
.wfa-body.run{overflow:hidden}
.wfa-body>*{flex:none}
.wfa-info{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);min-width:0}
.wfa-info .r1{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.wfa-info .nm{font-size:var(--fs-4);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfa-info .r1 .pill{flex:none}.wfa-info .r1 .grow{flex:1;min-width:0}
.wfa-info .r1 .btn svg.i{width:12px;height:12px;margin-right:var(--sp-1)}
.wfa-info .r2{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--sp-2);font-size:var(--fs-1);color:var(--fg-3);min-width:0}
.wfa-info .r2 .mono{color:var(--fg-2);overflow-wrap:anywhere}.wfa-info .r2 .dot{color:var(--line-2)}
.wfa-ver{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-2);min-width:0}
.wfa-ver b{font-weight:500;white-space:nowrap}
.wfa-ver .icon-btn{width:22px;height:22px}.wfa-ver .icon-btn[disabled]{opacity:.35;cursor:default}
.wfa-ver .dots{display:flex;align-items:center;gap:var(--sp-1);margin-left:var(--sp-2);flex-wrap:wrap}
.wfa-ver .dots button{width:8px;height:8px;border-radius:var(--r-full);background:var(--line-2);padding:0}
.wfa-ver .dots button.ok{background:var(--ok)}.wfa-ver .dots button.err{background:var(--err)}.wfa-ver .dots button.acc{background:var(--accent)}.wfa-ver .dots button.warn{background:var(--warn)}
.wfa-ver .dots button.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--fg-2)}
.wfa-params{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);min-width:0;font-size:var(--fs-1)}
.wfa-params .k{color:var(--fg-3);margin-right:var(--sp-1)}
.wfa-param{display:inline-flex;align-items:baseline;gap:var(--sp-1);padding:1px var(--sp-2);border-radius:var(--r-full);background:var(--bg-3);max-width:100%}
.wfa-param b{font:500 var(--fs-1)/16px var(--mono);color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wfa-param i{font-style:normal;color:var(--fg-3);white-space:nowrap}
.wfa-note{font-size:var(--fs-2);line-height:1.45;color:var(--fg-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r8);background:var(--bg-2)}
.wfa-note.warn{background:var(--warn-soft);color:var(--fg)}.wfa-note.err{background:var(--err-soft);color:var(--err)}
.wfa-runs{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.wfa-runs .btn{color:var(--accent-deep)}.wfa-runs .btn svg.i{width:12px;height:12px;margin-right:var(--sp-1)}
.wfa-g{height:230px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.wfa-graph{width:100%;height:100%}
.wfa-main{min-width:0;display:flex;flex-direction:column}
.wfa-sbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);min-height:36px;min-width:0;position:sticky;top:0;z-index:2;background:var(--bg)}
.wfa-sbar h5{margin:0;font:600 var(--fs-1)/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.wfa-sbar .seg+h5,.wfa-sbar h5:has(+.seg){display:none}
.wfa-sbar .grow{flex:1;min-width:0}.wfa-sbar .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wfa-sbar .icon-btn{width:24px;height:24px;flex:none}
.wfa-pm{display:inline-flex;gap:var(--sp-1);font:500 var(--fs-1)/16px var(--mono);flex:none}
.wfa-pm .pa{color:var(--ok);font-weight:500}.wfa-pm .pd{color:var(--err);font-weight:500}
.wfa-none{padding:var(--sp-4) var(--sp-3);font-size:var(--fs-2);color:var(--fg-3)}

/* source with line numbers; the same block shows a diff, and sits in the chat cards and the approval card (.box) */
.wfa-code{overflow-x:auto;min-width:0;font:400 var(--fs-2)/19px var(--mono);font-variant-ligatures:none;tab-size:4;background:var(--bg-2);border-top:1px solid var(--line)}
.wfa-code .in{min-width:max-content;padding:var(--sp-1) 0 var(--sp-3)}
.wfa-code .l{display:flex;min-height:19px}
.wfa-code .l>i{position:sticky;left:0;z-index:1;flex:none;width:36px;padding-right:var(--sp-2);text-align:right;font-style:normal;color:var(--fg-3);background:var(--bg-2);user-select:none;font-variant-numeric:tabular-nums}
.wfa-code .l>b{flex:none;width:14px;text-align:center;font-weight:400;color:var(--fg-3);user-select:none}
.wfa-code .l>span{white-space:pre;padding:0 var(--sp-4) 0 var(--sp-2)}
.wfa-code.diff .l>span{padding-left:2px}
.wfa-code .l.e{background:var(--err-soft)}.wfa-code .l.e>i{background:var(--err-soft);color:var(--err);box-shadow:inset 2px 0 0 var(--err)}
.wfa-code .l.w{background:var(--warn-soft)}.wfa-code .l.w>i{background:var(--warn-soft);color:var(--warn)}
.wfa-code .m{display:flex;background:var(--err-soft)}
.wfa-code .m span{position:sticky;left:44px;display:block;max-width:min(560px,calc(var(--pane,336px) - 72px));white-space:pre-wrap;overflow-wrap:anywhere;font:400 var(--fs-1)/16px var(--font);color:var(--err);padding:1px var(--sp-2) 3px 0}
.wfa-code .m.w{background:var(--warn-soft)}.wfa-code .m.w span{color:var(--warn)}
.wfa-code .l.add{background:color-mix(in srgb,var(--ok) 11%,transparent)}.wfa-code .l.add>i{background:color-mix(in srgb,var(--ok) 11%,var(--bg-2))}.wfa-code .l.add>b{color:var(--ok)}
.wfa-code .l.del{background:color-mix(in srgb,var(--err) 9%,transparent)}.wfa-code .l.del>i{background:color-mix(in srgb,var(--err) 9%,var(--bg-2))}.wfa-code .l.del>b{color:var(--err)}
.wfa-code .l.del>span{opacity:.75}
.wfa-code .gap{position:sticky;left:0;width:max-content;padding:2px var(--sp-3) 2px 44px;font:400 var(--fs-1)/16px var(--font);color:var(--fg-3)}
.wfa-code .l.flash,.wfa-code .l.flash>i{background:var(--accent-soft);transition:background .2s}
.wfa-code.box{border:0;border-radius:var(--r8);max-height:260px;overflow:auto}
.wfa-code.box .in{padding:var(--sp-1) 0}
.wfa-code.box.ask{max-height:min(300px,34vh);border-radius:var(--r12);margin-top:6px}
.wfa-askkv .grow{flex:1}
.wfa-errs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.wfa-errs button,.wfa-errs>div{display:flex;gap:var(--sp-2);align-items:baseline;width:100%;text-align:left;padding:var(--sp-1) var(--sp-3);border-radius:0;font-size:var(--fs-2);line-height:1.45;min-width:0}
.wfa-errs button:hover{background:var(--bg-3)}
.wfa-errs .l{font-family:var(--mono);font-size:var(--fs-1);color:var(--err);flex:none;min-width:48px}
.wfa-errs span+span{min-width:0;overflow-wrap:anywhere}
.wfa-errs.card{border:0;border-radius:var(--r8);background:var(--err-soft);padding:var(--sp-1) 0}
.wfa-errs.card.warn{background:var(--warn-soft)}.wfa-errs.card.warn .l{color:var(--warn)}
.wfa-card .hq-line b{font-weight:600;color:var(--fg)}
.wfa-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;counter-reset:wfa}
.wfa-steps li{display:flex;align-items:baseline;gap:var(--sp-2);font-size:var(--fs-2);min-width:0;counter-increment:wfa}
.wfa-steps li::before{content:counter(wfa);font:500 var(--fs-1)/16px var(--mono);color:var(--fg-3);min-width:14px;text-align:right}
.wfa-steps .wf-ty{font:600 10px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 var(--sp-1);border-radius:var(--r4);flex:none}
.wfa-steps li span:last-child{min-width:0;overflow-wrap:anywhere}

/* a wide pane (expanded, or dragged out): the graph takes the left column for the full height, the rest scrolls on the right */
.wfa-body[data-w="wide"]:not(.run){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.wfa-body[data-w="wide"]:not(.run) .wfa-g{grid-column:1;grid-row:1/3;height:auto;border:0;border-right:1px solid var(--line)}
.wfa-body[data-w="wide"]:not(.run) .wfa-info{grid-column:2;grid-row:1;border-bottom:1px solid var(--line)}
.wfa-body[data-w="wide"]:not(.run) .wfa-main{grid-column:2;grid-row:2;overflow:auto}
.wfa-body[data-w="wide"]:not(.run) .wfa-code{border-top:0}
.wfa-body[data-w="wide"]:not(.run) .wfa-code .m span{max-width:min(560px,calc(var(--pane,336px) * .5 - 72px))}
.wfa-sbar .seg{flex:none}.wfa-sbar .seg button{white-space:nowrap}
/* a run in the tab: the live graph, and above it the bar of a one-off run (source, "Save as workflow") */
.wfa-body.run{display:flex;flex-direction:column}
.wfa-body.run>.wfa-runhost{flex:1;min-height:0;display:flex;flex-direction:column}
.wfa-once{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;max-height:55%}
.wfa-once[hidden]{display:none}
.wfa-once .r{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}.wfa-once .r .grow{flex:1}
.wfa-once .hint{min-width:0;overflow-wrap:anywhere}
.wfa-once .btn.on{background:var(--bg-3);color:var(--fg)}
.wfa-code.box.once{max-height:none;min-height:0;flex:1}