/**
 * Voice Avatar Widget Styles
 * KIMS USHALAKSHMI Centre - Dr. Raghu Ram AI Avatar
 *
 * This file contains all CSS required for the floating widget
 * Include this file before initializing the widget
 *
 * @version 1.5.3
 */


/* Scoped reset: keep the widget independent from the website theme */
#voiceAvatarWidgetContainer,
#voiceAvatarWidgetContainer *,
.voice-avatar-toast,
.voice-avatar-toast * {
    box-sizing: border-box !important;
    font-style: normal !important;
    text-rendering: auto !important;
}

#voiceAvatarWidgetContainer {
  
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #111111 !important;
}

#voiceAvatarWidgetContainer button,
#voiceAvatarWidgetContainer input,
#voiceAvatarWidgetContainer textarea,
#voiceAvatarWidgetContainer select {

    font-size: 14px !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Hard-coded button geometry prevents WordPress themes/page builders from
   changing the widget's rounded controls. */
#voiceAvatarWidgetContainer button {
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    min-width: 0;
}

#voiceAvatarWidgetContainer .voice-avatar-widget-button,
#voiceAvatarWidgetContainer .voice-avatar-widget-info,
#voiceAvatarWidgetContainer .voice-avatar-widget-close,
#voiceAvatarWidgetContainer .voice-avatar-btn-mic,
#voiceAvatarWidgetContainer .voice-avatar-btn-connect,
#voiceAvatarWidgetContainer .voice-avatar-btn-disconnect {
    border-radius: 50% !important;
}

#voiceAvatarWidgetContainer button:focus-visible,
a.voice-avatar-trigger-button:focus-visible,
button.voice-avatar-trigger-button:focus-visible,
.voice-avatar-trigger-button:focus-visible {
    outline: 3px solid rgba(218, 14, 142, 0.30) !important;
    outline-offset: 3px !important;
}

#voiceAvatarWidgetContainer .material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Widget Button - Floating action button */
.voice-avatar-widget-button {
    position: fixed;
    bottom: 75px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    border: 1px solid #E5E7EB !important;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999998;
    animation: vaw-idle-pulse 2.8s ease-in-out infinite;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.voice-avatar-widget-button::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(218, 14, 142, 0.25);
    animation: vaw-ring-ripple 2.8s ease-in-out infinite;
    pointer-events: none;
}

.voice-avatar-widget-button::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid rgba(218, 14, 142, 0.10);
    animation: vaw-ring-ripple 2.8s ease-in-out infinite 0.4s;
    pointer-events: none;
}

@keyframes vaw-idle-pulse {
    0%, 100% { transform: scale(1);      box-shadow: 0 4px 18px rgba(0,0,0,0.18); }
    50%       { transform: scale(1.045); box-shadow: 0 6px 24px rgba(0,0,0,0.26); }
}

@keyframes vaw-ring-ripple {
    0%   { opacity: 0.7; transform: scale(1);    }
    70%  { opacity: 0;   transform: scale(1.55); }
    100% { opacity: 0;   transform: scale(1.55); }
}

.voice-avatar-widget-button:hover {
    background: #FFFFFF !important;
    color: #DA0E8E !important;
    border-color: #DA0E8E !important;
    transform: scale(1.08) !important;
    box-shadow: 0 8px 28px rgba(218, 14, 142, 0.30) !important;
    animation: none !important;
}

.voice-avatar-widget-button:hover::before,
.voice-avatar-widget-button:hover::after { animation: none; opacity: 0; }

.voice-avatar-widget-button:active { transform: scale(0.95) !important; }

.voice-avatar-btn-icon {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}

.voice-avatar-widget-button:hover .voice-avatar-btn-wave { animation: vaw-wave-fade 1.2s ease-in-out infinite; }
.voice-avatar-widget-button:hover .wave-1 { animation-delay: 0s;    }
.voice-avatar-widget-button:hover .wave-2 { animation-delay: 0.25s; }

@keyframes vaw-wave-fade {
    0%,100% { opacity: 0;   }
    40%,60% { opacity: 0.7; }
}

