/* Basic Reset & Font */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa; /* Light background */
    display: flex; /* Use flexbox for layout */
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
    overflow: hidden; /* Prevent body scrolling */
}

/* New App Container */
.app-container {
    flex-grow: 1; /* Take remaining space */
    height: 100vh;
    display: flex; /* Use flex for chat container */
    flex-direction: column;
    margin-left: 60px; /* Default margin for collapsed menu */
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for menu */
    position: relative; /* Needed if toggle button is absolute within it */
}

/* Chat Container */
.chat-container {
    width: 100%; /* Fill app-container width */
    /* max-width removed */
    height: 100%; /* Fill app-container height */
    /* max-height removed */
    background-color: #fff; /* White background for the chat area */
    /* border-radius removed for full screen */
    /* box-shadow removed for full screen */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Keep content within bounds */
}

/* Chat Header */
.chat-header {
    background-color: #e0e0ff; /* Light purple/blue accent */
    color: #1c1b1f; /* Dark text */
    padding: 12px 20px;
    border-bottom: 1px solid #dcdcdc; /* Subtle separator */
    position: relative; /* For potential absolute positioning inside */
    flex-shrink: 0; /* Prevent header from shrinking */
}

.chat-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Model Selection Area */
.model-select-area {
    padding: 10px 20px;
    background-color: #f8f9fa; /* Slightly different background */
    border-bottom: 1px solid #dcdcdc;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Prevent shrinking */
}

.model-select-area label {
    font-size: 0.9rem;
    color: #49454f; /* MD3 text color */
    font-weight: 500;
}

#model-select {
    padding: 8px 12px;
    border: 2px solid #cac4d0; /* MD3 text field border */
    border-radius: 4px; /* Standard MD3 radius */
    font-size: 0.9rem;
    background-color: #fff;
    outline: none;
    transition: border-color 0.2s ease;
    flex-grow: 1; /* Allow dropdown to take space */
    max-width: 300px; /* Optional: limit max width */
}

#model-select:focus {
    border-color: #6750a4; /* Primary color focus indicator */
}

#stream-checkbox {
    margin-left: Left; /* Push checkbox to the right */
    cursor: pointer;
}

/* Chat Messages Area */
.chat-messages {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto; /* Enable scrolling */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Space between messages */
}

/* Individual Messages */
.message {
    padding: 10px 15px;
    border-radius: 18px; /* Rounded message bubbles */
    max-width: 75%;
    word-wrap: break-word; /* Prevent long words from overflowing */
    overflow-wrap: break-word; /* Ensure wrapping */
    white-space: pre-wrap; /* Preserve whitespace and wrap */
}

.message p {
    margin: 0;
    line-height: 1.4;
    word-wrap: break-word; /* Ensure wrapping within paragraphs */
    overflow-wrap: break-word;
    white-space: pre-wrap; /* Preserve whitespace and wrap */
}

/* Markdown specific styles */
.message p code, .message li code { /* Apply to code in lists too */
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.message pre {
    background-color: #eee;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto; /* Allow horizontal scrolling for long code blocks */
    white-space: pre; /* Preserve whitespace in pre blocks */
    margin: 10px 0; /* Add some margin */
}

.message pre code {
    padding: 0; /* Remove padding inside pre */
    background-color: transparent; /* Remove background inside pre */
    white-space: pre; /* Preserve whitespace in pre blocks */
}

.message ul, .message ol {
    margin-left: 20px; /* Indent lists */
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.message blockquote {
    border-left: 4px solid #ccc;
    padding-left: 10px;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #555; /* Slightly dimmer text for quotes */
    font-style: italic;
}

.message blockquote p { /* Style paragraphs inside blockquotes */
    margin-bottom: 5px;
}

/* Bot Messages */
.bot-message {
    background-color: #e7e0eb; /* Lighter purple */
    color: #1c1b1f;
    border-bottom-left-radius: 4px; /* Slightly different shape */
    align-self: flex-start;
}

/* User Messages */
.user-message {
    background-color: #d0e4ff; /* Light blue */
    color: #001d35;
    border-bottom-right-radius: 4px; /* Slightly different shape */
    align-self: flex-end;
}

/* Chat Input Area */
.chat-input-area {
    display: flex;
    padding: 15px 20px;
    border-top: 1px solid #dcdcdc; /* Separator */
    background-color: #f0f0f8; /* Slightly different background */
    gap: 10px;
    align-items: center;
}

/* Input Field */
#user-input {
    flex-grow: 1;
    padding: 12px 16px;
    border: 1px solid #cac4d0; /* MD3 text field border */
    border-radius: 20px; /* Fully rounded */
    font-size: 1rem;
    background-color: #fff;
    outline: none;
    transition: border-color 0.2s ease;
}

#user-input:focus {
    border-color: #6750a4; /* Primary color focus indicator */
}

/* Send Button */
#send-button {
    background-color: #6750a4; /* MD3 primary color */
    color: #fff; /* White icon */
    border: none;
    border-radius: 50%; /* Circular button */
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking */
}

#send-button:hover {
    background-color: #5a4492; /* Darker shade on hover */
}

#send-button .material-icons-outlined {
    font-size: 24px;
}

/* Scrollbar styling (optional, for better aesthetics) */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* --- Side Menu Styles --- */
#side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px; /* Default expanded width */
    height: 100vh;
    background-color: #f0f0f8; /* Match input area background */
    border-right: 1px solid #dcdcdc;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    padding: 10px 0; /* Adjust padding */
    box-sizing: border-box;
    /* transform: translateX(0); Removed */
    transition: width 0.3s ease-in-out; /* Transition width */
    z-index: 1000; /* Ensure menu is above content */
    overflow-y: auto;
    overflow-x: hidden; /* Hide horizontal overflow */
}

