/* Workflow canvas (dark, dotted, like a node editor) */
/* canvas */
.flow { --fbg: #17161F; --fnode: #2A2933; --fline: #8E8D9A; --ftext: #ECECF1; --fmuted: #A3A2AF; --fborder: #4B4A57;
  position: relative; height: 480px; border-radius: var(--r-md); overflow: hidden; background-color: var(--fbg);
  background-image: radial-gradient(circle, #34333F 1px, transparent 1.3px); background-size: 22px 22px;
  user-select: none; touch-action: none; cursor: grab; outline: none; color: var(--ftext); }
.flow:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.flow:active { cursor: grabbing; }
.flow.tall { height: calc(100vh - 230px); min-height: 460px; }
.flow.short { height: 360px; }
.flow-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.flow-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; color: var(--fline); }
.flow-edges .fe-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.fe-p { fill: none; stroke: var(--fline); stroke-width: 2; }
.fe-p.sub { stroke-dasharray: 5 5; stroke-width: 1.6; }
.fe-p.back { stroke-dasharray: 6 6; }
.fe-p.on { stroke: #5BD18B; color: #5BD18B; }
.fe-p.skip { opacity: .25; }
.fe-p.sel { stroke: #9AA3FF; stroke-width: 3; }
.flow-temp { fill: none; stroke: #9AA3FF; stroke-width: 2; stroke-dasharray: 4 4; }

.fn { position: absolute; cursor: pointer; }
.fn.dragging { cursor: grabbing; z-index: 5; }
.fn-box { position: absolute; inset: 0; background: var(--fnode); border: 2px solid var(--fborder); border-radius: 14px; display: grid; place-items: center; transition: border-color .15s, box-shadow .15s; }
.fn:hover .fn-box { border-color: #6A6977; }
.fn.sel .fn-box { border-color: #9AA3FF; box-shadow: 0 0 0 4px rgba(154,163,255,.25); }
.fn-trigger .fn-box { border-radius: 46px 14px 14px 46px; }
.fn-circle .fn-box, .fn-end .fn-box { border-radius: 50%; }
.fn-ic .ic { width: 38px; height: 38px; }
.fn-circle .fn-ic .ic, .fn-end .fn-ic .ic { width: 30px; height: 30px; }
.fn-mono { width: 40px; height: 40px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.fn-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 170px; margin-top: 10px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ftext); pointer-events: none; }
.fn-label small { display: block; font-weight: 400; color: var(--fmuted); font-size: 12px; margin-top: 2px; }
.fn-bolt { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); color: #E0703C; }
.fn-bolt .ic { width: 18px; height: 18px; }
/* agent */
.fn-agent .fn-box { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 0 20px; border-radius: 12px; }
.fn-agent .fn-ic .ic { width: 34px; height: 34px; color: #fff; }
.fn-tt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fn-tt b { font-size: 16px; font-weight: 600; }
.fn-tt small { color: var(--fmuted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ports */
.fp { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #9C9BA8; border: 2px solid var(--fbg); z-index: 2; }
.fp.in { left: -7px; top: 50%; transform: translateY(-50%); border-radius: 2px 6px 6px 2px; width: 9px; height: 16px; }
.fp.out { right: -7px; transform: translateY(-50%); }
.fp.slot, .fp.top { width: 12px; height: 12px; border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
.fp.slot { top: 100%; }
.fp.top { left: 50%; top: 0; }
.fp-l { position: absolute; left: calc(100% + 12px); transform: translateY(-50%); font-size: 12.5px; color: var(--ftext); white-space: nowrap; pointer-events: none; }
.fp-sl { position: absolute; top: calc(100% + 10px); transform: translateX(-50%); font-size: 12px; color: var(--fmuted); white-space: nowrap; pointer-events: none; }
.flow.edit .fp.out, .flow.edit .fp.top { cursor: crosshair; }
.flow.edit .fp.out:hover, .flow.edit .fp.top:hover { background: #9AA3FF; }
/* states */
.fn-badge { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--fbg); font-size: 12px; font-weight: 700; color: #10140F; }
.fn-badge .ic { width: 13px; height: 13px; stroke-width: 3; }
.fn-badge.ok { background: #5BD18B; }
.fn-badge.bad { background: #F08A7A; }
.fn-badge.now { background: #F2B84B; animation: fpulse 1.4s ease-in-out infinite; }
@keyframes fpulse { 50% { box-shadow: 0 0 0 6px rgba(242,184,75,.25); } }
@media (prefers-reduced-motion: reduce) { .fn-badge.now { animation: none; } }
.fn.st-done .fn-box { border-color: #3E8F63; }
.fn.st-current .fn-box { border-color: #F2B84B; box-shadow: 0 0 0 4px rgba(242,184,75,.18); }
.fn.st-blocked .fn-box { border-color: #F08A7A; }
.fn.st-skip, .fn.dim { opacity: .38; }
.fn.st-wait .fn-box { border-style: dashed; }
/* overlay controls */
.flow-tools { position: absolute; right: 12px; top: 12px; display: flex; gap: 4px; z-index: 5; }
.flow-tools button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #3A3946; background: #24232D; color: var(--ftext); cursor: pointer; display: grid; place-items: center; font-size: 17px; }
.flow-tools button:hover { background: #2F2E3A; }
.flow-tools .ic { width: 16px; height: 16px; }
.flow-hint { position: absolute; left: 14px; bottom: 14px; font-size: 12px; color: var(--fmuted); pointer-events: none; z-index: 4; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* side panel next to a canvas */
.flow-wrap { display: grid; grid-template-columns: 1fr; gap: 10px; }
.flow-wrap.no-side { grid-template-columns: 1fr; }
@media (max-width: 980px) { .flow-wrap { grid-template-columns: 1fr; } }
.flow-side { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; min-height: 120px; }
.flow-side h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.flow-side .steps li { padding-left: 32px; font-size: 13.5px; }
.flow-side .empty { padding: 20px 4px; text-align: left; }
.palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.palette button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 12px 6px 8px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.palette button:hover { border-color: var(--accent); color: var(--accent); }
.palette .ic { width: 16px; height: 16px; }
.palette .pdot { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #2A2933; }

/* builder layout */
.builder { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .builder { grid-template-columns: 1fr; } }
.builder-chat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 460px; }
.builder-chat .ai-msgs { border-radius: var(--r-md) var(--r-md) 0 0; }
.match-card { background: var(--accent-wash); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.match-card .row { margin-top: 8px; }
/* bigger grab area than the visible dot */
.fp::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.fp.in::after { inset: -9px -12px; }