/* Kale original canvas geometry retained. Phosphor Duotone (MIT). */
.canvas-editor{--cx-bg:#fff;--cx-bg-soft:#f5f7fb;--cx-text:#202939;--cx-muted:#606d80;--cx-border:#dce3ed;--cx-accent:#2563cf;--cx-comparison:#7651ad;--cx-hover:#edf3ff;--cx-shadow:0 12px 45px #172c4a22;--cx-duration:180ms;--cx-ease:cubic-bezier(.2,.7,.2,1)}
.canvas-editor.theme-dark{--cx-bg:#1b1f28;--cx-bg-soft:#242a35;--cx-text:#edf1f8;--cx-muted:#a9b4c5;--cx-border:#394354;--cx-accent:#a2c3ff;--cx-comparison:#c4a7ed;--cx-hover:#29394f;--cx-shadow:0 16px 50px #0006}
.cx-icon{width:20px;height:20px;display:inline-block;flex:none;background:currentColor;mask:var(--cx-icon) center/contain no-repeat;-webkit-mask:var(--cx-icon) center/contain no-repeat;pointer-events:none}
.canvas-left-tools .cx-native-tool>svg{display:none}
.canvas-left-tools .cx-native-tool::before{content:"";display:block;width:20px;height:20px;background:currentColor;mask:var(--cx-icon) center/contain no-repeat;-webkit-mask:var(--cx-icon) center/contain no-repeat}
.canvas-left-tools :is(.cx-native-tool,.cx-button){font:500 12px/1.35 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif!important;letter-spacing:.02em;transition:background var(--cx-duration) var(--cx-ease),color var(--cx-duration),transform var(--cx-duration)!important}
.canvas-left-tools .cx-native-tool:focus-visible,.cx-button:focus-visible,.cx-close:focus-visible,.cx-node-row:focus-visible,.cx-input:focus-visible,.cx-select:focus-visible,.cx-range:focus-visible{outline:2px solid var(--cx-accent);outline-offset:3px}
.canvas-left-tools :is(.cx-native-tool,.cx-button):not(:disabled):hover{transform:scale(1.025)}
.canvas-left-tools :is(.cx-native-tool,.cx-button):not(:disabled):active{transform:scale(.97)}
.canvas-node-title,.canvas-node-title-input{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif!important;font-size:14px!important;font-weight:550!important;letter-spacing:.01em}
.canvas-node-dimensions{font-size:11px!important;font-weight:400!important;font-variant-numeric:tabular-nums}
.canvas-editor .node-action-bar button{font-size:12px!important;font-weight:500!important;line-height:1.4!important}
.canvas-editor :is(.canvas-pop-menu,.node-drawer) :is(button,input,select,textarea){font-family:inherit;font-size:13px!important}
.canvas-editor .canvas-pop-menu strong{font-size:12px!important;font-weight:600!important}
.cx-tool-group{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--cx-border);padding:6px 0;margin:3px 0}
.cx-button,.cx-close,.cx-node-row{border:0;border-radius:10px;background:transparent;color:var(--cx-text);font:500 13px/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;cursor:pointer;transition:background var(--cx-duration),transform var(--cx-duration),color var(--cx-duration)}
.cx-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px}
.cx-tool-group .cx-button{flex-direction:column;gap:5px;min-height:52px;padding:6px 4px;width:100%}
.cx-button:not(:disabled):hover,.cx-close:not(:disabled):hover,.cx-node-row:hover{background:var(--cx-hover);color:var(--cx-accent)}
.cx-button:not(:disabled):active,.cx-close:active,.cx-node-row:active{transform:scale(.98)}
.cx-button:disabled,.cx-select:disabled,.cx-range:disabled{opacity:.45;cursor:not-allowed}
.cx-button[aria-expanded="true"],.cx-button[aria-pressed="true"]{background:var(--cx-hover);color:var(--cx-accent)}
.canvas-editor .canvas-left-tools{box-sizing:border-box;width:56px;max-height:none;overflow:visible;transform:translateY(-50%) scale(var(--cx-toolbar-scale,.84));transform-origin:left center}
.canvas-editor .canvas-left-tools button{box-sizing:border-box;width:100%}
.canvas-editor .canvas-left-tools-zone.is-hidden .canvas-left-tools{transform:translateY(-50%) translateX(calc(-100% - 8px)) scale(var(--cx-toolbar-scale,.84))}
.cx-panel,.cx-compare,.cx-focus-bar{box-sizing:border-box;background:var(--cx-bg);color:var(--cx-text);border:1px solid var(--cx-border);box-shadow:var(--cx-shadow);font:400 13px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;animation:cx-enter var(--cx-duration) var(--cx-ease) both}
.cx-panel{position:absolute;left:86px;top:100px;width:min(320px,calc(100% - 104px));max-height:calc(100dvh - 205px);display:flex;flex-direction:column;gap:12px;border-radius:16px;padding:16px;z-index:200}
.cx-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16px;font-weight:600}
.cx-heading h2{margin:0;font-size:16px;font-weight:600;color:inherit;letter-spacing:.01em}
.cx-close{display:grid;place-items:center;width:32px;height:32px;flex:none;padding:6px}
.cx-close>span:not(.cx-icon){display:none}
.cx-input,.cx-select{box-sizing:border-box;border:1px solid var(--cx-border);border-radius:9px;background:var(--cx-bg-soft);color:var(--cx-text);font:400 13px/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;min-height:38px;padding:8px 10px;transition:border-color var(--cx-duration),box-shadow var(--cx-duration)}
.cx-input{width:100%;font-size:13px}.cx-input::placeholder{color:var(--cx-muted)}
.cx-select{font-family:inherit;font-size:13px;max-width:100%}
.cx-filters{display:flex;align-items:center;justify-content:space-between;gap:8px}.cx-filters .cx-select{min-height:32px;padding:5px 8px}
.cx-muted{color:var(--cx-muted);font-weight:400;font-size:12px}
.cx-node-list{overflow:auto;min-height:80px;max-height:55dvh;scrollbar-width:thin}
.cx-node-row{width:100%;display:flex;align-items:center;text-align:left;gap:10px;padding:12px 9px;margin:2px 0}
.cx-node-row>.cx-icon:last-child{width:16px;height:16px;color:var(--cx-muted)}
.cx-row-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:3px}.cx-row-copy strong{font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-node-row.is-selected{background:var(--cx-hover);color:var(--cx-accent)}
.cx-footnote{font-size:11px;color:var(--cx-muted);margin:0;line-height:1.6}.cx-empty{padding:24px 10px;color:var(--cx-muted);text-align:center;font-size:13px}
.cx-compare{padding:22px;width:min(880px,calc(100vw - 48px));max-height:calc(100dvh - 48px);border-radius:20px;overflow:auto}
.cx-compare::backdrop{background:#080d19b3;backdrop-filter:blur(5px);animation:cx-fade var(--cx-duration)}
.cx-compare-picks{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;margin:18px 0}
.cx-compare-picks label{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--cx-muted);font-size:12px}
.cx-compare-viewport{position:relative;height:min(48dvh,470px);min-height:180px;border:1px solid var(--cx-border);border-radius:12px;background:var(--cx-bg-soft);overflow:hidden;cursor:ew-resize;touch-action:none;user-select:none}
.cx-compare-viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.cx-image-a{clip-path:inset(0 50% 0 0)}
.cx-split-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px #0003;pointer-events:none;display:flex;align-items:center;justify-content:center}
.cx-split-line .cx-icon{width:30px;height:30px;background:#fff;filter:drop-shadow(0 1px 3px #000);border-radius:5px}
.cx-badge{position:absolute;top:12px;background:#142238cc;color:#fff;font-size:12px;border-radius:6px;padding:4px 9px;pointer-events:none}.cx-badge-a{left:12px}.cx-badge-b{right:12px}
.cx-image-status{position:absolute;inset:0;display:grid;place-items:center;background:var(--cx-bg-soft);color:var(--cx-muted);font-size:13px}.cx-image-status[hidden]{display:none}
.cx-unready :is(img,.cx-split-line,.cx-badge){visibility:hidden}
.cx-slider-row{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--cx-muted);font-size:12px}.cx-slider-row output{min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.cx-range{flex:1;min-width:0;accent-color:var(--cx-accent);cursor:ew-resize}
.canvas-editor :is(.canvas-editor-topbar,.canvas-left-tools-zone,.canvas-zoom-cluster){transition:opacity var(--cx-duration),visibility var(--cx-duration),transform var(--cx-duration)}
.canvas-editor.cx-focus .canvas-left-tools-zone{opacity:0;visibility:hidden;pointer-events:none}

.cx-focus-bar{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:210;display:flex;align-items:center;gap:6px;border-radius:40px;padding:6px 10px;white-space:nowrap;animation:cx-fade var(--cx-duration)}
.cx-focus-bar[hidden]{display:none}.cx-focus-label{font-size:12px;padding:0 8px;color:var(--cx-muted)}.cx-focus-bar kbd{font-size:11px;line-height:1.4;color:var(--cx-muted);padding-right:6px}
.cx-closing{animation:cx-exit var(--cx-duration) var(--cx-ease) both!important;pointer-events:none}
.cx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes cx-enter{from{opacity:0;translate:0 7px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes cx-exit{to{opacity:0;translate:0 5px;scale:.99}}
@keyframes cx-fade{from{opacity:0}to{opacity:1}}
@media(max-width:640px){.cx-panel{left:80px;width:calc(100% - 96px);top:85px}.cx-compare{padding:16px;width:calc(100vw - 20px)}.cx-compare-picks{gap:8px}.cx-compare-picks>.cx-button span:not(.cx-icon){display:none}.cx-focus-label,.cx-focus-bar kbd{display:none}.cx-focus-bar .cx-button{padding:8px}.cx-focus-bar{gap:1px}}
@media(prefers-reduced-motion:reduce){.canvas-editor{--cx-duration:0ms}.cx-panel,.cx-compare,.cx-focus-bar,.cx-closing,.cx-compare::backdrop{animation:none!important}.canvas-editor :is(.canvas-editor-topbar,.canvas-left-tools-zone,.canvas-zoom-cluster){transition:none!important}}

.canvas-node-title>svg{display:none}.canvas-node-title::before{content:"";display:inline-block;width:14px;height:14px;flex:none;background:currentColor;mask:var(--cx-title-icon) center/contain no-repeat;-webkit-mask:var(--cx-title-icon) center/contain no-repeat}
.canvas-node-title{--cx-title-icon:url('/agent-web/20261112-v1/ui/assets/phosphor/stack.svg')}.canvas-node-title.tone-image{--cx-title-icon:url('/agent-web/20261112-v1/ui/assets/phosphor/images.svg')}.canvas-node-title.tone-text{--cx-title-icon:url('/agent-web/20261112-v1/ui/assets/phosphor/article.svg')}.canvas-node-title.tone-video{--cx-title-icon:url('/agent-web/20261112-v1/ui/assets/phosphor/film-slate.svg')}.canvas-node-title.tone-audio{--cx-title-icon:url('/agent-web/20261112-v1/ui/assets/phosphor/microphone.svg')}
/* Original type hues, with readable light-theme text and the native dark tones. */
.canvas-editor{--cx-type-image:#1d4ed8;--cx-type-video:#6d28d9;--cx-type-text:#047857;--cx-type-audio:#be185d;--cx-type-doc:#92400e;--cx-type-app:#a16207}
.canvas-editor.theme-dark{--cx-type-image:#60a5fa;--cx-type-video:#a78bfa;--cx-type-text:#34d399;--cx-type-audio:#f472b6;--cx-type-doc:#fbbf24;--cx-type-app:#fbbf24}
.canvas-editor .canvas-node-title.tone-image,.canvas-editor .canvas-node-title.tone-director{color:var(--cx-type-image)}
.canvas-editor .canvas-node-title.tone-video{color:var(--cx-type-video)}
.canvas-editor .canvas-node-title.tone-text{color:var(--cx-type-text)}
.canvas-editor .canvas-node-title.tone-audio{color:var(--cx-type-audio)}
.canvas-editor .canvas-node-title.tone-doc{color:var(--cx-type-doc)}
.canvas-editor .canvas-node-title.tone-app{color:var(--cx-type-app)}
.cx-compare-viewport img{background:var(--cx-bg-soft)}
/* Native reset removes dialog's automatic margins; restore viewport centering. */
dialog.cx-compare{position:fixed;inset:0;margin:auto;height:fit-content}
/* Restore the native duplicated-title loop for overflowing labels. */
.canvas-node-title-marquee{display:inline-flex;max-width:none;overflow:visible;white-space:nowrap;animation:canvas-title-marquee 8s linear infinite}
.canvas-node-title-marquee>span[aria-hidden="true"]{display:inline}
@media(prefers-reduced-motion:reduce){.canvas-node-title-marquee{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;animation:none!important;transform:none!important}.canvas-node-title-marquee>span[aria-hidden="true"]{display:none!important}}
.canvas-node-title,.canvas-node-title-input{font-size:13px!important;font-weight:550!important;line-height:1.2!important}
.canvas-editor .canvas-node-head{box-sizing:border-box;height:26px;min-height:26px;padding:0 9px;align-items:center;column-gap:6px!important;line-height:1.2}
.canvas-node-dimensions{font-size:10px!important;line-height:1.2;font-weight:400!important}

/* Keep original topbar and zoom usable in focus mode. */
.cx-focus-bar{top:92px;max-width:calc(100% - 24px);overflow:auto}
.cx-thumb{width:36px;height:40px;object-fit:cover;border-radius:5px;flex:none}
.cx-node-row:has(.cx-thumb)>.cx-icon:first-of-type{display:none}
.cx-input:hover,.cx-select:hover{border-color:var(--cx-accent)}
.cx-panel{max-height:calc(100dvh - 180px)}
.canvas-editor:has(.canvas-persistence-status) .cx-focus-bar{top:160px}

.canvas-editor:has(.canvas-persistence-status) .cx-panel{top:160px;max-height:calc(100dvh - 200px)}
/* Lightweight native comparison card; preserves the native graph geometry. */
.canvas-editor .canvas-node[data-comparison="true"]{box-sizing:border-box;grid-template-rows:26px minmax(0,1fr);border-style:solid;border-color:var(--line);box-shadow:0 2px 8px #00000012;transition:border-color var(--cx-duration),box-shadow var(--cx-duration)}
.canvas-editor .canvas-node[data-comparison="true"].is-neighbor{border-style:solid;border-color:var(--line);box-shadow:none}
.canvas-editor .canvas-node[data-comparison="true"]:is(.is-selected,.is-selected-active){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.canvas-editor .canvas-node[data-comparison="true"] .canvas-node-title{--cx-title-icon:url('/agent-web/20261112-v1/ui/assets/phosphor/columns.svg');color:var(--cx-comparison)!important}
.canvas-editor .canvas-node[data-comparison="true"] .canvas-node-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-node-compare-dimensions{flex:none;color:var(--cx-muted);font-size:10px;line-height:1.2;font-weight:400;white-space:pre;text-align:right;font-variant-numeric:tabular-nums}
.cx-node-compare-dimensions.is-balanced{font-size:8px}
.canvas-editor .canvas-node[data-comparison="true"] .canvas-node-body{height:auto;min-height:0;padding:2px!important;box-sizing:border-box;display:block;overflow:hidden;border-radius:10px}
.canvas-node[data-comparison="true"] .connector-out,.canvas-node[data-comparison="true"] .node-action-bar{display:none!important}
kale-comparison-node{display:block;height:100%;min-height:0;box-sizing:border-box;cursor:default;color:var(--cx-text)}
.cx-node-compare-stage{position:relative;height:100%;min-height:100px;background:var(--cx-bg-soft);border-radius:8px;overflow:hidden;touch-action:none;user-select:none;cursor:default}
.cx-node-compare-stage.is-ready{cursor:grab}
.cx-node-compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:var(--cx-bg-soft);opacity:0;transition:opacity var(--cx-duration)}
.cx-node-compare-stage.is-ready img{opacity:1}
.cx-node-a{clip-path:inset(0 50% 0 0)}
.cx-node-divider{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px #0002;opacity:0;transition:opacity var(--cx-duration)}
.cx-node-grip{position:absolute;bottom:14px;left:var(--cx-split,50%);transform:translate(-50%,50%);pointer-events:none;opacity:0;display:grid;place-items:center;width:20px;height:20px;border:1px solid #fff9;border-radius:50%;background:#18212dcc;color:white;box-shadow:0 1px 4px #0003;transition:background var(--cx-duration),scale var(--cx-duration),opacity var(--cx-duration)}
.cx-node-grip svg{width:14px;height:14px}
.cx-node-compare-stage:hover .cx-node-grip{background:#18212df2;scale:1.04}
.cx-node-compare-stage.is-dragging .cx-node-grip{scale:.96}
/* Keyboard focus belongs to the handle, not the whole image viewport. */
.cx-node-compare-stage:has(.cx-node-split-input:focus-visible) .cx-node-grip{box-shadow:0 0 0 1.5px var(--cx-accent)}
.cx-node-tag{position:absolute;top:8px;padding:2px 5px;background:#152138a6;color:white;border-radius:4px;font-size:10px;line-height:1.3;pointer-events:none;opacity:0;transition:opacity var(--cx-duration)}
.cx-node-tag-a{left:8px}.cx-node-tag-b{right:8px}
.cx-node-compare-stage.is-ready :is(.cx-node-divider,.cx-node-tag,.cx-node-grip){opacity:1}
.cx-node-split-input{position:absolute;left:var(--cx-split,50%);bottom:14px;transform:translate(-50%,50%);width:36px;height:36px;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
.cx-node-split-input:disabled{cursor:default;pointer-events:none}
.cx-node-compare-status{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:var(--cx-bg-soft);font-size:12px;color:var(--cx-muted);text-align:center;pointer-events:none}.cx-node-compare-status[hidden]{display:none}

/* Help grows vertically and wraps long shortcuts instead of creating horizontal scroll. */
.canvas-editor .canvas-help-panel{box-sizing:border-box;width:520px;min-width:0;max-width:calc(100% - 92px);max-height:calc(100% - 32px);left:72px}
.canvas-editor .canvas-help-body{overflow-y:auto;overflow-x:hidden;min-width:0;gap:18px;scrollbar-width:thin}
.canvas-editor .canvas-help-section,.canvas-editor .canvas-help-section ul{min-width:0}
.canvas-editor .canvas-help-section li{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);align-items:start;gap:12px;white-space:normal;line-height:1.55}
.canvas-editor .canvas-help-section li :is(kbd,.help-action,.help-desc){min-width:0;font-size:12px;overflow-wrap:anywhere;white-space:normal}
.canvas-editor .canvas-help-section-title{font-size:12px;color:var(--cx-muted)}
@media(max-width:520px){.canvas-editor .canvas-help-section li{grid-template-columns:1fr;gap:3px}}

/* A bounded name field leaves the center of the canvas unobstructed. */
html .canvas-editor .canvas-editor-topbar .canvas-editor-title{flex:0 1 auto!important;width:340px;min-width:0!important;max-width:35vw!important;margin-right:auto}
html .canvas-editor .canvas-editor-topbar .canvas-editor-title input{width:100%!important;max-width:100%!important;text-overflow:ellipsis}
@media(max-width:640px){html .canvas-editor .canvas-editor-topbar .canvas-editor-title{width:220px;max-width:calc(100% - 60px)!important}}

/* Canvas edit ownership is shared by the desktop and web source editions. */
.cx-edit-session{position:absolute;z-index:1200;top:66px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;border:1px solid #93b4e0;border-radius:12px;background:#f4f8ff;color:#243851;box-shadow:0 6px 20px #00000012;font-size:13px;transition:opacity 180ms ease,transform 180ms ease}
.cx-edit-session[hidden]{display:none}.cx-edit-session span{flex:1;min-width:180px}.cx-edit-session button{border:1px solid #95b4de;background:#fff;color:#245da9;border-radius:7px;padding:7px 10px;cursor:pointer;transition:transform 180ms ease,background 180ms ease}.cx-edit-session button:hover{background:#e8f0fe;transform:scale(1.02)}.cx-edit-session button:active{transform:scale(.98)}.cx-edit-session button:focus-visible{outline:2px solid #3587ed;outline-offset:2px}.cx-edit-session button:disabled{opacity:.5;cursor:wait;transform:none}.canvas-split-pane-root:has(.theme-dark) .cx-edit-session{background:#1c2738;color:#d7e6fa;border-color:#4c6c95}.canvas-split-pane-root:has(.theme-dark) .cx-edit-session button{background:#24354b;color:#d1e4ff;border-color:#58769c}
@media(prefers-reduced-motion:reduce){.cx-edit-session,.cx-edit-session button{transition:none}}

/* Overflow uses the existing native panel and Phosphor MIT icons. */
.canvas-editor .cx-more-tools{width:220px;max-width:calc(100% - 100px);gap:4px;padding:12px;max-height:calc(100% - 24px);overflow:auto}
.cx-more-tools[hidden]{display:none}
.cx-more-tools h2{margin:2px 8px 8px;font-size:12px;font-weight:500;color:var(--cx-muted)}
.cx-more-tools>.cx-button{justify-content:flex-start;min-height:42px;width:100%;text-align:left}
.cx-more-tools>.cx-button:not(:disabled):hover{transform:scale(1.02)}
@media(prefers-reduced-motion:reduce){.cx-more-tools>.cx-button{transition:none!important}}