/* ══════════════════════════════════════════════════════════════
 * Illusia TTS — Text-to-Speech Interface
 *
 * Override do player TTS do Fictioneer para o estilo Illusia.
 * Barra fixa no bottom com glass surface, highlight amber no
 * paragrafo atual, modal de settings estilizado.
 *
 * Secoes:
 *  1. Control Bar (bottom fixed)
 *  2. Control Buttons
 *  3. Active States (playing/paused)
 *  4. Current Reading Highlight
 *  5. Paragraph Tools (TTS trigger)
 *  6. Settings Modal
 *  7. Light Mode
 *  8. Reduced Motion
 *  9. Reduced Transparency
 *
 * @since 1.17.1
 * @since 1.92.0 §9 reduced-transparency fallback
 * ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 1. CONTROL BAR
 *
 * Barra fixa no bottom da tela com glass surface. Aparece
 * quando o usuario inicia o TTS num paragrafo.
 * ═══════════════════════════════════════════════════════════════ */

.tts-interface {
  background: hsl(var(--bg-900-free) / .88);
  backdrop-filter: blur(clamp(8px, 1.5vw, 16px));
  -webkit-backdrop-filter: blur(clamp(8px, 1.5vw, 16px));
  border-top: 1px solid var(--glass-border);
  padding: var(--space-sm) var(--space-md);
}

/* Shimmer line no topo (regra #10) */
.tts-interface::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .15),
    transparent
  );
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 2. CONTROL BUTTONS
 *
 * Botoes Play, Pause, Stop, Skip, Scroll, Settings.
 * Estilo compacto com glass bg, hover amber.
 * ═══════════════════════════════════════════════════════════════ */

.tts-interface__controls {
  display: flex;
  gap: 2px;
}

/* Toolbar-grouped buttons (`<button class="button">` em sequência).
 * Mapeamos pro look `._quick._sm` canônico (Fira Code 500 .08em ghost)
 * + radius 0 entre membros + radius arredondado nos extremos. */
.tts-interface__controls .button {
  --btn-size:   var(--text-2xs);
  --btn-pad-y:  var(--space-2xs);
  --btn-pad-x:  var(--space-sm);
  --btn-radius: 0;
  --btn-bg:     hsl(var(--bg-800-free) / .5);
  --btn-fg:     var(--fg-400);
  --btn-border: var(--glass-border);
  --btn-bg-hover:     hsl(var(--amber-free) / .08);
  --btn-fg-hover:     var(--amber);
  --btn-border-hover: hsl(var(--amber-free) / .2);
  --btn-weight: 500;
}

.tts-interface__controls > :first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tts-interface__controls > :last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.tts-interface__controls .button i { font-size: 1em; }


/* ═══════════════════════════════════════════════════════════════
 * 3. ACTIVE STATES
 *
 * Botao ativo (playing/paused) com amber solido.
 * ═══════════════════════════════════════════════════════════════ */

.tts-interface:not(.ended).playing .button.play,
.tts-interface:not(.ended).paused .button.pause {
  color: var(--bg-900);
  background: var(--amber);
  border-color: var(--amber);
}


/* ═══════════════════════════════════════════════════════════════
 * 4. CURRENT READING HIGHLIGHT
 *
 * Faixa translucida amber atras do paragrafo sendo lido.
 * ═══════════════════════════════════════════════════════════════ */

.current-reading::after {
  background: hsl(var(--amber-free) / .06);
  border-radius: var(--r-sm);
}


/* ═══════════════════════════════════════════════════════════════
 * 5. PARAGRAPH TOOLS (TTS trigger)
 *
 * Toolbar flutuante sobre paragrafos. Contem o botao TTS,
 * bookmark, quote, etc. Estilo glass compacto.
 * ═══════════════════════════════════════════════════════════════ */

.paragraph-tools__actions {
  filter: none;
}

/* Paragraph-tools floating toolbar — toolbar agrupado com glass blur
 * próprio (denser que TTS porque flutua sobre texto). */
.paragraph-tools__actions .button {
  --btn-size:   var(--text-2xs);
  --btn-pad-y:  var(--space-3xs);
  --btn-pad-x:  var(--space-xs);
  --btn-radius: 0;
  --btn-letter: .04em;
  --btn-bg:     hsl(var(--bg-900-free) / .9);
  --btn-fg:     var(--fg-400);
  --btn-border: var(--glass-border);
  --btn-bg-hover:     hsl(var(--amber-free) / .08);
  --btn-fg-hover:     var(--amber);
  --btn-border-hover: hsl(var(--amber-free) / .2);
  --btn-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.paragraph-tools__actions > :first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.paragraph-tools__actions > :last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }


/* ═══════════════════════════════════════════════════════════════
 * 6. SETTINGS MODAL
 *
 * Estilos base do TTS Settings modal agora vivem em
 * illusia-modals.css (wrapper, header, close, inputs, hr, reset).
 * Esta seção reservada para overrides TTS-específicos se necessário.
 * ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 7. LIGHT MODE
 * ═══════════════════════════════════════════════════════════════ */

:root[data-mode=light] .tts-interface {
  background: hsl(var(--bg-50-free) / .9);
  border-top-color: hsl(var(--illusia-border-base) / .12);
}

:root[data-mode=light] .tts-interface__controls .button {
  background: hsl(var(--bg-200-free) / .5);
  border-color: hsl(var(--illusia-border-base) / .12);
}

:root[data-mode=light] .tts-interface:not(.ended).playing .button.play,
:root[data-mode=light] .tts-interface:not(.ended).paused .button.pause {
  color: var(--bg-50);
}

:root[data-mode=light] .current-reading::after {
  background: hsl(var(--amber-free) / .08);
}

:root[data-mode=light] .paragraph-tools__actions .button {
  background: hsl(var(--bg-50-free) / .92);
  border-color: hsl(var(--illusia-border-base) / .12);
}

/* TTS Settings light mode: coberto por illusia-modals.css */


/* ═══════════════════════════════════════════════════════════════
 * 8. REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .tts-interface__controls .button,
  .paragraph-tools__actions .button {
    transition: none;
  }
  /* TTS Settings .close/.reset: coberto por illusia-modals.css */
}


/* ═══════════════════════════════════════════════════════════════
 * 9. REDUCED TRANSPARENCY
 *
 * Para usuarios que pediram menos transparencia no SO (Windows
 * "Transparency effects: off", macOS "Reduce transparency"). O
 * backdrop-filter blur fica caro e desorientador: substituir por
 * superficie opaca solida usando o token base.
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-transparency: reduce) {
  .tts-interface,
  .paragraph-tools__actions {
    background: var(--bg-800);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .paragraph-tools__actions .button {
    background: var(--bg-700);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :root[data-mode=light] .tts-interface,
  :root[data-mode=light] .paragraph-tools__actions,
  :root[data-mode=light] .paragraph-tools__actions .button {
    background: var(--bg-100);
  }
}