/* page-specific styles for chats; shared components belong in dibs.css.
   Class chats (#community) and Chat safety (#moderation), built in chats.js. Tokens and components from
   spec/system.md; layout from the references in screens/chats.SCREEN.md: GroupMe iOS and Android for the
   chat list, rows, hearts, quote replies, pinned bar, polls and study sessions; WhatsApp web for the
   desktop two-pane frame. Radii stay on the scale: 6 controls, 8 panels and bubbles, 999 status pills,
   badges and avatars. */

/* ============ frame: the room list and the open room run full height ============ */
body:has(.gc) .app-foot { display: none; }
main:has(> .gc) { max-width: none; padding: 0; display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 1024px) {
  body:has(.gc) .shell { height: 100vh; height: 100dvh; min-height: 0; }
}
.gc { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); background: var(--surface); }
/* stream canvas in the iMessage form (owner walk 7, W18): the page background under borderless bubbles, a
   classmate's bubble on --surface-2 with ink, yours in the accent at full strength with --on-accent ink. Every
   value is a shell token, so the dark theme needs no override of its own: the tokens flip under it.
   --gc-own-2 is the inset fill (code, quote) inside your bubble and --gc-own-meta its quiet text, both mixed
   from the accent and its own ink, never from --ink, so neither reads lighter than the bubble in dark.
   Polls, study sessions and chips keep their hairline (rubric: cards get a border, never a shadow). */
.gc {
  --gc-canvas: var(--bg); --gc-other: var(--surface-2);
  --gc-own: var(--accent); --gc-on-own: var(--on-accent);
  --gc-own-2: color-mix(in srgb, var(--on-accent) 16%, var(--accent));
  --gc-own-meta: color-mix(in srgb, var(--on-accent) 80%, var(--accent));
  --gc-hover: var(--surface-2);
}
@media (min-width: 1024px) and (max-width: 1279px) { .gc { grid-template-columns: 320px minmax(0, 1fr); } }
@media (min-width: 1280px) { .gc.info-open { grid-template-columns: 360px minmax(0, 1fr) 360px; } }
/* threads (owner ruling 20 Oct 2026): the thread opens as a column beside the room from 1024 (Slack 0376, Discord
   0224). Below 1440 the chat list steps aside while it is open, so the room keeps 424px or more next to it. */
