:root {
  --brand: #2563eb;
  --brand-contrast: #ffffff;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --text: #1c1f24;
  --muted: #667085;
  --border: #e3e6ea;
  --stage: #111418;
  --danger: #dc2626;
  --live: #e11d48;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --panel: #181b21;
    --text: #e8eaed;
    --muted: #9aa1ac;
    --border: #2a2e36;
    --stage: #07080a;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}

button:hover {
  filter: brightness(0.96);
}

button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}

button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

button.ghost {
  background: transparent;
}

button.on {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

input {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

/*
 * Dropdowns as the text fields: rounded and soft, the browser's own box replaced by a thin chevron (Apple's look).
 * Rules for a place's colours set background-color only, so the chevron stays.
 */
select {
  font: inherit;
  width: 100%;
  min-height: 42px;
  padding: 9px 38px 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8f98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

/* Checkboxes and radio buttons in the brand colour. */
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--brand);
}

select:hover {
  border-color: color-mix(in srgb, var(--text) 30%, var(--border));
}

select:focus-visible,
input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* Login and end screens */
.login {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.card {
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: grid;
  gap: 14px;
}

.card h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.card label {
  display: grid;
  gap: 6px;
  font-weight: 500;
}

.card label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.card label.check input {
  width: auto;
}

.logo {
  max-width: 180px;
  max-height: 64px;
  object-fit: contain;
}

.logo.small {
  max-height: 32px;
  max-width: 120px;
}

/* A logo that would blend into the background behind it (logo-contrast.js): shown white on dark, black on light. */
.logo-reversed-light {
  filter: brightness(0) invert(1);
}
.logo-reversed-dark {
  filter: brightness(0);
}

.description {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.stack {
  display: grid;
  gap: 14px;
}

.join-as {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
}

.join-as legend {
  font-weight: 500;
  padding: 0 4px;
}

.invited {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  border-left: 4px solid var(--brand);
}

.error {
  color: var(--danger);
  margin: 0;
}

/* Room */
.room {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 3px solid var(--brand);
}

.topbar .title,
.topbar .me {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--control, var(--bg));
  border: 1px solid var(--border);
  text-transform: capitalize;
}

.badge.live {
  background: var(--live);
  border-color: var(--live);
  color: #fff;
}

.badge.rec {
  background: #111;
  border-color: #111;
  color: #ff4d4d;
}

.badge.restream {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
  text-transform: none;
}

.dialog {
  width: min(560px, calc(100% - 32px));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  background: var(--panel);
  color: var(--text);
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.dialog h2 {
  margin: 0 0 8px;
}

.dialog .hint {
  margin: 0 0 14px;
}

.restream-row {
  display: flex;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0 0 8px;
}

.restream-row select {
  width: auto;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr var(--sidebar, clamp(360px, 22vw, 420px));
  /* One row exactly the window's height left: the stage shrinks to fit rather than the page scrolling. */
  grid-template-rows: minmax(0, 1fr);
}

/* The side panel hidden: the stage takes the whole width. */
.layout.panel-hidden {
  grid-template-columns: 1fr 0;
}

.layout.panel-hidden .sidebar {
  display: none;
}

/* While its edge is dragged, the stage's videos must not catch the pointer. */
.layout.resizing {
  cursor: col-resize;
  user-select: none;
}

.layout.resizing .stage-area {
  pointer-events: none;
}

.stage-area {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--stage);
}

.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 8px;
  padding: 8px;
}

.stage .main {
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
}

.stage .strip {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.stage .grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(120px, 1fr);
  /* Many cameras scroll inside the stage, never the page. */
  overflow-y: auto;
}

.tile {
  position: relative;
  background: #1f242c;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 120px;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.stage .main .tile,
.stage .grid .tile {
  /* The stage adapts to the window: a tile fills the space it has, its video kept whole inside (no fixed 16:9). */
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}

.tile-pin {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 6px;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  border: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.tile:hover .tile-pin,
.tile:focus-within .tile-pin {
  opacity: 1;
}

@media (hover: none) {
  .tile-pin {
    opacity: 1;
  }
}

.tile[draggable='true'] {
  cursor: grab;
}

.tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.tile.camera video {
  object-fit: cover;
}

.tile.speaking {
  box-shadow:
    0 0 0 4px var(--brand),
    0 0 22px 4px color-mix(in srgb, var(--brand) 70%, transparent);
  transition: box-shadow 0.15s ease-out;
}

.tile .speaking-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--brand);
  color: var(--brand-contrast);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.tile .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-contrast);
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 600;
}

.tile .name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 6px;
}

.waiting {
  color: #c9ced6;
  text-align: center;
  padding: 24px;
}

.waiting h2 {
  margin: 0 0 6px;
  color: #fff;
}

.waiting-room {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, var(--brand), #0b0d12 70%);
  border-radius: 10px;
}

.waiting-room .waiting-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.waiting-card {
  position: relative;
  max-width: min(560px, calc(100% - 32px));
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 14px;
  padding: 20px 26px;
  backdrop-filter: blur(4px);
}

.waiting-card h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.waiting-card .countdown {
  font-size: 34px;
  font-weight: 700;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}

.waiting-card p {
  margin: 4px 0 0;
  color: #dfe3ea;
}

/* Over the owner's waiting video: only the countdown, small, top left, out of the video's way. */
.waiting-card.compact {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
}

.waiting-card.compact h2,
.waiting-card.compact p:not(.countdown),
.waiting-card.compact .add-to-calendar {
  display: none;
}

.waiting-card.compact .countdown {
  font-size: 15px;
  margin: 0;
}

.waiting-card[hidden] {
  display: none;
}

/* The standard look's own parts of the card (its logo, title, time, boxes, "waiting for the host"): there only. */
.waiting-card :is(.waiting-logo, .waiting-title, .waiting-message, .waiting-when, .countdown-boxes, .waiting-host) {
  display: none;
}

.waiting-room .player-button {
  position: absolute;
  bottom: 14px;
  left: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
}

.player {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.player .unmute,
.stage > .unmute {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

/* On the live stage, a button over the videos (it stood as a column beside them). */
.stage > .unmute {
  z-index: 5;
}

/* Safari refused to start the video by itself (watch.js tapToPlay): one tap starts it. */
.tap-to-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 20px;
  padding: 16px 28px;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.tap-to-play[hidden] {
  display: none;
}

.player .live-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--live);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 6px;
}

.player .player-button {
  position: absolute;
  bottom: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
}

.player .player-button.sound {
  top: auto;
  left: 14px;
  transform: none;
}

.player .full-screen {
  right: 14px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-color: transparent;
}

/* Enlarge (enlarge.js): the stream or the stage covers the window, on phones too. */
.enlarged {
  position: fixed !important;
  inset: 0;
  z-index: 2000;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #000;
}
.enlarged video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.has-enlarged {
  overflow: hidden;
}

.overlays:empty {
  display: none;
}

.overlays {
  display: grid;
  gap: 1px;
}

/* However many are shown at once (a question, an offer, a timer, a QR code, a coupon), the bars over and under the
   video take at most this much of the stage and scroll: the video keeps the rest, also on a phone. */
.stage-area > .overlays {
  flex: none;
  max-height: 40%;
  overflow-y: auto;
}

.overlay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  color: #fff;
}

.overlay.question {
  background: #1e293b;
  font-size: 17px;
}

.overlay.question .asker {
  color: #93c5fd;
  font-weight: 600;
}

.overlay.offer {
  background: var(--brand);
  color: var(--brand-contrast);
  font-size: 17px;
  font-weight: 600;
}

/* The offer bar's own controls (Hide, the placement): in the bar's colour, whatever the room's background. */
.overlay.offer button.ghost {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.overlay .grow {
  flex: 1;
  min-width: 180px;
}

.overlay.offer .go,
.overlay.auction .go {
  background: #fff;
  color: #111;
  border-color: #fff;
  font-weight: 700;
}

.overlay .small {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.85;
}

.overlay .thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
}

.overlay .price {
  font-size: 20px;
  font-weight: 800;
}

.overlay .urgency {
  font-size: 14px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.overlay.coupon {
  background: #7c3aed;
  font-size: 17px;
}

.overlay.coupon code {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.18);
  padding: 4px 10px;
  border-radius: 6px;
}

.shop-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.product {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}

.product.no-picture {
  grid-template-columns: 1fr;
}

.product img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg);
}

.product .info {
  display: grid;
  gap: 4px;
}

.product .price {
  font-weight: 800;
}

.product .description {
  color: var(--muted);
  font-size: 13px;
}

.product .pin-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}

.product .pin-row input {
  width: 72px;
  padding: 4px 6px;
}

.overlay.timer {
  background: #0f172a;
  justify-content: center;
  font-size: 18px;
}

.overlay.timer .clock {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.overlay.qr {
  background: #fff;
  color: #111;
  font-size: 18px;
  font-weight: 600;
}

.qr-image {
  width: 88px;
  height: 88px;
  background: #fff;
  border-radius: 6px;
  flex: none;
}

.qr-image.small {
  width: 64px;
  height: 64px;
  padding: 3px;
}

.qr-image svg {
  width: 100%;
  height: 100%;
}

.giveaway {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgb(15 23 42 / 70%);
}

.giveaway[hidden] {
  display: none;
}

.giveaway-panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  max-width: calc(100vw - 32px);
}

.giveaway-panel h2 {
  margin: 0;
}

.wheel {
  width: min(360px, 80vw);
  height: auto;
}

.wheel-pointer {
  width: 0;
  height: 0;
  margin-bottom: -18px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 22px solid #111;
  z-index: 1;
}

.giveaway-result {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

.giveaway-result.won {
  font-size: 22px;
  font-weight: 800;
}

.overlay.auction {
  background: #422006;
  font-size: 16px;
}

.overlay.auction[hidden] {
  display: none;
}

.dialog .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stack-tight {
  display: grid;
  gap: 2px;
}

.auction-high {
  font-size: 20px;
  font-weight: 800;
  color: #fde68a;
}

.overlay.auction .clock {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.overlay.auction .ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 60%);
}

.auction-bid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.auction-bid[hidden] {
  display: none;
}

.auction-bid input[name='amount'] {
  width: 110px;
}

.auction-bid input[name='email'] {
  width: 240px;
}

.devices-card {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 32px));
  padding: 20px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
  text-align: center;
}

.progress-bar {
  height: 8px;
  margin: 0 0 10px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}

.progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width 0.2s;
}

