.ai-panel{position:fixed;top:126px;right:12px;bottom:45px;z-index:2300;width:min(398px,calc(100vw - 24px));max-height:calc(100dvh - 170px);overflow:auto;box-sizing:border-box;border:1px solid #7396a5;border-radius:14px;background:#f3f9fc;color:#15364a;box-shadow:0 12px 34px #13253455;font:14px/1.45 "Segoe UI",sans-serif}.ai-panel[hidden]{display:none}.ai-panel-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#e4f0f7;border-bottom:1px solid #afcbd9}.ai-panel-head strong{font-size:17px}.ai-panel-body{display:grid;gap:10px;padding:12px}.ai-panel label{display:grid;gap:4px;font-weight:600}.ai-panel select,.ai-panel input[type=url]{width:100%;box-sizing:border-box;padding:7px;border:1px solid #8daebb;border-radius:7px;background:#fff;color:#142f3d}.ai-panel input[type=range]{width:100%;accent-color:#176d83}.ai-panel button{padding:7px 10px;border:1px solid #527e92;border-radius:7px;background:#fff;color:#153c50;font:inherit;font-weight:600;cursor:pointer}.ai-panel button:hover{background:#e0f1f8}.ai-panel button:focus-visible,.ai-panel select:focus-visible,.ai-panel input:focus-visible{outline:3px solid #e0831a;outline-offset:2px}.ai-panel button:disabled{opacity:.5;cursor:wait}.ai-panel .ai-actions{display:flex;flex-wrap:wrap;gap:5px}.ai-panel #ai-start,.ai-panel #ai-connect,.ai-panel #ai-load-model{background:#176d83;color:white}.ai-panel #ai-start:hover,.ai-panel #ai-connect:hover,.ai-panel #ai-load-model:hover{background:#14546a}.ai-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.ai-states span{min-width:0;padding:5px;border:1px solid #bfd4df;border-radius:6px;background:#fff;font-size:11px}.ai-states b{display:block;overflow-wrap:anywhere}.ai-preview{position:relative;overflow:hidden;aspect-ratio:4/3;max-height:230px;border-radius:8px;background:#162936}.ai-preview video,.ai-preview canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}.ai-panel #ai-result{margin:0;padding:9px;border-radius:7px;background:#fff;border:1px solid #bfd4df;font-weight:650;min-height:21px}.ai-panel #ai-performance{margin:0;color:#3e6271;font-size:12px}.ai-panel #ai-message{margin:0;min-height:30px;color:#204a61}.ai-panel section{display:grid;gap:7px;padding:8px;border-top:1px solid #c2d4dc}.ai-panel section[hidden]{display:none}.ai-panel small{font-size:12px;overflow-wrap:anywhere}.ai-panel details{border-top:1px solid #c2d4dc;padding-top:7px}.ai-panel summary{cursor:pointer;font-weight:700}.ai-panel ol{padding-left:20px}.ai-panel li{margin-bottom:5px}html[data-theme=dark] .ai-panel{border-color:#5d8395;background:#1c3040;color:#e2f1fb}html[data-theme=dark] .ai-panel-head{background:#253e50;border-color:#527284}html[data-theme=dark] .ai-panel select,html[data-theme=dark] .ai-panel input[type=url],html[data-theme=dark] .ai-panel button,html[data-theme=dark] .ai-states span,html[data-theme=dark] .ai-panel #ai-result{background:#253e50;color:#e2f1fb;border-color:#5d8395}html[data-theme=dark] .ai-panel #ai-start,html[data-theme=dark] .ai-panel #ai-connect,html[data-theme=dark] .ai-panel #ai-load-model{background:#176d83;color:white}html[data-theme=dark] .ai-panel #ai-message,html[data-theme=dark] .ai-panel #ai-performance{color:#d5e9f3}@media(max-width:600px){.ai-panel{top:126px;right:5px;bottom:32px;width:calc(100vw - 10px);max-height:calc(100dvh - 158px)}}
.ai-panel .ai-panel-head{color:#15364a}html[data-theme=dark] .ai-panel .ai-panel-head{color:#e2f1fb}

/* 030: expand the actual video, while keeping the editor reachable and the panel scrollable. */
.ai-panel{width:min(700px,calc(100vw - 24px))}
.ai-panel.ai-panel-large{width:min(920px,calc(100vw - 24px))}
.ai-preview{max-height:none;aspect-ratio:auto;height:min(46vw,470px);min-height:360px}
.ai-panel.ai-panel-large .ai-preview{height:min(52vw,520px)}
.ai-preview video,.ai-preview canvas{object-fit:contain}
.ai-panel-head .ai-head-actions{display:flex;gap:7px;align-items:center}
.ai-panel-head #ai-size{font-size:12px;white-space:nowrap}
.ai-overlay-option{display:flex!important;grid-template-columns:none!important;align-items:center;gap:7px;font-weight:600}
.ai-overlay-option input{accent-color:#B32D1B}
@media(max-width:600px){.ai-panel,.ai-panel.ai-panel-large{width:calc(100vw - 10px)}.ai-preview,.ai-panel.ai-panel-large .ai-preview{height:min(72vw,400px);min-height:0}}

/* 031: a movable, eight-direction resizable window with an independently scrolling body. */
.ai-panel{right:auto;bottom:auto;max-height:none;overflow:visible;display:flex;flex-direction:column;min-width:0;min-height:0}
.ai-panel-head{position:relative;flex:0 0 auto;cursor:move;touch-action:none;min-height:46px;box-sizing:border-box;gap:8px}
.ai-panel-head:focus-visible,.ai-resize-handle:focus-visible{outline:3px solid #e0831a;outline-offset:-2px}
.ai-panel-head strong{flex:1;min-width:0;overflow-wrap:anywhere}
.ai-panel-body{flex:1;min-height:0;overflow:auto;align-content:start;overscroll-behavior:contain}
.ai-panel-head .ai-head-actions{flex:0 0 auto}
.ai-panel.ai-minimized{visibility:hidden;pointer-events:none}
.ai-panel-head #ai-minimize{min-width:32px;height:32px;padding:0;font-size:22px;line-height:1}
footer #ai-restore{min-height:28px;padding:3px 10px;border:1px solid var(--editor-border,#8295a0);border-radius:7px;background:var(--editor-panel,#f3f9fc);color:inherit;font:600 12px/1.25 "Segoe UI",sans-serif;cursor:pointer}
footer #ai-restore[hidden]{display:none}
footer #ai-restore:focus-visible{outline:3px solid #e0831a;outline-offset:2px}
.ai-panel-head #ai-reset-window{font-size:12px;white-space:normal;max-width:145px}
.ai-preview,.ai-panel.ai-panel-large .ai-preview{height:clamp(200px,65cqw,520px);min-height:200px;flex:none}
.ai-panel{container-type:inline-size}
.ai-resize-handle{position:absolute;z-index:4;touch-action:none}
.ai-resize-n,.ai-resize-s{left:18px;right:18px;height:8px;cursor:ns-resize}
.ai-resize-n{top:-4px}.ai-resize-s{bottom:-4px}
.ai-resize-e,.ai-resize-w{top:18px;bottom:18px;width:8px;cursor:ew-resize}
.ai-resize-e{right:-4px}.ai-resize-w{left:-4px}
.ai-resize-ne,.ai-resize-nw,.ai-resize-se,.ai-resize-sw{width:20px;height:20px}
.ai-resize-ne{right:-7px;top:-7px;cursor:nesw-resize}.ai-resize-nw{left:-7px;top:-7px;cursor:nwse-resize}
.ai-resize-se{right:-7px;bottom:-7px;cursor:nwse-resize}.ai-resize-sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.ai-panel[lang=dz]{font-family:"Noto Sans Tibetan","Microsoft Himalaya","Jomolhari","Segoe UI",sans-serif;line-height:1.65}
.ai-panel[lang=dz] .ai-panel-body{line-height:1.7}
.ai-panel[lang=dz] button,.ai-panel[lang=dz] select{line-height:1.55}
.ai-panel[lang=dz] .ai-states span{font-size:12px;line-height:1.6}
@media(max-width:600px){.ai-panel{max-height:none;width:auto}.ai-preview,.ai-panel.ai-panel-large .ai-preview{height:clamp(180px,65cqw,360px);min-height:180px}}

/* 034: Keep selection and status beside Connect, with Stop last at every width. */
.ai-panel .ai-actions{align-items:flex-start;gap:8px}
.ai-panel .ai-connect-guide{display:grid;flex:1 1 350px;grid-template-columns:minmax(145px,1fr) auto auto;align-items:start;min-width:0;gap:5px}
.ai-panel .ai-connect-guide select{min-width:0;max-width:100%}
.ai-panel .ai-connect-guide button{white-space:normal}
.ai-panel .ai-connect-guide small{grid-column:1/-1}
.ai-panel .ai-connect-guide small{display:block;line-height:1.45;color:#315a6d}
.ai-panel #ai-port-status{font-weight:600;color:#176075}
.ai-panel[lang=dz] .ai-connect-guide small{line-height:1.7}
html[data-theme=dark] .ai-panel .ai-connect-guide small{color:#d5e9f3}
html[data-theme=dark] .ai-panel #ai-port-status{color:#b3e5f7}
@container(max-width:650px){.ai-panel .ai-connect-guide{flex-basis:100%}}
@container(max-width:420px){.ai-panel .ai-connect-guide{grid-template-columns:minmax(0,1fr) auto}.ai-panel #ai-port-list{grid-column:1/-1}.ai-panel #ai-connect{grid-column:2}.ai-panel #ai-stop{order:1}}

/* 036: Let the result row size to its text, padding and border. */
.ai-panel .ai-panel-body{grid-auto-rows:max-content}
.ai-panel #ai-result{display:flex;align-items:center;min-height:calc(1.5em + 20px);height:auto;line-height:1.5;padding:9px 12px;overflow-wrap:anywhere}
.ai-panel[lang=dz] #ai-result{min-height:calc(1.8em + 22px);line-height:1.8;padding-block:10px}
.ai-panel label[hidden]{display:none}
.druk-ai-subheading .blocklyFlyoutLabelText{font-size:12px;font-weight:700;opacity:.82}
