/* Audio only and the private camera preview (Go Live, the live room, One-on-Ones). Unlayered, like the rest of the
   live and video styles, so it beats UA button defaults. */

/* Camera on/off rail button: the icon shows the current state, the crimson fill (aria-pressed) means "off". */
.pf\:cam-icon-off { display: none; }
[aria-pressed="true"] > .pf\:cam-icon-on { display: none; }
[aria-pressed="true"] > .pf\:cam-icon-off { display: block; }

/* Mirror, effects and the Effects tab only mean something with the camera on. */
.pf\:live-room.is-camera-off [data-camera-only] { display: none; }

/* "Start with" choice: Video / Camera or Audio only. */
.pf\:video-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.25rem;
  margin: 0 0 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pf\:video-mode-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: 600 0.875rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.pf\:video-mode-btn svg { width: 1rem; height: 1rem; flex: none; }
.pf\:video-mode-btn[aria-pressed="true"] { background: #e11d48; color: #fff; }

/* Private preview before the camera goes back on. */
.pf\:cam-preview {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}
.pf\:live-room.is-camera-preview .pf\:cam-preview,
.pf\:video-stage.is-cam-preview .pf\:cam-preview { display: block; }
.pf\:cam-preview > * { pointer-events: auto; }
.pf\:cam-preview-top {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.65rem 0.85rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}
.pf\:cam-preview-dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
}
.pf\:cam-preview-title { margin: 0; font-size: 0.9rem; font-weight: 700; }
.pf\:cam-preview-note { margin: 0.1rem 0 0; font-size: 0.75rem; line-height: 1.3; color: rgba(255, 255, 255, 0.72); }
.pf\:cam-preview-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
}
.pf\:cam-preview-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font: 600 0.875rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.pf\:cam-preview-btn svg { width: 1rem; height: 1rem; }
.pf\:cam-preview-btn.is-primary { background: #e11d48; border-color: #e11d48; }

/* Live room: everything but the picture, the preview card and the effects sheet steps aside. */
.pf\:live-room.is-camera-preview > :not(.pf\:live-video):not(canvas):not(.pf\:cam-preview):not(.pf\:live-sheet):not(.pf\:live-sheet-backdrop) {
  visibility: hidden;
}

/* One-on-One: your own picture fills the screen during the preview; the call controls step aside. */
.pf\:video-stage.is-cam-preview .pf\:video-canvas.is-preview,
.pf\:video-stage.is-cam-preview .pf\:video-local:not(.is-hidden-source) {
  inset: 0;
  top: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 5;
}
.pf\:video-stage.is-cam-preview .pf\:video-dock,
.pf\:video-stage.is-cam-preview .pf\:video-sheet,
.pf\:video-stage.is-cam-preview .pf\:video-top { visibility: hidden; }
.pf\:video-stage .pf\:cam-preview { z-index: 9; }

/* Phones: the effects sheet takes the lower band, so the preview buttons sit just above it. */
@media (max-width: 63.99rem) {
  .pf\:live-room.is-camera-preview:has(.pf\:live-sheet-effects.is-open) .pf\:cam-preview-actions,
  .pf\:video-stage.is-cam-preview:has(.pf\:video-effects:not([hidden])) .pf\:cam-preview-actions {
    bottom: min(46dvh, 26rem);
    padding-bottom: 0.75rem;
  }
}

/* Desktop: effects dock to the right as a side panel and the buttons keep clear of it. */
@media (min-width: 64rem) {
  .pf\:video-stage.is-cam-preview .pf\:video-effects {
    left: auto;
    right: 1rem;
    top: 1rem;
    bottom: 1rem;
    width: 24rem;
    max-height: none;
    border-radius: 1.25rem;
  }
  .pf\:live-room.is-camera-preview:has(.pf\:live-sheet-effects.is-open) .pf\:cam-preview-actions,
  .pf\:video-stage.is-cam-preview:has(.pf\:video-effects:not([hidden])) .pf\:cam-preview-actions {
    padding-right: 26rem;
  }
}