/* Alan's Badge System - Single Emoji with Status Indicators */
.alan-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 1.2rem;
    background: var(--bg-card);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    transition: all 0.3s ease;
    opacity: 0;
}

.alan-avatar:hover .alan-badge {
    transform: scale(1.2);
}

/* Animation Classes for Single Emoji */
.alan-avatar.pulse {
    animation: avatar-pulse 2s ease-in-out infinite;
}

.alan-avatar.pulse-fast {
    animation: avatar-pulse 0.8s ease-in-out infinite;
}

.alan-avatar.shake {
    animation: avatar-shake 0.5s ease-in-out infinite;
}

.alan-avatar.bounce {
    animation: avatar-bounce 1s ease-in-out infinite;
}

.alan-avatar.float {
    animation: avatar-float 3s ease-in-out infinite;
}

.alan-avatar.spin {
    animation: avatar-spin 2s linear infinite;
}

.alan-avatar.wobble {
    animation: avatar-wobble 2s ease-in-out infinite;
}

.alan-avatar.glow {
    animation: avatar-glow 2s ease-in-out infinite;
}

.alan-avatar.sparkle {
    animation: avatar-sparkle 1.5s ease-in-out infinite;
}

/* Avatar Animation Keyframes */
@keyframes avatar-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); }
}

@keyframes avatar-shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-3px) rotate(-5deg); }
    75% { transform: translateX(3px) rotate(5deg); }
}

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

@keyframes avatar-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

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

@keyframes avatar-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

@keyframes avatar-glow {
    0%, 100% { filter: drop-shadow(0 0 5px currentColor); }
    50% { filter: drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor); }
}

@keyframes avatar-sparkle {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.3); }
}

/* Status Ring Animation */
.alan-status-ring {
    transition: border-color 0.3s ease;
}