/* VideoMania Icons - Красивые анимированные иконки */

.vm-icon {
    transition: var(--vm-transition);
    cursor: pointer;
    display: inline-block;
    /* Оптимизация для предотвращения мерцания */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.vm-icon:hover {
    transform: scale3d(1.1, 1.1, 1);
}

.vm-icon-ai-generate:hover .magic-wand {
    animation: magic-sparkle 1.5s ease-in-out infinite;
}

.vm-icon-ai-generate:hover .star-1 {
    animation: star-twinkle 1.2s ease-in-out infinite;
}

.vm-icon-ai-generate:hover .star-2 {
    animation: star-twinkle 1.4s ease-in-out infinite 0.2s;
}

.vm-icon-ai-generate:hover .star-3 {
    animation: star-twinkle 1.1s ease-in-out infinite 0.4s;
}

@keyframes magic-sparkle {
    0%, 100% { 
        stroke-width: 2; 
        filter: drop-shadow(0 0 5px #667eea);
        transform: translateZ(0);
    }
    50% { 
        stroke-width: 3; 
        filter: drop-shadow(0 0 15px #667eea);
        transform: translateZ(0);
    }
}

@keyframes star-twinkle {
    0%, 100% { 
        opacity: 0.7; 
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    }
    50% { 
        opacity: 1; 
        transform: scale3d(1.3, 1.3, 1) rotate3d(0, 0, 1, 180deg);
        filter: drop-shadow(0 0 8px currentColor);
    }
}

.vm-icon-ai-loading .ai-brain {
    animation: brain-pulse 2s ease-in-out infinite;
}

.vm-icon-ai-loading .particle-1 {
    animation: particle-orbit-1 3s linear infinite;
}

.vm-icon-ai-loading .particle-2 {
    animation: particle-orbit-2 3s linear infinite;
}

.vm-icon-ai-loading .particle-3 {
    animation: particle-orbit-3 3s linear infinite;
}

.vm-icon-ai-loading .particle-4 {
    animation: particle-float 2.5s ease-in-out infinite;
}

.vm-icon-ai-loading .particle-5 {
    animation: particle-float 2.5s ease-in-out infinite 0.5s;
}

@keyframes brain-pulse {
    0%, 100% { 
        transform: scale3d(1, 1, 1);
        filter: drop-shadow(0 0 5px #667eea);
    }
    50% { 
        transform: scale3d(1.05, 1.05, 1);
        filter: drop-shadow(0 0 15px #667eea);
    }
}

@keyframes particle-orbit-1 {
    0% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
    25% { transform: translate3d(2px, -2px, 0) rotate3d(0, 0, 1, 90deg); }
    50% { transform: translate3d(0, -4px, 0) rotate3d(0, 0, 1, 180deg); }
    75% { transform: translate3d(-2px, -2px, 0) rotate3d(0, 0, 1, 270deg); }
    100% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 360deg); }
}

@keyframes particle-orbit-2 {
    0% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
    25% { transform: translate3d(-2px, -2px, 0) rotate3d(0, 0, 1, 90deg); }
    50% { transform: translate3d(0, -4px, 0) rotate3d(0, 0, 1, 180deg); }
    75% { transform: translate3d(2px, -2px, 0) rotate3d(0, 0, 1, 270deg); }
    100% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 360deg); }
}

@keyframes particle-orbit-3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(1px, 2px) rotate(90deg); }
    50% { transform: translate(0, 4px) rotate(180deg); }
    75% { transform: translate(-1px, 2px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes particle-float {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-3px) scale(1.2);
        opacity: 1;
    }
}

/* ============ ПОСТОЯННЫЕ АНИМАЦИИ (ВСЕГДА АКТИВНЫЕ) ============ */
/* Добавлены постоянные анимации для всех иконок (не только при hover) */

