/* static/style.css */

/*
   This CSS file defines the CSS variables for theme colors
   and applies styles to elements using these variables based on the body class.
   Layout and structural styling is handled by Tailwind classes in index.html.
*/

/* Basic Reset and Global Styles */
body {
    margin: 0;
    /* Use the Inter font, falling back to standard sans-serif */
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    /* Apply background and text color using variables */
    background-color: var(--main-bg);
    color: var(--text-color);
    /* Smooth transition for theme changes */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Theme Variables --- */
/* Define CSS variables for colors based on the body class */

/* Light Theme (Based on the provided image) */
body.light {
    --main-bg: #FDF4E3; /* Soft background */
    --sidebar-bg: #F0E6D6; /* Slightly darker sidebar */
    --text-color: #4A4A4A; /* Darker text color */
    --text-color-secondary: #7A7A7A; /* Lighter secondary text */
    --header-color: #5C4033; /* Brownish header color */
    --border-color: #D3C4B0; /* Border color */
    --input-bg: #FFFFFF; /* Input background */
    --button-bg: #8B5A2B; /* Button color (Adjust if needed to match image) */
    --button-text: #FFFFFF; /* Button text color */
    --message-bg: #EFEFEF; /* Message background (Adjust if needed) */
    --message-text: #4A4A4A; /* Message text */
    --user-message-bg: #D9E7D4; /* User message background (Example green, adjust if needed) */
    --user-message-text: #4A4A4A; /* User message text */
    --assistant-message-bg: #EFEFEF; /* Assistant message background */
    --assistant-message-text: #4A4A4A; /* Assistant message text */

    /* Active chat highlight colors for light theme */
    --active-chat-bg: #D3C4B0; /* Use border color as background */
    --active-chat-text: #5C4033; /* Use header color as text */

    /* Delete button color */
    --delete-button-color: #EF4444; /* Tailwind red-500 */
    --delete-button-hover-color: #DC2626; /* Tailwind red-700 */
}

/* Dark Theme (Your existing colors) */
body.dark {
    --main-bg: #1E1E1E;
    --sidebar-bg: #2D2D30;
    --text-color: #E0E0E0;
    --text-color-secondary: #B0B0B0;
    --header-color: #BB86FC; /* Purple accent */
    --border-color: #505050;
    --input-bg: #3C3C3C;
    --button-bg: #03DAC6; /* Teal accent */
    --button-text: #1E1E1E;
    --message-bg: #3C3C3C; /* Dark grey for messages */
    --message-text: #E0E0E0;
    --user-message-bg: #05668D; /* Dark blue for user messages */
    --user-message-text: #E0E0E0;
    --assistant-message-bg: #3C3C3C; /* Dark grey for assistant messages */
    --assistant-message-text: #E0E0E0;

    /* Active chat highlight colors for dark theme */
    --active-chat-bg: #505050; /* Use border color as background */
    --active-chat-text: #E0E0E0; /* Use text color */

     /* Delete button color */
    --delete-button-color: #F87171; /* Tailwind red-400 */
    --delete-button-hover-color: #EF4444; /* Tailwind red-500 */
}

/* --- Element Styling using CSS Variables --- */

/* Sidebar */
.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    border-right-color: var(--border-color);
}

.sidebar h2 {
    color: var(--header-color);
}

.sidebar button {
    background-color: var(--button-bg);
    color: var(--button-text);
}

.sidebar button:hover {
    /* Using CSS variables for hover opacity might require JS or repeating color */
    /* For simplicity, using a fixed opacity for now */
    opacity: 0.9;
}


.sidebar .info-text {
    color: var(--text-color-secondary);
}

.sidebar .theme-toggle select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Past Chat Items */
.past-chat-item {
    /* Default styles for chat items */
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
    position: relative; /* Needed for absolute positioning if we add hover effects */
}

.past-chat-item:hover {
    /* Subtle hover effect */
    background-color: rgba(var(--text-color-secondary-rgb, 122, 122, 122), 0.1); /* Use rgba for transparency */
}

