/* ==========================================================================
   capture.css — audio / photo / video capture and preview screens
   ========================================================================== */

/* ── Notice banner above every capture screen ──────────────────────────── */
.capture-note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    background: var(--c-warning-bg);
    color: var(--c-warning-text);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: var(--s-4);
    direction: rtl;
}


.capture-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }

/* ── Camera stage ──────────────────────────────────────────────────────── */
.stage {
  position: relative;
  flex: 1;
  border-radius: 24px 24px 0 0;
  background: #3a3a3a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage video,
.stage img,
.stage canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Front camera preview is mirrored; the recorded file is not. */
.stage video.mirrored { transform: scaleX(-1); }

/* Shown while getUserMedia negotiates. Asking for a high-resolution stream
   can take a second or more on a phone, and without this the stage is just
   a dead grey rectangle. */
.stage-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  color: rgba(255, 255, 255, .75);
  font-size: 15px;
  pointer-events: none;
}
.stage-hint svg {
  width: 34px;
  height: 34px;
  animation: stageSpin 1.1s linear infinite;
}
@keyframes stageSpin { to { transform: rotate(360deg); } }
.stage.ready .stage-hint { display: none; }

.stage-timer {
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .72);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.stage-timer.warning { color: #ff6b6b; }

/* ── Camera control bar ────────────────────────────────────────────────── */
.camera-bar {
  background: #000;
  padding: var(--s-5) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--s-4);
  margin-top: -1px;
  border-radius: 0 0 24px 24px;
  direction: rtl;
}

.cam-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}
.cam-btn-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3f3f3f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cam-btn svg { width: 24px; height: 24px; }

/* Shutter — white ring for photo, red fill for video */
.shutter {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--c-white);
    cursor: pointer;
    transition: transform .15s;
    border: 4px solid #ffffff;
    box-shadow: inset rgb(0 0 0) 0px 0px 0px 5px;
}
.shutter:active { transform: scale(.94); }
.shutter.video {
    background: var(--c-primary);
    border-color: var(--c-primary);
    border: 4px solid var(--c-primary) !important;
    box-shadow: inset rgb(0 0 0) 0px 0px 0px 5px !important;
}
/* Recording transport: pause + stop in a pill */
.transport {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: #3f3f3f;
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-6);
}
.transport button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2);
}
.transport svg { width: 26px; height: 26px; }
.transport .rec-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-primary);
}
.transport .stop-square {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--c-white);
}

/* ── Preview action bar (send / delete) ────────────────────────────────── */
.preview-bar {
  background: #000;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--s-5) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}
.btn-send {
  background: var(--c-white);
  color: var(--c-ink);
  border: none;
  border-radius: var(--r-pill);
  padding: 14px 34px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  direction: rtl;
}
.btn-send svg { width: 22px; height: 22px; }
.btn-discard {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #3f3f3f;
  border: none;
  color: var(--c-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-discard svg { width: 24px; height: 24px; }

/* ── Audio recorder ────────────────────────────────────────────────────── */
.audio-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  min-height: 300px;
}

/* setPhase() reveals a phase by clearing its inline display, so the layout has
   to live here rather than inline — otherwise these class-less divs fall back
   to display:block and the column collapses. Hiding still works: the inline
   display:none setPhase writes outbids this rule. */
.audio-stage > [data-audio-phase] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.mic-btn {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #2b2b2b;
  border: none;
  color: var(--c-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, background .2s;
}
.mic-btn:hover { transform: scale(1.03); }
.mic-btn svg { width: 35px; height: 35px; }
.mic-hint { font-size: 14px; color: var(--c-body); }

.mic-glyph {
    color: var(--c-ink);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.mic-glyph svg {
    width: 90px;
    height: 90px;
}

.startrecording {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
}

.audio-timer {
    font-size: 40px;
    font-weight: 600;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    padding: 25px 0;
    text-align: center;
}

.audio-timer.warning { color: var(--c-primary); }

.audio-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    padding-top: 25px;
    /*direction: rtl;*/
}

.audio-ctl {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-body);
}
.audio-ctl-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
}
.audio-ctl svg { width: 26px; height: 26px; }

.audio-ctl.primary .audio-ctl-circle {
  width: 90px;
  height: 90px;
  background: var(--c-primary);
  color: var(--c-white);
}
.audio-ctl.primary.paused .audio-ctl-circle { background: var(--c-accent); }
.audio-ctl.primary svg { width: 44px; height: 44px; }
.audio-ctl.primary .audio-ctl-label { color: #2b2b2b; }
.audio-ctl.primary.paused .audio-ctl-label { color: var(--c-accent); }

/* Full-width back button under the audio idle screen */
.audio-back-row {
  flex-shrink: 0;
  padding-top: var(--s-4);
}
.btn.btn-wide {
  max-width: none;
  width: 100%;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  direction: rtl;
}
.btn.btn-wide:hover {
  background: var(--c-surface-2);
  color: var(--c-muted);
}

/* Level meter — animated bars while recording */
.level-meter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 46px;
}
.level-meter span {
  width: 4px;
  min-height: 4px;
  border-radius: 2px;
  background: var(--c-primary);
  transition: height .08s linear;
}

/* ── Audio playback scrubber ───────────────────────────────────────────── */
.scrub {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.scrub-times {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    width: 85%;
    margin: auto;
}
.scrub-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--c-line);
    cursor: pointer;
    width: 8cm;
    margin: auto;
}
.scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--c-ink);
  border-radius: 3px;
}
.scrub-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-ink);
  transform: translate(-50%, -50%);
}

