/* ============================================================
   BMO Voice Assistant - Classic BMO Face (Simple & Original)
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Classic BMO Colors */
    --bmo-screen-bg: #c4e5c5;     /* Light minty green screen */
    --bmo-screen-glow: #b0d3b1;   /* Slightly darker green for corners */
    --bmo-face-fg: #193121;       /* Dark green/black for eyes and mouth */
    --bmo-face-dim: rgba(25, 49, 33, 0.4);

    /* UI Colors */
    --text-primary: rgba(255, 255, 255, 0.9);
    --font-ui: 'Inter', -apple-system, sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-ui);
    background: var(--bmo-screen-bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

#app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* --- BMO Screen (Full Viewport, Classic Style) --- */
.bmo-screen {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--bmo-screen-bg) 0%, var(--bmo-screen-glow) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Subtle CRT scanline (much lighter than before) */
.scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 4px,
        rgba(0, 0, 0, 0.02) 4px,
        rgba(0, 0, 0, 0.02) 8px
    );
    pointer-events: none;
    z-index: 5;
}

/* --- Classic BMO Face --- */
.bmo-face {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Eyes */
.bmo-eyes {
    display: flex;
    gap: 100px;
    align-items: center;
    justify-content: center;
    height: 60px; /* fixed height area to prevent layout jumps during animations */
}

/* Simple solid dark ovals */
.bmo-eye {
    width: 30px;
    height: 50px;
    background: var(--bmo-face-fg);
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Remove pupil and eye-shine entirely to match original BMO */
.pupil, .eye-shine, .bmo-cheeks {
    display: none !important;
}

/* Mouth */
.bmo-mouth {
    width: 60px;
    height: 20px;
    border-bottom: 6px solid var(--bmo-face-fg);
    border-radius: 0 0 30px 30px;
    transition: all 0.2s ease;
}

/* --- Screen Status Bar --- */
.screen-status {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bmo-face-fg);
    opacity: 0.5;
}

.status-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--bmo-face-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==========================================================
   Face States (Animations on classic features)
   ========================================================== */

/* IDLE: Classic blink */
.bmo-face[data-state="idle"] .bmo-eye {
    animation: classic-blink 4s ease-in-out infinite;
}
.bmo-face[data-state="idle"] .status-dot {
    animation: status-pulse 2s ease-in-out infinite;
}

@keyframes classic-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}
@keyframes status-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* LISTENING: Eyes get wider and attentive */
.bmo-face[data-state="listening"] .bmo-eye {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    animation: listen-bounce 1s ease-in-out infinite alternate;
}
.bmo-face[data-state="listening"] .bmo-mouth {
    width: 40px;
    height: 25px;
    border: 6px solid var(--bmo-face-fg);
    border-radius: 50%;
    border-bottom-width: 6px;
}
.bmo-face[data-state="listening"] .status-dot {
    opacity: 1;
    background: #ff5722; /* highlight color for listening */
    animation: status-pulse 0.5s ease-in-out infinite;
}

@keyframes listen-bounce {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* THINKING: Processing lines/spin */
.bmo-face[data-state="thinking"] .bmo-eye {
    width: 30px;
    height: 8px;
    border-radius: 4px;
    background: var(--bmo-face-fg);
    animation: think-dots 0.8s infinite alternate;
}
.bmo-face[data-state="thinking"] .bmo-eye.right {
    animation-delay: 0.4s;
}
.bmo-face[data-state="thinking"] .bmo-mouth {
    width: 20px;
    height: 6px;
    border: none;
    border-radius: 3px;
    background: var(--bmo-face-fg);
}
.bmo-face[data-state="thinking"] .status-dot {
    opacity: 1;
    background: #2196f3; /* thinking blue */
}

@keyframes think-dots {
    0% { transform: scaleX(1); opacity: 0.5; }
    100% { transform: scaleX(1.5); opacity: 1; }
}

/* SPEAKING: Mouth animating */
.bmo-face[data-state="speaking"] .bmo-eye {
    /* Happy closed eyes (inverted U shape) */
    width: 40px;
    height: 20px;
    background: transparent;
    border-top: 6px solid var(--bmo-face-fg);
    border-radius: 40px 40px 0 0;
    transform: translateY(15px);
}
.bmo-face[data-state="speaking"] .bmo-mouth {
    width: 30px;
    height: 30px;
    background: var(--bmo-face-fg);
    border: none;
    border-radius: 50%;
    animation: speak-mouth 0.25s ease-in-out infinite alternate;
}
.bmo-face[data-state="speaking"] .status-dot {
    opacity: 1;
}

@keyframes speak-mouth {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1.4); }
}

/* ERROR: X eyes */
.bmo-face[data-state="error"] .bmo-eye {
    width: 40px;
    height: 40px;
    background: transparent;
    position: relative;
}
.bmo-face[data-state="error"] .bmo-eye::before,
.bmo-face[data-state="error"] .bmo-eye::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 6px;
    background: var(--bmo-face-fg);
    border-radius: 3px;
    top: 50%;
    left: 0;
    margin-top: -3px;
}
.bmo-face[data-state="error"] .bmo-eye::before { transform: rotate(45deg); }
.bmo-face[data-state="error"] .bmo-eye::after { transform: rotate(-45deg); }

.bmo-face[data-state="error"] .bmo-mouth {
    width: 40px;
    height: 10px;
    border: none;
    background: transparent;
    border-top: 6px solid var(--bmo-face-fg);
    border-radius: 40px 40px 0 0;
}

/* --- Subtitle Area --- */
.subtitle-area {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    max-width: 600px;
    width: 90%;
    text-align: center;
    pointer-events: none;
}

.subtitle-text {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.6;
    background: rgba(25, 49, 33, 0.8); /* Dark green pill */
    padding: 12px 24px;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.subtitle-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive --- */
@media (max-height: 500px) {
    .bmo-eyes { gap: 60px; height: 40px; }
    .bmo-eye { width: 24px; height: 40px; }
    .bmo-face { gap: 20px; }
    .bmo-mouth { width: 40px; height: 14px; border-bottom-width: 5px; }
}