.workflow-head{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:24px}.workflow-head h1{font-size:clamp(25px,3vw,38px);letter-spacing:-1px;margin:8px 0}.workflow-head p{color:var(--muted);max-width:64ch;line-height:1.6}.workflow-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.workflow-toolbar .btn,.workflow-estimate .btn,.workflow-history .btn{width:auto;min-height:44px}.workflow-toolbar select{width:auto;min-width:160px;flex:0 1 220px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit}.workflow-connections{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.workflow-link{font-size:12px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);color:var(--text);background:var(--panel)}.workflow-link.image{border-inline-start:3px solid var(--accent)}.workflow-link.text{border-inline-start:3px solid var(--muted)}.workflow-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.workflow-node{min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 5px 20px #0001;overflow:hidden}.workflow-node>header{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--line);font-size:14px}.workflow-number{display:grid;place-items:center;border-radius:8px;width:30px;height:30px;background:var(--accent);color:var(--on-accent);font-weight:700;flex-shrink:0}.workflow-remove{margin-inline-start:auto;background:transparent;color:var(--muted);font:inherit;font-size:22px;min-height:44px;min-width:44px;border:0;border-radius:9px;cursor:pointer}.workflow-node>label{display:grid;gap:8px;font-size:13px;font-weight:500;padding:14px 16px 0;margin:0}.workflow-node textarea,.workflow-node select,.workflow-node input{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;line-height:1.6}.workflow-node textarea{resize:vertical}.workflow-node>footer{margin-top:16px;padding:12px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.workflow-node .provider-picker{margin:8px 16px}.workflow-estimate{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.workflow-estimate>div{display:grid;gap:6px;flex:1;min-width:220px}.workflow-estimate span,.workflow-estimate small{font-size:13px;color:var(--muted)}.workflow-estimate strong{font-size:20px}.workflow-results{display:grid;gap:16px;margin:24px 0}.workflow-results:empty{display:none}.workflow-results h2{font-size:18px}.workflow-result{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow-wrap:anywhere}.workflow-result h3{font-size:14px;margin:0 0 14px;color:var(--muted)}.workflow-result img,.workflow-result video{max-height:440px;object-fit:contain}.workflow-history{margin-top:30px;padding:18px;border:1px solid var(--line);border-radius:14px}.workflow-history summary{cursor:pointer;font-weight:600;margin-bottom:14px}.workflow-history .btn{margin:6px}.workflow-node :focus-visible{outline:2px solid var(--accent);outline-offset:2px}.workflow-node :disabled{opacity:.5}.workflow-number~strong{overflow-wrap:anywhere}@media(max-width:1200px){.workflow-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.workflow-nodes{grid-template-columns:1fr}.workflow-head{flex-wrap:wrap}.workflow-toolbar{gap:8px}.workflow-estimate{padding:16px}.workflow-estimate .btn{flex:1}.workflow-node input,.workflow-node select,.workflow-node textarea{font-size:16px}}
.workflow-ports{margin:20px 16px 0;padding:12px;border:1px solid var(--line);border-radius:12px;min-width:0}.workflow-ports legend{padding:0 6px;font-size:13px;font-weight:650}.workflow-ports p{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 10px}.workflow-ports label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;cursor:pointer}.workflow-ports input[type=checkbox]{width:18px;height:18px;min-height:18px;flex:0 0 18px;accent-color:var(--accent)}.workflow-output-ports{display:grid;gap:8px}.workflow-output-ports>div{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:9px;padding-inline-start:12px;color:var(--text);background:var(--surface-2)}.workflow-output-ports button{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--accent);font-size:22px;cursor:pointer;border-radius:8px}.workflow-output-ports button:hover{background:var(--panel)}.workflow-prompt-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}.workflow-prompt-results section{padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}.workflow-prompt-results h4{font-size:13px;color:var(--accent);margin:0 0 10px}.workflow-prompt-results p{font-size:14px;line-height:1.7;white-space:pre-wrap;margin:0}.workflow-node:has(.workflow-ports){border-color:var(--accent)}
.workflow-ports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}.workflow-ports p{grid-column:1/-1}.workflow-ports label{overflow-wrap:anywhere}
/* Activity reports the last server state; elapsed time is not a completion estimate. */
.workflow-source-hint{margin:14px 16px;padding:12px;border:1px solid var(--accent);border-radius:10px;background:var(--surface-2);font-size:13px;line-height:1.6}.workflow-source-hint p{margin:0 0 8px}.workflow-source-hint button{min-height:44px;width:100%;white-space:normal}.workflow-sent-prompt{margin-block:12px;font-size:13px}.workflow-sent-prompt summary{cursor:pointer;min-height:44px;align-content:center}.workflow-sent-prompt pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.6;padding:12px;background:var(--surface-2);border-radius:10px}
.workflow-estimate.is-running { border-color: var(--accent); }
.workflow-estimate.is-running #workflowState,
.workflow-result[data-status="running"] h3 { display: flex; align-items: center; gap: 10px; }
.workflow-estimate.is-running #workflowState::before,
.workflow-result[data-status="running"] h3::before {
  content: ""; display: inline-block; flex: 0 0 16px; width: 16px; height: 16px;
  border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: workflow-spin .9s linear infinite;
}
.workflow-result[data-status="running"] { border-inline-start: 3px solid var(--accent); }
.workflow-activity { display: grid; gap: 9px; margin-top: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.workflow-activity[hidden] { display: none; }
.workflow-activity #workflowStep { color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
.workflow-activity-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-variant-numeric: tabular-nums; }
.workflow-activity-meta > span { font-size: 12px; line-height: 1.5; }
.workflow-activity[data-connection="checking"] #workflowHeartbeat { color: var(--text); font-weight: 600; }
@keyframes workflow-spin { to { transform: rotate(360deg); } }
@media (max-width: 680px) {
  .workflow-estimate > div { flex-basis: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-estimate.is-running #workflowState::before,
  .workflow-result[data-status="running"] h3::before { animation: none; }
}

.workflow-llm-budget{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);line-height:1.6}.workflow-llm-budget input[type=range]{width:100%;min-height:44px;accent-color:var(--accent);padding:0}.workflow-llm-budget .hint{margin:0}.workflow-llm-budget small{color:var(--muted);font-size:12px}.workflow-llm-budget strong{font-variant-numeric:tabular-nums}

