Update app.py

app.py

@@ -154,31 +154,29 @@ THEME = gr.themes.Soft(
 CUSTOM_CSS = """
 html,
 body {
-    height: 100%;
-    margin: 0;
-    overflow: hidden !important;
+    margin: 0 !important;
     background: #fff8cc !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
 }
 
 .gradio-container {
-    height: 100dvh !important;
     min-height: 100dvh !important;
-    overflow: hidden !important;
     background: #fff8cc !important;
     color: #1f2937 !important;
+    overflow: visible !important;
 }
 
-/* Keep the page from expanding */
-.gradio-container .main {
+/* Prevent layout containers from forcing extra height */
+.gradio-container .main,
+.gradio-container .contain {
     min-height: 0 !important;
 }
 
-/* Solid light-yellow interface */
-.gradio-container,
 .gradio-container .block,
 .gradio-container .panel,
 .gradio-container .form {
-    background-color: #fff8cc !important;
+    background-color: transparent !important;
 }
 
 /* Title */
@@ -187,20 +185,41 @@ body {
     letter-spacing: -0.02em;
 }
 
-/* Readable body text */
+/* Readable text */
 .gradio-container p,
-.gradio-container label,
-.gradio-container span {
-    color: #1f2937;
+.gradio-container label {
+    color: #1f2937 !important;
 }
 
-/* Keep every hyperlink black */
+/* Black hyperlinks */
 .gradio-container a,
 .gradio-container a:visited,
 .gradio-container a:hover,
 .gradio-container a:active {
     color: #111827 !important;
-    text-decoration: underline;
+    text-decoration: underline !important;
+}
+
+/*
+  Correct Gradio chat container.
+  This prevents the chat from expanding the entire page.
+*/
+.gradio-container .block.flex:has(
+    [role="log"][aria-label="chatbot conversation"]
+) {
+    flex-grow: 0 !important;
+    height: min(400px, max(220px, calc(100dvh - 350px))) !important;
+    min-height: 220px !important;
+    overflow: hidden !important;
+}
+
+/* Make only the conversation area scroll */
+.gradio-container [role="log"][aria-label="chatbot conversation"] {
+    height: 100% !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
 }
 
 /* User messages */
@@ -219,25 +238,16 @@ body {
     color: #1f2937 !important;
 }
 
-/* Keep the chat area scrollable instead of expanding the page */
-.gradio-container .chatbot,
-.gradio-container [data-testid="chatbot"] {
-    min-height: 220px !important;
-    max-height: calc(100dvh - 360px) !important;
-    overflow-y: auto !important;
-}
-
-/* Bright, clearly visible message input */
-.gradio-container textarea,
-.gradio-container [data-testid="textbox"] {
+/* Clearly highlighted input box */
+.gradio-container textarea {
+    min-height: 54px !important;
     border: 2px solid #e59b16 !important;
     border-radius: 16px !important;
     background: #fffdf0 !important;
     color: #1f2937 !important;
 }
 
-.gradio-container textarea:focus,
-.gradio-container [data-testid="textbox"]:focus-within {
+.gradio-container textarea:focus {
     border-color: #c2410c !important;
     box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.18) !important;
 }
@@ -261,16 +271,18 @@ body {
     color: #78350f !important;
 }
 
-/* Remove default footer */
+/* Remove footer */
 footer {
     display: none !important;
 }
 
-/* Smaller screens */
+/* Mobile layout */
 @media (max-width: 640px) {
-    .gradio-container .chatbot,
-    .gradio-container [data-testid="chatbot"] {
-        max-height: 42dvh !important;
+    .gradio-container .block.flex:has(
+        [role="log"][aria-label="chatbot conversation"]
+    ) {
+        height: 42dvh !important;
+        min-height: 180px !important;
     }
 }
 """