/* Flow workspace: reference-inspired white surfaces, legible ink and focused blue controls. */
.guide-view,.flow-preview-dialog,.flow-help-dialog {
  --flow-ink:#0b1c3b;--flow-body:#243653;--flow-muted:#65748b;--flow-line:#dce6f4;
  --flow-blue:#1769e8;--flow-blue-soft:#eef4ff;--flow-paper:#f5f8fd;
}
.guide-view {
  display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;
  padding:0;border:0;border-radius:0;background:transparent;color:var(--flow-body);overflow:auto;
}
.guide-view[hidden],.guide-layout.has-flow-map[hidden] { display:none!important; }
.flow-icon { display:block;width:20px;height:20px;flex:none;stroke-linecap:round;stroke-linejoin:round; }
.flow-control-label { display:block;min-width:0; }
.guide-toolbar {
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;flex-wrap:wrap;
  padding:13px 16px;background:#fff;border:1px solid var(--flow-line);border-radius:12px;
}
.guide-brand-field { display:flex;align-items:center;gap:10px;width:180px;min-width:160px; }
.guide-brand-field label { margin:0;font-size:12px;color:var(--flow-muted);white-space:nowrap; }
.guide-brand-field select { min-width:0;flex:1;width:100%;height:38px;border-color:var(--flow-line);border-radius:8px;background:#fff;color:var(--flow-body);font-size:13px; }
.guide-toolbar-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto; }
.guide-toolbar-actions .primary-button,.guide-toolbar-actions .outline-button,.guide-toolbar .flow-publish {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 12px;
  border:1px solid var(--flow-line);border-radius:8px;font:inherit;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;
}
.guide-toolbar .flow-save { background:#fff;border-color:var(--flow-line);color:var(--flow-body); }
.guide-toolbar .flow-save:hover { background:var(--flow-paper);border-color:#8aafea;color:var(--flow-blue); }
.guide-toolbar .flow-publish { background:var(--flow-blue);color:#fff;border-color:var(--flow-blue);cursor:pointer; }
.guide-toolbar .flow-publish:hover { background:#1058cb;border-color:#1058cb; }
.guide-toolbar .flow-publish:disabled { opacity:.45;cursor:default; }
.guide-toolbar .flow-icon { width:16px;height:16px; }
.guide-unsaved { display:flex;align-items:center;gap:6px;margin:0 4px 0 0;color:var(--flow-muted);font-size:12px;line-height:1.6; }
.guide-unsaved:before { content:'';width:5px;height:5px;border-radius:50%;background:#879bb8;flex:none; }
.guide-unsaved.dirty { color:#8b651f; }
.guide-unsaved.dirty:before { background:#b58a39; }
.guide-view-note { margin:9px 3px 11px;color:var(--flow-muted);font-size:12px;line-height:1.7; }
.guide-view>.error { margin:0 0 12px;flex:none; }
.flow-secondary-menu { position:relative;font-size:12px;color:var(--flow-body); }
.flow-secondary-menu>summary {
  display:flex;align-items:center;justify-content:center;gap:5px;min-height:38px;padding:8px 9px;
  border:1px solid transparent;border-radius:8px;cursor:pointer;list-style:none;white-space:nowrap;
}
.flow-secondary-menu>summary::-webkit-details-marker { display:none; }
.flow-secondary-menu>summary:hover,.flow-secondary-menu[open]>summary { background:var(--flow-paper);border-color:var(--flow-line); }
.flow-secondary-items {
  position:absolute;top:calc(100% + 8px);right:0;min-width:205px;z-index:30;padding:7px;
  border:1px solid var(--flow-line);border-radius:10px;background:#fff;box-shadow:0 12px 35px #0b1c3b0d;
}
.flow-secondary-menu:not([open])>.flow-secondary-items { display:none; }
.flow-secondary-items .outline-button { justify-content:flex-start;width:100%;min-height:38px;border:0;background:#fff;color:var(--flow-body);font-weight:500;padding:8px 10px; }
.flow-secondary-items .outline-button:hover { background:var(--flow-paper); }
.flow-revision { display:block;font-size:11px;color:var(--flow-muted);padding:9px 10px 4px;border-top:1px solid #e9eef6;margin-top:4px; }

/* A persistent customer preview stays beside the map; the inspector is optional. */
.guide-layout.has-flow-map {
  --flow-inspector-width:300px;--flow-preview-width:320px;
  display:grid;grid-template-columns:minmax(0,1fr) var(--flow-inspector-width) var(--flow-preview-width);
  grid-template-rows:minmax(0,1fr);gap:12px;flex:1;min-width:0;min-height:440px;height:auto;align-items:stretch;
}
.has-flow-map>#flow-map { grid-column:1;grid-row:1; }
.has-flow-map>.guide-editor-card { grid-column:2;grid-row:1; }
.has-flow-map>#flow-live-preview { grid-column:3;grid-row:1;align-self:start;min-width:0; }
.has-flow-map.inspector-collapsed>#flow-live-preview { grid-column:2; }
.guide-layout.has-flow-map.inspector-collapsed { grid-template-columns:minmax(0,1fr) var(--flow-preview-width); }
.has-flow-map>.guide-steps-card { display:none; }
.has-flow-map>.guide-editor-card {
  display:flex;flex-direction:column;max-height:100%;min-height:0;min-width:0;overflow:hidden;
  background:#fff;border:1px solid var(--flow-line);border-radius:12px;box-shadow:none;
}
.has-flow-map.inspector-collapsed>.guide-editor-card,.has-flow-map>.guide-editor-card[hidden] { display:none!important; }
.has-flow-map .guide-editor-heading { display:flex;align-items:center;gap:10px;padding:17px 17px 15px;border-bottom:1px solid #e9eef6;flex:none; }
.has-flow-map .guide-editor-heading>div { flex:1;min-width:0; }
.has-flow-map .guide-editor-heading h2 { font-size:15px;line-height:1.6;font-weight:650;color:var(--flow-ink); }
.has-flow-map .guide-editor-heading .subtle { color:var(--flow-muted);font-size:11px;line-height:1.7;margin-top:3px; }
.flow-inspector-close { display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:#fff;color:var(--flow-muted);cursor:pointer; }
.flow-inspector-close:hover { background:var(--flow-paper);color:var(--flow-blue); }
.flow-inspector-close .flow-icon { width:18px;height:18px; }
.has-flow-map .guide-fields { min-height:0;overflow:auto;padding:17px;scrollbar-width:thin;scrollbar-color:var(--flow-line) transparent; }
.flow-step-type { padding-bottom:16px;margin-bottom:17px;border-bottom:1px solid #e9eef6; }
.flow-step-type label,.flow-action-fields label,.has-flow-map .guide-fields>label { display:block;margin-bottom:8px;color:var(--flow-body);font-size:12px;font-weight:600; }
.flow-step-type select,.flow-action-fields select { display:block;width:100%;min-height:40px;padding:9px 11px;border:1px solid var(--flow-line);border-radius:8px;background:#fff;color:var(--flow-body);font:inherit;font-size:13px; }
.flow-type-description,.flow-step-note { margin-top:8px;color:var(--flow-muted);font-size:12px;line-height:1.8; }
.flow-action-fields { padding:0 0 18px; }
.has-flow-map .guide-fields>input,.has-flow-map .guide-fields>textarea,.has-flow-map .guide-button-fields input,.has-flow-map .guide-button-fields select,.has-flow-map .guide-global-settings input,.has-flow-map .guide-global-settings textarea {
  border:1px solid var(--flow-line);border-radius:8px;background:#fff;color:var(--flow-body);font-size:13px;padding:10px 11px;line-height:1.7;
}
.has-flow-map .guide-fields>input { height:41px;margin-bottom:21px; }
.has-flow-map .guide-fields>textarea { margin-bottom:20px;min-height:110px; }
.has-flow-map .guide-field-hint { color:var(--flow-muted);font-size:11px;line-height:1.7;margin-top:-15px; }
.has-flow-map .guide-button-heading { margin-bottom:13px; }
.has-flow-map .guide-button-heading h3 { color:var(--flow-body);font-size:13px;font-weight:600; }
.has-flow-map .guide-button-heading p { color:var(--flow-muted);font-size:11px;line-height:1.7; }
.has-flow-map .guide-button-card { padding:12px;background:#fff;border:1px solid var(--flow-line);border-radius:9px; }
.has-flow-map .guide-button-card-top { margin-bottom:12px; }
.has-flow-map .guide-button-index { color:var(--flow-muted);font-size:11px;font-weight:500; }
.has-flow-map .guide-button-actions button { min-height:25px;padding:3px 4px;color:#97666b;font-size:11px; }
.has-flow-map .guide-button-fields { grid-template-columns:1fr;gap:12px; }
.has-flow-map .guide-button-fields label { color:var(--flow-muted);font-size:12px;margin-bottom:6px; }
.has-flow-map .guide-fields>.outline-button { min-height:36px;padding:8px 12px;font-size:12px;color:var(--flow-body);border-color:var(--flow-line); }
.has-flow-map .guide-reachability { margin:15px 0 19px;color:var(--flow-muted);font-size:11px;line-height:1.8; }
.has-flow-map .guide-reachability.unreachable { padding:10px 11px;background:#fff8eb;color:#8b651f;border:1px solid #efdfbd;border-radius:8px; }
.has-flow-map .guide-global-settings { border-top:1px solid #e9eef6;margin-top:15px;padding-top:14px; }
.has-flow-map .guide-global-settings>summary { display:flex;align-items:center;gap:7px;color:var(--flow-body);font-size:12px;list-style:none;min-height:31px; }
.has-flow-map .guide-global-settings>summary::-webkit-details-marker { display:none; }
.has-flow-map .guide-global-settings>summary:after { content:'+';margin-left:auto;color:var(--flow-muted); }
.has-flow-map .guide-global-settings[open]>summary:after { content:'−'; }
.has-flow-map .guide-global-settings>summary .flow-icon { width:16px;height:16px; }
.has-flow-map .guide-global-settings label { color:var(--flow-muted);font-size:12px; }
.flow-inspector-footer { margin-top:21px;border-top:1px solid #e9eef6;padding-top:13px; }
.flow-inspector-footer .guide-delete-action { display:inline-flex;align-items:center;gap:6px;min-height:33px;padding:5px 0;color:#97666b;font-size:12px; }
.flow-inspector-footer .flow-icon { width:15px;height:15px; }

/* Canvas controls use icons with labels and keep generous pointer targets. */
.flow-map { position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;min-width:0;min-height:440px;border:1px solid var(--flow-line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 9px #0b1c3b0d; }
.flow-map-toolbar { grid-column:1;grid-row:1;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 15px;border-bottom:1px solid #e9eef6;background:#fff;z-index:10;flex:none; }
.flow-map-heading { display:flex;flex-direction:column;gap:3px; }
.flow-map-heading strong { color:var(--flow-ink);font-size:14px;font-weight:650; }
.flow-map-heading span { color:var(--flow-muted);font-size:12px;line-height:1.7; }
.flow-map-actions { position:relative;display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
.flow-tool { display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;min-height:36px;padding:8px 10px;border:1px solid var(--flow-line);border-radius:8px;background:#fff;color:var(--flow-body);font:inherit;font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap;cursor:pointer; }
.flow-tool .flow-icon { width:17px;height:17px; }
.flow-icon-only { width:34px;min-width:34px;padding:7px; }
.flow-icon-only>span { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0; }
.flow-tool:hover { background:var(--flow-paper);color:var(--flow-blue);border-color:#8aafea; }
.flow-tool:focus-visible,.flow-secondary-menu summary:focus-visible { outline:2px solid #8aafea;outline-offset:3px; }
.flow-add { color:var(--flow-blue);background:var(--flow-blue-soft);border-color:var(--flow-line);font-weight:600; }
.flow-test { color:var(--flow-blue);background:var(--flow-blue-soft);border-color:var(--flow-line); }
.flow-test:hover { background:var(--flow-blue-soft);color:var(--flow-blue);border-color:#8aafea; }
.flow-inspector-toggle { background:#fff;color:var(--flow-body); }
.flow-inspector-toggle[aria-expanded="true"] { background:var(--flow-blue-soft);border-color:#8aafea;color:var(--flow-blue); }
.flow-mode-toggle[aria-pressed="true"] { background:var(--flow-blue-soft);color:var(--flow-blue);border-color:#8aafea; }
.flow-add-palette { position:absolute;top:76px;right:15px;left:auto;width:285px;max-width:calc(100% - 28px);padding:7px;border:1px solid var(--flow-line);border-radius:11px;background:#fff;box-shadow:0 14px 38px #0b1c3b16;z-index:40; }
.flow-add-option { display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:10px 11px;border:0;border-radius:8px;background:#fff;color:var(--flow-body);text-align:left;font:inherit;font-size:13px;cursor:pointer; }
.flow-add-option:hover { background:var(--flow-paper); }
.flow-add-option>.flow-icon { width:24px;height:24px;color:var(--flow-blue); }
.flow-add-option strong,.flow-add-option b { display:block;color:var(--flow-ink);font-size:13px;font-weight:600; }
.flow-add-option small,.flow-add-option p { display:block;margin-top:3px;color:var(--flow-muted);font-size:11px;line-height:1.7; }
.flow-map-banner { grid-column:1;grid-row:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none;padding:10px 15px;border-bottom:1px solid var(--flow-line);background:var(--flow-paper);color:var(--flow-body);font-size:12px;line-height:1.7; }
.flow-map-banner button { margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:5px 9px;border:1px solid var(--flow-line);border-radius:7px;background:#fff;color:var(--flow-blue);font:inherit;font-size:11px;cursor:pointer; }
.flow-map-banner .flow-icon { width:17px;height:17px; }
.flow-viewport { grid-column:1;grid-row:3;position:relative;min-width:0;min-height:250px;overflow:hidden;background:#fbfcfd;background-image:radial-gradient(circle,#e2e6eb .65px,transparent .9px);background-size:20px 20px;cursor:grab;touch-action:none;outline:none; }
.flow-viewport:focus-visible { box-shadow:inset 0 0 0 2px #8aafea; }
.flow-viewport.panning { cursor:grabbing; }
.flow-world { position:absolute;left:0;top:0;width:7000px;height:9000px;transform-origin:0 0;will-change:transform;pointer-events:none; }
.flow-edges { position:absolute;left:0;top:0;overflow:visible;pointer-events:none; }
.flow-edge { fill:none;stroke:#d3d7dd;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round; }
.flow-edges marker path { fill:#bec4cc; }
.flow-edge.selected { stroke:#b6c5d8;stroke-width:1.25; }
.flow-cards { position:absolute;inset:0;pointer-events:none; }
.flow-node { box-sizing:border-box;position:absolute;width:250px;border:1px solid var(--flow-line);border-radius:12px;background:#fff;box-shadow:0 2px 5px #242c3c04;pointer-events:auto;color:var(--flow-body);user-select:none;cursor:grab; }
.flow-node.selected { z-index:6;border-color:#b6cbe2;box-shadow:0 0 0 2px #347fc108,0 2px 6px #242c3c05; }
.flow-node.dragging,.flow-node[data-moving="true"] { cursor:grabbing;box-shadow:0 8px 22px #0b1c3b16; }
.flow-node.moving { border-color:var(--flow-blue);outline:3px solid #e6efff;outline-offset:3px;cursor:move;box-shadow:0 8px 22px #0b1c3b16; }
.flow-node:focus-visible { outline:2px solid #8aafea;outline-offset:3px; }
.flow-node-header { display:flex;align-items:center;gap:6px;padding:7px 10px 3px;min-height:32px;cursor:inherit;touch-action:none; }
.flow-node-mark { display:grid;place-items:center;min-width:20px;width:20px;height:20px;flex:none;border-radius:5px;background:var(--flow-blue-soft);color:var(--flow-blue);font-size:10px; }
.flow-node-mark .flow-icon { width:13px;height:13px; }
.flow-node[data-type="message"] .flow-node-mark { background:#f1efff;color:#7766ac; }
.flow-node[data-type="handoff"] .flow-node-mark { background:#edf7f8;color:#367d85; }
.flow-node[data-type="end"] .flow-node-mark { background:#fff7e6;color:#9b7733; }
.flow-node[data-type="terminal"] .flow-node-mark { background:#f0f3f8;color:var(--flow-muted); }
.flow-node-title { flex:1;min-width:0;padding:0;border:0;background:none;color:var(--flow-ink);font:inherit;font-size:13px;font-weight:650;line-height:1.45;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit; }
.flow-node-title:focus-visible { outline:2px solid #8aafea;outline-offset:3px; }
.flow-node-order { flex:none;padding:1px 4px;border-radius:4px;background:#f6f7f9;font-size:10px;color:var(--flow-muted);line-height:1.5;white-space:nowrap; }
.flow-node-type { display:none; }
.flow-node-text { margin:4px 11px 7px;color:var(--flow-body);font-size:12px;line-height:1.55;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0; }
.flow-node-actions { display:none;position:absolute;right:-1px;bottom:calc(100% + 7px);box-sizing:border-box;width:250px;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:3px;padding:4px;border:1px solid var(--flow-line);border-radius:9px;background:#fff;box-shadow:0 4px 14px #242c3c0b;cursor:default; }
.flow-node-actions button { display:inline-flex;align-items:center;justify-content:center;gap:3px;min-height:28px;min-width:28px;padding:5px 4px;border:1px solid var(--flow-line);border-radius:6px;background:#fff;color:var(--flow-muted);font:inherit;font-size:11px;line-height:1.3;cursor:pointer; }
.flow-node-actions button:hover { border-color:#8aafea;background:var(--flow-paper);color:var(--flow-blue); }
.flow-node-actions .flow-icon { width:12px;height:12px; }
.flow-node-actions .flow-add-choice { gap:3px;padding-inline:4px;background:var(--flow-blue-soft);border-color:var(--flow-line);color:var(--flow-blue); }
.flow-choice-count { flex:none;padding:1px 3px;border:1px solid #e0e8f5;border-radius:4px;background:#fff;color:var(--flow-muted);font-size:9px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap; }
.flow-node-actions .flow-add-choice:disabled { opacity:.45;cursor:default; }
.guide-view .flow-map-actions .flow-delete-selected,.guide-view .flow-node-actions .flow-delete-step,.guide-view .guide-editor-heading .guide-delete-action { color:#9d606a;background:#fff;border:1px solid #eadfe2; }
.guide-view .flow-delete-selected:hover:not(:disabled),.guide-view .flow-node-actions .flow-delete-step:hover:not(:disabled),.guide-view .guide-editor-heading .guide-delete-action:hover:not(:disabled) { border-color:#d6b5bd;background:#fff7f8;color:#994c5b; }
.guide-view .flow-delete-selected:disabled,.guide-view .flow-node-actions .flow-delete-step:disabled,.guide-view .guide-editor-heading .guide-delete-action:disabled { border-color:var(--flow-line);background:#fafbfe;color:var(--flow-muted);opacity:.65;cursor:default; }
.flow-delete-note { max-width:100%;color:var(--flow-muted);font-size:11px;line-height:1.65;white-space:normal;overflow-wrap:anywhere; }
.flow-node-delete-note { display:none;margin:0 11px 6px;padding:0;color:var(--flow-muted);font-size:10px;line-height:1.5;text-align:left;overflow-wrap:anywhere; }
.guide-view .guide-editor-heading .guide-delete-action { display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;min-height:31px;padding:6px 8px;border-radius:8px;font:inherit;font-size:11px;line-height:1.5;cursor:pointer; }
.guide-view .guide-editor-heading .guide-delete-action .flow-icon { width:14px;height:14px; }
.guide-fields.editing-contact>:not(#flow-contact-fields) { display:none; }
.guide-fields.editing-handoff>:not(#flow-handoff-fields) { display:none; }
.flow-contact-fields,.flow-handoff-fields { min-width:0; }
.flow-contact-fields>label,.flow-handoff-fields>label { display:block;margin:0 0 6px;color:var(--flow-body);font-size:12px;font-weight:600;line-height:1.6; }
.flow-contact-fields>input,.flow-contact-fields>textarea,.flow-contact-fields>select,.flow-handoff-fields>input,.flow-handoff-fields>textarea { box-sizing:border-box;display:block;width:100%;min-width:0;margin:0 0 17px;padding:10px 11px;border:1px solid var(--flow-line);border-radius:10px;background:#fff;color:var(--flow-body);font:inherit;font-size:13px;line-height:1.6; }
.flow-contact-fields>input,.flow-contact-fields>select,.flow-handoff-fields>input { min-height:41px; }.flow-contact-fields>textarea,.flow-handoff-fields>textarea { min-height:105px;resize:vertical; }
.flow-contact-note,.flow-handoff-note { margin:4px 0 16px;padding:11px 12px;border:1px solid var(--flow-line);border-radius:9px;background:#fafbfe;color:var(--flow-muted);font-size:12px;line-height:1.75;overflow-wrap:anywhere; }
.guide-view .flow-node[data-type="contact"] .flow-node-mark { background:#edf4fb;color:#7898be; }
.flow-contact-description { display:none; }
.flow-contact-summary { display:flex;gap:5px;flex-wrap:wrap;margin:0 11px 7px; }
.flow-contact-summary>span { min-width:0;max-width:100%;padding:2px 5px;border:1px solid #edf0f4;border-radius:5px;background:#fbfcfd;color:var(--flow-muted);font-size:10px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.flow-contact-submit { display:none; }
.flow-contact-edge { stroke:#d3d7dd; }
.flow-node-outputs { display:flex;align-items:center;justify-content:center;gap:4px;min-height:20px;padding:0 10px 3px;border-top:0; }
.flow-output-row { position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;width:24px;min-height:22px;padding:0;border:0;color:var(--flow-body);font-size:12px;line-height:18px; }
.flow-output-row:last-child { border-bottom:0; }
.flow-output-row>span { position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap; }
.flow-port { position:relative;right:auto;top:auto;display:grid;place-items:center;flex:none;width:24px;height:22px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--flow-muted);box-shadow:none;cursor:crosshair; }
.flow-port .flow-icon { display:none; }
.flow-port:hover,.flow-port:focus-visible { background:#eef4fb;color:var(--flow-blue);box-shadow:0 0 0 1px #d3deeb; }
.flow-port:after,.flow-node-input:after { content:'';position:absolute;inset:-7px;border-radius:50%; }
.flow-node-input { position:absolute;left:-12px;top:22px;width:24px;height:24px;padding:0;border:6px solid #fff;border-radius:50%;background:#b9c9df;box-shadow:0 0 0 1px var(--flow-line);cursor:crosshair; }
.flow-node-input:hover,.flow-node-input:focus-visible { background:#799bd0;box-shadow:0 0 0 4px #e6efff; }
.flow-terminal { background:#fff;border-style:dashed;box-shadow:none; }
.flow-terminal .flow-node-header { cursor:inherit; }
.flow-end-terminal { cursor:default; }
.flow-viewport.connecting .flow-end-terminal { cursor:crosshair; }
.flow-end-tag { display:flex;align-items:center;gap:5px;padding:3px 0 4px;color:var(--flow-muted);font-size:10px;line-height:1.5; }
.flow-end-tag .flow-icon { width:12px;height:12px; }
.flow-viewport.connecting { cursor:crosshair; }
.connecting .flow-node { cursor:crosshair; }
.connecting .flow-node:hover { outline:3px solid #8aafea;outline-offset:3px; }
.flow-map-hint { grid-column:1;grid-row:4;flex:none;display:flex;align-items:center;gap:6px;min-height:34px;padding:8px 13px;border-top:1px solid #e9eef6;background:#fff;color:var(--flow-muted);font-size:12px;line-height:1.7; }
.flow-floating-tools { grid-column:1;grid-row:3;align-self:end;justify-self:center;position:relative;margin:0 8px 12px;min-width:0;max-width:calc(100% - 16px);display:flex;align-items:center;gap:5px;padding:5px;background:#ffffffed;border:1px solid var(--flow-line);border-radius:11px;box-shadow:0 5px 20px #0b1c3b16;z-index:5; }
.flow-floating-tools .flow-tool { min-height:33px;padding:7px 10px;border-color:transparent;font-size:11px; }
.flow-floating-tools .flow-icon-only { padding:7px;width:34px; }
.flow-zoom-label { min-width:46px;font-variant-numeric:tabular-nums; }


.flow-node.selected .flow-node-actions,.flow-node:focus-within .flow-node-actions { display:flex; }
.flow-node.selected>.flow-node-delete-note { display:block; }
.flow-node-meta { display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 11px 4px;min-width:0; }
.flow-meta-chip { display:inline-block;max-width:100%;padding:1px 4px;border-radius:4px;background:#f6f7f9;color:var(--flow-muted);font-size:10px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.flow-contact-next { display:block;min-width:0;max-width:100%;padding:1px 1px 4px;color:var(--flow-muted);font-size:10px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.flow-port:before { content:'';display:block;width:5px;height:5px;border-radius:1.5px;background:#77818c; }
.flow-port:hover:before,.flow-port:focus-visible:before { background:#6b8eb8; }
.flow-port:after { inset:-2px;border-radius:5px; }
.flow-edge-label { pointer-events:none; }
.flow-edge-label rect { fill:#fff;stroke:#e6e9ed;stroke-width:.7; }
.flow-edge-label text,.flow-edge-label-text { fill:#6f7782;font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:11px;font-weight:450; }

/* Preview and short help remain ordinary dialogs with clear close controls. */
.flow-preview-dialog,.flow-help-dialog { width:440px;max-width:calc(100vw - 30px);max-height:calc(100dvh - 40px);padding:0;overflow:auto;border:1px solid var(--flow-line);border-radius:15px;background:#fff;box-shadow:0 22px 85px #0b1c3b24;font-family:inherit;color:var(--flow-body); }
.flow-preview-dialog::backdrop,.flow-help-dialog::backdrop { background:#0b1c3b30;backdrop-filter:blur(3px); }
.flow-preview-heading,.flow-help-dialog>header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 19px;border-bottom:1px solid #e9eef6;font-size:15px;font-weight:650; }
.flow-preview-note { margin:0;padding:12px 19px;background:var(--flow-paper);color:var(--flow-muted);font-size:12px;line-height:1.8; }
.flow-preview-note .flow-tool { margin-top:9px; }
.flow-preview-messages { display:flex;flex-direction:column;gap:12px;height:350px;overflow:auto;padding:20px;background:#fff; }
.flow-preview-bubble { align-self:flex-start;flex:none;max-width:88%;padding:12px 14px;border:1px solid var(--flow-line);border-radius:4px 12px 12px 12px;background:#fff;color:var(--flow-body);font-size:13px;line-height:1.8;white-space:pre-wrap; }
.flow-preview-bubble.customer { align-self:flex-end;border-color:var(--flow-line);border-radius:12px 4px 12px 12px;background:var(--flow-blue-soft);color:var(--flow-body); }
.flow-preview-actions { display:flex;flex-direction:column;gap:8px;padding:13px 19px 19px;border-top:1px solid #e9eef6; }
.flow-preview-choice { padding:11px 13px;min-height:42px;border:1px solid var(--flow-line);border-radius:8px;background:#fff;color:var(--flow-body);font:inherit;font-size:13px;cursor:pointer; }
.flow-preview-choice:hover { background:var(--flow-paper);border-color:#8aafea; }
.flow-help-dialog { width:490px;padding:21px; }
.flow-help-dialog>header { padding:0 0 16px; }
.flow-help-dialog h2 { color:var(--flow-ink);font-size:17px; }
.flow-help-dialog p,.flow-help-dialog li { color:var(--flow-muted);font-size:13px;line-height:1.9; }
.flow-help-dialog p { margin-top:12px; }
.flow-help-dialog ul,.flow-help-dialog ol { padding-left:20px;margin-top:14px; }
.flow-help-item { display:flex;align-items:flex-start;gap:13px;padding:17px 0;border-bottom:1px solid #e9eef6; }
.flow-help-item:last-child { padding-bottom:0;border-bottom:0; }
.flow-help-item>.flow-icon { width:24px;height:24px;color:var(--flow-blue);margin-top:2px; }
.flow-help-item strong { color:var(--flow-ink);font-size:13px;font-weight:600;line-height:1.8; }
.flow-help-item p { margin-top:3px;font-size:12px; }
.guide-button-heading[hidden],#guide-button-editors[hidden],.flow-action-fields[hidden],.flow-add-palette[hidden],.flow-map-banner[hidden] { display:none!important; }

@media(min-width:1600px) {
  .guide-layout.has-flow-map { --flow-inspector-width:320px;--flow-preview-width:340px; }
}
@media(max-width:1199px) and (min-width:800px) {
  .guide-layout.has-flow-map {
    --flow-preview-width:320px;grid-template-columns:minmax(0,1fr) var(--flow-preview-width);
    grid-template-rows:minmax(340px,auto) 300px;gap:10px;flex:1 0 auto;min-height:650px;
  }
  .guide-layout.has-flow-map.inspector-collapsed { grid-template-columns:minmax(0,1fr) var(--flow-preview-width);grid-template-rows:minmax(440px,1fr);flex:1;min-height:440px; }
  .has-flow-map>.guide-editor-card { grid-column:1;grid-row:2;height:300px;max-height:300px; }
  .has-flow-map>#flow-live-preview { grid-column:2;grid-row:1 / span 2;position:sticky;top:0; }
  .has-flow-map.inspector-collapsed>#flow-live-preview { grid-column:2;grid-row:1; }
  .flow-map { min-height:340px; }
  .flow-viewport { min-height:170px; }
  .flow-map-toolbar { padding:10px 11px;gap:8px;align-items:flex-start; }
  .flow-map-heading span { display:none; }
  .flow-map-actions { min-width:0;max-width:100%;gap:4px; }
  .flow-tool { padding:8px;font-size:11px; }
  .flow-map-hint { font-size:11px;line-height:1.6;padding:8px 11px; }
  .flow-floating-tools { gap:2px;padding:4px;margin-bottom:10px; }
  .flow-floating-tools .flow-tool { min-width:30px;min-height:30px;padding:6px 7px;font-size:11px; }
  .flow-floating-tools .flow-icon-only { width:30px;min-width:30px;padding:6px; }
  .flow-floating-tools .flow-icon { width:16px;height:16px; }
  .flow-floating-tools .flow-zoom-label { min-width:38px;padding-inline:5px; }
  .has-flow-map .guide-fields { padding:15px; }
}
@media(max-width:1099px) and (min-width:800px) {
  .guide-layout.has-flow-map { --flow-preview-width:300px; }
}
@media(max-width:1150px) {
  .guide-toolbar { padding:12px;gap:9px; }
  .guide-brand-field { width:160px;min-width:145px;gap:8px; }
  .guide-toolbar-actions { gap:6px; }
  .guide-toolbar-actions .primary-button,.guide-toolbar .flow-publish { padding:8px 10px;font-size:11px; }
  .guide-unsaved { font-size:10px; }
}
@media(max-height:800px) and (min-width:1200px) {
  .guide-layout.has-flow-map { min-height:420px; }
  .flow-map { min-height:420px; }
  .flow-viewport { min-height:230px; }
  .flow-map-toolbar { padding-block:10px; }
  .flow-map-heading span { display:none; }
}
@media(max-width:799px) {
  .guide-toolbar { padding:14px; }
  .guide-brand-field { width:100%;min-width:0; }
  .guide-brand-field select { flex:1; }
  .guide-toolbar-actions { width:100%;margin-left:0;justify-content:flex-start; }
  .guide-unsaved { width:100%;font-size:11px;margin-bottom:2px; }
  .guide-toolbar-actions .primary-button,.guide-toolbar .flow-publish { font-size:12px;padding:9px 11px; }
  .guide-layout.has-flow-map,.guide-layout.has-flow-map.inspector-collapsed { display:flex;flex-direction:column;flex:none;height:auto;min-height:0; }
  .has-flow-map>#flow-map { order:0; }
  .has-flow-map>.guide-editor-card { order:1;height:400px;max-height:400px;min-height:300px;overflow:hidden; }
  .has-flow-map>#flow-live-preview { order:2;position:static;align-self:center; }
  .has-flow-map .guide-fields { overflow:auto; }
  .flow-map { min-height:500px; }
  .flow-viewport { min-height:280px; }
  .flow-map-toolbar { padding:13px; }
  .flow-map-heading { width:100%; }
  .flow-map-actions { gap:5px;max-width:100%; }
  .flow-tool { min-height:36px;font-size:11px;padding:8px; }
  .flow-tool .flow-icon { width:16px;height:16px; }
  .flow-inspector-toggle { margin-left:auto; }
  .flow-map-hint { font-size:11px;line-height:1.6; }
  .flow-secondary-items { left:0;right:auto; }
  .flow-floating-tools { gap:2px;padding:4px;max-width:calc(100% - 16px); }
  .flow-floating-tools .flow-tool { min-width:29px;padding:7px 6px;font-size:11px; }
  .flow-floating-tools .flow-icon-only { width:29px;min-width:29px;padding:6px; }
  .flow-floating-tools .flow-zoom-label { min-width:35px; }
}
@media(prefers-reduced-motion:reduce) { .flow-tool,.flow-node,.flow-port { transition:none; } }