/**
 * STRUCTURAL CSS — layout, spacing, interaction states, motion (C26).
 *
 * This ships WITH the components: a package that withholds its stylesheet
 * withholds a working product. Colors are read exclusively from the token
 * contract in `tokens.css`; there is not one hardcoded color below.
 *
 * The iOS/macOS bar (R6) is mostly in here: `dvh` not `vh`, safe-area insets on
 * the control bar, 44px touch targets, 16px inputs (anything smaller zooms iOS
 * Safari on focus), spring-ish easing, and reduced-motion honored.
 */

.mx-meet {
  font-family: var(--mx-meet-font);
  font-size: var(--mx-meet-font-size);
  color: var(--mx-meet-text);
  background: var(--mx-meet-stage-bg);
  display: flex;
  flex-direction: column;
  /* dvh, never vh: iOS Safari's vh includes the collapsing toolbar, so a
     100vh stage puts the control bar under the browser chrome.
     `--mx-meet-height` lets a host CONTAIN the stage (a board tile, a pane):
     set it to `100%` on an ancestor with a definite height and every screen —
     pre-join, lobby, room, record — fills that box instead of the viewport. */
  height: var(--mx-meet-height, 100dvh);
  max-height: var(--mx-meet-height, 100dvh);
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.mx-meet *,
.mx-meet *::before,
.mx-meet *::after {
  box-sizing: border-box;
}

/* ---------- header ---------- */

.mx-meet__header {
  display: flex;
  align-items: center;
  gap: var(--mx-meet-space);
  padding: calc(var(--mx-meet-space) * 0.75) var(--mx-meet-space);
  padding-top: max(calc(var(--mx-meet-space) * 0.75), env(safe-area-inset-top));
  color: var(--mx-meet-stage-text);
  flex: 0 0 auto;
  min-height: 52px;
}

.mx-meet__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mx-meet__meta {
  color: var(--mx-meet-stage-text-muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

/* The host app's own header control(s) — sized by the host, never squeezed. */
.mx-meet__header-controls {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.mx-meet__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--mx-meet-accent-subtle);
  color: var(--mx-meet-accent);
}

.mx-meet__banner {
  margin: 0;
  padding: 6px var(--mx-meet-space);
  text-align: center;
  font-size: 13px;
  color: var(--mx-meet-text-on-accent);
  background: var(--mx-meet-warning);
}

/*
 * LISTEN-ONLY ATTENDANCE. Informational, not alarming — attending without a
 * microphone is an ordinary, supported way to be in a meeting, so this reads as
 * a statement of fact rather than the warning-colored banner above. The remedy
 * beside it stacks on its own line so a refusal is never a wall of text.
 */
.mx-meet__banner--attendance {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--mx-meet-text);
  background: var(--mx-meet-accent-subtle);
}

/* The recording indicator is never subtle. It must be impossible to miss. */
.mx-meet__recording {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mx-meet-text-on-accent);
  background: var(--mx-meet-recording);
}

.mx-meet__recording--recording {
  animation: mx-meet-pulse 2s var(--mx-meet-ease) infinite;
}

@keyframes mx-meet-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}

/* ---------- stage ---------- */

.mx-meet__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mx-meet-space);
  padding: var(--mx-meet-space);
  background: var(--mx-meet-stage-bg);
  overflow: hidden;
}

.mx-meet__stage--empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--mx-meet-tile-text);
}

/* The honest inert state: rendered by <MeetingRoom>, <PreJoin> and
   <ScheduleMeeting> when the provider has no runtime yet (0.2.1). It is a
   sentence, never a spinner and never a dead control. */
.mx-meet__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-height: 240px;
  padding: 32px 24px;
  text-align: center;
  color: var(--mx-meet-text);
}

.mx-meet__empty-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.mx-meet__empty-body {
  margin: 0;
  color: var(--mx-meet-text-faint);
  max-width: 42ch;
}

.mx-meet__grid {
  display: grid;
  grid-template-columns: repeat(var(--mx-meet-columns, 2), minmax(0, 1fr));
  gap: var(--mx-meet-space);
  min-height: 0;
  overflow: auto;
}

.mx-meet__stage--speaker .mx-meet__grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  flex: 0 0 auto;
  max-height: 22dvh;
}

.mx-meet__overflow {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--mx-meet-text-faint);
}

/* ---------- tile ---------- */

.mx-meet__tile {
  position: relative;
  border-radius: var(--mx-meet-radius);
  background: var(--mx-meet-tile-bg);
  color: var(--mx-meet-tile-text);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 0;
  transition: box-shadow var(--mx-meet-duration) var(--mx-meet-ease);
  box-shadow: inset 0 0 0 1px var(--mx-meet-border);
}

