Update app.py

app.py

@@ -142,152 +142,6 @@ def ask_estella(message: str, history: list) -> str:
     ).strip()
 
 
-THEME = gr.themes.Soft(
-    primary_hue="orange",
-    secondary_hue="amber",
-    neutral_hue="slate",
-    radius_size="lg",
-    spacing_size="sm",
-)
-
-
-CUSTOM_CSS = """
-html,
-body {
-    margin: 0 !important;
-    background: #fff8cc !important;
-    overflow-x: hidden !important;
-    overflow-y: auto !important;
-}
-
-.gradio-container {
-    min-height: 100dvh !important;
-    background: #fff8cc !important;
-    color: #1f2937 !important;
-    overflow: visible !important;
-}
-
-/* Prevent layout containers from forcing extra height */
-.gradio-container .main,
-.gradio-container .contain {
-    min-height: 0 !important;
-}
-
-.gradio-container .block,
-.gradio-container .panel,
-.gradio-container .form {
-    background-color: transparent !important;
-}
-
-/* Title */
-.gradio-container h1 {
-    color: #78350f !important;
-    letter-spacing: -0.02em;
-}
-
-/* Readable text */
-.gradio-container p,
-.gradio-container label {
-    color: #1f2937 !important;
-}
-
-/* Black hyperlinks */
-.gradio-container a,
-.gradio-container a:visited,
-.gradio-container a:hover,
-.gradio-container a:active {
-    color: #111827 !important;
-    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 */
-.gradio-container .message.user {
-    background: #fff0b8 !important;
-    border: 1px solid #f2c94c !important;
-    border-radius: 18px !important;
-    color: #1f2937 !important;
-}
-
-/* Estella messages */
-.gradio-container .message.bot {
-    background: #fffdf0 !important;
-    border: 1px solid #e8dca3 !important;
-    border-radius: 18px !important;
-    color: #1f2937 !important;
-}
-
-/* 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 {
-    border-color: #c2410c !important;
-    box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.18) !important;
-}
-
-/* Submit button */
-.gradio-container button.primary {
-    background: #d97706 !important;
-    border: none !important;
-    color: white !important;
-    border-radius: 14px !important;
-    font-weight: 700 !important;
-}
-
-.gradio-container button.primary:hover {
-    background: #b45309 !important;
-}
-
-/* Example buttons */
-.gradio-container button.secondary {
-    border-color: #e5b94c !important;
-    color: #78350f !important;
-}
-
-/* Remove footer */
-footer {
-    display: none !important;
-}
-
-/* Mobile layout */
-@media (max-width: 640px) {
-    .gradio-container .block.flex:has(
-        [role="log"][aria-label="chatbot conversation"]
-    ) {
-        height: 42dvh !important;
-        min-height: 180px !important;
-    }
-}
-"""
-
-
 demo = gr.ChatInterface(
     fn=ask_estella,
     title="Estella Explainer Math Reading Coach",
@@ -307,7 +161,4 @@ demo = gr.ChatInterface(
 
 
 if __name__ == "__main__":
-    demo.launch(
-        theme=THEME,
-        css=CUSTOM_CSS,
-    )
+    demo.launch()