/* Cognita Board — "Soft Graphite + Cyan + White" premium rang tizimi.
   Uch rejim: 🌙 Graphite (asosiy), ☀️ Light, 🟢 Chalkboard — body.th-* */
/* Rang/masofa/radius tokenlari — static/css/tokens.css da (yagona manba). */
/* Doska yuzasi uchun uchta rejim. Bular tokenlarni SHU sahifa ichida
   qayta ta'riflaydi — qolgan hamma narsa tokens.css dan keladi. */
/* Graphite — qorong'i rejim. Tokenlar SHU YERDA aniq beriladi: aks holda sayt mavzusi yorug' bo'lganda
   (data-theme="light") doska qora, lekin header/footer/vositalar paneli oq bo'lib qolardi. Qiymatlar
   tokens.css dagi qorong'i mavzu bilan bir xil. */
body.th-graphite{
  color-scheme:dark;
  --bg-app:#0F1115; --bg-sidebar:#13161C; --surface-1:#181C23; --surface-2:#1D222A; --surface-hover:#222832;
  --text-primary:#F4F6F8; --text-secondary:#A7AFBC; --text-muted:#6F7886;
  --border-subtle:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.11);
  --accent-soft:rgba(82,214,198,.10); --accent-soft-strong:rgba(82,214,198,.16); --accent-text:#6FE0D2;
  --warn:#E3B341; --warn-soft:rgba(227,179,65,.12);
  --ok:#4ADE9B; --ok-soft:rgba(74,222,155,.12);
  --danger:#FF7B72; --danger-soft:rgba(255,123,114,.12);
  --shadow-float:0 14px 38px rgba(0,0,0,.42); --shadow-modal:0 24px 64px rgba(0,0,0,.5);
  --overlay:rgba(9,11,14,.62); --grid-line:rgba(255,255,255,.035);
}
body.th-light{
  color-scheme:light;
  --bg-app:#F7F9FC; --surface-1:#FFFFFF; --surface-2:#EEF2F7; --surface-hover:#E4EAF2;
  --border-subtle:rgba(23,32,51,.09); --border-strong:rgba(23,32,51,.17);
  --accent-primary:#2563EB; --accent-secondary:#0EA5E9; --accent-text:#1D4ED8;
  --accent-soft:rgba(37,99,235,.10); --accent-soft-strong:rgba(37,99,235,.18);
  --ai:#7C3AED; --warn:#B45309;
  --text-primary:#172033; --text-secondary:#5B6B7F; --text-muted:#8A96A6;
  --grid-line:rgba(23,32,51,.05);
  --shadow-float:0 12px 30px rgba(16,24,40,.10);
}
body.th-chalk{
  color-scheme:dark;
  --bg-app:#183D3D; --surface-1:#1E4A49; --surface-2:#245655; --surface-hover:#2B6260;
  --border-subtle:rgba(245,245,220,.10); --border-strong:rgba(245,245,220,.20);
  --accent-primary:#FACC15; --accent-secondary:#86EFAC; --accent-text:#FDE047;
  --accent-soft:rgba(250,204,21,.12); --accent-soft-strong:rgba(250,204,21,.22);
  --ai:#C4B5FD; --warn:#FACC15;
  --text-primary:#F5F5DC; --text-secondary:#D6D6BC; --text-muted:#AFAF98;
  --grid-line:rgba(245,245,220,.05);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);overflow:hidden}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:6px}

/* ── yuqori panel ── */
.bd-top{
  position:fixed;left:0;right:0;top:0;height:52px;z-index:20;
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:var(--bg-app);border-bottom:1px solid var(--border-subtle);
}
.bd-home{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;
  color:var(--text-secondary);text-decoration:none;font-size:1.05rem}