.mx-meet__tile--featured {
  flex: 1 1 auto;
  aspect-ratio: auto;
}

.mx-meet__tile--speaking {
  box-shadow: inset 0 0 0 2px var(--mx-meet-speaking);
}

.mx-meet__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mx-meet__tile-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mx-meet__tile-bar {
  position: absolute;
  left: 8px;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  pointer-events: none;
}

.mx-meet__tile-name {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--mx-meet-stage-text);
  background: var(--mx-meet-stage-label-bg);
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tile actions FADE, the macOS way — present on hover and focus, never
   permanently cluttering the video. Focus-within keeps them keyboard-reachable. */
.mx-meet__tile-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--mx-meet-duration) var(--mx-meet-ease);
}

.mx-meet__tile:hover .mx-meet__tile-actions,
.mx-meet__tile:focus-within .mx-meet__tile-actions {
  opacity: 1;
}

.mx-meet__quality {
  color: var(--mx-meet-warning);
  display: inline-flex;
}

.mx-meet__quality--lost {
  color: var(--mx-meet-danger);
}

/* ---------- controls ---------- */

.mx-meet__controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mx-meet-space);
  padding: var(--mx-meet-space);
  /* The home indicator must never sit on the hang-up button. */
  padding-bottom: max(var(--mx-meet-space), env(safe-area-inset-bottom));
  background: var(--mx-meet-bg-raised);
  border-top: 1px solid var(--mx-meet-border);
  flex-wrap: wrap;
}

.mx-meet__control {
  position: relative;
  width: var(--mx-meet-control-size);
  height: var(--mx-meet-control-size);
  /* 44px is the iOS minimum; the control size never drops below it. */
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--mx-meet-border);
  background: var(--mx-meet-bg-subtle);
  color: var(--mx-meet-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--mx-meet-duration) var(--mx-meet-ease),
    transform var(--mx-meet-duration) var(--mx-meet-ease);
}

.mx-meet__control:hover {
  background: var(--mx-meet-bg-hover);
}

.mx-meet__control:active {
  transform: scale(0.94);
}

.mx-meet__control:focus-visible {
  outline: 2px solid var(--mx-meet-focus-ring);
  outline-offset: 2px;
}

.mx-meet__control--active {
  background: var(--mx-meet-accent);
  border-color: var(--mx-meet-accent);
  color: var(--mx-meet-text-on-accent);
}

.mx-meet__control--danger {
  background: var(--mx-meet-danger);
  border-color: var(--mx-meet-danger);
  color: var(--mx-meet-text-on-accent);
}

.mx-meet__control--danger:hover {
  background: var(--mx-meet-danger-hover);
}

.mx-meet__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mx-meet-recording);
}

/* ---------- panels ---------- */

.mx-meet__panel {
  position: absolute;
  /* Below the room header, never over it: PanelShell measures the header. */
  top: var(--mx-meet-panel-top, 0);
  right: 0;
  bottom: 0;
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--mx-meet-bg);
  border-left: 1px solid var(--mx-meet-border);
  box-shadow: var(--mx-meet-shadow);
  z-index: 2;
  animation: mx-meet-slide var(--mx-meet-duration) var(--mx-meet-ease);
}

@keyframes mx-meet-slide {
  from {
    transform: translateX(12px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.mx-meet__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-meet-space);
  padding: var(--mx-meet-space);
  padding-top: max(var(--mx-meet-space), env(safe-area-inset-top));
  border-bottom: 1px solid var(--mx-meet-border);
}

.mx-meet__panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.mx-meet__panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--mx-meet-space);
  display: flex;
  flex-direction: column;
  gap: var(--mx-meet-space);
}

.mx-meet__panel-note {
  margin: 0;
  font-size: 13px;
  color: var(--mx-meet-text-muted);
}

.mx-meet__chat,
.mx-meet__people,
.mx-meet__lobby-list,
.mx-meet__notes,
.mx-meet__transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mx-meet__chat-line,
.mx-meet__line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}

.mx-meet__line--interim {
  color: var(--mx-meet-text-faint);
  font-style: italic;
}

.mx-meet__note {
  padding: 8px 10px;
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-bg-subtle);
  font-size: 14px;
}

.mx-meet__note--action-item {
  border-left: 3px solid var(--mx-meet-accent);
}

.mx-meet__note--decision {
  border-left: 3px solid var(--mx-meet-success);
}

.mx-meet__person,
.mx-meet__lobby-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mx-meet__person-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-meet__lobby {
  border: 1px solid var(--mx-meet-border-strong);
  border-radius: var(--mx-meet-radius);
  padding: var(--mx-meet-space);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mx-meet__lobby-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mx-meet__lobby-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- forms ---------- */

.mx-meet__composer {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mx-meet__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mx-meet__field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mx-meet-text-muted);
}

