﻿
#voiceControlButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000000;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: #1976D2;
    color: white;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.3);
}

    #voiceControlButton.listening {
        background: #e53935;
        animation: voicePulse 1.5s infinite;
    }

#voiceControlStatus {
    position: fixed;
    bottom: 25px;
    right: 95px;
    z-index: 1000000;
    background: #263238;
    color: white;
    padding: 12px 16px;
    border-radius: 9px;
    font-family: Tahoma;
    font-size: 14px;
    direction: rtl;
    text-align: right;
    max-width: 75%;
}

#voiceTranscript {
    position: fixed;
    bottom: 95px;
    right: 15px;
    z-index: 1000000;
    background: white;
    color: #111;
    border: 2px solid #2196F3;
    border-radius: 10px;
    padding: 14px 18px;
    font-family: Tahoma;
    font-size: 16px;
    direction: rtl;
    text-align: right;
    min-width: 230px;
    max-width: 85%;
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
}

@keyframes voicePulse {

    0% {
        box-shadow: 0 0 0 0 rgba(229,57,53,.6);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(229,57,53,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(229,57,53,0);
    }
}

#voiceControlStatus,
#voiceTranscript {
    display: none !important;
}

#voiceTranscript {
    position: fixed !important;
    left: 15px !important;
    bottom: 75px !important;
    right: auto !important;
    z-index: 999998 !important;
    background: #ffffff !important;
    color: #222222 !important;
    padding: 8px 12px !important;
    border: 1px solid #999 !important;
    border-radius: 8px !important;
    font-family: Tahoma !important;
    font-size: 14px !important;
    direction: rtl !important;
    max-width: 300px !important;
}