/* chat2.css — GoGoPips EXPERIMENTAL messenger (MSG_EXP_SPEC §3), fork of
   chat.css. Everything the fork adds lives in section 7 at the bottom and is
   prefixed gc- like the rest; the production chat.css is untouched.
   Original header follows.

   chat.css — GoGoPips chat, block B (client).
   Visual source: chat_lab.html, variant A (floating translucent window).
   Layout and colours are taken from the approved mockup 1:1; only the class
   names changed — everything here is prefixed `gc-` so nothing can collide
   with app.css (which already owns .row, .msg, .day, .pill, .hero…).

   Palette: no new colours. Tokens come from app.css; every var() carries a
   literal fallback so the file also renders standalone (chat_preview.html).
   The single new variable is --gc-a — the alpha of the floating window,
   driven by the "ПРОЗР." slider and stored per browser in localStorage. */

/* ============================================================
   0. LOCAL TOKEN ALIASES (site tokens + standalone fallbacks)
   ============================================================ */
.gc-host, .gc-pill{
  /* MSG_EXP_SPEC3 §4 — прозрачность стекла ОДНИМ числом на контейнере.
     .86 -> .72 (решение босса). Blur 14px не трогаем; «плотный» режим
     (.gc2-solid) стекло не использует вовсе, поэтому его это не касается. */
  --gc2-glass:  .72;
  --gc-bg:      var(--bg,      #0a0a0b);
  --gc-surface: var(--surface, #141416);
  --gc-sf2:     var(--surface2,#1b1b1e);
  --gc-line:    var(--line,    #28282b);
  --gc-line2:   var(--line2,   #34343a);
  --gc-tx:      var(--tx,      #f4f4f5);
  --gc-mut:     var(--mut,     #8b8b91);
  --gc-faint:   var(--faint,   #57575f);
  --gc-hi:      var(--hi,      #ffffff);
  --gc-pos:     var(--pos,     #35e37c);
  --gc-neg:     var(--neg,     #fa5d5d);
}

/* ============================================================
   1. FLOATING WINDOW SHELL (variant A)
   ============================================================ */
.gc-host{
  position:fixed; right:20px; bottom:20px; width:360px; height:480px; z-index:30;
  background:rgba(20,20,22,var(--gc2-glass,.72));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--gc-line2); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; min-width:0;
  transition:opacity .18s ease, transform .18s ease;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.4; color:var(--gc-tx);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.gc-host *{box-sizing:border-box}
.gc-hide{display:none!important}
.gc-host.gc-away{opacity:0; transform:translateY(10px) scale(.985); pointer-events:none}
.gc-host.gc-gone{display:none}
.gc-host.gc-dragging{transition:none; user-select:none}
.gc-host.gc-resizing{transition:none; user-select:none}

/* resize handle — TOP-LEFT, because the window is anchored right/bottom */
.gc-grip{position:absolute; left:0; top:0; width:16px; height:16px; cursor:nwse-resize; z-index:2}
.gc-grip::before{content:''; position:absolute; left:5px; top:5px; width:7px; height:7px;
  border-left:1px solid var(--gc-faint); border-top:1px solid var(--gc-faint); border-radius:2px 0 0 0}

/* collapsed pill */
/* The collapsed pill is the ONLY way back into the chat, so on a large monitor
   it must not read as a footnote: 48 px tall, brighter border, and a shadow to
   lift it off the board. Still a pill, not a blob — the label stays. */
.gc-pill{position:fixed; right:20px; bottom:20px; z-index:31; display:flex; align-items:center; gap:9px;
  background:rgba(20,20,22,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--gc-line2); border-radius:11px; padding:0 18px; min-height:48px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:700; letter-spacing:.2px; color:var(--gc-tx);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  transition:opacity .18s ease, transform .18s ease, border-color .18s ease}
.gc-pill:hover{border-color:var(--gc-mut); transform:translateY(-1px)}
.gc-pill.gc-away{opacity:0; transform:translateY(10px) scale(.985); pointer-events:none}
.gc-pill .gc-ub{background:var(--gc-hi); color:var(--gc-bg); border-radius:6px; font-size:10px;
  font-weight:700; padding:1px 6px; letter-spacing:.2px}
.gc-pill .gc-ub.gc-hide{display:none}

/* ============================================================
   2. HEADER
   ============================================================ */
.gc-head{display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-bottom:1px solid var(--gc-line); flex:0 0 auto; cursor:grab; user-select:none; min-width:0}
.gc-host.gc-dragging .gc-head{cursor:grabbing}
.gc-head .gc-ttl{font-size:13px; font-weight:700; letter-spacing:.2px; white-space:nowrap}
.gc-head .gc-onl{display:inline-flex; align-items:center; gap:6px; color:var(--gc-mut); font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; cursor:default}
.gc-head .gc-onl .gc-dot{width:6px; height:6px; border-radius:50%; background:var(--gc-pos); flex:0 0 auto}
.gc-head .gc-onl.gc-off .gc-dot{background:var(--gc-faint)}
.gc-hctl{margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto}
/* 26 px on the desktop, 40 px under 640 px (see the mobile block): the gear /
   minimise / close trio was 22 px, which is under every touch-target guideline
   and, per the owner, genuinely hard to hit on a phone. */
.gc-iconbtn{width:26px; height:26px; border-radius:7px; border:1px solid var(--gc-line);
  background:var(--gc-sf2); color:var(--gc-mut); cursor:pointer; font:inherit; font-size:12px;
  line-height:1; display:flex; align-items:center; justify-content:center; padding:0; flex:0 0 auto}
.gc-iconbtn:hover{color:var(--gc-tx); border-color:var(--gc-line2)}
/* MSG_EXP_SPEC2 §7 — the OPACITY slider that used to live here is gone; the
   gear button (.gc-cog) opens the panel in section 8 instead. */
.gc-cogico{width:16px; height:16px; display:block}

/* privacy notice (§8) — the room is readable by logged-out visitors */
.gc-notice{flex:0 0 auto; padding:6px 12px; font-size:10.5px; line-height:1.35; color:var(--gc-faint);
  border-bottom:1px solid var(--gc-line); display:flex; gap:6px; align-items:flex-start}
.gc-notice .gc-nx{margin-left:auto; cursor:pointer; color:var(--gc-faint); background:none; border:0;
  font:inherit; font-size:11px; padding:0 2px; flex:0 0 auto}
.gc-notice .gc-nx:hover{color:var(--gc-tx)}
.gc-notice.gc-hide{display:none}

/* transport error strip */
.gc-err{flex:0 0 auto; padding:5px 12px; font-size:11px; color:var(--gc-neg);
  border-bottom:1px solid var(--gc-line); background:rgba(250,93,93,.06)}
.gc-err.gc-hide{display:none}

/* ============================================================
   2b. ROOM TABS (ROOMS_SPEC §4)
       Layout idiom borrowed from chat_lab.html .nav .tab — muted label,
       active one carries the underline. Hidden entirely while there is a
       single room, so nothing about today's window changes until rooms exist.
       More than ~4 rooms: the strip scrolls horizontally. Never a dropdown.
   ============================================================ */
.gc-tabs{flex:0 0 auto; display:flex; align-items:stretch; gap:2px; min-width:0;
  padding:0 8px; border-bottom:1px solid var(--gc-line);
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain}
.gc-tabs::-webkit-scrollbar{height:0; display:none}
.gc-tabs.gc-hide{display:none}

.gc-tab{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; border-bottom:2px solid transparent; border-radius:0;
  padding:7px 8px 6px; margin:0; cursor:pointer; font:inherit; font-size:11.5px;
  font-weight:600; color:var(--gc-mut); white-space:nowrap; max-width:46%;
  transition:color .12s ease, border-color .12s ease}
.gc-tab:hover{color:var(--gc-tx)}
.gc-tab:focus-visible{outline:1px solid var(--gc-faint); outline-offset:-2px}
.gc-tab.gc-on{color:var(--gc-hi); border-bottom-color:var(--gc-hi); cursor:default}
.gc-tab .gc-tname{overflow:hidden; text-overflow:ellipsis; unicode-bidi:isolate; min-width:0}

/* [NIT-1] read-only room: readable, but you cannot write there. The strip has
   to say so before the click, not after — the composer turning into a line is
   the answer, not the announcement. Muted label + a slashed-circle marker. */
.gc-tab.gc-ro .gc-tname{color:var(--gc-mut)}
.gc-tab.gc-ro.gc-on .gc-tname{color:var(--gc-tx)}
.gc-tab.gc-ro .gc-tname::after{content:'\2298'; font-size:9px; margin-left:4px;
  opacity:.75; vertical-align:1px}

/* locked: still visible and still clickable — the click answers with the hint
   line below the strip (§4: a line, not a modal) */
.gc-tab.gc-locked{color:var(--gc-faint); cursor:help}
.gc-tab.gc-locked:hover{color:var(--gc-mut)}
.gc-lockico{width:10px; height:10px; flex:0 0 auto; display:block; opacity:.85}

/* unread: a dot, never a count — mseq increments are not messages (§4) */
.gc-udot{width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--gc-hi)}

.gc-lockhint{flex:0 0 auto; padding:5px 12px; font-size:10.5px; line-height:1.35;
  color:var(--gc-mut); border-bottom:1px solid var(--gc-line);
  background:rgba(255,255,255,.03); overflow-wrap:anywhere; unicode-bidi:isolate}
.gc-lockhint.gc-hide{display:none}

/* ============================================================
   3. MESSAGE LIST
   ============================================================ */
.gc-main{display:flex; min-height:0; flex:1 1 auto; min-width:0}
.gc-col{display:flex; flex-direction:column; min-width:0; min-height:0; flex:1 1 auto}
.gc-msgs{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:10px 12px 6px;
  display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain}
/* the list is a flex column: every child must keep its natural height.
   Without this, any child carrying overflow:hidden (the height-capped system
   line) gets an auto min-size of 0 and is squashed to a few pixels. */
.gc-msgs > *{flex:0 0 auto}
/* Dark scrollbar. Chromium paints the DEFAULT (light) bar on any scroller we
   do not style, and on the glass window that bright strip is the loudest thing
   in the panel. `scrollbar-color` covers Firefox, the ::-webkit rules cover
   Chromium/Safari; both stay inside .gc-host so the board is untouched. */
.gc-host{scrollbar-color:var(--gc-line2) transparent; scrollbar-width:thin}
.gc-host ::-webkit-scrollbar{width:10px; height:10px}
.gc-host ::-webkit-scrollbar-track{background:transparent}
.gc-host ::-webkit-scrollbar-thumb{background:var(--gc-line2); border-radius:10px;
  border:3px solid transparent; background-clip:content-box}
.gc-host ::-webkit-scrollbar-thumb:hover{background:var(--gc-mut); background-clip:content-box}
.gc-host ::-webkit-scrollbar-corner{background:transparent}
.gc-msgs::-webkit-scrollbar{width:10px}
.gc-msgs::-webkit-scrollbar-thumb{background:var(--gc-line2); border-radius:10px;
  border:3px solid transparent; background-clip:content-box}
.gc-msgs::-webkit-scrollbar-track{background:transparent}
.gc-state{color:var(--gc-faint); font-size:11px; text-align:center; padding:14px 4px}

.gc-msg{display:flex; gap:10px; min-width:0}
.gc-msg .gc-side{width:28px; flex:0 0 auto}
.gc-msg .gc-bd{min-width:0; flex:1 1 auto}
.gc-msg .gc-hdr{display:flex; align-items:baseline; gap:8px; margin-bottom:2px; min-width:0;
  max-height:20px; overflow:hidden}
.gc-msg .gc-who{font-size:12px; font-weight:700; color:var(--gc-tx); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:60%; unicode-bidi:isolate; direction:ltr}
.gc-msg .gc-ts{font-size:10px; color:var(--gc-faint); margin-left:auto; flex:0 0 auto}
.gc-msg.gc-grp{margin-top:-6px}
.gc-msg.gc-mine .gc-who{color:var(--gc-hi)}
.gc-msg.gc-pend{opacity:.55}
.gc-msg.gc-fail .gc-tx{color:var(--gc-neg)}
.gc-modbadge{font-size:9px; font-weight:700; letter-spacing:.6px; color:var(--gc-mut);
  border:1px solid var(--gc-line2); border-radius:6px; padding:0 5px; flex:0 0 auto}

/* the body: bidi-isolated, breaks anywhere, height-capped (Zalgo / 600 newlines) */
.gc-tx{font-size:13px; color:var(--gc-tx); white-space:pre-wrap; overflow-wrap:anywhere;
  word-break:break-word; unicode-bidi:isolate; max-height:220px; overflow:hidden;
  min-width:0; contain:content}
.gc-tx.gc-open{max-height:2400px}
.gc-tx.gc-del{color:var(--gc-faint); font-style:italic}
.gc-edited{color:var(--gc-faint); font-size:10px; margin-left:5px; unicode-bidi:isolate}
.gc-more{background:none; border:0; padding:2px 0 0; color:var(--gc-mut); font:inherit; font-size:11px;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.gc-more:hover{color:var(--gc-tx)}

/* per-message actions (own message / staff) */
.gc-acts{display:none; gap:6px; flex:0 0 auto}
.gc-msg:hover .gc-acts{display:inline-flex}
.gc-acts button{background:none; border:0; padding:0; color:var(--gc-faint); font:inherit;
  font-size:10px; cursor:pointer}
.gc-acts button:hover{color:var(--gc-tx)}

/* dividers */
.gc-day{display:flex; align-items:center; gap:10px; color:var(--gc-faint); font-size:10px;
  letter-spacing:.6px; margin:4px 0}
.gc-day::before,.gc-day::after{content:''; flex:1 1 auto; height:1px; background:var(--gc-line)}
.gc-unread{display:flex; align-items:center; gap:10px; color:var(--gc-mut); font-size:10px;
  letter-spacing:.6px; margin:4px 0}
.gc-unread::before,.gc-unread::after{content:''; flex:1 1 auto; height:1px;
  background:color-mix(in srgb, var(--gc-mut) 40%, transparent)}
/* the clamp moved from .gc-sys onto the text line: a system row now also holds
   the reaction button (§2.1 allows hearts on model events) and clipping the
   whole row would cut the button off */
.gc-sys{text-align:center; color:var(--gc-mut); font-size:11px; padding:2px 8px;
  overflow-wrap:anywhere; unicode-bidi:isolate;
  display:flex; flex-direction:column; align-items:center; gap:2px}
.gc-sys .gc-sline{max-height:80px; overflow:hidden; min-width:0}
.gc-sys .gc-sname{color:var(--gc-tx); font-weight:600}
/* CHAT_TASK_SIGNAL_TIME — the clock inside the line. Scoped: the .gc-msg .gc-ts
   rule uses margin-left:auto for the flex header, a centered sys line only
   needs a small gap. */
.gc-sys .gc-ts{font-size:10px; color:var(--gc-faint); margin-left:6px; white-space:nowrap}

/* ============================================================
   4. INLINE PIECES — crest, model chip, mention, link
   ============================================================ */
.gc-av{width:28px; height:28px; flex:0 0 auto; border-radius:7px; background:var(--gc-sf2);
  border:1px solid var(--gc-line); overflow:hidden; display:block}
.gc-av svg{display:block; width:100%; height:100%; padding:4px}
.gc-av.gc-xs{width:14px; height:14px; border-radius:4px; display:inline-block; vertical-align:-2px}
.gc-av.gc-xs svg{padding:2px}

.gc-chip{display:inline-flex; align-items:center; gap:6px; background:var(--gc-sf2);
  border:1px solid var(--gc-line); border-radius:6px; padding:1px 7px 1px 4px; font-size:11px;
  font-weight:600; color:var(--gc-tx); white-space:nowrap; vertical-align:-4px; line-height:16px;
  max-width:100%; overflow:hidden}
.gc-chip .gc-pl{font-weight:700}
.gc-chip .gc-pl.gc-pos{color:var(--gc-pos)}
.gc-chip .gc-pl.gc-neg{color:var(--gc-neg)}

.gc-at{background:var(--gc-sf2); color:var(--gc-hi); border-radius:6px; padding:0 5px; font-weight:600;
  unicode-bidi:isolate}
.gc-at.gc-me{background:color-mix(in srgb, var(--gc-hi) 22%, transparent)}

.gc-link{color:var(--gc-tx); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--gc-faint); unicode-bidi:isolate; direction:ltr; overflow-wrap:anywhere}
.gc-link:hover{text-decoration-color:var(--gc-tx)}
.gc-link.gc-warn{color:var(--gc-neg); text-decoration-color:var(--gc-neg)}
.gc-link.gc-warn::before{content:'⚠ '; font-size:10px}

/* ============================================================
   5. TYPING + COMPOSER
   ============================================================ */
.gc-typing{flex:0 0 auto; padding:0 12px 4px; color:var(--gc-faint); font-size:10px; height:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:isolate}
.gc-typing span{animation:gc-tp 1.6s ease-in-out infinite}
@keyframes gc-tp{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.gc-typing span{animation:none}}

/* chat2: the composer is a COLUMN — reply plate, attachment card, then the
   input row (§3.1 / §3.3). The old flex-row rules now live on .gc-crow. */
.gc-composer{flex:0 0 auto; display:flex; flex-direction:column; gap:8px; align-items:stretch;
  padding:10px 12px; border-top:1px solid var(--gc-line); min-width:0}
.gc-crow{display:flex; gap:8px; align-items:flex-end; min-width:0}
.gc-composer textarea{flex:1 1 auto; min-width:0; resize:none; height:36px; max-height:96px; overflow-y:auto;
  background:var(--gc-sf2); color:var(--gc-tx); border:1px solid var(--gc-line2); border-radius:8px;
  padding:8px 10px; font:inherit; font-size:13px; line-height:1.35; outline:none}
.gc-composer textarea::placeholder{color:var(--gc-faint)}
.gc-composer textarea:focus{border-color:var(--gc-faint)}
.gc-composer textarea:disabled{opacity:.5; cursor:not-allowed}
.gc-sendbtn{flex:0 0 auto; background:var(--gc-sf2); border:1px solid var(--gc-line2); color:var(--gc-tx);
  padding:8px 13px; border-radius:8px; cursor:pointer; font:inherit; font-size:12px; font-weight:600}
.gc-sendbtn:hover{border-color:var(--gc-faint); background:var(--gc-surface)}
.gc-sendbtn:active{transform:translateY(1px)}
.gc-sendbtn:disabled{opacity:.45; cursor:not-allowed; transform:none}

/* guest / read-only state instead of the composer */
.gc-guest{flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; border-top:1px solid var(--gc-line); color:var(--gc-mut); font-size:12px; min-width:0}
.gc-guest a, .gc-guest .gc-loginbtn{background:var(--gc-sf2); border:1px solid var(--gc-line2);
  color:var(--gc-tx); padding:5px 11px; border-radius:8px; font:inherit; font-size:12px;
  font-weight:600; cursor:pointer; text-decoration:none; flex:0 0 auto}
.gc-guest a:hover, .gc-guest .gc-loginbtn:hover{border-color:var(--gc-faint)}
.gc-guest .gc-gtx{min-width:0; overflow-wrap:anywhere}
/* read-only room: the same slot, no login button, quieter (ROOMS_SPEC §4) */
.gc-guest.gc-ro{justify-content:center; color:var(--gc-faint); font-size:11.5px; font-style:italic}

/* inline editor */
.gc-editbox{display:flex; flex-direction:column; gap:6px}
.gc-editbox textarea{resize:none; min-height:34px; max-height:120px; background:var(--gc-sf2);
  color:var(--gc-tx); border:1px solid var(--gc-line2); border-radius:8px; padding:6px 8px;
  font:inherit; font-size:13px; outline:none}
.gc-editrow{display:flex; gap:8px; align-items:center}
.gc-editrow button{background:var(--gc-sf2); border:1px solid var(--gc-line2); color:var(--gc-tx);
  padding:3px 9px; border-radius:7px; font:inherit; font-size:11px; font-weight:600; cursor:pointer}
.gc-editrow .gc-hint{color:var(--gc-faint); font-size:10px}

/* ============================================================
   7. CHAT2 — reply, reactions, attachments, channel (MSG_EXP_SPEC §3)
      Everything below this line is new in the experiment.
   ============================================================ */

/* ---- 7.1 reply: the quote in the feed and the plate in the composer ---- */
.gc-quote, .gc-replybar{display:flex; align-items:stretch; gap:7px; min-width:0;
  background:rgba(255,255,255,.035); border:0; border-radius:7px; padding:4px 7px;
  font:inherit; text-align:left; color:var(--gc-mut)}
.gc-quote{width:100%; margin:0 0 3px; cursor:pointer; max-width:100%}
.gc-quote:hover{background:rgba(255,255,255,.06)}
.gc-quote:focus-visible{outline:1px solid var(--gc-faint); outline-offset:-2px}
.gc-qbar{flex:0 0 auto; width:2px; border-radius:2px; background:var(--gc-mut); align-self:stretch}
.gc-qcol{display:flex; flex-direction:column; min-width:0; flex:1 1 auto; gap:1px}
.gc-qname{font-size:10.5px; font-weight:700; color:var(--gc-tx); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; unicode-bidi:isolate}
.gc-qex{font-size:10.5px; color:var(--gc-mut); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; unicode-bidi:isolate}
.gc-replybar{align-items:center; padding:6px 8px}
/* the × of the reply plate and of the attachment card */
.gc-cbx{flex:0 0 auto; width:24px; height:24px; margin-left:auto; border:0; border-radius:6px;
  background:none; color:var(--gc-faint); font:inherit; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0}
.gc-cbx:hover{color:var(--gc-tx); background:rgba(255,255,255,.06)}

/* the 2 s highlight after jumping to the quoted message (§3.1) */
.gc-flash{animation:gc-fl 2s ease-out 1; border-radius:8px}
@keyframes gc-fl{
  0%{background:color-mix(in srgb, var(--gc-hi) 20%, transparent)}
  70%{background:color-mix(in srgb, var(--gc-hi) 12%, transparent)}
  100%{background:transparent}
}
@media(prefers-reduced-motion:reduce){
  .gc-flash{animation:none; box-shadow:inset 0 0 0 1px var(--gc-faint)}
}

/* ---- 7.2 reactions ---- */
.gc-rrow{display:flex; align-items:center; gap:6px; margin-top:3px; min-width:0}
.gc-react, .gc-rxadd{display:inline-flex; align-items:center; gap:5px; border:1px solid transparent;
  background:none; border-radius:999px; padding:2px 7px 2px 5px; margin:0; cursor:pointer;
  font:inherit; font-size:11px; font-weight:600; color:var(--gc-faint);
  min-height:24px; transition:opacity .12s ease, color .12s ease, border-color .12s ease}
.gc-react:hover, .gc-rxadd:hover{color:var(--gc-tx); border-color:var(--gc-line2)}
.gc-react:disabled, .gc-rxadd:disabled{cursor:default; opacity:.4}
.gc-react:focus-visible, .gc-rxadd:focus-visible{outline:1px solid var(--gc-faint); outline-offset:1px}
.gc-react.gc-on{color:var(--gc-neg); border-color:color-mix(in srgb, var(--gc-neg) 35%, transparent)}
.gc-react.gc-has{background:var(--gc-sf2); border-color:var(--gc-line)}
/* no count and no hover -> invisible but still laid out, so the row never jumps */
.gc-react:not(.gc-has){opacity:0}
.gc-msg:hover .gc-react, .gc-sys:hover .gc-react,
.gc-react:focus-visible, .gc-react.gc-on{opacity:1}
/* §1.1 (волна 3) — размер значка приходит из --gc2-ico, чтобы оверлей частиц
   умел считаться от него же (chat2.css §9.1) */
.gc-hico{width:var(--gc2-ico,13px); height:var(--gc2-ico,13px); display:block; flex:0 0 auto}
.gc-rn{font-variant-numeric:tabular-nums}

/* ---- 7.3 attachments in the feed ---- */
/* the picture: the ratio is reserved from w/h BEFORE the bytes land (§3.3) */
.gc-img{display:block; padding:0; margin:3px 0; border:1px solid var(--gc-line);
  border-radius:9px; overflow:hidden; background:var(--gc-sf2); cursor:zoom-in;
  max-width:100%; line-height:0}
.gc-img:hover{border-color:var(--gc-line2)}
.gc-img:focus-visible{outline:1px solid var(--gc-faint); outline-offset:2px}
.gc-imgel{display:block; width:100%; height:auto; max-width:100%}

.gc-file{display:flex; align-items:center; gap:9px; margin:3px 0; padding:7px 9px; min-width:0;
  background:var(--gc-sf2); border:1px solid var(--gc-line); border-radius:9px}
.gc-fico{width:20px; height:20px; flex:0 0 auto; color:var(--gc-mut); display:block}
.gc-fcol, .gc-acol{display:flex; flex-direction:column; min-width:0; flex:1 1 auto; gap:2px}
.gc-fname{font-size:12px; font-weight:600; color:var(--gc-tx); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; unicode-bidi:isolate; direction:ltr}
.gc-fmeta{font-size:10px; color:var(--gc-faint); letter-spacing:.3px; unicode-bidi:isolate}
.gc-fmeta.gc-bad{color:var(--gc-neg)}
.gc-fdl{flex:0 0 auto; background:var(--gc-surface); border:1px solid var(--gc-line2);
  color:var(--gc-tx); padding:4px 9px; border-radius:7px; font-size:11px; font-weight:600;
  text-decoration:none; min-height:26px; display:inline-flex; align-items:center}
.gc-fdl:hover{border-color:var(--gc-faint)}

/* lightbox — its own overlay, above the window and above the pill */
.gc-lb{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,7,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:24px}
.gc-lbimg{max-width:100%; max-height:100%; object-fit:contain; display:block;
  border-radius:6px; background:#000}
.gc-lbx{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line2,#34343a); background:rgba(20,20,22,.9); color:#f4f4f5;
  font:inherit; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.gc-lbx:hover{border-color:#8b8b91}

/* ---- 7.4 composer: paperclip + staged attachment ---- */
.gc-filein{display:none}
.gc-attachbtn{flex:0 0 auto; width:36px; height:36px; border-radius:8px; padding:0;
  border:1px solid var(--gc-line2); background:var(--gc-sf2); color:var(--gc-mut); cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.gc-attachbtn:hover{color:var(--gc-tx); border-color:var(--gc-faint)}
.gc-attachbtn:focus-visible{outline:1px solid var(--gc-faint); outline-offset:1px}
.gc-clipico{width:17px; height:17px; display:block}
.gc-attachbar{display:flex; align-items:center; gap:9px; min-width:0; padding:6px 8px;
  background:rgba(255,255,255,.035); border-radius:7px}
.gc-athumb{width:38px; height:38px; flex:0 0 auto; border-radius:6px; object-fit:cover;
  background:var(--gc-sf2); border:1px solid var(--gc-line); display:block}
.gc-prog{height:3px; border-radius:3px; background:var(--gc-line); overflow:hidden; margin-top:2px}
.gc-progf{height:100%; width:0; background:var(--gc-mut); transition:width .15s linear}

/* ---- 7.5 channel mode (§3.4): wide posts, no avatar column ---- */
.gc-host.gc-chanmode .gc-msgs{gap:16px; padding:12px 12px 8px}
.gc-msg.gc-post{display:block; background:rgba(255,255,255,.028); border:1px solid var(--gc-line);
  border-radius:11px; padding:9px 11px}
.gc-msg.gc-post .gc-bd{width:100%}
.gc-msg.gc-post .gc-hdr{gap:7px; margin-bottom:5px}
.gc-msg.gc-post .gc-tx{font-size:13.5px; line-height:1.5}
.gc-msg.gc-post .gc-rrow{margin-top:7px}
/* reactions are the only interaction a channel reader has — make them visible */
.gc-msg.gc-post .gc-react, .gc-msg.gc-post .gc-rxadd{opacity:1; border-color:var(--gc-line);
  background:var(--gc-sf2); padding:3px 10px 3px 8px; min-height:28px}
/* размер задаётся переменной, а не самим значком: от неё считается оверлей */

/* ============================================================
   8. WAVE 2 (MSG_EXP_SPEC2) — avatars, counters, pin, backfill,
      settings panel, theme. Everything below is new in wave 2.
   ============================================================ */

/* ---- 8.1 avatars (§1) ---- */
/* The box is the crest's box, so a photo and a letter circle occupy exactly the
   same 28 px and the text edge never moves between rows. */
.gc-avbox{display:block; overflow:hidden}
.gc-avbox svg{display:block; width:100%; height:100%; padding:0}
.gc-avimg{display:block; width:100%; height:100%; object-fit:cover; background:var(--gc-sf2)}

/* ---- 8.2 unread counters (§2.2 / §4) ---- */
.gc-ucnt{flex:0 0 auto; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--gc-line2); color:var(--gc-hi); font-size:9.5px; font-weight:700;
  line-height:16px; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:.2px}
.gc-tab.gc-on .gc-ucnt{background:var(--gc-hi); color:var(--gc-bg)}
/* §4 — a mention is not "more unread", it is a different kind of thing */
.gc-ucnt.gc2-at{background:var(--gc-pos); color:#08120c}

/* §4 — the soft highlight on a row addressed to me. Static, not an animation:
   it has to survive a re-render and still be there when the eye arrives. */
.gc2-mine-hit{border-radius:8px; box-shadow:inset 2px 0 0 var(--gc-pos);
  background:color-mix(in srgb, var(--gc-pos) 7%, transparent); padding-left:6px;
  margin-left:-6px}

/* ---- 8.3 pin strip (§3.4) ---- */
.gc-pinbar{flex:0 0 auto; display:flex; align-items:center; gap:4px; min-width:0;
  padding:4px 8px 4px 10px; border-bottom:1px solid var(--gc-line);
  background:rgba(255,255,255,.028)}
.gc-pinbar.gc-hide{display:none}
.gc-pingo{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
  background:none; border:0; padding:2px 0; margin:0; cursor:pointer; font:inherit;
  text-align:left; color:var(--gc-mut)}
.gc-pingo:hover .gc-qname{color:var(--gc-hi)}
.gc-pingo:focus-visible{outline:1px solid var(--gc-faint); outline-offset:1px}
.gc-pinico{width:13px; height:13px; flex:0 0 auto; display:block; color:var(--gc-mut)}
/* [MINOR-9] a pinned file: the paperclip sits inline in the excerpt line */
.gc-pinbar .gc-qex .gc-clipico{width:11px; height:11px; display:inline-block; vertical-align:-1px}

/* ---- 8.4 "показать ранние" (§5) ---- */
.gc-earlier{display:flex; justify-content:center; padding:2px 0 4px}
.gc-earlier .gc-more{padding:4px 10px; min-height:28px; border:1px solid var(--gc-line);
  border-radius:999px; background:var(--gc-sf2); text-decoration:none}
.gc-earlier .gc-more:disabled{opacity:.5; cursor:default}

/* ---- 8.5 settings panel (§7) ---- */
.gc-menu{position:absolute; top:42px; right:8px; z-index:5; width:214px; max-width:calc(100% - 16px);
  display:flex; flex-direction:column; gap:9px; padding:10px;
  background:var(--gc-surface); border:1px solid var(--gc-line2); border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.42)}
.gc-menu.gc-hide{display:none}
.gc-mgt{font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--gc-faint); margin-bottom:4px}
.gc-mgr{display:flex; gap:4px; flex-wrap:wrap}
.gc-mo{flex:0 1 auto; background:var(--gc-sf2); border:1px solid var(--gc-line);
  color:var(--gc-mut); padding:5px 9px; border-radius:7px; font:inherit; font-size:11px;
  font-weight:600; cursor:pointer; min-height:28px; white-space:nowrap}
.gc-mo:hover{color:var(--gc-tx); border-color:var(--gc-line2)}
.gc-mo.gc-on{color:var(--gc-hi); border-color:var(--gc-hi); background:var(--gc-surface)}
.gc-mo:focus-visible{outline:1px solid var(--gc-faint); outline-offset:1px}

/* ---- 8.6 §7.2 "плотный": opaque AND no blur ----
   The second half is the point. backdrop-filter forces the compositor to
   re-blur everything under the window on every scroll of the board behind it;
   on a weak mobile GPU that is a permanent frame-rate tax paid by a user who
   may not even want the glass. Turning it off has to be one tap. */
.gc-host.gc2-solid{background:#111113; -webkit-backdrop-filter:none; backdrop-filter:none}
.gc-pill.gc2-solid{background:#111113; -webkit-backdrop-filter:none; backdrop-filter:none}

/* ---- 8.7 §7.3 light theme — CSS VARIABLES ON THE CONTAINER ONLY ----
   The board keeps its own palette: this block never leaves .gc-host/.gc-pill,
   and every colour inside the widget already goes through these tokens. */
.gc-host.gc2-light, .gc-pill.gc2-light{
  --gc-bg:#ffffff;
  --gc-surface:#ffffff;
  --gc-sf2:#f1f1f4;
  --gc-line:#e0e0e5;
  --gc-line2:#c9c9d1;
  --gc-tx:#17171a;
  --gc-mut:#5a5a64;
  --gc-faint:#8c8c96;
  --gc-hi:#0b0b0d;
  --gc-pos:#12905a;
  --gc-neg:#c8302f;
  /* светлая тема жила на .9 и остаётся на .9: §4 меняет ТЁМНОЕ стекло.
     Белый фон окна поверх белого графика и так не «плывёт». */
  --gc2-glass:.9;
  background:rgba(250,250,252,var(--gc2-glass,.9));
  color:var(--gc-tx);
}
.gc-host.gc2-light.gc2-solid, .gc-pill.gc2-light.gc2-solid{background:#fafafc}
/* the few surfaces that were hard-coded as "a bit of white over black" have to
   flip with the theme, or they turn into invisible smudges */
.gc-host.gc2-light .gc-quote,
.gc-host.gc2-light .gc-replybar,
.gc-host.gc2-light .gc-attachbar,
.gc-host.gc2-light .gc-pinbar,
.gc-host.gc2-light .gc-lockhint{background:rgba(0,0,0,.045)}
.gc-host.gc2-light .gc-quote:hover{background:rgba(0,0,0,.075)}
.gc-host.gc2-light .gc-msg.gc-post{background:rgba(0,0,0,.035)}
.gc-host.gc2-light .gc-cbx:hover{background:rgba(0,0,0,.06)}
.gc-host.gc2-light .gc-err{background:rgba(200,48,47,.08)}
.gc-host.gc2-light .gc-menu{box-shadow:0 10px 26px rgba(0,0,0,.16)}
.gc-host.gc2-light .gc-ucnt.gc2-at{color:#ffffff}

/* ============================================================
   9. WAVE 3 (MSG_EXP_SPEC3) — реакции-класс, markdown, слайдер комнат,
      уровни записи, читабельность на новом стекле.
   ============================================================ */

/* ---- 9.0 §4 читабельность ----
   Окно стало прозрачнее (.72), а под ним белые графики: на светлой подложке
   приглушённые токены (--gc-mut / --gc-faint: время, счётчики, цитаты) теряют
   контраст. Спека разрешает поднять непрозрачность подложки СООБЩЕНИЙ, а не
   окна — лента получает собственный скрим, рамка/шапка/композер остаются
   настолько прозрачными, насколько их сделал §4.
   Только тёмное стекло: в «плотном» фон и так непрозрачный, в светлом скрим
   из чёрного превратил бы тему в грязь. */
.gc-host:not(.gc2-solid):not(.gc2-light) .gc-msgs{background:rgba(14,14,16,.30)}

/* ---- 9.1 §1 реакции-класс: чипы + мини-палитра ----
   Значок = SVG-узел из фабрики (createElementNS), акцент и анимация — по
   классу gc2-rx-<key>. Финальные значения перенесены из reactions_lab.html
   (выбор босса 2026-07-26): все три значка — вариант (а) «заливка»,
   анимации heart=pulse, fire=float, zap=burst.

   --gc2-ico — ЕДИНСТВЕННЫЙ источник размера значка. От него же считается
   оверлей частиц (предупреждение лаборатории №1): у оверлея нет атрибутов
   width/height, только CSS от этой переменной, поэтому разлёт частиц
   масштабируется вместе со значком и на 13px чипе не улетает через пол-ленты. */
.gc-react, .gc-rxadd{--gc2-ico:13px; position:relative}
.gc-rxp{--gc2-ico:17px}
.gc-msg.gc-post .gc-react, .gc-msg.gc-post .gc-rxadd{--gc2-ico:15px}
/* реестр акцентов — ровно три ключа, как REACTIONS в §1.1 */
.gc2-rx-heart{--gc2-ac:#ff5a6a}
.gc2-rx-fire {--gc2-ac:#ff9a3c}
.gc2-rx-zap  {--gc2-ac:#ffd34d}
.gc-rxwrap{position:relative; display:inline-flex; flex:0 0 auto}
.gc-rxpal{position:absolute; left:0; bottom:100%; z-index:6; display:none;
  align-items:center; gap:2px; padding:3px; margin-bottom:3px;
  background:var(--gc-surface); border:1px solid var(--gc-line2); border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.38)}
/* мышь — по наведению; клавиатура — по фокусу; тач — по классу от тапа */
.gc-rxwrap:hover .gc-rxpal,
.gc-rxwrap:focus-within .gc-rxpal,
.gc-rxwrap.gc-open .gc-rxpal{display:flex}
.gc-rxp{width:30px; height:30px; padding:0; border:0; border-radius:50%; background:none;
  color:var(--gc-mut); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font:inherit; flex:0 0 auto}
.gc-rxp:hover{background:var(--gc-sf2); color:var(--gc-tx)}
.gc-rxp:focus-visible{outline:1px solid var(--gc-faint); outline-offset:-1px}
/* «свой» значок — акцент своего ключа; один токен, а не три пары правил */
.gc-react.gc-on, .gc-rxp.gc-on{color:var(--gc2-ac, var(--gc-hi))}
.gc-react.gc-on{border-color:color-mix(in srgb, var(--gc2-ac, var(--gc-hi)) 35%, transparent)}
/* сцена значка: относительно неё живут кольца, частицы и взлетающая копия.
   Отдельный узел (а не сама кнопка) — иначе центр «съезжает» на счётчик. */
.gc-rxstage{position:relative; display:inline-flex; flex:0 0 auto; line-height:0}
/* кнопка-палитра без счётчика ведёт себя как прежнее пустое сердечко:
   не видна, но занимает место — строка не прыгает при наведении */
.gc-rxadd{opacity:0}
.gc-msg:hover .gc-rxadd, .gc-sys:hover .gc-rxadd,
.gc-rxwrap:focus-within .gc-rxadd, .gc-rxwrap.gc-open .gc-rxadd{opacity:1}
.gc-msg.gc-post .gc-rxadd{opacity:1}

/* ---- 9.1b АНИМАЦИИ СРАБАТЫВАНИЯ — перенесены из reactions_lab.html ----
   Выбор босса: heart = pulse (двойное кольцо), fire = float (взлёт копии),
   zap = burst (7 частиц). Все ≤600мс, все на transform/opacity, ни одна не
   влияет на поток: оверлеи absolute внутри .gc-rxstage. */

/* короткий толчок самого значка — общая «подложка» под все три */
@keyframes gc2-rx-kick{
  0%  {transform:scale(1)}
  32% {transform:scale(1.17)}
  100%{transform:scale(1)}
}
.gc2-rx-kick{animation:gc2-rx-kick 320ms cubic-bezier(.2,.8,.3,1) both}

/* контейнер частиц: viewBox 0 0 100 100, размер ТОЛЬКО из CSS (см. --gc2-ico).
   px в transform у потомков SVG считаются в user units, поэтому разлёт
   масштабируется вместе со значком сам собой. */
.gc2-rx-ov{
  position:absolute; left:50%; top:50%;
  width:calc(var(--gc2-ico, 13px) * 5); height:calc(var(--gc2-ico, 13px) * 5);
  transform:translate(-50%,-50%);
  color:var(--gc2-ac, currentColor); pointer-events:none; overflow:visible;
}
/* burst — разлёт 7 частиц (zap) */
@keyframes gc2-rx-part{
  0%  {transform:translate(0,0) scale(.3);                       opacity:0}
  14% {opacity:1}
  70% {opacity:.85}
  100%{transform:translate(var(--dx),var(--dy)) scale(var(--ps)); opacity:0}
}
.gc2-rx-p{
  transform-box:fill-box; transform-origin:center;
  animation:gc2-rx-part 500ms cubic-bezier(.16,.72,.3,1) both;
  animation-delay:var(--dl, 0ms);
}
/* pulse — двойное кольцо (heart) */
@keyframes gc2-rx-ring{
  0%  {transform:scale(.34); opacity:.95}
  100%{transform:scale(1.95); opacity:0}
}
.gc2-rx-ring{
  transform-box:fill-box; transform-origin:center;
  animation:gc2-rx-ring 460ms cubic-bezier(.2,.72,.3,1) both;
  animation-delay:var(--dl, 0ms);
}
/* float — взлёт копии значка с затуханием (fire) */
@keyframes gc2-rx-float{
  0%  {transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:.9}
  18% {opacity:1}
  100%{transform:translate(-50%,calc(-50% - 34px)) scale(1.55) rotate(var(--rot, 6deg)); opacity:0}
}
.gc2-rx-float{
  position:absolute; left:50%; top:50%; pointer-events:none;
  color:var(--gc2-ac, currentColor);
  animation:gc2-rx-float 600ms cubic-bezier(.25,.6,.3,1) both;
}
/* §1.2 — «prefers-reduced-motion: reduce — анимации выключены».
   Тоггл, заливка и счётчик продолжают работать: выключается ДВИЖЕНИЕ, а не
   функция. JS дополнительно не создаёт ни колец, ни частиц. */
@media(prefers-reduced-motion:reduce){
  .gc2-rx-kick, .gc2-rx-p, .gc2-rx-ring, .gc2-rx-float{animation:none !important}
  .gc-rxpal{box-shadow:none}
}

/* ---- 9.2 §6 markdown (подмножество v1) ---- */
.gc-tx .gc-b{font-weight:700; color:var(--gc-hi)}
.gc-tx .gc-i{font-style:italic}
.gc-icode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:.92em; background:var(--gc-sf2); border:1px solid var(--gc-line);
  border-radius:4px; padding:0 4px; unicode-bidi:isolate; overflow-wrap:anywhere}
.gc-code{display:block; margin:4px 0; padding:7px 9px; background:var(--gc-sf2);
  border:1px solid var(--gc-line); border-radius:8px; overflow-x:auto; max-width:100%}
.gc-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:12px; line-height:1.45; white-space:pre; display:block; unicode-bidi:isolate;
  color:var(--gc-tx)}
.gc-code::-webkit-scrollbar{height:6px}
.gc-code::-webkit-scrollbar-thumb{background:var(--gc-line2); border-radius:6px}
.gc-bq{display:block; margin:3px 0; padding:1px 0 1px 9px; border-left:2px solid var(--gc-line2);
  color:var(--gc-mut)}
.gc-ul{display:block; margin:3px 0}
.gc-li{display:flex; gap:7px; align-items:baseline; min-width:0}
.gc-lim{flex:0 0 auto; color:var(--gc-mut); font-variant-numeric:tabular-nums;
  min-width:1.1em; text-align:right}
.gc-lit{min-width:0; flex:1 1 auto; overflow-wrap:anywhere}
.gc-p{display:block}
.gc-p + .gc-p{margin-top:2px}

/* ---- 9.3 §5.6 admin badge ----
   Owner's call: an admin wears the SAME "MOD" chip as a moderator. This class
   is applied on top of .gc-modbadge and changes exactly one thing — a darker,
   slightly more solid outline — so the rank is legible to whoever knows the
   difference and invisible to everyone else. The old white pill shouted. */
.gc-adminbadge{color:var(--gc-tx); border-color:var(--gc-faint);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
/* строка вместо композера, когда уровня не хватает (§5.6) */
.gc-guest.gc-wl{justify-content:center; color:var(--gc-faint); font-size:11.5px; font-style:italic}

/* ---- 9.4 §7 слайдер комнат ---- */
.gc-tabsw{position:relative; display:flex; align-items:stretch; min-width:0; flex:0 0 auto;
  border-bottom:1px solid var(--gc-line)}
.gc-tabsw.gc-hide{display:none}
/* полоса живёт ВНУТРИ обёртки: свою нижнюю границу отдаёт обёртке, иначе
   стрелки, стоящие рядом, висели бы над линией */
/* полоса отдаёт свою нижнюю границу обёртке, иначе стрелки поверх неё
   перекрывали бы линию; scroll-padding держит активный таб из-под стрелки
   при автоскролле (scrollIntoView) */
.gc-tabsw .gc-tabs{border-bottom:0; flex:1 1 auto;
  scroll-padding-left:32px; scroll-padding-right:32px}
.gc-tabs.gc-drag{cursor:grabbing; scroll-behavior:auto; user-select:none}
/* Стрелки лежат ПОВЕРХ полосы, а не в её потоке. Иначе получается петля
   обратной связи: показали стрелку -> полоса стала уже на 28px -> переполнения
   больше нет -> стрелку спрятали -> переполнение вернулось. Абсолютные стрелки
   не меняют clientWidth, поэтому измерение однозначно. Цена — крайний таб
   частично перекрыт, и это ровно тот случай, когда стрелка и нужна. */
.gc-tarr{position:absolute; top:0; bottom:0; width:28px; min-width:28px; padding:0; margin:0;
  border:0; background:var(--gc-surface); color:var(--gc-mut); cursor:pointer;
  font:inherit; font-size:15px; line-height:1; display:flex; align-items:center;
  justify-content:center; z-index:2}
.gc-tarr.gc-prev{left:0}
.gc-tarr.gc-next{right:0}
.gc-tarr:hover{color:var(--gc-tx)}
.gc-tarr:focus-visible{outline:1px solid var(--gc-faint); outline-offset:-2px}
.gc-tarr.gc-hide{display:none}
.gc-tarr.gc-prev{box-shadow:6px 0 8px -6px rgba(0,0,0,.55)}
.gc-tarr.gc-next{box-shadow:-6px 0 8px -6px rgba(0,0,0,.55)}
.gc-host.gc2-light .gc-tarr.gc-prev{box-shadow:6px 0 8px -6px rgba(0,0,0,.18)}
.gc-host.gc2-light .gc-tarr.gc-next{box-shadow:-6px 0 8px -6px rgba(0,0,0,.18)}
/* §7.2 — иконка комнаты перед названием; нет иконки = нет узла и нет отступа */
.gc-tico{flex:0 0 auto; font-size:12.5px; line-height:1; unicode-bidi:isolate;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',system-ui,sans-serif}

/* ============================================================
   10. POLLS (POLLS_SPEC §5) — the card in the feed, the "New poll" form
       and the "who voted" list. Everything is prefixed gc2-p* / gc2-v*, uses
       the same tokens as the rest of the widget (so the light theme comes for
       free through §8.7) and adds no new colour.
   ============================================================ */

/* ---- 10.1 the card in the feed ---- */
.gc2-poll{display:flex; flex-direction:column; gap:6px; min-width:0; margin:3px 0;
  padding:9px 10px; background:var(--gc-sf2); border:1px solid var(--gc-line);
  border-radius:10px}
.gc2-pq{font-size:13px; font-weight:700; color:var(--gc-tx); overflow-wrap:anywhere;
  unicode-bidi:isolate; white-space:pre-wrap}
.gc2-pd{font-size:11.5px; color:var(--gc-mut); overflow-wrap:anywhere; unicode-bidi:isolate;
  white-space:pre-wrap}
.gc2-plist{display:flex; flex-direction:column; gap:4px; min-width:0}

/* a choice — a button (single) or a label with a checkbox (multi) */
.gc2-popt{display:flex; align-items:center; gap:8px; min-width:0; width:100%;
  min-height:36px; padding:7px 10px; margin:0; text-align:left;
  background:var(--gc-surface); border:1px solid var(--gc-line2); border-radius:8px;
  color:var(--gc-tx); font:inherit; font-size:12.5px; cursor:pointer;
  transition:border-color .12s ease, background .12s ease}
.gc2-popt:hover{border-color:var(--gc-faint)}
.gc2-popt:focus-visible, .gc2-popt:focus-within{outline:1px solid var(--gc-faint); outline-offset:1px}
.gc2-popt.gc2-pdead{cursor:default; opacity:.75}
.gc2-popt.gc2-pdead:hover{border-color:var(--gc-line2)}
.gc2-plab{min-width:0; flex:1 1 auto; overflow-wrap:anywhere; unicode-bidi:isolate}
/* the real checkbox stays in the DOM for the keyboard and for screen readers;
   what is drawn is the box next to it */
.gc2-pcbi{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
.gc2-pbox{flex:0 0 auto; width:16px; height:16px; border-radius:5px;
  border:1.5px solid var(--gc-line2); background:transparent; position:relative}
.gc2-popt.gc2-pon{border-color:var(--gc-hi)}
.gc2-popt.gc2-pon .gc2-pbox{background:var(--gc-hi); border-color:var(--gc-hi)}
.gc2-popt.gc2-pon .gc2-pbox::after{content:''; position:absolute; left:4.5px; top:1px;
  width:4px; height:8px; border:solid var(--gc-bg); border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.gc2-pvote{align-self:flex-start; min-height:32px; padding:6px 14px; border-radius:8px;
  background:var(--gc-surface); border:1px solid var(--gc-line2); color:var(--gc-tx);
  font:inherit; font-size:12px; font-weight:700; cursor:pointer}
.gc2-pvote:hover{border-color:var(--gc-faint)}
.gc2-pvote:disabled{opacity:.45; cursor:not-allowed}

/* a result row: the tick, the label, the share, the count, the bar */
.gc2-pres{display:flex; flex-direction:column; gap:4px; min-width:0; width:100%;
  padding:5px 8px; margin:0; text-align:left; background:none; border:1px solid transparent;
  border-radius:8px; color:var(--gc-tx); font:inherit; font-size:12.5px}
.gc2-pres.gc2-pclick{cursor:pointer}
.gc2-pres.gc2-pclick:hover{background:rgba(255,255,255,.05); border-color:var(--gc-line)}
.gc2-pres:focus-visible{outline:1px solid var(--gc-faint); outline-offset:1px}
.gc2-pline{display:flex; align-items:center; gap:7px; min-width:0}
.gc2-pmark{flex:0 0 auto; width:14px; height:14px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--gc-hi)}
.gc2-ptick{width:14px; height:14px; display:block}
.gc2-ppct{flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--gc-tx);
  font-variant-numeric:tabular-nums; margin-left:auto}
.gc2-pcnt{flex:0 0 auto; font-size:10.5px; color:var(--gc-faint);
  font-variant-numeric:tabular-nums; min-width:14px; text-align:right}
.gc2-pbar{display:block; height:4px; border-radius:4px; background:var(--gc-line);
  overflow:hidden}
.gc2-pfill{display:block; height:100%; width:0; border-radius:4px; background:var(--gc-mut);
  transition:width .35s cubic-bezier(.2,.8,.3,1)}
.gc2-pres.gc2-pmine .gc2-pfill{background:var(--gc-hi)}
.gc2-pres.gc2-pmine .gc2-plab{font-weight:700}

.gc2-pfoot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0;
  font-size:10.5px; color:var(--gc-faint); letter-spacing:.2px}
.gc2-pcount{cursor:default}
.gc2-pvoters{background:none; border:0; padding:0; margin:0; font:inherit; font-size:10.5px;
  color:var(--gc-mut); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px; min-height:20px}
.gc2-pvoters:hover{color:var(--gc-tx)}
.gc2-pvoters:focus-visible{outline:1px solid var(--gc-faint); outline-offset:2px}
.gc2-pfinal{margin-left:auto; font-weight:700; color:var(--gc-mut); letter-spacing:.5px;
  text-transform:uppercase; font-size:9.5px}
.gc2-pchange{margin-left:auto; background:none; border:0; padding:0; font:inherit;
  font-size:10.5px; color:var(--gc-mut); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px; min-height:20px}
.gc2-pchange:hover{color:var(--gc-tx)}
.gc2-poll.gc2-pclosed{border-style:dashed}
/* the action in the message menu, alongside edit / delete */
.gc-acts .gc2-pstop{color:var(--gc-faint)}
.gc-acts .gc2-pstop:hover{color:var(--gc-neg)}
/* the composer icon — the paperclip's twin, so the row keeps one rhythm */
.gc2-pico{width:17px; height:17px; display:block}

/* ---- 10.2 the "New poll" form (the lightbox's overlay pattern) ----
   Both overlays live on the MOUNT, outside .gc-host — so they must carry the
   token block themselves (§0 defines it on .gc-host/.gc-pill only, and an
   unresolved var() would silently drop every colour here). Same literals, same
   site-token fallbacks, so a standalone page renders identically. */
.gc2-pform, .gc2-vov{position:fixed; inset:0; z-index:62; display:flex;
  align-items:center; justify-content:center; padding:20px;
  --gc-bg:      var(--bg,      #0a0a0b);
  --gc-surface: var(--surface, #141416);
  --gc-sf2:     var(--surface2,#1b1b1e);
  --gc-line:    var(--line,    #28282b);
  --gc-line2:   var(--line2,   #34343a);
  --gc-tx:      var(--tx,      #f4f4f5);
  --gc-mut:     var(--mut,     #8b8b91);
  --gc-faint:   var(--faint,   #57575f);
  --gc-hi:      var(--hi,      #ffffff);
  --gc-neg:     var(--neg,     #fa5d5d);
  background:rgba(6,6,7,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.gc2-pform *, .gc2-vov *{box-sizing:border-box}
.gc2-pfbox, .gc2-vbox{display:flex; flex-direction:column; min-width:0; width:360px;
  max-width:100%; max-height:88vh; overflow:hidden;
  background:var(--gc-surface); color:var(--gc-tx); border:1px solid var(--gc-line2);
  border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.5);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.gc2-pfhead, .gc2-vhead{display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:10px 8px 10px 12px; border-bottom:1px solid var(--gc-line)}
.gc2-pfttl, .gc2-vttl{font-size:13px; font-weight:700; letter-spacing:.2px}
.gc2-pfbody{flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px;
  display:flex; flex-direction:column; gap:12px}
.gc2-pfield{display:flex; flex-direction:column; gap:5px; min-width:0}
.gc2-pflabel{display:flex; align-items:baseline; gap:8px; font-size:9.5px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; color:var(--gc-faint)}
.gc2-pfcount{margin-left:auto; font-variant-numeric:tabular-nums; letter-spacing:.2px}
.gc2-pfinput{width:100%; min-width:0; background:var(--gc-sf2); color:var(--gc-tx);
  border:1px solid var(--gc-line2); border-radius:8px; padding:8px 10px;
  font:inherit; font-size:13px; line-height:1.35; outline:none}
.gc2-pfinput::placeholder{color:var(--gc-faint)}
.gc2-pfinput:focus{border-color:var(--gc-faint)}
.gc2-pfarea{resize:none; min-height:52px; max-height:120px; overflow-y:auto}
.gc2-pfopts{display:flex; flex-direction:column; gap:6px; min-width:0}
.gc2-pfopt{display:flex; align-items:center; gap:4px; min-width:0}
.gc2-pfdel{margin-left:0}
.gc2-pfhint{font-size:10.5px; color:var(--gc-faint)}
.gc2-pfadd{align-self:flex-start; background:none; border:0; padding:2px 0; margin:0;
  font:inherit; font-size:11.5px; font-weight:600; color:var(--gc-mut); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; min-height:24px}
.gc2-pfadd:hover{color:var(--gc-tx)}
.gc2-pftogs{display:flex; flex-direction:column; gap:8px}
.gc2-ptog{display:flex; align-items:center; gap:9px; cursor:pointer; font-size:12.5px;
  color:var(--gc-tx); min-height:28px}
.gc2-ptogi{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
.gc2-ptogt{flex:0 0 auto; position:relative; width:34px; height:19px; border-radius:999px;
  background:var(--gc-sf2); border:1px solid var(--gc-line2);
  transition:background .14s ease, border-color .14s ease}
.gc2-ptogt::after{content:''; position:absolute; left:2px; top:2px; width:13px; height:13px;
  border-radius:50%; background:var(--gc-mut); transition:transform .14s ease, background .14s ease}
.gc2-ptogi:checked + .gc2-ptogt{background:var(--gc-hi); border-color:var(--gc-hi)}
.gc2-ptogi:checked + .gc2-ptogt::after{transform:translateX(15px); background:var(--gc-bg)}
.gc2-ptogi:focus-visible + .gc2-ptogt{outline:1px solid var(--gc-faint); outline-offset:2px}
.gc2-ptogl{min-width:0; overflow-wrap:anywhere}
.gc2-pferr{font-size:11.5px; color:var(--gc-neg); overflow-wrap:anywhere}
.gc2-pfact{flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:10px 12px; border-top:1px solid var(--gc-line)}
.gc2-pfok, .gc2-pfno{min-height:34px; padding:7px 14px; border-radius:8px; font:inherit;
  font-size:12px; font-weight:600; cursor:pointer;
  background:var(--gc-sf2); border:1px solid var(--gc-line2); color:var(--gc-tx)}
.gc2-pfok{font-weight:700}
.gc2-pfok:hover, .gc2-pfno:hover{border-color:var(--gc-faint)}
.gc2-pfok:disabled{opacity:.45; cursor:not-allowed}

/* ---- 10.3 "who voted" ---- */
.gc2-vtabs{flex:0 0 auto; display:flex; gap:2px; min-width:0; padding:6px 8px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; border-bottom:1px solid var(--gc-line)}
.gc2-vtabs::-webkit-scrollbar{height:0; display:none}
.gc2-vtab{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; max-width:60%;
  min-height:30px; padding:5px 9px; border-radius:999px; border:1px solid transparent;
  background:none; color:var(--gc-mut); font:inherit; font-size:11.5px; font-weight:600;
  cursor:pointer; white-space:nowrap}
.gc2-vtab:hover{color:var(--gc-tx)}
.gc2-vtab.gc-on{color:var(--gc-hi); border-color:var(--gc-line2); background:var(--gc-sf2)}
.gc2-vtl{overflow:hidden; text-overflow:ellipsis; unicode-bidi:isolate; min-width:0}
.gc2-vtn{flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--gc-faint)}
.gc2-vlist{flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 8px;
  display:flex; flex-direction:column; gap:2px}
.gc2-vrow{display:flex; align-items:center; gap:9px; min-width:0; padding:5px 4px; min-height:32px}
.gc2-vav{width:24px; height:24px; border-radius:6px}
.gc2-vname{min-width:0; font-size:12.5px; color:var(--gc-tx); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; unicode-bidi:isolate}
.gc2-vempty{padding:14px 4px; text-align:center; font-size:11px; color:var(--gc-faint)}
.gc2-vmore{flex:0 0 auto; margin:0; padding:9px 12px; border:0; border-top:1px solid var(--gc-line);
  background:none; color:var(--gc-mut); font:inherit; font-size:11.5px; font-weight:600;
  cursor:pointer; min-height:36px}
.gc2-vmore:hover{color:var(--gc-tx)}
.gc2-vmore:disabled{opacity:.5; cursor:default}
/* "the list did not load — tap to try again": a REFUSAL, which is a different
   thing from an empty list and must not be mistaken for one. It is a button
   wherever it lands (in place of the empty state, or under rows already
   fetched), so it needs the button reset the empty <div> never did. */
.gc2-verr{background:none; font:inherit; font-size:11px; font-weight:600;
  color:var(--gc-neg); cursor:pointer; text-align:center; width:100%}
button.gc2-verr{border:0}
.gc2-vempty.gc2-verr{padding:14px 4px; min-height:36px}
.gc2-verr:hover{color:var(--gc-tx)}
.gc2-verr:focus-visible{outline:1px solid var(--gc-faint); outline-offset:-2px}

/* ---- 10.4 light theme (§8.7) ----
   The card is INSIDE .gc-host and inherits the container's variables for free;
   only the one hard-coded "a bit of white over black" hover needs flipping.
   The two OVERLAYS are appended to the MOUNT (like the lightbox), so they are
   outside .gc-host and cannot inherit anything — openPollForm/openVoters copy
   the gc2-light class onto them and the token block below is repeated once. */
.gc-host.gc2-light .gc2-pres.gc2-pclick:hover{background:rgba(0,0,0,.05)}
.gc2-pform.gc2-light, .gc2-vov.gc2-light{
  --gc-bg:#ffffff;
  --gc-surface:#ffffff;
  --gc-sf2:#f1f1f4;
  --gc-line:#e0e0e5;
  --gc-line2:#c9c9d1;
  --gc-tx:#17171a;
  --gc-mut:#5a5a64;
  --gc-faint:#8c8c96;
  --gc-hi:#0b0b0d;
  --gc-neg:#c8302f;
  background:rgba(240,240,244,.72);
}
.gc2-pform.gc2-light .gc2-pfbox, .gc2-vov.gc2-light .gc2-vbox{
  box-shadow:0 18px 44px rgba(0,0,0,.18)}
.gc2-pform.gc2-light .gc-cbx:hover, .gc2-vov.gc2-light .gc-cbx:hover{background:rgba(0,0,0,.06)}

/* ---- 10.5 reduced motion: the bar still fills, it just does not travel ---- */
@media(prefers-reduced-motion:reduce){
  .gc2-pfill{transition:none}
  .gc2-ptogt, .gc2-ptogt::after{transition:none}
}

/* ============================================================
   6. MOBILE — bottom sheet, no drag, no resize
      !important is deliberate: it must beat the inline right/bottom/width/height
      written by the drag + resize handlers on desktop.
   ============================================================ */
@media(max-width:640px){
  .gc-host{left:0!important; right:0!important; bottom:0!important; top:auto!important;
    width:auto!important; height:82vh!important; max-width:100vw;
    border-radius:12px 12px 0 0; border-left:0; border-right:0; border-bottom:0;
    transform:translateY(0); transition:transform .22s ease, opacity .18s ease}
  .gc-host.gc-away{transform:translateY(100%); opacity:1}
  .gc-grip{display:none}
  .gc-head{cursor:default}
  .gc-pill{right:12px; bottom:12px; min-height:52px; padding:0 20px; font-size:15px}
  .gc-msgs{padding:10px 10px 6px}
  .gc-composer{padding:8px 10px}
  /* Owner: the header trio is hard to hit on a phone. 40 px is the guideline
     minimum; the header gains a little air so the row does not look cramped. */
  .gc-head{padding:10px 10px}
  .gc-hctl{gap:10px}
  .gc-iconbtn{width:40px; height:40px; border-radius:9px; font-size:15px}
  .gc-cogico{width:19px; height:19px}
  /* tabs survive the sheet — they just get tighter. Touch-scrolled, no drag,
     and the active one stays underlined so the room is never ambiguous. */
  .gc-tabs{padding:0 6px; gap:0; -webkit-overflow-scrolling:touch}
  .gc-tab{font-size:11px; padding:8px 7px 7px; max-width:60%; gap:4px}
  .gc-lockhint{padding:5px 10px}

  /* ---- chat2, §3.5: designed at 375x812 ----
     Touch targets 40 px, the lightbox takes the whole screen, and the reply /
     attachment plates stack above the input row instead of stealing its width
     (that is why the composer became a column in the first place). */
  .gc-composer{padding:8px 10px; gap:6px}
  .gc-crow{gap:6px}
  .gc-attachbtn{width:40px; height:40px}
  .gc-composer textarea{height:40px; font-size:16px}   /* 16px = iOS does not zoom */
  .gc-sendbtn{min-height:40px; padding:8px 12px}
  .gc-replybar, .gc-attachbar{padding:7px 8px}
  .gc-cbx{width:32px; height:32px}
  .gc-quote{padding:5px 7px}
  .gc-react, .gc-rxadd{min-height:32px; padding:4px 9px 4px 7px}
  .gc-react, .gc-rxadd{--gc2-ico:15px}
  .gc-fdl{min-height:34px}
  .gc-img{margin:4px 0}
  .gc-lb{padding:0}
  .gc-lbimg{max-height:100vh; border-radius:0}
  .gc-lbx{top:10px; right:10px}
  .gc-msg.gc-post{padding:9px 10px}

  /* ---- wave 2 on the sheet (MSG_EXP_SPEC2 §7) ----
     «Мобильная шторка: меню занимает всю ширину» — a 214 px card floating in
     the corner of a bottom sheet reads as a misplaced desktop popover, and its
     buttons land under the thumb's own shadow. Full width, bigger targets. */
  .gc-menu{left:0; right:0; top:44px; width:auto; max-width:none; border-radius:0;
    border-left:0; border-right:0; padding:12px 12px 14px; gap:12px}
  .gc-mo{min-height:36px; padding:7px 11px; font-size:12px; flex:1 1 auto}
  .gc-earlier .gc-more{min-height:34px; padding:6px 14px}
  .gc-pinbar{padding:5px 10px}
  .gc-ucnt{min-width:18px; height:18px; line-height:18px; font-size:10px}

  /* ---- wave 3 on the sheet (MSG_EXP_SPEC3) ----
     §7.3 «большие тач-цели ≥36px»: стрелки 36×36, и полоса табов растянута
     под них, чтобы цель была квадратной, а не 36×28. §1.2: значки палитры
     тоже под палец. */
  .gc-tabsw{min-height:36px}
  .gc-tarr{width:36px; min-width:36px; font-size:17px}
  /* «большая тач-цель» — это и по высоте тоже: полоса растянута под стрелку */
  .gc-tabs{align-items:center; min-height:36px}
  .gc-rxp{width:36px; height:36px}
  .gc-rxp{--gc2-ico:19px}
  .gc-rxpal{padding:4px; gap:3px}
  /* тач-экран: пустая кнопка-палитра видна всегда (hover нет) */
  .gc-code code{font-size:11.5px}

  /* ---- POLLS on the sheet (POLLS_SPEC §5/§6) ----
     Touch targets ≥40 px everywhere a finger lands, and BOTH overlays become
     bottom sheets: a 360 px card floating in the middle of a phone is the same
     misplaced desktop popover the settings menu already fixed in wave 2. */
  .gc2-poll{padding:10px}
  .gc2-popt{min-height:44px; padding:10px 12px; font-size:13px}
  .gc2-pbox{width:18px; height:18px}
  .gc2-popt.gc2-pon .gc2-pbox::after{left:5px; top:1.5px; width:4.5px; height:9px}
  .gc2-pvote{min-height:40px; padding:9px 18px}
  .gc2-pres{padding:7px 8px}
  .gc2-pres.gc2-pclick{min-height:44px; justify-content:center}
  .gc2-pbar{height:5px}
  .gc2-pfoot{font-size:11px; gap:12px}
  .gc2-pvoters, .gc2-pchange{min-height:32px; display:inline-flex; align-items:center}

  .gc2-pform, .gc2-vov{padding:0; align-items:flex-end}
  .gc2-pfbox, .gc2-vbox{width:100%; max-width:none; max-height:92vh;
    border-radius:14px 14px 0 0; border-left:0; border-right:0; border-bottom:0}
  .gc2-pfhead, .gc2-vhead{padding:12px 10px 12px 14px}
  .gc2-pfbody{padding:14px; gap:14px}
  .gc2-pfinput{font-size:16px}          /* 16px = iOS does not zoom the sheet */
  .gc2-pfact{padding:12px 14px 16px}
  .gc2-pfok, .gc2-pfno{min-height:44px; padding:11px 18px; flex:1 1 auto}
  .gc2-pfadd{min-height:40px}
  .gc2-pfdel{width:40px; height:40px}
  .gc2-ptog{min-height:40px}
  .gc2-vtab{min-height:40px}
  .gc2-vrow{min-height:40px; padding:7px 4px}
  .gc2-vmore{min-height:44px}
  .gc2-verr{min-height:44px}
}

/* Touch screens have no hover, so the per-message actions and the empty heart
   would be unreachable: §3.1 says a small always-visible button, not a
   long-press menu. Keyed on the POINTER, not on the width — a tablet in
   landscape is wide and still has no cursor. */
@media(hover:none){
  .gc-acts{display:inline-flex}
  .gc-msg .gc-acts button{font-size:10.5px}
  .gc-react:not(.gc-has){opacity:1}
  /* §1.2 — на тач-экране палитру открывает ТАП по кнопке (класс gc-open),
     а сама кнопка обязана быть видна, иначе тапать не по чему */
  .gc-rxadd{opacity:1}
  .gc-rxwrap:hover .gc-rxpal{display:none}
  .gc-rxwrap.gc-open .gc-rxpal{display:flex}
}