@media (min-width: 1440px) { .gc.side-open { grid-template-columns: 360px minmax(0, 1fr) 400px; } }
@media (min-width: 1024px) and (max-width: 1439px) {
  .gc.side-open { grid-template-columns: minmax(0, 1fr) 360px; }
  .gc.side-open > .gc-list { display: none; }
}
.gc mark { background: var(--warning-subtle); color: inherit; border-radius: 2px; }
/* dark: the subtle warning fill is too close to the surface for a match to show, so the mark is the warning hue at a third */
:root[data-theme="dark"] .gc mark { background: color-mix(in srgb, var(--warning) 34%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gc mark { background: color-mix(in srgb, var(--warning) 34%, transparent); } }
/* scrollers contain their own absolutely placed screen-reader text */
.gc-list-body, .gc-scroll, .gc-info-body, .gc-head, .gc-facts, .gc-pinbar, .gc-dock { position: relative; }

/* ============ chat list (GroupMe 0178, WhatsApp web 0009) ============ */
.gc-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-right: 1px solid var(--line); }
.gc-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-shrink: 0; height: 56px; padding: 0 var(--s-3) 0 var(--s-4); }
.gc-list-head h1 { margin: 0; font: var(--t-h2); }
.gc-list-head .icon-btn { position: relative; width: 32px; height: 32px; min-height: 32px; }
.gc-list-tools { flex-shrink: 0; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); }
/* the shared search field (sys 9.2: 1px --line-strong on --surface), as on Discover, Directory and Labs */
.gc-search { max-width: none; }
/* our own clear button replaces the browser's, which shows only on hover or focus (GroupMe 0187 keeps an x in the field) */
.gc-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.gc-qclear { position: relative; flex-shrink: 0; width: 24px; height: 24px; min-height: 24px; }
.gc-qclear[hidden] { display: none; }
.gc-qclear .icon { width: 14px; height: 14px; }
.gc-more-hits { margin: var(--s-1) var(--s-4) 0; font: var(--t-label); }
.gc-tabs { gap: var(--s-6); margin-top: var(--s-1); border-bottom: 0; }
.gc-list-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: var(--s-2) 0 var(--s-6); }
.gc-rows { list-style: none; margin: 0; padding: 0 var(--s-2); }
.gc-row-li { position: relative; }
.gc-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: 22px 20px; column-gap: var(--s-3); row-gap: 2px; align-content: center;
  min-height: 68px; padding: var(--s-3) var(--s-2); border-radius: var(--r-control);
  color: var(--ink); text-decoration: none; -webkit-touch-callout: none;
}
.gc-row:hover { background: var(--bg); text-decoration: none; }
.gc-row.is-on, .gc-row.is-on:hover { background: var(--surface-2); }
.gc-row:focus-visible { outline-offset: -2px; }
.gc-row > .gc-rav, .gc-row > .gc-pav { grid-row: 1 / 3; align-self: center; }
.gc-row-name { min-width: 0; font: var(--t-body); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-row-kind { font-weight: 400; color: var(--muted); }
.gc-row-time { align-self: center; font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.gc-row.is-unread .gc-row-time { color: var(--accent); font-weight: 600; }
.gc-row-prev { min-width: 0; font: var(--t-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-row.is-unread .gc-row-prev { color: var(--ink-2); }
.gc-row-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; color: var(--muted); }
.gc-row-flag { display: inline-flex; color: var(--muted); }
.gc-row-flag .icon { width: 14px; height: 14px; }
.gc-row-note { font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; }
.gc-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums;
}
.gc-badge.is-muted { background: var(--surface-2); color: var(--ink-2); }
/* one quick action per row, on hover or focus (sys 9.1); touch uses a long press */
.gc-row-more { position: absolute; right: var(--s-4); bottom: 14px; width: 28px; height: 28px; min-height: 28px; opacity: 0; background: var(--bg); }
.gc-row-li:hover .gc-row-more, .gc-row-more:focus-visible, .gc-row-more[aria-expanded="true"] { opacity: 1; }
.gc-row-li:hover .gc-row-meta, .gc-row-li:has(.gc-row-more:focus-visible) .gc-row-meta, .gc-row-li:has(.gc-row-more[aria-expanded="true"]) .gc-row-meta { visibility: hidden; }
.gc-row-li:has(.gc-row.is-on) .gc-row-more { background: var(--surface-2); }
.gc-group { margin: var(--s-4) var(--s-4) var(--s-1); font: var(--t-label); color: var(--muted); }
.gc-list-none { margin: var(--s-6) var(--s-4); font: var(--t-meta); color: var(--muted); }
.gc-list-empty { padding: var(--s-12) var(--s-4); }

/* ============ joining a class chat on this screen ============
   GroupMe iOS 0020: a + beside the list title and one search field at the top of the list.
   GroupMe iOS 0183 and 0187: a joinable row is the name, a count, one line about it, and Join at the right.
   GroupMe iOS 0135 and Slack web 0074: joins are a quiet one-line receipt, never a banner. */
.gc-list-acts { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.gc-joinbtn { gap: 6px; padding: 5px var(--s-3) 5px var(--s-2); white-space: nowrap; }
/* the tabs sort your chats; while searching, browsing or with nothing joined they step aside */
.gc-list.is-finding .gc-tabs { display: none; }
.gc-list.is-finding .gc-list-tools { padding-bottom: var(--s-3); }
/* GroupMe 0135 system lines: an icon and muted text, no box, no fill; a hairline under it ends the line */
.gc-rcpt { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0 var(--s-4) var(--s-1); padding: var(--s-2) 0 var(--s-3); border-bottom: 1px solid var(--line); }
.gc-rcpt-ic { display: inline-flex; padding-top: 1px; color: var(--positive); }
.gc-rcpt-ic .icon { width: 16px; height: 16px; }
.gc-rcpt p { flex: 1; min-width: 0; margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-rcpt .icon-btn { position: relative; flex-shrink: 0; margin-top: -3px; }
.gc-jli .gc-jrow { padding-right: 84px; }
.gc-jrow { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 0; }
.gc-jrow > span { grid-column: 2; }
.gc-jrow > .gc-rav { grid-column: 1; grid-row: 1 / 4; }
/* GroupMe 0187 order: name, then the count in grey, then one smaller line about it */
.gc-jrow-sub { min-width: 0; font: var(--t-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-jrow-desc { min-width: 0; font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-jrow.is-off, .gc-jrow.is-off:hover { background: transparent; cursor: default; }
.gc-jrow.is-off .gc-jrow-sub { white-space: normal; }
/* Join: the neutral outlined secondary, as "Join a class" beside it (b1r1 m5; the system has three button styles) */
.gc-jbtn { position: absolute; top: 50%; right: var(--s-4); transform: translateY(-50%); min-width: 64px; }
.gc-start { padding: var(--s-4) var(--s-4) var(--s-1); }
.gc-start h2, .gc-browse-head h2 { margin: 0; font: var(--t-item); }
.gc-start p, .gc-browse p { max-width: 46ch; margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); }
.gc-nomatch { padding-top: var(--s-6); }
.gc-browse { padding: var(--s-2) var(--s-3) 0 var(--s-4); }
.gc-browse-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.gc-browse-head .icon-btn { position: relative; }
.gc-pane-start p { max-width: 400px; }

/* avatars: rooms are rounded tiles in the course hue (GroupMe group photo, planner hues); people are neutral monograms */
.gc-rav {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px;
  border-radius: var(--r-panel); background: var(--rh, var(--surface-2)); color: var(--ri, var(--ink-2));
  font: var(--t-small); font-weight: 700; letter-spacing: 0;
}
.gc-rav-sm { width: 36px; height: 36px; border-radius: var(--r-control); }
.gc-rav-lg { width: 64px; height: 64px; font: var(--t-item); }
.gc-pav {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  font: var(--t-small); font-weight: 600;
}
.gc-row .gc-pav { width: 44px; height: 44px; font: var(--t-label); font-weight: 600; }

/* ============ open room ============ */
/* The room h1 stands in only where the list pane (and its "Class chats" h1) is hidden (P3 M3). */
.gc-room-h1 { display: none; }
@media (max-width: 1023px) { .gc.has-room .gc-room-h1 { display: block; } }
@media (min-width: 1024px) and (max-width: 1439px) { .gc.side-open .gc-room-h1 { display: block; } }
.gc-room { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--gc-canvas); container: gcroom / inline-size; }
.gc-room-empty { align-items: center; justify-content: center; }
.gc-room-empty .empty p { margin: 0; }
/* the head and the facts line under it are one surface with one hairline, at the foot of the facts (owner walk 7,
   W18): a 56 px bar, the room avatar at 32 px, the name and the course title, then icon buttons only */
.gc-head { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; height: 56px; padding: 0 var(--s-3); background: var(--surface); }
.gc-head .gc-rav-sm { width: 32px; height: 32px; }
.gc-back { display: none; }
.gc-head-main {
  flex: 1; min-width: 0; justify-content: flex-start; gap: var(--s-3);
  height: 44px; min-height: 44px; padding: 0 var(--s-2) 0 var(--s-1);
  border: 0; background: transparent; text-align: left;
}
.gc-head-main:hover { background: var(--bg); }
.gc-head-text { display: flex; flex-direction: column; min-width: 0; }
.gc-head-name { font: var(--t-body); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-head-sub { font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-head-actions { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.gc-head-actions .icon-btn, .gc-back { position: relative; width: 32px; height: 32px; min-height: 32px; }
.gc-head-actions .icon-btn .icon { width: 18px; height: 18px; }
.gc-head-flag { display: inline-flex; padding: 0 var(--s-1); color: var(--muted); }
/* Lessons link (owner 23 Oct): an icon button like the others in the head, at every width (owner walk 7, W18) */
.gc-head-actions .gc-lessons { text-decoration: none; }
.gc-head-actions .gc-lessons .icon { color: var(--muted); }
a.gc-info-row { display: flex; align-items: center; text-decoration: none; }

/* A: class facts, ONE muted t-meta line under the head on the head's surface, no icons (owner walk 7, W18).
   Facts drop by priority as the room narrows (instructor, then the final, both one click away in Class
   facts) and the rest ellipsize, so All facts stays inline at the end. The seat count is in ink, not green. */
.gc-facts {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 var(--s-2); flex-shrink: 0; min-width: 0;
  height: 28px; padding: 0 var(--s-2) var(--s-2) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--line);
  font: var(--t-meta); color: var(--muted);
}
.gc-fact { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; white-space: nowrap; }
.gc-fact > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gc-fact + .gc-fact::before { content: '\00B7'; flex-shrink: 0; color: var(--muted); }
.gc-fact-who { flex-shrink: 3; }
.gc-fact-seats { flex-shrink: 2; } /* the read time at its end gives way before the room name does */
.gc-fact-final { flex-shrink: 0; }
.gc-read { color: var(--muted); }
.gc-ok { color: var(--ink); font-weight: 600; }
.gc-facts-more { flex-shrink: 0; margin: 0 0 0 auto; min-height: 24px; padding: 0 var(--s-2); font: var(--t-meta); }
/* widths measured from the sample rooms: all four fit from about 830, meeting and seats from about 580 */
@container gcroom (max-width: 830px) { .gc-fact-who { display: none; } }
@container gcroom (max-width: 720px) { .gc-fact-final { display: none; } }

/* M8: one-line pinned bar (GroupMe Android 0046, WhatsApp web 0110) */
.gc-pinbar { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; height: 44px; padding-right: var(--s-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.gc-pinbar-main {
  flex: 1; min-width: 0; justify-content: flex-start; gap: var(--s-3);
  height: 44px; min-height: 44px; padding: 0 var(--s-2) 0 var(--s-4);
  border: 0; border-radius: 0; background: transparent; font: var(--t-meta); color: var(--ink-2); text-align: left;
}
.gc-pinbar-main:hover { background: var(--bg); }
.gc-pinbar-main:focus-visible { outline-offset: -2px; }
.gc-pinbar-main .icon { color: var(--accent); }
.gc-pinbar-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-pinbar-text b { font-weight: 600; color: var(--ink); }
.gc-pinbar-n { font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-pinbar .text-btn { margin: 0; min-height: 28px; font: var(--t-label); }

/* ============ feed ============ */
/* touch-action: a double tap in the stream likes a message, so the browser must not hold it for zoom */
.gc-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: manipulation; }
.gc-feed { display: flex; flex-direction: column; width: 100%; max-width: 880px; margin: 0 auto; padding: var(--s-2) var(--s-6) var(--s-6); }

/* day label, as iMessage: centred muted t-meta text, no fill and no border; it stays in the flow so it never
   covers a message (owner walk 7, W18) */
.gc-day { display: flex; justify-content: center; margin: var(--s-4) 0 0; }
.gc-day span { padding: 0; background: transparent; font: var(--t-meta); color: var(--muted); }

/* M10: new since your last visit, with the S3 count line */
.gc-new { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 0; font: var(--t-label); font-weight: 600; color: var(--accent); }
.gc-new::before, .gc-new::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.gc-since { margin: 2px 0 0; text-align: center; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* system lines: seat movement (B), pins, blocked count; never shaped like a message. Muted centred t-meta text
   with no icon (owner walk 7, W18) */
.gc-sys { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px var(--s-2); max-width: 600px; margin: var(--s-3) auto 0; font: var(--t-meta); color: var(--muted); text-align: center; }
.gc-sys .text-btn { position: relative; margin: 0; min-height: 24px; padding: 0 6px; font: var(--t-meta); }
.gc-sys-done { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 600; }
.gc-sys-note { margin-top: var(--s-4); }
.gc-sysgrp { max-width: 600px; margin: var(--s-3) auto 0; }
.gc-sysgrp > summary { justify-content: center; min-height: 28px; padding: 2px 0; font: var(--t-meta); color: var(--muted); }
.gc-sysgrp-body { padding-bottom: var(--s-1); }
.gc-sysgrp-body .gc-sys { margin-top: 2px; }

/* empty room: invitation plus presence, never "0 messages" (rule 5) */
.gc-invite { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-12) var(--s-4) var(--s-6); }
.gc-invite h2 { margin: var(--s-4) 0 var(--s-1); }
.gc-invite p { max-width: 420px; margin: 0 0 var(--s-1); font: var(--t-meta); color: var(--muted); }
/* a room you just joined that nobody has posted in, in the iMessage form (owner walk 7, W18): a 56 px avatar, the
   room name, one muted line, centred at every width and sitting just above the composer. No buttons, no day pill,
   no system line; the starters are in the + menu. Only the title is bold. */
.gc-feed:has(> .gc-fresh) { min-height: 100%; justify-content: flex-end; }
.gc-fresh { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-8) 0 var(--s-4); }
.gc-fresh .gc-rav-lg { width: 56px; height: 56px; font-weight: 400; }
.gc-fresh h2 { margin: var(--s-2) 0 var(--s-1); font: var(--t-title); }
.gc-fresh p { max-width: 600px; margin: 0; font: var(--t-meta); color: var(--muted); }

/* messages in the iMessage form (owner walk 7, W18): yours right in the accent, a classmate's left on --surface-2,
   18 px radius, at most 72 percent of the feed (85 percent on a phone). One 28 px avatar and the muted name on the
   first bubble of a run only; a message's time shows on hover, keyboard focus or a tap (.is-time), never as a
   standing line, and its full date is the bubble's title. */
.gc-msg { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: 2px; }
.gc-msg.is-first { margin-top: var(--s-3); }
.gc-msg.is-own { justify-content: flex-end; }
.gc-msg > .gc-pav { width: 28px; height: 28px; margin-top: 22px; font: var(--t-small); }
.gc-pav-gap { width: 28px; flex-shrink: 0; }
.gc-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 72%; }
.gc-msg.is-own .gc-col { align-items: flex-end; max-width: 72%; }
.gc-by { display: flex; align-items: center; gap: 6px; min-height: 20px; margin: 0 0 2px 12px; }
.gc-name { font: var(--t-meta); color: var(--muted); }
.gc-by time { font: var(--t-small); font-weight: 400; color: var(--muted); }
.gc-by time { display: none; }
.gc-msg:hover .gc-by time, .gc-msg:focus-within .gc-by time, .gc-msg.is-time .gc-by time { display: inline; }
/* a bubble with no name row (yours, or a classmate's continued bubble) carries its time beside the bubble line, in the
   feed's empty side: left of yours, right of a classmate's, past the like and more buttons, level with the bubble's
   last line. It is out of the flow and only changes visibility, so hover, focus or a tap moves no message (owner
   4 Nov W40b; Messenger and iMessage, spec/screens/chat-room-guidelines.SCREEN.md). */
.gc-line { position: relative; }
.gc-stamp { position: absolute; bottom: 6px; display: flex; align-items: center; gap: 4px; font: var(--t-small); font-weight: 400; color: var(--muted); white-space: nowrap; visibility: hidden; pointer-events: none; }
.gc-stamp .icon { width: 12px; height: 12px; }
.gc-msg.is-own .gc-stamp { right: calc(100% + 6px); }
.gc-msg:not(.is-own) .gc-stamp { left: calc(100% + 6px); }
.gc .gc-msg:hover .gc-stamp, .gc .gc-msg:focus-within .gc-stamp, .gc .gc-msg.is-time .gc-stamp { visibility: visible; }
.gc-ver { display: inline-flex; color: var(--accent); }
.gc-ver .icon { width: 14px; height: 14px; }
.gc-pinned-flag { display: inline-flex; color: var(--muted); }
.gc-pinned-flag .icon { width: 14px; height: 14px; }
.gc-line { display: flex; align-items: center; gap: 2px; max-width: 100%; }
.gc-msg.is-own .gc-line { flex-direction: row-reverse; }
.gc-bub {
  position: relative; min-width: 0; max-width: 100%; padding: 7px 12px 8px;
  border: 1px solid transparent; border-radius: 18px; background: var(--gc-other);
  color: var(--ink); font: var(--t-body); overflow-wrap: anywhere;
}
.gc-msg.is-own .gc-bub { background: var(--gc-own); color: var(--gc-on-own); }
/* everything inside your bubble takes its ink from the accent pair, never from the page's own text colors */
.gc-msg.is-own .gc-bub .gc-edited { color: var(--gc-own-meta); }
.gc-msg.is-own .gc-bub .gc-qtag, .gc-msg.is-own .gc-bub .gc-at, .gc-msg.is-own .gc-bub a { color: var(--gc-on-own); }
.gc-msg.is-own .gc-bub a { text-decoration: underline; text-underline-offset: 2px; }
.gc-msg.is-own .gc-bub mark { background: var(--surface); color: var(--ink); }
.gc-bub.is-gone, .gc-msg.is-own .gc-bub.is-gone { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--muted); font: var(--t-meta); }
.gc-text { white-space: pre-wrap; }
/* sits at the end of the last line when it fits, else on its own short line (WhatsApp 0110 meta) */
.gc-edited { float: right; margin: 3px 0 -3px 10px; font: var(--t-small); line-height: 20px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.gc-qtag { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; font: var(--t-label); font-weight: 600; color: var(--accent); }
.gc-qtag .icon { width: 14px; height: 14px; }
.gc-at { color: var(--accent); font-weight: 600; }
.gc-code, .gc-pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
/* code sits inset in the bubble: --surface inside a classmate's --surface-2 bubble, --gc-own-2 inside yours */
.gc-code { padding: 1px 5px; border-radius: var(--r-control); background: var(--surface); color: var(--ink); }
.gc-pre { margin: 6px 0 2px; padding: 8px 10px; border-radius: var(--r-control); background: var(--surface); line-height: 18px; white-space: pre; overflow-x: auto; scrollbar-width: thin; }
.gc-msg.is-own .gc-code, .gc-msg.is-own .gc-pre { background: var(--gc-own-2); color: var(--gc-on-own); }

/* M5: quote reply inside the bubble, no colored side bar (owner ruling) */
.gc-quote {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; min-height: 0; margin: 1px 0 6px; padding: 5px 10px 6px;
  border: 0; border-radius: var(--r-control); background: var(--bg); font: var(--t-label); font-weight: 400; color: var(--muted); text-align: left;
}
.gc-quote:hover { background: var(--surface); }
.gc-quote-by { font-weight: 600; color: var(--accent); }
.gc-quote-text { display: block; max-width: 100%; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-msg.is-own .gc-quote, .gc-msg.is-own .gc-quote:hover { background: var(--gc-own-2); color: var(--gc-own-meta); }
.gc-msg.is-own .gc-quote-by, .gc-msg.is-own .gc-quote-text { color: var(--gc-on-own); }

/* M4: heart and count beside the bubble (GroupMe Android 0046) */
.gc-like {
  position: relative; flex-shrink: 0; gap: 3px; min-width: 28px; height: 28px; min-height: 28px; padding: 0 4px;
  border: 0; background: transparent; color: var(--muted); font: var(--t-label); font-weight: 600; font-variant-numeric: tabular-nums;
}
.gc-like:hover { background: var(--gc-hover); color: var(--ink); }
.gc-like .icon { width: 18px; height: 18px; }
.gc-like.is-on, .gc-like.is-on:hover, .gc .gc-like[aria-pressed="true"] { background: transparent; color: var(--accent); }
.gc .gc-like[aria-pressed="true"]:hover { background: var(--gc-hover); }
.gc-heart.is-on { fill: currentColor; }
/* an outline heart beside every message, liked or not (GroupMe 0046); a room that takes no reactions
   (read-only, exam quiet mode) shows only the counts it already has */
.gc-like:disabled { background: transparent; color: var(--muted); cursor: default; }
.gc-like:disabled:not(.has-n):not(.is-on) { visibility: hidden; }
.gc-more { position: relative; flex-shrink: 0; opacity: 0; }
.gc-msg:hover .gc-more, .gc-more:focus-visible, .gc-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .gc-more { opacity: 1; } }

/* reactions, question state (C) and the quoted answer under the bubble */
.gc-under { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.gc-msg.is-own .gc-under { justify-content: flex-end; }
.gc-chip {
  position: relative; gap: 4px; height: 26px; min-height: 26px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
  color: var(--ink-2); font: var(--t-label);
}
.gc-chip:hover { background: var(--surface-2); }
.gc-chip .icon { width: 14px; height: 14px; color: var(--muted); }
.gc-chip b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.gc-chip.is-on, .gc .gc-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-subtle); color: var(--accent); }
.gc-chip.is-on .icon, .gc-chip.is-on b { color: var(--accent); }
.gc-chip-quiet { border-color: transparent; background: transparent; color: var(--accent); }
.gc-chip-quiet:hover { background: var(--gc-hover); }
.gc-chip-quiet .icon { color: var(--accent); }
.gc-chip:disabled { border-color: var(--line); background: var(--surface); color: var(--ink-2); cursor: default; }
/* C: the question's state is plain text after its countable chips, never a pill */
.gc-qstate { font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; }
.gc-qstate.is-done { font-weight: 600; color: var(--positive); }
.gc-under .badge { min-height: 22px; line-height: 18px; }
/* neutral fills that would vanish into the canvas take the bubble fill instead */
.gc-under .badge:not(.badge-positive, .badge-info) { background: var(--gc-other); }
.gc-scroll .gc-pav { background: var(--surface-2); }
.gc-answer {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--s-2);
  max-width: min(520px, 100%); min-height: 0; margin-top: 6px; padding: 8px 12px;
  border: 0; border-radius: var(--r-panel); background: var(--gc-other);
  font: var(--t-meta); color: var(--ink-2); text-align: left;
}
.gc-answer:hover { background: var(--line); }
.gc-answer > .icon { margin-top: 2px; color: var(--positive); }
.gc-answer b { display: block; font: var(--t-label); font-weight: 600; color: var(--ink); }
.gc-answer-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* jump highlight: shows where a quote, pin or search result landed */
/* the ring holds 720 ms, then fades on the sheet spring (.smooth, spec/motion-apple-springs.md 3, sampled linear()) */
.gc-msg.is-flash .gc-bub, .gc-msg.is-flash .gc-card { animation: gc-flash var(--dm-sheet-ms, 735ms) var(--dm-sheet-ease, linear) .72s both; }
@keyframes gc-flash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } to { box-shadow: 0 0 0 3px transparent; } }

/* M9 polls and S1 study sessions as cards in the stream (GroupMe 0071, 0155, 0156) */
.gc-card { width: 340px; max-width: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.gc-msg.is-own .gc-card { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); }
.gc-card-title { margin: 0 0 var(--s-2); font: var(--t-body); font-weight: 600; color: var(--ink); }
.gc-card-meta { display: flex; align-items: flex-start; gap: 6px; margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-card-meta .icon { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; }
.gc-card-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-1); }
.gc-card-acts .text-btn { position: relative; margin: 0 0 0 calc(-1 * var(--s-2)); min-height: 28px; font: var(--t-label); font-weight: 500; }
.gc-opts { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--s-2)); }
.gc-opt {
  position: relative; justify-content: flex-start; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-2);
  border: 0; border-radius: var(--r-control); background: transparent; font: var(--t-meta); color: var(--ink); text-align: left;
}
.gc-opt + .gc-opt::before { content: ''; position: absolute; left: 38px; right: var(--s-2); top: 0; height: 1px; background: var(--line); }
.gc-opt:hover { background: var(--bg); }
.gc-opt-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); color: var(--on-accent); }
.gc-opt-mark.is-box { border-radius: var(--r-control); }
.gc-opt.is-sel .gc-opt-mark { background: var(--accent); border-color: var(--accent); }
.gc-opt-mark .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.gc-vote-btn { margin-top: var(--s-2); }
.gc-res { list-style: none; margin: 0; padding: 0; }
.gc-res li + li { margin-top: var(--s-3); }
.gc-res-top { display: flex; align-items: baseline; gap: var(--s-2); font: var(--t-meta); color: var(--ink); }
.gc-res-label { flex: 1; min-width: 0; }
.gc-res-you { display: inline-flex; align-items: center; gap: 2px; font: var(--t-label); font-weight: 500; color: var(--accent); white-space: nowrap; }
.gc-res-you .icon { width: 14px; height: 14px; }
.gc-res-n { min-width: 2ch; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.gc-res-bar { height: 6px; margin-top: 4px; border-radius: var(--r-control); background: var(--surface-2); overflow: hidden; }
.gc-res-bar i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.gc-res li.is-mine .gc-res-bar i { background: var(--accent); }
.gc-event-top { display: flex; gap: var(--s-3); }
.gc-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 52px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.gc-date span { font: var(--t-small); font-weight: 600; color: var(--accent); }
.gc-date b { font: var(--t-h2); color: var(--ink); }
.gc-event-text { min-width: 0; }
.gc-event .gc-card-title { margin-bottom: 4px; }
.gc-card-line { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: var(--t-meta); color: var(--ink-2); }
.gc-card-line .icon { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; color: var(--muted); }
.gc-rsvp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-3); }
.gc-rsvp .icon { width: 14px; height: 14px; }
.gc-going { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 500; }
.gc-going:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }

/* Drive link card (spec/chats/drive-links.md section 4; Slack 0203): one row in the poll card's frame. The kind
   is told by the tile's glyph and, by owner ruling (18 Oct 2026), by the tile's tint, as Slack 0203 tints its red
   PDF tile. No Google marks. Text first, then the card. */
.gc-drive { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); color: var(--ink); text-decoration: none; }
a.gc-drive:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
a.gc-drive:focus-visible { outline-offset: 2px; }
.gc-col > .gc-drive { margin-top: 4px; }
/* kind tints, shell tokens only (owner walk 7, W18: no hard coded color on a chat surface): --dk is the solid tile
   under a glyph in --on-accent ink, --dki the same hue as a bare glyph on a surface. The tokens flip with the theme
   (dark: a light hue under a near-black glyph), so no dark override is needed. Folder, file and link stay grey;
   Docs take the brand blue, Sheets positive, Slides warning, Forms rose, PDFs danger. */
.gc-dtile, .gc-kc { --dk: var(--muted); --dki: var(--muted); }
.gc-k-doc { --dk: var(--hue-brand); --dki: var(--hue-brand); }
.gc-k-sheet { --dk: var(--positive); --dki: var(--positive); }
.gc-k-slides { --dk: var(--warning); --dki: var(--warning); }
.gc-k-form { --dk: var(--hue-rose); --dki: var(--hue-rose); }
.gc-k-pdf { --dk: var(--danger); --dki: var(--danger); }
.gc-dfield-ic.gc-kc, .gc-iitem-ic.gc-kc, .gc-pinbar-main .icon.gc-kc { color: var(--dki); }
.gc-dtile { display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-control); background: var(--dk); color: var(--on-accent); }
.gc-dtile .icon { width: 20px; height: 20px; }
.gc-dtile.is-sm { width: 28px; height: 28px; }
.gc-dtile.is-sm .icon { width: 16px; height: 16px; }
.gc-dtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gc-dname { font: var(--t-body); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-dkind { font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-dout { flex-shrink: 0; width: 16px !important; height: 16px !important; color: var(--muted); }
.gc-drive.is-frozen .gc-dname { color: var(--ink-2); }

/* jump to latest: floats above the composer while you read back */
.gc-jump { position: absolute; right: var(--s-6); bottom: var(--gc-toast-b, 112px); z-index: 4; gap: 6px; box-shadow: var(--shadow-overlay); }
/* in a narrow room it shrinks to its arrow so it covers less of your own bubbles; the label stays for readers */
@container gcroom (max-width: 660px) {
  .gc-jump { width: 36px; min-width: 36px; padding: 0; }
  .gc-jump span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ============ dock: composer (GroupMe 0042, WhatsApp web 0096), join bar, read-only line ============ */
/* the iMessage dock (owner walk 7, W18): on the page background with no hairline above it, one row of the 36 px +,
   a pill field with a 1 px --line border and an 18 px radius, and the 36 px accent Send circle that is there only
   while the field has text */
.gc-dock { flex-shrink: 0; padding: var(--s-2) var(--s-4); background: var(--gc-canvas); }
.gc-crow { display: flex; align-items: flex-end; gap: var(--s-2); }
.gc-plus { position: relative; width: 36px; height: 36px; min-height: 36px; border-radius: var(--r-pill); color: var(--ink-2); }
.gc-plus .icon, .gc-send .icon { width: 18px; height: 18px; }
.gc-crow textarea {
  flex: 1; min-width: 0; min-height: 36px; max-height: 160px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  font: var(--t-body); resize: none; field-sizing: content; overflow-y: auto;
}
/* the composer holds focus most of the time (desktop focuses it when a room opens), so that focus is a quiet
   1px accent border (WhatsApp 0110); reaching it with Tab adds the stronger 2px ring (data-kbd, chats.js) */
.gc-crow textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: none; }
.gc-crow textarea[data-kbd]:focus-visible { box-shadow: 0 0 0 1px var(--accent); }
.gc-send { position: relative; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); }
.gc-send:hover { background: var(--accent-hover); color: var(--on-accent); }
.gc-send:disabled, .gc-send:disabled:hover { background: var(--surface-2); color: var(--muted); }
/* one row at every width, so the dock stays one composer row plus one short line (GroupMe 0046). Owner walk 7, W18:
   one muted t-meta line, Posting as at the left and What not to post as a text button at the right, nothing else */
.gc-dock-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0 var(--s-4); min-width: 0; margin-top: 2px; padding-left: 44px; }
.gc-as, .gc-never { position: relative; flex-shrink: 0; gap: 4px; height: 26px; min-height: 26px; padding: 0 6px; margin-left: -6px; border: 0; background: transparent; color: var(--muted); font: var(--t-meta); font-weight: 400; white-space: nowrap; }
.gc-never { margin-left: 0; margin-right: -6px; }
.gc-as { flex-shrink: 1; min-width: 0; }
.gc-as b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ink-2); }
.gc-as .icon { flex-shrink: 0; }
.gc-as:hover, .gc-never:hover { background: var(--surface-2); color: var(--ink); }
.gc-as .icon { width: 14px; height: 14px; }
.gc-ctx { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2) 44px; padding: 4px 4px 4px 10px; border-radius: var(--r-control); background: var(--surface-2); }
.gc-ctx > .icon { color: var(--accent); }
.gc-ctx-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-ctx-text b { font-weight: 600; color: var(--ink); }
.gc-ctx-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-ctx .icon-btn { position: relative; }
/* the attached Drive link waits as a chip until Send (Slack 0160): kind tile, name, kind, Rename, remove */
.gc-ctx-drive { padding-left: 6px; }
.gc-ctx-drive .gc-ctx-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-ctx .icon-btn { flex-shrink: 0; }
.gc-err { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--s-2) 44px; font: var(--t-label); font-weight: 400; color: var(--danger); }
.gc-err .icon { width: 14px; height: 14px; margin-top: 2px; }
.gc-locked { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; margin: 0; font: var(--t-meta); color: var(--ink-2); text-align: center; }
.gc-locked .icon { color: var(--muted); }
.gc-joinbar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); }
.gc-joinbar > div { flex: 1; min-width: 0; }
.gc-join-main { margin: 0; font: var(--t-meta); color: var(--ink); }
.gc-join-sub { margin: 2px 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
body:has(.gc.has-room) #toast { bottom: calc(var(--gc-toast-b, 16px) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 600px) { body:has(.gc.has-room) #toast { left: var(--gc-toast-x, 50%); } }

/* ============ threads (owner ruling 20 Oct 2026; screens/chats-threads.SCREEN.md) ============ */
/* Threads button in the room header, with the unread replies across threads you are in (Discord 0240's header icon) */
.gc-tbtn .gc-tbtn-n {
  position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border: 2px solid var(--surface); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font: var(--t-small); font-weight: 600; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums;
}
.gc-head-actions .gc-tbtn[aria-pressed="true"] { background: var(--accent-subtle); color: var(--accent); }
/* the thread summary under a parent (Slack 0296: repliers, "2 replies", "Last reply today at 9:35 PM"); a quiet row
   that takes a frame on hover, as Slack's does, so it never reads as a second bubble */
.gc-tsum {
  display: flex; align-items: center; justify-content: flex-start; gap: 2px var(--s-2); max-width: 100%; min-height: 28px; margin: 4px 0 0 -6px; padding: 2px 8px 2px 6px;
  border: 1px solid transparent; border-radius: var(--r-control); background: transparent; font: var(--t-label); font-weight: 400; color: var(--muted); text-align: left;
}
.gc-tsum:hover { border-color: var(--line); background: var(--gc-other); }
.gc-msg.is-own .gc-tsum { margin: 4px -6px 0 0; }
.gc-tsum-n { font-weight: 600; color: var(--accent); white-space: nowrap; }
.gc-tsum-new { padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; line-height: 18px; white-space: nowrap; }
.gc-tsum-who { min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-tsum-when { flex-shrink: 0; white-space: nowrap; }
/* a narrow room: count, new and time on the first line, the names under them, so neither is cut to nothing */
@container gcroom (max-width: 480px) {
  .gc-tsum { flex-wrap: wrap; row-gap: 0; }
  .gc-tsum-who { order: 3; flex-basis: 100%; }
}
/* a thread reply also sent to the room: where it came from, above the bubble, linking back (Slack "replied to a thread") */
.gc-tfrom {
  display: flex; align-items: center; justify-content: flex-start; gap: 4px; max-width: 100%; min-height: 20px; margin: 0 2px 2px;
  padding: 0; border: 0; background: none; font: var(--t-label); font-weight: 400; color: var(--muted); text-align: left;
}
.gc-tfrom:hover { background: none; color: var(--ink-2); }
.gc-tfrom .icon { flex-shrink: 0; width: 14px; height: 14px; }
.gc-tfrom-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-tfrom-text span { color: var(--accent); }
.gc-tfrom:hover .gc-tfrom-text span { text-decoration: underline; text-underline-offset: 2px; }
.gc-talso { margin: 2px 2px 0; font: var(--t-small); font-weight: 400; color: var(--muted); }
/* the panel: the same frame as Room details (header 56, hairline left), the room's canvas under the messages */
.gc-side { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--gc-canvas); border-left: 1px solid var(--line); container: gcroom / inline-size; }
.gc-side-head { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; height: 56px; padding: 0 var(--s-3) 0 var(--s-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.gc-side-head h2 { flex: 1; display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; margin: 0; font: var(--t-h2); white-space: nowrap; overflow: hidden; }
.gc-side-head h2:focus { outline: none; }
.gc-side-head h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-control); }
.gc-side-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: var(--t-meta); color: var(--muted); }
.gc-side-head .icon-btn { position: relative; flex-shrink: 0; width: 32px; height: 32px; min-height: 32px; }
.gc-side-head .icon-btn:first-child { margin-left: calc(-1 * var(--s-2)); }
.gc-side-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: var(--s-1) var(--s-4) var(--s-6); background: var(--surface); }
.gc-side .gc-feed { max-width: none; padding: 0 var(--s-4) var(--s-4); }
/* Slack 0376: "2 replies" and a rule between the root and the replies */
.gc-tdiv { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; }
.gc-tdiv::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.gc-tnone { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-side .gc-dock { position: relative; }
/* Slack 0376: the checkbox under the reply box */
.gc-also { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 26px; margin: 2px 0 0 44px; font: var(--t-label); font-weight: 400; color: var(--ink-2); cursor: pointer; }
.gc-also input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
/* the Threads view (Discord 0240): one card row per thread, the thread's first line, the last reply, then counts */
.gc-tlist { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.gc-tlist li + li { margin-top: var(--s-2); }
.gc-trow {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; min-height: 0; padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); font: var(--t-meta); font-weight: 400; color: var(--ink-2); text-align: left;
}
.gc-trow:hover { background: var(--bg); }
.gc-trow-top { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.gc-trow-root { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-trow-last { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-trow-meta { font: var(--t-label); font-weight: 400; color: var(--muted); }
/* tablets (600 to 1023): the thread and the Threads view are a 400px drawer over the room with a scrim, the way
   Room details is at these widths; phones: a full sheet over the room, as the room is over the list */
@media (max-width: 1023px) {
  .gc-side { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(400px, 100%); border-left: 0; box-shadow: var(--shadow-overlay); }
  .gc-side-head { padding: 0 var(--s-2) 0 var(--s-4); }
  .gc-side .gc-feed { padding: 0 var(--s-4) var(--s-4); }
}
@media (max-width: 599px) {
  .gc-side { left: 0; width: 100%; box-shadow: none; }
}
@media (max-width: 599px) {
  .gc-also { margin-left: 0; }
}

/* ============ room details (M2; GroupMe 0137) ============ */
.gc-scrim { display: none; }
.gc-info { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); }
.gc-info-head { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; height: 56px; padding: 0 var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--line); }
.gc-info-head h2 { flex: 1; min-width: 0; margin: 0; font: var(--t-h2); }
.gc-info-head h2:focus { outline: none; }
.gc-info-head .icon-btn { position: relative; width: 32px; height: 32px; min-height: 32px; }
.gc-info-head .icon-btn:first-child { margin-left: calc(-1 * var(--s-2)); }
.gc-info-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: var(--s-4) var(--s-4) var(--s-6); }
.gc-info-id { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-2) 0 var(--s-4); }
.gc-info-id h3 { margin: var(--s-3) 0 2px; font: var(--t-h2); }
.gc-info-id p { margin: 0; font: var(--t-meta); color: var(--muted); }
.gc-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-2); }
.gc-tiles button { flex-direction: column; gap: 4px; min-height: 64px; padding: var(--s-2); border-color: var(--line); background: var(--bg); color: var(--ink); font: var(--t-label); }
.gc-tiles button:hover { background: var(--surface-2); }
.gc-tiles .icon { width: 20px !important; height: 20px !important; color: var(--ink-2); }
.gc-info-note { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
/* who can read the room, three muted t-meta lines under the rows (owner walk 7, W18): presence, the link, enrollment */
.gc-info-note.gc-info-line { margin-top: var(--s-1); font: var(--t-meta); }
.gc-info-note.gc-info-presence { margin-top: var(--s-3); }
.gc-info-rows { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.gc-info-rows li { border-bottom: 1px solid var(--line); }
.gc-info-row { justify-content: flex-start; gap: var(--s-3); width: 100%; min-height: 48px; padding: 0 var(--s-1); border: 0; border-radius: 0; background: transparent; color: var(--ink); font: var(--t-body); text-align: left; }
.gc-info-row:hover { background: var(--bg); }
.gc-info-row:focus-visible { outline-offset: -2px; }
.gc-info-row .icon { width: 18px; height: 18px; color: var(--muted); }
.gc-info-row .gc-chev { width: 16px; height: 16px; }
.gc-info-label { flex: 1; min-width: 0; }
.gc-info-n { font: var(--t-meta); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gc-info-why { display: flex; align-items: flex-start; gap: var(--s-2); }
.gc-info-why .icon { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; color: var(--positive); }
.gc-leave { justify-content: flex-start; gap: var(--s-2); width: 100%; min-height: 44px; margin-top: var(--s-4); padding: 0 var(--s-1); border: 0; background: transparent; color: var(--danger); }
.gc-leave:hover { background: var(--danger-subtle); }
.gc-sec + .gc-sec { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.gc-sec h3 { margin: 0 0 var(--s-2); font: var(--t-item); }
.gc-prop { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-2); align-items: baseline; padding: 4px 0; font: var(--t-meta); color: var(--ink); }
.gc-prop > span:first-child { font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-ilist { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.gc-ilist > li { display: flex; align-items: center; gap: var(--s-1); border-bottom: 1px solid var(--line); }
.gc-ilist .icon-btn { position: relative; }
.gc-iitem { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: var(--s-2) var(--s-1); border: 0; border-radius: 0; background: transparent; text-align: left; }
.gc-iitem:hover { background: var(--bg); }
.gc-iitem:focus-visible { outline-offset: -2px; }
.gc-iitem-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: var(--t-meta); color: var(--ink); }
.gc-iitem-sub { font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-iitem-snip { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--t-label); font-weight: 400; color: var(--ink-2); }
.gc-info-none { margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--muted); }
/* Drive links list (Slack 0094): the row opens Drive; the trailing button shows the message in the chat */
.gc-drow { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-1); color: var(--ink); text-decoration: none; }
a.gc-drow:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.gc-drow:focus-visible { outline-offset: -2px; }
.gc-drow .gc-dname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font: var(--t-meta); font-weight: 600; }
.gc-iitem-ic { display: inline-flex; margin-right: 6px; vertical-align: -2px; color: var(--muted); }
.gc-iitem-ic .icon { width: 14px; height: 14px; }
.gc-info-sub { margin: var(--s-4) 0 0; font: var(--t-label); color: var(--muted); }
.gc-person { gap: var(--s-3) !important; min-height: 48px; padding: 0 var(--s-1); }
.gc-person-name { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font: var(--t-meta); color: var(--ink); }
.gc-rules { margin: 0; padding-left: 18px; font: var(--t-meta); color: var(--ink-2); }
.gc-rules li + li { margin-top: 6px; }
.gc-info-body > .gc-rules + .gc-info-sub { margin-top: var(--s-6); }
.gc-info-body > .text-btn { margin-top: var(--s-3); }
.gc-find { max-width: none; }
.gc-find-f { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
/* four filters on one row in the 343px drawer (spec 11) */
.gc-find-f button { padding-left: 9px; padding-right: 9px; }
.gc-share { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--s-2); }
/* a QR code needs a light quiet zone in both themes to scan */
/* the QR code in shell tokens (owner walk 7, W18): ink modules on the surface, so in dark it is light modules on the
   dark surface rather than a white island; the library's own white and black fills are replaced here */
.gc-qr { display: grid; place-items: center; width: 200px; height: 200px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.gc-qr svg rect { fill: var(--surface); }
.gc-qr svg path { fill: var(--ink); }
.gc-qr svg { display: block; width: 100%; height: 100%; }
.gc-qr.is-off { padding: var(--s-4); background: var(--bg); font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-share-url { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); overflow-wrap: anywhere; }
.gc-share-acts { margin-top: var(--s-3); }
.gc-share .gc-info-note { text-align: left; }

/* ============ menus: opaque, overlay shadow, reaction row on top (GroupMe 0038) ============ */
.gc-menu, .gc-mention { position: fixed; z-index: 80; max-width: calc(100vw - 16px); }
.gc-react-row { display: flex; gap: 2px; }
.gc-react { position: relative; width: 40px; height: 36px; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--ink-2); }
.gc-react:hover, .gc-react:focus-visible { background: var(--surface-2); }
.gc-react .icon { width: 20px; height: 20px; }
.gc-react.is-on, .gc-react.is-on:hover { background: var(--accent-subtle); color: var(--accent); }
.gc-menu-note { margin: 4px var(--s-2); font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-menu-person { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-2); font: var(--t-meta); color: var(--ink); }
.gc-menu-person .gc-pav, .gc-mention .gc-pav { width: 24px; height: 24px; font-size: 12px; }
.gc-mi-on { display: inline-flex; margin-left: auto; color: var(--accent); }
.gc-mention .menu-item.is-active { background: var(--surface-2); }
/* Copy link shows the cleaned address under it, so anyone can check where a card goes */
.gc-menu .menu-item:has(.gc-mi-sub) { align-items: flex-start; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.gc-menu .menu-item:has(.gc-mi-sub) > .icon { margin-top: 3px; }
.gc-mi-text { display: flex; flex-direction: column; min-width: 0; }
.gc-mi-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 240px; font: var(--t-label); font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }

/* ============ modals ============ */
.gc-reasons { display: grid; gap: 2px; margin: var(--s-3) 0 0; padding: 0; border: 0; }
.gc-reasons label { min-height: 32px; font-weight: 400; }
.gc-note-l { margin-top: var(--s-3); }
.gc-opt-l { font-weight: 400; color: var(--muted); }
.gc-note { margin-top: 6px; }
.gc-alsoblock { margin-top: var(--s-3); font-weight: 400 !important; }
.gc-optset { margin: var(--s-4) 0 0; padding: 0; border: 0; }
.gc-optset legend { padding: 0; font: var(--t-control); font-weight: 600; color: var(--ink); }
.gc-optrow input { width: 100%; margin-top: 6px; }
.gc-optset .text-btn { margin-top: 6px; }
/* paired fields top-align and share one control height, so a date input sits level with a text input */
.gc-modal .wm-pair { margin-top: var(--s-4); align-items: start; }
.gc-modal .wm-pair label > :is(select, :where(.csel)), .gc-modal .wm-pair label > input:not([type=checkbox], [type=radio]) { width: 100%; height: 36px; }
/* poll composer (GroupMe 0151): Voting ends, then Multiple answers as its own toggle row */
.gc-ends { margin-top: var(--s-4); }
.gc-ends > :is(select, :where(.csel)) { width: 100%; }
.gc-multi { margin-top: var(--s-1); font-weight: 400 !important; }
.gc-gap { margin-top: var(--s-3) !important; }
.gc-modal .field-error:empty { display: none; }
.gc-modal .field-error .icon { width: 14px; height: 14px; }
.gc-modal .modal-body > .field-help:last-child { margin-top: var(--s-3); }
/* Attach a Google Drive link (Slack 0253): Link over Name, the kind icon inside Name at its left */
.gc-dfield { position: relative; margin-top: 6px; }
.gc-dfield > input.wm-field { margin-top: 0; padding-left: 36px; }
.gc-dfield-ic { position: absolute; left: 10px; top: 50%; display: inline-flex; color: var(--ink-2); transform: translateY(-50%); pointer-events: none; }
.gc-dfield-ic .icon { width: 18px; height: 18px; }
.gc-dfield:has(input:disabled) .gc-dfield-ic { color: var(--muted); }
.gc-drive-modal #gm-dn-help { margin: 6px 0 0; }
.gc-drive-modal #gm-dn-share { margin: 2px 0 0; }
.gc-drive-modal .modal-body { padding-bottom: var(--s-1); }

/* ============ Chat safety (#moderation) ============ */
.gc-safety .set-sec > .set-desc { margin: var(--s-1) 0 0; }
.gc-safety .set-sec > .gc-set-after { margin-top: var(--s-2); }
.gc-safe-name { display: inline-flex; align-items: center; gap: 6px; }
.gc-safe-foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 40px 0 0; }
.gc-safe-foot .text-btn { display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 0 calc(-1 * var(--s-2)); font: var(--t-control); }
.gc-safe-foot a.text-btn:hover { text-decoration: none; }
@media (max-width: 599px) {
  .gc-safety .setting-row:has(.cs-r) { flex-wrap: wrap; row-gap: var(--s-2); }
  .gc-safety .setting-row:has(.cs-r) .setting-text { flex-basis: 100%; }
  .gc-safety .cs-r { width: 100%; justify-content: space-between; }
}

