/* voice.css — styling for the "Read Aloud" button injected by voice.js
   into the character/villain/watchlist detail view. The button reuses
   the site's existing .btn look (see index.html/villains.html/watchlist.html
   inline <style>); this file only adds the loading/playing state tweaks
   that voice.js toggles via classList. */

.voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.voice-btn.loading {
  opacity: 0.7;
  cursor: wait;
}

.voice-btn.playing {
  border-color: var(--crimson, #d4183a);
  color: var(--crimson, #d4183a);
}