/* ── Permission denied ─────────────────────────────────────────────────── */
.permission-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-4);
}
/* .btn carries flex:1 for the footer's side-by-side nav row. This is a
   column, so that same rule stretches the button from the subtitle to the
   bottom of the screen — a full-height red pill on the error and permission
   screens. Opt out, exactly as .google-actions .btn has to. */
.permission-screen .btn {
  flex: 0 0 auto;
  width: 100%;
}

.permission-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.permission-icon svg { width: 40px; height: 40px; }
.permission-steps {
  text-align: right;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-muted);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: var(--s-4);
  width: 100%;
}

/* ── Upload progress ───────────────────────────────────────────────────── */
.upload-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  text-align: center;
}
.upload-ring { position: relative; width: 150px; height: 150px; }
.upload-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.upload-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.upload-ring .track { stroke: var(--c-line); }
/* No transition on the bar: submit.js tweens stroke-dashoffset on rAF, and a
   CSS transition on top of that would lag behind every frame it sets. */
.upload-ring .bar { stroke: var(--c-primary); }

/* Indeterminate — the phases with no bytes to count (opening the upload
   session, Drive finalizing). A quarter-circle arc sweeps continuously so the
   screen never looks stuck; the percentage is meaningless here, so it hides. */
.upload-ring.is-spinning svg { animation: ringSpin 1.1s linear infinite; }
.upload-ring.is-spinning .bar {
  stroke-dasharray: 80 247;
  stroke-dashoffset: 0 !important;
}
.upload-ring.is-spinning .upload-pct { opacity: 0; }

@keyframes ringSpin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

.upload-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-ink);
  direction: ltr;
}
.upload-hint { font-size: 15px; color: var(--c-muted); }

/* ── Success ───────────────────────────────────────────────────────────── */
.success-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-4);
}
.success-icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--c-success-soft);
  color: var(--c-success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-icon svg { width: 46px; height: 46px; }
.review-id {
  display: none;
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5);
  direction: ltr;
  letter-spacing: .5px;
}

/* ── Google review ─────────────────────────────────────────────────────── */
.google-screen { gap: var(--s-5); }

.google-stars {
    display: flex;
    gap: 6px;
    color: #ffc107;
    height: auto;
}
.google-stars svg {
    width: auto;
    height: auto;
}

.google-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
}
/* .btn carries flex:1 for the footer's side-by-side nav row. In this column
   that would stretch the button down the screen, so opt out of it here. */
.google-actions .btn {
    flex: 0 0 auto;
    text-decoration: none;
    direction: rtl;
    background: #4285f4;
    gap: 15px;
}

/* The nav arrows are mirrored for RTL; the Google mark must not be. */
.google-actions .google-btn svg {
    background: #ffffff;
    rotate: none;
    width: 35px;
    height: 35px;
    padding: 7px;
    border-radius: 75px;
}

.google-note {
  font-size: 13px;
  color: var(--c-muted);
  text-align: center;
}

/* Deliberately quiet: the Google review is the ask on this screen, and a
   second filled-in button would compete with it. */
.restart-link {
    margin-top: var(--s-3);
    background: none;
    border: none;
    padding: 8px 4px;
    font-family: "Hespress", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--c-primary);
    cursor: pointer;
    text-underline-offset: 4px;
    background: #ffeded;
    padding: 20px;
    border-radius: 50px;
    width: 320px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.restart-link:hover { color: var(--c-primary-hover); }

