/* public/style.css */

/* General Reset / Base Styles */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
    height: -webkit-fill-available; /* Better height handling on mobile Safari */
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #1A1A1A; /* Dark background */
    color: #EAEAEA; /* Light text */
    font-size: 16px; /* Establish base font size */
    line-height: 1.6; /* Improved overall readability */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    height: 100vh; /* Fallback for older browsers */
    height: -webkit-fill-available; /* Fallback for iOS/WebKit */
    height: 100dvh; /* <<< SOLUTION 1: Use dynamic viewport height if supported */
    overflow: hidden; /* Prevent body itself from scrolling */
}

/* Scrollable Main Content Area (Contains H1 + Chat History) */
#main-content-area {
    flex-grow: 1; /* Takes up available vertical space */
    overflow-y: auto; /* Enables vertical scrolling */
    position: relative; /* Context for potential absolutely positioned children */
    display: flex; /* Use flex for internal stacking */
    flex-direction: column; /* Stack H1 above chat container */
}


/* Header Styling (Inside scrollable area) */
h1 {
    text-align: center;
    color: #FFFFFF;
    background-color: #242424; /* Slightly lighter dark bg */
    padding: 15px 20px;
    margin: 0; /* Remove default margin */
    font-weight: 500; /* Medium weight */
    border-bottom: 1px solid #383838; /* Separator line */
    /* This element will scroll with the content */
}

/* Chat Container (Inside scrollable area) */
#chat-container {
    /* No flex-grow or overflow needed, handled by #main-content-area */
    padding: 20px; /* Spacing around chat history */
    width: 100%;
}

/* Chat History (Holds the message bubbles) */
#chat-history {
    display: flex;
    flex-direction: column; /* Stack messages vertically */
    gap: 15px; /* Space between messages */
    width: 100%;
    max-width: 800px; /* Limit content width */
    margin: 0 auto; /* Center the history horizontally */
    padding-bottom: 20px; /* More space at the very end of the scroll */
}

