/* room.css: every style of the room pages (room/, room/team/, room/admin/, room/claim/).
   Loaded after site.css, so it reuses the site's tokens (--bg --surface --paper --border --hover
   --accent --accent-light --ink --green --fg --fg2 --fg3 --red), fonts, .btn, .form, .card,
   .icon, .link-arrow and .sr-only, and adds only what a working tool needs.

   Direction: "signal to sorted" applied to a tool. Calm paper surfaces, 1px hairlines instead of
   boxes, the serif for what we say (titles, topics), Inter for what you read and type, mono only
   for small labels, times and status pills. Vermilion marks only actions, the unread bar and the
   current item. Nothing starts hidden (no .reveal) and motion is limited to one fade on a new
   message, removed under reduced motion.

   CONTENTS
   1. Switches        room host, JavaScript, mail / names / notify lines
   2. Shared parts    avatar, status pill, thread, composer, confirmation, warning, banner
   3. The room        the chat: bar, member bar, frame, people, head and menus, thread, composer,
                      email step, cards; 3b. Who sees what (room/privacy/)
   4. Team inbox      gate, app shell, bar, segmented views, rows, conversation, composer
   5. Owner admin     settings, profile rows, badges, edit form, invite panel
   6. Claim page
   7. Touch, motion, print */

/* ==========================================================================
   1. SWITCHES
   ========================================================================== */
[hidden] { display: none !important; }
/* Off a room host (or before the server filled the attribute) only the fixed link shows. */
body:not([data-room-host="1"]) [data-room-only] { display: none !important; }
body[data-room-host="1"] [data-elsewhere] { display: none !important; }
/* Scripts off (or room.js failed): the fallback shows, the controls do not. */
html:not(.js) [data-js-only] { display: none !important; }
html.js [data-nojs] { display: none !important; }
/* Lines that depend on a server setting. While an attribute is still "?", the "0" line shows. */
body:not([data-room-mail="1"]) [data-mail="on"], body[data-room-mail="1"] [data-mail="off"],
body:not([data-room-names="1"]) [data-names="1"], body[data-room-names="1"] [data-names="0"],
body:not([data-room-notify="1"]) [data-notify="1"], body[data-room-notify="1"] [data-notify="0"] { display: none; }

/* Room pages keep a 16px side gutter on small phones (the site's .wrap has 24px). */
@media (max-width: 400px) { .wrap { padding-inline: 16px; } }

/* Text a person typed: isolated, so a right-to-left name or topic cannot reorder the label next to it. */
[dir="auto"] { unicode-bidi: isolate; }

/* ==========================================================================
   2. SHARED PARTS
   ========================================================================== */

/* ---- avatar: initials in a circle; everyone gets the same colour ---------- */
.room-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-light); color: var(--ink);
  font: 600 12.5px/1 var(--font-sans); letter-spacing: .02em; user-select: none;
}
.room-avatar svg { width: 18px; height: 18px; display: block; }
/* No "online" dot: presence is said in words beside the name, and nothing in the list moves. */
/* someone away, or not active for a week or more (or not yet): the same circle, greyed a little */
.room-avatar.is-quiet, .is-quiet > .room-avatar {
  background: color-mix(in srgb, var(--fg3) 13%, var(--paper));
  /* --fg2 with a little --fg: the initials keep AA (4.5:1) on the greyed circle, and look as grey */
  color: color-mix(in srgb, var(--fg2) 88%, var(--fg));
}
/* "joining": the Venn's dashed ring with a small accent plus, no fill */
.room-avatar--next {
  background: none; color: var(--accent);
  border: 1.3px dashed color-mix(in srgb, var(--accent) 70%, transparent);
}
.room-avatar--next::before {
  content: ''; width: 11px; height: 11px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
/* the visitor: paper with the site's person icon */
.room-avatar--you { background: var(--paper); color: var(--fg3); box-shadow: inset 0 0 0 1px var(--border); }
.room-avatar--you svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* the Triage team while reply names are off: the three bars of the brand mark, no initials */
.room-avatar--team svg { fill: var(--ink); }
.room-avatar--sm { width: 28px; height: 28px; font-size: 10.5px; }
/* three letters ("CLN"): a smaller size at every size of circle, so they sit inside it with room */
.room-avatar.is-three { font-size: 10.5px; letter-spacing: 0; }
.room-avatar--sm.is-three { font-size: 8.5px; }

/* ---- status pill ------------------------------------------------------------ */
.room-status {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 9px; border-radius: 999px;
  font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.room-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.room-status--new { background: var(--accent-light); color: var(--ink); }
.room-status--open, .room-status--replied { background: var(--paper); color: var(--fg2); box-shadow: inset 0 0 0 1px var(--border); }
.room-status--waiting { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.room-status--closed { background: transparent; color: var(--fg3); box-shadow: inset 0 0 0 1px var(--border); }

/* ---- thread: Slack-like rows, no bubbles ----------------------------------- */
.room-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.room-msg {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px;
  padding: 10px 12px; border-radius: 10px; transition: background-color .15s;
}
/* Row hovers only where a pointer hovers: on a touch screen the last tapped row would stay grey. */
@media (hover: hover) { .room-msg:hover { background: color-mix(in srgb, var(--hover) 55%, transparent); } }
.room-msg-main { min-width: 0; grid-column: 2; }
.room-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 2px; line-height: 1.35; }
.room-msg-name { font-size: 14px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.room-msg-head time, .room-msg-gutter { font: 400 11px/1.2 var(--font-mono); letter-spacing: .01em; color: var(--fg3); white-space: nowrap; }
/* a visitor line from a browser that had only typed the address: said in the head, with a dashed
   avatar ring, so it never reads as the address owner's own words */
.room-msg-flag { font: 400 10.5px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--fg2); }
.room-msg-head .team-tag { align-self: center; }
.room-avatar--elsewhere { box-shadow: none; border: 1.3px dashed color-mix(in srgb, var(--fg3) 70%, transparent); }
.room-elsewhere-note { margin: 16px 0 0; }
.room-elsewhere-note p { margin: 0; }
.room-elsewhere-note .room-confirm { background: var(--surface); }
.room-msg-body {
  margin: 0; max-width: 68ch; font: 400 15px/1.6 var(--font-sans); color: var(--fg);
  white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: isolate;
}
/* same sender within five minutes: no avatar or head; the time shows in the gutter on hover */
.room-msg.is-cont { padding-top: 2px; }
.room-msg-gutter { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; padding-top: 5px; font-size: 10px; opacity: 0; transition: opacity .15s; }
.room-msg.is-cont:focus-within .room-msg-gutter { opacity: 1; }
@media (hover: hover) { .room-msg.is-cont:hover .room-msg-gutter { opacity: 1; } }
.room-msg + .room-msg:not(.is-cont) { margin-top: 4px; }
/* a new message arrives: the row warms, then cools over 1.6s */
@keyframes room-new { from { background-color: var(--accent-light); } to { background-color: transparent; } }
.room-msg.is-new { animation: room-new 1.6s var(--ease) both; }
/* day separator: a centered mono label on a hairline */
.room-day { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; }
.room-day::before, .room-day::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.room-day > span {
  padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border); background: var(--surface);
  font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3);
}
.room-thread > .room-day:first-child { margin-top: 0; }
/* "New": where the replies this conversation had not shown before begin (room.js appendRows).
   The day divider's shape, in the accent: quiet, and found at a glance. */
