/* Node presentation adapted from open-ai-canvas (MIT). Shared light/dark tokens;
   chrome, canvas coordinates, media identity and editing behavior stay native. */
.canvas-editor{--yc-node-time:180ms;--yc-node-ease:cubic-bezier(.2,.7,.2,1);--yc-node-muted:#68717e;--yc-node-surface:#eef1f4;--yc-node-track:#d1d7df;--yc-node-ink:#1f2733;--yc-node-blue:#3979d4}
.canvas-editor.theme-dark{--yc-node-muted:#9da3ae;--yc-node-surface:#191b1e;--yc-node-track:#353941;--yc-node-ink:#e9eaee;--yc-node-blue:#7dafea}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]){display:block;box-sizing:border-box;border:1px solid transparent;border-radius:5px;background:transparent;box-shadow:none;transition:border-color var(--yc-node-time) var(--yc-node-ease),box-shadow var(--yc-node-time) var(--yc-node-ease),opacity var(--yc-node-time) var(--yc-node-ease)}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]):is(.is-selected,.is-selected-active){border-color:var(--yc-node-blue);box-shadow:none}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]).is-neighbor:not(.is-selected){border-color:transparent;box-shadow:none}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"])>.canvas-node-head{position:absolute;bottom:100%;left:0;width:calc(100% * var(--yc-node-zoom,1));height:26px;min-height:26px;padding:0;gap:8px;transform:scale(calc(1 / var(--yc-node-zoom,1)));transform-origin:left bottom;background:transparent;color:var(--yc-node-muted)}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]) .canvas-node-title{min-width:0;max-width:240px;flex:1 1 0%;font-size:12px!important;font-weight:500!important;gap:5px}
.canvas-editor .canvas-node .canvas-node-title-text{flex:1 1 0%;min-width:0;max-width:100%}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]) .canvas-node-title::before{width:12px;height:12px}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]) .canvas-node-dimensions{flex:0 0 auto;margin-left:auto;font-size:11px!important;font-variant-numeric:tabular-nums}
.canvas-editor .canvas-node[data-node-distant="true"]:not(:focus-within)>.canvas-node-head{visibility:hidden;opacity:0}
.canvas-editor .canvas-node[data-node-narrow="true"] .canvas-node-dimensions{display:none}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]).is-run-warning{border-color:var(--danger,#c83b38);box-shadow:none;animation:none}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"])>.canvas-node-body{box-sizing:border-box;width:100%;height:100%;padding:0!important;min-height:0;overflow:hidden;border-radius:4px;background:transparent}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]) .node-preview{width:100%;height:100%;border-radius:4px;background:var(--yc-node-surface)}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]) .node-preview.has-media{background:transparent}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]) .node-preview-media{animation:yc-node-reveal 200ms var(--yc-node-ease) both}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]) .node-action-bar{bottom:calc(100% + 34px);top:auto}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"])>.connector{opacity:0;width:28px;height:28px;transition:opacity var(--yc-node-time) var(--yc-node-ease)}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"])>.connector-in{left:-15px}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"])>.connector-out{right:-15px}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"])>.connector:after{width:16px;height:16px;background:var(--panel);border:1px solid var(--yc-node-track);box-shadow:none;transform:translate(-50%,-50%)}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"])>.connector:before{content:"";width:10px;height:10px;color:var(--yc-node-muted);background:currentColor;mask:url('/agent-web/20261112-v1/ui/assets/phosphor/plus.svg') center/contain no-repeat;transform:translate(-50%,-50%)}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):hover>.connector,.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"])>.connector:is(:focus-visible,.is-hot){opacity:1}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"])>.connector:is(:hover,:focus-visible,.is-hot):after{border-color:var(--yc-node-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--yc-node-blue) 15%,transparent);width:18px;height:18px}
.canvas-editor .canvas-edge-path{stroke:#8c929c;stroke-width:1.4px;vector-effect:non-scaling-stroke;stroke-linecap:round;transition:stroke var(--yc-node-time),opacity var(--yc-node-time)}
.canvas-editor .canvas-edge-path.is-muted{stroke:#7b8593}
.canvas-editor.theme-dark .canvas-edge-path{stroke:#6b6f76}
.canvas-editor.theme-dark .canvas-edge-path.is-muted{stroke:#858b95}
.canvas-editor .canvas-edge-path:is(.is-selected,.is-draft),.canvas-editor .canvas-edge-hit:hover+.canvas-edge-path{stroke:var(--yc-node-blue);stroke-width:1.4px;filter:none}
.canvas-editor .canvas-edge-flow:not(.is-running):not(.is-invalid){display:none}
.canvas-editor .canvas-edge-flow.is-running{stroke:var(--yc-node-blue);stroke-width:1.4px;vector-effect:non-scaling-stroke;filter:none;stroke-dasharray:6 32}
.canvas-editor .canvas-edge-flow.is-invalid{stroke:var(--danger,#c83b38);stroke-width:1.4px;filter:none}
.yc-gen-state{position:absolute;inset:0;z-index:4;isolation:isolate;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;overflow:hidden;color:var(--yc-node-ink);background:var(--yc-node-surface);text-align:center;container-type:size;animation:yc-node-reveal 200ms var(--yc-node-ease) both}
/* The original's static phase glow, without adding per-frame canvas effects. */
.yc-gen-state::before{position:absolute;inset:0;z-index:-1;content:"";pointer-events:none;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--yc-node-blue) 14%,transparent),transparent 58%);opacity:.8}
.yc-gen-indicator{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--yc-node-track);color:var(--yc-node-muted);flex:0 0 auto}
.yc-gen-icon{display:inline-block;flex:0 0 auto;width:18px;height:18px;background:currentColor;mask:var(--yc-icon) center/contain no-repeat}
.yc-gen-ring{position:absolute;inset:0;border:1.5px solid transparent;border-right-color:var(--yc-node-blue);border-top-color:var(--yc-node-blue);border-radius:inherit;animation:yc-node-spin 1.2s linear infinite}
.yc-gen-copy{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;max-width:100%;line-height:1.45}
.yc-gen-title{font-size:12px;font-weight:600;color:var(--yc-node-ink)}
.yc-gen-meta,.yc-gen-hint{font-size:12px;color:var(--yc-node-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.yc-gen-meta{white-space:nowrap}
.yc-gen-hint{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px}
.yc-gen-steps{display:flex;gap:4px;width:min(190px,85%);margin-top:2px}
.yc-gen-steps>span{display:flex;flex-direction:column;gap:5px;align-items:center;flex:1;min-width:0}
.yc-gen-steps i{display:block;width:100%;height:2px;background:var(--yc-node-track);transition:background var(--yc-node-time)}
.yc-gen-steps small{font-size:10px;color:var(--yc-node-muted);line-height:1.4}
.yc-gen-steps :is(.is-active,.is-done) i{background:var(--yc-node-blue)}
.yc-gen-steps .is-active small{color:var(--yc-node-ink);font-weight:600}
.yc-gen-steps .is-active i{animation:yc-node-progress 1.6s ease-in-out infinite}
.yc-gen-details{display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--yc-node-muted);font-size:11px;line-height:1.4;padding:5px 7px;cursor:pointer;transition:background var(--yc-node-time),transform var(--yc-node-time),color var(--yc-node-time)}
.yc-gen-details .yc-gen-icon{width:12px;height:12px}
.yc-gen-details:hover{background:color-mix(in srgb,var(--yc-node-ink) 7%,transparent);color:var(--yc-node-ink);transform:scale(1.03)}
.yc-gen-details:active{transform:scale(.98)}
.yc-gen-details:focus-visible{outline:2px solid var(--yc-node-blue);outline-offset:2px}
.yc-gen-details:disabled{opacity:.45;cursor:not-allowed;transform:none}
.yc-gen-state[data-phase="uncertain"] .yc-gen-indicator{color:#a67225}
.yc-gen-state[data-phase="failed"] .yc-gen-indicator{color:var(--danger,#c83b38)}
.canvas-editor .ka-node-progress.yc-agent-node-progress{padding:0;border:0;background:transparent;backdrop-filter:none;border-radius:4px;transition:opacity var(--yc-node-time);overflow:hidden}
.canvas-editor .ka-node-progress.yc-agent-node-progress.is-leaving{opacity:0;pointer-events:none}
@container (max-height:180px){.yc-gen-state{gap:8px;padding:10px}.yc-gen-indicator{width:32px;height:32px}.yc-gen-hint{display:none}.yc-gen-title{font-size:12px}}
@keyframes yc-node-spin{to{transform:rotate(360deg)}}
@keyframes yc-node-progress{50%{opacity:.5}}
@keyframes yc-node-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.canvas-editor :is(.canvas-node,.canvas-edge-path,.yc-gen-state,.yc-gen-ring,.yc-gen-steps i,.yc-gen-details,.node-preview-media){animation:none!important;transition:none!important}}

/* Shared title typography: media heads already compensate for canvas zoom.
   Native card heads keep their original position and compensate only their
   label metrics. Body text, node coordinates and semantic colors stay native. */
.canvas-editor .canvas-node{--yc-title-scale:var(--yc-node-zoom,1)}
.canvas-editor .canvas-node:is([data-node-kind="image"],[data-node-kind="video"]):not([data-comparison="true"]){--yc-title-scale:1}
.canvas-editor .canvas-node :is(.canvas-node-title,.canvas-node-title-input){font-family:var(--kale-ui-font,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif)!important;font-size:calc(12px / var(--yc-title-scale))!important;font-weight:500!important;line-height:1.2!important;letter-spacing:0;gap:calc(5px / var(--yc-title-scale))}
.canvas-editor .canvas-node .canvas-node-title::before{width:calc(12px / var(--yc-title-scale));height:calc(12px / var(--yc-title-scale))}
.canvas-editor .canvas-node:not(:is([data-node-kind="image"],[data-node-kind="video"]))>.canvas-node-head,
.canvas-editor .canvas-node[data-comparison="true"]>.canvas-node-head{height:calc(26px / var(--yc-node-zoom,1));min-height:calc(26px / var(--yc-node-zoom,1));padding-inline:calc(9px / var(--yc-node-zoom,1))}