/* No percentage while the server converts: a stripe that keeps moving. */
.progress-bar.busy span {
  width: 35%;
  animation: progress-busy 1.4s ease-in-out infinite;
}

@keyframes progress-busy {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border: 4px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.spinner[hidden] {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .progress-bar.busy span {
    animation-duration: 4s;
  }
}

.devices-card[hidden] {
  display: none;
}

.devices-card h2 {
  margin: 0 0 6px;
}

.devices-card p {
  margin: 0 0 14px;
}

.devices-actions {
  display: grid;
  gap: 8px;
}

.devices-card .error {
  margin: 12px 0 0;
}

.flag {
  width: 1.25em;
  margin-right: 0.35em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
  vertical-align: -0.1em;
}

.countries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg);
  font-weight: 500;
}

.file-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.file-about {
  flex: 1;
  min-width: 0;
  display: grid;
}

.file-about strong {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.banned {
  margin-top: 14px;
  font-size: 13px;
}

.banned ul {
  margin: 6px 0 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

.guest-of {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  font-size: 14px;
}

.guest-of[hidden] {
  display: none;
}

.badge.guest {
  background: color-mix(in srgb, var(--brand) 15%, var(--panel));
}

.private-chat .private-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.private-messages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}

.private-messages li {
  max-width: 85%;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg);
}

.private-messages li.mine {
  justify-self: end;
  background: color-mix(in srgb, var(--brand) 18%, var(--panel));
}

.private-messages p {
  margin: 0;
  overflow-wrap: anywhere;
}

.private-messages time {
  font-size: 11px;
  color: var(--muted);
}

.guest-list-room {
  display: grid;
  gap: 4px;
}

.guest-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.guest-row .unread {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--live);
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.floating-reactions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  height: 60%;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.floating {
  position: absolute;
  bottom: 0;
  font-size: 30px;
  animation: float-up 3s ease-out forwards;
}

@keyframes float-up {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(-10%) scale(1);
  }
  100% {
    transform: translateY(-420%) scale(1.1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating {
    animation-duration: 1.2s !important;
  }
}

.reaction-bar {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: var(--stage);
}

.reaction-bar button {
  border: 0;
  background: transparent;
  font-size: 20px;
  padding: 4px 6px;
  border-radius: 8px;
}

.reaction-bar button:hover {
  background: rgb(255 255 255 / 12%);
  transform: scale(1.15);
}

.emoji-button {
  padding: 4px 8px;
  font-size: 18px;
}

.emoji-picker {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  padding: 6px;
  margin: 0 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

.emoji-picker button {
  border: 0;
  background: transparent;
  font-size: 20px;
  padding: 2px;
}

.unread-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--live);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.captions {
  padding: 8px 16px;
  background: #000;
  color: #fff;
  font-size: 20px;
  line-height: 1.35;
  text-align: center;
}

.captions[hidden] {
  display: none;
}

.captions p {
  margin: 0;
}

#captions-speak.on {
  border-color: var(--brand);
  font-weight: 600;
}

.soundboard {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 30;
  display: grid;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 14px;
  border-radius: 12px;
  background: var(--panel, #fff);
  color: inherit;
  border: 1px solid rgb(0 0 0 / 12%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
}

.soundboard[hidden] {
  display: none;
}

.soundboard header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.soundboard .hint {
  margin: 0;
}

.soundboard-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.soundboard label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.soundboard input[type='checkbox'] {
  width: auto;
  flex: none;
}

.soundboard input[type='range'] {
  flex: 1;
}

.soundboard input[type='radio'] {
  width: auto;
  flex: none;
}

.soundboard input.small-number {
  width: 4.5em;
  flex: none;
}

/* The touch up's background choices: one per line, the button before its words. */
.background-choices {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px 10px;
  margin: 0;
  display: grid;
  gap: 6px;
}

.background-choices legend {
  padding: 0 4px;
}

.soundboard .background-choices input[type='radio'] {
  width: auto;
  flex: none;
  margin: 0;
}

.soundboard-row input[type='url'] {
  flex: 1;
  min-width: 120px;
}

.soundboard-row .grow {
  flex: 1;
}

.soundboard-effects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}

.prompter {
  position: fixed;
  top: 70px;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));
  display: grid;
  grid-template-rows: auto 1fr;
  height: min(46vh, 420px);
  border-radius: 12px;
  background: rgb(0 0 0 / 88%);
  color: #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / 40%);
}

.prompter[hidden] {
  display: none;
}

.prompter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  font-size: 14px;
}

.prompter-bar .ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 35%);
  padding: 4px 10px;
}

.prompter-text {
  overflow-y: auto;
  scrollbar-width: none;
  padding: 30% 28px 60%;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-wrap;
  /* The line to read is near the top, where the camera is. */
  mask-image: linear-gradient(transparent, #000 12%, #000 70%, transparent);
}

.prompter-text::-webkit-scrollbar {
  display: none;
}

.prompter-editor {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 8px;
  min-height: 0;
}

.prompter-editor[hidden] {
  display: none;
}

.prompter-editor textarea {
  width: 100%;
  height: 100%;
  resize: none;
  font-size: 16px;
}

.question-list {
  list-style: none;
  margin: 0;
  padding: 0 12px 12px;
  display: grid;
  gap: 8px;
}

.question-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.question-item.answered {
  opacity: 0.6;
}

.question-item.on-screen {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.question-item .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.question-item .text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.question-item .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.question-item button {
  padding: 4px 10px;
  font-size: 13px;
}

.question-item .vote.on {
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}

.poll-view,
.poll-form {
  padding: 12px;
}

.poll-view h3,
.poll-form h3 {
  margin: 0 0 10px;
}

.poll-option {
  position: relative;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  overflow: hidden;
}

.poll-option .bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brand);
  opacity: 0.18;
}

.poll-option .label {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.poll-option.mine {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  vertical-align: middle;
}

.presenter-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #1f242c;
  color: #fff;
  flex-wrap: wrap;
}

/* A playing video's controls in the presenter's bar. */
.video-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.video-controls input[type='range'] {
  width: min(320px, 40vw);
  accent-color: var(--brand);
}

.video-controls #video-time {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  opacity: 0.85;
}

.presenter-panel button.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.presenter-panel #presenter-label {
  margin-right: auto;
}

.controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}

/* Sidebar */
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabs button {
  flex: 1 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px;
  border-bottom: 2px solid transparent;
}

.tabs button.active {
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.tab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.chat-list {
  list-style: none;
  margin: 0;
  padding: 12px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-list .who {
  font-weight: 600;
  margin-right: 6px;
}

.chat-list time {
  color: var(--muted);
  font-size: 12px;
}

.chat-list p {
  margin: 2px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}

.chat-form input {
  flex: 1;
  min-width: 0;
}

.hint {
  color: var(--muted);
  font-size: 13px;
  margin: 10px 12px 0;
}

#people h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 14px 12px 6px;
}

.person {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
}

.person:hover {
  background: var(--bg);
}

.person .person-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person .more {
  padding: 2px 8px;
}

.context-menu {
  position: fixed;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  min-width: 180px;
}

.context-menu button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
}

.context-menu button:hover {
  background: var(--bg);
}

.sales-ticker {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  z-index: 20;
}

.sale {
  background: #16a34a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  animation: sale-in 0.35s ease-out;
}

@keyframes sale-in {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
}

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  z-index: 20;
}

.toast {
  background: var(--text);
  color: var(--bg);
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 360px;
}