.room-day--new::before, .room-day--new::after { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.room-day--new > span { background: var(--accent-light); box-shadow: none; color: var(--ink); }
/* status lines: centered, quiet, no avatar */
.room-msg--status {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 8px 12px; text-align: center; font: 400 10.5px/1.5 var(--font-mono); letter-spacing: .03em; color: var(--fg3);
}
.room-msg--status:hover { background: none; }
.room-msg--status time { font-size: 10px; opacity: .85; }
/* phones: the sentence may wrap, so the time gets a line of its own under it (never left alone
   on a second line by accident) */
@media (max-width: 640px) {
  .room-msg--status { display: block; text-wrap: balance; }
  .room-msg--status time { display: block; margin-top: 1px; }
}
/* what the visitor ticked in the check, at the top of the first item */
.room-msg-problems { margin: 4px 0 8px; padding: 10px 14px 11px; border-radius: 10px; background: var(--paper); max-width: 68ch; }
.room-msg-problems-k { margin: 0 0 6px; font: 500 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.room-msg-problems ul, .room-dots, .claim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.room-msg-problems li, .room-dots li, .claim-list li { position: relative; padding-left: 16px; }
.room-msg-problems li { font-size: 14px; line-height: 1.5; color: var(--fg2); }
.room-msg-problems li::before, .room-dots li::before, .claim-list li::before {
  content: ''; position: absolute; left: 1px; top: .64em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ---- composer ------------------------------------------------------------ */
.room-composer {
  position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .15s, box-shadow .2s, background-color .15s;
}
.room-composer:hover { border-color: color-mix(in srgb, var(--fg) 22%, var(--border)); }
.room-composer:focus-within {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.room-composer textarea {
  display: block; width: 100%; min-height: calc(2 * 1.55em + 24px); max-height: calc(10 * 1.55em + 24px);
  padding: 12px 14px 4px; border: 0; border-radius: 12px 12px 0 0; background: transparent; resize: none; outline: none;
  font: 400 15px/1.55 var(--font-sans); color: var(--fg); overflow-y: auto;
}
.room-composer textarea::placeholder { color: var(--fg3); opacity: .85; }
.room-composer-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 6px 8px 8px 14px; }
.room-composer-hint { font: 400 10.5px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--fg3); }
.room-composer-side { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.room-composer-count { font: 400 10.5px/1 var(--font-mono); color: var(--fg3); }
@media (hover: none) and (pointer: coarse) { .room-kbd-hint { display: none; } }
.room-composer-count.is-over { color: var(--red); }
kbd {
  display: inline-block; min-width: 1.6em; padding: 2px 5px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; background: var(--surface); text-align: center;
  font: 500 10px/1.2 var(--font-mono); color: var(--fg2);
}

/* ---- inline confirmation: never window.confirm ---------------------------- */
.room-confirm {
  margin: 12px 0 0; padding: 14px 16px; border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  background: var(--paper); border-left: 2px solid var(--red);
}
.room-confirm-q { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--fg); outline: none; }
.room-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.room-danger { --btn-fg: var(--red); }
.btn.room-danger:hover { --btn-ring: color-mix(in srgb, var(--red) 55%, var(--border)); }

/* ---- warning, banner, notes -------------------------------------------------- */
.room-warn {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  border-left: 2px solid var(--accent); background: var(--paper); font-size: 13px; line-height: 1.5; color: var(--fg2);
}
.room-banner {
  margin: 0 0 16px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--paper); font-size: 13px; line-height: 1.5; color: var(--fg2);
}
.room-devlink {
  margin: 14px 0 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  font: 400 12px/1.5 var(--font-mono); color: var(--fg2); overflow-wrap: anywhere;
}
.room-devlink a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.room-msgline { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg2); }
.room-msgline:empty { display: none; }
.room-msgline.ok { color: var(--green); }
.room-msgline.err { color: var(--red); }
/* a button that reads as a link */
.room-textbtn {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}
.room-textbtn:hover { text-decoration-color: currentColor; }
.room-textbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* skeleton lines while loading (only after 200ms) */
.room-skeleton { display: grid; gap: 10px; padding: 8px 0; }
.room-skeleton .mock-line { height: 9px; }
.room-skeleton .mock-line + .mock-line { margin-top: 0; }

/* Focus inside the app shells stays inside their rounded clip. */
.room-shell :focus-visible, .team-shell :focus-visible { outline-offset: 2px; }

/* ==========================================================================
   3. THE ROOM (visitors): the chat itself
   ========================================================================== */

/* ---- off a room host ---- */
.room-elsewhere { padding-block: clamp(40px, 8vw, 96px); }
.room-elsewhere-card { box-shadow: var(--lift-lg); display: grid; gap: 14px; justify-items: start; }
.room-elsewhere-title { font-size: 1.6rem; line-height: 1.2; }
.room-elsewhere-card p:not(.eyebrow) { color: var(--fg2); font-size: 15px; }

/* ---- the app: as tall as the screen under the site header, so the composer sits at the bottom
   of the conversation and only the thread scrolls. The page scrolls on to the footer below. ---- */
.room-app { display: flex; flex-direction: column; height: calc(100dvh - var(--header-h, 60px)); min-height: 600px; }
/* without scripts there is no chat to hold in a frame: the fallback and the people flow as a page */
html:not(.js) .room-app { height: auto; min-height: 0; }
/* each .wrap keeps its full column (auto side margins in a flex column would shrink it to its content) */
.room-app > .wrap { width: 100%; }
.room-bar-wrap, [data-memberbar-wrap] { flex: none; }
.room-frame-wrap { flex: 1 1 auto; min-height: 0; display: flex; padding-bottom: 24px; }
html:not(.js) .room-frame-wrap { padding-bottom: clamp(56px, 8vw, 96px); }

/* ---- the slim bar: the room's name, and one quiet line ---- */
.room-bar { display: flex; align-items: center; gap: 14px; padding: 18px 0 16px; }
.room-bar-mark { width: 42px; height: 42px; }
.room-bar-mark svg { width: 21px; height: 21px; }
.room-bar-text { flex: 1 1 auto; min-width: 0; }
.room-bar-title { margin: 0; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -.014em; color: var(--fg); }
.room-bar-sub { margin: 3px 0 0; max-width: 72ch; font-size: 13.5px; line-height: 1.5; color: var(--fg2); }

/* phones and tablets: the people open from a button in the bar (the first faces, and "People") */
.room-people-btn { display: none; }
.room-people-btn {
  flex: none; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 8px;
  border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer;
  font: 500 13px/1 var(--font-sans); color: var(--fg2); transition: background-color .15s, box-shadow .15s;
}
.room-people-btn:hover { background: var(--hover); color: var(--fg); }
.room-people-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.room-people-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--fg); }
.room-faces { display: flex; padding-left: 3px; }
/* overlap 3px, as the faces row always did: no second letter under the next ring */
.room-faces .room-avatar {
  width: 28px; height: 28px; margin-left: -3px; font-size: 10px; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--surface);
}
.room-faces .room-avatar.is-three { font-size: 8.5px; letter-spacing: -.01em; }
.room-people-btn:hover .room-faces .room-avatar { box-shadow: 0 0 0 2px var(--hover); }
.room-faces-icon { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; }
.room-faces-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.room-people-btn-caret {
  width: 6px; height: 6px; margin: -2px 0 0 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}