/* AI Generate - магические искры постоянно мерцают */
.vm-icon-ai-generate .magic-wand {
    animation: magic-sparkle 3s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-ai-generate .star-1 {
    animation: star-twinkle 3.5s ease-in-out infinite;
    will-change: transform, opacity;
}

.vm-icon-ai-generate .star-2 {
    animation: star-twinkle 4s ease-in-out infinite 0.5s;
    will-change: transform, opacity;
}

.vm-icon-ai-generate .star-3 {
    animation: star-twinkle 3.2s ease-in-out infinite 1s;
    will-change: transform, opacity;
}

/* Image Create - кисть и краски постоянно в движении */
.vm-icon-image-create .brush {
    animation: brush-stroke 4s ease-in-out infinite;
    will-change: transform;
}

.vm-icon-image-create .canvas {
    animation: canvas-glow 5s ease-in-out infinite;
    will-change: filter;
}

.vm-icon-image-create .paint-1 {
    animation: paint-appear 6s ease-in-out infinite;
    will-change: transform, opacity;
}

.vm-icon-image-create .paint-2 {
    animation: paint-appear 6s ease-in-out infinite 1.5s;
    will-change: transform, opacity;
}

.vm-icon-image-create .stroke-1 {
    animation: stroke-draw 7s ease-in-out infinite 2s;
    will-change: opacity;
}

/* Download - облако плавает */
.vm-icon-download .cloud {
    animation: cloud-float 4s ease-in-out infinite;
    will-change: transform;
}

/* Video Create - камера и пленка в действии */
.vm-icon-video-create .camera-body {
    animation: camera-focus 3s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-video-create .camera-lens {
    animation: lens-zoom 4s ease-in-out infinite 0.5s;
    will-change: transform;
}

.vm-icon-video-create .film-1 {
    animation: film-move 5s linear infinite;
    will-change: transform;
}

.vm-icon-video-create .film-2 {
    animation: film-move 5s linear infinite 1s;
    will-change: transform;
}

.vm-icon-video-create .film-3 {
    animation: film-move 5s linear infinite 2s;
    will-change: transform;
}

.vm-icon-video-create .recording-light {
    animation: recording-blink 2s ease-in-out infinite;
    will-change: opacity;
}

/* Text Generate - перо пишет, искры мерцают */
.vm-icon-text-generate .pen {
    animation: pen-write 4s ease-in-out infinite;
    will-change: transform;
}

.vm-icon-text-generate .spark-1 {
    animation: spark-twinkle 3s ease-in-out infinite;
    will-change: transform, opacity;
}

.vm-icon-text-generate .spark-2 {
    animation: spark-twinkle 3.5s ease-in-out infinite 0.7s;
    will-change: transform, opacity;
}

.vm-icon-text-generate .spark-3 {
    animation: spark-twinkle 2.8s ease-in-out infinite 1.2s;
    will-change: transform, opacity;
}

.vm-icon-text-generate .text-line {
    animation: text-appear 5s ease-in-out infinite 1.5s;
    will-change: opacity;
}

/* Home - окна мерцают */
.vm-icon-home .house {
    animation: house-glow 4s ease-in-out infinite;
    will-change: filter;
}

.vm-icon-home .window {
    animation: window-light 6s ease-in-out infinite;
    will-change: fill, opacity;
}

/* Settings - шестеренка медленно вращается */
.vm-icon-settings .gear {
    animation: gear-rotate 8s linear infinite;
    will-change: transform;
}

.vm-icon-settings .gear-center {
    animation: gear-center-pulse 3s ease-in-out infinite;
    will-change: transform, filter;
}

/* Download Images - стопка изображений плавает */
.vm-icon-download-images .image-stack {
    animation: image-stack-float 4s ease-in-out infinite;
    will-change: transform;
}

.vm-icon-download-images .image-1 {
    animation: image-stack-float 4s ease-in-out infinite;
    will-change: transform;
}

.vm-icon-download-images .image-2 {
    animation: image-stack-float 4s ease-in-out infinite 0.3s;
    will-change: transform;
}

.vm-icon-download-images .image-3 {
    animation: image-stack-float 4s ease-in-out infinite 0.6s;
    will-change: transform;
}

/* Download Videos - видео файлы мерцают */
.vm-icon-download-videos .video-file {
    animation: video-file-glow 3s ease-in-out infinite;
    will-change: filter;
}

.vm-icon-download-videos .play-bg {
    animation: video-play-pulse 2.5s ease-in-out infinite;
    will-change: transform, opacity;
}

.vm-icon-download-videos .play-triangle {
    animation: video-play-triangle 3s ease-in-out infinite 0.5s;
    will-change: transform;
}

/* Play - кнопка воспроизведения постоянно пульсирует */
.vm-icon-play .play-bg {
    animation: play-pulse 4s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-play .play-triangle {
    animation: play-bounce 3s ease-in-out infinite 0.5s;
    will-change: transform;
}

/* Pause - кнопки паузы мягко пульсируют */
.vm-icon-pause .pause-bg {
    animation: pause-pulse 3.5s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-pause .pause-bar {
    animation: pause-bars 4s ease-in-out infinite 0.3s;
    will-change: transform;
}

/* Stop - кнопка остановки мерцает */
.vm-icon-stop .stop-bg {
    animation: stop-pulse 3.5s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-stop .stop-square {
    animation: stop-shrink 4s ease-in-out infinite 0.7s;
    will-change: transform;
}

/* Clear - кисточка постоянно метет */
.vm-icon-clear .brush-handle {
    animation: brush-sweep 5s ease-in-out infinite;
    will-change: transform;
}

.vm-icon-clear .dust-1 {
    animation: dust-clear 4s ease-in-out infinite;
    will-change: transform, opacity;
}

.vm-icon-clear .dust-2 {
    animation: dust-clear 4s ease-in-out infinite 0.5s;
    will-change: transform, opacity;
}

.vm-icon-clear .dust-3 {
    animation: dust-clear 4s ease-in-out infinite 1s;
    will-change: transform, opacity;
}

/* View - глаз периодически моргает */
/*.vm-icon-view .eye-shape {
    animation: eye-blink 6s ease-in-out infinite;
    will-change: transform;
}

.vm-icon-view .iris {
    animation: iris-expand 4s ease-in-out infinite 1s;
    will-change: transform;
}

.vm-icon-view .pupil {
    animation: pupil-dilate 3s ease-in-out infinite 1.5s;
    will-change: transform;
}

.vm-icon-view .highlight {
    animation: highlight-sparkle 5s ease-in-out infinite 2s;
    will-change: transform, opacity;
}*/

/* Close - кнопка закрытия слегка пульсирует */
/*.vm-icon-close .close-bg {
    animation: close-pulse 3s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-close .close-x {
    animation: close-rotate 8s linear infinite;
    will-change: transform;
}*/

/* Success - галочка постоянно сияет */
/*.vm-icon-success .success-bg {
    animation: success-glow 3s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-success .check {
    animation: check-draw 4s ease-in-out infinite;
    will-change: stroke-dasharray, opacity;
}*/

/* Error - предупреждение слегка трясется */
/*.vm-icon-error .triangle {
    animation: error-shake 6s ease-in-out infinite;
    will-change: transform;
}*/

/* Warning - предупреждение мерцает */
.vm-icon-warning .warning-triangle {
    animation: warning-shake 5s ease-in-out infinite;
    will-change: transform;
}

.vm-icon-warning .warning-glow {
    animation: warning-pulse 3s ease-in-out infinite;
    will-change: opacity, filter;
}

.vm-icon-warning .warning-exclamation {
    animation: warning-flash 4s ease-in-out infinite 0.5s;
    will-change: opacity;
}

/* Chat Send - стрелка готова к отправке */
.vm-icon-chat-send .send-arrow {
    animation: send-ready 4s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-chat-send .send-trail {
    animation: trail-fade 3s ease-out infinite;
    will-change: opacity, transform;
}

/* Modal Close - кнопка закрытия модального окна */
/*.vm-icon-modal-close .modal-close-bg {
    animation: modal-close-pulse 3s ease-in-out infinite;
    will-change: transform, filter;
}

.vm-icon-modal-close .modal-close-x {
    animation: close-x-rotate 6s linear infinite;
    will-change: transform;
}*/

/* Video Upload - облако поднимается */
.vm-icon-video-upload .upload-cloud {
    animation: cloud-rise 4s ease-in-out infinite;
    will-change: transform;
}

.vm-icon-video-upload .camera-upload {
    animation: camera-glow 3s ease-in-out infinite 0.5s;
    will-change: filter;
}

.vm-icon-video-upload .upload-arrow {
    animation: arrow-upload 3.5s ease-in-out infinite 1s;
    will-change: transform;
}

/* ============ IMAGE CREATE ICON ============ */
.vm-icon-image-create:hover .brush {
    animation: brush-stroke 1.5s ease-in-out infinite;
}

.vm-icon-image-create:hover .canvas {
    animation: canvas-glow 2s ease-in-out infinite;
}

.vm-icon-image-create:hover .paint-1 {
    animation: paint-appear 1.8s ease-in-out infinite;
}

.vm-icon-image-create:hover .paint-2 {
    animation: paint-appear 1.8s ease-in-out infinite 0.3s;
}

.vm-icon-image-create:hover .stroke-1 {
    animation: stroke-draw 2s ease-in-out infinite 0.6s;
}

@keyframes brush-stroke {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg);
    }
    25% { 
        transform: translate(-1px, -1px) rotate(-5deg);
    }
    50% { 
        transform: translate(1px, 1px) rotate(5deg);
    }
    75% { 
        transform: translate(-0.5px, 0.5px) rotate(-2deg);
    }
}

@keyframes canvas-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 10px #667eea);
    }
}

@keyframes paint-appear {
    0%, 30% { 
        opacity: 0;
        transform: scale(0);
    }
    50% { 
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% { 
        opacity: 0.7;
        transform: scale(1);
    }
}

@keyframes stroke-draw {
    0% { 
        stroke-dasharray: 0 10;
        opacity: 0;
    }
    50% { 
        stroke-dasharray: 5 5;
        opacity: 1;
    }
    100% { 
        stroke-dasharray: 10 0;
        opacity: 1;
    }
}

/* ============ DOWNLOAD ICON ============ */
/*.vm-icon-download:hover .cloud {
    animation: cloud-float 2s ease-in-out infinite;
}

.vm-icon-download:hover .download-arrow {
    animation: download-bounce 1.5s ease-in-out infinite;
}

@keyframes cloud-float {
    0%, 100% { 
        transform: translateY(0);
        filter: drop-shadow(0 2px 8px rgba(102, 126, 234, 0.3));
    }
    50% { 
        transform: translateY(-2px);
        filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.4));
    }
}

@keyframes download-bounce {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(2px);
    }
}*/

/* ============ DOWNLOAD IMAGES ICON ============ */
.vm-icon-download-images:hover .image-stack {
    animation: image-stack-float 1.5s ease-in-out infinite;
}

.vm-icon-download-images:hover .image-1 {
    animation-delay: 0s;
}

.vm-icon-download-images:hover .image-2 {
    animation-delay: 0.2s;
}

.vm-icon-download-images:hover .image-3 {
    animation-delay: 0.4s;
}

.vm-icon-download-images:hover .download-images-arrow {
    animation: download-images-pulse 1.2s ease-in-out infinite;
}

.vm-icon-download-images:hover .image-icon,
.vm-icon-download-images:hover .image-mountain {
    animation: image-content-shimmer 2s ease-in-out infinite;
}

@keyframes image-stack-float {
    0%, 100% { 
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
    }
    50% { 
        transform: translateY(-3px) scale(1.02);
        filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.5));
    }
}

@keyframes download-images-pulse {
    0%, 100% { 
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 5px #00ff88);
    }
    50% { 
        transform: translateY(2px) scale(1.1);
        filter: drop-shadow(0 0 12px #00ff88);
    }
}

@keyframes image-content-shimmer {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ============ DOWNLOAD VIDEOS ICON ============ */
.vm-icon-download-videos:hover .video-file {
    animation: video-file-glow 1.6s ease-in-out infinite;
}

.vm-icon-download-videos:hover .main-video {
    animation-delay: 0s;
}

.vm-icon-download-videos:hover .background-video {
    animation-delay: 0.3s;
}

.vm-icon-download-videos:hover .play-bg {
    animation: video-play-pulse 1.2s ease-in-out infinite;
}

.vm-icon-download-videos:hover .play-triangle {
    animation: video-play-triangle 1.8s ease-in-out infinite;
}

.vm-icon-download-videos:hover .download-videos-arrow {
    animation: download-videos-bounce 1.4s ease-in-out infinite;
}

.vm-icon-download-videos:hover .video-timeline {
    animation: timeline-progress 2.5s linear infinite;
}

@keyframes video-file-glow {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 2px 6px rgba(118, 75, 162, 0.3));
    }
    50% { 
        transform: scale(1.03);
        filter: drop-shadow(0 4px 12px rgba(118, 75, 162, 0.5));
    }
}

@keyframes video-play-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.9;
    }
    50% { 
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes video-play-triangle {
    0%, 100% { 
        transform: scale(1);
    }
    30% { 
        transform: scale(0.8);
    }
    60% { 
        transform: scale(1.2);
    }
}

@keyframes download-videos-bounce {
    0%, 100% { 
        transform: translateY(0);
        filter: drop-shadow(0 0 6px #00ff88);
    }
    50% { 
        transform: translateY(3px);
        filter: drop-shadow(0 0 15px #00ff88);
    }
}

@keyframes timeline-progress {
    0% { 
        width: 2px;
        opacity: 0.7;
    }
    50% { 
        width: 8px;
        opacity: 1;
    }
    100% { 
        width: 2px;
        opacity: 0.7;
    }
}

/* ============ DOWNLOAD ALL ICON ============ */
.vm-icon-download-all:hover .folder {
    animation: folder-open 1.8s ease-in-out infinite;
}

.vm-icon-download-all:hover .file-image {
    animation: file-float 1.5s ease-in-out infinite;
}

.vm-icon-download-all:hover .file-video {
    animation: file-float 1.5s ease-in-out infinite 0.2s;
}

.vm-icon-download-all:hover .file-other {
    animation: file-float 1.5s ease-in-out infinite 0.4s;
}

.vm-icon-download-all:hover .download-all-arrow {
    animation: download-all-pulse 1.3s ease-in-out infinite;
}

@keyframes folder-open {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 2px 6px rgba(102, 126, 234, 0.3));
    }
    30% { 
        transform: scale(1.05) rotate(-2deg);
        filter: drop-shadow(0 4px 10px rgba(102, 126, 234, 0.4));
    }
    70% { 
        transform: scale(1.03) rotate(1deg);
        filter: drop-shadow(0 3px 8px rgba(102, 126, 234, 0.4));
    }
}

@keyframes file-float {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: translateY(-2px) scale(1.1);
        opacity: 1;
    }
}