.bd-home:hover{color:var(--text-primary);background:var(--surface-hover)}
.bd-title{
  min-width:0;max-width:340px;background:none;border:1px solid transparent;border-radius:8px;
  color:var(--text-primary);font-family:var(--font-sans);font-size:.95rem;font-weight:600;padding:6px 9px;
}
.bd-title:hover{border-color:var(--border-subtle)}
.bd-title:focus{outline:none;border-color:var(--border-strong);background:var(--surface-1)}
.bd-status{font-size:.68rem;color:var(--text-secondary);white-space:nowrap}
.bd-status.busy{color:var(--warn)}
.bd-gap{flex:1}
.bd-btn{
  width:36px;height:36px;border-radius:10px;border:none;background:none;
  color:var(--text-secondary);font-size:.95rem;transition:color .18s,background .18s;
}
.bd-btn:hover{color:var(--text-primary);background:var(--surface-hover)}

/* ── chap vositalar paneli ── */
/* vositalar paneli — mavzu panel rangida (qorong'ida qorong'i) */
.bd-tools{
  position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:20;
  display:grid;grid-template-columns:repeat(2,38px);gap:3px;padding:6px;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.bd-tools hr{grid-column:1/-1;border:none;height:1px;background:var(--border-subtle);margin:2px 2px}
.bd-tools button{
  width:38px;height:38px;border-radius:10px;border:none;background:none;
  color:var(--text-primary);font-size:.95rem;transition:background .15s,color .15s;
}
.bd-tools button:hover{background:var(--surface-hover)}
.bd-tools button.on{background:var(--accent-soft-strong);color:var(--accent-primary)}

/* ── vosita sozlamalari — header ichida ── */
.bd-opts{
  display:flex;align-items:center;gap:12px;padding:4px 12px;margin-left:8px;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:11px;
}
.bd-colors{display:flex;gap:6px}
.bd-colors button{width:20px;height:20px;border-radius:50%;border:2px solid transparent}
.bd-colors button.on{border-color:var(--text-primary)}
/* "to'ldirishsiz" tugmasi — diagonal chiziqli oq katakcha */
.bd-colors .bd-none{
  background:
    linear-gradient(45deg,transparent 45%,var(--danger) 45%,var(--danger) 55%,transparent 55%),
    var(--surface-2);
  border-color:var(--border-strong);
}
/* to'ldirish rejimida palitra biroz boshqacha ko'rinadi */
.bd-colors.fill-mode button{border-radius:5px}
.bd-paint button{font-size:.68rem}
#bWidth{width:90px;accent-color:var(--accent-primary)}
#bBg{background:var(--surface-2);color:var(--text-primary);border:1px solid var(--border-subtle);
  border-radius:8px;font-family:var(--font-sans);font-size:.78rem;padding:5px 7px}

/* ── kanvas ── */
.bd-stage{position:fixed;inset:52px 0 46px 0}
#cv{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
body.t-select #cv{cursor:default}
body.t-pan #cv, body.panning #cv{cursor:grab}
body.panning #cv{cursor:grabbing}
body.t-text #cv{cursor:text}
/* imo-ishora tasdig'i (bosib turish / ikki tez bosish) — bosilgan joyda halqa */
.bd-gest{position:fixed;z-index:60;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  border:2px solid var(--accent-primary);pointer-events:none;animation:bd-gest .42s ease-out forwards}
@keyframes bd-gest{from{transform:scale(.35);opacity:.9}to{transform:scale(1);opacity:0}}

/* matn tahriri (kanvas ustidagi vaqtinchalik maydon) */
.bd-edit{
  position:fixed;display:none;z-index:30;min-width:60px;min-height:30px;
  background:var(--surface-1);border:1px dashed var(--accent-primary);border-radius:6px;
  color:var(--text-primary);font-family:var(--font-sans);padding:4px 7px;resize:none;overflow:hidden;
}
.bd-edit:focus{outline:none}