/* ---- member bar (signed-in members only) ---- */
.room-memberbar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--paper);
  font-size: 13.5px; line-height: 1.5; color: var(--fg2);
}
.room-memberbar-text { margin: 0; min-width: 0; }
.room-memberbar-text strong { color: var(--fg); font-weight: 600; }
.room-memberbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* no margin of its own: when the row wraps, the link starts on the same edge as the buttons above */
.room-memberbar .link-arrow { font-size: 13px; }
.room-memberbar .btn-sm { min-height: 32px; }
/* the bar's quiet buttons sit on --surface; the primary button of the away menu keeps its colour */
.room-memberbar .btn-ghost.btn-sm { --btn-bg: var(--surface); }
.room-memberbar .btn-ghost.btn-sm:hover { --btn-bg: var(--hover); }

/* ---- away: "I’m away" (a small menu with the last day) and, while away, the pill and "I’m back" ---- */
.room-away { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.room-away-menu-wrap { position: relative; }
.room-away-menu-wrap > summary { list-style: none; cursor: pointer; }
.room-away-menu-wrap > summary::-webkit-details-marker { display: none; }
.room-away-menu-wrap[open] > summary .room-more-caret { margin-top: 3px; transform: rotate(-135deg); }
.room-away-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 320px; max-width: calc(100vw - 32px); padding: 16px;
  border-radius: 12px; background: var(--surface); box-shadow: var(--lift-lg); text-align: left;
}
/* The member bar: "I’m away" is always the first action, so the menu opens rightward from its left
   edge. (Anchored on the right, it opened off the left edge of the screen whenever the actions
   wrapped onto their own line.) The actions after it are wider than the menu, so it stays in the bar. */
.room-memberbar .room-away-menu { left: 0; right: auto; }
.room-away-form { display: grid; gap: 10px; }
.room-away-field { display: grid; gap: 6px; }
.room-away-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.room-away-field .input { min-height: 40px; }
.room-away-form .form-hint { margin: 0; font-size: 12.5px; line-height: 1.5; }
.room-away-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.room-away-form .room-msgline:empty { display: none; }
.room-away-form .room-msgline { margin: 0; }
/* a status, not a control: flat (no border, unlike the buttons beside it), like the admin's badge */
.room-away-pill {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg3) 10%, var(--paper));
  font: 400 11px/1.2 var(--font-mono); color: var(--fg2); white-space: nowrap;
}
.room-away .room-msgline:empty { display: none; }
/* a small chevron drawn with two borders: down while closed, up while open */
.room-away-menu-wrap > summary .room-more-caret {
  display: inline-block; width: 6px; height: 6px; margin: -3px 2px 0 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s;
}
/* phones: the bar wraps, so the menu opens under the whole bar, as wide as it */
@media (max-width: 640px) {
  .room-memberbar .room-away-menu-wrap, .team-bar .room-away-menu-wrap { position: static; }
  .room-memberbar .room-away-menu, .team-bar .room-away-menu { left: 0; right: 0; width: auto; }
}

/* ---- the frame: the people beside the conversation ---- */
.room-shell {
  position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 296px minmax(0, 1fr);
  background: var(--surface); border-radius: calc(var(--radius) + 4px); box-shadow: var(--lift-lg); overflow: clip;
}
/* wide screens: room for a full name and its time on one line */
@media (min-width: 1180px) { .room-shell { grid-template-columns: 336px minmax(0, 1fr); } }
/* a size container: the list's rows follow the column's own width (the away date, below) */
.room-people {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--paper); border-right: 1px solid var(--border); --ring: var(--paper); container: people / inline-size;
}
.room-people .room-col {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 18px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.room-people-back { display: none; }
.room-main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
/* the vermilion tab on the top edge of the conversation (the .closing-panel recipe) */
.room-main::before { content: ''; position: absolute; top: 0; left: 24px; z-index: 1; width: 36px; height: 3px; border-radius: 0 0 2px 2px; background: var(--accent); }
/* a soft fade at the bottom edge while the people column has more below (room.js sets .is-more) */
.room-col.is-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }

/* ---- the people ---- */
.room-col-title { margin: 0 0 14px; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.room-people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.room-person { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 8px 6px; border-radius: 8px; cursor: default; }
.room-person-text { display: flex; flex-direction: column; min-width: 0; }
/* the name, and on its right the time since that person was last active (or "Away"), on the
   name's first baseline. Two columns: the time always starts on the name's first line, at the right
   edge, so the times read as one column down the list. When both do not fit, the name wraps between
   words (its column is never narrower than its longest word), and a dated "Away until" can take a
   second line at the right, with the date kept whole ("Away until" / "3 Jan 2027"). */
.room-person-head { display: grid; grid-template-columns: minmax(min-content, 1fr) auto; align-items: baseline; column-gap: 10px; min-width: 0; }
/* plain wrapping (site.css gives every li "pretty"): a name that fits stays whole and the "You" pill
   takes the next line, where "pretty" would break the name to avoid a lone pill ("Cosmin L." /
   "Neagu You") */
.room-person-name { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fg); overflow-wrap: break-word; text-wrap: wrap; }
.room-person-role { font-size: 12.5px; line-height: 1.4; color: var(--fg2); }
.room-person-tags { font: 400 10.5px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--fg3); }
.room-person-seen { justify-self: end; font: 400 10.5px/1.35 var(--font-mono); letter-spacing: 0; color: var(--fg3); white-space: nowrap; text-align: right; }
.room-person.is-active .room-person-seen { color: var(--green); }
/* "Away" and "Away until 12 Oct", in place of the time: the same quiet words, a shade darker */
.room-person-away { color: var(--fg2); white-space: normal; }
.room-person-date { white-space: nowrap; }
/* the 296px desktop column (and phones under about 330px): "Away until" and the date take two
   lines at the right, so the name keeps its own line ("Victor Ionescu" whole, not "Victor" /
   "Ionescu" beside "Away until 12 Oct") */
@container people (max-width: 310px) {
  .room-person-date { display: block; }
}
/* away, or not active for a week or more, or not yet: greyed a little, the name still reads at AA
   (--fg2 on the column) and keeps its full size. Hiding one's activity is not greyed: the room
   does not know, so it suggests nothing. */
.room-person.is-quiet .room-person-name { color: var(--fg2); font-weight: 500; }
.room-you {
  display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 999px; vertical-align: 1px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2);
}
.room-people-more { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; padding: 8px 6px; font-size: 12.5px; line-height: 1.45; color: var(--fg3); }
.room-empty { margin: 0; padding: 8px 6px; font-size: 13.5px; line-height: 1.55; color: var(--fg3); }
.room-people-foot { margin: 16px 0 0; padding: 14px 6px 0; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.55; color: var(--fg3); }

/* ---- the conversation: head, menu slot and notices, the thread, the composer ---- */
.room-chat { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.room-chat.is-card { display: flex; flex-direction: column; }
.room-chat-head { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px 12px 24px; border-bottom: 1px solid var(--border); }
.room-chat-titles { flex: 1 1 auto; min-width: 0; }
.room-convo-title {
  margin: 0; font-family: var(--font-serif); font-size: 1.22rem; font-weight: 500; line-height: 1.25; letter-spacing: -.012em;
  color: var(--fg); overflow-wrap: anywhere; outline: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.room-chat-state { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; }
/* the status, said quietly: a small mark and a few words */
.room-state { display: inline-flex; align-items: center; gap: 7px; color: var(--fg2); }
.room-state::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fg3); }
.room-state--replied::before { background: var(--green); box-shadow: none; }
.room-state--closed { color: var(--fg3); }
.room-state--closed::before { background: color-mix(in srgb, var(--fg3) 45%, transparent); box-shadow: none; }

