: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;
}

/* The videos to choose from (manage.js videoChoice): cards with their picture, title and description, in a row. */
.video-picker {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}

.video-pick {
  position: relative;
  flex: none;
  width: 176px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
}

.video-pick:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent);
}

.video-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.video-pick:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.video-pick-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  background: #1f242c;
}

.video-pick-picture {
  position: relative;
  display: block;
}

/* ▶ over a video card's picture: watch it in a larger window (room-library-editor.js watchVideo). */
.video-picker .video-pick-play {
  position: absolute;
  padding: 0;
  min-width: 0;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgb(0 0 0 / 62%);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.video-picker .video-pick-play:hover,
.video-picker .video-pick-play:focus-visible {
  background: var(--brand);
}

.watch-dialog {
  width: min(960px, calc(100% - 32px));
}

.watch-dialog video {
  width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  background: #000;
}

.video-pick-thumb.none {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgb(127 127 127 / 12%);
}

.video-pick strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Record a video (record-video.js): the camera's picture, then the recording to watch back. */
.record-dialog {
  width: min(720px, calc(100% - 32px));
}

.record-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.record-screen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.record-preview {
  transform: scaleX(-1);
}

.record-time {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / 60%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.record-time.on {
  background: #d7262b;
}

.record-naming {
  margin-top: 12px;
}

.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;
}

/* Beside the slides, a camera in its picture's shape (live.js): a wide one may be lower than a tile's usual least. */
.stage .strip .tile {
  min-height: 0;
}

.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;
}

/* Lifted off the page: rounded, a soft shadow under it and a faint light edge (stronger on the dark stage). */
.tile {
  position: relative;
  background: #1f242c;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgb(15 23 42 / 35%),
    0 3px 10px rgb(15 23 42 / 23%),
    inset 0 0 0 1px rgb(255 255 255 / 8%);
  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;
}

/* On a computer, each person on stage in the shape of their picture, in rows, centred (live.js sizes each tile). */
.stage .grid.landscape {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.stage .grid.landscape > .tile {
  flex: none;
}

.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;
}

/*
 * A camera fills its box, with no black bars. Enlarged, its box takes the camera's shape (--camera, live.js); on a
 * computer or a tablet the grid does too (landscape()), and beside slides the strip. Where a box keeps its own shape (a
 * phone's stage, filled), what is cut is the sides or the top, never the face.
 */
.tile.camera video {
  object-fit: cover;
  object-position: 50% 30%;
}

.stage .main:has(> .tile.camera:not(.corner-camera)[style*='--camera']) {
  container-type: size;
}

.stage .main > .tile.camera:not(.corner-camera)[style*='--camera'] {
  width: min(100cqw, 100cqh * var(--camera-ratio));
  height: auto;
  aspect-ratio: var(--camera);
}

/*
 * On the stage, the picture takes the tile's own box: its height from the tile, not from its width. Sized by the grid
 * row, a 16:9 slide grew taller than a stage made short by the presenter's bar, and the tile cut its top and bottom.
 */
.stage .main .tile video {
  position: absolute;
  inset: 0;
}

.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;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Like Zoom: a muted person's microphone crossed out, in red, before their name (live.js markMuted). */
.tile .name .mic-off {
  font-family: 'HC Design Icons', 'Manrope', system-ui, sans-serif;
  color: #ff5a5f;
  font-size: 12px;
  line-height: 1;
}

/* "Nobody is on stage yet": in the room's own text colours, readable on a light stage as on a dark one. */
.waiting {
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.waiting h2 {
  margin: 0 0 6px;
  color: var(--text);
}

.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;
}

/* Phones: the stream's box exactly the stream's shape (16:9), no black bands of its own around it. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .stage:has(> .player) {
    flex-direction: column;
    justify-content: center;
  }

  .stage > .player {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
  }

  /* The stream's own margin of the room's dark colour around the people (stream.html) reads as a black ridge on a
     phone: the picture a little larger, its edges cut. */
  .stage > .player video {
    transform: scale(1.06);
  }
}

.player .unmute,
.stage > .unmute {
  position: absolute;
  z-index: 2;
  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;
}

/* Over the stream until its picture moves: "We're going live in a moment…", or "Reconnecting…" (watch.js). */
.stream-starting {
  position: absolute;
  inset: 0;
  /* Under the player's buttons (sound, full screen), over the picture. */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--brand, #2563eb) 45%, #000), #000 75%);
}

.stream-starting[hidden] {
  display: none;
}

.stream-starting .spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgb(255 255 255 / 30%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: stream-spin 0.9s linear infinite;
}

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

.player .live-badge {
  position: absolute;
  z-index: 2;
  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;
  z-index: 2;
  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;
}

/* An offer at its next price (its spots gone): the price it was, struck through. */
.overlay .price-was {
  text-decoration: line-through;
  opacity: 0.7;
}

.pin-row .price-after {
  width: 6em;
}

.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);
}

/* In the side panel, just above the chat's message box: one row across the panel, in the panel's own colours. */
.reaction-bar.in-panel {
  justify-content: flex-start;
  gap: 2px;
  padding: 4px 10px 0;
  border-top: 1px solid var(--border);
  background: transparent;
}

.reaction-bar.in-panel + .chat-form {
  border-top: 0;
  padding-top: 4px;
}

/* Plain emoji, not the looks' bordered buttons of the tabs. */
.room :is(.tab, .sidebar) > .reaction-bar.in-panel button {
  border: 0;
  box-shadow: none;
  background: transparent;
  font-size: 20px;
  padding: 4px 6px;
}

.room :is(.tab, .sidebar) > .reaction-bar.in-panel button:hover:not([disabled]) {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.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 .captions-note {
  color: #bbb;
  font-size: 15px;
}

#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;
}

