/* Lüba — rooms sidebar, chat panel, onboarding, avatars. Café-calm. */

/* ---------- Chat layout ---------- */
.chat-section {
  scroll-margin-top: 80px;
  margin-bottom: 2rem;
}

.chat-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

/* ---------- Rooms sidebar (Slack-ish) ---------- */
.rooms-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.5rem;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  align-self: flex-start;
}

.rooms-head {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 0.35rem 0.75rem 0.5rem;
}

.room-list { list-style: none; padding: 0; margin: 0; }

.room-item {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 0.1rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  position: relative;
}

.room-item:hover { background: var(--surface-sunk); color: var(--ink); }

.room-item.active {
  background: var(--coral-wash);
  color: var(--ink);
  border-left-color: var(--coral);
  font-weight: 600;
}

.room-item.active .room-name { color: var(--ink); }

/* ---------- Chat panel ---------- */
.chat-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 65vh;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
}

.chat-header-main h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  border: none;
  padding: 0;
}

.room-blurb {
  margin: 0.2rem 0 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.room-presence {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2e9e5b;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.room-presence .dot {
  font-size: 0.7rem;
  line-height: 1;
}

/* When it's just you, it's a warm invite (no clinical dot) — glad-you're-here,
   not a lonely "just you". */
.room-presence.is-alone {
  color: var(--coral-ink);
  font-weight: 500;
}

.chat-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.user-status {
  color: var(--ink-soft);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.user-status .avatar-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
}

.linkish {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  text-decoration: underline;
  font-family: var(--sans);
}

.linkish:hover { color: var(--coral-ink); }

/* ---------- Crisis pin ---------- */
.crisis-pin {
  background: var(--coral-wash);
  border: 1px solid var(--coral);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  color: var(--ink);
  font-size: 0.9rem;
}

.crisis-pin strong { color: var(--coral-ink); display: block; margin-bottom: 0.4rem; }
.crisis-pin ul { margin: 0 0 0.4rem 1.1rem; padding: 0; }
.crisis-pin li { margin: 0.15rem 0; }
.crisis-pin a { color: var(--coral-ink); font-weight: 600; }
.crisis-pin p { margin: 0.4rem 0 0; color: var(--ink-soft); font-style: italic; font-size: 0.88rem; }

/* ---------- Messages ---------- */
.messages {
  flex: 1;
  min-height: 45vh;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
  background: transparent;
}

/* Density — 2026-09-19. Sal: "if the font was a little smaller... the
   mobile version would be able to see more messages at a time."
   True, but the type was the smaller half of it. 0.75rem between every message
   and a 1.5 line-height were costing more screen than the letters were. Type
   drops only from 16px to 15.2px — the people this is built for include plenty
   who do not thank you for 13px — and the rest of the room comes back from
   space that was doing nothing. */
.message { margin-bottom: 0.28rem; line-height: 1.35; }   /* tightened again 19 Sep — Sal: still too much space between messages */

/* Warm empty-room state — shown when no one's talking yet. */
.room-empty {
  max-width: 46ch;
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
  text-align: center;
}
.room-empty-lead {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.room-empty-sub {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* The Bin — a really-really-light coral, muted but warm (never gray/disabled).
   Ephemeral by design: what's typed here is never sent or stored. */
.bin {
  max-width: 42ch;
  margin: 1.4rem auto 0;
  text-align: left;
  background: #FFF6F3;              /* barely-there coral tint */
  border: 1px solid #FFE0D8;       /* soft coral edge */
  border-radius: 14px;
  padding: 0.95rem 1rem 1.05rem;
}
.bin-hint {
  display: block;
  font-size: 0.85rem;
  color: var(--coral-ink);
  margin-bottom: 0.5rem;
}
.bin-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #FFDAD0;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  background: #FFFBFA;
  color: var(--ink);
  resize: vertical;
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}
.bin-input.is-tossing {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(6px) scale(0.98);
}
.bin-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.65rem;
}
.bin-toss {
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
}
.bin-done {
  font-size: 0.85rem;
  color: var(--coral-ink);
}
.bin-crisis {
  margin-top: 0.9rem;
  background: #FFF3EF;
  border: 1px solid #FFD3C7;
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
}
.bin-crisis-lead {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.bin-crisis-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* "Come where the people are" nudge — gentle, only when you're alone here
   and another room actually has company. */
.room-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin: 0 0 0.7rem;
  padding: 0.65rem 0.9rem;
  background: #FFF6F3;
  border: 1px solid #FFE0D8;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.room-nudge-text { flex: 1 1 auto; }
.room-nudge-btn {
  flex: 0 0 auto;
  border: none;
  background: var(--coral);
  color: #fff;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.room-nudge-btn:hover { background: var(--coral-ink); }

.system-message {
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  font-family: var(--serif);
  font-weight: 400;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.chat-message.self { flex-direction: row-reverse; }

.chat-message .avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--coral);
}

.chat-message .bubble {
  background: var(--surface-sunk);
  border-radius: var(--radius);
  padding: 0.3rem 0.6rem;
  max-width: 75%;
  display: inline-block;
}

.chat-message.self .bubble {
  background: var(--coral);
  color: #fff;
}

.chat-message.self .bubble .who,
.chat-message.self .bubble .time { color: rgba(255, 255, 255, 0.88); }

.chat-message .who {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
  margin-right: 0.4rem;
}

.chat-message .time {
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.chat-message .text {
  display: block;
  font-size: 0.95rem;
  margin-top: 0.05rem;
  word-wrap: break-word;
  white-space: pre-wrap;
  color: var(--ink);
}

.chat-message.self .text { color: #fff; }

/* ---------- Connection banner ---------- */
.connection-banner {
  background: #FFF4E5;
  border: 1px solid #E8B274;
  color: #6A4A00;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin: 0.5rem 0;
}

/* ---------- Input row ---------- */
.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.input-row #chat-input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
}

.input-row #send-btn {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--sans);
  cursor: pointer;
  transition: var(--transition);
}

.input-row #send-btn:hover { background: var(--coral-ink); }

.microcopy {
  color: var(--ink-muted);
  font-size: 0.82rem;
  margin: 0.5rem 0 0;
}

.microcopy a { color: var(--ink-soft); }
/* Sal, 4 Oct: bold — Be kind, Invite a friend, Message Board, Play a Game,
   Safety & crisis resources. */
.microcopy-text > span, .microcopy-text > .linkish, .microcopy-text > a { font-weight: 700; }
/* The Safety link was bold but had no underline, so it did not read as a link
   beside the underlined buttons (Sal, 4 Oct). Same look as its neighbours. */
.microcopy-text > a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.microcopy-text > a:hover { color: var(--coral-ink); }

/* ---------- Onboarding modal ---------- */
/* First-run intro (Section 1.5) — the founder's-story welcome. Long copy, so
   the overlay scrolls; warm and plain, never a wall of chrome. */
.intro-modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 22, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1rem;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}
.intro-modal[hidden] { display: none; }
.intro-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.9rem 1.7rem;
  max-width: 560px;
  width: 100%;
  margin: auto;
  box-shadow: 0 24px 60px rgba(31, 27, 22, 0.25);
}
.intro-title {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--ink);
  border: none;
}
.intro-card p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.intro-signoff {
  font-family: var(--serif) !important;
  font-size: 1.15rem !important;
  font-weight: 500;
  color: var(--coral-ink) !important;
  margin: 1.3rem 0 1.5rem !important;
}
.intro-btn {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
}