/* the head's buttons: the conversations list, a new conversation, the menu */
.room-chat-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.room-menu { position: relative; }
.room-head-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px;
  border: 0; border-radius: 9px; background: none; cursor: pointer; list-style: none; white-space: nowrap;
  font: 500 13px/1 var(--font-sans); color: var(--fg2); transition: background-color .15s, color .15s;
}
.room-head-btn::-webkit-details-marker { display: none; }
.room-head-btn:hover, .room-menu[open] > .room-head-btn { background: var(--hover); color: var(--fg); }
.room-head-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.room-head-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.room-more > .room-head-btn { padding: 0 9px; }
.room-more > .room-head-btn svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
/* a reply in another conversation: one quiet dot on the conversations button */
.room-head-dot { position: absolute; top: 7px; left: 23px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.room-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 260px; max-width: calc(100vw - 32px);
  max-height: min(60vh, 440px); overflow: auto; padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: var(--lift-lg);
}
.room-menu-pop > button {
  display: flex; align-items: center; min-height: 38px; padding: 0 12px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: 500 13.5px/1.25 var(--font-sans); color: var(--fg); text-align: left; white-space: nowrap;
}
.room-menu-pop > button:hover, .room-menu-pop > button:focus-visible { background: var(--hover); }
.room-menu-pop > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.room-menu-pop > button.is-danger { color: var(--red); }
.room-menu-k { margin: 6px 10px 6px; font: 500 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.room-menu-note { max-width: 250px; margin: 4px 12px 6px; font-size: 12.5px; line-height: 1.5; color: var(--fg3); }
.room-more-sep { margin: 5px 6px; border: 0; border-top: 1px solid var(--border); }
/* the conversations list: each one's topic, then how it stands and when the last message came */
.room-switch .room-menu-pop { width: 380px; }
.room-convos-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.room-convo-btn {
  position: relative; display: grid; gap: 3px; width: 100%; min-height: 52px; padding: 8px 12px 9px 14px;
  border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--fg);
}
.room-convo-btn:hover, .room-convo-btn:focus-visible { background: var(--hover); }
.room-convo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.room-convo-btn[aria-current="true"] { background: color-mix(in srgb, var(--hover) 70%, transparent); }
.room-convo-topic { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; line-height: 1.35; }
.room-convo-meta { font-size: 12px; line-height: 1.4; color: var(--fg3); }
.room-convo-meta .room-state { color: var(--fg2); }
.room-convo-meta .room-state::before { width: 6px; height: 6px; }
.room-convo-btn.is-unread::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--accent); }
.room-convo-btn.is-unread .room-convo-topic { font-weight: 650; }

/* the slot under the head: what the menu opened, and what it did */
.room-chat-panel { padding: 0 24px; }
.room-chat-panelslot > * { margin: 12px 0; }
.room-chat-panel > .room-msgline { margin: 12px 0; }
.room-chat-panel > .room-msgline:empty { display: none; }
.room-chat-panel .room-devlink { margin: 0 0 12px; }
.room-chat-panelslot .room-confirm { margin: 12px 0; }
.room-panel { padding: 14px 16px 16px; border-radius: 12px; background: var(--paper); }
.room-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.room-panel-k { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg2); }
.room-panel-close {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px 0 0;
  border: 0; border-radius: 8px; background: none; color: var(--fg2); cursor: pointer;
}
.room-panel-close:hover { background: var(--hover); color: var(--fg); }
.room-panel-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.room-return-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 12px; }
.room-return-form .form-field { flex: 1 1 240px; }
.room-return-form .btn { min-height: 48px; }
/* notices: a lost connection, what just happened, a link for another address, lines from elsewhere */
.room-chat-notices { padding: 0 24px; }
.room-chat-notices > :not([hidden]) { margin: 12px 0 0; }
.room-chat-notices > :last-child:not([hidden]) { margin-bottom: 0; }

/* the thread: it scrolls; a short one sits at the bottom, just above the composer */
.room-chat-scroll {
  position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  padding: 20px 24px 18px; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.room-chat-scroll > :first-child, .room-chat-scroll > .room-pending { margin-top: auto; }
.room-convo-thread { min-width: 0; }

/* the empty thread: one calm line */
.room-chat-scroll > .room-empty-state { margin: auto; }
.room-empty-state { display: grid; justify-items: center; gap: 12px; max-width: 42ch; padding: 24px 8px; text-align: center; }
.room-avatar--lg { width: 52px; height: 52px; }
.room-avatar--lg svg { width: 25px; height: 25px; }
.room-empty-line { margin: 2px 0 0; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 450; line-height: 1.35; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.room-empty-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fg3); text-wrap: balance; }