#present-float,
#video-float {
  padding: 4px 8px;
}

:is(#present-float, #video-float).on {
  background: rgb(255 255 255 / 16%);
}

/* On a phone, the bars stay under the stage: no mouse to bring them back. */
#present-float,
#video-float {
  display: none;
}

/*
 * On a computer: the presenter's bar floats over the bottom of the stage, so the slide keeps the room the bar took,
 * and fades while the mouse is still (presenter-bar.js; --stage-below is the room under the stage). The reactions are a
 * column at the stage's right edge, where a slide leaves its side bars, not a row of their own.
 */
@media (min-width: 861px) and (min-height: 501px) {
  #present-float,
  #video-float {
    display: inline-block;
  }

  /* A video from a link, floating: its controls on the bar's one line, the seek bar a fixed width, no title. */
  #video-bar.afloat #video-label {
    display: none;
  }

  #video-bar.afloat #youtube-controls:not([hidden]) {
    flex: 0 1 auto;
  }

  #video-bar.afloat #youtube-seek {
    flex: 0 1 180px;
  }

  /* In the same order as the presenter's bar: the controls, then Stop and 📌. */
  #video-bar.afloat :is(#video-stop, #video-float) {
    order: 2;
  }

  :is(#presenter-panel, #video-bar).afloat {
    position: absolute;
    left: 50%;
    bottom: calc(var(--stage-below, 0px) + 18px);
    z-index: 8;
    width: max-content;
    max-width: calc(100% - 140px);
    transform: translateX(-50%);
    gap: 6px;
    padding: 6px 8px;
    border-radius: 14px;
    background: rgb(20 22 28 / 82%);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
    transition: opacity 0.4s ease;
  }

  /* Faded, still there: reaching for it moves the mouse, which brings it back before the click. */
  :is(#presenter-panel, #video-bar).afloat.idle {
    opacity: 0;
  }

  /* While drawing it stays in sight, over the drawing surface: "Done drawing" is on it. */
  .stage-area:has(#ink-surface:not([hidden])) :is(#presenter-panel, #video-bar).afloat.idle {
    opacity: 1;
  }

  :is(#presenter-panel, #video-bar).afloat :is(button, #slide-page, #presenter-label) {
    font-size: 13px;
  }

  :is(#presenter-panel, #video-bar).afloat button {
    padding: 5px 9px;
  }

  /* One line: what is presented is known to the presenter, and the layouts are their icons (their names on hover). */
  :is(#presenter-panel, #video-bar).afloat {
    flex-wrap: nowrap;
  }

  :is(#presenter-panel, #video-bar).afloat :is(#presenter-label, .layout-words) {
    display: none;
  }

  /* A played video's own controls on its tile: the floating bar, on the video too, has them (and would cover them). */
  .stage-area:has(#presenter-panel.afloat:not([hidden])) .tile-video-controls {
    display: none;
  }

  /* "… is presenting (you)" under the presenter's own floating bar: they know, and the bar needs the room. */
  .stage-area:has(#presenter-panel.afloat:not([hidden])) .stage .main .tile.screen.local > .name {
    display: none;
  }

  /* Beside the stage, not over it: a slide or a camera is never covered (Spotlight has its own column). */
  body:not(.theme-spotlight) .stage-area:has(> .reaction-bar) > .stage {
    margin-right: 54px;
  }

  .stage-area > .reaction-bar {
    position: absolute;
    top: var(--stage-middle, 50%);
    right: 2px;
    z-index: 5;
    flex-direction: column;
    transform: translateY(-50%);
    padding: 6px 4px;
    border-radius: 22px;
    background: rgb(20 22 28 / 55%);
    backdrop-filter: blur(12px);
  }
}

/* A YouTube video's bar: its title and Stop on top, then every control on one line, the seek bar taking what is left. */
#video-bar #video-label {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#video-bar #youtube-controls:not([hidden]) {
  display: flex;
  order: 1;
  flex: 1 1 100%;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#video-bar button {
  padding: 5px 9px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

#video-bar #youtube-seek {
  flex: 1 1 60px;
  width: auto;
  min-width: 60px;
}

#video-bar #youtube-time {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
}

#video-bar .present-layout {
  flex-shrink: 0;
}

/* A phone: not enough room for one line; the camera choices go under the playing controls. */
@media (max-width: 700px) {
  #video-bar #youtube-controls:not([hidden]) {
    flex-wrap: wrap;
  }
}

.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;
}

/* Each message its own height, never squeezed: a full list scrolls (a min-height, as a look sets, let them shrink and overlap). */
.chat-list > li {
  flex-shrink: 0;
}

.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;
}

/* A kept video going up: its text over a bar of how much has gone. */
.toast.keep-video {
  display: grid;
  gap: 8px;
}

.toast.keep-video progress {
  width: 100%;
  accent-color: var(--brand);
}

@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;
  }

  /* What is presented in its own shape (--shape, live.js), the stage's width: no black bands above and below it. */
  .stage > .main:has(> .tile.screen) {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: var(--shape, 16 / 9);
  }

  /* A short row under what is presented, so it keeps the room (Joel, on an iPhone): each camera that high, as wide as
     its own picture's shape makes it (live.js), whole. */
  .stage .strip .tile {
    width: auto;
    height: 96px;
    flex: none;
  }
}

/* Held upright: under what is presented (its size kept), the cameras in rows filling the room left, each as large as
   they all fit (live.js fitCameras), none cut at the side, nothing to scroll sideways. */
@media (max-width: 860px) and (orientation: portrait) {
  .stage .main:has(> .tile.screen) + .strip {
    flex: 1;
    min-height: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    overflow: hidden auto;
  }
}

/* ---------- 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;
}

/* Its own buttons (back to the start, send the rating) in the red of Leave, which brought them here. */
#gone :is(#rejoin, #feedback-card button[type='submit']) {
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: none;
  color: #fff;
}

