/* static/css/style.css */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

/* Define CSS variables for easier adjustments */
:root {
    --history-panel-width-desktop: 250px;
    --history-panel-width-mobile: 250px; /* Default for mobile breakpoint */
    --input-area-height: 65px; /* Adjusted input area height */
    --chat-header-height: 55px; /* Slightly reduced header height */
    --main-content-margin: 20px; /* Space around chat on desktop */
    --hamburger-size: 30px;
    --hamburger-padding: 15px;
}

/* Base styles for HTML and Body */
html, body {
    height: 100%; /* Ensure html and body take full height */
    width: 100%; /* Ensure html and body take full width */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent overall scrolling, crucial for fixed layouts */
    font-family: 'Roboto Mono', monospace;
    background-color: #f0f2f5;
}

/* Main body flex container for desktop (history panel and main content) */
body {
    display: flex;
    flex-direction: row; /* Desktop: history and chat side-by-side */
}

/* Main Content Wrapper - Holds chat interface and hamburger. This is the primary responsive container */
#main-content-wrapper {
    flex-grow: 1; /* Takes all available horizontal space */
    display: flex;
    flex-direction: column; /* Stacks chat-header, chat-box, and chat-input-area vertically */
    position: relative; /* Crucial for absolute positioning of its children (chat-container, hamburger, overlay) */
    height: 100%; /* Take full vertical height of body */
    overflow: hidden; /* Ensure no internal scroll affecting main layout */
    box-sizing: border-box; /* Include padding/border in total dimensions */
    /* Desktop appearance: */
    margin: var(--main-content-margin);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: #fff; /* Match chat-container background */
}

/* --- History Panel Styles --- */
#history-panel {
    width: var(--history-panel-width-desktop); /* Fixed width for desktop */
    flex-shrink: 0; /* Prevent it from shrinking */
    flex-grow: 0;   /* Prevent it from growing */
    background-color: #e0e6ed;
    padding: 15px;
    overflow-y: auto; /* Allow scrolling within the history panel's content */
    border-right: 1px solid #ccc;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    z-index: 1000; /* Ensure it's above other content when visible */
    transition: transform 0.3s ease-in-out; /* Smooth slide animation */
    /* Mobile specific positioning (default for all screens, overridden by media query for desktop) */
    position: fixed; /* Make it fixed to viewport */
    top: 0;
    bottom: 0; /* Occupy full height */
    left: calc(-1 * var(--history-panel-width-desktop) - 10px); /* Initially hidden off-screen + extra buffer */
}
/* Desktop specific override for history panel position: Pushes it back into normal flow */
@media (min-width: 769px) {
    #history-panel {
        position: static; /* Back to normal flow */
        left: auto; /* Remove fixed left */
        transform: translateX(0) !important; /* Ensure no transform */
        width: var(--history-panel-width-desktop); /* Ensure desktop width */
    }
}

#history-panel h3 {
    margin-top: 0;
    color: #333;
}
#history-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}
#history-list li {
    padding: 8px 0;
    border-bottom: 1px dotted #bbb;
    cursor: pointer;
    color: #555;
    font-size: 0.9em;
}
#history-list li:last-child {
    border-bottom: none;
}
#history-list li:hover {
    color: #007bff;
}

/* --- Hamburger Menu Icon --- */
#hamburger-menu {
    display: none; /* Hidden by default on desktop */
    position: absolute; /* Positioned relative to #main-content-wrapper */
    top: var(--hamburger-padding);
    left: var(--hamburger-padding);
    width: var(--hamburger-size);
    height: calc(var(--hamburger-size) * 0.8);
    cursor: pointer;
    z-index: 1002; /* Above overlay and chat content */
    flex-direction: column;
    justify-content: space-between;
}
#hamburger-menu div {
    width: 100%;
    height: 3px;
    background-color: #4CAF50;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}
#hamburger-menu.open div:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}
#hamburger-menu.open div:nth-child(2) {
    opacity: 0;
}
#hamburger-menu.open div:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* --- Overlay --- */
#overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Covers entire viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 999; /* Below history panel, above chat content */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Prevents blocking underlying elements when hidden */
}
body.history-open #overlay {
    display: block; /* Show the overlay, then transition opacity */
    opacity: 1;
    pointer-events: auto; /* Make it clickable when visible */
}


/* --- Chat Container (Messages Area) --- */
#chat-container {
    display: flex;
    flex-direction: column;
    /* Position chat-header and chat-box absolutely to fill space between top and input */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--input-area-height); /* Leave space for fixed input area */
    background-color: #fff; /* Moved from main-content-wrapper for layering */
    border-radius: 8px; /* Original border radius */
    overflow: hidden; /* Important for chat-box scrolling */
    box-sizing: border-box; /* Include padding/border in total dimensions */
}
#chat-header {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 1.2em;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    flex-shrink: 0; /* Prevent header from shrinking */
    height: var(--chat-header-height); /* Fixed height */
    box-sizing: border-box;
    border-top: none; /* NEW: Remove any top border */
    box-shadow: none; /* NEW: Remove any shadows */
}
#chat-box {
    flex-grow: 1; /* Allows chat messages area to expand */
    padding: 20px; /* Desktop padding */
    overflow-y: auto; /* IMPORTANT: This makes the chat content scrollable */
    border-bottom: 1px solid #eee;
}
.message-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}
.message {
    padding: 10px;
    border-radius: 15px;
    max-width: 70%;
    word-wrap: break-word;
    flex-shrink: 1;
    font-size: 1em;
}
.user-message-container {
    justify-content: flex-end;
}
.user-message {
    background-color: #DCF8C6;
    margin-left: auto;
    text-align: right;
}
.bot-message-container {
    justify-content: flex-start;
}
.bot-message {
    background-color: #E0E0E0;
    margin-right: auto;
    text-align: left;
}