@keyframes download-all-pulse {
    0%, 100% { 
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 6px #00ff88);
    }
    50% { 
        transform: translateY(2px) scale(1.05);
        filter: drop-shadow(0 0 15px #00ff88);
    }
}

/* ============ VIDEO MERGE ICON ============ */
.vm-icon-video-merge:hover .left-tape {
    animation: tape-slide-in 1.5s ease-in-out infinite;
}

.vm-icon-video-merge:hover .right-tape {
    animation: tape-slide-in 1.5s ease-in-out infinite 0.2s;
}

.vm-icon-video-merge:hover .merged-tape {
    animation: merged-tape-glow 2s ease-in-out infinite 0.4s;
}

.vm-icon-video-merge:hover .frame {
    animation: frame-flicker 1.2s ease-in-out infinite;
}

.vm-icon-video-merge:hover .merged-frame {
    animation: merged-frame-shine 1.8s ease-in-out infinite 0.6s;
}

.vm-icon-video-merge:hover .merge-arrow {
    animation: arrow-flow 1.5s ease-in-out infinite 0.3s;
}

.vm-icon-video-merge:hover .merge-center {
    animation: merge-pulse 2s ease-in-out infinite 0.5s;
}

.vm-icon-video-merge:hover .merge-plus {
    animation: plus-rotate 2s ease-in-out infinite 0.5s;
}

@keyframes tape-slide-in {
    0%, 100% { 
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translateX(2px) scale(1.05);
        opacity: 0.9;
        filter: drop-shadow(0 0 5px #667eea);
    }
}

@keyframes merged-tape-glow {
    0%, 100% { 
        opacity: 0.9;
        filter: drop-shadow(0 0 3px #00ff88);
    }
    50% { 
        opacity: 1;
        filter: drop-shadow(0 0 12px #00ff88);
        transform: scale(1.02);
    }
}

@keyframes frame-flicker {
    0%, 100% { 
        opacity: 0.7;
        transform: scale(1);
    }
    25% { 
        opacity: 0.9;
        transform: scale(1.1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1);
    }
    75% { 
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes merged-frame-shine {
    0%, 100% { 
        opacity: 0.9;
        fill: white;
    }
    50% { 
        opacity: 1;
        fill: #00ff88;
        filter: drop-shadow(0 0 3px #00ff88);
    }
}

@keyframes arrow-flow {
    0%, 100% { 
        stroke-width: 2;
        opacity: 0.8;
    }
    50% { 
        stroke-width: 3;
        opacity: 1;
        filter: drop-shadow(0 0 8px #00ff88);
    }
}

@keyframes merge-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 3px #00ff88);
    }
    50% { 
        transform: scale(1.2);
        filter: drop-shadow(0 0 15px #00ff88);
    }
}

@keyframes plus-rotate {
    0%, 100% { 
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    25% { 
        transform: rotate(90deg) scale(1.1);
        opacity: 0.8;
    }
    50% { 
        transform: rotate(180deg) scale(1);
        opacity: 1;
    }
    75% { 
        transform: rotate(270deg) scale(1.1);
        opacity: 0.8;
    }
}

/* ============ DOWNLOAD BUTTONS STATES ============ */
.download-button {
    transition: var(--vm-transition);
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 10px 30px;
    border: none;
    border-radius: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* margin и transform управляются в site.css */
}

.download-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.7);
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

.download-button.disabled:hover {
    transform: none;
}

.download-button.disabled .vm-icon {
    animation: none;
}

.download-button.enabled {
    opacity: 1;
    cursor: pointer;
}

.download-button.enabled:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    background: linear-gradient(135deg, #7c8df1 0%, #8b5eb5 100%);
}

.download-button.loading {
    cursor: progress;
    background: linear-gradient(135deg, #ffa64d 0%, #ff8a00 100%);
}

.download-button.loading .vm-icon {
    animation: download-button-spin 1s linear infinite;
}

.download-button.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes download-button-spin {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

@keyframes loading-shimmer {
    0% { 
        left: -100%;
    }
    100% { 
        left: 100%;
    }
}

/* ============ CLEAR ICON ============ */
.vm-icon-clear:hover .brush-handle,
.vm-icon-clear:hover .brush-head {
    animation: brush-sweep 1.2s ease-in-out infinite;
}

.vm-icon-clear:hover .dust-1 {
    animation: dust-clear 1.5s ease-in-out infinite;
}

.vm-icon-clear:hover .dust-2 {
    animation: dust-clear 1.5s ease-in-out infinite 0.2s;
}

.vm-icon-clear:hover .dust-3 {
    animation: dust-clear 1.5s ease-in-out infinite 0.4s;
}

.vm-icon-clear:hover .clean-line {
    animation: clean-sweep 1.8s ease-in-out infinite;
}

@keyframes brush-sweep {
    0%, 100% { 
        transform: rotate(0deg);
    }
    50% { 
        transform: rotate(-15deg);
    }
}

@keyframes dust-clear {
    0% { 
        opacity: 0.6;
        transform: scale(1) translate(0, 0);
    }
    50% { 
        opacity: 0.2;
        transform: scale(0.5) translate(5px, -5px);
    }
    100% { 
        opacity: 0;
        transform: scale(0) translate(10px, -10px);
    }
}

@keyframes clean-sweep {
    0% { 
        stroke-dasharray: 0 20;
        opacity: 0;
    }
    50% { 
        stroke-dasharray: 10 10;
        opacity: 1;
    }
    100% { 
        stroke-dasharray: 20 0;
        opacity: 0.8;
    }
}

/* ============ VIEW ICON ============ */
.vm-icon-view:hover .eye-shape {
    animation: eye-blink 2s ease-in-out infinite;
}

.vm-icon-view:hover .iris {
    animation: iris-expand 1.5s ease-in-out infinite;
}

.vm-icon-view:hover .pupil {
    animation: pupil-dilate 1.8s ease-in-out infinite;
}

.vm-icon-view:hover .highlight {
    animation: highlight-sparkle 1.2s ease-in-out infinite;
}

@keyframes eye-blink {
    0%, 85%, 100% { 
        transform: scaleY(1);
    }
    90%, 95% { 
        transform: scaleY(0.1);
    }
}

@keyframes iris-expand {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 3px currentColor);
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px currentColor);
    }
}

@keyframes pupil-dilate {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(0.8);
    }
}

@keyframes highlight-sparkle {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.7;
        transform: scale(1.3);
    }
}

/* ============ CLOSE ICON ============ */
/*.vm-icon-close:hover .close-bg {
    animation: close-pulse 1s ease-in-out infinite;
}

.vm-icon-close:hover .close-x {
    animation: close-rotate 0.8s ease-in-out infinite;
}

@keyframes close-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px #ff6b6b);
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px #ff6b6b);
    }
}

@keyframes close-rotate {
    0%, 100% { 
        transform: rotate(0deg);
    }
    50% { 
        transform: rotate(90deg);
    }
}*/

/* ============ SUCCESS ICON ============ */
.vm-icon-success:hover .success-bg {
    animation: success-glow 1.5s ease-in-out infinite;
}

.vm-icon-success:hover .check {
    animation: check-draw 2s ease-in-out infinite;
}

@keyframes success-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 8px #00ff88);
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 20px #00ff88);
        transform: scale(1.02);
    }
}

@keyframes check-draw {
    0% { 
        stroke-dasharray: 0 20;
    }
    50% { 
        stroke-dasharray: 10 10;
    }
    100% { 
        stroke-dasharray: 20 0;
    }
}

/* ============ ERROR ICON ============ */
/*.vm-icon-error:hover .triangle {
    animation: error-shake 0.6s ease-in-out infinite;
}

@keyframes error-shake {
    0%, 100% { 
        transform: translateX(0);
    }
    25% { 
        transform: translateX(-2px);
    }
    75% { 
        transform: translateX(2px);
    }
}*/

/* ============ TOGGLE PANEL ICON ============ */
.vm-icon-toggle-panel:hover .left-panel {
    animation: panel-highlight 1.5s ease-in-out infinite;
}

.vm-icon-toggle-panel:hover .toggle-arrow {
    animation: arrow-bounce 1s ease-in-out infinite;
}

@keyframes panel-highlight {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 10px #667eea);
    }
}

@keyframes arrow-bounce {
    0%, 100% { 
        transform: translateX(0);
    }
    50% { 
        transform: translateX(2px);
    }
}

/* ============ СОСТОЯНИЯ И РАЗМЕРЫ ============ */
.vm-icon.loading {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Размеры */
.vm-icon.sm { width: 16px; height: 16px; }
.vm-icon.md { width: 24px; height: 24px; }
.vm-icon.lg { width: 32px; height: 32px; }
.vm-icon.xl { width: 48px; height: 48px; }

/* Отзывчивость */
@media (max-width: 768px) {
    .vm-icon {
        transform: scale(0.9);
    }
    
    .vm-icon:hover {
        transform: scale(1);
    }
}

/* Поддержка prefers-reduced-motion - максимальная специфичность для доступности */
@media (prefers-reduced-motion: reduce) {
    /* Используем :where() для группировки без увеличения специфичности */
    :where(.vm-icon),
    :where(.vm-icon) *,
    :where(.vm-icon)::before,
    :where(.vm-icon)::after {
        /* Критичные accessibility правила - используем каскад и специфичность */
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
    
    /* Дополнительная специфичность для гарантии применения */
    body :where(.vm-icon),
    body :where(.vm-icon) *,
    body :where(.vm-icon)::before,
    body :where(.vm-icon)::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* ============ VIDEO CREATE ICON ============ */
.vm-icon-video-create:hover .camera-body {
    animation: camera-focus 2s ease-in-out infinite;
}

.vm-icon-video-create:hover .camera-lens {
    animation: lens-zoom 1.5s ease-in-out infinite;
}

.vm-icon-video-create:hover .film-1 {
    animation: film-move 2s ease-in-out infinite;
}

.vm-icon-video-create:hover .film-2 {
    animation: film-move 2s ease-in-out infinite 0.3s;
}

.vm-icon-video-create:hover .film-3 {
    animation: film-move 2s ease-in-out infinite 0.6s;
}

.vm-icon-video-create:hover .recording-light {
    animation: recording-blink 1s ease-in-out infinite;
}

@keyframes camera-focus {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px #667eea);
    }
}

@keyframes lens-zoom {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.1);
    }
}

@keyframes film-move {
    0%, 100% { 
        transform: translateY(0);
        opacity: 1;
    }
    50% { 
        transform: translateY(-2px);
        opacity: 0.7;
    }
}

@keyframes recording-blink {
    0%, 100% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.3;
    }
}

