/* Papan tulis (v0.5): judul + tombol Video, baris alat, kertas putih berpola titik. Menumpang sel grid yang sama dengan .grid (kolom 1 .body) */
#wb{grid-area:1/1;position:relative;z-index:3;min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:0 12px 4px;background:var(--bg)}
#wb .head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
#wb .head b{display:inline-flex;align-items:center;gap:8px;font-size:15px}
#wb .head b .ic{width:22px;height:22px;color:var(--primary)}
#wb .head small{font-size:12px;color:var(--muted);font-weight:500;margin-left:4px}
#wb .head .wc{display:inline-flex;align-items:center;gap:2px}
#wb .head .x{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--primary);min-height:44px;padding:0 8px;background:none;border:0;cursor:pointer;border-radius:9px}
#wb .head .x:hover{background:var(--surface2)}
#wb .bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:6px 8px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
#wb .sw{display:inline-flex;gap:4px}
#wb .bar button{width:38px;height:38px;padding:0;border-radius:9px;border:1px solid transparent;background:none;color:var(--text);cursor:pointer;display:grid;place-items:center}
#wb .bar button:not([data-c]):hover{background:var(--surface2)}
#wb .bar button.on{background:var(--blue-50);border-color:var(--primary);color:var(--primary)}
#wb .bar [data-c]{width:26px;height:26px;margin:0 3px;border-radius:50%;background:var(--c);border:2px solid transparent}
#wb .bar [data-c].on{background:var(--c);border-color:var(--surface);box-shadow:0 0 0 2px var(--primary)}
#wb .bar [data-w] i{display:block;border-radius:50%;background:currentColor}
#wb .bar .sep{margin:0 4px;height:26px}
#wb .bar .nav{display:inline-flex;align-items:center;gap:2px}
#wb .bar .nav .pg{font-size:12px;color:var(--text2);min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
#wb .bar .wide{width:auto;padding:0 10px;gap:6px;font-size:12px;font-weight:600;grid-auto-flow:column}
#wb .bar .chk{font-size:12px;white-space:nowrap;padding:0 6px;color:var(--text2)}
#wb .bar .hint{white-space:nowrap;padding:0 8px;font-size:12px;color:var(--muted)}
#wb .bar .x2{display:none;width:auto;margin-left:auto;padding:0 10px;gap:6px;color:var(--primary);font-weight:600;font-size:13px;grid-auto-flow:column}
#wb .paper{flex:1;min-height:0;position:relative;container-type:size}
#wb canvas{position:absolute;inset:0;margin:auto;width:min(100%,calc(100cqh * var(--ar, 16 / 9)));aspect-ratio:var(--ar, 16 / 9);display:block;touch-action:none;cursor:crosshair;background:#fff radial-gradient(circle,#dbe3ee 1px,transparent 1.2px) 0 0/22px 22px;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm)} /* kertas selalu putih: warna pena sama di semua tema & peserta; 16:9 contain agar koordinat 0..1 identik */
#wb .paper video{position:absolute;inset:0;margin:auto;width:min(100%,calc(100cqh * var(--ar, 16 / 9)));aspect-ratio:var(--ar, 16 / 9);display:block;object-fit:fill;background:#000;border-radius:var(--r-md)} /* kotak video = kotak kanvas persis: object-fit fill aman karena --ar sudah rasio isi share */
#wb.ov canvas{background:none;border-color:transparent;box-shadow:none} /* anotasi = kanvas transparan di atas frame share, bukan mengganti capture */
#wb.ro canvas{cursor:not-allowed}
@media (max-width:760px){#meet.open #wb{display:none}} /* HP: panel chat/peserta memakai seluruh lebar, papan disembunyikan sementara */
@media (max-height:500px) and (min-width:500px) and (orientation:landscape){#wb{gap:4px}#wb .head{display:none}#wb .bar{padding:3px 6px}#wb .bar button{width:34px;height:34px}#wb .bar .x2{display:grid}#wb .bar .hint,#wb .bar .chk{font-size:11px}} /* HP horizontal: judul disembunyikan, Video pindah ke baris alat -> kertas lebih tinggi */