/* ============ responsive ============ */
/* details overlay the room below 1280 (sys 9.7 drawer) */
@media (max-width: 1279px) {
  .gc-scrim { display: block; position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--scrim); }
  .gc-scrim:hover { background: var(--scrim); }
  .gc-info { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(400px, 100%); border-left: 0; box-shadow: var(--shadow-overlay); }
}
/* the thread panel's scrim: only while it is a drawer (600 to 1023); from 1024 it is a column, under 600 a full sheet */
.gc-scrim.gc-sscrim { display: none; }
@media (min-width: 600px) and (max-width: 1023px) { .gc-scrim.gc-sscrim { display: block; } }
/* one pane below 1024: the list, or one room with a back button (GroupMe phone) */
@media (max-width: 1023px) {
  .gc { display: flex; flex-direction: column; }
  .gc.has-room .gc-list, .gc:not(.has-room) .gc-room { display: none; }
  /* a short room still fills the screen, so the composer sits at the bottom (it stopped halfway before) */
  .gc.has-room > .gc-room { flex: 1 1 auto; }
  .gc-list { border-right: 0; }
  .gc-list-body { overflow: visible; }
  body:has(.gc.has-room) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  body:has(.gc.has-room) .mobile-bar { display: none; }
  body:has(.gc.has-room) .shell { flex: 1; min-height: 0; }
  .gc-back { display: inline-flex; color: var(--ink-2); }
  .gc-head { padding: 0 var(--s-2) 0 var(--s-1); }
  .gc-head-main { padding-left: 0; }
  .gc-feed { padding: var(--s-1) var(--s-4) var(--s-4); }
  .gc-jump { right: var(--s-4); }
}
/* a narrow room (a phone, a small laptop, or Room details open beside it): still ONE facts line (owner walk 7,
   W18). The instructor and the final step aside, the seat reading drops its age (Class facts has it), and the
   meeting ellipsizes before the seat count, so All facts stays at the end of the line at 320. */
