UI update

app.py

@@ -276,7 +276,6 @@ Answer:"""
             print(f"DEBUG: Error loading states for selection: {e}")
             radio_choices = ["Error: Critical failure loading states"]
             initial_value_radio = None
-
         example_queries_base = [
             ["What are the rules for security deposit returns?", "California"],
             ["Can a landlord enter my apartment without notice?", "New York"],
@@ -297,35 +296,79 @@ 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');
 
-        /* Root variables for consistent light theme */
+        /* Enforce light theme globally */
         :root {
-            --primary-color: #FF8C00;
-            --primary-hover: #E07B00;
-            --background-primary: hsl(30, 100%, 99.9%);
-            --background-secondary: hsl(30, 100%, 96%);
-            --text-primary: #3A2F28; /* Darkened slightly for better contrast */
-            --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;
-        }
-
-        body, html {
-            background-color: var(--background-primary) !important;
+            color-scheme: light !important;
+            --primary-color: #FF8C00 !important;
+            --primary-hover: #E07B00 !important;
+            --background-primary: hsl(30, 100%, 99.9%) !important;
+            --background-secondary: hsl(30, 100%, 96%) !important;
+            --text-primary: #4A3C32 !important;
+            --text-secondary: #8C7B6F !important;
+            --border-color: hsl(30, 70%, 85%) !important;
+            --border-focus: #FF8C00 !important;
+            --shadow-sm: 0 1px 3px rgba(0,0,0,0.08) !important;
+            --shadow-md: 0 4px 10px rgba(0,0,0,0.1) !important;
+            --shadow-lg: 0 10px 20px rgba(0,0,0,0.15) !important;
+            --error-bg: #FFF0E0 !important;
+            --error-border: #FFD2B2 !important;
+            --error-text: #E05C00 !important;
+        }
+
+        /* Override browser dark mode completely */
+        @media (prefers-color-scheme: dark) {
+            :root, html, body, .gradio-container, .main-dashboard-container > *,
+            .dashboard-card-section, .section-title-gradient-bar,
+            .dashboard-card-content-area, .gradio-textbox textarea,
+            .gradio-textbox input, .gradio-radio label, .placeholder,
+            .output-content-wrapper, .gr-samples-table, .gr-samples-table th,
+            .gr-samples-table td, .app-footer-wrapper, .gradio-button,
+            .gr-button-primary, .gr-button-secondary, .gr-block, .gr-box,
+            .gr-prose, .gr-form, .gr-panel, .gr-columns, .gr-column,
+            .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio {
+                color-scheme: light !important;
+                background-color: var(--background-primary) !important;
+                color: var(--text-primary) !important;
+                border-color: var(--border-color) !important;
+            }
+            .gr-button-primary {
+                background-color: var(--primary-color) !important;
+                color: white !important;
+            }
+            .gr-button-secondary {
+                background-color: transparent !important;
+                border-color: var(--border-color) !important;
+                color: var(--text-primary) !important;
+            }
+            .error-message, .error-message a {
+                background-color: var(--error-bg) !important;
+                color: var(--error-text) !important;
+                border-color: var(--error-border) !important;
+            }
+            .response-header, .response-icon, .dashboard-card-section strong,
+            .dashboard-card-section b, .app-footer strong, .app-footer b,
+            .app-footer a, .custom-link {
+                color: var(--primary-color) !important;
+            }
+        }
+
+        /* Base styles for all elements */
+        *, *:before, *:after {
+            box-sizing: border-box !important;
+            color-scheme: light !important;
+        }
+        html, body {
+            background-color: var(--background-secondary) !important;
             color: var(--text-primary) !important;
-            transition: none !important;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+            margin: 0 !important;
+            padding: 0 !important;
         }
         .gradio-container {
             max-width: 900px !important;
             margin: 0 auto !important;
             padding: 1.5rem !important;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-            background-color: var(--background-primary) !important;
+            background-color: var(--background-secondary) !important;
             box-shadow: none !important;
             color: var(--text-primary) !important;
         }
@@ -333,21 +376,37 @@ Answer:"""
             background-color: var(--background-primary) !important;
         }
         .app-header-wrapper {
-            background-color: var(--background-primary) !important;
+            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important;
             margin-bottom: 1.5rem !important;
             box-shadow: var(--shadow-md) !important;
+            position: relative !important;
+            overflow: hidden !important;
             text-align: center !important;
             color: var(--text-primary) !important;
         }
