/* KeyUp web app. iPhone first. No inline styles (strict CSP).
   Themes (Clear, the default, Frosted, Ember, Bold) and light/dark come from app.js
   (resolveAppearance, a port of the Android app's Appearance.kt): it sets the color
   variables below on <html> plus data-theme and data-dark. These defaults are Clear dark. */
:root {
  color-scheme: dark;
  --bg: #0f1217;
  --bg2: #1f242d;
  --card: #181c23;
  --card-solid: #181c23;
  --card2: #252b35;
  --line: #2a303a;
  --border: #2e3540;
  --text: #f2f4f7;
  --muted: #a7b0bd;
  --faint: #8c96a4;
  --ink: #f2f4f7;
  --on-ink: #0f1217;
  --tabbar-bg: #0f1217;
  --accent: #e6261f;   /* 99.75 (WAP-17): KeyUp red fitted for white text (4.5:1) on the dark default, the shade app.js fitAccent picks */
  --accent-text: #ee6964;   /* the accent as TEXT: 4.5:1 or more on every surface (app.js fitAccentText) */
  --accent-rgb: 230, 38, 31;
  --accent-press: #ee5550;
  --on-accent: #fff;
  --space: #e8332d;
  --space-rgb: 232, 51, 45;
  --glow-a-rgb: 122, 31, 43;
  --glow-b-rgb: 29, 58, 110;
  --green: #30d158;
  --amber: #ff9f0a;
  --grey: #636366;
  --blue: #0a84ff;
  --yellow: #ffd60a;   /* Away (never the amber or orange used for warnings) */
  --moon: #b69cff;     /* Do not disturb (never red: red is brand and live) */
  --radius: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar: 58px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 100%; }   /* 99.75 (WAP-4): every text size is in rem, so the browser's own font size setting works */
html, body { margin: 0; background: var(--bg); color: var(--text); height: 100%; }
:root[data-dark="0"] { color-scheme: light; --green: #1f9d45; --amber: #b25f00; --grey: #8e8e93; --blue: #0060df; --yellow: #e0b800; --moon: #6a4fd0; }
body {
  font: 1rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--accent-text); }