/* chat rows: the visitor's lines on the right, the team's replies on the left */
.room-thread--chat .room-msg { padding: 0; border-radius: 0; transition: none; }
@media (hover: hover) { .room-thread--chat .room-msg:hover { background: none; } }
.room-thread--chat .room-msg + .room-msg:not(.is-cont) { margin-top: 16px; }
.room-thread--chat .room-msg.is-cont { margin-top: 3px; padding-top: 0; }
.room-thread--chat .room-day { margin: 20px 0 14px; }
.room-thread--chat > .room-day:first-child { margin-top: 0; }
.room-thread--chat .room-msg--status { margin: 12px 0; padding: 0 12px; }
.room-msg--team { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.room-msg--team > .room-avatar { width: 32px; height: 32px; font-size: 11.5px; }
.room-msg--team > .room-avatar.is-three { font-size: 9.5px; }
.room-msg--team > .room-avatar svg { width: 16px; height: 16px; }
.room-msg--team .room-msg-main { justify-self: start; max-width: min(84%, 640px); }
.room-msg--me { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.room-msg--me .room-msg-main { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; max-width: min(78%, 600px); }
.room-thread--chat .room-msg-head { margin: 0 3px 5px; gap: 3px 8px; }
.room-thread--chat .room-msg-name { font-size: 13.5px; }
.room-msg--me .room-msg-head { justify-content: flex-end; }
/* the team's bubble on --hover: it reads in the dark scheme too, where --paper is darker than the chat */
.room-bubble { min-width: 0; max-width: 100%; padding: 10px 15px 11px; border-radius: 5px 16px 16px 16px; background: var(--hover); }
.room-msg--me .room-bubble { border-radius: 16px 5px 16px 16px; background: var(--accent-light); }
.room-thread--chat .room-msg-body { max-width: none; font-size: 15px; line-height: 1.58; }
/* a line from a browser that had only typed the address: a dashed outline, never the warm bubble */
.room-msg--me.is-flagged .room-bubble { background: transparent; box-shadow: none; border: 1.3px dashed color-mix(in srgb, var(--fg3) 60%, transparent); }
/* the message waiting for the email step */
.room-msg.is-pending .room-bubble { background: color-mix(in srgb, var(--accent-light) 55%, var(--surface)); outline: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: -1px; }
.room-msg-pending { font: 500 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
/* the continuation time sits in the gutter: beside the avatar column, or left of the visitor's bubble */
.room-msg--me .room-msg-gutter { grid-column: auto; grid-row: auto; align-self: center; padding: 0; }
.room-msg--team.is-cont .room-msg-gutter { padding-top: 12px; }
/* what the visitor ticked in the check, at the top of their first bubble */
.room-bubble .room-msg-problems { margin: 0; padding: 0; background: none; border-radius: 0; max-width: none; }
.room-bubble .room-msg-problems li { color: var(--fg); }
.room-bubble .room-msg-problems-k { color: var(--fg2); }
.room-bubble .room-msg-problems + .room-msg-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
/* a new line arrives: it rises into place once (none under reduced motion) */
@keyframes room-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.room-thread--chat .room-msg.is-new { animation: none; }
.room-thread--chat .room-msg.is-new .room-bubble { animation: room-bubble-in .4s var(--ease) both; }

/* the notes after the thread: sent, the address, the dev link, waiting for the team */
.room-chat-scroll .room-sent { width: 100%; max-width: 560px; margin: 18px auto 0; }
.room-sent {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 16px;
  border-radius: 12px; background: var(--paper);
}
.room-sent-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.room-sent-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.room-sent-title { margin: 3px 0 2px; font-size: 14.5px; font-weight: 600; color: var(--fg); outline: none; }
.room-sent-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fg2); }
.room-sent-body + .room-sent-body { margin-top: 4px; }
.room-email-slot { width: 100%; max-width: 560px; margin: 0 auto; }
.room-email-slot:empty { display: none; }
.room-email-line { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg2); text-align: center; }
.room-email-line strong { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.room-email-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0 0; }
.room-email-form .form-field { flex: 1 1 220px; }
.room-email-form .btn { min-height: 48px; }
.room-email-slot > .room-msgline { text-align: center; }
.room-chat-scroll .room-devlink { width: 100%; max-width: 560px; margin: 12px auto 0; }
.room-awaiting { max-width: 50ch; margin: 18px auto 0; font-size: 13px; line-height: 1.55; color: var(--fg3); text-align: center; text-wrap: balance; }
.room-awaiting svg { display: inline-block; width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* an email address moves to the next line whole, and breaks only when it is longer than a line;
   the "." after it is inside the same unit (.room-addr-tail), so it never starts a line alone */
.room-addr { display: inline-block; max-width: 100%; overflow-wrap: anywhere; vertical-align: bottom; }
.room-addr-tail { font-weight: 400; }
.room-email-line .room-addr-tail { color: var(--fg2); }
/* a link for another address switched this browser (room.js switchedNotice) */
.room-switched p { margin: 0; }
.room-switched .room-card-actions { margin-top: 10px; }
.room-switched .room-confirm { margin-top: 12px; background: var(--surface); }

/* ---- the composer, at the foot of the conversation ---- */
.room-chat-foot { padding: 12px 24px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.room-closed-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--fg2); text-align: center; }
.room-chat .room-composer { border-radius: 14px; }
.room-composer-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px; }
.room-chat .room-composer textarea {
  flex: 1 1 auto; min-width: 0; width: auto; min-height: calc(1.55em + 18px); max-height: calc(8 * 1.55em + 18px);
  padding: 9px 4px 9px 10px; border-radius: 10px;
}
.room-send { flex: none; gap: 7px; min-height: 40px; height: 40px; padding: 0 14px 0 16px; border-radius: 10px; font-size: 14px; }
.room-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.room-send:hover svg { transform: translateX(2px); }
.room-composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 4px 0; }
.room-composer-foot .room-composer-hint { flex: 1 1 auto; }
.room-privacy-link {
  font-size: 12.5px; line-height: 1.4; color: var(--fg2); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg2) 40%, transparent); text-underline-offset: 3px;
}
.room-privacy-link:hover { color: var(--fg); text-decoration-color: currentColor; }
.room-privacy-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.room-chat-foot .room-msgline { margin: 8px 4px 0; }
/* what the visitor ticked in the check: inside the composer, above the message, each one untickable */
.room-picked { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 10px 8px 2px; border: 0; }
.room-picked > legend { float: left; width: 100%; margin: 0 0 4px; padding: 0 4px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.room-picked > legend + * { clear: both; }
.room-picked-hint { font: 400 12px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; }
.room-check {
  display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 7px 10px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; line-height: 1.45; color: var(--fg2); transition: background-color .15s, color .15s;
}
@media (hover: hover) { .room-check:hover { background: var(--hover); } }
.room-check:has(input:checked) { background: var(--accent-light); color: var(--fg); }
.room-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.room-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.room-check input:focus-visible { outline: none; }
/* the email step, at the first send */
.room-emailstep { display: grid; gap: 10px; padding: 14px 16px 12px; border-radius: 14px; background: var(--paper); }
.room-emailstep-q { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); }
.room-emailstep-row { display: flex; gap: 8px; }
.room-emailstep-row .input { flex: 1 1 auto; min-width: 0; min-height: 44px; background: var(--surface); }
.room-emailstep-row .room-send { height: 44px; min-height: 44px; }
.room-emailstep-hint { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fg2); }
.room-emailstep-back { margin: 0; font-size: 13px; }
.room-emailstep .room-msgline { margin: 0; }

