/**
 * 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 3.0.0
 * @author  Musaddique Pinjari <https://in.linkedin.com/in/musaddique-pinjari>
 * @company Zerozilla
 */


/* 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(620px, calc(100vh - 60px));
    height: min(620px, calc(100dvh - 60px));
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    background: #FFFFFF;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(17, 17, 17, 0.12);
    display: none;
    flex-direction: column;
    z-index: 999999;
    overflow: hidden;
}

.voice-avatar-widget-dialog.active {
    display: flex;
    animation: voiceAvatarSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes voiceAvatarSlideIn {
    from {
        transform: translateY(28px) scale(0.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Widget Header */
.voice-avatar-widget-header {
    background: #FFFFFF;
    color: #111111;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

/* Header avatar icon */
.vaw-header-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(218, 14, 142, 0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF7FC;
    font-size: 11px !important;
    font-weight: 700;
    color: #DA0E8E;
    letter-spacing: 0.02em;
}

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

.vaw-header-title-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vaw-header-subtitle {
    font-size: 10px !important;
    color: #6B7280;
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.voice-avatar-widget-header h2 {
    font-size: 14px !important;
    margin: 0;
    padding: 0;
    font-weight: 600;
    line-height: 16px !important;
    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: 24px;
    width: 100%;
    background: #FFFFFF !important;
    z-index: 10;
}

.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: 88px;
    height: 88px;
    margin: 0 auto 16px;
    background: #FFFFFF;
    border: 2px solid rgba(218, 14, 142, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DA0E8E;
    font-size: 22px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: 0 0 0 6px rgba(218, 14, 142, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.voice-avatar-idle-icon:hover {
    box-shadow: 0 0 0 10px rgba(218, 14, 142, 0.10);
}

.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: 260px;
    height: auto;
    margin: 0 auto 14px;
    border-radius: 10px;
}

.voice-avatar-idle-title {
    font-size: 16px !important;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

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

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

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

/* Primary CTA in idle body */
.voice-avatar-cta-talk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #DA0E8E 0%, #B80C78 100%);
    border: none;
    color: #FFFFFF;
    font-size: 14px !important;
    font-weight: 600;
    border-radius: 999px !important;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 4px 16px rgba(218, 14, 142, 0.38);
    letter-spacing: 0.01em;
}

.voice-avatar-cta-talk-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #C40D82 0%, #9A0A64 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(218, 14, 142, 0.50);
}

.voice-avatar-cta-talk-button:active:not(:disabled) {
    transform: scale(0.97);
    box-shadow: 0 3px 10px rgba(218, 14, 142, 0.30);
}

.voice-avatar-cta-talk-button:disabled {
    background: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
    box-shadow: none;
}

/* ─── Step Progress Indicator (Premium) ──────────────────── */
.vaw-step-indicator {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
}

/* Node wrapper */
.vaw-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* Connecting track between nodes */
.vaw-step-track {
    flex: 1;
    height: 2px;
    background: #E9EAEC;
    margin-top: 15px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transition: background 0.4s ease;
}

.vaw-step-track.done {
    background: linear-gradient(90deg, rgba(218, 14, 142, 0.5), rgba(218, 14, 142, 0.5));
}

/* Circle */
.vaw-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #E9EAEC;
    background: #FFFFFF;
    color: #9CA3AF;
    font-size: 12px !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    line-height: 1;
}

.vaw-step-node.active .vaw-step-circle {
    border-color: #DA0E8E;
    background: #DA0E8E;
    color: #FFFFFF;
    box-shadow: 0 0 0 5px rgba(218, 14, 142, 0.14);
    animation: vawStepPulse 2s ease-in-out infinite;
}

.vaw-step-node.done .vaw-step-circle {
    border-color: rgba(218, 14, 142, 0.5);
    background: rgba(218, 14, 142, 0.08);
    color: #DA0E8E;
}

/* Checkmark for done state */
.vaw-step-node.done .vaw-step-circle::after {
    content: '\2713';
    font-size: 13px;
    font-weight: 800;
    color: #DA0E8E;
}

.vaw-step-node.done .vaw-step-num {
    display: none;
}

/* Step label */
.vaw-step-label {
    font-size: 9px !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9CA3AF;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.vaw-step-node.active .vaw-step-label {
    color: #DA0E8E;
}

.vaw-step-node.done .vaw-step-label {
    color: rgba(218, 14, 142, 0.6);
}

@keyframes vawStepPulse {

    0%,
    100% {
        box-shadow: 0 0 0 5px rgba(218, 14, 142, 0.14);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(218, 14, 142, 0.07);
    }
}

/* ─── Screen Slide Transitions ────────────────────────────── */
@keyframes vawSlideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes vawSlideInLeft {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.vaw-anim-forward {
    animation: vawSlideInRight 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.vaw-anim-back {
    animation: vawSlideInLeft 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Disclaimer / Instructions card (Window 1 & 2) ─────────── */
.voice-avatar-connecting-content {
    display: none;
    text-align: left;
    width: 100%;
    max-width: 340px;
    padding: 0;
}

.voice-avatar-widget-loading.disclaimer .voice-avatar-connecting-content {
    display: block;
}

.voice-avatar-instructions-content {
    display: none;
    text-align: left;
    width: 100%;
    max-width: 340px;
    padding: 0;
}

.voice-avatar-widget-loading.instructions .voice-avatar-instructions-content {
    display: block;
}

.voice-avatar-widget-loading.connecting .voice-avatar-connecting-content,
.voice-avatar-widget-loading.connecting .voice-avatar-instructions-content {
    display: none;
}

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

/* Card wrapper inside disclaimer/instructions */
.vaw-card {
    background: #FAFAFA;
    border: 1px solid #F0F0F0;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 4px;
}

/* Fade-out wrapper — no scroll, just structure */
.vaw-card-fade-wrapper {
    position: relative;
}

.voice-avatar-widget-loading .voice-avatar-connecting-content .disclaimer-title,
.voice-avatar-widget-loading .voice-avatar-instructions-content .disclaimer-title {
    font-size: 14px !important;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.3;
}

.voice-avatar-widget-loading .voice-avatar-connecting-content .disclaimer-mark,
.voice-avatar-widget-loading .voice-avatar-instructions-content .disclaimer-mark {
    font-size: 16px !important;
    line-height: 1;
    flex-shrink: 0;
}

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

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

/* Styled ordered list for instructions */
.vaw-instructions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.vaw-instructions-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px !important;
    color: #374151;
    line-height: 1.5;
}

/* .vaw-instructions-list li.highlight {
    color: #111111;
    font-weight: 600;
} */

.vaw-instr-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(218, 14, 142, 0.1);
    color: #DA0E8E;
    font-size: 10px !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.voice-avatar-disclaimer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
}

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

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

.voice-avatar-disclaimer-agree {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    min-height: 42px;
    padding: 11px 20px;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    background: linear-gradient(135deg, #DA0E8E 0%, #B80C78 100%);
    border: none;
    color: #FFFFFF;
    box-shadow: 0 3px 12px rgba(218, 14, 142, 0.32);
}

.voice-avatar-disclaimer-agree:hover:not(:disabled) {
    background: linear-gradient(135deg, #C40D82 0%, #9A0A64 100%);
    box-shadow: 0 6px 18px rgba(218, 14, 142, 0.44);
    transform: translateY(-1px);
}

.voice-avatar-disclaimer-agree:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ─── Connecting State ────────────────────────────────────── */
.voice-avatar-connect-loader {
    display: none;
    text-align: center;
    width: 100%;
    max-width: 300px;
    padding: 0;
    align-items: center;
    flex-direction: column;
}

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

/* Animated spinner ring */
.voice-avatar-connect-loader-spinner {
    width: 56px;
    height: 56px;
    border: 3.5px solid rgba(218, 14, 142, 0.12);
    border-top: 3.5px solid #DA0E8E;
    border-radius: 50%;
    animation: voiceAvatarSpin 0.9s linear infinite;
    margin-bottom: 18px;
    flex-shrink: 0;
}

/* Connecting title */
.voice-avatar-connect-loader .disclaimer-title {
    font-size: 14px !important;
    font-weight: 700;
    color: #111111;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.voice-avatar-connect-loader .loading-message {
    font-size: 13px !important;
    color: #6B7280;
    font-weight: 400;
    max-width: 240px;
    line-height: 1.5;
    transition: color 0.3s ease, opacity 0.3s ease;
    margin-bottom: 16px;
}

/* Animated progress track */
.vaw-progress-track {
    width: 100%;
    max-width: 200px;
    height: 3px;
    background: rgba(218, 14, 142, 0.12);
    border-radius: 99px;
    overflow: hidden;
    margin: 0 auto;
}

.vaw-progress-bar {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #DA0E8E, #FF6BC4, #DA0E8E);
    background-size: 200% 100%;
    animation: vawProgressShimmer 1.8s ease-in-out infinite;
    width: 60%;
}

@keyframes vawProgressShimmer {
    0% {
        background-position: 0% 50%;
        transform: translateX(-100%);
    }

    50% {
        background-position: 100% 50%;
        transform: translateX(160%);
    }

    100% {
        background-position: 0% 50%;
        transform: translateX(160%);
    }
}

.voice-avatar-progress-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #E5E5E5;
    text-align: center;
    width: 100%;
    animation: voiceAvatarFadeIn 0.4s ease-out;
}

.voice-avatar-green-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px !important;
    font-weight: 700;
    color: #059669;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 6px 16px;
    border-radius: 999px !important;
    animation: voiceAvatarPulseGreen 2s infinite ease-in-out;
}

.voice-avatar-green-checkmark .material-icons {
    font-size: 20px !important;
    color: #059669 !important;
}

@keyframes voiceAvatarPulseGreen {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.2);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

.voice-avatar-start-talk-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 280px !important;
    min-height: 42px !important;
    padding: 10px 22px !important;
    background: #DA0E8E !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(218, 14, 142, 0.35) !important;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

.voice-avatar-start-talk-button:hover {
    background: #B80C78 !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(218, 14, 142, 0.45) !important;
}

.voice-avatar-start-talk-button:active {
    transform: scale(0.98) !important;
}

@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: 44px;
    height: 44px;
    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: 12px 20px 14px;
    background: #FFFFFF;
    border-top: 1px solid rgba(17, 17, 17, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

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

/* ─── State Display ─────────────────────────────────────────── */
.voice-avatar-state-display {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: #F9FAFB;
    border: 1px solid #F0F0F0;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #6B7280;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

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

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

.voice-avatar-state-display.connected {
    display: flex;
    color: #059669;
    background: #ECFDF5;
    border-color: #A7F3D0;
}

.voice-avatar-state-display.listening {
    display: flex;
    color: #2563EB;
    background: #EFF6FF;
    border-color: #BFDBFE;
}

.voice-avatar-state-display.speaking {
    display: flex;
    color: #DA0E8E;
    background: #FFF0FA;
    border-color: rgba(218, 14, 142, 0.25);
}

/* Wave bars for speaking state */
.vaw-wave-bars {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.voice-avatar-state-display.speaking .vaw-wave-bars {
    display: flex;
}

.voice-avatar-state-display.speaking .material-icons {
    display: none;
}

.vaw-wave-bar {
    width: 3px;
    border-radius: 2px;
    background: #DA0E8E;
    animation: vawWaveBar 0.9s ease-in-out infinite;
}

.vaw-wave-bar:nth-child(1) {
    height: 4px;
    animation-delay: 0s;
}

.vaw-wave-bar:nth-child(2) {
    height: 10px;
    animation-delay: 0.15s;
}

.vaw-wave-bar:nth-child(3) {
    height: 7px;
    animation-delay: 0.30s;
}

.vaw-wave-bar:nth-child(4) {
    height: 12px;
    animation-delay: 0.10s;
}

.vaw-wave-bar:nth-child(5) {
    height: 5px;
    animation-delay: 0.25s;
}

@keyframes vawWaveBar {

    0%,
    100% {
        transform: scaleY(0.35);
    }

    50% {
        transform: scaleY(1);
    }
}

/* Mic ring for listening state */
.vaw-mic-ring {
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563EB;
    animation: vawMicRingPulse 1.2s ease-in-out infinite;
}

.voice-avatar-state-display.listening .vaw-mic-ring {
    display: block;
}

.voice-avatar-state-display.listening .material-icons {
    display: none;
}

@keyframes vawMicRingPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.55);
        opacity: 0.55;
    }
}

.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: 18px !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: 12px 14px;
        min-height: 54px;
    }

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

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

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

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

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

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

    .voice-avatar-cta-talk-button {
        margin-top: 16px;
        padding: 12px 24px;
        font-size: 14px !important;
        width: 100%;
        max-width: 280px;
    }

    .voice-avatar-widget-loading .voice-avatar-connecting-content,
    .voice-avatar-widget-loading .voice-avatar-instructions-content {
        max-width: 100%;
    }

    .vaw-card {
        max-height: 160px;
    }

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

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

    .voice-avatar-widget-controls {
        padding: 10px 14px 14px;
    }

    .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%;
    }

    .vaw-header-avatar {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
}

@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;
    }
}

/* idle description is visible */
.voice-avatar-idle-description {
    display: block;
}