.workflow-recovery-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);margin-bottom:18px}.workflow-recovery-actions p{flex-basis:100%;margin:0}.workflow-recovery-actions .btn{width:auto;min-height:44px}

/* The estimate is a compact launch column beside the graph on wide screens. */
.workflow-launch-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,320px);gap:18px;align-items:start}
.workflow-launch-panel{position:sticky;top:calc(var(--top,64px) + 12px);display:grid;gap:10px;min-width:0}
.workflow-launch-panel .workflow-estimate{display:grid;align-items:stretch;gap:12px;margin-top:0;padding:18px}
.workflow-launch-panel .workflow-estimate>div{min-width:0}
.workflow-launch-panel .workflow-estimate>.btn{width:100%;margin:0}
.workflow-launch-panel>.hint{margin:0;padding-inline:4px;font-size:12px;line-height:1.5}
@media(max-width:1180px){
 .workflow-launch-layout{grid-template-columns:minmax(0,1fr)}
 .workflow-launch-panel{position:static}
 .workflow-launch-panel .workflow-estimate{grid-template-columns:minmax(220px,1fr) repeat(2,auto);align-items:center}
 .workflow-launch-panel .workflow-estimate>.btn{width:auto}
}
@media(max-width:680px){
 .workflow-launch-layout{gap:12px}
 .workflow-launch-panel .workflow-estimate{grid-template-columns:minmax(0,1fr)}
 .workflow-launch-panel .workflow-estimate>.btn{width:100%}
}
/* Imported assets retain their proportions inside the block inspector. */
.workflow-import-preview { display:block; max-width:100%; max-height:240px; object-fit:contain; border:1px solid var(--line); border-radius:12px; margin:12px auto; }
.workflow-node input[type="file"] { max-width:100%; font:inherit; }
.workflow-image-source { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
.workflow-image-source .btn { margin:0; width:auto; min-height:44px; padding:8px 12px; }
.workflow-result-context { margin:0; padding:14px 18px; border-inline-start:3px solid var(--accent); background:var(--surface-2); color:var(--text); line-height:1.6; }
.workflow-past-open { justify-self:start; width:auto; min-height:44px; }
.workflow-past-dialog { box-sizing:border-box; width:min(1040px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:24px; overflow:auto; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:18px; }
.workflow-past-dialog::backdrop { background:#0009; }
.workflow-past-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.workflow-past-dialog h2 { margin:0; font-size:20px; }
.workflow-past-dialog .btn { width:auto; min-height:44px; }
.workflow-past-dialog>header .btn { color:var(--text); background:var(--surface-2); border-color:var(--line); }
.workflow-past-dialog>label { display:grid; gap:8px; font-size:14px; color:var(--text); }
.workflow-past-dialog select { width:100%; min-width:0; min-height:44px; padding:10px; font:inherit; background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:10px; }
.workflow-past-dialog .workflow-result { min-width:0; }
.workflow-past-dialog img,.workflow-past-dialog video { max-width:100%; }
.workflow-past-dialog :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:680px){.workflow-past-dialog{padding:16px}.workflow-past-dialog select{font-size:16px}}