/* tts.css — Thanh đọc văn bản (TTS) */

:root{
  --tts-bg:#0f1014;--tts-bg2:#16181f;--tts-bg3:#1c1e27;--tts-bg4:#232630;
  --tts-bg-hov:#2d3142;
  --tts-bd:#363a4e;--tts-bd2:#3c4058;
  --tts-txt:#dde1f5;--tts-txt2:#a0a7c4;--tts-txt3:#656b84;
  --tts-ac:#6366f1;--tts-ac2:#a5b4fc;--tts-ac-dim:#1e2050;
  --tts-ok:#4ade80;--tts-warn:#fbbf24;--tts-red:#f87171;--tts-red-dim:#3a1a1a;
  --tts-r:8px;--tts-r2:6px;
}

/* Reset bọc trong :where() để specificity = 0 — nếu không, selector có ID
   (#tts-root) sẽ có độ ưu tiên CAO HƠN các class thường phía dưới (VD
   .tts-divider { margin: 0 10px }), khiến margin/padding của từng nút,
   khoảng cách giữa các cụm (divider, vol-wrap, speed-wrap...) bị đè về 0
   và toàn bộ thanh công cụ bị dính chùm vào nhau. */
:where(#tts-root *, #tts-root *::before, #tts-root *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, Arial, sans-serif !important;
  line-height: 1;
}

#tts-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: flex;
  justify-content: center;
}

.tts-bar {
  width: 100%;
  background: var(--tts-bg2);
  border: 1px solid var(--tts-bd);
  border-bottom: none;
  border-radius: 0;
}

/* progress */
.tts-prog { height: 3px; background: var(--tts-bg4); }
.tts-prog-fill { height: 100%; width: 0%; background: var(--tts-ac); transition: width .4s; }

/* ── panel cài đặt (giọng đọc + nhạc nền) — một hàng ngang, cùng nhịp với
   thanh chính, tránh tình trạng 2 khối card cao thấp lệch nhau ── */
.tts-settings {
  background: var(--tts-bg3);
  border-bottom: 1px solid var(--tts-bd);
  padding: 12px 18px;
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tts-settings.open { display: flex; }
.tts-settings-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tts-txt2);
  white-space: nowrap;
  flex-shrink: 0;
}

.tts-settings-voices { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.tts-settings-voice-btn {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--tts-r2);
  background: var(--tts-bg4);
  border: 1px solid var(--tts-bd);
  color: var(--tts-txt2);
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.tts-settings-voice-btn svg { display: block; flex-shrink: 0; }
.tts-settings-voice-btn:hover { background: var(--tts-bg-hov); border-color: var(--tts-bd2); color: var(--tts-txt); }
.tts-settings-voice-btn.on { background: var(--tts-ac-dim); border-color: color-mix(in srgb, var(--tts-ac) 60%, transparent); color: var(--tts-ac2); }

.tts-bgm-vol-row { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tts-bgm-vol-row.disabled { opacity: .4; pointer-events: none; }

/* ── sentence / chunk row ── */
.tts-s-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tts-bd);
  background: var(--tts-bg3);
}
.tts-nav {
  all: unset;
  cursor: pointer;
  width: 29px;
  height: 29px;
  border-radius: var(--tts-r2);
  background: var(--tts-bg4);
  border: 1px solid var(--tts-bd);
  color: var(--tts-txt2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
  box-sizing: border-box;
}
.tts-nav:hover:not(:disabled) { background: var(--tts-ac-dim); border-color: var(--tts-ac); color: var(--tts-ac2); }
.tts-nav:disabled { opacity: .3; cursor: default; }
.tts-s-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--tts-txt);
  background: var(--tts-bg4);
  border: 1px solid var(--tts-bd);
  border-radius: var(--tts-r2);
  padding: 6px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tts-s-text.idle { color: var(--tts-txt3); font-style: italic; }

/* ── main row ── */
.tts-m-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  height: 58px;
  flex-wrap: nowrap;
}

