/* animated-emoji.css - ТОЛЬКО ДЛЯ АНИМАЦИИ В СООБЩЕНИЯХ */
/* Анимация убрана из .emoji-container, оставлена только в сообщениях */

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

/* 1. БЬЮЩЕЕСЯ СЕРДЦЕ */
.emoji-animated.heart-beat,
.message-text .emoji-animated.heart-beat {
    display: inline-block;
    animation: heartbeatLoop 1s ease-in-out infinite !important;
    transform-origin: center;
}

/* 2. ДРОЖАЩИЙ СМЕХ */
.emoji-animated.shake-laugh,
.message-text .emoji-animated.shake-laugh {
    display: inline-block;
    animation: shakeLaugh 0.4s ease-in-out infinite !important;
}

/* 3. ПЛАЧУЩИЙ СО СЛЕЗАМИ */
.emoji-animated.crying,
.message-text .emoji-animated.crying {
    display: inline-block;
    position: relative;
    animation: weepShake 0.6s ease-in-out infinite !important;
}

/* Слезы для плачущих - ТОЛЬКО В СООБЩЕНИЯХ */
.message-text .emoji-animated.crying::after {
    content: "💧";
    position: absolute;
    font-size: 0.5em;
    bottom: -0.3em;
    left: 50%;
    transform: translateX(-50%);
    animation: tearFall 1.5s ease-in infinite;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.message-text .emoji-animated.crying::before {
    content: "💧";
    position: absolute;
    font-size: 0.4em;
    bottom: -0.2em;
    left: 35%;
    transform: translateX(-50%);
    animation: tearFall 1.8s ease-in infinite 0.5s;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

/* 4. ВРАЩЕНИЕ */
.emoji-animated.spin,
.message-text .emoji-animated.spin {
    display: inline-block;
    animation: spinEmoji 2s linear infinite !important;
}

/* 5. ПОДПРЫГИВАНИЕ */
.emoji-animated.bounce,
.message-text .emoji-animated.bounce {
    display: inline-block;
    animation: bounceEmoji 0.6s ease-in-out infinite !important;
}

/* 6. ТРЯСКА/ВИБРАЦИЯ */
.emoji-animated.shake,
.message-text .emoji-animated.shake {
    display: inline-block;
    animation: microShake 0.15s ease-in-out infinite !important;
}

/* 7. ПУЛЬСАЦИЯ */
.emoji-animated.pulse,
.message-text .emoji-animated.pulse {
    display: inline-block;
    animation: pulseEmoji 1s ease-in-out infinite !important;
}

/* 8. ПЛАВАНИЕ */
.emoji-animated.float,
.message-text .emoji-animated.float {
    display: inline-block;
    animation: floatEmoji 3s ease-in-out infinite !important;
}

/* 9. КИВАНИЕ */
.emoji-animated.nod,
.message-text .emoji-animated.nod {
    display: inline-block;
    animation: nodEmoji 1s ease-in-out infinite !important;
}

/* 10. ВОЛНА/ПРИВЕТСТВИЕ */
.emoji-animated.wave,
.message-text .emoji-animated.wave {
    display: inline-block;
    animation: waveEmoji 1.5s ease-in-out infinite !important;
}

/* 11. МОРГАНИЕ */
.emoji-animated.wink,
.message-text .emoji-animated.wink {
    display: inline-block;
    animation: winkEmoji 2s ease-in-out infinite !important;
}

/* 12. ЗЛОСТЬ */
.emoji-animated.angry,
.message-text .emoji-animated.angry {
    display: inline-block;
    animation: angryShake 0.1s ease-in-out infinite !important;
    filter: drop-shadow(0 0 2px rgba(255,0,0,0.3));
}

/* 13. СОНЛИВОСТЬ */
.emoji-animated.sleepy,
.message-text .emoji-animated.sleepy {
    display: inline-block;
    animation: sleepyBob 3s ease-in-out infinite !important;
}

/* 14. ОГОНЬ */
.emoji-animated.fire,
.message-text .emoji-animated.fire {
    display: inline-block;
    animation: fireFlicker 0.3s ease-in-out infinite !important;
    filter: drop-shadow(0 0 2px rgba(255,100,0,0.5));
}

/* 15. РАДУГА */
.emoji-animated.rainbow,
.message-text .emoji-animated.rainbow {
    display: inline-block;
    animation: rainbowShift 2s linear infinite !important;
}

/* 16. ДЕНЬГИ */
.emoji-animated.money,
.message-text .emoji-animated.money {
    display: inline-block;
    animation: moneyShake 0.5s ease-in-out infinite !important;
}

/* ========== КЛЮЧЕВЫЕ КАДРЫ ========== */

@keyframes heartbeatLoop {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.3); }
    35% { transform: scale(1.1); }
    45% { transform: scale(1.35); }
    55% { transform: scale(1); }
}

