/**
 * Estilos do VG AI Agent Assistants - Estilo Jarvis
 */

/* Widget principal */
.vg-ai-agent-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'SF Pro Display', sans-serif;
}

/* Botão de toggle estilo tema */
.vg-ai-agent-toggle {
    width: 70px;
    height: 70px;
    background: rgba(10, 10, 10, 0.6);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    backdrop-filter: blur(20px);
}

/* Mensagem proativa flutuante */
.vg-ai-proactive-message {
    position: absolute;
    bottom: 85px;
    right: 0;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 16px;
    padding: 14px 18px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(99, 102, 241, 0.2) inset,
        0 0 40px rgba(99, 102, 241, 0.15);
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 10000;
}

.vg-ai-proactive-message.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
    animation: messageFloat 3s ease-in-out infinite;
}

@keyframes messageFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.02);
    }
}

.vg-ai-proactive-message::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(17, 24, 39, 0.95);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.vg-ai-proactive-text {
    color: #e5e7eb;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    text-shadow: 0 0 5px rgba(99, 102, 241, 0.3);
    min-height: 20px;
}

/* Cursor piscante no final do texto */
.vg-ai-proactive-text::after {
    content: '|';
    color: #a5b4fc;
    animation: blinkCursor 1s infinite;
    margin-left: 2px;
}

@keyframes blinkCursor {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Borda com gradiente esfumaçado e animado - mais intenso */
.vg-ai-agent-toggle::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(99, 102, 241, 1) 0deg,
        rgba(139, 92, 246, 0.8) 45deg,
        rgba(129, 140, 248, 1) 90deg,
        rgba(167, 139, 250, 0.8) 135deg,
        rgba(99, 102, 241, 1) 180deg,
        rgba(139, 92, 246, 0.8) 225deg,
        rgba(129, 140, 248, 1) 270deg,
        rgba(167, 139, 250, 0.8) 315deg,
        rgba(99, 102, 241, 1) 360deg
    );
    animation: rotateGradient 4s linear infinite;
    z-index: -1;
    filter: blur(6px);
    opacity: 0.9;
}

/* Camada interna para criar efeito de borda esfumaçada */
.vg-ai-agent-toggle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(20px);
    z-index: -1;
    box-shadow: 
        inset 0 0 30px rgba(99, 102, 241, 0.15),
        0 0 50px rgba(99, 102, 241, 0.3);
}

/* Animação do gradiente rotativo */
@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.8;
    }
}

.vg-ai-agent-toggle:hover {
    transform: scale(1.05);
    background: rgba(10, 10, 10, 0.7);
}

.vg-ai-agent-toggle:hover::before {
    animation: rotateGradient 2s linear infinite;
    filter: blur(8px);
    opacity: 1;
    background: conic-gradient(
        from 0deg,
        rgba(99, 102, 241, 1) 0deg,
        rgba(139, 92, 246, 1) 45deg,
        rgba(129, 140, 248, 1) 90deg,
        rgba(167, 139, 250, 1) 135deg,
        rgba(99, 102, 241, 1) 180deg,
        rgba(139, 92, 246, 1) 225deg,
        rgba(129, 140, 248, 1) 270deg,
        rgba(167, 139, 250, 1) 315deg,
        rgba(99, 102, 241, 1) 360deg
    );
}

.vg-ai-agent-toggle:hover::after {
    background: rgba(10, 10, 10, 0.7);
    box-shadow: 
        inset 0 0 40px rgba(99, 102, 241, 0.2),
        0 0 70px rgba(139, 92, 246, 0.4);
}

.vg-ai-agent-toggle:active {
    transform: scale(0.98);
}

/* SVG de ondas ondulantes */
.vg-ai-waves-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Paths de ondas ondulantes */
.vg-ai-wave-path {
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.3s ease;
}

/* Barras verticais de áudio */
.vg-ai-audio-bars {
    opacity: 0.85;
}

.vg-ai-bar {
    animation: barPulse 1.8s ease-in-out infinite;
    transform-origin: bottom center;
    transition: opacity 0.2s ease;
}

.vg-ai-bar-1 {
    animation-delay: 0s;
}
.vg-ai-bar-2 {
    animation-delay: 0.2s;
}
.vg-ai-bar-3 {
    animation-delay: 0.4s;
}
.vg-ai-bar-4 {
    animation-delay: 0.6s;
}
.vg-ai-bar-5 {
    animation-delay: 0.8s;
}

/* Animação das barras pulando - leve */
@keyframes barPulse {
    0%, 100% {
        transform: scaleY(0.88);
        opacity: 0.72;
    }
    50% {
        transform: scaleY(1.08);
        opacity: 0.85;
    }
}

