/* 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: #121212; /* Dark background */
    color: #e0e0e0; /* Light text */
    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: #1f1f1f; /* Slightly lighter dark bg */
    padding: 15px 20px;
    margin: 0; /* Remove default margin */
    font-weight: 500; /* Medium weight */
    border-bottom: 1px solid #333; /* 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: 10px; /* Space at the very end of the scroll */
}

/* Individual Message Bubble Styling */
.message {
    padding: 10px 15px; /* Internal padding */
    border-radius: 18px; /* Rounded corners */
    max-width: 80%; /* Limit bubble width */
    line-height: 1.4; /* Text line spacing */
    overflow-wrap: break-word; /* Break long words/URLs */
    display: flex; /* Use flex for internal alignment if needed */
    flex-direction: column; /* Stack image/text/suggestions */
    gap: 8px; /* Space between stacked items */
}

/* --- MODIFIED PARAGRAPH STYLING --- */
/* Paragraphs within messages - Keep general reset */
.message p {
    margin: 0; /* Remove default margins */
    overflow-wrap: break-word; /* Ensure wrapping */
}

/* 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 --- */


/* User message specific styles */
.user-message {
    background-color: #007bff; /* Blue background */
    color: white;
    align-self: flex-end; /* Align to the right */
    border-bottom-right-radius: 5px; /* Slightly flattened corner */
}

/* AI message specific styles */
.ai-message {
    background-color: #333333; /* Dark grey background */
    color: #e0e0e0;
    align-self: flex-start; /* Align to the left */
    border-bottom-left-radius: 5px; /* Slightly flattened corner */
}

/* 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: 10px; /* 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: #bbb;
    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; }
/* --- End Search Suggestion Styling --- */

/* --- Markdown Element Styling --- */
.message pre { background-color: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 4px; overflow-x: auto; border: 1px solid #444; margin-top: 8px; margin-bottom: 8px; white-space: pre; }
.message code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 0.9em; }
.message p > code { background-color: rgba(255, 255, 255, 0.1); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.85em; }
.message pre code { background-color: transparent; padding: 0; font-size: inherit; border-radius: 0; }
.message ul, .message ol { padding-left: 25px; margin-top: 8px; margin-bottom: 8px; }
.message li { margin-bottom: 4px; }
.message blockquote { border-left: 3px solid #555; padding-left: 10px; margin-left: 0; margin-top: 8px; margin-bottom: 8px; color: #bbb; font-style: italic; }
.message blockquote p { margin: 0; } /* Keep margin 0 for p inside blockquote */
.message p a { color: #64b5f6; text-decoration: underline; }
.message p a:hover { color: #90caf9; }
.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: #ccc; }
.message hr { border: 0; border-top: 1px solid #444; margin: 1em 0; }
/* --- End Markdown Element Styling --- */


/* Loading / Error Indicators */
#loading, #error { text-align: center; padding: 10px; font-style: italic; color: #aaa; width: 100%; max-width: 800px; margin: 5px auto; flex-shrink: 0; }
#error { color: #ff4d4d; font-weight: bold; background-color: rgba(255, 77, 77, 0.1); border-radius: 4px; border: 1px solid rgba(255, 77, 77, 0.3); padding: 10px 15px; }


/* Image Preview Area Styling */
#image-preview-container { background-color: #1f1f1f; 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 #444; border-radius: 6px; flex-shrink: 0; }
#pdf-filename-preview { font-size: 0.85em; color: #ccc; 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(40, 40, 40, 0.8); color: #ccc; border: 1px solid #555; 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: #1f1f1f; flex-shrink: 0; width: 100%; justify-content: center; gap: 10px; }
#image-preview-container.hidden + #chat-form { border-top: 1px solid #333; }
#image-preview-container:not(.hidden) + #chat-form { border-top: none; }


/* Attach Button Styling */
#attach-button { background: none; border: none; color: #aaa; font-size: 1.5rem; cursor: pointer; padding: 0 5px; line-height: 1; transition: color 0.2s; flex-shrink: 0; align-self: flex-end; margin-bottom: 10px; }
#attach-button:hover { color: #ddd; }
#attach-button.has-file { color: #64b5f6; }


/* Textarea Input Styling */
#message-input { flex-grow: 1; max-width: 700px; padding: 10px 15px; border: 1px solid #444; border-radius: 20px; box-sizing: border-box; display: block; min-height: 42px; max-height: 25vh; background-color: #2c2c2c; color: #e0e0e0; outline: none; font-family: inherit; font-size: 1rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: break-word; resize: none; overflow-y: auto; }
#message-input::placeholder { color: #888; }
#message-input:focus { border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3); }

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


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


/* --- Responsive adjustments --- */
@media (max-width: 850px) {
     #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: 90%; 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.3rem; padding: 0 3px; margin-bottom: 8px;}
    #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;}
}