/* Security Robot Mascot Styles */
.pikachu-mate {
    position: fixed;
    width: 45px;
    height: 60px;
    z-index: 9999;
    pointer-events: none;
    transition: all 0.2s ease-out;
    transform: scale(0.6);
}

.robot-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3));
}

/* Antenna */
.robot-antenna {
    width: 2px;
    height: 10px;
    background: linear-gradient(to top, #555, #888);
    position: relative;
    margin-bottom: 2px;
}

.robot-antenna::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: antenna-blink 2s ease-in-out infinite;
}

@keyframes antenna-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px #4ade80; }
    50% { opacity: 0.4; box-shadow: 0 0 2px #4ade80; }
}

/* Head */
.robot-head {
    width: 35px;
    height: 30px;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

/* Eyes */
.robot-eye {
    width: 6px;
    height: 6px;
    background: #1e293b;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    animation: eye-blink 4s ease-in-out infinite;
}

.robot-eye.left { left: 7px; }
.robot-eye.right { right: 7px; }

@keyframes eye-blink {
    0%, 100%, 48%, 52% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

/* Mouth */
.robot-mouth {
    width: 12px;
    height: 6px;
    border: 2px solid #1e293b;
    border-top: none;
    border-radius: 0 0 10px 10px;
    position: absolute;
    bottom: 8px;
}

/* Body */
.robot-body {
    width: 38px;
    height: 30px;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Heart */
.robot-heart {
    color: #ef4444;
    font-size: 12px;
    animation: heart-beat 1.5s ease-in-out infinite;
}

@keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
}

/* Walking animation */
.pikachu-mate.walking .robot-container {
    animation: robot-walk 0.4s ease-in-out infinite;
}

@keyframes robot-walk {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(0deg); }
}

/* Sparkle effect when Pikachu moves */
.pikachu-sparkle {
    position: absolute;
    font-size: 12px;
    animation: sparkle 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes sparkle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
        opacity: 0;
    }
}

/* Bounce animation when idle */
.pikachu-mate.idle .robot-container {
    animation: robot-idle 2s ease-in-out infinite;
}

@keyframes robot-idle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
}

/* Dark theme compatibility */
.dark-theme .robot-container {
    filter: drop-shadow(2px 2px 8px rgba(96, 165, 250, 0.5));
}

.dark-theme .robot-antenna::after {
    background: #34d399;
    box-shadow: 0 0 10px #34d399;
}