/* ── pastki panel ── */
.bd-foot{
  position:fixed;left:0;right:0;bottom:0;height:46px;z-index:20;
  display:flex;align-items:center;gap:6px;padding:0 12px;
  background:var(--bg-app);border-top:1px solid var(--border-subtle);
}
.bd-pages{display:flex;gap:5px;overflow-x:auto;max-width:60vw}
.bd-pages button{
  height:28px;padding:0 12px;border-radius:8px;border:1px solid var(--border-subtle);
  background:none;color:var(--text-secondary);font-size:.74rem;white-space:nowrap;
}
.bd-pages button.on{background:var(--accent-soft-strong);color:var(--accent-primary);border-color:var(--accent-primary)}
.bd-zoom{width:auto;padding:0 10px;font-family:var(--font-mono);font-size:.72rem}

/* ── o'ng panellar (kutubxona, yechim) ── */
.bd-panel{
  position:fixed;right:10px;top:60px;bottom:56px;width:300px;z-index:25;
  display:none;flex-direction:column;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:14px;
  box-shadow:var(--shadow-float);
}
.bd-panel.show{display:flex}
.bd-panel-top{flex:none;display:flex;align-items:center;gap:6px;padding:10px 12px;
  border-bottom:1px solid var(--border-subtle)}
.bd-panel-top b{flex:1;font-size:.88rem}
.bd-panel-body{flex:1;overflow-y:auto;padding:10px 12px}

/* kutubxona elementi */
.bd-lib-item{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:none;border-radius:10px;color:var(--text-primary);
  font-family:var(--font-sans);font-size:.84rem;padding:9px 10px;transition:background .15s;
}
.bd-lib-item:hover{background:var(--surface-hover)}
.bd-lib-item.on{background:var(--accent-soft)}
.bd-lib-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-lib-item i{font-style:normal;font-size:.64rem;color:var(--text-secondary);flex:none}
.bd-lib-x{flex:none;width:22px;height:22px;border:none;background:none;border-radius:6px;
  color:var(--text-secondary);font-size:.66rem}
.bd-lib-x:hover{color:var(--danger);background:var(--danger-soft)}