@media (max-width: 860px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(300px, 1fr) 320px;
  }

  .sidebar {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .stage {
    flex-direction: column;
  }

  .stage .strip {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .stage .strip .tile {
    width: 160px;
    flex: none;
  }
}

/* ---------- The room: dark and stage first, like the meeting apps people know ---------- */
.room,
body.in-room {
  --bg: #0b0d12;
  --panel: #13161d;
  --text: #e8eaef;
  --muted: #9aa3b2;
  --border: #252a35;
  --stage: #07080b;
  /* Buttons, their hover and edge, and the fields people type in: theme.js sets them for a room's own background. */
  --control: #1c2029;
  --control-hover: #252b36;
  --control-border: #2a303c;
  --field: #0f1218;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}

.room .topbar {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.room .topbar .title strong {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.room #leave {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  font-weight: 600;
}

.room input,
.room textarea,
.room select {
  background-color: var(--field);
  border-color: var(--border);
  color: var(--text);
}

.room .sidebar {
  background: var(--panel);
  border-left: 1px solid var(--border);
}

.room .tabs button {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}

.room .tabs button.active {
  color: var(--text);
}

.room .stage {
  background: var(--stage);
}

.room .tile {
  background: #161a22;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset;
}

/* The dock: what you use most on it, the rest in menus. */
.dock {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.dock-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dock button,
.header-devices button {
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--control-border);
  background: var(--control);
  color: var(--text);
  font-weight: 600;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.1s;
}

.dock button:hover:not([disabled]),
.header-devices button:hover:not([disabled]) {
  background: var(--control-hover);
}

.dock button:active:not([disabled]) {
  transform: translateY(1px);
}

.dock button.on,
.header-devices button.on {
  background: color-mix(in srgb, var(--brand) 22%, var(--control));
  border-color: var(--brand);
}

.dock button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}

.dock button.danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.menu {
  position: relative;
}

.menu-items {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 250px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 44px rgb(0 0 0 / 30%);
}

.menu-items[hidden] {
  display: none;
}

.dock-group[data-for='moderator'] .menu-items {
  left: auto;
  right: 0;
}

.dock .menu-items button {
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-weight: 500;
  padding: 10px 12px;
}

.dock .menu-items button:hover:not([disabled]) {
  background: var(--control-hover);
}

@media (max-width: 900px) {
  .dock {
    justify-content: center;
  }

  .menu-items,
  .dock-group[data-for='moderator'] .menu-items {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 76px;
  }
}

/* The tabs: an icon over a short label, so all of them fit the sidebar. */
.room .tabs button {
  display: grid;
  justify-items: center;
  gap: 2px;
  position: relative;
  padding: 8px 6px 7px;
  min-width: 46px;
}

.tab-icon {
  font-size: 17px;
  line-height: 1;
}

.tab-label {
  font-size: 11px;
  white-space: nowrap;
}

.room .tabs .dot,
.room .tabs .unread-count {
  position: absolute;
  top: 4px;
  right: 6px;
}

/*
 * On a computer the tabs are a column down the panel's right edge, at the window's edge: all of them always in sight,
 * with their badges, however many the room has. Below 860px (phones) they share the width instead.
 */
@media (min-width: 861px) {
  .room .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    grid-template-rows: minmax(0, 1fr);
  }

  .room .sidebar > .tabs {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    overflow: hidden auto;
    border-bottom: 0;
    border-left: 1px solid var(--border);
  }

  .room .sidebar > .tab {
    grid-column: 1;
    grid-row: 1;
  }

  .room .tabs button {
    flex: none;
    min-width: 0;
    padding: 10px 4px;
    border-bottom: 0;
    border-right: 3px solid transparent;
  }

  .room .tabs button.active {
    border-right-color: var(--brand);
    background: color-mix(in srgb, var(--text) 8%, transparent);
  }

  .room .tabs .tab-icon {
    font-size: 21px;
  }

  .room .tabs .tab-label {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
}

@media (max-width: 860px) {
  .room .tabs button {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 2px 7px;
  }

  .room .tabs .tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

body.in-room {
  background: var(--bg);
  color: var(--text);
}

body.in-room .dialog,
body.in-room .soundboard,
body.in-room .devices-card,
body.in-room .context-menu {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}

body.in-room .dialog input,
body.in-room .dialog textarea,
body.in-room .dialog select,
body.in-room .soundboard input {
  background-color: var(--field);
  border-color: var(--border);
  color: var(--text);
}

body.in-room .toast {
  background: var(--control);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgb(0 0 0 / 40%);
}

/* Drawing over the presentation: the surface catches the pen over the stage; the bar holds the tools. */
.ink-surface {
  position: absolute;
  z-index: 6;
  cursor: crosshair;
  touch-action: none;
}

.ink-bar {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 7;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}

.ink-bar[hidden] {
  display: none;
}

.ink-bar button {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.ink-bar button.on {
  border-color: var(--text);
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.ink-colors {
  display: flex;
  gap: 4px;
  padding: 0 6px;
}

.ink-colors button {
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
}

.ink-colors button.on {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--brand);
}

/* Where an offer shows: under the video, above it, or a pop-up in the middle of the screen. */
.placement {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}

.placement label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.placement input {
  width: auto;
}

.placement-picker {
  width: auto;
  /* Room on the right for the arrow, which the words ran into. */
  padding: 4px 30px 4px 8px;
  background-position: right 10px center;
  font-size: 13px;
}

.offer-popup {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / 55%);
}

.offer-popup[hidden] {
  display: none;
}

.offer-popup .overlay.offer.as-popup {
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  width: min(440px, 100%);
  padding: 30px 26px 24px;
  border-radius: 22px;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}

.offer-popup .as-popup .grow {
  flex: none;
  min-width: 0;
}

.offer-popup .as-popup .thumb {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  border-radius: 14px;
}

.offer-popup .as-popup .go {
  width: 100%;
  padding: 14px;
  font-size: 18px;
}

.offer-popup .as-popup .qr-image.small {
  width: 84px;
  height: 84px;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgb(0 0 0 / 25%);
  border: 0;
  color: inherit;
}

.offer-popup.appear .as-popup {
  animation: pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes pop-in {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.sidebar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 8px;
  z-index: 10;
  cursor: col-resize;
}

.sidebar-handle:hover,
.sidebar-handle:focus-visible,
.layout.resizing .sidebar-handle {
  background: linear-gradient(90deg, transparent 3px, var(--brand) 3px, var(--brand) 5px, transparent 5px);
  outline: none;
}

@media (max-width: 860px) {
  .sidebar-handle {
    display: none;
  }

  .layout.panel-hidden {
    grid-template-rows: 1fr 0;
  }
}

.file-library {
  margin-top: 16px;
}

.file-library summary {
  cursor: pointer;
  font-weight: 600;
}

/* The stage full screen (the tile's Full screen button, or a double click). */
.stage:fullscreen {
  background: #000;
  padding: 0;
}

/* "Invite someone": the message, and the ways to send it. */
.invite-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

#invite-message {
  width: 100%;
}

/* The goodbye screen: its cards (you left, how was it, coming up, a free room) one under the other, apart. */
#gone {
  gap: 16px;
  align-content: center;
}

/* After the webinar: a free room of one's own. */
.free-room {
  text-align: center;
}

/* "Hosted free · Get your own room": rooms and replays on packages that show it. */
.powered-by {
  display: inline-block;
  margin: 12px auto 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.powered-by:hover {
  color: var(--text);
  border-color: var(--brand);
}

.powered-by[hidden] {
  display: none;
}

#room-powered-by {
  margin: 0;
}

/* Speakers' and moderators' mic and camera, in the top bar beside the logo. */
.header-devices {
  display: inline-flex;
  gap: 6px;
}

.header-devices button {
  padding: 6px 10px;
  font-size: 13px;
  white-space: nowrap;
}

/* "Add to my calendar": the join page and the waiting screen. */
.add-to-calendar {
  margin-top: 8px;
  text-align: left;
}

/* Centred, as the rest of the waiting screen. */
.waiting-card .add-to-calendar {
  text-align: center;
}

.add-to-calendar summary {
  cursor: pointer;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 600;
  list-style: none;
}

.add-to-calendar summary::-webkit-details-marker {
  display: none;
}

.calendar-items {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.calendar-items a {
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 80%, var(--brand) 20%);
  color: var(--text);
  text-decoration: none;
}

/* ---------- Pop-ups the owner designed (popup-design.js): in the room, and in the editor's preview ---------- */
.designed-popup {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: var(--popup-bg);
  color: var(--popup-text);
  box-shadow: 0 20px 50px rgb(0 0 0 / 35%);
  overflow: hidden;
  text-align: center;
  max-width: 560px;
}

.designed-popup .popup-headline {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.designed-popup .popup-text {
  margin: 0;
  opacity: 0.9;
  font-size: 15px;
}

.designed-popup .popup-body {
  display: grid;
  gap: 10px;
  align-content: center;
}

.designed-popup .popup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.designed-popup .popup-go,
.designed-popup .popup-actions .go {
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--popup-button);
  color: var(--popup-button-text);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgb(0 0 0 / 20%);
}

.designed-popup .popup-image {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.designed-popup.layout-stacked .popup-image {
  max-height: 160px;
  object-fit: contain;
}

.designed-popup.layout-image-top {
  padding-top: 0;
}

.designed-popup.layout-image-top .popup-image {
  margin: 0 -22px;
  width: calc(100% + 44px);
  height: 190px;
  border-radius: 0;
}

.designed-popup.layout-image-left {
  grid-template-columns: minmax(120px, 42%) 1fr;
  text-align: left;
  align-items: center;
}

.designed-popup.layout-image-left .popup-image {
  height: 100%;
  min-height: 160px;
}

.designed-popup.layout-image-left .popup-actions {
  justify-content: flex-start;
}

.designed-popup.layout-minimal {
  grid-template-columns: 1fr;
  padding: 16px 20px;
}

.designed-popup .popup-badge {
  position: absolute;
  top: 16px;
  left: -36px;
  transform: rotate(-35deg);
  padding: 4px 42px;
  background: var(--popup-button);
  color: var(--popup-button-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
  z-index: 1;
}

.designed-popup .popup-moderator {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--popup-text) 25%, transparent);
  font-size: 13px;
}

@media (max-width: 600px) {
  .designed-popup.layout-image-left {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .designed-popup.layout-image-left .popup-actions {
    justify-content: center;
  }
}

/* A designed pop-up as the offer: its own look over the room's. */
.offer-popup .overlay.offer.designed.as-popup {
  display: grid;
  width: min(600px, 100%);
  padding: 22px;
  font-size: 15px;
  font-weight: 400;
}

.offer-popup .overlay.offer.designed.layout-image-top.as-popup {
  padding-top: 0;
}

.overlay.offer.designed:not(.as-popup) {
  max-width: none;
  margin: 8px;
  padding: 14px 18px;
  border-radius: 14px;
}

.overlay.offer.designed:not(.as-popup) .popup-image {
  display: none;
}

/* The moderator's pop-up picker: each design as it will look, scaled down. */
.wide-dialog {
  width: min(820px, 96vw);
}

.popup-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
}

.popup-pick {
  display: grid;
  gap: 8px;
}

.popup-pick-preview {
  height: 220px;
  overflow: hidden;
  border-radius: 14px;
  background: #0b0d12;
  display: grid;
  place-items: center;
}

/* zoom, not transform: scale(), so the half-size pop-up also takes half the room and stays centred, whole. */
.popup-pick-preview .designed-popup {
  zoom: 0.5;
  width: 520px;
  max-width: none;
}

/* The room's own offer colours must not cover the owner's design. */
.overlay.offer.designed {
  background: var(--popup-bg);
  color: var(--popup-text);
  border: 0;
}

.overlay.offer.designed .go {
  background: var(--popup-button);
  color: var(--popup-button-text);
  border: 0;
}

.offer-popup .overlay.offer.designed.layout-image-left.as-popup {
  text-align: left;
}

.overlay.offer.designed .popup-close {
  z-index: 2;
  color: var(--popup-text);
}

/* The bring-a-friend contest's leaderboard, under the stage. */
.overlay.contest {
  background: linear-gradient(90deg, #7c3aed, #db2777);
  color: #fff;
  flex-wrap: wrap;
  gap: 12px;
}

.contest-heading {
  display: grid;
  gap: 2px;
}

.contest-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: place;
}

.contest-top li {
  counter-increment: place;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 18%);
  font-size: 14px;
}

.contest-top li::before {
  content: counter(place) '. ';
  font-weight: 800;
}

.contest-top li.mine {
  background: #fff;
  color: #7c3aed;
  font-weight: 700;
}

.contest-me {
  font-weight: 800;
}

/* ---------- Phones: two pages, swiped like Zoom (the video and its controls; the chat and the other tabs) ---------- */
.page-switch {
  display: none;
}

@media (max-width: 760px) {
  .room {
    height: 100dvh;
  }

  .layout,
  .layout.panel-hidden {
    display: flex;
    grid-template: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .layout::-webkit-scrollbar {
    display: none;
  }

  .layout > .stage-area,
  .layout > .sidebar,
  .layout.panel-hidden > .sidebar {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .layout > .sidebar,
  .layout.panel-hidden > .sidebar {
    display: flex;
    flex-direction: column;
    border-top: 0;
    border-left: 0;
  }

  .page-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    margin: 6px 8px 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
  }

  .page-switch.to-stage {
    align-self: flex-start;
  }

  .page-switch .unread-count {
    position: static;
  }

  /* The top bar on a phone: the logo, the mic and camera as icons, and Leave. */
  .room .topbar {
    padding: 8px 10px;
    gap: 6px;
  }

  .room .topbar .title,
  .room .topbar .me {
    gap: 6px;
    min-width: 0;
  }

  .room .topbar .logo.small {
    max-width: 96px;
    max-height: 28px;
  }

  #room-name,
  #restream-badge,
  #room-powered-by,
  .room #me-name,
  .room #me-role,
  .room #me-inviter,
  #sidebar-toggle {
    display: none !important;
  }

  .header-devices button {
    padding: 8px 10px;
  }

  .header-devices .device-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .header-devices .device-icon {
    font-size: 18px;
  }

  #leave {
    padding: 8px 12px;
  }

  /* The dock: smaller buttons, so they fit two short rows. */
  .dock {
    padding: 8px;
    gap: 6px;
  }

  .dock button {
    padding: 8px 10px;
    font-size: 14px;
  }

  .reaction-bar button {
    font-size: 20px;
  }
}