.voice-avatar-widget-button.active {
    display: none;
}


/* Optional white trigger button for page content.
   Use: <a href="#open-chatbot" class="voice-avatar-trigger-button open-chatbot">Talk to Dr. Raghu Ram</a> */
a.voice-avatar-trigger-button,
button.voice-avatar-trigger-button,
.voice-avatar-trigger-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    border: 1px solid #111111 !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

a.voice-avatar-trigger-button:hover,
button.voice-avatar-trigger-button:hover,
.voice-avatar-trigger-button:hover {
    background: #FFFFFF !important;
    color: #DA0E8E !important;
    border-color: #DA0E8E !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(218, 14, 142, 0.18) !important;
}

a.voice-avatar-trigger-button:active,
button.voice-avatar-trigger-button:active,
.voice-avatar-trigger-button:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Material Icons - included via CDN in widget */
.voice-avatar-widget-button .material-icons {
    font-size: 22px !important;
}


/* Widget Dialog - Main container */
.voice-avatar-widget-dialog {
    font-size: 16px !important;
    line-height: 1.4 !important;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 420px;
    height: min(600px, calc(100vh - 60px));
    height: min(600px, calc(100dvh - 60px));
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    background: #FFFFFF;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border: 1px solid #111111;
    display: none;
    flex-direction: column;
    z-index: 999999;
    overflow: hidden;
}

.voice-avatar-widget-dialog.active {
    display: flex;
    animation: voiceAvatarSlideIn 0.3s ease-out;
}

@keyframes voiceAvatarSlideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Widget Header */
.voice-avatar-widget-header {
    background: #FFFFFF;
    color: #111111;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid #111111;
}


.voice-avatar-widget-header h2 {
    font-size: 14px !important;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    font-weight: 500;
    line-height: 1.3;
    color: #111111;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-avatar-widget-info,
.voice-avatar-widget-close {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 1 !important;
    text-align: center;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    flex: 0 0 38px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.08);
}

.voice-avatar-widget-close {
    font-size: 20px !important;
}

.voice-avatar-widget-info {
    margin-right: 0;
    color: #DA0E8E !important;
    border-color: rgba(218, 14, 142, 0.38) !important;
    background: #FFF7FC !important;
}

.voice-avatar-widget-info .material-icons {
    font-size: 20px !important;
    line-height: 1;
    font-weight: 300;
}

.voice-avatar-widget-close .material-icons {
    font-size: 16px !important;
    line-height: 1;
}

.voice-avatar-widget-info:hover,
.voice-avatar-widget-info:focus-visible {
    background: #DA0E8E !important;
    color: #FFFFFF !important;
    border-color: #DA0E8E !important;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 8px 18px rgba(218, 14, 142, 0.24);
    opacity: 1;
}

.voice-avatar-widget-close:hover,
.voice-avatar-widget-close:focus-visible {
    background: #111111 !important;
    color: #FFFFFF !important;
    border-color: #111111 !important;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.18);
}

.voice-avatar-widget-info:active,
.voice-avatar-widget-close:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
}

/* Widget Content Area */
.voice-avatar-widget-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

/* Avatar Video Section */
.voice-avatar-widget-video-section {
    position: relative;
    background: #FAFAFA;
    overflow: hidden;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.voice-avatar-widget-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transform: translate(10px, -20px) scale(1.12);
    transform-origin: center 25%;
}

/* Loading State */
.voice-avatar-widget-loading {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    text-align: center;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    width: 100%;
}

.voice-avatar-widget-loading .spinner {
    border: 1px solid #E5E5E5;
    border-top: 1px solid #111111;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: voiceAvatarSpin 0.9s linear infinite;
    margin: 0 auto 15px;
}

.voice-avatar-widget-loading.idle .spinner {
    display: none;
}

.voice-avatar-widget-loading.idle .loading-message {
    display: none;
}

.voice-avatar-widget-loading .idle-content {
    display: none;
    text-align: center;
    max-width: 350px;
}