/* Individual Message Bubble Styling */
.message {
    padding: 10px 15px; /* Internal padding */
    border-radius: 16px; /* Rounded corners */
    display: inline-grid;   /* CHANGED to inline-grid */
    grid-template-columns: 1fr; /* Single column for stacking */
    gap: 8px;               /* RE-ADD gap for internal spacing */
    max-width: 600px;      /* Pixel-based max-width for the bubble itself */
    box-sizing: border-box;
    line-height: 1.5; /* Text line spacing */
    /* overflow-wrap: break-word; */ /* MOVED to .message p */
    vertical-align: top; /* Good for inline-block/grid alignment */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Ensure child elements of .message take full width of the grid column */
.message > p,
.message > img.message-image, /* More specific selector */
.message > div.pdf-info,    /* More specific selector */
.message > pre,
.message > div.search-suggestion-container { /* More specific selector */
    width: 100%;
    display: block; /* Ensures elements like <img> behave as blocks in grid cell */
    box-sizing: border-box; /* If they have padding/border themselves */
}


/* --- MODIFIED PARAGRAPH STYLING --- */
/* Paragraphs within messages - Keep general reset */
.message p {
    margin: 0; /* Remove default margins */
    overflow-wrap: break-word; /* Ensure wrapping for text content */
    /* word-break: break-all; */     /* REVERTED - Rely on overflow-wrap */
    line-height: 1.5; /* Match message bubble */
    min-width: 0; /* ADDED - Help with overflow in flex/grid items */
}

/* Apply newline preservation to user message paragraphs */
.user-message p {
    white-space: pre-wrap; /* Preserve newlines and wrap text */
}

/* Add vertical spacing ONLY between consecutive paragraphs in AI messages */
.ai-message p + p {
    margin-top: 0.75em; /* Creates the visual paragraph break */
}
/* --- END MODIFIED PARAGRAPH STYLING --- */

/* --- Message Entry Structure & Alignment --- */
.message-entry {
    /* Behaves like a block, takes width from parent #chat-history context */
    /* Spacing between entries is handled by #chat-history's gap */
}

.user-message-entry {
    margin-left: auto;
    max-width: 85%;
    width: fit-content; /* Make entry only as wide as its content (bubble + action bar) */
    text-align: left; /* ADDED */
}
.ai-message-entry {
    margin-right: auto;
    max-width: 85%;
    width: fit-content; /* Make entry only as wide as its content (bubble + action bar) */
    text-align: left; /* ADDED */
}

.message-action-buttons { /* The bar itself */
    display: flex;
    padding-top: 2px;
    padding-bottom: 4px;
    /* width: 100%; */ /* REMOVED - let it be sized by content (buttons) & parent fit-content */
    box-sizing: border-box;
}

.user-actions-align { /* For content within the bar for user messages */
    justify-content: flex-end; /* Pushes buttons to the right */
    gap: 6px; /* Space between buttons */
}

.ai-actions-align { /* For content within the bar for AI messages */
    justify-content: flex-start; /* Pushes buttons to the left */
    gap: 6px; /* Space between buttons */
}
/* --- End Message Entry Structure & Alignment --- */

/* User message specific styles */
.user-message {
    background-color: #007ACC; /* Blue background */
    color: white;
    /* align-self: flex-end; */
    border-bottom-right-radius: 4px; /* Slightly flattened corner */
    /* max-width: 80%; */ /* REMOVE - Handled by .message's pixel max-width */
}

/* AI message specific styles */
.ai-message {
    background-color: #333333; /* Dark grey background */
    color: #EAEAEA;
    /* align-self: flex-start; */
    border-bottom-left-radius: 4px; /* Slightly flattened corner */
    /* max-width: 80%; */ /* REMOVE - Handled by .message's pixel max-width */
}

/* Styling for Images within Messages */
.message img.message-image {
    max-width: 100%; /* Don't exceed bubble width */
    max-height: 300px; /* Limit image display height */
    border-radius: 8px; /* Rounded corners */
    object-fit: contain; /* Scale while preserving aspect ratio */
    cursor: pointer; /* Hint that it might be interactive */
    margin-top: 5px; /* Space above if text is also present */
}

/* Styling for PDF Info within Messages */
.message .pdf-info {
    font-size: 0.85em;
    font-style: italic;
    color: #A0A0A0; /* Updated for new palette */
    margin-top: 5px;
    padding: 3px 8px;
    background-color: rgba(255, 255, 255, 0.05); /* Subtle background */
    border-radius: 4px;
    display: inline-block; /* Prevent taking full width */
    word-break: break-all; /* Break long filenames */
}


/* --- Google Search Suggestion Styling (Minimal Wrapper Only) --- */
.search-suggestion-container {
    margin-top: 12px;
    overflow-x: auto; /* Enable horizontal scrolling if content overflows */
    max-width: 100%;  /* Ensure container does not exceed parent's width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
/* --- End Search Suggestion Styling --- */

/* --- Markdown Element Styling --- */
.message pre { background-color: #2C2C2C; padding: 10px; border-radius: 4px; overflow-x: auto; border: 1px solid #383838; margin-top: 8px; margin-bottom: 8px; white-space: pre; color: #EAEAEA; line-height: 1.4; }
.message code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 0.9em; } /* General code styling, color inherited or can be set if needed */
.message p > code { background-color: #303030; padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.85em; color: #EAEAEA; }
.message pre code { background-color: transparent; padding: 0; font-size: inherit; border-radius: 0; color: inherit; } /* Ensure pre code inherits pre's color */
.message ul, .message ol { padding-left: 25px; margin-top: 8px; margin-bottom: 8px; color: #EAEAEA; }
.message li { margin-bottom: 4px; }
.message blockquote { border-left: 3px solid #555555; padding-left: 10px; margin-left: 0; margin-top: 8px; margin-bottom: 8px; color: #A0A0A0; font-style: italic; }
.message blockquote p { margin: 0; } /* Keep margin 0 for p inside blockquote */
.message p a { color: #007ACC; text-decoration: underline; }
.message p a:hover { color: #3399DD; } /* Lighter shade of accent for hover */
.message h1, .message h2, .message h3, .message h4, .message h5, .message h6 { margin-top: 1em; margin-bottom: 0.5em; font-weight: 500; color: #FFFFFF; }
.message h1 { font-size: 1.5em; } .message h2 { font-size: 1.3em; } .message h3 { font-size: 1.15em; } .message h4 { font-size: 1em; } .message h5 { font-size: 0.9em; } .message h6 { font-size: 0.85em; color: #A0A0A0; }
.message hr { border: 0; border-top: 1px solid #383838; margin: 1em 0; }
/* --- End Markdown Element Styling --- */


/* Loading / Error Indicators */
#loading, #error { text-align: center; padding: 10px; font-style: italic; color: #A0A0A0; width: 100%; max-width: 800px; margin: 5px auto; flex-shrink: 0; }
#error { color: #ff4d4d; font-weight: bold; background-color: #2C2C2C; border-radius: 4px; border: 1px solid #555555; padding: 10px 15px; }


/* Image Preview Area Styling */
#image-preview-container { background-color: #242424; padding: 8px 20px; display: flex; justify-content: center; align-items: center; position: relative; flex-shrink: 0; width: 100%; }
#image-preview-container > div { position: relative; display: flex; align-items: center; gap: 10px; max-width: 750px; margin: 0 auto; }
#image-preview { display: block; max-height: 50px; max-width: 50px; object-fit: contain; border: 1px solid #404040; border-radius: 6px; flex-shrink: 0; }
#pdf-filename-preview { font-size: 0.85em; color: #A0A0A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 70px); display: none; }
#remove-image-button { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; background-color: rgba(50, 50, 50, 0.8); color: #A0A0A0; border: 1px solid #555555; border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: bold; line-height: 18px; text-align: center; padding: 0; transition: background-color 0.2s, color 0.2s; }
#remove-image-button:hover { background-color: rgba(255, 77, 77, 0.8); color: white; border-color: rgba(255, 77, 77, 0.9); }


/* Input Form Styling */
#chat-form { display: flex; align-items: flex-end; padding: 15px 20px; background-color: #242424; flex-shrink: 0; width: 100%; justify-content: center; gap: 10px; }
#image-preview-container.hidden + #chat-form { border-top: 1px solid #383838; }
#image-preview-container:not(.hidden) + #chat-form { border-top: none; }


/* Attach Button Styling */
#attach-button { background: none; border: none; color: #A0A0A0; font-size: 1.4rem; cursor: pointer; padding: 8px; line-height: 1; transition: color 0.2s; flex-shrink: 0; align-self: flex-end; margin-bottom: 8px; }
#attach-button:hover { color: #EAEAEA; }
#attach-button.has-file { color: #007ACC; }


/* Textarea Input Styling */
#message-input { flex-grow: 1; max-width: 700px; padding: 10px 15px; border: 1px solid #404040; border-radius: 10px; box-sizing: border-box; display: block; min-height: 42px; max-height: 25vh; background-color: #2C2C2C; color: #EAEAEA; outline: none; font-family: inherit; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; resize: none; overflow-y: auto; }
#message-input::placeholder { color: #A0A0A0; }
#message-input:focus { border-color: #007ACC; box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.3); }

/* Study Mode Button Styling */
#study-mode-button {
    padding: 10px 20px;
    background-color: #333333; /* Dark grey background for OFF state */
    color: white;
    border: 1px solid #404040;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 8px;
}

#study-mode-button.active {
    background-color: #B0B0B0; /* Light grey background for ON state */
    color: #1A1A1A; /* Dark text for ON state */
    border-color: #909090;
}

/* Send Button Styling */
#send-button { padding: 10px 20px; background-color: #007ACC; color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 1rem; font-weight: 500; transition: background-color 0.2s ease; flex-shrink: 0; align-self: flex-end; margin-bottom: 8px; }
#send-button:disabled { background-color: #004C80; cursor: not-allowed; opacity: 0.7; }
#send-button:hover:not(:disabled) { background-color: #005C99; }


/* Utility class to hide elements */
.hidden { display: none !important; }

/* --- Action Button Styling (Tag-like) --- */
.regenerate-btn,
.edit-btn,
.save-edit-btn,
.cancel-edit-btn {
    background: none;
    border: none;
    color: #888; /* Slightly darker grey for less prominence */
    padding: 1px 3px;   /* Minimal padding */
    margin: 0 2px;      /* Small horizontal margin for spacing if side-by-side */
    font-size: 0.75em;  /* Significantly smaller */
    line-height: 1;       /* Compact */
    cursor: pointer;
    border-radius: 3px;   /* Subtle rounding */
    transition: color 0.2s, opacity 0.2s;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.regenerate-btn:hover,
.edit-btn:hover,
.save-edit-btn:hover,
.cancel-edit-btn:hover {
    color: #E0E0E0; /* Brighter on hover */
    opacity: 0.85;
}

.regenerate-btn:focus,
.edit-btn:focus,
.save-edit-btn:focus,
.cancel-edit-btn:focus {
    outline: 1px solid #007ACC;
    outline-offset: 1px;
}

.regenerate-btn:disabled,
.edit-btn:disabled,
.save-edit-btn:disabled,
.cancel-edit-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    color: #666 !important;
}

/* Specific positioning for Edit and Regenerate buttons (now within .message-action-buttons) */
/* Their alignment (flex-start/flex-end) is handled by .ai-actions-align / .user-actions-align on the parent */
/* So, explicit align-self here might not be needed if the parent exclusively handles it. */
/* However, if they are the *only* child, align-self on item is fine. */
/* Let's rely on parent justify-content for now and remove individual align-self. */
/* margin-top is also handled by padding on .message-action-buttons */

/* --- End Action Button Styling (Tag-like) --- */


/* --- Inline Editing UI Styling (Textarea and Action Buttons Container) --- */
.edit-controls-container {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edit-message-textarea {
    width: 100%;
    min-height: 60px;
    background-color: #2C2C2C;
    color: #EAEAEA;
    border: 1px solid #404040;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 1em; /* Match message font size */
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 8px; /* Space below textarea, before action bar with save/cancel */
}

.edit-message-textarea:focus {
    border-color: #007ACC;
    outline: 1px solid #007ACC;
    outline-offset: -1px;
}

.edit-message-textarea:disabled { /* Added specific disabled style for textarea */
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #252525; /* Slightly different background when disabled */
}


/* Container for Save/Cancel buttons to sit side-by-side */
.edit-action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* Note: .save-edit-btn and .cancel-edit-btn inherit from base action button style now. */
/* Their specific background colors and text colors are removed for colorless icon look. */
/* Their :disabled states are covered by the shared .action-button:disabled style. */
/* --- End Inline Editing UI Styling --- */


/* --- App Layout --- */
#app-wrapper {
    display: flex;
    height: 100%;
}

#sidebar {
    width: 260px;
    background-color: #242424;
    border-right: 1px solid #383838;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

#main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #383838;
}

#sidebar-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

#new-chat-button {
    background: none;
    border: 1px solid #888;
    color: #EAEAEA;
    font-size: 1.5rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 26px;
    text-align: center;
    padding: 0;
}

#new-chat-button:hover {
    background-color: #333;
}

#chat-list {
    flex-grow: 1;
    overflow-y: auto;
}

.chat-list-item {
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid #383838;
}

.chat-list-item:hover {
    background-color: #333;
}

.chat-list-item.active {
    background-color: #007ACC;
}

#sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid #383838;
}

#user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logout-button, #login-button {
    width: 100%;
    padding: 10px;
    background-color: #007ACC;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#logout-button:hover, #login-button:hover {
    background-color: #005C99;
}

#chat-controls {
    padding: 10px 20px;
    border-bottom: 1px solid #383838;
    display: flex;
    gap: 10px;
}

#save-chat-button, #share-chat-button {
    padding: 8px 12px;
    background-color: #333;
    color: white;
    border: 1px solid #404040;
    border-radius: 5px;
    cursor: pointer;
}