/* ---- cards that take the frame: an emailed link, the stop page, a lost conversation ---- */
.room-chat-cards { flex: 1 1 auto; justify-content: center; padding: 28px 24px; }
.room-chat-cards > * { width: 100%; max-width: 580px; margin: auto; }
.room-main-title { margin: 0 0 8px; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -.014em; color: var(--fg); outline: none; }
.room-main-note { max-width: 60ch; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg2); }
.room-card { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius); background: var(--paper); }
.room-card .room-main-note + .room-card-actions { margin-top: 20px; }
.room-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.room-card-note { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg3); }
.room-card .room-return-form { margin-top: 18px; }
.room-card .room-confirm { background: var(--surface); }
.room-card-convos { margin-top: 18px; }
.room-card-convos .room-menu-k { margin-inline: 12px; }
.room-card-convos .room-convo-btn:hover, .room-card-convos .room-convo-btn:focus-visible { background: var(--surface); }
.room-chat-cards > .room-skeleton { max-width: 480px; }
/* no scripts: the fallback (the other ways to reach us, and Who sees what) */
.room-fallback { padding: clamp(24px, 4vw, 40px); }
.room-fallback-links { list-style: none; display: grid; gap: 12px; margin: 18px 0 0; padding: 0; }
.room-fallback-privacy { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.room-fallback-privacy .link-arrow { font-size: 14px; }

/* ---- phones and tablets: one view at a time, the chat or the people ---- */
@media (max-width: 860px) {
  .room-people-btn { display: inline-flex; }
  .room-shell { display: flex; flex-direction: column; }
  .room-main { flex: 1 1 auto; order: 1; }
  .room-people { order: 2; border-right: 0; }
  html:not(.js) .room-people { border-top: 1px solid var(--border); }
  html.js .room-people { display: none; }
  html.js .room-shell.is-people .room-people { display: flex; flex: 1 1 auto; }
  html.js .room-shell.is-people .room-main { display: none; }
  html.js .room-people-back { display: block; flex: none; padding: 10px 12px 0; }
  .room-people-back .btn { margin-left: 0; }
  html.js .room-people .room-col { padding-top: 12px; }
  /* the people view spans the frame, but each row stays about as wide as the desktop column, so
     the time on the right stays close to its name */
  .room-people-body, .room-people-foot { box-sizing: border-box; max-width: 420px; }
}
@media (max-width: 640px) {
  .room-app { min-height: 520px; }
  /* the conversation fills the screen, edge to edge */
  .room-frame-wrap { padding: 0; }
  .room-shell { border-radius: 0; box-shadow: none; border-top: 1px solid var(--border); }
  /* the name, and the people button beside it; the quiet line takes the width under both */
  .room-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 0; }
  .room-bar-text { display: contents; }
  .room-bar-mark { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
  .room-bar-title { grid-column: 2; grid-row: 1; }
  .room-bar-sub { grid-column: 2 / -1; grid-row: 2; margin: 0; }
  .room-people-btn { grid-column: 3; grid-row: 1; }
  .room-bar-mark { width: 36px; height: 36px; }
  .room-bar-mark svg { width: 18px; height: 18px; }
  .room-bar-title { font-size: 1.18rem; }
  .room-bar-sub { font-size: 12.5px; }
  .room-memberbar { margin-bottom: 10px; }
  .room-main::before { left: 16px; }
  .room-chat-head { min-height: 60px; padding: 10px 6px 10px 16px; gap: 6px; }
  .room-convo-title { font-size: 1.1rem; }
  /* the head's buttons keep their names for a screen reader, and show only their icons */
  .room-head-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .room-head-btn { width: 40px; justify-content: center; padding: 0; }
  .room-more > .room-head-btn { padding: 0; }
  .room-head-dot { left: 25px; }
  /* the menus open under the whole head, as wide as it (anchored on a small button they would run
     off the screen's edge) */
  .room-menu { position: static; }
  .room-menu-pop, .room-switch .room-menu-pop { left: 10px; right: 10px; top: calc(100% - 2px); width: auto; min-width: 0; max-width: none; }
  .room-menu-pop > button { white-space: normal; }
  .room-chat-panel, .room-chat-notices { padding-inline: 16px; }
  .room-chat-scroll { padding: 16px 12px 14px; }
  .room-chat-foot { padding: 10px 10px 12px; }
  .room-msg--me .room-msg-main { max-width: 88%; }
  .room-msg--team .room-msg-main { max-width: 100%; }
  .room-send { padding: 0 12px; }
  .room-chat-cards { padding: 20px 16px; }
  .room-people .room-col { padding-inline: 14px; }
  .room-people .room-col-title { padding-inline: 6px; }
}
@media (max-width: 420px) {
  /* the word goes; the button keeps its name for a screen reader (the sr-only part stays) */
  .room-people-btn-label > [aria-hidden] { display: none; }
  .room-people-btn { padding-right: 10px; }
  .room-send-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .room-send { width: 44px; padding: 0; justify-content: center; }
}

/* ==========================================================================
   3b. WHO SEES WHAT (room/privacy/): calm and readable, a page of its own
   ========================================================================== */
.privacy { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(56px, 8vw, 96px); }
.privacy-back { margin: 0 0 clamp(24px, 4vw, 40px); }
.privacy-backlink { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; font-weight: 500; color: var(--fg2); transition: color .15s; }
.privacy-backlink:hover { color: var(--accent); }
.privacy-head > .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.privacy-head > .eyebrow::before { content: ''; flex: none; width: 20px; height: 1px; background: currentColor; }
.privacy-title { margin: 0 0 16px; font-size: var(--title-section); font-weight: 450; line-height: 1.06; letter-spacing: -.028em; }
.privacy-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.privacy-intro { max-width: 56ch; margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--fg2); }
.privacy-groups { margin-top: clamp(28px, 5vw, 52px); }
.privacy-group { padding: 26px 0 24px; border-top: 1px solid var(--border); }
.privacy-k { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--font-serif); font-size: 1.32rem; font-weight: 500; line-height: 1.3; letter-spacing: -.012em; color: var(--fg); }
.privacy-k .icon { --icon-size: 22px; color: var(--accent); }
.privacy .room-dots { gap: 10px; }
.privacy .room-dots li { max-width: 68ch; padding-left: 20px; font-size: 15.5px; line-height: 1.65; color: var(--fg2); }
.privacy .room-dots li::before { top: .7em; }
.privacy .room-dots li a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.privacy-sub { margin: 4px 0 8px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.privacy .room-dots + .privacy-sub { margin-top: 18px; }
.privacy-end { margin: 8px 0 0; padding-top: 24px; border-top: 1px solid var(--border); }

/* Quiet actions: a ghost button in a row of tools shows no ring until pointed at, as in Linear;
   the site's ghost ring stays for buttons that stand alone. */
:is(.admin-actions, .admin-invite-foot, .room-people-back) .btn-ghost, .btn-ghost.team-back,
:is(.admin-actions, .admin-invite-foot, .room-people-back) .btn-ghost:hover, .btn-ghost.team-back:hover { --btn-ring: transparent; }

/* ==========================================================================
   4. TEAM INBOX
   ========================================================================== */

/* ---- gate (and the owner-only message on admin) ---- */
.room-gate { padding-block: clamp(40px, 8vw, 96px); }
.room-gate-card { display: grid; justify-items: center; gap: 12px; padding: 32px; box-shadow: var(--lift-lg); text-align: center; }
.room-gate-card .eyebrow { margin-bottom: 2px; }
.room-gate-title { max-width: 26ch; margin: 0; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.2; letter-spacing: -.016em; color: var(--fg); text-wrap: balance; outline: none; }
.room-gate-card > p:not(.eyebrow) { max-width: 46ch; margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg2); }
.room-gate-card .btn { margin-top: 8px; }
.room-gate-card .link-arrow { margin-top: 4px; font-size: 13.5px; }

/* ---- the app shell ---- */
.team-wrap { margin: 12px auto 48px; }
/* the inbox is the wide column: the header's brand lines up with its left edge */
body[data-page="team"]:has(.team-shell) .site-header .wrap { max-width: 1288px; }
.team-shell {
  display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  height: calc(100dvh - var(--header-h, 60px) - 24px); min-height: 560px;
  background: var(--surface); border-radius: calc(var(--radius) + 4px); box-shadow: var(--lift-lg); overflow: hidden;
}
.team-bar {
  position: relative; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 52px; padding: 8px 20px;
  border-bottom: 1px solid var(--border);
}
.team-bar h1 { margin: 0; font-size: 1.15rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.team-bar-who { margin: 0; font-size: 13px; color: var(--fg3); }
.team-bar .room-away .btn-sm { min-height: 32px; }
.team-bar-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.team-bar-links a { font-size: 13.5px; }
/* a quiet line under the bar: work here does not count as presence */
.team-bar-note { flex-basis: 100%; margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--fg3); }
.team-bar-note[hidden] { display: none; }

/* ---- list column ---- */
.team-listcol { display: flex; flex-direction: column; min-height: 0; background: var(--paper); border-right: 1px solid var(--border); --ring: var(--paper); }
.team-listhead { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); }
.seg button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 8px;
  border: 0; border-radius: 8px; background: none; cursor: pointer; white-space: nowrap;
  font: 500 12.5px/1 var(--font-sans); color: var(--fg2); transition: background-color .15s, color .15s, box-shadow .15s;
}
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--lift); }
.seg-n { font: 400 10.5px/1 var(--font-mono); color: var(--fg3); }
.team-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.inbox-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; min-height: 64px; padding: 12px 16px 12px 18px;
  border-bottom: 1px solid var(--border); color: var(--fg); transition: background-color .12s;
}
@media (hover: hover) { .inbox-row:hover { background: color-mix(in srgb, var(--hover) 55%, transparent); } }
/* exactly --hover: --fg3 keeps 4.5:1 on it in both schemes (a darker mix would not) */
.inbox-row[aria-current="true"] { background: var(--hover); }
.inbox-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.inbox-row.is-unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
/* line 1: the topic is the widest thing on the row and wraps to a second line before it is cut;
   the dot and the time sit on its first line */