.mx-meet__input,
.mx-meet__select {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--mx-meet-radius-sm);
  border: 1px solid var(--mx-meet-border);
  background: var(--mx-meet-bg);
  color: var(--mx-meet-text);
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus,
     which mid-meeting looks exactly like the app breaking. */
  font-size: max(16px, 1rem);
  font-family: inherit;
}

.mx-meet__input:focus-visible,
.mx-meet__select:focus-visible {
  outline: 2px solid var(--mx-meet-focus-ring);
  outline-offset: 1px;
}

.mx-meet__send,
.mx-meet__primary {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--mx-meet-accent);
  color: var(--mx-meet-text-on-accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--mx-meet-duration) var(--mx-meet-ease);
}

.mx-meet__send:hover,
.mx-meet__primary:hover {
  background: var(--mx-meet-accent-hover);
}

.mx-meet__send:disabled,
.mx-meet__primary:disabled {
  opacity: 0.55;
  cursor: progress;
}

.mx-meet__link {
  background: none;
  border: none;
  padding: 0;
  color: var(--mx-meet-accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.mx-meet__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* ---------- pre-join / waiting ---------- */

/* The settings column is a FORM, not a fraction of the screen: it holds at
   300–400px and the whole composition centers inside 1200px. Before
   2026-10-02 it was 0.8fr, so on a 2560px display every dropdown ran ~1000px
   wide with the Join button stranded at the far edge. */
.mx-meet__prejoin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: calc(var(--mx-meet-space) * 2);
  padding: calc(var(--mx-meet-space) * 2);
  padding-inline: max(calc(var(--mx-meet-space) * 2), calc((100% - 1200px) / 2));
  align-items: center;
  height: 100%;
  background: var(--mx-meet-bg);
  overflow-y: auto;
}

.mx-meet__preview {
  border-radius: var(--mx-meet-radius);
  background: var(--mx-meet-tile-bg);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mx-meet__prejoin-panel {
  display: flex;
  flex-direction: column;
  gap: var(--mx-meet-space);
}

.mx-meet__prejoin-title {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
}

.mx-meet__prejoin-actions {
  display: flex;
  align-items: center;
  gap: 8px var(--mx-meet-space);
  flex-wrap: wrap;
}

/* A design-system Checkbox beside its Label (and an optional hint line). */
.mx-meet__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mx-meet__check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mx-meet__check-text .mx-meet__hint {
  margin-left: 0;
}

.mx-meet__join {
  margin-left: auto;
}

/* S7: already in this meeting elsewhere — the hint line, then Switch here / Join here too. */
.mx-meet__second-device {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.mx-meet__second-device .mx-meet__hint {
  margin-left: 0;
  text-align: right;
}

.mx-meet__second-device .mx-meet__join {
  margin-left: 0;
}

.mx-meet__waiting {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mx-meet-space);
  padding: calc(var(--mx-meet-space) * 2);
  color: var(--mx-meet-tile-text);
}

.mx-meet__waiting-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.mx-meet__consent {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-bg-subtle);
  color: var(--mx-meet-text-muted);
  font-size: 13px;
}

.mx-meet__warning {
  margin: 0;
  color: var(--mx-meet-warning);
  font-size: 13px;
}

/* An error always carries its remedy on its own line. */
.mx-meet__error {
  margin: 0;
  color: var(--mx-meet-danger);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mx-meet__remedy {
  color: var(--mx-meet-text-muted);
}

.mx-meet__answer {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-accent-subtle);
  font-size: 14px;
}

/* ---------- avatars ---------- */

.mx-meet__avatar {
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  display: inline-flex;
}

.mx-meet__avatar--initials {
  align-items: center;
  justify-content: center;
  color: var(--mx-meet-text-on-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- calls ---------- */

.mx-meet__call-button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--mx-meet-border);
  background: var(--mx-meet-bg-subtle);
  color: var(--mx-meet-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mx-meet__ringing-stack {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 60;
}

.mx-meet__ringing {
  display: flex;
  align-items: center;
  gap: var(--mx-meet-space);
  padding: var(--mx-meet-space);
  border-radius: var(--mx-meet-radius);
  background: var(--mx-meet-bg-raised);
  border: 1px solid var(--mx-meet-border);
  box-shadow: var(--mx-meet-shadow);
  min-width: 320px;
  animation: mx-meet-ring-in var(--mx-meet-duration) var(--mx-meet-ease);
}

@keyframes mx-meet-ring-in {
  from {
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.mx-meet__ringing-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.mx-meet__ringing-actions {
  display: flex;
  gap: 8px;
}

/* ---------- scheduling ---------- */

.mx-meet__schedule {
  display: flex;
  flex-direction: column;
  gap: var(--mx-meet-space);
  padding: var(--mx-meet-space);
  background: var(--mx-meet-bg);
  color: var(--mx-meet-text);
  border-radius: var(--mx-meet-radius);
  max-width: 460px;
}

.mx-meet__link-out {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--mx-meet-text-muted);
  overflow-wrap: anywhere;
}

/* ---------- reactions ---------- */

.mx-meet__reactions {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.mx-meet__reaction {
  font-size: 30px;
  animation: mx-meet-float 2.4s var(--mx-meet-ease) forwards;
}

@keyframes mx-meet-float {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-60px);
    opacity: 0;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  /* The phone header is two rows: the title and time first, the controls
     (Invite, AI jobs, Lock, End) below — never a title squeezed to "Hollo…". */
  .mx-meet__header {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .mx-meet__title {
    flex: 1 1 60%;
    min-width: 0;
  }

  .mx-meet__prejoin {
    grid-template-columns: minmax(0, 1fr);
  }

  .mx-meet__panel {
    /* On phones a side panel becomes a bottom sheet — the iOS doctrine. */
    top: auto;
    left: 0;
    height: 70dvh;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--mx-meet-border);
    border-radius: var(--mx-meet-radius) var(--mx-meet-radius) 0 0;
  }

  .mx-meet__ringing-stack {
    left: 12px;
    right: 12px;
  }

  .mx-meet__ringing {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-meet *,
  .mx-meet *::before,
  .mx-meet *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ 0.3.0: the AI */

/**
 * THE NOTE-TAKER ROW, THE REFUSAL, THE CAPTIONS AND THE CONSENT BANNER.
 *
 * Tokens only — there is not one hardcoded color in this package, and the
 * canary asserts it. The dot is a STATE, not decoration: a person should be
 * able to tell "in the room" from "re-joining" without reading the sentence.
 */

.mx-meet__note-taker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--mx-meet-space);
  border: 1px solid var(--mx-meet-border-strong);
  border-radius: var(--mx-meet-radius);
}

.mx-meet__note-taker-state {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.mx-meet__note-taker-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mx-meet-text-faint);
}

.mx-meet__note-taker-state--transcribing .mx-meet__note-taker-dot {
  background: var(--mx-meet-recording);
}

.mx-meet__note-taker-state--joining .mx-meet__note-taker-dot,
.mx-meet__note-taker-state--handoff_pending .mx-meet__note-taker-dot {
  background: var(--mx-meet-warning);
}

.mx-meet__refusal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--mx-meet-radius-sm);
  border-left: 3px solid var(--mx-meet-danger);
  background: var(--mx-meet-bg-subtle);
}

.mx-meet__refusal-reason {
  margin: 0;
  font-size: 14px;
  color: var(--mx-meet-text);
}

.mx-meet__refusal-remedy {
  margin: 0;
  font-size: 13px;
  color: var(--mx-meet-text-muted);
}

.mx-meet__note-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mx-meet__note-group-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mx-meet-text-muted);
}