/* Collapsed state */
#side-menu.menu-collapsed {
    width: 80px;
    padding: 10px 0; /* Adjust padding for icons - remove horizontal padding */
}

/* Expanded state (default width is already set) */
#side-menu.menu-expanded {
    width: 240px;
    padding: 10px 0;
}

/* Adjust app container margin based on menu state */
#side-menu.menu-collapsed + .app-container {
    margin-left: 80px;
}

#side-menu.menu-expanded + .app-container {
    margin-left: 240px;
}

/* Use the class added in HTML */
.menu-items {
    list-style: none;
    padding: 0;
    margin: 0; /* Remove top margin, toggle is now first item */
    /* Consider adding display: flex; flex-direction: column; if needed */
}

.menu-items li a {
    display: flex;
    align-items: center;
    padding: 12px 0 12px 20px; /* Explicit left padding */
    margin: 4px 4px; /* Add margin for spacing and hover effect */
    color: #1c1b1f;
    text-decoration: none;
    font-weight: 500;
    border-radius: 24px; /* Fully rounded corners */
    transition: background-color 0.2s ease;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
}

.menu-items li a:hover {
    background-color: #e0e0ff; /* Highlight on hover */
}

.menu-items li a .material-icons-outlined {
    margin-right: 16px; /* Space between icon and text */
    flex-shrink: 0; /* Prevent icon from shrinking */
    transition: margin 0.3s ease-in-out; /* Smooth transition for centering */
}

.menu-items li a .menu-text {
    opacity: 1;
    transition: opacity 0.2s ease-in-out 0.1s; /* Fade in/out text */
}

/* Styles for collapsed menu items */
#side-menu.menu-collapsed .menu-items li a,
#side-menu.menu-collapsed .menu-items .menu-toggle-item { /* Apply to toggle item too */
    /* justify-content: center; REMOVED - Keep items aligned left */
    /* padding: 12px 0; REMOVED - Use base padding */
    margin: 4px; /* Keep margin for spacing */
    display: flex; /* Ensure toggle item uses flex */
    align-items: center; /* Vertically center button in toggle item */
}

#side-menu.menu-collapsed .menu-items li a { /* Specific adjustments for links if needed */
    /* Keep link-specific collapsed styles here if any */
}

#side-menu.menu-collapsed .menu-items li a .material-icons-outlined {
    margin-right: 0; /* Remove margin when collapsed */
}

#side-menu.menu-collapsed .menu-items li a .menu-text {
    opacity: 0;
    width: 0; /* Effectively hide text */
}


/* --- Menu Toggle Button --- */
/* Style for the LI containing the toggle button */
.menu-toggle-item {
    display: flex;
    align-items: center; /* Vertically center button */
    padding: 12px 0 12px 8px; /* Explicit left padding, matching links */
    margin: 4px 4px; /* Match link margin */
    box-sizing: border-box; /* Include padding in dimensions */
    /* No hover background needed on the LI itself */
}

#menu-toggle-button {
    background: none; /* Transparent background */
    color: #1c1b1f; /* Match menu item color */
    border: none;
    border-radius: 50%;
    width: 48px; /* Keep size */
    height: 48px; /* Keep size */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0; /* Remove default button padding */
    margin: 0; /* Remove previous margin, positioning handled by parent LI */
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

#menu-toggle-button:hover {
    background-color: #e0e0ff; /* Match menu item hover */
}

#menu-toggle-button .material-icons-outlined {
/* --- Google Drive File Select Toggle Buttons --- */
.google-drive-select-btn {
    padding: 2px 10px;
    font-size: 0.8em;
    margin-left: 8px;
    border-radius: 4px;
    border: 1px solid #bbb;
    background-color: #e0e0e0;
    color: #333;
    font-weight: normal;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
}
.google-drive-select-btn.selected {
    background-color: #388e3c;
    color: #fff;
    border: 1.5px solid #388e3c;
    font-weight: bold;
}
.google-drive-select-btn:hover {
    background-color: #c8e6c9;
}
.google-drive-select-btn.selected:hover {
    background-color: #2e7031;
}

/* --- Google Drive Deselect All Button --- */
#deselect-all-files {
    background-color: #fff3e0;
    color: #b26a00;
    border: 1px solid #ffb300;
    border-radius: 4px;
    padding: 4px 14px;
    margin-bottom: 8px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
#deselect-all-files:hover {
    background-color: #ffe0b2;
    color: #ff6f00;
    border-color: #ff6f00;
}

/* --- Google Drive Selected File Row Highlight --- */
.google-drive-file-selected {
    background-color: #e8f5e9 !important;
}
    font-size: 24px;
}

/* --- Tool Panel (Menu Extension) --- */
#tool-panel {
    position: fixed;
    top: 0;
    left: 80px; /* match collapsed menu width, adjust if menu expands */
    width: 300px;
    height: 100vh;
    background: #f7f7fa;
    border-left: 1px solid #d1d1e0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.07);
    z-index: 1100;
    display: none; /* shown via JS */
    transition: left 0.3s;
    padding: 0 20px 20px 20px;
}

#side-menu.menu-expanded + #tool-panel {
    left: 240px; /* match expanded menu width */
}

.tool-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 10px 0;
    border-bottom: 1px solid #e0e0ff;
}

.tool-list {
    margin-top: 20px;
}

.tool-list label {
    display: flex;
    align-items: center;
    font-size: 1.1em;
    margin-bottom: 12px;
    cursor: pointer;
}

.tool-list input[type="checkbox"] {
    margin-right: 10px;
}
/* Remove body.menu-open rules as margin is handled by sibling selector */