/* Улучшения мобильного чата - скрытие кнопки при открытом чате */

/* Скрываем кнопку открытия чата когда чат активен */
.chat-widget.active ~ .chat-widget-button {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.3) translateY(20px) !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Дополнительные улучшения для мобильных устройств */
@media (max-width: 768px) {
    /* Убираем кнопку чата полностью при открытом чате */
    .chat-widget.active ~ .chat-widget-button {
        display: none !important;
    }
    
    /* Улучшаем позиционирование кнопки отправки в чате */
    .chat-widget.active .chat-input {
        position: relative !important;
        z-index: 1002 !important; /* Выше кнопки чата */
    }
    
    .chat-widget.active .chat-input button {
        position: relative !important;
        z-index: 1003 !important;
        box-shadow: 
            0 4px 12px rgba(79, 70, 229, 0.4),
            0 0 0 2px rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Анимация появления кнопки отправки */
    .chat-widget.active .chat-input button {
        animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    }
    
    /* Улучшаем визуальную индикацию активности поля ввода */
    .chat-widget.active .chat-input input:focus {
        border-color: rgba(79, 70, 229, 0.7) !important;
        box-shadow: 
            0 0 0 3px rgba(79, 70, 229, 0.2),
            0 2px 8px rgba(79, 70, 229, 0.3) !important;
        background: rgba(65, 51, 85, 0.7) !important;
    }
    
    /* Убеждаемся что ничего не перекрывает область ввода */
    .chat-widget.active .chat-input {
        padding: 20px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        background: linear-gradient(90deg, 
            rgba(30, 15, 42, 0.98), 
            rgba(42, 30, 59, 0.95)
        ) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

@media (max-width: 480px) {
    /* Для очень маленьких экранов */
    .chat-widget.active .chat-input {
        padding: 16px 20px !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
    
    .chat-widget.active .chat-input button {
        width: 52px !important;
        height: 52px !important;
        margin-left: 12px !important;
        font-size: 1.2rem !important;
    }
}

/* Анимация для кнопки отправки */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Дополнительная защита от перекрытия */
.chat-widget.active {
    position: fixed !important;
    z-index: 1000 !important;
}

/* Плавная анимация появления кнопки чата при закрытии */
.chat-widget-button {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Когда чат закрывается, кнопка плавно появляется */
.chat-widget:not(.active) ~ .chat-widget-button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
}

/* Дополнительный отступ снизу для безопасности на iOS */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .chat-widget.active .chat-input {
            padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom))) !important;
        }
    }
    
    @media (max-width: 480px) {
        .chat-widget.active .chat-input {
            padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom))) !important;
        }
    }
}