.mx-meet__summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* MRI-A12: the wrap-up announcement. A quiet fact, not an alert — the notes it
   announces are already on screen above it. */
.mx-meet__wrap-up-notice {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mx-meet-text-muted);
}

.mx-meet__assignee {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--mx-meet-accent-subtle);
  color: var(--mx-meet-text);
}

.mx-meet__answer {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.mx-meet__coverage {
  margin: 0;
  font-size: 12px;
  color: var(--mx-meet-text-faint);
}

/* Captions sit over the stage and must never push the control bar off screen. */
.mx-meet__captions {
  position: relative;
  margin: 0 auto;
  max-width: 46rem;
  width: 100%;
  padding: 0 var(--mx-meet-space);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.mx-meet__caption {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mx-meet-tile-text);
  background: var(--mx-meet-stage-bg);
  border-radius: var(--mx-meet-radius-sm);
  padding: 2px 8px;
}

/* An UNSETTLED caption looks unsettled. It is a hint until the row lands (D16). */
.mx-meet__caption--interim {
  opacity: 0.75;
  font-style: italic;
}

.mx-meet__caption-retry {
  align-self: center;
  padding: 4px 10px;
  border: 1px solid var(--mx-meet-border-strong);
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-stage-bg);
  color: var(--mx-meet-tile-text);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.mx-meet__caption-retry:hover,
.mx-meet__caption-retry:focus-visible {
  outline: 2px solid var(--mx-meet-accent);
  outline-offset: 2px;
}

/* CONSENT IS NEVER SUBTLE. Full width, above everything, for every participant. */
.mx-meet__consent {
  margin: 0;
  padding: 8px var(--mx-meet-space);
  text-align: center;
  font-size: 14px;
  color: var(--mx-meet-text);
  background: var(--mx-meet-accent-subtle);
  border-bottom: 1px solid var(--mx-meet-border-strong);
}

.mx-meet__host-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* A host control is one line. Wrapped, "End meeting for everyone" became four
   stacked underlined words and the phone header grew to ~150px (2026-09-27). */
.mx-meet__host-menu .mx-meet__link {
  white-space: nowrap;
}

.mx-meet__link--danger {
  color: var(--mx-meet-danger);
}

.mx-meet__notice {
  font-size: 13px;
  color: var(--mx-meet-text-muted);
}

/* ---------- inline destructive confirmation (never window.confirm) ---------- */

.mx-meet__confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mx-meet__confirm-text {
  font-size: 13px;
  color: var(--mx-meet-text-muted);
}

/* ---------- the meeting record (MRI-D2) ---------- */

/* A record is a DOCUMENT, not a stage: light ground, scrollable, readable
   measure. It deliberately overrides the dark stage background of `.mx-meet`. */
.mx-meet--record {
  background: var(--mx-meet-bg);
  color: var(--mx-meet-text);
  overflow: hidden;
}

.mx-meet__record-head {
  flex: 0 0 auto;
  padding: var(--mx-meet-space);
  padding-top: max(var(--mx-meet-space), env(safe-area-inset-top));
  border-bottom: 1px solid var(--mx-meet-border);
  color: var(--mx-meet-text);
}

.mx-meet__record-head-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.mx-meet__record-eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-meet-text-faint);
}