/* yechim paneli */
.bd-step{border-bottom:1px solid var(--border-subtle);padding:8px 0}
.bd-step i{display:block;font-style:normal;font-size:.76rem;color:var(--text-secondary);margin-bottom:4px}
.bd-step .katex{font-size:1em;color:var(--text-primary)}
.bd-solve-res{color:var(--accent-primary);font-weight:600;font-size:.9rem;padding:8px 0}
.bd-solve-err{color:var(--danger);font-size:.8rem;padding:8px 0}
.bd-solve-btn{
  display:block;width:100%;margin-top:8px;padding:9px;border-radius:10px;border:none;
  background:var(--accent-primary);color:#062822;font-weight:700;font-size:.84rem;
}
.bd-solve-btn:hover{background:#63e0d0}

/* ── AI takliflari (semantik kuzatuvchi chiplari) ── */
.bd-suggest{
  position:fixed;left:50%;bottom:56px;transform:translateX(-50%);z-index:22;
  display:none;gap:6px;max-width:92vw;flex-wrap:wrap;justify-content:center;
}
.bd-suggest.show{display:flex}
.bd-chip{
  display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--accent-primary);background:var(--surface-1);
  color:var(--text-primary);font-family:var(--font-sans);font-size:.78rem;
  transition:border-color .18s,background .18s;
}
.bd-chip:hover{border-color:var(--accent-primary);background:var(--surface-2)}
.bd-chip i{font-style:normal;font-size:.8rem}
.bd-chip.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.bd-chip.cont{border-style:dashed;border-color:var(--accent-primary);gap:6px}
.bd-chip.cont em{font-style:normal;color:var(--accent-primary);font-family:'Caveat',cursive;font-size:1.05rem;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-chip.cont:hover{background:var(--accent-soft)}
.bd-chip.bd-chip-x{padding:8px 11px;border-color:var(--border-subtle);color:var(--text-secondary)}
.bd-chip.bd-chip-x:hover{color:var(--danger);border-color:var(--danger)}
#bAiBtn.busy{color:var(--accent-primary);animation:bd-pulse 1.2s infinite}
#bAiToggle.off{opacity:.45;filter:grayscale(1);text-decoration:line-through}
#bAiToggle.off::after{content:"AI o‘chiq";position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:.62rem;color:var(--text-secondary);white-space:nowrap;margin-top:2px}
#bAiToggle{position:relative}
body.ai-off #bAiBtn{opacity:.35;pointer-events:none}
@keyframes bd-pulse{50%{opacity:.45}}

/* AI javob matni */
.bd-ai-txt{font-size:.84rem;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere}
.bd-ai-note{font-size:.72rem;color:var(--text-secondary);padding-bottom:8px}

/* ── fan tanlash ── */
.bd-subject{
  background:var(--surface-2);color:var(--text-primary);border:1px solid var(--border-subtle);
  border-radius:8px;font-family:var(--font-sans);font-size:.76rem;padding:6px 8px;max-width:150px;
}

/* ── yashirin AI chat oynasi ── */
.bd-chat{
  position:fixed;right:10px;top:60px;bottom:56px;width:320px;z-index:26;
  display:flex;flex-direction:column;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:14px;
  box-shadow:var(--shadow-float);
  transform:translateX(calc(100% + 20px));opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.25,.6,.3,1),opacity .28s;
}
.bd-chat.show{transform:none;opacity:1;pointer-events:auto}
.bd-chat-hint{font-size:.62rem;color:var(--text-secondary);flex:1}
.bd-chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px}
.bd-chat-log:empty::before{
  content:'Doskadagi mazmun haqida so‘rang — AI kanvasni ko‘rib javob beradi';
  font-size:.72rem;color:var(--text-secondary);text-align:center;padding:16px 10px;line-height:1.6;
}
.bd-cm-u{
  align-self:flex-end;max-width:86%;font-size:.82rem;white-space:pre-wrap;overflow-wrap:anywhere;
  background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:13px 13px 4px 13px;padding:8px 12px;
}
.bd-cm-a{
  align-self:flex-start;max-width:92%;font-size:.82rem;line-height:1.55;color:var(--text-primary);
  white-space:pre-wrap;overflow-wrap:anywhere;
  border-left:2px solid var(--accent-primary);padding:2px 0 2px 10px;
}
.bd-cm-a.busy{color:var(--text-secondary);animation:bd-pulse 1.2s infinite}
.bd-chat-ask{
  flex:none;display:flex;align-items:center;gap:4px;margin:10px;
  background:var(--bg-app);border:1px solid var(--border-strong);border-radius:20px;padding:3px 3px 3px 12px;
  transition:border-color .2s;
}
.bd-chat-ask:focus-within{border-color:var(--accent-primary)}
.bd-chat-ask input{
  flex:1;min-width:0;background:none;border:none;color:var(--text-primary);
  font-family:var(--font-sans);font-size:14px;padding:7px 0;
}
.bd-chat-ask input:focus{outline:none}
.bd-chat-ask input::placeholder{color:var(--text-muted)}
.bd-chat-ask button{
  flex:none;width:32px;height:32px;border-radius:50%;border:none;font-size:.8rem;
  background:var(--accent-primary);color:#062822;font-weight:700;
}
.bd-chat-ask button:hover{background:#63e0d0}
#bChatBtn.on{color:var(--accent-primary);background:var(--accent-soft-strong)}

/* ── manipulyativlar palitrasi ── */
.bd-manip{
  position:fixed;left:66px;top:50%;transform:translateY(-30%);z-index:21;
  display:none;flex-direction:column;gap:2px;padding:6px;min-width:150px;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:12px;
  box-shadow:var(--shadow-float);
}
.bd-manip.show{display:flex}
.bd-manip button{
  display:flex;align-items:center;gap:8px;text-align:left;
  background:none;border:none;border-radius:8px;color:var(--text-primary);
  font-family:var(--font-sans);font-size:.8rem;padding:8px 10px;transition:background .15s;
}
.bd-manip button:hover{background:var(--surface-hover)}
.bd-geo-sec{font-size:.62rem;font-weight:500;letter-spacing:.08em;color:var(--text-secondary);
  text-transform:uppercase;padding:7px 10px 3px}
#bGeo{top:50%;transform:translateY(-50%);max-height:82vh;overflow-y:auto}

/* ── geometriya palitrasi: namuna rasmi bilan katakcha ko'rinish ── */
.bd-geo{width:300px}
.bd-geo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:0 4px 4px}
.bd-geo-grid button{
  flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:7px 4px 6px;border:1px solid transparent;min-width:0;
}
.bd-geo-grid button:hover{background:var(--surface-hover);border-color:var(--border-subtle)}
.bd-geo-grid button.on{background:var(--accent-soft);border-color:var(--accent-primary)}
.bd-geo-grid svg{display:block;width:30px;height:30px;color:var(--text-primary)}
.bd-geo-grid span{
  font-size:.58rem;line-height:1.25;color:var(--text-secondary);
  display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#bTo3d{
  border:1px solid var(--accent-primary);background:var(--accent-soft);color:var(--accent-primary);
  border-radius:8px;font-family:var(--font-sans);font-size:.76rem;font-weight:600;padding:6px 10px;
}
#bTo3d:hover{background:var(--accent-soft-strong)}

