/* talkomatic. web client. Layout and components; colors and fonts come from themes.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .fill { fill: currentColor; stroke: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ app frame */
.app {
  position: relative;
  min-height: calc(100vh / var(--z, 1));
  min-height: calc(100dvh / var(--z, 1));
  display: flex;
  flex-direction: column;
  padding: 0 clamp(16px, 2.5vw, 48px);
  isolation: isolate;
  overflow-x: hidden;
}
.app > * { position: relative; z-index: 1; }
.app[data-view="room"] { height: calc(100vh / var(--z, 1)); height: calc(100dvh / var(--z, 1)); overflow: hidden; }
.view { display: none; }
.app[data-view="lobby"] .view-lobby,
.app[data-view="room"] .view-room,
.app[data-view="banned"] .view-banned { display: flex; }
.app:not([data-view="room"]) [data-room-only] { display: none !important; }

/* decorations */
.deco { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.deco svg { display: none; position: absolute; width: auto; height: auto; stroke: none; }
:root[data-theme="signal"] .deco-signal { display: block; width: min(1100px, 62vw); left: 50%; top: -1%; transform: translateX(-42%); }
.deco-signal .d-line { fill: none; stroke: var(--deco); stroke-width: 1; }
.deco-signal .d-dash { stroke-dasharray: 2 10; }
.deco-signal .d-faint { opacity: 0.7; }
.deco-signal .d-accent { fill: none; stroke: var(--accent); stroke-width: 2; }
:root[data-theme="space"] .deco-space { display: block; inset: 0; width: 100%; height: 100%; }
.deco-space .blob { fill: var(--blob); }
.deco-space .stars { fill: var(--star); }
.deco-space .paper { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.deco-space .ink-line { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.deco-space .ink-thin { fill: none; stroke: var(--ink); stroke-width: 2; }
.deco-space .ring-gap { fill: none; stroke: var(--paper); stroke-width: 10; }
.deco-space .beam { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 3 6; }
.deco-space .dot { fill: var(--ink); }
:root[data-theme="noir"] .app { background: radial-gradient(1200px 700px at 50% 22%, var(--bg-glow) 0%, var(--bg-2) 55%, var(--bg) 100%); }

/* ------------------------------------------------------------ top bar */
.topbar {
  height: 76px;
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}
:root[data-theme="signal"] .topbar { border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-logo { height: 34px; width: auto; max-width: 160px; object-fit: contain; }
.brand-mark { width: 26px; height: 26px; }
.brand-mark circle { fill: var(--fg); stroke: none; }
.brand-mark path { stroke: var(--bg); stroke-width: 2.4; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="signal"] .brand-name { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.02em; text-transform: uppercase; }
:root[data-theme="space"] .brand-name { font-family: var(--font-ui); font-weight: 600; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; }
:root[data-theme="noir"] .brand-name { font-weight: 700; font-size: 16px; letter-spacing: 0.24em; text-transform: uppercase; }
:root[data-theme="noir"] .brand-mark { display: none; }

.nav { margin: 0 auto; display: flex; align-items: center; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: var(--ui-tracking); text-transform: var(--ui-case); }
.nav a { text-decoration: none; padding: 0 clamp(14px, 1.6vw, 30px); line-height: 44px; color: var(--muted); }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); }
:root[data-theme="signal"] .nav a + a { border-left: 1px solid var(--line); }
:root[data-theme="signal"] .nav a[aria-current="page"] { color: var(--accent); }
:root[data-theme="space"] .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
:root[data-theme="noir"] .nav { font-weight: 500; }
.top-actions { display: flex; gap: 10px; align-items: center; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-case);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius);
  white-space: nowrap;
}
.btn:hover { border-color: var(--line-strong); }
.btn.icon { width: 44px; padding: 0; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-plus { display: none; }

:root[data-theme="signal"] .btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); padding: 0 0 0 22px; gap: 0; }
:root[data-theme="signal"] .btn.primary > span:first-child { padding-right: 22px; }
:root[data-theme="signal"] .btn.primary .btn-plus { display: grid; place-items: center; align-self: stretch; width: 44px; background: var(--accent); color: var(--on-accent); font-size: 18px; }
:root[data-theme="signal"] .btn.primary.wide { justify-content: space-between; }
/* Primary buttons without the accent block (icons, short actions) stay centered. */
:root[data-theme="signal"] .btn.primary:not(:has(.btn-plus)) { padding: 0 18px; gap: 8px; justify-content: center; }
:root[data-theme="signal"] .btn.primary:not(:has(.btn-plus)) > span:first-child { padding-right: 0; }
:root[data-theme="signal"] .btn.primary.icon { padding: 0; }
.btn-plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

:root[data-theme="space"] .btn { border: 2px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 3px 3px 0 var(--line); font-weight: 500; font-size: 14px; }
:root[data-theme="space"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
:root[data-theme="space"] .btn.primary { background: var(--accent); color: var(--on-accent); }

:root[data-theme="noir"] .btn { border: 0; background: var(--surface-solid); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); font-weight: 500; font-size: 12px; }
:root[data-theme="noir"] .btn:hover { background: var(--bg-2); }
:root[data-theme="noir"] .btn.primary { background: var(--accent); color: var(--on-accent); }

/* ------------------------------------------------------------ display type */
.display { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: var(--display-tracking); line-height: 0.92; }
:root[data-theme="signal"] .display { text-transform: uppercase; }
:root[data-theme="space"] .display {
  text-transform: uppercase;
  color: var(--title-fill);
  -webkit-text-stroke: 3px var(--line-strong);
  paint-order: stroke fill;
  text-shadow: 1px 1px 0 var(--line-strong), 2px 2px 0 var(--line-strong), 3px 3px 0 var(--line-strong), 4px 4px 0 var(--line-strong), 5px 5px 0 var(--line-strong), 6px 6px 0 var(--line-strong), 7px 7px 0 var(--line-strong), 8px 8px 0 var(--line-strong);
  line-height: 1.05;
}
:root[data-theme="noir"] .display { font-weight: 700; text-transform: uppercase; line-height: 1; text-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
.title-dot { display: none; color: var(--accent); }
:root[data-theme="signal"] .title-dot { display: inline; }

/* ------------------------------------------------------------ room */
.view-room { flex: 1; min-height: 0; flex-direction: column; }
.room-head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(14px, calc(2.4vh / var(--z, 1)), 30px) 0 clamp(10px, calc(1.6vh / var(--z, 1)), 18px); }
.room-title { font-size: clamp(40px, min(6.2vw, calc(10vh / var(--z, 1))), 108px); min-width: 0; overflow-wrap: anywhere; }
.room-meta { margin: 0; display: grid; grid-template-columns: auto auto; gap: 4px 18px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 18px; position: relative; flex: none; }
.room-meta div { display: contents; }
.room-meta dt { color: var(--muted); }
.room-meta dd { margin: 0; }
.room-meta dd:first-of-type { color: var(--accent); }
:root[data-theme="signal"] .room-meta::before,
:root[data-theme="signal"] .room-meta::after { content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--line-strong); }
:root[data-theme="signal"] .room-meta::before { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
:root[data-theme="signal"] .room-meta::after { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }

:root[data-theme="space"] .room-head,
:root[data-theme="noir"] .room-head { flex-direction: column-reverse; align-items: center; text-align: center; gap: 10px; }
:root[data-theme="space"] .room-title { font-size: clamp(34px, min(4.4vw, calc(8vh / var(--z, 1))), 84px); }
:root[data-theme="noir"] .room-title { font-size: clamp(30px, min(3.4vw, calc(6.5vh / var(--z, 1))), 64px); }
:root[data-theme="space"] .room-meta,
:root[data-theme="noir"] .room-meta { display: flex; gap: 18px; padding: 0; font-weight: 500; letter-spacing: 0.22em; }
:root[data-theme="space"] .room-meta div,
:root[data-theme="noir"] .room-meta div { display: flex; gap: 8px; }
:root[data-theme="noir"] .room-meta { font-size: 12px; letter-spacing: 0.32em; color: var(--muted); }
:root[data-theme="noir"] .room-meta dd:first-of-type { color: inherit; }

.seats { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); padding: 8px 0 clamp(14px, calc(2vh / var(--z, 1)), 22px); }
:root[data-theme="space"] .seats { padding-right: 8px; padding-bottom: clamp(18px, calc(3vh / var(--z, 1)), 34px); }

.seat {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.seat-id { width: clamp(210px, 18vw, 340px); flex: none; display: flex; align-items: center; gap: clamp(12px, 1.2vw, 20px); padding: 0 clamp(14px, 1.4vw, 26px); border-right: 1px solid var(--line); min-width: 0; }
.seat-num { font-family: var(--font-display); font-size: clamp(34px, min(3.4vw, calc(6.5vh / var(--z, 1))), 64px); line-height: 1; color: var(--faint); flex: none; }
.seat-avatar { display: none; }
.seat-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.seat-name { font-family: var(--font-display); font-size: clamp(20px, min(1.5vw, calc(3vh / var(--z, 1))), 28px); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.seat-meta, .seat-state { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat[data-typing] .seat-state,
.seat[data-typing] .seat-num { color: var(--accent); }
.seat-body { flex: 1; min-width: 0; display: flex; align-items: center; padding: 10px clamp(16px, 1.6vw, 30px); }
.seat-text, .seat-input {
  margin: 0;
  width: 100%;
  max-height: 100%;
  font-family: var(--font-text);
  font-size: clamp(15px, min(1.15vw, calc(2.3vh / var(--z, 1))), 22px);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  scrollbar-width: thin;
}
.seat-input { height: auto; resize: none; border: 0; padding: 0; background: transparent; color: var(--fg); caret-color: var(--accent); outline: none; }
.seat-input::placeholder { color: var(--faint); }
.seat[data-typing] .seat-text::after { content: ''; display: inline-block; width: 0.5em; height: 1.1em; margin-left: 3px; vertical-align: -0.2em; background: var(--accent); animation: blink 1s steps(1) infinite; }
.seat[data-hidden] .seat-text { color: var(--faint); font-style: italic; }
.seat-menu { align-self: center; margin-right: clamp(10px, 1vw, 20px); color: var(--muted); border-color: transparent; }
.seat[data-mine] .seat-menu, .seat[data-empty] .seat-menu { display: none; }
.seat[data-mine] { border-color: var(--line); }
.seat[data-empty] .seat-text { color: var(--faint); }
.seat[data-empty] .seat-name { color: var(--faint); }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .seat[data-typing] .seat-text::after { animation: none; } }

/* signal: HUD corners */
:root[data-theme="signal"] .seat::before,
:root[data-theme="signal"] .seat::after { content: ''; position: absolute; width: 16px; height: 16px; border: 0 solid var(--line-strong); pointer-events: none; }
:root[data-theme="signal"] .seat::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
:root[data-theme="signal"] .seat::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
:root[data-theme="signal"] .seat[data-empty] { background: transparent; border-style: dashed; }

/* space: ink cards */
:root[data-theme="space"] .seat { border: 2.5px solid var(--line); }
:root[data-theme="space"] .seat-id { border-right: 2.5px solid var(--line); }
:root[data-theme="space"] .seat-num { display: none; }
:root[data-theme="space"] .seat-avatar { display: grid; place-items: center; flex: none; width: clamp(40px, min(2.8vw, calc(5.5vh / var(--z, 1))), 52px); aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--line); background: var(--surface-solid); font-family: var(--font-display); font-size: clamp(16px, 1.1vw, 20px); }
:root[data-theme="space"] .seat[data-typing] .seat-avatar { background: var(--accent); color: var(--on-accent); }
:root[data-theme="space"] .seat-name { font-size: clamp(17px, min(1.2vw, calc(2.6vh / var(--z, 1))), 22px); }
:root[data-theme="space"] .seat-meta, :root[data-theme="space"] .seat-state { font-weight: 500; font-size: 13px; letter-spacing: 0.08em; }
:root[data-theme="space"] .seat[data-typing] .seat-state { color: var(--fg); font-weight: 600; }
:root[data-theme="space"] .seat-menu { border: 2px solid var(--line); border-radius: 50%; box-shadow: none; color: var(--fg); }
:root[data-theme="space"] .seat[data-empty] { border-style: dashed; box-shadow: none; }

/* noir: soft cards */
:root[data-theme="noir"] .seat { border: 0; }
:root[data-theme="noir"] .seat-id { border-right: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
:root[data-theme="noir"] .seat-id::after { content: ''; position: absolute; left: clamp(210px, 18vw, 340px); top: 22%; bottom: 22%; width: 1px; background: var(--line-strong); opacity: 0.6; }
:root[data-theme="noir"] .seat-num { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--faint); }
:root[data-theme="noir"] .seat-who { flex-direction: column; }
:root[data-theme="noir"] .seat-name { font-family: var(--font-ui); font-weight: 600; font-size: clamp(15px, 1vw, 18px); letter-spacing: 0.14em; }
:root[data-theme="noir"] .seat-meta, :root[data-theme="noir"] .seat-state { font-weight: 500; letter-spacing: 0.2em; }
:root[data-theme="noir"] .seat-text, :root[data-theme="noir"] .seat-input { font-weight: 300; font-size: clamp(16px, min(1.3vw, calc(2.6vh / var(--z, 1))), 24px); }
:root[data-theme="noir"] .seat[data-typing] .seat-text::after { width: 2px; }
:root[data-theme="noir"] .seat[data-empty] { opacity: 0.6; }

/* ------------------------------------------------------------ status bar */
.statusbar { height: 52px; flex: none; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:root[data-theme="signal"] .statusbar { border-top: 1px solid var(--line); color: var(--fg); }
.status { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.status-dot[data-state="online"] { background: var(--accent); }
.status-dot[data-state="offline"] { background: transparent; border: 1.5px solid var(--faint); }
.rule { flex: 1; height: 10px; }
:root[data-theme="signal"] .rule { background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12px); }
:root[data-theme="space"] .rule { height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
:root[data-theme="noir"] .rule { height: 1px; background: var(--line); }
:root[data-theme="noir"] .statusbar { font-weight: 500; letter-spacing: 0.24em; }

:root[data-theme="space"] .statusbar > .status,
:root[data-theme="space"] .statusbar > span:not(.rule):not(.status) { background: var(--bg); color: var(--fg); border: 2px solid var(--line); border-radius: 999px; padding: 4px 12px; }
:root[data-theme="space"] .statusbar > span:empty { display: none; }

/* ------------------------------------------------------------ lobby */
.view-lobby { flex: 1; flex-direction: column; gap: clamp(20px, calc(3vh / var(--z, 1)), 36px); padding: clamp(20px, calc(4vh / var(--z, 1)), 48px) 0 32px; }
.hero { display: flex; flex-direction: column; gap: 14px; }
.hero .display { font-size: clamp(56px, 9vw, 168px); }
.lede { margin: 0; max-width: 60ch; color: var(--muted); font-size: 15px; }
:root[data-theme="space"] .hero, :root[data-theme="noir"] .hero { align-items: center; text-align: center; }
:root[data-theme="space"] .hero .display { font-size: clamp(48px, 7vw, 132px); }
:root[data-theme="noir"] .hero .display { font-size: clamp(40px, 5.4vw, 96px); }
:root[data-theme="noir"] .lede { letter-spacing: 0.06em; }

.lobby-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
:root[data-theme="space"] .panel { border-width: 2.5px; }
:root[data-theme="noir"] .panel { border: 0; padding: 30px; }
.panel-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; text-transform: uppercase; }
:root[data-theme="noir"] .panel-title { font-weight: 600; font-size: 18px; letter-spacing: 0.16em; }
:root[data-theme="space"] .panel-title { font-size: 22px; }
.section-title { margin: 8px 0 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.rooms { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rooms-head { display: flex; align-items: baseline; gap: 14px; }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--gap); }
.room-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
:root[data-theme="space"] .room-card { border-width: 2.5px; }
:root[data-theme="noir"] .room-card { border: 0; }
:root[data-theme="signal"] .room-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px; border-left: 2px solid var(--line-strong); border-top: 2px solid var(--line-strong); }
.room-card-head { display: flex; align-items: baseline; gap: 12px; }
.room-card-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; flex: 1; }
:root[data-theme="noir"] .room-card-name { font-weight: 600; font-size: 16px; letter-spacing: 0.14em; }
:root[data-theme="space"] .room-card-name { font-size: 19px; }
.room-card-count { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); }
.room-card-bar { display: flex; gap: 5px; }
.room-card-bar span { flex: 1; height: 5px; background: var(--line); border-radius: 3px; }
.room-card-bar span[data-on] { background: var(--accent); }
.room-card-people { margin: 0; font-family: var(--font-text); font-size: 13px; color: var(--muted); min-height: 1.4em; overflow-wrap: anywhere; }
.room-card-join { align-self: flex-start; }
.room-card[data-full] .room-card-join { pointer-events: none; opacity: 0.5; }
.empty { color: var(--muted); }

/* ------------------------------------------------------------ forms */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field.grow { flex: 1; }
.field label, .field legend { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0; }
.field legend { margin-bottom: 7px; }
input:not([type="radio"]):not([type="color"]):not([type="checkbox"]), select {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: min(var(--radius), 12px);
  background: var(--input);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 15px;
  min-width: 0;
}
select { background-color: var(--surface-solid); }
:root[data-theme="space"] input:not([type="radio"]):not([type="color"]):not([type="checkbox"]),
:root[data-theme="space"] select { border-width: 2px; border-color: var(--line); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-error { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--accent); }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }

.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented label { position: relative; flex: 1; min-width: 90px; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented label > span { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.segmented input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--fg); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-theme="space"] .segmented label > span { border-width: 2px; }

