/* 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:92px; 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;
}
.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,#b61d1d,#e7b8b8); 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:42px; text-align:right; }
.wj-tts-chip { border:0; border-radius:10px; padding:4px 8px; line-height:1; font-size:12px; color:#fff; background:#7a1c1c; 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:#b61d1d; 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; }