.editor-toolbar,.editor-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:white;padding:16px 20px;border:1px solid #e1e6ef;border-radius:12px;margin-bottom:0}
.editor-toolbar label{min-width:200px;flex:1;margin:0;font-size:12px;color:#62718c}.editor-toolbar input{margin-top:6px;font-size:15px;font-weight:600}.editor-toolbar-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.editor-actions{padding:10px 12px;border-radius:12px 12px 0 0;border-bottom:0;gap:8px}
.endpoint-card{border:1px solid #dae2f0;border-radius:12px;margin:12px 0;background:#fafbff}.endpoint-card>summary{padding:16px;cursor:pointer;font-size:13px;font-weight:600}.endpoint-fields{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.endpoint-fields label{font-size:12px}.endpoint-fields input,.endpoint-fields textarea,.endpoint-fields .dropdown{width:100%;margin-top:7px}.endpoint-mappings,.endpoint-fields>label:has(textarea){grid-column:1/-1}.endpoint-mapping{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin:10px 0}.option-row{border:1px solid #dae2f0;border-radius:10px;padding:10px;margin:8px 0}.option-row label{margin:0}.option-row button{font-size:11px}#agentDefinition textarea{min-height:70px;width:100%}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid #e1e6ef;border-radius:0 0 12px 12px;overflow:hidden;background:white;height:max(500px,calc(100dvh - 305px))}
.editor-canvas{min-width:0;height:100%;overflow:auto;background-color:#f7f8fc;background-image:radial-gradient(#cbd3e3 1px,transparent 1px);background-size:20px 20px;outline:none}.editor-canvas:focus-visible{box-shadow:inset 0 0 0 2px #8b78ee}
.editor-canvas{position:relative}.editor-canvas.diagram-mode{overflow:hidden;touch-action:none;cursor:grab}.editor-canvas.diagram-mode #graphSurface{position:absolute;left:0;top:0;min-width:0;min-height:0;transform-origin:0 0}.editor-canvas.panning,.editor-canvas.panning *{cursor:grabbing!important;user-select:none}.editor-canvas.pan-ready .graph-node-head{cursor:grab}.snap-guides{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}.snap-guides line{stroke:#e657b8;stroke-width:1;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}.graph-edges path{vector-effect:non-scaling-stroke}.canvas-controls{position:absolute;left:12px;bottom:12px;z-index:4;display:flex;gap:4px;background:#fff;padding:5px;border:1px solid #dce2ed;border-radius:10px;box-shadow:0 4px 20px #18285012}.canvas-controls button{font-size:11px;padding:7px 10px}.flow-minimap{position:absolute;right:12px;bottom:12px;z-index:4;width:150px;height:100px;border:1px solid #dce2ed;border-radius:10px;background:#ffffffed;cursor:crosshair}.map-node{fill:#d8def0;stroke:#a9b4d1;stroke-width:3}.map-node.selected{fill:#a18ef1;stroke:#7057d5}.map-window{fill:#8c78df15;stroke:#7763d2;stroke-width:5;pointer-events:none}.editor-layout.expanded{position:fixed;inset:12px;z-index:100;box-shadow:0 0 0 20px #18285099}.editor-layout.expanded .editor-canvas,.editor-layout.expanded .editor-properties{height:100%;max-height:100%}.flow-expanded{overflow:hidden}#flowZoom{flex:0 0 auto;min-width:42px;text-align:center}
#graphSurface{position:relative;min-width:1100px;min-height:560px}.graph-edges{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.graph-node{position:absolute;width:240px;background:#fff;border:1px solid #cbd5e7;border-radius:13px;box-shadow:0 5px 18px #1828500c;overflow:hidden}.graph-node.selected{border:2px solid #7466ff;box-shadow:0 0 0 4px #7466ff17}.graph-node-head{display:flex;flex-direction:column;gap:9px;border:0!important;background:transparent!important;width:100%;padding:17px!important;text-align:left;border-radius:0!important;cursor:grab;touch-action:none}.graph-node-head:active{cursor:grabbing}.graph-node-head small{color:#7863e9;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.graph-node-head strong{color:#14233d;font-size:14px}.graph-port{display:flex;justify-content:space-between;width:100%;padding:4px 16px!important;border:0!important;border-top:1px solid #eef1f7!important;border-radius:0!important;font-size:11px;background:#fafbff!important;color:#64748b!important}.graph-port.linked span{color:#7863e9}
.editor-properties{padding:24px;border-left:1px solid #e1e6ef;height:100%;overflow:auto;scrollbar-width:thin}.editor-properties h3{margin:8px 0 24px;font-size:17px;line-height:1.4;color:#1f2942}.editor-properties h4{margin:24px 0 12px;padding-top:20px;border-top:1px solid #edf0f5;font-size:13px}.editor-properties label{display:block;margin:18px 0;font-size:13px;color:#57657b}.editor-properties input,.editor-properties textarea{width:100%;margin-top:8px;font-size:13px;min-height:40px}.editor-properties .dropdown{width:100%;margin-top:8px}.editor-properties button{margin:4px 0}.editor-properties .hint{line-height:1.7;font-size:12px}.editor-properties .eyebrow{font-size:10px;letter-spacing:.1em;color:#8792a5}
.editor-variables{background:white;border:1px solid #dae2f0;border-radius:14px;margin-top:16px;padding:20px}.editor-variables h3{font-size:16px}.graph-variable{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:16px;align-items:end;padding:16px 0;border-top:1px solid #eef1f7}.graph-variable label{margin:0;font-size:12px}.graph-variable input,.graph-variable .dropdown,.graph-variable textarea{margin-top:7px;width:100%}.graph-variable textarea{min-height:90px}
#flowValidation{border-radius:12px;padding:12px 18px;margin-bottom:12px;font-size:12px}#flowValidation p{margin:5px 0}#flowValidation.invalid{background:#fff0ee;color:#9b2c20}#flowValidation.valid{background:#ebfaf1;color:#166b43}
#graphRunDetails{border-top:1px solid #dae2f0;margin-top:18px;padding-top:12px;font-size:12px;word-break:break-word}#graphRunDetails li{margin:8px 0}#graphRunDetails h4{margin:14px 0 8px}
.lab-options{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px 20px}.lab-options button{border-color:#aea3ff;color:#5947c9;background:#f5f2ff}
.editor-actions button[aria-pressed="true"]{background:#eeeaff;color:#5947c9;border-color:#bcb0ff}
.flow-sections{display:flex;gap:8px;border-bottom:1px solid #dae2f0;margin:18px 0;padding-bottom:12px}.flow-sections button{border:0;background:transparent}.flow-sections button[aria-pressed="true"]{color:#5947c9;background:#eeeaff}
.booking-routes>summary{font-size:12px;cursor:pointer;padding:12px 0;color:#5947c9}
#graphSurface.step-overview{min-width:0;min-height:0;padding:24px;background:#f7f8fc}
.step-group{margin:0 0 24px}.step-group h3{font-size:13px;color:#64748b;margin:0 0 12px}.step-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.step-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:18px!important;background:white!important;border:1px solid #dae2f0!important;border-radius:12px!important;min-width:0}
.step-card.selected{border-color:#7863e9!important;box-shadow:0 0 0 2px #7863e917}.step-card small{font-size:9px;color:#7863e9;letter-spacing:.06em}.step-card strong{font-size:13px;color:#14233d;line-height:1.5}.step-card span{font-size:11px;color:#64748b;line-height:1.5}
.endpoint-test,.endpoint-wide{grid-column:1/-1}.endpoint-test{border-top:1px solid #dae2f0;padding-top:16px}.endpoint-test textarea{width:100%;min-height:100px;font-family:monospace;font-size:12px}.endpoint-test-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.endpoint-test pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;background:#edf1fa;padding:16px;border-radius:10px;font-size:12px}
@media(max-width:600px){.step-list{grid-template-columns:1fr}}
@media(max-width:1000px){.editor-layout{grid-template-columns:minmax(0,1fr) 300px}.editor-properties{padding:18px}.graph-variable{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.graph-variable{grid-template-columns:1fr}.editor-toolbar>*{max-width:100%}.editor-toolbar label{min-width:100%;}.editor-actions span{flex-basis:100%}}
@media(max-width:600px){.endpoint-fields,.endpoint-mapping{grid-template-columns:1fr}}

/* Consistent dropdowns across the workspace, including dynamic inspector fields. */
.dropdown,#workspace label>details:not(.advanced-settings){padding:0;border:0;background:transparent}
.dropdown>summary,#workspace label>details:not(.advanced-settings)>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding:9px 12px;border:1px solid #dce2ec;border-radius:8px;background:#fff;color:#34435b;font-size:13px;font-weight:500;list-style:none;cursor:pointer;line-height:1.4}
.dropdown>summary::-webkit-details-marker,#workspace label>details>summary::-webkit-details-marker{display:none}
.dropdown>summary::after,#workspace label>details:not(.advanced-settings)>summary::after{content:'⌄';font-size:16px;color:#8995a9;flex-shrink:0}
.dropdown[open]>summary{border-color:#9885ee;box-shadow:0 0 0 3px #7661da10}
.dropdown-menu,.dropdown-options{position:fixed;inset:auto;margin:0;padding:6px;border:1px solid #e0e5ef;border-radius:10px;background:#fff;box-shadow:0 12px 40px #17243c24;overflow:auto;z-index:200;scrollbar-width:thin}
.dropdown-menu:not(:popover-open):not(.dropdown-fallback),.dropdown-options:not(:popover-open):not(.dropdown-fallback){display:none}
.dropdown-menu button,.dropdown-options button{display:block;width:100%;text-align:left;margin:0!important;border:0;border-radius:6px;min-height:38px;padding:9px 10px;background:transparent;color:#34435b;font-size:13px;font-weight:500;line-height:1.5;white-space:normal}
.dropdown-menu button:hover,.dropdown-options button:hover,.dropdown-menu button:focus-visible,.dropdown-options button:focus-visible{background:#f1edfc;color:#6249cd;outline:none}
#flows button{min-height:36px;font-size:13px;border-radius:8px;padding:8px 12px}#flows button:focus-visible,summary:focus-visible{outline:2px solid #9784eb;outline-offset:2px}
#flows .editor-toolbar>label{max-width:560px}#flowDirty{font-size:11px;max-width:220px;line-height:1.5}#flowVersionPicker{min-width:110px}
.editor-view-toggle,.editor-history{display:flex;gap:2px;align-items:center}.editor-view-toggle{background:#f1f3f8;border-radius:8px;padding:3px}.editor-view-toggle button{border:0!important;background:transparent;min-height:32px!important}.editor-view-toggle button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px #17243c12;color:#644bcf}
.editor-history{border-right:1px solid #e4e8f0;padding-right:10px;margin-right:2px}.editor-history button{font-size:20px!important;padding:4px 10px!important;border:0;background:transparent}
.editor-display-tools{margin-left:auto;display:flex;align-items:center;gap:10px}.editor-actions .check-label{margin:0;font-size:12px;display:flex;gap:7px;align-items:center;white-space:nowrap}.editor-actions input[type="checkbox"]{accent-color:#7156d9;width:15px;height:15px;margin:0}
.editor-status{padding:10px 2px;color:#8290a4;font-size:11px;line-height:1.5}.flow-sections{margin:14px 0 12px;padding-bottom:8px;gap:4px}.flow-sections button{font-size:13px;padding:8px 16px!important}.canvas-controls button{min-height:32px!important;padding:6px 10px!important}.graph-port{min-height:30px!important;padding:6px 16px!important;font-size:12px!important}.graph-node-head{min-height:70px!important}.graph-node-head strong{line-height:1.45}
body:has(#flows:not([hidden])) .page-description{display:none}body:has(#flows:not([hidden])) .app-header~main{padding-top:20px;padding-bottom:16px}
body:has(#flows:not([hidden])) .app-header{min-height:80px;padding-top:14px;padding-bottom:14px}.header-actions{gap:16px}
@media(min-width:801px) and (max-width:1400px){.editor-layout{height:max(360px,calc(100dvh - 365px));grid-template-columns:minmax(0,1fr) 300px}.editor-properties{padding:20px}.editor-toolbar{padding:12px 16px}.editor-toolbar input{min-height:40px;padding:9px 10px}.editor-toolbar>label{min-width:180px}.editor-actions{padding:8px 10px}.editor-display-tools{gap:8px}}
@media(min-width:1500px){.editor-layout{grid-template-columns:minmax(0,1fr) 360px}}
@media(max-width:800px){.editor-toolbar-actions{flex-wrap:wrap;margin-left:0}.editor-layout{height:auto;grid-template-columns:1fr}.editor-canvas{height:480px}.editor-properties{height:auto;max-height:450px;border-left:0;border-top:1px solid #e1e6ef}.editor-layout.expanded{grid-template-rows:minmax(0,1fr) 240px}.editor-display-tools{margin-left:0}.flow-minimap{width:110px;height:75px}.editor-toolbar>label{min-width:100%}.editor-status{font-size:10px}.editor-actions{gap:6px}#flows .editor-actions button{font-size:12px}}
.editor-layout.expanded{height:auto;border-radius:12px}
.edge-hit{pointer-events:stroke;cursor:pointer}.edge-handle{pointer-events:all;fill:#fff;stroke:#6548cd;stroke-width:2;vector-effect:non-scaling-stroke;cursor:move}.graph-edges path.selected-edge{stroke:#4930bf;stroke-width:2.5}.edge-hit:focus,.edge-handle:focus{outline:none;stroke:#4930bf}.edge-actions{display:flex;gap:8px;margin:12px 0}.edge-point-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;border-top:1px solid #edf0f6;padding:12px 0;font-size:11px}.edge-point-row span{width:100%;color:#758099}.edge-point-row button{padding:6px 10px;font-size:11px}
.connection-preview{pointer-events:none!important}.editor-canvas.connecting,.editor-canvas.connecting .graph-node-head{cursor:crosshair}.editor-canvas.connecting .graph-node:hover{box-shadow:0 0 0 4px #7466ff30}
.editor-layout:has(.node-library:not([hidden])){grid-template-columns:220px minmax(0,1fr) 320px}.node-library{padding:16px;background:#fff;border-right:1px solid #e1e6ef;overflow:auto;min-height:0;scrollbar-width:thin}.library-heading{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:14px}.library-heading h3{font-size:13px}.library-heading button{border:0;padding:4px 8px!important;font-size:20px!important}.node-library input{font-size:12px;padding:10px}.library-group h4{font-size:10px;color:#929aad;text-transform:uppercase;letter-spacing:.08em;margin:22px 0 10px}.library-node{display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;padding:12px!important;margin:7px 0;border-color:#e5e8f1;background:#fafbff}.library-node strong{font-size:12px}.library-node span{font-size:11px;font-weight:400;color:#8490a2;line-height:1.5}.library-node:hover{border-color:#bcb0ef;background:#f5f1ff}.catalog-toolbar{display:flex;gap:20px;align-items:center;margin-bottom:18px}.catalog-toolbar input{max-width:480px;font-size:13px}.studio-empty{padding:40px;text-align:center;background:#f8f9fc;border:1px dashed #dce2ed;border-radius:12px;margin:20px 0}.scenario-actions{display:flex;gap:8px;flex-wrap:wrap}.scenario-card{padding:0;border:1px solid #e1e6ef;border-radius:12px;margin-top:20px;overflow:hidden}.scenario-card>summary{padding:18px 20px;font-weight:600;background:#f9faff}.scenario-body{padding:20px}.scenario-identity{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.7fr) auto;gap:16px;align-items:end}.scenario-identity label,.scenario-step label{font-size:12px;font-weight:500;color:#67758a}.scenario-step{border-top:1px solid #e9edf4;margin-top:24px;padding-top:20px}.scenario-step-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.scenario-step-heading strong{font-size:13px}.scenario-step-fields{display:grid;grid-template-columns:1.5fr 1fr 190px;gap:16px;align-items:start}.scenario-step input,.scenario-step textarea{font-size:13px}.scenario-expectations{padding:0;border:0;margin:14px 0}.scenario-expectations summary{font-size:12px;color:#725bc8}.scenario-expectations>label{margin-top:16px}.scenario-expectations textarea{font-family:ui-monospace,monospace;font-size:12px}.scenario-expectations textarea:invalid{border-color:#cf6868}.scenario-expectations .hint{margin:12px 0}.scenario-result{border:1px solid #e1e6ef;border-left:3px solid #be6969;border-radius:10px;margin:12px 0}.scenario-result.passed{border-left-color:#41a683}.scenario-result.blocked{border-left-color:#c19c52}.scenario-result-step{padding:16px 0;border-top:1px solid #edf0f6;font-size:12px}.scenario-result-step p{margin-top:8px}.scenario-reply{background:#f6f7fc;padding:12px;border-radius:8px}#scenarioResults{margin-top:28px;padding-top:24px;border-top:1px solid #e1e6ef}#scenarioResults h3{font-size:16px}.lab-execution{border-top:1px solid #e1e6ef;margin-top:28px;padding-top:24px}.lab-execution-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.lab-execution-grid h4{font-size:13px;margin:0 0 16px}.lab-execution-grid pre{background:#f6f8fc;border:1px solid #e5eaf3;border-radius:10px;padding:18px;max-height:360px}.execution-step{border:1px solid #e5eaf3;border-left:3px solid #8b7ad5;border-radius:8px;margin:8px 0;padding:12px;font-size:12px}.execution-step.awaiting_input{border-left-color:#ca9c42}.execution-step.validation_failed{border-left-color:#bd6e6e}.execution-step p{margin:10px 0}.execution-step button{font-size:12px}.graph-node.run-visited{box-shadow:0 0 0 3px #2ca98420}.graph-node.run-current{border-color:#31a57b}.version-pack{margin-top:10px;padding:10px 0;border:0;background:transparent}.version-pack summary{font-size:12px;color:#7057c5}.version-pack p{font-size:11px;line-height:1.7;margin-top:8px;white-space:normal}.version-pack .hint{font-size:10px}
@media(max-width:1200px){.editor-layout:has(.node-library:not([hidden])){grid-template-columns:185px minmax(0,1fr) 270px}.node-library{padding:12px}.scenario-step-fields{grid-template-columns:1fr 1fr}.scenario-step-fields>label:last-child{grid-column:1/-1;max-width:240px}.scenario-identity{grid-template-columns:1fr 1fr}.scenario-identity>button{justify-self:start}}
@media(max-width:800px){.editor-layout:has(.node-library:not([hidden])){grid-template-columns:1fr}.node-library{max-height:270px;border-bottom:1px solid #e1e6ef}.library-group{display:grid;grid-template-columns:1fr 1fr;gap:8px}.library-group h4{grid-column:1/-1}.library-node{margin:0}.scenario-step-fields,.scenario-identity,.lab-execution-grid{grid-template-columns:1fr}.catalog-toolbar{flex-wrap:wrap}.scenario-body{padding:14px}.editor-variables .section-heading{flex-wrap:wrap}.scenario-actions{width:100%}}