.bot-avatar {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    flex-shrink: 0;
    display: none;
    position: relative;
}
.bot-avatar.show {
    display: block;
}
.bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

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

.bot-avatar.thinking::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid transparent;
    border-top-color: #4CAF50;
    border-right-color: #4CAF50;
    border-radius: 50%;
    animation: rotate 1.2s linear infinite;
}
.bot-avatar.thinking::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid rgba(150, 150, 150, 0.3);
    border-radius: 50%;
    z-index: -1;
}

/* --- Chat Input Area --- */
#chat-input-area {
    display: flex;
    padding: 10px; /* Reduced padding */
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
    flex-shrink: 0; /* Prevent input area from shrinking */
    height: var(--input-area-height); /* Fixed height from CSS variable */
    box-sizing: border-box; /* Include padding/border in total height */
    /* Position at the very bottom of its parent (main-content-wrapper) */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%; /* Ensure it takes full width */
    z-index: 10; /* Ensure it's above chat-box */
    align-items: center; /* Vertically center input and button */
}
#user-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 1em;
    outline: none;
    margin-right: 10px; /* Space between input and button */
}
#send-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    height: auto; /* Adjust button height to content */
}
#send-button:hover {
    background-color: #45a049;
}

/* --- Mobile/Tablet Responsive Design (@media Queries) --- */

@media (max-width: 768px) {
    /* Main Content Wrapper - Ensure it fills the screen on mobile and provides context for absolute positioning */
    #main-content-wrapper {
        margin: 0; /* Remove desktop margins on mobile */
        border-radius: 0; /* No radius if full width */
        box-shadow: none; /* Remove shadow to make it flush */
        /* It's already flex-direction: column; height: 100%; width: 100%; */
    }

    /* History Panel - Hidden by default, slides out */
    #history-panel {
        width: var(--history-panel-width-mobile); /* Mobile width */
        left: calc(-1 * var(--history-panel-width-mobile) - 10px); /* Hide completely off-screen + buffer */
        height: 100vh; /* Full viewport height, as it's fixed */
        z-index: 1000;
        transform: translateX(0); /* Reset transform for initial state (important!) */
        padding-top: 50px; /* Space for fixed header/status bar */
    }
    /* When 'history-open' class is on body, slide history panel into view */
    body.history-open #history-panel {
        transform: translateX(var(--history-panel-width-mobile)); /* Slide into view */
    }

    /* Hamburger Menu - Display on mobile */
    #hamburger-menu {
        display: flex; /* Show the hamburger icon */
        z-index: 1003; /* Ensure it's always on top of chat-header */
    }

    /* Chat Container - This is the scrollable message area */
    #chat-container {
        /* No fixed height needed here. It's inside main-content-wrapper which is flex column */
        /* It's set to top:0, left:0, right:0, bottom:var(--input-area-height) */
        position: absolute; /* Now position absolutely within main-content-wrapper */
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--input-area-height); /* Ensure space for absolutely positioned input area */
        margin: 0;
        border-radius: 0;
        box-shadow: none; /* Remove individual chat container shadow */
        background-color: transparent; /* Allows main-content-wrapper's background to show */
    }
    #chat-header {
        padding-left: calc(var(--hamburger-size) + var(--hamburger-padding) + 10px); /* Space for hamburger icon */
        text-align: center;
        border-radius: 0;
    }
    #chat-box {
        padding: 15px; /* Adjust padding */
    }
    .message {
        max-width: 90%; /* Messages can take more width */
        font-size: 0.9em;
    }
    .bot-avatar {
        width: 25px;
        height: 25px;
        margin-right: 8px;
    }
    .bot-avatar.thinking::before, .bot-avatar.thinking::after {
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-width: 2px;
    }
    /* Input area is handled by its own absolute positioning, ensuring it's always at the bottom */
    #chat-input-area {
        /* No change needed here, it's already set to be absolute bottom */
        height: var(--input-area-height);
        padding: 10px;
        font-size: 0.95em;
    }
    #user-input {
        padding: 8px;
        font-size: 0.9em;
    }
    #send-button {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    #history-panel > button {
        width: 100% !important;
        margin: 10px 0 !important;
        background-color: #007bff !important;
        font-size: 1em !important;
        border-radius: 5px !important;
        text-align: center;
    }
}

/* For even smaller screens (typical mobile phone portrait) */
@media (max-width: 480px) {
    :root {
        --history-panel-width-mobile: 200px;
        --input-area-height: 55px; /* Further adjust for smaller screens */
        --chat-header-height: 50px;
        --hamburger-size: 25px;
        --hamburger-padding: 10px;
    }
    #history-panel {
        width: var(--history-panel-width-mobile);
        left: calc(-1 * var(--history-panel-width-mobile) - 10px); /* Adjust off-screen position + buffer */
    }
    body.history-open #history-panel {
        transform: translateX(var(--history-panel-width-mobile));
    }
    #hamburger-menu {
        top: var(--hamburger-padding);
        left: var(--hamburger-padding);
        width: var(--hamburger-size);
        height: calc(var(--hamburger-size) * 0.8);
    }
    #hamburger-menu div {
        height: 2px;
    }
    #hamburger-menu.open div:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    #hamburger-menu.open div:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    #chat-header {
        padding-left: calc(var(--hamburger-size) + var(--hamburger-padding) + 10px);
    }
    #chat-box {
        padding: 10px;
    }
    .message {
        font-size: 0.85em;
    }
    .bot-avatar {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
    .bot-avatar.thinking::before, .bot-avatar.thinking::after {
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border-width: 1px;
    }
    #user-input, #send-button {
        font-size: 0.85em;
        padding: 5px 8px;
    }
}