/* Overlay removido - não será mais exibido */
.vg-ai-agent-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Painel do widget estilo tema - lateral estilo Facebook no desktop */
.vg-ai-agent-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    max-height: 100vh;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 0;
    box-shadow: 
        -4px 0 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(99, 102, 241, 0.2) inset,
        -2px 0 40px rgba(99, 102, 241, 0.1);
    display: none;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    flex-direction: column;
}

.vg-ai-agent-panel.active {
    display: flex;
    transform: translateX(0);
}

@keyframes chatAppear {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Header do painel estilo tema */
.vg-ai-agent-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
}

.vg-ai-agent-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.vg-ai-agent-header-content > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.vg-ai-agent-header-content > div:first-child > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vg-ai-agent-status-indicator {
    display: flex;
    align-items: center;
}

.vg-ai-status-dot {
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(0, 255, 136, 0.8),
        0 0 20px rgba(0, 255, 136, 0.4);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

.vg-ai-agent-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #a5b4fc;
    text-shadow: 0 0 10px rgba(165, 180, 252, 0.5);
    letter-spacing: 0.5px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.vg-ai-agent-subtitle {
    display: inline-block;
    font-size: 11px;
    color: #a5b4fc;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Badge estilo para o subtítulo */
.vg-ai-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a5b4fc;
    box-shadow: 
        0 2px 8px rgba(99, 102, 241, 0.2),
        inset 0 0 10px rgba(99, 102, 241, 0.1);
    backdrop-filter: blur(10px);
    margin-top: 4px;
    display: inline-block;
}

.vg-ai-agent-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.vg-ai-agent-close:hover {
    background: rgba(255, 68, 68, 0.2);
    border-color: rgba(255, 68, 68, 0.5);
    color: #ff4444;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.3);
    transform: rotate(90deg);
}

/* Conteúdo do painel estilo tema */
.vg-ai-agent-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.4) transparent;
    min-height: 0;
    max-height: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vg-ai-agent-content p {
    margin: 0;
    color: #e5e7eb;
    line-height: 1.7;
    font-size: 14px;
    text-shadow: 0 0 5px rgba(99, 102, 241, 0.3);
}

/* Mensagens do chat */
.vg-ai-message {
    display: flex;
    margin-bottom: 12px;
    animation: messageAppear 0.3s ease;
}

.vg-ai-message-user {
    justify-content: flex-end;
}

.vg-ai-message-bot {
    justify-content: flex-start;
}

.vg-ai-message-content {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.6;
    font-size: 14px;
    word-wrap: break-word;
}

.vg-ai-message-user .vg-ai-message-content {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #e5e7eb;
    border-bottom-right-radius: 4px;
}

.vg-ai-message-bot .vg-ai-message-content {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.6) 0%, rgba(10, 10, 10, 0.6) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #e5e7eb;
    border-bottom-left-radius: 4px;
}

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

/* Indicador de digitação */
.vg-ai-typing-indicator .vg-ai-message-content {
    background: transparent;
    border: none;
    padding: 8px 16px;
    display: flex;
    gap: 4px;
    align-items: center;
}

.vg-ai-typing-dot {
    width: 8px;
    height: 8px;
    background: #a5b4fc;
    border-radius: 50%;
    animation: typingDot 1.4s ease-in-out infinite;
}

/* Botões de links, emails e WhatsApp no chat */
.vg-ai-link-button {
    display: block;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: #a5b4fc;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    word-break: break-word;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    backdrop-filter: blur(10px);
    text-align: center;
    width: 100%;
}

/* Mensagens de botão (separadas) */
.vg-ai-button-message {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
    max-width: 100% !important;
}

.vg-ai-link-button:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(139, 92, 246, 0.5) 100%);
    border-color: rgba(99, 102, 241, 0.8);
    color: #c7d2fe;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.vg-ai-email-button {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.3) 100%);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.vg-ai-email-button:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(37, 99, 235, 0.5) 100%);
    border-color: rgba(59, 130, 246, 0.8);
    color: #bfdbfe;
}

.vg-ai-whatsapp-button {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.3) 100%);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

.vg-ai-whatsapp-button:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(22, 163, 74, 0.5) 100%);
    border-color: rgba(34, 197, 94, 0.8);
    color: #bbf7d0;
}

.vg-ai-site-link {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(124, 58, 237, 0.3) 100%);
    border-color: rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
}

.vg-ai-site-link:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(124, 58, 237, 0.5) 100%);
    border-color: rgba(139, 92, 246, 0.8);
    color: #ddd6fe;
}

.vg-ai-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.vg-ai-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Container de input */
.vg-ai-agent-input-container {
    padding: 16px 20px;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.5) 0%, rgba(10, 10, 10, 0.5) 100%);
    display: flex;
    gap: 12px;
    align-items: center;
}