/* Active Chat Item Highlight */
.past-chat-item.active-chat {
    background-color: var(--active-chat-bg);
    color: var(--active-chat-text);
    font-weight: bold; /* Make active chat title bold */
}

.past-chat-item .chat-title-edit {
    /* Styling for the edit input field */
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Delete Button Styling */
.delete-chat-button {
    /* Remove default button styling */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.9rem; /* Adjust icon size */
    /* Position the button */
    /* position: absolute; /* Alternative positioning if needed */
    /* right: 0.5rem; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* Ensure it's visible on hover */
    /* opacity: 0; /* Initially hidden */
    transition: color 0.2s ease; /* Smooth color transition */
}

/* Show delete button on hover of the chat item */
.past-chat-item:hover .delete-chat-button {
    /* opacity: 1; /* Make visible on hover */
    display: inline-block !important; /* Override Tailwind's hidden class on hover */
}

/* Delete button colors based on theme */
.delete-chat-button {
    color: var(--delete-button-color);
}

.delete-chat-button:hover {
    color: var(--delete-button-hover-color);
}


/* Main Content Area */
.main-content {
    background-color: var(--main-bg);
    color: var(--text-color);
}

/* Chat Column */
.chat-column {
    background-color: var(--main-bg); /* Should inherit from main-content, but explicit is safer */
    color: var(--text-color); /* Should inherit from main-content, but explicit is safer */
    border-right-color: var(--border-color);
}

.chat-column h1 {
    color: var(--header-color);
}

.subject-select label {
    color: var(--text-color); /* Ensure label color is correct */
}

.subject-select select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Chat History Area */
/* --- Element Styling using CSS Variables --- */

/* Chat History Area */
.chat-history {
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack messages vertically */
    /* align-items: flex-start;  This is the default, but explicitly setting it can help if you want left alignment by default for everything */
    /* Add any other existing styles like overflow-y-auto, height, etc., if they were here */
}

/* Chat Messages */
.chat-message {
    margin-bottom: 1rem; /* Add some space between messages */
    padding: 0.75rem 1rem; /* Add padding inside the bubble */
    border-radius: 1.5rem; /* Make corners rounded */
    max-width: 80%; /* Limit width to 80% of parent */
    word-wrap: break-word; /* Ensure long words break */
    white-space: pre-wrap; /* Preserve whitespace and line breaks from markdown */
    
    /* REMOVE THESE IF THEY WERE PRESENT FROM BEFORE: */
    /* display: inline-block; */
    /* clear: both; */
    /* float: left; / float: right; */
    
    /* Ensure the message content itself is a block or flex item to respect sizing */
    display: block; /* or flex if you put content inside and want internal alignment */
    box-sizing: border-box; /* Ensures padding/border is included in the max-width */
}

/* User Messages (Right-aligned bubbles) */
.chat-message.user {
    margin-left: auto; /* Pushes the user message to the far right */
    margin-right: 0.5rem; /* Add a small margin on the right */
    border-bottom-right-radius: 0.25rem; /* Less rounded corner for the "tail" side */
    background-color: var(--user-message-bg);
    color: var(--user-message-text);
    /* REMOVE: float: right; */
}

/* Assistant Messages (Left-aligned bubbles) */
.chat-message.assistant {
    margin-right: auto; /* Pushes the assistant message to the far left */
    margin-left: 0.5rem; /* Add a small margin on the left */
    border-bottom-left-radius: 0.25rem; /* Less rounded corner for the "tail" side */
    background-color: var(--assistant-message-bg);
    color: var(--assistant-message-text);
    /* REMOVE: float: left; */
}

/* IMPORTANT: Ensure your spinner message and error message also have correct styling */
.thinking-message {
    background-color: var(--input-bg); /* A subtle background, similar to your input */
    color: var(--text-color-secondary); /* A lighter text color */
    font-style: italic;
    max-width: fit-content; /* Make it only as wide as its content */
    /* Add padding and border-radius here too if you want it to look like a bubble */
    padding: 0.75rem 1rem;
    border-radius: 1.5rem;
    margin-right: auto; /* Ensure it stays left-aligned like other assistant messages */
    margin-left: 0.5rem;
}

.error-message {
    background-color: #ffebeb; /* Light red background */
    color: #cc0000; /* Dark red text */
    border: 1px solid #ffcccc;
    padding: 0.75rem 1rem; /* Ensure padding */
    border-radius: 1.5rem; /* Ensure rounded corners */
    margin-right: auto; /* Left-aligned like assistant messages */
    margin-left: 0.5rem;
}




/* Chat Input Area */
.chat-input {
    border-top-color: var(--border-color);
}

.chat-input input[type="text"] {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.chat-input button {
    background-color: var(--button-bg);
    color: var(--button-text);
}
.chat-input button:hover {
     /* Using CSS variables for hover opacity might require JS or repeating color */
    /* For simplicity, using a fixed opacity for now */
    opacity: 0.9;
}


/* Notebook Column */
.notebook-column {
    background-color: var(--main-bg); /* Should inherit from main-content, but explicit is safer */
    color: var(--text-color); /* Should inherit from main-content, but explicit is safer */
}

.notebook-column h2, .notebook-column h3 {
    color: var(--header-color);
}

.notebook-column .caption-text {
    color: var(--text-color-secondary);
}

.notebook-column textarea {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.notebook-column .download-buttons button {
    background-color: var(--button-bg);
    color: var(--button-text);
}
.notebook-column .download-buttons button:hover {
     /* Using CSS variables for hover opacity might require JS or repeating color */
    /* For simplicity, using a fixed opacity for now */
    opacity: 0.9;
}


/* Divider Styling */
hr {
    background-color: var(--border-color);
}

/* Scrollbar Styling (Optional, for Webkit browsers like Chrome/Safari) */
/* Using CSS variables makes it theme-aware. */
.chat-history::-webkit-scrollbar {
    width: 8px;
}

.chat-history::-webkit-scrollbar-track {
    background: var(--sidebar-bg); /* Match sidebar background */
    border-radius: 10px;
}

.chat-history::-webkit-scrollbar-thumb {
    background: var(--border-color); /* Use border color for thumb */
    border-radius: 10px;
}

.chat-history::-webkit-scrollbar-thumb:hover {
    background: var(--text-color-secondary); /* Darker on hover */
}
/* Spinner styles */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1); /* Light grey border */
    border-top: 4px solid var(--button-bg); /* Use your theme color for the top border */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block; /* Aligns it nicely with text */
    vertical-align: middle; /* Keeps it vertically centered with text */
}

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



.dark .thinking-message {
    background-color: var(--input-bg); /* Use input background for dark theme */
    color: var(--text-color-secondary);
}

.error-message {
    background-color: #ffebeb; /* Light red background */
    color: #cc0000; /* Dark red text */
    border: 1px solid #ffcccc;
}

.dark .error-message {
    background-color: #3d0000;
    color: #ffcccc;
    border: 1px solid #660000;
}
/*
   Any other specific custom styles not handled by Tailwind utilities would go here.
*/
.streaming-indicator {
    animation: blink 1s infinite;
    color: #666;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

#logout-button {
    position: absolute; /* Position relative to the nearest positioned ancestor, or the document body */
    top: 15px;          /* Distance from the top edge */
    right: 15px;         /* Distance from the right edge */
    background-color: #f44336; /* A common red color for logout/danger buttons */
    color: white;       /* White text color */
    padding: 8px 12px;  /* Padding inside the button */
    border: none;       /* No border */
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer;    /* Show a hand cursor on hover */
    text-decoration: none; /* Remove underline from link */
    font-size: 14px;    /* Adjust font size as needed */
    z-index: 1000;      /* Ensure it's on top of other content */
}

#logout-button:hover {
    background-color: #d32f2f; /* Darker red on hover */
}