#gone :is(#rejoin, #feedback-card button[type='submit']):hover:not([disabled]) {
  background: color-mix(in srgb, var(--danger) 82%, #000);
}

/* 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;
}

/* In the bar over a thank-you page: a menu that opens over the page, not inside the bar. */
.thank-you-bar .add-to-calendar {
  position: relative;
  margin: 0 0 0 auto;
}

.thank-you-bar .add-to-calendar summary {
  border-color: rgb(255 255 255 / 40%);
  color: #fff;
}

.thank-you-bar .calendar-items {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 2;
  min-width: 230px;
  padding: 8px;
  border-radius: 12px;
  background: var(--panel, #fff);
  box-shadow: 0 12px 30px rgb(0 0 0 / 30%);
}

/* ---------- 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;
}

/*
 * A ready-made artwork as a designed pop-up's background (popup-design.js POPUP_ARTS; Joel's, 4:5 with an empty part for
 * the words): its art across the top, the words below; or its art on one side, the words beside it. After the layouts: it
 * replaces their spacing.
 */
.designed-popup.with-art {
  width: min(420px, 100%);
  aspect-ratio: 4 / 5;
  padding-top: 22px;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  align-content: center;
}

.designed-popup.art-flash-sale {
  padding-top: 40%;
}

.designed-popup.art-value-stack {
  padding-top: 40%;
  padding-bottom: 16%;
}

.designed-popup.art-spots-left,
.designed-popup.art-fast-bonus {
  padding-top: 60%;
}

.designed-popup.art-book-call,
.designed-popup.art-last-chance {
  background-size: cover;
  background-position: center;
}

.designed-popup.art-book-call .popup-body,
.designed-popup.art-last-chance .popup-body {
  width: 56%;
  justify-self: end;
  text-align: left;
}

.designed-popup.art-book-call {
  align-content: start;
  padding-top: 18%;
}

.designed-popup.art-book-call .popup-body {
  width: 50%;
}

.designed-popup.art-book-call .popup-headline {
  font-size: 22px;
}

.designed-popup.art-book-call .popup-actions,
.designed-popup.art-last-chance .popup-actions {
  justify-content: flex-start;
}

/*
 * The clean templates (popup-design.js CLEAN_TEMPLATES; Joel: "professional, streamlined, clean"): system type set tight,
 * a pill button, the owner's picture or a soft wash of their button colour, the ribbon as a small label.
 */
.designed-popup[class*='layout-clean-'] {
  gap: 0;
  padding: 0;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 22%), 0 0 0 1px rgb(0 0 0 / 5%);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  width: min(440px, 100%);
}

.designed-popup[class*='layout-clean-'] .popup-picture {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--popup-button) 18%, var(--popup-bg)), color-mix(in srgb, var(--popup-button) 55%, var(--popup-bg)));
}

.designed-popup[class*='layout-clean-'] .popup-picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.designed-popup[class*='layout-clean-'] .popup-picture img.from-art {
  object-position: center top;
}

.designed-popup[class*='layout-clean-'] .popup-body {
  gap: 8px;
  padding: 26px 28px 28px;
}

