UI update

app.py

@@ -292,16 +292,16 @@ Answer:"""
         custom_css = """
         /* 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');
-        
+
         /* Root variables for consistent theming (light mode) */
         :root {
             --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%);
+            --background-primary: #FFFFFF;
+            --background-secondary: #F9F5F1;
+            --text-primary: #2D1B00;
+            --text-secondary: #5C4033;
+            --border-color: #D9C4B0;
             --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);
@@ -310,7 +310,7 @@ Answer:"""
             --error-border: #FFD2B2;
             --error-text: #E05C00;
         }
-        
+
         /* Dark mode variables */
         @media (prefers-color-scheme: dark) {
             body {
@@ -318,9 +318,9 @@ Answer:"""
                 --primary-hover: #CC8400;
                 --background-primary: #2C2C2C;
                 --background-secondary: #1F1F1F;
-                --text-primary: #F0F0F0;
-                --text-secondary: #B0B0B0;
-                --border-color: #555555;
+                --text-primary: #F5E8E0;
+                --text-secondary: #C0B0A0;
+                --border-color: #4A4035;
                 --border-focus: #FFA500;
                 --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
                 --shadow-md: 0 4px 10px rgba(0,0,0,0.4);
@@ -330,7 +330,8 @@ Answer:"""
                 --error-text: #FF6666;
             }
         }
-        
+
+        /* General styles */
         body, html {
             background-color: var(--background-secondary) !important;
             color: var(--text-primary) !important;
@@ -381,11 +382,6 @@ 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;
@@ -432,7 +428,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;
         }
@@ -496,6 +492,7 @@ Answer:"""
         .placeholder {
             background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
+            border: 2px solid var(--border-color) !important;
         }
         .gradio-textbox {
             margin-bottom: 0.5rem !important;
@@ -511,9 +508,6 @@ Answer:"""
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--shadow-sm) !important;
         }
-        .gradio-textbox .scroll-hide {
-            background-color: var(--background-primary) !important;
-        }
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
             outline: none !important;
@@ -591,7 +585,7 @@ Answer:"""
         }
         .input-field {
             flex: none !important;
-            width: 100% !important;
+            width: 100 !important;
         }
         .button-row {
             display: flex !important;
@@ -660,10 +654,6 @@ 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;
@@ -833,6 +823,15 @@ 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:
@@ -952,7 +951,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__":