Update static/css/style.css

static/css/style.css

@@ -1,3 +1,9 @@
+/**
+ * File: static/css/style.css
+ * Description: Stylesheet for the Gemini Chatbot Web Application.
+ * Version: Corrected for scrolling issues.
+ */
+
 /* Base Styles */
 * {
     margin: 0;
@@ -5,28 +11,27 @@
     box-sizing: border-box;
 }
 
+html {
+    height: 100%; /* Ensure html takes full height */
+}
+
 body {
     font-family: 'Inter', sans-serif;
-    background-color: #FFFFFF;
+    background-color: #FFFFFF; /* Base background */
     color: #212121;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    position: fixed;
-    width: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    height: 100%; /* Take full height from html */
+    overflow-x: hidden; /* Prevent horizontal scroll */
+    overflow-y: hidden; /* Prevent body from scrolling itself */
+    margin: 0; /* Remove default body margins */
 }
 
-/* App Container */
+/* App Container - Main flex container */
 .app-container {
     display: flex;
     height: 100%;
     width: 100%;
-    position: relative;
-    overflow: hidden;
+    position: relative; /* For absolute positioning of side nav on mobile */
+    overflow: hidden; /* Contain side nav */
 }
 
 /* Side Navigation Bar */
@@ -37,16 +42,17 @@ body {
     border-right: 1px solid #EEEEEE;
     display: flex;
     flex-direction: column;
-    position: absolute;
+    position: absolute; /* Mobile first: hidden off-screen */
     top: 0;
-    left: -280px; /* Hidden by default */
+    left: -280px;
     transition: left 0.3s ease;
     z-index: 1000;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+    flex-shrink: 0; /* Prevent shrinking */
 }
 
 .side-nav.active {
-    left: 0;
+    left: 0; /* Slide in when active */
 }
 
 .side-nav-header {
@@ -54,7 +60,8 @@ body {
     align-items: center;
     padding: 16px;
     border-bottom: 1px solid #EEEEEE;
-    position: relative;
+    position: relative; /* For close button positioning */
+    flex-shrink: 0; /* Prevent header shrinking */
 }
 
 .side-nav-header .logo {
@@ -67,6 +74,7 @@ body {
     border-radius: 50%;
     margin-right: 12px;
     color: #2196F3;
+    flex-shrink: 0;
 }
 
 .side-nav-header h1 {
@@ -74,6 +82,9 @@ body {
     font-weight: 600;
     color: #424242;
     margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .close-button {
@@ -92,6 +103,7 @@ body {
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s ease;
+    flex-shrink: 0;
 }
 
 .close-button:hover {
@@ -100,10 +112,12 @@ body {
 }
 
 .side-nav-section {
-    flex: 1;
-    overflow-y: auto;
+    flex: 1; /* Take remaining vertical space */
+    overflow-y: auto; /* Allow scrolling if history is long */
     padding: 16px 0;
     border-bottom: 1px solid #EEEEEE;
+    display: flex;
+    flex-direction: column;
 }
 
 .section-header {
@@ -111,6 +125,7 @@ body {
     justify-content: space-between;
     align-items: center;
     padding: 0 16px 12px;
+    flex-shrink: 0; /* Prevent shrinking */
 }
 
 .section-header h3 {
@@ -132,6 +147,7 @@ body {
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s ease;
+    flex-shrink: 0;
 }
 
 .action-button-small:hover {
@@ -139,8 +155,9 @@ body {
 }
 
 .history-list {
-    max-height: 100%;
-    overflow-y: auto;
+    /* max-height: 100%; Removed, parent (.side-nav-section) handles overflow */
+    overflow-y: auto; /* Allows scrolling within this specific list if needed */
+    flex-grow: 1; /* Allows the list to grow */
 }
 
 .chat-history-item {
@@ -160,16 +177,21 @@ body {
 .chat-history-item .icon {
     margin-right: 12px;
     color: #757575;
+    flex-shrink: 0;
 }
 
 .chat-history-item .details {
     flex: 1;
+    overflow: hidden; /* Prevent text overflow issues */
 }
 
 .chat-history-item .timestamp {
     font-size: 12px;
     color: #9E9E9E;
     margin-top: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .empty-state {
@@ -184,6 +206,8 @@ body {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    flex-shrink: 0; /* Prevent shrinking */
+    border-top: 1px solid #EEEEEE; /* Separator */
 }
 
 .nav-button {
@@ -203,6 +227,7 @@ body {
 .nav-button i {
     margin-right: 12px;
     font-size: 16px;
+    flex-shrink: 0;
 }
 
 .nav-button:hover {
@@ -213,21 +238,31 @@ body {
     color: #F44336;
 }
 
-/* Main Content */
+/* Main Content Area */
 .main-content {
-    flex: 1;
+    flex: 1; /* Takes remaining horizontal space */
     display: flex;
-    flex-direction: column;
-    width: 100%;
-    position: relative;
+    flex-direction: column; /* Stack top-bar and chat-container */
+    height: 100%; /* Crucial for nested flex children height */
+    overflow: hidden; /* Prevent main content from overflowing */
+    position: relative; /* Keep for nav transition */
     left: 0;
     transition: left 0.3s ease;
 }
 
+/* Apply shift when nav is open on mobile/tablet */
 .main-content.nav-open {
-    left: 280px;
+    /* This selector might need adjustment based on how 'nav-open' is applied */
+    /* Typically applied on body or app-container in JS */
 }
 
+@media (max-width: 991px) {
+    .main-content.nav-open {
+         left: 280px;
+    }
+}
+
+
 /* Top Bar */
 .top-bar {
     display: flex;
@@ -236,9 +271,10 @@ body {
     padding: 12px 16px;
     background-color: #2196F3;
     color: white;
-    height: 60px;
+    height: 60px; /* Fixed height */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     z-index: 10;
+    flex-shrink: 0; /* Prevent shrinking */
 }
 
 .top-bar-left {
@@ -253,7 +289,7 @@ body {
     width: 42px;
     height: 42px;
     border-radius: 50%;
-    display: flex;
+    display: flex; /* Changed to flex for desktop */
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -271,6 +307,7 @@ body {
     font-weight: 500;
     margin: 0;
     color: white;
+    white-space: nowrap;
 }
 
 .top-bar-right {
@@ -296,17 +333,56 @@ body {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+/* Chat Container - Takes remaining space below top-bar */
+.chat-container {
+    display: flex;
+    flex-direction: column; /* Stack chat-window and input-area */
+    flex: 1; /* Crucial: takes remaining vertical space in main-content */
+    overflow: hidden; /* Contains children */
+    background-color: #FAFAFA;
+    /* height: calc(100% - 60px); Removed, flex: 1 handles this */
+}
+
+/* Scrollable Chat Window */
+.chat-window {
+    flex: 1; /* Crucial: takes remaining space IN chat-container */
+    overflow-y: auto; /* Enables vertical scrolling for content */
+    padding: 16px;
+    scrollbar-width: thin; /* Firefox scrollbar styling */
+    scrollbar-color: #E0E0E0 #FAFAFA; /* Firefox scrollbar styling */
+    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+}
+
+/* Webkit scrollbar styling */
+.chat-window::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-window::-webkit-scrollbar-track {
+    background: #FAFAFA;
+}
+
+.chat-window::-webkit-scrollbar-thumb {
+    background-color: #E0E0E0;
+    border-radius: 10px;
+}
+
 /* Welcome Container with Suggestion Bubbles */
 .welcome-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    height: 100%; /* Tries to fill the chat-window initially */
     padding: 24px;
     text-align: center;
 }
 
+/* Hide welcome if messages exist (handled by JS) */
+.welcome-container.hidden {
+    display: none;
+}
+
 .welcome-logo {
     display: flex;
     align-items: center;
@@ -317,6 +393,7 @@ body {
     border-radius: 50%;
     margin-bottom: 24px;
     color: #2196F3;
+    flex-shrink: 0;
 }
 
 .welcome-logo i {
@@ -359,6 +436,7 @@ body {
     font-size: 20px;
     color: #2196F3;
     margin-right: 16px;
+    flex-shrink: 0;
 }
 
 .suggestion-bubble span {
@@ -372,43 +450,14 @@ body {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
 }
 
-/* Chat Container */
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-    background-color: #FAFAFA;
-    height: calc(100% - 60px); /* 60px is the height of top-bar */
-}
-
-/* Chat Window */
-.chat-window {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-    scrollbar-width: thin;
-    scrollbar-color: #E0E0E0 #FAFAFA;
-    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
-}
 
-.chat-window::-webkit-scrollbar {
-    width: 6px;
-}
-
-.chat-window::-webkit-scrollbar-track {
-    background: #FAFAFA;
-}
-
-.chat-window::-webkit-scrollbar-thumb {
-    background-color: #E0E0E0;
-    border-radius: 10px;
-}
-
-/* Input Area */
+/* Input Area Container */
 .input-area {
     border-top: 1px solid #EEEEEE;
     background-color: #FFFFFF;
+    flex-shrink: 0; /* Prevent shrinking */
+    /* Removed position:sticky from mobile - handled by flex layout */
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05); /* Keep shadow for visual separation */
 }
 
 /* Image Preview Area */
@@ -416,8 +465,8 @@ body {
     padding: 8px 16px;
     background-color: #F8F9FA;
     border-bottom: 1px solid #EEEEEE;
-    max-height: 130px;
-    overflow-y: auto;
+    max-height: 130px; /* Limit height */
+    overflow-y: auto; /* Allow scroll if many images */
 }
 
 .image-preview-area.hidden {
@@ -426,7 +475,7 @@ body {
 
 .image-preview-list {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: wrap; /* Wrap images */
     gap: 10px;
     padding: 5px 0;
 }
@@ -439,6 +488,7 @@ body {
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid #EEEEEE;
+    flex-shrink: 0;
 }
 
 .image-preview-container img {
@@ -463,6 +513,7 @@ body {
     justify-content: center;
     cursor: pointer;
     transition: background-color 0.2s ease;
+    z-index: 1; /* Above image */
 }
 
 .remove-image-button:hover {
@@ -473,34 +524,38 @@ body {
 .message-container {
     display: flex;
     margin: 12px 0;
+    width: 100%; /* Ensure it takes full width for alignment */
 }
 
 .message-container.user {
-    justify-content: flex-end;
+    justify-content: flex-end; /* Align user messages to the right */
 }
 
 .message-container.bot {
-    justify-content: flex-start;
+    justify-content: flex-start; /* Align bot messages to the left */
 }
 
 /* Message Bubbles */
 .message-bubble {
-    max-width: 80%;
+    max-width: 80%; /* Limit bubble width */
     padding: 14px 18px;
     border-radius: 18px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    word-wrap: break-word;
+    word-wrap: break-word; /* Allow long words to break */
+    overflow-wrap: break-word; /* Better word breaking */
 }
 
 .message-container.user .message-bubble {
-    background-color: #E3F2FD;
-    border-top-right-radius: 4px;
+    background-color: #E3F2FD; /* Light blue for user */
+    border-top-right-radius: 4px; /* Flat corner for speech bubble effect */
+    color: #1E4A72; /* Darker text for contrast */
 }
 
 .message-container.bot .message-bubble {
-    background-color: #FFFFFF;
-    border-top-left-radius: 4px;
-    border: 1px solid #EEEEEE;
+    background-color: #FFFFFF; /* White for bot */
+    border-top-left-radius: 4px; /* Flat corner */
+    border: 1px solid #EEEEEE; /* Subtle border */
+    color: #212121; /* Default text color */
 }
 
 /* Message Text and Images */
@@ -508,6 +563,7 @@ body {
     margin: 0;
     line-height: 1.5;
     font-size: 15px;
+    white-space: pre-wrap; /* Preserve whitespace and newlines */
 }
 
 .message-bubble .image-container {
@@ -518,85 +574,110 @@ body {
     max-width: 100%;
     border-radius: 8px;
     margin-bottom: 8px;
-    max-height: 300px;
-    object-fit: contain;
+    max-height: 300px; /* Limit image height */
+    object-fit: contain; /* Prevent distortion */
+    display: block; /* Ensure it behaves like a block */
 }
 
 /* Markdown Styling */
-.message-bubble ul, 
+.message-bubble ul,
 .message-bubble ol {
-    margin-left: 20px;
+    margin-left: 25px; /* Indent lists */
     margin-top: 8px;
     margin-bottom: 8px;
+    padding-left: 0; /* Reset default padding */
 }
 
 .message-bubble li {
     margin-bottom: 4px;
 }
 
-.message-bubble h1, 
-.message-bubble h2, 
-.message-bubble h3, 
-.message-bubble h4 {
+.message-bubble h1,
+.message-bubble h2,
+.message-bubble h3,
+.message-bubble h4,
+.message-bubble h5,
+.message-bubble h6 {
     margin-top: 16px;
     margin-bottom: 8px;
     font-weight: 600;
+    line-height: 1.3;
 }
 
-.message-bubble code {
-    background-color: #F5F5F5;
-    padding: 2px 4px;
+.message-bubble code:not(pre > code) { /* Inline code */
+    background-color: #f0f0f0; /* Slightly different background */
+    padding: 2px 5px;
     border-radius: 4px;
     font-family: 'Courier New', monospace;
     font-size: 14px;
-    color: #E91E63;
+    color: #C7254E; /* Pinkish color */
+    border: 1px solid #e0e0e0;
 }
 
-.message-bubble pre {
-    background-color: #F5F5F5;
-    padding: 12px;
+.message-bubble pre { /* Code blocks */
+    background-color: #2d2d2d; /* Dark background for code blocks */
+    color: #f8f8f2; /* Light text */
+    padding: 16px;
     border-radius: 8px;
-    overflow-x: auto;
-    margin: 8px 0;
-    border: 1px solid #EEEEEE;
+    overflow-x: auto; /* Allow horizontal scroll for long lines */
+    margin: 12px 0;
+    font-family: 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.4;
+    white-space: pre; /* Maintain whitespace */
 }
 
 .message-bubble pre code {
-    background-color: transparent;
+    background-color: transparent; /* Code inside pre doesn't need its own bg */
     padding: 0;
-    color: inherit;
-    display: block;
+    color: inherit; /* Inherit color from pre */
+    border: none;
+    font-size: inherit;
+    font-family: inherit;
+    display: block; /* Ensure it takes block space */
+    white-space: inherit; /* Inherit whitespace handling */
 }
 
 .message-bubble a {
-    color: #2196F3;
-    text-decoration: none;
+    color: #1976D2; /* Link color */
+    text-decoration: underline;
 }
 
 .message-bubble a:hover {
-    text-decoration: underline;
+    color: #1565C0;
 }
 
 .message-bubble table {
     border-collapse: collapse;
     width: 100%;
-    margin: 8px 0;
+    margin: 12px 0;
+    border: 1px solid #dddddd;
 }
 
-.message-bubble th, 
+.message-bubble th,
 .message-bubble td {
-    border: 1px solid #EEEEEE;
-    padding: 8px;
+    border: 1px solid #dddddd;
+    padding: 10px;
     text-align: left;
 }
 
 .message-bubble th {
-    background-color: #F5F5F5;
+    background-color: #f9f9f9;
+    font-weight: 600;
 }
 
-/* Error Message */
+.message-bubble blockquote {
+  border-left: 4px solid #ccc;
+  margin: 10px 0;
+  padding-left: 16px;
+  color: #666;
+}
+
+/* Error Message Styling */
 .message-container.error .message-bubble {
-    background-color: #FFEBEE;
+    background-color: #FFEBEE; /* Light red */
+    border: 1px solid #FFCDD2;
+    color: #B71C1C; /* Dark red text */
 }
 
 .retry-button {
@@ -609,6 +690,7 @@ body {
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
+    transition: background-color 0.2s ease;
 }
 
 .retry-button:hover {
@@ -616,11 +698,16 @@ body {
 }
 
 /* Loading Animation */
-.loading {
-    display: flex;
+.message-bubble.loading {
+    display: flex; /* Use flex for alignment */
     align-items: center;
-    justify-content: center;
-    min-width: 60px;
+    justify-content: center; /* Center dots */
+    min-width: 60px; /* Ensure some width */
+    padding: 14px 18px; /* Match normal bubble padding */
+    background-color: #FFFFFF; /* Match bot background */
+    border: 1px solid #EEEEEE; /* Match bot border */
+    border-top-left-radius: 4px; /* Match bot radius */
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Match bubble shadow */
 }
 
 .dot-typing {
@@ -629,8 +716,9 @@ body {
     height: 6px;
     border-radius: 50%;
     background-color: #9E9E9E;
-    color: #9E9E9E;
+    color: #9E9E9E; /* For ::before/::after color */
     animation: dotTyping 1.5s infinite linear;
+    animation-delay: 0.25s; /* Stagger start */
 }
 
 .dot-typing::before,
@@ -647,43 +735,38 @@ body {
 }
 
 .dot-typing::before {
-    left: -12px;
+    left: -12px; /* Position left dot */
     animation: dotTypingBefore 1.5s infinite linear;
+    animation-delay: 0s;
 }
 
 .dot-typing::after {
-    left: 12px;
+    left: 12px; /* Position right dot */
     animation: dotTypingAfter 1.5s infinite linear;
+    animation-delay: 0.5s; /* Stagger start */
 }
 
 @keyframes dotTyping {
-    0% { transform: scale(1); opacity: 0.6; }
-    25% { transform: scale(1.3); opacity: 1; }
-    50% { transform: scale(1); opacity: 0.6; }
-    100% { transform: scale(1); opacity: 0.6; }
+    0%, 60%, 100% { transform: scale(1); opacity: 0.6; }
+    30% { transform: scale(1.3); opacity: 1; }
 }
 
 @keyframes dotTypingBefore {
-    0% { transform: scale(1); opacity: 0.6; }
-    25% { transform: scale(1); opacity: 0.6; }
-    50% { transform: scale(1.3); opacity: 1; }
-    100% { transform: scale(1); opacity: 0.6; }
+     0%, 60%, 100% { transform: scale(1); opacity: 0.6; }
+    30% { transform: scale(1.3); opacity: 1; }
 }
 
 @keyframes dotTypingAfter {
-    0% { transform: scale(1); opacity: 0.6; }
-    25% { transform: scale(1); opacity: 0.6; }
-    50% { transform: scale(1); opacity: 0.6; }
-    75% { transform: scale(1.3); opacity: 1; }
-    100% { transform: scale(1); opacity: 0.6; }
+     0%, 60%, 100% { transform: scale(1); opacity: 0.6; }
+    30% { transform: scale(1.3); opacity: 1; }
 }
 
-/* Input Bar */
+/* Input Bar at the bottom */
 .input-bar {
     padding: 16px;
     display: flex;
-    align-items: flex-end;
-    background-color: #FFFFFF;
+    align-items: flex-end; /* Align items to bottom for multiline textarea */
+    background-color: #FFFFFF; /* Match area background */
 }
 
 .upload-button {
@@ -699,6 +782,7 @@ body {
     cursor: pointer;
     transition: all 0.2s ease;
     margin-right: 8px;
+    flex-shrink: 0;
 }
 
 .upload-button:hover {
@@ -707,31 +791,39 @@ body {
 }
 
 .input-container {
-    flex: 1;
+    flex: 1; /* Take remaining space */
     display: flex;
-    align-items: flex-end;
+    align-items: flex-end; /* Align textarea and button */
     background-color: #F5F5F5;
     border-radius: 24px;
-    padding: 10px 16px;
+    padding: 6px 8px 6px 16px; /* Adjusted padding */
     transition: box-shadow 0.3s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    min-height: 48px; /* Minimum height */
 }
 
 .input-container:focus-within {
-    box-shadow: 0 0 0 2px #42A5F5;
+    box-shadow: 0 0 0 2px #42A5F5; /* Focus outline */
 }
 
 /* Text Area */
 #userInput {
-    flex: 1;
+    flex: 1; /* Take available space */
     border: none;
     background: transparent;
-    padding: 8px 0;
-    max-height: 120px;
-    resize: none;
+    padding: 8px 0; /* Vertical padding */
+    max-height: 120px; /* Limit height before scroll */
+    resize: none; /* Disable manual resize */
     font-family: inherit;
     font-size: 15px;
+    line-height: 1.4; /* Better line spacing */
     outline: none;
+    color: #212121;
+    overflow-y: auto; /* Allow scroll within textarea if needed */
+}
+
+#userInput::placeholder {
+    color: #9E9E9E;
 }
 
 /* Send Button */
@@ -748,6 +840,7 @@ body {
     cursor: pointer;
     transition: all 0.2s ease;
     margin-left: 8px;
+    flex-shrink: 0; /* Prevent shrinking */
 }
 
 .send-button:hover {
@@ -759,6 +852,7 @@ body {
     background-color: #BDBDBD;
     cursor: not-allowed;
     transform: none;
+    opacity: 0.7;
 }
 
 /* Overlay when side nav is open on mobile */
@@ -770,7 +864,7 @@ body {
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 999;
+    z-index: 999; /* Below side nav, above content */
 }
 
 .overlay.active {
@@ -778,122 +872,127 @@ body {
 }
 
 /* Responsive adjustments */
+
+/* Desktop styles */
 @media (min-width: 992px) {
-    /* For larger screens */
     .side-nav {
-        position: relative;
+        position: relative; /* Static position in flex layout */
         left: 0;
         width: 280px;
-        flex-shrink: 0;
+        box-shadow: none; /* No shadow needed if static */
     }
-    
+
     .main-content {
-        width: calc(100% - 280px);
+        /* width: calc(100% - 280px); Not needed with flex: 1 */
+        left: 0 !important; /* Ensure it's not shifted */
     }
-    
+
     .menu-button {
-        display: none;
+        display: none; /* Hide hamburger on desktop */
+    }
+
+    .overlay {
+        display: none !important; /* Never show overlay on desktop */
     }
 }
 
+/* Tablet and Mobile styles */
 @media (max-width: 991px) {
-    /* For tablets and below */
-    .app-container {
-        flex-direction: column;
-    }
-    
-    .side-nav {
-        width: 280px;
-    }
+    /* Keep side nav absolute/hidden by default */
+    /* .main-content.nav-open style handles the shift */
 }
 
 @media (max-width: 768px) {
-    /* For small tablets and phones */
+    /* Small tablets and large phones */
     .message-bubble {
         max-width: 85%;
     }
-    
+
     .suggestion-bubbles {
         max-width: 100%;
     }
-    
+
     .welcome-logo {
         width: 56px;
         height: 56px;
     }
-    
+
     .welcome-logo i {
         font-size: 28px;
     }
-    
+
     .welcome-header h2 {
         font-size: 24px;
     }
 }
 
 @media (max-width: 480px) {
-    /* For mobile phones */
+    /* Mobile phones */
     .side-nav {
-        width: 85%;
+        width: 85%; /* Make nav wider on small screens */
     }
-    
+
     .message-bubble {
         max-width: 90%;
+        padding: 12px 16px; /* Slightly smaller padding */
     }
-    
+
     .chat-window {
-        padding: 12px;
+        padding: 12px; /* Less padding */
     }
-    
+
     .input-bar {
-        padding: 12px;
+        padding: 12px 8px; /* Less padding */
+    }
+
+    .input-container {
+        padding: 6px 8px 6px 12px; /* Adjust padding */
+        min-height: 44px;
     }
-    
+
+    #userInput {
+        font-size: 14px;
+    }
+
     .top-bar {
         padding: 10px 12px;
-        height: 56px;
-        position: sticky;
-        top: 0;
-        z-index: 100;
+        height: 56px; /* Slightly shorter */
     }
-    
+
     .top-bar h1 {
         font-size: 18px;
     }
-    
+
+    .menu-button {
+        margin-right: 12px;
+    }
+
     .welcome-header h2 {
         font-size: 22px;
     }
-    
+
     .welcome-subtitle {
         font-size: 14px;
     }
-    
+
     .suggestion-bubble {
         padding: 12px;
     }
-    
+
     .suggestion-bubble i {
         font-size: 18px;
         margin-right: 12px;
     }
-    
+
     .suggestion-bubble span {
         font-size: 14px;
     }
-    
-    /* Fix input bar to bottom on mobile */
-    .input-area {
-        position: sticky;
-        bottom: 0;
-        z-index: 100;
-        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
-    }
-    
-    /* Ensure welcome container is scrollable on small screens */
+
+    /* Ensure welcome container content is centered but allows scroll */
     .welcome-container {
-        height: auto;
-        min-height: calc(100% - 120px); /* Leave space for input area */
-        overflow-y: auto;
+        justify-content: flex-start; /* Align to top */
+        padding-top: 40px; /* Add some top padding */
+        height: auto; /* Allow it to take content height */
+        min-height: 100%; /* Ensure it tries to fill if content is short */
     }
-}
+}