.voice-avatar-widget-loading.idle .idle-content {
    display: block;
    animation: voiceAvatarFadeIn 0.5s ease-in;
}

@keyframes voiceAvatarFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.voice-avatar-idle-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 22px;
    background: #FFFFFF;
    border: 1px solid #111111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    font-size: 22px !important;
    font-weight: 500;
    letter-spacing: 0.06em;
    box-shadow: none;
    overflow: hidden;
}

.voice-avatar-idle-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    display: block;
}

.voice-avatar-idle-banner {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto 18px;
    border-radius: 12px;
}

.voice-avatar-idle-title {
    font-size: 16px !important;
    font-weight: 500;
    color: #111111;
    margin-bottom: 10px;
    line-height: 1.4;
    letter-spacing: 0;
}

.voice-avatar-idle-description {
    font-size: 13px !important;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 280px;
}

.voice-avatar-idle-cta {
    display: none;
}

.voice-avatar-widget-loading p {
    font-size: 14px !important;
    color: #64748B;
}

/* Primary CTA in idle body (subtle pink brand accent) */
.voice-avatar-cta-talk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding: 10px 22px;
    background: #FFFFFF;
    border: 1px solid #E91E8C;
    color: #E91E8C;
    font-size: 14px !important;
    font-weight: 500;
    border-radius: 999px !important;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.3;
    text-align: center;
}

.voice-avatar-cta-talk-button:hover:not(:disabled) {
    background: #DA0E8E;
    color: #FFFFFF;
    border-color: #DA0E8E;
}

.voice-avatar-cta-talk-button:disabled {
    border-color: #D4D4D4;
    color: #D4D4D4;
    cursor: not-allowed;
    background: #FFFFFF;
}

/* Disclaimer / connecting state: medical disclaimer */
.voice-avatar-connecting-content {
    display: none;
    text-align: left;
    max-width: 320px;
    padding: 0 4px;
}

.voice-avatar-widget-loading.disclaimer .voice-avatar-connecting-content {
    display: block;
    animation: voiceAvatarFadeIn 0.4s ease-in;
}

/* As soon as "I Understand & Agree" is clicked, the disclaimer text is
   fully hidden — only the centered connect loader below is shown. */
.voice-avatar-widget-loading.connecting .voice-avatar-connecting-content {
    display: none;
}

.voice-avatar-widget-loading.disclaimer .spinner,
.voice-avatar-widget-loading.disclaimer > .loading-message,
.voice-avatar-widget-loading.connecting .spinner,
.voice-avatar-widget-loading.connecting > .loading-message {
    display: none;
}

