Update frontend/src/index.css

frontend/src/index.css

@@ -23,14 +23,13 @@ html, body, #root, .app-wrapper {
     height: 100%;
     margin: 0;
     padding: 0;
-    /* overflow: hidden is critical for entire page to prevent unwanted scrolling */
-    overflow: hidden;
+    overflow: hidden; /* Critical for entire page to prevent unwanted scrolling */
 }
 body {
     font-family: var(--fontFamily), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    background-color: var(--white-color); /* Changed to use white-color variable */
+    background-color: var(--white-color);
     color: var(--text-color);
 }
 
@@ -51,11 +50,13 @@ body {
     height: 100%; /* Ensure app-wrapper takes full height */
 }
 
-main {
-    flex-grow: 1;
+/* New: Container for Sidebar and Chat Content */
+.content-area {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    flex-grow: 1; /* Allows content-area to take up remaining vertical space */
+    /* Use calc to account for header height, as body has overflow:hidden */
+    height: calc(100% - var(--header-height));
+    overflow: hidden; /* Important to contain sidebar and chat and prevent this div from scrolling */
 }
 
 /* --- Header --- */
@@ -69,8 +70,9 @@ main {
     position: sticky;
     top: 0;
     z-index: 1000;
-    height: var(--header-height); /* Set fixed height for header if known */
-    box-sizing: border-box; /* Include padding in height calculation */
+    height: var(--header-height);
+    box-sizing: border-box;
+    flex-shrink: 0; /* Prevent header from shrinking */
 }
 .logo {
     display: flex;
@@ -187,14 +189,7 @@ main {
 .error-message { color: red; text-align: center; margin-bottom: 1rem; }
 .auth-form .btn-primary { width: 100%; padding: 0.75rem; }
 
-/* --- Chat Layout (main container for sidebar and chat content) --- */
-.chat-layout {
-    display: flex;
-    width: 100%;
-    /* Use calc to account for header height, as body has overflow:hidden */
-    height: calc(100% - var(--header-height));
-    overflow: hidden; /* Important for containing sidebar and main chat content */
-}
+/* REMOVED: .chat-layout as it's no longer the main flex container for sidebar and chat */
 
 /* Sidebar Styling */
 .sidebar {
@@ -205,10 +200,17 @@ main {
     display: flex;
     flex-direction: column;
     justify-content: space-between; /* Pushes content to top and bottom */
-    flex-shrink: 0; /* Prevent sidebar from shrinking */
-    height: 100%; /* Make sidebar take full height of chat-layout */
+    flex-shrink: 0; /* Prevent sidebar from shrinking, CRITICAL for fixed sidebar */
+    height: 100%; /* Make sidebar take full height of content-area */
     box-sizing: border-box;
+    overflow-y: auto; /* Allow sidebar content to scroll if it exceeds its height */
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
 }
+.sidebar::-webkit-scrollbar { /* Hide scrollbar for webkit browsers */
+    display: none;
+}
+
 
 /* sidebar-top now contains only the new chat button */
 .sidebar-top {
@@ -277,16 +279,25 @@ main {
     color: var(--dark-green-text); /* Keep dark green text when active */
 }
 
-/* Main chat content area */
-.chat-main {
-    flex-grow: 1;
+/* New: Styling for the container that holds ChatInterface */
+.chat-content-container {
+    flex-grow: 1; /* Allows chat content to take all remaining width */
     display: flex;
     flex-direction: column;
-    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 */
-    /* REMOVED: overflow-y: auto; from chat-main to ensure only chat-messages scrolls */
+    height: 100%; /* Ensures it takes full height of content-area */
+    box-sizing: border-box;
+}
+
+
+/* Main chat content area (now within chat-content-container) */
+.chat-main { /* This class is still relevant for ChatInterface's internal layout */
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%; /* Ensure it takes full height of its parent (.chat-content-container) */
+    box-sizing: border-box;
 }
 
 /* Chat Messages Area */
@@ -383,14 +394,16 @@ main {
 
 /* Specific styling for assistant bubbles */
 .message-wrapper.assistant .message-bubble {
-    background-color: #DFE3E8; /* Changed background color for assistant */
+    background-color: #DFE3E8; /* Assistant background color */
     border-bottom-left-radius: 5px; /* Pointy bottom-left for assistant */
     margin-right: auto; /* Push to left, next to sidebar */
+    color: var(--text-color); /* Default text color for assistant */
 }
 
 /* Specific styling for user bubbles */
 .message-wrapper.user .message-bubble {
-    background-color: #17DAFC; /* Changed background color for user */
+    background-color: #4CAF50; /* User background color: Green */
+    color: #ffffff; /* User text color: White */
     border-bottom-right-radius: 5px; /* Pointy bottom-right for user */
     margin-left: auto; /* Push to right */
 }
@@ -616,10 +629,9 @@ main {
         width: 100%;
         gap: 10px;
     }
-    .chat-layout {
+    .content-area { /* Adjust content area for mobile */
         flex-direction: column;
-        /* On mobile, sidebar goes horizontal, its height becomes auto */
-        height: calc(100% - var(--header-height)); /* No fixed sidebar height subtraction here */
+        height: calc(100% - var(--header-height));
     }
     .sidebar {
         width: 100%;