/* ============ PLAY ICON ============ */
.vm-icon-play:hover .play-bg {
    animation: play-pulse 1.5s ease-in-out infinite;
}

.vm-icon-play:hover .play-triangle {
    animation: play-bounce 1.2s ease-in-out infinite;
}

@keyframes play-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px #00ff88);
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px #00ff88);
    }
}

@keyframes play-bounce {
    0%, 100% { 
        transform: translateX(0);
    }
    50% { 
        transform: translateX(2px);
    }
}

/* ============ PAUSE ICON ============ */
.vm-icon-pause:hover .pause-bg {
    animation: pause-pulse 1.5s ease-in-out infinite;
}

.vm-icon-pause:hover .pause-bar {
    animation: pause-bars 1s ease-in-out infinite;
}

@keyframes pause-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px #ffa64d);
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px #ffa64d);
    }
}

@keyframes pause-bars {
    0%, 100% { 
        transform: scaleY(1);
    }
    50% { 
        transform: scaleY(0.8);
    }
}

/* ============ STOP ICON ============ */
.vm-icon-stop:hover .stop-bg {
    animation: stop-pulse 1.5s ease-in-out infinite;
}

.vm-icon-stop:hover .stop-square {
    animation: stop-shrink 1.2s ease-in-out infinite;
}

@keyframes stop-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px #ff6b6b);
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px #ff6b6b);
    }
}

@keyframes stop-shrink {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(0.9);
    }
}

/* ============ TEXT GENERATE ICON ============ */
.vm-icon-text-generate:hover .pen {
    animation: pen-write 1.5s ease-in-out infinite;
}

.vm-icon-text-generate:hover .spark-1 {
    animation: spark-twinkle 1.2s ease-in-out infinite;
}

.vm-icon-text-generate:hover .spark-2 {
    animation: spark-twinkle 1.4s ease-in-out infinite 0.2s;
}

.vm-icon-text-generate:hover .spark-3 {
    animation: spark-twinkle 1.1s ease-in-out infinite 0.4s;
}

.vm-icon-text-generate:hover .text-line {
    animation: text-appear 2s ease-in-out infinite;
}

@keyframes pen-write {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg);
    }
    25% { 
        transform: translate(1px, -1px) rotate(5deg);
    }
    50% { 
        transform: translate(-1px, 1px) rotate(-5deg);
    }
    75% { 
        transform: translate(0.5px, 0.5px) rotate(2deg);
    }
}

@keyframes spark-twinkle {
    0%, 100% { 
        opacity: 0.7; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.5);
        filter: drop-shadow(0 0 5px currentColor);
    }
}

@keyframes text-appear {
    0% { 
        stroke-dasharray: 0 10;
        opacity: 0.5;
    }
    50% { 
        stroke-dasharray: 5 5;
        opacity: 1;
    }
    100% { 
        stroke-dasharray: 10 0;
        opacity: 0.8;
    }
}

/* ============ HOME ICON ============ */
.vm-icon-home:hover .house {
    animation: house-glow 2s ease-in-out infinite;
}

.vm-icon-home:hover .door {
    animation: door-open 1.5s ease-in-out infinite;
}

.vm-icon-home:hover .window {
    animation: window-light 1.8s ease-in-out infinite;
}

@keyframes house-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 10px #667eea);
    }
}

@keyframes door-open {
    0%, 100% { 
        transform: scaleX(1);
    }
    50% { 
        transform: scaleX(0.9);
    }
}

@keyframes window-light {
    0%, 100% { 
        fill: white;
    }
    50% { 
        fill: #fff3cd;
    }
}

/* ============ SETTINGS ICON ============ */
.vm-icon-settings:hover .gear {
    animation: gear-rotate 3s linear infinite;
}

.vm-icon-settings:hover .gear-center {
    animation: gear-center-pulse 2s ease-in-out infinite;
}

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

@keyframes gear-center-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px #667eea);
    }
}

/* ============ VIDEO UPLOAD ICON ============ */
.vm-icon-video-upload:hover .upload-cloud {
    animation: cloud-rise 2s ease-in-out infinite;
}

.vm-icon-video-upload:hover .camera-upload {
    animation: camera-glow 1.5s ease-in-out infinite;
}

.vm-icon-video-upload:hover .upload-arrow {
    animation: arrow-upload 1.2s ease-in-out infinite;
}

@keyframes cloud-rise {
    0%, 100% { 
        transform: translateY(0);
        filter: drop-shadow(0 2px 8px rgba(0, 255, 136, 0.3));
    }
    50% { 
        transform: translateY(-3px);
        filter: drop-shadow(0 4px 12px rgba(0, 255, 136, 0.4));
    }
}

@keyframes camera-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 10px #667eea);
    }
}

@keyframes arrow-upload {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-2px);
    }
}

/* ============ EXPAND ICON ============ */
/*.vm-icon-expand:hover .settings-panel {
    animation: panel-highlight 1.5s ease-in-out infinite;
}

.vm-icon-expand:hover .expand-arrow {
    animation: arrow-bounce 1s ease-in-out infinite;
}

.vm-icon-expand:hover .setting-dot {
    animation: settings-pulse 1.3s ease-in-out infinite;
}*/

/* Дубликат panel-highlight удален - используется определение на строке 1180 */

@keyframes settings-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* ============ VIDEO LOADING ICON ============ */
.vm-icon-video-loading .video-camera {
    animation: camera-record 2s ease-in-out infinite;
}

.vm-icon-video-loading .video-lens {
    animation: lens-focus 1.8s ease-in-out infinite;
}

.vm-icon-video-loading .reel-1 {
    animation: reel-spin-1 3s linear infinite;
}

.vm-icon-video-loading .reel-2 {
    animation: reel-spin-2 2.5s linear infinite reverse;
}

.vm-icon-video-loading .dot-1 {
    animation: process-float 2s ease-in-out infinite;
}

.vm-icon-video-loading .dot-2 {
    animation: process-float 2s ease-in-out infinite 0.3s;
}

.vm-icon-video-loading .dot-3 {
    animation: process-float 2s ease-in-out infinite 0.6s;
}

@keyframes camera-record {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px #667eea);
    }
    50% { 
        transform: scale(1.02);
        filter: drop-shadow(0 0 15px #667eea);
    }
}

@keyframes lens-focus {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.1);
    }
}

@keyframes reel-spin-1 {
    0% { 
        transform: rotate(0deg);
        stroke-dasharray: 5 5;
    }
    50% { 
        stroke-dasharray: 8 2;
    }
    100% { 
        transform: rotate(360deg);
        stroke-dasharray: 5 5;
    }
}

@keyframes reel-spin-2 {
    0% { 
        transform: rotate(0deg);
        stroke-dasharray: 3 3;
    }
    50% { 
        stroke-dasharray: 6 0;
    }
    100% { 
        transform: rotate(360deg);
        stroke-dasharray: 3 3;
    }
}

@keyframes process-float {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-2px) scale(1.2);
        opacity: 1;
    }
}

/* ============ TIME INFO ICON ============ */
.vm-icon-time-info:hover .clock-face {
    animation: clock-tick 2s ease-in-out infinite;
}

.vm-icon-time-info:hover .progress-ring {
    animation: progress-rotate 3s linear infinite;
}

.vm-icon-time-info:hover .hour-hand {
    animation: hand-move 4s ease-in-out infinite;
}

.vm-icon-time-info:hover .minute-hand {
    animation: hand-move 2s ease-in-out infinite;
}

@keyframes clock-tick {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 8px #667eea);
    }
}

@keyframes progress-rotate {
    0% { 
        transform: rotate(0deg);
        stroke-dasharray: 20 40;
    }
    50% { 
        stroke-dasharray: 30 30;
    }
    100% { 
        transform: rotate(360deg);
        stroke-dasharray: 20 40;
    }
}

@keyframes hand-move {
    0%, 100% { 
        transform-origin: 12px 12px;
        transform: rotate(0deg);
    }
    50% { 
        transform: rotate(15deg);
    }
}

/* ============ WARNING ICON ============ */
.vm-icon-warning:hover .warning-triangle {
    animation: warning-shake 0.6s ease-in-out infinite;
}

.vm-icon-warning:hover .warning-glow {
    animation: warning-pulse 1.5s ease-in-out infinite;
}

.vm-icon-warning:hover .warning-exclamation,
.vm-icon-warning:hover .warning-dot {
    animation: warning-flash 1s ease-in-out infinite;
}

@keyframes warning-shake {
    0%, 100% { 
        transform: translateX(0);
    }
    25% { 
        transform: translateX(-1px);
    }
    75% { 
        transform: translateX(1px);
    }
}

@keyframes warning-pulse {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes warning-flash {
    0%, 100% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.7;
    }
}