.mx-meet__record-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.mx-meet__record-when {
  margin: 0;
  font-size: 13px;
  color: var(--mx-meet-text-muted);
}

.mx-meet__record-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mx-meet-space);
  padding-bottom: max(var(--mx-meet-space), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--mx-meet-space);
  /* A readable measure. A transcript at full desktop width is unreadable. */
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

/* One calm access state, rather than a stack of error cards for one policy. */
.mx-meet__record-access {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--mx-meet-border);
  border-left: 3px solid var(--mx-meet-accent);
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-bg-subtle);
  color: var(--mx-meet-text);
}

.mx-meet__record-access-title,
.mx-meet__record-access-message,
.mx-meet__record-access-remedy {
  margin: 0;
}

.mx-meet__record-access-title {
  font-size: 13px;
  font-weight: 600;
}

.mx-meet__record-access-message {
  font-size: 14px;
  line-height: 1.45;
}

.mx-meet__record-access-remedy {
  font-size: 13px;
  line-height: 1.45;
  color: var(--mx-meet-text-muted);
}

.mx-meet__record-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mx-meet__recording-card {
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--mx-meet-border);
  border-radius: var(--mx-meet-radius);
  background: var(--mx-meet-bg-raised);
}

.mx-meet__record-play {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}

.mx-meet__record-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mx-meet-text-muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mx-meet__record-count {
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mx-meet-text-faint);
}

.mx-meet__record-summary {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--mx-meet-text);
}

.mx-meet__record-attendees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.mx-meet__record-attendee {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mx-meet__record-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--mx-meet-border);
  padding-bottom: 4px;
}

.mx-meet__record-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mx-meet-text-muted);
  font: inherit;
  font-size: 14px;
  /* 44px touch target (R6) even though it reads as a text tab. */
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--mx-meet-radius-sm);
  cursor: pointer;
  transition: background 140ms var(--mx-meet-ease), color 140ms var(--mx-meet-ease);
}

.mx-meet__record-tab:hover {
  background: var(--mx-meet-bg-hover);
  color: var(--mx-meet-text);
}

.mx-meet__record-tab--active {
  background: var(--mx-meet-accent-subtle);
  color: var(--mx-meet-text);
  font-weight: 600;
}

.mx-meet__record-transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mx-meet__record-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mx-meet__record-speaker {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-meet-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mx-meet__record-time {
  font-size: 12px;
  font-weight: 400;
  color: var(--mx-meet-text-faint);
  font-variant-numeric: tabular-nums;
}

.mx-meet__record-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mx-meet-text);
}

.mx-meet__record-player {
  width: 100%;
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-bg-subtle);
}

/* ---------- the meetings list (MRI-D2) ---------- */

.mx-meet-list {
  font-family: var(--mx-meet-font);
  color: var(--mx-meet-text);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--mx-meet-border);
  border-radius: var(--mx-meet-radius-sm);
  overflow: hidden;
}

.mx-meet-list__row {
  background: var(--mx-meet-bg);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 52px;
}

.mx-meet-list__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mx-meet-list__title {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mx-meet-list__when {
  font-size: 13px;
  color: var(--mx-meet-text-muted);
}

.mx-meet-list__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--mx-meet-radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--mx-meet-accent);
  text-decoration: none;
}