.voice-avatar-widget-loading .voice-avatar-connecting-content .disclaimer-title {
    font-size: 14px !important;
    font-weight: 700;
    color: #111111;
    margin-bottom: 10px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.voice-avatar-widget-loading .voice-avatar-connecting-content .disclaimer-mark {
    color: #E91E8C;
    font-size: 12px !important;
    line-height: 1;
}

.voice-avatar-widget-loading .voice-avatar-connecting-content p {
    font-size: 12px !important;
    color: #6B7280;
    line-height: 1.30;
    margin: 0 0 5px;
}

.voice-avatar-widget-loading .voice-avatar-connecting-content p.urgent {
    color: #111111;
    font-weight: 500;
}

.voice-avatar-disclaimer-actions {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #E5E5E5;
}

.voice-avatar-widget-loading.disclaimer .voice-avatar-disclaimer-actions {
    display: flex;
}

.voice-avatar-widget-loading.connecting .voice-avatar-disclaimer-actions {
    display: none;
}

.voice-avatar-disclaimer-agree,
.voice-avatar-disclaimer-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 16px;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.voice-avatar-disclaimer-agree {
    background: #DA0E8E;
    border: 1px solid #DA0E8E;
    color: #FFFFFF;
}

.voice-avatar-disclaimer-agree:hover:not(:disabled) {
    background: #B80C78;
    border-color: #B80C78;
}

.voice-avatar-disclaimer-exit {
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    color: #111111;
}

.voice-avatar-disclaimer-exit:hover:not(:disabled) {
    border-color: #111111;
}

.voice-avatar-disclaimer-agree:disabled,
.voice-avatar-disclaimer-exit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Centered connect loader — replaces the disclaimer text entirely as soon
   as "I Understand & Agree" is clicked, so nothing else is on screen while
   we connect. Hidden by default; only shown during the "connecting" state. */
.voice-avatar-connect-loader {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 36px 20px;
    text-align: center;
    width: 100%;
}

.voice-avatar-widget-loading.connecting .voice-avatar-connect-loader {
    display: flex;
    animation: voiceAvatarFadeIn 0.35s ease-in;
}

.voice-avatar-connect-loader-spinner {
    width: 46px;
    height: 46px;
    border: 3px solid #F3D9EA;
    border-top: 3px solid #E91E8C;
    border-radius: 50%;
    animation: voiceAvatarSpin 0.85s linear infinite;
    transition: border-color 0.3s ease;
}

.voice-avatar-connect-loader .loading-message {
    font-size: 13px !important;
    color: #6B7280;
    letter-spacing: 0.04em;
    max-width: 260px;
    line-height: 1.5;
    transition: color 0.3s ease, letter-spacing 0.3s ease;
}

@keyframes voiceAvatarSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Escalated "still connecting" state — kicks in automatically if the
   connection takes longer than ~6s, so the user knows the widget hasn't
   frozen and something is still happening in the background. */
.voice-avatar-connect-loader.slow .voice-avatar-connect-loader-spinner {
    width: 50px;
    height: 50px;
    border-width: 3.5px;
    animation: voiceAvatarSpin 0.65s linear infinite, voiceAvatarStatusPulse 1.6s ease-in-out infinite;
}

.voice-avatar-connect-loader.slow .loading-message {
    color: #E91E8C;
    font-weight: 500;
    letter-spacing: 0.06em;
}

@keyframes voiceAvatarStatusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Control Section - Bottom controls */
.voice-avatar-widget-controls {
    flex: 0 0 auto;
    padding: 14px 20px 14px;
    background: #FFFFFF;
    border-top: 1px solid #111111;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.voice-avatar-ai-disclaimer-note {
    font-size: 11px !important;
    color: #94A3B8;
    margin-top: 2px;
    letter-spacing: 0.01em;
    text-align: center;
}

.voice-avatar-state-display {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    font-size: 11px !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
    transition: color 0.2s ease;
}

.voice-avatar-state-display .material-icons {
    font-size: 14px !important;
}

.voice-avatar-state-display.idle {
    display: none;
}

.voice-avatar-state-display.connected,
.voice-avatar-state-display.listening,
.voice-avatar-state-display.speaking {
    display: flex;
    color: #111111;
}

.voice-avatar-control-buttons {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 6px;
    background: transparent;
    border-radius: 999px;
}

.voice-avatar-control-buttons button {
    border: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.voice-avatar-control-buttons button:disabled {
    cursor: not-allowed;
}

.voice-avatar-btn-mic,
.voice-avatar-btn-connect,
.voice-avatar-btn-disconnect {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    aspect-ratio: 1 / 1;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    border: 1px solid #111111 !important;
    color: #111111 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(17, 17, 17, 0.10);
}

.voice-avatar-btn-mic .material-icons,
.voice-avatar-btn-connect .material-icons,
.voice-avatar-btn-disconnect .material-icons {
    font-size: 20px !important;
    line-height: 1;
    display: block;
}

.voice-avatar-btn-connect:hover:not(:disabled),
.voice-avatar-btn-connect:focus-visible:not(:disabled),
.voice-avatar-btn-disconnect:hover:not(:disabled),
.voice-avatar-btn-disconnect:focus-visible:not(:disabled),
.voice-avatar-btn-mic:hover:not(:disabled),
.voice-avatar-btn-mic:focus-visible:not(:disabled) {
    background: #FFF7FC !important;
    color: #DA0E8E !important;
    border-color: #DA0E8E !important;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 10px 20px rgba(218, 14, 142, 0.22);
}

.voice-avatar-btn-connect:active:not(:disabled),
.voice-avatar-btn-disconnect:active:not(:disabled),
.voice-avatar-btn-mic:active:not(:disabled) {
    transform: scale(0.96);
    box-shadow: 0 3px 8px rgba(17, 17, 17, 0.12);
}

.voice-avatar-btn-mic.muted {
    background: #DA0E8E !important;
    color: #FFFFFF !important;
    border-color: #DA0E8E !important;
}

.voice-avatar-btn-mic.muted:hover:not(:disabled),
.voice-avatar-btn-mic.muted:focus-visible:not(:disabled) {
    background: #B80C78 !important;
    color: #FFFFFF !important;
    border-color: #B80C78 !important;
    box-shadow: 0 10px 22px rgba(184, 12, 120, 0.26);
}

.voice-avatar-btn-mic:disabled {
    border-color: #D4D4D4;
    color: #D4D4D4;
    cursor: not-allowed;
}

.voice-avatar-btn-mic:disabled:hover {
    background: #FFFFFF;
}

/* Toast Notifications */
.voice-avatar-toast {
    position: fixed;
    bottom: 100px;
    right: 50%;
    transform: translateX(50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px !important;
    z-index: 999999;
    animation: voiceAvatarSlideInToast 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.voice-avatar-toast.is-leaving {
    animation: voiceAvatarSlideInToast 0.3s ease-out reverse forwards;
    pointer-events: none;
}

@keyframes voiceAvatarSlideInToast {
    from { opacity: 0; transform: translate(50%, 20px); }
    to { opacity: 1; transform: translate(50%, 0); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .voice-avatar-widget-dialog {
    font-size: 16px !important;
    line-height: 1.4 !important;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        bottom: max(12px, env(safe-area-inset-bottom));
        right: 12px;
        border-radius: 14px !important;
    }

    .voice-avatar-widget-button {
        bottom: 16px;
        right: 16px;
        width: 54px;
        height: 54px;
    }

    .voice-avatar-btn-icon {
        width: 26px;
        height: 26px;
    }

    .voice-avatar-widget-header {
        padding: 14px 16px;
        min-height: 52px;
    }

    .voice-avatar-widget-header h2 {
        font-size: 14px !important;
    }

    .voice-avatar-widget-info,
    .voice-avatar-widget-close {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        flex-basis: 36px;
    }

    .voice-avatar-widget-loading {
        padding: 24px 16px;
    }

    .voice-avatar-idle-icon {
        width: 72px;
        height: 72px;
        font-size: 20px !important;
        margin-bottom: 18px;
    }

    .voice-avatar-idle-title {
        font-size: 16px !important;
    }

    .voice-avatar-idle-description {
        font-size: 13px !important;
        max-width: 100%;
        padding: 0 4px;
    }

    .voice-avatar-cta-talk-button {
        margin-top: 18px;
        padding: 12px 22px;
        font-size: 14px !important;
        max-width: calc(100% - 16px);
    }

    .voice-avatar-widget-loading .voice-avatar-connecting-content {
        max-width: 100%;
        padding: 0 6px;
    }

    .voice-avatar-widget-loading .voice-avatar-connecting-content .disclaimer-title {
        font-size: 14px !important;
    }

    .voice-avatar-widget-loading .voice-avatar-connecting-content p {
        font-size: 12px !important;
    }

    .voice-avatar-disclaimer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .voice-avatar-disclaimer-agree,
    .voice-avatar-disclaimer-exit {
        width: 100%;
    }

    .voice-avatar-widget-controls {
        padding: 12px 16px 16px;
    }

    .voice-avatar-control-buttons {
        gap: 12px;
    }

    .voice-avatar-btn-mic,
    .voice-avatar-btn-connect,
    .voice-avatar-btn-disconnect {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .voice-avatar-btn-mic .material-icons,
    .voice-avatar-btn-connect .material-icons,
    .voice-avatar-btn-disconnect .material-icons {
        font-size: 22px !important;
    }

    .voice-avatar-widget-video {
        transform: translate(8px, -20px) scale(1.2);
        transform-origin: center 28%;
    }
}

@media (max-width: 380px) {
    .voice-avatar-widget-dialog {

    font-size: 16px !important;
    line-height: 1.4 !important;
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        bottom: max(8px, env(safe-area-inset-bottom));
        right: 8px;
    }

    .voice-avatar-idle-icon {
        width: 64px;
        height: 64px;
        font-size: 18px !important;
    }
}


/* Saved positioning and theme settings */
#voiceAvatarWidgetContainer {
    --vaw-primary-color: #111111;
    --vaw-background-color: #FFFFFF;
}

#voiceAvatarWidgetContainer[data-position="bottom-left"] .voice-avatar-widget-button {
    left: 20px !important;
    right: auto !important;
}

#voiceAvatarWidgetContainer[data-position="bottom-left"] .voice-avatar-widget-dialog {
    left: 30px !important;
    right: auto !important;
}

#voiceAvatarWidgetContainer .voice-avatar-widget-dialog,
#voiceAvatarWidgetContainer .voice-avatar-widget-header,
#voiceAvatarWidgetContainer .voice-avatar-widget-controls {
    background-color: var(--vaw-background-color) !important;
}

#voiceAvatarWidgetContainer .voice-avatar-widget-dialog,
#voiceAvatarWidgetContainer .voice-avatar-widget-header,
#voiceAvatarWidgetContainer .voice-avatar-widget-close,
#voiceAvatarWidgetContainer .voice-avatar-btn-mic,
#voiceAvatarWidgetContainer .voice-avatar-btn-disconnect {
    border-color: var(--vaw-primary-color) !important;
}

#voiceAvatarWidgetContainer .voice-avatar-widget-header,
#voiceAvatarWidgetContainer .voice-avatar-widget-header h2,
#voiceAvatarWidgetContainer .voice-avatar-widget-close,
#voiceAvatarWidgetContainer .voice-avatar-btn-mic,
#voiceAvatarWidgetContainer .voice-avatar-btn-disconnect,
#voiceAvatarWidgetContainer .voice-avatar-state-display.connected,
#voiceAvatarWidgetContainer .voice-avatar-state-display.listening,
#voiceAvatarWidgetContainer .voice-avatar-state-display.speaking {
    color: var(--vaw-primary-color) !important;
}


