/* ═══ 1.71 — the room (N87) ═════════════════════════════════════════════════
   "The booth after dark": a graphite floor where colour only ever means who is
   speaking. Nick, 2026-09-23: "take full creative control to acheive a nice
   gsap chatroom", and on the presenters' own colours, "no need to do that just
   keep it clean and inviting" — so every studio voice here is the station's
   brass, and the only other colours are the listeners' names.

   Loaded after app.css and complete on its own. Every rule is scoped under
   `.rm`, one class deeper than the 1.65/1.68 room rules in app.css, so it wins
   whether those are still there or not; nothing here reads a value they set.

   What it follows, and where:
   - UK Home Office, "Designing for users on the autistic spectrum": simple
     colours rather than bright contrasting ones (1.72 N96 adds colour where
     it means something: each listener's own, warm to violet, as a tint of
     their bubble; one fill for you; the studio's brass); a simple,
     consistent layout (the same columns whether anyone is on the air or not);
     plain words; nothing that flashes or loops.
   - WCAG 2.2: 1.4.3 text ≥ 4.5:1 (every pair below is measured, and the
     harness measures them again in the page), 1.4.11 control edges ≥ 3:1,
     2.3.3 motion follows the system's reduced-motion setting, 3.2.4 a
     sender always looks the same.
   - Mainstream group chat (iMessage, WhatsApp): yours on the right in one
     solid colour, everyone else on the left in their own colour, one face and
     name per run of messages, Today / Yesterday dividers, a time in each
     bubble, Send lit only when there is something to send.
   ═════════════════════════════════════════════════════════════════════════ */
.rm {
  --rm-floor: #141417;
  --rm-panel: #18181c;
  --rm-line: #2a2a31;          /* dividers, decorative edges */
  --rm-edge: #6b6772;          /* a control's edge: 3.2:1 on the panel, 3.3 on the floor */
  --rm-bubble: #1f1f24;        /* a listener: text 13.6:1 · meta 5.0:1 */
  --rm-bubble-line: #2e2e36;
  --rm-studio: #28231b;        /* the studio: text 12.9:1 · meta 4.8:1 */
  --rm-studio-line: #3b3326;
  --rm-text: #efe9df;
  --rm-text-2: #bdb5a8;        /* 8.1 on a listener's bubble, 8.7 on the panel */
  --rm-meta: #968d81;          /* 5.6 on the floor · 5.0 on a bubble · 4.8 on the studio */
  --rm-meta-tint: #b3aa9a;     /* the time on a listener's tinted bubble ≥ 5.1:1 (1.72 N96) */
  /* Worked out from the station's accent by radio.js (roomTokens): the most
     colour each contrast floor allows. These are the default amber's. */
  --rm-mine: #5f4923;          /* your bubble: cream on it ≥ 7:1 */
  --rm-mine-meta: #c8beac;     /* the time on your bubble ≥ 4.6:1 */
  --rm-brass: #f0b13b;         /* the studio's name, ring and rail ≥ 6:1 */
  --rm-ui: #f0b13b;            /* Send, focus, the pill ≥ 5:1, and its dark icon on it ≥ 5:1 */
  --rm-dark: #141417;
}

/* ── The header: the title and the mic lamp (1.72 N96: no count, no Motion switch) ── */
.rm .section-h { justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm .section-h .spacer { flex: 1 1 auto; }
.rm.room .section-h .pill { border-color: var(--rm-line); color: var(--rm-text-2); background: transparent; }
.rm.room .section-h .pill .dot { background: var(--rm-ui); box-shadow: none; animation: none; }

/* ── The panel: the conversation, and the card beside it on a desk ── */
.rm .room-panel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "log side" "composer side"; background: var(--rm-floor); border: 1px solid var(--rm-line); border-radius: 14px; overflow: hidden; }
.rm .room-scroll { grid-area: log; position: relative; min-height: 0; }
.rm .room-log { display: flex; flex-direction: column; gap: 4px; min-height: 420px; max-height: min(62vh, 640px); overflow-y: auto;
  overscroll-behavior: contain; padding: 16px 22px 16px; background: var(--rm-floor); scroll-behavior: auto; scrollbar-color: var(--rm-line) transparent; }

