/* The recorder (RecorderPanel, public/js/recorder.js). */
.recorder {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-2) 0;
  text-align: center;
}

.recorder-prompt {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.recorder-state {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  width: 100%;
}

/* Voice-memo style: a red disc with the mic, a thin ring around a gap, and a slow halo inviting a tap; the label sits
   under the disc. The disc is the icon's own box (padding + background), so the markup stays one icon and one label. */
.record-button {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  background: none;
  border: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.record-button .icon {
  width: var(--size-record);
  height: var(--size-record);
  padding: var(--space-4);
  color: var(--color-on-solid);
  /* Rose with a soft glow, deepening into the purple at the edge. */
  background: radial-gradient(
    circle at 35% 30%,
    var(--color-record-glow),
    var(--color-record) 55%,
    color-mix(in srgb, var(--color-record) 55%, var(--color-accent))
  );
  border-radius: var(--radius-full);
  box-shadow:
    0 0 0 5px var(--color-surface),
    0 0 0 7px color-mix(in srgb, var(--color-record) 40%, transparent),
    0 6px 18px color-mix(in srgb, var(--color-record) 35%, transparent);
  transition:
    transform var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
  animation: record-halo 2.4s ease-out infinite;
}

.record-button:hover .icon {
  transform: scale(1.05);
}

.record-button:active .icon {
  transform: scale(0.94);
}

.record-button:focus-visible {
  outline: none;
}

.record-button:focus-visible .icon {
  box-shadow:
    0 0 0 5px var(--color-surface),
    0 0 0 8px var(--color-accent),
    0 6px 18px color-mix(in srgb, var(--color-record) 35%, transparent);
  animation: none;
}

@keyframes record-halo {
  0% {
    box-shadow:
      0 0 0 5px var(--color-surface),
      0 0 0 7px color-mix(in srgb, var(--color-record) 40%, transparent),
      0 0 0 7px color-mix(in srgb, var(--color-record) 30%, transparent);
  }
  70%,
  100% {
    box-shadow:
      0 0 0 5px var(--color-surface),
      0 0 0 7px color-mix(in srgb, var(--color-record) 40%, transparent),
      0 0 0 22px color-mix(in srgb, var(--color-record) 0%, transparent);
  }
}

.recorder-live {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(18rem, 100%);
}

.recorder-dot {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--color-record);
  border-radius: var(--radius-full);
  animation: recorder-pulse 1s ease-in-out infinite;
}

@keyframes recorder-pulse {
  50% {
    opacity: 0.3;
  }
}

.recorder-level {
  flex: 1;
  height: 0.5rem;
  overflow: hidden;
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.recorder-level span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-accent);
  transition: width var(--duration-fast) linear;
}

.recorder-time {
  min-width: 2.5rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.recorder-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.recorder audio {
  width: 100%;
}

.recorder .edit-buttons {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .recorder-dot,
  .record-button .icon {
    animation: none;
  }
}