.mx-meet-list__action:hover {
  background: var(--mx-meet-bg-hover);
}

/* ---------- Meet wave 2: menus, reactions, notices, settings ---------- */

.mx-meet__anchor {
  position: relative;
  display: inline-flex;
}

.mx-meet__popover {
  z-index: 30;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  max-height: min(70dvh, 520px);
  overflow-y: auto;
  background: var(--mx-meet-bg-raised);
  color: var(--mx-meet-text);
  border: 1px solid var(--mx-meet-border);
  border-radius: var(--mx-meet-radius-sm);
  box-shadow: var(--mx-meet-shadow);
  padding: 6px;
  animation: mx-meet-pop var(--mx-meet-duration) var(--mx-meet-ease);
}

@keyframes mx-meet-pop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mx-meet__emoji-bar {
  display: flex;
  gap: 2px;
}

.mx-meet__emoji {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--mx-meet-duration) var(--mx-meet-ease),
    background var(--mx-meet-duration) var(--mx-meet-ease);
}

.mx-meet__emoji:hover {
  background: var(--mx-meet-bg-hover);
  transform: scale(1.18);
}

.mx-meet__menu {
  display: flex;
  flex-direction: column;
}

.mx-meet__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.mx-meet__menu-gap {
  display: inline-block;
  inline-size: 16px;
  block-size: 16px;
  flex: none;
}

.mx-meet__menu-item:hover,
.mx-meet__menu-item:focus-visible {
  background: var(--mx-meet-bg-hover);
  outline: none;
}

.mx-meet__menu-item--danger {
  color: var(--mx-meet-danger);
}

.mx-meet__menu-note {
  margin: 4px 10px;
  max-width: 240px;
  color: var(--mx-meet-danger);
  font-size: 12px;
}

.mx-meet__menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--mx-meet-border);
}

.mx-meet__menu-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px;
  width: min(300px, calc(100vw - 32px));
}

.mx-meet__menu-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.mx-meet__send--danger {
  background: var(--mx-meet-danger);
}

.mx-meet__send--danger:hover {
  background: var(--mx-meet-danger-hover);
}

.mx-meet__toast,
.mx-meet__notice-bar {
  position: absolute;
  left: 50%;
  /* Centered with `translate`, never `transform`: mx-meet-pop animates
     `transform`, which replaced the centering for the whole entrance, so the
     pill sat half a width right of center, then snapped left. */
  translate: -50% 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--mx-meet-stage-label-bg);
  color: var(--mx-meet-stage-text);
  font-size: 14px;
  box-shadow: var(--mx-meet-shadow);
  animation: mx-meet-pop var(--mx-meet-duration) var(--mx-meet-ease);
}

.mx-meet__toast {
  bottom: calc(var(--mx-meet-control-size) + 36px);
}

.mx-meet__toast--failed {
  background: var(--mx-meet-danger);
  color: var(--mx-meet-text-on-accent);
}

.mx-meet__notice-bar {
  top: 64px;
}

.mx-meet__toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.mx-meet__toast-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.mx-meet__primary--small {
  min-height: 32px;
  padding: 0 14px;
  font-size: 14px;
}

.mx-meet__sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
}

.mx-meet__sheet {
  width: min(480px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--mx-meet-bg);
  color: var(--mx-meet-text);
  border-radius: var(--mx-meet-radius);
  box-shadow: var(--mx-meet-shadow);
}

.mx-meet__shortcuts {
  margin: 0;
  padding: 8px var(--mx-meet-space) var(--mx-meet-space);
}

.mx-meet__shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mx-meet-border);
  font-size: 14px;
}

.mx-meet__shortcut:last-child {
  border-bottom: none;
}

.mx-meet__shortcut dd {
  margin: 0;
}

.mx-meet__kbd {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--mx-meet-border-strong);
  border-radius: 6px;
  background: var(--mx-meet-bg-subtle);
  font-family: var(--mx-meet-font);
  font-size: 12px;
  white-space: nowrap;
}

.mx-meet__tile-actions--open {
  opacity: 1;
}

.mx-meet__tile-hand {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mx-meet-warning);
  color: var(--mx-meet-text-on-accent);
  font-size: 12px;
  font-weight: 600;
}

.mx-meet__tile-presenting {
  position: absolute;
  left: 8px;
  bottom: 44px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--mx-meet-text-on-accent);
  font-size: 12px;
  font-weight: 600;
}

.mx-meet__tile-flag {
  display: inline-flex;
  margin-right: 4px;
  color: var(--mx-meet-warning);
}

.mx-meet__signal {
  display: inline-flex;
  color: var(--mx-meet-stage-text-muted);
  opacity: 0.7;
}