img.starsgoogle {
    width: 230px;
    margin-bottom: -10px;
}

/* ==========================================================================
   Motion — capture screens
   Recording is a state people need to be certain about, so it is the one
   place with a continuous animation rather than a one-shot transition.
   ========================================================================== */

/* ── Idle mic invites a tap ────────────────────────────────────────────── */
.mic-btn { transition: transform var(--d-base) var(--e-spring), background var(--d-base) var(--e-soft); }
.mic-btn:active { transform: scale(.94); }

/* Ripples outward without resizing the button. A continuously scaling tap
   target is a moving target: it invites mis-taps on a phone, and automated
   clicks cannot settle on it at all. Only box-shadow animates, so the hit
   area stays exactly where the finger expects it. */
[data-audio-phase="idle"] .mic-btn { animation: micBreathe 3.2s var(--e-soft) infinite; }
@keyframes micBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41, 41, 41, .18); }
  70%      { box-shadow: 0 0 0 16px rgba(41, 41, 41, 0); }
}

/* ── Recording: a steady pulse, so "am I recording?" is never a question ── */
/* Opacity only, for the same reason — these sit next to or inside controls. */
[data-audio-phase="recording"] .mic-glyph { animation: recPulse 1.6s var(--e-soft) infinite; }
@keyframes recPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

.audio-ctl.primary .audio-ctl-circle {
  transition: background var(--d-base) var(--e-soft), transform var(--d-base) var(--e-spring);
}
.audio-ctl:active .audio-ctl-circle { transform: scale(.92); }
.audio-ctl-circle { transition: background var(--d-fast) var(--e-soft), transform var(--d-base) var(--e-spring); }

/* Timer counts up quietly, then insists in the final 15 seconds. */
.audio-timer, .stage-timer { transition: color var(--d-base) var(--e-soft); }
.audio-timer.warning, .stage-timer.warning { animation: timerUrge 1s var(--e-soft) infinite; }
@keyframes timerUrge {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* ── Video record button ───────────────────────────────────────────────── */
.shutter { transition: transform var(--d-fast) var(--e-spring), background var(--d-base) var(--e-soft); }
.shutter.video:not(:active) { animation: shutterReady 2.6s var(--e-soft) infinite; }
@keyframes shutterReady {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 37, 47, .45); }
  60%      { box-shadow: 0 0 0 12px rgba(246, 37, 47, 0); }
}

.transport { animation: riseIn var(--d-base) var(--e-out) both; }
.transport button { transition: transform var(--d-fast) var(--e-spring), opacity var(--d-fast) var(--e-soft); }
.transport button:active { transform: scale(.88); }
.transport .rec-dot { animation: recPulse 1.4s var(--e-soft) infinite; }

.cam-btn { transition: transform var(--d-fast) var(--e-out), opacity var(--d-base) var(--e-soft); }
.cam-btn:active { transform: scale(.94); }
.cam-btn-circle { transition: background var(--d-fast) var(--e-soft); }

/* Flipping the camera reads as a flip. */
#photo-flip:active svg, #video-flip:active svg { animation: flipSpin .5s var(--e-out); }
@keyframes flipSpin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

/* ── Stage ─────────────────────────────────────────────────────────────── */
.stage video, .stage img { animation: fadeUp var(--d-slow) var(--e-out) both; }
@keyframes fadeUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.stage-hint { transition: opacity var(--d-base) var(--e-soft); }

/* ── Preview bar ───────────────────────────────────────────────────────── */
.preview-bar { animation: riseIn var(--d-base) var(--e-out) both; }
.btn-send, .btn-discard { transition: transform var(--d-fast) var(--e-spring), background var(--d-base) var(--e-soft); }
.btn-send:active, .btn-discard:active { transform: scale(.93); }
.btn-send:hover { transform: translateY(-1px); }

/* ── Audio scrubber ────────────────────────────────────────────────────── */
.scrub-fill, .scrub-knob { transition: width .1s linear, left .1s linear; }
.scrub-knob { transition: width .1s linear, left .1s linear, transform var(--d-fast) var(--e-spring); }
.scrub-bar:active .scrub-knob { transform: translate(-50%, -50%) scale(1.25); }

/* ── Upload ────────────────────────────────────────────────────────────── */
.upload-ring { animation: riseIn var(--d-base) var(--e-out) both; }
/* stroke-dashoffset is deliberately untransitioned — see the ring rules above. */
.upload-pct { transition: color var(--d-base) var(--e-soft), opacity var(--d-base) var(--e-soft); }
.upload-hint { animation: timerUrge 2s var(--e-soft) infinite; }

