/* =========================================================
   TTS.CSS – Đợt 3a: Đọc sách bằng giọng (Web Speech API)
   Thanh phát nổi + tô sáng câu đang đọc. Class prefix rd-tts.
   ========================================================= */

/* ---------- tô sáng câu đang đọc (Custom Highlight API) ---------- */
::highlight(rd-tts) { background: #ffe08a; color: #1a1a1a; border-radius: 3px; }
body[data-theme="dark"] ::highlight(rd-tts) { background: #f6c350; color: #16130c; }
body[data-theme="sepia"] ::highlight(rd-tts) { background: #ecd08a; color: #3b2a1a; }
/* fallback khi trình duyệt không có Custom Highlight API: bọc span */
.rd-tts-active { background: #ffe08a; color: #1a1a1a; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- thanh phát nổi ---------- */
.rd-ttsbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(24px);
  z-index: 58; display: none; align-items: center; gap: 10px;
  max-width: min(680px, 94vw); padding: 8px 12px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow);
  font-family: var(--font-sans); opacity: 0; transition: opacity .2s, transform .2s;
}
.rd-ttsbar.show { display: flex; opacity: 1; transform: translateX(-50%); }

.rd-ttsbtn {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
.rd-ttsbtn:hover { background: var(--bg-2); }
.rd-ttsbtn:active { transform: scale(.93); }
.rd-ttsbtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rd-ttsbtn--main { background: var(--brand); color: #fff; border-color: var(--brand); width: 46px; height: 46px; }
.rd-ttsbtn--main:hover { background: var(--brand-2); }
.rd-ttsbtn--main svg { width: 22px; height: 22px; }
.rd-ttsbtn--main svg.rd-ic-play { fill: #fff; stroke: none; }

.rd-ttsinfo { font-size: 12px; color: var(--ink-soft); min-width: 92px; max-width: 150px; line-height: 1.25; }
.rd-ttsinfo b { color: var(--brand); }

.rd-ttsfield { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.rd-ttsfield select {
  border: 1px solid var(--border); background: var(--paper); color: var(--ink);
  border-radius: 8px; padding: 5px 7px; font-size: 12px; max-width: 130px; cursor: pointer;
}
.rd-ttsfield input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 90px; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); outline: none; cursor: pointer;
}
.rd-ttsfield input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); cursor: pointer; }
.rd-ttsfield input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); cursor: pointer; }

.rd-ttsclose { width: 32px; height: 32px; }
.rd-ttsclose svg { width: 16px; height: 16px; }

/* nút mở trong toolbar khi đang đọc -> nhấp nháy nhẹ */
.rd-btn.rd-tts-on { background: var(--accent); color: #1a1a1a; }

@media (max-width: 820px) {
  .rd-ttsbar { bottom: 70px; gap: 8px; padding: 7px 10px; flex-wrap: wrap; justify-content: center; border-radius: 16px; }
  .rd-ttsinfo { order: -1; width: 100%; text-align: center; min-width: 0; max-width: none; }
  .rd-ttsfield select { max-width: 110px; }
  .rd-ttsfield input[type="range"] { width: 70px; }
}
@media print { .rd-ttsbar { display: none !important; } }