/* Phones: the others fill the stage, your own camera is a small picture in the corner (like Zoom). */
@media (max-width: 760px) {
  .stage {
    position: relative;
  }

  .stage .grid:has(> .tile:nth-child(2)) > .tile.camera.local {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 30%;
    max-width: 140px;
    height: auto;
    aspect-ratio: 3 / 4;
    min-height: 0;
    z-index: 3;
    border: 2px solid rgb(255 255 255 / 70%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
  }

  .stage .grid:has(> .tile:nth-child(2)) > .tile.camera.local .name,
  .stage .grid:has(> .tile:nth-child(2)) > .tile.camera.local .tile-pin,
  .stage .grid:has(> .tile:nth-child(2)) > .tile.camera.local .speaking-label {
    display: none;
  }

  /* Other people's video whole, never cropped and zoomed (a computer's wide picture on an upright phone); only your
     own small picture in the corner fills its box. */
  .stage .grid .tile.camera.local video {
    object-fit: cover;
  }

  /* With you in the corner, one other person fills the stage; three or more share it in two columns. */
  .stage .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, 1fr);
  }

  .stage .grid:has(> .tile:nth-child(4)) {
    grid-template-columns: 1fr 1fr;
  }

  .tile-pin {
    padding: 4px 8px;
    font-size: 12px;
  }
}

.captions-language {
  width: auto;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 14px;
}

/* An inviter's photo: on their profile editor, and on their guests' join page. */
.profile-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  font-size: 40px;
  background: color-mix(in srgb, var(--brand) 15%, transparent);
}

.profile-photo.small {
  width: 56px;
  height: 56px;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.guest-of q {
  font-style: italic;
}

/* A speaker waiting backstage (the green room): over the stage, so they know nobody else sees them. */
.backstage-banner {
  margin: 8px 8px 0;
  padding: 10px 14px;
  border-radius: 10px;
  /* On the panel's colours, which every look keeps readable (the stage is light in the standard light mode). */
  background: color-mix(in srgb, #f59e0b 22%, var(--panel));
  border: 1px solid #f59e0b;
  color: var(--text);
  font-size: 14px;
}

/* The hosts' backstage panel: who waits, and the backstage call's small pictures. */
.backstage-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.backstage-people li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.backstage-call {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}

.backstage-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--stage);
  display: grid;
  place-items: center;
}

.backstage-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.backstage-tile audio {
  display: none;
}

.backstage-name {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

/* A quiz question over the stage: big answer buttons, a countdown, then the right answer and the leaderboard. */
.quiz {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 16px;
  pointer-events: none;
}

.quiz-panel {
  pointer-events: auto;
  width: min(520px, 100%);
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  color: var(--text);
  box-shadow: 0 10px 40px rgb(0 0 0 / 35%);
}

.quiz-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.quiz-clock {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.quiz-close {
  padding: 2px 8px;
}

.quiz-panel h3 {
  margin: 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.quiz-answers {
  display: grid;
  /* Two columns that never grow past the panel: a long word wraps inside its answer. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quiz-answer {
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.quiz-answer.mine {
  outline: 3px solid var(--brand);
}

.quiz-answer.right {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.quiz-answer.wrong {
  background: color-mix(in srgb, var(--danger) 25%, var(--panel));
}

.quiz-verdict {
  margin: 0;
  font-weight: 600;
}

.quiz-board {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 4px;
}

.quiz-board li span {
  margin-right: 8px;
}

.quiz-board li.me {
  font-weight: 700;
}

.quiz-option-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiz-option-field input[type='radio'] {
  width: auto;
  flex: none;
}

@media (max-width: 760px) {
  .quiz-answers {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "How was it?" on the goodbye screen. */
.feedback-card {
  display: grid;
  gap: 10px;
}

.feedback-card h2 {
  margin: 0;
}

.stars {
  display: flex;
  gap: 4px;
}

.stars button {
  font-size: 30px;
  line-height: 1;
  padding: 2px 6px;
  background: none;
  border: none;
  color: var(--border);
  cursor: pointer;
}

.feedback-card .stars button,
.feedback-card .stars button.on {
  border: 0;
  box-shadow: none;
  background: none;
  outline-offset: 2px;
}

.stars button.on {
  color: #f59e0b;
}

.feedback-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

/* A certificate of attendance, handed out as the session ends. */
.certificate-card {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
}

.certificate-card[hidden] {
  display: none;
}

.certificate-card a.button,
.gift-dialog a.button,
.unlock-bar a.button,
.free-room a.button {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--brand-contrast);
  text-decoration: none;
  font-weight: 600;
}

/* The room locked: nobody new comes in. */
.badge.locked {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  color: inherit;
}

/* The watermark: the attendee's name, faint and tilted, over the stage; it never takes a click. */
.watermark {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  place-items: center;
}

.watermark[hidden] {
  display: none;
}

.watermark span {
  transform: rotate(-18deg);
  color: #fff;
  opacity: 0.13;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 0 2px #000;
  user-select: none;
}

/* The lobby: the person waiting sees only this; hosts see who waits at the top of People. */
.lobby-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
}

.lobby-screen[hidden] {
  display: none;
}

.lobby-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* The event page on the join page: the agenda and the speakers. */
.event-section h3 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-section ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
}

/* "Use a ready-made one" at the top of each live tool's form (ready-tools.js). */
.ready-pick {
  width: 100%;
  font-weight: 600;
}

/*
 * The Zoom look (Room.theme "zoom", set on <body> by app.js): Zoom's near-black greys, its blue, flat controls in a
 * bar at the bottom (mic and camera at the left, a red Leave at the right), plain tiles with the name at the bottom
 * left, and a green frame round whoever is speaking.
 */
body.theme-zoom,
body.theme-zoom .room {
  --brand: #0e72ed;
  --brand-contrast: #ffffff;
  --live: #e02828;
  --bg: #1a1a1a;
  --panel: #242424;
  --stage: #1a1a1a;
  --border: #333333;
  --text: #ffffff;
  --muted: #a6a6a6;
  color-scheme: dark;
  font-family: Lato, 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

body.theme-zoom .topbar {
  padding: 6px 14px;
  background: #1a1a1a;
  border-bottom: 0;
  font-size: 13px;
}

body.theme-zoom .room .tile {
  background: #2d2d2d;
  border-radius: 4px;
  box-shadow: none;
}

body.theme-zoom .tile.speaking {
  box-shadow: 0 0 0 3px #23d959;
}

body.theme-zoom .tile .speaking-label {
  display: none;
}

body.theme-zoom .tile .name {
  left: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  font-size: 12px;
}

body.theme-zoom .dock {
  padding: 6px 14px;
  background: #1a1a1a;
  border-top: 0;
}

body.theme-zoom .dock button {
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font-weight: 400;
  font-size: 13px;
}

body.theme-zoom .dock button:hover:not([disabled]) {
  background: #333333;
}

body.theme-zoom .dock button.primary {
  background: var(--brand);
}

/* Mute and Stop Video, as Zoom draws them: a large icon over a small label. */
body.theme-zoom .dock .header-devices button {
  display: inline-grid;
  justify-items: center;
  gap: 2px;
  min-width: 78px;
  padding: 6px 10px;
}

body.theme-zoom .dock .header-devices .device-icon {
  font-size: 22px;
  line-height: 1;
}

body.theme-zoom .dock .header-devices .device-label {
  font-size: 11px;
}

body.theme-zoom .dock .header-devices button.on {
  background: transparent;
}

body.theme-zoom .dock #leave {
  padding: 8px 18px;
  background: #e02828;
  color: #ffffff;
  font-weight: 700;
}

body.theme-zoom .dock #leave:hover {
  background: #c51f1f;
}

body.theme-zoom .room .tabs button.active {
  background: #333333;
}

body.theme-zoom .room input,
body.theme-zoom .room textarea,
body.theme-zoom .room select {
  background-color: #1a1a1a;
  border-color: #3a3a3a;
  border-radius: 8px;
}

/* Listed sessions as cards: the Live now / Coming up page, and "Coming up next" at the end of a session. */
.session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.session-card {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.session-card img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 12px;
  background: #111;
}

.session-card .when {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.session-card .when.live {
  color: #e11d48;
}

.coming-up {
  margin-top: 16px;
  max-width: 900px;
}

/* "Start a meeting now" on the home page, beside joining a room by its name. */
.instant-card {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

/* Invite-to-unlock, above the dock: progress, then the reward. */
.unlock-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--brand) 18%, var(--panel));
  border-top: 1px solid var(--border);
  font-weight: 600;
}

.unlock-bar[hidden] {
  display: none;
}

/* A presentation's first page, a video's frame: in the rooms page's lists and the room's pickers. */
.library-thumb {
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #111 center / 40% no-repeat;
  border: 1px solid var(--border);
}

.library-thumb.missing {
  visibility: hidden;
}


/* Invite-to-unlock's congratulations, with the gift's picture. */
.gift-dialog {
  text-align: center;
}

.gift-picture {
  display: block;
  max-width: 100%;
  max-height: 240px;
  margin: 0 auto 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* "Send all here": a host sends everyone's panel to the tab they have open; that tab is marked while it lasts. */
.tabs .focus-button {
  color: var(--muted);
  font-size: 12px;
}

.tabs .focus-button.on {
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 30%, transparent);
}

.tabs button.focused .tab-icon::after {
  content: '📣';
  font-size: 11px;
  margin-left: 2px;
}