@container gcroom (max-width: 580px) {
  .gc-fact-x { display: none; }
  .gc-fact-when { flex-shrink: 1; }
  .gc-fact-seats { flex-shrink: 0; }
  .gc-fact-seats .gc-read { display: none; }
  .gc-pinbar-n { display: none; }
}
.gc-read-s { display: none; }
@container gcroom (max-width: 360px) { .gc-read-l { display: none; } .gc-read-s { display: inline; } }
/* M9, S1 in a phone-width room: cards take the message column from the name indent to the right margin
   (GroupMe 0071), and their heart and three dots move under the card at the name indent, where GroupMe
   0039 puts the reaction count (and clear of the floating Latest arrow); text bubbles keep the side heart */
@container gcroom (max-width: 480px) {
  .gc-msg.is-card:has(.gc-card) .gc-col { flex: 1 1 auto; }
  .gc-msg.is-own.is-card:has(.gc-card) .gc-col { max-width: 100%; }
  .gc-msg.is-card:has(.gc-card) .gc-line { flex-wrap: wrap; width: 100%; }
  .gc-msg.is-card:not(.is-own):has(.gc-card) .gc-like { margin-left: -4px; }
  .gc-line > .gc-card { flex: 1 0 100%; width: 100%; }
  /* a Drive card under text takes the column too; its name gets two lines before it is cut */
  .gc-msg.has-drive .gc-col { flex: 1 1 auto; }
  .gc-col > .gc-drive { width: 100%; }
  /* your card-only Drive message holds the text-plus-card column, so your cards share one left edge (Slack 0203) */
  .gc-msg.is-own.is-card:has(.gc-line > .gc-drive) .gc-col { max-width: min(620px, 88%); }
  .gc-drive .gc-dname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
}
/* measured: at a 320 room a classmate's card is 248px and "Google Slides, Google Drive" would be cut, so
   ", Google Drive" drops first and the kind word always stays */