/* ── taymer ── */
.bd-timer{
  position:fixed;right:12px;top:60px;z-index:24;display:none;
  flex-direction:column;align-items:center;gap:6px;padding:12px 16px;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:14px;
  box-shadow:var(--shadow-float);
}
.bd-timer.show{display:flex}
.bd-timer b{font-family:var(--font-mono);font-size:1.9rem;font-weight:600;letter-spacing:.04em}
.bd-timer.done b{color:var(--danger);animation:bd-pulse .6s infinite}
.bd-timer-row{display:flex;gap:4px}
.bd-timer-row button{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--border-subtle);
  background:none;color:var(--text-primary);font-size:.9rem;transition:background .15s;
}
.bd-timer-row button:hover{background:var(--surface-hover)}
#bTimerStart.on{color:var(--accent-primary);border-color:var(--accent-primary)}
#bReplayBtn.on{color:var(--accent-primary);animation:bd-pulse 1.2s infinite}

/* ── jonli ulashish paneli ── */
.bd-share-body{text-align:center}
.bd-share-pin{
  font-family:var(--font-mono);font-size:1.9rem;font-weight:600;letter-spacing:.14em;
  color:var(--accent-primary);padding:6px 0 12px;
}
.bd-share-qr{
  display:inline-block;background:#fff;padding:10px;border-radius:12px;min-height:60px;
}
.bd-share-url{
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-secondary);margin-top:10px;
  overflow-wrap:anywhere;user-select:all;
}
.bd-share-hint{font-size:.74rem;color:var(--text-secondary);line-height:1.55;margin-top:10px;text-align:left}
#bShareBtn.on{color:var(--accent-primary);animation:bd-pulse 1.6s infinite}

/* ── obyekt yonidagi AI amal tugmasi (yozish → darhol taklif) ── */
.bd-anchor{
  position:fixed;z-index:22;display:flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--accent-primary);background:var(--surface-1);
  color:var(--accent-primary);font-family:var(--font-sans);font-size:.74rem;font-weight:600;
  cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap;
  animation:bd-anchor-in .25s cubic-bezier(.25,.6,.3,1);
}
@keyframes bd-anchor-in{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1}}
.bd-anchor:hover{background:var(--surface-2);border-color:var(--accent-primary)}
body.viewer .bd-anchor{display:none}

