/* Existing Liquid Glass palette is intentional. The canvas shows actual graph edges. */
.visual-builder{height:100dvh;min-height:0;overflow:hidden;background:var(--frame);color:var(--ink)}
.visual-builder .builder-top{height:66px;min-height:66px;flex-wrap:nowrap;padding:0 20px;gap:14px;background:var(--surface);border-color:var(--line);z-index:30}
.visual-builder .builder-name{min-width:0}.builder-name h1{font-size:15px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}.visual-builder .builder-name small{font-size:11px;color:var(--muted);margin-top:3px}
.visual-builder .builder-actions{gap:16px}.visual-builder .builder-actions .primary{min-width:90px}.visual-builder .save-indicator{font-size:11px;color:var(--muted)}
.visual-builder .demo-bar{margin:0;border-width:0 0 1px;border-radius:0;min-height:28px;padding:5px 20px;font-size:11px;flex:none}
.visual-builder>.alert{margin:0;border-radius:0;flex:none;z-index:20}
.visual-builder-body{flex:1;min-height:0;position:relative;isolation:isolate;overflow:hidden}
.flow-canvas{position:absolute;inset:0;overflow:hidden;background:var(--frame)}
.flow-viewport{position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--muted) 23%,transparent) .7px,transparent 1px);background-size:22px 22px;overflow:hidden;touch-action:none;cursor:grab;outline-offset:-3px}
.flow-viewport:active{cursor:grabbing}.flow-world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;width:1px;height:1px}
.flow-edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;color:var(--accent)}
.flow-edge{fill:none;stroke:color-mix(in srgb,var(--accent) 65%,var(--muted));stroke-width:1.8}.start-edge{stroke-dasharray:5 5;opacity:.7}
.graph-node{position:absolute;width:264px;height:156px;background:var(--surface);border:1px solid color-mix(in srgb,var(--muted) 32%,transparent);border-radius:12px;box-shadow:0 6px 20px #00000014;color:var(--ink);cursor:default}
.graph-node.selected,.graph-node.connecting{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent),0 8px 24px #0002}
.graph-node header{height:45px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:0 12px;cursor:grab;border-radius:11px 11px 0 0;background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.graph-node header:active{cursor:grabbing}.block-type-icon{color:var(--accent);display:flex;flex:none}.node-title{background:none;border:0;padding:0;color:var(--ink);font-size:12px;font-weight:600;text-align:left;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit}
.node-utility{border:0;background:none;color:var(--muted);padding:4px;display:flex;border-radius:4px}.node-utility:hover{color:var(--ink);background:var(--line)}
.graph-node-body{display:flex;flex-direction:column;gap:8px;text-align:left;border:0;background:transparent;color:var(--ink);width:100%;height:108px;padding:13px 16px;border-radius:0 0 11px 11px}
.block-kind{font-size:10px;color:var(--muted)}.block-summary{font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap}.draft-note{font-size:10px;color:var(--muted)}
.input-port,.output-port{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);background:var(--surface);padding:0;z-index:2}
.input-port{top:71px;left:-8px}.output-port{right:-8px;top:93px}.port-true{top:67px}.port-false{top:109px}
.input-port:hover,.output-port:hover,.graph-node.connecting .output-port{background:var(--accent);border-color:var(--accent)}
.input-port:before,.output-port:before{content:'';position:absolute;inset:-12px;border-radius:50%}
.output-port span{position:absolute;right:17px;top:-2px;font-size:10px;color:var(--muted);background:var(--surface);padding:1px 3px;border-radius:3px}
.flow-start{position:absolute;left:32px;top:170px;width:220px;height:90px;padding:17px 19px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);background:var(--surface);border-radius:12px}
.flow-start>span{display:flex;gap:10px;align-items:center;font-weight:600;font-size:13px;color:var(--ink)}.flow-start svg{color:var(--accent)}.flow-start small{display:block;margin-top:10px;color:var(--muted);font-size:11px}.flow-start>i{position:absolute;right:-5px;top:40px;width:9px;height:9px;background:var(--accent);border-radius:50%}
.canvas-first{position:absolute;left:340px;top:160px;width:264px;height:156px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px dashed color-mix(in srgb,var(--muted) 40%,transparent);border-radius:12px;color:var(--muted)}.canvas-first strong{font-size:13px;color:var(--ink)}.canvas-first span{font-size:11px}
.canvas-top-tools{position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:center;gap:8px;z-index:5;pointer-events:none}.canvas-top-tools>*{pointer-events:auto}.canvas-top-tools .secondary{height:34px;min-height:34px;font-size:12px;font-weight:500;background:var(--surface);border-color:var(--line);box-shadow:0 2px 12px #0000000d}.canvas-top-tools .active{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)}.canvas-count{color:var(--muted);font-size:11px;margin-left:9px}
.canvas-bottom{position:absolute;bottom:18px;left:20px;right:20px;z-index:5;display:flex;align-items:center;gap:10px;pointer-events:none}.canvas-bottom>*{pointer-events:auto}
.canvas-controls{display:flex;align-items:center;gap:2px;padding:4px;background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(22px);box-shadow:0 4px 18px #0000000f}
.canvas-controls .icon-button{width:32px;height:32px;font-size:12px}.canvas-controls .icon-button:disabled{opacity:.28}.canvas-controls>span{height:17px;width:1px;background:var(--line);margin:0 4px}.zoom-value{border:0;background:none;color:var(--muted);font-size:11px;width:43px;min-height:32px}.canvas-help{margin-left:6px;font-size:11px;color:var(--muted)}
.connection-hint{position:absolute;top:65px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:12px;max-width:90%;padding:8px 12px;background:var(--surface);border:1px solid var(--accent);border-radius:10px;font-size:12px;box-shadow:0 4px 25px #0002}
.glass-panel{background:color-mix(in srgb,var(--surface) 93%,transparent);border:1px solid color-mix(in srgb,var(--muted) 21%,transparent);box-shadow:inset 0 1px 0 #ffffff08,0 12px 40px #00000026;backdrop-filter:blur(30px);border-radius:14px}
.flow-palette{position:absolute;z-index:10;top:64px;left:20px;bottom:78px;width:244px;display:flex;flex-direction:column;overflow:hidden}.flow-palette>header{padding:12px 14px 6px;display:flex;align-items:center;justify-content:space-between}.flow-palette h2{font-size:13px;font-weight:600}.flow-palette .icon-button{height:28px;width:28px}
.block-search{display:flex;align-items:center;gap:8px;margin:4px 14px 8px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);flex:none;background:color-mix(in srgb,var(--frame) 65%,transparent)}.block-search input{width:100%;height:35px;min-width:0;background:none;border:0;color:var(--ink);font-size:12px;outline-offset:3px}.block-search input::placeholder{color:var(--muted)}
.block-library{overflow:auto;flex:1;min-height:0;padding:0 7px 14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.block-group h3{padding:15px 9px 8px;font-size:11px;font-weight:500;color:var(--muted)}
.block-option{display:flex;align-items:center;gap:10px;padding:10px 9px;width:100%;background:none;border:0;border-radius:8px;text-align:left;color:var(--muted)}.block-option:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent)}.block-option>svg{flex:none}.block-option>span{flex:1;min-width:0}.block-option strong{display:block;font-size:12px;font-weight:500;color:var(--ink)}.block-option small{display:block;font-size:10px;line-height:1.45;margin-top:3px;color:var(--muted)}.block-option>svg:last-child{width:12px}
.block-planning{border-top:1px solid var(--line);margin:12px 7px 0;padding-top:12px}.block-planning summary{cursor:pointer;font-size:11px;color:var(--muted)}.block-planning summary span{float:right}.block-planning p{font-size:11px;color:var(--muted);line-height:1.5;margin:12px 0}.future-block{display:flex;justify-content:space-between;gap:4px;padding:9px 0;font-size:11px;color:var(--muted)}.future-block small{font-size:9px;opacity:.75}.block-no-results{font-size:12px;padding:20px;color:var(--muted)}
.visual-builder .inspector{position:absolute;z-index:12;right:16px;top:16px;bottom:78px;width:320px;padding:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--ink)}
.visual-builder .inspector-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px;margin:0;border-bottom:1px solid var(--line);background:var(--surface)}.inspector-title{display:flex;align-items:center;gap:12px;min-width:0}.inspector-title>svg{color:var(--accent);flex:none}.visual-builder .inspector-head h2{font-size:14px;color:var(--ink)}.visual-builder .inspector-head p{font-size:11px;color:var(--muted);margin-top:4px}
.visual-builder #node-form{padding:20px 18px;margin:0}.visual-builder #node-form label,.simulation-panel form>label{font-size:11px;font-weight:500;color:var(--muted);display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.visual-builder #node-form :is(input,textarea,select),.simulation-panel input:not([type=checkbox]){background:color-mix(in srgb,var(--frame) 60%,transparent);border:1px solid var(--line);color:var(--ink);border-radius:8px;min-height:38px;font-size:12px;line-height:1.55;padding:9px 11px;width:100%;min-width:0}.visual-builder #node-form textarea{resize:vertical;min-height:130px;max-height:350px}.visual-builder #node-form .tag-checkbox input{width:auto}
.visual-builder #node-form p{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0}.node-connections{border-top:1px solid var(--line);padding-top:17px;margin:22px 0}.node-connections summary{cursor:pointer;font-size:12px;color:var(--ink);margin-bottom:18px}.visual-builder .node-edit-actions{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);padding-top:16px}.node-edit-actions .primary{margin-left:auto}.node-edit-actions .secondary,.node-edit-actions .primary{font-size:11px;min-height:34px;padding:0 10px}.node-edit-actions .delete-link{margin:0;padding:0;border:0;color:#dba1ae;width:30px}
.message-block-editor{border:1px solid var(--line);border-radius:9px;overflow:visible;background:color-mix(in srgb,var(--frame) 40%,transparent)}.visual-builder #node-form .message-block-editor label{margin:0;padding:12px 12px 0}.visual-builder #node-form .message-block-editor textarea{border:0;padding:0;background:none;outline-offset:5px;border-radius:0}.message-format-tools{display:flex;align-items:center;gap:3px;border-top:1px solid var(--line);padding:6px 8px}.message-format-tools>button{width:30px;height:30px;background:none;border:0;border-radius:4px;color:var(--muted)}.message-format-tools>button:hover{background:var(--line);color:var(--ink)}.message-format-tools details{margin-left:auto;position:relative;font-size:11px}.message-format-tools summary{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);padding:6px}.message-format-tools details>div{position:absolute;top:32px;right:0;min-width:140px;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px;box-shadow:0 8px 20px #0003}.message-format-tools details button{display:block;width:100%;border:0;background:none;color:var(--ink);padding:8px 10px;text-align:left;border-radius:5px}.message-format-tools details button:hover{background:var(--line)}
.simulation-panel form{padding:18px 18px 0}.simulation-panel .simulation-check{display:flex;flex-direction:row;align-items:center;gap:9px;font-size:12px}.simulation-check input{accent-color:var(--accent)}.simulation-notice{font-size:11px;color:var(--muted);padding:16px 18px;line-height:1.6}.simulation-panel .error{margin:0 16px 12px}.simulation-steps{list-style:none;margin:0;padding:0 18px}.simulation-steps li{display:flex;gap:12px;padding:16px 0;border-top:1px solid var(--line)}.simulation-steps li>span{color:var(--accent);flex:none}.simulation-steps strong{font-size:12px;font-weight:500}.simulation-steps p{font-size:12px;color:var(--muted);line-height:1.6;margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}.simulation-complete{display:flex;gap:7px;align-items:center;padding:20px 18px;color:var(--accent);font-size:12px}
/* Theme chooser: native details semantics, custom swatches, persistent selection. */
.theme-control{position:relative;display:block;flex:none;font-size:12px;z-index:50}.theme-control>summary{list-style:none;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;min-height:36px;cursor:pointer;color:var(--muted);background:color-mix(in srgb,var(--surface) 70%,transparent)}.theme-control>summary::-webkit-details-marker{display:none}.theme-control[open]>summary{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--ink)}.theme-control>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-popover{position:absolute;top:calc(100% + 10px);right:0;width:300px;padding:18px;z-index:100;border:1px solid color-mix(in srgb,var(--muted) 25%,transparent);border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 18px 60px #0004,inset 0 1px 0 #ffffff10;backdrop-filter:blur(28px);color:var(--ink)}.theme-popover>header{display:grid;gap:5px;margin-bottom:16px}.theme-popover>header strong{font-size:14px;font-weight:500}.theme-popover>header>span{font-size:11px;color:var(--muted)}.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme-options>button{position:relative;border:1px solid var(--line);border-radius:10px;padding:6px;background:none;text-align:left;color:var(--ink);min-width:0}.theme-options>button[aria-checked=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}.theme-options>button:hover{border-color:var(--muted)}
.theme-preview{height:64px;display:block;position:relative;overflow:hidden;border-radius:6px;background:var(--preview-ground);border:1px solid #88888820}.theme-preview-liquid{--preview-ground:#17141e;--preview-panel:#2b2439;--preview-accent:#bda3ef}.theme-preview-graphite{--preview-ground:#141a1e;--preview-panel:#29333c;--preview-accent:#c0ccd6}.theme-preview-ocean{--preview-ground:#0a202c;--preview-panel:#174155;--preview-accent:#74cbdc}.theme-preview-pearl{--preview-ground:#e9eef4;--preview-panel:#fff;--preview-accent:#486b9b}.theme-preview i{position:absolute;left:6px;top:6px;bottom:6px;width:16px;background:var(--preview-panel);border-radius:3px}.theme-preview b{position:absolute;left:27px;right:6px;top:6px;height:10px;background:var(--preview-panel);border-radius:2px}.theme-preview em{position:absolute;left:27px;right:6px;top:22px;height:34px;background:var(--preview-panel);border-radius:3px}.theme-preview em:after{content:'';position:absolute;left:7px;right:7px;bottom:6px;height:10px;background:var(--preview-accent);border-radius:3px;opacity:.65}.theme-option-name{font-size:11px;display:block;padding:8px 3px 3px}.theme-option-name small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.theme-selected{position:absolute;right:9px;bottom:12px;color:var(--accent)}.theme-options button:not([aria-checked=true]) .theme-selected{visibility:hidden}
[hidden]{display:none!important}
.flow-minimap{position:absolute;right:20px;bottom:18px;width:164px;height:92px;padding:8px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(20px);z-index:4;overflow:hidden}.flow-minimap svg{width:100%;height:100%;pointer-events:none}.mini-node{fill:var(--muted);opacity:.6}.mini-start{fill:var(--accent)}.mini-viewport{fill:color-mix(in srgb,var(--accent) 5%,transparent);stroke:var(--accent);stroke-width:5}.visual-builder-body:has(.inspector) .flow-minimap{display:none}
.visual-builder #node-form .flow-tag-option{display:flex;flex-direction:row;gap:9px;align-items:center;margin:0;padding:8px 0;font-size:12px;color:var(--ink)}.visual-builder #node-form input[type=checkbox]{width:16px;height:16px;min-height:0;flex:none;accent-color:var(--accent)}
@media(max-width:1100px){.visual-builder .save-indicator,.canvas-help{display:none}.canvas-count{display:none}.visual-builder .builder-actions{gap:8px}.builder-name h1{max-width:290px}}
@media(max-width:800px){.visual-builder .builder-top{padding:0 12px;gap:8px;height:62px;min-height:62px}.visual-builder .builder-top>.mark{display:none}.visual-builder .builder-actions .primary{min-width:65px;padding:0 10px}.builder-name h1{font-size:13px;max-width:240px}.visual-builder .inspector,.flow-palette{top:66px;bottom:78px;left:auto;right:12px;width:min(320px,calc(100% - 24px))}.flow-palette{left:12px;right:auto}.canvas-top-tools{left:12px;right:12px}.canvas-bottom{left:12px;right:12px;bottom:14px}.theme-control>summary>span,.theme-control>summary>svg:last-child{display:none}.theme-control>summary{padding:8px}.theme-popover{right:0;max-width:calc(100vw - 24px)}.visual-builder .builder-top .theme-control{display:block}.visual-builder .builder-actions button{font-size:12px}.rename-flow{display:none}.visual-builder .inspector-head{padding:14px}.visual-builder #node-form{padding:16px}.connection-hint{top:auto;bottom:70px;width:calc(100% - 24px)}.canvas-help{display:none}.theme-control>summary{min-height:38px}}
@media(max-width:480px){.visual-builder .builder-name{flex:1}.builder-name h1{max-width:160px}.visual-builder .builder-actions{margin-left:0;gap:6px}.visual-builder .builder-actions .primary svg{display:none}.visual-builder .builder-top>.back{width:28px;flex:none}.visual-builder .demo-bar{padding:5px 12px;font-size:10px;line-height:1.4}.visual-builder .builder-top .theme-control{display:block}.canvas-top-tools .secondary{min-height:40px}.visual-builder .inspector,.flow-palette{top:auto;bottom:68px;max-height:64%;width:calc(100% - 24px);left:12px;right:12px}.flow-palette{height:64%}.canvas-controls .icon-button{width:34px;height:36px}.canvas-bottom{gap:6px}.theme-popover{position:fixed;top:70px;right:12px;width:300px}.visual-builder .inspector .icon-button,.block-option,.node-edit-actions .secondary,.node-edit-actions .primary{min-height:42px}.visual-builder .node-edit-actions .icon-button{min-width:40px}}
@media(max-width:800px){.flow-minimap{display:none}}