@media (max-width: 599px) {
  .gc-pinbar-n { display: none; }
  .gc-pinbar-main { padding-left: var(--s-4); }
  .gc-col, .gc-msg.is-own .gc-col { max-width: 85%; }
  .gc-card { width: 100%; }
  .gc-dock { padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); }
  /* the composer's context, errors and the posting line all start at the dock edge, so the posting line
     stays one row even at 320 */
  .gc-dock-foot, .gc-ctx, .gc-err { margin-left: 0; padding-left: 0; }
  .gc-dock-foot { gap: 0 var(--s-3); }
  .gc-joinbar { flex-wrap: wrap; }
  .gc-joinbar > .btn-lg { width: 100%; }
  .gc-tiles button { min-height: 60px; }
  /* the attach dialog docks to the bottom as a sheet (GroupMe 0053): centered title, X at the top right,
     Attach full width above the safe area; the X does what Cancel does */
  dialog.gc-drive-modal[open] { width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: var(--r-panel) var(--r-panel) 0 0; overflow-y: auto; }
  .gc-drive-modal .modal-head { position: relative; justify-content: center; min-height: 52px; padding: var(--s-3) 52px 0; }
  .gc-drive-modal .modal-head h2 { text-align: center; }
  .gc-drive-modal .modal-head .icon-btn { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; min-height: 44px; }
  .gc-drive-modal .modal-body { padding: var(--s-3) var(--s-4) var(--s-1); }
  .gc-drive-modal .modal-foot { padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
  .gc-drive-modal .modal-foot [data-gm-close] { display: none; }
  .gc-drive-modal .modal-foot .primary { flex: 1; min-height: 44px; }
  .gc-drive-modal input { font-size: 16px; }
}
/* touch: 44px targets through a pseudo-element, visual sizes kept (sys 9.1, rubric) */
@media (pointer: coarse), (max-width: 599px) {
  .gc-head-actions .gc-lessons::before { content: ''; position: absolute; inset: -6px; }
  .gc-like::before, .gc-more::before, .gc-chip::before, .gc-head-actions .icon-btn::before, .gc-back::before,
  .gc-plus::before, .gc-send::before, .gc-as::before, .gc-never::before, .gc-list-head .icon-btn::before,
  .gc-sys .text-btn::before, .gc-card-acts .text-btn::before, .gc-info-head .icon-btn::before,
  .gc-react::before, .gc-row-more::before, .gc-rcpt .icon-btn::before, .gc-qclear::before, .gc-browse-head .icon-btn::before,
  .gc-side-head .icon-btn::before, .gc-tsum::before { content: ''; position: absolute; inset: -8px; }
  /* thread links: 28 tall, reaching 44 through the pseudo-element (rubric) */
  .gc-tsum { position: relative; }
  .gc-tfrom { position: relative; min-height: 28px; margin-bottom: 0; }
  .gc-tfrom::before { content: ''; position: absolute; inset: -8px 0; }
  .gc-also { min-height: 44px; margin-top: 0; }
  .gc-reasons label, .gc-alsoblock { min-height: 44px; }
  /* 36 tall Join and Join a class, with the touch area reaching 44 */
  .gc-jbtn, .gc-joinbtn { min-height: 36px; }
  .gc-jbtn::before, .gc-joinbtn::before { content: ''; position: absolute; inset: -4px; }
  .gc-joinbtn { position: relative; }
  /* bordered 28px icon buttons: -9px from the padding box reaches 44px (drive-links spec 8, 10) */
  .gc-ctx .icon-btn::before, .gc-ilist .icon-btn::before { content: ''; position: absolute; inset: -9px; }
  /* menu rows, as dibs.css does for .pm-menu (GroupMe 0053) */
  .gc-menu .menu-item { min-height: 44px; }
  .gc-like, .gc-chip, .gc-sys .text-btn, .gc-card-acts .text-btn, .gc-pinbar .text-btn, .gc-facts-more { min-height: 28px; }
  .gc-more, .gc-row-more { width: 28px; height: 28px; min-height: 28px; }
  .gc-head-actions .icon-btn, .gc-back, .gc-list-head .icon-btn, .gc-info-head .icon-btn { width: 32px; height: 32px; min-height: 32px; }
  .gc-plus, .gc-send { width: 36px; height: 36px; min-height: 36px; }
  .gc-ctx .icon-btn, .gc-ilist .icon-btn { width: 28px; height: 28px; min-height: 28px; }
  /* a 16px gap so Rename's and Remove's 44px areas do not overlap (spec 8) */
  .gc-ctx-drive [data-gc-ddrop] { margin-left: 8px; }
  .gc-as, .gc-never { min-height: 26px; }
  .gc-opt { min-height: 44px; }
  .gc-going { min-height: 0; }
  .gc-pinbar .text-btn { position: relative; }
  .gc-pinbar .text-btn::before, .gc-facts-more::before { content: ''; position: absolute; inset: -8px 0; }
  .gc-facts-more { position: relative; }
}
@media (pointer: coarse) { .gc-row-more { display: none; } }