.vg-ai-chat-input {
    flex: 1;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    color: #e5e7eb;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.vg-ai-chat-input:focus {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

.vg-ai-chat-input::placeholder {
    color: rgba(165, 180, 252, 0.5);
}

.vg-ai-chat-send {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%);
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.vg-ai-chat-send:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(139, 92, 246, 1) 100%);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.vg-ai-chat-send:active {
    transform: scale(0.95);
}

/* Scrollbar personalizada estilo tema */
.vg-ai-agent-content::-webkit-scrollbar {
    width: 6px;
}

.vg-ai-agent-content::-webkit-scrollbar-track {
    background: rgba(99, 102, 241, 0.05);
    border-radius: 3px;
}

.vg-ai-agent-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.6) 0%, rgba(139, 92, 246, 0.6) 100%);
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
}

.vg-ai-agent-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.8) 0%, rgba(99, 102, 241, 0.8) 100%);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
}

/* Responsivo */
@media (max-width: 768px) {
    .vg-ai-agent-panel {
        width: 100% !important;
        max-width: 100% !important;
        /* Usar altura dinâmica via JavaScript - será definida dinamicamente */
        height: 100% !important;
        max-height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: none !important; /* Escondido por padrão */
        flex-direction: column !important;
        position: fixed !important;
        /* Respeitar área segura do iOS (notch e barra inferior) */
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        /* Altura será ajustada via JavaScript */
    }
    
    /* Quando ativo, mostrar */
    .vg-ai-agent-panel.active {
        display: flex !important;
    }
    
    .vg-ai-agent-widget {
        bottom: 15px;
        right: 15px;
    }
    
    .vg-ai-agent-overlay {
        display: none; /* Não precisa overlay no mobile já que ocupa tela toda */
    }
}

/* Estilos específicos para desktop - painel lateral */
@media (min-width: 769px) {
    .vg-ai-agent-panel {
        width: 380px;
        height: 100vh;
        max-height: 100vh;
        top: 0;
        right: 0;
        left: auto;
        bottom: auto;
        transform: translateX(100%);
        border-radius: 0;
        border-left: 1px solid rgba(99, 102, 241, 0.3);
        border-top: none;
        border-right: none;
        border-bottom: none;
    }
    
    .vg-ai-agent-panel.active {
        transform: translateX(0);
    }
    
    .vg-ai-agent-content {
        max-height: none;
        height: calc(100vh - 140px); /* Altura total menos header e input */
    }
    
    /* Ajustar posição do widget quando o painel está aberto - via classe JavaScript */
    .vg-ai-agent-widget.panel-open .vg-ai-agent-toggle {
        right: 390px; /* Posicionar o botão à esquerda do painel */
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .vg-ai-agent-header {
        padding: 16px;
        flex-shrink: 0;
    }
    
    .vg-ai-agent-header h3 {
        font-size: 16px;
    }
    
    .vg-ai-agent-content {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none !important;
        min-height: 0 !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
        transition: padding-bottom 0.3s ease;
    }
    
    /* Quando teclado estiver visível */
    .vg-ai-agent-panel.keyboard-visible .vg-ai-agent-content {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
    }
    
    .vg-ai-agent-input-container {
        flex-shrink: 0;
        padding: 12px 16px;
        position: sticky;
        bottom: 0;
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%);
        backdrop-filter: blur(20px);
        /* Respeitar área segura do iOS (barra inferior do Safari) */
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
        margin-bottom: env(safe-area-inset-bottom, 0);
        z-index: 10001;
        border-top: 1px solid rgba(99, 102, 241, 0.2);
    }
    
    .vg-ai-chat-input {
        font-size: 16px !important; /* Mínimo 16px para evitar zoom no iOS */
        padding: 14px 16px;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .vg-ai-chat-send {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
    
    .vg-ai-message-content {
        max-width: 85%;
        font-size: 15px;
    }
    
    /* Prevenir scroll do body quando chat estiver aberto no mobile */
    /* IMPORTANTE: Aplicar apenas quando chat estiver realmente aberto e ativo */
    body.vg-ai-chat-open.vg-ai-chat-active {
        position: fixed !important;
        width: 100% !important;
        /* Altura será definida dinamicamente via JavaScript */
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Garantir que não fique fixo quando fechado */
        top: 0 !important;
        left: 0 !important;
        /* Prevenir bounce scroll no iOS */
        overscroll-behavior: none;
        /* Garantir z-index adequado */
        z-index: 1;
    }
    
    
    
    
    /* Ajustar animação para mobile - slide up */
    @keyframes chatAppear {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .vg-ai-agent-panel.active {
        animation: chatAppear 0.3s ease-out;
    }
}