/* ============ VIDEO PLAY FILLED ICON ============ */
.vm-icon-video-play-filled:hover .play-filled-bg {
    animation: play-filled-pulse 1.5s ease-in-out infinite;
}

.vm-icon-video-play-filled:hover .play-filled-triangle {
    animation: play-triangle-move 1.2s ease-in-out infinite;
}

.vm-icon-video-play-filled:hover .play-highlight {
    animation: highlight-shimmer 1.8s ease-in-out infinite;
}

@keyframes play-filled-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 8px #00ff88);
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 20px #00ff88);
    }
}

@keyframes play-triangle-move {
    0%, 100% { 
        transform: translateX(0);
    }
    50% { 
        transform: translateX(1px);
    }
}

@keyframes highlight-shimmer {
    0%, 100% { 
        opacity: 0.4;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.3);
    }
}

/* ============ VIDEO PREVIEW ICON ============ */
.vm-icon-video-preview:hover .preview-screen {
    animation: screen-glow 2s ease-in-out infinite;
}

.vm-icon-video-preview:hover .preview-play {
    animation: preview-play-pulse 1.5s ease-in-out infinite;
}

.vm-icon-video-preview:hover .timeline-thumb {
    animation: timeline-move 3s ease-in-out infinite;
}

@keyframes screen-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 5px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 15px #667eea);
    }
}

@keyframes preview-play-pulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.1);
    }
}

@keyframes timeline-move {
    0% { 
        transform: translateX(0);
    }
    50% { 
        transform: translateX(6px);
    }
    100% { 
        transform: translateX(0);
    }
}

/* ============ VIDEO DOWNLOAD ICON ============ */
/*.vm-icon-video-download:hover .video-file {
    animation: file-glow 2s ease-in-out infinite;
}

.vm-icon-video-download:hover .download-video-arrow {
    animation: download-arrow-bounce 1.5s ease-in-out infinite;
}

.vm-icon-video-download:hover .format-text {
    animation: format-pulse 1.8s ease-in-out infinite;
}

@keyframes file-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 5px #00ff88);
    }
    50% { 
        filter: drop-shadow(0 0 15px #00ff88);
    }
}

@keyframes download-arrow-bounce {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(2px);
    }
}

@keyframes format-pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.1);
    }
}*/

/* ============ VIDEO SHARE ICON ============ */
/*.vm-icon-video-share:hover .share-video {
    animation: share-center-pulse 2s ease-in-out infinite;
}

.vm-icon-video-share:hover .share-node {
    animation: node-pulse 1.5s ease-in-out infinite;
}

.vm-icon-video-share:hover .share-line {
    animation: connection-flow 2s ease-in-out infinite;
}

@keyframes share-center-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 10px #667eea);
    }
}

@keyframes node-pulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.2);
    }
}

@keyframes connection-flow {
    0% { 
        stroke-dasharray: 0 10;
        opacity: 0.7;
    }
    50% { 
        stroke-dasharray: 5 5;
        opacity: 1;
    }
    100% { 
        stroke-dasharray: 10 0;
        opacity: 0.7;
    }
}*/

/* ============ COPY LINK ICON ============ */
.vm-icon-copy-link:hover .link-chain-1,
.vm-icon-copy-link:hover .link-chain-2 {
    animation: chain-link 1.5s ease-in-out infinite;
}

.vm-icon-copy-link:hover .copy-indicator {
    animation: copy-success 2s ease-in-out infinite;
}

.vm-icon-copy-link:hover .copy-check {
    animation: check-draw 1.5s ease-in-out infinite;
}

@keyframes chain-link {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 8px #667eea);
    }
}

@keyframes copy-success {
    0%, 70% { 
        opacity: 0;
        transform: scale(0.8);
    }
    80%, 100% { 
        opacity: 0.7;
        transform: scale(1);
    }
}

/* Дубликат check-draw удален - используется определение на строке 1142 */

/* ============ SOCIAL SHARE ICONS ============ */
/*.vm-icon-telegram-share:hover .telegram-bg {
    animation: telegram-pulse 1.5s ease-in-out infinite;
}

.vm-icon-telegram-share:hover .telegram-plane {
    animation: plane-fly 1.2s ease-in-out infinite;
}

.vm-icon-whatsapp-share:hover .whatsapp-bg {
    animation: whatsapp-pulse 1.5s ease-in-out infinite;
}

.vm-icon-whatsapp-share:hover .whatsapp-bubble {
    animation: message-bounce 1.8s ease-in-out infinite;
}

@keyframes telegram-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 5px #0088cc);
    }
    50% { 
        filter: drop-shadow(0 0 15px #0088cc);
    }
}

@keyframes plane-fly {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg);
    }
    50% { 
        transform: translate(2px, -2px) rotate(5deg);
    }
}

@keyframes whatsapp-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 5px #25d366);
    }
    50% { 
        filter: drop-shadow(0 0 15px #25d366);
    }
}

@keyframes message-bounce {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.05);
    }
}
*/
/* ============ MODAL CLOSE ICON ============ */
/*.vm-icon-modal-close:hover .modal-close-bg {
    animation: modal-close-pulse 1.2s ease-in-out infinite;
}

.vm-icon-modal-close:hover .modal-close-x {
    animation: close-x-rotate 1.5s ease-in-out infinite;
}

@keyframes modal-close-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px #ff6b6b);
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px #ff6b6b);
    }
}

@keyframes close-x-rotate {
    0%, 100% { 
        transform: rotate(0deg);
    }
    50% { 
        transform: rotate(90deg);
    }
}*/

/* ============ TEXT COMING SOON ICON ============ */
.vm-icon-text-coming-soon:hover .text-pen {
    animation: pen-write 2s ease-in-out infinite;
}

.vm-icon-text-coming-soon:hover .pen-tip {
    animation: pen-tip-glow 1.5s ease-in-out infinite;
}

.vm-icon-text-coming-soon:hover .text-lines {
    animation: text-write 3s ease-in-out infinite;
}

.vm-icon-text-coming-soon:hover .spark {
    animation: spark-twinkle 1.8s ease-in-out infinite;
}

.vm-icon-text-coming-soon:hover .spark-1 {
    animation-delay: 0s;
}

.vm-icon-text-coming-soon:hover .spark-2 {
    animation-delay: 0.3s;
}

.vm-icon-text-coming-soon:hover .spark-3 {
    animation-delay: 0.6s;
}

.vm-icon-text-coming-soon:hover .star {
    animation: star-shine 2.5s ease-in-out infinite;
}

.vm-icon-text-coming-soon:hover .star-1 {
    animation-delay: 0.2s;
}

.vm-icon-text-coming-soon:hover .star-2 {
    animation-delay: 0.8s;
}

/* Дубликат pen-write удален - используется определение на строке 1417 */

@keyframes pen-tip-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #ffd700);
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 10px #ffd700);
        transform: scale(1.1);
    }
}

@keyframes text-write {
    0% { 
        stroke-dasharray: 0 50;
        opacity: 0.7;
    }
    50% { 
        stroke-dasharray: 25 25;
        opacity: 1;
    }
    100% { 
        stroke-dasharray: 50 0;
        opacity: 0.8;
    }
}

/* Дубликат spark-twinkle удален - используется определение на строке 1432 */

@keyframes star-shine {
    0%, 100% { 
        opacity: 0.7;
        transform: scale(1) rotate(0deg);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* ============ STORYBOARD ICONS ============ */
/* Storyboard Toggle */
.vm-icon-storyboard-toggle:hover .toggle-panel {
    animation: panel-slide 1.5s ease-in-out infinite;
}

.vm-icon-storyboard-toggle:hover .toggle-arrows {
    animation: arrows-move 1.2s ease-in-out infinite;
}

.vm-icon-storyboard-toggle:hover .toggle-arrows-accent {
    animation: arrows-glow 1.8s ease-in-out infinite;
}

@keyframes panel-slide {
    0%, 100% { 
        transform: translateX(0);
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        transform: translateX(2px);
        filter: drop-shadow(0 0 8px #667eea);
    }
}

@keyframes arrows-move {
    0%, 100% { 
        transform: translateX(0);
    }
    50% { 
        transform: translateX(3px);
    }
}

@keyframes arrows-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 2px #00ff88);
    }
    50% { 
        filter: drop-shadow(0 0 6px #00ff88);
    }
}

/* Storyboard History */
.vm-icon-storyboard-history:hover .history-clock {
    animation: history-pulse 2s ease-in-out infinite;
}

.vm-icon-storyboard-history:hover .clock-hour {
    animation: clock-tick-hour 4s linear infinite;
}

.vm-icon-storyboard-history:hover .clock-minute {
    animation: clock-tick-minute 2s linear infinite;
}

.vm-icon-storyboard-history:hover .film-strip {
    animation: film-move 3s ease-in-out infinite;
}

@keyframes history-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 5px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 15px #667eea);
    }
}

@keyframes clock-tick-hour {
    0% { 
        transform-origin: 12px 12px;
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

@keyframes clock-tick-minute {
    0% { 
        transform-origin: 12px 12px;
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

/* Дубликат film-move удален - используется определение на строке 1289 */

/* Storyboard Date */
.vm-icon-storyboard-date:hover .calendar-body {
    animation: calendar-glow 2s ease-in-out infinite;
}

.vm-icon-storyboard-date:hover .calendar-today {
    animation: today-pulse 1.5s ease-in-out infinite;
}

.vm-icon-storyboard-date:hover .calendar-ring {
    animation: ring-bounce 1.8s ease-in-out infinite;
}

@keyframes calendar-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 10px #667eea);
    }
}

@keyframes today-pulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.3);
    }
}