.designed-popup[class*='layout-clean-'] .popup-eyebrow {
  color: var(--popup-button);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.designed-popup[class*='layout-clean-'] .popup-headline {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

.designed-popup[class*='layout-clean-'] .popup-text {
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.72;
}

.designed-popup[class*='layout-clean-'] .popup-actions {
  margin-top: 10px;
}

.designed-popup[class*='layout-clean-'] .popup-go,
.designed-popup[class*='layout-clean-'] .popup-actions .go {
  padding: 12px 26px;
  border-radius: 980px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
}

/* Spotlight: the picture across the top, rounded, the words centred under it. */
.designed-popup.layout-clean-hero .popup-picture {
  margin: 14px 14px 0;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
}

/* Side by side: the picture fills the left half, the words on the right. */
.designed-popup.layout-clean-split {
  grid-template-columns: 1fr 1.1fr;
  width: min(620px, 100%);
  text-align: left;
}

.designed-popup.layout-clean-split .popup-picture {
  min-height: 300px;
}

.designed-popup.layout-clean-split .popup-body {
  align-content: center;
  padding: 32px 30px;
}

.designed-popup.layout-clean-split .popup-actions {
  justify-content: flex-start;
}

/* Cinematic: the picture edge to edge, fading into the background, the words over its lower part. */
.designed-popup.layout-clean-dark .popup-picture {
  aspect-ratio: 4 / 3;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.designed-popup.layout-clean-dark .popup-body {
  margin-top: -56px;
  position: relative;
}

.designed-popup.layout-clean-dark .popup-headline {
  font-size: 32px;
}

/* Frosted: the picture is the whole card, the words on a frosted panel of the background colour. */
.designed-popup.layout-clean-glass {
  aspect-ratio: 4 / 5;
  align-content: end;
}

.designed-popup.layout-clean-glass .popup-picture {
  position: absolute;
  inset: 0;
}

.designed-popup.layout-clean-glass .popup-body {
  position: relative;
  margin: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--popup-bg) 76%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  padding: 22px 22px 24px;
}

.designed-popup.layout-clean-glass .popup-headline {
  font-size: 24px;
}

/* Banner: a slim bar, a square picture, the words, the button at the end. */
.designed-popup.layout-clean-bar {
  grid-template-columns: auto 1fr auto;
  align-content: center;
  align-items: center;
  gap: 3px 18px;
  width: min(680px, 100%);
  padding: 14px 18px 14px 14px;
  border-radius: 18px;
  text-align: left;
}

.designed-popup.layout-clean-bar .popup-picture {
  grid-row: 1 / span 3;
  width: 84px;
  height: 84px;
  border-radius: 12px;
}

.designed-popup.layout-clean-bar .popup-body {
  display: contents;
}

.designed-popup.layout-clean-bar .popup-eyebrow,
.designed-popup.layout-clean-bar .popup-headline,
.designed-popup.layout-clean-bar .popup-text {
  grid-column: 2;
}

.designed-popup.layout-clean-bar .popup-headline {
  font-size: 20px;
}

.designed-popup.layout-clean-bar .popup-text {
  font-size: 14px;
}

.designed-popup.layout-clean-bar .popup-actions {
  grid-column: 3;
  grid-row: 1 / span 3;
  margin: 0;
}

@media (max-width: 560px) {
  .designed-popup.layout-clean-split {
    grid-template-columns: 1fr;
  }

  .designed-popup.layout-clean-split .popup-picture {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .designed-popup.layout-clean-bar {
    grid-template-columns: auto 1fr;
  }

  .designed-popup.layout-clean-bar .popup-actions {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.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), (orientation: landscape) and (max-height: 500px) {
  .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;
  }

  /* Our badge alone on a phone: the room's logo and its buttons need the width. */
  .topbar a.hc-logo .hc-word {
    display: none;
  }

  .topbar a.hc-logo {
    font-size: 20px;
  }

  #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;
  }

  /* 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;
  }

  /* The tiles are small on a phone: the name and "Enlarge" (only its sign) stay small in their corners, not over the
     face. A long name is cut short. */
  .room .stage :is(.grid, .strip) .tile .name,
  .room .stage .main .tile.screen .name {
    left: 4px;
    bottom: 4px;
    max-width: calc(100% - 8px);
    overflow: hidden;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .room .stage :is(.grid, .strip) .tile .speaking-label {
    top: 4px;
    left: 4px;
    padding: 1px 6px;
    font-size: 10px;
  }

  .stage :is(.grid, .strip) .tile-pin {
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .stage :is(.grid, .strip) .tile-pin::before {
    content: '⤢';
    font-size: 14px;
  }
}

.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?" over the room when the host ends the webinar (app.js askHowItWas). */
.feedback-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 44px rgb(15 23 42 / 22%);
}

.feedback-popup .feedback-card {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

.feedback-popup .feedback-close {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
}

@media (max-width: 600px) {
  .feedback-popup {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto;
  }
}

/* "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;
}

/* A host is taking AI notes: everyone sees it. */
.badge.notes {
  background: color-mix(in srgb, var(--brand) 25%, 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;
}

/* 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);
  }

  /* The reactions' row above the box runs to the panel's edge too: the column stops above it. */
  .room .sidebar:has(> #tab-chat:not([hidden]) > .reaction-bar) > .tabs {
    max-height: calc(100% - var(--chat-form-height, 70px) - 42px);
  }

  /* On the other tabs the row is at the panel's bottom, the same width; the tab and the column stop above it. */
  .room .sidebar > .reaction-bar.in-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding-bottom: 4px;
    background: var(--panel);
  }

  .room .sidebar:has(> .reaction-bar) > .tab {
    margin-bottom: 45px;
  }

  .room .sidebar:has(> .reaction-bar) > .tabs {
    position: relative;
    z-index: 1;
    align-self: start;
    max-height: calc(100% - 45px);
  }

  .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,
.youtube-layer > .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;
}

/*
 * 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;
  }

  /* 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;
  }
}

/* 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;
}

/* Camera off with a picture, like Google Meet and Teams: the picture round in the middle, about half the box's height,
   over a soft, blurred copy of it that fills the box (live.js). Never the whole box: that looks like a frozen camera,
   and a box of another shape would cut the face. */
.tile .photo-backdrop {
  position: absolute;
  inset: -40px;
  background-position: center;
  background-size: cover;
  filter: blur(28px) brightness(0.65);
}

.tile .avatar.photo {
  position: relative;
  width: auto;
  height: 55%;
  max-height: 240px;
  aspect-ratio: 1;
  object-fit: cover;
  background: none;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 85%), 0 10px 30px rgb(0 0 0 / 35%);
}

/* Talking with the camera off, like Google Meet: soft rings pulse out of their circle (picture or initial). It stops a
   moment after they stop (live.js holds .speaking over short pauses), so it does not flicker between words. */
.tile.speaking .avatar {
  animation: voice-pulse 1.6s ease-out infinite;
}

@keyframes voice-pulse {
  0% {
    box-shadow:
      0 0 0 3px rgb(255 255 255 / 85%),
      0 0 0 0 color-mix(in srgb, var(--brand) 75%, transparent),
      0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 3px rgb(255 255 255 / 85%),
      0 0 0 14px color-mix(in srgb, var(--brand) 0%, transparent),
      0 0 0 30px color-mix(in srgb, var(--brand) 0%, transparent);
  }
}

/* Asked for less motion: a still ring instead. */
@media (prefers-reduced-motion: reduce) {
  .tile.speaking .avatar {
    animation: none;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 85%), 0 0 0 8px color-mix(in srgb, var(--brand) 60%, transparent);
  }
}

/* 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;
}

/* "Powered by HotConference" in the corner of the owner's registration and thank-you pages (app.js madeWithBadge). */
.hc-made-with {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 51;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 4px 14px rgb(15 23 42 / 18%);
  text-decoration: none;
  font-size: 12px;
}

.hc-made-with small {
  color: #64748b;
  font-size: 11px;
}

.hc-made-with .hc-logo {
  --text: #0f172a;
  font-size: 14px;
}

/* 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 {
  /* Above the page under it, so the calendar menu opens over it. */
  position: relative;
  z-index: 1;
  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 {
  /* Under the bar: its calendar menu opens over the page. */
  position: relative;
  z-index: 0;
  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+1F4F9,U+1F507,U+1F50F,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;
}

/*
 * ---------- The standard look (Claude Design's "HotConference room"), light and dark ----------
 * Every room without colours of its own (Classic, Chat on the left) 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+1F4F9,U+1F4FD,U+1F501,U+1F507,U+1F50F,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, .person .more, .context-menu, .guest-call, #call-guests) {
  font-family: 'HC Design Icons', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Spotlight, with colours of its own, has the same icons in its menus, tabs and People (not its type). */
body.theme-spotlight :is(.topbar, .tabs, .dock, .menu-items, .emoji-button, .page-switch, .presenter-panel, .ink-bar, .person .more, .context-menu, .guest-call, #call-guests) {
  font-family: 'HC Design Icons', 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 microphone buttons and a sideways phone's rail in the design's icons in every look: a phone's own 🔇 is a
 * speaker crossed out, read as the sound being off (Joel), where the icon is a microphone crossed out.
 */
.room :is(#mic, .side-rail button) {
  font-family: 'HC Design Icons', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* 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. */
.help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--surface-2, var(--control));
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
}

.help-button:hover {
  box-shadow: inset 0 0 0 2px var(--accent, #dc2626);
}

/* A page with no top bar, or the room before its top bar shows (its join page). */
.help-button.help-corner {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  background: var(--panel, #fff);
}

body:has(#room:not([hidden])) .help-corner {
  display: none;
}

/* The room's top bar on a phone is full (mic, camera, Leave…): its "?" shows from a tablet up. */
@media (max-width: 640px) {
  .room .topbar .help-button {
    display: none;
  }
}

.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: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(12 14 18 / 76%);
  font-size: 12px;
  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). */
/* "Nobody is on stage yet": the look's own text colours, readable on its light stage as on its dark one. */
body.theme-standard .room .waiting {
  color: var(--muted);
}

body.theme-standard .room .waiting h2 {
  color: var(--text);
}

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 raised hand in People: the row stands out, the invitation on a line of its own under the name. */
.person.hand-up {
  flex-wrap: wrap;
  row-gap: 4px;
  background: color-mix(in srgb, #f59e0b 14%, transparent);
}

.person .row-break {
  flex-basis: 100%;
  height: 0;
}

.person .avatar {
  position: relative;
  display: inline-flex;
  flex: none;
}

/* The red ✋ on their initials, as on the People tab (the standard look; the others show it before the name). */
.person .hand-badge {
  display: none;
}

body.theme-standard .person .hand-badge {
  position: absolute;
  right: -6px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: #e11d48;
  font-size: 10px;
  line-height: 1;
}

body.theme-standard .person .hand-text {
  display: none;
}

/* Under the name: the initials' width and the gap in. */
body.theme-standard .person.hand-up .invite-to-mic {
  margin-left: 42px;
}

/* "Attendee" under the Attendees heading says nothing more: its room goes to the name. */
body.theme-standard .person .role-pill.attendee {
  display: none;
}

/* 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;
}

/* Their own sponsor, or their own guests (state.mine): marked for them alone, in People and the chat. */
.mine-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #f5b301 22%, transparent);
  color: inherit;
  font-size: 0.78em;
  font-weight: 700;
  white-space: nowrap;
}

.person.is-mine,
#chat-list li.is-mine {
  border-radius: 10px;
  background: color-mix(in srgb, #f5b301 10%, transparent);
  box-shadow: inset 3px 0 0 #f5b301;
}

/* A YouTube video in the room: its tile on stage, and YouTube's player laid over it (live.js), under a shield. */
.tile.youtube {
  background: #000;
}

.youtube-layer {
  position: fixed;
  z-index: 5;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

.youtube-layer[hidden] {
  display: none;
}

.youtube-layer > div:first-child,
.youtube-layer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.youtube-layer .youtube-shield {
  position: absolute;
  inset: 0;
}

.youtube-layer .name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgb(0 0 0 / 60%);
  color: #fff;
  font-size: 13px;
}

.youtube-layer .youtube-sound {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.youtube-layer .youtube-sound[hidden] {
  display: none;
}

/*
 * A phone held sideways (under 500px tall): the phone's two pages (above), the stage page scrolling down, so the video
 * takes the whole screen under a slimmer top bar, as large as it fits, and the reactions and buttons are under it.
 */
@media (orientation: landscape) and (max-height: 500px) {
  .room .topbar {
    padding-block: 4px;
  }

  /* The computer look's space around the cards (min-width: 861px) would show the next page's edge. */
  .layout,
  body.theme-standard .layout {
    gap: 0;
    padding: 0;
  }

  .layout > .stage-area {
    overflow-y: auto;
  }

  /* "Chat & more" over the video's corner: a row of its own would take the height the video needs. */
  .stage-area > .page-switch {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 6;
    margin: 0;
  }

  .layout > .stage-area > .stage {
    flex: 0 0 100%;
  }

  .stage:has(> .player) {
    align-items: center;
  }

  .stage > .player {
    width: auto;
    height: 100%;
    max-width: 100%;
  }
}

/*
 * Every video lifted off the page: the cameras, a YouTube video, the attendees' stream. Rounded, with a soft shadow
 * under it. The boxes that scroll them keep a little room inside, so the shadow is not cut at their edges.
 */
:root {
  /* A quarter stronger than at first (Joel: the videos and slides pop out a little more). */
  --lift: 0 20px 45px rgb(15 23 42 / 40%), 0 5px 15px rgb(15 23 42 / 25%);
}

body.theme-standard .room .tile,
.youtube-layer,
.stage > .player {
  box-shadow: var(--lift);
}

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

.stage > .player {
  border-radius: 16px;
  overflow: hidden;
}

/* A computer: the attendees' stream with room around it, for its rounded corners and shadow (phones: above). */
@media (min-width: 761px) and (min-height: 501px) {
  .stage:has(> .player) {
    padding: 8px 12px 30px;
  }
}

.stage .grid,
.stage .strip {
  padding: 6px 14px 28px;
}

/* Raised hands: the red count on People, a little larger than chat's and pulsing, so a host does not miss one. */
.unread-count.hands-count {
  font-size: 12px;
  line-height: 20px;
  min-width: 22px;
  animation: hands-pulse 1.6s ease-in-out infinite;
}

.room .tabs .unread-count.hands-count {
  top: 2px;
  right: 2px;
}

@keyframes hands-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--live) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .unread-count.hands-count {
    animation: none;
  }
}

/* A chat message or question shown in the reader's language: a small globe, the original on hover (captions.js). */
.translated::after {
  content: ' 🌐';
  font-size: 0.8em;
  opacity: 0.7;
}

/* A web address in a chat message or a question: a link, which a long one may break anywhere. */
:is(.chat-list, .question-item) a {
  color: var(--brand);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/*
 * HotConference's logo (public/brand): the red camera badge, and "Conference" in the page's own text colour, so it
 * reads in light and dark. The top bars of its own pages; a room's pages where the room has no logo of its own.
 */
.hc-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.16em;
  font: 800 21px/1 Manrope, 'Arial Black', Arial, Helvetica, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text, currentColor);
  white-space: nowrap;
}