/* The spinner is the only signal that the upload is still alive, so it keeps
   turning under reduced motion — just slower, and it beats the blanket
   animation override in base.css. */
@media (prefers-reduced-motion: reduce) {
  .upload-ring.is-spinning svg {
    animation: ringSpin 2.2s linear infinite !important;
  }
}

/* ── Success ───────────────────────────────────────────────────────────── */
.success-icon { animation: successPop .55s var(--e-spring) both; }
@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.success-screen .step-title  { animation: riseIn var(--d-base) var(--e-out) .18s both; }
.success-screen .step-subtitle { animation: riseIn var(--d-base) var(--e-out) .26s both; }
.review-id { animation: riseIn var(--d-base) var(--e-out) .34s both; }

/* ── Permission / error screens ────────────────────────────────────────── */
.permission-icon { animation: successPop .5s var(--e-spring) both; }
.permission-steps { animation: riseIn var(--d-base) var(--e-out) .16s both; }

/* ==========================================================================
   Full-screen camera
   The picture and video screens break out of the form's scroll column and
   take the whole viewport. Inside the normal flow the stage grows with the
   camera feed and pushes the shutter below the fold, so on a phone the user
   had to scroll to find the button that takes the photo. As an overlay the
   controls are always pinned in view and nothing scrolls.
   ========================================================================== */
.step[data-step="capture-picture"].active,
.step[data-step="capture-video"].active {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 560px;          /* stays in the column on desktop, full-bleed on mobile */
  z-index: 60;
  margin: 0;
  padding: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* The slide keyframes animate translateX, which would fight the centring
     transform. Fade instead. */
  animation: overlayIn var(--d-base) var(--e-out) both !important;
  transform: translateX(-50%);
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Title floats over the feed instead of taking a row of its own. */
.step[data-step="capture-picture"].active > .step-title,
.step[data-step="capture-video"].active > .step-title {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-4)) var(--s-5) var(--s-5);
  color: var(--c-white);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
  animation: none;
}

/* Camera fills everything the controls do not use. */
.step[data-step="capture-picture"].active .stage,
.step[data-step="capture-video"].active .stage {
  flex: 1;
  min-height: 0;
  border-radius: 0;
  background: #000;
}

/* Controls pin to the bottom, clear of the home indicator. */
.step[data-step="capture-picture"].active .camera-bar,
.step[data-step="capture-video"].active .camera-bar,
.step[data-step="capture-picture"].active .preview-bar,
.step[data-step="capture-video"].active .preview-bar {
  flex-shrink: 0;
  border-radius: 0;
  margin-top: 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-5));
}

/* Nothing behind the overlay should scroll or show through. */
body.capture-fullscreen .app-header,
body.capture-fullscreen .app-footer { visibility: hidden; }
body.capture-fullscreen .app-body { overflow: hidden; }

/* Short phones in landscape: shrink the controls rather than clipping them. */
@media (max-height: 480px) {
  .step[data-step="capture-picture"].active .camera-bar,
  .step[data-step="capture-video"].active .camera-bar,
  .step[data-step="capture-picture"].active .preview-bar,
  .step[data-step="capture-video"].active .preview-bar {
    padding-top: var(--s-3);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-3));
  }
  .step[data-step="capture-picture"].active .shutter,
  .step[data-step="capture-video"].active .shutter { width: 52px; height: 52px; }
  .step[data-step="capture-picture"].active .cam-btn-circle,
  .step[data-step="capture-video"].active .cam-btn-circle { width: 40px; height: 40px; }
  .step[data-step="capture-picture"].active > .step-title,
  .step[data-step="capture-video"].active > .step-title { display: none; }
}

/* ==========================================================================
   Oversize media notice
   Sits on the capture screen itself: the fix for a file that is too big is
   to record again, and that button is right here. Sending the user to the
   generic error screen would cost them the recording and the screen both.
   ========================================================================== */
.media-error {
  margin: 0 var(--s-5) var(--s-3);
  justify-content: center;
  text-align: center;
  unicode-bidi: plaintext;
}

/* On the full-screen camera overlays the row sits on black, where the normal
   error colour is unreadable — give it its own surface instead. */
.step[data-step="capture-picture"].active .media-error,
.step[data-step="capture-video"].active .media-error {
  flex-shrink: 0;
  margin: 0;
  padding: var(--s-3) var(--s-5);
  color: var(--c-white);
  background: rgba(190, 30, 45, .92);
  z-index: 3;
}