/* ── tanlov ustidagi amallar paneli ── */
.bd-actions{
  position:fixed;z-index:21;display:none;gap:2px;padding:4px;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:11px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.bd-actions button{
  width:34px;height:34px;border-radius:8px;border:none;background:none;
  color:var(--text-primary);font-size:.9rem;transition:background .15s;
}
.bd-actions button:hover{background:var(--surface-hover)}
#bDel:hover{color:var(--danger)}
body.viewer .bd-actions{display:none!important}

/* ── parametrli grafik sliderlari ── */
.bd-params{
  position:fixed;z-index:22;display:none;flex-direction:column;gap:6px;
  padding:10px 14px;min-width:220px;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.bd-params.show{display:flex}
.bd-params .pr{display:flex;align-items:center;gap:9px}
.bd-params .pr b{font-family:var(--font-mono);font-size:.82rem;color:var(--accent-primary);width:16px}
.bd-params .pr input{flex:1;accent-color:var(--accent-primary)}
.bd-params .pr i{font-style:normal;font-family:var(--font-mono);font-size:.76rem;
  color:var(--text-primary);width:44px;text-align:right}
body.viewer .bd-params{display:none!important}

/* chat mikrofoni */
#bChatMic{flex:none;width:32px;height:32px;border-radius:50%;border:none;
  background:none;color:var(--text-secondary);font-size:.85rem}
#bChatMic:hover{color:var(--text-primary);background:var(--surface-hover)}
#bChatMic.rec{color:var(--danger);background:var(--danger-soft);animation:bd-pulse 1s infinite}

/* ── AI radial menyu ── */
.bd-radial{position:fixed;z-index:26;width:0;height:0;display:none}
.bd-radial.show{display:block}
.bd-radial button{
  position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border-subtle);background:var(--surface-1);color:var(--text-primary);
  font-size:1.02rem;box-shadow:0 8px 22px rgba(0,0,0,.35);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  animation:bd-rad-in .22s cubic-bezier(.25,.6,.3,1) backwards;
}
.bd-radial [data-ra]{
  transform:rotate(calc(var(--a)*1deg)) translate(68px) rotate(calc(var(--a)*-1deg));
}
@keyframes bd-rad-in{from{opacity:0}to{opacity:1}}
.bd-radial button:hover{background:var(--accent-soft-strong);border-color:var(--accent-primary);color:var(--accent-text)}
.bd-rad-c{
  background:var(--ai)!important;color:#fff!important;
  border-color:var(--border-strong)!important;
  font-family:var(--font-sans);font-weight:700;font-size:.68rem!important;
  letter-spacing:.02em;box-shadow:0 8px 24px rgba(139,92,246,.45)!important;
}
body.viewer .bd-radial{display:none!important}

/* ── akkaunt chipi ── */
.bd-user{
  width:auto;padding:0 12px;display:flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:500;color:var(--text-secondary);text-decoration:none;
  border:1px solid var(--border-subtle);white-space:nowrap;max-width:160px;
  overflow:hidden;text-overflow:ellipsis;
}
.bd-user:hover{color:var(--text-primary);border-color:var(--border-strong)}

/* ── o'qituvchi inbox'i (bayroqcha + savollar) ── */
.bd-share-inbox{text-align:left;margin-top:12px}
.bd-share-inbox .flg{font-size:.8rem;color:var(--warn);padding:6px 0}
.bd-share-inbox .qq{
  font-size:.78rem;color:var(--text-primary);border-left:2px solid var(--accent-primary);
  padding:4px 0 4px 9px;margin:5px 0;overflow-wrap:anywhere;
}
.bd-share-inbox .qq i{font-style:normal;font-size:.62rem;color:var(--text-secondary);display:block}
#bShareBtn.alert{color:var(--warn)}