.hc-logo img {
  height: 1.25em;
  width: auto;
}

.hc-logo.big {
  font-size: 34px;
  margin-bottom: 10px;
}

.hc-logo[hidden] {
  display: none;
}

/* At the top left of a room and its pages (replay, clip, affiliates), before the room's own logo: a link to our site. */
.topbar a.hc-logo {
  font-size: 18px;
  text-decoration: none;
  flex: none;
}

/* The page's own logo beside ours. */
.login-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* The page's name beside the logo: "Rooms", "Staff", "My guests". */
.brand-page {
  padding-left: 10px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
}

/* The stream's "going live" screen: the room's logo, or HotConference's (app.js --event-logo). */
.stream-starting .starting-logo {
  width: min(320px, 60%);
  height: 64px;
  background: var(--event-logo, none) center / contain no-repeat;
}

/* A phone's player is short: the logo, the spinner and the words smaller, all above its buttons (sound, Enlarge). */
@media (max-width: 760px) {
  .stream-starting {
    gap: 6px;
    padding: 10px 10px 58px;
    font-size: 14px;
  }

  .stream-starting .starting-logo {
    height: 30px;
  }

  .stream-starting .spinner {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 600px) {
  .hc-logo {
    font-size: 17px;
  }

  .brand-page {
    display: none;
  }
}

/*
 * A phone held sideways (Joel's "like a video app"): no top bar; the stage fills the screen, what is presented as large
 * as fits with the cameras small beside it; the room's buttons a slim rail down the right edge (app.js), the rest and
 * the reactions opening over the stage from "More". Upright phones, tablets and computers do not have it.
 */
.side-rail {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) {
  .room .topbar {
    display: none;
  }

  .stage-area {
    position: relative;
  }

  .stage-area > #to-panel,
  .stage-area > #reaction-bar,
  .stage-area > #controls {
    display: none;
  }

  .side-rail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--panel);
    border-left: 1px solid var(--border);
  }

  .side-rail button {
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 18px;
  }

  .side-rail button[hidden] {
    display: none;
  }

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

  .side-rail .leave {
    border: 0;
    background: #dc2626;
    color: #fff;
  }

  /* Its camera crossed out while off, as the top bar's is. */
  .side-rail #rail-camera:not(.on) .device-icon {
    font-size: 0;
  }

  .side-rail #rail-camera:not(.on) .device-icon::after {
    content: '\e002';
    font-size: 20px;
  }

  .side-rail .unread-count {
    position: absolute;
    top: -4px;
    right: -4px;
  }

  .stage-area > .stage {
    position: absolute;
    inset: 0 64px 0 0;
    container-type: size;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
  }

  /* The cameras with nothing presented: the stage's whole height, each in its picture's shape (live.js landscape). */
  .stage > .grid {
    flex: 1;
    align-self: stretch;
    min-width: 0;
  }

  .stage > .main:has(> .tile.screen) {
    flex: none;
    width: min(100cqw, 100cqh * var(--shape-ratio, 1.7778));
    height: auto;
    aspect-ratio: var(--shape, 16 / 9);
  }

  .stage:has(> .strip) > .main:has(> .tile.screen) {
    width: min(100cqw - 140px, 100cqh * var(--shape-ratio, 1.7778));
  }

  .stage .strip {
    width: auto;
    height: auto;
    max-height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0;
    overflow: hidden auto;
  }

  .stage .strip .tile {
    width: auto;
    height: 72px;
    flex: none;
    min-height: 0;
  }

  .stage .strip .tile :is(.name, .tile-pin, .speaking-label) {
    display: none;
  }

  /* "More": the dock's buttons and the reactions, over the stage. */
  .stage-area.more-open > #controls,
  .stage-area.more-open > #reaction-bar {
    position: absolute;
    left: 8px;
    right: 72px;
    z-index: 7;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: 0 12px 32px rgb(0 0 0 / 30%);
  }

  .stage-area.more-open > #reaction-bar {
    top: 8px;
  }

  .stage-area.more-open > #controls {
    bottom: 8px;
  }
}