#save-chat-button:hover, #share-chat-button:hover {
    background-color: #444;
}


/* --- Auth Modal --- */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: #2C2C2C;
    padding: 30px;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    position: relative;
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #EAEAEA;
    cursor: pointer;
}

#login-form, #signup-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#login-form input, #signup-form input {
    padding: 10px;
    border: 1px solid #404040;
    border-radius: 5px;
    background-color: #333;
    color: #EAEAEA;
}

#login-form button, #signup-form button {
    padding: 10px;
    background-color: #007ACC;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#login-form p, #signup-form p {
    text-align: center;
}

#login-form a, #signup-form a {
    color: #007ACC;
    cursor: pointer;
}


/* --- Responsive adjustments --- */
@media (max-width: 850px) {
    #menu-button {
        display: block;
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 1.5rem;
        background: none;
        border: none;
        color: #EAEAEA;
        z-index: 300;
        cursor: pointer;
    }
     #sidebar {
        position: absolute;
        left: -260px;
        transition: left 0.3s ease;
        z-index: 200;
        height: 100%;
     }
     #sidebar.open {
        left: 0;
     }
     .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 199;
     }
     #chat-history { max-width: 95%; }
     #message-input { max-width: none; }
     #image-preview-container > div { max-width: 95%; }
     #chat-form { padding: 15px; gap: 8px;}
     #pdf-filename-preview { max-width: calc(95% - 70px); }
}

