/* A free-standing companion and speech bubble, independent of the board layout. */
.ai-guide{--guide-paper:#f2f7ff;--guide-paper-ink:#162b49;position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:1400;width:min(390px,calc(100vw - 40px));max-width:none;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none;color:var(--guide-paper-ink);pointer-events:none;isolation:isolate;font-family:'DM Sans',Arial,sans-serif}
.ai-guide [hidden]{display:none!important}.ai-guide button{font-family:inherit;font-size:12px;line-height:1.4;letter-spacing:0;cursor:pointer;min-width:0;transition:background .16s,border-color .16s,color .16s,transform .16s}.ai-guide :is(button,a,[tabindex]):focus-visible{outline:3px solid #5274c4;outline-offset:3px}.ai-guide button:disabled{opacity:.5;cursor:not-allowed}
.guide-character-dock{position:relative;display:flex;justify-content:flex-end;min-width:0;pointer-events:none}
.ai-guide .guide-launch{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;position:relative;pointer-events:auto;width:140px;min-height:180px;padding:0;border:0;border-radius:34px;background:none;color:#e6f4ff;box-shadow:none;touch-action:manipulation}
.guide-character{display:block;width:140px;height:160px;max-width:100%;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 7px 10px #0005);transition:transform .2s ease}
.guide-launch-label{display:block;max-width:100%;padding:5px 11px;border:1px solid #7295ba;border-radius:18px;background:#10213aef;color:#e5f3ff;font-size:10px;line-height:1.4;white-space:nowrap;box-shadow:0 2px 8px #03102033}.ai-guide .guide-launch:hover{background:none;border:0;box-shadow:none}.guide-launch:hover .guide-character{transform:translateY(-3px)}.guide-launch:hover .guide-launch-label{background:#263758;border-color:#abcbf5}.ai-guide .guide-launch:focus-visible{outline-color:#b7ddff;outline-offset:5px}
.guide-teaser{position:absolute;right:123px;bottom:57px;pointer-events:auto;width:221px;max-width:calc(100vw - 151px);padding:17px 17px 15px;border:1px solid #aebfdf;border-radius:19px 19px 3px 19px;background:var(--guide-paper);color:var(--guide-paper-ink);box-shadow:0 9px 30px #01091440}
.guide-teaser:after{content:'';position:absolute;right:-10px;bottom:19px;width:17px;height:17px;transform:rotate(-45deg);border-right:1px solid #aebfdf;border-bottom:1px solid #aebfdf;background:var(--guide-paper);pointer-events:none}
.guide-teaser-title{margin:0;color:#192d4d;font-size:20px;font-weight:600;letter-spacing:-.035em;line-height:1.2}.guide-teaser-copy{margin:8px 0 11px;max-width:165px;color:#526682;font-size:12px;line-height:1.5}
.ai-guide .guide-minimize{position:absolute;right:6px;top:6px;display:grid;place-items:center;min-width:30px;min-height:30px;padding:7px;border:1px solid transparent;border-radius:50%;background:transparent;color:#5b6a86}.guide-minimize>.icon{width:13px;height:13px}.ai-guide .guide-minimize:hover{border-color:#adbeda;background:#e0eafa;color:#142b4d}
.guide-teaser-actions{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0}.ai-guide :is(.guide-start-button,.guide-example-button){display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 11px;border:1px solid transparent;border-radius:6px;font-size:11px;line-height:1.4;white-space:normal;text-align:center}.ai-guide .guide-start-button{border-color:#5368a9;background:linear-gradient(110deg,#23497f,#494482);color:#fff}.guide-start-button>.icon{width:14px;height:14px}.ai-guide .guide-start-button:enabled:hover{background:linear-gradient(110deg,#315d98,#5b549b);border-color:#1d2f61}.ai-guide .guide-example-button{background:transparent;color:#405a80;min-height:32px;padding-block:6px}.guide-example-button>.icon{width:10px;height:10px;fill:currentColor}.ai-guide .guide-example-button:enabled:hover{background:#e2ebfa;border-color:#c0d0e8;color:#142b4d}
/* The outer shell draws the tail; the inner bubble scrolls as one readable surface. */
.guide-speech-shell{position:relative;margin:0 17px -5px 0;pointer-events:none;filter:drop-shadow(0 10px 22px #0109143d)}
.guide-speech-shell:has(>#guide-panel[hidden]){display:none}.guide-speech-shell:after{content:'';position:absolute;right:57px;bottom:-11px;width:22px;height:22px;transform:rotate(45deg);border-right:1px solid #aebfdf;border-bottom:1px solid #aebfdf;background:var(--guide-paper);pointer-events:none;z-index:-1}
.guide-panel{position:relative;min-width:0;width:100%;max-height:min(560px,calc(100dvh - 235px));overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;padding:0 20px 20px;border:1px solid #aebfdf;border-radius:21px;background:var(--guide-paper);color:var(--guide-paper-ink);scrollbar-width:thin;scrollbar-color:#8297b7 #e7effc;scroll-padding-block:55px 18px}
.guide-panel-top{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;min-width:0;min-height:52px;padding:11px 0 9px;margin-bottom:3px;background:var(--guide-paper);border-bottom:1px solid #d4e0ef}.guide-panel-label{color:#586b8c;font:8px/1.6 'IBM Plex Mono',monospace;letter-spacing:.1em}.guide-progress{margin:0 0 0 auto;color:#645a87;font-size:10px;line-height:1.5;overflow-wrap:anywhere}.guide-progress:empty{display:none}
.ai-guide #guide-close{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;min-height:32px;padding:7px;border:1px solid transparent;border-radius:50%;background:transparent;color:#4e6383;margin-left:auto}.guide-progress:not(:empty)+#guide-close{margin-left:0}.ai-guide #guide-close>.icon{width:15px;height:15px}.ai-guide #guide-close:hover{background:#e0eafa;color:#142b4d;border-color:#adbeda}
.guide-message{min-width:0;padding-top:11px}.guide-message h3{color:#162b49;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.025em;margin:0 0 10px}.guide-message p{color:#435a78;font-size:13px;line-height:1.7;margin:0;white-space:pre-line;overflow-wrap:anywhere}.ai-guide #guide-title:focus{outline-offset:4px}
.guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:17px;min-width:0}.guide-actions:empty{display:none}.ai-guide .guide-actions>button,.ai-guide .guide-actions>a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 12px;border:1px solid #a6b8d2;border-radius:7px;background:#e6eefb;color:#243e65;text-align:center;text-decoration:none;font-size:11px;line-height:1.45;overflow-wrap:anywhere}.ai-guide .guide-actions>button:first-child,.ai-guide .guide-actions>.guide-primary{border-color:#5368a9;background:linear-gradient(110deg,#23497f,#494482);color:#fff}.ai-guide .guide-actions>button:hover,.ai-guide .guide-actions>a:hover{border-color:#5778ab;background:#d6e3f7;color:#142b4d}.ai-guide .guide-actions>button:first-child:hover,.ai-guide .guide-actions>.guide-primary:hover{background:linear-gradient(110deg,#315d98,#5b549b);color:#fff}
.ai-guide .guide-handover-explanations{margin-top:15px;border-top:1px solid #c2d2e7;padding-top:11px;color:#435a78;font-size:12px;line-height:1.65}.ai-guide .guide-handover-explanations summary{padding:4px 0;color:#344e7a;cursor:pointer}.ai-guide .guide-handover-explanations ol{max-height:none;overflow:visible;padding-left:21px;margin-bottom:3px}.ai-guide .guide-handover-explanations li{padding:8px 3px 8px 1px}.ai-guide .guide-handover-explanations li strong{color:#203857;font-weight:600}.ai-guide .guide-handover-explanations p{margin:4px 0 0;color:#435a78;font-size:12px;line-height:1.65}
.ai-guide:has(#guide-panel:not([hidden])) .guide-teaser{display:none}.ai-guide.is-minimized .guide-teaser,.ai-guide.is-minimized .guide-speech-shell{display:none}.ai-guide.is-minimized .guide-launch{width:65px;min-height:76px}.ai-guide.is-minimized .guide-character{width:65px;height:76px}.ai-guide.is-minimized .guide-launch-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ai-control .guide-target{outline:2px solid #bcddff!important;outline-offset:4px!important;box-shadow:0 0 0 7px #77baff26,0 0 20px #81b1ff3b;scroll-margin:24px}.ai-control .guide-target:focus-visible{outline-style:double!important;outline-width:4px!important}
/* Fixed positioning is retained in Focus view; this section contributes no row. */
.board-focused .ai-guide{position:fixed;flex:none;min-height:0;max-height:none;overflow:visible}
/* A lesson belongs near the work, never permanently over it. The guide can
   swap screen sides, or tuck its explanation away while controls stay handy. */
.ai-guide[data-dock=left]{left:max(20px,env(safe-area-inset-left));right:auto}
.ai-guide[data-dock=left] .guide-character-dock{justify-content:flex-start}
.ai-guide[data-dock=left] .guide-speech-shell{margin:0 0 -5px 17px}
.ai-guide[data-dock=left] .guide-speech-shell:after{left:57px;right:auto}
.ai-guide[data-dock=left] .guide-teaser{left:123px;right:auto;border-radius:19px 19px 19px 3px}
.ai-guide[data-dock=left] .guide-teaser:after{left:-10px;right:auto;transform:rotate(135deg)}
.ai-guide.is-minimized{width:65px}
.ai-guide[data-dock=left].is-minimized .guide-motion-toggle{left:52px;right:auto}
.guide-bubble-tools{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #d4e0ef}
.ai-guide .guide-bubble-tools button{border:0;background:transparent;color:#405a80;min-height:36px;padding:6px 3px;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.ai-guide .guide-bubble-tools button:hover{color:#193359}
.ai-guide[data-compact=true] .guide-message p,.ai-guide[data-compact=true] .guide-handover-explanations{display:none}
.ai-guide[data-compact=true] .guide-message h3{font-size:16px;margin-bottom:0}
.ai-guide[data-compact=true] .guide-panel{max-height:240px;padding-bottom:12px}
.ai-guide[data-compact=true] .guide-actions{margin-top:10px}
.ai-guide[data-compact=true] .guide-launch{width:75px;min-height:91px}
.ai-guide[data-compact=true] .guide-character{width:75px;height:86px}
.ai-guide[data-compact=true] .guide-launch-label{display:none}
.ai-guide[data-compact=true] .guide-speech-shell:after{right:29px}
.ai-guide[data-compact=true][data-dock=left] .guide-speech-shell:after{left:29px;right:auto}
@media(max-width:760px){
 .ai-guide{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:min(355px,calc(100vw - 20px))}.ai-guide .guide-launch{width:95px;min-height:130px}.guide-character{width:95px;height:108px}.guide-launch-label{padding:4px 7px;font-size:9px}
 .guide-teaser{right:87px;bottom:40px;width:214px;max-width:calc(100vw - 119px);padding:14px 15px 13px;border-radius:17px 17px 3px 17px}.guide-teaser-title{font-size:18px}.guide-teaser-copy{font-size:11px;margin:6px 0 10px}.ai-guide .guide-start-button{min-height:38px;font-size:11px;padding:8px 10px}.ai-guide .guide-example-button{min-height:34px;font-size:10px;padding:7px 10px}.ai-guide .guide-minimize{right:3px;top:3px}
 .guide-speech-shell{margin-right:5px;margin-bottom:0}.guide-speech-shell:after{right:38px;width:18px;height:18px;bottom:-9px}.guide-panel{max-height:min(560px,calc(100dvh - 170px));padding:0 17px 17px;border-radius:18px}.guide-panel-top{gap:4px 8px}.guide-message h3{font-size:18px}.guide-message p{font-size:13px;line-height:1.65}.ai-guide #guide-close{width:36px;height:36px;min-height:36px}.ai-guide .guide-actions>button,.ai-guide .guide-actions>a{min-height:40px;font-size:11px;padding:9px 11px}
 .ai-guide[data-dock=left]{left:max(10px,env(safe-area-inset-left));right:auto}.ai-guide[data-dock=left] .guide-speech-shell{margin:0 0 0 5px}.ai-guide[data-dock=left] .guide-speech-shell:after{left:38px}
 .ai-guide[data-dock=left] .guide-teaser{left:87px;right:auto}
 .ai-guide #guide-close,.ai-guide .guide-minimize{width:44px;height:44px;min-height:44px}
 .guide-teaser-title{padding-right:22px}
 .guide-panel{max-height:min(480px,calc(100dvh - 185px))}.ai-guide .guide-bubble-tools button{min-height:40px}.ai-guide[data-compact=true] .guide-panel{max-height:225px}
 .guide-actions{position:sticky;bottom:-17px;z-index:2;padding:10px 0;margin-bottom:-7px;border-top:1px solid #c2d2e7;background:var(--guide-paper)}
}
@media(max-width:390px){.guide-panel-label{font-size:7px}.guide-progress{font-size:9px;max-width:145px}.guide-teaser{right:85px}.ai-guide[data-dock=left] .guide-teaser{left:85px}.ai-guide.is-minimized{width:55px}.ai-guide.is-minimized .guide-launch{width:55px;min-height:66px}.ai-guide.is-minimized .guide-character{width:55px;height:66px}.ai-guide[data-dock=left].is-minimized .guide-motion-toggle{left:44px}}
@media(max-height:550px) and (min-width:761px){.ai-guide .guide-launch{width:90px;min-height:110px}.guide-character{width:90px;height:90px}.guide-panel{max-height:calc(100dvh - 155px)}.guide-speech-shell{margin-right:0}.guide-speech-shell:after{right:35px}.guide-teaser{right:90px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.ai-guide *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.guide-launch:hover .guide-character{transform:none}.ai-control .guide-target{scroll-behavior:auto!important}}
@media(forced-colors:active){.guide-teaser,.guide-panel,.guide-panel-top{border-color:CanvasText;background:Canvas;color:CanvasText}.ai-guide :is(button,a){border:1px solid ButtonText;color:ButtonText;background:ButtonFace}.ai-guide :is(p,h3,.guide-panel-label,.guide-progress){color:CanvasText}.guide-launch-label{background:Canvas;color:CanvasText;border-color:CanvasText}.guide-character{forced-color-adjust:none}.ai-control .guide-target{outline-color:Highlight!important}.guide-speech-shell:after,.guide-teaser:after{border-color:CanvasText;background:Canvas}}
/* Selected request output: compact, persistent and independent of the guide. */
.guide-results{min-width:0;padding:11px 17px 12px;border-bottom:1px solid #31526c;background:linear-gradient(100deg,#0b2133,#0a1b2c);color:#c4dced;overflow-wrap:anywhere;flex:0 0 auto}
.guide-results [hidden]{display:none!important}.guide-result-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}.guide-result-title{margin:0;color:#e4f2ff;font-size:12px;line-height:1.5;font-weight:500}.guide-result-status{color:#9bcbdc;font:9px/1.5 'IBM Plex Mono',monospace}.guide-results[data-phase=paused] .guide-result-status{color:#f5d39a}.guide-results[data-phase=completed] .guide-result-status{color:#9cdfc4}.guide-results[data-phase=stopped] .guide-result-status{color:#e0b6ca}
.guide-result-inspect{margin-left:auto;border:1px solid #466c87;border-radius:4px;padding:6px 9px;min-height:30px;background:#102b40;color:#c7e8fb;font-family:inherit;font-size:10px;line-height:1.4;cursor:pointer}.guide-result-inspect:hover{border-color:#93c9e5;background:#1b3e56}.guide-result-request{margin:3px 0;color:#a7c8df;font-size:10px;line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.guide-result-explanation{margin:4px 0;color:#9fbdd3;font-size:10px;line-height:1.6}.guide-result-output{margin:7px 0 0;padding-left:10px;border-left:2px solid #8aaee1;color:#deedf8;font-size:12px;line-height:1.65;white-space:pre-wrap}
.guide-result-full{margin:3px 0 0 12px}.guide-result-full>summary{display:list-item;width:fit-content;color:#b9dfff;cursor:pointer;font-size:10px;line-height:1.6;padding:6px 3px}.guide-result-full>summary:hover{color:#fff}.guide-result-full-text{margin:3px 0 6px;max-height:220px;overflow:auto;overscroll-behavior:contain;padding:9px 12px;border:1px solid #3c5e7b;border-radius:4px;background:#071827;color:#d7e9f7;font-size:12px;line-height:1.7;white-space:pre-wrap;scrollbar-width:thin;scrollbar-color:#557a97 #091c2e}.guide-result-value{margin:7px 0 0;color:#b1ceca;font-size:10px;line-height:1.65}.guide-result-note{display:block;margin-top:5px;color:#8eafc7;font-size:9px;line-height:1.5}.guide-results :is(button,summary,[tabindex]):focus-visible{outline:2px solid #c0ecff;outline-offset:3px}
.guide-results.is-empty{display:flex;align-items:baseline;gap:6px 14px;padding-block:9px}.guide-results.is-empty .guide-result-status{display:none}.guide-results.is-empty .guide-result-explanation{margin:0}.board-focused .guide-results{flex:0 1 auto;max-height:min(160px,20dvh);min-height:40px;padding:7px 13px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#557a97 #091c2e}.board-focused .guide-result-request{display:none}.board-focused .guide-result-output{font-size:11px;line-height:1.55;margin-top:5px}.board-focused .guide-result-explanation{font-size:9px;margin:2px 0}.board-focused .guide-result-full-text{max-height:120px}.board-focused .guide-result-value{font-size:9px;margin-top:5px}.board-focused .guide-result-note{font-size:8px;margin-top:3px}
@media(max-width:760px){.guide-results{padding:10px 11px}.guide-result-header{gap:5px 8px}.guide-result-title{font-size:11px}.guide-result-status{font-size:8px}.guide-result-inspect{min-height:36px;font-size:10px;padding:7px 8px}.guide-result-output{font-size:12px;line-height:1.65}.guide-result-full>summary{min-height:36px;padding-block:8px}.guide-result-full-text{padding:9px;font-size:12px}.guide-results.is-empty{display:block;padding-block:8px}.guide-results.is-empty .guide-result-title{font-size:10px}.guide-results.is-empty .guide-result-explanation{margin-top:2px}.board-focused .guide-results{padding:6px 10px;max-height:min(135px,18dvh)}.board-focused .guide-result-inspect{min-height:32px;font-size:9px}.board-focused .guide-result-header{gap:5px 7px}.board-focused .guide-result-status{font-size:8px}}
@media(max-width:390px){.guide-result-header{column-gap:7px}.guide-result-title{font-size:10px}.guide-result-inspect{padding-inline:6px;font-size:9px}.guide-result-request{font-size:9px}}
@media(forced-colors:active){.guide-results{background:Canvas;color:CanvasText;border-color:CanvasText}.guide-results :is(p,small,h3,span){color:CanvasText!important}.guide-result-output,.guide-result-full-text{border-color:CanvasText;background:Canvas}.guide-result-inspect{border-color:ButtonText;background:ButtonFace;color:ButtonText}.guide-result-full>summary{color:LinkText}}

/* Open help must never consume the workspace: keep a usable canvas and let
   the focus shell scroll when the visitor opens several supporting panels. */
.ai-control.board-focused{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#557a97 #091c2e}
.ai-control.board-focused .ai-guide,.ai-control.board-focused .guide-results{flex-shrink:0}
.ai-control.board-focused .control-grid{flex:1 0 380px;min-height:380px}
@media(max-width:760px){.ai-control.board-focused .control-grid{flex-basis:440px;min-height:440px}.ai-control.board-focused .workflow-area{min-height:290px}.ai-control.board-focused .workflow-canvas{min-height:230px}}

/* Closing a speech bubble leaves a recognisable companion, not a tiny icon. */
#ai-guide{--guide-aura:#76dcff}
body[data-world=robots] #ai-guide{--guide-aura:#eed18e}
#ai-guide .guide-launch::before{content:'';position:absolute;inset:20px 8px 27px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--guide-aura) 26%,transparent),transparent 70%);filter:blur(7px);pointer-events:none}
#ai-guide .guide-character-art{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--guide-aura) 40%,transparent)) drop-shadow(0 7px 10px #0007)}
#ai-guide:is(.is-minimized,[data-compact=true]){width:112px}
#ai-guide[data-compact=true]:not(.is-minimized){width:min(390px,calc(100vw - 40px))}
#ai-guide:is(.is-minimized,[data-compact=true]) .guide-launch{width:112px;min-height:152px}
#ai-guide:is(.is-minimized,[data-compact=true]) :is(.guide-character,.guide-character-rig){width:112px;height:128px}
#ai-guide:is(.is-minimized,[data-compact=true]) .guide-launch-label{display:block;position:static;width:auto;height:auto;padding:5px 10px;overflow:visible;clip:auto;border:1px solid #90c4df;font-size:11px;font-weight:650;box-shadow:0 0 12px #72d4ff30}
#ai-guide.is-minimized .guide-motion-toggle{right:96px;bottom:6px}
#ai-guide[data-dock=left].is-minimized .guide-motion-toggle{left:96px;right:auto}
@media(max-width:760px){
 #ai-guide:is(.is-minimized,[data-compact=true]){width:86px}
 #ai-guide[data-compact=true]:not(.is-minimized){width:min(355px,calc(100vw - 20px))}
 #ai-guide:is(.is-minimized,[data-compact=true]) .guide-launch{width:86px;min-height:118px}
 #ai-guide:is(.is-minimized,[data-compact=true]) :is(.guide-character,.guide-character-rig){width:86px;height:96px}
 #ai-guide:is(.is-minimized,[data-compact=true]) .guide-launch-label{font-size:10px;padding:4px 8px}
 #ai-guide.is-minimized .guide-motion-toggle{right:77px;bottom:0;width:40px;height:40px}
 #ai-guide[data-dock=left].is-minimized .guide-motion-toggle{left:77px;right:auto}
}