/*
 * A computer (and a tablet held sideways): what is presented in its own shape (--shape, live.js), as large as fits its
 * place beside the cameras, centred: no black bands above and below a video or slides of another shape than the place.
 */
@media (min-width: 861px) and (min-height: 501px) {
  .stage > .main:has(> .tile.screen) {
    container-type: size;
  }

  .stage > .main > .tile.screen {
    width: min(100cqw, 100cqh * var(--shape-ratio, 1.7778));
    height: auto;
    aspect-ratio: var(--shape, 16 / 9);
  }
}

/* In the room's lists of presentations and videos: what each is, in the owner's words. */
.file-about .file-description {
  color: var(--text);
  opacity: 0.85;
}

/* My picture: its preview in the dialog, round as it shows beside the name; the camera card's offer of it, a quiet link. */
/* My picture chosen with the camera on: why it is not seen yet. */
.picture-camera-note {
  color: var(--muted);
}

.picture-preview {
  display: block;
  width: 120px;
  height: 120px;
  margin: 8px auto 12px;
  border-radius: 50%;
  object-fit: cover;
}

body .devices-card button#devices-picture {
  margin-top: 10px;
  box-shadow: none;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted, #667085);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* An attendee who left (app.js showAfterLeaving): the room's after-webinar thank-you, video and offer, then the rest. */