.inbox-l1 { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.inbox-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.inbox-dot--new { background: var(--ink); }
.inbox-dot--open { background: var(--fg3); }
.inbox-dot--waiting { box-shadow: inset 0 0 0 1.5px var(--accent); }
.inbox-dot--closed { box-shadow: inset 0 0 0 1.5px var(--fg3); opacity: .7; }
.inbox-topic {
  min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.inbox-row.is-unread .inbox-topic { font-weight: 650; }
.inbox-time { align-self: start; padding-top: 3px; font: 400 11px/1.2 var(--font-mono); color: var(--fg3); white-space: nowrap; }
.inbox-time.is-waiting { color: var(--fg2); }
.inbox-l2 { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--fg2); }
/* line 2: the visitor's address is how the team knows the conversation, so it does not shrink:
   "Last reply by" gives way (and is cut) first. Only an address longer than the whole line is cut,
   and it always leaves room for the "Not confirmed" tag after it. */
.inbox-email { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-email:has(+ .team-tag) { max-width: calc(100% - 112px); }
.inbox-by { flex: 0 1 auto; min-width: 0; margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-preview { grid-column: 1 / -1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--fg3); }
.team-tag {
  flex: none; display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border);
  font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); white-space: nowrap;
}
/* --ink text: small mono type keeps AA on a selected (--hover) row, where --accent would not */
.team-tag--warn { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.team-tag--ok { color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); }
.team-empty { display: grid; justify-items: center; gap: 12px; margin: auto; padding: 48px 28px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--fg3); max-width: 32ch; }
.team-empty .icon { --icon-size: 28px; color: var(--fg3); }

/* ---- conversation column ---- */
.team-convo { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.team-none { display: grid; place-items: center; flex: 1; padding: 32px; font-size: 14px; color: var(--fg3); }
/* nothing to choose: only the brand's three bars, very quiet */
.team-none-mark { display: block; width: 40px; height: 40px; }
.team-none-mark svg { display: block; width: 100%; height: 100%; fill: color-mix(in srgb, var(--fg3) 28%, transparent); }
.team-convo-head { padding: 18px 24px 16px; border-bottom: 1px solid var(--border); }
.team-convo-top { display: flex; align-items: flex-start; gap: 12px; }
.team-convo-title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; line-height: 1.25; letter-spacing: -.012em; overflow-wrap: anywhere; outline: none; }
.team-convo-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.team-convo-tools select.input { width: auto; min-height: 36px; height: 36px; padding: 0 36px 0 12px; font-size: 13.5px; border-radius: 8px; background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; }
.team-back { display: none; margin: -6px 0 10px -10px; }
.team-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg2); }
.team-meta-email { color: var(--fg); font-weight: 500; user-select: all; overflow-wrap: anywhere; }
.team-meta-line { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg2); }
.team-meta-line a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.team-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.team-chip {
  display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--border);
  font: 400 10.5px/1.3 var(--font-mono); color: var(--fg2);
}
.team-thread { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 12px 16px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.team-thread .room-msg.is-mine .room-avatar { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.team-composer { padding: 14px 24px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.team-composer .room-composer-bar label { font: 400 10.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--fg3); }
.team-composer select.input { width: auto; min-height: 32px; height: 32px; padding: 0 32px 0 10px; font-size: 13px; border-radius: 8px; background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; }
.team-mailnote { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: var(--fg3); }
.team-confirm-slot:empty { display: none; }
.team-confirm-slot { padding: 0 24px; }
.team-confirm-slot .room-confirm { margin: 12px 0; }
.team-msgline { padding: 0 24px; }
/* owner-only "More" menu */
.team-more { position: relative; }
.team-more > summary { list-style: none; }
.team-more > summary::-webkit-details-marker { display: none; }
.team-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; display: grid; min-width: 280px; padding: 6px;
  border-radius: 10px; background: var(--surface); box-shadow: var(--lift-lg);
}
.team-more-menu button {
  display: flex; align-items: center; min-height: 36px; padding: 0 12px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: 500 13.5px/1.2 var(--font-sans); color: var(--red); text-align: left;
}
.team-more-menu button:hover, .team-more-menu button:focus-visible { background: var(--hover); }
.team-more-menu button { white-space: nowrap; }
.team-more-menu button.is-plain { color: var(--fg); }
.team-more-sep { margin: 5px 6px; border: 0; border-top: 1px solid var(--border); }

/* phones and tablets: the list, or one conversation with a way back */
@media (max-width: 860px) {
  .team-wrap { margin-top: 12px; }
  .team-shell { display: block; height: auto; min-height: 0; overflow: clip; }
  .team-bar { padding: 12px 16px; }
  .team-bar-links { margin-left: 0; flex-basis: 100%; }
  .team-listcol { border-right: 0; }
  .team-list { overflow: visible; }
  .team-convo { display: none; }
  .team-shell.is-open .team-listcol { display: none; }
  .team-shell.is-open .team-convo { display: flex; }
  .team-back { display: inline-flex; }
  .team-convo-head { padding: 16px 16px 14px; }
  .team-convo-top { flex-wrap: wrap; }
  .team-convo-title { flex-basis: 100%; }
  .team-convo-tools { flex-basis: 100%; }
  .team-thread { overflow: visible; padding: 10px 4px 12px; }
  .team-composer { padding: 14px 16px 18px; }
  .team-confirm-slot, .team-msgline { padding: 0 16px; }
  .team-more-menu { right: auto; left: 0; }
}
@media (max-width: 640px) {
  /* the reply bar: the status choice and the button share a row under the hint */
  .team-composer .room-composer-side { flex: 1 1 100%; min-width: 0; }
  .team-composer .room-composer-side label { flex: none; white-space: nowrap; }
  .team-composer .room-composer-side { flex-wrap: wrap; row-gap: 8px; }
  .team-composer .room-composer-side select.input { flex: 1 1 auto; min-width: 0; }
  .team-composer .room-composer-side .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   5. OWNER ADMIN
   ========================================================================== */
.admin-page { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(56px, 8vw, 96px); }
.admin-head > .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.admin-head > .eyebrow::before { content: ''; flex: none; width: 20px; height: 1px; background: currentColor; }
.admin-head h1 { margin: 0 0 18px; font-size: var(--title-section); font-weight: 450; line-height: 1.06; letter-spacing: -.028em; }
.admin-head h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.admin-intro { max-width: 70ch; margin: 0; font-size: 15px; line-height: 1.65; color: var(--fg2); }
.admin-intro + .admin-intro { margin-top: 8px; }
.admin-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; }
.admin-settings { margin-top: clamp(28px, 4vw, 40px); padding: 22px 24px; }
/* the owner's check that servos passes the client address (room-team.js drawAddressNote) */
.admin-address { max-width: 70ch; margin: clamp(22px, 3vw, 28px) 0 0; }
.admin-address:not([hidden]) + .admin-settings { margin-top: 18px; }
.admin-settings-k { margin: 0 0 12px; font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.admin-setting + .admin-setting { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.admin-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--fg); cursor: pointer; }
.admin-toggle input, .admin-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.admin-setting .form-hint { margin: 0 0 0 30px; max-width: 80ch; }
.admin-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: clamp(36px, 5vw, 52px) 0 6px; }
.admin-section-head h2 { margin: 0; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; letter-spacing: -.012em; }
.admin-section-hint { max-width: 80ch; margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--fg3); }
.admin-listcard { padding: 0; overflow: clip; }
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-row { border-top: 1px solid var(--border); }
.admin-row:first-child { border-top: 0; }
.admin-row-main {
  display: grid; grid-template-columns: 36px minmax(0, .8fr) minmax(0, 1.4fr) auto; align-items: center; gap: 12px 16px; padding: 14px 20px;
}
/* desktop: every row shares one set of columns (subgrid), so badges and actions line up down
   the list whatever actions a row has */
