/* ─────────────────────────────────────────────
   Block Lab — AI Models panel (4.2.0)
   Sits over the lab like a sheet; uses the lab's own colour variables.
   Teal (#00897B) is the AI Models category colour.
───────────────────────────────────────────── */
.blab-root{ --bml:#00897B; --bml-soft:rgba(0,137,123,.18); --bml-warn:#f2b64b; --bml-bad:#f85149; }

.blab-tool-btn.blab-ml-btn{ border-color:var(--bml); color:#7fe0d3; }
.blab-tool-btn.blab-ml-btn:hover{ background:var(--bml-soft); color:#b5f0e8; border-color:#26b3a3; }

.bml-overlay{ position:absolute; inset:0; z-index:100;   /* above Blockly's toolbox (70) */ background:rgba(5,10,16,.72); display:flex; padding:18px; }
.bml-overlay[hidden]{ display:none !important; }
.bml-win{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--blab-bg); border:1px solid var(--blab-line);
          border-top:3px solid var(--bml); border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.bml-head{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--blab-panel); border-bottom:1px solid var(--blab-line); flex-wrap:wrap; }
.bml-head b{ font-size:16px; color:#7fe0d3; }
.bml-sub{ font-size:13px; color:var(--blab-muted); }
.bml-body{ flex:1; min-height:0; display:flex; }

.bml-list{ width:230px; flex:none; overflow:auto; padding:12px; border-right:1px solid var(--blab-line); background:var(--blab-panel); display:flex; flex-direction:column; gap:6px; }
.bml-cap{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--blab-muted); margin:2px 2px 4px; }
.bml-item{ text-align:left; background:transparent; border:1px solid var(--blab-line); color:var(--blab-text); border-radius:9px; padding:8px 10px; cursor:pointer; display:flex; flex-direction:column; gap:2px; font:inherit; }
.bml-item b{ font-size:14px; font-weight:600; }
.bml-item small{ font-size:12px; color:var(--blab-muted); }
.bml-item:hover{ border-color:var(--bml); }
.bml-item.on{ border-color:var(--bml); background:var(--bml-soft); }
.bml-newbtn{ color:#7fe0d3; font-size:13px; border-style:dashed; }
.bml-newbtn:first-of-type{ margin-top:6px; }

.bml-main{ flex:1; min-width:0; overflow:auto; padding:16px 18px 24px; display:flex; flex-direction:column; gap:14px; }
.bml-main h3{ margin:0; font-size:18px; }
.bml-muted{ color:var(--blab-muted); font-size:13px; margin:0; }
.bml-warn{ color:var(--bml-warn); font-size:13px; }
.bml-err{ color:var(--bml-bad); font-size:13px; margin:0; }
.bml-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bml-col{ display:flex; flex-direction:column; gap:6px; }

.bml-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.bml-card{ text-align:left; background:var(--blab-panel); border:1px solid var(--blab-line); border-radius:12px; padding:14px; color:var(--blab-text); cursor:pointer; display:flex; flex-direction:column; gap:6px; font:inherit; }
.bml-card:hover{ border-color:var(--bml); background:var(--bml-soft); }
.bml-card b{ font-size:16px; }
.bml-card span{ font-size:13px; }
.bml-card small{ font-size:12px; color:var(--blab-muted); }

.bml-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bml-name{ font:inherit; font-size:18px; font-weight:700; background:transparent; color:var(--blab-text); border:1px solid transparent; border-radius:8px; padding:4px 8px; min-width:0; width:240px; max-width:100%; }
.bml-name:hover,.bml-name:focus{ border-color:var(--blab-line); background:var(--blab-panel); outline:none; }
.bml-type{ font-size:12px; border:1px solid var(--blab-line); border-radius:6px; padding:2px 8px; color:var(--blab-muted); }
.bml-badge{ font-size:12px; border-radius:999px; padding:2px 10px; border:1px solid currentColor; }
.bml-badge.ok{ color:#3fb950; } .bml-badge.stale{ color:var(--bml-warn); } .bml-badge.none{ color:var(--blab-muted); }

.bml-feats input{ background:var(--blab-panel); border:1px solid var(--blab-line); color:var(--blab-text); border-radius:8px; padding:6px 9px; font:inherit; font-size:13px; width:160px; }

.bml-labels{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.bml-label{ border:2px solid var(--c); border-radius:12px; background:var(--blab-panel); display:flex; flex-direction:column; min-height:180px; }
.bml-lhead{ display:flex; align-items:center; gap:6px; padding:8px 8px 6px 10px; border-bottom:1px dashed var(--blab-line); }
.bml-sw{ width:11px; height:11px; border-radius:3px; background:var(--c); flex:none; }
.bml-lhead input{ flex:1; min-width:0; background:transparent; border:1px solid transparent; border-radius:6px; color:var(--blab-text); font:inherit; font-weight:700; font-size:15px; padding:2px 5px; }
.bml-lhead input:hover,.bml-lhead input:focus{ border-color:var(--blab-line); outline:none; }
.bml-count{ font-size:12px; color:var(--blab-muted); font-variant-numeric:tabular-nums; }
.bml-count.low{ color:var(--bml-warn); }
.bml-x{ background:transparent; border:0; color:var(--blab-muted); cursor:pointer; border-radius:6px; width:22px; height:22px; line-height:1; font-size:14px; flex:none; }
.bml-x:hover{ background:var(--blab-line); color:var(--blab-text); }
.bml-ex{ list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:5px; flex:1; max-height:210px; overflow:auto; }
.bml-ex li{ display:flex; align-items:center; gap:6px; background:var(--blab-bg); border:1px solid var(--blab-line); border-radius:8px; padding:4px 4px 4px 9px; font-size:13px; }
.bml-ex li span{ flex:1; overflow-wrap:anywhere; }
.bml-ex li.bml-muted{ background:none; border:0; }
.bml-thumbs{ display:flex; flex-wrap:wrap; gap:6px; padding:8px; flex:1; align-content:flex-start; max-height:210px; overflow:auto; }
.bml-thumb{ position:relative; background:var(--blab-bg); border:1px solid var(--blab-line); border-radius:7px; padding:2px; }
.bml-thumb canvas{ display:block; width:40px; height:40px; image-rendering:pixelated; }
.bml-thumb .bml-x{ position:absolute; top:-7px; right:-7px; width:18px; height:18px; font-size:12px; background:var(--blab-panel); border:1px solid var(--blab-line); border-radius:50%; }
.bml-add{ display:flex; gap:6px; padding:8px; border-top:1px dashed var(--blab-line); }
.bml-add input{ flex:1; min-width:0; width:0; background:var(--blab-bg); border:1px solid var(--blab-line); color:var(--blab-text); border-radius:8px; padding:6px 8px; font:inherit; font-size:13px; }
.bml-addlabel{ border:2px dashed var(--blab-line); background:transparent; color:var(--blab-muted); border-radius:12px; min-height:180px; font:inherit; font-size:15px; cursor:pointer; }
.bml-addlabel:hover{ border-color:var(--bml); color:#7fe0d3; }

.bml-draw{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.bml-pad{ width:200px; height:200px; max-width:100%; background:var(--blab-panel); border:2px solid var(--blab-line); border-radius:12px; touch-action:none; cursor:crosshair; }
.bml-pill{ border:2px solid var(--c); background:transparent; color:var(--blab-text); border-radius:999px; padding:6px 13px; cursor:pointer; font:inherit; font-size:13px; }
.bml-pill:hover{ background:color-mix(in srgb, var(--c) 25%, transparent); }

.bml-btn{ background:var(--bml); color:#fff; border:0; border-radius:999px; padding:8px 18px; font:inherit; font-weight:700; font-size:14px; cursor:pointer; }
.bml-btn:hover{ filter:brightness(1.1); }
.bml-btn:disabled{ opacity:.4; cursor:not-allowed; }
.bml-btn.sm{ padding:5px 12px; font-size:13px; }
.bml-btn.dark{ background:var(--blab-panel-2); border:1px solid var(--blab-line); }
.bml-btn.danger{ background:var(--bml-bad); }
.bml-link{ background:none; border:0; color:var(--blab-muted); text-decoration:underline; cursor:pointer; font:inherit; font-size:13px; padding:0; }

.bml-train{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--blab-line); border-radius:12px; background:var(--blab-panel); }
.bml-test{ padding:12px 14px; border:1px solid var(--blab-line); border-radius:12px; display:flex; flex-direction:column; gap:10px; }
.bml-test input{ flex:1; min-width:120px; background:var(--blab-panel); border:1px solid var(--blab-line); color:var(--blab-text); border-radius:8px; padding:8px 10px; font:inherit; font-size:14px; }
.bml-verdict{ margin:0 0 8px; font-size:14px; }
.bml-verdict b{ color:#7fe0d3; font-size:16px; }
.bml-bar{ display:grid; grid-template-columns:110px 1fr 44px; gap:10px; align-items:center; font-size:13px; margin-bottom:5px; }
.bml-bar span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bml-bar i{ height:12px; background:var(--blab-bg); border:1px solid var(--blab-line); border-radius:99px; overflow:hidden; }
.bml-bar i b{ display:block; height:100%; background:var(--c); border-radius:99px; }
.bml-bar em{ font-style:normal; text-align:right; font-variant-numeric:tabular-nums; }
.bml-word{ display:inline-block; border:1px solid var(--c); border-radius:6px; padding:0 6px; margin:2px 2px 0 0; color:var(--blab-text); }
.bml-use code{ background:var(--blab-panel); border:1px solid var(--blab-line); border-radius:6px; padding:1px 6px; color:var(--blab-text); }
.bml-ta{ width:100%; min-height:180px; background:var(--blab-panel); border:1px solid var(--blab-line); color:var(--blab-text); border-radius:10px; padding:10px; font:12px/1.4 ui-monospace,Consolas,monospace; resize:vertical; box-sizing:border-box; }

@media (max-width:760px){
  .bml-overlay{ padding:6px; }
  .bml-body{ flex-direction:column; }
  .bml-list{ width:auto; max-height:170px; border-right:0; border-bottom:1px solid var(--blab-line); }
}

/* ── 4.6: camera and sound models, model card ── */
.bml-sense{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.bml-cam{ width:224px; height:168px; max-width:100%; background:#20303d; border:2px solid var(--blab-line); border-radius:12px; }
.bml-sense .bml-col{ flex:1; min-width:220px; }
.bml-pill.rec{ background:var(--c); color:#fff; }
.bml-pill[disabled]{ opacity:.5; cursor:default; }
[data-hold]{ touch-action:none; user-select:none; -webkit-user-select:none; }
.bml-privacy{ font-size:12px; color:var(--blab-muted); }
.bml-meter{ height:10px; background:var(--blab-bg); border:1px solid var(--blab-line); border-radius:999px; overflow:hidden; margin-bottom:6px; }
.bml-meter i{ display:block; height:100%; width:0; background:var(--bml); transition:width .08s linear; }
.bml-thumb.camera img{ display:block; width:48px; height:36px; object-fit:cover; border-radius:5px; }
.bml-thumb.camera canvas{ width:36px; height:36px; }
.bml-thumb.sound canvas{ width:40px; height:40px; image-rendering:pixelated; background:var(--blab-panel); }
.bml-cardbox{ margin-top:14px; border:1px solid var(--blab-line); border-radius:10px; padding:10px 14px; }
.bml-cardbox summary{ cursor:pointer; font-weight:700; }
.bml-cardbox[open] summary{ margin-bottom:8px; }
.bml-cardq{ display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:13px; }
.bml-cardq textarea{ font:inherit; font-size:13px; background:var(--blab-bg); color:var(--blab-text); border:1px solid var(--blab-line); border-radius:8px; padding:6px 8px; resize:vertical; }

/* accuracy check */
.bml-acc{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.bml-grid{ border-collapse:collapse; font-size:13px; margin:6px 0; }
.bml-grid th,.bml-grid td{ border:1px solid var(--blab-line); padding:5px 9px; text-align:center; }
.bml-grid th.bml-corner{ font-weight:400; font-size:11px; color:var(--blab-muted); }
.bml-grid td.diag{ background:rgba(35,160,71,.25); font-weight:700; }
.bml-grid td.miss{ background:rgba(248,81,73,.22); font-weight:700; }