/* Final hard-coded button states.
   These selectors intentionally appear after the configurable theme rules so
   WordPress themes, page builders and inherited button styles cannot suppress
   hover background, border, text or icon colour changes. */
#voiceAvatarWidgetContainer button.voice-avatar-widget-info,
#voiceAvatarWidgetContainer button.voice-avatar-widget-close,
#voiceAvatarWidgetContainer button.voice-avatar-btn-mic,
#voiceAvatarWidgetContainer button.voice-avatar-btn-connect,
#voiceAvatarWidgetContainer button.voice-avatar-btn-disconnect,
#voiceAvatarWidgetContainer button.voice-avatar-cta-talk-button,
#voiceAvatarWidgetContainer button.voice-avatar-disclaimer-agree,
#voiceAvatarWidgetContainer button.voice-avatar-disclaimer-exit {
    opacity: 1 !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-widget-info > *,
#voiceAvatarWidgetContainer button.voice-avatar-widget-close > *,
#voiceAvatarWidgetContainer button.voice-avatar-btn-mic > *,
#voiceAvatarWidgetContainer button.voice-avatar-btn-connect > *,
#voiceAvatarWidgetContainer button.voice-avatar-btn-disconnect > * {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Header information button */
#voiceAvatarWidgetContainer button.voice-avatar-widget-info {
    background-color: #FFF7FC !important;
    border-color: #DA0E8E !important;
    color: #DA0E8E !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-widget-info:hover,