@media (min-width: 861px) {
  @supports (grid-template-columns: subgrid) {
    .admin-list { display: grid; grid-template-columns: 36px minmax(0, .8fr) minmax(0, 1.4fr) auto; column-gap: 16px; padding: 0 20px; }
    .admin-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
    .admin-row + .admin-row { border-top: 0; box-shadow: 0 -1px 0 var(--border); }
    .admin-list { position: relative; }
    .admin-row-main { grid-column: 1 / -1; grid-template-columns: subgrid; padding: 14px 0; column-gap: 16px; }
    .admin-row > .admin-panel { grid-column: 1 / -1; padding: 0 0 18px; }
  }
}
.admin-name { min-width: 0; }
.admin-name strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fg); overflow-wrap: anywhere; }
.admin-name span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--fg2); overflow-wrap: anywhere; }
.admin-status { min-width: 0; }
.admin-badges { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.admin-badge {
  display: inline-flex; padding: 3px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--border); background: var(--surface);
  font: 500 10px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--fg2); max-width: 100%; overflow-wrap: anywhere;
}
.admin-badge--group { background: var(--paper); box-shadow: none; }
.admin-badge--warn { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.admin-badge--ok { color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); }
.admin-badge--away { background: var(--paper); color: var(--fg); box-shadow: none; }
.admin-sees { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--fg3); }
.admin-claimed { margin-top: 6px; color: var(--fg2); overflow-wrap: anywhere; }
.admin-claimed + .admin-sees { margin-top: 2px; }
.admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.admin-actions .btn { min-height: 32px; padding: 0 10px; }
.admin-panel { padding: 0 20px 18px; }
.admin-panel:empty { display: none; }
.admin-panel .room-confirm { margin: 0; }
.admin-panel > .room-away-form { max-width: 460px; padding: 18px 20px; border-radius: var(--radius); background: var(--paper); }
/* the launch settings still unset (owner only) */
.admin-unset { margin-top: clamp(22px, 3vw, 28px); padding: 20px 24px; }
.admin-unset[hidden] { display: none; }
.admin-unset-intro { max-width: 80ch; margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--fg2); }
.admin-unset-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.admin-unset-list li { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 17em) minmax(0, 1fr); gap: 2px 14px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.5; color: var(--fg2); }
.admin-unset-list li:first-child { border-top: 0; padding-top: 0; }
.admin-unset-list strong { font-weight: 600; color: var(--fg); }
.admin-unset-list code { font: 400 11.5px/1.5 var(--font-mono); color: var(--fg2); overflow-wrap: anywhere; }
@media (max-width: 860px) { .admin-unset-list li { grid-template-columns: minmax(0, 1fr); } }
.admin-panel > .room-msgline { margin: 0; }
.admin-form { padding: 20px; border-radius: var(--radius); }
.admin-form .form-grid { gap: 16px; }
.admin-radios { display: flex; flex-wrap: wrap; gap: 8px 22px; border: 0; margin: 0; padding: 0; min-width: 0; }
.admin-radios legend { width: 100%; margin: 0 0 8px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.admin-check { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; font-size: 14px; line-height: 1.5; color: var(--fg); cursor: pointer; }
.admin-check input { margin-top: 2px; }
/* the site's .form-field > label spreads label and hint apart; a checkbox row keeps them together */
.form-field > label.admin-check { justify-content: flex-start; align-items: flex-start; font-weight: 400; }
.admin-check strong { font-weight: 600; }
.admin-check input[type=radio] { border-radius: 50%; }
.admin-form .form-actions .btn { min-height: 44px; }
.admin-invite { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--radius); background: var(--paper); }
.admin-invite-k { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.admin-invite-link { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-invite-link .input { flex: 1 1 320px; font: 400 12.5px/1.4 var(--font-mono); min-height: 44px; }
.admin-invite p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg2); }
.admin-invite-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.admin-invite-foot .btn { margin-left: -14px; }
.admin-invite .admin-invite-foot .room-msgline { margin: 0; }
.admin-empty { padding: 28px 20px; font-size: 14px; color: var(--fg3); }
.admin-new-slot:empty { display: none; }
.admin-new-slot { margin-bottom: 16px; }
@media (max-width: 860px) {
  .admin-row-main { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 16px; }
  .admin-status { grid-column: 1 / -1; }
  .admin-actions { grid-column: 1 / -1; justify-content: flex-start; margin-left: -10px; }
  .admin-panel { padding: 0 16px 16px; }
}

/* ==========================================================================
   6. CLAIM PAGE
   ========================================================================== */
.claim-wrap { padding-block: clamp(40px, 8vw, 96px); }
.claim-card { padding: clamp(24px, 4vw, 40px); box-shadow: var(--lift-lg); }
.claim-card > .eyebrow { margin: 0 0 12px; }
.claim-title { margin: 0 0 20px; font-size: 2rem; font-weight: 450; line-height: 1.12; letter-spacing: -.024em; }
.claim-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.claim-body { display: grid; gap: 16px; }
.claim-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg2); outline: none; }
.claim-k { margin: 0 0 8px; font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
/* as wide as the room's desktop people column, so the row shows as it will look there (the time
   beside the name, not 430px away) */
.claim-preview { box-sizing: border-box; max-width: 336px; padding: 16px; border-radius: 12px; background: var(--paper); --ring: var(--paper); }
.claim-preview .room-person { padding: 0; min-height: 0; }
.claim-group { margin: 0; font-size: 14.5px; color: var(--fg); }
.claim-group + .claim-text { margin-top: -8px; }
.claim-list li { font-size: 14.5px; line-height: 1.55; color: var(--fg2); }
.claim-h { margin: 6px 0 0; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }
.claim-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.claim-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg3); }
.claim-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* ==========================================================================
   7. TOUCH, MOTION, PRINT
   ========================================================================== */
/* Every control is at least 44px high where a finger does the pointing. */
@media (pointer: coarse) {
  .btn, .btn-sm, .room-memberbar .btn-sm, .admin-actions .btn, select.input, .seg button, .room-convo-btn,
  .team-convo-tools select.input, .team-composer select.input, .team-more-menu button, .room-menu-pop > button,
  .room-people-btn, .room-send, .room-check { min-height: 44px; }
  .room-head-btn { height: 44px; min-width: 44px; }
  .room-send { height: 44px; }
  .room-panel-close { width: 44px; height: 44px; margin: -12px -12px 0 0; }
  .room-privacy-link, .privacy-backlink { display: inline-flex; align-items: center; min-height: 44px; }
  .team-convo-tools select.input, .team-composer select.input { height: 44px; }
  .inbox-row { min-height: 64px; }
  .room-textbtn { display: inline-flex; align-items: center; min-height: 44px; }
  /* the arrow links that stand on their own line (not the ones inside running text) */
  .room-fallback-privacy .link-arrow, .privacy-end .link-arrow, .room-memberbar .link-arrow, .room-fallback-links .link-arrow,
  .room-gate-card .link-arrow, .team-bar-links .link-arrow, .admin-links .link-arrow, .claim-links .link-arrow,
  .room-elsewhere-card .link-arrow { min-height: 44px; }
  .room-away-menu-wrap > summary, .room-away .btn, .team-bar .room-away .btn-sm { min-height: 44px; }
  .room-away-field .input { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .room-msg.is-new { animation: none; }
  .room-msg, .room-check, .room-composer, .seg button, .inbox-row, .room-convo-btn, .room-msg-gutter,
  .room-head-btn, .room-people-btn, .room-send svg, .privacy-backlink { transition: none; }
  .room-thread--chat .room-msg.is-new .room-bubble { animation: none; }
}
@media print {
  .room-col { position: static !important; max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .room-app { height: auto; }
  .room-chat-scroll { overflow: visible; }
  .team-shell { height: auto; }
}