/* AudioBtn — round play button. Three states:
   default     krdict native MP3 available, plays inline
   premium     azure neural synthesis available (premium-only; gold dot)
   unavailable krdict has no audio + free tier (greyed)
*/
.audio-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.audio-btn--sm { width: 36px; height: 36px; }
.audio-btn--lg { width: 64px; height: 64px; }

.audio-btn--playing {
  background: var(--accent);
  color: var(--accent-ink);
  animation: audio-pulse 1.2s ease-out;
}

@keyframes audio-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

.audio-btn--unavailable {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--hairline-2);
  background: var(--surface);
  color: var(--ink-4);
  animation: none;
  box-shadow: none;
}

.audio-btn--unavailable .audio-btn__voice-dot { display: none; }
.audio-btn--unavailable.audio-btn--playing { animation: none; }

/* Tier-gated lock variant: muted look, neutral grey ring, no playing
   animation, but cursor stays pointer because the tap opens the paywall. */
.audio-btn--locked {
  opacity: 1;            /* icon-level opacity handled below */
  cursor: pointer;
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  color: var(--ink-3);
}

.audio-btn--locked > svg { opacity: 0.5; }
.audio-btn--locked.audio-btn--playing { animation: none; box-shadow: none; }

/* Inline LockBadge sitting on a locked AudioBtn — bottom-right corner
   overlay, absolutely positioned so it does not shift the speaker icon. */
.audio-btn--locked .lock-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  pointer-events: none;
  font-size: 9px;
  padding: 2px 5px;
  line-height: 1;
}

.audio-btn .audio-btn__voice-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid var(--surface);
}

.audio-btn__caption {
  font-size: var(--t-tiny);
  color: var(--ink-3);
  margin-top: 4px;
  text-align: center;
}

/* ── AudioSourceCaption — pill shown under AudioBtn on Word Detail ──── */
.audio-src-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-tiny);
  color: var(--ink-3);
  line-height: 1.2;
}

.audio-src-cap--md { font-size: 12px; }

.audio-src-cap__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
}

.audio-src-cap__dot--krdict { background: var(--ink-3); }
.audio-src-cap__dot--azure  { background: var(--gold); }
.audio-src-cap__dot--none   { background: var(--ink-4); }

.audio-src-cap__label {
  color: var(--ink-3);
}