.onboard-modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 22, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

.onboard-modal[hidden] { display: none; }

.onboard-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 1.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(31, 27, 22, 0.25);
}

.onboard-card h2 {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
  border: none;
}

.onboard-sub {
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
}

.onboard-card label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 1rem 0 0.45rem;
}

#onboard-name {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  font-family: var(--sans);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  transition: var(--transition);
}

/* Color-swatch avatar picker */
.onboard-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.onboard-avatars .av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--coral);
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
  position: relative;
}

.onboard-avatars .av:hover { transform: scale(1.08); }

.onboard-avatars .av.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink);
}

#onboard-enter {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--sans);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--coral);
  color: #fff;
  transition: var(--transition);
}

#onboard-enter:hover { background: var(--coral-ink); }

.onboard-fine {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-align: center;
}

/* ---------- Responsive ---------- */
/* Matched to the 860px breakpoint in styles.css. Two breakpoints across
   both stylesheets, not five across two. */
@media (max-width: 860px) {
  .chat-layout { grid-template-columns: 1fr; }
  .rooms-panel {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0.6rem;
  }
  .room-list {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .room-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.4rem 0.85rem;
    border-left: none;
    border-bottom: 2px solid transparent;
    font-size: 0.88rem;
  }
  .room-item.active {
    border-left: none;
    border-bottom-color: var(--coral);
  }
  .rooms-head { display: none; }
  .chat-panel { padding: 1rem; min-height: 70vh; }
  .chat-header { flex-direction: column; gap: 0.5rem; }
  .chat-header-meta { align-items: flex-start; }
}

/* PHONE. Matched to 520px in styles.css, and declared last so ordering is
   deliberate rather than accidental.

   `main { padding: 0 0.75rem }` was removed from here. rooms.css loads AFTER
   styles.css, so that rule overrode `main { padding: 0 }` in the narrow
   block and re-inset the photo that is meant to run edge to edge — the same
   fault the old 768px block had. main's gutter now belongs to styles.css
   alone, and the gated app sections carry their own margins there. */
@media (max-width: 520px) {
  .onboard-card { padding: var(--s-4) var(--s-3); }
  .onboard-card h2 { font-size: var(--t-lg); }
  .intro-card { padding: var(--s-4) var(--s-3); }
  .intro-title { font-size: var(--t-lg); }
  .intro-card p { font-size: var(--t-sm); }
  .bin { padding: var(--s-2); }
}

/* ===================================================================
   THE ROOM ON A PHONE — 2026-09-19

   Sal tested the whole path on a phone with a friend beside her and
   reported: "there was literally nowhere to chat."

   The input row was never missing. It was below the fold. The panel is
   min-height 70vh, the header stacks to three lines on a narrow screen,
   the group-chat hours note sits under it, and .messages then claims
   min-height 45vh of empty space — so the box you type in was pushed off
   the bottom of the screen. On a laptop there is room to spare, which is
   why it never showed up in testing here.

   Fixed the way every messaging app does it: the panel is exactly as tall
   as the screen, the transcript takes whatever is left over and scrolls
   inside itself, and the input row is therefore ALWAYS visible without
   scrolling. dvh rather than vh so the mobile browser's own toolbars are
   accounted for; the vh line above it is the fallback for anything that
   does not know dvh.
   =================================================================== */
@media (max-width: 520px) {
  .chat-panel {
    min-height: 0;
    height: calc(100vh - 5.5rem);
    height: calc(100dvh - 5.5rem);
    padding: var(--s-3);
  }

  /* flex:1 with min-height:0 is what lets it shrink INSIDE the panel
     rather than pushing the input row out of the bottom of it. */
  .messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .input-row { margin-top: var(--s-2); }

  /* Every line in the header is a line the chat box moves down by.
     The room blurb repeats the invite that was on the board a tap ago, and
     the back button already says where you are — so on a phone the header
     keeps the room name and the live count, and drops the rest. */
  .room-view .room-blurb { display: none; }
  .chat-header { padding-bottom: var(--s-2); margin-bottom: var(--s-2); }
  .chat-header h2 { font-size: var(--t-md); margin: 0; }
}

