/* Дополнительные стили для Telegram попапа */
@media (max-width: 480px) {
    #telegram-popup {
        bottom: 8px !important;
        right: 8px !important;
        left: 8px !important;
        max-width: none !important;
        width: calc(100vw - 16px) !important;
        padding: 6px 8px !important;
    }
}

@media (max-height: 600px) and (max-width: 768px) {
    #telegram-popup {
        bottom: 8px !important;
        transform: scale(0.9) translateY(100px) !important;
    }
    
    #telegram-popup[style*="translateY(0)"] {
        transform: scale(0.9) translateY(0) !important;
    }
}

/* Усиленная фиксация попапа на мобильном при скролле */
#telegram-popup {
    position: fixed !important;
    transform: translateZ(0) !important; /* Hardware acceleration */
    will-change: transform, opacity !important;
    z-index: 2147483647 !important; /* Максимально возможный z-index */
    -webkit-transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000px !important;
    perspective: 1000px !important;
}

/* Переливающаяся анимация иконки Telegram */
@keyframes telegramColorShift {
    0% {
        filter: hue-rotate(0deg) saturate(1.2) brightness(1.1);
    }
    16.66% {
        filter: hue-rotate(30deg) saturate(1.4) brightness(1.2);
    }
    33.33% {
        filter: hue-rotate(60deg) saturate(1.3) brightness(1.15);
    }
    50% {
        filter: hue-rotate(90deg) saturate(1.5) brightness(1.25);
    }
    66.66% {
        filter: hue-rotate(120deg) saturate(1.4) brightness(1.2);
    }
    83.33% {
        filter: hue-rotate(150deg) saturate(1.3) brightness(1.15);
    }
    100% {
        filter: hue-rotate(180deg) saturate(1.2) brightness(1.1);
    }
}

/* Альтернативная анимация с градиентами */
@keyframes telegramGradientShift {
    0% {
        filter: hue-rotate(0deg) saturate(1) brightness(1);
    }
    25% {
        filter: hue-rotate(45deg) saturate(1.3) brightness(1.1);
    }
    50% {
        filter: hue-rotate(90deg) saturate(1.2) brightness(1.05);
    }
    75% {
        filter: hue-rotate(135deg) saturate(1.4) brightness(1.15);
    }
    100% {
        filter: hue-rotate(180deg) saturate(1.1) brightness(1.02);
    }
}

/* Применяем анимацию к иконке */
#telegram-popup .telegram-icon {
    animation: telegramGradientShift 3s ease-in-out infinite alternate;
}

/* Дополнительный эффект для подложки иконки */
#telegram-popup .telegram-icon-bg {
    animation: telegramColorShift 4s ease-in-out infinite;
}

/* Анимации появления попапа */
@keyframes telegramSlideIn {
    from {
        transform: translateY(100px) translateZ(0);
        opacity: 0;
    }
    to {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }
}

@keyframes telegramSlideOut {
    from {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }
    to {
        transform: translateY(100px) translateZ(0);
        opacity: 0;
    }
}

/* Hover эффекты с переливами */
#telegram-popup:hover .telegram-icon {
    animation-duration: 1.5s !important;
}

#telegram-popup:hover .telegram-icon-bg {
    animation-duration: 2s !important;
}

/* Shimmer эффект для подложки иконки */
@keyframes iconShimmer {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Дополнительные эффекты при взаимодействии */
#telegram-popup:active .telegram-icon {
    animation-play-state: paused;
}

/* Специальная оптимизация для iOS */
@supports (-webkit-touch-callout: none) {
    #telegram-popup {
        -webkit-transform: translate3d(0, 0, 0) !important;
        -webkit-backface-visibility: hidden !important;
        -webkit-perspective: 1000px !important;
    }
}

/* Улучшенная производительность для мобильных */
#telegram-popup,
#telegram-popup * {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Состояния попапа */
#telegram-popup.popup-visible {
    transform: translateY(0) translateZ(0) !important;
    opacity: 1 !important;
}

#telegram-popup.popup-hidden {
    transform: translateY(100px) translateZ(0) !important;
    opacity: 0 !important;
}

/* Специальные стили для устройств с Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #telegram-popup .telegram-icon {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

/* Усиленная стабилизация для мобильных браузеров */
@media screen and (max-width: 768px) {
    #telegram-popup {
        position: fixed !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
        z-index: 2147483647 !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000px !important;
        perspective: 1000px !important;
    }
    
    /* Специально для iOS Safari */
    @supports (-webkit-overflow-scrolling: touch) {
        #telegram-popup {
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            -webkit-font-smoothing: antialiased !important;
            -webkit-tap-highlight-color: transparent !important;
        }
    }
    
    /* Дополнительные правила для Chrome на Android */
    @supports (-webkit-appearance: none) {
        #telegram-popup {
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
            contain: layout style paint !important;
        }
    }
}

/* Специальные правила для предотвращения исчезновения */
#telegram-popup.popup-visible {
    position: fixed !important;
    z-index: 2147483647 !important;
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* Дополнительные правила для Samsung Internet и других мобильных браузеров */
@media screen and (max-width: 480px) {
    #telegram-popup {
        -webkit-transform: translate3d(0, 0, 1px) !important;
        transform: translate3d(0, 0, 1px) !important;
        isolation: isolate !important;
    }
}