/* THE CHAT'S LOOK, ONCE (ruling 207's overlay; chat.js draws it). The second stylesheet in estate/, after page.css.
 *
 * Until 2026-10-05 these rules were written three times - start.html (the landing page's overlay), rareos.html (Rare OS's
 * chat app) and index.html (the game page, scoped to .gamechat) - and nothing held the copies together. Now every page that
 * mounts chat.js links this file, and keeps in its own <style> only what is really its own:
 *   start.html   WHERE the overlay sits over the hero (beside or under JOIN THE WHITELIST), its veil and blur, the pill's
 *                corner, the phone's one-row tabs, and the invert theme's colours. Its --line is a GREY (start.html's
 *                :root), so the border below is grey there.
 *   rareos.html  the app's own panel (centred, filling the app, a faint fill) and its larger type: Rare OS is a window of
 *                its own, not an overlay. Its --line is page.css's SIGNAL hairline (q188, "Lime in Rare OS").
 *   index.html   the seat in the map's left column (chatSeat sets --gc-top, --gc-w, --gc-h), the pill as the action
 *                buttons' glass square (.ab, Option C 2026-10-18 - index.html asks chat.js for it), the phone's sheet
 *                across the foot, and text selection inside a frame that otherwise refuses it.
 * THE CORNERS ARE THE GLASS'S (the glass audit, 2026-10-18): the panel --glass-r-lg, the field --glass-r, the count and the
 * DEMO tag --glass-r-sm - each page that links this file defines them. The reds are --bad, each page's own.
 * The border below names the token, never a colour: each page's own --line decides it (chatproof part 8 resolves it).
 *
 * THE CHAT'S BUTTONS ARE THE HOUSE BUTTON (ruling 237; the deployer, 2026-10-05: "it should follow the format of the buttons
 * we have like the [ DEMO ] button.. we cannot digress from the design language"). chat.js gives every one of them .btn -
 * the class [ DEMO ] is built on - and the pill and SEND are .btn.play, DEMO's own pair. A room tab and minimize take the
 * theme button's pair (paper and ink), and the open room takes DEMO's. These rules say only where each one sits, how big it
 * is and which of the house's pairs it wears; estate/bodyfontproof.test.js fails if one sets a face, a border, a rounding,
 * a fill, a colour, a bracket or a hover of its own.
 *
 * A PAGE NEVER COPIES A RULE FROM HERE (chatproof part 10): a page's rule for a chat selector may set a property this file
 * also sets only to a DIFFERENT value. A copy is the drift this file exists to end, and goes red.
 */
.chat { display: contents; }
.chat-panel { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px;
  border: 1px solid var(--line); border-radius: var(--glass-r-lg); color: var(--ink); }
.chat-pill[hidden], .chat-panel[hidden] { display: none; }
.chat-head { display: flex; gap: 6px; align-items: flex-start; }
.chat-rooms { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }   /* 4px: room for each tab's 2px shadow */
/* a tab is the house button at the overlay's 10px: its brackets sit 4px in (DEMO's 8px is at 15px), so the five rooms take
   three rows beside minimize and still leave room for messages at 1000x580 (chatproof.test.js's fit, part 6) */
.chat-room { position: relative; --home-bg: var(--paper); --home-fg: var(--ink); font-size: 10px; line-height: 12px; padding: 4px 5px; gap: 4px; }
.chat-room.on { --home-bg: var(--signal); --home-fg: var(--on-signal); }
.chat-n { font-family: var(--body); font-weight: 500; font-size: 10px; line-height: 14px; min-width: 16px; padding: 0 4px; text-align: center;
  border-radius: var(--glass-r-sm); background: var(--signal); color: var(--on-signal); }
.chat-n[hidden] { display: none; }
/* a room's unread count sits on the tab's corner, so it never widens the row */
.chat-room .chat-n { position: absolute; top: -5px; right: -4px; box-shadow: 0 0 0 1px var(--ink); }
.chat-room.on .chat-n { display: none; }
/* the unread count inside DEMO's signal: the badge turns over so it still shows */
.chat-pill .chat-n { background: var(--on-signal); color: var(--signal); }
.chat-min { flex: none; --home-bg: var(--paper); --home-fg: var(--ink); font-size: 10px; padding: 5px; gap: 4px; line-height: 0; }
.chat-min svg { display: block; }
/* the status is a label (DEMO · SAMPLE MESSAGES · NOTHING IS SENT): Silkscreen */
.chat-status { margin: 0; font-family: var(--body); font-size: 10px; line-height: 13px; letter-spacing: .06em; color: var(--dim); }
/* DEMO says so in the theme colour, filled, the loudest thing in the overlay: nothing here is the real room */
.chat-status.demo { justify-self: start; align-self: flex-start; padding: 2px 6px; border-radius: var(--glass-r-sm); background: var(--signal); color: var(--on-signal); }
/* --signal-ink is the landing page's "signal used as text"; a page without it (page.css's) uses --signal itself */
.chat-status.live { color: var(--signal-ink, var(--signal)); }
.chat-status.offline { color: var(--bad); }
.chat-list { list-style: none; margin: 0; padding: 0 2px 0 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; gap: 8px; }
.chat-msg { display: grid; gap: 1px; min-width: 0; }
.chat-meta { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.chat-who { font-family: var(--body); font-weight: 400; font-size: 11px; line-height: 14px; letter-spacing: .06em; color: var(--signal-ink, var(--signal));
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msg.mine .chat-who { color: var(--ink); }
.chat-addr, .chat-when { font-family: var(--body); font-size: 11px; line-height: 14px; color: var(--dim); white-space: nowrap; }
.chat-when { margin-left: auto; }
.chat-text { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-empty { font-size: 13px; color: var(--dim); }
.chat-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; margin: 0; align-items: center; }
.chat-foot[hidden] { display: none; }
/* 16px: a phone zooms the page into any field smaller than that */
.chat-in { height: 36px; min-width: 0; border: 0; border-radius: var(--glass-r); padding: 0 10px; background: var(--line); color: var(--ink);
  font-family: var(--body); font-size: 16px; }
.chat-in:focus { outline: 2px solid var(--signal); outline-offset: -2px; }
.chat-count { grid-column: 1 / -1; font-family: var(--body); font-size: 11px; line-height: 14px; color: var(--dim); }
.chat-count:empty { display: none; }
.chat-count.over { color: var(--bad); }
.chat-lock, .chat-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--dim); }
.chat-note { color: var(--bad); }
.chat-note[hidden], .chat-lock[hidden] { display: none; }