@keyframes spinEmoji {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bounceEmoji {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes shakeLaugh {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-2px, 0) rotate(-3deg); }
    20% { transform: translate(2px, 0) rotate(3deg); }
    30% { transform: translate(-1px, 1px) rotate(-2deg); }
    40% { transform: translate(1px, -1px) rotate(2deg); }
    50% { transform: translate(-1px, 0) rotate(-1deg); }
    60% { transform: translate(1px, 0) rotate(1deg); }
    70% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes weepShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, 0); }
    80% { transform: translate(1px, 1px); }
}

@keyframes tearFall {
    0% {
        transform: translateY(0) translateX(-50%) scale(1);
        opacity: 0.9;
    }
    100% {
        transform: translateY(60px) translateX(-50%) scale(0.3);
        opacity: 0;
    }
}

@keyframes microShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(1px, -1px) rotate(2deg); }
    75% { transform: translate(-1px, 1px) rotate(-2deg); }
}

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

@keyframes floatEmoji {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

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

@keyframes waveEmoji {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-20deg); }
}

@keyframes winkEmoji {
    0%, 90%, 100% { transform: scaleY(1); }
    95%, 98% { transform: scaleY(0.3); }
}

@keyframes angryShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
}

@keyframes sleepyBob {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-3px); opacity: 0.8; }
}

@keyframes fireFlicker {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,100,0,0.5)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(255,100,0,0.9)); }
}

@keyframes rainbowShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes moneyShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-2px, -2px) rotate(-5deg); }
    40% { transform: translate(2px, 2px) rotate(5deg); }
    60% { transform: translate(-1px, 1px) rotate(-3deg); }
    80% { transform: translate(1px, -1px) rotate(3deg); }
}

/* ========== ЭФФЕКТ ПРИ НАВЕДЕНИИ НА ЭМОДЗИ В СООБЩЕНИИ ========== */
.message-text .emoji-char {
    transition: transform 0.2s ease;
    display: inline-block;
    cursor: default;
}

.message-text .emoji-char:hover {
    transform: scale(1.2);
}

/* ========== АНИМАЦИЯ ПОЯВЛЕНИЯ НОВЫХ ЭМОДЗИ ========== */
@keyframes emojiAppear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.message-text .emoji-char {
    animation: emojiAppear 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ========== ОТКЛЮЧАЕМ АНИМАЦИЮ В ПАНЕЛИ ВЫБОРА ЭМОДЗИ ========== */
.emoji-container .emoji-animated,
.emoji-container .emoji-animated.heart-beat,
.emoji-container .emoji-animated.shake-laugh,
.emoji-container .emoji-animated.crying,
.emoji-container .emoji-animated.spin,
.emoji-container .emoji-animated.bounce,
.emoji-container .emoji-animated.shake,
.emoji-container .emoji-animated.pulse,
.emoji-container .emoji-animated.float,
.emoji-container .emoji-animated.nod,
.emoji-container .emoji-animated.wave,
.emoji-container .emoji-animated.wink,
.emoji-container .emoji-animated.angry,
.emoji-container .emoji-animated.sleepy,
.emoji-container .emoji-animated.fire,
.emoji-container .emoji-animated.rainbow,
.emoji-container .emoji-animated.money {
    animation: none !important;
}

/* Но оставляем hover эффект в панели выбора */
.emoji-container .emoji-item {
    transition: transform 0.2s ease;
}

.emoji-container .emoji-item:hover {
    transform: scale(1.15);
}

/* Убираем псевдоэлементы (слезы) в панели выбора */
.emoji-container .emoji-animated.crying::before,
.emoji-container .emoji-animated.crying::after {
    display: none !important;
}