Update static/css/style.css

static/css/style.css

@@ -506,7 +506,7 @@ select.form-control {
   transform: translateY(-1px);
 }
 
-/* Chat Area */
+/* Chat Area - UPDATED */
 .chat-area {
   display: flex;
   flex-direction: column;
@@ -515,14 +515,18 @@ select.form-control {
   border: 1px solid var(--color-card-border);
   box-shadow: var(--shadow-md);
   overflow: hidden;
+  position: relative;
+  min-height: 400px;
+  max-height: calc(100vh - 200px);
 }
 
 .chat-container {
   flex: 1;
   padding: var(--space-20);
+  padding-bottom: calc(var(--space-20) + 80px); /* Add bottom padding to prevent content overlap */
   overflow-y: auto;
-  min-height: 400px;
-  max-height: calc(100vh - 300px);
+  min-height: 300px;
+  max-height: calc(100vh - 350px); /* Adjusted to account for input container */
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
@@ -628,11 +632,15 @@ select.form-control {
 .typing-dot:nth-child(1) { animation-delay: -0.32s; }
 .typing-dot:nth-child(2) { animation-delay: -0.16s; }
 
-/* Chat Input */
+/* Chat Input - UPDATED */
 .chat-input-container {
   padding: var(--space-20);
   border-top: 1px solid var(--color-border);
   background: var(--color-surface);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow for separation */
 }
 
 .input-wrapper {
@@ -729,7 +737,7 @@ select.form-control {
   cursor: pointer;
 }
 
-/* Responsive Design */
+/* Responsive Design - UPDATED */
 .mobile-only {
   display: none;
 }
@@ -738,6 +746,7 @@ select.form-control {
   .content-wrapper {
     grid-template-columns: 1fr;
     gap: 0;
+    height: calc(100vh - 150px); /* Adjusted for mobile */
   }
   
   .sidebar {
@@ -768,8 +777,13 @@ select.form-control {
   }
   
   .chat-container {
-    min-height: 300px;
-    max-height: calc(100vh - 250px);
+    min-height: 250px;
+    max-height: calc(100vh - 300px); /* Better mobile spacing */
+    padding-bottom: calc(var(--space-20) + 60px); /* Mobile-specific bottom padding */
+  }
+  
+  .chat-input-container {
+    padding: var(--space-16); /* Slightly less padding on mobile */
   }
   
   .message-bubble {
@@ -777,6 +791,13 @@ select.form-control {
   }
 }
 
+/* Additional zoom handling - NEW */
+@media (min-resolution: 1.5dppx) {
+  .chat-input-container {
+    padding-bottom: calc(var(--space-20) + 10px); /* Extra padding for high DPI displays */
+  }
+}
+
 /* Animations */
 @keyframes fadeInUp {
   from {