@keyframes ring-bounce {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-1px);
    }
}

/* Storyboard Scenes */
.vm-icon-storyboard-scenes:hover .scene-frame {
    animation: frame-stack 2s ease-in-out infinite;
}

.vm-icon-storyboard-scenes:hover .frame-1 {
    animation-delay: 0s;
}

.vm-icon-storyboard-scenes:hover .frame-2 {
    animation-delay: 0.3s;
}

.vm-icon-storyboard-scenes:hover .frame-3 {
    animation-delay: 0.6s;
}

.vm-icon-storyboard-scenes:hover .scene-counter {
    animation: counter-bounce 1.5s ease-in-out infinite;
}

@keyframes frame-stack {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
    }
}

@keyframes counter-bounce {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.2);
    }
}

/* Storyboard Delete */
.vm-icon-storyboard-delete:hover .trash-body {
    animation: trash-shake 0.6s ease-in-out infinite;
}

.vm-icon-storyboard-delete:hover .trash-lid {
    animation: lid-lift 1.5s ease-in-out infinite;
}

.vm-icon-storyboard-delete:hover .trash-lines {
    animation: lines-fade 1.2s ease-in-out infinite;
}

@keyframes trash-shake {
    0%, 100% { 
        transform: translateX(0);
    }
    25% { 
        transform: translateX(-1px);
    }
    75% { 
        transform: translateX(1px);
    }
}

@keyframes lid-lift {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-2px);
    }
}

@keyframes lines-fade {
    0%, 100% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.5;
    }
}

/* Storyboard Empty */
.vm-icon-storyboard-empty:hover .film-main {
    animation: film-reel 3s linear infinite;
}

.vm-icon-storyboard-empty:hover .film-frame {
    animation: frame-flicker 2s ease-in-out infinite;
}

.vm-icon-storyboard-empty:hover .film-perf {
    animation: perf-light 1.5s ease-in-out infinite;
}

@keyframes film-reel {
    0% { 
        transform: translateX(0);
    }
    100% { 
        transform: translateX(-4px);
    }
}

/* Дубликат frame-flicker удален - используется определение на строке 818 */

@keyframes perf-light {
    0%, 100% { 
        opacity: 0.7;
    }
    50% { 
        opacity: 1;
    }
}

/* Storyboard Processing */
.vm-icon-storyboard-processing .processing-gear-main {
    animation: gear-spin 3s linear infinite;
}

.vm-icon-storyboard-processing .processing-gear-small {
    animation: gear-spin-reverse 2s linear infinite;
}

.vm-icon-storyboard-processing .processing-gear-teeth {
    animation: teeth-glow 2s ease-in-out infinite;
}

@keyframes gear-spin {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

@keyframes gear-spin-reverse {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(-360deg);
    }
}

@keyframes teeth-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 8px #00ff88);
    }
}

/* ============ STATUS ICONS ============ */
/* Status Queued */
.vm-icon-status-queued .falling-sand {
    animation: sand-fall 2s ease-in-out infinite;
}

.vm-icon-status-queued .hourglass-frame {
    animation: hourglass-glow 3s ease-in-out infinite;
}

@keyframes sand-fall {
    0% { 
        transform: translateY(-2px);
        opacity: 1;
    }
    50% { 
        transform: translateY(0);
        opacity: 0.7;
    }
    100% { 
        transform: translateY(2px);
        opacity: 1;
    }
}

@keyframes hourglass-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #ffa64d);
    }
    50% { 
        filter: drop-shadow(0 0 8px #ffa64d);
    }
}

/* Status Running */
.vm-icon-status-running .running-circle {
    animation: running-spin 2s linear infinite;
}

.vm-icon-status-running .running-arrow {
    animation: arrow-pulse 1.5s ease-in-out infinite;
}

.vm-icon-status-running .running-center {
    animation: center-pulse 1.8s ease-in-out infinite;
}

@keyframes running-spin {
    0% { 
        transform-origin: 12px 12px;
        transform: rotate(0deg);
        stroke-dasharray: 60 10;
    }
    50% { 
        stroke-dasharray: 40 30;
    }
    100% { 
        transform: rotate(360deg);
        stroke-dasharray: 60 10;
    }
}

@keyframes arrow-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 3px #00ff88);
    }
    50% { 
        transform: scale(1.2);
        filter: drop-shadow(0 0 8px #00ff88);
    }
}

@keyframes center-pulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.3);
    }
}

/* Status Finished */
.vm-icon-status-finished .finished-circle {
    animation: success-pulse 2s ease-in-out infinite;
}

.vm-icon-status-finished .finished-check {
    animation: check-draw 1.5s ease-in-out infinite;
}

.vm-icon-status-finished .finished-shine {
    animation: shine-move 3s ease-in-out infinite;
}

@keyframes success-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 5px #06d6a0);
    }
    50% { 
        filter: drop-shadow(0 0 15px #06d6a0);
    }
}

/* Дубликат check-draw удален - используется определение на строке 1142 */

@keyframes shine-move {
    0%, 100% { 
        transform: translate(0, 0);
        opacity: 0.3;
    }
    50% { 
        transform: translate(2px, 2px);
        opacity: 0.6;
    }
}

/* Status Failed */
.vm-icon-status-failed .failed-circle {
    animation: error-pulse 1.5s ease-in-out infinite;
}

.vm-icon-status-failed .failed-x {
    animation: x-flash 1.2s ease-in-out infinite;
}

.vm-icon-status-failed .failed-glow {
    animation: error-glow 2s ease-in-out infinite;
}

@keyframes error-pulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.05);
    }
}

@keyframes x-flash {
    0%, 100% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.7;
    }
}

@keyframes error-glow {
    0%, 100% { 
        opacity: 0.5;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Status Cancelled */
.vm-icon-status-cancelled .cancelled-circle {
    animation: cancelled-fade 3s ease-in-out infinite;
}

.vm-icon-status-cancelled .cancelled-dash {
    animation: dash-fade 2s ease-in-out infinite;
}

@keyframes cancelled-fade {
    0%, 100% { 
        opacity: 0.8;
    }
    50% { 
        opacity: 1;
    }
}

@keyframes dash-fade {
    0%, 100% { 
        opacity: 0.7;
    }
    50% { 
        opacity: 1;
    }
}

/* Status Unknown */
.vm-icon-status-unknown .unknown-circle {
    animation: unknown-pulse 2.5s ease-in-out infinite;
}

.vm-icon-status-unknown .unknown-question {
    animation: question-bounce 2s ease-in-out infinite;
}

.vm-icon-status-unknown .unknown-dot {
    animation: dot-blink 1.5s ease-in-out infinite;
}

@keyframes unknown-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 3px #667eea);
    }
    50% { 
        filter: drop-shadow(0 0 10px #667eea);
    }
}

@keyframes question-bounce {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-1px);
    }
}

@keyframes dot-blink {
    0%, 100% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.5;
    }
}

/* Высокий контраст */
@media (prefers-contrast: high) {
    .vm-icon {
        filter: contrast(1.5);
    }
}

/* ============ CHAT AVATARS & ICONS ============ */

/* Аватар пользователя - стильный профиль */
.vm-icon-chat-user {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--vm-transition);
}

.vm-icon-chat-user:hover {
    transform: scale(1.05);
}

.vm-icon-chat-user .user-avatar {
    animation: user-glow 2s ease-in-out infinite;
}

.vm-icon-chat-user .user-profile {
    transition: all 0.3s ease;
}

.vm-icon-chat-user:hover .user-profile {
    transform: scale(1.1);
}

.vm-icon-chat-user .user-accent {
    animation: accent-pulse 1.5s ease-in-out infinite;
}

@keyframes user-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.4));
    }
    50% { 
        filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.6));
    }
}

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

/* Аватар AI - умный робот */
.vm-icon-chat-ai {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--vm-transition);
}

.vm-icon-chat-ai:hover {
    transform: scale(1.05);
}

.vm-icon-chat-ai .ai-head {
    animation: ai-breathe 2.5s ease-in-out infinite;
}

.vm-icon-chat-ai .ai-eye {
    animation: ai-blink 3s ease-in-out infinite;
}

.vm-icon-chat-ai .ai-antenna {
    animation: antenna-signal 2s ease-in-out infinite;
}

.vm-icon-chat-ai .ai-signal {
    animation: signal-wave 1.8s ease-in-out infinite;
}

/* Состояние "думает" */
.vm-icon-chat-ai.thinking .ai-head {
    animation: ai-think 1.5s ease-in-out infinite;
}

.vm-icon-chat-ai.thinking .ai-eye {
    animation: eye-think 2s ease-in-out infinite;
}

.vm-icon-chat-ai.thinking .thinking-dot {
    animation: thinking-float 1.2s ease-in-out infinite;
}

.vm-icon-chat-ai.thinking .thinking-dot:nth-child(1) { animation-delay: 0s; }
.vm-icon-chat-ai.thinking .thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.vm-icon-chat-ai.thinking .thinking-dot:nth-child(3) { animation-delay: 0.4s; }

/* Состояние "печатает" */
.vm-icon-chat-ai.typing .ai-head {
    animation: ai-type 0.8s ease-in-out infinite;
}

.vm-icon-chat-ai.typing .ai-antenna {
    animation: antenna-active 1s ease-in-out infinite;
}

@keyframes ai-breathe {
    0%, 100% { 
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 16px rgba(99, 102, 241, 0.6));
        transform: scale(1.02);
    }
}