/* ===================================================================
   IN A ROOM, THE ROOM IS THE SCREEN — 2026-09-19

   Sal: the band above the chat — "Show up. Relax. Have a good time." and
   the tagline under it — "should collapse and then most of the screen is
   just the chat window on the mobile version."

   It is the right call. That copy is there to welcome somebody who has
   just arrived; once two people are talking it is furniture sitting on
   top of a live conversation, and on a phone it costs a third of the
   transcript. It comes straight back the moment they tap back to the
   board.

   Phones only. On a laptop there is room for both, and Sal said the
   laptop already looks right.
   =================================================================== */
/* The welcome band collapses the moment you are IN a room — every screen size,
   not just phones. Sal, 20 Sep: "collapse this band once in the main room".
   It is a greeting for somebody arriving; once they are in a conversation it is
   a paragraph sitting on top of the thing they came for, and on a laptop it
   still costs the top of the transcript. It comes straight back on the board. */
body.in-room #welcome-band { display: none; }

@media (max-width: 520px) {
  body.in-room header .tagline,
  body.in-room header .tagline-line { display: none; }
  body.in-room .chat-panel { height: calc(100dvh - 3.5rem); }
}

/* ===================================================================
   IN A ROOM ON A PHONE, NOTHING ELSE IS ON THE PAGE — 2026-09-19

   Sal, after the welcome band collapsed: "I'm not seeing 8 conversations
   in the chat window because what's coming after that is Ask a Lüba,
   Recent questions — that should all be collapsed too when they start
   chatting."

   Right. Everything below the room was still stacked under it, so the
   transcript was sharing the page with a question board, a share card, a
   privacy notice and a footer. None of that is any use to two people
   mid-conversation, and all of it comes back on the board.

   And the Send button: "the send button is outside the frame of the app
   and it doesn't need to say the word Send — it could just show the
   little arrow." On a narrow screen the word plus its padding pushed the
   button past the edge. The arrow does the same job in a third of the
   width; the button keeps aria-label="Send" so a screen reader still
   hears the word.
   =================================================================== */
@media (max-width: 520px) {
  body.in-room #help-section,
  body.in-room #share,
  body.in-room #privacy-notice,
  body.in-room footer { display: none; }

  .input-row #send-btn { padding: 0 0.9rem; }
  .input-row #send-btn .send-word { display: none; }
  .input-row #send-btn::after {
    content: "\2191";          /* upwards arrow — send */
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 700;
  }
}

/* Sign out, bottom right — 2026-09-19.
   Sal: "take the sign out button and put it at the bottom right hand corner of
   the mobile version and the desktop version." It rides the last line of the
   panel rather than floating above it, so it can never end up sitting on top
   of the composer at an awkward height. */
.chat-panel .microcopy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: nowrap;
}
.chat-panel .microcopy-text { min-width: 0; }
.room-signout {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0.2rem 0.3rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}
.room-signout:hover { color: var(--coral-ink); }
.room-signout:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--coral-wash); border-radius: var(--radius-sm); }

/* The two lines of context from before you arrived — 2026-09-19.
   Sal: "we want to see at least the last two comments so we know what the
   people in the room are talking about." They are real messages, so they are
   not hidden or greyed into illegibility — just set back a little, so it reads
   as "this was already going on" rather than as something said to you. */
.chat-message.is-earlier { opacity: 0.72; }
.chat-message.is-earlier + .chat-message:not(.is-earlier) {
  border-top: 1px dashed var(--line-strong);
  padding-top: 0.5rem;
  margin-top: 0.4rem;
}

/* Faces — 2026-09-20.
   Six hand-drawn avatars replace the colour swatches. The legacy colour chip
   still renders for anyone who had one, so both shapes have to look like
   siblings rather than two different ideas. */
.chat-message .avatar.is-face,
.avatar-chip.is-face {
  background: var(--surface-sunk);
  object-fit: cover;
  display: inline-block;
}
.chat-message .avatar.is-face { width: 28px; height: 28px; border-radius: 50%; }
.avatar-chip.is-face { width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }

/* The picker. A face is a picture, not a colour swatch, so it needs room. */
.onboard-avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.onboard-avatars .av {
  width: auto;
  height: auto;
  padding: 2px;
  background: var(--surface-sunk);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}
.onboard-avatars .av img { display: block; width: 100%; height: auto; border-radius: 50%; }
.onboard-avatars .av.selected { border-color: var(--coral); }
.onboard-avatars .av:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--coral-wash); }

@media (max-width: 520px) {
  .onboard-avatars { grid-template-columns: repeat(3, 1fr); }
}

/* ===================================================================
   CATCH — the first game, 20 Sep 2026

   Sal wanted three games for three kinds of member: one to chat over,
   one to compete at, and one that is just silly. This is the middle
   one — sixty seconds, a score, and a rematch. The game itself is
   entirely local (js/game-catch.js); only the score ever travels.

   Sized so the whole thing fits one screen on a phone without the
   canvas being squeezed into a letterbox.
   =================================================================== */
