#my-tts-speaker-button {
    position: fixed;
    top: 50%; /* Letakkan 50% dari atas viewport */
    transform: translateY(-50%); /* Gerakkan ke atas sebanyak separuh ketinggian butang sendiri untuk centernya */
    right: 20px;  /* Kekalkan jarak dari kanan */

    background-color: #0073aa; /* WordPress blue */
    color: white;
    border-radius: 50%; /* Butang bulat secara lalai */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; /* Saiz ikon Font Awesome */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 9999; /* Pastikan ia di atas semua elemen lain */
    transition: background-color 0.3s ease, width 0.3s ease, border-radius 0.3s ease, font-size 0.3s ease;
    overflow: hidden; /* Penting untuk menyembunyikan teks/elemen lain yang melimpah */
    white-space: nowrap; /* Pastikan teks tidak wrap */
    padding: 0; /* Pastikan tiada padding yang mengganggu */
}

#my-tts-speaker-button:hover {
    background-color: #005177;
}

#my-tts-speaker-button.active {
    background-color: #dc3232; /* Merah bila aktif */
    width: 150px; /* Lebarkan butang bila aktif untuk teks "Voice ON" */
    border-radius: 25px; /* Jadikan bentuk lonjong bila aktif */
    font-size: 16px; /* Saiz font untuk teks "Voice ON" */
}

/* Style untuk ikon Font Awesome (<i> element) */
#my-tts-speaker-button i.fas {
    display: block; /* Pastikan ia block untuk flexbox alignment */
    transition: opacity 0.3s ease, margin-left 0.3s ease;
    position: relative;
    left: 0; /* Posisi asal ikon */
}

#my-tts-speaker-button.active i.fas {
    margin-left: -45px; /* Gerakkan ikon ke kiri bila butang aktif untuk beri ruang teks */
}

/* Style untuk teks status "Voice ON" (<span> element) */
#my-tts-speaker-button .tts-status-text {
    display: inline-block; /* Pastikan ia inline-block untuk flexbox */
    opacity: 0; /* Sembunyikan secara lalai */
    width: 0; /* Lebar sifar secara lalai */
    overflow: hidden; /* Sembunyikan overflow teks */
    transition: opacity 0.3s ease, width 0.3s ease;
    margin-left: 0; /* Tiada margin asal */
    white-space: nowrap; /* Penting untuk teks tak pecah baris */
}

#my-tts-speaker-button.active .tts-status-text {
    opacity: 1; /* Tunjukkan teks bila aktif */
    width: auto; /* Biarkan lebar automatik */
    margin-left: 10px; /* Jarak dari ikon */
}

/* Style for active selected text - optional */
.highlight-tts {
    background-color: yellow;
    font-weight: bold;
}