+        .app-header-wrapper::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at top left, rgba(255,140,0,0.3) 0%, transparent 60%), radial-gradient(circle at bottom right, rgba(255,140,0,0.3) 0%, transparent 60%) !important;
+            z-index: 0 !important;
+            opacity: 0.8 !important;
+            pointer-events: none !important;
+        }
         .app-header-logo {
             font-size: 8.5rem !important;
             margin-bottom: 0.75rem !important;
             display: block !important;
             color: var(--primary-color) !important;
-            animation: float-icon 3s ease-in-out infinite alternate;
+            position: relative !important;
+            z-index: 1 !important;
+            animation: float-icon 3s ease-in-out infinite alternate !important;
         }
         @keyframes float-icon {
             0% { transform: translateY(0px); }
@@ -362,22 +421,25 @@ Answer:"""
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
             letter-spacing: -0.03em !important;
-            display: inline-block;
-            max-width: 100%;
+            position: relative !important;
+            z-index: 1 !important;
+            display: inline-block !important;
+            max-width: 100% !important;
         }
         .app-header-tagline {
             font-size: 1.25rem !important;
             color: var(--text-secondary) !important;
             font-weight: 400 !important;
             margin: 0 !important;
-            max-width: 700px;
-            display: inline-block;
+            max-width: 700px !important;
+            display: inline-block !important;
+            position: relative !important;
+            z-index: 1 !important;
         }
         .main-dashboard-container {
             display: flex !important;
             flex-direction: column !important;
             gap: 1.25rem !important;
-            background-color: var(--background-primary) !important;
         }
         .dashboard-card-section {
             background-color: var(--background-primary) !important;
@@ -385,8 +447,8 @@ Answer:"""
             border-radius: 12px !important;
             padding: 0 !important;
             box-shadow: var(--shadow-sm) !important;
-            transition: all 0.3s ease-out !important;
-            cursor: default;
+            transition: box-shadow 0.3s ease-out, transform 0.3s ease-out !important;
+            cursor: default !important;
             color: var(--text-primary) !important;
         }
         .dashboard-card-section:hover {
@@ -399,17 +461,17 @@ Answer:"""
             align-items: center !important;
             width: 100% !important;
             flex-direction: column !important;
-            background-color: var(--background-primary) !important;
+            background-color: transparent !important;
         }
         .section-title-gradient-bar {
-            background-color: var(--background-primary) !important;
+            background-color: var(--background-secondary) !important;
             padding: 1.25rem 1.75rem !important;
             border-top-left-radius: 10px !important;
             border-top-right-radius: 10px !important;
             margin-bottom: 0 !important;
             text-align: center !important;
-            box-sizing: border-box;
-            width: 100%;
+            box-sizing: border-box !important;
+            width: 100% !important;
             color: var(--text-primary) !important;
         }
         .section-title {
@@ -428,8 +490,8 @@ Answer:"""
         .dashboard-card-content-area {
             padding: 0 1.75rem 1.75rem 1.75rem !important;
             background-color: var(--background-primary) !important;
-            box-sizing: border-box;
-            width: 100%;
+            box-sizing: border-box !important;
+            width: 100% !important;
             color: var(--text-primary) !important;
         }
         .dashboard-card-section p {
@@ -447,13 +509,13 @@ Answer:"""
             color: var(--primary-color) !important;
         }
         .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
-        .gr-columns, .gr-column,
-        .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
+        .gr-columns, .gr-column, .gradio-html, .gradio-markdown,
+        .gradio-textbox, .gradio-radio, .gradio-button {
             background-color: transparent !important;
             color: var(--text-primary) !important;
             white-space: normal !important;
-            overflow-wrap: break-word;
-            word-break: break-word;
+            overflow-wrap: break-word !important;
+            word-break: break-word !important;
         }
         .gradio-textbox textarea,
         .gradio-textbox input,
@@ -526,9 +588,7 @@ Answer:"""
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-1px) !important;
         }
