Update frontend/src/index.css

frontend/src/index.css

@@ -1,5 +1,4 @@
 /* frontend/src/index.css */
-
 /* Tailwind CSS directives - MUST be at the very top */
 @tailwind base;
 @tailwind components;
@@ -27,7 +26,6 @@ html, body, #root, .app-wrapper {
     /* overflow: hidden is critical for entire page to prevent unwanted scrolling */
     overflow: hidden;
 }
-
 body {
     font-family: var(--fontFamily), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -74,48 +72,40 @@ main {
     height: var(--header-height); /* Set fixed height for header if known */
     box-sizing: border-box; /* Include padding in height calculation */
 }
-
 .logo {
     display: flex;
     align-items: center;
     gap: 10px;
 }
-
 .logo img {
     height: 40px;
     width: auto;
 }
-
 .logo .brand-names {
     display: flex;
     flex-direction: column;
     line-height: 1.2;
 }
-
 .logo .main-brand {
     font-size: 1.8em;
     font-weight: bold;
     color: var(--text-color);
 }
-
 .logo .sub-brand {
     font-size: 0.9em;
     color: #777;
 }
-
 .app-header nav {
     display: flex;
     align-items: center;
     gap: 1rem;
 }
-
 .app-header nav a {
     text-decoration: none;
     color: var(--text-color);
     font-weight: 500;
     transition: color 0.3s ease;
 }
-
 .app-header nav a:hover {
     color: var(--primary-color);
 }
@@ -140,7 +130,6 @@ main {
     font-weight: 600;
     transition: color 0.3s ease;
 }
-
 .link-green:hover {
     color: var(--green-button-hover-bg) !important;
 }
@@ -157,17 +146,14 @@ main {
     text-decoration: none;
     display: inline-block;
     box-sizing: border-box;
-
     background-color: var(--green-button-bg);
     color: var(--white-color) !important;
     transition: background-color 0.3s ease, color 0.3s ease;
 }
-
 .btn-solid-green:hover {
     background-color: var(--green-button-hover-bg);
     color: var(--white-color) !important;
 }
-
 .btn-secondary {
     background-color: transparent;
     border: 1px solid var(--border-color);
@@ -183,7 +169,6 @@ main {
     color: #555;
 }
 
-
 /* --- Auth Forms --- */
 .auth-container { width: 100%; display: flex; justify-content: center; }
 .auth-form { width: 100%; max-width: 400px; padding: 2rem; }
@@ -202,7 +187,7 @@ main {
 .error-message { color: red; text-align: center; margin-bottom: 1rem; }
 .auth-form .btn-primary { width: 100%; padding: 0.75rem; }
 
-/* --- Chat Layout (from chatinterface.css, merged and adapted) --- */
+/* --- Chat Layout (main container for sidebar and chat content) --- */
 .chat-layout {
     display: flex;
     width: 100%;
@@ -220,7 +205,7 @@ main {
     display: flex;
     flex-direction: column;
     justify-content: space-between; /* Pushes content to top and bottom */
-    flex-shrink: 0;
+    flex-shrink: 0; /* Prevent sidebar from shrinking */
     height: 100%; /* Make sidebar take full height of chat-layout */
     box-sizing: border-box;
 }
@@ -253,7 +238,6 @@ main {
 .new-chat-btn:hover {
     background-color: var(--green-button-hover-bg);
 }
-
 .new-chat-btn .plus-icon {
     font-size: 1.2rem;
     font-weight: bold;
@@ -293,33 +277,33 @@ main {
     color: var(--dark-green-text); /* Keep dark green text when active */
 }
 
-/* Main chat content area (from chatinterface.css, merged) */
+/* Main chat content area */
 .chat-main {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-    justify-content: space-between; /* From chatinterface.css */
-    background-color: #f9f9f9; /* From chatinterface.css */
+    justify-content: space-between; /* This is fine, it separates messages from input */
+    background-color: #f9f9f9;
     height: 100%; /* Ensures it takes full height of parent */
     box-sizing: border-box; /* Include padding in height calculation */
-    overflow-y: auto; /* Enable scrolling for main content like history page */
+    /* REMOVED: overflow-y: auto; from chat-main to ensure only chat-messages scrolls */
 }
 
-/* Chat Messages Area (from chatinterface.css, merged) */
+/* Chat Messages Area */
 .chat-messages {
-    flex-grow: 1;
+    flex-grow: 1; /* Allow messages to take available space and push input down */
     overflow-y: auto; /* Enable scrolling for messages */
-    padding: 20px; /* From chatinterface.css */
+    padding: 20px;
     display: flex;
     flex-direction: column;
-    gap: 15px; /* Spacing between message wrappers from chatinterface.css */
+    gap: 15px; /* Spacing between message wrappers */
 }
 
-/* Empty Chat Placeholder (from chatinterface.css, merged) */
+/* Empty Chat Placeholder */
 .empty-chat-placeholder {
     text-align: center;
-    padding: 50px; /* From chatinterface.css */
-    color: #666; /* From chatinterface.css */
+    padding: 50px;
+    color: #666;
     flex-grow: 1; /* Pushes content to the bottom if few messages */
     display: flex;
     flex-direction: column;
@@ -342,8 +326,7 @@ main {
     margin-top: 20px;
 }
 
-
-/* Message Wrapper (contains avatar and bubble) (from chatinterface.css, merged) */
+/* Message Wrapper (contains avatar and bubble) */
 .message-wrapper {
     display: flex; /* Use flexbox for layout of avatar and bubble */
     align-items: flex-start; /* Align items to the top */
@@ -356,7 +339,7 @@ main {
     flex-direction: row-reverse; /* Put avatar on the right for user */
 }
 
-/* Chat Avatar Styling (from chatinterface.css, merged) */
+/* Chat Avatar Styling */
 .chat-avatar {
     font-size: 24px; /* Still useful for user emoji */
     padding: 8px;
@@ -387,32 +370,27 @@ main {
     border-radius: 50%; /* Ensure the image itself is also rounded */
 }
 
-/* Message Bubble Styling (from chatinterface.css, merged) */
+/* Message Bubble Styling */
 .message-bubble {
-    background-color: #f0f0f0;
     padding: 12px 18px;
     border-radius: 20px;
     max-width: 70%; /* Limit message width */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-    /* --- THE KEY CSS PROPERTY FOR NEWLINES --- */
     white-space: pre-wrap; /* This will make '\n' characters create new lines */
-    /* --- END KEY CSS PROPERTY --- */
-
     word-break: break-word; /* Ensure long words break within the bubble */
     overflow-wrap: break-word; /* Modern equivalent */
 }
 
 /* Specific styling for assistant bubbles */
 .message-wrapper.assistant .message-bubble {
-    background-color: #e6f7ff; /* Light blue for assistant */
+    background-color: #DFE3E8; /* Changed background color for assistant */
     border-bottom-left-radius: 5px; /* Pointy bottom-left for assistant */
     margin-right: auto; /* Push to left, next to sidebar */
 }
 
 /* Specific styling for user bubbles */
 .message-wrapper.user .message-bubble {
-    background-color: #d1e7dd; /* Light green for user */
+    background-color: #17DAFC; /* Changed background color for user */
     border-bottom-right-radius: 5px; /* Pointy bottom-right for user */
     margin-left: auto; /* Push to right */
 }
@@ -422,61 +400,47 @@ main {
     animation: blink 1s step-end infinite;
     display: inline-block; /* Essential for it to be visible next to text */
     width: 0.5em; /* Give it a small width */
-    background-color: var(--text-color); /* From original index.css */
+    background-color: var(--text-color);
 }
-
 @keyframes blink {
     from, to { opacity: 1; }
     50% { opacity: 0; }
 }
 
-
-/* Chat Input Area (from chatinterface.css, merged) */
+/* Chat Input Area */
 .chat-input-area {
-    padding: 20px; /* From chatinterface.css */
-    border-top: 1px solid #eee; /* From chatinterface.css */
-    background-color: #fff; /* From chatinterface.css */
+    padding: 20px;
+    border-top: 1px solid #eee;
+    background-color: #fff;
 }
-
 .chat-form {
     display: flex;
-    gap: 10px; /* From chatinterface.css */
+    gap: 10px;
 }
-
 .chat-form input[type="text"] {
     flex-grow: 1;
-    padding: 12px; /* From chatinterface.css */
-    border: 1px solid #ccc; /* From chatinterface.css */
-    border-radius: 25px; /* From chatinterface.css */
-    font-size: 16px; /* From chatinterface.css */
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 25px;
+    font-size: 16px;
     outline: none;
-    background-color: #fafafa; /* Using existing variable if possible, else direct value */
+    background-color: #fafafa;
 }
-
 .chat-form button {
-    padding: 12px 20px; /* From chatinterface.css */
-    background-color: #007bff; /* From chatinterface.css */
-    color: white; /* From chatinterface.css */
+    padding: 12px 20px;
+    background-color: var(--primary-color);
+    color: var(--white-color);
     border: none;
-    border-radius: 25px; /* From chatinterface.css */
+    border-radius: 6px;
     cursor: pointer;
-    font-size: 16px; /* From chatinterface.css */
+    font-size: 16px;
     transition: background-color 0.2s;
-    /* Using primary-color for consistency */
-    background-color: var(--primary-color);
-    color: var(--white-color);
-    border-radius: 6px; /* Adjusted to match other buttons */
-    padding: 0.75rem 1rem; /* Adjusted to match other buttons */
 }
-
 .chat-form button:hover:not(:disabled) {
-    background-color: #0056b3; /* Darker blue from chatinterface.css */
-    /* Using hover color from primary-color for consistency */
     background-color: #1e9d4e;
 }
-
 .chat-form button:disabled {
-    background-color: #a0a0a0; /* From chatinterface.css */
+    background-color: #a0a0a0;
     cursor: not-allowed;
 }
 
@@ -486,7 +450,6 @@ main {
     align-items: center;
     gap: 0.5rem;
 }
-
 .voice-record-btn {
     padding: 0.5rem;
     border-radius: 50%;
@@ -501,47 +464,40 @@ main {
     height: 40px;
     transition: background-color 0.2s;
 }
-
 .voice-record-btn:hover:not(:disabled) {
     background-color: #dc2626; /* Darker red on hover */
 }
-
 .voice-record-btn.recording {
     background-color: #f87171; /* Lighter red when recording */
     animation: pulse 1.5s infinite; /* Add a pulse animation when recording */
 }
-
 @keyframes pulse {
     0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); }
     70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(248, 113, 113, 0); }
     100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
 }
-
 .sound-wave {
     flex-grow: 1; /* Allow visualizer to take available space */
     height: 40px; /* Adjust height as needed */
     margin-left: 0.5rem;
 }
 
-
-/* --- History Page Styles (from history.css, merged and adapted) --- */
+/* --- History Page Styles --- */
 .history-title {
-    color: var(--text-color); /* From history.css, using variable */
+    color: var(--text-color);
     margin-bottom: 20px;
-    font-size: 24px; /* From history.css */
-    padding: 0 20px; /* Added padding to align with chat-messages */
-    margin-top: 20px; /* Added margin-top */
+    font-size: 24px;
+    padding: 0 20px;
+    margin-top: 20px;
 }
-
 .history-list {
     list-style: none;
-    padding: 0 20px; /* Added padding to align with chat-messages */
+    padding: 0 20px;
 }
-
 .history-item {
     background-color: #fff;
     border-radius: 8px;
-    padding: 15px 20px; /* From history.css */
+    padding: 15px 20px;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
@@ -549,39 +505,33 @@ main {
     cursor: pointer;
     transition: background-color 0.2s ease-in-out;
 }
-
 .history-item:hover {
-    background-color: #e9ecef; /* From history.css */
+    background-color: #e9ecef;
 }
-
 .history-icon {
     font-size: 24px;
     margin-right: 15px;
 }
-
 .history-details {
     flex-grow: 1;
 }
-
 .history-prompt {
-    font-weight: bold; /* From history.css */
-    color: #555; /* From history.css */
+    font-weight: bold;
+    color: #555;
     margin-bottom: 5px;
 }
-
 .history-date {
-    font-size: 0.85em; /* From history.css */
-    color: #888; /* From history.css */
+    font-size: 0.85em;
+    color: #888;
 }
 
-/* Conversation View Specific Styles (from history.css, merged) */
+/* Conversation View Specific Styles */
 .conversation-view {
     background-color: #fff;
     border-radius: 8px;
     padding: 20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
-
 .back-button {
     background-color: #007bff;
     color: white;
@@ -593,11 +543,9 @@ main {
     font-size: 16px;
     transition: background-color 0.2s ease-in-out;
 }
-
 .back-button:hover {
     background-color: #0056b3;
 }
-
 .conversation-title {
     color: #333;
     margin-bottom: 20px;
@@ -605,7 +553,6 @@ main {
     border-bottom: 1px solid #eee;
     padding-bottom: 10px;
 }
-
 .messages-list {
     max-height: 500px; /* Limit height and enable scrolling for messages */
     overflow-y: auto;
@@ -613,7 +560,6 @@ main {
     display: flex;
     flex-direction: column;
 }
-
 .message-item {
     margin-bottom: 15px;
     padding: 10px 15px;
@@ -621,40 +567,33 @@ main {
     max-width: 80%;
     clear: both; /* Good for floating elements, though flexbox often handles this */
 }
-
 .message-item.user {
     background-color: #dcf8c6; /* Light green for user messages */
     align-self: flex-end; /* Align to the right in a flex container */
     margin-left: auto; /* Push to the right */
 }
-
 .message-item.chatbot { /* Using .chatbot from history.css, convert to .assistant where needed in JSX */
     background-color: #e2e2e2; /* Light grey for chatbot messages */
     align-self: flex-start; /* Align to the left */
     margin-right: auto; /* Push to the left */
 }
-
 .message-sender {
     font-weight: bold;
     margin-bottom: 5px;
     font-size: 0.9em;
 }
-
 .message-item.user .message-sender {
     color: #3d8c1c; /* Darker green for user sender */
 }
-
 .message-item.chatbot .message-sender {
     color: #555;
 }
-
 .message-content {
     font-size: 1em;
     line-height: 1.4;
     word-wrap: break-word; /* Ensure long words wrap */
     white-space: pre-wrap; /* Ensure newlines are respected in history view */
 }
-
 .message-timestamp {
     font-size: 0.75em;
     color: #999;
@@ -738,7 +677,6 @@ main {
     .chat-input-area {
         padding: 1rem;
     }
-
     /* Adjustments for voice input on mobile if needed */
     .chat-form {
         flex-wrap: wrap; /* Allow input and buttons to wrap if screen is very small */
@@ -761,7 +699,6 @@ main {
         flex-grow: 1;
         max-width: calc(100% - 60px); /* Adjust based on button size */
     }
-
     /* Mobile adjustments for History Page */
     .history-title {
         padding: 0 1rem;
@@ -784,5 +721,4 @@ main {
     .history-date {
         text-align: left; /* Align date to left when stacked */
     }
-
 }