/* ── A message ── */
.rm .room-msg { display: flex; align-items: flex-start; gap: 10px; max-width: min(56ch, 80%); margin-top: 10px; opacity: 1; }
.rm .room-msg.cont { margin-top: 0; }
.rm .room-msg.dj { max-width: min(66ch, 86%); }
.rm .room-msg.mine { align-self: flex-end; flex-direction: row; max-width: min(56ch, 78%); }
.rm .room-msg.pending { opacity: 1; }

.rm .room-av { flex: none; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--tone, var(--rm-meta)); color: var(--rm-dark); font: 700 13px/1 var(--font-display); letter-spacing: .02em; box-shadow: none; }
.rm .room-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.rm .room-av.dj { width: 36px; height: 36px; margin-top: 0; background: var(--rm-studio); color: var(--rm-brass);
  box-shadow: 0 0 0 2px var(--rm-brass), 0 0 14px -3px rgba(240, 135, 58, .7); }
.rm .room-av.dj.station img { object-position: center; }
/* A run of messages from one sender shows the face once, and keeps its column. */
.rm .room-msg.cont .room-av { visibility: hidden; height: 0; }

.rm .room-b { position: relative; min-width: 0; padding: 7px 13px 6px; border-radius: 6px 18px 18px 18px;
  background: var(--rm-bubble); border: 1px solid var(--rm-bubble-line); box-shadow: none; }
.rm .room-msg.cont .room-b { border-radius: 18px; }
.rm .room-msg.dj .room-b { background-color: var(--rm-studio); border-color: var(--rm-studio-line); padding-left: 17px;
  background-image: linear-gradient(135deg, rgba(245, 196, 81, .07), rgba(240, 135, 58, .035) 55%, transparent);
  box-shadow: 0 12px 30px -18px rgba(240, 135, 58, .65); }
/* A listener's bubble in their own colour (1.72 N96): the tint and its edge are
   worked out in radio.js (paintTone) and every word on them is measured. */
.rm .room-msg:not(.dj):not(.mine) .room-b { background-color: var(--tone-fill, var(--rm-bubble)); border-color: var(--tone-line, var(--rm-bubble-line)); }
.rm .room-msg:not(.dj):not(.mine) .room-when { color: var(--rm-meta-tint); }
.rm .room-msg.mine .room-b { background: var(--rm-mine); border: 1px solid transparent; border-radius: 18px 6px 18px 18px; box-shadow: none; }
.rm .room-msg.mine.cont .room-b { border-radius: 18px; }
/* The studio's rail: a thin line down the bubble's edge, brass running to amber
   (1.72 N96) — every studio voice the same, the station's own. */
.rm .room-rail { position: absolute; left: 6px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--rm-brass);
  background-image: linear-gradient(180deg, #f5c451, #f0873a); transform-origin: 50% 0; }

.rm .room-who { display: flex; align-items: baseline; gap: 6px; margin: 0 0 1px; font-size: 13px; line-height: 1.35; color: var(--rm-text-2); }
.rm .room-who strong { font-weight: 600; color: var(--tone, var(--rm-text)); }
.rm .room-msg.dj .room-who strong { color: var(--rm-brass); }
.rm .room-msg.cont .room-who { display: none; }
.rm .room-tag { font: 500 11.5px/1.35 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--rm-meta); border: 0; border-radius: 0; padding: 0; }
.rm .room-tag::before { content: '\00b7\00a0'; }
.rm .room-text { font-size: 15px; line-height: 1.45; color: var(--rm-text); overflow-wrap: anywhere; }
.rm .room-meta { display: flex; justify-content: flex-end; margin-top: 1px; min-height: 16px; }
.rm .room-when { margin-left: 0; display: inline-flex; align-items: center; gap: 4px; font: 400 11px/16px var(--font-mono); font-variant-numeric: tabular-nums;
  font-style: normal; color: var(--rm-meta); white-space: nowrap; }
