/* ========================================
   CHATBOT & PICTURE FRAME - Wall 1
   
   RESPONSIVE PHILOSOPHY:
   The frame needs to fit the viewport while leaving room for the input below.
   We use the SMALLER of width vs available height to determine frame size.
   
   Key insight: The Z Flip (and similar tall/narrow phones) breaks width-only
   media queries. We need to consider BOTH dimensions.
   
   BREAKPOINTS:
   - Desktop (≥900px wide): Fixed 630px frame, plenty of space
   - Tablet (600-899px wide): Percentage-based, but capped
   - Phone (< 600px wide): Fill width, but check height too
   - Tall/Narrow (aspect-ratio < 0.6): Special handling for Z Flip etc.
   
   CRITICAL FORMULA:
   Frame size = min(available-width, available-height - input-space)
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES - Single source of truth
   These get overridden in media queries
   ======================================== */

:root {
    /* Frame sizing - desktop defaults */
    --frame-size: 700px;
    
    /* Vertical positioning offset (shifts frame up from center to make room for input) */
    --frame-vertical-offset: 60px;
    
    /* Chat box positioning within frame (percentages of frame size) */
    /* 457x457 opening in 869x875 frame - sized up, centered */
    --chat-top-pct: 0.23;
    --chat-left-pct: 0.235;
    --chat-width-pct: 0.49;
    --chat-height-pct: 0.50;
    
    /* Input area height reservation */
    --input-area-height: 120px;
}

/* ========================================
   CHATBOT OVERLAY - Contains the frame
   ======================================== */

#chatbot-overlay {
    position: fixed;
    
    /* Use CSS variables for sizing */
    width: var(--frame-size);
    height: var(--frame-size);
    
    /* Center horizontally, offset vertically */
    left: 50%;
    top: calc(var(--viewport-height, 100vh) / 2 - var(--frame-vertical-offset));
    transform: translate(-50%, -50%);
    
    pointer-events: none;
    z-index: 9998;
    
    opacity: 1;
    transition: opacity 0.3s ease;
}

#chatbot-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   FRAME WRAPPER & ELEMENTS
   ======================================== */

.frame-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.frame-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    transition: filter 0.3s ease;
}

/* Glow layer - appears when listening */
.frame-wrapper::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: url('../assets/frame_square.png') center / contain no-repeat;
    filter: blur(20px);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.frame-wrapper.listening::before {
    opacity: 1;
    filter: blur(20px) brightness(1.5) saturate(1.3);
    animation: listenPulse 2s ease-in-out infinite;
}

@keyframes listenPulse {
    0%, 100% {
        filter: blur(16px) brightness(1.3) saturate(1.2);
        opacity: 0.7;
    }
    50% {
        filter: blur(26px) brightness(1.8) saturate(1.5);
        opacity: 1;
    }
}

/* ========================================
   EYES - Tracking and blinking
   ======================================== */

.eyes {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.1s ease-out;
    
    width: 50%;
    height: auto;
    top: 5%;
    left: 24.5%;
}

.eyelid {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    
    width: 15.8%;
    height: auto;
    top: 9%;
}

.eyelid-left {
    left: 31%;
}

.eyelid-right {
    left: 52%;
}

/* ========================================
   CHAT-BOX - Outside frame nesting for iOS scroll
   Position is calculated from the same variables as the overlay
   ======================================== */

#chat-box {
    position: fixed;
    z-index: 9997;
    
    /* Calculate position based on where the frame is */
    /* Frame center Y = viewport/2 - offset */
    /* Frame top = center Y - frame-size/2 */
    /* Chat top = frame top + (frame-size * chat-top-pct) */
    top: calc(
        var(--viewport-height, 100vh) / 2 
        - var(--frame-vertical-offset) 
        - var(--frame-size) / 2 
        + var(--frame-size) * var(--chat-top-pct)
    );
    
    /* Chat left = viewport-center - frame-size/2 + (frame-size * chat-left-pct) */
    left: calc(
        50% 
        - var(--frame-size) / 2 
        + var(--frame-size) * var(--chat-left-pct)
    );
    
    width: calc(var(--frame-size) * var(--chat-width-pct));
    height: calc(var(--frame-size) * var(--chat-height-pct));
    
    /* Styling */
    background-color: #FFFFF0;
    padding: 12px;
    
    /* Flexbox for messages */
    display: flex;
    flex-direction: column;
    
    /* SCROLLING - Critical properties */
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #3d5a3d #d4c4a8;
    
    transition: opacity 0.2s ease;
}