@keyframes ai-blink {
    0%, 90%, 100% { 
        transform: scaleY(1);
    }
    95% { 
        transform: scaleY(0.1);
    }
}

@keyframes antenna-signal {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
        filter: drop-shadow(0 0 6px currentColor);
    }
}

@keyframes signal-wave {
    0% { 
        opacity: 0;
        transform: scale(0.5);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1);
    }
    100% { 
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes ai-think {
    0%, 100% { 
        transform: scale(1) rotate(-1deg);
        filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
    }
    50% { 
        transform: scale(1.03) rotate(1deg);
        filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.7));
    }
}

@keyframes eye-think {
    0%, 100% { 
        transform: translateX(0);
    }
    25% { 
        transform: translateX(-1px);
    }
    75% { 
        transform: translateX(1px);
    }
}

@keyframes thinking-float {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translateY(-3px) scale(1.2);
        opacity: 1;
    }
}

@keyframes ai-type {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
    }
    50% { 
        transform: scale(1.02);
        filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.6));
    }
}

@keyframes antenna-active {
    0%, 100% { 
        transform: rotate(-5deg) scale(1);
        filter: brightness(1);
    }
    50% { 
        transform: rotate(5deg) scale(1.1);
        filter: brightness(1.3);
    }
}

/* Иконка отправки сообщения */
.vm-icon-chat-send {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--vm-transition);
}

.vm-icon-chat-send:hover {
    transform: scale(1.1) rotate(5deg);
}

.vm-icon-chat-send .send-arrow {
    animation: send-ready 2s ease-in-out infinite;
}

.vm-icon-chat-send:hover .send-arrow {
    animation: send-launch 0.6s ease-out;
}

.vm-icon-chat-send .send-trail {
    animation: trail-fade 1.5s ease-out infinite;
}

@keyframes send-ready {
    0%, 100% { 
        transform: translateX(0);
        filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.3));
    }
    50% { 
        transform: translateX(1px);
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
    }
}

@keyframes send-launch {
    0% { 
        transform: translateX(0) scale(1);
    }
    50% { 
        transform: translateX(3px) scale(1.1);
    }
    100% { 
        transform: translateX(0) scale(1);
    }
}

@keyframes trail-fade {
    0% { 
        opacity: 0;
        transform: translateX(-5px) scale(0.5);
    }
    30% { 
        opacity: 0.6;
        transform: translateX(-2px) scale(0.8);
    }
    100% { 
        opacity: 0;
        transform: translateX(5px) scale(1);
    }
}

/* Иконка загрузки для кнопки отправки */
.vm-icon-chat-loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vm-icon-chat-loading .loading-spinner {
    animation: chat-spinner 1s linear infinite;
}

.vm-icon-chat-loading .loading-dot {
    animation: loading-pulse 1.5s ease-in-out infinite;
}

.vm-icon-chat-loading .loading-dot:nth-child(1) { animation-delay: 0s; }
.vm-icon-chat-loading .loading-dot:nth-child(2) { animation-delay: 0.3s; }
.vm-icon-chat-loading .loading-dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes chat-spinner {
    from { 
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}

@keyframes loading-pulse {
    0%, 100% { 
        opacity: 0.4;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Иконка для заголовка чата */
.vm-icon-chat-header {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vm-icon-chat-header .chat-bubble {
    animation: chat-pulse 2s ease-in-out infinite;
}

.vm-icon-chat-header .chat-dot {
    animation: chat-typing 1.4s ease-in-out infinite;
}

.vm-icon-chat-header .chat-dot:nth-child(1) { animation-delay: 0s; }
.vm-icon-chat-header .chat-dot:nth-child(2) { animation-delay: 0.2s; }
.vm-icon-chat-header .chat-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 16px rgba(99, 102, 241, 0.5));
    }
}

@keyframes chat-typing {
    0%, 60%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    30% { 
        transform: translateY(-2px) scale(1.2);
        opacity: 1;
    }
}

/* Размеры для аватаров чата */
.chat-avatar-size {
    width: clamp(32px, 5vw, 44px);
    height: clamp(32px, 5vw, 44px);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .vm-icon-chat-user,
    .vm-icon-chat-ai {
        transform: scale(0.9);
    }
    
    .vm-icon-chat-user:hover,
    .vm-icon-chat-ai:hover {
        transform: scale(0.95);
    }
}

/* ===== НОВЫЕ АНИМАЦИИ ДЛЯ МОДЕЛЕЙ ВИДЕО ===== */

/* WAN 2.1 Model Animations */
.vm-icon-video-model-wan21 .neural-node {
    animation: neuralPulse 2.5s ease-in-out infinite;
}

.vm-icon-video-model-wan21 .neural-node.node-1 { animation-delay: 0s; }
.vm-icon-video-model-wan21 .neural-node.node-2 { animation-delay: 0.3s; }
.vm-icon-video-model-wan21 .neural-node.node-3 { animation-delay: 0.6s; }
.vm-icon-video-model-wan21 .neural-node.node-4 { animation-delay: 0.9s; }
.vm-icon-video-model-wan21 .neural-node.node-5 { animation-delay: 1.2s; }
.vm-icon-video-model-wan21 .neural-node.node-6 { animation-delay: 1.5s; }

.vm-icon-video-model-wan21 .neural-connections {
    animation: neuralFlow 3s ease-in-out infinite;
}

.vm-icon-video-model-wan21 .activity-indicator {
    animation: activityBlink 1.8s ease-in-out infinite alternate;
}

.vm-icon-video-model-wan21 .activity-indicator.left { animation-delay: 0s; }
.vm-icon-video-model-wan21 .activity-indicator.right { animation-delay: 0.9s; }

.vm-icon-video-model-wan21 .tech-element {
    animation: techGlow 2s ease-in-out infinite;
}

.vm-icon-video-model-wan21 .wan21-version {
    animation: versionPulse 3s ease-in-out infinite;
}

/* Kling Master 2.1 Model Animations */
.vm-icon-video-model-kling .lightning-main {
    animation: lightningStrike 2s ease-in-out infinite;
}

.vm-icon-video-model-kling .energy-spark {
    animation: sparkEnergy 1.5s ease-in-out infinite;
}

.vm-icon-video-model-kling .energy-spark.spark-1 { animation-delay: 0s; }
.vm-icon-video-model-kling .energy-spark.spark-2 { animation-delay: 0.4s; }
.vm-icon-video-model-kling .energy-spark.spark-3 { animation-delay: 0.8s; }
.vm-icon-video-model-kling .energy-spark.spark-4 { animation-delay: 1.2s; }

.vm-icon-video-model-kling .tech-lines {
    animation: techFlow 2.5s ease-in-out infinite;
}

.vm-icon-video-model-kling .speed-lines {
    animation: speedRush 1.8s ease-in-out infinite;
}

.vm-icon-video-model-kling .hd-indicator {
    animation: hdScanline 3s linear infinite;
}

.vm-icon-video-model-kling .master-indicator {
    animation: masterPulse 2.2s ease-in-out infinite;
}

.vm-icon-video-model-kling .kling-version {
    animation: versionGlow 2.8s ease-in-out infinite;
}

/* ===== KEYFRAMES ДЛЯ АНИМАЦИЙ ===== */

/* Neural Network Animations */
@keyframes neuralPulse {
    0%, 100% { 
        opacity: 0.7; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.15); 
        filter: brightness(1.2);
    }
}

@keyframes neuralFlow {
    0%, 100% { 
        stroke-opacity: 0.4; 
    }
    50% { 
        stroke-opacity: 0.8; 
        stroke-width: 1.2;
    }
}

@keyframes activityBlink {
    0% { 
        opacity: 0.6; 
        transform: scale(1); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1.2); 
        filter: brightness(1.3);
    }
}

@keyframes techGlow {
    0%, 100% { 
        filter: brightness(1); 
        box-shadow: 0 0 0 rgba(0, 255, 136, 0.3);
    }
    50% { 
        filter: brightness(1.4); 
        box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
    }
}

@keyframes versionPulse {
    0%, 100% { 
        opacity: 0.8; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05); 
        filter: brightness(1.2);
    }
}

