/* ── Processing state (mic) ── */
#mic-btn.processing { position: relative; opacity: .55; }
#mic-btn.processing svg { visibility: hidden; }
#mic-btn.processing::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(204,0,0,.25); border-top-color: var(--wa-red);
  border-radius: 50%; animation: micSpin .7s linear infinite;
}
@keyframes micSpin { to { transform: rotate(360deg); } }

/* ── Cancel state (send button becomes a cancel/discard control) ── */
#send-btn.is-cancel { background: #8a8a8a; box-shadow: none; position: relative; }
#send-btn.is-cancel svg { visibility: hidden; }
#send-btn.is-cancel::after {
  content: '✕'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1;
}

/* ── Processing status (replaces waveform while waiting for a reply) ── */
.voice-status {
  display: none; flex: 1; align-items: center; justify-content: center;
  border: 1.5px solid rgba(204,0,0,.35); border-radius: 26px;
  background: var(--wa-grad-soft); min-height: 34px;
}
.voice-status .chat-spinner { padding: 0; }

/* ── Per-message play button (only speaks when clicked) ── */
.speak-btn.speaking { background: var(--wa-grad-soft); border-color: var(--wa-red); color: var(--wa-red); }