UI update

app.py

@@ -293,7 +293,7 @@ Answer:"""
         /* Import legible fonts from Google Fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
 
-        /* Force light theme variables, overriding dark mode */
+        /* Root variables for consistent light theme */
         :root {
             --primary-color: #FF8C00;
             --primary-hover: #E07B00;
@@ -309,28 +309,6 @@ Answer:"""
             --error-bg: #FFF0E0;
             --error-border: #FFD2B2;
             --error-text: #E05C00;
-            --input-bg: #FFFFFF;
-        }
-
-        /* Ensure dark mode is overridden with light theme */
-        @media (prefers-color-scheme: dark) {
-            body {
-                --primary-color: #FF8C00;
-                --primary-hover: #E07B00;
-                --background-primary: hsl(30, 100%, 99.9%);
-                --background-secondary: hsl(30, 100%, 96%);
-                --text-primary: #4A3C32;
-                --text-secondary: #8C7B6F;
-                --border-color: hsl(30, 70%, 85%);
-                --border-focus: #FF8C00;
-                --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
-                --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
-                --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
-                --error-bg: #FFF0E0;
-                --error-border: #FFD2B2;
-                --error-text: #E05C00;
-                --input-bg: #FFFFFF;
-            }
         }
 
         body, html {
@@ -383,6 +361,11 @@ Answer:"""
             z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
         }
+        @keyframes float-icon {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-5px); }
+            100% { transform: translateY(0px); }
+        }
         .app-header-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 3rem !important;
@@ -429,7 +412,7 @@ Answer:"""
             display: flex !important;
             justify-content: center !important;
             align-items: center !important;
-            width: 100 !important;
+            width: 100% !important;
             flex-direction: column !important;
             background-color: transparent !important;
         }
@@ -491,7 +474,7 @@ Answer:"""
         .gradio-textbox input,
         .gradio-radio label,
         .placeholder {
-            background-color: var(--input-bg) !important;
+            background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
         }
         .gradio-textbox {
@@ -509,7 +492,7 @@ Answer:"""
             box-shadow: var(--shadow-sm) !important;
         }
         .gradio-textbox .scroll-hide {
-            background-color: var(--input-bg) !important;
+            background-color: var(--background-primary) !important;
         }
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
@@ -553,13 +536,13 @@ Answer:"""
         }
         .gradio-radio input[type="radio"]:checked + label {
             background-color: var(--primary-color) !important;
-            color: #FFFFFF !important;
+            color: var(--text-primary) !important;
             border-color: var(--primary-hover) !important;
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-1px) !important;
         }
         .gradio-radio input[type="radio"]:checked + label span.text-lg {
-            color: #FFFFFF !important;
+            color: var(--text-primary) !important;
         }
         .gradio-radio .gr-form {
             padding: 0 !important;
@@ -580,10 +563,6 @@ Answer:"""
             text-align: left !important;
             background-color: transparent !important;
         }
-        .gr-prose a {
-            color: var(--primary-color) !important;
-            text-decoration: underline !important;
-        }
         .input-column {
             display: flex !important;
             flex-direction: column !important;
@@ -592,7 +571,7 @@ Answer:"""
         }
         .input-field {
             flex: none !important;
-            width: 100 !important;
+            width: 100% !important;
         }
         .button-row {
             display: flex !important;
@@ -661,6 +640,10 @@ Answer:"""
             text-align: left !important;
             color: var(--text-primary) !important;
         }
+        @keyframes fadeInAndSlideUp {
+            from { opacity: 0; transform: translateY(15px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
         .response-header {
             font-size: 1.3rem !important;
             font-weight: 700 !important;
@@ -830,15 +813,6 @@ Answer:"""
                 font-size: 1rem !important;
             }
         }
-        @keyframes float-icon {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-5px); }
-            100% { transform: translateY(0px); }
-        }
-        @keyframes fadeInAndSlideUp {
-            from { opacity: 0; transform: translateY(15px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
         """
 
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
@@ -958,7 +932,7 @@ Answer:"""
                 outputs=[api_key_input, query_input, state_input, output]
             )
 
-        return demo
+            return demo
 
 # --- Main Execution Block (UNCHANGED from original logic) ---
 if __name__ == "__main__":