.game-card { max-width: 640px; width: 100%; }
.game-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.game-hud {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--coral-ink, #b3403a);
  font-variant-numeric: tabular-nums;   /* the timer must not jitter */
}
.game-how { margin: 0.35rem 0 0.6rem; }
.game-canvas {
  display: block;
  width: 100%;
  height: min(46vh, 380px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  background: #FDF8F3;
  touch-action: none;          /* dragging the table must not scroll the page */
  cursor: pointer;
}
.game-over {
  margin-top: 0.75rem;
  text-align: center;
}
.game-result {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
}
.game-buttons {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}
.game-close { display: block; margin: 0.75rem auto 0; }
/* Only .btn.primary is styled site-wide; the second button in a game
   ("Tell the room", "Back to games") was falling back to the browser's grey. */
.game-buttons .btn:not(.primary) {
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--coral);
  background: var(--surface, #fff);
  color: var(--coral-ink);
  cursor: pointer;
}
.game-buttons .btn:not(.primary):hover { background: var(--coral-wash); }
.chess-ask .btn {
  font: inherit; font-weight: 600; padding: 0.55rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--coral); background: var(--surface, #fff); color: var(--coral-ink); cursor: pointer;
}
.chess-ask .btn:hover { background: var(--coral-wash); }

@media (max-width: 520px) {
  .game-canvas { height: min(42vh, 320px); }
  .game-how { font-size: var(--t-sm); }
}

/* Pick a game ------------------------------------------------------ */
.games-card { max-width: 520px; width: 100%; }
.games-pick { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.games-option { width: 100%; }

/* Chess with Champ ------------------------------------------------- */
.chess-card { max-width: 660px; width: 100%; }
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(100%, 62vh, 480px);
  aspect-ratio: 1;
  margin: var(--s-2) auto 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: manipulation;
}
.chess-sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  aspect-ratio: 1;
}
.chess-sq.light { background: #F0D9B5; }   /* classic tournament board — Sal: "make it a regular chess board" */
.chess-sq.dark  { background: #B58863; }
.chess-sq.last  { box-shadow: inset 0 0 0 100px rgba(255, 196, 0, 0.22); }
.chess-sq.selected { box-shadow: inset 0 0 0 3px var(--coral-ink); }
.chess-sq.check { box-shadow: inset 0 0 0 100px rgba(216, 74, 50, 0.35); }
.chess-sq.target::after {
  content: "";
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(31, 27, 22, 0.22);
}
.chess-sq.target-take::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 3px solid rgba(31, 27, 22, 0.25);
}
.chess-sq:focus-visible { outline: 3px solid var(--coral-ink); outline-offset: -3px; z-index: 1; }
.chess-piece {
  font-size: min(9vw, 7.2vh, 46px);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.chess-piece.w {
  color: #FFFFFF;
  /* a solid dark outline, so white pieces read on the light squares too */
  text-shadow: 1px 0 #2B211B, -1px 0 #2B211B, 0 1px #2B211B, 0 -1px #2B211B,
               1px 1px #2B211B, -1px -1px #2B211B, 1px -1px #2B211B, -1px 1px #2B211B;
}
.chess-piece.b { color: #2B211B; }
.chess-buttons { margin-top: var(--s-3); justify-content: center; }
/* Ask a question (4 Oct). */
.chess-ask { text-align: center; margin-top: var(--s-2); }
.chess-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 480px; margin: var(--s-2) auto 0; }
 .chess-ask .btn, .chess-questions .btn { font-family: inherit; }
.chess-questions .btn { font-size: 0.85rem; padding: 0.5rem 0.6rem; line-height: 1.2; }
.chess-answer { margin: var(--s-2) auto 0; max-width: 480px; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: #FFF4EF; color: var(--ink); font-size: var(--t-sm); line-height: 1.45; }
/* Chess cheers back to their first speed — Sal, 4 Oct: "reverse the slowed
   down message". Word Café keeps the longer one. */
.chess-board-wrap .game-cheer.show { animation-duration: 1.9s; }
.chess-sq.hint { box-shadow: inset 0 0 0 4px #2E9E6A; }
/* Mate's move, made visible (Sal, 4 Oct): the piece it is about to move
   glows, then the square it lands on pulses for two seconds. */
.chess-sq.mate-lift { box-shadow: inset 0 0 0 4px #D84A32; }
.chess-sq.mate-lift .chess-piece { transform: scale(1.12); transition: transform 0.2s; }
.chess-sq.mate-arrive { animation: mate-arrive 2s ease-out 1; }
@keyframes mate-arrive {
  0%, 60% { box-shadow: inset 0 0 0 4px #D84A32, inset 0 0 0 100px rgba(255, 106, 82, 0.35); }
  100%    { box-shadow: inset 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .chess-sq.mate-arrive { animation: none; box-shadow: inset 0 0 0 4px #D84A32; } }

/* "Hey — Jenn just joined the room!" Over everything, games included. */
.friend-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: min(92vw, 460px);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 24px rgba(31, 27, 22, 0.25);
}
.friend-toast.show { animation: friend-in 0.4s ease-out; }
@keyframes friend-in {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .friend-toast.show { animation: none; } }
.chess-over { background: var(--coral-wash); border-radius: var(--radius-lg); padding: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.chess-over .game-result { font-size: 1.35rem; color: var(--coral-ink); margin: 0 0 0.25rem; }
.chess-why { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.45; }

/* Word Café --------------------------------------------------------- */
.words-card { max-width: 560px; width: 100%; }
.words-score { margin: 0.25rem 0 0; font-size: var(--t-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.words-wrap { position: relative; }
/* REDONE 4 Oct 2026. Sal: "the board itself looks lumpy… kind of swollen —
   why isn't it just a perfectly flat board like the chess board?" The lumps
   were 2px gaps, rounded squares and a raised shadow on every tile. Now: one
   flat grid with hairlines, square corners, flat tiles. And in our colours:
   white squares, coral grid; the word bonuses in coral (deep coral for ×3),
   the letter bonuses in soft grey (deeper grey for ×3). */
.wc-board {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 0;
  width: min(100%, 56vh, 480px);
  aspect-ratio: 1;
  margin: var(--s-2) auto 0;
  border: 2px solid var(--coral);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.wc-sq {
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 0.5px #F6C9BE;     /* the coral hairline grid */
  background: #fff;
  color: var(--ink-muted);
  font: inherit; font-size: min(2.5vw, 1.6vh, 0.74rem);
  cursor: pointer;
  aspect-ratio: 1;
  min-width: 0;
}
.wc-sq small { font-size: inherit; font-weight: 700; letter-spacing: -0.02em; }
.wc-sq.tw { background: #D84A32; color: #fff; }   /* deep coral */
.wc-sq.dw { background: #FF8A74; color: #fff; }   /* coral */
.wc-sq.tl { background: #9A918A; color: #fff; }   /* deeper grey */
.wc-sq.dl { background: #E6E2DE; color: #5E5650; } /* soft grey */
.wc-sq.star { background: #FFE9E3; color: var(--coral-ink); font-size: min(4vw, 2.6vh, 1.2rem); }
.wc-sq.hint { box-shadow: inset 0 0 0 3px #2E9E6A; }
.wc-sq:focus-visible, .wc-rack-slot:focus-visible { outline: 3px solid var(--coral-ink); outline-offset: -3px; }
.wc-tile {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 0;
  background: #FFD3C6;                       /* played letters: clearly coral, never lost on white */
  box-shadow: inset 0 0 0 0.5px #F0A898;
  color: #2B211B;
}
.wc-tile b { font-family: var(--sans); font-weight: 700; font-size: min(4vw, 2.6vh, 1.05rem); line-height: 1; }
.wc-tile i { position: absolute; right: 2px; bottom: 1px; font-style: normal; font-size: 0.55em; font-weight: 600; color: var(--ink-muted); }
.wc-tile.pending { background: #FFE0D7; box-shadow: inset 0 0 0 2px var(--coral); }
.wc-tile.mate { background: #DEDAD5; box-shadow: inset 0 0 0 0.5px #C9C3BC; }
.wc-rack { display: flex; justify-content: center; gap: 6px; margin: var(--s-3) auto 0; }
.wc-rack-slot {
  width: min(11vw, 48px); aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.wc-rack-slot .wc-tile { border-radius: 6px; background: #FFE9E3; box-shadow: inset 0 0 0 1.5px #F6B8A9; }
.wc-rack-slot .wc-tile b { font-size: min(6vw, 1.5rem); }
.wc-rack-slot .wc-tile i { font-size: 0.7rem; }
.wc-rack-slot.chosen .wc-tile { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--coral); }
.wc-rack-slot.used { visibility: hidden; }
.words-buttons { margin-top: var(--s-2); }
.words-buttons .btn { padding: 0.5rem 0.9rem; }
@media (max-width: 520px) {
  /* Two even rows of four on a phone (4 Oct) — they were spilling onto four
     ragged rows with Hint alone in the middle. */
  .words-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .words-buttons .btn { padding: 0.55rem 0.25rem; font-size: 0.88rem; line-height: 1.15; }
}
.words-lang-note { text-align: center; font-size: 0.875rem; color: var(--ink-muted); margin: var(--s-2) 0 0; }
.chess-wrap {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 8px;
  align-items: start;
  margin-top: var(--s-2);
}
.chess-board-wrap { position: relative; }
.chess-wrap .chess-board { margin-top: 0; }
.chess-taken { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 2rem; }
.chess-taken-label { font-size: 0.72rem; font-weight: 600; color: var(--ink-muted); text-align: center; line-height: 1.2; }
.chess-taken-pieces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
.chess-taken-pieces .chess-piece { font-size: 1.35rem; }
@media (max-width: 600px) {
  /* Phone: Mate's captures above the board, yours below. */
  .chess-wrap { grid-template-columns: 1fr; gap: 4px; }
  .chess-taken { flex-direction: row; justify-content: flex-start; min-height: 1.6rem; }
  .chess-taken.mate { order: -1; }
  .chess-taken:not(.mate) { order: 2; }
  .chess-taken-pieces { justify-content: flex-start; }
  .chess-taken-pieces .chess-piece { font-size: 1.15rem; }
  /* Nothing taken yet: no empty label row above and below the board. */
  .chess-taken.is-empty { display: none; }
  /* Undo · Tip · New game on one line. */
  .chess-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .chess-buttons .btn { padding: 0.55rem 0.3rem; white-space: nowrap; font-size: 0.92rem; }
}
.chess-tip-text {
  margin: var(--s-2) auto 0;
  max-width: 480px;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  background: #EAF6EF;
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

/* A cheer over the board — chess and Word Café (Sal, 4 Oct: "there should be
   something that says good job or wow great move"). Pops up, floats, fades. */
.game-cheer {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  color: #fff;
  background: var(--coral);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(31, 27, 22, 0.25);
  white-space: nowrap;
  opacity: 0;
}
.game-cheer.big { background: linear-gradient(135deg, #F5B700, #FF6A52); font-size: 1.6rem; }
/* 3.8s, was 1.9s — Sal, 4 Oct: "they flash too quickly, a person can't even
   read what they said". */
.game-cheer.show { animation: cheer-pop 3.8s ease-out forwards; }
@keyframes cheer-pop {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  14%  { transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, -56%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .game-cheer.show { animation: cheer-fade 3.8s linear forwards; }
  @keyframes cheer-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}
@media (max-width: 520px) { .game-cheer { white-space: normal; text-align: center; width: max-content; max-width: 90%; } }

/* Sign out sits top right of the room, alone in its own slot — 20 Sep 2026.
   Sal, twice: it must be far right, top or bottom, and never under Send. It had
   been living at the end of the microcopy line, and that line keeps growing
   (Invite a friend, Safety, Message Board, Play a game). Any row that grows
   will eventually wrap, and when it wrapped it landed directly beneath the
   Send button. So it no longer lives in a row. */
.chat-header { align-items: flex-start; }
.chat-header-main { flex: 1 1 auto; min-width: 0; }
.chat-header-meta {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}
.chat-header-meta .room-signout { margin-left: 0; }

/* ===================================================================
   THE BIN — a pull-out at the right edge of the Lobby, 20 Sep 2026

   Sal: "I wanted it outside the room on the main page once you log in
   like on the lobby page... it should come from the right hand side and
   it should be a pop out window."

   Not a box on the board (three stacked boxes read as three more rooms,
   and the Bin is not a room) and not a link inside a room. It lives at
   the edge — out of the way until somebody needs it, which is exactly
   the right weight for it.
   =================================================================== */
.bin-tab {
  /* REBUILT TWICE ON 4 Oct 2026. Sal's spec, in her words:
     "almost the same size, just a titch smaller… it should say something
     weighing on your mind, toss it in the bin, and to the right of that the
     garbage bin. It should slide out, flash three times, and then slide in
     to be about a third of the size so someone can click it anytime."
     So: a floating tab at the right-hand edge — never in the page, so it
     pushes nothing down (in the page it was 272 x 76px and pushed the Lobby
     down ~100px). At rest it is tucked, a third showing. On arrival it slides
     all the way out, flashes three times, and tucks back. Hover or keyboard
     focus slides it out again so it can always be read. */
  /* At rest only the 🗑️ shows — Sal, 4 Oct: at a quarter she could still see
     the first letters of the words. 46px is the bin plus its padding. */
  --bin-tucked: translateX(calc(100% - 46px));
  touch-action: manipulation;   /* lets a double-tap open it instead of zooming */
  position: fixed;
  right: 0;
  top: 38%;
  z-index: 900;                 /* under every dialog (1000+) */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 15rem;                 /* the old tab was 17rem — a titch smaller */
  padding: 0.6rem 0.9rem;
  text-align: left;
  border: 1px solid #FFD3C8;
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: #FFF6F3;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: -4px 4px 16px rgba(0,0,0,0.10);
  transform: var(--bin-tucked);
  transition: transform 0.35s ease, background 0.18s ease;
}
/* It stays tucked: no sliding out on hover — the mouse passing over it, or the
   page scrolling under the pointer, kept bringing it back out (Sal, 4 Oct).
   Keyboard focus still shows it, so it can be found without a mouse. */
.bin-tab:hover { background: #FFEFEA; }
.bin-tab:focus-visible { background: #FFEFEA; transform: translateX(0); }
.bin-tab strong { color: var(--coral-ink); display: block; }
.bin-tab-text { flex: 1 1 auto; min-width: 0; }
.bin-tab-ico { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }

/* Out, three slow flashes, back in. Sal, 4 Oct: "a very slow back and forth…
   literally a two second count between flashes, and then after 6 seconds it
   rolls back away". 0.8s to slide out, three 2-second fades (6s), then it
   rolls back over 1s — 7.8s in all. One animation so the order can't drift. */
@keyframes bin-arrive {
  0%     { transform: translateX(105%); opacity: 1; }
  10.3%  { transform: translateX(0);    opacity: 1; }
  23%    { opacity: 0.2; }
  35.9%  { opacity: 1; }
  48.7%  { opacity: 0.2; }
  61.5%  { opacity: 1; }
  74.4%  { opacity: 0.2; }
  87.2%  { transform: translateX(0);    opacity: 1; }
  100%   { transform: var(--bin-tucked); opacity: 1; }
}
.bin-tab.is-noticing { animation: bin-arrive 7.8s ease-in-out 1 both; }
.bin-tab.is-noticing:focus-visible { animation: none; transform: translateX(0); }

/* Reduced motion (Windows 11 often has "Animation effects" off): no sliding.
   It shows in full, flashes three times by fading only, then tucks without
   moving across the screen. */
@media (prefers-reduced-motion: reduce) {
  @keyframes bin-arrive {
    0%     { transform: translateX(0); opacity: 1; }
    12.8%  { opacity: 0.4; }
    25.6%  { opacity: 1; }
    38.4%  { opacity: 0.4; }
    51.2%  { opacity: 1; }
    64%    { opacity: 0.4; }
    76.9%  { opacity: 1; transform: translateX(0); }
    87.2%, 100% { transform: var(--bin-tucked); opacity: 1; }
  }
  .bin-tab { transition: background 0.18s ease; }
}

/* In a room it goes away entirely — the Bin belongs to the Lobby. */
body.in-room .bin-tab { display: none; }

/* The Bin opens as a drawer from the same side it was pulled from, so the
   movement matches the gesture. */
#bin-modal .onboard-card {
  margin-left: auto;
  margin-right: 0;
  border-radius: 16px 0 0 16px;
  max-width: 34rem;
}

@media (max-width: 520px) {
  /* Phone: the same tab, a little narrower, lower down so it sits clear of
     the greeting and the counter. */
  .bin-tab { top: auto; bottom: 22%; width: 13.5rem; font-size: 0.8rem; padding: 0.5rem 0.75rem; }
  #bin-modal .onboard-card { border-radius: 16px 16px 0 0; max-width: none; }
}

/* ---- A note from us, above the chat box (25 Sep 2026) ----
   js/chat.js paintNotice(). "We took down your last message" for the sender;
   "your feelings are real" plus one tap to take space for the person on the
   receiving end. A card in the flow of the room, never a pop-up (CLAUDE.md
   §10): it pushes the transcript up a little and blocks nothing. Warm, like
   .mod-care — neither note is an alarm. flex: none so the transcript, not
   the card, is what gives way on a short phone screen. */
.notice-card {
  flex: none;
  margin: .5rem 0 .25rem;
  padding: .75rem .9rem .8rem;
  border: 1px solid #FF6A52;
  background: rgba(255,106,82,.08);
  border-radius: 10px;
}
.notice-card-body { margin: 0 0 .5rem; font-size: var(--t-xs); line-height: 1.5; color: #4A4341; }
.notice-card-why  { margin: -.25rem 0 .5rem; font-size: var(--t-xs); line-height: 1.45; color: #7A7066; }
.notice-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
}
.notice-card-actions .btn { width: auto; padding: .5rem 1rem; font-size: var(--t-xs); }

@media (prefers-color-scheme: dark) {
  .notice-card { background: rgba(255,127,106,.10); border-color: #FF7F6A; }
  .notice-card-body { color: #CFC7C4; }
  .notice-card-why  { color: #A89F9B; }
}

/* ---------- "No sexual discussions" (25 Sep 2026) ----------
   js/chat.js nscTag / paintNscSetting / adultOkButton, index.html
   #onboard-nsc. The icon is never shown without the words (Sal). */

/* Your own name in the header opens your name, face and this setting. It
   looks exactly like the name it always was — just tappable. */
.user-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius);
}
.user-status-btn:hover { color: var(--coral-ink); }
.user-status-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* On the onboarding / profile card: one gentle offer, one button. */
.nsc-setting {
  margin-top: 1.1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
}
.nsc-offer,
.nsc-on-text {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.nsc-on-text { display: flex; gap: 0.5rem; align-items: flex-start; }
.nsc-on-text img { flex: none; margin-top: 0.1rem; }
.nsc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--coral);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--coral-ink);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.nsc-btn:hover { background: rgba(255, 106, 82, 0.08); }
.nsc-btn img { flex: none; }
#onboard-nsc-off-btn { min-height: 44px; }
.nsc-status:empty { display: none; }
.nsc-status { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--coral-ink); }

/* On a message: icon + words, right after the name. */
.chat-message .nsc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-right: 0.4rem;
  font-size: 0.72rem;
  color: var(--ink-muted);
  vertical-align: middle;
  white-space: nowrap;
}
.chat-message .nsc-tag img { width: 16px; height: 16px; flex: none; }
.chat-message.self .bubble .nsc-tag { color: rgba(255, 255, 255, 0.88); }

/* "Sexual discussions are okay with {name}" — only while your own marker is on.
   Quiet like its neighbours; coral once it is set, because that is worth
   seeing. */
.msg-adult-ok {
  text-align: start;
  border: 0;
  background: none;
  padding: 0 .15rem;
  margin-left: .4rem;
  font-size: var(--t-xs);
  line-height: 1;
  color: #9E9490;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.msg-adult-ok[hidden] { display: none; }
.chat-message:hover .msg-adult-ok,
.chat-message:focus-within .msg-adult-ok,
.msg-adult-ok:focus-visible { opacity: 1; }
.msg-adult-ok:hover, .msg-adult-ok:focus-visible { color: var(--coral); }
.msg-adult-ok.is-on { opacity: 1; color: var(--coral-ink); font-weight: 600; }
@media (hover: none) { .msg-adult-ok { opacity: .7; } .msg-adult-ok.is-on { opacity: 1; } }

/* The icon at the start of a "no sexual discussions" note. */
.notice-card-body .nsc-icon {
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  margin-inline-end: 0.4rem;
}

@media (prefers-color-scheme: dark) {
  .nsc-setting { border-color: rgba(255, 255, 255, 0.12); }
}

/* The name-and-face card grew by the "No sexual discussions" block. On a short
   phone it must scroll rather than lose its top off the screen. */
#onboard-modal .onboard-card {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

/* ===================================================================
   LOBBY + ROOM, 5 Oct 2026 (Sal)
   =================================================================== */
/* Room name and its line on one line, on anything wider than a phone. */
@media (min-width: 721px) {
  .nbhd-row-main { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.85rem; }
  .nbhd-row-main > .nbhd-row-name { flex: none; }
  .nbhd-row-main > .nbhd-row-invite { display: inline; flex: 0 1 auto; width: auto; margin: 0; }
}
/* "Glad you made it 🧡" flashes once on arrival, then stays. */
.nbhd-row-status.is-flash { animation: welcome-flash 3.2s ease-in-out; }
@keyframes welcome-flash {
  0%, 100% { opacity: 1; transform: none; }
  12%, 37%, 62% { opacity: 0.25; transform: scale(1.08); }
  25%, 50%, 75% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .nbhd-row-status.is-flash { animation: none; } }

/* Message size steps with the crowd: 1–3 large, 4–8 medium, 9+ compact
   (the compact step is the room's existing look). */
.room-view[data-crowd="s"] .chat-message .text { font-size: 1.125rem; line-height: 1.45; }
.room-view[data-crowd="s"] .chat-message .who { font-size: 0.9rem; }
.room-view[data-crowd="s"] .chat-message .bubble { padding: 0.55rem 0.9rem; }
.room-view[data-crowd="s"] .message { margin-bottom: 0.6rem; }
.room-view[data-crowd="s"] .chat-message .avatar { width: 34px; height: 34px; }
.room-view[data-crowd="m"] .chat-message .text { font-size: 1rem; line-height: 1.4; }
.room-view[data-crowd="m"] .chat-message .bubble { padding: 0.42rem 0.75rem; }
.room-view[data-crowd="m"] .message { margin-bottom: 0.4rem; }
.chat-message .text, .chat-message .bubble { transition: font-size 0.4s ease, padding 0.4s ease; }

/* "Who's here" — beside the messages once 9 or more are in, laptop only. */
.whos-here { display: none; }
@media (min-width: 980px) {
  .room-view[data-crowd="l"] { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 1.25rem; align-items: start; }
  .room-view[data-crowd="l"] .whos-here {
    display: block; position: sticky; top: 130px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 1rem; max-height: 70vh; overflow-y: auto;
  }
}
.whos-here-h { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.6rem; }
.whos-here-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.whos-here-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.whos-here-list .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; background: var(--coral); }
.whos-here-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bin arrival, slower (Sal, 5 Oct: "too fast — a slow fade in, a slow fade,
   then it slides back"). 1s out, two slow 5s fades (2.5s down, 2.5s up),
   1.2s back into place — 12.2s. Shown once per visit (js/chat.js). */
@keyframes bin-arrive-slow {
  0%     { transform: translateX(105%); opacity: 1; }
  8.2%   { transform: translateX(0);    opacity: 1; }
  28.7%  { opacity: 0.25; }
  49.2%  { opacity: 1; }
  69.7%  { opacity: 0.25; }
  90.2%  { transform: translateX(0);    opacity: 1; }
  100%   { transform: var(--bin-tucked); opacity: 1; }
}
.bin-tab.is-noticing { animation: bin-arrive-slow 12.2s ease-in-out 1 both; }
@media (prefers-reduced-motion: reduce) {
  @keyframes bin-arrive-slow {
    0%, 8.2% { transform: translateX(0); opacity: 1; }
    28.7%  { opacity: 0.4; }
    49.2%  { opacity: 1; }
    69.7%  { opacity: 0.4; }
    90.2%  { transform: translateX(0); opacity: 1; }
    100%   { transform: var(--bin-tucked); opacity: 1; }
  }
}
.nbhd-row-ico-img { width: 1.25em; height: 1.25em; display: block; }
/* Sal, 5 Oct: white circle behind the butch-femme symbol so its red and black
   read clearly (and no dulling filter on it); the Matters of the Heart heart
   in coral. */
.nbhd-row[data-room="butch-femme"] .nbhd-row-ico { background: #fff; box-shadow: 0 0 0 1px var(--line); filter: none; }
.nbhd-row-ico-img { width: 1.15em; height: 1.15em; }

/* Sal, 16 Oct: once you log in on a phone, everything at the top is crowded
   and the name is too big. Measured at 390x844: the SA circle, "Sylvia" and
   Sign out sat in the corner from 241px to 379px and the circle ran onto the
   Lüba heart (the brand ends at 260px); a longer name, or Your People and
   Space showing, ran right under it. So on a phone the account gets its own
   slim line along the top, right-aligned, smaller — nothing to collide with. */
.user-status-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  body.authed header .nbhd-account {
    position: static;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.2rem 0.7rem;
    /* Clear of the language picker, which stays top-left (12px + 96px). */
    padding: 0.35rem 0.75rem 0 7.5rem;
  }
  header .nbhd-account .user-status { font-size: 0.75rem; }
  header .nbhd-account .linkish { font-size: 0.75rem; }
  .user-status-btn { gap: 0.35rem; max-width: 7rem; }
  header .nbhd-account .user-status .avatar-chip,
  header .nbhd-account .user-status img.avatar-chip { width: 22px; height: 22px; font-size: 0.6rem; flex: none; }
}

/* "Here: 3" is back (Sal, 16 Oct) — on a phone it opened a 72px band of its
   own (welcome band 195px, tiles 267px, measured at 390x844). Pulled up into
   the gap under the welcome band so it costs ~8px, not ~48px. */
@media (max-width: 520px) {
  .nbhd-head:has(#lobby-count:not([hidden])) { margin: -1.1rem 0 0.5rem; }
  .nbhd-head .lobby-count { margin: 0 0 0 auto; }
}

/* ---- Edit · Delete on your own words (16 Oct 2026) ----
   js/chat.js mineControls. Quiet like "Tell us" on other people's messages:
   shown on hover or focus, faintly always on a touch screen. White on your
   own coral bubble; muted ink on the Message Board. */
.msg-mine { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; margin-left: 0.3rem; }
.msg-mine-btn {
  border: 0; background: none; padding: 0.1rem 0.15rem; margin: 0;
  font: inherit; font-size: var(--t-xs); line-height: 1.2; color: #8A807C;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.msg-mine-btn:hover, .msg-mine-btn:focus-visible { color: var(--coral-ink); }
.msg-mine-btn.is-yes { color: var(--coral-ink); font-weight: 600; }
.msg-mine-ask, .msg-mine-status { font-size: var(--t-xs); }
.msg-mine-status:empty { display: none; }
.msg-edited { font-size: var(--t-xs); opacity: 0.75; margin-left: 0.3rem; }
.msg-mine-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; width: 100%; margin-top: 0.3rem; }
.msg-mine-area { flex: 1 1 100%; min-height: 3.2rem; color: var(--ink); background: #fff; }
.msg-mine-save { width: auto; padding: 0.35rem 0.9rem; font-size: var(--t-xs); }

.chat-message .msg-mine { opacity: 0; transition: opacity .15s ease; }
.chat-message:hover .msg-mine,
.chat-message:focus-within .msg-mine,
.chat-message.mine-editing .msg-mine { opacity: 1; }
@media (hover: none) { .chat-message .msg-mine { opacity: .8; } }

.chat-message.self .bubble .msg-mine-btn,
.chat-message.self .bubble .msg-mine-ask,
.chat-message.self .bubble .msg-mine-status { color: rgba(255, 255, 255, 0.92); }
.chat-message.self .bubble .msg-mine-btn.is-yes { color: #fff; }
.chat-message.self .bubble .msg-mine-save { background: #fff; color: var(--coral-ink); border-color: #fff; }

#ask-thread-mine { margin: 0.1rem 0 0.4rem; }
#ask-thread-mine .msg-mine, .ask-reply .msg-mine { margin-left: 0; }
/* Mid-question or with something to say, the controls stay in view. */
.chat-message .msg-mine:has(.msg-mine-ask),
.chat-message .msg-mine:has(.msg-mine-status:not(:empty)) { opacity: 1; }