/* pill group: Phát / Dừng / Tạm dừng */
.tts-pill-group {
  display: flex;
  align-items: center;
  background: var(--tts-bg3);
  border: 1px solid var(--tts-bd);
  border-radius: 11px;
  padding: 4px;
  gap: 2px;
  flex-shrink: 0;
}
.tts-p-btn {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tts-p-btn svg { display: block; flex-shrink: 0; }
.tts-p-btn.play { background: var(--tts-ac); color: #fff; padding: 0 18px; }
.tts-p-btn.play:hover { background: #7274f3; }
.tts-p-btn.stop {
  background: var(--tts-red-dim);
  border: 1px solid color-mix(in srgb, var(--tts-red) 50%, transparent);
  color: var(--tts-red);
  padding: 0 14px;
}
.tts-p-btn.stop:hover { background: #c0323d; border-color: #c0323d; color: #fff; }
.tts-p-btn.pause-btn { background: var(--tts-ac-dim); color: var(--tts-ac2); border: 1px solid var(--tts-ac); }
.tts-p-btn.pause-btn:hover { background: var(--tts-ac); color: #fff; border-color: var(--tts-ac); }

.tts-divider { width: 1px; height: 30px; background: var(--tts-bd); flex-shrink: 0; margin: 0 10px; }

/* speed */
.tts-speed-wrap { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.tts-speed-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--tts-txt2); white-space: nowrap; margin-right: 6px;
}
.tts-spd {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  height: 29px;
  width: 55px;
  border-radius: var(--tts-r2);
  font-size: 13px;
  font-weight: 600;
  color: var(--tts-txt2);
  text-align: center;
  transition: color .12s, background .12s, border-color .12s;
  background: var(--tts-bg4);
  border: 1px solid transparent;
}
.tts-spd:hover { color: var(--tts-txt); background: var(--tts-bg-hov); border-color: var(--tts-bd2); }
.tts-spd.on { background: var(--tts-ac); color: #fff; border-color: transparent; }

/* volume */
.tts-vol-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tts-vol-icon { color: var(--tts-txt2); display: flex; align-items: center; }
.tts-vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 76px; height: 3px; border-radius: 2px; border: none; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--tts-ac2) 0%, var(--tts-ac2) calc(var(--v)*1%), var(--tts-bd2) calc(var(--v)*1%), var(--tts-bd2) 100%);
}
.tts-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--tts-ac2); cursor: pointer; }
.tts-vol-slider::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--tts-ac2); cursor: pointer; }
.tts-vol-num { font-family: monospace; font-size: 12px; color: var(--tts-txt2); min-width: 24px; }

/* ── dropdown dùng chung (giọng đọc trên thanh chính đã bỏ, nay dùng cho chọn nhạc nền) ── */
.tts-dd-wrap { position: relative; flex: 1 1 190px; min-width: 190px; }
.tts-dd-btn {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--tts-r2);
  background: var(--tts-bg4);
  border: 1px solid var(--tts-bd);
  color: var(--tts-txt2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  width: 100%;
  transition: background .12s, color .12s, border-color .12s;
}
.tts-dd-btn svg { display: block; flex-shrink: 0; }
.tts-dd-btn:hover { background: var(--tts-bg-hov); border-color: var(--tts-bd2); color: var(--tts-txt); }
.tts-dd-btn.active { background: var(--tts-ac-dim); border-color: color-mix(in srgb, var(--tts-ac) 60%, transparent); color: var(--tts-ac2); }
.tts-dd-btn-label { flex: 1; text-align: left; }
.tts-dd-chevron { transition: transform .15s; flex-shrink: 0; }
.tts-dd-btn.active .tts-dd-chevron { transform: rotate(180deg); }

.tts-dd-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 180px;
  background: var(--tts-bg3);
  border: 1px solid var(--tts-bd);
  border-radius: var(--tts-r);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
.tts-dd-menu.open { display: flex; }
.tts-dd-item {
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--tts-r2);
  font-size: 13px;
  color: var(--tts-txt2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background .12s, color .12s;
}
.tts-dd-item-left { display: flex; align-items: center; gap: 8px; }
.tts-dd-item-left svg { flex-shrink: 0; }
.tts-dd-item:hover { background: var(--tts-bg4); color: var(--tts-txt); }
.tts-dd-item.on { color: var(--tts-ac2); background: var(--tts-ac-dim); }
.tts-dd-item .tts-dd-check { opacity: 0; color: var(--tts-ac2); flex-shrink: 0; }
.tts-dd-item.on .tts-dd-check { opacity: 1; }

/* auto-next toggle */
.tts-toggle-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; }
.tts-toggle-row span { font-size: 13px; color: var(--tts-txt2); white-space: nowrap; }
.tts-tog { width: 33px; height: 18px; border-radius: 9px; background: var(--tts-bg4); border: 1px solid var(--tts-bd); position: relative; transition: background .15s; flex-shrink: 0; }
.tts-tog.on { background: var(--tts-ac); border-color: var(--tts-ac); }
.tts-tog-k { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tts-tog.on .tts-tog-k { transform: translateX(15px); }

/* status */
.tts-status-row { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tts-txt3); flex-shrink: 0; }
.tts-dot.playing { background: var(--tts-ok); animation: tts-dot-pulse 1.4s ease-in-out infinite; }
.tts-dot.paused { background: var(--tts-warn); }
.tts-dot.loading { background: var(--tts-ac); animation: tts-dot-pulse .9s ease-in-out infinite; }
.tts-dot.err { background: var(--tts-red); }
.tts-status-row span { font-size: 13px; color: var(--tts-txt3); white-space: nowrap; }
@keyframes tts-dot-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .8; } }