.gone-after {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(720px, 100%);
}

.gone-after h1 {
  margin: 0;
}

.gone-after video {
  width: 100%;
  border-radius: 12px;
  background: #000;
}

.gone-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.gone-offer .thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.gone-offer .price {
  font-weight: 700;
}

.gone-offer strong {
  font-size: 18px;
}

.gone-offer a.button {
  margin-left: auto;
  padding: 12px 22px;
  border-radius: 10px;
  background: #d7262b;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.gone-offer a.button:hover {
  background: #b91c21;
}

/* The join page's own headline and video, from its owner (manage.js joinPagePanel), above the form. */
.login-headline {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 600;
}

.login-video {
  width: min(760px, 100%);
  margin: 0 auto 16px;
}

.login-video video {
  display: block;
  width: 100%;
  border-radius: 14px;
  background: #000;
}

/* Inside Facebook, Messenger or Instagram (in-app-browser.js): open the page in Chrome or Safari, before the login. */
.in-app-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.in-app-card h2 {
  margin: 0;
}

.in-app-card .button {
  padding: 14px;
  font-size: 17px;
}

.in-app-steps {
  text-align: left;
  margin: 0 auto;
}

/* The clean templates and their colours, in the pop-up editor (popup-editor.js). */
.popup-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.popup-template-pick {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 132px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.popup-template-pick.chosen {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand);
}

.popup-template-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 120px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg);
  pointer-events: none;
}

.popup-template-thumb .designed-popup {
  zoom: 0.24;
}

.popup-palettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.popup-palette {
  display: flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
}

.popup-palette span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
}

.popup-palette span + span {
  margin-left: -6px;
}

.popup-more-looks summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

/* The ready-made artworks to start a pop-up from (popup-editor.js). */
.popup-arts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.popup-art-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 112px;
  padding: 6px;
  font-size: 12px;
}

.popup-art-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background-color: #1f242c;
  background-size: cover;
  background-position: center top;
}

/* "Your guests": tick guests for a group video call, or call one (guest-chat.js). */
.guest-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.guest-line .guest-row {
  flex: 1;
}

.guest-line .guest-call {
  padding: 4px 8px;
}

#call-guests {
  margin-top: 8px;
  width: 100%;
}

/* A member's private call with their guests (private-call.js; Joel: FaceTime style): over the whole room. */
.private-call {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 14px;
  padding: 18px;
  background: rgb(12 13 16 / 94%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.private-call .call-label {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.private-call .call-label strong {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  font-size: 14px;
  font-weight: 600;
}

.private-call .call-label span {
  font-size: 13px;
  opacity: 0.65;
}

.private-call .call-tiles {
  display: grid;
  gap: 12px;
  min-height: 0;
}

/* Two people side by side; three or four in a square; more, as many as fit. Upright phones stack them. */
.private-call .call-tiles.count-2 {
  grid-template-columns: 1fr 1fr;
}

.private-call .call-tiles.count-3,
.private-call .call-tiles.count-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.private-call .call-tiles.count-many {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.private-call .call-tile {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #000;
}

/* The whole picture, never cropped nor zoomed in: a phone held either way shows the face (black bars around it). */
.private-call .call-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.private-call .call-tile.self video {
  transform: scaleX(-1);
}

.private-call .call-tile.waiting .call-avatar {
  animation: call-pulse 1.6s ease-in-out infinite;
}

@keyframes call-pulse {
  50% {
    box-shadow: 0 0 0 14px rgb(255 255 255 / 8%);
  }
}

.private-call .call-name {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / 45%);
  font-size: 14px;
  font-weight: 600;
}

.call-avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5e5ce6, #0a84ff);
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  object-fit: cover;
}

/* The text chat under the pictures: a few lines, then it scrolls; links open in a new tab. */
.private-call .call-chat {
  display: grid;
  gap: 8px;
  width: min(760px, 100%);
  justify-self: center;
}

.private-call .call-messages {
  display: grid;
  gap: 4px;
  max-height: 120px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: 14px;
}

.private-call .call-messages:empty {
  display: none;
}

.private-call .call-messages li {
  padding: 6px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 10%);
  overflow-wrap: anywhere;
}

.private-call .call-messages li.mine {
  background: rgb(10 132 255 / 30%);
}

.private-call .call-messages a {
  color: #64b5ff;
  font-weight: 600;
}

.private-call .call-chat-form {
  display: flex;
  gap: 8px;
}

.private-call .call-chat-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: #f5f5f7;
  font-size: 15px;
}

.private-call .call-chat-form button {
  border-radius: 999px;
  padding: 0 18px;
}

.private-call .call-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.private-call .call-button {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  /* The design's icons, as the room's own mic button: muted is a microphone crossed out, not a speaker (Joel). */
  font-family: 'HC Design Icons', system-ui, -apple-system, sans-serif;
  font-size: 22px;
  cursor: pointer;
}