.rm .room-when svg { width: 12px; height: 12px; flex: none; }
.rm .room-msg.mine .room-when { color: var(--rm-mine-meta); }
.rm .room-when.sending { font-family: var(--font-body); font-style: italic; }
/* Still on its way: a state, not an event — a dashed edge and the 1.28 words. */
.rm .room-msg.waiting .room-b { border: 1px dashed var(--rm-mine-meta); }
.rm .room-msg.waiting .room-when { font-family: var(--font-body); font-style: italic; white-space: normal; text-align: right; color: var(--rm-mine-meta); }

/* ── Today / Yesterday ── */
.rm .room-day { display: flex; align-items: center; gap: 12px; margin: 14px 0 2px; color: var(--rm-meta); font: 500 12px/1.2 var(--font-body); }
.rm .room-day:first-child { margin-top: 0; }
.rm .room-day::before, .rm .room-day::after { content: ''; flex: 1 1 0; height: 1px; background: var(--rm-line); }

/* ── Nothing yet ── */
.rm .room-empty { margin: auto; display: grid; gap: 6px; place-items: center; text-align: center; padding: 34px 16px; color: var(--rm-text-2); max-width: 420px; }
.rm .room-empty-t { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--rm-text); }
.rm .room-empty .small { color: var(--rm-text-2); }

/* ── Scrolled up and something arrives: a pill, never a yank ── */
.rm .room-new { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0 auto; width: max-content; transform: none;
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 11px; border-radius: 999px;
  border: 1px solid var(--rm-edge); background: var(--rm-bubble); color: var(--rm-ui); font: 600 12.5px var(--font-body); cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.rm .room-new svg { width: 14px; height: 14px; }
.rm .room-new.hidden { display: none; }

/* ── The composer ── */
.rm .room-composer { grid-area: composer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--rm-line); background: var(--rm-panel); }
.rm .room-name { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px 0 10px; border-radius: 999px; border: 1px solid var(--rm-edge);
  background: var(--rm-floor); color: var(--rm-text-2); font: 500 13px var(--font-body); white-space: nowrap; cursor: pointer; flex: none; max-width: 42%; }
.rm .room-name span { overflow: hidden; text-overflow: ellipsis; }
.rm .room-name svg { width: 14px; height: 14px; flex: none; }
.rm .room-name.named { color: var(--rm-text); border-color: var(--rm-edge); }
.rm .room-name:hover { border-color: var(--rm-text-2); }
.rm .room-name-in { flex: 0 1 170px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rm-ui); background: var(--rm-floor); color: var(--rm-text); font-size: 15px; outline: none; }
.rm .room-input { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rm-edge); background: var(--rm-floor); color: var(--rm-text); font-size: 15px; }
.rm .room-input:focus { border-color: var(--rm-ui); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-ui) 24%, transparent); }
.rm .room-input::placeholder { color: var(--rm-meta); }
.rm .room-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rm-edge); background: var(--rm-floor); color: var(--rm-meta);
  display: grid; place-items: center; cursor: pointer; transform: none; transition: background .2s, color .2s, border-color .2s; }
.rm .room-send svg { width: 18px; height: 18px; }
.rm .room-send.ready { background: var(--rm-ui); border-color: var(--rm-ui); color: var(--rm-dark); }
.rm .room-send.ready:hover { transform: none; filter: brightness(1.08); }
.rm .room-send:disabled { opacity: .5; }

/* ── On the line: who you are talking to, and what to ask them ── */
.rm .room-side { grid-area: side; display: flex; flex-direction: column; gap: 18px; padding: 20px 18px; border-left: 1px solid var(--rm-line); background: var(--rm-panel); min-width: 0; }
.rm .room-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--rm-line); }
.rm .room-line-face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--rm-studio);
  box-shadow: 0 0 0 2px var(--rm-brass), 0 0 18px -4px rgba(240, 135, 58, .7); color: var(--rm-brass); font: 700 22px/1 var(--font-display); }
.rm .room-line-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.rm .room-line-t { min-width: 0; display: grid; gap: 1px; }
.rm .room-line-eb { font: 600 12px/1.3 var(--font-body); color: var(--rm-meta); }
.rm .room-line-name { font: 600 17px/1.25 var(--font-body); color: var(--rm-text); overflow-wrap: anywhere; }
.rm .room-line-sub { font-size: 13px; line-height: 1.35; color: var(--rm-text-2); }
/* Chat tips (1.72 N95): each one a thing the virtual DJs really answer, and a
   button that puts its example in the message box. A tip reads as a quiet card
   the way a listener's bubble does — graphite, the title in the studio's brass,
   the example under it — so the side column stays calm. */
