/* ==========================================================================
   Interaction Mode (Face Only)
   ========================================================================== */

/* Main Container for Interaction Mode - now part of the layout flow */
.interaction-mode-overlay {
    flex: 1; /* Occupy remaining vertical space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    animation: fadeIn 0.5s ease;
    position: relative; /* Ensure positioning context */
    overflow: hidden;
    width: 100%;
}

/* Face Scaling - Responsive */
.interaction-mode-overlay .robot-face-animation {
    transform-origin: center center;
    transform: scale(2.5); /* Default scale for mobile */
    transition: transform 0.3s ease;
    margin-bottom: 0;
}

/* 🔥 小屏幕响应式缩放 */
@media screen and (max-height: 300px) {
    .interaction-mode-overlay .robot-face-animation {
        transform: scale(1.8);
    }
}

@media screen and (max-height: 400px) and (min-height: 301px) {
    .interaction-mode-overlay .robot-face-animation {
        transform: scale(2.2);
    }
}

/* Eye Styling override for Interaction Mode */
.interaction-mode-overlay .robot-face-animation .eye {
    border-radius: 4px; /* Squarer eyes */
    width: 20px;        /* Slightly wider */
    cursor: pointer;    /* Interactive cursor */
    transition: transform 0.1s ease; /* Fast response for click */
}

.interaction-mode-overlay .robot-face-animation .eye:active {
    transform: scale(0.9); /* Click feedback */
}

/* Responsive Scaling */
@media screen and (min-width: 600px) {
    .interaction-mode-overlay .robot-face-animation {
        transform: scale(3.5);
    }
}

/* Click Blink Animation */
.interaction-mode-overlay .robot-face-animation .eye.blink-active {
    animation: clickBlink 0.3s ease-in-out;
}

@keyframes clickBlink {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

/* Pain Reaction - Eye becomes X shape */
.interaction-mode-overlay .robot-face-animation .eye.pain-active {
    animation: painReaction 0.6s ease-in-out;
}

@keyframes painReaction {
    0%, 100% { 
        transform: scaleY(1) rotate(0deg); 
        border-radius: 4px;
    }
    20%, 80% { 
        transform: scaleY(0.3) scaleX(1.2) rotate(45deg); 
        border-radius: 2px;
    }
}

/* Mouth Reaction Animations */
.interaction-mode-overlay .robot-face-animation .mouth {
    width: 24px; /* Start shorter */
    cursor: pointer; /* Make mouth clickable */
    transition: transform 0.1s ease;
}

.interaction-mode-overlay .robot-face-animation .mouth:active {
    transform: scale(0.95); /* Click feedback */
}

.interaction-mode-overlay .robot-face-animation .mouth.talking {
    animation: talk 0.2s infinite alternate ease-in-out; /* Faster talk */
}

.interaction-mode-overlay .robot-face-animation .mouth.surprise-active {
    animation: surpriseMouth 0.6s ease-in-out;
}

@keyframes surpriseMouth {
    0%, 100% { 
        width: 24px;
        height: 8px;
        border-radius: 4px;
    }
    30%, 70% { 
        width: 16px;
        height: 16px;
        border-radius: 50%;
    }
}

/* Smile Mouth */
.interaction-mode-overlay .robot-face-animation .mouth.smile-active {
    animation: smileMouth 0.6s ease-in-out;
}

@keyframes smileMouth {
    0%, 100% { 
        width: 24px;
        height: 8px;
        border-radius: 4px;
    }
    30%, 70% { 
        width: 36px;
        height: 4px;
        border-radius: 2px 2px 12px 12px;
    }
}

/* Sad Mouth */
.interaction-mode-overlay .robot-face-animation .mouth.sad-active {
    animation: sadMouth 0.6s ease-in-out;
}

@keyframes sadMouth {
    0%, 100% { 
        width: 24px;
        height: 8px;
        border-radius: 4px;
    }
    30%, 70% { 
        width: 28px;
        height: 4px;
        border-radius: 12px 12px 2px 2px;
    }
}

/* Flat Mouth */
.interaction-mode-overlay .robot-face-animation .mouth.flat-active {
    animation: flatMouth 0.6s ease-in-out;
}

@keyframes flatMouth {
    0%, 100% { 
        width: 24px;
        height: 8px;
        border-radius: 4px;
    }
    30%, 70% { 
        width: 32px;
        height: 3px;
        border-radius: 2px;
    }
}

@media screen and (min-width: 1024px) {
    .interaction-mode-overlay .robot-face-animation {
        transform: scale(4.5);
    }
}

/* Idle Animation - Looking Around */
.robot-face-animation.idle .eyes-container {
    animation: lookAround 8s infinite ease-in-out;
}

@keyframes lookAround {
    0%, 40%, 60%, 100% { transform: translateX(0); }
    45% { transform: translateX(-6px); }
    55% { transform: translateX(6px); }
}

/* Thinking Animation - Bouncing */
.robot-face-animation.thinking .eyes-container {
    animation: thinkBounce 0.8s infinite ease-in-out alternate;
}

@keyframes thinkBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

@keyframes talk {
    0% { 
        height: 8px; 
        width: 24px; 
        border-radius: 4px;
    }
    100% { 
        height: 16px; 
        width: 20px; 
        border-radius: 8px;
    }
}

/* Larger screen adjustments for talking */
@media screen and (min-width: 800px) {
    .interaction-mode-overlay .robot-face-animation .mouth {
        width: 40px; 
    }
    
    @keyframes talk {
        0% { 
            height: 14px; 
            width: 40px; 
            border-radius: 4px;
        }
        100% { 
            height: 28px; 
            width: 32px; 
            border-radius: 14px;
        }
    }
}