/* Lightning & Energy Animations */
@keyframes lightningStrike {
    0%, 90%, 100% { 
        opacity: 0.9; 
        filter: brightness(1); 
    }
    5%, 15% { 
        opacity: 1; 
        filter: brightness(1.8) drop-shadow(0 0 4px #00ff88); 
    }
    10% { 
        opacity: 0.95; 
        filter: brightness(1.4); 
    }
}

@keyframes sparkEnergy {
    0%, 100% { 
        opacity: 0.7; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.3); 
        filter: brightness(1.5) drop-shadow(0 0 2px #40e0d0);
    }
}

@keyframes techFlow {
    0%, 100% { 
        stroke-opacity: 0.6; 
        stroke-width: 1.5; 
    }
    50% { 
        stroke-opacity: 1; 
        stroke-width: 2; 
        filter: drop-shadow(0 0 2px #40e0d0);
    }
}

@keyframes speedRush {
    0% { 
        opacity: 0.4; 
        stroke-width: 1; 
    }
    50% { 
        opacity: 0.9; 
        stroke-width: 1.5; 
    }
    100% { 
        opacity: 0.4; 
        stroke-width: 1; 
    }
}

@keyframes hdScanline {
    0% { 
        opacity: 0.4; 
        transform: scaleX(0.8); 
    }
    50% { 
        opacity: 0.8; 
        transform: scaleX(1.05); 
    }
    100% { 
        opacity: 0.4; 
        transform: scaleX(0.8); 
    }
}

@keyframes masterPulse {
    0%, 100% { 
        transform: scale(1); 
        filter: brightness(1); 
    }
    50% { 
        transform: scale(1.1); 
        filter: brightness(1.3) drop-shadow(0 0 3px #00ff88);
    }
}

@keyframes versionGlow {
    0%, 100% { 
        opacity: 0.9; 
        text-shadow: 0 0 0 transparent; 
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 4px #00ff88, 0 0 8px #06d6a0; 
    }
}

/* ===== HOVER EFFECTS ДЛЯ МОДЕЛЕЙ ===== */

.vm-icon-video-model-wan21:hover .neural-node {
    animation-duration: 1.5s;
}

/* WAN21 neural connections - увеличенная специфичность через :is() */
:is(.vm-icon-video-model-wan21:hover) .neural-connections,
.vm-icon-video-model-wan21:is(:hover, :focus-visible) .neural-connections {
    stroke-opacity: 0.9;
    stroke-width: 1.5;
}

/* Дополнительный слой специфичности для гарантии */
body :is(.vm-icon-video-model-wan21:hover) .neural-connections {
    stroke-opacity: 0.9;
    stroke-width: 1.5;
}

.vm-icon-video-model-wan21:hover .activity-indicator {
    animation-duration: 1s;
}

/* Kling lightning effect - составной селектор для специфичности */
:is(.vm-icon-video-model-kling:hover) .lightning-main,
.vm-icon-video-model-kling:is(:hover, :focus-visible) .lightning-main {
    animation-duration: 1.2s;
    filter: brightness(1.5) drop-shadow(0 0 6px #00ff88);
}

/* Усиление через контекстный селектор */
body :is(.vm-icon-video-model-kling:hover) .lightning-main {
    filter: brightness(1.5) drop-shadow(0 0 6px #00ff88);
}

.vm-icon-video-model-kling:hover .energy-spark {
    animation-duration: 1s;
}

/* Kling tech lines - множественные селекторы для приоритета */
:is(.vm-icon-video-model-kling:hover) .tech-lines,
.vm-icon-video-model-kling:is(:hover, :focus-visible) .tech-lines,
.vm-icon-video-model-kling:hover :where(.tech-lines) {
    stroke-width: 2.5;
    filter: drop-shadow(0 0 4px #40e0d0);
}

/* Контекстное усиление */
body :is(.vm-icon-video-model-kling:hover) .tech-lines {
    stroke-width: 2.5;
    filter: drop-shadow(0 0 4px #40e0d0);
}

/* ===== RESPONSIVE SCALING ===== */

@media (max-width: 768px) {
    .vm-icon-video-model-wan21,
    .vm-icon-video-model-kling {
        transform: scale(0.9);
    }
    
    .vm-icon-video-model-wan21 .neural-node,
    .vm-icon-video-model-kling .energy-spark {
        animation-duration: 2s;
    }
}

/* ===== RUNWAY MODEL ANIMATIONS ===== */
/* Runway Model Basic Animations */
.vm-icon-video-model-runway .runway-strip {
    animation: runwayGlow 2.5s ease-in-out infinite;
}

.vm-icon-video-model-runway .runway-marking {
    animation: runwayFlow 3s ease-in-out infinite;
}

.vm-icon-video-model-runway .runway-marking.mark-1 { animation-delay: 0s; }
.vm-icon-video-model-runway .runway-marking.mark-2 { animation-delay: 0.3s; }
.vm-icon-video-model-runway .runway-marking.mark-3 { animation-delay: 0.6s; }
.vm-icon-video-model-runway .runway-marking.mark-4 { animation-delay: 0.9s; }

.vm-icon-video-model-runway .film-element {
    animation: filmSpin 2s ease-in-out infinite;
}

.vm-icon-video-model-runway .film-element.element-1 { animation-delay: 0s; }
.vm-icon-video-model-runway .film-element.element-2 { animation-delay: 0.5s; }
.vm-icon-video-model-runway .film-element.element-3 { animation-delay: 1s; }
.vm-icon-video-model-runway .film-element.element-4 { animation-delay: 1.5s; }

.vm-icon-video-model-runway .motion-arrow {
    animation: motionPulse 1.8s ease-in-out infinite;
}

.vm-icon-video-model-runway .motion-arrow.arrow-left { animation-delay: 0s; }
.vm-icon-video-model-runway .motion-arrow.arrow-right { animation-delay: 0.9s; }

.vm-icon-video-model-runway .activity-dot {
    animation: activityBlink 2.2s ease-in-out infinite alternate;
}

.vm-icon-video-model-runway .activity-dot.dot-top { animation-delay: 0s; }
.vm-icon-video-model-runway .activity-dot.dot-bottom { animation-delay: 1.1s; }

.vm-icon-video-model-runway .runway-guides {
    animation: guideFlow 2.8s ease-in-out infinite;
}

/* Runway Model Keyframes */
@keyframes runwayGlow {
    0%, 100% { 
        filter: brightness(1) drop-shadow(0 0 2px #667eea); 
    }
    50% { 
        filter: brightness(1.3) drop-shadow(0 0 6px #764ba2); 
    }
}

@keyframes runwayFlow {
    0%, 100% { 
        opacity: 0.8; 
        transform: translateX(0); 
    }
    50% { 
        opacity: 1; 
        transform: translateX(2px); 
    }
}

@keyframes filmSpin {
    0%, 100% { 
        transform: rotate(0deg) scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: rotate(180deg) scale(1.1); 
        opacity: 1; 
    }
}

@keyframes motionPulse {
    0%, 100% { 
        opacity: 0.7; 
        stroke-width: 2; 
    }
    50% { 
        opacity: 1; 
        stroke-width: 3; 
    }
}

@keyframes guideFlow {
    0%, 100% { 
        opacity: 0.6; 
        stroke-dasharray: 0, 5; 
    }
    50% { 
        opacity: 0.9; 
        stroke-dasharray: 3, 2; 
    }
}

/* ===== RUNWAY HOVER EFFECTS ===== */
/* Runway strip - комбинированная специфичность */
:is(.vm-icon-video-model-runway:hover) .runway-strip,
.vm-icon-video-model-runway:is(:hover, :focus-visible) .runway-strip,
.vm-icon-video-model-runway:hover :where(.runway-strip) {
    animation-duration: 1.5s;
    filter: brightness(1.5) drop-shadow(0 0 8px #8b5cf6);
}

/* Дополнительный контекст для гарантии */
body :is(.vm-icon-video-model-runway:hover) .runway-strip {
    filter: brightness(1.5) drop-shadow(0 0 8px #8b5cf6);
}

/* Runway marking - трансформация с высокой специфичностью */
:is(.vm-icon-video-model-runway:hover) .runway-marking,
.vm-icon-video-model-runway:is(:hover, :focus-visible) .runway-marking,
.vm-icon-video-model-runway:hover :where(.runway-marking) {
    animation-duration: 2s;
    transform: translateX(3px);
}

/* Усиление через родительский контекст */
body :is(.vm-icon-video-model-runway:hover) .runway-marking {
    transform: translateX(3px);
}

/* Film element - составная трансформация */
:is(.vm-icon-video-model-runway:hover) .film-element,
.vm-icon-video-model-runway:is(:hover, :focus-visible) .film-element,
.vm-icon-video-model-runway:hover :where(.film-element) {
    animation-duration: 1.2s;
    transform: rotate(360deg) scale(1.2);
}

/* Контекстное усиление специфичности */
body :is(.vm-icon-video-model-runway:hover) .film-element {
    transform: rotate(360deg) scale(1.2);
}

/* Motion arrow - стиль обводки с приоритетом */
:is(.vm-icon-video-model-runway:hover) .motion-arrow,
.vm-icon-video-model-runway:is(:hover, :focus-visible) .motion-arrow,
.vm-icon-video-model-runway:hover :where(.motion-arrow) {
    animation-duration: 1s;
    stroke-width: 3.5;
}

/* Дополнительный селектор для гарантии */
body :is(.vm-icon-video-model-runway:hover) .motion-arrow {
    stroke-width: 3.5;
}

/* Activity dot - фильтр с максимальной специфичностью */
:is(.vm-icon-video-model-runway:hover) .activity-dot,
.vm-icon-video-model-runway:is(:hover, :focus-visible) .activity-dot,
.vm-icon-video-model-runway:hover :where(.activity-dot) {
    animation-duration: 1.5s;
    filter: brightness(1.5) drop-shadow(0 0 4px #9333ea);
}

/* Финальное усиление через body контекст */
body :is(.vm-icon-video-model-runway:hover) .activity-dot {
    filter: brightness(1.5) drop-shadow(0 0 4px #9333ea);
}

/* ===== RESPONSIVE SCALING FOR RUNWAY ===== */
@media (max-width: 768px) {
    .vm-icon-video-model-wan21,
    .vm-icon-video-model-kling,
    .vm-icon-video-model-runway {
        transform: scale(0.9);
    }
    
    .vm-icon-video-model-wan21 .neural-node,
    .vm-icon-video-model-kling .energy-spark,
    .vm-icon-video-model-runway .film-element {
        animation-duration: 2s;
    }
}

/* ============================================
   Qwen Image Model Icon Styles 
   ============================================ */

.vm-icon-qwen {
    transition: var(--vm-transition);
    cursor: pointer;
    display: inline-block;
    transform: translateZ(0);
}

.vm-icon-qwen:hover {
    transform: scale(1.05);
}

/* Responsive scaling for Qwen icon */
@media (max-width: 768px) {
    .vm-icon-qwen {
        transform: scale(0.9);
    }
}