/* 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 var(--ss-mic-sage-glow-soft, rgba(74, 122, 104, 0.4))); }
  50%      { opacity: 0.7; filter: drop-shadow(0 0 8px var(--ss-mic-sage-glow-strong, rgba(74, 122, 104, 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;
  --ss-mic-sage-glow-soft: rgba(74, 122, 104, 0.4);
  --ss-mic-sage-glow-strong: rgba(74, 122, 104, 0.7);
  --ss-mic-sage-glow-done: rgba(74, 122, 104, 0.3);
}

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

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

.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(92, 77, 67, 0.12);
  border-top-color: var(--warm-text, #5C4D43);
  border-radius: 50%;
  animation: ss-spin 0.6s linear infinite;
}

/* Listening — sage glow + pulse */
.ss-mic.ss-mic--listening {
  color: var(--sage-dark, #4A7A68);
}

.ss-mic.ss-mic--listening svg {
  stroke: var(--sage-dark, #4A7A68);
  animation: ss-pulse 2s ease infinite;
}

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

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

/* Processing — warm pulse */
.ss-mic.ss-mic--processing {
  color: var(--warm-text, #5C4D43);
  animation: ss-rec-pulse 1.2s ease-in-out infinite;
}

/* Done — brief sage flash, then fades */
.ss-mic.ss-mic--done {
  color: var(--sage-dark, #4A7A68);
  transition: color 0.3s, opacity 0.6s;
}

.ss-mic.ss-mic--done svg {
  filter: drop-shadow(0 0 4px var(--ss-mic-sage-glow-done, rgba(74, 122, 104, 0.3)));
}

/* ── 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.15);
  border-top-color: var(--warm-text, #E8DDD4);
}

[data-theme="dark"] .ss-mic {
  --ss-mic-sage-glow-soft: rgba(124, 184, 164, 0.4);
  --ss-mic-sage-glow-strong: rgba(124, 184, 164, 0.7);
  --ss-mic-sage-glow-done: rgba(124, 184, 164, 0.3);
}

[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 ─────────────────────────────────────────── */

/* ── Error toast (auto-shown by stt.js) ── */
.ss-stt-toast {
  position: fixed;
  bottom: calc(var(--mn-bar-height, 0px) + env(safe-area-inset-bottom, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bb-warm-text, #3E3428);
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 10500;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.ss-stt-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
[data-theme="dark"] .ss-stt-toast {
  background: rgba(42, 38, 34, 0.95);
  border: 1px solid rgba(232, 221, 212, 0.1);
  color: #E8DDD4;
}

@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;
  }
  .ss-stt-toast {
    transition: none;
  }
}