fix mobile chat input being cut off

- Change chatbot height from fixed 500px to responsive 60vh
- Replace fixed positioning with proper layout flow (works in iframes)
- Add touch-friendly styles (16px font prevents iOS zoom)
- Add larger touch targets for mobile buttons
- Compact TTS audio and settings on mobile
- Add extra small screen optimizations

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -736,29 +736,77 @@ CUSTOM_CSS = """
     button.primary { font-weight: 600; }
     .gradio-accordion { margin-bottom: 12px; }
 
-    /* Mobile: sticky input at bottom */
+    /* Mobile optimizations */
     @media (max-width: 768px) {
+        /* Constrain the chatbot height on mobile to leave room for input */
+        #chat-window, .chatbot {
+            height: calc(100vh - 350px) !important;
+            min-height: 200px !important;
+            max-height: calc(100vh - 350px) !important;
+        }
+
+        /* Hide the TTS audio component label on mobile to save space */
+        #tts-audio {
+            margin: 4px 0 !important;
+        }
+
+        /* Compact the audio player on mobile */
+        #tts-audio audio {
+            height: 40px !important;
+        }
+
+        /* Style the input row */
         #input-row {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: var(--background-fill-primary);
-            padding: 12px;
-            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-            z-index: 1000;
+            background: var(--background-fill-primary, #1f2937) !important;
+            padding: 8px !important;
             margin: 0 !important;
+            border-top: 1px solid var(--border-color-primary, #374151) !important;
+        }
+
+        /* Make textbox more touch-friendly */
+        #input-row textarea {
+            font-size: 16px !important; /* Prevents iOS zoom on focus */
+            min-height: 44px !important;
+            padding: 10px !important;
+        }
+
+        /* Larger touch targets for buttons */
+        #input-row button {
+            min-height: 44px !important;
+            min-width: 60px !important;
+            padding: 8px 12px !important;
         }
 
-        /* Add padding at bottom of main content to prevent overlap */
-        .main {
-            padding-bottom: 80px !important;
+        /* Compact settings accordion on mobile */
+        .gradio-accordion {
+            margin: 4px 0 !important;
+        }
+
+        .gradio-accordion summary {
+            font-size: 14px !important;
+            padding: 8px !important;
+        }
+
+        /* Reduce overall padding in the container */
+        .gradio-container {
+            padding: 8px !important;
+        }
+    }
+
+    /* Extra small screens (phones in portrait) */
+    @media (max-width: 480px) {
+        #chat-window, .chatbot {
+            height: calc(100vh - 380px) !important;
+            max-height: calc(100vh - 380px) !important;
+        }
+
+        #input-row {
+            padding: 6px !important;
         }
 
-        /* Adjust chatbot height on mobile */
-        .chatbot {
-            height: calc(100vh - 200px) !important;
-            max-height: none !important;
+        #input-row button {
+            min-width: 50px !important;
+            font-size: 12px !important;
         }
     }
 """
@@ -769,11 +817,12 @@ with gr.Blocks(title="LLM Inference with ZeroGPU") as demo:
 
     # Main Chat Interface
     chat = gr.Chatbot(
-        height=500,
+        height="60vh",
         label="💬 Conversation",
         buttons=["copy"],
         avatar_images=(None, "pfp.png"),
-        layout="bubble"
+        layout="bubble",
+        elem_id="chat-window"
     )
 
     # TTS Audio Output (visible by default since TTS is on)