#chat-box.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Chrome/Safari/Edge scrollbar */
#chat-box::-webkit-scrollbar {
    width: 12px;
}

#chat-box::-webkit-scrollbar-track {
    background: #d4c4a8;
    border-left: 1px solid #c4b498;
}

#chat-box::-webkit-scrollbar-thumb {
    background: #3d5a3d;
    border-radius: 6px;
    border: 2px solid #FFFFF0;
    min-height: 40px;
}

#chat-box::-webkit-scrollbar-thumb:hover {
    background: #2d4a2d;
}

#chat-box::-webkit-scrollbar-thumb:active {
    background: #1d3a1d;
}

/* Legacy container - hidden */
.chatbot-container {
    display: none;
}

/* ========================================
   MESSAGES
   ======================================== */

.message {
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 8px;
    max-width: 85%;
    word-wrap: break-word;
    font-size: 14px;
    font-family: 'Merriweather', serif;
    line-height: 1.6;
    flex-shrink: 0;
}

.message.user {
    background-color: #3d5a3d;
    color: #FFFFF0;
    margin-left: auto;
    align-self: flex-end;
}

.message.bot {
    background-color: white;
    color: #2d3e2d;
    align-self: flex-start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Speaking indicator */
.message.bot.speaking::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233d5a3d"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>') center/contain no-repeat;
    animation: soundWave 1s ease-in-out infinite;
}

@keyframes soundWave {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}


/* ========================================
   SHORT DESKTOP/LAPTOP: Wide but not tall
   Examples: 1200x700, 1400x800 windowed browsers
   When height is limiting factor, scale frame to fit
   ======================================== */

@media (min-width: 900px) and (max-height: 800px) {
    :root {
        /* Frame sized to available height minus input space */
        --frame-size: calc(var(--viewport-height, 100vh) - var(--input-area-height) - 80px);
        --frame-vertical-offset: 8vh;
    }
}

/* Even shorter - really cramped vertical space */
@media (min-width: 900px) and (max-height: 650px) {
    :root {
        --frame-size: calc(var(--viewport-height, 100vh) - var(--input-area-height) - 60px);
        --frame-vertical-offset: 5vh;
    }
}

/* ========================================
   TABLET MODE: 600px - 899px wide
   Examples: iPad mini portrait, larger Android tablets, Z Fold inner screen
   ======================================== */

@media (max-width: 899px) and (min-width: 600px) {
    :root {
        /* Scale frame to 80% of viewport width, but don't exceed 630px */
        --frame-size: min(80vw, 630px);
        --frame-vertical-offset: 8vh;
    }
    
    .message {
        font-size: 15px;
        max-width: 90%;
        line-height: 1.5;
    }
    
    #chat-box::-webkit-scrollbar {
        width: 10px;
    }
    
    /* Prevent touch interference with frame elements */
    .frame-image,
    .eyes,
    .eyelid {
        pointer-events: none !important;
        touch-action: none !important;
    }
}

/* Short tablet - height is the limiting factor */
@media (max-width: 899px) and (min-width: 600px) and (max-height: 750px) {
    :root {
        --frame-size: 65vh;
        --frame-vertical-offset: 10vh;
    }
}

/* ========================================
   PHONE MODE: < 600px wide (but normal aspect ratio)
   Examples: iPhone, most Android phones in portrait
   
   LAYOUT MATH (from bottom up):
   - Nav arrows: fixed at bottom
   - Input area: needs clearance above nav arrows
   - Frame: sized to leave room, not cut off at top
   ======================================== */