.mx-meet__signal--poor {
  color: var(--mx-meet-warning);
  opacity: 1;
}

.mx-meet__signal--lost {
  color: var(--mx-meet-danger);
  opacity: 1;
}

.mx-meet__panel .mx-meet__signal {
  color: var(--mx-meet-text-faint);
}

.mx-meet__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mx-meet__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mx-meet__section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-meet-text-muted);
}

.mx-meet__queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: mx-meet-queue;
}

.mx-meet__bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mx-meet__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--mx-meet-border);
  border-radius: 999px;
  background: var(--mx-meet-bg-subtle);
  color: var(--mx-meet-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  align-self: flex-start;
}

.mx-meet__chip:hover {
  background: var(--mx-meet-bg-hover);
}

.mx-meet__chip:disabled {
  cursor: progress;
  opacity: 0.6;
}

.mx-meet__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--mx-meet-border);
  border-radius: var(--mx-meet-radius-sm);
  color: var(--mx-meet-text-faint);
}

.mx-meet__input--bare {
  border: none;
  padding-left: 0;
  background: none;
}

.mx-meet__input--bare:focus-visible {
  outline: none;
}

.mx-meet__you {
  color: var(--mx-meet-text-faint);
}

.mx-meet__composer--chat {
  flex-direction: column;
  align-items: stretch;
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: var(--mx-meet-bg);
  padding-top: 8px;
}

.mx-meet__composer-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mx-meet__select--compact {
  min-height: 36px;
  padding: 6px 10px;
  flex: 0 0 auto;
}

.mx-meet__chat-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--mx-meet-text-muted);
}

.mx-meet__chat-meta strong {
  color: var(--mx-meet-text);
  font-size: 13px;
}

.mx-meet__chat-meta time {
  margin-left: auto;
  color: var(--mx-meet-text-faint);
}

.mx-meet__chat-private {
  color: var(--mx-meet-warning);
}

.mx-meet__chat-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mx-meet__chat-line--private {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--mx-meet-bg-subtle);
}

.mx-meet__chat-failed {
  font-size: 12px;
  color: var(--mx-meet-danger);
}

.mx-meet__chat-pending {
  font-size: 12px;
  color: var(--mx-meet-text-faint);
}

.mx-meet__meter {
  height: 6px;
  border-radius: 999px;
  background: var(--mx-meet-bg-active);
  overflow: hidden;
}

.mx-meet__meter span {
  display: block;
  height: 100%;
  background: var(--mx-meet-speaking);
  transition: width 80ms linear;
}

.mx-meet__meter--preview {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: rgba(255, 255, 255, 0.18);
}

.mx-meet__preview {
  position: relative;
}

.mx-meet__preview-note {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-stage-label-bg);
  color: var(--mx-meet-stage-text);
  font-size: 13px;
}

.mx-meet__video--mirror {
  transform: scaleX(-1);
}

.mx-meet__field-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.mx-meet__field-row .mx-meet__field {
  flex: 1 1 auto;
  min-width: 0;
}

.mx-meet__field-row .mx-meet__chip {
  min-height: 44px;
  align-self: flex-end;
}

.mx-meet__hint {
  display: block;
  width: 100%;
  margin-left: 26px;
  font-size: 12px;
  color: var(--mx-meet-text-faint);
}

.mx-meet__toggle:has(.mx-meet__hint) {
  flex-wrap: wrap;
  row-gap: 0;
}

.mx-meet__pills {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--mx-meet-bg-subtle);
  border: 1px solid var(--mx-meet-border);
  align-self: flex-start;
}

.mx-meet__pill {
  min-height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--mx-meet-text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.mx-meet__pill--on {
  background: var(--mx-meet-bg-raised);
  color: var(--mx-meet-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* A side panel never covers the control bar on a desktop: Leave stays reachable. */
@media (min-width: 768px) {
  .mx-meet__panel {
    bottom: calc(var(--mx-meet-control-size) + 2 * var(--mx-meet-space) + 1px + env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--mx-meet-border);
  }
}

/* ---------- Meet wave 5: polls, Q&A, whiteboard, breakout rooms ---------- */

.mx-meet__collab-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--mx-meet-border);
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-bg-subtle);
  list-style: none;
}

.mx-meet__collab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mx-meet__collab-title {
  font-size: 14px;
  line-height: 1.35;
}

.mx-meet__collab-state {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--mx-meet-text-muted);
  background: var(--mx-meet-bg-hover);
}

.mx-meet__collab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mx-meet__collab-error {
  color: var(--mx-meet-danger);
}