/* ============ signed-out gate (owner ruling, 18 Oct 2026): class chats are for signed-in users only ============
   GroupMe 0027: identity tile, the name, one line, one primary. Slack 0001: one centered column on the page.
   Nothing from the room is drawn here but its name (course code and section). */
.gc-gate { display: flex; justify-content: center; padding: var(--s-12) 0 var(--s-8); }
.gc-gate-col { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 360px; text-align: center; }
.gc-gate-ic { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--line); border-radius: var(--r-panel); color: var(--muted); }
.gc-gate-ic .icon { width: 28px; height: 28px; }
.gc-gate h1 { margin: var(--s-4) 0 var(--s-1); overflow-wrap: anywhere; }
.gc-gate p { margin: 0 0 var(--s-6); font: var(--t-body); color: var(--muted); }
@media (pointer: coarse), (max-width: 767px) { .gc-gate .primary { width: 100%; min-height: 44px; } }
@media (max-width: 1023px) { .gc-gate { padding-top: var(--s-8); } }
/* Report modal: copyright owners are sent to #copyright (legal.js); a report is not a 512 notice */
.gc-cr-note { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gc-cr-note a, .gc-bub.is-gone a { color: var(--accent); }
.gc-cr-note a { white-space: nowrap; }

/* on Rails (W8 S5): a post screening has not passed yet, shown to its author only */
.gc-held { display: flex; align-items: center; gap: 4px; margin: 2px 2px 0; font: var(--t-small); font-weight: 400; color: var(--muted); }
.gc-held svg { width: 14px; height: 14px; flex: none; }