/**
 * Init Manga - TTS reader styles
 * Location: /assets/css/tts.css
 */

/* Đoạn đang đọc */
.tts-reading {
    background: rgba(30, 135, 240, .12);
    border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(30, 135, 240, .12);
    transition: background .2s;
}
.uk-light .tts-reading {
    background: rgba(120, 170, 255, .18);
    box-shadow: 0 0 0 4px rgba(120, 170, 255, .18);
}

/* Cụm nút công cụ trên header chương (novel): Nghe Audio + chương + cấu hình */
.imc-reader-tools.is-novel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.imc-reader-tools.is-novel .imc-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border-radius: 8px;
    color: #5b6470;
}
.uk-light .imc-reader-tools.is-novel .imc-tool-icon { color: #aab1ba; }
.imc-reader-tools.is-novel .imc-tool-icon:hover { background: rgba(30,135,240,.10); color: #1e87f0; }
/* Ẩn chữ "Cấu hình" để icon gọn như mockup (giữ lại cho screen reader) */
.imc-reader-tools.is-novel #cauhinh {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.imc-tool-listen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #1e87f0;
    color: #fff !important;
    border-radius: 999px;
    padding: 5px 13px 5px 11px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: filter .15s;
}
.imc-tool-listen:hover { filter: brightness(1.06); color: #fff; }
.imc-tool-listen .uk-icon { width: 18px; }
.imc-tool-listen.is-active { background: #16a34a; }

/* Thanh điều khiển sticky */
.tts-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid #e3e6ea;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .10);
    transform: translateY(110%);
    transition: transform .25s ease;
    padding: env(safe-area-inset-bottom, 0) 0 0;
}
.tts-bar.is-open { transform: translateY(0); }

.uk-light .tts-bar {
    background: #1f2329;
    border-top-color: #3a4049;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
    color: #e9ecef;
}

.tts-bar-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    flex-wrap: wrap;
}

.tts-btn {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    line-height: 0;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tts-btn:hover { color: #1e87f0; }

.tts-main {
    background: #1e87f0;
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.tts-main:hover { color: #fff; filter: brightness(1.05); }

.tts-progress {
    font-size: 13px;
    color: #888;
    font-variant-numeric: tabular-nums;
    min-width: 56px;
    text-align: center;
}
.uk-light .tts-progress { color: #9aa3ad; }

/* Trạng thái đang tải/sinh giọng (server) */
.tts-status { display: none; font-size: 13px; color: #1e87f0; white-space: nowrap; }
.tts-bar.is-loading .tts-status { display: inline; }
.tts-bar.is-loading .tts-progress { display: none; }
.tts-play { position: relative; }
.tts-bar.is-loading .tts-play > svg { visibility: hidden; }
.tts-bar.is-loading .tts-play::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tts-spin .7s linear infinite;
}
@keyframes tts-spin { to { transform: rotate(360deg); } }

/* Thanh tiến độ trực quan */
.tts-seek {
    position: relative;
    flex: 1 1 auto;
    height: 6px;
    background: #d9dde3;
    border-radius: 4px;
    cursor: pointer;
    min-width: 80px;
}
.uk-light .tts-seek { background: #3a4049; }
.tts-seek-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0;
    background: #1e87f0;
    border-radius: 4px;
}

.tts-gear { flex: 0 0 auto; }
.tts-close { flex: 0 0 auto; }

/* Settings popover — bố trí NGANG cho gọn: nhãn nằm cùng dòng với ô điều khiển,
   các mục xếp cạnh nhau và tự xuống dòng khi hẹp (trước đây mỗi mục 1 hàng, nhãn nằm
   trên → panel cao gấp đôi mức cần thiết). */
.tts-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid #e3e6ea;
}
.uk-light .tts-settings { border-bottom-color: #3a4049; }

.tts-set-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
}
.tts-voice-row { flex: 1 1 250px; }
.tts-rate-row  { flex: 1 1 200px; }
.tts-sleep-row { flex: 0 1 auto; }

.tts-set-label {
    font-size: 12px;
    color: #888;
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}
.uk-light .tts-set-label { color: #9aa3ad; }
.tts-set-label .tts-rate-val { color: #1e87f0; font-weight: 600; }

/* Select giọng + hẹn giờ dùng CHUNG một bộ style.
   PHẢI đặt background-color TƯỜNG MINH: để 'transparent' thì Chrome/Windows tự vẽ nền
   trắng cho <select> native → trắng xoá giữa thanh tối. 'color-scheme' để danh sách
   option xổ ra cũng theo đúng tông, nếu không popup vẫn nền trắng chữ đen. */
.tts-voice,
.tts-sleep {
    font-size: 14px;
    color: #222;
    background-color: #fff;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    padding: 7px 8px;
    cursor: pointer;
    min-width: 0;
    color-scheme: light;
}
.tts-voice { flex: 1 1 auto; width: 100%; }
.tts-sleep { flex: 0 1 auto; }

.uk-light .tts-voice,
.uk-light .tts-sleep {
    color: #e9ecef;
    background-color: #2a2f36;
    border-color: #3a4049;
    color-scheme: dark;
}

.tts-rate {
    flex: 1 1 auto;
    width: 100%;
    min-width: 90px;
    accent-color: #1e87f0;
    cursor: pointer;
}

.tts-set-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
.tts-set-toggle input { width: 16px; height: 16px; cursor: pointer; accent-color: #1e87f0; }

/* Lời mời nâng cấp chiếm trọn 1 dòng (nằm ngay dưới ô chọn giọng) */
.tts-voice-note { flex: 0 0 100%; }

@media (max-width: 640px) {
    .tts-settings { gap: 10px 14px; padding: 12px 12px; }
    .tts-voice-row { flex: 1 1 100%; }
    .tts-rate-row  { flex: 1 1 100%; }
}

.tts-note {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 14px 10px;
    font-size: 12px;
    color: #e0a800;
}

/* Lời mời nâng cấp khi chọn giọng 👑 — đặt NGAY DƯỚI ô chọn giọng trong panel cài đặt,
   để user nhìn thấy ngay tại chỗ vừa bấm (không phải dưới đáy thanh bar). */
.tts-voice-note {
    margin: 0;              /* khoảng cách do gap của .tts-settings lo */
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(224, 168, 0, .12);
    border: 1px solid rgba(224, 168, 0, .45);
    font-size: 12px;
    line-height: 1.5;
    color: #e0a800;
}
.tts-note-txt { vertical-align: middle; }
.tts-note-cta {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #e0a800;
    color: #1c1c1c;
    font-weight: 600;
    text-decoration: none;
    vertical-align: middle;
}
.tts-note-cta:hover { background: #f0b81a; color: #1c1c1c; text-decoration: none; }

/* Nhắc giọng máy không chạy nền — thông tin nhẹ (xám), không cảnh báo gắt như lời mời VIP vàng */
.tts-voice-hint {
    flex: 0 0 100%;
    margin: 0;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(128, 128, 128, .14);
    border: 1px solid rgba(128, 128, 128, .3);
    font-size: 12px;
    line-height: 1.5;
    opacity: .9;
}

@media (max-width: 640px) {
    .tts-bar-inner { gap: 8px; padding: 8px 10px; }
    .tts-progress { min-width: 44px; font-size: 12px; }
}