Update app.py

app.py

@@ -261,12 +261,13 @@ fixed_css = """
 .gradio-container {
     max-width: none !important;
     width: 100% !important;
-    min-height: 100vh !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
     background: #0a0a0a !important;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
     color: #ffffff !important;
     padding: 1rem !important;
-    overflow-x: hidden !important;
+    overflow: hidden !important;
 }
 
 /* Header */
@@ -278,6 +279,7 @@ fixed_css = """
     margin-bottom: 1rem !important;
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.15) !important;
     text-align: center !important;
+    flex-shrink: 0 !important;
 }
 
 .header-title {
@@ -298,13 +300,16 @@ fixed_css = """
     font-weight: 400 !important;
 }
 
-/* Main layout - FIXED to be flexible */
+/* Main layout - FIXED with stable height */
 .main-layout {
     display: flex !important;
     flex-direction: row !important;
     gap: 1.5rem !important;
     width: 100% !important;
-    min-height: calc(100vh - 250px) !important;
+    height: calc(100vh - 200px) !important;
+    max-height: calc(100vh - 200px) !important;
+    min-height: calc(100vh - 200px) !important;
+    flex-shrink: 0 !important;
 }
 
 /* Sidebar - FIXED width and scrolling */
@@ -316,13 +321,14 @@ fixed_css = """
     width: 320px !important;
     min-width: 320px !important;
     max-width: 320px !important;
+    height: 100% !important;
+    max-height: 100% !important;
     flex-shrink: 0 !important;
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1) !important;
     overflow-y: auto !important;
-    max-height: calc(100vh - 250px) !important;
 }
 
-/* Chat area - FIXED to be flexible and scrollable */
+/* Chat area - FIXED with stable height */
 .chat-area {
     background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
     border: 1px solid #262626 !important;
@@ -332,18 +338,22 @@ fixed_css = """
     flex-direction: column !important;
     overflow: hidden !important;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
-    min-height: calc(100vh - 250px) !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    min-height: 100% !important;
 }
 
-/* Chat content area */
+/* Chat content area - FIXED height */
 .chat-content {
     flex: 1 !important;
     overflow-y: auto !important;
     padding: 1.5rem !important;
+    height: calc(100% - 220px) !important;
+    max-height: calc(100% - 220px) !important;
     min-height: 300px !important;
 }
 
-/* Input section - FIXED to be visible */
+/* Input section - FIXED height to prevent movement */
 .input-section {
     flex-shrink: 0 !important;
     background: #1a1a1a !important;
@@ -352,6 +362,9 @@ fixed_css = """
     display: flex !important;
     flex-direction: column !important;
     gap: 1rem !important;
+    height: 220px !important;
+    max-height: 220px !important;
+    overflow-y: auto !important;
 }
 
 /* Quick Actions */
@@ -428,6 +441,7 @@ fixed_css = """
     border-radius: 8px !important;
     padding: 1rem !important;
     margin-bottom: 1rem !important;
+    flex-shrink: 0 !important;
 }
 
 /* File upload */
@@ -439,6 +453,7 @@ fixed_css = """
     margin-bottom: 1rem !important;
     transition: all 0.3s ease !important;
     width: 100% !important;
+    flex-shrink: 0 !important;
 }
 
 .file-upload:hover {
@@ -446,7 +461,7 @@ fixed_css = """
     background: #262626 !important;
 }
 
-/* Message input - FIXED visibility */
+/* Message input - FIXED size */
 .msg-input {
     background: #262626 !important;
     border: 1px solid #404040 !important;
@@ -455,11 +470,14 @@ fixed_css = """
     padding: 1rem !important;
     font-size: 0.95rem !important;
     line-height: 1.4 !important;
-    resize: vertical !important;
+    resize: none !important;
     transition: all 0.3s ease !important;
     width: 100% !important;
     margin-bottom: 1rem !important;
-    min-height: 80px !important;
+    height: 60px !important;
+    max-height: 60px !important;
+    min-height: 60px !important;
+    flex-shrink: 0 !important;
 }
 
 .msg-input:focus {
@@ -472,12 +490,13 @@ fixed_css = """
     color: #6b7280 !important;
 }
 
-/* Buttons - FIXED visibility */
+/* Buttons - FIXED positioning */
 .btn-row {
     display: flex !important;
     gap: 1rem !important;
     align-items: center !important;
     justify-content: flex-end !important;
+    flex-shrink: 0 !important;
 }
 
 .btn-primary {
@@ -494,6 +513,7 @@ fixed_css = """
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
     min-width: 80px !important;
+    flex-shrink: 0 !important;
 }
 
 .btn-primary:hover {
@@ -515,6 +535,7 @@ fixed_css = """
     letter-spacing: 0.5px !important;
     font-size: 0.9rem !important;
     min-width: 80px !important;
+    flex-shrink: 0 !important;
 }
 
 .btn-secondary:hover {
@@ -522,12 +543,31 @@ fixed_css = """
     border-color: #dc2626 !important;
 }
 
-/* Chatbot */
+/* Chatbot - FIXED container */
 .chatbot-container {
     height: 100% !important;
-    min-height: 300px !important;
+    min-height: 100% !important;
+    max-height: 100% !important;
     border: none !important;
     background: transparent !important;
+    overflow-y: auto !important;
+}
+
+/* Footer - FIXED positioning */
+.footer {
+    background: #0a0a0a !important;
+    border-top: 1px solid #262626 !important;
+    padding: 1rem !important;
+    text-align: center !important;
+    color: #6b7280 !important;
+    border-radius: 8px !important;
+    font-size: 0.8rem !important;
+    flex-shrink: 0 !important;
+    margin-top: auto !important;
+}
+
+.footer strong {
+    color: #dc2626 !important;
 }
 
 /* Scrollbar */
@@ -567,22 +607,6 @@ code {
     font-size: 0.85rem !important;
 }
 
-/* Footer */
-.footer {
-    background: #0a0a0a !important;
-    border-top: 1px solid #262626 !important;
-    padding: 1rem !important;
-    text-align: center !important;
-    color: #6b7280 !important;
-    margin-top: 1rem !important;
-    border-radius: 8px !important;
-    font-size: 0.8rem !important;
-}
-
-.footer strong {
-    color: #dc2626 !important;
-}
-
 /* Ensure all elements are visible */
 .gradio-container * {
     visibility: visible !important;
@@ -593,13 +617,21 @@ code {
 @media (max-width: 768px) {
     .main-layout {
         flex-direction: column !important;
+        height: calc(100vh - 150px) !important;
+        max-height: calc(100vh - 150px) !important;
     }
     
     .sidebar {
         width: 100% !important;
         max-width: none !important;
         min-width: auto !important;
-        max-height: 400px !important;
+        height: 300px !important;
+        max-height: 300px !important;
+    }
+    
+    .chat-area {
+        height: calc(100% - 320px) !important;
+        max-height: calc(100% - 320px) !important;
     }
     
     .header-title {