:root {
  --wj-tts-primary: var(--main-theme-color);
  --wj-tts-secondary: var(--main-theme-color);
  --wj-tts-chip-bg: var(--main-theme-color);
}

/* Card TTS / estrutura */
.wj-tts-player { background:#fff; border:1px solid #e9ecef; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.06); padding:16px 18px; margin: 5px 0;}
.wj-tts-head   { font-size:13px; color:#6b7280; margin-bottom:8px; }
.wj-tts-row    { display:flex; align-items:center; gap:12px; }
.wj-tts-left, .wj-tts-right { display:flex; align-items:center; gap:8px; }
.wj-tts-left { min-width:42px; }
.wj-tts-right{ min-width:67px; justify-content:flex-end; }

/* Botões */
.wj-tts-play, .wj-tts-mute {
  appearance:none; border:0; background:#fff; width:36px; height:36px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 0 0 1px #e9ecef inset;
  color: var(--wj-tts-primary); 
}
.wj-tts-play:hover, .wj-tts-mute:hover { box-shadow:0 0 0 1px #d9dde3 inset; background:#fafafa; }
.wj-tts-muted { opacity:.7; }

/* Wave */
.wj-tts-wave { flex:1; height:48px; }

/* Progresso fino */
.wj-tts-progress-wrap { margin-top:8px; }
.wj-tts-progress-rail { position:relative; height:4px; background:#eee; border-radius:999px; overflow:hidden; }
.wj-tts-progress-fill { position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,var(--wj-tts-primary),var(--wj-tts-secondary)); border-radius:999px; }
.wj-tts-progress-hit  { position:absolute; inset:-6px 0 -6px 0; cursor:pointer; }

/* Tempo + velocidade */
.wj-tts-time { font-size:12px; color:#6b7280; min-width:32px; text-align:right; }
.wj-tts-chip { border:0; border-radius:10px; padding:4px 8px; line-height:1; font-size:12px; color:#fff; background:var(--wj-tts-chip-bg); cursor:pointer; }

/* Cabeçalho em linha: título + status */
.wj-tts-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.wj-tts-head { font-size:13px; color:#6b7280; margin:0; } /* antes tinha margin-bottom */

/* Status agora sem margin-top e como inline-flex */
.wj-tts-status { display:none; align-items:center; gap:8px; font-size:12px; color:#6b7280; }
.wj-tts-spinner { width:14px; height:14px; border:2px solid #d1d5db; border-top-color:var(--wj-tts-primary); border-radius:50%; display:inline-block; animation:wjspin .8s linear infinite; }
@keyframes wjspin { to { transform: rotate(360deg); } }

.wj-tts-wave{ position:relative; }
.wj-tts-flatline{ position:absolute; inset:0; display:flex; align-items:center; pointer-events:none; z-index:2; }
.wj-tts-flatline > span{ display:block; width:100%; height:1px; background:#dfe3ea; }
.wj-tts-wave.is-ready .wj-tts-flatline{ display:none; }

/* ============================================================
   Skin: compacta (mais fina que a padrão, mantém a onda)
   ============================================================ */
.wj-tts[data-skin="compacta"] .wj-tts-player     { padding:10px 12px; border-radius:6px; }
.wj-tts[data-skin="compacta"] .wj-tts-top        { margin-bottom:4px; justify-content:center; }
.wj-tts[data-skin="compacta"] .wj-tts-head       { display:none; }
.wj-tts[data-skin="compacta"] .wj-tts-status     { font-size:11px; gap:6px; }
.wj-tts[data-skin="compacta"] .wj-tts-spinner    { width:12px; height:12px; }
.wj-tts[data-skin="compacta"] .wj-tts-row        { gap:8px; }
.wj-tts[data-skin="compacta"] .wj-tts-play,
.wj-tts[data-skin="compacta"] .wj-tts-mute       { width:28px; height:28px; border-radius:6px; }
.wj-tts[data-skin="compacta"] .wj-tts-wave       { height:28px; }
.wj-tts[data-skin="compacta"] .wj-tts-progress-wrap { margin-top:4px; }
.wj-tts[data-skin="compacta"] .wj-tts-time       { font-size:11px; min-width:28px; }
.wj-tts[data-skin="compacta"] .wj-tts-chip       { font-size:11px; padding:3px 6px; border-radius:8px; }

/* ============================================================
   Skin: minima (barra única, sem onda e sem cabeçalho)
   ============================================================ */
.wj-tts[data-skin="minima"] .wj-tts-player  {
  display:flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
}
.wj-tts[data-skin="minima"] .wj-tts-top          { display:none; }
.wj-tts[data-skin="minima"] .wj-tts-row          { display:contents; }
.wj-tts[data-skin="minima"] .wj-tts-left         { order:1; min-width:0; }
.wj-tts[data-skin="minima"] .wj-tts-wave         { display:none; }
.wj-tts[data-skin="minima"] .wj-tts-progress-wrap{ order:2; flex:1; margin:0; }
.wj-tts[data-skin="minima"] .wj-tts-right        { order:3; }
.wj-tts[data-skin="minima"] .wj-tts-play,
.wj-tts[data-skin="minima"] .wj-tts-mute         { width:26px; height:26px; border-radius:50%; }
.wj-tts[data-skin="minima"] .wj-tts-time         { font-size:11px; min-width:26px; }
.wj-tts[data-skin="minima"] .wj-tts-chip         { font-size:10px; padding:2px 6px; border-radius:8px; }