@media (max-width: 600px) {
    h1 { font-size: 1.2rem; padding: 12px 15px; }
    #chat-container { padding: 10px; }
    #chat-history { gap: 12px; }
    .message { max-width: 100%; /* On mobile, let bubble take full width of its fit-content entry */ font-size: 0.95rem; padding: 8px 12px; }
    #chat-form { padding: 10px; gap: 5px; }
    #message-input { padding: 8px 12px; font-size: 0.95rem; min-height: 38px; }
    #send-button { padding: 8px 15px; font-size: 0.95rem; margin-bottom: 6px;}
    #attach-button { font-size: 1.2rem; padding: 6px; margin-bottom: 6px;} /* Adjusted for mobile */
    #loading, #error { max-width: 95%; font-size: 0.9rem; }
    #image-preview { max-height: 40px; max-width: 40px; }
    #pdf-filename-preview { font-size: 0.8em; max-width: calc(100% - 60px); }
    #image-preview-container > div { gap: 5px; }
    #remove-image-button { width: 20px; height: 20px; font-size: 14px; line-height: 18px; top: -5px; right: -5px;}
}

/* --- Custom Scrollbar Styling --- */
/* For WebKit-based browsers (Chrome, Safari, Edge) */
#main-content-area::-webkit-scrollbar,
#message-input::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#main-content-area::-webkit-scrollbar-track,
#message-input::-webkit-scrollbar-track {
    background: #242424; /* Slightly lighter than main background */
}

#main-content-area::-webkit-scrollbar-thumb,
#message-input::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

#main-content-area::-webkit-scrollbar-thumb:hover,
#message-input::-webkit-scrollbar-thumb:hover {
    background: #777777;
}

/* For Firefox */
#main-content-area,
#message-input {
    scrollbar-width: thin;
    scrollbar-color: #555555 #242424;
}
/* --- End Custom Scrollbar Styling --- */