/* F11 game look: colours and layout from F11's pictures (priors/notion-f11aa/img/Layout-caa698d1_1.png, Layout-32965964_*.jpg). */
:root {
  --bg:#f4f3ef; --grid:#e3e1d9; --ink:#1e1e1e; --muted:#6b6b66; --orange:#dc572f; --cream:#f0e6d0; --red:#e5383b; --link:#b5532f;
  --panel:#fff; --panel-line:#e2e0d8; --shadow:0 2px 8px rgba(0,0,0,.12); --radius:12px;
  --font:"Sukhumvit Set","Thonburi",-apple-system,system-ui,sans-serif; --head:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
/* Butterfly's chat font (docs/59 item 56): IBM Plex Sans Thai Looped, bundled under assets/fonts (SIL OFL 1.1, assets/fonts/OFL.txt) so no internet is needed */
@font-face { font-family:"IBM Plex Sans Thai Looped"; font-weight:400; font-display:swap; src:url(assets/fonts/plex-thai-looped-400.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans Thai Looped"; font-weight:600; font-display:swap; src:url(assets/fonts/plex-thai-looped-600.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans Thai Looped"; font-weight:700; font-display:swap; src:url(assets/fonts/plex-thai-looped-700.woff2) format("woff2"); }
:root { --chat:"IBM Plex Sans Thai Looped",var(--font); }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--ink); font:15px/1.5 var(--font); }
button { font:inherit; cursor:pointer; color:inherit; }
.hidden { display:none !important; }
.box { background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ---------------------------------------------------------------- join */
#join { position:fixed; inset:0; display:grid; place-items:center; }
#join .box { padding:28px 30px; width:min(380px, 92vw); }
#join h1 { font:700 22px var(--head); margin:0 0 4px; }
#join input { width:100%; font:inherit; padding:10px 12px; border:1.5px solid var(--panel-line); border-radius:10px; margin:14px 0 10px; }
#join .err { color:var(--red); min-height:20px; font-size:14px; }
#join .again { margin-top:12px; font-size:13.5px; color:var(--muted); }
#join .again button { border:1px solid var(--panel-line); background:#fff; border-radius:16px; padding:2px 10px; margin:4px 4px 0 0; }
#join .names { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:14px 0 6px; }
#join .names button { padding:12px 8px; border:1.5px solid var(--panel-line); border-radius:10px; background:#fff; font-weight:700; cursor:pointer; overflow-wrap:anywhere; }
#join .names button:disabled { background:var(--cream); color:#5f5f5a; font-weight:400; cursor:not-allowed; }
#join .linkbtn { border:0; background:none; padding:6px; color:var(--link); text-decoration:underline; cursor:pointer; }
#join .codein { font:700 28px var(--head); letter-spacing:.3em; text-align:center; }
#joinConsent .row { display:flex; gap:8px; margin-top:16px; }
#joinConsent .row button { flex:1; }
#joinConsent p { margin:8px 0 0; }
.go { background:var(--ink); color:#fff; border:0; border-radius:10px; padding:10px 18px; font-weight:600; }
.go.orange { background:var(--orange); }
.ghost { background:#fff; border:1px solid var(--panel-line); border-radius:10px; padding:6px 12px; }

/* ---------------------------------------------------------------- intro (F11 slide pictures) */
#intro { position:fixed; inset:0; overflow:auto; }
#intro .icons { display:flex; justify-content:center; align-items:flex-end; gap:22px; margin:96px auto 18px; flex-wrap:wrap; }
#intro .bi { text-align:center; transition:opacity .3s; font-size:11px; color:var(--muted); }
#intro .bi img.ic { width:74px; height:74px; display:block; }
#intro .bi .modes { height:22px; display:flex; gap:4px; justify-content:center; margin-bottom:6px; }
#intro .bi .modes img { height:18px; }
#intro .bi.dim { opacity:.25; }
#intro .bi.on img.ic { animation:blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.35; } }
#intro .slide { position:relative; width:min(680px, 94vw); margin:0 auto 40px; background:var(--cream); border:1px solid #c9bda6; border-radius:6px; padding:22px 26px 70px 78px; min-height:250px; }
#intro .slide .bf { position:absolute; left:22px; top:20px; width:40px; animation:bfPop .7s cubic-bezier(.3,1.5,.5,1) both; } /* docs/59 item 45 */
@keyframes bfPop { 0% { transform:scale(.2) translateY(14px); opacity:0; } 100% { transform:none; opacity:1; } }
#intro .slide.typing p:last-of-type::after { content:""; display:inline-block; width:2px; height:1em; background:var(--ink); margin-left:2px; vertical-align:-2px; animation:blink .8s steps(1) infinite; }
#intro .slide h2 { font:700 17px var(--head); margin:0 0 12px; display:flex; justify-content:space-between; }
#intro .slide h2 span { font-weight:500; }
#intro .slide p { margin:0 0 10px; }
#intro .slide .pic { display:block; margin:10px auto; max-width:100%; }
#intro .slide .pic.small { width:110px; }
#intro .slide .pic.tall { max-height:330px; }
#intro .covers { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
#intro .covers img { height:110px; border-radius:6px; box-shadow:var(--shadow); }
#intro .map { display:grid; grid-template-columns:60px 1fr 1fr 60px; gap:0; align-items:center; margin:8px 0; font-size:12px; }
#intro .map img { width:100%; display:block; }
#intro .nav { position:absolute; right:18px; bottom:16px; display:flex; gap:10px; align-items:center; }
.play { width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ink); background:#fbefe0; display:inline-grid; place-items:center; padding:0; box-shadow:var(--shadow); }
.play::before { content:""; border-left:15px solid var(--orange); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
.play.back::before { border-left:0; border-right:15px solid var(--orange); margin:0 4px 0 0; }

/* ---------------------------------------------------------------- whiteboard */
#app { position:fixed; inset:0; user-select:none; -webkit-user-select:none; }
#app [contenteditable="true"], #app [contenteditable="plaintext-only"] { user-select:text; -webkit-user-select:text; }
#viewport { position:absolute; inset:0; overflow:hidden; background-color:var(--bg); touch-action:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); }
#viewport.pan { cursor:grab; } #viewport.panning { cursor:grabbing; }
#viewport.tool-note, #viewport.tool-frame, #viewport.tool-line { cursor:crosshair; }
#world { position:absolute; left:0; top:0; transform-origin:0 0; }
.cell { position:absolute; background-size:cover; background-position:center; outline:1px dashed #b8b4a8; }
.cell .lbl { position:absolute; left:14px; top:10px; font:600 20px var(--head); color:#8a877e; pointer-events:none; }
.cell.future::after { content:""; position:absolute; inset:0; background:rgba(244,243,239,.45); pointer-events:none; }
.cell.now { outline:2px solid #9a978c; }
svg#lines { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
svg#lines .hit { stroke:transparent; stroke-width:14; pointer-events:stroke; cursor:pointer; fill:none; }
svg#lines .ln { stroke:var(--link); stroke-width:2; fill:none; }
svg#lines g.sel .ln { stroke:var(--red); stroke-width:3; }
svg#lines .tmp { stroke:var(--red); stroke-width:2; stroke-dasharray:6 4; fill:none; }
.frame { position:absolute; border:1.5px dashed #8d8a80; border-radius:6px; background:rgba(255,255,255,.22); }
.frame .ft { position:absolute; left:-1px; top:-28px; font-size:14px; background:#fff; border:1px solid #c9c6bc; border-radius:6px; padding:1px 8px; min-width:60px; cursor:move; white-space:nowrap; }
.frame .ft:empty::before { content:"ตั้งชื่อกลุ่ม"; color:#aaa; }
.frame.sel { border-color:var(--red); }
.note { position:absolute; box-shadow:0 3px 6px rgba(0,0,0,.14); cursor:default; }
.note .tx { position:absolute; inset:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center;
  white-space:pre-wrap; word-break:break-word; line-height:1.25; outline:none; }
.note .tx.b { font-weight:700; } .note .tx.i { font-style:italic; }
.note .tx.u { text-decoration:underline; } .note .tx.s { text-decoration:line-through; } .note .tx.u.s { text-decoration:underline line-through; }
.note.editing .tx { cursor:text; user-select:text; -webkit-user-select:text; }
.note.sel { outline:1.5px solid var(--red); }
.note .dot { position:absolute; width:16px; height:16px; border-radius:50%; background:var(--red); border:2px solid #fff; display:none; cursor:pointer; z-index:2; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.note.sel .dot { display:block; } .note .dot:hover { transform:scale(1.25); }
.note .dot.t { left:calc(50% - 8px); top:-26px; } .note .dot.b { left:calc(50% - 8px); bottom:-26px; }
.note .dot.l { top:calc(50% - 8px); left:-26px; } .note .dot.r { top:calc(50% - 8px); right:-26px; }
.rz { position:absolute; width:10px; height:10px; background:#fff; border:1.5px solid var(--red); display:none; z-index:3; }
.rz.tl { left:-5px; top:-5px; cursor:nwse-resize; } .rz.br { right:-5px; bottom:-5px; cursor:nwse-resize; }
.rz.tr { right:-5px; top:-5px; cursor:nesw-resize; } .rz.bl { left:-5px; bottom:-5px; cursor:nesw-resize; }
.note.sel .rz, .frame.sel .rz, .qcard.sel .rz { display:block; }
.note.editing .rz, .note.editing .dot { display:none; }
.note .stars { position:absolute; left:0; top:calc(100% + 3px); display:flex; gap:2px; flex-wrap:wrap; z-index:1; }
.note .stars span { font-size:11px; background:#fff7d6; border:1px solid #d9b84a; border-radius:9px; padding:0 5px; white-space:nowrap; }
.note .picked { position:absolute; right:4px; top:-11px; font-size:11px; background:#1e1e1e; color:#fff; border-radius:9px; padding:0 6px; }
.note.ro { cursor:default; }
.note.linkA { outline:2px dashed var(--red); }
.qcard { position:absolute; cursor:move; }
.qcard img { width:100%; height:100%; display:block; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.18)); }
.qcard.sel { outline:1.5px solid var(--red); }
#rubber { position:absolute; border:1.5px dashed var(--red); pointer-events:none; }

/* toolbar over a selected post-it: B I U S and the star (Notion Layout) */
#notebar { position:absolute; display:flex; gap:2px; padding:4px; z-index:20; }
#notebar button { width:32px; height:30px; border:0; background:transparent; border-radius:6px; font-family:var(--head); }
#notebar button.on { background:#ece9e0; }
#notebar button:disabled { opacity:.3; cursor:default; }
#notebar .star.mine { color:#d39c00; }

/* friends' cursors */
#cursors { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cur { position:absolute; transition:left .08s linear, top .08s linear; }
.cur svg { width:18px; height:18px; display:block; }
.cur span { position:absolute; left:14px; top:14px; color:#fff; font-size:12px; padding:0 6px; border-radius:8px; white-space:nowrap; }

/* fixed boxes */
#roombox { position:absolute; left:16px; top:16px; padding:10px 16px; display:flex; gap:14px; align-items:center; z-index:30; }
#roombox .t { font:700 17px var(--head); } #roombox .c { font-size:12px; color:var(--muted); }
.avs { display:flex; } .av { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:600 12px var(--head); border:2px solid #fff; margin-left:-6px; color:#fff; }
.av.away { opacity:.35; }
#roomacts { position:absolute; left:16px; top:78px; display:flex; gap:6px; z-index:30; font-size:13px; }
#toolbar { position:absolute; left:16px; top:50%; transform:translateY(-50%); padding:8px; display:flex; flex-direction:column; gap:8px; z-index:30; }
#toolbar button { width:44px; height:44px; border:0; background:transparent; border-radius:8px; display:grid; place-items:center; padding:0; position:relative; }
#toolbar button.on { background:#ece9e0; }
#toolbar .sw { width:24px; height:24px; box-shadow:0 1px 3px rgba(0,0,0,.2); }
#toolbar .fr { width:24px; height:24px; border:1.5px dashed #555; border-radius:4px; }
#toolbar img { width:26px; height:26px; }
#toolbar hr { width:30px; border:0; border-top:1px solid var(--panel-line); margin:2px auto; }
#toolbar .deck img { width:34px; height:46px; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
#toolbar .deck.wait img { opacity:.4; filter:grayscale(.6); }
#toolbar .deck .clk { position:absolute; right:0; bottom:0; width:16px; height:16px; border-radius:50%; background:#fff; border:1px solid #555; font-size:10px; line-height:14px; }
#timebar { position:absolute; right:16px; top:16px; padding:6px 10px; display:flex; align-items:center; gap:10px; z-index:30; }
#timebar .clock { display:flex; align-items:center; gap:6px; font:700 20px var(--head); font-variant-numeric:tabular-nums; min-width:96px; }
#timebar .clock.over { color:var(--red); }
#timebar .clock.buffer { color:var(--orange); } /* spare time counting down (review 3 Nov) */
#timebar .start { border:0; background:transparent; font:700 18px var(--head); display:flex; align-items:center; gap:6px; }
/* designer, 29 Oct: START blinks while nobody has pressed it, so the team doesn't forget */
#timebar .start { border-radius:10px; padding:4px 8px; animation:startBlink 1.1s ease-in-out infinite; }
@keyframes startBlink { 0%, 100% { background:transparent; color:var(--ink); } 50% { background:var(--orange); color:#fff; } }
#timebar .sep { width:1px; height:30px; background:var(--panel-line); }
#timebar .brk { border:0; background:transparent; display:flex; align-items:center; gap:6px; font-size:10px; font-family:var(--head); }
#timebar .brk::before { content:""; width:16px; height:16px; background:#8f8f8f; }
#timebar .brk:disabled { opacity:.35; cursor:default; }
#timebar .nx { border:0; background:transparent; display:flex; align-items:center; gap:6px; font-size:10px; font-family:var(--head); }
#timebar .nx .play { width:36px; height:36px; }
#phase { position:absolute; right:16px; top:76px; font-size:13px; color:var(--muted); z-index:30; text-align:right; max-width:360px; }
#skipBtn { margin-top:6px; font-size:13px; }
#zoombar { position:absolute; left:16px; bottom:16px; padding:6px 12px; display:flex; align-items:center; gap:10px; z-index:30; }
#zoombar .pct { font:600 17px var(--head); min-width:56px; }
#zoombar .sep { width:1px; height:28px; background:var(--panel-line); }
#zoombar button { border:0; background:transparent; font-size:20px; padding:0 4px; }
#zoombar .bn { font-size:12px; font-family:var(--head); }
#zoombar img { width:38px; height:38px; cursor:pointer; }
#zoombar .all { font-size:12px; border:1px solid var(--panel-line); border-radius:8px; padding:2px 8px; }

/* Island panel (designer: hidden on the left, slides out on click) */
#island { position:absolute; left:84px; top:120px; bottom:84px; width:250px; background:#f6e7b3; border-radius:var(--radius); box-shadow:var(--shadow); z-index:29;
  padding:12px; overflow:auto; transform:translateX(calc(-100% - 120px)); transition:transform .25s; }
#island.open { transform:none; }
#island h3 { margin:0 0 4px; font:700 15px var(--head); }
#island .hint { font-size:12.5px; color:#6d5d2a; margin-bottom:10px; }
#island .it { background:#fff8db; border:1px solid #e3cf86; padding:8px; margin-bottom:8px; font-size:13.5px; white-space:pre-wrap; word-break:break-word; }
#island .it button { display:block; margin-top:6px; font-size:12px; border:1px solid #d6c27a; background:#fff; border-radius:8px; padding:1px 8px; }
#island.drop { outline:3px dashed var(--orange); }

/* Butterfly: an icon with a badge, opens a LINE-like chat (designer, 29 Oct) */
#bfbtn { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:62px; height:62px; border-radius:14px; background:var(--cream); border:1.5px solid #3a3a3a; z-index:31; display:grid; place-items:center; padding:0; }
#bfbtn img { width:38px; }
#bfbtn .badge { position:absolute; right:-7px; top:-7px; min-width:22px; height:22px; border-radius:11px; background:var(--red); color:#fff; font:700 12px/22px var(--head); padding:0 6px; }
#chat { position:absolute; right:16px; top:140px; bottom:84px; width:340px; background:var(--cream); border:1.5px solid #3a3a3a; border-radius:18px; z-index:31; display:flex; flex-direction:column; overflow:hidden; }
#chat .hd { padding:12px 14px 6px; display:flex; align-items:center; gap:8px; font:700 14px var(--head); }
#chat .hd img { width:30px; } #chat .hd button { margin-left:auto; border:0; background:transparent; font-size:18px; }
#chat .msgs { flex:1; overflow:auto; padding:6px 14px 10px; }
#chat #newMsg { align-self:center; margin:-44px 0 8px; position:relative; z-index:2; padding:4px 12px; font-size:13px; } /* review 3 Nov: new messages while reading old ones */
#chat .grp { margin-bottom:12px; } #chat .grp .tm { font-size:11px; color:var(--muted); margin:0 0 3px 4px; }
#chat .bub { background:#fff; border-radius:12px; padding:8px 12px; margin:0 26px 6px 0; box-shadow:0 2px 4px rgba(0,0,0,.12); white-space:pre-wrap; }
#chat .choice { display:flex; gap:6px; margin:4px 0 0; flex-wrap:wrap; } #chat .choice button { font-size:13px; padding:6px 10px; }
#chat .pick { font-size:12px; color:var(--muted); margin-top:2px; }
#chat .grp.me { text-align:right; } #chat .grp.me .bub { background:#dcefd8; margin:0 0 6px 26px; display:inline-block; text-align:left; }
#chat .typing { font-size:12.5px; color:var(--muted); padding:0 16px 4px; }
.hl { outline:3px solid var(--orange) !important; outline-offset:3px; animation:hlPulse .7s ease-in-out 6; }
@keyframes hlPulse { 50% { outline-color:transparent; } }
#chat textarea.in { resize:none; color:var(--ink); outline:none; }
#chat .in { margin:4px 12px 12px; border:1.5px solid #3a3a3a; border-radius:14px; background:#fff; padding:10px 12px; font:inherit; color:var(--ink); } /* white (docs/59 item 51) */

/* the big message: only when the team moves to a new board */
#veil { position:fixed; inset:0; background:rgba(30,30,30,.35); z-index:50; display:grid; place-items:center; }
#big { width:min(460px, 92vw); max-height:86vh; overflow:auto; background:var(--cream); border:1.5px solid #3a3a3a; border-radius:18px; padding:20px 22px; transition:transform .35s, opacity .35s; }
#big.shrink { transform:translate(40vw, 0) scale(.1); opacity:0; }
#big .hd { display:flex; gap:10px; align-items:center; margin-bottom:10px; } #big .hd img { width:40px; } #big .hd b { font:700 16px var(--head); }
#big .bub { background:#fff; border-radius:12px; padding:9px 13px; margin:0 0 8px; box-shadow:0 2px 4px rgba(0,0,0,.12); white-space:pre-wrap; }
#big .go { margin-top:8px; width:100%; }
#big .choice { display:flex; gap:8px; margin-top:10px; } #big .choice button { flex:1; margin-top:0; padding:10px; }
#confirm .box, #notesbox .box { width:min(420px, 92vw); padding:20px 22px; }
#confirm .row, #notesbox .row { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
#notesbox textarea { width:100%; height:120px; font:inherit; padding:8px; border:1px solid var(--panel-line); border-radius:8px; }
#breakv .box { padding:26px 30px; text-align:center; }
#breakv .wbar { width:260px; height:8px; margin:14px auto 6px; background:#eadfce; border-radius:4px; overflow:hidden; }
#breakv .wbar i { display:block; height:100%; background:#e69138; border-radius:4px; animation:wfill linear forwards; }
#breakv .wsub { font-size:12px; color:var(--muted); }
@keyframes wfill { to { width:100%; } }
#breakv .flap { animation:flap .9s ease-in-out infinite; }
@keyframes flap { 50% { transform:translateY(-5px) scaleX(.82); } }
#roomacts select { max-width:180px; font:inherit; font-size:13px; border-radius:8px; border:1px solid var(--panel-line); background:#fff; padding:4px 6px; }
#roomacts .live { background:#e5383b; color:#fff; border-color:#e5383b; } #breakv .clk { font:700 40px var(--head); margin:8px 0 14px; }
#toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:9px 16px; border-radius:10px; z-index:60; font-size:14px; max-width:90vw; }

/* ---------------------------------------------------------------- stream 4: chat, centre popup, voice (docs/59 §3, §6, §7) */
#chat, #big { font-family:var(--chat); }
#chat .hd .vb { margin-left:auto; font-size:16px; border-radius:8px; padding:2px 6px; } #chat .hd .vb + button { margin-left:0; }
#chat .hd .vb.live { background:#fbefe0; }
/* unread (docs/59 item 52): the icon wiggles; #bfbtn moves by transform, so the picture inside wiggles, not the button */
@keyframes wiggle { 0%, 60%, 100% { transform:rotate(0); } 10%, 30%, 50% { transform:rotate(-14deg) scale(1.08); } 20%, 40% { transform:rotate(14deg) scale(1.08); } }
#bfbtn.wiggle img, #chatIcon.wiggle { animation:wiggle 1.4s ease-in-out infinite; }
#bfbtn.drop, #chat.drop { outline:3px dashed var(--orange); outline-offset:3px; }
/* what Butterfly is doing right now (item 53) */
.typing i { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--muted); margin-right:2px; animation:dots 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay:.2s; } .typing i:nth-child(3) { animation-delay:.4s; }
@keyframes dots { 0%, 80%, 100% { opacity:.25; transform:none; } 40% { opacity:1; transform:translateY(-3px); } }
/* LINE-style quote of the message being answered (item 54) */
#chat .quote { margin:0 26px 4px 0; padding:4px 10px; border-left:3px solid var(--orange); background:rgba(255,255,255,.55); border-radius:6px; font-size:12.5px; color:var(--muted); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chat .quote b { display:block; color:var(--ink); font-size:12px; }
#chat .grp.me .quote { margin:0 0 4px 26px; text-align:left; }
#chat .grp.flash .bub { animation:flash 1.2s; } @keyframes flash { 30% { box-shadow:0 0 0 3px var(--orange); } }
/* a board intro and the tools walkthrough stand out a little from the rest */
#chat .grp.intro .bub { background:#fffaf0; border:1px solid #e3cf9a; }
#chat .grp.tour .bub { background:#fff; border-left:3px solid var(--orange); }
#chat .skip { font-size:12px; padding:2px 10px; margin-top:2px; }
#chat .say { border:0; background:transparent; font-size:12px; padding:0 0 0 6px; }
/* pictures and clips under a message (method explainers, board examples) */
#chat .media { margin:0 26px 6px 0; } #chat .media img, #chat .media video { display:block; max-width:100%; max-height:220px; object-fit:contain; border-radius:10px; box-shadow:0 2px 4px rgba(0,0,0,.12); background:#fff; }
#chat .media .cap { font-size:12px; color:var(--muted); margin-top:3px; }
/* post-its / cards dragged into the chat (items 55 + 26) */
#chat .tip { font-size:11.5px; color:var(--muted); padding:0 16px; }
#chat .refs { display:flex; flex-wrap:wrap; gap:4px; padding:2px 12px 0; } #chat .grp.me .refs { justify-content:flex-end; padding:0 0 3px; }
#chat .ref { font-size:12px; background:#fff7d6; border:1px solid #d9b84a; border-radius:9px; padding:1px 7px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#chat .ref button { border:0; background:transparent; font-size:11px; padding:0 0 0 4px; }
/* centre popup after the board check (item 29): bubbles come in one by one */
#big.popup .bub.pop { animation:bubIn .35s ease-out both; }
@keyframes bubIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
#big.popup .typing { padding:4px 4px 10px; }
#big.popup .choice button { flex:1; }
/* a chat picture opened large (review 3 Nov: method pictures were too small to read); click or Esc closes */
#chat .media img { cursor:zoom-in; }
#picZoom { position:fixed; inset:0; z-index:70; background:rgba(20,20,20,.82); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; cursor:zoom-out; }
#picZoom img { max-width:min(1200px, 96vw); max-height:86vh; object-fit:contain; background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.4); }
#picZoom .cap { color:#fff; font-size:15px; font-family:var(--chat); }

/* designer, 3 Nov night: the walkthrough lights only the part being explained and the chat; the rest goes dark (#chat is z 31, above this) */
#spot { position:fixed; z-index:30; border-radius:12px; box-shadow:0 0 0 200vmax rgba(20,20,20,.55); pointer-events:none; transition:left .25s, top .25s, width .25s, height .25s; }
#chat .tourbtns { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
#slide .nav .who { flex:1; font-size:13px; color:var(--muted); align-self:center; } /* the waiting list before the team starts the slides together */
#chat .in:disabled { background:#f3efe6; color:var(--muted); cursor:not-allowed; } /* the chat opens with START (designer, 3 Nov night) */