/* =========================================
   1. TOMBOL SUARA LINGKARAN (MENGAMBANG)
   ========================================= */
.tts-float-btn {
    position: fixed;
    bottom: 30px; /* Jarak dari bawah (Desktop) */
    right: 40px;  /* Jarak dari kanan (Sebelah Chatbot) */
    width: 50px;
    height: 50px;
    background-color: #64748b; /* Abu-abu saat mati */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: grab;
    z-index: 99999; /* Z-index dewa agar selalu di atas */
    transition: background-color 0.3s ease;
    touch-action: none; 
    user-select: none;
}

/* KELAS UNIK SAAT AKTIF (Anti-Menghilang) */
.tts-float-btn.tts-active {
    background-color: var(--primary, #059669); /* Hijau saat nyala */
    box-shadow: 0 0 15px rgba(5, 150, 105, 0.5);
}

.tts-float-btn:active {
    cursor: grabbing;
    transform: scale(0.95);
}

/* =========================================
   2. KHUSUS LAYAR HP (MOBILE)
   ========================================= */
@media (max-width: 768px) {
    .tts-float-btn {
        bottom: 90px; /* Naik agar aman dari Progress Bar / Bottom Bar */
        right: 75px;  /* Sebelah Chatbot versi HP */
        width: 45px; 
        height: 45px;
        font-size: 1.1rem;
    }
}

/* =========================================
   3. KELAS INDIKATOR TEKS SEDANG DIBACA
   ========================================= */
.sedang-dibaca {
    background-color: #fef08a !important; 
    border-left: 4px solid var(--primary, #059669) !important; 
    padding-left: 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}