h1 { font-size: 1.875rem; line-height: 1.15; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; margin: 0; letter-spacing: -.01em; }
h3 { font-size: 0.8125rem; margin: 0; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
.center { text-align: center; }
.center-block { display: block; margin: 8px auto; }
.eyebrow { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.row { display: flex; align-items: center; }
.gap { gap: 10px; flex-wrap: wrap; }

/* Buttons */
.btn {
  appearance: none; border: 0; border-radius: 12px; padding: 12px 16px; font: inherit; font-weight: 600;
  background: var(--card2); color: var(--text); cursor: pointer; min-height: 44px;
}
.btn:active { opacity: .8; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:active { background: var(--accent-press); }
.btn.ghost { background: transparent; color: var(--accent-text); }
.btn.small { padding: 8px 12px; min-height: 36px; font-size: 0.875rem; }
.btn.wide { width: 100%; }
.btn.green { background: var(--green); color: #000; }
.btn.red { background: var(--accent); color: var(--on-accent); }
.btn:disabled { opacity: .45; cursor: default; }
.empty-group-sheet { display: flex; flex-direction: column; gap: 16px; }
.empty-group-sheet p { overflow-wrap: anywhere; }
.empty-group-sheet .btn { min-height: 48px; white-space: normal; }
.empty-group-keep { background: var(--ink); color: var(--on-ink); }
.empty-group-remove { background: transparent; color: var(--text); border: 1px solid var(--border); }
.link { appearance: none; background: none; border: 0; color: var(--accent-text); font: inherit; font-size: 0.9375rem; padding: 10px 0; cursor: pointer; }
.icon-btn { appearance: none; background: none; border: 0; color: var(--accent); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 22px; }
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:active { background: var(--card2); }

/* Boot */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); }
.boot-mark { width: 84px; height: 84px; }
.boot-inner { display: grid; justify-items: center; gap: 12px; padding: 16px; text-align: center; }
.mic-blocked { color: var(--amber); margin: 6px 0 0; }
.boot-msg { color: var(--amber); margin: 8px 0 0; font-size: 0.9375rem; }

/* Auth */
.auth { min-height: 100%; display: flex; justify-content: center; padding: calc(var(--safe-top) + 32px) 16px calc(var(--safe-bottom) + 32px); background: radial-gradient(ellipse at top, rgba(var(--accent-rgb), .16) 0, transparent 55%); }
.auth-inner { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.auth-mark { width: 64px; height: 64px; margin: 8px auto 0; display: block; }
.auth-title { text-align: center; font-size: 2.125rem; }
.auth-sub { text-align: center; color: var(--muted); margin-top: -8px; }
/* Errors and refusals are amber, as on the phone and watch (CON-7): red means on air. */
.auth-msg { color: var(--amber); min-height: 1.4em; text-align: center; font-size: 0.9375rem; }
.auth-msg:empty:not(#authMsg) { min-height: 0; margin: 0; }
.auth-note { text-align: center; }
.or { text-align: center; color: var(--muted); font-size: 0.8125rem; }
/* 99.40: the Google button (Sign in with Google): Google's own light and dark looks, the G in its four colors, 44px or taller. */
.google-block { display: flex; }
.gbtn {
  appearance: none; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 16px;
  border: 1px solid #8e918f; border-radius: 22px; background: #131314; color: #e3e3e3; font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer;
}
.gbtn:active { opacity: .85; }
.gbtn:disabled { opacity: .55; cursor: default; }
.gbtn-g { flex: none; width: 18px; height: 18px; }
:root[data-dark="0"] .gbtn { background: #fff; color: #1f1f1f; border-color: #747775; }
.card { background: var(--card); border-radius: var(--radius); padding: 16px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form h2 { font-size: 1.125rem; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; color: var(--muted); }
input, select, textarea {
  font: inherit; font-size: 16px; /* 16px stops iOS from zooming in (kept in px on purpose: a smaller rem default would zoom) */
  color: var(--text); background: var(--card2); border: 1px solid transparent; border-radius: 10px; padding: 12px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* Keyboard focus is always visible (mouse and touch focus keep the quiet look). */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* A heading focused for screen readers (a sheet's title) is not a control: no accent focus ring (capture bug 5). */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }
.hint { font-size: 0.75rem; color: var(--muted); }
.plain-list { margin: 0 0 12px; padding-left: 18px; color: var(--muted); }
.plain-list li { margin: 2px 0; }
label.check { flex-direction: row; align-items: flex-start; gap: 12px; color: var(--text); font-size: 0.9375rem; cursor: pointer; }
label.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; padding: 0; }
label.check small { display: block; color: var(--muted); font-size: 0.75rem; }
label.terms-check { margin: 8px 0; }
label.terms-check a { color: inherit; text-decoration: underline; }
.seg { display: flex; background: var(--card); border-radius: 10px; padding: 3px; gap: 3px; }
.seg-btn { flex: 1; appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.875rem; padding: 8px; border-radius: 8px; cursor: pointer; }
.seg-btn.on { background: var(--card2); color: var(--text); }
.seg.small { max-width: 300px; width: 100%; margin: 0 auto; }
.invite-card h2 { margin: 2px 0 6px; }

/* Main layout */
.main { min-height: 100%; }
.tab { padding: calc(var(--safe-top) + 12px) 16px calc(var(--tabbar) + var(--safe-bottom) + 24px); max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.tab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 48px; }
#markAllReadBtn { margin-left: auto; margin-right: -12px; }
.list-head { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 0.75rem; margin: 8px 4px -4px; }
.banners { position: sticky; top: 0; z-index: 20; padding-top: var(--safe-top); }
.banners:empty { display: none; }
.banner { display: flex; align-items: center; gap: 10px; background: var(--card2); color: var(--text); padding: 10px 16px; font-size: 0.875rem; }
.banner svg { width: 20px; height: 20px; flex: none; }
.banner span { flex: 1; }
.banner.warn { box-shadow: inset 0 0 0 999px rgba(255, 159, 10, .22); }
.note { background: var(--card); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px; font-size: 0.875rem; color: var(--text); }
.note strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); }
.install-card p { margin: 2px 0 10px; }
.empty { color: var(--muted); text-align: center; padding: 16px; font-size: 0.9375rem; }
.new-btn { margin-top: -4px; font-weight: 600; }
.kind-pick { display: flex; flex-direction: column; gap: 6px; }
.kind-pick .pick-label { margin-top: 0; }
.pill { font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--card2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: rgba(48, 209, 88, .16); color: var(--green); }
.pill.warn { background: rgba(255, 159, 10, .16); color: var(--amber); }
/* Adults only (18+) Spaces and their rooms. */
.guest-terms { text-align: center; margin: 4px 0 0; }
.guest-terms a { color: var(--text); }
.adult-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 0.6875rem; font-weight: 700; line-height: 18px; vertical-align: 1px; background: rgba(255, 69, 58, .16); color: #ff6961; font-style: normal; }
/* Talk header: the Space name (opens the Space picker) and the room pill (opens Your rooms). */
.space-head { min-width: 0; }
.space-btn, .room-pill { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.space-btn { padding: 4px 0; }
.space-btn #spaceName { margin: 0; font-size: 1.375rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw; }
.space-btn svg, .room-pill svg { width: 22px; height: 22px; color: var(--muted); flex: none; }
.room-pill { padding: 2px 4px 2px 0; border-radius: 999px; }
.room-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56vw; }
.people-all { align-self: center; margin-top: -6px; }

/* Lists */
.list { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.list:empty { display: none; }
.list > li { border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 56px; }
.item:active { background: var(--card2); }
.item.static { cursor: default; }
.item.static:active { background: none; }
.item-main { flex: 1; min-width: 0; }
.item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { color: var(--muted); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub.live { color: var(--accent-text); }
.item-side { color: var(--muted); font-size: 0.8125rem; display: flex; align-items: center; gap: 8px; flex: none; }
.item.selected .item-title::after { content: " · Current"; color: var(--accent-text); font-weight: 500; font-size: 0.8125rem; }
.item-actions { display: flex; gap: 8px; flex: none; }
/* Listen to two rooms */
.room-li { display: flex; align-items: center; }
.room-li > .item { flex: 1; min-width: 0; }
.star-btn { appearance: none; background: none; border: 0; flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); cursor: pointer; border-radius: 22px; }
.star-btn svg { width: 22px; height: 22px; }
.star-btn.on { color: var(--accent); }
.star-btn:active { background: var(--card2); }
.listen-btn { flex: none; margin-right: 10px; }
.listen-btn.on { color: var(--accent); }
.listen-btn.locked { opacity: 0.55; }   /* 99.75 SECOND-ROOM-PLAN-V1: shown, locked, a tap says why */
.second-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 10px 12px; background: var(--card); border-radius: var(--radius); }
.second-bar[hidden] { display: none; }
.second-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.second-bar:has(.second-text.live) .second-dot { background: var(--accent); }
.second-text { flex: 1 1 140px; min-width: 0; margin: 0; font-size: 0.875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.second-text.live { color: var(--accent-text); font-weight: 600; }
/* Hold to send one message to the second room: the same touch rules as the talk button (no scroll, no text
   selection, no callout on a long press), red while it sends. */
.second-talk { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.second-talk.live { background: var(--space); color: var(--on-accent); border-color: transparent; }
.count { background: var(--accent); color: var(--on-accent); border-radius: 999px; font-size: 0.75rem; font-weight: 700; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; }
.req-note { font-size: 0.75rem; color: var(--amber); }

/* Avatars and presence */
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--card2); color: var(--text); display: grid; place-items: center; font-weight: 700; font-size: 0.9375rem; flex: none; position: relative; }
.avatar.room { border-radius: 12px; color: var(--accent); }
.avatar.big { width: 56px; height: 56px; font-size: 1.25rem; }
.avatar.huge { width: 112px; height: 112px; font-size: 2.5rem; margin: 0 auto; }
.avatar.talking { box-shadow: 0 0 0 3px var(--space), 0 0 18px rgba(var(--space-rgb), .7); }
.avatar.offline { opacity: .55; }
.dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--card-solid); background: var(--grey); }
.dot.green { background: var(--green); }
.dot.blue { background: var(--blue); }       /* online in another room */
.dot.yellow { background: var(--yellow); }   /* away */
/* Do not disturb: a small moon in the dot's place. */
.dot.moon { background: var(--card-solid); color: var(--moon); display: grid; place-items: center; width: 15px; height: 15px; right: -2px; bottom: -2px; }
.dot.moon svg { width: 11px; height: 11px; }
.moon-mark { width: 12px; height: 12px; color: var(--moon); flex: none; vertical-align: -1px; margin-left: 3px; }
.profile { display: flex; align-items: center; gap: 14px; }

/* Room card and the talk button */
.room-card { display: flex; flex-direction: column; gap: 14px; }
.room-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.floor-line { color: var(--muted); font-size: 0.9375rem; margin-top: 2px; }
.floor-line.live { color: var(--space); font-weight: 600; }
.floor-line.waiting { color: var(--amber); font-weight: 600; }
.people-strip { list-style: none; margin: 0; padding: 2px 0; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.people-strip::-webkit-scrollbar { display: none; }
.people-strip li { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; flex: none; position: relative; }
.people-strip .quiet-mark { position: absolute; top: 0; left: 38px; width: 16px; height: 16px; border-radius: 50%; background: var(--card-solid); color: var(--muted); display: grid; place-items: center; }  /* "Quiet is on" */
.people-strip .quiet-mark svg { width: 12px; height: 12px; }
.list .avatar .quiet-mark { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--card-solid); color: var(--muted); display: grid; place-items: center; }  /* Everyone list (WEB-1) */
.list .avatar .quiet-mark svg { width: 12px; height: 12px; }
.people-strip .who { font-size: 0.75rem; color: var(--muted); width: 60px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-strip .badge-chip { font-size: 0.625rem; padding: 0 5px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
.people-strip .where { font-size: 0.625rem; color: var(--blue); width: 60px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptt-area { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 10px; }
/* The talk button (keyupradio.com/try, the app's TalkFace): the same phases in every theme. Grey while
   your mic is off, red only while it sends (On air), a soft red ring while an open mic listens, amber
   with the talker's face while someone else talks, and faded when you can't talk here. The label
   changes too, so the state never rests on color alone. The themes only add decoration below. */
.ptt {
  --ptt-fill: color-mix(in srgb, var(--card-solid), var(--text) 14%);
  --ptt-ring1: color-mix(in srgb, var(--card-solid), var(--text) 6%);
  --ptt-ring2: color-mix(in srgb, var(--card-solid), var(--text) 18%);
  width: 200px; height: 200px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ptt-fill); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: inherit; font-weight: 800; font-size: 1.3125rem; letter-spacing: -.01em; line-height: 1.15; padding: 0 22px;
  box-shadow: 0 0 0 8px var(--ptt-ring1), 0 0 0 9px var(--ptt-ring2);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
:root[data-dark="0"] .ptt {
  --ptt-fill: color-mix(in srgb, var(--card-solid), var(--text) 9%);
  --ptt-ring1: color-mix(in srgb, var(--card-solid), var(--text) 3.5%);
  --ptt-ring2: color-mix(in srgb, var(--card-solid), var(--text) 11%);
}
.ptt svg { width: 36px; height: 36px; }
/* D84-8: "Waiting for Sam" fits the round button on up to two centered lines. */
#pttLabel { text-align: center; max-width: 156px; overflow-wrap: anywhere; }
.ptt.waiting #pttLabel { font-size: 1.125rem; }
.ptt-note { font-size: 0.75rem; font-weight: 600; opacity: .82; max-width: 150px; text-align: center; line-height: 1.2; }
.ptt.live {
  transform: scale(.97); background: var(--space); color: var(--on-accent);
  box-shadow: 0 0 0 8px rgba(var(--space-rgb), .14), 0 0 0 9px rgba(var(--space-rgb), .3), 0 0 0 22px rgba(var(--space-rgb), .08);
}
.ptt.armed {
  position: relative;
  background: rgba(var(--space-rgb), .14); color: var(--space);
  box-shadow: 0 0 0 8px rgba(var(--space-rgb), .08), 0 0 0 9px var(--space);
}
/* The listening ring runs for as long as an open mic is armed, so it moves with transform and opacity
   only (the compositor does it, nothing is repainted each frame; it used to animate box-shadow). */
.ptt.armed::after {
  content: ''; position: absolute; inset: -9px; box-sizing: border-box; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(var(--space-rgb), .5);
  will-change: transform, opacity;
  animation: ptt-listen 1.8s ease-out infinite;
}
.ptt.waiting {
  background: rgba(255, 159, 10, .18); color: var(--amber);
  box-shadow: 0 0 0 8px rgba(255, 159, 10, .08), 0 0 0 9px rgba(255, 159, 10, .35);
}
.ptt:disabled, .ptt.off {
  background: color-mix(in srgb, var(--card2) 60%, transparent); color: var(--faint); box-shadow: 0 0 0 9px transparent, 0 0 0 10px var(--line);
}
.ptt:disabled::after, .ptt.off::after { content: none; animation: none; }
.ptt:disabled { cursor: default; }
@keyframes ptt-listen {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.19); opacity: 0; }
}
/* On air: bars that move; waiting: the talker's face. */
.ptt-bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.ptt-bars[hidden] { display: none; }
.ptt-bars i { width: 6px; height: 10px; border-radius: 3px; background: currentColor; animation: ptt-bar .9s ease-in-out infinite; }
.ptt-bars i:nth-child(2) { animation-delay: .15s; }
.ptt-bars i:nth-child(3) { animation-delay: .3s; }
.ptt-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes ptt-bar { 0%, 100% { height: 8px; } 50% { height: 28px; } }
.ptt-face { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.125rem;
  background: rgba(255, 159, 10, .3); color: var(--amber); box-shadow: 0 0 0 3px var(--amber), 0 0 16px rgba(255, 159, 10, .5); }
.ptt-face[hidden] { display: none; }
.ptt-status { margin: 0; font-weight: 800; font-size: 1rem; text-align: center; }
.ask-ai { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); }   /* 91: Ask AI from a button */
.ask-ai svg { width: 18px; height: 18px; }
.composer-btn { width: 40px; height: 40px; border-radius: 20px; }
.composer-btn.recording { background: var(--accent); color: var(--on-accent); }
.voice-bar { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; min-width: 0; background: var(--card); border-left: 3px solid var(--accent); border-radius: 12px; padding: 6px 6px 6px 10px; }
.voice-bar[hidden] { display: none; }
.voice-bar span { flex: 1; min-width: 0; font-size: 0.875rem; }
.ptt-status.live { color: var(--space); }

/* Messages */
.thread { display: flex; flex-direction: column; min-height: calc(100dvh - var(--tabbar) - var(--safe-bottom) - var(--safe-top) - 40px); }
.thread-head { display: flex; align-items: center; gap: 6px; position: sticky; top: var(--safe-top); background: var(--bg); z-index: 5; padding: 4px 0; }
:root[data-theme="frosted"] .thread-head, :root[data-theme="frosted"] .composer { background: var(--bg2); }
.thread-title { flex: 1; min-width: 0; }
.auto-delete-line { text-align: center; margin: 2px 0 6px; }
.auto-delete-line[hidden] { display: none; }
.thread-title h2 { font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgs { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.msg { max-width: 82%; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg .from { font-size: 0.75rem; color: var(--muted); padding: 0 12px; }
.bubble { background: var(--card2); padding: 9px 13px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.msg.mine .bubble { background: var(--accent); color: var(--on-accent); }
.bubble.sources { font-size: 0.875rem; }
.bubble.sources a { color: inherit; text-decoration: underline; }
.bubble a.chat-link { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }   /* 99.92 web chat links */
.bubble.deleted { font-style: italic; color: var(--muted); background: transparent; border: 1px solid var(--line); }
.msg .time { font-size: 0.6875rem; color: var(--muted); padding: 0 12px; }
/* 99.73: "Read" / "Seen by ..." under your newest read message, and "typing..." just above the box. */
.msg .receipt { font-size: 0.6875rem; color: var(--muted); padding: 0 12px; }
.typing-line { flex: 1 0 100%; margin: 0; padding: 0 12px; font-size: 0.75rem; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-photo { display: block; max-width: 100%; max-height: 320px; border-radius: 14px; background: var(--card2); min-width: 120px; min-height: 90px; }
.ai-badge { font-size: 0.625rem; font-weight: 700; background: var(--blue); color: #fff; border-radius: 4px; padding: 1px 4px; margin-left: 4px; }
/* Hide AI answers: one quiet line; tapping it shows that answer. */
.ai-hidden-line { background: none; border: 1px dashed var(--border, rgba(128,128,128,.4)); border-radius: 12px; color: var(--muted); font: inherit; font-size: 0.8125rem; padding: 6px 10px; cursor: pointer; text-align: left; }
.msg-call { align-self: center; display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 999px; padding: 7px 14px; font-size: 0.8125rem; color: var(--muted); }
.msg-call svg { width: 16px; height: 16px; color: var(--text); }
.msg-call.missed { color: var(--accent-text); }
.composer { position: sticky; bottom: calc(var(--tabbar) + var(--safe-bottom)); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; background: var(--bg); padding: 8px 0; }
.reply-bar { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; min-width: 0; background: var(--card); border-left: 3px solid var(--muted); border-radius: 12px; padding: 6px 6px 6px 10px; font-size: 0.8125rem; color: var(--muted); }
.reply-bar[hidden] { display: none; }
.reply-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar button { appearance: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 1.375rem; line-height: 1; width: 36px; height: 36px; cursor: pointer; border-radius: 18px; flex: none; }
.reply-quote { appearance: none; border: 0; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; margin-bottom: -4px; padding: 6px 10px; background: var(--card); border-left: 3px solid var(--muted); border-radius: 12px; font-size: 0.75rem; color: var(--muted); }
.reply-quote b { font-weight: 600; }
.reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.reply-quote.open span { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; overflow-wrap: anywhere; }
.msg.flash .bubble { outline: 3px solid transparent; animation: msg-flash 1.6s ease-out; }
@keyframes msg-flash { 0%, 40% { outline-color: var(--accent); } 100% { outline-color: transparent; } }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px; margin-top: -2px; }
.react-pill { appearance: none; border: 0; background: var(--card); color: var(--text); font: inherit; font-size: 0.8125rem; border-radius: 999px; padding: 4px 10px; min-height: 30px; cursor: pointer; }
.react-pill:active { background: var(--card2); }
.quick-reactions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 8px; }
.quick-react { appearance: none; border: 0; background: var(--card2); color: var(--text); font-size: 1.5rem; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
.quick-react:active { background: var(--card); }
.action-preview { margin: 0 0 4px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Touch: a long press opens the message menu, so the text is not selected and no callout shows. Copy is in the menu. */
@media (pointer: coarse) {
  .msgs .bubble, .msgs .msg-photo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
.composer textarea { flex: 1; resize: none; max-height: 140px; border-radius: 20px; padding: 10px 14px; line-height: 1.35; }
.send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; cursor: pointer; }
.send svg { width: 20px; height: 20px; }
.send:disabled { background: var(--card2); color: var(--muted); }
.badge { position: absolute; top: 4px; left: calc(50% + 6px); background: var(--accent); color: var(--on-accent); font-size: 0.6875rem; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; font-style: normal; }

/* People */
.code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.code { font: 600 1.375rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; min-width: 0; }

/* You */
.devices-list { margin-top: 10px; }   /* 91: You > Devices list */
.first-run-list { margin: 8px 0 12px; }   /* 91: first-time setup */
.first-run-list .item.on { background: var(--card2); }
.first-run-list > label.item { position: relative; border-bottom: 1px solid var(--line); }   /* 92 (WB91-12): real radio inputs in labels */
.first-run-list > label.item:last-child { border-bottom: 0; }
.first-run-list > label.item:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
#sheetBody h3[tabindex="-1"]:focus { outline: none; }
.first-run-sub { white-space: normal; }
.switch-row { flex-direction: row; justify-content: space-between; align-items: center; color: var(--text); font-size: 1rem; gap: 12px; }
.switch-row small { display: block; color: var(--muted); font-size: 0.75rem; }
.switch-row input { width: 22px; height: 22px; accent-color: var(--accent); padding: 0; flex: none; }
.list-card { padding: 0; overflow: hidden; }
.row-link { display: block; width: 100%; text-align: left; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-decoration: none; cursor: pointer; }
.row-link:last-child { border-bottom: 0; }
.row-link.danger { color: var(--accent-text); }

/* Tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around;
  height: calc(var(--tabbar) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: var(--tabbar-bg); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.tabbtn { position: relative; flex: 1; appearance: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.6875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.tabbtn svg { width: 26px; height: 26px; }
.tabbtn.on { color: var(--accent-text); }
/* Desktop: the tab bar sits under the 640 px column instead of stretching across the window (capture bug 9). */
@media (min-width: 700px) {
  .tabbar { max-width: 640px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 16px 16px 0 0; }
}

/* Call screen */
.call { position: fixed; inset: 0; z-index: 60; background: linear-gradient(180deg, rgba(var(--accent-rgb), .2) 0, transparent 70%), var(--bg); display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px); }
.call-inner { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.call-inner h2 { font-size: 1.75rem; margin-top: 14px; }
.call-buttons { display: flex; justify-content: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.round { width: 72px; height: 72px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: var(--card2); }
.round svg { width: 30px; height: 30px; }
.round.red { background: var(--accent); color: var(--on-accent); }
.round.green { background: var(--green); color: #000; }
.round.on { background: var(--ink); color: var(--on-ink); }
.call.ended .call-inner { opacity: .85; }
.lock-pill { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0; background: rgba(94, 92, 230, .18); color: var(--text); }
.lock-pill svg { width: 14px; height: 14px; }
.safety-row { align-self: center; display: inline-flex; align-items: center; gap: 8px; appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 0.9375rem;
  color: var(--muted); background: var(--card2); border-radius: 20px; padding: 8px 14px; min-height: 44px; }
.safety-row svg { width: 16px; height: 16px; }
.safety-row b { color: var(--text); font-size: 1.0625rem; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.safety-large { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.safety-digits { font-size: 3.25rem; font-weight: 700; letter-spacing: 4px; margin: 4px 0; font-variant-numeric: tabular-nums; }
.choice { border-radius: var(--radius); background: var(--card); }
.choice + .choice { margin-top: 8px; }
.choice .item-main { display: flex; flex-direction: column; gap: 2px; }
.choice .item-sub { white-space: normal; }
.choice-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; }
.choice-icon svg { width: 20px; height: 20px; }
.choice-icon.green { background: var(--green); color: #000; }
.choice-icon.lock { background: #5E5CE6; }
.round-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--muted); }

/* Sheet */
.sheet-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 70; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: var(--bg2); border-radius: 18px 18px 0 0; padding: 8px 16px calc(var(--safe-bottom) + 16px); max-height: 85vh; max-height: 85dvh; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; }
.sheet-grip { width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 6px; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.steps svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--blue); }

/* Toast */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar) + var(--safe-bottom) + 14px); z-index: 80; background: var(--ink); color: var(--on-ink); border-radius: 14px; padding: 10px 16px; font-size: 0.875rem; max-width: calc(100vw - 32px); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
/* toast(text, ms, 'warn'): amber, for something you can't do (the assistant is for people 18 and over). */
.toast.over-sheet { bottom: auto; top: calc(var(--safe-top) + 12px); }   /* 100.3 (R7-08): over a sheet the toast goes to the top, off its lower buttons */
.toast.warn { background: #ff9f0a; color: #1a1000; }
/* announce(): the toast's live region reads to screen readers without showing a toast (.toast wins over .sr otherwise). */
.toast.sr { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); box-shadow: none; white-space: nowrap; }
/* 118 JOIN: toastAction(), the words and one Open button in the same toast (the inviter's invite.joined). */
.toast.with-action { display: flex; align-items: center; gap: 12px; }
.toast .toast-action { flex: none; background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.toast .toast-action:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; border-radius: 4px; }

/* Appearance picker */
.appearance { display: flex; flex-direction: column; gap: 8px; }
.pick-label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-top: 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.swatch.on { box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--text); }
.sw-red { background: #e8332d; }
.sw-orange { background: #ea580c; }
.sw-pink { background: #db2777; }
.sw-blue { background: #2563eb; }
.sw-indigo { background: #4f46e5; }
.sw-teal { background: #0d9488; }
.sw-forest { background: #15803d; }
.note-line { margin-top: 10px; }
.stay-card { display: flex; flex-direction: column; gap: 6px; }
.stay-card[hidden] { display: none; }
.stay-title { font-size: 1.0625rem; margin: 0; }
#guestPeopleNote .btn { display: block; margin-top: 8px; }
.rec-note { display: flex; flex-direction: column; gap: 2px; }
.rec-note[hidden] { display: none; }
.rec-row { margin: 0; }
.rec-row .link { font-size: inherit; font-weight: 600; padding: 8px; margin: -8px 0 -8px 2px; }
.sounds { display: flex; flex-direction: column; gap: 8px; }
.sounds .play-btn { width: 36px; height: 36px; margin-left: auto; }
.sounds .play-btn svg { width: 18px; height: 18px; }
.sounds .variants { display: flex; flex-direction: column; gap: 2px; padding-left: 8px; }
.sounds .variant input { accent-color: var(--accent); }

/* Space color: tints room cards and the talking ring (theme_color on the Space). */
.space-tinted .room-card { box-shadow: inset 0 0 0 1px rgba(var(--space-rgb), .45); background-image: linear-gradient(180deg, rgba(var(--space-rgb), .16) 0, transparent 55%); }
.space-tinted .avatar.room { color: var(--space); background-image: linear-gradient(rgba(var(--space-rgb), .18), rgba(var(--space-rgb), .18)); }

/* Clear (default, keyupradio.com/try): flat calm cards; the talk button is neutral until your
   mic sends (red), soft red while an open mic listens, amber while you wait. The label always
   changes too, so the state never rests on color alone. */
:root[data-theme="clear"] .card, :root[data-theme="clear"] .list, :root[data-theme="clear"] .note { border: 1px solid var(--line); }
:root[data-theme="clear"] h1, :root[data-theme="clear"] h2 { font-weight: 800; letter-spacing: -.03em; }
:root[data-theme="clear"] .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="clear"] .tabbtn svg { width: 56px; height: 30px; padding: 3px 15px; border-radius: 999px; transition: background .15s ease; }
:root[data-theme="clear"] .tabbtn.on { color: var(--accent-text); font-weight: 600; }
:root[data-theme="clear"] .tabbtn.on svg { background: rgba(var(--accent-rgb), .16); }
:root[data-theme="clear"] .floor-line.live { color: var(--space); }
:root[data-theme="clear"] .seg { background: var(--card2); }
:root[data-theme="clear"] .seg-btn.on { background: var(--card-solid); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }

/* Frosted: see-through cards over soft color glows. */
:root[data-theme="frosted"] body::before,
:root[data-theme="ember"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
:root[data-theme="frosted"] body::before {
  background: radial-gradient(70% 45% at 10% 0%, rgba(var(--glow-a-rgb), .75) 0, transparent 70%),
    radial-gradient(60% 45% at 100% 45%, rgba(var(--glow-b-rgb), .7) 0, transparent 70%),
    radial-gradient(60% 40% at 20% 100%, rgba(var(--glow-a-rgb), .35) 0, transparent 70%), var(--bg);
}
:root[data-theme="frosted"] body, :root[data-theme="ember"] body { background: transparent; }
:root[data-theme="frosted"] .card, :root[data-theme="frosted"] .list, :root[data-theme="frosted"] .note, :root[data-theme="frosted"] .seg {
  border: 1px solid var(--border);
}
:root[data-theme="frosted"] .tabbar { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
:root[data-theme="frosted"] .boot { background: transparent; }

/* Ember: warm and dark, with a glow when someone talks. */
:root[data-theme="ember"] body::before {
  background: radial-gradient(80% 40% at 50% 0%, rgba(var(--accent-rgb), .1) 0, transparent 70%), var(--bg);
}
:root[data-theme="ember"] .room-card { transition: box-shadow .3s ease; }
:root[data-theme="ember"] .room-card:has(.floor-line.live) { box-shadow: 0 0 0 1px rgba(var(--space-rgb), .5), 0 0 40px rgba(var(--space-rgb), .35); }
:root[data-theme="ember"] .ptt.live { box-shadow: 0 0 0 12px rgba(var(--space-rgb), .25), 0 0 80px rgba(var(--space-rgb), .9); }

/* Bold: high contrast, big titles, strong edges. */
:root[data-theme="bold"] .card, :root[data-theme="bold"] .list, :root[data-theme="bold"] .note { border: 1.5px solid var(--border); }
:root[data-theme="bold"] h1 { font-size: 2.25rem; font-weight: 800; }
:root[data-theme="bold"] h2 { font-weight: 800; }
:root[data-theme="bold"] .item-title { font-weight: 700; }
:root[data-theme="bold"] .list-head, :root[data-theme="bold"] .eyebrow { color: var(--text); font-weight: 700; }
/* Bold: the same phases with a strong edge. */
:root[data-theme="bold"] .ptt { border: 3px solid var(--border); }
:root[data-theme="bold"] .ptt.live { border-color: var(--text); }
:root[data-theme="bold"] .ptt.waiting { border-color: var(--amber); }
:root[data-theme="bold"] .avatar.talking { box-shadow: 0 0 0 4px var(--space); }
:root[data-theme="bold"] .seg-btn.on { background: var(--ink); color: var(--on-ink); }

@media (min-width: 900px) {
  .tab { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ptt, :root[data-theme="ember"] .room-card { transition: none; }
  .ptt.armed::after { animation: none; content: none; }
  .ptt-bars i { animation: none; height: 20px; }
}

/* Person actions and personal mutes */
.room-card-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.people-strip li.tappable { cursor: pointer; border-radius: 12px; }
.people-strip li.tappable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.people-strip .muted-mark { color: var(--muted); }
.muted-icon { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); margin-left: 4px; }
.person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sheet-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; align-items: center; }
.sheet-label { font-weight: 600; margin: 14px 0 4px; }
.report-reasons { display: grid; gap: 10px; margin: 6px 0 4px; }
.wide-range { width: 100%; accent-color: var(--accent); }
input[type="range"].wide-range { padding: 0; background: none; border: 0; height: 32px; }
.mic-boost-value { color: var(--text); margin-left: 6px; font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 0.875rem; }
.btn.danger { color: var(--accent-text); }
/* Room settings: "#room · Space" under the title. Pick who takes over: the picked row. */
.sheet-sub { margin: -6px 0 12px; }
#sheetBody > p + .btn, #sheetBody > p + ul + .btn { margin-top: 12px; }
.item.pick.on { box-shadow: inset 0 0 0 2px var(--accent); }
/* Report a problem: what is sent, in a quiet box. */
.note-box { background: var(--card2); border-radius: var(--radius); padding: 10px 12px; margin: 12px 0; }
.note-box p { margin: 4px 0; }
.note-box .plain-list { margin: 4px 0; }
textarea { resize: vertical; min-height: 96px; }
/* You: your picture (a button), Change picture and Edit name; the round crop window. */
.avatar-btn { border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
.avatar.has-photo { background-size: cover; background-position: center; color: transparent; }
.profile-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; }
.profile-links .link { padding: 0; font-weight: 600; }
/* Sign-in: Help, Terms and Privacy Policy under the card, for people who already have an account. */
.auth-links { text-align: center; margin: 12px 0 0; }
.auth-links a { color: var(--muted); text-decoration: underline; }
/* The "Can't sign in?" sheet: three ways, one after the other. */
a.btn { display: inline-block; text-align: center; text-decoration: none; line-height: 20px; }
a.btn.wide { display: block; }
.help-way { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.help-way:first-child { border-top: 0; padding-top: 0; }
.help-way h3 { font-size: 1rem; color: var(--text); }
.crop-wrap { display: grid; place-items: center; margin: 8px 0; }
.msg-more { border: 0; background: none; color: var(--muted); padding: 2px 4px; margin-left: 6px; vertical-align: middle; cursor: pointer; opacity: 0; border-radius: 6px; }
.msg-more svg { width: 16px; height: 16px; }
.msg:hover .msg-more, .msg:focus-within .msg-more, .msg-more:focus-visible { opacity: 1; }
@media (hover: none) { .msg-more { display: none; } }   /* touch: a long press opens the same menu */
.msg[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.crop-canvas { width: 240px; height: 240px; max-width: 100%; border-radius: 50%; background: var(--card2); touch-action: none; cursor: grab; }

/* Staff badges ("Founder"): a small gold pill after a name. Gold is only for this. */
:root { --gold: #f2c14e; --gold-rgb: 242, 193, 78; }
:root[data-dark="0"] { --gold: #8a6100; --gold-rgb: 191, 139, 16; }
.badge-chip { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 0.6875rem; font-weight: 700; line-height: 16px;
  padding: 0 7px; border-radius: 999px; white-space: nowrap; color: var(--gold); background: rgba(var(--gold-rgb), .16);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .35); }
.name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.name-line .name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-title { font-size: 0.8125rem; font-weight: 600; color: var(--gold); margin-top: 1px; }

/* Availability (availability.py): off people greyed out, the off talk button, schedule editor. */
.people-strip li.off { opacity: .55; }
.people-strip .where.off-mark { color: var(--muted); }
.avail-now { font-weight: 600; margin: 0 0 4px; }
.avail-now.off { color: var(--amber); }
.avail-editor { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.avail-window { border: 1px solid var(--line, rgba(127, 127, 127, .25)); border-radius: 10px; padding: 8px; }
.day-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { appearance: none; border: 1px solid var(--line, rgba(127, 127, 127, .35)); background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; padding: 6px 10px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.chip.on { background: var(--card2); color: var(--text); font-weight: 600; }
.time-field { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; color: var(--muted); }
.time-field input { font: inherit; }
.avail-timeoff-list, .avail-people { list-style: none; margin: 0; padding: 0; }
.avail-timeoff, .avail-people li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.875rem; }
.avail-people li.off { opacity: .6; }
/* Room settings > Transcripts (delete your own lines, or any line as a moderator) */
.transcript-list { list-style: none; margin: 0; padding: 0; }
.transcript-line { padding: 8px 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.2)); font-size: 0.875rem; }
.transcript-line p { margin: 2px 0; }
.transcript-line .transcript-tr { color: var(--muted); font-size: 0.8125rem; }   /* 99: the translation under the original */
.avail-page { font-size: 1.125rem; font-weight: 700; }

/* Away and Do not disturb (user_status.py): the moon button, the settings card, the summary. */
.people-strip .where.status { color: var(--muted); }
.head-side { display: flex; align-items: center; gap: 4px; }
.dnd-btn { color: var(--muted); width: 40px; height: 40px; }
.dnd-btn svg { width: 22px; height: 22px; }
.dnd-btn.on { color: var(--moon); background: rgba(127, 127, 127, .14); }
.quiet-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; margin: 8px 0; }
.quiet-row small { color: var(--muted); font-weight: 400; }
.quiet-row.on small { color: var(--moon); }
.dnd-card { display: flex; flex-direction: column; gap: 10px; }
.dnd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dnd-label { font-size: 1rem; }
.dnd-state { display: block; color: var(--muted); font-size: 0.8125rem; }
.dnd-state.on { color: var(--moon); font-weight: 600; }
.banner.summary svg { color: var(--moon); }

/* iPhone and iPad only: -webkit-touch-callout exists only in iOS WebKit, so Android and
   computers never match this block. */
@supports (-webkit-touch-callout: none) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* No double-tap zoom on buttons and links (the talk button keeps touch-action: none). */
  button, a, .seg-btn, .tabbtn, .swatch, .chip, .people-strip li { touch-action: manipulation; }
  /* Holding talk: no text selection, magnifier or callout from anything around the button. */
  .ptt-area, .ptt-area *, .room-card-head, .people-strip, .tabbar, .seg {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  /* 16px or more in every field, or iOS zooms in when you type. */
  .time-field input { font-size: 16px; }
  /* Typing a message (html.composing, set only on iOS while the box has focus): the message
     bar sits on the keyboard and the tab bar steps aside, so a stray tap can't leave the chat. */
  html.composing .tabbar { display: none; }
  html.composing .composer { bottom: max(var(--kb, 0px), var(--safe-bottom)); }
}

/* Your rooms, invitations, the account rows */
.row-link .row-sub { display: block; color: var(--muted); font-size: 0.8125rem; margin-top: 2px; }
.space-btn:disabled { cursor: default; }
.space-btn:disabled svg { display: none; }
.sheet-space { margin: 0 0 4px; }
.sheet-space span { font-size: 0.9375rem; font-weight: 700; color: var(--muted); }
.sheet-section { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-section .link { margin: 8px 4px -4px; }
#yourRooms .list { margin-bottom: 4px; }
.invite-body { display: flex; flex-direction: column; gap: 10px; }
.invite-body .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.invite-body .list { background: var(--card2); }
.invite-note { margin: 0; }
.invite-link { background: var(--card2); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; font-size: 0.9375rem; }
.invite-warn { color: var(--amber); font-size: 0.8125rem; margin: 0; }
.scope-box { background: var(--card2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.item.off { opacity: .6; }
.qr-box { margin: 10px 0; }
.qr { display: block; width: 220px; height: 220px; max-width: 100%; margin: 0 auto 6px; border-radius: 10px; }
.more-toggle small { color: var(--muted); font-size: 0.75rem; }
.more-box { margin: 0 0 8px; }
.more-field { display: block; margin: 12px 0 0; font-size: 0.875rem; }
.more-field input { display: block; width: 100%; margin-top: 4px; }

/* You > Push-to-talk key and Microphone and speaker (2026-10-08) */
.key-name { font-weight: 600; color: var(--text); }
.dev-card { display: flex; flex-direction: column; gap: 6px; }
.dev-label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-top: 4px; }
.dev-select { width: 100%; }
.dev-msg { color: var(--amber); margin: 6px 0 0; }

/* Missed talks (Rewind) on the room card (2026-10-08) */
.rewind-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--card2); }
.rewind-text { flex: 1 1 auto; font-weight: 600; }
.rewind-quick { flex-wrap: wrap; margin: 8px 0 2px; }   /* 91: Replay last, Last 10, Stop replay */
.rewind-list { margin: 8px 0 0; padding: 0; }
.rewind-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rewind-row small { display: block; color: var(--muted); font-size: 0.8125rem; }
.rewind-row small.rewind-caption { color: var(--text); }   /* 99: the talk's text; the translation under it stays grey */
/* 85: Invite someone card (while the Space has only you) and Sound check */
.room-invite-card { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--card2); }
.room-invite-card p { margin: 0 0 8px; }
.room-invite-card[hidden] { display: none; }
.sc-level { width: 100%; height: 10px; margin: 6px 0 8px; }
.sc-done { margin-top: 16px; }

/* 88 features: Call for help, the pinned note, "While you were away", the custom status. */
.sos-list { display: flex; flex-direction: column; }
.sos-list:empty { display: none; }
/* A call for help is red with white text (6.8:1) in every theme, light and dark. */
.banner.sos { --sos: #b3261e; background: var(--sos); color: #fff; align-items: flex-start; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.banner.sos svg { width: 24px; height: 24px; margin-top: 2px; }
.banner.sos .sos-text { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.banner.sos .sos-text b { font-size: 1rem; }
.banner.sos .sos-text small { color: #fff; opacity: .92; font-size: 0.8125rem; overflow-wrap: anywhere; }
.banner.sos .sos-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.banner.sos .btn { background: #fff; color: #7a1712; font-weight: 700; }
.banner.sos .btn.primary { background: #fff; color: #7a1712; }
.banner.sos .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
/* 98 wave (SOS-ALERTS-98): a call this browser silenced stays as a small banner until the call closes */
.banner.sos.silenced { padding: 6px 16px; align-items: center; }
.banner.sos.silenced svg { width: 18px; height: 18px; margin-top: 0; }
.banner.sos.silenced .sos-text b { font-size: 0.875rem; }
.sos-open { color: #ff8d86; box-shadow: inset 0 0 0 1.5px currentColor; background: transparent; }
:root[data-dark="0"] .sos-open { color: #b3261e; }
.sos-hold { position: relative; overflow: hidden; min-height: 64px; background: #b3261e; color: #fff; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sos-hold .sos-hold-fill { position: absolute; inset: 0; width: 0; background: rgba(0, 0, 0, .38); transition: width .15s ease-out; }
.sos-hold.holding .sos-hold-fill { width: 100%; transition: width 2s linear; }
.sos-hold .sos-hold-label { position: relative; }
.sos-result { min-height: 1.4em; font-weight: 600; }
.sos-result.ok { color: var(--text); font-size: 1.0625rem; }
.sos-result.bad { color: #ff8d86; font-size: 1.0625rem; }
:root[data-dark="0"] .sos-result.bad { color: #b3261e; }
/* 93 (FG92-M7): "Your call for help is open" stays above the screens for the 10 minutes a call can be taken back. */
.my-sos { display: flex; flex-direction: column; }
.my-sos[hidden] { display: none; }
.my-sos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; background: #b3261e; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.my-sos-row b { flex: 1 1 180px; }
.my-sos-row .btn { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }

.pinned-note { margin: 10px 0 0; border-radius: 12px; background: var(--card2); }
.pinned-note[hidden] { display: none; }
.thread-pinned { margin: 8px 12px; }
.pinned-main { appearance: none; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer; border-radius: 12px; min-height: 44px; }
.pinned-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pinned-icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-text); }
.pinned-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pinned-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pinned-text { white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.pinned-text.open { -webkit-line-clamp: unset; display: block; overflow: visible; }
.pinned-meta { color: var(--muted); font-size: 0.75rem; }
.pinned-actions { display: flex; gap: 8px; padding: 0 12px 10px 42px; }

.away-card { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.away-card[hidden] { display: none; }
.away-line { font-weight: 600; overflow-wrap: anywhere; }
.away-line.muted { font-weight: 400; }
.away-actions { margin-top: 2px; }
.away-row-actions { display: flex; gap: 6px; flex: none; }

.people-strip .status-text { font-size: 0.625rem; line-height: 1.15; color: var(--muted); width: 60px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.item-sub.status-text { color: var(--text); font-style: italic; }
.status-text-line { margin-top: 2px; font-size: 0.875rem; color: var(--text); overflow-wrap: anywhere; }
.status-suggestions .btn { white-space: nowrap; }

/* 98 part two (ROLES-98): the Advanced fold per You heading and in Room settings. Nothing is removed: a row moves under it. */
details.adv { margin-top: 8px; border-top: 1px solid var(--line, rgba(127,127,127,.2)); }
details.adv > summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--muted); list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after { content: ' \25BE'; }
details.adv[open] > summary::after { content: ' \25B4'; }
details.adv > .adv-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
details.adv[hidden] { display: none; }
.card > details.adv:first-child { border-top: 0; margin-top: 0; }
.list-card details.adv { margin-top: 0; }
.list-card details.adv > summary { padding: 14px 16px; }
.list-card details.adv > .adv-body { gap: 0; padding-bottom: 0; }

/* 99.40 billing: the Plans sheet, the Plan card, My plan */
.plan-card-box { margin-bottom: 12px; }
.plan-info { display: grid; gap: 6px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-head h4 { margin: 0; font-size: 1.0625rem; }
.plan-card { display: grid; gap: 6px; margin: 0 0 12px; }
.plan-card.current { box-shadow: inset 0 0 0 2px var(--accent); }
.plan-card.suggested { box-shadow: inset 0 0 0 1.5px var(--line, rgba(127, 127, 127, .45)); }
.plan-now { display: grid; gap: 6px; margin: 0 0 12px; }
.plan-price { margin: 0; font-size: 1.125rem; }
.plan-people { margin: 0; font-weight: 600; }
.plan-limits { display: grid; gap: 2px; margin: 0; padding-left: 18px; list-style: disc; }
.plan-lead { margin: 0 0 12px; }
.plan-steps { margin: 4px 0; }
.plan-seats { display: grid; gap: 4px; }
.plan-seats input { width: 100%; }
.plan-renew { margin: 0; }
.plan-warning { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 159, 10, .16); }
.plan-usage { display: grid; gap: 10px; margin: 12px 0; }
.plan-usage li { display: grid; gap: 4px; }
.usage-bar { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--card2); overflow: hidden; accent-color: var(--green); }
.usage-bar::-webkit-progress-bar { background: var(--card2); }
.usage-bar::-webkit-progress-value { background: var(--green); border-radius: 3px; }
.usage-bar::-moz-progress-bar { background: var(--green); border-radius: 3px; }
.usage-near .usage-bar { accent-color: var(--amber); }
.usage-near .usage-bar::-webkit-progress-value { background: var(--amber); }
.usage-near .usage-bar::-moz-progress-bar { background: var(--amber); }
.usage-full .usage-bar { accent-color: var(--accent); }
.usage-full .usage-bar::-webkit-progress-value { background: var(--accent); }
.usage-full .usage-bar::-moz-progress-bar { background: var(--accent); }
.plan-rule { margin: 6px 0 0; }
/* pricing v9.1: the plan's one line under its name, and the Business note under the Crew 25 card */
.plan-tagline { margin: 2px 0 6px; color: var(--muted, inherit); }
.plan-biz-note { margin: 6px 0 0; }
.paused-mark { margin-left: 6px; }
.pause-list { margin: 8px 0; }
.plan-features, .plan-compare { margin: 8px 0; }
.plan-feature p { margin: 4px 0 8px; }
.plan-compare-wrap { overflow-x: auto; }
.plan-table { border-collapse: collapse; width: 100%; font-size: 0.85em; }
.plan-table th, .plan-table td { padding: 6px; border-bottom: 1px solid var(--line, #8884); text-align: left; vertical-align: top; }
#sheetBody .ann-body { white-space: pre-wrap; margin: 0 0 14px; }
#sheetBody .ann-body.ann-important { font-weight: 600; }
#sheetBody #annLink { margin-bottom: 10px; }
.plan-pill { margin-left: 8px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line, #8886); background: transparent; color: var(--muted); font-size: 0.8em; cursor: pointer; }
.plan-pill.plain { cursor: default; border-color: transparent; }
.plan-pill.accent { color: var(--accent); border-color: var(--accent); }
.plan-notice { margin: 0 0 12px; color: var(--green); }
.plan-trial-note { margin: 4px 0 0; }
.plan-feature-list { list-style: none; margin: 0 0 8px; padding: 0; }
.plan-feature-list li { margin: 2px 0; }
.plan-feature > summary { cursor: pointer; padding: 4px 0; }
.plan-features[open] ~ .plan-limits { display: none; }
.plan-every { margin: 8px 0 0; }

/* 99.75 (MESSAGE-TICKS-V1): ticks at the end of the time line of your own messages; read ones in the brand red (3:1 or more on every
   theme's background, as an icon needs); the button opens Seen by / Sent and Read */
.msg .ticks { border: 0; background: none; padding: 0 2px; margin-left: 4px; color: var(--muted); vertical-align: middle; cursor: pointer; line-height: 0; border-radius: 4px; }
.msg .ticks svg { width: 1rem; height: 1rem; }
.msg .ticks.read { color: var(--tick-read); }
.msg .ticks:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
:root { --tick-read: #e8332d; }
:root[data-dark="0"] { --tick-read: #d42a24; }
.tick-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tick-name { font-weight: 600; overflow-wrap: anywhere; }

/* 99.75 (S2): Quiet and notifications, the one Quiet, Mute and Hours row says what is on in the moon color */
.dnd-card .row-sub.on { color: var(--moon); font-weight: 600; }

/* 99.75 (REMINDERS-VOICE-V1): You > Account > Reminders, the box with the mic button beside it */
.rem-box { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.rem-box textarea { flex: 1 1 auto; min-width: 0; }
.rem-mic { flex: 0 0 auto; border: 1px solid var(--border); }
.rem-mic.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rem-mic:disabled { opacity: 0.55; }
.rem-list .rem-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rem-list .rem-row span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }

/* 99.75 (WAP-5, WCAG 1.4.4 and 1.4.10): on a narrow screen or at a big zoom, names and sub lines wrap instead of ending in "..." */
@media (max-width: 420px) {
  .space-btn #spaceName, .room-title, .item-title, .item-sub, .reply-quote span, .thread-title h2, .second-text, .name-line .name-text {
    white-space: normal; overflow-wrap: anywhere; text-overflow: clip; overflow: visible; max-width: none;
  }
}
/* 99.89: Done, Snooze 10 min and Delete on each waiting reminder */
.rem-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:none}

/* 118 REDESIGN: the same ink, space and hierarchy as the phone; Classic retains the rules above. */
:root[data-redesign="1"] { --radius: 18px; }
:root[data-redesign="1"] a,
:root[data-redesign="1"] .link,
:root[data-redesign="1"] .btn.ghost,
:root[data-redesign="1"] .icon-btn,
:root[data-redesign="1"] .tabbtn.on,
:root[data-redesign="1"] .item.selected .item-title::after,
:root[data-redesign="1"] .avatar.room { color: var(--ink); }
:root[data-redesign="1"] .btn.primary { color: var(--on-ink); background: var(--ink); }
:root[data-redesign="1"] .btn.primary:active { opacity: .8; }
:root[data-redesign="1"] .badge, :root[data-redesign="1"] .count { background: var(--ink); color: var(--on-ink); }
:root[data-redesign="1"] .tabbtn { font-size: .8125rem; min-height: 56px; padding: 6px; }
:root[data-redesign="1"] .tabbtn.on svg { background: var(--card2); border-radius: 16px; width: 56px; padding: 4px 14px; height: 32px; }
:root[data-redesign="1"] .tabbar { height: auto; min-height: calc(66px + var(--safe-bottom)); }
:root[data-redesign="1"] .tab { max-width: 680px; padding-bottom: calc(90px + var(--safe-bottom)); }
:root[data-redesign="1"] .room-card { background: transparent; padding: 12px 0; gap: 20px; }
:root[data-redesign="1"] .room-title { font-size: 1rem; font-weight: 500; color: var(--muted); }
:root[data-redesign="1"] .space-btn #spaceName { font-size: 1.875rem; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
:root[data-redesign="1"] .space-head { min-width: 0; }
:root[data-redesign="1"] #planPill, :root[data-redesign="1"] #plansTopBtn { display: none; }
:root[data-redesign="1"] #modeSeg { display: none; }
:root[data-redesign="1"] .ptt-area { min-height: 340px; justify-content: center; gap: 24px; padding: 26px 10px; }
:root[data-redesign="1"] .ptt { width: min(58vw, 232px); height: min(58vw, 232px); min-width: 180px; min-height: 180px; }
:root[data-redesign="1"] .ptt.armed { background: var(--card2); color: var(--ink); box-shadow: 0 0 0 8px var(--card2), 0 0 0 10px var(--ink); }
:root[data-redesign="1"] .ptt.armed::after { border-color: var(--ink); }
:root[data-redesign="1"] .ptt.live { background: #e8332d; color: white; }
:root[data-redesign="1"] .avatar.talking { box-shadow: 0 0 0 3px var(--amber); }
:root[data-redesign="1"] .ptt-note { font-size: .8125rem; }
:root[data-redesign="1"] .people-strip .who { font-size: .8125rem; }
:root[data-redesign="1"] .item-title, :root[data-redesign="1"] .item-sub { white-space: normal; overflow-wrap: anywhere; }
:root[data-redesign="1"] .item-actions, :root[data-redesign="1"] .row, :root[data-redesign="1"] .banner { flex-wrap: wrap; }
:root[data-redesign="1"] .banner span { min-width: 150px; }
:root[data-redesign="1"] .sheet { max-width: 620px; }
:root[data-redesign="1"] .btn, :root[data-redesign="1"] .link, :root[data-redesign="1"] summary { min-height: 44px; }
:root[data-redesign="1"] input:focus-visible, :root[data-redesign="1"] button:focus-visible,
:root[data-redesign="1"] a:focus-visible, :root[data-redesign="1"] summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.redesign-brand, .redesign-side-title, #redesignInvite { display: none; }
.redesign-room-side { display: contents; }
.redesign-all { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.redesign-all > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.redesign-all input[type="search"] { width: 100%; margin-bottom: 16px; }
.redesign-settings { display: flex; flex-direction: column; gap: 16px; }
.redesign-everyday { padding: 0 16px; }
.redesign-everyday .row-link { padding: 18px 0; border-bottom: 1px solid var(--line); }
.redesign-everyday .row-link:last-child { border: 0; }
.redesign-plan-feature { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 16px; }
.redesign-invite-kind { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 8px; }
.redesign-invite-kind > button { flex: 1 1 140px; }
.redesign-methods { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.redesign-methods .item { border-bottom: 1px solid var(--line); }
.redesign-methods [aria-pressed="true"] { background: var(--card2); box-shadow: inset 4px 0 var(--ink); }
.redesign-methods .item-title, .redesign-methods .item-sub { display: block; }
.redesign-search-hidden { display: none !important; }
:root[data-redesign="1"] .link-members { display: none; }
:root[data-redesign="1"] .invite-body > details > summary { font-weight: 600; padding: 14px 0; cursor: pointer; }
:root[data-redesign="1"] .invite-body > details { border-top: 1px solid var(--line); margin-top: 16px; }
:root[data-redesign="1"] .invite-body .btn.primary { margin-block: 16px; }
@media (min-width: 900px) {
  :root[data-redesign="1"] { --tabbar: 0px; }
  :root[data-redesign="1"] .main { padding-left: 196px; }
  :root[data-redesign="1"] .tabbar { inset: 0 auto 0 0; width: 196px; max-width: none; height: 100dvh; margin: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 26px 14px; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 8px; }
  :root[data-redesign="1"] .tabbtn { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 12px 16px; border-radius: 14px; text-align: left; }
  :root[data-redesign="1"] .tabbtn.on { background: var(--card2); font-weight: 700; }
  :root[data-redesign="1"] .tabbtn.on svg { background: transparent; width: 26px; height: 26px; padding: 0; }
  .redesign-brand { display: block; font-size: 1.5rem; font-weight: 800; padding: 4px 16px 28px; }
  :root[data-redesign="1"] .tab { max-width: 1140px; padding: 32px 36px 48px; }
  :root[data-redesign="1"] .banners { padding-left: 0; }
  :root[data-redesign="1"] .room-card { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 36px; align-items: start; }
  :root[data-redesign="1"] .room-card > * { grid-column: 1; min-width: 0; }
  :root[data-redesign="1"] .room-card > .room-card-head { grid-column: 1 / -1; }
  :root[data-redesign="1"] .room-card > .redesign-room-side { display: flex; flex-direction: column; gap: 18px; grid-column: 2; grid-row: 2 / span 20; padding-left: 24px; border-left: 1px solid var(--line); }
  .redesign-side-title { display: block; color: var(--muted); text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; }
  #redesignInvite { display: block; }
  :root[data-redesign="1"] .people-strip { flex-direction: column; gap: 18px; overflow: visible; }
  :root[data-redesign="1"] .people-strip li { flex-direction: row; width: 100%; flex-wrap: wrap; gap: 12px; }
  :root[data-redesign="1"] .people-strip .who { width: auto; text-align: left; font-size: .9375rem; }
  :root[data-redesign="1"] .ptt-area { min-height: 440px; padding-block: 50px; }
  :root[data-redesign="1"] .composer { bottom: 0; }
}
@media (max-width: 420px) {
  :root[data-redesign="1"] .tab { padding-inline: 16px; }
  :root[data-redesign="1"] .head-side { gap: 0; }
  :root[data-redesign="1"] .space-btn #spaceName { font-size: 1.6rem; }
}

:root[data-redesign="1"] .avatar.talking.own { box-shadow: 0 0 0 3px #e8332d; }

.redesign-notify { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid var(--amber); }
.redesign-notify strong { flex: 1 1 180px; }

/* 118 review 3: the group and its chevron share one bounded line, including at 360 px. */
:root[data-redesign="1"] .space-head { flex: 1; min-width: 0; }
:root[data-redesign="1"] .head-side { flex: none; }
:root[data-redesign="1"] .space-btn { display: flex; width: 100%; min-width: 0; justify-content: flex-start; gap: 2px; }
:root[data-redesign="1"] .space-btn #spaceName { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 100.3 (R7-10): a phone has no hover, so a long group name takes two lines instead of ending in "..." */
@media (max-width: 420px) {
  :root[data-redesign="1"] .space-btn #spaceName { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; text-overflow: clip; }
}
:root[data-redesign="1"] .space-btn svg { flex: none; }

:root[data-redesign="1"] #tab-you > input[type="search"] { width: 100%; min-height: 48px; }
:root[data-redesign="1"] .redesign-everyday .row-sub { white-space: normal; overflow-wrap: anywhere; }

/* 118 review 7: tab and rail labels retain a readable minimum and follow browser zoom. */
:root[data-redesign="1"] .tabbar .tabbtn { font-size: max(.875rem, 14px); line-height: 1.4; }
:root[data-redesign="1"] .tabbar .tabbtn span { font-size: inherit; }

/* 100.1 web cleanup (owner 2026-11-04). No new features: spacing, previews and labels. */
#convListView .tab-head { margin-bottom: 14px; }
#convListView .item-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-redesign="1"] .room-card { padding: 16px; }
:root[data-redesign="1"] .ptt-area { gap: 14px; }
.ptt-note:empty { display: none; }
.redesign-label { display: block; font-size: .6875rem; line-height: 1.3; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.redesign-label:has(+ [hidden]) { display: none; }
:root[data-redesign="1"] .space-head { flex-direction: column; align-items: flex-start; }
@media (min-width: 900px) {
  /* The side column spans 20 rows, so each row's gap was adding blank height under Talk. */
  :root[data-redesign="1"] .room-card { padding: 24px 28px; row-gap: 0; grid-auto-rows: min-content; }
  :root[data-redesign="1"] .room-card > .room-card-head { margin-bottom: 12px; }
  :root[data-redesign="1"] .room-card > :not(.room-card-head):not(.redesign-room-side) { margin-bottom: 12px; }
  :root[data-redesign="1"] .ptt-area { min-height: 0; padding-block: 28px; }
  :root[data-redesign="1"] .tabbar .badge { top: 3px; left: 30px; }
  :root[data-redesign="1"] .people-strip li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; justify-items: start; }
  :root[data-redesign="1"] .people-strip li > .avatar { grid-row: 1 / span 4; }
  :root[data-redesign="1"] .people-strip li > :not(.avatar):not(.quiet-mark) { grid-column: 2; min-width: 0; max-width: 100%; }
  :root[data-redesign="1"] .people-strip .status-text, :root[data-redesign="1"] .people-strip .where { width: auto; max-width: 100%; text-align: left; font-size: .75rem; }
  :root[data-redesign="1"] .people-strip .badge-chip { max-width: 100%; }
  :root[data-redesign="1"] .people-all { align-self: flex-start; min-height: 0; padding-inline: 0; }
  #redesignInvite { width: 100%; box-sizing: border-box; }
}
/* 100.2 (A2, B8): a held photo says so in its bubble */
.photo-held { display: block; padding: 6px 0; font-style: italic; }