/*
 * The arranged looks (computers only; phones keep their two pages): the same room, its side panel elsewhere.
 * Chat on the left: Classic mirrored, the tabs at the window's left edge.
 */
@media (min-width: 861px) {
  body.theme-left .layout {
    grid-template-columns: var(--sidebar, clamp(360px, 22vw, 420px)) minmax(0, 1fr);
  }

  body.theme-left .layout.panel-hidden {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  body.theme-left .layout > .stage-area {
    grid-column: 2;
    grid-row: 1;
  }

  body.theme-left .room .sidebar {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    border-right: 1px solid var(--border);
    grid-template-columns: 64px minmax(0, 1fr);
  }

  body.theme-left .room .sidebar > .tabs {
    grid-column: 1;
    border-left: 0;
    border-right: 1px solid var(--border);
  }

  body.theme-left .room .sidebar > .tab {
    grid-column: 2;
  }

  body.theme-left .room .tabs button {
    border-right: 0;
    border-left: 3px solid transparent;
  }

  body.theme-left .room .tabs button.active {
    border-left-color: var(--brand);
  }

  body.theme-left .sidebar-handle {
    display: none;
  }
}

/* A playing video's controls on the video itself, for the person playing it (the bar under the stage has them too). */
.tile-video-controls {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: rgb(0 0 0 / 60%);
  z-index: 2;
}

.tile-video-controls button {
  padding: 6px 10px;
  border: 0;
  background: rgb(255 255 255 / 14%);
  color: #fff;
}

/* Links that look like the buttons beside them: the owner's "My rooms" in the top bar, Invite someone's apps. */
.topbar a.button,
.invite-buttons a.button {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.invite-buttons a.button {
  background: var(--panel);
  color: var(--text);
}

.topbar a.button[hidden] {
  display: none;
}

/*
 * Computers: on the Chat tab, the message box and Send run under the tab column to the panel's edge (more room to
 * type): the chat tab spans both columns, its messages keep clear of the column, and the column stops above the box.
 */
@media (min-width: 861px) {
  .room .sidebar:has(> #tab-chat:not([hidden])) > #tab-chat {
    grid-column: 1 / -1;
  }

  .room .sidebar:has(> #tab-chat:not([hidden])) > .tabs {
    position: relative;
    z-index: 1;
    align-self: start;
    max-height: calc(100% - var(--chat-form-height, 70px));
    background: var(--panel);
  }

  .room .sidebar > #tab-chat > .chat-list,
  .room .sidebar > #tab-chat > .emoji-picker {
    margin-right: 64px;
  }

  body.theme-left .room .sidebar > #tab-chat > .chat-list,
  body.theme-left .room .sidebar > #tab-chat > .emoji-picker {
    margin-right: 0;
    margin-left: 64px;
  }
}

/* "Camera in corner": the presenter's camera small over the presentation's bottom right corner. */
.stage .main {
  position: relative;
}

.stage .main .tile.corner-camera {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: clamp(140px, 22%, 320px);
  height: auto;
  aspect-ratio: 16 / 9;
  z-index: 2;
  border: 2px solid var(--brand);
  box-shadow: 0 6px 24px rgb(0 0 0 / 45%);
}

.present-layout {
  display: inline-flex;
  gap: 4px;
}

.present-layout button.on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Drawing: the box to type a text into, where the presenter clicked. */
.ink-text {
  position: fixed;
  z-index: 50;
  transform: translateY(-50%);
  width: 240px;
  padding: 6px 8px;
  font: 600 18px system-ui, sans-serif;
  background: rgb(0 0 0 / 70%);
  border: 1px solid #fff;
  border-radius: 6px;
}

/* The join page's language picker, under the card. */
.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.language-picker select {
  width: auto;
  min-height: 34px;
  padding: 5px 32px 5px 10px;
}

/*
 * "Three columns" (computers): the chat's own column on the left, always open, the stage in the middle, the panel on
 * the right; each a rounded card on the room's background, as in Now Live's room.
 */
@media (min-width: 861px) {
  body.theme-columns .layout {
    grid-template-columns: clamp(260px, 22vw, 380px) minmax(0, 1fr) var(--sidebar, clamp(280px, 22vw, 400px));
    gap: 10px;
    padding: 10px;
  }

  body.theme-columns .layout.panel-hidden {
    grid-template-columns: clamp(260px, 22vw, 380px) minmax(0, 1fr) 0;
  }

  body.theme-columns .chat-column,
  body.theme-columns .layout > .stage-area,
  body.theme-columns .room .sidebar {
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    overflow: hidden;
  }

  body.theme-columns .chat-column {
    display: flex;
    flex-direction: column;
  }

  body.theme-columns .chat-column::before {
    content: '💬 Chat';
    padding: 12px 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
  }

  body.theme-columns .chat-column > .tab {
    flex: 1;
  }

  body.theme-columns .sidebar-handle {
    display: none;
  }
}

/*
 * Spotlight (Room.theme "spotlight"): the picture fills the window, like a cinema. The top bar lies over it on a
 * fading shade, the side panel floats on the right on frosted glass, the controls float in one bar at the bottom.
 * Phones keep their two pages, in these colours.
 */
body.theme-spotlight,
body.theme-spotlight .room {
  --bg: #050608;
  --panel: #14161c;
  --stage: #050608;
  --border: rgb(255 255 255 / 12%);
  --text: #f2f2f3;
  --muted: #b5b8bf;
  --control: rgb(255 255 255 / 10%);
  --control-hover: rgb(255 255 255 / 18%);
  --control-border: rgb(255 255 255 / 16%);
  --field: rgb(255 255 255 / 8%);
  color-scheme: dark;
}

@media (min-width: 861px) {
  body.theme-spotlight .room {
    position: relative;
  }

  body.theme-spotlight .room > .topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    background: linear-gradient(rgb(0 0 0 / 70%), transparent);
    border-bottom: 0;
  }

  body.theme-spotlight .layout {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  /* The picture, the offers and the bar keep left of the floating panel. */
  body.theme-spotlight .stage-area {
    padding-top: 56px;
    padding-right: calc(min(380px, 32vw) + 40px);
  }

  body.theme-spotlight .layout.panel-hidden .stage-area {
    padding-right: 0;
  }

  body.theme-spotlight .room .sidebar {
    position: absolute;
    top: 64px;
    right: 20px;
    bottom: 96px;
    width: min(380px, 32vw);
    z-index: 5;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgb(20 22 28 / 74%);
    backdrop-filter: blur(14px);
    overflow: hidden;
  }

  body.theme-spotlight .sidebar-handle {
    display: none;
  }

  /* The controls in one floating bar, centred under the picture. */
  body.theme-spotlight .dock {
    align-self: center;
    width: fit-content;
    max-width: calc(100% - 40px);
    margin: 6px 0 14px;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: rgb(20 22 28 / 80%);
    backdrop-filter: blur(14px);
  }

  /* Room for the column of reactions at the picture's right; each camera shown whole, never cropped. */
  body.theme-spotlight .stage {
    padding-right: 52px;
  }

  body.theme-spotlight .tile.camera video {
    object-fit: contain;
  }

  /* The reactions in a column at the picture's right edge, beside the panel: no bar of buttons can cover them. */
  body.theme-spotlight .reaction-bar {
    position: absolute;
    top: 50%;
    right: calc(min(380px, 32vw) + 44px);
    z-index: 5;
    flex-direction: column;
    transform: translateY(-50%);
    padding: 6px 4px;
    border-radius: 22px;
    background: rgb(20 22 28 / 70%);
    backdrop-filter: blur(14px);
  }

  body.theme-spotlight .layout.panel-hidden .reaction-bar {
    right: 16px;
  }
}

/*
 * Bright stage (Room.theme "bright"): light and airy, like an event's website. A white top bar with the title, the
 * stage in a frame of the brand colour, the side panel as a white card, soft borders everywhere.
 */
body.theme-bright,
body.theme-bright .room {
  --bg: #f4f1ec;
  --panel: #ffffff;
  --stage: #13151a;
  --border: #e7e2d9;
  --text: #1d1b18;
  --muted: #6b655b;
  --control: #ffffff;
  --control-hover: #f4f1ec;
  --control-border: #d9d2c5;
  --field: #ffffff;
  color-scheme: light;
}

body.theme-bright .room > .topbar {
  min-height: 64px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

body.theme-bright #room-name {
  font-size: 18px;
}

body.theme-bright .dock {
  background: transparent;
  border-top: 0;
}

@media (min-width: 861px) {
  body.theme-bright .layout {
    gap: 20px;
    padding: 18px 24px;
    background: var(--bg);
  }

  body.theme-bright .stage-area {
    background: transparent;
  }

  body.theme-bright .stage {
    margin: 6px;
    border-radius: 18px;
    background: var(--stage);
    box-shadow: 0 0 0 6px var(--brand);
    overflow: hidden;
  }

  body.theme-bright .room .sidebar {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
  }

  body.theme-bright .sidebar-handle {
    display: none;
  }
}

/* People's pictures (their profile): small and round beside their name in the chat and People, larger on a stage
   tile while their camera is off. */