.private-call .call-button.off {
  background: #f5f5f7;
}

.private-call .call-leave {
  height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* "Daniel would like to chat with you": a card at the top of the room, like a phone's incoming call. */
.incoming-call {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 1001;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(360px, calc(100% - 32px));
  padding: 20px 20px 18px;
  border-radius: 22px;
  background: rgb(28 28 30 / 92%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: #f5f5f7;
  text-align: center;
  box-shadow: 0 20px 50px rgb(0 0 0 / 40%);
  transform: translateX(-50%);
  animation: incoming-in 0.3s ease-out;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

@keyframes incoming-in {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
}

.incoming-call .call-avatar {
  width: 64px;
  height: 64px;
  font-size: 28px;
}

.incoming-call strong {
  font-size: 18px;
  font-weight: 600;
}

.incoming-call p {
  margin: 0;
  font-size: 14px;
  opacity: 0.7;
}

.incoming-call .call-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.incoming-call .call-answers button {
  padding: 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.incoming-call .call-decline {
  background: #ff3b30;
}

.incoming-call .call-accept {
  background: #34c759;
}

@media (orientation: portrait) {
  .private-call .call-tiles.count-2 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .private-call .call-tiles.count-3,
  .private-call .call-tiles.count-4,
  .private-call .call-tiles.count-many {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(0, 1fr);
  }

  .private-call {
    padding: 12px;
  }
}

/*
 * The bold banners (Joel's, public/brand/banners) on the room's cards, when the owner turns them on (Look tab,
 * Room.boldCards); the clean look otherwise. Each banner's empty part takes the words.
 */
body.bold-cards .overlay.offer:not(.designed),
body.bold-cards .overlay.coupon,
body.bold-cards .overlay.timer,
body.bold-cards .overlay.qr {
  min-height: 88px;
  background-color: #0b0b0c;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

body.bold-cards .overlay.offer:not(.designed) {
  padding-left: 18%;
  background-image: url(/brand/banners/offer-bar.webp);
  background-position: left center;
}

body.bold-cards .overlay.coupon {
  background-image: linear-gradient(90deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 25%) 60%, transparent), url(/brand/banners/coupon.webp);
  background-position: center, right center;
}

body.bold-cards .overlay.timer {
  padding-left: 34%;
  background-image: url(/brand/banners/countdown.webp);
  background-position: left center;
}

body.bold-cards .overlay.timer .clock {
  color: #fff;
}

body.bold-cards .overlay.qr {
  padding-left: 30%;
  background-color: #fff;
  background-image: url(/brand/banners/phone-qr.webp);
  background-position: left center;
  color: #111;
  text-shadow: none;
}

body.bold-cards .poll-view {
  border-radius: 14px;
  background: #fff url(/brand/banners/poll.webp) top / 100% auto no-repeat;
  color: #1c1f24;
}

body.bold-cards .quiz-panel {
  background: #0a46e0 url(/brand/banners/quiz.webp) top / 100% auto no-repeat;
  color: #fff;
}

body.bold-cards .giveaway-panel {
  background: #050505 url(/brand/banners/giveaway.webp) top / 100% auto no-repeat;
  color: #fff;
}

/* The room for each square banner's art, as tall as the art across the card's own width. */
body.bold-cards .poll-view::before,
body.bold-cards .quiz-panel::before,
body.bold-cards .giveaway-panel::before {
  content: '';
  display: block;
  justify-self: stretch;
}

body.bold-cards .poll-view::before {
  aspect-ratio: 4.2;
}

body.bold-cards .quiz-panel::before {
  aspect-ratio: 4;
}

body.bold-cards .giveaway-panel::before {
  aspect-ratio: 2.3;
}

/* The cards' look on the rooms page (manage.js cardsLook): a sample of each. */
.cards-look-picture {
  display: block;
  width: 100%;
  aspect-ratio: 3;
  border-radius: 8px;
  background-size: cover;
  background-position: left center;
}

.cards-look-picture.clean {
  background: linear-gradient(var(--brand), var(--brand)) center / 80% 26% no-repeat, #f4f5f7;
}

.cards-look-picture.bold {
  background-image: url(/brand/banners/offer-bar.webp);
}

/*
 * A phone held sideways (short and wide): the chat, who it is with and the buttons on the left, the people stacked on
 * the right, so both stay in sight (Joel: sideways, only the chat showed). Upright phones and computers are unchanged.
 */
@media (orientation: landscape) and (max-height: 540px) {
  .private-call {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'label tiles'
      'chat tiles'
      'controls tiles';
    gap: 8px 12px;
    padding: 8px 12px;
  }

  .private-call .call-label {
    grid-area: label;
  }

  .private-call .call-label span {
    display: none;
  }

  .private-call .call-tiles {
    grid-area: tiles;
  }

  .private-call .call-tiles.count-2,
  .private-call .call-tiles.count-3,
  .private-call .call-tiles.count-4 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(0, 1fr);
  }

  .private-call .call-tile {
    border-radius: 14px;
  }

  .private-call .call-chat {
    grid-area: chat;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: end;
    width: 100%;
    min-height: 0;
  }

  .private-call .call-messages {
    max-height: none;
    align-content: end;
  }

  /* The message box one line high at the bottom, also before the first message (it stretched into the empty space). */
  .private-call .call-chat-form {
    grid-row: 2;
    align-self: end;
  }

  .private-call .call-chat-form input,
  .private-call .call-chat-form button {
    height: 40px;
  }

  .private-call .call-controls {
    grid-area: controls;
    gap: 10px;
  }

  .private-call .call-button,
  .private-call .call-leave {
    height: 44px;
  }

  .private-call .call-button {
    width: 44px;
    font-size: 18px;
  }

  .private-call .call-leave {
    padding: 0 18px;
    font-size: 15px;
  }
}