/* ── Cognita Daftar — o'quvchi paneli ── */
.bd-vbar{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:23;
  display:none;align-items:center;gap:2px;padding:6px;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:14px;
  box-shadow:var(--shadow-float);
}
body.viewer .bd-vbar{display:flex}
.bd-vbar button{
  width:40px;height:40px;border-radius:10px;border:none;background:none;
  color:var(--text-primary);font-size:1rem;transition:background .15s;
}
.bd-vbar button:hover{background:var(--surface-hover)}
.bd-vbar button.on{background:var(--accent-soft-strong);color:var(--accent-primary)}
.bd-vbar button.sent{color:var(--accent-primary)}
.bd-vsep{width:1px;height:24px;background:var(--border-subtle);margin:0 4px}
.bd-live{
  position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:23;
  display:none;padding:9px 16px;border-radius:999px;border:1px solid var(--warn);
  background:var(--surface-1);color:var(--warn);font-family:var(--font-sans);font-size:.8rem;
}
body.frozen .bd-live{display:block}
body.frozen .bd-vbar [data-v]{opacity:.35;pointer-events:none}
.bd-mom{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:none;border-radius:10px;color:var(--text-primary);
  font-family:var(--font-sans);font-size:.82rem;padding:9px 10px;transition:background .15s;
}
.bd-mom:hover{background:var(--surface-hover)}
.bd-mom i{font-style:normal;font-size:.64rem;color:var(--text-secondary);flex:1;text-align:right}
.bd-mom-x{flex:none;width:22px;height:22px;border:none;background:none;border-radius:6px;
  color:var(--text-secondary);font-size:.66rem}
.bd-mom-x:hover{color:var(--danger)}

/* ── o'quvchi (faqat ko'rish) rejimi ── */
body.viewer .bd-tools, body.viewer .bd-opts, body.viewer .bd-suggest,
body.viewer .bd-chat, body.viewer .bd-manip, body.viewer .bd-timer,
body.viewer #bAiBtn, body.viewer #bChatBtn, body.viewer #bBoards,
body.viewer #bReplayBtn, body.viewer #bTimerBtn, body.viewer #bShareBtn,
body.viewer #bSubject, body.viewer #bAddPage, body.viewer #bUser{display:none!important}
body.viewer #cv{cursor:grab}
body.viewer .bd-status{color:var(--accent-primary)}
body.viewer .bd-title{pointer-events:none}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media(max-width:820px){
  #bBg,#bWidth{display:none}            /* tor ekranda faqat ranglar qoladi */
  .bd-panel{left:10px;width:auto}
  .bd-title{max-width:120px}
  body:not(.viewer) .bd-status{display:none}   /* o'quvchida PIN ko'rinib tursin */
}

body.viewer #bDeck, body.viewer #bVers{display:none}

/* ── doskadagi kichik menyu (2D → 3D tanlovi va h.k.) ── */
.bd-menu{
  position:fixed;z-index:60;width:270px;max-width:calc(100vw - 16px);
  background:var(--surface-1);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-float);padding:6px;
}
.bd-menu-head{
  padding:5px 9px 8px;font-size:.66rem;color:var(--text-muted);
  border-bottom:1px solid var(--border-subtle);margin-bottom:4px;
}
.bd-menu button{
  display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;
  text-align:left;background:none;border:0;border-radius:7px;
  padding:7px 9px;color:var(--text-primary);font:inherit;font-size:.8rem;cursor:pointer;
  transition:background .15s;
}
.bd-menu button:hover,.bd-menu button:focus-visible{background:var(--surface-hover)}
.bd-menu svg{flex:none;width:26px;height:26px;color:var(--text-secondary)}
.bd-menu button:hover svg{color:var(--accent-primary)}

/* ── AI holati: o'qilmoqda / tahlil / yozilmoqda ── */
.bd-aistate{display:none;align-items:center;gap:6px;font-size:.7rem;color:var(--accent-text);
  padding:3px 9px;border-radius:999px;background:var(--accent-soft);white-space:nowrap}
.bd-aistate.show{display:inline-flex}
.bd-aistate::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent-primary);
  animation:bd-pulse 1.2s infinite}