.small-photo {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.tile .avatar.photo {
  width: min(40%, 160px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: none;
}

/* The owner's registration page on the room's link: the whole window (app.js showRegistrationPage). */
.registration-frame {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* The owner's thank-you page after signing up, under a bar that leads into the webinar (app.js showThankYouPage). */
.thank-you-page {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.thank-you-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #0b0d12;
  color: #fff;
}
.thank-you-page .registration-frame {
  position: static;
  flex: 1;
  height: auto;
}

/*
 * Five looks from Joel's mock-ups (Room.theme): "studio" (light; the panel on the left with its icons, the bar of
 * buttons white), "stacked" (light; the panel under the stage, its tabs across, a dark bar of buttons), "night" (dark;
 * the panel on the right, its tabs across, the bar of buttons floating), "clean" (light; the panel on the right, its
 * tabs across, a white bar) and "midnight" (dark; the panel on the left, its tabs across, the bar floating). All five
 * show the speaker large with the others in a row under them, round the stage and the panel, and put the chat in
 * bubbles. Their own colours; the brand colour is the room's.
 */
/*
 * The thin line icons of Joel's mock-ups in place of the emoji, on the five looks' bar, tabs, buttons and menus:
 * line-icons.woff2 draws each emoji the room uses there (🎤, 💬, ⏺…) as a Lucide icon (ISC licence), in the
 * text's colour. Made by scripts/line-icons.py; people's chat keeps its real emoji.
 */
@font-face {
  font-family: 'HC Line Icons';
  src: url('line-icons.woff2') format('woff2');
  font-display: block;
  unicode-range: U+200D,U+23E9,U+23EA,U+23F1,U+23F8,U+23F9,U+23FA,U+25A5,U+25A6,U+25B6,U+25E7,U+25E8,U+25F3,U+2705,U+270B,U+270F,U+2728,U+2753,U+2795,U+2B06,U+2B1B,U+FE0F,U+1F381,U+1F39F,U+1F3A4,U+1F3A8,U+1F3AC,U+1F3AD,U+1F3AF,U+1F3B5,U+1F3C6,U+1F3EB,U+1F465,U+1F4AC,U+1F4B8,U+1F4C1,U+1F4CA,U+1F4CE,U+1F4DC,U+1F4E1,U+1F4E3,U+1F4F7,U+1F4F8,U+1F507,U+1F512,U+1F517,U+1F528,U+1F534,U+1F58D,U+1F5A5,U+1F5C2,U+1F5D1,U+1F60A,U+1F64B,U+1F6AA,U+1F6CD,U+1F91D,U+1F9D1,U+1F9FD;
}

:is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight)
  :is(.topbar, .tabs, .dock, .menu-items, .emoji-button, .page-switch, .presenter-panel, .ink-bar) {
  font-family: 'HC Line Icons', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* The record dot in red, as in the mock-ups. */
:is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) #record::first-letter {
  color: #e5322d;
}

body.theme-studio,
body.theme-studio .room,
body.theme-stacked,
body.theme-stacked .room,
body.theme-clean,
body.theme-clean .room {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --stage: #111318;
  --border: #e3e5ea;
  --text: #16181d;
  --muted: #5f6672;
  --control: #ffffff;
  --control-hover: #f2f3f5;
  --control-border: #d6d9df;
  --field: #ffffff;
  color-scheme: light;
}

body.theme-night,
body.theme-night .room,
body.theme-midnight,
body.theme-midnight .room {
  --bg: #0f1013;
  --panel: #18191e;
  --stage: #0b0c0f;
  --border: rgb(255 255 255 / 10%);
  --text: #f3f4f6;
  --muted: #a7abb5;
  --control: rgb(255 255 255 / 8%);
  --control-hover: rgb(255 255 255 / 14%);
  --control-border: rgb(255 255 255 / 14%);
  --field: rgb(255 255 255 / 6%);
  color-scheme: dark;
}

:is(body.theme-studio, body.theme-stacked, body.theme-clean) .room > .topbar {
  min-height: 60px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

:is(body.theme-night, body.theme-midnight) .room > .topbar {
  min-height: 60px;
  background: #121317;
  border-bottom: 1px solid var(--border);
}

/* The chat in bubbles. */
:is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .chat-list p {
  display: inline-block;
  max-width: 100%;
  margin-top: 4px;
  padding: 7px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

@media (min-width: 861px) {
  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .layout {
    gap: 16px;
    padding: 16px;
    background: var(--bg);
  }

  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .stage-area {
    background: transparent;
  }

  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .stage {
    border-radius: 16px;
    background: transparent;
    padding: 0;
    gap: 10px;
  }

  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .sidebar {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
  }

  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .sidebar-handle {
    display: none;
  }

  /* The speaker large, the others in a row under them (also beside a presentation). */
  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .stage .grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: 140px;
  }

  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .stage .grid > .tile:first-child {
    grid-column: 1 / -1;
  }

  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .stage:has(> .strip) {
    flex-direction: column;
  }

  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .stage .strip {
    width: auto;
    height: 140px;
    flex-direction: row;
    overflow: auto hidden;
  }

  :is(body.theme-studio, body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .stage .strip .tile {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    min-height: 0;
  }

  /* The panel's tabs across its top, each an icon and its name (all but Studio, which keeps its column of icons). */
  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .sidebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .sidebar > .tabs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
    border-left: 0;
    border-bottom: 1px solid var(--border);
    padding: 4px 6px 0;
  }

  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .sidebar > .tab {
    grid-column: 1;
    grid-row: 2;
  }

  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .tabs button {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-right: 0;
    border-bottom: 2px solid transparent;
  }

  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .tabs button.active {
    border-bottom-color: var(--brand);
    background: transparent;
  }

  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .tabs .tab-icon {
    font-size: 16px;
  }

  /* The panel on the left (Studio, Midnight). */
  :is(body.theme-studio, body.theme-midnight) .layout {
    grid-template-columns: var(--sidebar, clamp(380px, 28vw, 560px)) minmax(0, 1fr);
  }

  :is(body.theme-studio, body.theme-midnight) .layout.panel-hidden {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  :is(body.theme-studio, body.theme-midnight) .layout > .stage-area {
    grid-column: 2;
    grid-row: 1;
  }

  :is(body.theme-studio, body.theme-midnight) .room .sidebar {
    grid-column: 1;
    grid-row: 1;
  }

  /* Studio: the column of icons at the panel's left edge, the active one tinted. */
  body.theme-studio .room .sidebar {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body.theme-studio .room .sidebar > .tabs {
    grid-column: 1;
    border-left: 0;
    border-right: 1px solid var(--border);
    padding: 8px 6px;
    gap: 4px;
  }

  body.theme-studio .room .sidebar > .tab {
    grid-column: 2;
  }

  /* The chat's messages keep clear of the icons, on the left (it spans under them for the message box). */
  body.theme-studio .room .sidebar > #tab-chat > .chat-list,
  body.theme-studio .room .sidebar > #tab-chat > .emoji-picker {
    margin-right: 0;
    margin-left: 72px;
  }

  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .sidebar > #tab-chat > .chat-list,
  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .sidebar > #tab-chat > .emoji-picker {
    margin-right: 0;
  }

  :is(body.theme-stacked, body.theme-night, body.theme-clean, body.theme-midnight) .room .sidebar:has(> #tab-chat:not([hidden])) > #tab-chat {
    grid-row: 2;
  }

  body.theme-studio .room .tabs button {
    border-right: 0;
    border-radius: 12px;
  }

  body.theme-studio .room .tabs button.active {
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--brand);
  }

  /* Stacked: the panel under the stage, across the window. */
  body.theme-stacked .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) clamp(220px, 32vh, 340px);
  }

  body.theme-stacked .layout.panel-hidden {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 0;
  }

  body.theme-stacked .layout > .stage-area {
    grid-column: 1;
    grid-row: 1;
  }

  body.theme-stacked .room .sidebar {
    grid-column: 1;
    grid-row: 2;
  }

  body.theme-stacked .room .tabs button {
    flex: 0 0 auto;
  }
}

/* The bars of buttons: white (Studio, Clean), dark (Stacked), floating and round (Night, Midnight). */
:is(body.theme-studio, body.theme-clean) .dock {
  background: #ffffff;
  border-top: 1px solid var(--border);
}

body.theme-stacked .dock {
  --control: #2b2f37;
  --control-hover: #363b45;
  --control-border: #3c424d;
  --text: #f3f4f6;
  background: #1c1f25;
  border-top: 0;
  color: var(--text);
}

/* Its menus open as the room's light cards. */
body.theme-stacked .dock .menu-items {
  --control: #ffffff;
  --control-hover: #f2f3f5;
  --control-border: #d6d9df;
  --text: #16181d;
  color: var(--text);
}

@media (min-width: 861px) {
  :is(body.theme-night, body.theme-midnight) .dock {
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 12px auto 4px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: 0 12px 30px -12px rgb(0 0 0 / 60%);
  }
}

/*
 * ---------- The standard look (Claude Design's "HotConference room"), light and dark ----------
 * Every room without colours of its own (Classic, Left, Three columns) takes it: body.theme-standard, with
 * body.mode-dark for dark (theme.js: the person's choice, else their computer's). The same layout as before; its
 * colours, type (Manrope), line icons, buttons and cards from the design. The owner's background colour, in the mode it
 * suits, replaces the base colours inline (theme.js); the shades below are mixed from them and from the brand colour.
 */
