/* ─────────────────────────────────────────────
   Block Programming Lab — Scratch-style studio
   Layout:  [ palette+blocks | stage + sprite panel ]
   Violet = Code mode identity, cyan = Stage.
───────────────────────────────────────────── */

.blab-root{
    --blab-accent:#a78bfa;
    --blab-accent-2:#22d3ee;
    --blab-bg:#0f1720;
    --blab-panel:#16212e;
    --blab-panel-2:#1b2836;
    --blab-line:#26374a;
    --blab-text:#e6edf3;
    --blab-muted:#8aa0b5;
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--blab-bg);
    color:var(--blab-text);
    border:1px solid var(--blab-line);
    border-radius:12px;
    overflow:hidden;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.blab-root.blab-fullscreen{
    position:fixed; top:0; left:0;
    width:100vw; height:100vh;
    z-index:99999; border-radius:0; margin:0;
}

/* ── Top bar ── */
.blab-topbar{
    display:flex; align-items:center; gap:8px;
    padding:9px 12px;
    background:var(--blab-panel);
    border-bottom:2px solid var(--blab-accent);
    flex-wrap:wrap;
}
.blab-logo{
    font-weight:700; font-size:15px; color:var(--blab-accent);
    display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.blab-run-btn{
    display:flex; align-items:center; gap:7px;
    background:#3fb950; color:#08260f;
    border:0; border-radius:20px;
    padding:8px 18px; font-weight:700; font-size:14px; cursor:pointer;
}
.blab-run-btn:hover{ filter:brightness(1.08); }
.blab-run-btn.stop{ background:#f85149; color:#fff; }
.blab-run-icon{ width:15px; height:15px; fill:currentColor; }

.blab-tool-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    background:transparent; color:var(--blab-text);
    border:1px solid var(--blab-line); border-radius:8px;
    padding:7px 10px; font-size:13px; cursor:pointer;
}
.blab-tool-btn:hover{ border-color:var(--blab-accent); color:var(--blab-accent); }
.blab-sep{ width:1px; height:22px; background:var(--blab-line); margin:0 3px; }
.blab-spacer{ flex:1; }
select.blab-tool-btn{ max-width:160px; }

.blab-modes{ display:flex; background:var(--blab-bg); border:1px solid var(--blab-line); border-radius:20px; padding:3px; }
.blab-mode{
    border:0; background:transparent; color:var(--blab-muted);
    padding:6px 14px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer;
}
.blab-mode.active{ background:var(--blab-accent); color:#1a1030; }
.blab-mode.active[data-mode="stage"]{ background:var(--blab-accent-2); color:#04222a; }

/* ── Body ── */
.blab-body{ flex:1 1 auto; display:flex; min-height:0; overflow:hidden; }
/* min-height/min-width:0 + overflow:hidden are essential: without them Blockly
   measures a container taller than the visible area, so the palette flyout's
   scroll range is wrong and the last blocks can't be reached. */
.blab-blocks{
    flex:1 1 auto;
    min-width:0; min-height:0;
    position:relative;
    overflow:hidden;
}
.blab-blocks .injectionDiv{ height:100% !important; width:100% !important; }

/* Right column: stage on top, sprites below */
.blab-right{
    width:430px; min-width:320px;
    display:flex; flex-direction:column;
    border-left:1px solid var(--blab-line);
    background:var(--blab-panel);
    min-height:0;          /* let children shrink instead of overflowing */
    overflow:hidden;
}
.blab-panel-head{
    display:flex; align-items:center; gap:8px;
    padding:7px 11px;
    font-size:11px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--blab-muted);
    border-bottom:1px solid var(--blab-line);
}
.blab-panel-head .blab-tool-btn{ padding:3px 8px; font-size:11px; }

/* Stage */
.blab-stage-wrap{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:#0d1820; padding:10px;
}
.blab-stage{
    background:#fff; border-radius:8px;
    width:100%; max-width:480px; height:auto;
    box-shadow:0 6px 22px rgba(0,0,0,.4);
}

/* Sprite tray */
.blab-sprites{
    flex:0 0 auto;
    border-top:1px solid var(--blab-line);
    background:var(--blab-panel-2);
    padding:9px 10px;
    display:flex; flex-wrap:wrap; gap:9px;
    max-height:150px; overflow:auto;
}
.blab-sprite{
    width:74px; padding:7px 4px;
    background:var(--blab-bg);
    border:2px solid var(--blab-line); border-radius:9px;
    text-align:center; cursor:pointer; position:relative;
}
.blab-sprite.active{ border-color:var(--blab-accent); box-shadow:0 0 0 2px rgba(167,139,250,.25); }
.blab-sprite .em{ font-size:26px; line-height:1.2; }
.blab-sprite .nm{
    font-size:11px; color:var(--blab-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.blab-sprite .x{
    position:absolute; top:-7px; right:-7px;
    width:19px; height:19px; line-height:17px;
    border-radius:50%; background:#f85149; color:#fff;
    font-size:12px; font-weight:700; display:none;
}
.blab-sprite:hover .x{ display:block; }
.blab-add{
    width:74px; display:flex; align-items:center; justify-content:center;
    border:2px dashed var(--blab-line); border-radius:9px;
    color:var(--blab-muted); font-size:22px; cursor:pointer; background:transparent;
}
.blab-add:hover{ border-color:var(--blab-accent); color:var(--blab-accent); }

/* Generated Python — a textarea so it can be edited by hand */
.blab-code{
    border:0; outline:none; resize:none; width:100%;
    display:block;
    flex:1 1 auto; min-height:0;   /* shrinks so the console is never pushed away */
    margin:0; padding:13px; overflow:auto;
    background:#0d1820; color:#c9d1d9;
    font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
    font-size:12.5px; line-height:1.65;
    white-space:pre-wrap; word-break:break-word;
}

/* Console */
/* Console: fixed basis (drag the handle to resize), never squeezed out. */
.blab-console{
    flex:0 0 auto;
    height:200px; min-height:96px; max-height:75%;
    display:flex; flex-direction:column;
    border-top:1px solid var(--blab-line);
    background:#0d1820;
}
.blab-console-resize{
    flex:0 0 auto;
    height:7px; cursor:ns-resize;
    background:var(--blab-line);
    position:relative;
}
.blab-console-resize::after{
    content:''; position:absolute; left:50%; top:2px;
    width:40px; height:3px; margin-left:-20px;
    border-radius:3px; background:var(--blab-muted); opacity:.6;
}
.blab-console-resize:hover{ background:var(--blab-accent); }
.blab-console-out{
    flex:1 1 auto; min-height:0;
    overflow:auto; padding:9px 12px;
    font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
    font-size:13px; line-height:1.6;
}
.blab-console-out div{ white-space:pre-wrap; word-break:break-word; }
.l-out{ color:#c9d1d9; }
.l-err{ color:#f85149; }
.l-info{ color:#8aa0b5; font-style:italic; }
.l-warn{ color:#e3b341; }
.l-prompt{ color:var(--blab-accent); }
.l-in{ color:#3fb950; }

/* Answer row — lives INSIDE the console output, flowing with the log lines. */
.blab-input-row{
    display:flex; align-items:center; gap:6px;
    margin-top:2px;
}
.blab-inline-cin{
    flex:1;
    background:transparent; color:#3fb950;
    border:0; border-bottom:1px dashed var(--blab-accent);
    padding:2px 2px;
    font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
    font-size:13px;
}
.blab-inline-cin:focus{ outline:none; border-bottom-color:#3fb950; }
.blab-input-row input{
    flex:1; background:#0f1720; color:var(--blab-text);
    border:1px solid var(--blab-accent); border-radius:6px; padding:7px 10px;
    font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px;
}
.blab-input-row input:focus{ outline:none; box-shadow:0 0 0 2px rgba(167,139,250,.25); }

/* Status */
.blab-status{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--blab-muted); }
.blab-dot{ width:8px; height:8px; border-radius:50%; background:var(--blab-muted); }
.blab-dot.loading{ background:#e3b341; animation:blab-pulse 1s infinite; }
.blab-dot.running{ background:#3fb950; animation:blab-pulse 1s infinite; }
.blab-dot.done{ background:#3fb950; }
.blab-dot.error{ background:#f85149; }
@keyframes blab-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.blab-blocks .injectionDiv{ background:var(--blab-bg); }
.blocklyMainBackground{ stroke:none !important; }

@media (max-width:900px){
    .blab-body{ flex-direction:column; }
    .blab-right{ width:auto; border-left:0; border-top:1px solid var(--blab-line); }
}
@media (prefers-reduced-motion:reduce){
    .blab-dot.loading,.blab-dot.running{ animation:none; }
}


/* ── Blockly palette: make category names readable on the dark shell ── */
.blab-root .blocklyToolboxDiv{
    background:var(--blab-panel) !important;
    border-right:1px solid var(--blab-line);
    padding:6px 0;
}
.blab-root .blocklyTreeRow{
    padding:3px 0;
    border-radius:0 16px 16px 0;
    margin-right:8px;
}
.blab-root .blocklyTreeLabel{
    color:#e6edf3 !important;          /* was near-invisible grey */
    font:600 13.5px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
}
.blab-root .blocklyTreeRow:hover{ background:#22303f !important; }
.blab-root .blocklyTreeRow:hover .blocklyTreeLabel{ color:#fff !important; }
.blab-root .blocklyTreeSelected{ background:#2b3a4c !important; }
.blab-root .blocklyTreeSelected .blocklyTreeLabel{ color:#fff !important; }
.blab-root .blocklyFlyoutBackground{ fill:#16212e !important; fill-opacity:.97 !important; }


/* Editable Python panel */
textarea.blab-code{
    background:#0d1820; color:#c9d1d9;
    font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
    font-size:12.5px; line-height:1.65;
    padding:13px; border:0;
}
textarea.blab-code[readonly]{ opacity:.95; cursor:default; }
textarea.blab-code.editing{
    background:#0f1e2a;
    box-shadow:inset 0 0 0 2px var(--blab-accent);
    cursor:text;
}
textarea.blab-code:focus{ outline:none; }


/* CodeMirror inside the Python panel */
.blab-cm-wrap{ flex:1 1 auto; min-height:0; overflow:hidden; }
.blab-cm-wrap .CodeMirror{ height:100%; font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
.CodeMirror-hints{
    z-index:100001!important;
    background:#0d1b2a!important; border:1px solid var(--blab-accent)!important;
    border-radius:6px!important; font-family:"JetBrains Mono",monospace!important; font-size:13px!important;
}
.CodeMirror-hint{ color:#c9d1d9!important; padding:4px 14px!important; }
li.CodeMirror-hint-active{ background:#a78bfa!important; color:#1a1030!important; }

/* ─────────────────────────────────────────────
   Blockly renders dropdown menus, field editors and tooltips into divs it
   appends to <body> (.blocklyWidgetDiv / .blocklyDropDownDiv / .blocklyTooltipDiv),
   with a default z-index around 99. Our lab is fullscreen at z-index 99999, so
   without this every dropdown (play sound, costume, backdrop, key) opened
   BEHIND the lab and looked like it had no options.
───────────────────────────────────────────── */
.blocklyWidgetDiv,
.blocklyDropDownDiv,
.blocklyTooltipDiv{
    z-index:1000000 !important;
}
.blocklyWidgetDiv .blocklyMenu,
.blocklyDropDownDiv .blocklyMenu{
    background:#16212e !important;
    border:1px solid #26374a !important;
    border-radius:8px !important;
    padding:4px 0;
    /* No max-height/overflow here: Blockly's own widget div already scrolls.
       Adding a second scroller produced two side-by-side scrollbars. */
    max-height:none !important;
    overflow:visible !important;
}
/* The single scroller: Blockly's dropdown container. */
.blocklyDropDownDiv .blocklyDropDownContent{
    max-height:340px;
    overflow-y:auto;
    overflow-x:hidden;
}
.blocklyWidgetDiv .blocklyMenuItem,
.blocklyDropDownDiv .blocklyMenuItem{
    color:#e6edf3 !important;
    font:500 13.5px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
    padding:7px 28px 7px 14px !important;
}
.blocklyWidgetDiv .blocklyMenuItemHighlight,
.blocklyWidgetDiv .blocklyMenuItem:hover,
.blocklyDropDownDiv .blocklyMenuItemHighlight,
.blocklyDropDownDiv .blocklyMenuItem:hover{
    background:#a78bfa !important;
    color:#1a1030 !important;
}
.blocklyDropDownDiv{
    background:#16212e !important;
    border-color:#26374a !important;
}


/* ── Dropdown scrolling: keep ONE scroller (Blockly's own container) ── */
.blocklyDropDownDiv .blocklyDropDownContent::-webkit-scrollbar{ width:10px; }
.blocklyDropDownDiv .blocklyDropDownContent::-webkit-scrollbar-track{
    background:#0f1720; border-radius:8px;
}
.blocklyDropDownDiv .blocklyDropDownContent::-webkit-scrollbar-thumb{
    background:#3a4d63; border-radius:8px;
}
.blocklyDropDownDiv .blocklyDropDownContent::-webkit-scrollbar-thumb:hover{
    background:var(--blab-accent);
}

/* NOTE: do NOT restyle Blockly's SVG workspace/flyout scrollbars
   (.blocklyScrollbarHandle / .blocklyScrollbarBackground). Setting fills on
   those drew a giant grey slab across the canvas. Blockly renders them fine
   on its own. */


/* ═════════════════════════════════════════════
   3.8.0 — Scratch features in the ProgressiveKids dark theme
   Dark shell like the other labs, PK sky blue #00A1FF as the accent,
   Scratch block colours. Styles the new parts: category circles,
   Code/Costumes/Sounds tabs, green flag + stop, sprite info pane.
═════════════════════════════════════════════ */
.blab-root{
    --blab-accent:#00A1FF;
    --blab-accent-2:#00A1FF;
}
.blab-root .blab-topbar{ border-bottom-color:#00A1FF; }
.blab-root .blab-logo{ color:#00A1FF; }
.blab-root .blab-mode.active,
.blab-root .blab-mode.active[data-mode="stage"]{ background:#00A1FF; color:#fff; }

/* Left column: tabs over blocks / costumes / sounds */
.blab-left{ flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--blab-bg); }
.blab-tabs{ display:flex; gap:2px; padding:6px 8px 0; background:var(--blab-panel); flex:0 0 auto; }
.blab-tab{
    border:1px solid var(--blab-line); border-bottom:0; border-radius:8px 8px 0 0;
    background:var(--blab-bg); color:var(--blab-muted); font:600 13px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    padding:8px 18px; cursor:pointer;
}
.blab-tab:hover{ color:var(--blab-text); }
.blab-tab.active{ background:var(--blab-panel-2); color:#00A1FF; box-shadow:inset 0 2px 0 #00A1FF; }
.blab-left .blab-blocks{ flex:1 1 auto; border-top:1px solid var(--blab-line); }
.blab-pane{ flex:1 1 auto; min-height:0; overflow:auto; flex-direction:column; gap:12px; padding:16px; background:var(--blab-bg); border-top:1px solid var(--blab-line); }
.blab-pane-head{ font:600 14px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--blab-text); }
.blab-costume-grid, .blab-sound-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; }
.blab-costume, .blab-sound{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    background:var(--blab-panel); border:2px solid var(--blab-line); border-radius:10px; padding:10px 4px; cursor:pointer;
    color:var(--blab-muted); font:500 12px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.blab-costume:hover, .blab-sound:hover{ border-color:#00A1FF; color:var(--blab-text); }
.blab-costume.active{ border-color:#00A1FF; background:#0f2a3d; box-shadow:0 0 0 3px rgba(0,161,255,.25); color:var(--blab-text); }
.blab-costume .em{ font-size:38px; line-height:1.1; }
.blab-sound .pl{ width:34px; height:34px; border-radius:50%; background:#CF63CF; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }

/* Palette: categories as coloured circles above their names, like Scratch */
.blab-root .blocklyTreeRow{
    height:auto !important; line-height:1.1 !important; padding:6px 4px !important;
    margin:0 !important; border-radius:0 !important; border-left:0 !important;
}
.blab-root .blocklyTreeRowContentContainer{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.blab-cat-dot{ display:block; width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.blab-root .blocklyTreeLabel{
    font:600 11px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
    padding:0 !important; text-align:center;
}
.blab-root .blocklyTreeSelected .blocklyTreeLabel,
.blab-root .blocklyTreeRow:hover .blocklyTreeLabel{ color:#00A1FF !important; }

/* Green flag + stop sign above the stage */
.blab-flag, .blab-stopsign{
    width:34px; height:30px; border-radius:6px; border:0; background:transparent; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.blab-flag img{ width:24px; height:24px; }
.blab-flag:hover, .blab-stopsign:hover{ background:rgba(0,161,255,.15); }
.blab-running .blab-flag{ background:rgba(0,161,255,.3); }
.blab-stopsign svg{ width:20px; height:20px; fill:#EC5959; stroke:#B84848; stroke-width:1; }

/* Sprite info pane */
.blab-spriteinfo{
    flex:0 0 auto; display:grid; grid-template-columns:repeat(3,auto); gap:6px 10px;
    align-items:center; justify-content:start;
    background:var(--blab-panel-2); border-top:1px solid var(--blab-line); padding:8px 10px;
    font:500 12px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--blab-muted);
}
.blab-spriteinfo label{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.blab-spriteinfo label.wide{ grid-column:1 / -1; }
.blab-spriteinfo input{
    width:58px; padding:5px 7px; border:1px solid var(--blab-line); border-radius:14px;
    font:500 12px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--blab-text); text-align:center; background:var(--blab-bg);
}
.blab-spriteinfo label.wide input{ width:150px; text-align:left; }
.blab-spriteinfo input:focus{ outline:none; border-color:#00A1FF; box-shadow:0 0 0 2px rgba(0,161,255,.25); }
.blab-seg{ display:inline-flex; border:1px solid var(--blab-line); border-radius:14px; overflow:hidden; }
.blab-seg button{ border:0; background:var(--blab-bg); padding:4px 9px; cursor:pointer; font-size:13px; color:var(--blab-muted); }
.blab-seg button.active{ background:#00A1FF; color:#fff; }
.blab-root .blab-sprite.active{ box-shadow:0 0 0 2px rgba(0,161,255,.3); }

/* Dropdown highlight in PK blue */
.blocklyWidgetDiv .blocklyMenuItemHighlight,
.blocklyWidgetDiv .blocklyMenuItem:hover,
.blocklyDropDownDiv .blocklyMenuItemHighlight,
.blocklyDropDownDiv .blocklyMenuItem:hover{ background:#00A1FF !important; color:#fff !important; }

/* Python panel fills its column (it was stuck at CodeMirror's default width) */
.blab-cm-wrap .CodeMirror{ flex:1 1 auto; width:100%; }

/* Full screen: fill the window exactly (100vw included the scrollbar and cut off
   the right panel) and keep the page behind it from scrolling. */
.blab-root.blab-fullscreen{ left:0; right:0; top:0; bottom:0; width:auto; height:auto; }
html.blab-fs-lock, html.blab-fs-lock body{ overflow:hidden !important; }

/* Stage mode: the sprite list takes the spare height (like Scratch's sprite pane),
   so the console sits at the bottom with no empty strip under it. */
.blab-root.blab-stage-mode .blab-sprites{ flex:1 1 auto; max-height:none; align-content:flex-start; }

/* "Make a Variable" / "Make a List" buttons in the palette */
.blab-root .blocklyFlyoutButton .blocklyFlyoutButtonBackground{ fill:#1b2836; stroke:#3a4d63; stroke-width:1px; }
.blab-root .blocklyFlyoutButton .blocklyText{ fill:#e6edf3 !important; font-weight:600; }
.blab-root .blocklyFlyoutButton:hover .blocklyFlyoutButtonBackground{ stroke:#00A1FF; fill:#0f2a3d; }

/* Short screens: the stage is sized by fitStage(); the sprite list keeps at
   least one row and the console may shrink (to 90px) instead of overflowing. */
.blab-root.blab-stage-mode .blab-stage{ max-width:100%; }
.blab-root.blab-stage-mode .blab-sprites{ min-height:92px; }
.blab-root.blab-stage-mode .blab-console{ flex:0 1 auto; min-height:90px; }

/* Divider between the blocks area and the stage panel (drag to resize) */
.blab-colresize{
    flex:0 0 auto; width:7px; cursor:col-resize; position:relative;
    background:var(--blab-panel); border-left:1px solid var(--blab-line);
}
.blab-colresize::after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:3px; height:40px; border-radius:2px; background:#3a5a78;
}
.blab-colresize:hover, .blab-colresize.dragging{ background:#12293d; }
.blab-colresize:hover::after, .blab-colresize.dragging::after{ background:#00A1FF; }
.blab-root .blab-right{ border-left:0; max-width:70%; }
@media (max-width:900px){ .blab-colresize{ display:none; } .blab-root .blab-right{ max-width:none; } }

/* Stage-size slider next to the green flag */
.blab-zoom{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:var(--blab-muted); font:600 13px system-ui,sans-serif; text-transform:none; letter-spacing:0; }
.blab-zoom input[type=range]{ width:110px; accent-color:#00A1FF; cursor:pointer; }
/* A stage bigger than the space: the panel scrolls instead of cutting things off */
.blab-root.blab-stage-mode .blab-right{ overflow-y:auto; }
.blab-root.blab-stage-mode .blab-stage-wrap{ flex-shrink:0; }

/* ── Scratch ▾ menu (4.5) ── */
.blab-sb3-wrap{ position:relative; display:inline-flex; }
.blab-sb3-menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:270px; display:flex; flex-direction:column;
    background:var(--blab-panel); border:1px solid var(--blab-line); border-radius:10px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.blab-sb3-menu[hidden]{ display:none; }
.blab-sb3-menu button{ text-align:left; background:transparent; border:0; color:var(--blab-text); padding:9px 10px; border-radius:7px; font-size:13px; cursor:pointer; }
.blab-sb3-menu button:hover, .blab-sb3-menu button:focus-visible{ background:var(--blab-panel-2); color:#00A1FF; }

/* 4.6: Ask Pip, the AI coding helper */
.blab-root{ position:relative; }
.bai-helper{ position:absolute; top:56px; right:12px; bottom:12px; width:min(380px,calc(100% - 24px)); z-index:40; display:flex; flex-direction:column; gap:8px;
  background:var(--blab-panel); color:var(--blab-text); border:1px solid var(--blab-line); border-radius:14px; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.bai-head{ display:flex; align-items:center; gap:8px; }
.bai-head b{ font-size:16px; } .bai-head span{ flex:1; color:var(--blab-muted); font-size:13px; }
.bai-log{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px; }
.bai-msg{ background:var(--blab-bg); border:1px solid var(--blab-line); border-radius:10px; padding:8px 10px; font-size:14px; }
.bai-msg.user{ align-self:flex-end; max-width:85%; background:rgba(153,102,255,.18); }
.bai-msg b{ display:block; font-size:12px; color:var(--blab-muted); margin-bottom:2px; } .bai-msg p{ margin:0; line-height:1.45; }
.bai-quick{ display:flex; flex-wrap:wrap; gap:6px; }
.bai-chip{ border:1px solid #9966FF; background:transparent; color:var(--blab-text); border-radius:999px; padding:5px 10px; font:inherit; font-size:12.5px; cursor:pointer; }
.bai-chip:disabled{ opacity:.5; cursor:default; }
.bai-row{ display:flex; gap:6px; } .bai-in{ flex:1; min-width:0; font:inherit; font-size:14px; padding:7px 10px; border-radius:8px; border:1px solid var(--blab-line); background:var(--blab-bg); color:var(--blab-text); }
.bai-muted{ color:var(--blab-muted); font-size:12.5px; margin:0; }