/* ── tanilgan qo'lyozma yorlig'i (AI nima o'qidi) ── */
.bd-ocr{position:fixed;z-index:21;display:flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:8px;border:1px dashed var(--border-strong);background:var(--surface-1);
  color:var(--text-secondary);font-family:var(--font-mono);font-size:.72rem;cursor:pointer;
  max-width:320px;box-shadow:var(--shadow-float);animation:bd-anchor-in .25s cubic-bezier(.25,.6,.3,1)}
.bd-ocr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-ocr i{font-style:normal;color:var(--accent-text);font-weight:700;flex:none}
.bd-ocr:hover{border-color:var(--accent-primary);color:var(--text-primary)}
body.viewer .bd-ocr{display:none}

/* ── Intellekt qatlami: ghost preview (✓ Qabul / ✎ Tahrir / ✕ Bekor) ── */
.bd-ghost{position:fixed;z-index:24;display:flex;align-items:center;gap:3px;padding:3px 4px 3px 10px;
  border-radius:999px;border:1px solid var(--accent-primary);background:var(--surface-1);
  box-shadow:var(--shadow-float);animation:bd-anchor-in .22s cubic-bezier(.25,.6,.3,1);white-space:nowrap}
.bd-ghost-hint{font-size:.7rem;color:var(--text-secondary);max-width:220px;overflow:hidden;text-overflow:ellipsis;margin-right:4px}
.bd-ghost button{width:30px;height:30px;border-radius:50%;border:none;background:none;font-size:.95rem;
  color:var(--text-primary);display:grid;place-items:center;transition:background .15s,color .15s}
.bd-ghost button:hover{background:var(--surface-hover)}
.bd-ghost .bd-ghost-ok{color:var(--accent-text);font-weight:700}
.bd-ghost .bd-ghost-ok:hover{background:var(--accent-soft-strong)}
.bd-ghost .bd-ghost-no:hover{color:var(--danger)}
body.viewer .bd-ghost{display:none}

/* ── Teacher Copilot: robot dok (pastki o'ng) + gap pufakchasi ── */
.bd-robot{position:fixed;right:14px;bottom:54px;z-index:23;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.bd-robot-head{width:96px;aspect-ratio:1.2;position:relative;display:grid;place-items:center;pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));transition:transform .2s}
.bd-robot-head:hover{transform:translateY(-2px)}
.bd-robot-head>*{grid-area:1/1;position:relative}
.bd-robot-head .rb-fallback{width:88%;height:88%;object-fit:contain;user-select:none;transition:transform .12s linear}
.bd-robot-head .rb-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.bd-robot-head .rb-canvas[hidden]{display:none}
.bd-robot[data-state="thinking"] .bd-robot-head::after,.bd-robot[data-state="listening"] .bd-robot-head::after,
.bd-robot[data-state="writing"] .bd-robot-head::after{content:'';position:absolute;right:8px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--accent-primary);animation:bd-pulse 1.1s infinite;box-shadow:0 0 8px var(--accent-primary)}
.bd-robot-say{display:none;max-width:280px;padding:8px 12px;border-radius:14px 14px 4px 14px;text-align:left;
  background:var(--surface-1);border:1px solid var(--accent-primary);color:var(--text-primary);
  font-family:var(--font-sans);font-size:.74rem;line-height:1.45;box-shadow:var(--shadow-float);pointer-events:auto;cursor:default}
.bd-robot-say.show{display:block;animation:bd-anchor-in .25s cubic-bezier(.25,.6,.3,1)}
.bd-robot-say.act{cursor:pointer}
.bd-robot-say.act:hover{background:var(--surface-2)}
.bd-robot-say i{font-style:normal;color:var(--accent-text);font-weight:600}
.bd-robot-say b{font-weight:600}
body.viewer .bd-robot,body.ai-off .bd-robot{display:none}
.bd-chat.show~.bd-robot,body.has-chat .bd-robot{right:344px}
@media(max-width:820px){.bd-robot-head{width:64px}.bd-robot-say{max-width:200px;font-size:.68rem}body.has-chat .bd-robot{display:none}}