@media (max-width: 599px) {
    :root {
        /* Frame fits within viewport width */
        --frame-size: 100vw;
        /* Less vertical offset - move frame DOWN (closer to center) */
        --frame-vertical-offset: 8vh;
    }
    
    .message {
        font-size: 15px;
        max-width: 90%;
        line-height: 1.5;
    }
    
    #chat-box::-webkit-scrollbar {
        width: 8px;
    }
    
    .frame-image,
    .eyes,
    .eyelid {
        pointer-events: none !important;
        touch-action: none !important;
    }
}

/* Wide phone / small tablet in landscape or square-ish window
   When height is similar to or less than width, use height-based sizing */
@media (max-width: 599px) and (min-aspect-ratio: 80/100) {
    :root {
        --frame-size: 75vh;
        --frame-vertical-offset: 12vh;
    }
}

/* ========================================
   VERY SMALL PHONES: < 400px wide
   Examples: iPhone SE, iPhone 15/14/13, older/smaller Android phones
   ======================================== */

@media (max-width: 399px) {
    :root {
        /* Keep frame at viewport width, don't blow it up */
        --frame-size: 105vw;
        --frame-vertical-offset: 12vh;
    }
    
    #chat-box {
        padding: 10px;
    }
    
    #chat-box::-webkit-scrollbar {
        width: 6px;
    }
    
    .message {
        font-size: 14px;
    }
}

/* ========================================
   TALL/NARROW DEVICES: aspect-ratio < 0.55 AND width < 290px
   Examples: Z Flip folded (260x512 = 0.51 ratio)
   
   CRITICAL: Must also check width to avoid catching Fold and regular phones!
   Z Flip outer: ~260px
   Galaxy Fold outer: ~344px - should NOT match
   ======================================== */

@media (max-aspect-ratio: 55/100) and (max-width: 290px) {
    :root {
        /* Available height = viewport - input area - some padding */
        /* Frame should be sized to fit that, not based on width */
        --frame-size: calc(var(--viewport-height, 100vh) - var(--input-area-height) - 40px);
        --frame-vertical-offset: 30px;
    }
    
    /* For very narrow devices, ensure minimum readability */
    .message {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* ========================================
   Z FLIP SPECIFIC: Narrow AND small width
   When folded: ~260px wide, ~512px tall
   This catches the Z Flip's outer screen specifically
   ======================================== */

@media (max-width: 290px) and (max-aspect-ratio: 55/100) {
    :root {
        /* On Z Flip, use height-based sizing but account for limited width */
        /* The frame can't be wider than the viewport */
        --frame-size: min(
            95vw,
            calc(var(--viewport-height, 100vh) - var(--input-area-height) - 60px)
        );
        --frame-vertical-offset: 25px;
    }
    
    .message {
        font-size: 12px;
        padding: 7px 10px;
        max-width: 95%;
    }
    
    #chat-box {
        padding: 8px;
    }
    
    #chat-box::-webkit-scrollbar {
        width: 5px;
    }
}

/* ========================================
   LANDSCAPE PHONES: Wide but short
   aspect-ratio > 1.5 AND height < 500px
   ======================================== */

@media (min-aspect-ratio: 150/100) and (max-height: 500px) {
    :root {
        /* In landscape, HEIGHT is the limiting factor */
        --frame-size: calc(var(--viewport-height, 100vh) - 100px);
        --frame-vertical-offset: 30px;
    }
}

/* ========================================
   FOLDABLE UNFOLDED (INNER SCREEN): 
   Z Fold inner is ~1812x2176 unfolded (closer to square)
   iPad-like proportions but might be detected as mobile
   ======================================== */

@media (min-width: 700px) and (max-width: 899px) and (min-aspect-ratio: 70/100) {
    :root {
        /* More generous sizing for larger foldable inner screens */
        --frame-size: min(75vw, 600px);
        --frame-vertical-offset: 50px;
    }
}

/* ========================================
   PRINT STYLES (just in case)
   ======================================== */

@media print {
    #chatbot-overlay,
    #chat-box {
        display: none !important;
    }
}