/* stt-tts-ui.css — Canonical mic + play button states
 *
 * Classes:  .ss-mic   (mic button)     .ss-play  (play/TTS button)
 * States:   --connecting / --listening / --recording / --error   (mic)
 *           --loading / --playing / --paused                    (play)
 *
 * Pages adopt gradually — add ss-mic / ss-play alongside existing classes.
 */

/* ── Animations ─────────────────────────────────────────────── */

@keyframes ss-spin {
  to { transform: rotate(360deg); }
}

@keyframes ss-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4)); }
  50%      { opacity: 0.7; filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.7)); }
}

@keyframes ss-rec-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes ss-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

@keyframes ss-play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08); }
}

/* ── Mic button: base ───────────────────────────────────────── */

.ss-mic {
  position: relative;
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
}

/* Connecting — spinner overlay, block clicks */
.ss-mic.ss-mic--connecting {
  pointer-events: none;
}

.ss-mic.ss-mic--connecting svg {
  opacity: 0.3;
}

.ss-mic.ss-mic--connecting::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--color-primary, #6366f1);
  border-radius: 50%;
  animation: ss-spin 0.8s linear infinite;
}

/* Listening — green glow + pulse */
.ss-mic.ss-mic--listening {
  color: var(--color-success, #22c55e);
}

.ss-mic.ss-mic--listening svg {
  stroke: var(--color-success);
  animation: ss-pulse 2s ease infinite;
}

/* Recording — red pulse (chat-style "recording in progress") */
.ss-mic.ss-mic--recording {
  color: var(--color-error, #ef4444);
  animation: ss-rec-pulse 1.5s ease-in-out infinite;
}

/* Error — red + shake */
.ss-mic.ss-mic--error {
  color: var(--color-error, #ef4444);
  animation: ss-shake 0.3s ease;
}

/* ── Play button: base ──────────────────────────────────────── */

.ss-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.ss-play:hover:not(:disabled) {
  transform: scale(1.06);
}

.ss-play:active:not(:disabled) {
  transform: scale(0.95);
}

.ss-play:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Loading — spinner overlay */
.ss-play.ss-play--loading {
  position: relative;
}

.ss-play.ss-play--loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ss-spin 0.7s linear infinite;
}

/* Playing */
.ss-play.ss-play--playing {
  background: var(--color-text-primary);
}

/* Paused — gentle pulse */
/* Paused — static, no animation */
.ss-play.ss-play--paused {
  
}

/* ── Reading highlight (text block being read aloud) ────────── */

.ss-reading-active {
  background: rgba(99, 102, 241, 0.08);
  border-radius: 4px;
  transition: background 0.2s;
}

/* ── Spin utility (for inline SVG spinners) ─────────────────── */

.ss-spin-icon {
  animation: ss-spin 1s linear infinite;
}

/* ── Dark mode ──────────────────────────────────────────────── */

[data-theme="dark"] .ss-mic.ss-mic--connecting::after {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: var(--color-primary, #818cf8);
}

[data-theme="dark"] .ss-play {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .ss-play:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .ss-play.ss-play--playing {
  background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .ss-play.ss-play--loading::after {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: #fff;
}

[data-theme="dark"] .ss-reading-active {
  background: rgba(129, 140, 248, 0.12);
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ss-mic.ss-mic--connecting::after,
  .ss-mic.ss-mic--listening svg,
  .ss-mic.ss-mic--recording,
  .ss-play.ss-play--loading::after,
  .ss-play.ss-play--paused,
  .ss-spin-icon {
    animation: none;
  }
}