@font-face {
  font-family: 'Manrope';
  src: url('manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  src: url('manrope-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  src: url('manrope-cyrillic.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

body.theme-standard,
body.theme-standard .room {
  --bg: #f3f4f6;
  --panel: #ffffff;
  --stage: #f3f4f6;
  --border: #e2e5ea;
  --text: #14171c;
  --muted: #5a606b;
  --control: #ffffff;
  --control-hover: #eceef2;
  --control-border: #c5cad3;
  --field: #ffffff;
  --live: #d92d20;
  --danger: #d92d20;
  --danger-soft: #fdecea;
  --danger-ink: #b42318;
  --danger-line: #f4c3be;
  --warning-soft: #fef2d9;
  --warning-ink: #96530a;
  --shadow: 0 1px 2px rgb(16 20 28 / 6%), 0 4px 14px rgb(16 20 28 / 6%);
  --shadow-lg: 0 2px 6px rgb(16 20 28 / 8%), 0 16px 40px rgb(16 20 28 / 16%);
  --raised: var(--panel);
  --accent-bright: color-mix(in srgb, var(--brand) 88%, var(--text));
  color-scheme: light;
}

body.theme-standard.mode-dark,
body.theme-standard.mode-dark .room {
  --bg: #0e1014;
  --panel: #171a20;
  --stage: #0e1014;
  --border: #2a2f38;
  --text: #ecedf1;
  --muted: #a2a8b4;
  --control: #1f232b;
  --control-hover: #2c313b;
  --control-border: #404754;
  --field: #111318;
  --danger-soft: #3a1c1e;
  --danger-ink: #ff9c94;
  --danger-line: #5e2b2e;
  --warning-soft: #3a2d10;
  --warning-ink: #f5c463;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 28%);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 45%), 0 18px 48px rgb(0 0 0 / 60%);
  /* Menus, toasts and dialogs lighter than the panel, so they stand out. */
  --raised: color-mix(in srgb, var(--text) 8%, var(--panel));
  --accent-bright: color-mix(in srgb, var(--brand) 72%, var(--text));
  color-scheme: dark;
}

body.theme-standard,
body.theme-standard .room {
  --surface-2: color-mix(in srgb, var(--text) 5%, var(--panel));
  --tile: color-mix(in srgb, var(--text) 10%, var(--bg));
  --accent-fill: color-mix(in srgb, var(--brand) 80%, #000);
  --accent-fill-hover: color-mix(in srgb, var(--brand) 70%, #000);
  --accent-soft: color-mix(in srgb, var(--brand) 13%, var(--panel));
  --accent-soft-hover: color-mix(in srgb, var(--brand) 20%, var(--panel));
  --accent-line: color-mix(in srgb, var(--brand) 42%, var(--panel));
  --accent-ink: color-mix(in srgb, var(--brand) 58%, var(--text));
  --accent-ring: color-mix(in srgb, var(--brand) 40%, transparent);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/*
 * The design's own icons in place of the emoji on the bar, tabs, buttons and menus (people's chat keeps its real emoji):
 * design-icons.woff2, made by scripts/design-icons.py from the design's drawings (Lucide's, ISC licence, for the few
 * it has none of), lines as thin as the design's. Leave and Send get the design's door and paper plane.
 */
@font-face {
  font-family: 'HC Design Icons';
  src: url('design-icons.woff2') format('woff2');
  font-display: block;
  unicode-range: U+200D,U+2197,U+21BA,U+23E9,U+23EA,U+23F1,U+23F3,U+23F8,U+23F9,U+23FA,U+25A5,U+25A6,U+25B2,U+25B6,U+25BE,U+25E7,U+25E8,U+25F3,U+2605,U+2702,U+2705,U+2709,U+270B,U+270F,U+2713,U+2715,U+2728,U+2753,U+2795,U+2B06,U+2B1B,U+E000,U+E001,U+E002,U+FE0F,U+1F31F,U+1F381,U+1F393,U+1F399,U+1F39F,U+1F3A4,U+1F3A8,U+1F3AC,U+1F3AD,U+1F3AF,U+1F3B5,U+1F3C6,U+1F3E0,U+1F3EB,U+1F440,U+1F441,U+1F465,U+1F4AC,U+1F4B8,U+1F4C1,U+1F4C4,U+1F4C5,U+1F4C8,U+1F4CA,U+1F4CB,U+1F4CE,U+1F4DC,U+1F4DD,U+1F4E1,U+1F4E3,U+1F4E5,U+1F4E8,U+1F4F7,U+1F4F8,U+1F4FD,U+1F501,U+1F507,U+1F511,U+1F512,U+1F517,U+1F528,U+1F534,U+1F58D,U+1F5A5,U+1F5BC,U+1F5C2,U+1F5D1,U+1F60A,U+1F64B,U+1F680,U+1F6AA,U+1F6CD,U+1F6E1,U+1F91D,U+1F9D1,U+1F9E9,U+1F9FD;
}

body.theme-standard :is(.topbar, .tabs, .dock, .menu-items, .emoji-button, .page-switch, .presenter-panel, .ink-bar, .chat-form button, .add-to-calendar summary) {
  font-family: 'HC Design Icons', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body.theme-standard .room #leave::before {
  content: '\e000';
  margin-right: 7px;
}

body.theme-standard .room #chat-form button[type='submit']::before {
  content: '\e001';
  margin-right: 7px;
}

/* The camera crossed out while it is off, as the mic is (its button keeps its 📷 for the other looks). */
body.theme-standard .room #camera:not(.on) .device-icon {
  font-size: 0;
}

body.theme-standard .room #camera:not(.on) .device-icon::after {
  content: '\e002';
  font-size: 13.5px;
}

@media (max-width: 760px) {
  body.theme-standard .room #camera:not(.on) .device-icon::after {
    font-size: 18px;
  }
}

/* The record dot in red, as in the design. */
body.theme-standard .room #record::first-letter {
  color: var(--live);
}

body.theme-standard :focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* The top bar: white (or the dark panel), a thin line under it, red LIVE and a REC with its red dot. */
body.theme-standard .room > .topbar {
  min-height: 60px;
  padding: 10px 16px;
  background: var(--panel);
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

body.theme-standard .room .topbar .title strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

body.theme-standard .room .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
}

body.theme-standard .room .badge.live {
  background: var(--live);
  box-shadow: none;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.05em;
}

body.theme-standard .room .badge.live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

body.theme-standard .room .badge.rec {
  font-weight: 800;
  letter-spacing: 0.05em;
}

body.theme-standard .room .badge.rec::first-letter {
  color: var(--live);
}

body.theme-standard .room #me-role {
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--accent-ink);
  border-radius: 999px;
}

/* Buttons: white with a thin edge, the active ones tinted in the brand colour, the main one filled with it. */
body.theme-standard .room :is(.dock, .header-devices, .chat-form, .tab, .waiting-card) button,
body.theme-standard .room .topbar :is(button, a.button),
body.theme-standard :is(.dialog, .devices-card) button {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-border);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

body.theme-standard .room :is(.dock, .header-devices, .chat-form, .tab, .waiting-card) button:hover:not([disabled]),
body.theme-standard .room .topbar :is(button, a.button):hover,
body.theme-standard :is(.dialog, .devices-card) button:hover:not([disabled]) {
  background: var(--control-hover);
  filter: none;
}

body.theme-standard .room .topbar :is(button.ghost, a.button.ghost) {
  background: transparent;
  box-shadow: none;
}

body.theme-standard .room .topbar :is(button.ghost, a.button.ghost):hover {
  background: var(--control-hover);
}

body.theme-standard .room :is(.dock, .header-devices, .tab) button.on {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-ink);
}

body.theme-standard .room :is(.dock, .header-devices, .tab) button.on:hover:not([disabled]) {
  background: var(--accent-soft-hover);
}

body.theme-standard .room button.primary,
body.theme-standard .room a.button.primary,
body.theme-standard :is(.dialog, .devices-card) button.primary {
  background: var(--accent-fill);
  box-shadow: none;
  color: #fff;
}

body.theme-standard .room button.primary:hover:not([disabled]),
body.theme-standard :is(.dialog, .devices-card) button.primary:hover:not([disabled]) {
  background: var(--accent-fill-hover);
}

body.theme-standard .room #leave,
body.theme-standard .room button.danger,
body.theme-standard :is(.dialog, .devices-card) button.danger {
  background: var(--danger);
  box-shadow: none;
  color: #fff;
}

body.theme-standard .room #leave:hover,
body.theme-standard .room button.danger:hover:not([disabled]) {
  background: color-mix(in srgb, var(--danger) 82%, #000);
}

body.theme-standard .room button:disabled {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: color-mix(in srgb, var(--muted) 70%, var(--panel));
}

/* The light/dark switch: a pill with the sun and the moon, the knob under the one in use. */
.mode-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 68px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2, var(--control));
  box-shadow: inset 0 0 0 1px var(--border);
}

body.theme-standard .room .topbar button.mode-switch {
  width: 68px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

.mode-switch[hidden] {
  display: none;
}

.mode-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--raised, var(--panel));
  box-shadow: var(--shadow);
  transition: left 0.15s;
}

.mode-switch[aria-checked='true'] .mode-knob {
  left: 35px;
}

.mode-switch svg {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 9px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mode-switch[aria-checked='false'] .mode-sun,
.mode-switch[aria-checked='true'] .mode-moon {
  stroke: var(--accent-ink, var(--text));
}

/* Mic and camera off: soft red, as in the design. */
body.theme-standard .room .header-devices button:not(.on) {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1px var(--danger-line);
  color: var(--danger-ink);
}

/* The stage: the videos as rounded tiles on the page's grey, the speaker ringed in the brand colour. */
body.theme-standard .room .tile {
  background: var(--tile);
  border-radius: 12px;
  box-shadow: none;
}

body.theme-standard .room .tile.speaking {
  box-shadow: 0 0 0 2px var(--accent-bright);
}

body.theme-standard .room .tile .name {
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgb(12 14 18 / 76%);
  font-size: 13px;
  font-weight: 600;
}

body.theme-standard .room .tile .speaking-label {
  background: var(--accent-fill);
  color: #fff;
}

/* The side panel: tabs in grey, the open one in the brand colour; the chat in clear type. */
body.theme-standard .room .tabs button {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

body.theme-standard .room .tabs button:hover {
  color: var(--text);
  filter: none;
}

body.theme-standard .room .tabs button.active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: var(--accent-bright);
}

body.theme-standard .room .tabs .tab-icon {
  font-size: 15px;
}

body.theme-standard .room .tabs :is(.unread-count, .count) {
  border-radius: 999px;
}

body.theme-standard .room .chat-list {
  padding: 14px 14px 10px;
  gap: 14px;
}

body.theme-standard .room .chat-list .who {
  font-size: 13.5px;
  font-weight: 700;
}

body.theme-standard .room .chat-list p {
  font-size: 14px;
  line-height: 1.45;
}

body.theme-standard .room .chat-form {
  padding: 12px;
}

body.theme-standard .room :is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select),
body.theme-standard :is(.dialog, .devices-card, .soundboard) :is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select) {
  border: 0;
  border-radius: 8px;
  background-color: var(--field);
  box-shadow: inset 0 0 0 1px var(--control-border);
  color: var(--text);
}

body.theme-standard .room :is(input, textarea, select):focus-visible,
body.theme-standard :is(.dialog, .devices-card, .soundboard) :is(input, textarea, select):focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent-bright), 0 0 0 3px var(--accent-ring);
}

body.theme-standard .room :is(input, textarea)::placeholder {
  color: var(--muted);
}

body.theme-standard input:is([type='checkbox'], [type='radio']) {
  accent-color: var(--accent-fill);
}

body.theme-standard .person {
  min-height: 48px;
  margin: 0 6px;
  padding: 6px 8px;
  border-radius: 8px;
}

body.theme-standard .person:hover {
  background: var(--control-hover);
}

body.theme-standard .question-item {
  border: 0;
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-2);
}

body.theme-standard .question-item.on-screen {
  box-shadow: inset 0 0 0 1px var(--accent-line);
  background: var(--accent-soft);
}

