/**
 * Novel TTS Reader styles
 * Location: /assets/css/tts-reader.css
 * @version 2.1.0
 *
 * Flexible theo skin: KHÔNG dùng màu cứng (hardcode) cho nền/viền/chữ.
 * Thay vào đó:
 *   1) .imc-tts-bar dùng chung class "uk-background-muted" (giống
 *      .imc-sticky — thanh điều hướng sticky khi đọc chapter), nên mỗi
 *      skin (glass, cyberpunk, noir, modern, retro, sakura, sumi...) chỉ
 *      cần khai báo `.imc-tts-bar.uk-background-muted` cạnh
 *      `.imc-sticky.uk-background-muted` trong file skin-*.css của nó là
 *      tự động có đúng màu nền/viền/bóng/blur riêng — xem các file đó.
 *   2) Màu chữ dùng `color: inherit` -> tự ăn theo `.uk-light` (dark mode)
 *      hoặc màu chữ mặc định (light mode) của theme, không cần set riêng.
 *   3) Hover/border/select dùng color-mix(...currentColor...) nên luôn
 *      tương phản đúng dù nền sáng hay tối, không phải khai báo lại theo
 *      từng skin.
 *   4) Điểm nhấn (nút play, focus ring) dùng var(--im-theme-color) — biến
 *      màu thương hiệu chung của theme (đổi theo Theme Color trong admin).
 */

.imc-tts-trigger-wrap {
    margin: 0 0 12px;
    text-align: right;
}

.imc-tts-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
}

/* Câu đang được đọc — giữ tông vàng hổ phách cố định vì cần nổi bật đều
   trên mọi skin (kể cả skin nền tối lẫn nền sáng), không ăn theo theme
   color để tránh trường hợp theme color trùng màu nền gây khó nhận biết. */
.imc-tts-sentence.is-reading {
    background: rgba(255, 196, 0, 0.28);
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.28);
    transition: background .15s ease;
}

/* Chỉ khi đã bấm nút "Nghe" (toolbar mở) mới cho bấm vào câu để đọc */
.imc-tts-active .imc-tts-sentence {
    cursor: pointer;
}

/* ==============================
   Thanh điều khiển nổi ở dưới màn hình
   ============================== */
.imc-tts-bar {
    /* Khoảng "nâng" thanh lên cao hơn khi thanh sticky đọc chapter
       (.imc-sticky.is-visible) đang hiện — được JS cập nhật động theo
       chiều cao thật của .imc-sticky, xem tts-reader.js. */
    --imc-tts-lift: 0px;

    position: fixed;
    left: 50%;
    bottom: calc(-80px - var(--imc-tts-lift));
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    padding: 8px 14px;
    border-radius: 999px !important; /* luôn bo tròn dạng viên thuốc, bất kể skin đặt border-radius khác cho nhóm panel dùng chung */
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    transition: bottom .25s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
}

.imc-tts-bar.is-open {
    bottom: calc(20px + var(--imc-tts-lift));
}

/* Ẩn thanh cuộn ngang nhưng vẫn cuộn được (dùng cho màn hình hẹp khi
   các control không đủ chỗ) — bổ sung nhánh Firefox, phần WebKit đã có
   sẵn ở style.css qua class dùng chung .disable-scrollbar. */
.imc-tts-bar.disable-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.imc-tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    transition: background-color .15s ease, color .15s ease;
}

.imc-tts-btn:hover,
.imc-tts-btn:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
    outline: none;
}

.imc-tts-playpause {
    font-size: 18px;
    color: var(--im-theme-color, currentColor);
}

/* Nút bật/tắt "tự động sang chương sau" — dùng .is-active theo đúng quy
   ước toggle-state chung của theme (xem .uk-button-default.is-active,
   .sticker-category-btn.is-active... trong style.css), tô nền bằng màu
   thương hiệu + chữ trắng giống .uk-button-primary khi đang bật, để nổi
   bật rõ trạng thái dù đứng cạnh các nút khác đều "trong suốt". */
.imc-tts-btn.imc-tts-autonext.is-active {
    background: var(--im-theme-color);
    color: #fff;
}

.imc-tts-btn.imc-tts-autonext.is-active:hover,
.imc-tts-btn.imc-tts-autonext.is-active:focus-visible {
    background: var(--im-theme-color);
    opacity: .85;
}

.imc-tts-divider {
    width: 1px;
    align-self: stretch;
    background: color-mix(in srgb, currentColor 14%, transparent);
    flex: 0 0 auto;
}

.imc-tts-label {
    font-size: 12px;
    opacity: .75;
    white-space: nowrap;
}

.imc-tts-speed,
.imc-tts-voice {
    background: color-mix(in srgb, currentColor 7%, transparent);
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 12px;
    max-width: 140px;
}

.imc-tts-speed:focus,
.imc-tts-voice:focus {
    outline: none;
    border-color: var(--im-theme-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--im-theme-color) 25%, transparent);
}

.imc-tts-voice {
    max-width: 160px;
}

@media (max-width: 640px) {
    .imc-tts-bar {
        gap: 6px;
        padding: 6px 10px;
    }

    .imc-tts-voice {
        display: none; /* đỡ chật màn hình nhỏ, vẫn chọn được tốc độ */
    }
}

@media (prefers-reduced-motion: reduce) {
    .imc-tts-bar {
        transition: none;
    }
}