.rm .room-tips { display: grid; gap: 10px; min-width: 0; }
.rm .room-tips-h { font: 600 12px/1.3 var(--font-body); color: var(--rm-meta); }
.rm .room-tips-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rm .room-tip { width: 100%; display: grid; gap: 2px; justify-items: start; text-align: left; padding: 9px 12px 10px; border-radius: 12px;
  border: 1px solid var(--tone-line, var(--rm-bubble-line)); background-color: var(--tone-fill, var(--rm-bubble)); color: var(--rm-text); font: inherit; cursor: pointer;
  transition: border-color .15s ease; }
.rm .room-tip:hover { border-color: var(--tone, var(--rm-edge)); }
.rm .room-tip:focus-visible { outline: 2px solid var(--tone, var(--rm-ui)); outline-offset: 2px; }
.rm .room-tip-t { font: 600 13.5px/1.3 var(--font-body); color: var(--tone, var(--rm-brass)); }
.rm .room-tip-x { font-size: 13px; line-height: 1.35; color: var(--rm-text-2); }
.rm .room-tips-note { font-size: 12.5px; line-height: 1.45; color: var(--rm-text-2); }
.rm .room-tips-note[hidden] { display: none; }
/* The words on their way into the box: fixed to the window, moved by GSAP, and
   removed the moment they land. Never drawn with motion off. */
.rm .room-tip-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--rm-studio); border: 1px solid var(--rm-studio-line); color: var(--rm-text); font: 500 14px/1.4 var(--font-body); }

/* ── Narrower than a desk: one column; the card becomes a strip above the
   conversation, the tips a row of chips just above the message box — titles
   only, the example lands in the box when one is pressed. ── */
@media (max-width: 1099px) {
  .rm .room-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "strip" "log" "tips" "composer"; }
  .rm .room-side { display: contents; }
  .rm .room-line { grid-area: strip; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--rm-line); background: var(--rm-panel); }
  .rm .room-line-face { width: 28px; height: 28px; font-size: 13px; }
  .rm .room-line-eb { display: none; }
  .rm .room-line-t { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
  .rm .room-line-name { font-size: 14px; overflow-wrap: normal; flex: none; }
  .rm .room-line-sub { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .rm .room-line-sub:not(:empty)::before { content: '\00b7\00a0'; }
  .rm .room-tips { grid-area: tips; gap: 6px; padding: 8px 0 6px; border-top: 1px solid var(--rm-line); background: var(--rm-panel); }
  .rm .room-tips-h { display: none; }
  .rm .room-tips-list { display: flex; gap: 8px; padding: 0 12px 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-padding: 0 12px; -webkit-overflow-scrolling: touch; }
  .rm .room-tips-list::-webkit-scrollbar { display: none; }
  .rm .room-tips-list li { flex: none; }
  .rm .room-tip { display: inline-flex; align-items: center; width: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; white-space: nowrap; }
  .rm .room-tip-x { display: none; }
  .rm .room-tips-note { padding: 0 14px; }
}
@media (max-width: 860px) {
  .radio > .rm.room { margin: 0 calc(-1 * max(14px, env(safe-area-inset-right))) 0 calc(-1 * max(14px, env(safe-area-inset-left))); }
  .radio > .rm.room .section-h { padding: 0 14px; }
  .rm .room-panel { border-left: 0; border-right: 0; border-radius: 0; }
  .rm .room-log { min-height: 300px; max-height: 58vh; padding: 12px 12px 12px; }
  .rm .room-msg { max-width: 86%; }
  .rm .room-msg.dj { max-width: 92%; }
  .rm .room-msg.mine { max-width: 84%; }
  .rm .room-composer { padding: 10px 10px; scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .rm .room-input { font-size: 16px; }     /* stops iOS zooming on focus */
  .rm .room-name { max-width: 40%; height: 44px; font-size: 12.5px; padding: 0 11px 0 9px; }
}

@media (prefers-reduced-motion: reduce) { .rm .room-log { scroll-behavior: auto; } }