/* ---------- Voice messages: the composer's recording bar (assets/js/02c-voice.js) ---------- */

/* No speech recognition in this browser (or iPhone): no mic. Beats `hidden` toggling in sync(). */
#mic-btn[data-voice-off] { display: none !important; }

/* While recording, the bar replaces everything else in the pill. */
.composer.voice-on > :not(.voice-bar) { display: none !important; }
.composer.voice-on { align-items: center; }

.voice-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  animation: voice-in 0.18s ease-out;
}

.voice-trash { color: var(--text-2); }
.voice-trash svg { width: 23px; height: 23px; }

.voice-time {
  flex: none;
  min-width: 2.9em;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.voice-wave {
  flex: 1;
  min-width: 0;
  height: 30px;
  color: var(--text);
  margin-right: 6px;
  /* Old bars fade out as they reach the timer. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
  mask-image: linear-gradient(to right, transparent 0, #000 28px);
}

.voice-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.voice-send { transition: opacity 0.15s ease; }

@keyframes voice-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-bar { animation: none; }
}