/* ── Onboarding overlay ───────────────────────────────────────────────────────
   All rules use the ob- prefix. No global styles are modified.            */

/* Returning users: overlay suppressed before first paint via synchronous head script */
html.ob-complete .ob-overlay { display: none; }
/* JS-dismissed: keep as fallback, not used by the state machine itself */
.ob-overlay.ob-hidden { display: none; }

.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Respect iOS notch / Dynamic Island safe areas */
  padding: env(safe-area-inset-top)  env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #111827;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Smooth scrim → opaque transition when entering processing state */
  transition: background 0.35s ease;
  animation: ob-fade-in 0.25s ease-out both;
}

/* ── Guidance states (waiting_for_record, recording) ─────────────────────────
   The overlay becomes a subtle dim scrim so the app is visible behind it.
   pointer-events: none lets taps pass through to the Record / Stop button.  */

.ob-overlay.ob-dimmed {
  background: rgba(17, 24, 39, 0.72);
  pointer-events: none;
}

/* Hide the welcome card content while the scrim is active so it doesn't
   show through the semi-transparent background. */
.ob-overlay.ob-dimmed .ob-card {
  display: none;
}

/* ── Welcome card ─────────────────────────────────────────────────────────── */

.ob-card {
  width: 100%;
  max-width: 380px;
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.ob-wordmark {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #22c55e;
  opacity: 0.85;
}

.ob-title {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.25;
  color: #f9fafb;
  margin: 0;
}

.ob-body {
  font-size: 1rem;
  line-height: 1.75;
  color: #9ca3af;
  margin: 0;
  /* white-space: pre-line preserves intentional line breaks in copy */
  white-space: pre-line;
}

.ob-btn {
  margin-top: 0.25rem;
  padding: 0.875rem 2rem;
  background: #22c55e;
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
  min-height: 48px;
  transition: background 0.15s ease, transform 0.1s ease;
}

.ob-btn:hover  { background: #4ade80; }
.ob-btn:active { transform: scale(0.98); }

.ob-btn:focus-visible {
  outline: 3px solid #22c55e;
  outline-offset: 3px;
}

/* ── Entry animation ──────────────────────────────────────────────────────── */

@keyframes ob-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Bottom hint bar ─────────────────────────────────────────────────────────
   Shown during waiting_for_record and recording states.
   Above the dim overlay (z-index: 9010 > 9000) so it's always readable.
   Safe-area padding keeps it above the iOS home indicator.               */

.ob-hint {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9010;
  padding: 1rem 1.5rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  background: rgba(17, 24, 39, 0.96);
  border-top: 1px solid #374151;
  color: #d1d5db;
  font-size: 1rem;
  text-align: center;
  /* Re-created on each call so this animation always fires */
  animation: ob-fade-in 0.2s ease-out both;
}

/* ── Record / Stop button spotlight ─────────────────────────────────────────
   position: relative + z-index: 9001 lifts the button above the dim scrim
   (z-index: 9000) so it appears as a "spotlight" element.
   The button's parent (.app) has position: static so no stacking context
   isolates it — z-index comparison happens at the root level.            */

.ob-highlight {
  position: relative;
  z-index: 9001;
  animation: ob-pulse-ring 1.6s ease-out infinite;
}

@keyframes ob-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
}

/* ── Processing ellipsis ─────────────────────────────────────────────────── */

.ob-processing-text::after {
  content: '';
  animation: ob-ellipsis 1.6s steps(4, end) infinite;
}

@keyframes ob-ellipsis {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ob-overlay { animation: none; transition: none; }
  .ob-hint    { animation: none; }
  .ob-btn     { transition: none; }
  .ob-highlight {
    animation: none;
    box-shadow: 0 0 0 3px #22c55e;
  }
  .ob-processing-text::after {
    animation: none;
    content: '…';
  }
}