/* ═══════════════════════════════════════════════════════════════════
   Components: Voice Recorder (Senior-friendly)
   ═══════════════════════════════════════════════════════════════════ */

.fy-voice-recorder {
  position: relative;
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  margin: 20px 0;
  padding: clamp(20px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(40, 72, 66, 0.18);
  border-radius: clamp(22px, 2.5vw, 30px);
  background:
    radial-gradient(circle at 92% 8%, rgba(168, 78, 47, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(255, 250, 241, 0.98), rgba(238, 241, 230, 0.94));
  box-shadow: 0 18px 42px rgba(40, 72, 66, 0.08);
}

.fy-voice-header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.fy-voice-header h3 {
  margin: 4px 0 5px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.fy-voice-header p { margin: 0; color: var(--color-ink-soft); line-height: 1.7; }

.fy-voice-eyebrow {
  color: var(--color-brand-700);
  font-size: 0.88rem;
  font-weight: var(--weight-black);
  letter-spacing: 0.08em;
}

/* Mic Seal */
.fy-mic-seal {
  position: relative;
  display: grid;
  width: 64px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-600);
  box-shadow: 0 10px 24px rgba(40, 72, 66, 0.2);
}

.fy-mic-seal::before {
  content: "";
  width: 16px;
  height: 25px;
  border: 3px solid var(--color-paper-light);
  border-radius: 12px;
}

.fy-mic-seal::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 27px;
  border-right: 3px solid transparent;
  border-bottom: 3px solid var(--color-paper-light);
  border-left: 3px solid transparent;
  border-radius: 0 0 18px 18px;
  transform: translateY(5px);
}

/* Permission Note */
.fy-permission-note {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  padding: 13px 16px;
  border-left: 4px solid var(--color-brand-700);
  border-radius: 10px 18px 18px 10px;
  background: rgba(255, 255, 255, 0.62);
}

.fy-permission-note span { margin: 0; color: var(--color-ink-soft); line-height: 1.7; }

/* Recording Meter */
.fy-recording-meter {
  display: none;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fy-voice-recorder[data-voice-phase="recording"] .fy-recording-meter { display: flex; }

.fy-recording-meter i {
  width: 7px;
  height: 18px;
  border-radius: 99px;
  background: var(--color-brand-700);
  animation: fy-voice-wave 0.9s ease-in-out infinite alternate;
}

.fy-recording-meter i:nth-child(2),
.fy-recording-meter i:nth-child(4) { animation-delay: -0.35s; }
.fy-recording-meter i:nth-child(3) { animation-delay: -0.7s; }

@keyframes fy-voice-wave { to { height: 46px; } }

/* Timer */
.fy-voice-timer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.fy-voice-timer span {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  color: var(--color-accent-600);
}

.fy-voice-timer small { color: var(--color-ink-soft); }

/* Status */
.fy-voice-status {
  min-height: 1.7em;
  margin: 0;
  text-align: center;
  font-weight: var(--weight-bold);
  color: var(--color-ink-soft);
}

.fy-voice-status:focus-visible {
  border-radius: 8px;
  outline: 3px solid rgba(168, 78, 47, 0.28);
  outline-offset: 4px;
}

/* Actions */
.fy-voice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.fy-voice-actions .button {
  min-width: min(100%, 190px);
  min-height: 54px;
}

/* Upload Progress */
.fy-upload-progress > div { display: grid; gap: 8px; }

.fy-progress-track {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(40, 72, 66, 0.14);
}

.fy-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent-600);
  transition: width 160ms ease-out;
}

/* Transcript Confirmation */
.fy-transcript-confirmation {
  padding: clamp(18px, 2.5vw, 26px);
  border: 2px solid rgba(168, 78, 47, 0.25);
  border-radius: var(--radius-xl);
  background: rgba(255, 250, 241, 0.94);
  outline: none;
}

.fy-transcript-confirmation:focus-visible {
  box-shadow: 0 0 0 4px rgba(168, 78, 47, 0.2);
}

.fy-transcript-quote {
  margin: 12px 0;
  padding: 16px 18px;
  border-left: 5px solid var(--color-accent-600);
  border-radius: 8px 18px 18px 8px;
  background: rgba(40, 72, 66, 0.08);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.8;
}

.fy-sensitive-note,
.fy-confirm-question { color: var(--color-ink-soft); }

.fy-confirm-question {
  font-weight: var(--weight-black);
  text-align: center;
}

.fy-transcript-confirmation mark {
  padding: 0.06em 0.18em;
  border-radius: 5px;
  color: var(--color-ink);
  background: #f5cf75;
  box-shadow: inset 0 -2px 0 rgba(168, 78, 47, 0.24);
}

/* Error state */
.fy-voice-recorder[data-voice-phase="error"] {
  border-color: rgba(168, 78, 47, 0.42);
  background: linear-gradient(145deg, #fff9f2, #f9e7dd);
}

/* Responsive */
@media (max-width: 620px) {
  .fy-voice-recorder { padding: 18px; }
  .fy-voice-header { grid-template-columns: 52px minmax(0, 1fr); }
  .fy-mic-seal { width: 52px; }
  .fy-permission-note { grid-template-columns: 1fr; gap: 4px; }
  .fy-voice-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fy-recording-meter i { animation: none; }
  .fy-progress-track span { transition: none; }
  .fy-recording-meter i:nth-child(2),
  .fy-recording-meter i:nth-child(4) { height: 34px; }
}