/* Fluxo de agentes estilo n8n — animado, ao vivo. Sem dependências. */
.flow-group{--fg-surface:var(--surface,#fff);--fg-line:var(--line,#e3e7ec);--fg-ink:var(--ink,#242a32);--fg-muted:var(--muted,#646e7b);--fg-grid:color-mix(in srgb,var(--fg-ink) 9%,transparent);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  max-width:880px;margin:0 auto 22px;border:1px solid var(--fg-line);border-radius:12px;background:var(--fg-surface);overflow:hidden;
  animation:flow-in .42s var(--ease-out) both;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.flow-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--fg-line);font-size:12px;color:var(--fg-muted)}
.flow-title{display:flex;align-items:center;gap:8px;color:var(--fg-ink)}
.flow-title strong{font-weight:600;letter-spacing:-.01em}
.flow-pulse{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5)}
.flow-group.is-live .flow-pulse{background:#f59e0b;animation:flow-ping 1.4s ease-out infinite}
.flow-group.has-failed:not(.is-live) .flow-pulse{background:#dc2626}
.flow-bar{flex:1;height:3px;border-radius:3px;background:var(--fg-line);overflow:hidden}
.flow-bar-fill{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#6366f1);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease-out)}
.flow-count{font:11px/1 var(--mono,ui-monospace,monospace);white-space:nowrap}
.flow-canvas{position:relative;display:flex;align-items:center;gap:0;padding:22px 18px 24px;overflow-x:auto;scrollbar-width:thin;
  background-image:radial-gradient(var(--fg-grid) 1px,transparent 1px);background-size:16px 16px;animation:flow-grid 40s linear infinite}
.flow-canvas:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}
.flow-node{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:9px;min-width:150px;max-width:220px;padding:9px 30px 9px 9px;
  border:1px solid var(--fg-line);border-radius:10px;background:var(--fg-surface);color:var(--fg-ink);text-align:left;font:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px -8px rgba(0,0,0,.18);
  animation:flow-node-in .5s var(--ease-spring) both;animation-delay:calc(var(--i,0) * 45ms);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s}
button.flow-node{cursor:pointer}
button.flow-node:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 10px 22px -10px rgba(0,0,0,.28)}
button.flow-node:active{transform:translateY(0) scale(.98)}
button.flow-node:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.flow-node.is-selected{border-color:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 22%,transparent)}
.flow-node::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--fg-surface);border:1.5px solid var(--fg-line)}
.flow-node::after{content:"";position:absolute;right:-5px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--fg-surface);border:1.5px solid var(--fg-line)}
.flow-trigger{min-width:128px;padding-right:12px;border-style:dashed}
.flow-trigger::before{display:none}
.flow-icon{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--tone,#6366f1) 14%,transparent);color:var(--tone,#6366f1)}
.flow-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.flow-text b{font-size:12px;font-weight:600}
.flow-text small{font-size:10.5px;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-family:var(--mono,ui-monospace,monospace)}
.flow-badge{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:700;color:#fff;background:#16a34a;
  animation:flow-pop .4s var(--ease-spring) both}
.flow-node.is-running .flow-badge{background:transparent;border:2px solid color-mix(in srgb,var(--tone) 30%,transparent);border-top-color:var(--tone);animation:flow-spin .8s linear infinite}
.flow-node.is-failed .flow-badge{background:#dc2626}
.flow-node.is-running{border-color:color-mix(in srgb,var(--tone) 55%,var(--fg-line));animation:flow-node-in .5s var(--ease-spring) both,flow-glow 1.8s ease-in-out infinite .5s}
.flow-node.is-failed{border-color:#fca5a5}
.flow-edge{position:relative;flex:0 0 38px;height:2px;background:var(--fg-line);animation:flow-edge-in .35s var(--ease-out) both}
.flow-edge::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left:6px solid var(--fg-line);border-right:0}
.flow-edge.is-active{background:repeating-linear-gradient(90deg,#6366f1 0 6px,transparent 6px 11px);background-size:22px 2px;animation:flow-edge-in .35s var(--ease-out) both,flow-dash .6s linear infinite}
.flow-edge.is-active::after{border-left-color:#6366f1}
.flow-detail{border-top:1px solid var(--fg-line);padding:12px 16px 14px;animation:flow-in .28s var(--ease-out) both}
.flow-detail-head{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:12px;color:var(--fg-ink);margin-bottom:8px}
.flow-pre{margin:0;font:11px/1.65 var(--mono,ui-monospace,monospace);white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto;color:var(--fg-muted)}
.flow-chip{font-size:10px;padding:2px 8px;border-radius:99px;background:#dcfce7;color:#166534;white-space:nowrap}
.flow-chip.is-running{background:#fef3c7;color:#92400e}.flow-chip.is-failed{background:#fee2e2;color:#991b1b}
/* tons por agente */
.tone-cmd{--tone:#0ea5e9}.tone-think{--tone:#8b5cf6}.tone-tool{--tone:#f97316}.tone-web{--tone:#10b981}.tone-file{--tone:#e11d48}.tone-plan{--tone:#64748b}.tone-agent{--tone:#d946ef}
.flow-trigger{--tone:#16a34a}
/* temas escuros */
html[data-theme="pro-dark"] .flow-group{--fg-grid:rgba(255,255,255,.07)}
html[data-theme="pro-dark"] .flow-chip{background:rgba(22,163,74,.18);color:#86efac}
html[data-theme="pro-dark"] .flow-chip.is-running{background:rgba(245,158,11,.18);color:#fcd34d}
html[data-theme="pro-dark"] .flow-chip.is-failed{background:rgba(220,38,38,.2);color:#fca5a5}
@keyframes flow-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes flow-node-in{from{opacity:0;transform:translateX(-14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes flow-edge-in{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@keyframes flow-dash{to{background-position:22px 0}}
@keyframes flow-spin{to{transform:rotate(360deg)}}
@keyframes flow-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes flow-ping{0%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}80%,100%{box-shadow:0 0 0 7px rgba(245,158,11,0)}}
@keyframes flow-glow{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 0 color-mix(in srgb,var(--tone) 0%,transparent)}50%{box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 5px color-mix(in srgb,var(--tone) 16%,transparent)}}
@keyframes flow-grid{to{background-position:160px 0}}
@media (max-width:600px){.flow-canvas{padding:16px 12px 18px}.flow-node{min-width:132px}.flow-edge{flex-basis:24px}.flow-bar{display:none}}
@media (prefers-reduced-motion:reduce){.flow-group,.flow-node,.flow-edge,.flow-detail,.flow-badge,.flow-canvas,.flow-bar-fill{animation:none!important;transition:none!important}
  .flow-node.is-running .flow-badge{border-top-color:var(--tone)}.flow-edge.is-active{background:#6366f1}}