#voiceAvatarWidgetContainer button.voice-avatar-widget-info:focus-visible {
    background-color: #DA0E8E !important;
    border-color: #DA0E8E !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 9px 20px rgba(218, 14, 142, 0.28) !important;
}

/* Header close button */
#voiceAvatarWidgetContainer button.voice-avatar-widget-close {
    background-color: #FFFFFF !important;
    border-color: #111111 !important;
    color: #111111 !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-widget-close:hover,
#voiceAvatarWidgetContainer button.voice-avatar-widget-close:focus-visible {
    background-color: #DA0E8E !important;
    border-color: #DA0E8E !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 9px 20px rgba(218, 14, 142, 0.28) !important;
}

/* Connected-call buttons */
#voiceAvatarWidgetContainer button.voice-avatar-btn-mic,
#voiceAvatarWidgetContainer button.voice-avatar-btn-connect,
#voiceAvatarWidgetContainer button.voice-avatar-btn-disconnect {
    background-color: #FFFFFF !important;
    border-color: #111111 !important;
    color: #111111 !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-btn-mic:hover:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-btn-mic:focus-visible:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-btn-connect:hover:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-btn-connect:focus-visible:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-btn-disconnect:hover:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-btn-disconnect:focus-visible:not(:disabled) {
    background-color: #DA0E8E !important;
    border-color: #DA0E8E !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 10px 22px rgba(218, 14, 142, 0.30) !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-btn-mic.muted {
    background-color: #DA0E8E !important;
    border-color: #DA0E8E !important;
    color: #FFFFFF !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-btn-mic.muted:hover:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-btn-mic.muted:focus-visible:not(:disabled) {
    background-color: #B80C78 !important;
    border-color: #B80C78 !important;
    color: #FFFFFF !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-btn-mic:disabled,