body.theme-standard .question-item .vote.on {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

body.theme-standard .poll-option .bar {
  background: var(--accent-fill);
  opacity: 0.22;
}

body.theme-standard .poll-option.mine {
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* Menus, the right-click menu, toasts and dialogs: raised cards with a soft shadow. */
body.theme-standard .menu-items,
body.theme-standard .context-menu {
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: var(--shadow-lg);
}

body.theme-standard .menu-items {
  min-width: 300px;
}

body.theme-standard .room .dock .menu-items button,
body.theme-standard .context-menu button {
  min-height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
}

body.theme-standard .room .dock .menu-items button:hover:not([disabled]),
body.theme-standard .context-menu button:hover {
  background: var(--control-hover);
}

body.theme-standard .toast {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
}

body.theme-standard :is(.dialog, .devices-card, .soundboard) {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

body.theme-standard .dialog h2 {
  font-size: 19px;
  font-weight: 800;
}

body.theme-standard .dialog::backdrop {
  background: rgb(20 23 30 / 40%);
  backdrop-filter: blur(2px);
}

body.theme-standard.mode-dark .dialog::backdrop {
  background: rgb(0 0 0 / 56%);
}

/* Before the start: the room's card with its title and a large countdown (over the owner's video, the small one stays). */
body.theme-standard .room .waiting-room {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

body.theme-standard .room .waiting-card:not(.compact) {
  background: transparent;
  backdrop-filter: none;
  color: var(--text);
}

/* The design's card: the logo, the room's title, when it starts, the time left in boxes (or "waiting for the host"). */
body.theme-standard .room .waiting-card:not(.compact) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px;
}

body.theme-standard .room .waiting-card:not(.compact) > h2:not(.waiting-title) {
  display: none;
}

/* After End live: "The session has ended" under the room's title. */
body.theme-standard .room .waiting-card.ended:not(.compact) > h2:not(.waiting-title) {
  display: block;
}

body.theme-standard .room .waiting-card:not(.compact) .waiting-logo:not([hidden]) {
  display: block;
  max-width: 180px;
  max-height: 64px;
  margin-bottom: 6px;
  object-fit: contain;
}

body.theme-standard .room .waiting-card:not(.compact) .waiting-title {
  display: block;
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.theme-standard .room .waiting-card:not(.compact) p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

body.theme-standard .room .waiting-card:not(.compact) :is(.waiting-message, .waiting-when):not([hidden]) {
  display: block;
  font-size: 15px;
}

body.theme-standard .room .waiting-card:not(.compact) .countdown-boxes:not([hidden]) {
  display: flex;
  gap: 12px;
  margin: 14px 0 4px;
}

/* The boxes in place of the line that says the same; the line again once the time is up ("Starting any moment now"). */
body.theme-standard .room .waiting-card:not(.compact) .countdown-boxes:not([hidden]) + .countdown {
  display: none;
}

body.theme-standard .room .waiting-card:not(.compact) .countdown {
  color: var(--accent-ink);
  font-size: 22px;
  font-weight: 800;
}

body.theme-standard .room .waiting-card .cd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 104px;
  padding: 16px 0 12px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

body.theme-standard .room .waiting-card .cd-num {
  color: var(--text);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

body.theme-standard .room .waiting-card .cd:nth-last-child(2) .cd-num {
  color: var(--accent-ink);
}

body.theme-standard .room .waiting-card .cd-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

body.theme-standard .room .waiting-card:not(.compact) .waiting-host:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
}

/* A slow pulse: the room is alive, the host is on the way. */
body.theme-standard .room .waiting-card .waiting-host::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: waiting-pulse 1.6s ease-in-out infinite;
}

@keyframes waiting-pulse {
  50% {
    opacity: 0.3;
  }
}

body.theme-standard .room .waiting-card .add-to-calendar summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-border);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

/*
 * On computers: the stage, the bar of buttons and the panel as cards on the page's grey, with space between them
 * (the panel stays where it was, the same width, still resizable).
 */
@media (min-width: 861px) {
  body.theme-standard .layout {
    gap: 12px;
    padding: 12px;
    background: var(--bg);
  }

  body.theme-standard .stage-area {
    gap: 12px;
    background: transparent;
  }

  body.theme-standard .room .stage {
    padding: 0;
    gap: 10px;
    background: transparent;
  }

  body.theme-standard .room .sidebar {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  body.theme-standard .dock {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow);
  }
}

@media (min-width: 861px) {
  /* Inside the rounded panel, so the card does not cut it. */
  body.theme-standard .sidebar-handle {
    left: 0;
  }
}

/* People: its lines in from the panel's edge, as its rows; the names in the design's size. */
body.theme-standard #tab-people :is(.hint, .countries, .banned, .attribution),
body.theme-standard #people h3 {
  margin-left: 14px;
  margin-right: 14px;
}

body.theme-standard .person .person-name {
  font-size: 14px;
  font-weight: 600;
}

/* Files: its button and list in from the panel's edge too. */
body.theme-standard #tab-files > :is(.stack, .file-list) {
  margin: 12px 12px 0;
}

/* The standard look's initials and role badges in the chat and People (app.js): not in the other looks. */
.chat-list .initials,
.person .initials,
.person .role-pill {
  display: none;
}

body.theme-standard,
body.theme-standard .room {
  --av1-bg: #dce7f8;
  --av1-fg: #1e3a66;
  --av2-bg: #ddf0e6;
  --av2-fg: #1b4d33;
  --av3-bg: #f6e3d6;
  --av3-fg: #6b3416;
  --av4-bg: #ebe1f6;
  --av4-fg: #4b2a6e;
}

body.theme-standard.mode-dark,
body.theme-standard.mode-dark .room {
  --av1-bg: #24364f;
  --av1-fg: #c7daf5;
  --av2-bg: #1f3a2c;
  --av2-fg: #bde8cf;
  --av3-bg: #452e22;
  --av3-fg: #f3d3bf;
  --av4-bg: #36294a;
  --av4-fg: #e2d0f5;
}

body.theme-standard :is(.chat-list, .person) .initials {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 11.5px;
  font-weight: 800;
}

body.theme-standard .initials.av1 { background: var(--av1-bg); color: var(--av1-fg); }
body.theme-standard .initials.av2 { background: var(--av2-bg); color: var(--av2-fg); }
body.theme-standard .initials.av3 { background: var(--av3-bg); color: var(--av3-fg); }
body.theme-standard .initials.av4 { background: var(--av4-bg); color: var(--av4-fg); }

/* The photo moves to the circle. */
body.theme-standard :is(.chat-list .who, .person .person-name) .small-photo {
  display: none;
}

/* A message: the circle on the left, the name and time, the text under them. */
body.theme-standard .room .chat-list li {
  position: relative;
  min-height: 32px;
  padding-left: 42px;
}

body.theme-standard .room .chat-list li > .initials {
  position: absolute;
  top: 0;
  left: 0;
}

body.theme-standard .room .chat-list time {
  font-size: 12px;
}

body.theme-standard .person {
  gap: 10px;
}

body.theme-standard .person .role-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

body.theme-standard .person .role-pill.moderator {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

body.theme-standard .person .role-pill.speaker {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
}

/* Q&A: the vote as a box on the left, its chevron over the count; answered ones in green. */
body.theme-standard .question-item {
  position: relative;
  min-height: 78px;
  padding-left: 70px;
}

body.theme-standard .question-item .vote {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 46px;
  min-height: 54px;
  padding: 4px 0;
  border: 0;
  border-radius: 8px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-border);
  color: var(--text);
  font-family: 'HC Design Icons', 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  /* "▲ 12" on two lines: the space as wide as the box. */
  word-spacing: 46px;
}

body.theme-standard .question-item .meta strong {
  color: var(--text);
  font-size: 13.5px;
}

body.theme-standard .question-item.answered {
  opacity: 1;
}

body.theme-standard .question-item.answered .text {
  color: var(--muted);
}

body.theme-standard .question-item .meta span:not(:empty) {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
}

body.theme-standard .question-item.answered .meta span:not(:empty) {
  background: color-mix(in srgb, #16a34a 14%, var(--panel));
  color: color-mix(in srgb, #16a34a 55%, var(--text));
}

/* Poll: each answer, its share on the right, over a rounded bar (the one you chose filled with the brand colour). */
body.theme-standard .poll-view h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

body.theme-standard .room .tab .poll-option {
  display: grid;
  gap: 6px;
  min-height: 0;
  margin-bottom: 14px;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

body.theme-standard .room .tab .poll-option:hover:not([disabled]) {
  background: none;
}

body.theme-standard .poll-option::before {
  content: '';
  grid-row: 2;
  grid-column: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
}

body.theme-standard .poll-option .bar {
  position: static;
  grid-row: 2;
  grid-column: 1;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 34%, var(--surface-2));
  opacity: 1;
}

body.theme-standard .poll-option.mine .bar {
  background: var(--accent-fill);
}

body.theme-standard .poll-option .label {
  grid-row: 1;
  font-size: 14px;
  font-weight: 600;
}

body.theme-standard .poll-option .label span:last-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The host's buttons under a question: small, as the design's smaller buttons. */
body.theme-standard .room .tab .question-item .actions button:not(.vote) {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

body.theme-standard .poll-view .hint {
  margin: 0 0 12px;
}

/* A raised hand in People, for hosts: one click invites them to the mic. */
.invite-to-mic {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* A phone's top bar fits the host's buttons, the light and dark switch included: "My rooms" a little narrower. */
@media (max-width: 600px) {
  .room .topbar #my-rooms {
    padding-inline: 8px;
  }
}

/* Phones: the switch as one round button with the mode in use, and Leave without its icon, so the top bar fits. */
@media (max-width: 860px) {
  body.theme-standard .room .topbar button.mode-switch {
    justify-content: center;
    width: 36px;
  }

  body.theme-standard .mode-switch .mode-knob,
  body.theme-standard .mode-switch[aria-checked='false'] .mode-moon,
  body.theme-standard .mode-switch[aria-checked='true'] .mode-sun {
    display: none;
  }

  body.theme-standard .room #leave::before {
    content: none;
  }
}

/* The standard look keeps the invite-to-the-mic button small, a pill, as it is in the other looks. */
body.theme-standard .room .tab button.invite-to-mic {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

/*
 * The bars over and under the stage (a timer, a question on screen, an offer, a coupon...). Their buttons take the
 * bar's own text colour: they took the room's, dark in the light look, and vanished on the dark bars. The timer and the
 * question on screen are the design's cards: the panel's colour, rounded, the clock in the brand colour.
 */
body.theme-standard .overlay button.ghost {
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  box-shadow: none;
}

body.theme-standard .overlays {
  gap: 8px;
}

body.theme-standard .overlay {
  border-radius: 12px;
}

body.theme-standard .overlay:is(.timer, .question) {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

body.theme-standard .overlay.timer .clock {
  color: var(--accent-ink);
}

body.theme-standard .overlay.question .asker {
  color: var(--accent-ink);
}

body.theme-standard .overlay :is(.timer, .question) > span:first-child,
body.theme-standard .overlay.timer > span:first-child {
  font-family: 'HC Design Icons', 'Manrope', system-ui, sans-serif;
}