.mx-meet__poll-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mx-meet__poll-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--mx-meet-border);
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-bg);
  color: var(--mx-meet-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.mx-meet__poll-option:disabled {
  cursor: default;
}

.mx-meet__poll-option--chosen {
  border-color: var(--mx-meet-accent);
  box-shadow: inset 0 0 0 1px var(--mx-meet-accent);
}

.mx-meet__poll-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--mx-meet-accent-subtle);
  transition: width var(--mx-meet-duration) var(--mx-meet-ease);
}

.mx-meet__poll-text,
.mx-meet__poll-count {
  position: relative;
}

.mx-meet__poll-text {
  flex: 1 1 auto;
}

.mx-meet__poll-count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--mx-meet-text-muted);
  font-variant-numeric: tabular-nums;
}

.mx-meet__poll-voters {
  display: block;
  padding: 2px 10px 0;
  font-size: 12px;
  color: var(--mx-meet-text-muted);
}

.mx-meet__question-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.mx-meet__question-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
}

.mx-meet__question-answer {
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--mx-meet-success);
  color: var(--mx-meet-text-muted);
}

.mx-meet__question--dismissed {
  opacity: 0.6;
}

.mx-meet__upvote {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 40px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--mx-meet-border);
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-bg);
  color: var(--mx-meet-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.mx-meet__upvote--on {
  color: var(--mx-meet-accent);
  border-color: var(--mx-meet-accent);
}

.mx-meet__breakout-rooms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.mx-meet__breakout-room {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--mx-meet-radius-sm);
  background: var(--mx-meet-bg);
  border: 1px solid var(--mx-meet-border);
}

.mx-meet__breakout-room--here {
  border-color: var(--mx-meet-accent);
}

.mx-meet__breakout-banner {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: min(640px, calc(100% - 2 * var(--mx-meet-space)));
  padding: 8px 14px;
  border-radius: var(--mx-meet-radius);
  background: var(--mx-meet-bg-raised);
  color: var(--mx-meet-text);
  box-shadow: var(--mx-meet-shadow);
  font-size: 14px;
}

.mx-meet__breakout-banner:empty {
  display: none;
}

.mx-meet__breakout-banner > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mx-meet__breakout-broadcast {
  color: var(--mx-meet-text-muted);
}

.mx-meet__whiteboard {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  bottom: calc(var(--mx-meet-control-size) + var(--mx-meet-space) * 2 + 1px + env(safe-area-inset-bottom));
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--mx-meet-bg);
  border-top: 1px solid var(--mx-meet-border);
}

.mx-meet__whiteboard-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px var(--mx-meet-space);
  border-bottom: 1px solid var(--mx-meet-border);
}

.mx-meet__whiteboard-note {
  flex: 1 1 auto;
  text-align: right;
  font-size: 12px;
  color: var(--mx-meet-text-faint);
}

.mx-meet__swatches {
  display: inline-flex;
  gap: 4px;
}

.mx-meet__swatch {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--mx-meet-bg);
  box-shadow: 0 0 0 1px var(--mx-meet-border);
  cursor: pointer;
  padding: 0;
}

.mx-meet__swatch--on {
  box-shadow: 0 0 0 2px var(--mx-meet-accent);
}

.mx-meet__board {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  touch-action: none;
  cursor: crosshair;
  background: var(--mx-meet-bg-subtle);
}

.mx-meet__board--erase {
  cursor: pointer;
}

.mx-meet__board-paper {
  fill: var(--mx-meet-board-paper);
}

.mx-meet__caption-original {
  display: block;
  font-size: 13px;
  opacity: 0.7;
}

/* S6a: a notice element that must be observable even when the skin shows it in the title. */
.mx-meet__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* S6a §3.6: an answered 1:1 call takes the screen over whatever page the person was on. */
.mx-meet__call-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--mx-meet-bg);
}

/* S6c — the media supervisor's notices: device chips, Enable sound, unplugged/offered devices.
   One centered column under the header, so two at once never overlap. */
.mx-meet__media-notices {
  position: absolute;
  top: 64px;
  left: 50%;
  translate: -50% 0;
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
}

.mx-meet__media-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: var(--mx-meet-stage-label-bg);
  color: var(--mx-meet-stage-text);
  font-size: 14px;
  box-shadow: var(--mx-meet-shadow);
  animation: mx-meet-pop var(--mx-meet-duration) var(--mx-meet-ease);
}

.mx-meet__fix-sheet {
  padding: 10px 12px;
}

.mx-meet__fix-steps {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.mx-meet__fix-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Join gate and waiting room (P1): a rule's current value in the host menu, its choices, a flagged knock. */
.mx-meet__menu-value {
  margin-left: auto;
  padding-left: 12px;
  color: var(--mx-meet-text-muted);
  font-size: 12px;
}

.mx-meet__menu-item--sub {
  padding-left: 34px;
}

.mx-meet__badge--warn {
  color: var(--mx-meet-warning);
}