/* ------------------------------------------------------------ dialogs */
.dialog { width: min(520px, calc(calc(100vw / var(--z, 1)) - 32px)); max-height: calc(calc(100dvh / var(--z, 1)) - 32px); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); color: var(--fg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); }
.dialog-wide { width: min(760px, calc(calc(100vw / var(--z, 1)) - 32px)); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
:root[data-theme="space"] .dialog { border: 2.5px solid var(--line); box-shadow: 8px 8px 0 var(--line); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dialog .form + .form { margin-top: 20px; }

.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.theme-option { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.theme-option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-option strong { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.theme-preview { height: 70px; border-radius: 6px; display: flex; flex-direction: column; gap: 5px; padding: 9px; overflow: hidden; }
.theme-preview i { display: block; flex: 1; border-radius: 2px; }
.theme-preview[data-t="signal"] { background: #ecebe6; }
.theme-preview[data-t="signal"] i { border: 1px solid #11111140; }
.theme-preview[data-t="signal"] i:first-child { border-left: 6px solid #e5432b; }
.theme-preview[data-t="space"] { background: radial-gradient(40px 30px at 90% 10%, #111 98%, transparent), #ecebe8; }
.theme-preview[data-t="space"] i { background: #fff; border: 1.5px solid #111; border-radius: 6px; box-shadow: 2px 2px 0 #111; }
.theme-preview[data-t="noir"] { background: radial-gradient(circle at 50% 0, #2c2d32, #17181b); }
.theme-preview[data-t="noir"] i { background: #24252a; box-shadow: 0 6px 10px -6px #000; }

.accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; width: 36px; height: 36px; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--line); }
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--surface-solid), 0 0 0 5px var(--fg); }
.swatch input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 4px; }
.custom-color { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.custom-color input { width: 44px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; }

.seat-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.seat-badge { width: 16px; height: 16px; flex: none; color: var(--accent); display: none; }
.seat[data-member] .seat-badge { display: block; }
.room-card-tag, .tag-inline { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--accent); color: var(--fg); white-space: nowrap; }
.auth-tabs { margin: 12px 0 18px; }
.auth-tabs label { min-width: 0; }
.account-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-row #account-state { flex: 1; min-width: 180px; font-size: 14px; }
.small { font-size: 13px; }
.segmented input:disabled + span { opacity: 0.45; cursor: not-allowed; }

.brand-signet { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.seat-role { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: var(--on-accent); }
.menu-staff { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.menu-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 6px 12px 2px; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.btn.staff { border-color: var(--accent); }

/* ------------------------------------------------------------ menu + toasts */
.menu { position: fixed; z-index: 50; min-width: 200px; display: flex; flex-direction: column; padding: 6px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: min(var(--radius), 12px); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4); }
:root[data-theme="space"] .menu { border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--line); }
.menu button { text-align: left; min-height: 40px; padding: 0 12px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; font-size: 14px; }
.menu button:hover, .menu button:focus-visible { background: var(--input); }
.toasts { position: fixed; z-index: 60; left: 50%; bottom: 72px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(calc(100vw / var(--z, 1)) - 32px)); }
.toast { pointer-events: auto; padding: 12px 18px; background: var(--fg); color: var(--bg); border-radius: min(var(--radius), 12px); font-size: 14px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.5); }
.toast[data-level="warn"] { background: var(--accent); color: var(--on-accent); }

/* ------------------------------------------------------------ banned */
.view-banned { flex: 1; flex-direction: column; justify-content: center; gap: 16px; max-width: 720px; }
.view-banned .display { font-size: clamp(40px, 6vw, 96px); }

/* ------------------------------------------------------------ small screens */
@media (max-width: 900px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .seat-id { width: 170px; }
  :root[data-theme="noir"] .seat-id::after { left: 170px; }
  .room-meta { display: none; }
  .nav a[href="/cli"] { display: none; }
}
/* Phones: the room becomes a messenger-style view. Your own seat is the
   composer pinned to the bottom (above the keyboard), everyone else is a
   compact card above it that grows with their text. Empty seats collapse
   into one line. */
@media (max-width: 640px), (max-height: 520px) {
  /* Pinned to the visible area: iOS keeps calc(100dvh / var(--z, 1)) when the keyboard opens and
     pans the page instead, so follow visualViewport (set in app.js). */
  .app[data-view="room"] { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, calc(100dvh / var(--z, 1))); min-height: 0; padding: 0 10px; }
  .app[data-view="room"] .seats { overscroll-behavior: contain; }
  .app[data-view="room"] .seat[data-mine] { margin-bottom: max(8px, env(safe-area-inset-bottom)); }
  .app[data-view="room"][data-keyboard] .seat[data-mine] { margin-bottom: 8px; }
  .app[data-view="room"] .statusbar { display: none; }
  .nav { display: none; }
  .topbar { height: 56px; gap: 8px; justify-content: space-between; }
  .brand-name { font-size: 18px !important; }
  .top-actions { gap: 6px; }
  .top-actions .btn > span:not(.btn-plus):not(.dm-count) { display: none; }
  .top-actions .btn { width: 44px; padding: 0; }
  :root[data-theme="signal"] .top-actions .btn.primary { padding: 0; }
  :root[data-theme="signal"] .top-actions .btn.primary .btn-plus { width: 44px; }
  #btn-leave .btn-plus { display: none !important; }
  #btn-leave .mobile-only { display: block; }

  .room-head { flex-direction: row !important; align-items: baseline !important; text-align: left !important; padding: 6px 0 8px; gap: 10px; }
  .room-title { font-size: 26px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none !important; }
  :root[data-theme="space"] .room-title { -webkit-text-stroke-width: 1.5px; text-shadow: 2px 2px 0 var(--line-strong) !important; }
  .room-meta { display: none !important; }
  .room-count { display: inline !important; flex: none; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: auto; }

  .seats { flex: 1; min-height: 0; overflow-y: auto; gap: 10px; padding: 4px 0 0; scroll-padding-bottom: 160px; }
  .seat { flex: none; flex-direction: column; min-height: 0; }
  .seat[data-empty] { display: none; }
  .seat-id { width: auto; border-right: 0 !important; border-bottom: 0 !important; padding: 10px 12px 0; gap: 10px; }
  :root[data-theme="noir"] .seat-id { flex-direction: row; align-items: center; justify-content: flex-start; }
  :root[data-theme="noir"] .seat-id::after { display: none; }
  .seat-who { flex-direction: row !important; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .seat-num { font-size: 22px; }
  :root[data-theme="space"] .seat-avatar { width: 30px; font-size: 13px; border-width: 2px; }
  .seat-name { font-size: 17px !important; }
  .seat-meta { display: none; }
  .seat-body { padding: 6px 12px 12px; align-items: flex-start; }
  .seat-text { font-size: 16px !important; max-height: 7.5em; }
  .seat-menu { position: absolute; right: 2px; top: 2px; margin: 0; }

  /* the composer */
  .seat[data-mine] { order: 99; position: sticky; bottom: 0; z-index: 3; margin-top: auto; background: var(--surface-solid); box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, 0.35); border-color: var(--accent); }
  :root[data-theme="space"] .seat[data-mine] { box-shadow: 4px 4px 0 var(--line); }
  .seat[data-mine] .seat-input { font-size: 16px !important; min-height: 2.6em; max-height: calc(34vh / var(--z, 1)); }
}
.room-count { display: none; }
.mobile-only { display: none; }

/* ---------------------------------------------------------- official logo */
:root { --brand-fill: #FF8D3E; }
:root[data-brand-color="accent"] { --brand-fill: var(--accent); }
.brand-official { display: flex; align-items: center; --tk-h: 34px; }
.brand-official[hidden] { display: none; }
:root[data-theme="space"] .brand-official, :root[data-theme="noir"] .brand-official { --tk-h: 26px; }
.tk-logo { display: block; height: var(--tk-h); width: calc(var(--tk-h) * 1771 / 628); fill: var(--brand-fill); color: var(--brand-fill); overflow: hidden; transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.25s; }
.tk-g { transform-box: fill-box; transform-origin: center; }
.tk-g path { stroke: currentColor; stroke-width: 0; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tk-caret { fill: currentColor; opacity: 0; }

/* Server-rendered logo before the scripts run: letters wait for the intro,
   and appear on their own if the scripts never start. */
.tk-logo[data-intro="pending"] .tk-g { animation: tk-reveal 0.3s 1.6s both; }
@keyframes tk-reveal { from { opacity: 0; } to { opacity: 1; } }

/* 1 Typewriter: typed letter by letter like live text in a room */
.tk-logo[data-intro="typewriter"] .tk-g { animation: tk-type 1.9s steps(1, end) both; }
.tk-logo[data-intro="typewriter"] .tk-1 { animation-name: tk-type1; }
.tk-logo[data-intro="typewriter"] .tk-2 { animation-name: tk-type2; }
.tk-logo[data-intro="typewriter"] .tk-3 { animation-name: tk-type3; }
.tk-logo[data-intro="typewriter"] .tk-4 { animation-name: tk-type4; }
@keyframes tk-type1 { 0% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes tk-type2 { 0% { opacity: 0; } 36%, 100% { opacity: 1; } }
@keyframes tk-type3 { 0% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes tk-type4 { 0% { opacity: 0; } 72%, 100% { opacity: 1; } }
.tk-logo[data-intro="typewriter"] .tk-caret { animation: tk-caret 1.9s steps(1, end) both, tk-blink 0.38s steps(1, end) 5; }
@keyframes tk-caret { 0% { opacity: 1; transform: translateX(0); } 18% { transform: translateX(466px); } 36% { transform: translateX(932px); } 54% { transform: translateX(1398px); } 72% { transform: translateX(1864px); } 90%, 100% { opacity: 0; transform: translateX(1864px); } }
@keyframes tk-blink { 50% { fill-opacity: 0; } }

/* 2 Turn: a copy of the t swings over and becomes the A */
.tk-logo[data-intro="turn"] .tk-g { animation: 1.7s cubic-bezier(0.65, 0, 0.35, 1) both; }
.tk-logo[data-intro="turn"] .tk-1 { animation-name: tk-turn1; }
.tk-logo[data-intro="turn"] .tk-2 { animation-name: tk-turn2; }
.tk-logo[data-intro="turn"] .tk-3 { animation-name: tk-turn3; }
.tk-logo[data-intro="turn"] .tk-4 { animation-name: tk-turn4; }
@keyframes tk-turn1 { 0% { opacity: 0; transform: scale(0.6); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes tk-turn2 { 0%, 18% { opacity: 0; transform: translateX(-466px) rotate(-180deg); } 19% { opacity: 1; transform: translateX(-466px) rotate(-180deg); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes tk-turn3 { 0%, 60% { opacity: 0; transform: translateY(180px); } 82%, 100% { opacity: 1; transform: none; } }
@keyframes tk-turn4 { 0%, 70% { opacity: 0; transform: translateY(180px); } 92%, 100% { opacity: 1; transform: none; } }

/* 3 Draw: outlines like a pen stroke, then the fill */
.tk-logo[data-intro="draw"] .tk-g path { animation: tk-draw 2.2s ease-in-out both; }
.tk-logo[data-intro="draw"] .tk-2 path { animation-delay: 0.12s; }
.tk-logo[data-intro="draw"] .tk-3 path { animation-delay: 0.24s; }
.tk-logo[data-intro="draw"] .tk-4 path { animation-delay: 0.36s; }
@keyframes tk-draw { 0% { stroke-width: 10; stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; } 60% { stroke-width: 10; stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; } 85%, 100% { stroke-width: 10; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; } }

/* 5 Slot: each letter rises out of the baseline */
.tk-logo[data-intro="slot"] .tk-g { animation: tk-slot 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tk-logo[data-intro="slot"] .tk-2 { animation-delay: 0.1s; }
.tk-logo[data-intro="slot"] .tk-3 { animation-delay: 0.2s; }
.tk-logo[data-intro="slot"] .tk-4 { animation-delay: 0.3s; }
@keyframes tk-slot { 0% { clip-path: inset(100% 0 0 0); transform: translateY(160px); } 100% { clip-path: inset(0 0 0 0); transform: none; } }

/* Signet: k, then L sink into the baseline, the logo narrows to "tA".
   Back to the wordmark: they rise again, L first. */
.tk-3, .tk-4 { transition: clip-path 0.38s cubic-bezier(0.5, 0, 0.75, 0), transform 0.38s cubic-bezier(0.5, 0, 0.75, 0); clip-path: inset(0 0 0 0); }
.tk-3 { transition-delay: 0.6s; }
.tk-4 { transition-delay: 0.72s; }
.tk-logo[data-signet] { width: calc(var(--tk-h) * 839 / 628); transition-delay: 0.2s; }
.tk-logo[data-signet] .tk-3, .tk-logo[data-signet] .tk-4 { clip-path: inset(0 0 100% 0); transform: translateY(200px); }
.tk-logo[data-signet] .tk-4 { transition-delay: 0s; }
.tk-logo[data-signet] .tk-3 { transition-delay: 0.1s; }
.tk-logo:not([data-signet]) { transition-delay: 0s; }
.tk-logo:not([data-signet]) .tk-3, .tk-logo:not([data-signet]) .tk-4 { transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  .tk-logo, .tk-3, .tk-4 { transition: none; }
  .tk-logo[data-intro] .tk-g, .tk-logo[data-intro] .tk-g path { animation: none; opacity: 1; }
  .tk-logo[data-intro] .tk-caret { animation: none; }
}
/* phones: the signet only */
@media (max-width: 640px), (max-height: 520px) {
  .brand-official { --tk-h: 30px !important; }
  .tk-logo { width: calc(var(--tk-h) * 839 / 628); }
  .tk-logo .tk-3, .tk-logo .tk-4 { display: none; }
}

/* sign-in: passkeys and the second step */
.passkey-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.passkey-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.auth-tabs[hidden] { display: none; }
form[aria-busy] { cursor: progress; }
form[aria-busy] button { opacity: 0.6; }
#mfa-code { font-family: var(--font-mono, monospace); font-size: 20px; letter-spacing: 0.2em; }
#btn-staff[data-locked] { border-style: dashed; opacity: 0.8; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { color: var(--fg); }

/* no page zoom on phones (double tap and pinch); see also boot.js */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------------------------------------------------------- badges */
.badge-row { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.badge-row[hidden] { display: none; }
.badge-chip { --badge-size: 18px; display: inline-grid; place-items: center; flex: none; width: var(--badge-size); height: var(--badge-size); border-radius: 50%; background: var(--badge); color: var(--badge-on); overflow: hidden; }
/* The page-wide svg size (18px) must not reach badge icons: they are drawn for their chip. */
/* span.badge-chip: one step more specific than page rules like ".view-rooms svg" (18px), which came later and won. */
span.badge-chip > svg { display: block; flex: none; width: var(--badge-icon, 62%); height: var(--badge-icon, 62%); }
.badge-chip[data-image] { background: transparent; box-shadow: none; border-radius: 4px; }
.badge-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.badge-chip[data-image]:not([data-bare]) { background: var(--badge); border-radius: 50%; }
.badge-chip[data-image]:not([data-bare]) img { width: 70%; height: 70%; }
.badge-mask { display: block; width: 64%; height: 64%; background: currentColor; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
/* A picture without a background keeps its own shape (flags, word marks):
   as tall as the other badges, up to almost twice as wide. */
.badge-chip[data-image][data-bare] { width: auto; min-width: var(--badge-size); max-width: calc(var(--badge-size) * 1.8); border-radius: 3px; }
/* Sizes in px, not %: a percentage height inside the auto-width chip falls back to auto and lets tall pictures spill out. */
.badge-chip[data-image][data-bare] img { width: auto; height: var(--badge-size); max-width: calc(var(--badge-size) * 1.8); object-fit: contain; }
.badge-chip[data-bare] .badge-mask { width: 100%; height: 100%; }
.badge-chip[data-trimmed] { position: relative; display: inline-block; vertical-align: middle; min-width: 0; max-width: none; }
.badge-chip[data-trimmed] .badge-mask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.badge-chip[data-trimmed] .badge-mask { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.badge-more { font-size: 11px; font-weight: 600; color: var(--muted); }
.seat-badges { display: flex; margin: 3px 0 1px; }
.seat-badges:empty { display: none; }

/* ---------------------------------------------------------- profile pictures */
.seat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.seat[data-avatar] .seat-avatar { display: block; flex: none; width: clamp(36px, min(2.6vw, calc(5vh / var(--z, 1))), 48px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--surface-solid); }
:root[data-theme="signal"] .seat[data-avatar] .seat-avatar { border-radius: 4px; width: clamp(44px, min(3.2vw, calc(6vh / var(--z, 1))), 60px); }
/* the picture takes the place of the big seat number */
:root[data-theme="signal"] .seat[data-avatar] .seat-num { display: none; }
:root[data-theme="noir"] .seat[data-avatar] .seat-avatar { width: 34px; filter: grayscale(0.35) contrast(1.05); }
:root[data-theme="space"] .seat[data-avatar] .seat-avatar { padding: 0; }
@media (max-width: 640px), (max-height: 520px) {
  .seat[data-avatar] .seat-avatar { width: 30px; }
}
.avatar-row { display: flex; align-items: center; gap: 16px; margin: 4px 0 12px; }
.avatar-row[hidden], .my-badges[hidden] { display: none; }
.avatar-preview { flex: none; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--line); font-family: var(--font-display); font-size: 28px; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-actions { display: grid; gap: 8px; min-width: 0; }
.avatar-actions .form-error:empty { display: none; }
.my-badges { display: grid; gap: 8px; margin-bottom: 12px; }
.my-badges-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.my-badges-list li { display: flex; align-items: center; gap: 10px; }
.my-badges-list li > span { display: grid; }

/* ---------------------------------------------------------- picture cropper */
.crop-dialog { width: min(380px, calc(calc(100vw / var(--z, 1)) - 24px)); display: grid; gap: 14px; }
.crop-dialog[open] { display: grid; }
.crop-dialog .panel-title { margin: 0; }
.crop-dialog p { margin: 0; }
.crop-stage { width: min(300px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 8px; overflow: hidden; background: repeating-conic-gradient(var(--input, #ddd) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.crop-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.crop-tools { display: flex; align-items: center; gap: 10px; }
.crop-tools > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; color: var(--muted); }
.crop-zoom { flex: 1; accent-color: var(--accent); }
.crop-tools .btn.icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crop-actions { justify-content: flex-end; }

/* ---------------------------------------------------------- toasts with a button */
.toast { display: flex; align-items: center; gap: 12px; }
.toast-action { flex: none; background: none; border: 0; padding: 4px 2px; font: inherit; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); cursor: pointer; }

/* ---------------------------------------------------------- profiles */
.seat-name { cursor: pointer; }
.seat[data-empty] .seat-name { cursor: default; }
/* The card always lays out at 440 px and is scaled down as a whole on
   narrow screens (--pf-zoom, set in social.js), so text wraps the same and
   stickers sit on the same spot everywhere. */
.profile-dialog { box-sizing: content-box; width: calc(440px * var(--pf-zoom, 1)); height: var(--pf-h, fit-content); }
.profile-dialog .dialog-head { margin-bottom: 0; }
.profile-card { display: flex; align-items: center; gap: 18px; }
.profile-avatar { width: 84px; height: 84px; font-size: 34px; }
.profile-who { display: grid; gap: 4px; min-width: 0; }
.profile-who .panel-title { margin: 0; overflow-wrap: anywhere; }
.profile-bio { margin: 16px 0 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.profile-bio[hidden] { display: none; }
.profile-badge-list { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; }
.profile-badge-list:empty { display: none; }
.pf-badge { display: flex; align-items: center; gap: 8px; }
.pf-badge > span:last-child { display: grid; }
#pf-note { margin: 14px 0 0; }
#pf-note[hidden] { display: none; }
.profile-actions { margin-top: 20px; flex-wrap: wrap; gap: 8px; }
.profile-actions:empty { display: none; }
.bio-row { display: grid; gap: 10px; margin-bottom: 12px; }
.bio-row[hidden] { display: none; }
.bio-row textarea { resize: vertical; min-height: 3.2em; font: inherit; }

/* ---------------------------------------------------------- messages */
.dm-btn { position: relative; }
.dm-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; font-family: var(--font-ui, inherit); letter-spacing: 0; }
.dm-count[hidden] { display: none; }
.dm-drawer { position: fixed; z-index: 60; top: 12px; right: 12px; bottom: 12px; width: min(400px, calc(calc(100vw / var(--z, 1)) - 24px)); display: flex; flex-direction: column; background: var(--surface-solid); color: var(--fg); border: 1px solid var(--line); border-radius: min(var(--radius, 12px), 16px); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); overflow: hidden; }
.dm-drawer[hidden] { display: none; }
:root[data-theme="space"] .dm-drawer { border-width: 2.5px; box-shadow: 6px 6px 0 var(--line); }
.dm-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.dm-head .panel-title { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; }
.dm-head .btn.icon[hidden] { display: none; }
.dm-home { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dm-home[hidden], .dm-thread[hidden], .dm-friends[hidden], #dm-chats[hidden] { display: none; }
.dm-tabs { margin: 12px 16px 4px; }
.dm-req { display: inline-block; flex: none; min-width: 18px; padding: 0 5px; border-radius: 9px; text-align: center; letter-spacing: 0; background: var(--accent); color: var(--on-accent); font-size: 11px; line-height: 18px; }
.dm-req[hidden] { display: none; }
.dm-list { list-style: none; margin: 0; padding: 4px 8px; display: grid; gap: 2px; align-content: start; }
#dm-chats { flex: 1; overflow-y: auto; }
.dm-friends { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.dm-friends section[hidden] { display: none; }
.dm-friends .section-title { margin: 14px 8px 4px; }
.dm-friends > p { margin: 16px 8px 0; }
.dm-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.dm-row:hover, .dm-row-link:hover { background: var(--input, rgba(127,127,127,0.1)); }
.dm-friend { cursor: default; padding: 4px 6px 4px 0; }
.dm-row-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; }
.dm-friend .btn { flex: none; min-height: 36px; padding: 0 12px; }
.dm-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--input, #ddd); font-weight: 700; }
.dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-online { position: absolute; left: 40px; top: 38px; width: 11px; height: 11px; border-radius: 50%; background: #2ec4a6; box-shadow: 0 0 0 2px var(--surface-solid); }
.dm-row-link .dm-online { left: 40px; top: 34px; }
.dm-row-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dm-row-top { display: flex; justify-content: space-between; gap: 8px; }
.dm-row-top strong, .dm-row-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row-last { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row[data-unread="1"] .dm-row-last { color: var(--fg); font-weight: 600; }
.dm-unread { flex: none; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.dm-empty { padding: 18px 10px; font-size: 14px; }
.dm-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dm-peer { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dm-messages { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 6px; }
.dm-msg { position: relative; max-width: 82%; align-self: flex-start; padding: 8px 12px 6px; border-radius: 14px 14px 14px 4px; background: var(--input, rgba(127,127,127,0.12)); }
.dm-msg[data-mine="1"] { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--on-accent); }
.dm-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.dm-time { display: block; margin-top: 2px; font-size: 11px; opacity: 0.65; }
.dm-report { position: absolute; right: -4px; top: 50%; transform: translate(100%, -50%); opacity: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; padding: 4px; }
.dm-msg:hover .dm-report, .dm-report:focus-visible { opacity: 1; }
.dm-older { align-self: center; }
.dm-live { margin: 0 14px 6px; padding: 8px 12px; max-width: 82%; border: 1px dashed var(--line-strong, var(--line)); border-radius: 14px 14px 14px 4px; }
.dm-live[hidden] { display: none; }
.dm-live-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.dm-live p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.dm-live p::after { content: ''; display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--accent); animation: dm-blink 1s steps(1, end) infinite; }
@keyframes dm-blink { 50% { opacity: 0; } }
.dm-denied { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
.dm-denied[hidden], .dm-compose[hidden] { display: none; }
.dm-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.dm-compose textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; box-sizing: border-box; padding: 11px 12px; font: inherit; font-size: 16px; line-height: 1.35; border: 1px solid var(--line); border-radius: 10px; background: var(--input, transparent); color: var(--fg); }
.dm-compose .btn.icon { flex: none; width: 44px; height: 44px; padding: 0; }
.dm-compose .btn.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 640px), (max-height: 520px) {
  .dm-drawer { inset: 0; top: var(--vvt, 0px); height: var(--vvh, calc(100dvh / var(--z, 1))); bottom: auto; width: 100%; border-radius: 0; border: 0; }
}

/* ---------------------------------------------------------- warnings, mutes, kicks */
.sanction-dialog { width: min(460px, calc(calc(100vw / var(--z, 1)) - 24px)); border-top: 4px solid var(--accent); }
.sanction-head { display: flex; align-items: center; gap: 14px; }
.sanction-head .panel-title { margin: 0; }
.sanction-icon { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sanction-reason { margin: 18px 0 6px; font-size: 18px; line-height: 1.45; overflow-wrap: anywhere; }
.sanction-reason[hidden] { display: none; }
.sanction-actions { justify-content: flex-end; margin-top: 18px; }

/* pronouns, claimable badges, age, 18+ (8.6) */
.pick-row { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.pick-row legend { padding: 0; margin-bottom: 8px; }
.pick-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; }
.pick:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pick input { margin: 0; accent-color: var(--accent); }
.age-field { flex: 0 0 96px; }
.age-field input { width: 100%; }
.room-card-adult { border-color: var(--accent); color: var(--accent); }
.adult-mark { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font-weight: 800; font-size: 15px; letter-spacing: 0; }

/* ---------------------------------------------------------- seasons: Halloween */
.tk-hw { transition: opacity 0.6s 0.15s; }
.tk-logo[data-intro] .tk-hw { opacity: 0; transition: none; }
.tk-logo[data-signet] .tk-d3 { opacity: 0; }
.tk-drip, .tk-drop { fill: var(--brand-fill); transform-box: fill-box; animation-fill-mode: backwards; }
.tk-drip { transform-origin: top; animation: tk-drip 6s cubic-bezier(0.4, 0, 0.7, 1) infinite backwards; }
.tk-drop { transform-origin: center; opacity: 0; animation: tk-dropfall 6s infinite backwards; }
.tk-drip.tk-d1, .tk-drop.tk-d1 { animation-delay: 1s; }
.tk-drip.tk-d2, .tk-drop.tk-d2 { animation-delay: 2.6s; }
.tk-drip.tk-d3 { animation-delay: 4.2s; }
@keyframes tk-drip { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); animation-timing-function: ease-in-out; } 62% { transform: scaleY(1.12); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); } 76%, 100% { transform: scaleY(0); } }
@keyframes tk-dropfall { 0%, 58% { opacity: 0; transform: translateY(0) scale(0.6); } 62% { opacity: 1; transform: translateY(8px) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); } 82% { opacity: 1; transform: translateY(190px) scale(0.9); } 88%, 100% { opacity: 0; transform: translateY(230px) scale(0.8); } }
.tk-eye { fill: #d9ff4a; }
.tk-pupil { fill: #1a0d2a; }
.tk-lids { transform-box: fill-box; transform-origin: center; animation: tk-blink 5s infinite; }
@keyframes tk-blink { 0%, 30% { transform: scaleY(1); } 32% { transform: scaleY(0.1); } 34%, 76% { transform: scaleY(1); } 78% { transform: scaleY(0.1); } 80%, 100% { transform: scaleY(1); } }
.tk-eyes { animation: tk-look 6s ease-in-out infinite; }
@keyframes tk-look { 0%, 40% { transform: none; } 48%, 60% { transform: translate(22px, 6px); } 68%, 100% { transform: none; } }
.tk-logo[data-season="halloween"] { filter: drop-shadow(0 0 2px rgba(255, 122, 26, 0.75)) drop-shadow(0 0 8px rgba(255, 90, 0, 0.35)); animation: tk-candle 5s ease-in-out infinite; }
@keyframes tk-candle { 0%, 100% { opacity: 1; } 20% { opacity: 0.93; } 24% { opacity: 0.82; } 28% { opacity: 0.96; } 58% { opacity: 0.9; } 64% { opacity: 1; } }

/* ---------------------------------------------------------- splash */
.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; align-content: center; gap: 48px; background: #111113; overflow: hidden; cursor: pointer; }
.no-splash .splash { display: none; }
html.splashing #brand-official .tk-logo { visibility: hidden; }
.splash-logo { width: min(66vw, 620px); transform-origin: 0 0; position: relative; z-index: 1; }
.splash-slide { will-change: transform; }
.splash .tk-splash { display: block; width: 100%; height: auto; aspect-ratio: 1771 / 628; overflow: visible; }
.splash .tk-splash .tk-3, .splash .tk-splash .tk-4 { display: inline; }
.splash-note { font-family: var(--font-ui, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #8c8c93; position: relative; z-index: 1; transition: opacity 0.4s; }
.splash[data-out] { background: transparent; transition: background-color 0.6s; }
.splash[data-out] .splash-note { opacity: 0; }

/* the turn: the t turns into the A in the middle, then tA moves over as L and k rise */
.splash-slide[data-play] { animation: sp-slide var(--sp-dur, 2.6s) cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes sp-slide { 0%, 55% { transform: translateX(26.32%); } 80%, 100% { transform: none; } }
.tk-splash[data-intro="splash"] .tk-g { animation: var(--sp-dur, 2.6s) cubic-bezier(0.65, 0, 0.35, 1) both; }
.tk-splash[data-intro="splash"] .tk-1 { animation-name: sp-t; }
.tk-splash[data-intro="splash"] .tk-2 { animation-name: sp-a; }
.tk-splash[data-intro="splash"] .tk-3 { animation-name: sp-l; }
.tk-splash[data-intro="splash"] .tk-4 { animation-name: sp-k; }
@keyframes sp-t { 0% { opacity: 0; transform: scale(0.6); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes sp-a { 0%, 15% { opacity: 0; transform: translateX(-466px) rotate(-180deg); } 16% { opacity: 1; transform: translateX(-466px) rotate(-180deg); } 52%, 100% { opacity: 1; transform: none; } }
@keyframes sp-l { 0%, 55% { opacity: 0; transform: translateY(160px); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes sp-k { 0%, 62% { opacity: 0; transform: translateY(160px); } 80%, 100% { opacity: 1; transform: none; } }

/* Halloween splash: moonlit night, candle glow, a bat that swoops you in */
.splash[data-season="halloween"] { --sp-dur: 3.4s; background: radial-gradient(70vw calc(60vh / var(--z, 1)) at 72% 22%, #3a1d57 0%, #1a0d2a 55%, #0d0716 100%); }
.splash[data-season="halloween"] .splash-note { color: #a493c0; }
.splash-moon { position: absolute; right: 13vw; top: calc(9vh / var(--z, 1)); width: clamp(60px, 9vw, 120px); aspect-ratio: 1; border-radius: 50%; background: #f6e6c4; box-shadow: 0 0 80px 14px rgba(246, 230, 196, 0.22); animation: sp-moon 1.6s ease-out both; }
@keyframes sp-moon { from { transform: translateY(40px); opacity: 0; } }
.splash-fog { position: absolute; left: -10vw; right: -10vw; bottom: -6vh; height: calc(30vh / var(--z, 1)); background: radial-gradient(50% 60% at 30% 70%, rgba(190, 170, 230, 0.18), transparent 70%), radial-gradient(40% 50% at 75% 80%, rgba(190, 170, 230, 0.14), transparent 70%); filter: blur(6px); animation: sp-fog 14s ease-in-out infinite alternate; }
.splash-fog-2 { height: calc(22vh / var(--z, 1)); animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes sp-fog { from { transform: translateX(-80px); } to { transform: translateX(80px); } }
.splash[data-season="halloween"] .tk-splash { filter: none; animation: none; transition: filter 0.8s; }
.splash[data-season="halloween"] .tk-splash:not([data-intro]) { filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.7)) drop-shadow(0 0 20px rgba(255, 90, 0, 0.3)); }
.splash-flight { position: absolute; left: 0; top: 0; width: 140px; height: 80px; margin: -40px 0 0 -70px; z-index: 2; opacity: 0; pointer-events: none; }
.splash[data-stage="bat"] .splash-flight { opacity: 1; animation: sp-visit 3s both; }
@keyframes sp-visit {
  0% { transform: translate(112vw, calc(16vh / var(--z, 1))) scale(0.9); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  30% { transform: translate(76vw, calc(26vh / var(--z, 1))) scale(1.2); animation-timing-function: ease-in-out; }
  40% { transform: translate(75vw, calc(23vh / var(--z, 1))) scale(1.2); animation-timing-function: ease-in-out; }
  50% { transform: translate(74vw, calc(27vh / var(--z, 1))) scale(1.2); animation-timing-function: ease-in-out; }
  60% { transform: translate(73vw, calc(24vh / var(--z, 1))) scale(1.2); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  100% { transform: translate(50vw, calc(48vh / var(--z, 1))) scale(160); }
}
.splash-bat { display: block; width: 100%; height: 100%; overflow: visible; }
.bat-body { fill: #0b0612; stroke: #2b1a3d; stroke-width: 2; }
.bat-eyes { fill: #ffd36b; stroke: none; }
.splash[data-stage="bat"] .bat-eyes { animation: sp-bateyes 3s both; }
@keyframes sp-bateyes { 0%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
.bat-wing { transform-box: fill-box; transform-origin: right center; animation: bat-l 0.3s ease-in-out infinite alternate; }
.bat-r { transform-origin: left center; animation-name: bat-r; }
@keyframes bat-l { from { transform: rotate(14deg) scale(0.92, 1.08); } to { transform: rotate(-16deg) scale(1, 0.8); } }
@keyframes bat-r { from { transform: rotate(-14deg) scale(0.92, 1.08); } to { transform: rotate(16deg) scale(1, 0.8); } }

@media (prefers-reduced-motion: reduce) {
  .tk-hw *, .tk-logo[data-season] { animation: none !important; }
  .splash { display: none; }
}

/* verified accounts (8.6) */
.verified-mark { display: inline-grid; place-items: center; flex: none; width: 17px; height: 17px; vertical-align: middle; }
.verified-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verified-mark[data-kind="member"] { color: var(--muted); }
.verified-mark[data-kind="email"] { color: var(--fg); }
.verified-mark[data-kind="team"] { color: var(--accent); }
.verified-mark .mark-shape.filled { fill: currentColor; }
.verified-mark .mark-shape.filled + .mark-check { stroke: var(--on-accent, #141414); stroke-width: 2.4; }
.seat-verified { display: inline-flex; }
.seat-verified[hidden] { display: none; }
.pf-verified { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pf-verified[hidden] { display: none; }
.email-row .row { align-items: flex-end; }
/* name / pronouns / age / location can be long: two lines, then an ellipsis */
.seat-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.seat .seat-badge { display: none !important; } /* replaced by .seat-verified marks */
@media (max-width: 640px), (max-height: 520px) {
  /* phones: one quiet line under the name */
  .seat-meta { display: block; flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
}

/* links in other people's text: marked, never live (8.6) */
.chat-link { color: var(--accent); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; border-radius: 3px; }
.chat-link:hover, .chat-link:focus-visible { text-decoration-style: solid; outline: none; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dm-msg[data-mine="1"] .chat-link { color: inherit; }
.dm-msg[data-mine="1"] .chat-link:hover, .dm-msg[data-mine="1"] .chat-link:focus-visible { background: color-mix(in srgb, var(--on-accent) 16%, transparent); }
.link-full { margin: 4px 0 10px; padding: 8px 10px; border-radius: 6px; background: var(--input, rgba(0,0,0,0.06)); font-family: var(--font-text, ui-monospace, monospace); font-size: 13px; overflow-wrap: anywhere; max-height: 6em; overflow: auto; }
.report-quote { margin: 4px 0 14px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--input, rgba(0,0,0,0.05)); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 8em; overflow: auto; }
.dmr-count-row { align-items: center; gap: 10px; }
.dmr-count-row input { width: 80px; }
.dmr-count-row[hidden] { display: none; }

/* emotes, name colors, removing text (8.7) */
.emote { display: inline-block; height: 1.5em; width: auto; max-width: 3em; vertical-align: -0.38em; margin: 0; object-fit: contain; }
.seat-text .emote { height: 1.8em; }
.seat-body { position: relative; }
.redact-btn { position: fixed; z-index: 1100; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); }
.redact-btn[hidden] { display: none; }
.redact-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.namecolor-row { align-items: center; gap: 12px; }
.namecolor-row[hidden] { display: none; }
.emote-pop { position: fixed; z-index: 1200; width: 260px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5); }
.emote-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-family: var(--font-text, ui-monospace, monospace); font-size: 14px; }
.emote-opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.emote-opt img { width: 26px; height: 26px; object-fit: contain; }
.emote-opt .emote-18 { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.emote-opt kbd + .emote-18, .emote-opt .emote-18 + kbd { margin-left: 6px; }
.emote-opt kbd { margin-left: auto; font: inherit; font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }

/* Your own text boxes (richInput in links.js): emotes show as pictures inline. */
.rich-input { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; cursor: text; -webkit-user-modify: read-write-plaintext-only; }
.rich-input:focus { outline: none; }
.rich-input[data-empty]::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }
.rich-input[aria-disabled] { opacity: 0.6; cursor: not-allowed; }
.rich-input .emote { height: 1.45em; vertical-align: -0.35em; margin: 0; }
.seat-input.rich-input { min-height: 1.5em; }
.dm-compose .dm-input { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; overflow-y: auto; box-sizing: border-box; padding: 11px 12px; font: inherit; font-size: 16px; line-height: 1.35; border: 1px solid var(--line); border-radius: 10px; background: var(--input, transparent); color: var(--fg); }
.dm-compose .dm-input:focus-visible { border-color: var(--accent); }
.dm-row-last .emote { height: 1.35em; vertical-align: -0.32em; }
.toast .emote { height: 1.35em; vertical-align: -0.32em; }

/* Phones: spotlight (see updateSpot in app.js). The seat in the spotlight sits
   on top and takes the free space with larger text; the others shrink to one
   line each that shows the end of what they typed. */
@media (max-width: 640px), (max-height: 520px) {
  .app[data-view="room"] .seats { gap: 0; }
  .app[data-view="room"] .seat:not([data-mine]) + .seat:not([data-mine]) { margin-top: 6px; }
  .seat[data-spot] { order: -1; flex: none; min-height: 120px; }
  .seat[data-spot] .seat-meta { display: block; }
  .seat[data-spot] .seat-body { flex: 1; min-height: 0; align-items: flex-start; }
  .seat[data-spot] .seat-text { font-size: 19px !important; line-height: 1.45; max-height: calc(var(--vvh, calc(100dvh / var(--z, 1))) * 0.38); overflow-y: auto; }
  .seat[data-pinned] .seat-state::before { content: 'Pinned \00b7  '; color: var(--accent); }

  .seat[data-strip] { flex-direction: row; align-items: center; min-height: 48px; height: 48px; cursor: pointer; }
  .seat[data-strip] .seat-id { padding: 0 0 0 10px; gap: 8px; flex: none; max-width: 42%; }
  .seat[data-strip] .seat-num,
  .seat[data-strip] .seat-badges,
  .seat[data-strip] .seat-meta,
  .seat[data-strip] .seat-state,
  .seat[data-strip] .seat-role,
  .seat[data-strip] .seat-verified,
  .seat[data-strip] .seat-badge,
  .seat[data-strip] .seat-menu { display: none !important; }
  .seat[data-strip] .seat-name { font-size: 15px !important; }
  .seat[data-strip] .seat-body { flex: 1; min-width: 0; padding: 0 12px 0 10px; align-items: center; }
  .seat[data-strip] .seat-text {
    font-size: 14px !important; max-height: none; line-height: 48px; height: 48px;
    display: flex; justify-content: flex-end; white-space: nowrap; overflow: hidden; color: var(--muted);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px);
  }
  .seat[data-strip][data-typing] .seat-text { color: var(--fg); }
  .seat[data-strip][data-typing]::after { content: ''; position: absolute; right: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); animation: spot-pulse 1.4s ease-in-out infinite; }
  .seat[data-strip] .seat-text .emote { height: 1.4em; vertical-align: middle; flex: none; align-self: center; }
  .seat[data-strip] .seat-text .chat-link { flex: none; }
}
@keyframes spot-pulse { 50% { opacity: 0.3; } }
/* Keyboard open (or a short screen): the spotlight keeps its newest three lines. */
@media (max-width: 640px) and (max-height: 600px), (max-height: 520px) {
  .seat[data-spot] { min-height: 0; }
  .seat[data-spot] .seat-meta { display: none; }
  .seat[data-spot] .seat-text { max-height: 4.4em; }
  .seat[data-mine] .seat-meta { display: none; }
}
.app[data-view="room"][data-keyboard] .seat[data-spot] { min-height: 0; }
.app[data-view="room"][data-keyboard] .seat[data-spot] .seat-meta { display: none; }
.app[data-view="room"][data-keyboard] .seat[data-spot] .seat-text { max-height: 4.4em; }
@media (prefers-reduced-motion: reduce) { .seat[data-strip][data-typing]::after { animation: none; } }

/* ---------------------------------------------------------- lobby on phones
   "Jump in" on top, friends online, a compact list of rooms with space (full
   ones fold away), and "Open a room" as a sheet that slides up. */
.phone-only { display: none !important; }
.sheet-backdrop { display: none; }
@media (max-width: 640px) {
  .view-lobby .phone-only:not([hidden]) { display: flex !important; }
  #create-close.phone-only { display: grid !important; }
  .view-lobby { padding-bottom: 96px; }
  .view-lobby .hero { display: none; }

  .jump { flex-direction: column; gap: 6px; margin: 4px 0 18px; padding: 16px; border: 1px solid var(--accent); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); }
  .jump-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .jump-kicker svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
  .jump-name { margin: 4px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.02; text-transform: uppercase; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
  :root[data-theme="noir"] .jump-name { font-weight: 600; font-size: 22px; letter-spacing: 0.1em; }
  :root[data-theme="space"] .jump-name { font-size: 26px; }
  .jump-name .room-card-tag { font-size: 11px; }
  .jump-people { margin: 0; font-family: var(--font-text); font-size: 13px; color: var(--muted); }
  .jump-actions { display: flex; gap: 8px; margin-top: 8px; }
  .jump-join { flex: 1; justify-content: center; }
  .jump-actions .btn.icon { flex: none; width: 48px; }
  .jump-actions .btn.icon[hidden] { display: none; }
  .jump-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .friends-online { flex-direction: column; gap: 10px; margin: 0 0 18px; }
  .friends-online .section-title { margin: 0; }
  .friends-row { list-style: none; margin: 0; padding: 2px 2px 4px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
  .friend-chip { all: unset; cursor: pointer; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .friend-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--input); border: 2px solid var(--accent); font-family: var(--font-ui); font-weight: 700; font-size: 17px; color: var(--fg); }
  .friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .friend-name { max-width: 60px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
  .friend-chip:focus-visible .friend-avatar { outline: 2px solid var(--fg); outline-offset: 2px; }

  /* compact room rows */
  .lobby-grid { display: block; }
  .rooms-head { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .rooms-head .panel-title { font-size: 12px !important; font-family: var(--font-ui); letter-spacing: 0.14em; color: var(--muted); }
  .room-list { display: flex; flex-direction: column; gap: 0; }
  .room-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "head bar join" "people people people"; align-items: center; gap: 4px 10px; padding: 12px 2px; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0; background: transparent; box-shadow: none; }
  :root[data-theme="signal"] .room-card::before { display: none; }
  .room-card-head { grid-area: head; min-width: 0; gap: 8px; align-items: center; }
  .room-card-name { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  :root[data-theme="noir"] .room-card-name { font-size: 14px; }
  :root[data-theme="space"] .room-card-name { font-size: 16px; }
  .room-card-count { display: none; }
  .room-card-bar { grid-area: bar; gap: 2px; }
  .room-card-bar span { flex: none; width: 6px; height: 16px; border-radius: 1px; }
  .room-card-people { grid-area: people; font-size: 12px; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .room-card-join { grid-area: join; min-height: 36px; height: 36px; padding: 0 14px; font-size: 11px; }
  .room-card[data-full] { display: none; }
  .room-list[data-show-full] .room-card[data-full] { display: grid; opacity: 0.55; }
  .full-toggle { all: unset; box-sizing: border-box; width: 100%; height: 46px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
  .full-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.2s; }
  .full-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* "Open a room" as a sheet */
  .fab { position: fixed; z-index: 40; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); gap: 10px; }
  .fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  :root[data-theme="signal"] .fab.btn.primary { padding: 0 18px; }
  .app[data-view="room"] .fab, :root[data-create-open] .fab { display: none !important; }
  .create-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .panel.create { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: calc(88dvh / var(--z, 1)); overflow-y: auto; overscroll-behavior: contain; margin: 0; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); background: var(--surface-solid); transform: translateY(105%); visibility: hidden; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.28s; }
  :root[data-create-open] .panel.create { transform: none; visibility: visible; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sheet-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.55); }
  :root[data-create-open] body { overflow: hidden; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .panel.create, :root[data-create-open] .panel.create { transition: none; }
}
.field label.check { font-family: var(--font-text, inherit); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg); align-items: flex-start; line-height: 1.4; }
.field label.check .muted.small { font-size: 12px; }

/* Settings: who can message you, live typing in messages */
.dm-prefs { gap: 10px; }
.dm-prefs .dm-live-check { margin-top: 6px; align-items: flex-start; line-height: 1.4; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--fg); font-family: var(--font-text, inherit); }
.dm-prefs .dm-live-check input { margin-top: 2px; flex: none; }
.dm-prefs .dm-live-check .muted.small { font-size: 12px; }

/* ---------------------------------------------------------- member styles
   Names (data-nfx), frames around profile pictures (data-frame) and seat
   decorations (data-deco), with colors in --n1.., --f1.., --d1... Approved
   by the team; see shared/styles.js. */
[data-nfx="gradient"], [data-nfx="flow"], [data-nfx="rainbow"], [data-nfx="shimmer"] {
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
}
[data-nfx="gradient"] { background-image: linear-gradient(90deg, var(--n1), var(--n2), var(--n3, var(--n2))); }
[data-nfx="flow"] { background-image: linear-gradient(90deg, var(--n1), var(--n2), var(--n3, var(--n1)), var(--n1)); background-size: 300% 100%; animation: nfx-flow 5s linear infinite; }
[data-nfx="rainbow"] { background-image: linear-gradient(90deg, #ff5e7a, #ffa94d, #ffe14d, #5edc8a, #5ec8ff, #b48cff, #ff5e7a); background-size: 300% 100%; animation: nfx-flow 4s linear infinite; }
/* Shimmer: a light band over a solid base. The band layer is three times as
   wide as the name and never repeats, so it enters on the left, leaves on the
   right and the name always keeps its color underneath. */
[data-nfx="shimmer"] { background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%), linear-gradient(var(--n1), var(--n1)); background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; background-position: 100% 0, 0 0; animation: nfx-shimmer 3.2s ease-in-out infinite; }
[data-nfx="glow"] { color: var(--n1) !important; animation: nfx-glow 2.4s ease-in-out infinite; }
[data-nfx="neon"] { color: color-mix(in srgb, var(--n1) 35%, #fff) !important; text-shadow: 0 0 3px var(--n1), 0 0 9px color-mix(in srgb, var(--n1) 70%, transparent); }
/* Names cut off long text; give glows room so they are not clipped to a box. */
[data-nfx="neon"], [data-nfx="glow"] { padding: 6px 8px; margin: -6px -8px; }
@keyframes nfx-flow { to { background-position: 300% 0; } }
@keyframes nfx-shimmer { 0% { background-position: 100% 0, 0 0; } 60%, 100% { background-position: 0% 0, 0 0; } }
@keyframes nfx-glow { 0%, 100% { text-shadow: 0 0 2px color-mix(in srgb, var(--n1) 40%, transparent); } 50% { text-shadow: 0 0 10px var(--n1), 0 0 18px color-mix(in srgb, var(--n1) 50%, transparent); } }
/* Space ink draws names with an outline: keep it readable on effects. */
:root[data-theme="space"] [data-nfx="gradient"], :root[data-theme="space"] [data-nfx="flow"], :root[data-theme="space"] [data-nfx="rainbow"], :root[data-theme="space"] [data-nfx="shimmer"] { -webkit-text-stroke: 0; }

/* frames: on the picture's box, drawn outside it */
[data-frame] { position: relative; overflow: visible !important; isolation: isolate; }
[data-frame] > img { border-radius: inherit; }
[data-frame]::before, [data-frame]::after { content: ''; position: absolute; border-radius: inherit; pointer-events: none; }
[data-frame="ring"]::before { inset: -2px; border: 2.5px solid var(--f1); }
[data-frame="double"]::before { inset: -2px; border: 2.5px solid var(--f1); }
[data-frame="double"]::after { inset: -6px; border: 1.5px solid color-mix(in srgb, var(--f1) 55%, transparent); }
[data-frame="gradient"]::before, [data-frame="orbit"]::before {
  inset: -2.5px; padding: 2.5px; z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-frame="gradient"]::before { background: linear-gradient(135deg, var(--f1), var(--f2)); }
[data-frame="orbit"]::before { background: conic-gradient(from var(--orbit, 0deg), var(--f1), var(--f2), var(--f1)); animation: frame-orbit 3s linear infinite; }
@property --orbit { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes frame-orbit { to { --orbit: 360deg; } }
[data-frame="glow"]::before { inset: -2px; border: 2.5px solid var(--f1); animation: frame-glow 2.4s ease-in-out infinite; }
@keyframes frame-glow { 0%, 100% { box-shadow: 0 0 2px var(--f1); } 50% { box-shadow: 0 0 12px var(--f1), 0 0 20px color-mix(in srgb, var(--f1) 50%, transparent); } }
/* Spinning dashes: dashes drawn around the ring that run round and round
   (the ring itself stays put, so it also works on square pictures). */
[data-frame="dashed"]::before { inset: -3px; padding: 2.5px; z-index: 1;
  background: repeating-conic-gradient(from var(--dash, 0deg), var(--f1) 0 8deg, transparent 8deg 15deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: frame-dash 9s linear infinite; }
@property --dash { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes frame-dash { to { --dash: 360deg; } }
/* cat ears: the ring, and two ears behind the picture that lean out from
   its top, each with an inner ear in the second color. The ear box is the
   picture's width and 70 % of its height, starting 30 % above it; in its
   100 x 70 drawing the picture is a circle around (50, 80) with radius 50. */
[data-frame="ears"] { box-shadow: 0 0 0 2.5px var(--f1); }
[data-frame="ears"]::before, [data-frame="ears"]::after { z-index: -1; left: 0; right: 0; top: -30%; height: 70%; border-radius: 0;
  -webkit-mask: var(--ear) center / 100% 100% no-repeat; mask: var(--ear) center / 100% 100% no-repeat; }
[data-frame="ears"]::before { background: var(--f1); --ear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cpath d='M9 62 C6 44 5 22 8 10 Q10 2 18 6 C27 12 35 22 41 36 Z M91 62 C94 44 95 22 92 10 Q90 2 82 6 C73 12 65 22 59 36 Z'/%3E%3C/svg%3E"); }
[data-frame="ears"]::after { background: var(--f2); --ear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cpath d='M15 52 C13 40 13 26 15 17 Q16 13 20 15 C26 20 31 27 35 36 Z M85 52 C87 40 87 26 85 17 Q84 13 80 15 C74 20 69 27 65 36 Z'/%3E%3C/svg%3E"); }

/* seat decorations */
.seat[data-deco="border"] { border-color: var(--d1) !important; box-shadow: inset 0 0 0 1px var(--d1); }
.seat[data-deco="gradient"] { border-color: transparent !important; background: linear-gradient(var(--surface-solid, var(--surface)), var(--surface-solid, var(--surface))) padding-box, linear-gradient(120deg, var(--d1), var(--d2)) border-box; border-width: 2px; border-style: solid; }
.seat[data-deco="glow"] { border-color: var(--d1) !important; box-shadow: 0 0 0 1px var(--d1), 0 0 26px -6px var(--d1), inset 0 0 30px -18px var(--d1); }
.seat[data-deco="aurora"] { background-image: radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--d1) 22%, transparent), transparent 70%), radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--d2) 22%, transparent), transparent 70%); background-size: 200% 200%; animation: deco-aurora 14s ease-in-out infinite alternate; }
@keyframes deco-aurora { from { background-position: 0% 0%, 100% 100%; } to { background-position: 60% 40%, 40% 60%; } }
.seat[data-deco="dots"] { background-image: radial-gradient(color-mix(in srgb, var(--d1) 30%, transparent) 1px, transparent 1.6px); background-size: 14px 14px; }
.seat[data-deco="stars"] { background-image:
  radial-gradient(2px 2px at 12% 22%, var(--d1), transparent 60%), radial-gradient(1px 1px at 34% 78%, var(--d1), transparent 60%),
  radial-gradient(2.4px 2.4px at 61% 18%, var(--d1), transparent 60%), radial-gradient(1px 1px at 82% 64%, var(--d1), transparent 60%),
  radial-gradient(2px 2px at 92% 12%, var(--d1), transparent 60%), radial-gradient(1px 1px at 48% 50%, var(--d1), transparent 60%);
  animation: deco-twinkle 5s ease-in-out infinite; }
@keyframes deco-twinkle { 50% { background-position: 4px -3px; } }
.seat[data-deco="brackets"] { border-color: transparent !important; background-repeat: no-repeat; background-image:
  linear-gradient(var(--d1), var(--d1)), linear-gradient(var(--d1), var(--d1)), linear-gradient(var(--d1), var(--d1)), linear-gradient(var(--d1), var(--d1));
  background-size: 36px 3px, 3px 36px, 36px 3px, 3px 36px; background-position: 0 0, 0 0, 100% 100%, 100% 100%; }
:root[data-theme="signal"] .seat[data-deco="brackets"]::before, :root[data-theme="signal"] .seat[data-deco="brackets"]::after { border-color: transparent; }
.seat[data-deco="flow"] { border: 2px solid transparent !important; background: linear-gradient(var(--surface-solid, var(--surface)), var(--surface-solid, var(--surface))) padding-box, linear-gradient(90deg, var(--d1), var(--d2), var(--d3, var(--d1)), var(--d1)) border-box; background-size: auto, 300% 100%; animation: deco-flow 6s linear infinite; }
@keyframes deco-flow { to { background-position: 0 0, 300% 0; } }
.seat[data-deco="neon"] { border: 2px solid color-mix(in srgb, var(--d1) 35%, #fff) !important; box-shadow: 0 0 4px var(--d1), 0 0 16px var(--d1), inset 0 0 12px -2px var(--d1); animation: deco-neon 7s steps(1) infinite; }
@keyframes deco-neon { 0%, 90%, 93%, 100% { box-shadow: 0 0 4px var(--d1), 0 0 16px var(--d1), inset 0 0 12px -2px var(--d1); } 91%, 94% { box-shadow: 0 0 1px var(--d1), inset 0 0 4px -2px var(--d1); } }
.seat[data-deco="double"] { border-color: var(--d1) !important; outline: 1px solid color-mix(in srgb, var(--d1) 50%, transparent); outline-offset: 3px; }
.seat[data-deco="ants"] { border-color: transparent !important; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-image:
  linear-gradient(90deg, var(--d1) 50%, transparent 0), linear-gradient(90deg, var(--d1) 50%, transparent 0), linear-gradient(0deg, var(--d1) 50%, transparent 0), linear-gradient(0deg, var(--d1) 50%, transparent 0);
  background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px; background-position: 0 0, 0 100%, 0 0, 100% 0; animation: deco-ants 1.2s linear infinite; }
@keyframes deco-ants { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; } }
.seat[data-deco="ribbon"] { background-repeat: no-repeat; background-image: linear-gradient(var(--d1), var(--d2)); background-size: 6px 100%; background-position: 0 0; }
.seat[data-deco="glass"] { background-image: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -26px 40px -30px var(--d1); backdrop-filter: blur(10px); }
.seat[data-deco="starfield"] { background-color: color-mix(in srgb, #0d0b1c 75%, var(--surface-solid, #111)); background-size: 280px 120px; animation: deco-drift 40s linear infinite; background-image:
  radial-gradient(circle at 20px 30px, var(--d1) 0 1.5px, transparent 2.5px), radial-gradient(circle at 90px 80px, var(--d1) 0 1px, transparent 2px),
  radial-gradient(circle at 160px 22px, var(--d2) 0 1.8px, transparent 3px), radial-gradient(circle at 240px 64px, var(--d1) 0 1px, transparent 2px),
  radial-gradient(circle at 205px 104px, var(--d2) 0 1px, transparent 2px), radial-gradient(circle at 60px 100px, var(--d1) 0 .8px, transparent 1.8px); }
@keyframes deco-drift { to { background-position: 280px 40px; } }
.seat[data-deco="hearts"] { border-color: color-mix(in srgb, var(--d1) 50%, var(--line)) !important; }
:root .seat[data-deco="hearts"]::before { left: 0; top: 0; content: ''; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: inherit; pointer-events: none; background: color-mix(in srgb, var(--d1) 16%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 20s-6-3.8-6-8a3.4 3.4 0 0 1 6-2 3.4 3.4 0 0 1 6 2c0 4.2-6 8-6 8z'/%3E%3C/svg%3E") 0 0 / 28px 28px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 20s-6-3.8-6-8a3.4 3.4 0 0 1 6-2 3.4 3.4 0 0 1 6 2c0 4.2-6 8-6 8z'/%3E%3C/svg%3E") 0 0 / 28px 28px; }
.seat[data-deco="crt"] { border-color: color-mix(in srgb, var(--d1) 45%, var(--line)) !important; box-shadow: inset 0 0 30px color-mix(in srgb, var(--d1) 14%, transparent); background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--d1) 8%, transparent) 0 1px, transparent 1px 3px); animation: deco-scan .6s linear infinite; }
.seat[data-deco="crt"] .seat-text { color: color-mix(in srgb, var(--d1) 55%, #fff); text-shadow: 0 0 6px color-mix(in srgb, var(--d1) 60%, transparent); }
@keyframes deco-scan { to { background-position: 0 6px; } }
.seat[data-deco="pixel"] { border-color: transparent !important; border-radius: 0 !important; box-shadow: 0 -4px 0 0 var(--d1), 0 4px 0 0 var(--d1), -4px 0 0 0 var(--d1), 4px 0 0 0 var(--d1); }
/* Washi tape: two strips of see-through paper tape stuck across the top left
   and bottom right corners, so they stand out over the edge like real tape,
   with torn (zigzag) ends and a light pattern. They take the place of the
   corner marks of Signal. */
.seat[data-deco="washi"] { border-color: color-mix(in srgb, var(--d1) 30%, var(--line)) !important; --tape-w: 62px; --tape-h: 20px; }
:root .seat[data-deco="washi"]::before,
:root .seat[data-deco="washi"]::after { content: ''; position: absolute; z-index: 3; width: var(--tape-w); height: var(--tape-h); border: 0; border-radius: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0 2px, transparent 2px 9px),
    linear-gradient(color-mix(in srgb, var(--d1) 70%, transparent), color-mix(in srgb, var(--d1) 55%, transparent));
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 20%, calc(100% - 3px) 40%, 100% 60%, calc(100% - 3px) 80%, calc(100% - 2px) 100%, 3px 100%, 0 80%, 3px 60%, 0 40%, 3px 20%); }
/* The middle of each strip sits a little inside the corner. */
:root .seat[data-deco="washi"]::before { left: calc(var(--tape-at, 14px) - var(--tape-w) / 2); top: calc(var(--tape-at, 14px) - var(--tape-h) / 2); right: auto; bottom: auto; transform: rotate(-45deg); }
:root .seat[data-deco="washi"]::after { right: calc(var(--tape-at, 14px) - var(--tape-w) / 2); bottom: calc(var(--tape-at, 14px) - var(--tape-h) / 2); left: auto; top: auto; transform: rotate(-45deg); }
.seat.tile-seat[data-deco="washi"] { --tape-w: 32px; --tape-h: 10px; --tape-at: 8px; }
.seat[data-deco="ticket"] { background-repeat: no-repeat; background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--d1) 60%, transparent) 0 6px, transparent 6px 12px); background-size: 2px calc(100% - 20px); background-position: calc(100% - 64px) 10px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat; }

@media (prefers-reduced-motion: reduce) {
  [data-nfx], [data-frame]::before, [data-frame]::after, .seat[data-deco] { animation: none !important; }
}

/* Settings: your style */
.style-editor { display: grid; gap: 12px; padding-top: 6px; }
.style-editor[hidden] { display: none; }
.style-editor .section-title { margin: 0; }
.style-editor > p { margin: 0; }
.style-preview .seat { height: 92px; min-height: 92px; pointer-events: none; }
.style-preview .seat-id { width: 46%; }
.style-preview .seat-text { font-size: 14px !important; }
.style-preview .seat-num { font-size: 34px; }
.style-parts { display: grid; gap: 8px; }
.style-part { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.style-part label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.style-part select { min-width: 0; }
.style-colors { display: inline-flex; gap: 6px; }
.style-colors input[type="color"] { width: 38px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--input); cursor: pointer; }
.style-status { margin: 0; font-size: 13px; color: var(--accent); min-height: 0; }
.style-status:empty { display: none; }
@media (max-width: 520px) {
  .style-part { grid-template-columns: 1fr auto; }
  .style-part label { grid-column: 1 / -1; }
  .style-preview .seat-id { width: 52%; }
}

/* Emote button (Settings > Typing) and its grid */
.emote-btn { display: none; flex: none; color: var(--muted); }
:root[data-emote-button] .emote-btn { display: grid; place-items: center; }
.emote-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emote-btn:hover, .emote-btn[aria-expanded="true"] { color: var(--fg); }
.seat[data-mine] .seat-body { gap: 8px; }
.seat[data-mine] .emote-btn { align-self: flex-end; width: 36px; height: 36px; min-height: 36px; padding: 0; border-color: transparent; }
.dm-compose .emote-btn { width: 44px; height: 44px; padding: 0; }
.emote-grid { position: fixed; z-index: 1200; max-height: 240px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; padding: 8px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5); }
.emote-grid p { grid-column: 1 / -1; margin: 6px; }
.emote-grid h4 { grid-column: 1 / -1; margin: 6px 4px 0; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.emote-grid h4:first-child { margin-top: 0; }
.emote-cell { all: unset; box-sizing: border-box; height: 44px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; }
.emote-cell:hover, .emote-cell:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.emote-cell img { max-width: 30px; max-height: 30px; object-fit: contain; }
.pref-check { align-items: flex-start; line-height: 1.4; }
.pref-check input { margin-top: 2px; flex: none; }
.seat[data-mine] .seat-input { flex: 1; min-width: 0; }

/* privacy links, your data */
.status-link { color: var(--muted); text-decoration: none; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.status-link:hover { color: var(--fg); }
.legal-note { margin: 0; }
.legal-note a, .your-data a, .settings-legal a { color: inherit; }
.your-data { display: grid; gap: 10px; }
.your-data[hidden], .delete-confirm[hidden] { display: none; }
.your-data .section-title, .your-data p { margin: 0; }
.btn.danger { color: var(--accent); border-color: var(--accent); }
.settings-legal { margin: 0; }

/* a new picture waiting for the team */
.avatar-pending { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--radius); }
.avatar-pending[hidden] { display: none; }
.avatar-pending img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; opacity: .8; }
.avatar-pending .muted { flex: 1; min-width: 0; }

/* appeal on the ban screen */
.appeal { display: grid; gap: 12px; justify-items: start; max-width: 560px; }
.appeal-form { display: grid; gap: 8px; width: 100%; }
.appeal-form[hidden], .appeal-state[hidden], #appeal-open[hidden] { display: none; }
.appeal-form label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.appeal-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; padding: 10px 12px; background: var(--surface-solid, var(--surface)); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; line-height: 1.5; }
.appeal-form textarea:focus { outline: none; border-color: var(--accent); }
.appeal-state { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); display: grid; gap: 4px; line-height: 1.5; }
.appeal-state[data-status="upheld"] { border-left-color: var(--line-strong, var(--muted)); }
.appeal-answer { font-style: italic; color: var(--fg); }

/* ------------------------------------------------------------ rooms
   Persistent group chats, full screen: the list on the left, the open room
   in the middle, a side panel (people, rules, staff tools, settings). */
.nav-count { display: inline-block; min-width: 18px; margin-left: 8px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; line-height: 18px; text-align: center; letter-spacing: 0; vertical-align: 1px; }
.nav-count[hidden], .rooms-btn[hidden] { display: none; }
.rooms-btn { display: none; }
.app[data-view="rooms"] { height: calc(100vh / var(--z, 1)); height: calc(100dvh / var(--z, 1)); overflow: hidden; }
.app[data-view="rooms"] .view-rooms { display: grid; }
.app[data-view="rooms"] .statusbar { display: none; }
.view-rooms { flex: 1; min-height: 0; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 0; margin: 12px 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); overflow: hidden; }
.view-rooms[data-panel] { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(300px, 360px); }
:root[data-theme="space"] .view-rooms { border-width: 2.5px; box-shadow: 6px 6px 0 var(--line); }
.view-rooms svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.rm-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.rm-side-head { display: grid; gap: 12px; padding: 20px 16px 8px; }
.rm-side-head .rm-search { width: 100%; margin: 0; }
.rm-side-head .btn[hidden] { display: none; }
.rm-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.rm-new { min-height: 34px; height: 34px; padding: 0 12px 0 10px; gap: 6px; font-size: 11px; border-color: var(--accent); color: var(--accent); flex: none; }
.rm-new:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.rm-new svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
:root[data-theme="space"] .rm-new { box-shadow: 2px 2px 0 var(--line); font-size: 12px; }
.rm-title { font-size: clamp(34px, 3.2vw, 48px); }
.rm-note { margin: 0; }
.rm-note[hidden], #rm-mine-box[hidden] { display: none; }
.rm-search { display: block; width: calc(100% - 32px); margin: 10px 16px 4px; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: var(--input, transparent); color: var(--fg); }
.rm-panel-body .rm-search { width: 100%; margin: 0 0 8px; }
.rm-lists { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 16px; }
.rm-lists .section-title { margin: 14px 10px 6px; }
.rm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rm-list-empty { padding: 6px 10px 10px; }
.rm-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: min(var(--radius), 12px); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rm-row:hover { background: var(--input, rgba(127,127,127,0.1)); }
.rm-row[aria-current="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.rm-row-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rm-row-top { display: flex; justify-content: space-between; gap: 8px; }
.rm-row-top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-row-sub { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-row[data-unread="1"] .rm-row-sub { color: var(--fg); font-weight: 600; }
.rm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.rm-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; line-height: 16px; color: var(--muted); }
.rm-tag svg { width: 11px; height: 11px; }
.rm-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rm-badge { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; }
.rm-badge-reports { background: none; color: var(--accent); border: 1px solid var(--accent); }
.rm-badge svg { width: 12px; height: 12px; }

.rm-pic { flex: none; width: 46px; height: 46px; border-radius: min(var(--radius), 12px); overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 24%, var(--input, #333)); color: var(--fg); font-weight: 700; font-size: 18px; }
.rm-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-pic-big { width: 96px; height: 96px; font-size: 36px; border-radius: min(var(--radius), 18px); }

.rm-main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.rm-empty { margin: auto; max-width: 380px; padding: 24px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.rm-empty svg { width: 46px; height: 46px; stroke-width: 1.4; color: var(--accent); }
.rm-empty[hidden], .rm-room[hidden], .rm-discover[hidden] { display: none; }
.rm-room { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rm-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.rm-back { display: none; }
.rm-head-main { flex: 1; min-width: 0; }
.rm-name { margin: 0; font-family: var(--font-ui); font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-topic { margin: 2px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-tools { display: flex; gap: 6px; }
.rm-tools .btn[hidden] { display: none; }
.rm-tools .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.rm-staff-btn { position: relative; }
.rm-staff-btn .dm-count { top: -7px; right: -7px; }
.rm-banners { display: grid; }
.rm-banner { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.rm-banner[data-kind="warn"] { color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rm-banner[data-kind="warn"] svg { color: var(--accent); }

.rm-messages { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 20px 56px 8px; display: flex; flex-direction: column; gap: 6px; }
.rm-nothing { margin: auto; max-width: 360px; text-align: center; font-size: 14px; }
.rm-older { align-self: center; }
.rm-msg { position: relative; max-width: min(72%, 640px); align-self: flex-start; padding: 8px 12px 6px; border-radius: 14px 14px 14px 4px; background: var(--input, rgba(127,127,127,0.12)); }
.rm-msg[data-joined="1"] { margin-top: -3px; }
.rm-msg[data-mine="1"] { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--on-accent); }
.rm-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.rm-time { display: block; margin-top: 2px; font-size: 11px; opacity: 0.65; }
.rm-author { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; min-width: 0; }
.rm-author-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.rm-author-btn strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-author-btn:hover strong { text-decoration: underline; }
.rm-mini { flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--line); font-size: 11px; font-weight: 700; }
.rm-mini img { width: 100%; height: 100%; object-fit: cover; }
.rm-role { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 16px; border: 1px solid currentColor; color: var(--muted); }
.rm-role[hidden] { display: none; }
.rm-role[data-role="owner"], .rm-role[data-role="admin"] { color: var(--accent); }
.rm-role[data-role="head"] { color: color-mix(in srgb, var(--accent) 70%, var(--fg)); }
.rm-role[data-role="mod"] { color: var(--fg); }
.rm-more { position: absolute; top: 4px; left: calc(100% + 4px); width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
.rm-msg[data-mine="1"] .rm-more { left: auto; right: calc(100% + 4px); }
.rm-more svg { fill: currentColor; stroke: none; }
.rm-msg:hover .rm-more, .rm-more:focus-visible { opacity: 1; }
.rm-more:hover { background: var(--input, rgba(127,127,127,0.12)); color: var(--fg); }
@media (hover: none) { .rm-more { opacity: 0.7; } }
.rm-menu { position: fixed; z-index: 70; display: grid; min-width: 140px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-solid); color: var(--fg); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5); }
.rm-menu button { padding: 8px 12px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.rm-menu button:hover, .rm-menu button:focus-visible { background: var(--input, rgba(127,127,127,0.12)); outline: none; }

.rm-live { display: grid; gap: 4px; margin: 0 56px 6px; }
.rm-live[hidden] { display: none; }
.rm-live-row { width: min(72%, 640px); box-sizing: border-box; padding: 6px 12px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 14px 14px 14px 4px; }
.rm-live-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.rm-live-row p { margin: 2px 0 0; color: var(--muted); height: 2.9em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
.rm-live-row[data-over] p { justify-content: flex-end; }
.rm-live-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.rm-live-text::after { content: ''; display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--accent); animation: dm-blink 1s steps(1, end) infinite; }
.rm-compose { display: flex; align-items: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.rm-compose[hidden] { display: none; }
.rm-compose .rm-input { flex: 1; min-width: 0; overflow-y: auto; min-height: 46px; max-height: 180px; resize: none; box-sizing: border-box; padding: 11px 14px; font: inherit; font-size: 16px; line-height: 1.35; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--input, transparent); color: var(--fg); }
.rm-compose .rm-input:focus-visible { border-color: var(--accent); }
.rm-compose .emote-btn { width: 46px; height: 46px; padding: 0; }
.rm-author .badge-row, .rm-person-name .badge-row { flex: none; }
.rm-author .verified-mark, .rm-person-name .verified-mark { flex: none; }
.rm-person-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rm-person-name strong { min-width: 0; }
.rm-compose .btn { height: 46px; }

.rm-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.rm-panel[hidden] { display: none; }
.rm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.rm-panel-head .panel-title { margin: 0; font-size: 20px; }
.rm-tabs { margin: 12px 14px 0; }
.rm-tabs[hidden] { display: none; }
.rm-tabs label > span { min-height: 36px; font-size: 11px; padding: 0 8px; gap: 6px; }
.rm-tabs label { min-width: 0; flex: 1 1 auto; }
.rm-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 24px; display: grid; align-content: start; gap: 14px; }
.rm-sec { display: grid; gap: 8px; }
.rm-sec .section-title { margin: 0; }
.rm-quiet { padding: 18px 0; text-align: center; }
.rm-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rm-person { border-radius: 10px; }
.rm-person[data-open="1"] { background: var(--input, rgba(127,127,127,0.08)); }
.rm-person-head { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.rm-person-head:hover { background: var(--input, rgba(127,127,127,0.1)); }
div.rm-person-head { cursor: default; }
.rm-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--input, #ddd); font-weight: 700; }
.rm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rm-online { position: absolute; left: 36px; top: 34px; width: 10px; height: 10px; border-radius: 50%; background: #2ec4a6; box-shadow: 0 0 0 2px var(--surface-solid); }
.rm-person-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.rm-person-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-person-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 8px 10px 54px; }
.rm-panel .btn.small, .rm-person-acts .btn { min-height: 32px; height: 32px; padding: 0 10px; font-size: 11px; }
.rm-role-pick { display: inline-flex; align-items: center; gap: 6px; }
.rm-role-pick select, .rm-panel select { height: 32px; padding: 0 8px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--input, transparent); color: var(--fg); }
.rm-leave { padding-top: 6px; }
.rm-rules { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.45; }
.rm-rules li::marker { color: var(--accent); font-weight: 700; }
.rm-rules-form textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: var(--input, transparent); color: var(--fg); }
.rm-role-table { display: grid; gap: 8px; }
.rm-role-row { display: grid; grid-template-columns: 110px 1fr; align-items: start; gap: 8px; }
.rm-role-row .rm-role { justify-self: start; margin-top: 1px; }
.rm-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rm-report { padding: 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); display: grid; gap: 6px; }
.rm-report .report-quote { margin: 0; }
.rm-report p { margin: 0; }
.rm-report-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rm-report-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rm-log li { display: grid; gap: 1px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rm-log-detail { overflow-wrap: anywhere; }
.rm-pic-edit { display: flex; align-items: center; gap: 16px; }
.rm-panel .form { gap: 12px; }
.rm-rules-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.rm-rules-head .panel-title { margin: 0; }
#dlg-room-rules .rm-rules { margin: 6px 0 18px; max-height: calc(50vh / var(--z, 1)); overflow-y: auto; }
#dlg-room-new textarea, #dlg-grp-req textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: var(--input, transparent); color: var(--fg); }
#ra-dur-row[hidden], #ra-reason-row[hidden], #ra-purge-row[hidden], #ra-quote[hidden] { display: none; }

@media (max-width: 1100px) {
  .view-rooms[data-panel] { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .rm-panel { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(380px, 100%); background: var(--surface-solid); box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.5); }
  .view-rooms { position: relative; }
  .rm-messages { padding-left: 20px; padding-right: 48px; }
  .rm-live { margin: 0 20px 6px; }
}
@media (max-width: 760px) {
  .view-rooms, .view-rooms[data-panel] { grid-template-columns: 1fr; margin: 0 -10px; border: 0; border-radius: 0; box-shadow: none; }
  .view-rooms[data-open] .rm-side { display: none; }
  .view-rooms:not([data-open]) .rm-main { display: none; }
  .rm-back { display: inline-flex; }
  .rm-head { padding: 8px 8px 8px 6px; gap: 8px; }
  .rm-head .rm-pic { width: 38px; height: 38px; }
  .rm-tools { gap: 2px; }
  .rm-tools .btn.icon { width: 38px; min-height: 38px; border-color: transparent; }
  .rm-messages { padding: 14px 12px 6px 12px; }
  .rm-msg { max-width: 84%; }
  .rm-more { left: auto; right: 4px; top: -14px; width: 26px; height: 26px; background: var(--surface-solid); border: 1px solid var(--line); }
  .rm-msg[data-mine="1"] .rm-more { right: auto; left: 4px; }
  .rm-live { margin: 0 12px 6px; }
  .rm-compose { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
  .rm-panel { width: 100%; box-shadow: none; }
  .app[data-view="rooms"] { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, calc(100dvh / var(--z, 1))); min-height: 0; padding: 0 10px; }
}
@media (max-width: 640px), (max-height: 520px) { .rooms-btn:not([hidden]) { display: inline-flex; } }
/* ------------------------------------------------------------ settings tabs */
.settings-dialog { width: min(880px, calc(calc(100vw / var(--z, 1)) - 32px)); height: min(720px, calc(calc(100dvh / var(--z, 1)) - 32px)); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.settings-dialog:not([open]) { display: none; }
.settings-dialog > .dialog-head { margin: 0; padding: 18px 18px 14px 24px; border-bottom: 1px solid var(--line); }
.settings-dialog > .dialog-head .panel-title { margin: 0; }
.settings-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.set-tabs { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--line); overflow-y: auto; }
.set-tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: min(var(--radius), 10px); background: none; color: var(--muted); font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: var(--ui-tracking); text-transform: var(--ui-case); text-align: left; cursor: pointer; }
.set-tab[hidden] { display: none; }
.set-tab svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.set-tab:hover { color: var(--fg); background: var(--input, rgba(127,127,127,0.08)); }
.set-tab[aria-selected="true"] { color: var(--fg); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.set-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.set-panes { min-width: 0; overflow-y: auto; padding: 20px 24px 28px; }
.set-pane { display: grid; gap: 18px; align-content: start; }
.set-pane[hidden] { display: none; }
.set-pane > .form { gap: 12px; }
.set-pane .section-title { margin: 0; }
.set-bug { display: grid; gap: 8px; }
.set-bug p { margin: 0; }
.set-bug .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#style-empty[hidden] { display: none; }
@media (max-width: 640px) {
  .settings-dialog { width: calc(100vw / var(--z, 1)); height: calc(100dvh / var(--z, 1)); max-width: calc(100vw / var(--z, 1)); max-height: calc(100dvh / var(--z, 1)); margin: 0; border-radius: 0; border: 0; }
  .settings-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .set-tabs { flex-direction: row; gap: 4px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .set-tab { width: auto; flex: none; min-height: 38px; padding: 0 12px; gap: 8px; }
  .set-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--accent); }
  .set-panes { padding: 16px 16px 28px; }
}
/* ------------------------------------------------------------ bug reports */
#dlg-bug textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: var(--input, transparent); color: var(--fg); }
.label-like { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bug-shot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bug-shot [hidden] { display: none; }
.bug-thumb { display: inline-flex; align-items: center; gap: 10px; }
.bug-thumb img { max-width: 160px; max-height: 96px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; background: var(--input, #000); }
#bug-info-text { overflow-wrap: anywhere; }
.bug-btn svg, .set-bug svg { fill: none; }
@media (max-width: 640px) { .bug-btn { display: none !important; } }
.bug-shot > .btn { flex: none; padding: 0 16px; }
.push-prefs { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.push-prefs[hidden], .push-prefs [hidden] { display: none; }
.push-prefs p { margin: 0; }
.push-events { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.push-events .check { align-items: flex-start; line-height: 1.4; }
.push-events .check input { margin-top: 2px; }
/* ------------------------------------------------------------ emoji picker */
.emoji-btn { flex: none; color: var(--muted); }
.emoji-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emoji-btn:hover, .emoji-btn[aria-expanded="true"] { color: var(--accent); }
.rm-compose .emoji-btn { width: 46px; height: 46px; padding: 0; }
.emoji-pop { position: fixed; z-index: 1200; display: flex; flex-direction: column; min-height: 220px; background: var(--surface-solid); color: var(--fg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); overflow: hidden; }
.emoji-search { margin: 10px 10px 6px; padding: 9px 12px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--input, transparent); color: var(--fg); }
.emoji-tabs { display: flex; gap: 2px; padding: 0 8px 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.emoji-tab { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.emoji-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emoji-tab img { width: 20px; height: 20px; object-fit: contain; filter: grayscale(0.6); opacity: 0.75; }
.emoji-tab:hover img, .emoji-tab[data-on] img { filter: none; opacity: 1; }
.emoji-tab:hover { color: var(--fg); background: var(--input, rgba(127,127,127,0.1)); }
.emoji-tab[data-on] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 8px 8px 0 0; }
.emoji-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; position: relative; }
.emoji-sec[hidden], .emoji-results[hidden] { display: none; }
.emoji-sec h4 { position: sticky; top: -4px; z-index: 1; margin: 0; padding: 8px 4px 4px; background: var(--surface-solid); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.emoji-grid-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; }
.emoji-results { padding-top: 6px; }
.emoji-results p { grid-column: 1 / -1; margin: 10px 4px; }
.emoji-cell { height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 24px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.emoji-cell img { width: 28px; height: 28px; object-fit: contain; }
.emoji-cell:hover, .emoji-cell:focus-visible { background: var(--input, rgba(127,127,127,0.14)); outline: none; }
/* ------------------------------------------------------------ rooms: discover */
.rm-discover-row { margin: 4px 0 2px; }
.rm-discover-row[aria-current="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.rm-pic-icon { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.rm-pic-icon svg { width: 24px; height: 24px; }
.rm-discover { flex: 1; min-height: 0; overflow-y: auto; padding: 26px clamp(18px, 3vw, 40px) 40px; display: flex; flex-direction: column; gap: 20px; }
.rm-disc-head { display: flex; align-items: flex-start; gap: 12px; }
.rm-disc-head .rm-back { margin-top: 4px; }
.rm-disc-title { font-size: clamp(34px, 3.4vw, 54px); }
.rm-disc-head p { margin: 8px 0 0; max-width: 620px; }
.rm-disc-search { position: relative; max-width: 640px; }
.rm-disc-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.rm-disc-search input { width: 100%; box-sizing: border-box; padding: 13px 14px 13px 44px; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--input, transparent); color: var(--fg); }
.rm-disc-search input:focus-visible { border-color: var(--accent); outline: none; }
.rm-disc-body { display: grid; gap: 26px; }
.rm-disc-sec { display: grid; gap: 10px; }
.rm-disc-sec .section-title { margin: 0; }
.rm-disc-none { display: grid; justify-items: start; gap: 10px; padding: 20px 0; }
.rm-disc-none p { margin: 0; }
.rm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rm-cards-big { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rm-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 14px); background: var(--input, rgba(127,127,127,0.05)); transition: border-color 0.12s, transform 0.12s; }
.rm-card:hover, .rm-card:focus-within { border-color: var(--accent); }
.rm-card-hit { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: none; border-radius: inherit; cursor: pointer; }
.rm-card-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rm-card-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rm-card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.rm-card-topic { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rm-card .rm-tags { margin-top: 2px; }
.rm-card-go { flex: none; min-height: 30px; height: 30px; padding: 0 12px; font-size: 11px; pointer-events: none; }
.rm-card-go.primary-ish { border-color: var(--accent); color: var(--accent); }
.rm-card-big { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; gap: 0; background: var(--surface-solid); }
.rm-card-big .rm-pic-card { width: 100%; height: 132px; border-radius: 0; font-size: 46px; }
.rm-card-big .rm-card-main { padding: 12px 14px 4px; }
.rm-card-big .rm-card-name { font-size: 17px; }
.rm-card-big .rm-card-go { align-self: flex-start; margin: 6px 14px 14px; }
.rm-tag-featured { border-color: var(--accent); color: var(--accent); }
.rm-disc-head .rm-back { display: none; }
@media (max-width: 760px) {
  .rm-disc-head .rm-back { display: inline-flex; }
  .rm-discover { padding: 14px 14px 30px; gap: 16px; }
  .rm-cards, .rm-cards-big { grid-template-columns: 1fr; }
}
.rm-name-line { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.rm-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-mark { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.rm-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rm-mark svg .mark-fill { fill: currentColor; stroke: none; }
.rm-mark svg .mark-cut { fill: none; stroke: var(--surface-solid, #141414); stroke-width: 2.3; }
.rm-mark[data-mark="verified"] { color: #3aa0ff; }
.rm-mark[data-mark="partner"] { color: #b07cff; }
.rm-mark-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rm-name { display: flex; align-items: center; gap: 8px; }
.rm-name .rm-mark { padding: 1px 7px 1px 5px; border: 1px solid currentColor; border-radius: 999px; }
.rm-name .rm-mark svg { width: 14px; height: 14px; }
.rm-tag-mark[data-mark="official"] { border-color: var(--accent); color: var(--accent); }
.rm-tag-mark[data-mark="verified"] { border-color: #3aa0ff; color: #3aa0ff; }
.rm-tag-mark[data-mark="partner"] { border-color: #b07cff; color: #b07cff; }
.rm-card-big .rm-card-name { display: flex; }
.emoji-search, .emoji-tabs { flex: none; }
#rm-search { width: 100%; box-sizing: border-box; padding: 13px 14px 13px 44px; }
/* ------------------------------------------------------------ start page */
.app[data-view="home"] .view-home { display: flex; }
.view-home { flex: 1; flex-direction: column; padding: clamp(24px, calc(4vh / var(--z, 1)), 48px) 0 32px; }
.home-guest[hidden], .home-member[hidden] { display: none; }
.home-guest, .home-member { display: flex; flex-direction: column; gap: clamp(22px, calc(4vh / var(--z, 1)), 40px); }
.view-home svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.home-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.home-title { font-size: clamp(56px, 8.6vw, 132px); }
.home-typed { margin: 16px 0 0; font-family: var(--font-ui); font-size: clamp(16px, 1.6vw, 22px); min-height: 1.4em; white-space: nowrap; overflow: hidden; }
.home-prompt { color: var(--muted); }
.home-caret { display: inline-block; width: 0.5em; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); animation: dm-blink 1s steps(1, end) infinite; }
.home-lede { max-width: 320px; margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.home-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.home-kicker.accent { color: var(--accent); }
.home-kicker.strong { color: var(--fg); }
.home-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: home-pulse 1.6s ease-in-out infinite; }
@keyframes home-pulse { 50% { opacity: 0.3; } }
.home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.home-cards.single { grid-template-columns: minmax(0, 720px); }
.home-card { display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 2vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); min-width: 0; }
.home-card-live { border-color: var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 11%, var(--surface-solid)), var(--surface-solid) 60%); }
:root[data-theme="space"] .home-card { border-width: 2.5px; box-shadow: 6px 6px 0 var(--line); }
.home-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home-card-title { font-size: clamp(36px, 3.8vw, 56px); }
.home-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.home-pri .btn-plus svg { width: 20px; height: 20px; stroke-width: 2.3; }
.home-live-list { display: grid; }
.home-live-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.home-live-row:hover:not(:disabled) .home-live-name { color: var(--accent); }
.home-live-row:disabled { cursor: default; opacity: 0.55; }
.home-live-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.home-live-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 21px; text-transform: uppercase; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-live-people { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-tag { flex: none; padding: 2px 5px; border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; }
.home-lock { width: 13px !important; height: 13px !important; color: var(--muted); }
.home-seats { flex: none; display: flex; gap: 3px; }
.home-seats i { display: block; width: 9px; height: 9px; background: var(--line); }
.home-seats i.on { background: var(--accent); }
.home-live-count { flex: none; width: 34px; text-align: right; color: var(--muted); font-size: 11px; }
.home-room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-room, .home-mine-row, .home-featured { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--input, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.home-room:hover, .home-mine-row:hover, .home-featured:hover { border-color: var(--accent); }
.home-pic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: min(var(--radius), 10px); background: color-mix(in srgb, var(--accent) 24%, var(--input, #333)); font-weight: 700; font-size: 17px; }
.home-pic img, .home-featured-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-room-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.home-room-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 700; font-size: 14px; }
.home-room-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-room-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-room-meta { color: var(--muted); font-size: 11px; }
/* members */
.home-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; }
.home-cols.single { grid-template-columns: minmax(0, 1fr); }
.home-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.home-col-live { padding-right: clamp(20px, 3vw, 44px); }
.home-col-rooms { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--line); }
.home-cols.single .home-col-live { padding-right: 0; }
.home-hey-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.home-hey { font-size: clamp(48px, 6vw, 88px); }
.home-live-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-live-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); min-height: 220px; min-width: 0; }
.home-live-card.hot { border-color: var(--accent); }
.home-live-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.home-live-card-top h3 { margin: 0; font-size: 24px; line-height: 1; min-width: 0; overflow-wrap: anywhere; }
.home-live-seats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.home-live-seats li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.home-seat-name { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.home-live-join { margin-top: auto; width: 100%; justify-content: center; }
.home-live-join.accent { border-color: var(--accent); color: var(--accent); }
.home-mine { display: grid; gap: 8px; }
.home-mine-row { border-color: transparent; background: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 2px; }
.home-mine-row:hover { border-color: transparent; border-bottom-color: var(--line); background: var(--input, rgba(127,127,127,0.06)); }
.home-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; }
.home-badge.mention { background: none; border: 1px solid var(--accent); color: var(--accent); line-height: 20px; }
.home-featured-h { margin-top: 8px; }
.home-featured { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; gap: 0; }
.home-featured-pic { height: 120px; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--accent) 24%, var(--input, #333)); font-family: var(--font-display); font-size: 46px; }
.home-featured-body { display: grid; gap: 4px; padding: 12px 14px; }
@media (max-width: 1000px) {
  .home-cards { grid-template-columns: 1fr; }
  .home-cols { grid-template-columns: 1fr; gap: 34px; }
  .home-col-live { padding-right: 0; }
  .home-col-rooms { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 26px; }
  .home-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 640px) {
  .view-home { padding: 16px 0 96px; }
  .home-title { font-size: 52px; }
  .home-room-grid { grid-template-columns: 1fr; }
  .home-live-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -10px; padding: 0 10px 4px; scrollbar-width: none; }
  .home-live-card { flex: none; width: 78%; scroll-snap-align: start; min-height: 0; }
  .home-actions > .btn { flex: 1; justify-content: center; }
}
.start-pref { display: grid; gap: 8px; }
.start-pref p { margin: 0; }
.start-pref label[hidden] { display: none; }
@media (max-width: 640px) { .home-actions > .btn.primary { justify-content: space-between; } }
/* ------------------------------------------------------------ mentions */
.rm-at { display: inline; padding: 0 3px; margin: 0 -1px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.rm-at[data-me="1"] { background: var(--accent); color: var(--on-accent); }
.rm-msg[data-mine="1"] .rm-at { background: rgba(0, 0, 0, 0.18); color: inherit; }
.rm-msg[data-mention="1"] { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--input, rgba(127,127,127,0.12))); }
.rm-badge-at { background: none; border: 1px solid var(--accent); color: var(--accent); }
.mention-pop { width: 280px; }
.mention-opt .rm-mini { width: 26px; height: 26px; }
.mention-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-swipe { position: absolute; left: -44px; top: 50%; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; opacity: 0.5; transition: opacity 0.12s, background 0.12s; }
.rm-swipe[data-ready="true"] { opacity: 1; background: var(--accent); color: var(--on-accent); }
.rm-messages { overflow-x: hidden; }
.rm-author-btn { touch-action: manipulation; }
.crop-dialog.crop-wide { width: min(720px, calc(calc(100vw / var(--z, 1)) - 24px)); }
.crop-wide .crop-stage { width: 100%; aspect-ratio: 1200 / 630; }
/* ------------------------------------------------------------ room banners */
.rm-hero, .rm-banner-edit { position: relative; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--accent) 18%, var(--input, #222)); }
.rm-hero img, .rm-banner-edit img, .rr-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-hero[data-fallback]::before, .rm-banner-edit[data-fallback]::before, .home-featured-pic[data-fallback]::before { content: ''; position: absolute; inset: -20px; background: var(--bg-img, none) center / cover; filter: blur(22px) saturate(1.2); opacity: 0.55; transform: scale(1.1); }
.rm-hero[data-fallback]::after, .rm-banner-edit[data-fallback]::after, .home-featured-pic[data-fallback]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface-solid) 60%, transparent)); }
.rm-hero-pic { position: relative; z-index: 1; width: 72px; height: 72px; font-size: 28px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); }
.rm-card-big .rm-hero { width: 100%; height: auto; aspect-ratio: 1200 / 630; max-height: 180px; }
.rm-banner-edit { width: 100%; aspect-ratio: 1200 / 630; border-radius: min(var(--radius), 12px); border: 1px solid var(--line); }
.rr-banner { margin: -28px -28px 18px; aspect-ratio: 1200 / 630; max-height: 220px; overflow: hidden; border-bottom: 1px solid var(--line); }
.rr-banner[hidden] { display: none; }
.home-featured-pic { position: relative; height: auto; aspect-ratio: 1200 / 630; max-height: 200px; }
.home-featured-mini { position: relative; z-index: 1; width: 72px; height: 72px; font-size: 28px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); }
.rm-card-big .rm-hero { aspect-ratio: auto; height: 160px; max-height: none; }
.home-featured-pic { aspect-ratio: auto; height: 170px; max-height: none; width: 100%; }
.rr-banner { aspect-ratio: auto; height: 180px; max-height: none; }
.rm-card-big .rm-hero { aspect-ratio: auto; height: 160px; max-height: none; }
.home-featured-pic { aspect-ratio: auto; height: 170px; max-height: none; width: 100%; }
.rr-banner { aspect-ratio: auto; height: 180px; max-height: none; }
/* ------------------------------------------------------------ room warnings */
.room-warning { width: min(560px, calc(calc(100vw / var(--z, 1)) - 32px)); border-color: var(--accent); }
.rw-head { display: flex; align-items: center; gap: 14px; }
.rw-head .panel-title { margin: 0; }
.rw-head p { margin: 2px 0 0; }
.rw-icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.rw-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rw-reason { margin: 4px 0 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--input, rgba(127,127,127,0.08)); border-radius: 6px; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rw-rules { display: grid; gap: 10px; max-height: calc(40vh / var(--z, 1)); overflow-y: auto; }
.rw-rules[hidden] { display: none; }
.rw-rules .section-title { margin: 0; }
#ra-rules-row[hidden] { display: none; }

/* Settings: style picker tiles (8.25) */
.style-parts { gap: 18px; }
.style-group { display: grid; gap: 10px; }
.style-group[hidden] { display: none; }
.style-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.style-group-head h4 { margin: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.style-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.style-tile { display: grid; grid-template-rows: 64px auto; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--input); color: var(--fg); cursor: pointer; overflow: hidden; text-align: center; transition: border-color .15s, transform .15s, box-shadow .15s; }
.style-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.style-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.style-tile[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -10px var(--accent); }
.tile-stage { display: grid; place-items: center; min-width: 0; padding: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); overflow: hidden; }
.tile-label { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 6px 7px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-tile[aria-checked="true"] .tile-label { color: var(--accent); }
.tile-anim { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: .7; animation: tile-spin 1.4s linear infinite; }
@keyframes tile-spin { to { transform: rotate(360deg); } }
.tile-name { max-width: 100%; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, var(--input)); font-family: var(--font-ui); font-weight: 700; font-size: 16px; }
.tile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.seat.tile-seat { display: grid; align-content: center; gap: 6px; width: 84px; height: 46px; min-height: 0; padding: 8px 10px; border-radius: 8px; pointer-events: none; }
.seat.tile-seat i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 35%, transparent); }
.seat.tile-seat i + i { width: 60%; }
.color-slot { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--input); }
.color-swatch { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 25%, transparent); cursor: pointer; flex: none; }
.color-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.color-swatch:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-quick { display: inline-flex; gap: 3px; }
.color-dot { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); background: var(--c); cursor: pointer; }
.color-dot:hover { transform: scale(1.2); }
.style-group .style-colors { flex-wrap: wrap; gap: 6px; }
@media (max-width: 520px) {
  .style-tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .color-quick { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tile-anim { animation: none; } }
.style-group-h { margin: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.style-group .style-colors { display: flex; }
.style-group .style-colors:empty { display: none; }
.style-tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
@media (max-width: 520px) {
  .style-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .style-tile { grid-template-rows: 52px auto; }
  .tile-label { font-size: 11px; padding: 5px 4px 6px; }
  .seat.tile-seat { width: 72px; height: 38px; }
  .tile-name { font-size: 14px; }
}
.tile-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.style-editor .style-preview { position: sticky; top: 0; z-index: 2; padding: 4px 0 8px; background: var(--surface-solid); }

/* Video verification (8.26) */
.vv-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--input)); }
.vv-card[hidden] { display: none; }
.vv-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.vv-card-icon svg, .vv-how-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vv-card-body p { margin: 2px 0 0; }
.vv-card-actions { display: flex; gap: 8px; }
.vv-card[data-state="verified"] .vv-card-icon { background: color-mix(in srgb, #2ec4a6 22%, transparent); color: #2ec4a6; }
.vv-card[data-state="open"] .vv-card-icon { animation: vv-pulse 2s ease-in-out infinite; }
@keyframes vv-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent); } }
@media (max-width: 520px) { .vv-card { grid-template-columns: auto minmax(0, 1fr); } .vv-card-actions { grid-column: 1 / -1; } }

.vv-dialog { width: min(640px, calc(calc(100vw / var(--z, 1)) - 24px)); }
.vv-stage { display: grid; gap: 14px; }
.vv-stage[hidden] { display: none; }
.vv-stage > p { margin: 0; }
.vv-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: vv; }
.vv-how li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.vv-how-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--input); color: var(--accent); counter-increment: vv; }
.vv-how-icon::after { content: counter(vv); position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #111; font: 700 11px/18px var(--font-ui); text-align: center; }

.vv-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.vv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
#vv-replay { object-fit: contain; }
.vv-mirror { transform: scaleX(-1); }
.vv-frame { position: absolute; left: 50%; top: 46%; width: 42%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border: 2px dashed rgba(255, 255, 255, 0.45); border-radius: 50% / 42%; pointer-events: none; }
.vv-hint { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; text-align: center; }
.vv-hint[hidden] { display: none; }
.vv-rec { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font: 600 13px var(--font-ui); letter-spacing: 0.08em; }
.vv-rec[hidden] { display: none; }
.vv-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; animation: vv-blink 1s steps(2) infinite; }
@keyframes vv-blink { 50% { opacity: 0.25; } }
.vv-count { position: absolute; inset: 0; display: grid; place-items: center; font: 700 120px/1 var(--font-display, var(--font-ui)); color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.25); }
.vv-count[hidden] { display: none; }
.vv-step { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 6px; padding: 12px 14px 10px; border-radius: 12px; background: rgba(10, 10, 10, 0.78); color: #fff; backdrop-filter: blur(6px); }
.vv-step[hidden] { display: none; }
.vv-step-in { animation: vv-in 0.35s ease-out; }
@keyframes vv-in { from { opacity: 0; transform: translateY(10px); } }
.vv-step-n { font: 600 11px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.vv-step-text { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.vv-code { justify-self: start; padding: 2px 12px; border-radius: 8px; background: var(--accent); color: #111; font: 700 26px/1.3 var(--font-ui); letter-spacing: 0.3em; }
.vv-code[hidden] { display: none; }
.vv-step-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.vv-step-bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.vv-steps-done { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.vv-upload { height: 6px; border-radius: 3px; background: var(--input); overflow: hidden; }
.vv-upload[hidden] { display: none; }
.vv-upload span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.vv-done { justify-items: center; text-align: center; }
.vv-done .row { justify-self: stretch; }
.vv-done-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, #2ec4a6 20%, transparent); color: #2ec4a6; }
.vv-done-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
  .vv-screen { aspect-ratio: 3 / 4; }
  .vv-step-text { font-size: 15px; }
  .vv-frame { width: 62%; }
}
@media (prefers-reduced-motion: reduce) { .vv-rec-dot, .vv-step-in, .vv-card[data-state="open"] .vv-card-icon { animation: none; } }
.rr-agree { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
#dlg-room-rules .rm-rules, #rw-rules { padding-left: 30px; }
/* Live check (8.27) */
.vv-hint[data-ok="true"] { background: rgba(20, 110, 80, 0.75); }
.vv-step-hint { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 13px; }
.vv-step-hint[hidden] { display: none; }
.vv-step[data-state="done"] { box-shadow: inset 0 0 0 2px #2ec4a6; }
.vv-step[data-state="done"] .vv-step-bar span { background: #2ec4a6; }
.vv-step[data-state="done"] .vv-step-hint { background: #2ec4a6; color: #04241c; font-weight: 700; }
.vv-steps-done { list-style: none; padding-left: 0; color: var(--fg); }
.vv-steps-done li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.vv-res { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--input); color: var(--muted); }
.vv-res svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
li[data-result="seen"] .vv-res { background: color-mix(in srgb, #2ec4a6 22%, transparent); color: #2ec4a6; }
li[data-result="partly"] .vv-res { background: color-mix(in srgb, #ffb020 22%, transparent); color: #ffb020; }
li[data-result="missed"] .vv-res { background: color-mix(in srgb, #ff5a5a 22%, transparent); color: #ff5a5a; }
.vv-review-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #ffb020 12%, transparent); font-size: 13px; }
.vv-review-note[hidden] { display: none; }
/* Room messages: the profile picture beside the bubble (8.27) */
.rm-msg:not([data-mine="1"]) { margin-left: 46px; }
.rm-face { position: absolute; left: -46px; top: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; touch-action: manipulation; }
.rm-face-img { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--line); color: var(--fg); font: 700 15px var(--font-ui); }
.rm-face-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rm-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) {
  .rm-msg:not([data-mine="1"]) { margin-left: 38px; }
  .rm-face { left: -38px; width: 30px; height: 30px; }
  .rm-face-img { font-size: 13px; }
}
.vv-cam-row { display: flex; align-items: center; gap: 10px; }
.vv-cam-row[hidden] { display: none; }
.vv-cam-row label { flex: none; font: 600 12px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.vv-cam-row select { flex: 1; min-width: 0; }
/* Warnings, for room staff (8.29) */
.rm-warned { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border: 1px solid color-mix(in srgb, #ffb020 55%, transparent); border-radius: 999px; background: color-mix(in srgb, #ffb020 14%, transparent); color: #ffb020; font: 700 11px var(--font-ui); line-height: 16px; cursor: pointer; }
span.rm-warned { cursor: default; }
.rm-warned[hidden] { display: none; }
.rm-warned svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rm-warned:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rm-warn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: calc(50vh / var(--z, 1)); overflow-y: auto; }
.rm-warn-list li { padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid #ffb020; border-radius: 10px; }
.rm-warn-reason { margin: 0 0 4px; overflow-wrap: anywhere; }
#dlg-room-warnings { display: none; }
#dlg-room-warnings[open] { display: grid; gap: 12px; }

/* Verification: not possible here / go on on the phone (8.29) */
.vv-blocked { display: grid; gap: 10px; justify-items: start; padding: 12px 14px 12px 44px; border-radius: 10px; position: relative;
  background: color-mix(in srgb, #ff5a5a 12%, transparent); border: 1px solid color-mix(in srgb, #ff5a5a 45%, transparent); }
.vv-blocked[hidden] { display: none; }
.vv-blocked p { margin: 0; }
.vv-blocked::before { content: ''; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; background: #ff6b6b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat; }
.vv-blocked [hidden] { display: none; }
.vv-to-phone { justify-self: start; font-size: 13px; }
.vv-to-phone[hidden] { display: none; }
.vv-phone { justify-items: center; text-align: center; }
.vv-phone .row { justify-self: stretch; }
.vv-qr { width: min(240px, 70vw); aspect-ratio: 1; padding: 10px; border-radius: 14px; background: #fff; }
.vv-qr svg { display: block; width: 100%; height: 100%; }
.vv-link-row { display: flex; gap: 8px; justify-self: stretch; }
.vv-link-row input { flex: 1; min-width: 0; font-size: 13px; }
.vv-waiting { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 14px; }
.vv-waiting-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: vv-pulse-dot 1.2s ease-in-out infinite; }
@keyframes vv-pulse-dot { 50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .vv-waiting-dot { animation: none; } }
/* Verification: on-screen help for the moves (8.29) */
.vv-guide { position: absolute; inset: 0; pointer-events: none; }
.vv-guide:empty { display: none; }
.vv-face { position: absolute; left: 50%; top: 46%; width: 42%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); }
.vv-side { position: absolute; top: 64%; transform: translateY(-50%); padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.75); font: 700 12px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.vv-side-left { left: 10px; }
.vv-side-right { right: 10px; }
.vv-side.on { background: var(--accent); color: #111; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.vv-tag { display: block; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #111; font: 700 12px var(--font-ui); white-space: nowrap; text-align: center; }
.vv-hand { display: block; width: 100%; height: auto; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.vv-hand-fill { fill: currentColor; opacity: 0.16; }
.vv-hand-line { fill: none; stroke: currentColor; stroke-width: 4.6; }
.vv-spot { position: absolute; width: 22%; aspect-ratio: 1; border: 3px solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); animation: vv-spot 1.4s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25); }
.vv-ear-left { left: 2%; top: 50%; }
.vv-ear-right { left: 98%; top: 50%; }
.vv-spot-eye { width: 20%; }
.vv-eye-left { left: 34%; top: 41%; }
.vv-eye-right { left: 66%; top: 41%; }
@keyframes vv-spot { 50% { transform: translate(-50%, -50%) scale(1.15); opacity: .65; } }
.vv-near { position: absolute; top: 46%; width: 34%; display: grid; justify-items: center; transform: translateY(-50%); }
.vv-near-left { right: 112%; }
.vv-near-right { left: 112%; }
.vv-near-eye { top: 30%; }
.vv-wave { position: absolute; top: 40%; width: 42%; display: grid; justify-items: center; transform: translateY(-50%); }
.vv-wave-left { right: 104%; }
.vv-wave-right { left: 104%; }
.vv-wave .vv-hand { transform-origin: 50% 90%; animation: vv-wave 1.1s ease-in-out infinite; }
.vv-wave-left .vv-hand { animation-name: vv-wave-flip; }
.vv-still .vv-hand { animation: none; }
@keyframes vv-wave { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes vv-wave-flip { 0%, 100% { transform: scaleX(-1) rotate(-14deg); } 50% { transform: scaleX(-1) rotate(14deg); } }
.vv-turn { position: absolute; top: 50%; width: 30%; transform: translateY(-50%); }
.vv-turn-left { right: 104%; }
.vv-turn-right { left: 104%; }
.vv-chev { display: block; width: 100%; height: auto; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)); }
.vv-turn-left .vv-chev { animation: vv-left 1.2s ease-in-out infinite; }
.vv-turn-right .vv-chev { animation: vv-right 1.2s ease-in-out infinite .6s; }
@keyframes vv-left { 50% { transform: translateX(-25%); opacity: .5; } }
@keyframes vv-right { 50% { transform: translateX(25%); opacity: .5; } }
.vv-up { position: absolute; left: 50%; bottom: 102%; width: 26%; transform: translateX(-50%); }
.vv-up .vv-chev { animation: vv-upward 1.2s ease-in-out infinite; }
@keyframes vv-upward { 50% { transform: translateY(-25%); opacity: .5; } }
@media (max-width: 520px) {
  .vv-face { width: 62%; }
  .vv-near, .vv-wave { width: 28%; }
  .vv-wave-left { right: 100%; }
  .vv-wave-right { left: 100%; }
  .vv-turn { width: 20%; }
  .vv-side { font-size: 11px; padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) { .vv-spot, .vv-wave .vv-hand, .vv-chev { animation: none !important; } .vv-wave-left .vv-hand { transform: scaleX(-1); } }
/* The pictures fill the left gutter now: less padding on that side. */
.rm-messages { padding-left: 14px; }
@media (max-width: 520px) { .rm-messages { padding-left: 8px; } }
/* Settings > Look > Size: each option shown in its own size */
.scale-s { font-size: 0.85em; }
.scale-b { font-size: 1.15em; }
/* Friend requests: the name gets the whole line, the buttons go below. */
.dm-request { flex-wrap: wrap; cursor: default; gap: 8px; }
.dm-request .dm-row-link { flex: 1 1 100%; }
.dm-request > .btn { flex: 1; min-height: 40px; }
/* The QR code must stay exactly as drawn (the icon rules round and thicken lines). */
.vv-qr svg, .vv-qr svg path { stroke-width: 1 !important; stroke-linecap: butt !important; stroke-linejoin: miter !important; filter: none !important; }
.vv-qr svg path[fill] { fill: #ffffff !important; }
.vv-qr svg path:not([fill]) { fill: none !important; stroke: #111111 !important; }
/* Cookie note and the notifications hint (8.30) */
.notice-bar, .notice-card { position: fixed; z-index: 60; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-solid); color: var(--fg); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.55); }
.notice-bar[hidden], .notice-card[hidden] { display: none; }
.notice-bar { left: 50%; bottom: 16px; transform: translateX(-50%); width: min(760px, calc(100% - 24px)); }
.notice-bar p { margin: 0; flex: 1; font-size: 14px; line-height: 1.5; }
.notice-bar .btn { flex: none; }
.notice-card { right: 16px; bottom: 16px; width: min(380px, calc(100% - 24px)); align-items: flex-start; }
.notice-body { display: grid; gap: 8px; min-width: 0; }
.notice-body h2 { margin: 0; font: 700 15px var(--font-ui); }
.notice-body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.notice-body .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notice-body .linkish { font-size: 12px; }
.notice-icon { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-sizing: content-box; }
.notice-card { animation: notice-in .35s ease-out; }
@keyframes notice-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 600px) {
  .notice-bar { flex-wrap: wrap; bottom: 10px; }
  .notice-bar p { flex-basis: calc(100% - 60px); }
  .notice-bar .btn { width: 100%; }
  .notice-card { right: 12px; left: 12px; width: auto; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .notice-card { animation: none; } }
.notice-bar, .notice-card { z-index: 120; }
.notice-body .linkish { padding: 4px 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.notice-body .linkish:hover { color: var(--fg); }
/* Search in the staff panel (8.31) */
.rm-staff-search { position: relative; display: block; margin: 0 16px 10px; }
.rm-staff-search[hidden] { display: none; }
.rm-staff-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.rm-staff-search input { width: 100%; box-sizing: border-box; padding-left: 36px; }
/* The help follows the face; hands outlined green or red (8.31) */
.vv-hands { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vv-face[style] { transition: left .12s linear, top .12s linear, width .12s linear; }
.vv-guide[data-state="ok"] .vv-hand { color: #2ec4a6; }
.vv-guide[data-state="bad"] .vv-hand { color: #ff5a5a; }
.vv-guide[data-state="ok"] .vv-spot { border-color: #2ec4a6; }
.vv-guide[data-state="ok"] .vv-tag { background: #2ec4a6; }
/* Following a real face: sensible sizes, a little away from the face */
.vv-face[style] .vv-near, .vv-face[style] .vv-wave { width: clamp(52px, 40%, 120px); }
.vv-face[style] .vv-near-left, .vv-face[style] .vv-wave-left { right: calc(100% + 18px); }
.vv-face[style] .vv-near-right, .vv-face[style] .vv-wave-right { left: calc(100% + 18px); }
.vv-face[style] .vv-spot { width: clamp(22px, 22%, 60px); }
/* Add to home screen (phones and tablets, 8.31) */
.install-hint { position: fixed; z-index: 130; left: 0; right: 0; bottom: 0; display: grid; gap: 14px; padding: 18px 18px max(18px, env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--surface-solid); color: var(--fg); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.7); animation: ah-in .4s cubic-bezier(.2, .8, .2, 1); }
.install-hint[hidden] { display: none; }
@media (min-width: 640px) { .install-hint { left: 50%; right: auto; bottom: 16px; width: 560px; transform: translateX(-50%); border-radius: 22px; border-bottom: 1px solid var(--line); animation-name: ah-in-wide; } }
@keyframes ah-in { from { transform: translateY(100%); } }
@keyframes ah-in-wide { from { transform: translate(-50%, 30px); opacity: 0; } }
.install-head { display: flex; gap: 12px; align-items: center; }
.install-icon { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.install-head h2 { margin: 0; font: 700 16px var(--font-ui); }
.install-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.install-body { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.install-steps li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 12px; font-size: 13px; line-height: 1.4; transition: background .3s; animation: ah-step 9s linear infinite; animation-delay: calc(var(--i) * 3s - 9s); }
.install-steps b { color: var(--fg); }
.install-steps small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ah-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--input); color: var(--accent); }
.ah-num svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ah-step { 0%, 31% { background: color-mix(in srgb, var(--accent) 16%, transparent); } 34%, 100% { background: transparent; } }
.install-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.install-actions .linkish { padding: 4px 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-left: auto; }

/* The drawn device */
.ah-device { --w: 108px; --h: 226px; flex: none; padding: 4px; border: 2px solid color-mix(in srgb, var(--fg) 45%, transparent); border-radius: 20px; }
.ah-ipad { --w: 150px; --h: 200px; border-radius: 16px; }
.ah-screen { position: relative; width: var(--w); height: var(--h); overflow: hidden; border-radius: 15px; background: #1b1b1f; }
.ah-ipad .ah-screen { border-radius: 11px; }
.ah-page { position: absolute; inset: 32px 10px 34px; display: grid; gap: 8px; align-content: start; }
.ah-page span { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.ah-page span:nth-child(2) { width: 70%; } .ah-page span:nth-child(3) { width: 85%; }
.ah-bar { position: absolute; left: 0; right: 0; height: 26px; display: flex; align-items: center; justify-content: space-around; background: #26262b; }
.ah-bottom { bottom: 0; }
.ah-top { top: 0; justify-content: flex-end; gap: 6px; padding: 0 6px; }
.ah-url { flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); }
.ah-btn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #e9e9ee; }
.ah-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ah-target { animation: ah-target 9s ease-in-out infinite; }
@keyframes ah-target { 8%, 26% { background: transparent; } 14%, 20% { background: var(--accent); color: #111; } }
.ah-sheet, .ah-menu { position: absolute; display: grid; gap: 4px; padding: 10px 8px; background: #2c2c32; opacity: 0; }
.ah-sheet { left: 0; right: 0; bottom: 0; height: 112px; align-content: start; border-radius: 12px 12px 0 0; animation: ah-sheet 9s ease-in-out infinite; }
.ah-menu { top: 28px; right: 5px; width: 72%; border-radius: 9px; transform-origin: top right; animation: ah-menu 9s ease-in-out infinite; }
.ah-sheet > span, .ah-menu > span { height: 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.ah-row { display: flex !important; align-items: center; gap: 4px; padding: 0 5px; height: 20px !important; color: #fff; animation: ah-row 9s ease-in-out infinite; }
.ah-row svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ah-row i { font: 600 7.5px var(--font-ui); font-style: normal; white-space: nowrap; overflow: hidden; }
@keyframes ah-sheet { 0%, 30% { opacity: 0; transform: translateY(100%); } 36%, 64% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(100%); } }
@keyframes ah-menu { 0%, 30% { opacity: 0; transform: scale(.6); } 36%, 64% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes ah-row { 0%, 44% { background: rgba(255, 255, 255, 0.08); } 49%, 58% { background: var(--accent); color: #111; } 62%, 100% { background: rgba(255, 255, 255, 0.08); } }
.ah-confirm { position: absolute; left: 12px; right: 12px; top: 64px; height: 70px; display: flex; align-items: flex-end; justify-content: space-between; padding: 10px; border-radius: 12px; background: #2c2c32; opacity: 0; animation: ah-confirm 9s ease-in-out infinite; }
.ah-ipad .ah-confirm { left: 28px; right: 28px; top: 56px; }
.ah-app { width: 30px; height: 30px; border-radius: 8px; background: url('/img/app-180.png') center / cover; align-self: center; }
.ah-confirm i { font: 700 9px var(--font-ui); font-style: normal; padding: 4px 8px; border-radius: 6px; color: #8ab4ff; animation: ah-add 9s ease-in-out infinite; }
@keyframes ah-confirm { 0%, 64% { opacity: 0; transform: scale(.9); } 69%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ah-add { 0%, 78% { background: transparent; } 82%, 90% { background: var(--accent); color: #111; } 94%, 100% { background: transparent; } }
/* The finger: where to tap, in turn */
.ah-finger { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); pointer-events: none; animation: ah-finger 9s ease-in-out infinite; }
.ah-iphone { --t1x: 54px; --t1y: 213px; --t2x: 60px; --t2y: 164px; --t3x: 80px; --t3y: 120px; }
.ah-android { --t1x: 95px; --t1y: 13px; --t2x: 68px; --t2y: 77px; --t3x: 80px; --t3y: 120px; }
.ah-ipad { --t1x: 137px; --t1y: 13px; --t2x: 100px; --t2y: 77px; --t3x: 106px; --t3y: 112px; }
@keyframes ah-finger {
  0% { left: 50%; top: 60%; opacity: 0; }
  6% { opacity: 1; }
  12%, 22% { left: var(--t1x); top: var(--t1y); transform: scale(1); }
  16% { transform: scale(.7); }
  40%, 56% { left: var(--t2x); top: var(--t2y); transform: scale(1); }
  50% { transform: scale(.7); }
  74%, 92% { left: var(--t3x); top: var(--t3y); transform: scale(1); opacity: 1; }
  85% { transform: scale(.7); }
  100% { left: var(--t3x); top: var(--t3y); opacity: 0; }
}
@media (max-width: 380px) { .install-body { grid-template-columns: 1fr; justify-items: center; } }
@media (prefers-reduced-motion: reduce) {
  .install-hint, .install-steps li, .ah-target, .ah-sheet, .ah-menu, .ah-row, .ah-confirm, .ah-confirm i, .ah-finger { animation: none !important; }
  .ah-finger { display: none; }
  .ah-sheet, .ah-menu { opacity: 1; }
}
.ah-sheet, .ah-menu { box-sizing: border-box; grid-template-columns: minmax(0, 1fr); }
.ah-sheet > span, .ah-menu > span { min-width: 0; }
.ah-row i { min-width: 0; text-overflow: ellipsis; }
.ah-row i, .ah-confirm i { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
.ah-row i { font-size: 7.5px; }
.ah-android .ah-menu { width: 84%; }
.ah-iphone .ah-row { gap: 3px; padding: 0 4px; }
.ah-iphone .ah-row i { font-size: 6.6px; }
.unsaved-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#dlg-unsaved .sanction-actions { flex-wrap: wrap; }
#dlg-unsaved .sanction-actions .btn.ghost { margin-right: auto; }
/* Signal's corner marks belong to plain seats: a decoration draws its own edge. */
:root[data-theme="signal"] .seat[data-deco]::before, :root[data-theme="signal"] .seat[data-deco]::after { border-color: transparent; }
/* room for decorations that stand out over the edge (washi tape) */
.style-editor .style-preview { padding: 14px 16px 16px; margin: 0 -16px; }
#dlg-unsaved { width: min(540px, calc(calc(100vw / var(--z, 1)) - 24px)); }
/* The oval follows the face once it is found (green), and stays in the middle until then. */
.vv-frame[style] { transition: left .12s linear, top .12s linear, width .12s linear, border-color .2s; }
.vv-frame[data-found] { border-color: rgba(46, 196, 166, 0.85); }
/* Phones: nothing wider than the dialog, the picture never taller than about
   half the screen, and the buttons always in reach at the bottom. */
.vv-stage { grid-template-columns: minmax(0, 1fr); }
.vv-stage > * { min-width: 0; }
@media (max-width: 520px) {
  .vv-dialog { padding: 18px 16px 0; }
  .vv-screen { width: min(100%, calc(calc(58dvh / var(--z, 1)) * 3 / 4)); justify-self: center; }
  .vv-stage > .row.end { position: sticky; bottom: 0; z-index: 3; margin: 0 -16px; padding: 12px 16px max(14px, env(safe-area-inset-bottom)); background: var(--surface-solid); border-top: 1px solid var(--line); }
  .vv-stage { padding-bottom: 0; }
}

/* Notifications: a line under the steps */
.install-push { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0; padding: 8px 10px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); font-size: 13px; line-height: 1.4; }
.install-push:empty { display: none; }
.install-push small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
/* Safari 26 (iPhone): screens one after the other, set by data-phase. */
.install-steps li.ah-js { animation: none; }
.install-steps li.ah-js.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ah-26 .ah-bar26 { bottom: 0; height: 30px; padding: 0 4px; gap: 4px; justify-content: space-between; background: transparent; }
.ah-26 .ah-round { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #2c2c32; color: #e9e9ee; }
.ah-26 .ah-round svg, .ah-26 .ah-pill svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ah-26 .ah-pill { flex: 1; display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 5px 0 2px; border-radius: 11px; background: #2c2c32; }
.ah-26 .ah-menu-btn { width: 18px; height: 18px; border-radius: 50%; }
.ah-26 .ah-url { height: 8px; }
.ah-26 .ah-pop, .ah-26 .ah-share, .ah-26 .ah-list, .ah-26 .ah-confirm { position: absolute; opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility 0s .25s; animation: none; }
.ah-26 .ah-pop { left: 16px; right: 16px; bottom: 34px; display: grid; gap: 3px; padding: 6px; border-radius: 12px; background: #2c2c32; transform: scale(.85); transform-origin: 30% 100%; }
.ah-26 .ah-share { left: 0; right: 0; bottom: 0; height: 104px; display: grid; align-content: start; gap: 8px; padding: 9px 8px; border-radius: 14px 14px 0 0; background: #2c2c32; transform: translateY(40%); }
.ah-26 .ah-share-head { height: 14px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.ah-26 .ah-dots { display: flex; justify-content: space-between; padding: 0 4px; }
.ah-26 .ah-dots i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); color: #fff; }
.ah-26 .ah-acts i { border-radius: 50%; }
.ah-26 .ah-dots svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ah-26 .ah-list { left: 0; right: 0; bottom: 0; top: 54px; display: grid; align-content: start; gap: 3px; padding: 9px 6px; border-radius: 14px 14px 0 0; background: #2c2c32; transform: translateY(20%); }
.ah-26 .ah-row { animation: none; background: rgba(255, 255, 255, 0.08); transition: background .2s, color .2s; }
.ah-26 .ah-confirm { animation: none; transform: scale(.9); }
.ah-26 .ah-confirm i { animation: none; transition: background .2s, color .2s; }
.ah-26[data-phase="2"] .ah-p2, .ah-26[data-phase="3"] .ah-p3, .ah-26[data-phase="4"] .ah-p4, .ah-26[data-phase="5"] .ah-p5 { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
/* what to tap lights up a moment after the screen appears */
.ah-26 .ah-hot { transition: background .2s .6s, color .2s .6s; }
.ah-26[data-phase="1"] .ah-menu-btn, .ah-26[data-phase="2"] .ah-p2 .ah-hot, .ah-26[data-phase="3"] .ah-p3 .ah-hot, .ah-26[data-phase="4"] .ah-p4 .ah-hot, .ah-26[data-phase="5"] .ah-p5 .ah-hot { background: var(--accent); color: #111; }
.ah-26 .ah-finger { animation: none; opacity: 1; transition: left .5s ease-in-out, top .5s ease-in-out; }
.ah-26[data-phase="1"] .ah-finger { left: 39px; top: 211px; }
.ah-26[data-phase="2"] .ah-finger { left: 54px; top: 130px; }
.ah-26[data-phase="3"] .ah-finger { left: 87px; top: 187px; }
.ah-26[data-phase="4"] .ah-finger { left: 54px; top: 142px; }
.ah-26[data-phase="5"] .ah-finger { left: 69px; top: 115px; }
@media (prefers-reduced-motion: reduce) { .ah-26 .ah-finger { display: none; } }
/* Rooms: who can join */
.rm-tag-join { white-space: nowrap; border-color: color-mix(in srgb, #2ec4a6 55%, var(--line)); color: color-mix(in srgb, #2ec4a6 75%, var(--fg)); }
.rm-tag-join .badge-row { margin-left: 3px; gap: 3px; }
.rm-card-go[data-blocked] { opacity: .45; }
.rs-join { display: grid; gap: 8px; border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.rs-join .pick input { position: absolute; opacity: 0; pointer-events: none; }
.rs-join .pick { position: relative; }
.rs-join .pick .badge-row { vertical-align: -3px; }
.rs-join-badges { display: grid; gap: 8px; }

/* ---------------------------------------------------------- message styles (rooms)
   data-msg on a bubble, colors in --m1, --m2. Chosen in Settings > Style,
   allowed per style level like the other parts (shared/styles.js). */
.rm-msg[data-msg] { --msg-shape: 14px 14px 14px 4px; }
.rm-msg[data-msg][data-mine="1"] { --msg-shape: 14px 14px 4px 14px; }
.rm-msg[data-msg="outline"], .rm-msg[data-msg="outline"][data-mine="1"] { border-radius: var(--msg-shape); border: 1.5px solid var(--m1); background: color-mix(in srgb, var(--m1) 10%, transparent); color: var(--fg); padding: 7px 11px 5px; }
.rm-msg[data-msg="gradient"], .rm-msg[data-msg="gradient"][data-mine="1"] { border-radius: var(--msg-shape); background: linear-gradient(135deg, var(--m1), var(--m2)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.rm-msg[data-msg="gradient"] .rm-time { opacity: .85; }
.rm-msg[data-msg="glow"], .rm-msg[data-msg="glow"][data-mine="1"] { border-radius: var(--msg-shape); border: 1.5px solid color-mix(in srgb, var(--m1) 40%, #fff); background: var(--surface-solid); color: var(--fg); padding: 7px 11px 5px; box-shadow: 0 0 0 1px var(--m1), 0 0 16px -2px var(--m1), inset 0 0 14px -6px var(--m1); margin-block: 3px; }
.rm-msg[data-msg="paper"], .rm-msg[data-msg="paper"][data-mine="1"] { border-radius: 2px; background: var(--m2, #f4efe2); color: var(--m3, #1c1b17); padding: 10px 13px 7px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); transform: rotate(-0.7deg); margin-top: 10px; }
.rm-msg[data-msg="paper"][data-mine="1"] { transform: rotate(0.8deg); }
.rm-msg[data-msg="paper"]::before { content: ''; position: absolute; top: -8px; left: 14px; width: 46px; height: 15px; transform: rotate(-6deg); pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 2px, transparent 2px 8px), color-mix(in srgb, var(--m1) 70%, transparent); }
.rm-msg[data-msg="paper"][data-mine="1"]::before { left: auto; right: 14px; transform: rotate(5deg); }
.rm-msg[data-msg="paper"] .rm-time { color: inherit; opacity: .6; }
.rm-msg[data-msg="paper"] .rm-author strong, .rm-msg[data-msg="comic"] .rm-author strong { color: var(--m3, #1c1b17) !important; -webkit-text-fill-color: var(--m3, #1c1b17); }
.rm-msg[data-msg="comic"], .rm-msg[data-msg="comic"][data-mine="1"] { border-radius: 16px; background: var(--m2, #fff); color: var(--m3, #111); border: 2.5px solid var(--m3, #111); box-shadow: 4px 4px 0 var(--m1); font-weight: 600; margin-top: 2px; margin-bottom: 6px; }
.rm-msg[data-msg="comic"] .rm-time { font-weight: 400; color: inherit; opacity: .65; }
.rm-msg[data-msg="comic"]:not([data-joined="1"])::after { content: ''; position: absolute; left: -11px; bottom: 7px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 11px solid var(--m3, #111); }
.rm-msg[data-msg="comic"][data-mine="1"]:not([data-joined="1"])::after { left: auto; right: -11px; border-right: 0; border-left: 11px solid var(--m3, #111); }
.rm-msg[data-msg="terminal"], .rm-msg[data-msg="terminal"][data-mine="1"] { border-radius: 2px; border: 1px solid color-mix(in srgb, var(--m1) 40%, #000); background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px), #050806; color: var(--m1); text-shadow: 0 0 6px color-mix(in srgb, var(--m1) 55%, transparent); font-family: 'VT323', ui-monospace, monospace; font-size: 1.25em; line-height: 1.15; }
.rm-msg[data-msg="terminal"] p::before { content: '> '; opacity: .7; }
.rm-msg[data-msg="terminal"] .rm-time { font-size: .8em; }
.rm-msg[data-msg="terminal"] .rm-author strong { color: var(--m1) !important; -webkit-text-fill-color: var(--m1); }
.rm-msg[data-msg="sparkle"], .rm-msg[data-msg="sparkle"][data-mine="1"] { border-radius: var(--msg-shape); background: color-mix(in srgb, var(--m1) 14%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--m1) 45%, transparent); color: var(--fg); margin-top: 6px; }
.rm-msg[data-msg="sparkle"]::before, .rm-msg[data-msg="sparkle"]::after { content: ''; position: absolute; pointer-events: none; background: var(--m1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.2 8.8L23 12l-8.8 2.2L12 23l-2.2-8.8L1 12l8.8-2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.2 8.8L23 12l-8.8 2.2L12 23l-2.2-8.8L1 12l8.8-2.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rm-msg[data-msg="sparkle"]::before { top: -8px; right: -6px; width: 15px; height: 15px; }
.rm-msg[data-msg="sparkle"]::after { bottom: -5px; right: 18px; width: 10px; height: 10px; background: var(--m2); }
.rm-msg[data-msg="sparkle"][data-mine="1"]::before { right: auto; left: -6px; }
.rm-msg[data-msg="sparkle"][data-mine="1"]::after { right: auto; left: 20px; }
.rm-msg[data-msg] .rm-at { background: rgba(0, 0, 0, 0.18); color: inherit; }
.rm-msg[data-msg][data-mention="1"] { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the samples in Settings and the panel */
.rm-msg.tile-msg { position: relative; display: block; max-width: 100%; margin: 0; padding: 6px 10px 5px; font-size: 12px; pointer-events: none; transform: none; }
.rm-msg.tile-msg[data-msg="paper"] { margin-top: 6px; }
.rm-msg.tile-msg[data-msg="paper"]::before { width: 28px; height: 10px; top: -6px; }
.rm-msg.tile-msg[data-msg="comic"]::after { display: none; }
.rm-msg.tile-msg p { margin: 0; white-space: nowrap; }
.style-preview-msgs { display: flex; flex-direction: column; gap: 10px; padding: 14px 6px 4px; }
.style-preview-msgs .rm-msg { position: relative; display: block; max-width: 80%; }
.style-preview-msgs .rm-msg p { margin: 0; }
.style-mini-msg { position: relative; display: block; margin: 8px 12px; max-width: 70%; }
.style-mini-msg p { margin: 0; }
/* Mod tools search: the icon sits in its own space left of the text. */
#rm-staff-q { width: 100%; box-sizing: border-box; margin: 0; padding: 11px 12px 11px 40px !important; font: inherit; font-size: 14px; text-overflow: ellipsis; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: var(--input, transparent); color: var(--fg); }
#rm-staff-q::placeholder { color: var(--muted); }
.rm-staff-search svg { left: 13px; width: 15px; height: 15px; z-index: 1; }

.color-slot-name { font: 600 10px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 2px 0 6px; }

/* Quests (Settings > Style) */
.quests { display: grid; gap: 8px; margin-top: 8px; }
.quests[hidden] { display: none; }
.quest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--input); }
.quest:not([data-done="1"]) .badge-chip { filter: grayscale(1); opacity: .45; }
.quest-main { display: grid; gap: 3px; min-width: 0; }
.quest-bar { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
.quest-bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--accent); transition: width .4s; }
.quest-done { color: #2ec4a6; font-weight: 600; }
.quest-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quest[data-done="1"] { border-color: color-mix(in srgb, #2ec4a6 45%, var(--line)); }

/* ---------------------------------------------------------- profiles: markdown, status, card */
.md p { margin: 0 0 .6em; }
.md p:last-child, .md ul:last-child, .md ol:last-child, .md blockquote:last-child { margin-bottom: 0; }
.md .md-h { font-family: var(--font-ui); font-weight: 700; margin: .4em 0 .3em; }
.md .md-h1 { font-size: 1.2em; } .md .md-h2 { font-size: 1.08em; } .md .md-h3 { font-size: 1em; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.md ul, .md ol { margin: 0 0 .6em; padding-left: 1.3em; }
.md li + li { margin-top: .15em; }
.md blockquote { margin: 0 0 .6em; padding: 2px 0 2px 12px; border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--line)); color: var(--muted); }
.md code { font-family: ui-monospace, monospace; font-size: .92em; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.md-spoiler { border-radius: 4px; background: var(--fg); color: transparent; cursor: pointer; transition: background .2s, color .2s; }
.md-spoiler * { visibility: hidden; }
.md-spoiler[data-open] { background: color-mix(in srgb, var(--fg) 10%, transparent); color: inherit; cursor: auto; }
.md-spoiler[data-open] * { visibility: visible; }
.profile-bio.md { white-space: normal; }
.profile-status { display: block; margin: 2px 0 4px; font-size: 14px; color: var(--fg); opacity: .85; }
.profile-status .emote { height: 1.3em; vertical-align: -0.3em; }
.profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.profile-links[hidden] { display: none; }
.profile-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none !important; cursor: pointer; }
.profile-link:hover { border-color: var(--accent); }
.profile-link-icon svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.md-help { display: block; margin-top: 6px; line-height: 1.9; }
.md-help code { font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--input); border: 1px solid var(--line); white-space: nowrap; }
.bio-preview { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: min(var(--radius), 10px); }
.bio-preview[hidden] { display: none; }
.bio-preview .profile-bio { margin: 0; }
.profile-extra { display: grid; gap: 10px; border: 0; padding: 0; margin: 8px 0 0; min-width: 0; }
.profile-link-rows { display: grid; gap: 6px; }
.profile-link-row { gap: 6px; flex-wrap: nowrap; }
.profile-link-row .pl-label { flex: 0 1 34%; min-width: 0; }
.profile-link-row .pl-url { flex: 1 1 auto; min-width: 0; }
.rm-person-status { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Your badges: shown or hidden */
.my-badges-list { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.my-badges-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); }
.my-badges-list li[data-hidden="1"] .badge-chip { opacity: .4; filter: grayscale(.6); }
.badge-show { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--fg); font: 600 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.badge-show[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent); }
.badge-show svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------- message styles, part 2
   Holo, handwriting, sticker, cloud and pixel window, each with an entrance
   (data-fresh: only new messages) and a small reaction (hover, scroll). */
.rm-msg[data-msg="holo"], .rm-msg[data-msg="holo"][data-mine="1"] { border-radius: var(--msg-shape); color: #17131f; text-shadow: none;
  background: linear-gradient(calc(115deg + var(--holo, 0deg)), #ffd6f5, #c9f4ff 30%, var(--m1) 55%, #fff3b8 80%, #ffc9e8);
  background-size: 180% 180%; background-position: var(--holo-p, 50%) 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 14px -6px var(--m1); transition: background-position .3s; }
.rm-msg[data-msg="holo"]:hover { background-position: 100% 0; }
.rm-msg[data-msg="holo"] .rm-time { opacity: .6; }
.rm-msg[data-msg="holo"] .rm-author strong { color: #17131f !important; -webkit-text-fill-color: #17131f; }
.rm-msg[data-msg="holo"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; opacity: 0; }
.rm-msg[data-msg="holo"][data-fresh]::after { animation: msg-sheen 1.1s .15s ease-out; }
.rm-msg[data-msg="holo"][data-fresh] { animation: msg-rise .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes msg-sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -30% 0; } }
@keyframes msg-rise { from { opacity: 0; transform: translateY(10px); } }

.rm-msg[data-msg="handwriting"], .rm-msg[data-msg="handwriting"][data-mine="1"] { border-radius: 3px; padding: 6px 14px 4px 26px; color: var(--m1); font-family: 'Caveat', cursive; font-weight: 500; font-size: 1.45em; line-height: 24px; box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  background-color: var(--m2, #fbf8ef); background-image: linear-gradient(90deg, transparent 17px, rgba(229, 67, 43, .5) 17px, rgba(229, 67, 43, .5) 18.5px, transparent 18.5px), repeating-linear-gradient(180deg, transparent 0 23px, rgba(58, 130, 200, .28) 23px 24px); }
.rm-msg[data-msg="handwriting"] p { line-height: 24px; }
.rm-msg[data-msg="handwriting"] .rm-time, .rm-msg[data-msg="handwriting"] .rm-author { font-family: var(--font-text, ui-monospace, monospace); font-size: 11px; line-height: 20px; }
.rm-msg[data-msg="handwriting"] .rm-time { color: #8a8478; opacity: 1; }
.rm-msg[data-msg="handwriting"] .rm-author strong { color: var(--m1) !important; -webkit-text-fill-color: var(--m1); }
/* written in from the left, line by line it seems */
.rm-msg[data-msg="handwriting"][data-fresh] p { animation: msg-write 1.1s steps(18, end); }
.rm-msg[data-msg="handwriting"][data-fresh] { animation: msg-rise .3s ease-out; }
@keyframes msg-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.rm-msg[data-msg="sticker"], .rm-msg[data-msg="sticker"][data-mine="1"] { border-radius: 18px; background: var(--m1); color: var(--m2, #2b1030); font-weight: 700; border: 5px solid #fff; box-shadow: 0 5px 12px rgba(0, 0, 0, .45); transform: rotate(var(--tilt, -1.5deg)); margin-block: 4px; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.rm-msg[data-msg="sticker"]:hover { transform: rotate(0deg) translateY(-2px) scale(1.02); box-shadow: 0 10px 18px rgba(0, 0, 0, .5); }
.rm-msg[data-msg="sticker"] .rm-time { font-weight: 400; color: inherit; opacity: .7; }
.rm-msg[data-msg="sticker"] .rm-author strong { color: var(--m2, #2b1030) !important; -webkit-text-fill-color: var(--m2, #2b1030); }
/* slapped on */
.rm-msg[data-msg="sticker"][data-fresh] { animation: msg-slap .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes msg-slap { 0% { opacity: 0; transform: rotate(calc(var(--tilt, -1.5deg) * 6)) scale(1.35); } 60% { opacity: 1; } 100% { transform: rotate(var(--tilt, -1.5deg)) scale(1); } }

.rm-msg[data-msg="cloud"], .rm-msg[data-msg="cloud"][data-mine="1"] { border-radius: 26px; background: var(--m1); color: var(--m2, #232033); padding: 10px 18px 8px; margin-top: 14px; }
.rm-msg[data-msg="cloud"]::before { content: ''; position: absolute; left: 10px; right: 10px; top: -15px; height: 20px; pointer-events: none;
  background: radial-gradient(circle at 18% 100%, var(--m1) 12px, transparent 12.5px), radial-gradient(circle at 42% 100%, var(--m1) 16px, transparent 16.5px), radial-gradient(circle at 68% 100%, var(--m1) 11px, transparent 11.5px); }
.rm-msg[data-msg="cloud"]:not([data-joined="1"])::after { content: ''; position: absolute; left: -18px; bottom: -12px; width: 20px; height: 18px; pointer-events: none;
  background: radial-gradient(circle at 75% 25%, var(--m1) 6px, transparent 6.5px), radial-gradient(circle at 20% 80%, var(--m1) 3.5px, transparent 4px); }
.rm-msg[data-msg="cloud"][data-mine="1"]:not([data-joined="1"])::after { left: auto; right: -18px; transform: scaleX(-1); }
.rm-msg[data-msg="cloud"] .rm-time { color: inherit; opacity: .6; }
.rm-msg[data-msg="cloud"] .rm-author strong { color: var(--m2, #232033) !important; -webkit-text-fill-color: var(--m2, #232033); }
.rm-msg[data-msg="cloud"]:hover { animation: msg-float 3s ease-in-out infinite; }
/* puffs up */
.rm-msg[data-msg="cloud"][data-fresh] { animation: msg-puff .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes msg-puff { 0% { opacity: 0; transform: scale(.55); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: scale(1); } }
@keyframes msg-float { 50% { transform: translateY(-3px); } }

.rm-msg[data-msg="window"], .rm-msg[data-msg="window"][data-mine="1"] { border-radius: 0; padding: 24px 4px 4px; background: #c3c3c3; color: #000; border: 2px solid; border-color: #fff #4a4a4a #4a4a4a #fff; box-shadow: 2px 2px 0 #000; font-family: 'Pixelify Sans', monospace; }
.rm-msg[data-msg="window"]::before { content: attr(data-wtitle); position: absolute; left: 2px; right: 2px; top: 2px; height: 18px; padding: 0 40px 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 13px/18px 'Pixelify Sans', monospace; color: #fff; background: linear-gradient(90deg, var(--m1), var(--m2, var(--m1))); pointer-events: none; }
/* the two little buttons on the title bar */
.rm-msg[data-msg="window"]::after { content: ''; position: absolute; top: 4px; right: 5px; width: 32px; height: 14px; pointer-events: none;
  background: linear-gradient(#000, #000) 4px 10px / 6px 2px no-repeat, linear-gradient(45deg, transparent 45%, #000 45% 58%, transparent 58%) 20px 3px / 8px 8px no-repeat, linear-gradient(-45deg, transparent 45%, #000 45% 58%, transparent 58%) 20px 3px / 8px 8px no-repeat, linear-gradient(#c3c3c3, #c3c3c3) 0 0 / 14px 14px no-repeat, linear-gradient(#c3c3c3, #c3c3c3) 16px 0 / 14px 14px no-repeat; }
.rm-msg[data-msg="window"] > .rm-author { display: none; }
.rm-msg[data-msg="window"] p { margin: 0; padding: 5px 8px 3px; background: #fff; border: 2px solid; border-color: #4a4a4a #fff #fff #4a4a4a; font-size: 1.05em; line-height: 1.3; }
.rm-msg[data-msg="window"] .rm-time { display: block; padding: 2px 6px 0; color: #333; opacity: 1; font-size: 12px; }
.rm-msg[data-msg="window"] .rm-more { color: #000; }
/* opens like an old window: grows from the title bar in a few steps */
.rm-msg[data-msg="window"][data-fresh] { animation: msg-window .32s steps(4, end); transform-origin: 0 0; }
@keyframes msg-window { from { transform: scale(.25, .1); opacity: .4; } to { transform: none; opacity: 1; } }

/* the older styles get a short entrance too */
.rm-msg[data-msg="outline"][data-fresh], .rm-msg[data-msg="gradient"][data-fresh], .rm-msg[data-msg="glow"][data-fresh], .rm-msg[data-msg="terminal"][data-fresh], .rm-msg[data-msg="sparkle"][data-fresh] { animation: msg-rise .35s cubic-bezier(.2, .8, .2, 1); }
.rm-msg[data-msg="paper"][data-fresh] { animation: msg-drop .45s cubic-bezier(.2, 1.3, .4, 1); }
.rm-msg[data-msg="paper"][data-mine="1"][data-fresh] { animation-name: msg-drop-mine; }
@keyframes msg-drop { from { opacity: 0; transform: translateY(-14px) rotate(-6deg); } to { transform: rotate(-0.7deg); } }
@keyframes msg-drop-mine { from { opacity: 0; transform: translateY(-14px) rotate(6deg); } to { transform: rotate(0.8deg); } }
.rm-msg[data-msg="comic"][data-fresh] { animation: msg-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes msg-pop { from { opacity: 0; transform: scale(.7); } }
.rm-msg[data-msg="glow"][data-fresh] { animation: msg-rise .35s ease-out, msg-flash .8s ease-out; }
@keyframes msg-flash { 0% { box-shadow: 0 0 0 1px var(--m1), 0 0 34px 6px var(--m1); } }
.rm-msg[data-msg="sparkle"][data-fresh]::before, .rm-msg[data-msg="sparkle"][data-fresh]::after { animation: msg-twinkle .8s ease-out; }
@keyframes msg-twinkle { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.4) rotate(10deg); } 100% { transform: none; } }
/* the samples in Settings stay still, except the preview of a new message */
.rm-msg.tile-msg { animation: none !important; }
.rm-msg.tile-msg::after, .rm-msg.tile-msg::before { animation: none !important; }
.rm-msg.tile-msg[data-msg="handwriting"] { font-size: 16px; line-height: 18px; padding: 4px 8px 3px 20px; background-size: auto, auto 18px; }
.rm-msg.tile-msg[data-msg="window"] { padding-top: 16px; font-size: 11px; }
.rm-msg.tile-msg[data-msg="window"]::before { height: 12px; font-size: 9px; line-height: 12px; padding-right: 24px; }
.rm-msg.tile-msg[data-msg="window"]::after { transform: scale(.6); transform-origin: top right; }
.rm-msg.tile-msg[data-msg="window"] p { padding: 2px 4px; }
.rm-msg.tile-msg[data-msg="cloud"] { margin-top: 10px; padding: 6px 12px 5px; }
.rm-msg.tile-msg[data-msg="cloud"]::before { top: -10px; height: 14px; }
.rm-msg.tile-msg[data-msg="cloud"]::after { display: none; }
.rm-msg.tile-msg[data-msg="sticker"] { border-width: 3px; }
@media (prefers-reduced-motion: reduce) { .rm-msg[data-msg], .rm-msg[data-msg] p, .rm-msg[data-msg]::before, .rm-msg[data-msg]::after { animation: none !important; } }

/* Profile card looks (8.39): background, frame, accent, showcase, song */
.pf-framed { --pa: var(--card-accent, var(--accent)); position: relative; isolation: isolate; }
.pf-framed[data-accent] { --accent: var(--card-accent); --on-accent: var(--card-ink); }
.pf-framed > :not(.pf-bg) { position: relative; z-index: 1; }
.pf-bg { position: absolute !important; inset: 0; z-index: 0 !important; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pf-bg::before, .pf-bg::after { content: ""; position: absolute; inset: 0; }
[data-bg="none"] > .pf-bg { display: none; }
[data-bg="tint"] > .pf-bg::before { background: linear-gradient(150deg, var(--pc1), var(--pc2)); opacity: .14; }
[data-bg="gradient"] > .pf-bg::before { background: linear-gradient(160deg, var(--pc1), var(--pc2)); opacity: .45; -webkit-mask: linear-gradient(#000 0, #000 90px, rgba(0,0,0,.18) 240px, rgba(0,0,0,.1)); mask: linear-gradient(#000 0, #000 90px, rgba(0,0,0,.18) 240px, rgba(0,0,0,.1)); }
:is([data-bg="dots"], [data-bg="grid"], [data-bg="stripes"], [data-bg="waves"], [data-bg="stars"], [data-bg="hearts"], [data-bg="sparkles"]) > .pf-bg::before { background: linear-gradient(150deg, var(--pc1), var(--pc2)); opacity: .1; }
:is([data-bg="dots"], [data-bg="grid"], [data-bg="stripes"], [data-bg="waves"], [data-bg="stars"], [data-bg="hearts"], [data-bg="sparkles"]) > .pf-bg::after { background: linear-gradient(150deg, var(--pc1), var(--pc2)); opacity: .3; }
:is([data-bg="dots"], [data-bg="grid"], [data-bg="stripes"], [data-bg="waves"], [data-bg="stars"], [data-bg="hearts"], [data-bg="sparkles"]) > .pf-bg { -webkit-mask: linear-gradient(#000 0, #000 110px, rgba(0, 0, 0, .3) 230px, rgba(0, 0, 0, .14)); mask: linear-gradient(#000 0, #000 110px, rgba(0, 0, 0, .3) 230px, rgba(0, 0, 0, .14)); }
/* Text stays on calm ground: the blocks below the head get a backing. */
.pf-framed:not([data-bg="none"]) :is(.profile-bio, .profile-badge-list) { padding: 10px 12px; border-radius: min(var(--radius), 12px); background: color-mix(in srgb, var(--surface-solid) 84%, transparent); }
.pf-framed:not([data-bg="none"]) .profile-bio:empty, .pf-framed:not([data-bg="none"]) .profile-badge-list:empty { display: none; }
.pf-framed:not([data-bg="none"]) .pf-song { background: color-mix(in srgb, var(--pa) 10%, var(--surface-solid)); }
.pf-framed:not([data-bg="none"]) .pf-show { background: color-mix(in srgb, var(--pa) 12%, var(--surface-solid)); }
.pf-framed:not([data-bg="none"]) .profile-link { background: var(--surface-solid); }
.pf-framed:not([data-bg="none"]) .profile-who > :not(.pf-nameline) { text-shadow: 0 1px 2px color-mix(in srgb, var(--surface-solid) 80%, transparent), 0 0 12px var(--surface-solid); }
.card-tile > .pf-bg { -webkit-mask: none !important; mask: none !important; }
[data-bg="dots"] > .pf-bg::after { -webkit-mask: radial-gradient(circle, #000 1.7px, transparent 2.2px) 0 0 / 16px 16px; mask: radial-gradient(circle, #000 1.7px, transparent 2.2px) 0 0 / 16px 16px; }
[data-bg="grid"] > .pf-bg::after { -webkit-mask: linear-gradient(#000 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, #000 1px, transparent 1px) 0 0 / 20px 20px; mask: linear-gradient(#000 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, #000 1px, transparent 1px) 0 0 / 20px 20px; }
[data-bg="stripes"] > .pf-bg::after { opacity: .2; -webkit-mask: repeating-linear-gradient(45deg, #000 0 7px, transparent 7px 18px); mask: repeating-linear-gradient(45deg, #000 0 7px, transparent 7px 18px); }
[data-bg="waves"] > .pf-bg::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 8c5 0 5-6 10-6s5 6 10 6 5-6 10-6 5 6 10 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 40px 14px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 8c5 0 5-6 10-6s5 6 10 6 5-6 10-6 5 6 10 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 40px 14px; }
[data-bg="stars"] > .pf-bg::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M10 2l2.4 5 5.4.6-4 3.7 1.1 5.4L10 14l-4.9 2.7 1.1-5.4-4-3.7 5.4-.6z'/%3E%3Cpath d='M30 22l1.3 2.7 3 .3-2.2 2 .6 3-2.7-1.5-2.7 1.5.6-3-2.2-2 3-.3z'/%3E%3C/svg%3E") 0 0 / 40px 40px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M10 2l2.4 5 5.4.6-4 3.7 1.1 5.4L10 14l-4.9 2.7 1.1-5.4-4-3.7 5.4-.6z'/%3E%3Cpath d='M30 22l1.3 2.7 3 .3-2.2 2 .6 3-2.7-1.5-2.7 1.5.6-3-2.2-2 3-.3z'/%3E%3C/svg%3E") 0 0 / 40px 40px; }
[data-bg="hearts"] > .pf-bg::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M11 17s-7-4.3-7-9a3.8 3.8 0 0 1 7-2 3.8 3.8 0 0 1 7 2c0 4.7-7 9-7 9z'/%3E%3Cpath d='M31 35s-4-2.5-4-5.2a2.2 2.2 0 0 1 4-1.2 2.2 2.2 0 0 1 4 1.2c0 2.7-4 5.2-4 5.2z'/%3E%3C/svg%3E") 0 0 / 40px 40px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M11 17s-7-4.3-7-9a3.8 3.8 0 0 1 7-2 3.8 3.8 0 0 1 7 2c0 4.7-7 9-7 9z'/%3E%3Cpath d='M31 35s-4-2.5-4-5.2a2.2 2.2 0 0 1 4-1.2 2.2 2.2 0 0 1 4 1.2c0 2.7-4 5.2-4 5.2z'/%3E%3C/svg%3E") 0 0 / 40px 40px; }
[data-bg="sparkles"] > .pf-bg::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M10 1c.8 5 3 7.2 8 8-5 .8-7.2 3-8 8-.8-5-3-7.2-8-8 5-.8 7.2-3 8-8z'/%3E%3Cpath d='M31 23c.4 2.6 1.5 3.6 4 4-2.5.4-3.6 1.4-4 4-.4-2.6-1.5-3.6-4-4 2.5-.4 3.6-1.4 4-4z'/%3E%3Ccircle cx='32' cy='8' r='1.4'/%3E%3Ccircle cx='8' cy='32' r='1.2'/%3E%3C/svg%3E") 0 0 / 40px 40px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M10 1c.8 5 3 7.2 8 8-5 .8-7.2 3-8 8-.8-5-3-7.2-8-8 5-.8 7.2-3 8-8z'/%3E%3Cpath d='M31 23c.4 2.6 1.5 3.6 4 4-2.5.4-3.6 1.4-4 4-.4-2.6-1.5-3.6-4-4 2.5-.4 3.6-1.4 4-4z'/%3E%3Ccircle cx='32' cy='8' r='1.4'/%3E%3Ccircle cx='8' cy='32' r='1.2'/%3E%3C/svg%3E") 0 0 / 40px 40px; }
.pf-nameline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pf-nameline > h2 { margin: 0; }
.pf-pronouns { align-self: center; }
.pf-pronouns { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pf-pronouns:empty { display: none; }
.pf-pronoun { padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--pa) 55%, var(--line)); border-radius: 999px; color: color-mix(in srgb, var(--pa) 75%, var(--fg)); font: 600 11px var(--font-ui); letter-spacing: .04em; white-space: nowrap; }
.pf-showcase { display: flex; gap: 10px; margin-top: 16px; }
.pf-showcase[hidden] { display: none; }
.pf-show { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; border: 1px solid color-mix(in srgb, var(--pa) 35%, var(--line)); border-radius: min(var(--radius), 12px); background: color-mix(in srgb, var(--pa) 9%, transparent); text-align: center; }
.pf-show-name { font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pf-song { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: min(var(--radius), 12px); background: color-mix(in srgb, var(--pa) 8%, var(--input)); }
.pf-song[hidden] { display: none; }
.pf-song-disc svg { display: block; width: 34px; height: 34px; animation: pf-spin 6s linear infinite; }
.pf-song-disc .d-vinyl { fill: #141414; stroke: color-mix(in srgb, var(--fg) 25%, transparent); }
.pf-song-disc .d-groove { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-linecap: round; }
.pf-song-disc .d-label { fill: var(--pa); }
.pf-song-disc .d-hole { fill: #141414; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-song-text { display: grid; min-width: 0; }
.pf-song-kicker { font: 600 10px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--pa) 75%, var(--fg)); }
.pf-song-line { overflow-wrap: anywhere; }
.profile-dialog .profile-link:hover { border-color: var(--pa); }
/* the card editor in settings */
.card-opts { display: grid; gap: 8px; }
.card-opts-label { font: 600 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.card-tile { height: 54px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-solid); color: var(--fg); cursor: pointer; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.card-tile-label { padding: 0 4px 6px; font: 600 10px var(--font-ui); letter-spacing: .04em; }
.card-colors { align-items: center; gap: 12px; flex-wrap: wrap; }
.card-color { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.card-colors input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; }
.showcase-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.showcase-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--fg); font-size: 13px; cursor: pointer; }
.showcase-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.showcase-chip:disabled { opacity: .45; cursor: default; }
.song-row { gap: 6px; flex-wrap: nowrap; }
.song-row input { flex: 1 1 0; min-width: 0; }
.own-pronouns { margin-top: 10px; max-width: 280px; }
@media (prefers-reduced-motion: reduce) { .pf-song-disc svg { animation: none; } }

/* Now playing (8.40) */
.pf-music { margin-top: 10px; }
.pf-song + .pf-music:not([hidden]) { margin-top: 8px; }
.pf-music-art { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--pa) 22%, var(--input)) center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 18V6l11-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/svg%3E"); }
.pf-music-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-music[data-state="loading"] .pf-music-art { animation: pf-pulse 1.2s ease-in-out infinite; }
@keyframes pf-pulse { 50% { opacity: .5; } }
.pf-music .pf-song-text { flex: 1 1 auto; }
.pf-music-src { flex: none; align-self: flex-start; font-size: 11px; cursor: pointer; }
.pf-music-src:empty { display: none; }
.pf-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 9px; margin-right: 6px; vertical-align: -1px; }
.pf-eq i { width: 2px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; animation: pf-eq .9s ease-in-out infinite; }
.pf-eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.pf-eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
@keyframes pf-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
#set-music-service { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .pf-eq i, .pf-music[data-state="loading"] .pf-music-art { animation: none; } .pf-eq i { transform: scaleY(.7); } }

/* Card frames (8.40): every one of them has something going on. */
.pf-framed { --pf1: var(--frame-1, var(--pa)); --pf2: var(--frame-2, var(--pc2)); }
@property --pf-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pf-framed::before, .pf-framed::after { content: none; position: absolute; pointer-events: none; z-index: 3; }
:root .pf-framed[data-cframe="line"] { border: 2px solid var(--pf1); box-shadow: inset 0 0 0 4px var(--surface-solid), inset 0 0 0 5px color-mix(in srgb, var(--pf1) 45%, transparent), 0 30px 80px -20px rgba(0, 0, 0, .5); }
:root .pf-framed[data-cframe="double"] { border: 6px double var(--pf1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf1) 35%, transparent), 0 30px 80px -20px rgba(0, 0, 0, .5); }
:root .pf-framed[data-cframe="glow"] { border: 1.5px solid var(--pf1); animation: pf-glow 3.2s ease-in-out infinite; }
@keyframes pf-glow { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf1) 40%, transparent), 0 0 22px -6px var(--pf1), inset 0 0 18px -10px var(--pf1); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pf1) 55%, transparent), 0 0 44px -2px var(--pf1), inset 0 0 30px -8px var(--pf1); } }
:root .pf-framed[data-cframe="neon"] { border: 2px solid var(--pf1); outline: 2px solid var(--pf2); outline-offset: 5px; box-shadow: 0 0 14px var(--pf1), inset 0 0 14px -4px var(--pf1), 0 0 30px -4px var(--pf2); animation: pf-flicker 1.4s steps(1) 1; }
@keyframes pf-flicker { 0% { opacity: .4; } 8% { opacity: 1; } 14% { opacity: .55; } 20% { opacity: 1; } 42% { opacity: .8; } 46% { opacity: 1; } }
:root .pf-framed[data-cframe="holo"] { border: 4px solid transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, conic-gradient(from var(--pf-ang), var(--pf1), var(--pf2), color-mix(in srgb, var(--pf1) 50%, var(--pf2)), #7ef0ff, var(--pf1)) border-box; animation: pf-spin-ang 5s linear infinite; box-shadow: 0 0 26px -10px var(--pf2), 0 30px 80px -20px rgba(0, 0, 0, .5); }
@keyframes pf-spin-ang { to { --pf-ang: 360deg; } }
:root .pf-framed[data-cframe="pixel"] { border: 4px solid var(--pf1); border-radius: 0; box-shadow: inset 4px 4px 0 color-mix(in srgb, #fff 18%, transparent), inset -4px -4px 0 rgba(0, 0, 0, .3); clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)); }
:root .pf-framed[data-cframe="ornate"] { border: 1px solid color-mix(in srgb, var(--pf1) 45%, transparent); }
.pf-framed[data-cframe="ornate"]::after { content: ""; inset: 6px; background: linear-gradient(135deg, var(--pf1), var(--pf2)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 45V14C3 7 7 3 14 3h31'/%3E%3Cpath d='M9 40V18c0-5 4-9 9-9h22'/%3E%3Cpath d='M18 9c0 6-3 9-9 9'/%3E%3Cpath d='M24 9c-1 5 1 8 6 8M9 24c5-1 8 1 8 6'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3' fill='black'/%3E%3Ccircle cx='45' cy='3' r='2' fill='black'/%3E%3Ccircle cx='3' cy='45' r='2' fill='black'/%3E%3C/svg%3E") top left / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(90 24 24)'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 45V14C3 7 7 3 14 3h31'/%3E%3Cpath d='M9 40V18c0-5 4-9 9-9h22'/%3E%3Cpath d='M18 9c0 6-3 9-9 9'/%3E%3Cpath d='M24 9c-1 5 1 8 6 8M9 24c5-1 8 1 8 6'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3' fill='black'/%3E%3Ccircle cx='45' cy='3' r='2' fill='black'/%3E%3Ccircle cx='3' cy='45' r='2' fill='black'/%3E%3C/g%3E%3C/svg%3E") top right / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(180 24 24)'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 45V14C3 7 7 3 14 3h31'/%3E%3Cpath d='M9 40V18c0-5 4-9 9-9h22'/%3E%3Cpath d='M18 9c0 6-3 9-9 9'/%3E%3Cpath d='M24 9c-1 5 1 8 6 8M9 24c5-1 8 1 8 6'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3' fill='black'/%3E%3Ccircle cx='45' cy='3' r='2' fill='black'/%3E%3Ccircle cx='3' cy='45' r='2' fill='black'/%3E%3C/g%3E%3C/svg%3E") bottom right / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(270 24 24)'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 45V14C3 7 7 3 14 3h31'/%3E%3Cpath d='M9 40V18c0-5 4-9 9-9h22'/%3E%3Cpath d='M18 9c0 6-3 9-9 9'/%3E%3Cpath d='M24 9c-1 5 1 8 6 8M9 24c5-1 8 1 8 6'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3' fill='black'/%3E%3Ccircle cx='45' cy='3' r='2' fill='black'/%3E%3Ccircle cx='3' cy='45' r='2' fill='black'/%3E%3C/g%3E%3C/svg%3E") bottom left / 46px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 45V14C3 7 7 3 14 3h31'/%3E%3Cpath d='M9 40V18c0-5 4-9 9-9h22'/%3E%3Cpath d='M18 9c0 6-3 9-9 9'/%3E%3Cpath d='M24 9c-1 5 1 8 6 8M9 24c5-1 8 1 8 6'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3' fill='black'/%3E%3Ccircle cx='45' cy='3' r='2' fill='black'/%3E%3Ccircle cx='3' cy='45' r='2' fill='black'/%3E%3C/svg%3E") top left / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(90 24 24)'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 45V14C3 7 7 3 14 3h31'/%3E%3Cpath d='M9 40V18c0-5 4-9 9-9h22'/%3E%3Cpath d='M18 9c0 6-3 9-9 9'/%3E%3Cpath d='M24 9c-1 5 1 8 6 8M9 24c5-1 8 1 8 6'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3' fill='black'/%3E%3Ccircle cx='45' cy='3' r='2' fill='black'/%3E%3Ccircle cx='3' cy='45' r='2' fill='black'/%3E%3C/g%3E%3C/svg%3E") top right / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(180 24 24)'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 45V14C3 7 7 3 14 3h31'/%3E%3Cpath d='M9 40V18c0-5 4-9 9-9h22'/%3E%3Cpath d='M18 9c0 6-3 9-9 9'/%3E%3Cpath d='M24 9c-1 5 1 8 6 8M9 24c5-1 8 1 8 6'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3' fill='black'/%3E%3Ccircle cx='45' cy='3' r='2' fill='black'/%3E%3Ccircle cx='3' cy='45' r='2' fill='black'/%3E%3C/g%3E%3C/svg%3E") bottom right / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(270 24 24)'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 45V14C3 7 7 3 14 3h31'/%3E%3Cpath d='M9 40V18c0-5 4-9 9-9h22'/%3E%3Cpath d='M18 9c0 6-3 9-9 9'/%3E%3Cpath d='M24 9c-1 5 1 8 6 8M9 24c5-1 8 1 8 6'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3' fill='black'/%3E%3Ccircle cx='45' cy='3' r='2' fill='black'/%3E%3Ccircle cx='3' cy='45' r='2' fill='black'/%3E%3C/g%3E%3C/svg%3E") bottom left / 46px no-repeat; }
:root .pf-framed[data-cframe="pearls"] { border: 1px solid color-mix(in srgb, var(--pf1) 30%, transparent); }
.pf-framed[data-cframe="pearls"]::after { content: ""; inset: 3px; --pearl: radial-gradient(circle at 38% 36%, #fff 0 .8px, var(--pf1) 1.6px 3px, color-mix(in srgb, var(--pf1) 50%, #000) 3.4px, transparent 3.9px); background: var(--pearl) 0 0 / 12px 8px repeat-x, var(--pearl) 0 100% / 12px 8px repeat-x, var(--pearl) 0 0 / 8px 12px repeat-y, var(--pearl) 100% 0 / 8px 12px repeat-y; }
:root .pf-framed[data-cframe="washi"] { border: 1px solid color-mix(in srgb, var(--pf1) 35%, var(--line)); }
.pf-framed[data-cframe="washi"]::before, .pf-framed[data-cframe="washi"]::after { content: ""; top: 12px; width: 96px; height: 24px; opacity: .88; background: repeating-linear-gradient(45deg, var(--pf1) 0 6px, color-mix(in srgb, var(--pf1) 55%, #fff) 6px 12px); -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0), radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 6px 6px repeat-y; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.pf-framed[data-cframe="washi"]::before { left: -24px; transform: rotate(-38deg); }
.pf-framed[data-cframe="washi"]::after { right: -24px; transform: rotate(38deg); background: repeating-linear-gradient(-45deg, var(--pf2) 0 6px, color-mix(in srgb, var(--pf2) 55%, #fff) 6px 12px); }
:root .pf-framed[data-cframe="sparkle"] { border: 1.5px solid color-mix(in srgb, var(--pf1) 60%, transparent); box-shadow: 0 0 24px -12px var(--pf1), 0 30px 80px -20px rgba(0, 0, 0, .5); }
.pf-framed[data-cframe="sparkle"]::before, .pf-framed[data-cframe="sparkle"]::after { content: ""; width: 46px; height: 46px; background: linear-gradient(135deg, #fff, var(--pf1) 40%, var(--pf2)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 2c1.6 11 6 15.4 17 17-11 1.6-15.4 6-17 17-1.6-11-6-15.4-17-17 11-1.6 15.4-6 17-17z' fill='black'/%3E%3Cpath d='M40 30c.6 4 2.2 5.6 6 6-3.8.4-5.4 2-6 6-.6-4-2.2-5.6-6-6 3.8-.4 5.4-2 6-6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 2c1.6 11 6 15.4 17 17-11 1.6-15.4 6-17 17-1.6-11-6-15.4-17-17 11-1.6 15.4-6 17-17z' fill='black'/%3E%3Cpath d='M40 30c.6 4 2.2 5.6 6 6-3.8.4-5.4 2-6 6-.6-4-2.2-5.6-6-6 3.8-.4 5.4-2 6-6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; animation: pf-twinkle 2.6s ease-in-out infinite; }
.pf-framed[data-cframe="sparkle"]::before { top: 6px; left: 6px; }
.pf-framed[data-cframe="sparkle"]::after { bottom: 6px; right: 6px; width: 34px; height: 34px; animation-delay: -1.3s; }
@keyframes pf-twinkle { 0%, 100% { transform: scale(.75) rotate(0deg); opacity: .6; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
:root .pf-framed[data-cframe="film"] { border: 1px solid color-mix(in srgb, var(--pf1) 50%, transparent); }
.profile-dialog[data-cframe="film"] .pf-scroll { padding-left: 40px; padding-right: 40px; }
.pf-framed[data-cframe="film"]::before, .pf-framed[data-cframe="film"]::after { content: ""; top: 0; bottom: 0; width: 22px; background: repeating-linear-gradient(transparent 0 6px, color-mix(in srgb, var(--pf1) 35%, #f4efe2) 6px 13px, transparent 13px 19px) center / 8px 100% no-repeat, linear-gradient(90deg, #121212, #1c1c1c 50%, #121212); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf2) 45%, transparent); }
.pf-framed[data-cframe="film"]::before { left: 0; }
.pf-framed[data-cframe="film"]::after { right: 0; }
/* small versions on the tiles */
:root .card-tile[data-cframe="double"] { border-width: 4px; }
.card-tile[data-cframe="film"] { padding: 0 14px !important; }
.card-tile[data-cframe="film"]::before, .card-tile[data-cframe="film"]::after { width: 11px; background-size: 4px 100%, auto; }
.card-tile[data-cframe="ornate"]::after { inset: 3px; -webkit-mask-size: 22px; mask-size: 22px; }
.card-tile[data-cframe="sparkle"]::before { width: 18px; height: 18px; top: 3px; left: 3px; }
.card-tile[data-cframe="sparkle"]::after { width: 13px; height: 13px; bottom: 3px; right: 3px; }
.card-tile[data-cframe="washi"]::before, .card-tile[data-cframe="washi"]::after { width: 44px; height: 12px; top: 4px; }
.card-tile[data-cframe="washi"]::before { left: -12px; }
.card-tile[data-cframe="washi"]::after { right: -12px; }
.card-tile[data-cframe="neon"] { outline-offset: 3px; }
.card-tile[aria-checked="true"] { outline: 2px solid var(--accent) !important; outline-offset: 3px !important; }
.card-tile[data-cframe="neon"][aria-checked="true"] { outline-color: var(--pf2) !important; }
.card-tile { overflow: hidden; }
.card-tile[data-cframe="washi"], .card-tile[data-cframe="film"] { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .pf-framed[data-cframe] , .pf-framed[data-cframe]::before, .pf-framed[data-cframe]::after { animation: none !important; } }

/* Profile card (8.42): the card scrolls inside, so decorations may reach past its edge. */
.profile-dialog { overflow: visible; padding: 0; max-height: none; }
.pf-scroll { width: 440px; transform: scale(var(--pf-zoom, 1)); transform-origin: 0 0; padding: 28px; max-height: calc((calc(100dvh / var(--z, 1)) - 32px) / var(--pf-zoom, 1)); overflow-y: auto; overscroll-behavior: contain; border-radius: inherit; box-sizing: border-box; }
.pf-deco { position: absolute !important; inset: 0; z-index: 6 !important; pointer-events: none; font-size: 16px; }
.card-tile > .pf-deco { font-size: 5.5px; }
.deco-tiles { padding: 10px 6px 4px; row-gap: 16px; }
.deco-tiles .card-tile { overflow: visible; }
.dk { position: absolute; display: block; }
svg.dk { height: auto; fill: none; stroke: none; }
.dk-washi { --wa: var(--d1); --wb: var(--d2); width: 7.5em; height: 1.75em; opacity: .84; background:
  radial-gradient(circle, color-mix(in srgb, var(--wb) 80%, #fff) .13em, transparent .16em) 0 0 / .62em .62em,
  linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%, rgba(0,0,0,.06)),
  var(--wa);
  clip-path: polygon(0% 0%, 4% 10%, 0% 20%, 4% 30%, 0% 40%, 4% 50%, 0% 60%, 4% 70%, 0% 80%, 4% 90%, 0% 100%, 100% 100%, 96% 90%, 100% 80%, 96% 70%, 100% 60%, 96% 50%, 100% 40%, 96% 30%, 100% 20%, 96% 10%, 100% 0%); }
.dk-washi-l { top: .3em; left: -2em; transform: rotate(-38deg); }
.dk-washi-r { --wa: var(--d2); --wb: var(--d1); top: .3em; right: -2em; transform: rotate(38deg); }
.dk-tape { top: -.75em; left: 50%; width: 6.5em; transform: translateX(-50%) rotate(-2deg); background:
  linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%, rgba(0,0,0,.06)),
  repeating-linear-gradient(90deg, var(--d1) 0 .55em, var(--d2) .55em 1.1em); }
.dk-bow { width: 5.2em; top: -1.9em; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 .12em .18em rgba(0,0,0,.35)); }
.dk-ear { width: 3.4em; top: -2.55em; }
.dk-ear-l { left: 16%; transform: rotate(-8deg); }
.dk-ear-r { right: 16%; transform: scaleX(-1) rotate(-8deg); }
.dk-pin { width: 2.1em; top: -1.5em; left: 50%; transform: translateX(-50%) rotate(10deg); filter: drop-shadow(.15em .2em .15em rgba(0,0,0,.35)); }
.dk-clip { width: 1.5em; top: -1.7em; left: 1.6em; transform: rotate(-8deg); filter: drop-shadow(.08em .12em .1em rgba(0,0,0,.4)); }
.dk-sticker { filter: drop-shadow(0 .12em .2em rgba(0,0,0,.4)); }
.dk-sticker-star { width: 3em; top: -1.1em; right: -.8em; transform: rotate(14deg); }
.dk-sticker-heart { width: 2.7em; bottom: -.9em; left: -.8em; transform: rotate(-12deg); }
.dk-crown { width: 3.4em; top: -1.75em; left: -1em; transform: rotate(-22deg); filter: drop-shadow(0 .12em .18em rgba(0,0,0,.35)); }
/* (no narrower padding on phones: the whole card scales instead) */


/* ------------------------------------------------------------ phone header (8.43)
   Five layouts of the same parts, picked in Settings > Look: segment, tabs,
   logo menu, toggle, text tabs. Square like the rest of the site. */
.mh-switch, .mh-mode, .mh-menu-wrap { display: none; }
.mh-tab-label { display: none; }
@media (max-width: 640px), (max-height: 520px) {
  .rooms-btn, .rooms-btn:not([hidden]) { display: none !important; }
  .topbar { position: relative; z-index: 70; gap: 6px; }
  .topbar .brand { flex: none; }
  .mh-switch svg, .mh-menu svg, .mh-menu-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .mh-switch a { position: relative; text-decoration: none; color: var(--muted); font-family: var(--font-ui); font-weight: 600; letter-spacing: var(--ui-tracking); text-transform: uppercase; }
  .mh-switch a[aria-current="page"] { color: var(--fg); }
  .mh-count { position: static; }

  /* A: segment */
  :root[data-mhead="segment"] .mh-switch:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid var(--line); }
  :root[data-mhead="segment"] .mh-switch a { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; min-width: 0; }
  :root[data-mhead="segment"] .mh-switch a + a { border-left: 1px solid var(--line); }
  :root[data-mhead="segment"] .mh-switch a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 -2px 0 var(--accent); }
  :root[data-mhead="segment"] .app[data-view="room"] .mh-switch { flex: 0 0 92px; }
  :root[data-mhead="segment"] .app[data-view="room"] .mh-switch .mh-label { display: none; }
  :root[data-mhead="segment"] .app[data-view="room"] .mh-count { position: absolute; top: 3px; right: 3px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; }

  /* B: tabs with labels, like an app's tab bar */
  :root[data-mhead="tabs"] .topbar { height: 62px; }
  :root[data-mhead="tabs"] .mh-switch:not([hidden]) { display: flex; align-self: stretch; margin-left: auto; }
  :root[data-mhead="tabs"] .mh-switch a, :root[data-mhead="tabs"] #btn-dms, :root[data-mhead="tabs"] #btn-settings { width: 56px; height: auto; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted); font: 600 9px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
  :root[data-mhead="tabs"] .mh-switch svg { width: 20px; height: 20px; }
  :root[data-mhead="tabs"] .mh-switch a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
  :root[data-mhead="tabs"] .top-actions { align-self: stretch; gap: 0; }
  :root[data-mhead="tabs"] .top-actions .btn > .mh-tab-label { display: block; }
  :root[data-mhead="tabs"] .mh-count, :root[data-mhead="tabs"] #dm-count { position: absolute; top: 6px; left: 32px; right: auto; }
  :root[data-mhead="tabs"] .app[data-view="room"] .topbar .brand { display: none; }
  :root[data-mhead="tabs"] .app[data-view="room"] .mh-switch { margin-left: 0; }
  :root[data-mhead="tabs"] .app[data-view="room"] .top-actions { gap: 4px; align-self: center; }
  :root[data-mhead="tabs"] .app[data-view="room"] #btn-settings { display: none; }
  :root[data-mhead="tabs"] .app[data-view="room"] #btn-dms { height: 56px; }

  /* C: logo menu */
  :root[data-mhead="menu"] .mh-menu-wrap:not([hidden]) { display: block; margin-right: auto; min-width: 0; }
  .mh-menu-btn { display: flex; align-items: center; gap: 8px; height: 44px; max-width: 100%; padding: 0 10px; border: 1px solid var(--line); background: none; color: var(--fg); font: 600 12px var(--font-ui); letter-spacing: var(--ui-tracking); text-transform: uppercase; cursor: pointer; }
  .mh-menu-btn[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .mh-menu-icon { display: grid; }
  .mh-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .mh-menu-dot { width: 8px; height: 8px; flex: none; background: var(--accent); }
  .mh-menu-dot[hidden] { display: none; }
  .mh-chev { width: 14px !important; height: 14px !important; transition: transform .2s; }
  .mh-menu-btn[aria-expanded="true"] .mh-chev { transform: rotate(180deg); }
  .mh-menu { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: min(260px, calc(100vw - 32px)); padding: 6px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); background: var(--surface-solid); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
  .mh-menu[hidden] { display: none; }
  .mh-menu a, .mh-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--fg); font: 600 13px var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; }
  .mh-menu a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
  .mh-menu .mh-item-text { display: flex; flex-direction: column; flex: 1; }
  .mh-item-sub { font-size: 11px; font-weight: 400; color: var(--muted); }
  .mh-item-sub[hidden] { display: none; }
  .mh-menu .mh-danger { color: var(--accent); }
  .mh-sep { height: 1px; margin: 4px 6px; background: var(--line); }
  :root[data-mhead="menu"] .app[data-view="room"] #btn-invite, :root[data-mhead="menu"] .app[data-view="room"] #btn-leave { display: none !important; }

  /* D: toggle with a sliding block */
  :root[data-mhead="toggle"] .mh-switch:not([hidden]) { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 96px; height: 42px; padding: 4px; box-sizing: border-box; border: 1px solid var(--line); background: var(--input); }
  :root[data-mhead="toggle"] .mh-switch::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--accent); transition: left .25s ease; }
  :root[data-mhead="toggle"] .mh-switch:has(a[data-nav="rooms"][aria-current])::before { left: 50%; }
  :root[data-mhead="toggle"] .mh-switch a { display: grid; place-items: center; }
  :root[data-mhead="toggle"] .mh-switch a[aria-current="page"] { color: var(--on-accent); }
  :root[data-mhead="toggle"] .mh-switch .mh-label { display: none; }
  :root[data-mhead="toggle"] .mh-count { position: absolute; top: -8px; right: -8px; }
  :root[data-mhead="toggle"] .mh-mode { display: block; margin-right: auto; font: 600 11px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  :root[data-mhead="toggle"] .app[data-view="room"] .mh-mode { display: none; }
  :root[data-mhead="toggle"] .app[data-view="room"] .mh-switch { flex-basis: 84px; margin-right: auto; }
  :root[data-mhead="toggle"] .app[data-view="room"] .top-actions .btn { width: 42px; }

  /* E: text tabs in the display font */
  :root[data-mhead="text"] .mh-switch:not([hidden]) { display: flex; align-self: stretch; margin-right: auto; }
  :root[data-mhead="text"] .mh-switch a { display: flex; align-items: center; gap: 3px; padding: 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: 0.02em; color: var(--muted); }
  :root[data-mhead="text"] .mh-switch a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
  :root[data-mhead="text"] .mh-switch svg { display: none; }
  :root[data-mhead="text"] .mh-count { align-self: flex-start; margin-top: 12px; min-width: 0; height: auto; padding: 0; background: none; color: var(--accent); font-size: 11px; line-height: 1; }
  :root[data-mhead="text"] .app[data-view="room"] .topbar .brand { display: none; }
}
.mhead-choices { flex-wrap: wrap; }
/* Rounded phone header (Settings > Look > Phone header > Rounded). */
@media (max-width: 640px), (max-height: 520px) {
  :root[data-mhround="rounded"] .top-actions .btn { border-radius: 10px; }
  :root[data-mhround="rounded"] .mh-menu-btn { border-radius: 10px; }
  :root[data-mhround="rounded"] .mh-menu { border-radius: 12px; }
  :root[data-mhround="rounded"] .mh-menu a, :root[data-mhround="rounded"] .mh-menu button { border-radius: 8px; }
  :root[data-mhround="rounded"] .mh-menu-dot { border-radius: 50%; }
  :root[data-mhround="rounded"][data-mhead="segment"] .mh-switch { border-radius: 10px; overflow: hidden; }
  :root[data-mhround="rounded"][data-mhead="toggle"] .mh-switch { border-radius: 21px; }
  :root[data-mhround="rounded"][data-mhead="toggle"] .mh-switch::before { border-radius: 16px; }
  :root[data-mhround="rounded"][data-mhead="tabs"] .top-actions .btn { border-radius: 0; }
  :root[data-mhround="rounded"][data-mhead="tabs"] .mh-switch a[aria-current="page"] { box-shadow: none; }
  :root[data-mhround="rounded"][data-mhead="tabs"] .mh-switch a[aria-current="page"] svg { box-sizing: content-box; padding: 3px 12px; margin: -3px 0; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
  :root[data-mhround="rounded"][data-mhead="text"] .mh-switch a[aria-current="page"] { box-shadow: none; }
  :root[data-mhround="rounded"][data-mhead="text"] .mh-switch a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 4px; border-radius: 2px; background: var(--accent); }
}

/* ---------------------------------------------------------------- 18+ / NSFW (8.44) */
.nsfw-card { border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--input, transparent); overflow: hidden; }
.nsfw-card[hidden] { display: none; }
.nsfw-head { margin: 0; padding: 11px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.nsfw-row { display: flex; align-items: center; gap: 14px; padding: 14px; }
.nsfw-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.nsfw-switch { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: min(var(--radius), 15px); background: transparent; cursor: pointer; }
.nsfw-switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: min(var(--radius), 11px); background: var(--muted); transition: left .18s, background .18s; }
.nsfw-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.nsfw-switch[aria-checked="true"] span { left: 25px; background: var(--on-accent, #111); }
.nsfw-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nsfw-more { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.nsfw-more[hidden] { display: none; }
.nsfw-more p { margin: 0; }
.nsfw-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nsfw-go { align-self: flex-start; }
.nsfw-note { display: flex; align-items: center; gap: 10px; margin: 0 14px 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: min(var(--radius), 10px); font-size: 13px; }
.nsfw-note[hidden] { display: none; }
.nsfw-note svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nsfw-day { margin: 0 14px 12px; }
.nsfw-card .form-error { margin: 0 14px 10px; }
.nsfw-card .form-error:empty { display: none; }

/* The birthday: a calendar mark, the date, and the age it gives. */
.bday { display: flex; align-items: stretch; height: 48px; max-width: 340px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); overflow: hidden; background: var(--input, transparent); }
.bday:focus-within { border-color: var(--accent); }
.bday-cal { flex: none; width: 48px; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--accent); }
.bday-cal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root .bday input[type="date"]:not([type="radio"]):not([type="color"]):not([type="checkbox"]) { width: auto; box-shadow: none; flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--fg); color-scheme: dark; font: 500 16px var(--font-mono, monospace); letter-spacing: 0.04em; outline: none; }
.bday-age { display: flex; align-items: center; padding: 0 14px; font: 700 14px var(--font-mono, monospace); }
.bday[data-filled="true"] .bday-age { background: var(--accent); color: var(--on-accent, #111); }
.bday[data-filled="false"] .bday-age { display: none; }
.vv-age { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.vv-age-ask { display: flex; flex-direction: column; gap: 8px; }
.vv-age-ask[hidden], #vv-age-known[hidden] { display: none; }
.vv-age p { margin: 0; }

/* Room options: 18+, roleplay, look and safeword. */
.rp-wrap { display: flex; flex-direction: column; gap: 12px; }
.rp-wrap[hidden], .rp-opts[hidden], .rp-more[hidden] { display: none; }
.rp-opts { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); }
.rp-more { display: flex; flex-direction: column; gap: 10px; }
.rp-opt-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rp-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rp-look { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: min(var(--radius), 8px); cursor: pointer; }
.rp-look input { position: absolute; opacity: 0; pointer-events: none; }
.rp-look:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rp-look:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rp-look-swatch { position: relative; display: block; height: 44px; border-radius: min(var(--radius), 4px); background: var(--rp-bg); overflow: hidden; }
.rp-look-swatch i { position: absolute; left: 8px; top: 9px; width: 46%; height: 12px; background: var(--rp-say-bg); border: 1px solid var(--rp-say-line); }
.rp-look-swatch b { position: absolute; right: 8px; bottom: 9px; width: 38%; height: 10px; background: var(--rp-mine-bg); border: 1px solid var(--rp-mine-line); }
.rp-look-name { font-size: 12px; font-weight: 600; }
.rp-legend { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.rp-legend dt, .rp-legend dd { margin: 0; }
.rp-legend code { font-family: var(--font-mono, monospace); color: var(--accent); }

/* ---------------------------------------------------------------- roleplay looks */
[data-rplook] {
  --rp-bg: #14110e; --rp-fg: #efe3cc; --rp-font: 'Fraunces', Georgia, serif; --rp-name-font: var(--rp-font); --rp-mono: 'IBM Plex Mono', monospace;
  --rp-name: #7fd1c1; --rp-mine-name: #ff8fb7; --rp-do: #e8d9bd; --rp-dim: #a8977c;
  --rp-say-bg: #2a231b; --rp-say-line: #4a3c2c; --rp-say-fg: #efe3cc;
  --rp-mine-bg: #35202a; --rp-mine-line: #5a3344; --rp-mine-fg: #ffe6ef;
  --rp-think: #d8bfc9; --rp-feel-bg: rgba(255, 143, 183, 0.15); --rp-feel-line: rgba(255, 143, 183, 0.5); --rp-feel-fg: #ffd1e1; --rp-feel-dot: #ff8fb7;
  --rp-see: #7fd1c1; --rp-ooc: #a8977c; --rp-line: #3a2f24; --rp-chip: #ff8fb7; --rp-chip-fg: #14110e; --rp-say-r: 4px 16px 16px 16px; --rp-mine-r: 16px 4px 16px 16px;
}
[data-rplook="cellar"] {
  --rp-bg: radial-gradient(60% 30% at 0% 25%, rgba(255, 130, 45, 0.16), transparent 70%), radial-gradient(60% 30% at 100% 70%, rgba(255, 120, 40, 0.13), transparent 70%), repeating-linear-gradient(0deg, #1b1615 0 46px, #120e0d 46px 48px), #15100f;
  --rp-fg: #e9dcd0; --rp-font: 'Crimson Pro', Georgia, serif; --rp-name-font: 'Pirata One', serif; --rp-name: #e7354f; --rp-mine-name: #c9a0ff; --rp-do: #d9cbbd; --rp-dim: #9d8378;
  --rp-say-bg: #5a1420; --rp-say-line: #2b070c; --rp-say-fg: #ffe9e4; --rp-mine-bg: #3a1f55; --rp-mine-line: #1a0b29; --rp-mine-fg: #f4ecff;
  --rp-think: rgba(225, 205, 200, 0.62); --rp-feel-bg: linear-gradient(180deg, #a59d97, #6d6560); --rp-feel-line: transparent; --rp-feel-fg: #1a1414; --rp-feel-dot: #8a8580;
  --rp-see: #c9a0ff; --rp-ooc: #b8a69a; --rp-line: #3a1414; --rp-chip: #5a1420; --rp-chip-fg: #ffe9e4; --rp-say-r: 0; --rp-mine-r: 0;
}
[data-rplook="neon"] {
  --rp-bg: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 9px), linear-gradient(180deg, #0d0d12, #08080c);
  --rp-fg: #e6e6ec; --rp-font: 'IBM Plex Mono', monospace; --rp-name-font: 'Oswald', sans-serif; --rp-name: #ff2d75; --rp-mine-name: #00e5ff; --rp-do: #c9c9d4; --rp-dim: #8b8b9a;
  --rp-say-bg: transparent; --rp-say-line: #ff2d75; --rp-say-fg: #ffe1ec; --rp-mine-bg: transparent; --rp-mine-line: #00e5ff; --rp-mine-fg: #e0fbff;
  --rp-think: rgba(200, 200, 220, 0.55); --rp-feel-bg: #050507; --rp-feel-line: #333; --rp-feel-fg: #39ff9e; --rp-feel-dot: #39ff9e;
  --rp-see: #00e5ff; --rp-ooc: #a0a0b4; --rp-line: #2a2a33; --rp-chip: #ff2d75; --rp-chip-fg: #08080c; --rp-say-r: 0; --rp-mine-r: 0;
}
[data-rplook="crypt"] {
  --rp-bg: radial-gradient(50% 25% at 50% 0%, rgba(240, 190, 110, 0.14), transparent 75%), radial-gradient(80% 40% at 50% 100%, rgba(120, 80, 200, 0.12), transparent 70%), #0c0a10;
  --rp-fg: #ece4f0; --rp-font: 'EB Garamond', Georgia, serif; --rp-name-font: 'UnifrakturMaguntia', serif; --rp-name: #e05a7a; --rp-mine-name: #b9a0ff; --rp-do: #cdbfd6; --rp-dim: #9a8cad;
  --rp-say-bg: #2a0f1a; --rp-say-line: #5a2236; --rp-say-fg: #fbeef3; --rp-mine-bg: #1c1430; --rp-mine-line: #3c2a60; --rp-mine-fg: #f3eeff;
  --rp-think: rgba(220, 205, 235, 0.58); --rp-feel-bg: transparent; --rp-feel-line: rgba(240, 217, 168, 0.4); --rp-feel-fg: #f0d9a8; --rp-feel-dot: #f0d9a8;
  --rp-see: #b9a0ff; --rp-ooc: #a99cbc; --rp-line: #2a2233; --rp-chip: #f0d9a8; --rp-chip-fg: #1a1424; --rp-say-r: 0; --rp-mine-r: 0;
}
[data-rplook="ring"] {
  --rp-bg: #0b0b0b; --rp-fg: #f2f2f2; --rp-font: 'Space Grotesk', sans-serif; --rp-name-font: var(--rp-font); --rp-name: #ff2a45; --rp-mine-name: #f2f2f2; --rp-do: #9a9a9a; --rp-dim: #7a7a7a;
  --rp-say-bg: transparent; --rp-say-line: transparent; --rp-say-fg: #fff; --rp-mine-bg: transparent; --rp-mine-line: transparent; --rp-mine-fg: #fff;
  --rp-think: #6a6a6a; --rp-feel-bg: transparent; --rp-feel-line: transparent; --rp-feel-fg: #bbb; --rp-feel-dot: #ff2a45;
  --rp-see: #ff2a45; --rp-ooc: #8a8a8a; --rp-line: #222; --rp-chip: #ff2a45; --rp-chip-fg: #0b0b0b; --rp-say-r: 0; --rp-mine-r: 0;
}
[data-rplook="latex"] {
  --rp-bg: radial-gradient(60% 30% at 30% 18%, rgba(255,255,255,0.08), transparent 70%), radial-gradient(50% 25% at 75% 62%, rgba(255,255,255,0.05), transparent 70%), linear-gradient(160deg, #141418 0%, #050506 45%, #0d0d10 100%);
  --rp-fg: #f4f4f6; --rp-font: 'Manrope', sans-serif; --rp-name-font: 'Syncopate', sans-serif; --rp-name: #ff1f4b; --rp-mine-name: #e4e4ea; --rp-do: #a9a9b4; --rp-dim: #8c8c96;
  --rp-say-bg: linear-gradient(180deg, #3a0a14 0%, #1a0308 55%, #2a060e 100%); --rp-say-line: transparent; --rp-say-fg: #fff; --rp-mine-bg: linear-gradient(180deg, #2e2e36 0%, #0c0c10 55%, #1a1a20 100%); --rp-mine-line: transparent; --rp-mine-fg: #fff;
  --rp-think: rgba(220, 220, 230, 0.5); --rp-feel-bg: linear-gradient(180deg, #ff4d6d, #b00022); --rp-feel-line: transparent; --rp-feel-fg: #fff; --rp-feel-dot: #fff;
  --rp-see: #ff1f4b; --rp-ooc: #9090a0; --rp-line: #1c1c22; --rp-chip: #ff1f4b; --rp-chip-fg: #fff; --rp-say-r: 20px 20px 20px 6px; --rp-mine-r: 20px 20px 6px 20px;
}
[data-rplook="rope"] {
  --rope: repeating-linear-gradient(-55deg, #c9a46a 0 4px, #8f6d3e 4px 6px, #e0bf86 6px 9px, #a5814c 9px 11px);
  --rp-bg: radial-gradient(80% 40% at 50% 0%, #2a2522 0%, transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 5px), #141211;
  --rp-fg: #ece4d6; --rp-font: 'Shippori Mincho', Georgia, serif; --rp-name-font: var(--rp-font); --rp-name: #e0a86a; --rp-mine-name: #b9b0e8; --rp-do: #c4b8a6; --rp-dim: #9a8f80;
  --rp-say-bg: #1f1b18; --rp-say-line: #c9a46a; --rp-say-fg: #f6eedf; --rp-mine-bg: #1b1a22; --rp-mine-line: #b39ad8; --rp-mine-fg: #f3efff;
  --rp-think: rgba(225, 212, 190, 0.55); --rp-feel-bg: transparent; --rp-feel-line: transparent; --rp-feel-fg: #e0c79c; --rp-feel-dot: #c9a46a;
  --rp-see: #c9a46a; --rp-ooc: #a39886; --rp-line: #3e3730; --rp-chip: #c9a46a; --rp-chip-fg: #1a1410; --rp-say-r: 14px; --rp-mine-r: 14px;
}

/* The room itself. */
.rm-room[data-rplook] { background: var(--rp-bg); color: var(--rp-fg); font-family: var(--rp-font); }
.rm-room[data-rplook] .rm-head { border-bottom-color: var(--rp-line); }
.rm-room[data-rplook] .rm-name-text { font-family: var(--rp-name-font); color: var(--rp-fg); }
.rm-room[data-rplook] .rm-topic, .rm-room[data-rplook] .rm-time { color: var(--rp-dim); font-family: var(--rp-mono); }
.rm-room[data-rplook] .rm-compose { border-top-color: var(--rp-line); }
.rm-room[data-rplook] .rm-input { font-family: var(--rp-font); border-color: var(--rp-line); background: rgba(0, 0, 0, 0.28); color: var(--rp-fg); }
.rm-room[data-rplook] .rm-msg { max-width: min(86%, 640px); padding: 4px 0; border-radius: 0; background: none; color: var(--rp-fg); box-shadow: none; }
.rm-room[data-rplook] .rm-msg[data-mine="1"] { background: none; color: var(--rp-fg); text-align: right; }
.rm-room[data-rplook] .rm-msg[data-mention="1"] { box-shadow: inset 3px 0 0 var(--rp-name); padding-left: 10px; }
.rm-room[data-rplook] .rm-author-btn strong { font-family: var(--rp-name-font); color: var(--rp-name); font-size: 16px; letter-spacing: 0.04em; }
.rm-safeword { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #ff6fb1; color: #ff6fb1; font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.rm-safeword[hidden] { display: none; }
.rm-safeword strong { color: var(--rp-fg, var(--fg)); letter-spacing: 0.06em; }

.rp-body { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.rm-msg[data-mine="1"] .rp-body { align-items: flex-end; }
.rm-msg .rp-body p { margin: 0; }
.rp-do { font-style: italic; font-size: 15px; line-height: 1.55; color: var(--rp-do); }
.rp-say { display: inline-block; max-width: 100%; padding: 9px 14px; border: 1px solid var(--rp-say-line); border-radius: var(--rp-say-r); background: var(--rp-say-bg); color: var(--rp-say-fg); font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.rm-msg[data-mine="1"] .rp-say { border-color: var(--rp-mine-line); border-radius: var(--rp-mine-r); background: var(--rp-mine-bg); color: var(--rp-mine-fg); }
.rm-msg[data-mine="1"] .rm-author-btn strong { color: var(--rp-mine-name); }
.rp-see { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rp-fg); opacity: 0.92; }
.rp-see svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--rp-see); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rp-think { font-style: italic; font-size: 14px; color: var(--rp-think); padding: 8px 14px; border: 1.5px dashed color-mix(in srgb, var(--rp-think) 60%, transparent); border-radius: 22px; }
.rp-feel { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--rp-feel-line); border-radius: 12px; background: var(--rp-feel-bg); color: var(--rp-feel-fg); font: 600 11px var(--rp-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.rp-feel i { width: 7px; height: 7px; border-radius: 50%; background: var(--rp-feel-dot); box-shadow: 0 0 8px var(--rp-feel-dot); }
.rp-ooc { align-self: center; padding: 4px 12px; border: 1px dashed var(--rp-line); font: 400 12px var(--rp-mono); color: var(--rp-ooc); }
.rm-msg[data-mine="1"] .rp-ooc { align-self: flex-end; }

/* Per look. */
[data-rplook="cellar"] .rp-do { position: relative; padding: 8px 12px 8px 22px; background: linear-gradient(90deg, #2a2523, #1e1a19); border: 1px solid #4a423e; font-size: 16px; }
[data-rplook="cellar"] .rp-do::before, [data-rplook="cellar"] .rp-do::after { content: ''; position: absolute; left: 7px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9c2bc, #5b5450); }
[data-rplook="cellar"] .rp-do::before { top: 9px; } [data-rplook="cellar"] .rp-do::after { bottom: 9px; }
[data-rplook="cellar"] .rp-say { outline: 1px dashed rgba(255, 190, 170, 0.35); outline-offset: -5px; font-weight: 600; font-size: 17px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); }
[data-rplook="cellar"] .rp-feel { border-radius: 0; clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%); padding-left: 12px; }
[data-rplook="cellar"] .rp-feel i { display: none; }
[data-rplook="cellar"] .rp-think { border: 0; text-shadow: 0 0 10px rgba(180, 160, 160, 0.6); }
[data-rplook="neon"] .rp-do { padding: 8px 12px; background: linear-gradient(180deg, #23232b, #18181e); border-left: 6px solid transparent; border-image: repeating-linear-gradient(45deg, #ffcc00 0 6px, #111 6px 12px) 6; font-style: normal; font-size: 13.5px; text-transform: lowercase; }
[data-rplook="neon"] .rp-do::before { content: '> '; color: var(--rp-name); }
[data-rplook="neon"] .rm-msg[data-mine="1"] .rp-do { border-left: 0; border-right: 6px solid transparent; }
[data-rplook="neon"] .rp-say { border-width: 1.5px; font: 500 17px 'Oswald', sans-serif; text-transform: uppercase; box-shadow: 0 0 10px color-mix(in srgb, var(--rp-say-line) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--rp-say-line) 25%, transparent); }
[data-rplook="neon"] .rm-msg[data-mine="1"] .rp-say { box-shadow: 0 0 10px color-mix(in srgb, var(--rp-mine-line) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--rp-mine-line) 20%, transparent); }
[data-rplook="neon"] .rp-feel { border-radius: 0; text-shadow: 0 0 6px var(--rp-feel-fg); }
[data-rplook="neon"] .rp-think { border: 0; font-size: 13px; }
[data-rplook="neon"] .rp-think::before { content: '// '; }
[data-rplook="crypt"] .rp-do { font-size: 17px; }
[data-rplook="crypt"] .rp-say { font-size: 18px; font-weight: 600; box-shadow: 0 8px 18px rgba(0,0,0,0.55); }
[data-rplook="crypt"] .rp-think { border: 0; font-size: 16px; text-shadow: 0 0 14px rgba(170, 120, 255, 0.6); }
[data-rplook="crypt"] .rp-feel { border-radius: 0; }
[data-rplook="ring"] .rp-do { font-style: normal; font-size: 14px; }
[data-rplook="ring"] .rp-say { padding: 0; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
[data-rplook="ring"] .rp-think { border: 0; padding: 0 0 0 18px; }
[data-rplook="ring"] .rp-think::before { content: '\00b7 \00b7 \00b7  '; }
[data-rplook="ring"] .rp-feel { padding: 0; height: auto; }
[data-rplook="ring"] .rp-feel i { width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 2px solid var(--rp-feel-dot); box-shadow: none; }
[data-rplook="latex"] .rp-name, [data-rplook="latex"] .rm-author-btn strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
/* Latex: the reflection moves with scrolling (--shine, set in rooms.js:
   1 at the top of the list, 0 at the bottom), not on a loop. A hover presses
   the bubble in: it sinks, the rim shadow deepens and the highlight squeezes,
   then it springs back. */
[data-rplook="latex"] .rp-say { --shine: 0.5; position: relative; overflow: hidden; padding: 12px 18px; font-weight: 700; font-size: 17px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 6px rgba(0,0,0,0.6), 0 10px 22px rgba(0,0,0,0.6); transition: transform .28s cubic-bezier(.3, 1.6, .5, 1), box-shadow .28s ease, filter .28s ease; }
[data-rplook="latex"] .rp-say::before { content: ''; position: absolute; left: 8%; right: 8%; top: 2px; height: 38%; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent); pointer-events: none; transition: transform .28s cubic-bezier(.3, 1.6, .5, 1), opacity .28s ease; transform-origin: 50% 0; }
[data-rplook="latex"] .rp-say::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.24) 45%, rgba(255,255,255,0.08) 52%, transparent 70%) calc((1 - var(--shine)) * 100%) 0 / 55% 100% no-repeat; transition: background-position .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
[data-rplook="latex"] .rp-say:hover, [data-rplook="latex"] .rp-say:active { transform: scale(0.975) translateY(1px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 4px 14px rgba(0,0,0,0.75), inset 0 -1px 3px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.55); }
[data-rplook="latex"] .rp-say:hover::before, [data-rplook="latex"] .rp-say:active::before { transform: scaleY(0.55) scaleX(1.06); opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { [data-rplook="latex"] .rp-say, [data-rplook="latex"] .rp-say::before, [data-rplook="latex"] .rp-say::after { transition: none; } [data-rplook="latex"] .rp-say:hover, [data-rplook="latex"] .rp-say:active { transform: none; } }
[data-rplook="latex"] .rp-feel { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
[data-rplook="latex"] .rp-feel i { display: none; }
[data-rplook="latex"] .rp-think { border: 0; text-shadow: 0 0 10px rgba(255, 255, 255, 0.25); }
[data-rplook="latex"] .rm-msg[data-mine="1"] .rp-feel { background: linear-gradient(180deg, #4a4a55, #16161b); }
[data-rplook="rope"] .rp-say { border: 5px solid transparent; border-image: var(--rope) 5; font-weight: 500; font-size: 17px; }
[data-rplook="rope"] .rm-msg[data-mine="1"] .rp-say { border-image: repeating-linear-gradient(-55deg, #b39ad8 0 4px, #6e5a94 4px 6px, #cdb8ee 6px 9px, #8470ad 9px 11px) 5; }
[data-rplook="rope"] .rp-feel { padding: 0; height: auto; letter-spacing: 0.12em; }
[data-rplook="rope"] .rp-feel i { width: 18px; height: 10px; border-radius: 5px; background: radial-gradient(circle, #c9a46a 0 4px, transparent 4.5px), linear-gradient(90deg, #b08a52 0 30%, transparent 30% 70%, #b08a52 70%) center / 100% 3px no-repeat; box-shadow: none; }
[data-rplook="rope"] .rp-think { border: 0; }
[data-rplook="rope"] .rm-head { position: relative; }
[data-rplook="rope"] .rm-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; border-radius: 4px; background: var(--rope); box-shadow: 0 2px 4px rgba(0,0,0,0.6); pointer-events: none; }

/* Composer chips. */
.rp-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 18px 0; border-top: 1px solid var(--rp-line, var(--line)); }
.rp-chips[hidden] { display: none; }
.rp-chips + .rm-compose { border-top: 0; padding-top: 8px; }
.rp-chip { height: 30px; padding: 0 10px; border: 1px solid var(--rp-line, var(--line)); border-radius: 0; background: none; color: var(--rp-dim, var(--muted)); font: 600 10px var(--rp-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.rp-chip:hover, .rp-chip:focus-visible { background: var(--rp-chip); border-color: var(--rp-chip); color: var(--rp-chip-fg); }
.rp-chip[data-kind="ooc"] { border-style: dashed; }
[data-rplook="latex"] .rp-chip { border-radius: 15px; }
[data-rplook="ring"] .rp-chip { border: 0; padding: 0 6px; }
[data-rplook="ring"] .rp-chip:hover { background: none; color: var(--rp-chip); box-shadow: inset 0 -2px 0 var(--rp-chip); }

/* Join requests (8.44). */
.rm-requests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rm-request { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 12px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); }
.rm-request .rm-face { position: static; }
.rm-request-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rm-request-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.rm-request-note { margin: 4px 0 0; padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--input, transparent); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-request-acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.rm-tag-wait { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
#rm-staff-req-tab[hidden] { display: none; }
#rm-staff-req-tab .dm-count { position: static; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; letter-spacing: 0; transform: none; }
#rm-staff-req-tab .dm-count[hidden] { display: none; }
.gq-state[data-waiting="1"] { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: min(var(--radius), 10px); }
.gq-rules { border: 1px solid var(--line); border-radius: min(var(--radius), 10px); padding: 8px 12px; }
.gq-rules[hidden] { display: none; }
.gq-rules summary { cursor: pointer; font-weight: 600; }
.gq-rules .md { white-space: pre-wrap; margin-top: 8px; max-height: 220px; overflow: auto; }
#gq-topic[hidden], #gq-note-box[hidden], #gq-accept-box[hidden] { display: none; }
@media (max-width: 640px) {
  .rm-head:has(.rm-safeword:not([hidden])) { flex-wrap: wrap; row-gap: 8px; }
  .rm-safeword { order: 9; flex-basis: 100%; justify-content: center; height: 26px; }
}
#dlg-grp-req textarea:focus { outline: none; border-color: var(--accent); }
#dlg-grp-req .row.end { flex-wrap: wrap; justify-content: flex-end; }
.bday input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.bday-cal { cursor: pointer; }

/* ---------------------------------------------------------------- GIFs (8.45) */
.gif-btn { flex: none; display: grid; place-items: center; color: var(--muted); }
.gif-btn[hidden] { display: none; }
.gif-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gif-btn:hover { color: var(--fg); }
.rm-compose .gif-btn { width: 46px; height: 46px; padding: 0; }
.dm-compose .gif-btn { width: 44px; height: 44px; padding: 0; }
.gif-pop { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-height: min(460px, 70dvh); padding: 10px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--surface-solid, var(--bg)); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); }
.gif-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: var(--input, transparent); }
.gif-search:focus-within { border-color: var(--accent); }
.gif-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
:root .gif-search input:not([type="radio"]):not([type="color"]):not([type="checkbox"]) { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; font-size: 15px; }
.gif-grid { flex: 1; min-height: 160px; overflow-y: auto; columns: 2 140px; column-gap: 6px; }
.gif-cell { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: min(var(--radius), 6px); overflow: hidden; background: color-mix(in srgb, var(--fg) 6%, transparent); cursor: pointer; break-inside: avoid; }
.gif-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gif-cell:disabled { opacity: 0.5; }
.gif-note { margin: 0; }
.gif-note:empty { display: none; }
.gif-by { align-self: flex-end; font: 600 10px var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gif-msg { position: relative; display: block; width: var(--gw, 240px); max-width: 100%; border-radius: min(var(--radius), 10px); overflow: hidden; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.gif-msg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-tag { position: absolute; left: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #fff; font: 700 9px var(--font-mono, monospace); letter-spacing: 0.1em; }
.gif-gone { display: grid; place-items: center; min-height: 60px; color: var(--muted); font-size: 12px; }
.rm-msg[data-gif="1"], .dm-msg[data-gif="1"] { padding: 4px; background: transparent; }
.rm-msg[data-gif="1"] .rm-author { padding: 2px 4px 0; }
.rm-msg[data-gif="1"] .rm-time, .dm-msg[data-gif="1"] .dm-time { padding: 0 4px; }
@media (prefers-reduced-motion: reduce) { .gif-tag { background: var(--accent); color: var(--on-accent, #111); } }

/* ---------------------------------------------------------------- context menu (8.45) */
.ctx-menu { position: fixed; z-index: 90; min-width: 220px; max-width: min(300px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; display: flex; flex-direction: column; padding: 6px; background: var(--surface-solid, var(--bg)); border: 1px solid var(--line); border-radius: min(var(--radius), 12px); box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.55); animation: ctx-in .12s ease-out; }
@keyframes ctx-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .ctx-menu { animation: none; } }
.ctx-title { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-sep { height: 1px; margin: 5px 4px; background: var(--line); }
.ctx-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: min(var(--radius), 7px); background: transparent; color: var(--fg); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ctx-item svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.ctx-item:hover, .ctx-item:focus-visible { background: var(--input, rgba(127,127,127,0.14)); outline: none; }
.ctx-item:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.ctx-danger { color: var(--danger, #ff6b6b); }
.ctx-hint { margin-left: auto; font-size: 11px; color: var(--muted); }
.ctx-quick { display: flex; gap: 4px; padding: 4px 2px; }
.ctx-q { flex: 1; min-width: 0; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: min(var(--radius), 8px); background: var(--input, rgba(127,127,127,0.1)); font-size: 20px; line-height: 1; cursor: pointer; }
.ctx-q:hover, .ctx-q:focus-visible { border-color: var(--accent); outline: none; transform: scale(1.06); }
.ctx-q[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ctx-q img { width: 24px; height: 24px; object-fit: contain; }
.ctx-q svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rm-msg, .dm-msg, .rm-row, .rm-card, .dm-row { -webkit-touch-callout: none; }

/* Reactions. */
.rx-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rm-msg[data-mine="1"] .rx-row, .dm-msg[data-mine="1"] .rx-row { justify-content: flex-end; }
.rx-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg); font: 600 12px var(--font-mono, monospace); cursor: pointer; }
.rx-chip:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.rx-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--bg)); }
.rx-emoji { font-size: 15px; line-height: 1; }
.rx-emote { width: 18px; height: 18px; object-fit: contain; }
.rm-msg[data-mine="1"] .rx-chip { color: var(--fg); }
[data-rplook] .rx-chip { border-radius: 0; border-color: var(--rp-line); background: rgba(0, 0, 0, 0.3); color: var(--rp-fg); font-family: var(--rp-mono); }
[data-rplook] .rx-chip[aria-pressed="true"] { border-color: var(--rp-chip); background: color-mix(in srgb, var(--rp-chip) 25%, transparent); }
[data-rplook="latex"] .rx-chip { border-radius: 13px; }
[data-rplook="rope"] .rx-chip[aria-pressed="true"] { border: 2px solid transparent; border-image: var(--rope) 2; }
.dm-more { position: absolute; top: 2px; left: calc(100% + 2px); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
.dm-msg[data-mine="1"] .dm-more { left: auto; right: calc(100% + 2px); }
.dm-more svg { width: 18px; height: 18px; fill: currentColor; }
.dm-msg:hover .dm-more, .dm-more:focus-visible { opacity: 1; }
@media (hover: none) { .dm-more { display: none; } }

/* Room info card before joining. */
.ri-dialog { padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.ri-banner { aspect-ratio: 1200 / 400; }
.ri-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ri-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.ri-head { display: flex; align-items: flex-start; gap: 12px; }
.ri-head .rm-pic { flex: none; width: 56px; height: 56px; font-size: 22px; }
.ri-head-main { flex: 1; min-width: 0; }
.ri-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.ri-topic { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.ri-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ri-tags:empty { display: none; }
.ri-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); font-size: 14px; }
.ri-facts dt { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
.ri-facts dd { margin: 0; min-width: 0; }
.ri-person { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.ri-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; overflow: hidden; background: var(--input, rgba(127,127,127,0.12)); font-size: 11px; font-weight: 700; line-height: 1; }
.ri-av img, .rx-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ri-staff-btn .ri-av { width: 28px; height: 28px; }
.ri-sec[hidden] { display: none; }
.ri-h { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ri-staff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.ri-staff-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: min(var(--radius), 8px); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.ri-staff-btn:hover { background: var(--input, rgba(127,127,127,0.12)); }
.ri-staff-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.ri-staff-btn .rm-online { position: static; flex: none; }
.ri-rules { max-height: 240px; overflow-y: auto; margin: 0; }
.ri-note { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: min(var(--radius), 10px); font-size: 14px; }
.ri-note[data-kind="warn"] { border-color: color-mix(in srgb, var(--danger, #ff6b6b) 55%, var(--line)); }
.ri-note[hidden], #ri-agree-box[hidden] { display: none; }
.ri-actions { flex-wrap: wrap; }
.ri-rules { padding-left: 28px; }
.ri-person { padding: 2px 8px 2px 2px; border: 0; border-radius: min(var(--radius), 8px); background: none; color: var(--fg); font: inherit; cursor: pointer; }
.ri-person:hover { background: var(--input, rgba(127,127,127,0.12)); }
/* Add a reaction: a button next to the dots (on hover) and a "+" chip. */
.rm-react, .dm-react { position: absolute; top: 4px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
.rm-react { left: calc(100% + 36px); }
.rm-msg[data-mine="1"] .rm-react { left: auto; right: calc(100% + 36px); }
.dm-react { top: 2px; left: calc(100% + 32px); }
.dm-msg[data-mine="1"] .dm-react { left: auto; right: calc(100% + 32px); }
.rm-react svg, .dm-react svg, .rx-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rm-msg:hover .rm-react, .rm-react:focus-visible, .dm-msg:hover .dm-react, .dm-react:focus-visible { opacity: 1; }
.rm-react:hover, .dm-react:hover { background: var(--input, rgba(127,127,127,0.12)); color: var(--fg); }
@media (hover: none) { .rm-react, .dm-react { display: none; } }
.rx-add { padding: 0 6px; color: var(--muted); border-style: dashed; }
.rx-add:hover { color: var(--fg); }

/* ---------------------------------------------------------------- quotes (8.46) */
.quote-bar { display: flex; align-items: center; gap: 10px; margin: 0 18px; padding: 8px 6px 8px 12px; border: 1px solid var(--line); border-bottom: 0; border-left: 3px solid var(--accent); border-radius: min(var(--radius), 10px) min(var(--radius), 10px) 0 0; background: color-mix(in srgb, var(--accent) 8%, var(--input, transparent)); }
.quote-bar[hidden] { display: none; }
.dm-drawer .quote-bar, #dm-quote { margin: 0 12px; }
.quote-ic { flex: none; display: grid; place-items: center; color: var(--accent); }
.quote-ic svg, .rm-swipe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quote-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.quote-who { font-size: 12px; font-weight: 600; color: var(--accent); }
.quote-text { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-text img { height: 1.2em; vertical-align: middle; }
.quote-x { flex: none; width: 32px; height: 32px; padding: 0; }
.quote-bar:not([hidden]) + .rm-compose, .quote-bar:not([hidden]) + .dm-compose { padding-top: 6px; }
.msg-quote { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; max-width: 420px; margin: 0 0 6px; padding: 5px 9px; border: 0; border-left: 3px solid var(--accent); border-radius: min(var(--radius), 6px); background: color-mix(in srgb, var(--fg) 7%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.msg-quote:hover { background: color-mix(in srgb, var(--fg) 11%, transparent); }
.msg-quote-name { font-size: 12px; font-weight: 600; color: var(--accent); }
.msg-quote-text { max-width: 100%; font-size: 13px; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-quote-text img { height: 1.2em; vertical-align: middle; }
.rm-msg[data-mine="1"] .msg-quote, .dm-msg[data-mine="1"] .msg-quote { border-left-color: currentColor; background: rgba(0, 0, 0, 0.16); }
.rm-msg[data-mine="1"] .msg-quote-name, .dm-msg[data-mine="1"] .msg-quote-name { color: inherit; }
.rm-msg[data-flash], .dm-msg[data-flash] { animation: msg-flash 1.4s ease-out; }
@keyframes msg-flash { 0%, 40% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .rm-msg[data-flash], .dm-msg[data-flash] { animation: none; outline: 2px solid var(--accent); } }
[data-rplook] .msg-quote { border-left-color: var(--rp-name); background: rgba(0, 0, 0, 0.3); font-family: var(--rp-font); }
[data-rplook] .msg-quote-name { color: var(--rp-name); font-family: var(--rp-name-font); }
[data-rplook] .rm-msg[data-mine="1"] .msg-quote { margin-left: auto; border-left: 0; border-right: 3px solid var(--rp-mine-name); text-align: right; align-items: flex-end; }
[data-rplook] .rm-msg[data-mine="1"] .msg-quote-name { color: var(--rp-mine-name); }
[data-rplook] .quote-bar { border-color: var(--rp-line); border-left-color: var(--rp-chip); background: rgba(0, 0, 0, 0.35); }
[data-rplook] .quote-who, [data-rplook] .quote-ic { color: var(--rp-chip); }
.gcard-quote { display: block; }

/* Who reacted (8.46). */
.rx-pop { position: fixed; z-index: 85; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--surface-solid, var(--bg)); box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.55); }
.rx-tabs { display: flex; gap: 4px; padding: 8px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.rx-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 15px; background: none; color: var(--muted); font: 600 12px var(--font-mono, monospace); cursor: pointer; }
.rx-tab[aria-selected="true"] { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rx-tab .rx-emoji { font-size: 15px; }
.rx-people { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.rx-person { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px; border: 0; border-radius: min(var(--radius), 8px); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.rx-person:hover, .rx-person:focus-visible { background: var(--input, rgba(127,127,127,0.12)); outline: none; }
.rx-person-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
.rx-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: var(--input, rgba(127,127,127,0.12)); font-size: 12px; font-weight: 700; line-height: 1; }
.rx-person-face { flex: none; font-size: 18px; }
.rx-person-face.rx-emote, .rx-person-face img { width: 22px; height: 22px; }
/* Swipe left mentions: the mark sits on the right. */
.rm-swipe[data-dir="mention"] { left: auto; right: -44px; }
/* The name keeps a little halo: a double-click near it still mentions. */
.rm-author-btn { position: relative; }
.rm-author-btn::before { content: ''; position: absolute; inset: -6px -10px; }
.rm-msg, .dm-msg { user-select: text; }

/* Live typing in Rooms, compact (8.46.4): name and text on one line,
   the newest end of longer text stays visible. */
.rm-live { gap: 3px; margin-bottom: 4px; }
.rm-live-row { display: flex; align-items: center; gap: 8px; width: min(60%, 520px); min-height: 0; padding: 3px 10px; border-radius: 10px 10px 10px 3px; }
.rm-live-label { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.rm-live-row p { flex: 1; min-width: 0; height: auto; margin: 0; flex-direction: row; align-items: center; justify-content: flex-start; font-size: 13px; line-height: 1.4; white-space: nowrap; }
.rm-live-row[data-over] p { justify-content: flex-end; }
.rm-live-text { white-space: pre; line-height: 1.4; }
/* The column may never grow with the text: long typing is cut, not pushed off screen. */
.rm-live { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.rm-live-row { max-width: 100%; min-width: 0; overflow: hidden; }
.rm-live-text { flex: none; }
@media (max-width: 700px) { .rm-live-row { width: 100%; } }

/* ---------------------------------------------------------------- sign in for guests (8.47) */
.top-signin, .top-register { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.top-signin[hidden], .top-register[hidden] { display: none; }
.top-signin svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 900px) {
  .top-register { display: none !important; }
}
@media (max-width: 720px) {
  /* Phones: the sign in button keeps a short label, the rest are icons. */
  .top-actions .btn.top-signin { width: auto; padding: 0 14px 0 12px; }
  .top-actions .btn.top-signin > .top-signin-label { display: inline !important; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
}
@media (max-width: 360px) {
  .top-actions .btn.top-signin { width: 44px; padding: 0; justify-content: center; }
  .top-actions .btn.top-signin > .top-signin-label { display: none !important; }
}

/* The join sheet: on phones it sits at the bottom, like a sheet. */
@media (max-width: 720px) {
  .name-sheet[open] { margin: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 40px); box-sizing: border-box; border: 0; border-top: 2px solid var(--accent); border-radius: min(var(--radius), 16px) min(var(--radius), 16px) 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------- room links in direct chats */
.dm-msg:has(.dm-room) { width: min(300px, 82%); }
.dm-room { position: relative; margin: 8px -4px 2px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--surface-solid); color: var(--fg); text-align: left; }
.dm-room[data-loading] { min-height: 150px; background: linear-gradient(90deg, var(--surface-solid), var(--input, rgba(127,127,127,0.08)), var(--surface-solid)) 0 0 / 200% 100%; animation: dm-room-load 1.2s linear infinite; }
@keyframes dm-room-load { to { background-position: -200% 0; } }
.dm-room-banner { width: 100%; height: 96px; border-bottom: 1px solid var(--line); }
.dm-room-body { display: grid; gap: 6px; padding: 0 12px 12px; }
.dm-room-head { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.dm-room-pic { position: relative; z-index: 1; width: 52px; height: 52px; margin-top: -26px; font-size: 20px; border: 3px solid var(--surface-solid); box-sizing: content-box; }
.dm-room-name { min-width: 0; padding-bottom: 2px; font-family: var(--font-ui); font-size: 15px; letter-spacing: 0.04em; }
.dm-room-topic { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.dm-room-count { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dm-room-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dm-room-actions .btn { flex: 1; min-height: 36px; padding: 0 12px; font-size: 12px; }
:root[data-theme="signal"] .dm-room::before { content: ''; position: absolute; z-index: 2; left: 0; top: 0; width: 12px; height: 12px; border-left: 2px solid var(--line-strong); border-top: 2px solid var(--line-strong); pointer-events: none; }
:root[data-theme="space"] .dm-room { border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--line); }
:root[data-theme="space"] .dm-room-banner { border-bottom-width: 2px; }
:root[data-theme="space"] .dm-room-pic { border-color: var(--surface-solid); outline: 2px solid var(--line); }
:root[data-theme="noir"] .dm-room { border: 0; box-shadow: var(--shadow); }
:root[data-theme="noir"] .dm-room-name { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .dm-room[data-loading] { animation: none; } }

/* ---------------------------------------------------------- roleplay: names in the parts */
/* "Skye walks over", "Skye said calmly:" over a bubble, "Skye feels warm". */
.rp-name { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-style: normal; cursor: pointer; touch-action: manipulation; }
.rp-name strong { font-family: var(--rp-name-font, inherit); font-weight: 600; color: var(--rp-name, var(--accent)); letter-spacing: 0.02em; text-transform: none; }
.rp-name:hover strong, .rp-name:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.rp-you { font-family: var(--rp-name-font, inherit); font-style: normal; font-weight: 600; color: var(--rp-mine-name, var(--accent)); letter-spacing: 0.02em; }
.rp-own { font-style: normal; }
.rp-who { margin: 0 0 -3px; font-family: var(--rp-mono, var(--font-ui)); font-size: 12px; line-height: 1.4; color: var(--rp-dim, var(--muted)); }
.rp-who .rp-name strong, .rp-who .rp-you { font-size: 13px; }
.rp-feels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-style: italic; font-size: 15px; color: var(--rp-do); }
.rp-feels > .rp-name, .rp-feels > .rp-you { font-style: normal; }
.rm-msg[data-mine="1"] .rp-feels { justify-content: flex-end; }
[data-rplook="neon"] .rp-do .rp-name, [data-rplook="neon"] .rp-do .rp-you { text-transform: none; }
[data-rplook="ring"] .rp-who .rp-name strong, [data-rplook="ring"] .rp-who .rp-you { color: var(--rp-name); }

/* ---------------------------------------------------------- mini profile on a name */
.minicard { position: fixed; z-index: 95; width: 280px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface-solid, var(--bg)); color: var(--fg); border: 1px solid var(--line); border-radius: min(var(--radius), 12px); box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.55); font-family: var(--font-ui); text-align: left; animation: ctx-in .12s ease-out; }
:root[data-theme="space"] .minicard { border-width: 2px; box-shadow: 4px 4px 0 var(--line); }
:root[data-theme="noir"] .minicard { border: 0; }
.minicard-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.minicard-av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--input, rgba(127,127,127,0.12)); font-size: 18px; font-weight: 700; }
.minicard-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.minicard-who { display: grid; gap: 2px; min-width: 0; }
.minicard-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 16px; }
.minicard-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minicard { --pa: var(--accent); }
.minicard-pronouns { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; }
.minicard[data-loading] .minicard-pronouns::before { content: ''; width: 64px; height: 18px; border-radius: 999px; background: var(--input, rgba(127,127,127,0.12)); }
.minicard-none { font-size: 12px; color: var(--muted); font-style: italic; }
.minicard-sub { font-size: 12px; color: var(--muted); }
.minicard-sub[data-online="1"]::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #2ec4a6; vertical-align: 1px; }
.minicard-status { margin: 0; font-size: 13px; font-style: italic; }
.minicard-status[hidden] { display: none; }
.minicard-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.minicard-tags:empty { display: none; }
.minicard-actions { display: flex; gap: 8px; }
.minicard-actions .btn { flex: 1; min-height: 36px; padding: 0 12px; font-size: 12px; }
.minicard[data-rplook] .pf-pronoun { --pa: var(--rp-name); }
.minicard[data-rplook] .minicard-msg { background: var(--rp-chip); border-color: var(--rp-chip); color: var(--rp-chip-fg); }
.minicard-sub:empty { display: none; }
.minicard-bio { margin: 0; font-family: var(--font-text); font-size: 13px; line-height: 1.45; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.minicard-bio[hidden] { display: none; }
/* In a roleplay room it takes the room's look. */
.minicard[data-rplook] { background: var(--rp-bg); color: var(--rp-fg); border-color: var(--rp-line); font-family: var(--rp-font); }
.minicard[data-rplook] .minicard-name strong { font-family: var(--rp-name-font); color: var(--rp-name); }
.minicard[data-rplook] .minicard-sub, .minicard[data-rplook] .minicard-bio { color: var(--rp-dim); font-family: var(--rp-mono); }
.minicard[data-rplook] .minicard-open { border-color: var(--rp-line); background: transparent; color: var(--rp-fg); box-shadow: none; }
.minicard[data-rplook] .minicard-open:hover { background: var(--rp-chip); border-color: var(--rp-chip); color: var(--rp-chip-fg); }
.rp-chip-tone { display: inline-flex; align-items: center; gap: 2px; padding-right: 6px; }
.rp-chip-tone svg { width: 12px; height: 12px; }
@media (max-width: 480px) {
  .rp-chips { gap: 4px; padding-left: 12px; padding-right: 12px; }
  .rp-chip { padding: 0 6px; }
  .rp-chip-tone { padding-right: 4px; }
}

/* ---------------------------------------------------------- 18+ profile */
/* Settings: two sliders (dom, sub), limits as chips, who sees them. */
.adult-card[hidden] { display: none; }
.adult-intro { margin: 12px 14px 0; }
.adult-block { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); }
.adult-slider { display: grid; grid-template-columns: 44px 1fr 52px; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.adult-slider output { text-align: right; font-family: var(--font-text); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.adult-slider input[type="range"] { width: 100%; height: 28px !important; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; accent-color: var(--accent); cursor: pointer; }
.adult-role-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.adult-role { display: inline-flex; align-items: center; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.adult-role[data-role="dom"], .adult-role[data-role="sub"], .adult-role[data-role="switch"] { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.adult-limits, .adult-people, .adult-found, .pf-limits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.adult-limits:empty, .adult-people:empty { display: none; }
.adult-limits li, .adult-people li, .pf-limits li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: min(var(--radius), 999px); font-size: 13px; overflow-wrap: anywhere; }
.pf-limits li { padding: 3px 10px; }
.adult-x { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.adult-x:hover, .adult-x:focus-visible { background: var(--input, rgba(127,127,127,0.12)); color: var(--fg); }
.adult-add { flex-wrap: nowrap; }
.adult-add input { flex: 1; }
.adult-vis label { min-width: 0; }
.adult-some { display: flex; flex-direction: column; gap: 8px; }
.adult-some[hidden], .adult-found[hidden] { display: none; }
.adult-found { flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: var(--surface-solid); }
.adult-found li.muted { padding: 6px 8px; }
.adult-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: min(var(--radius), 8px); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.adult-pick:hover, .adult-pick:focus-visible { background: var(--input, rgba(127,127,127,0.12)); }
.adult-av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: var(--input, rgba(127,127,127,0.12)); font-size: 11px; font-weight: 700; }
.adult-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.adult-actions { display: flex; align-items: center; gap: 12px; padding: 14px 14px 4px; }
:root[data-theme="space"] .adult-block, :root[data-theme="space"] .adult-limits li, :root[data-theme="space"] .adult-people li { border-width: 2px; }
/* On a profile card. */
.pf-adult { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--pa, var(--accent)) 40%, var(--line)); border-radius: min(var(--radius), 12px); }
.pf-adult-kicker, .pf-adult-h { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pf-adult-kicker { position: absolute; top: -8px; left: 12px; padding: 0 6px; background: var(--surface-solid); color: var(--pa, var(--accent)); }
.pf-adult-role { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pf-adult .adult-role { border-color: var(--pa, var(--accent)); background: color-mix(in srgb, var(--pa, var(--accent)) 14%, transparent); }
.adult-bars { flex: 1; min-width: 180px; display: grid; gap: 4px; }
.adult-bar { display: grid; grid-template-columns: 36px 1fr 44px; align-items: center; gap: 8px; font-size: 12px; }
.adult-bar-label { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.adult-bar-track { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.adult-bar-track i { display: block; height: 100%; width: var(--v); background: var(--pa, var(--accent)); border-radius: inherit; }
.adult-bar-num { text-align: right; color: var(--muted); font-family: var(--font-text); }
#pf-adult[hidden] { display: none; }
/* In the mini profile. */
.adult-role-chip { border-color: var(--accent); color: var(--fg); }
.minicard[data-rplook] .adult-role-chip { border-color: var(--rp-chip); background: color-mix(in srgb, var(--rp-chip) 18%, transparent); color: var(--rp-fg); }
.adult-consent { border-bottom: 0; }
.adult-consent .check { align-items: flex-start; font-size: 13px; line-height: 1.5; }
.adult-consent .check input { margin-top: 2px; flex: none; }
.adult-consent a { color: var(--accent); }
.adult-consent p { margin: 0 0 0 28px; }
.adult-consent p[hidden] { display: none; }
.adult-clear { margin-left: auto; }
.adult-clear[hidden] { display: none; }

/* ---------------------------------------------------------- notch and status bar */
/* As an installed app on iPhone the page runs under the status bar
   (black-translucent, viewport-fit=cover): keep everything clear of the
   clock, the notch / island and the rounded corners. 0 everywhere else. */
.app { padding-top: env(safe-area-inset-top, 0px); padding-left: max(clamp(16px, 2.5vw, 48px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 2.5vw, 48px), env(safe-area-inset-right, 0px)); }
@media (max-width: 640px), (max-height: 520px) {
  .app[data-view="room"], .app[data-view="rooms"] { padding-top: env(safe-area-inset-top, 0px); padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .dm-drawer { padding-top: env(safe-area-inset-top, 0px); }
}
@media (max-width: 640px) {
  .settings-dialog { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
}
/* A glow in the accent color under the status bar (only where there is one:
   the sizes follow the inset, so they are 0 in a normal browser).
   .app::after is the glow itself, behind the page (the app is its own
   stacking context, its parts sit at z-index 1), so the top bar stays sharp
   on top of it and the glow shines through. body::after is a thin veil over
   the status bar only, so text that scrolls up under the clock fades out. */
.app::after {
  content: '';
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 0px) * 3);
  pointer-events: none;
  background:
    radial-gradient(90% 100% at 50% 0%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 22%, transparent) 45%, transparent 80%);
}
body::after {
  content: '';
  position: fixed;
  z-index: 65;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  pointer-events: none;
  background:
    radial-gradient(90% 160% at 50% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 85%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 25%, transparent));
}
.nsfw-off { margin: 0 14px 14px; }
.nsfw-off[hidden], .nsfw-switch[hidden] { display: none; }
.spaces-note { margin: 8px 0 0; }
.rs-join-badges[hidden] { display: none; }
.rs-join-badges .rm-tag { margin: 2px 4px 0 0; }

/* ------------------------------------------------------------ badge rarity */
.rarity-tag { --tier: var(--muted); display: inline-flex; align-items: center; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tier) 14%, transparent); color: var(--tier); font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 16px; white-space: nowrap; vertical-align: 1px; }
.rarity-tag[data-tier="uncommon"] { --tier: #2f9e5b; }
.rarity-tag[data-tier="rare"] { --tier: #2f7bea; }
.rarity-tag[data-tier="epic"] { --tier: #9b4dff; }
.rarity-tag[data-tier="legendary"] { --tier: #d98a00; background: linear-gradient(100deg, color-mix(in srgb, #ffcf4a 26%, transparent), color-mix(in srgb, #ff8d3e 18%, transparent)); }
:root[data-mode="dark"] .rarity-tag[data-tier="uncommon"] { --tier: #5fd38d; }
:root[data-mode="dark"] .rarity-tag[data-tier="rare"] { --tier: #6aa8ff; }
:root[data-mode="dark"] .rarity-tag[data-tier="epic"] { --tier: #c193ff; }
:root[data-mode="dark"] .rarity-tag[data-tier="legendary"] { --tier: #ffc94a; }

/* ------------------------------------------------------------ badge picker */
.claim-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.claim-picked { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.claim-picked:empty { display: none; }
.rs-join-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.rs-join-picked { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1 1 200px; }

.badge-picker[open] { display: flex; flex-direction: column; gap: 12px; height: min(680px, calc(calc(100dvh / var(--z, 1)) - 32px)); }
.badge-picker .dialog-head { margin: 0; }
.badge-picker .bp-intro { margin: -4px 0 0; }
.bp-tools { display: grid; gap: 10px; }
.bp-search { width: 100%; }
.bp-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.bp-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: var(--ui-case); cursor: pointer; }
.bp-tab:hover { color: var(--fg); border-color: var(--line-strong); }
.bp-tab[aria-selected="true"] { color: var(--fg); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bp-tab-n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--deco); font-size: 11px; line-height: 18px; text-align: center; }
.bp-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 2px 6px; overscroll-behavior: contain; }
.bp-group + .bp-group { margin-top: 16px; }
.bp-group-h { margin: 0 0 8px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: var(--ui-tracking); text-transform: var(--ui-case); color: var(--muted); }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.bp-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 4px 12px; min-height: 64px; padding: 10px 34px 10px 10px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, transform .1s; }
.bp-card > .badge-chip { grid-row: 1 / span 2; }
.bp-card:hover { border-color: var(--line-strong); }
.bp-card:active { transform: scale(.98); }
.bp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bp-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.bp-text { display: grid; gap: 2px; min-width: 0; }
.bp-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-text .small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.bp-card .rarity-tag { grid-column: 2; justify-self: start; }
.bp-check { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; color: transparent; }
.bp-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bp-card[aria-pressed="true"] .bp-check { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.bp-empty { padding: 30px 0; text-align: center; }
.bp-foot { align-items: center; gap: 8px; margin: 0; }
.bp-foot .grow { flex: 1; }
:root[data-theme="space"] .bp-card[aria-pressed="true"] { box-shadow: 3px 3px 0 var(--line); }
@media (max-width: 560px) {
  .badge-picker[open] { padding: 18px; height: calc(calc(100dvh / var(--z, 1)) - 24px); }
  .bp-grid { grid-template-columns: 1fr; }
  .bp-foot .bp-count { width: 100%; }
}
:root[data-theme="space"] .bp-tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
:root[data-theme="space"] .bp-tab[aria-selected="true"] .bp-tab-n { background: color-mix(in srgb, var(--on-accent) 18%, transparent); }

/* ------------------------------------------------------------ songs: cover fallback and YouTube */
.pf-music-art[data-blank] { background: linear-gradient(135deg, hsl(var(--cover-h, 280) 70% 62%), hsl(calc(var(--cover-h, 280) + 50) 75% 48%)) center / cover; position: relative; }
.pf-music-art[data-blank]::after { content: ""; position: absolute; inset: 0; background: center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 18V6l11-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/svg%3E"); opacity: .9; }
.pf-music[data-state="loading"] .pf-music-art[data-blank] { background: color-mix(in srgb, var(--pa) 22%, var(--input)); }
.pf-music[data-state="loading"] .pf-music-art[data-blank]::after { display: none; }
.pf-song > .pf-music-art { width: 40px; height: 40px; }
.pf-yt-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pf-yt { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font: 600 11px var(--font-ui); letter-spacing: .04em; text-decoration: none; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); transition: border-color .15s, background-color .15s; }
.pf-yt:hover { border-color: #ff0033; background: color-mix(in srgb, #ff0033 10%, var(--surface-solid)); }
.pf-yt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-yt svg { width: 15px; height: 15px; fill: none; stroke: #ff0033; stroke-width: 1.8; stroke-linejoin: round; }
.pf-yt svg .fill { fill: #ff0033; stroke: none; }
:root[data-mode="dark"] .pf-yt svg { stroke: #ff4d6a; }
:root[data-mode="dark"] .pf-yt svg .fill { fill: #ff4d6a; }

/* favorite song: search in Settings */
.song-current { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--input); }
.song-current[hidden] { display: none; }
.song-current .pf-song-text { flex: 1; min-width: 0; }
.song-current .pf-song-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-current .pf-music-art { width: 40px; height: 40px; }
.song-current .pf-song-disc { --pa: var(--accent); }
.song-search { position: relative; }
.song-search input { width: 100%; }
.song-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--surface-solid); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); overscroll-behavior: contain; }
.song-results[hidden] { display: none; }
.song-results li[role="option"] { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: min(var(--radius), 8px); cursor: pointer; }
.song-results li[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.song-res-art { width: 38px !important; height: 38px !important; border-radius: 6px; }
.song-res-text { display: grid; flex: 1; min-width: 0; }
.song-res-text strong, .song-res-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-res-len { flex: none; font-variant-numeric: tabular-nums; }
.song-res-none { padding: 10px; }
:root[data-theme="space"] .song-results { border-width: 2px; box-shadow: 5px 5px 0 var(--line); }

/* ------------------------------------------------------------ profile stickers */
.pf-scroll { position: relative; }
.pf-stickers { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 5; container-type: inline-size; pointer-events: none; }
.pf-stickers[hidden] { display: none; }
.pf-st { position: absolute; left: calc(var(--x) * 100cqw); top: calc(var(--y) * 100cqw); width: calc(var(--s) * 100cqw); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); pointer-events: none; outline: none; }
.pf-st img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 4px 6px rgba(0, 0, 0, .28)); }
[data-stickering] .pf-st { pointer-events: auto; cursor: grab; touch-action: none; }
[data-stickering] .pf-st:active { cursor: grabbing; }
[data-stickering] .pf-st[aria-pressed="true"] { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 4px; }
[data-stickering] .pf-st:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.st-del, .st-turn { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); touch-action: none; }
.st-del { top: -13px; right: -13px; cursor: pointer; }
.st-turn { bottom: -13px; right: -13px; cursor: nwse-resize; }
.st-del svg, .st-turn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* While editing: the card keeps its size; the tools float in a dark bar
   at the bottom of the screen, the card scrolls clear of it. */
dialog[data-stickering] { margin-top: 12px; margin-bottom: auto; }
[data-stickering] .pf-scroll { max-height: calc((calc(100dvh / var(--z, 1)) - var(--st-bar-h, 250px) - 44px) / var(--pf-zoom, 1)); }
[data-stickering] .pf-scroll::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); border-radius: inherit; }
.pf-framed > .st-tray, .st-tray {
  --st-bg: #141416; --st-fg: #f1f0ec; --st-mute: #9c9a94; --st-line: rgba(255, 255, 255, .14); --st-tile: #1f1f22;
  position: fixed; z-index: 70; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(820px, calc(100vw - 24px)); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: 12px 14px 10px; border: 1px solid var(--st-line); border-radius: 16px; background: var(--st-bg); color: var(--st-fg);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .3); font-family: var(--font-ui);
  animation: st-up .22s ease-out;
}
@keyframes st-up { from { opacity: 0; transform: translate(-50%, 16px); } }
:root[data-theme="space"] .st-tray { border-radius: 22px; }
:root[data-theme="signal"] .st-tray { border-radius: 4px; }
.st-bar-top, .st-bar-mid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.st-grow { flex: 1; }
.st-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--st-line); border-radius: 10px; }
.st-seg-btn, .st-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--st-fg); font: 600 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.st-seg-btn svg, .st-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-seg-btn:hover, .st-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .07); }
.st-seg-btn[aria-selected="true"] { background: var(--st-fg); color: var(--st-bg); }
.st-btn { border-color: var(--st-line); }
.st-btn:disabled { opacity: .4; cursor: default; }
.st-ghost { border-color: transparent; color: var(--st-mute); }
.st-done { background: var(--st-fg); color: var(--st-bg); border-color: var(--st-fg); }
.st-done:hover { background: #fff !important; }
.st-seg-btn:focus-visible, .st-btn:focus-visible, .st-tile:focus-visible, .st-cat:focus-visible, .st-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-count { font-size: 12px; letter-spacing: .04em; color: #7fd6a8; }
.st-count[data-dirty="1"] { color: #f0c36b; }
.st-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.st-cats::-webkit-scrollbar { display: none; }
.st-cat { flex: none; min-height: 28px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 999px; background: transparent; color: var(--st-mute); font: 600 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.st-cat:hover { color: var(--st-fg); }
.st-cat[aria-current="true"] { color: var(--st-bg); background: var(--accent); border-color: var(--accent); }
.st-strip-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.st-arrow { display: grid; place-items: center; width: 28px; height: 64px; padding: 0; border: 1px solid var(--st-line); border-radius: 8px; background: transparent; color: var(--st-mute); cursor: pointer; }
.st-arrow:hover { color: var(--st-fg); background: rgba(255, 255, 255, .06); }
.st-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st-strip { display: flex; align-items: center; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 2px 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.st-strip-h { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 4px 0 10px; margin-left: 4px; border-left: 1px solid var(--st-line); font: 600 10px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--st-mute); writing-mode: vertical-rl; transform: rotate(180deg); }
.st-tile { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; padding: 8px; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-tile); cursor: pointer; scroll-snap-align: start; transition: transform .12s, border-color .15s, background-color .15s; }
.st-tile:hover:not(:disabled) { border-color: var(--accent); background: #26262a; transform: translateY(-2px); }
.st-tile:active:not(:disabled) { transform: scale(.93); }
.st-tile img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.st-tile:disabled { cursor: default; }
.st-tile:disabled img { opacity: .4; filter: grayscale(.6); }
.st-wait { position: absolute; left: 4px; right: 4px; bottom: 4px; border-radius: 4px; background: rgba(0, 0, 0, .7); font: 600 9px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; text-align: center; color: #f0c36b; }
.st-own { position: relative; flex: none; display: grid; }
.st-own-x { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--st-line); border-radius: 50%; background: var(--st-bg); color: var(--st-mute); cursor: pointer; }
.st-own-x:hover { color: var(--st-fg); }
.st-own-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.st-empty { padding: 20px 8px; font-size: 12px; color: var(--st-mute); }
.st-hint { margin: -4px 0 0; font: 11px/1.45 var(--font-text); color: var(--st-mute); }
@media (max-width: 600px) {
  .st-tray { padding: 10px 10px 8px; gap: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px); }
  .st-seg-btn span, .st-bar-top .st-btn:not(.st-done):not(.st-ghost) span { display: none; }
  .st-seg-btn, .st-btn { padding: 0 10px; }
  .st-arrow { display: none; }
  .st-strip-wrap { grid-template-columns: minmax(0, 1fr); }
  .st-hint { display: none; }
}
@media (pointer: coarse) { .st-del, .st-turn { width: 32px; height: 32px; } .st-del { top: -16px; right: -16px; } .st-turn { bottom: -16px; right: -16px; } }

/* Start page text sent by the server (search engines, and the moment
   before the script runs; the script replaces it with the same). */
.ssr-rooms { margin-top: 24px; }
.ssr-rooms ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ssr-rooms a { color: var(--fg); font-weight: 600; }

/* ------------------------------------------------------------ achievement unlocked */
.ach-pop { --tier: var(--accent); position: fixed; z-index: 200; top: max(16px, env(safe-area-inset-top)); left: 50%; width: min(440px, calc(100vw - 24px)); transform: translateX(-50%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border: 1px solid color-mix(in srgb, var(--tier) 60%, var(--line)); border-radius: min(var(--radius), 16px); background: var(--surface-solid); color: var(--fg); box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .55), 0 0 0 4px color-mix(in srgb, var(--tier) 14%, transparent); overflow: hidden; cursor: pointer; animation: ach-in .5s cubic-bezier(.2, 1.4, .4, 1); }
.ach-pop.out { animation: ach-out .3s ease-in forwards; }
@keyframes ach-in { from { opacity: 0; transform: translate(-50%, -24px) scale(.94); } }
@keyframes ach-out { to { opacity: 0; transform: translate(-50%, -16px) scale(.97); } }
.ach-pop[data-tier="uncommon"] { --tier: #2f9e5b; }
.ach-pop[data-tier="rare"] { --tier: #2f7bea; }
.ach-pop[data-tier="epic"] { --tier: #9b4dff; }
.ach-pop[data-tier="legendary"] { --tier: #e0a100; }
.ach-pop[data-secret="1"] { --tier: #b48cff; }
:root[data-theme="space"] .ach-pop { border-width: 2.5px; box-shadow: 6px 6px 0 var(--line); }
.ach-glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, #fff 55%, transparent) 45%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 160% 0; animation: ach-shine 1.6s .35s ease-out; mix-blend-mode: soft-light; }
@keyframes ach-shine { to { background-position: -60% 0; } }
.ach-badge { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.ach-badge .badge-chip { position: relative; z-index: 1; animation: ach-pop .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ach-pop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
.ach-rays { position: absolute; inset: -14px; border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--tier) 55%, transparent) 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); animation: ach-spin 6s linear infinite, ach-fade .5s ease-out both; }
@keyframes ach-spin { to { transform: rotate(360deg); } }
@keyframes ach-fade { from { opacity: 0; transform: scale(.4); } }
.ach-text { display: grid; gap: 3px; min-width: 0; }
.ach-kicker { font: 600 10px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--tier) 75%, var(--fg)); }
.ach-name { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.ach-desc { font-size: 13px; color: var(--muted); line-height: 1.35; }
.ach-close { align-self: start; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.ach-close:hover { color: var(--fg); background: var(--input); }
.ach-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .ach-pop, .ach-pop.out, .ach-badge .badge-chip, .ach-rays, .ach-glow { animation: none; } }

/* profile views on the card */
.pf-views { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin: 10px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-views[hidden] { display: none; }
.pf-views svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* dragging a sticker from the strip onto the card */
.st-drag-ghost { position: fixed; z-index: 300; left: 0; top: 0; pointer-events: none; opacity: .85; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); transition: opacity .12s; }
.st-drag-ghost.on-card { opacity: 1; }
[data-sticker-drop] .pf-scroll::before { box-shadow: inset 0 0 0 3px var(--accent); }
.st-tile { touch-action: pan-x; }
/* ------------------------------------------------------------ room wallpapers */
/* The layer sits behind everything in the room (the room is its own stacking
   context). The picture moves with transform only, which phones do cheaply. */
.rm-room { position: relative; isolation: isolate; }
.rm-wall { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rm-wall-pic { position: absolute; inset: calc(var(--wp-blur, 0px) * -2); filter: blur(var(--wp-blur, 0px)); }
.rm-wall[data-move] .rm-wall-pic { inset: -160px; animation: wp-drift 80s ease-in-out infinite alternate; will-change: transform; }
@keyframes wp-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-120px, -70px, 0); } }
.rm-wall-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) var(--wp-dim, 35%), transparent); }
.rm-room[data-rplook] .rm-wall-veil { background: color-mix(in srgb, #000 var(--wp-dim, 35%), transparent); }
.rm-room[data-rplook][data-wall] { background: transparent; }
.rm-room[data-wall] .rm-head, .rm-room[data-wall] .rm-compose { background: color-mix(in srgb, var(--surface-solid) 74%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.rm-room[data-rplook][data-wall] .rm-head, .rm-room[data-rplook][data-wall] .rm-compose { background: rgba(10, 10, 12, 0.6); }
.rm-room[data-wall] .rm-msg:not([data-mine="1"]) { background: color-mix(in srgb, var(--surface-solid) 86%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent) inset; }
.rm-room[data-wall] .rm-day, .rm-room[data-wall] .rm-sys { text-shadow: 0 1px 6px var(--bg); }
@media (prefers-reduced-motion: reduce) { .rm-wall .rm-wall-pic { animation: none !important; } }

/* The picker in the room settings. */
.wp-set { display: grid; gap: 14px; }
.wp-ic { display: inline-grid; place-items: center; }
.wp-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wp-set .btn .wp-ic + span { margin-left: 6px; }
.wp-tabs { width: 100%; }
.wp-tabs label { flex: 1; }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.wp-tile { display: grid; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.wp-tile-pic { display: block; height: 58px; border-radius: min(var(--radius), 8px); border: 1px solid var(--line); background-size: cover; background-position: center; }
.wp-tile[aria-pressed="true"] .wp-tile-pic { outline: 2px solid var(--accent); outline-offset: 2px; }
.wp-tile:focus-visible { outline: none; }
.wp-tile:focus-visible .wp-tile-pic { outline: 2px solid var(--fg); outline-offset: 2px; }
.wp-tile-name { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-custom { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.wp-custom-title { font-size: 13px; }
.wp-colors { display: grid; gap: 6px; }
.wp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-swatch { position: relative; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); cursor: pointer; }
.wp-swatch[aria-pressed="true"], .wp-swatch-own[data-on="1"] { outline: 2px solid var(--fg); outline-offset: 2px; }
.wp-swatch-own { display: inline-block; overflow: hidden; background: conic-gradient(#ff5a3c, #ffd23f, #2ec4a6, #5ec8ff, #b48cff, #ff7fb0, #ff5a3c); }
.wp-swatch-own input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wp-slider { display: grid; gap: 4px; }
.wp-slider label { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.wp-slider input { width: 100%; accent-color: var(--accent); }
.wp-look { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.wp-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-cat { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.wp-cat[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.wp-credit { margin: 0; }
.wp-own-list { display: grid; gap: 10px; }
.wp-own-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wp-own { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: min(var(--radius), 8px); }
.wp-own-pic { flex: none; width: 56px; height: 40px; border-radius: 4px; background: var(--input) center / cover no-repeat; }
.wp-own-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wp-own-main strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-wait { color: color-mix(in srgb, #e5a12b 80%, var(--fg)); }
.wp-no { color: color-mix(in srgb, #e5432b 80%, var(--fg)); }
.wp-own .btn.icon { width: 36px; height: 36px; flex: none; }
/* Asking the site team for a picture. */
.wp-req { width: min(560px, calc(calc(100vw / var(--z, 1)) - 24px)); overflow-y: auto; }
.wp-req form { display: grid; gap: 12px; }
.wp-req-pic { position: relative; height: 190px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: min(var(--radius), 10px); background: var(--input); }
.wp-req-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-req-size { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; }
.wp-req-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wp-req-src { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: min(var(--radius), 8px); font-size: 13px; cursor: pointer; }
.wp-req-src:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 520px) { .wp-req-sources { grid-template-columns: 1fr; } }