/* gear / close */
.tts-icon-group { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.tts-ic {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  width: 35px; height: 35px;
  border-radius: var(--tts-r2);
  background: var(--tts-bg4);
  border: 1px solid var(--tts-bd);
  color: var(--tts-txt2);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.tts-ic:hover { background: var(--tts-bg3); border-color: var(--tts-bd2); color: var(--tts-txt); }
.tts-ic.active { background: var(--tts-ac-dim); border-color: color-mix(in srgb, var(--tts-ac) 60%, transparent); color: var(--tts-ac2); }

.tts-spacer { flex: 1; }

@media (max-width: 760px) {
  #tts-root { left: 0; right: 0; bottom: 0; }
  .tts-m-row { height: auto; min-height: 52px; padding: 8px 10px; flex-wrap: wrap; gap: 8px 0; }
  .tts-vol-wrap, .tts-speed-label { display: none; }
  .tts-divider { display: none; }
  .tts-settings { padding: 10px 12px; gap: 10px; }
  .tts-dd-wrap { flex-basis: 100%; }
  .tts-bgm-vol-row { width: 100%; }
  .tts-bgm-vol-row .tts-vol-slider { flex: 1; width: auto; }
}

/* ── Nút nổi "Nghe" ở lề phải (giống extension) ── */
.tts-float-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 700;
  background: var(--tts-ac);
  border: none;
  border-radius: 8px 0 0 8px;
  width: 38px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(0,0,0,0.3);
  transition: background 0.15s;
}
.tts-float-btn:hover { background: #7274f3; }
.tts-float-btn.on { background: #7274f3; }
.tts-float-btn svg { display: block; }

/* ── Khi thanh TTS đang mở: chừa chỗ cho nội dung & các nút nổi khác ──
   (tránh đè lên cuối nội dung chương và nút "lên đầu trang" / sticker)
   --tts-bar-h được tts.js đo và ghi động (chiều cao thật của .tts-bar),
   nên khoảng chừa luôn khớp với thanh TTS thay vì một số cố định — không
   bị đẩy lên quá mức, và cũng không bị thiếu (khiến toolbar đè lên nút/
   popup vì tts-root có z-index cao hơn). 130px chỉ là giá trị dự phòng
   trước khi JS kịp đo xong. */
body.tts-open .reading-area {
  padding-bottom: calc(var(--tts-bar-h, 130px) + 24px);
  transition: padding-bottom .15s ease;
}
body.tts-open #scrollTopBtn {
  /* Khoảng hở từ mép thanh TTS lên nút = khoảng hở từ nút ra lề phải (45px,
     theo đúng giá trị right:45px ở CSS gốc của #scrollTopBtn) để 2 khoảng
     cách đối xứng nhau. */
  bottom: calc(var(--tts-bar-h, 130px) + 45px);
  /* Dự phòng: nếu vì lý do gì đó vẫn còn chồng lấn về mặt toạ độ, đảm bảo
     nút vẫn nổi trên thanh TTS thay vì bị đè khuất phía dưới. */
  z-index: 850;
  transition: bottom .15s ease;
}
body.tts-open .support-sticker {
  /* Tương tự: khớp với left:45px ở CSS gốc của .support-sticker. */
  bottom: calc(var(--tts-bar-h, 130px) + 45px);
  z-index: 850;
  transition: bottom .15s ease;
}
/* Ở mobile, .support-sticker đổi lề trái xuống 20px (xem @media max-width:520px
   trong index.html) nên khoảng hở phía trên cũng phải đổi theo 20px để 2
   khoảng cách vẫn đối xứng nhau. */
@media (max-width: 520px) {
  body.tts-open .support-sticker {
    bottom: calc(var(--tts-bar-h, 130px) + 20px);
  }
}

/* ── Chế độ sáng: đổi bảng màu thanh TTS cho hợp giao diện sáng của trang
   (dùng cùng tông với --bg2/--bg3/--border/--text của index.html thay vì
   giữ nguyên bảng màu tối), đồng thời bỏ toàn bộ đổ bóng (box-shadow) của
   thanh audio và các nút liên quan. ── */
[data-theme="light"] #tts-root {
  --tts-bg:  #eef1f4;
  --tts-bg2: #fbfcfe;   /* nền thanh audio chính */
  --tts-bg3: #f4f6f8;   /* nền hàng câu đang đọc / pill nhóm play-stop-pause */
  --tts-bg4: #e9edf1;   /* nền các nút nhỏ (nav, tốc độ, giọng đọc, icon) */
  --tts-bg-hov: #d7dde3; /* nền khi hover — đậm hơn 1 chút so với bg4 */
  --tts-bd:  #dbe1e6;   /* viền mặc định */
  --tts-bd2: #c7cfd6;   /* viền hover */
  --tts-txt:  #2d2d2d;  /* chữ chính */
  --tts-txt2: #5a5a5a;  /* chữ phụ */
  --tts-txt3: #7c848d;  /* chữ mờ / trạng thái rảnh */
  --tts-ac:     #6366f1;
  --tts-ac2:    #4f46e5; /* đậm hơn bản tối để đủ tương phản trên nền trắng */
  --tts-ac-dim: #eef0ff; /* nền nhạt cho trạng thái active/hover theo accent */
  --tts-ok:      #16a34a;
  --tts-warn:    #d97706;
  --tts-red:     #dc2626;
  --tts-red-dim: #fdecec; /* nền nhạt cho nút Dừng, giống tông đỏ nhạt của trang */
}
[data-theme="light"] .tts-dd-menu,
[data-theme="light"] .tts-float-btn {
  box-shadow: none;
}
[data-theme="light"] #scrollTopBtn {
  box-shadow: none;
}