#voiceAvatarWidgetContainer button.voice-avatar-btn-connect:disabled,
#voiceAvatarWidgetContainer button.voice-avatar-btn-disconnect:disabled {
    background-color: #F8F8F8 !important;
    border-color: #D4D4D4 !important;
    color: #B5B5B5 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Text buttons */
#voiceAvatarWidgetContainer button.voice-avatar-cta-talk-button:hover:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-cta-talk-button:focus-visible:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-disclaimer-agree:hover:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-disclaimer-agree:focus-visible:not(:disabled) {
    background-color: #B80C78 !important;
    border-color: #B80C78 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(184, 12, 120, 0.22) !important;
    transform: translateY(-1px) !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-disclaimer-exit:hover:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-disclaimer-exit:focus-visible:not(:disabled) {
    background-color: #111111 !important;
    border-color: #111111 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.18) !important;
    transform: translateY(-1px) !important;
}

#voiceAvatarWidgetContainer button.voice-avatar-widget-info:active,
#voiceAvatarWidgetContainer button.voice-avatar-widget-close:active,
#voiceAvatarWidgetContainer button.voice-avatar-btn-mic:active:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-btn-connect:active:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-btn-disconnect:active:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-cta-talk-button:active:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-disclaimer-agree:active:not(:disabled),
#voiceAvatarWidgetContainer button.voice-avatar-disclaimer-exit:active:not(:disabled) {
    transform: scale(0.96) !important;
    box-shadow: 0 3px 8px rgba(17, 17, 17, 0.14) !important;
}

.voice-avatar-audio {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    #voiceAvatarWidgetContainer[data-position="bottom-left"] .voice-avatar-widget-button {
        left: 16px !important;
        right: auto !important;
    }

    #voiceAvatarWidgetContainer[data-position="bottom-left"] .voice-avatar-widget-dialog {
        left: 12px !important;
        right: auto !important;
    }
}

@media (max-width: 380px) {
    #voiceAvatarWidgetContainer[data-position="bottom-left"] .voice-avatar-widget-dialog {
        left: 8px !important;
        right: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #voiceAvatarWidgetContainer *,
    #voiceAvatarWidgetContainer *::before,
    #voiceAvatarWidgetContainer *::after,
    .voice-avatar-toast {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* intentionally added to hide the text temporary */
.voice-avatar-idle-description {
    display: none;
}