-        .gradio-radio input
-
-    [type="radio"]:checked + label span.text-lg {
+        .gradio-radio input[type="radio"]:checked + label span.text-lg {
             color: white !important;
         }
         .gradio-radio .gr-form {
@@ -594,7 +654,7 @@ Answer:"""
         .gr-button-secondary {
             background-color: transparent !important;
             color: var(--text-primary) !important;
-            border-color: var(--border-color) !important;
+            border: 2px solid var(--border-color) !important;
         }
         .gr-button-secondary:hover {
             background-color: var(--background-secondary) !important;
@@ -612,18 +672,18 @@ Answer:"""
             padding: 1.5rem !important;
             min-height: 150px !important;
             color: var(--text-primary) !important;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
+            display: flex !important;
+            flex-direction: column !important;
+            justify-content: center !important;
+            align-items: center !important;
         }
         .animated-output-content {
-            opacity: 0;
-            animation: fadeInAndSlideUp 0.7s ease-out forwards;
-            width: 100%;
-            white-space: pre-wrap;
-            overflow-wrap: break-word;
-            word-break: break-word;
+            opacity: 0 !important;
+            animation: fadeInAndSlideUp 0.7s ease-out forwards !important;
+            width: 100% !important;
+            white-space: pre-wrap !important;
+            overflow-wrap: break-word !important;
+            word-break: break-word !important;
             text-align: left !important;
             color: var(--text-primary) !important;
         }
@@ -640,8 +700,8 @@ Answer:"""
             align-items: center !important;
             gap: 0.6rem !important;
             text-align: left !important;
-            width: 100%;
-            justify-content: flex-start;
+            width: 100% !important;
+            justify-content: flex-start !important;
         }
         .response-icon {
             font-size: 1.5rem !important;
@@ -665,8 +725,8 @@ Answer:"""
             font-weight: 500 !important;
             line-height: 1.6 !important;
             text-align: left !important;
-            width: 100%;
-            box-sizing: border-box;
+            width: 100% !important;
+            box-sizing: border-box !important;
         }
         .error-message a {
             color: var(--error-text) !important;
@@ -681,7 +741,7 @@ Answer:"""
             font-size: 0.85rem !important;
             color: var(--error-text) !important;
             margin-top: 0.5rem !important;
-            opacity: 0.8;
+            opacity: 0.8 !important;
         }
         .placeholder {
             background-color: var(--background-primary) !important;
@@ -692,8 +752,8 @@ Answer:"""
             color: var(--text-secondary) !important;
             font-style: italic !important;
             font-size: 1.1rem !important;
-            width: 100%;
-            box-sizing: border-box;
+            width: 100% !important;
+            box-sizing: border-box !important;
         }
         .examples-section .gr-samples-table {
             border: 2px solid var(--border-color) !important;
@@ -723,7 +783,7 @@ Answer:"""
         }
         .examples-section .gr-samples-table tr:hover td {
             background-color: var(--background-secondary) !important;
-            transform: translateX(5px);
+            transform: translateX(5px) !important;
         }
         .gr-examples .gr-label,
         .gr-examples .label-wrap,
@@ -731,7 +791,7 @@ Answer:"""
             display: none !important;
         }
         .app-footer-wrapper {
-            background-color: var(--background-primary) !important;
+            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 12px !important;
             padding: 1.75rem !important;
@@ -754,12 +814,12 @@ Answer:"""
             font-weight: 700 !important;
             color: var(--primary-color) !important;
         }
-        .app-footer a {
+        .app-footer a, .custom-link {
             color: var(--primary-color) !important;
             text-decoration: underline !important;
-            font-weight: 600 !important;
+            font-weight: bold !important;
         }
-        .app-footer a:hover {
+        .app-footer a:hover, .custom-link:hover {
             text-decoration: none !important;
         }
         @media (max-width: 768px) {
@@ -800,7 +860,7 @@ Answer:"""
         }
         """
 
-        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
+        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant", theme_mode="light") as demo:
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -889,17 +949,11 @@ Answer:"""
             # Footer Section
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
-                    f"""
-                    <style>
-                        .custom-link {{
-                            font-weight: bold !important;
-                            color: var(--primary-color) !important;
-                            text-decoration: underline;
-                        }}
-                    </style>
+                    """
                     <p><strong>Disclaimer:</strong> This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult with a licensed attorney in your jurisdiction.</p>
                     <p>Developed by <strong>Nischal Subedi</strong>. Connect on <a href="https://www.linkedin.com/in/nischal1/" target="_blank" class="custom-link">LinkedIn</a> or explore insights at <a href="https://datascientistinsights.substack.com/" target="_blank" class="custom-link">Substack</a>.</p>
-                    """
+                    """,
+                    elem_classes="app-footer"
                 )
 
             submit_button.click(