UI update

app.py

@@ -295,7 +295,6 @@ Answer:"""
         else: # If states failed to load, provide a generic example (e.g., California)
             example_queries.append(["What basic rights do tenants have?", "California"])
 
-
         custom_css = f"""
         /* 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');
@@ -319,7 +318,6 @@ Answer:"""
         }}
 
         /* CRITICAL: FORCE GRADIO'S INTERNAL VARIABLES TO OUR CUSTOM LIGHT THEME VALUES */
-        /* This targets :root, html.dark, body.dark, and generic .dark classes to ensure precedence */
         :root, html.dark, body.dark, .dark {{
             /* General backgrounds */
             --background-fill-primary: var(--custom-background-primary) !important;
@@ -381,268 +379,79 @@ Answer:"""
             --color-error-background: var(--custom-error-bg) !important;
             --color-error-border: var(--custom-error-border) !important;
 
-            /* Additional common Gradio variables for comprehensive override */
+            /* Specific overrides for common Gradio components */
             --block-border-color: var(--custom-border-color) !important;
             --input-border-color: var(--custom-border-color) !important;
             --input-label-color: var(--custom-text-primary) !important;
             --link-text-color: var(--custom-primary-color) !important;
             --link-text-color-hover: var(--custom-primary-hover) !important;
+
+            /* Scrollbar */
             --scrollbar-thumb-color: var(--custom-border-color) !important;
             --scrollbar-track-color: var(--custom-background-secondary) !important;
         }}
 
-        /* Universal reset for certain properties to prevent unwanted inheritance/dark mode effects */
-        body, html, .gradio-app, .gradio-container, .gr-block, .gr-box, .gr-panel {{
-            transition: none !important; /* Extremely important to prevent theme transition flickering */
-            filter: none !important; /* Reset any potential CSS filters like invert() */
-            mix-blend-mode: normal !important; /* Reset blend modes */
-        }}
-
         /* Base styles for html and body */
         body, html {{
             background-color: var(--custom-background-secondary) !important;
             color: var(--custom-text-primary) !important;
+            transition: none !important;
         }}
 
-        /* Target the main Gradio application root */
+        /* Target the main Gradio application container */
         .gradio-app {{
             background-color: var(--custom-background-secondary) !important;
             color: var(--custom-text-primary) !important;
         }}
 
         /* Ensure all core Gradio blocks and components use our defined colors */
-        .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(--custom-background-secondary) !important;
-            box-shadow: none !important;
-            color: var(--custom-text-primary) !important;
-        }}
-        .main-dashboard-container > * {{
+        .gr-block, .gr-box, .gr-panel, .gr-form, .gr-columns, .gr-column,
+        .gradio-html, .gradio-markdown, .gradio-prose {{
             background-color: var(--custom-background-primary) !important;
-            border-color: var(--custom-border-color) !important;
             color: var(--custom-text-primary) !important;
+            border-color: var(--custom-border-color) !important;
+            --text-color-body: var(--custom-text-primary) !important;
+            --text-color-subdued: var(--custom-text-secondary) !important;
         }}
 
-        /* Centering for main header */
-        .app-header-wrapper {{
-            background: linear-gradient(145deg, var(--custom-background-primary) 0%, var(--custom-background-secondary) 100%) !important;
-            border: 2px solid var(--custom-border-color) !important;
-            border-radius: 16px !important;
-            padding: 2.5rem 1.5rem !important;
-            margin-bottom: 1.5rem !important;
-            box-shadow: var(--custom-shadow-md) !important;
-            position: relative;
-            overflow: hidden;
-            text-align: center !important; /* Ensure parent centers children */
-            color: var(--custom-text-primary) !important;
-        }}
-        /* Centering for the specific title/tagline elements within the header */
-        .app-header-logo {{
-            text-align: center !important; /* Force center for icon itself */
-            display: block !important;
-            margin: 0 auto !important; /* Center a block element */
-            color: var(--custom-primary-color) !important;
-            font-size: 8.5rem !important;
-            margin-bottom: 0.75rem !important;
-        }}
-        .app-header-title {{
+        /* Centering styles for title and headers */
+        .app-header-title, .section-title {{
             text-align: center !important;
-            margin: 0 auto !important; /* Center a block element */
-            display: block !important;
-            width: fit-content !important; /* Shrink to content width */
-            font-family: 'Poppins', sans-serif !important;
-            font-size: 3rem !important;
-            font-weight: 800 !important;
-            color: var(--custom-text-primary) !important;
-            line-height: 1.1 !important;
-            letter-spacing: -0.03em !important;
-        }}
-        .app-header-tagline {{
-            text-align: center !important;
-            margin: 0 auto !important; /* Center a block element */
-            display: block !important;
-            width: fit-content !important; /* Shrink to content width */
-            font-size: 1.25rem !important;
-            color: var(--custom-text-secondary) !important;
-            font-weight: 400 !important;
-            max-width: 700px;
-        }}
-
-
-        .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%);
-            z-index: 0;
-            opacity: 0.8;
-            pointer-events: none;
-        }}
-        @keyframes float-icon {{
-            0% {{ transform: translateY(0px); }}
-            50% {{ transform: translateY(-5px); }}
-            100% {{ transform: translateY(0px); }}
-        }}
-
-        /* General layout */
-        .main-dashboard-container {{
-            display: flex !important;
-            flex-direction: column !important;
-            gap: 1.25rem !important;
-        }}
-        .dashboard-card-section {{
-            background-color: var(--custom-background-primary) !important;
-            border: 2px solid var(--custom-border-color) !important;
-            border-radius: 12px !important;
-            padding: 0 !important;
-            box-shadow: var(--custom-shadow-sm) !important;
-            transition: all 0.3s ease-out !important;
-            cursor: default;
-            color: var(--custom-text-primary) !important;
-        }}
-        .dashboard-card-section:hover {{
-            box-shadow: var(--custom-shadow-md) !important;
-            transform: translateY(-3px) !important;
-        }}
-        .full-width-center {{
-            display: flex !important;
-            justify-content: center !important;
-            align-items: center !important;
             width: 100% !important;
-            flex-direction: column !important;
-            background-color: transparent !important;
-            text-align: center !important; /* Ensure content is centered */
-        }}
-        .section-title-gradient-bar {{
-            background-color: var(--custom-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; /* Ensure parent centers its h3 child */
-            box-sizing: border-box;
-            width: 100%;
-            color: var(--custom-text-primary) !important;
-        }}
-        /* Centering for section titles and their underline */
-        .section-title {{
-            font-family: 'Poppins', sans-serif !important;
-            font-size: 1.7rem !important;
-            font-weight: 700 !important;
-            color: var(--custom-text-primary) !important;
-            margin: 0 auto !important; /* Center a block element */
-            padding-bottom: 0 !important;
-            border-bottom: 2px solid var(--custom-border-color) !important;
-            line-height: 1.1 !important;
-            display: block !important; /* Force block behavior for margin auto */
-            width: fit-content !important; /* Shrink to content width for short underline */
-            text-align: center !important; /* Center text within its own width */
-            letter-spacing: -0.01em !important;
-        }}
-        .dashboard-card-content-area {{
-            padding: 0 1.75rem 1.75rem 1.75rem !important;
-            background-color: var(--custom-background-primary) !important;
-            box-sizing: border-box;
-            width: 100%;
-            color: var(--custom-text-primary) !important;
-        }}
-        .dashboard-card-section p {{
-            line-height: 1.7 !important;
-            color: var(--custom-text-primary) !important;
-            font-size: 1rem !important;
-            text-align: left !important; /* Default for most paragraphs */
-            background-color: transparent !important;
-            margin: 0 !important;
-            padding: 0 !important;
-            white-space: normal !important;
-        }}
-        .dashboard-card-section strong, .dashboard-card-section b {{
-            font-weight: 700 !important;
-            color: var(--custom-primary-color) !important;
-        }}
-        .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
-        .gr-columns, .gr-column {{
-            background-color: var(--custom-background-primary) !important;
-            color: var(--custom-text-primary) !important;
-            border-color: var(--custom-border-color) !important;
-            white-space: normal !important;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }}
-        .gradio-html, .gradio-markdown {{
-            background-color: transparent !important;
-            color: var(--custom-text-primary) !important;
-            white-space: normal !important;
-            overflow-wrap: break-word;
-            word-break: break-word;
+            margin: 0 auto !important;
         }}
-        .gradio-textbox, .gradio-radio, .gradio-button {{ /* Remove background from parent for these */
-            background-color: transparent !important;
+
+        .app-header-wrapper, .dashboard-card-section {{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
         }}
 
+        /* Specific overrides for input fields */
         .gradio-textbox textarea,
-        .gradio-textbox input,
-        .gradio-radio label,
-        .placeholder {{
+        .gradio-textbox input {{
             background-color: var(--custom-background-primary) !important;
             color: var(--custom-text-primary) !important;
-        }}
-        .gradio-textbox {{
-            margin-bottom: 0.5rem !important;
-        }}
-        .gradio-textbox textarea,
-        .gradio-textbox input {{
             border: 2px solid var(--custom-border-color) !important;
-            border-radius: 8px !important;
-            padding: 0.85rem 1rem !important;
-            font-size: 0.98rem !important;
-            font-family: 'Inter', sans-serif !important;
-            color: var(--custom-text-primary) !important;
-            transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--custom-shadow-sm) !important;
         }}
-        .gradio-textbox .scroll-hide {{
-            background-color: var(--custom-background-primary) !important;
-        }}
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {{
-            outline: none !important;
             border-color: var(--custom-border-focus) !important;
             box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
+            outline: none !important;
         }}
-        .gradio-radio {{
-            padding: 0 !important;
-            margin-top: 1rem !important;
-        }}
-        .gradio-radio input[type="radio"] {{
-            display: none !important;
-        }}
+
+        /* Specific overrides for radio buttons */
         .gradio-radio label {{
-            display: flex !important;
-            justify-content: center !important;
-            align-items: center !important;
-            padding: 0.75rem 1rem !important;
-            border: 2px solid var(--custom-border-color) !important;
-            border-radius: 8px !important;
+            background-color: var(--custom-background-primary) !important;
             color: var(--custom-text-primary) !important;
-            font-weight: 500 !important;
-            cursor: pointer !important;
-            transition: all 0.2s ease-out !important;
+            border: 2px solid var(--custom-border-color) !important;
             box-shadow: var(--custom-shadow-sm) !important;
-            margin: 0.2rem 0 !important;
-            width: 100 !important;
-            box-sizing: border-box !important;
         }}
         .gradio-radio label span.text-lg {{
-            font-weight: 600 !important;
             color: var(--custom-text-primary) !important;
-            font-size: 0.98rem !important;
         }}
         .gradio-radio label:hover {{
             background-color: var(--custom-background-secondary) !important;
@@ -652,73 +461,21 @@ Answer:"""
         }}
         .gradio-radio input[type="radio"]:checked + label {{
             background-color: var(--custom-primary-color) !important;
-            color: white !important; /* Ensure text is white when selected */
+            color: white !important;
             border-color: var(--custom-primary-hover) !important;
             box-shadow: var(--custom-shadow-md) !important;
-            transform: translateY(-1px) !important;
         }}
         .gradio-radio input[type="radio"]:checked + label span.text-lg {{
-            color: white !important; /* Ensure text is white when selected */
-        }}
-        .gradio-radio .gr-form {{
-            padding: 0 !important;
-        }}
-        .gradio-textbox label,
-        .gradio-radio > label {{
-            font-weight: 600 !important;
-            color: var(--custom-text-primary) !important;
-            font-size: 1rem !important;
-            margin-bottom: 0.6rem !important;
-            display: block !important;
-            text-align: left !important;
-        }}
-        .gr-prose {{
-            font-size: 0.9rem !important;
-            color: var(--custom-text-secondary) !important;
-            margin-top: 0.4rem !important;
-            text-align: left !important;
-            background-color: transparent !important;
-        }}
-        .input-column {{
-            display: flex !important;
-            flex-direction: column !important;
-            gap: 1.25rem !important;
-            margin-bottom: 0.5rem !important;
-        }}
-        .input-field {{
-            flex: none !important;
-            width: 100% !important;
-        }}
-        .button-row {{
-            display: flex !important;
-            gap: 1rem !important;
-            justify-content: flex-end !important;
-            margin-top: 1.5rem !important;
-        }}
-        .gradio-button {{
-            padding: 0.85rem 1.8rem !important;
-            border-radius: 9px !important;
-            font-weight: 600 !important;
-            font-size: 1rem !important;
-            transition: all 0.2s ease-out !important;
-            cursor: pointer !important;
-            border: 2px solid transparent !important;
-            text-align: center !important;
-            color: var(--custom-text-primary) !important; /* Default for secondary buttons */
+            color: white !important;
         }}
+
+        /* Overrides for buttons */
         .gr-button-primary {{
             background-color: var(--custom-primary-color) !important;
-            color: white !important; /* Ensure text is white for primary buttons */
-            box-shadow: var(--custom-shadow-sm) !important;
+            color: white !important;
         }}
         .gr-button-primary:hover {{
             background-color: var(--custom-primary-hover) !important;
-            box-shadow: var(--custom-shadow-md) !important;
-            transform: translateY(-2px) !important;
-        }}
-        .gr-button-primary:active {{
-            transform: translateY(1px) !important;
-            box-shadow: none !important;
         }}
         .gr-button-secondary {{
             background-color: transparent !important;
@@ -728,171 +485,99 @@ Answer:"""
         .gr-button-secondary:hover {{
             background-color: var(--custom-background-secondary) !important;
             border-color: var(--custom-primary-color) !important;
-            transform: translateY(-2px) !important;
-        }}
-        .gr-button-secondary:active {{
-            transform: translateY(1px) !important;
-            box-shadow: none !important;
-        }}
-        .output-content-wrapper {{
-            background-color: var(--custom-background-primary) !important;
-            border: 2px solid var(--custom-border-color) !important;
-            border-radius: 8px !important;
-            padding: 1.5rem !important;
-            min-height: 150px !important;
-            color: var(--custom-text-primary) !important;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }}
-        .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;
-            text-align: left !important;
-            color: var(--custom-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;
-            color: var(--custom-primary-color) !important;
-            margin-bottom: 0.75rem !important;
-            display: flex !important;
-            align-items: center !important;
-            gap: 0.6rem !important;
-            text-align: left !important;
-            width: 100%;
-            justify-content: flex-start;
-        }}
-        .response-icon {{
-            font-size: 1.5rem !important;
-            color: var(--custom-primary-color) !important;
-        }}
-        .divider {{
-            border: none !important;
-            border-top: 1px dashed var(--custom-border-color) !important;
-            margin: 1rem 0 !important;
-        }}
-        .error-message {{
-            background-color: var(--custom-error-bg) !important;
-            border: 2px solid var(--custom-error-border) !important;
-            color: var(--custom-error-text) !important;
-            padding: 1.25rem !important;
-            border-radius: 8px !important;
-            display: flex !important;
-            align-items: flex-start !important;
-            gap: 0.8rem !important;
-            font-size: 0.95rem !important;
-            font-weight: 500 !important;
-            line-height: 1.6 !important;
-            text-align: left !important;
-            width: 100%;
-            box-sizing: border-box;
-        }}
-        .error-message a {{
-            color: var(--custom-error-text) !important;
-            text-decoration: underline !important;
-        }}
-        .error-icon {{
-            font-size: 1.4rem !important;
-            line-height: 1 !important;
-            margin-top: 0.1rem !important;
-        }}
-        .error-details {{
-            font-size: 0.85rem !important;
-            color: var(--custom-error-text) !important;
-            margin-top: 0.5rem !important;
-            opacity: 0.8;
         }}
+
+        /* Placeholders */
         .placeholder {{
             background-color: var(--custom-background-primary) !important;
             border: 2px dashed var(--custom-border-color) !important;
-            border-radius: 8px !important;
-            padding: 2.5rem 1.5rem !important;
-            text-align: center !important;
             color: var(--custom-text-secondary) !important;
-            font-style: italic !important;
-            font-size: 1.1rem !important;
-            width: 100%;
-            box-sizing: border-box;
         }}
+
+        /* Example table */
         .examples-section .gr-samples-table {{
             border: 2px solid var(--custom-border-color) !important;
-            border-radius: 8px !important;
-            overflow: hidden !important;
-            margin-top: 1rem !important;
-        }}
-        .examples-section .gr-samples-table th,
-        .examples-section .gr-samples-table td {{
-            padding: 0.9rem !important;
-            border: none !important;
-            font-size: 0.95rem !important;
-            text-align: left !important;
+            background-color: var(--custom-background-primary) !important;
             color: var(--custom-text-primary) !important;
         }}
         .examples-section .gr-samples-table th {{
             background-color: var(--custom-background-secondary) !important;
-            font-weight: 700 !important;
             color: var(--custom-text-primary) !important;
+            text-align: center !important; /* Center table headers */
         }}
         .examples-section .gr-samples-table td {{
             background-color: var(--custom-background-primary) !important;
             color: var(--custom-text-primary) !important;
             border-top: 1px solid var(--custom-border-color) !important;
-            cursor: pointer !important;
-            transition: background 0.2s ease, transform 0.1s ease !important;
         }}
         .examples-section .gr-samples-table tr:hover td {{
             background-color: var(--custom-background-secondary) !important;
             transform: translateX(5px);
         }}
-        .gr-examples .gr-label,
-        .gr-examples .label-wrap,
-        .gr-examples .gr-accordion-header {{
-            display: none !important;
+        .examples-section .gr-samples-table th, .examples-section .gr-samples-table td {{
+            border-color: var(--custom-border-color) !important;
+        }}
+
+        /* Error messages */
+        .error-message {{
+            background-color: var(--custom-error-bg) !important;
+            border: 2px solid var(--custom-error-border) !important;
+            color: var(--custom-error-text) !important;
+        }}
+        .error-message a {{
+            color: var(--custom-error-text) !important;
         }}
+
+        /* Footer */
         .app-footer-wrapper {{
             background: linear-gradient(145deg, var(--custom-background-primary) 0%, var(--custom-background-secondary) 100%) !important;
             border: 2px solid var(--custom-border-color) !important;
-            border-radius: 12px !important;
-            padding: 1.75rem !important;
-            margin-top: 1.5rem !important;
-            margin-bottom: 1.5rem !important;
-            text-align: center !important;
             color: var(--custom-text-primary) !important;
         }}
         .app-footer p {{
-            margin: 0 !important;
-            max-width: 90% !important;
-            font-size: 0.95rem !important;
             color: var(--custom-text-secondary) !important;
-            line-height: 1.6 !important;
-            background-color: transparent !important;
-            text-align: center !important;
-            white-space: normal !important;
         }}
         .app-footer strong, .app-footer b {{
-            font-weight: 700 !important;
             color: var(--custom-primary-color) !important;
         }}
         .app-footer a {{
             color: var(--custom-primary-color) !important;
-            text-decoration: underline !important;
-            font-weight: 600 !important;
         }}
-        .app-footer a:hover {{
-            text-decoration: none !important;
+
+        /* General element classes */
+        .gr-text, .gr-label, .gr-checkbox-group, .gr-radio-group,
+        .gr-slider, .gr-number, .gr-dropdown {{
+            color: var(--custom-text-primary) !important;
+        }}
+
+        /* Ensure all text within any Gradio element defaults to primary text color */
+        .gradio-container * {{
+            color: var(--custom-text-primary) !important;
+        }}
+        /* Re-override for specific cases that need secondary text color */
+        .gradio-container .gr-prose,
+        .gradio-container .app-header-tagline,
+        .gradio-container .placeholder,
+        .gradio-container .app-footer p {{
+            color: var(--custom-text-secondary) !important;
+        }}
+        /* Re-override for primary color elements */
+        .gradio-container .app-header-logo,
+        .gradio-container .response-header,
+        .gradio-container .response-icon,
+        .gradio-container .custom-link {{
+            color: var(--custom-primary-color) !important;
+        }}
+        .gradio-container .gr-button-primary {{
+            color: white !important;
+        }}
+        /* Ensure inputs specifically use primary text color */
+        .gradio-textbox textarea, .gradio-textbox input,
+        .gradio-radio label span.text-lg {{
+            color: var(--custom-text-primary) !important;
         }}
 
-        /* Existing Media Queries (keep as is) */
+        /* Media Queries */
         @media (max-width: 768px) {{
             .gradio-container {{
                 padding: 1rem !important;
@@ -933,17 +618,15 @@ Answer:"""
         }}
         """
 
-        # Removed theme_mode to avoid the TypeError
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
             with gr.Group(elem_classes="app-header-wrapper"):
-                # The text-align and margin: auto rules in CSS will handle centering.
                 gr.Markdown(
                     """
                     <span class='app-header-logo'>⚖️</span>
                     <h1 class='app-header-title'>Landlord-Tenant Rights Assistant</h1>
                     <p class='app-header-tagline'>Empowering You with State-Specific Legal Insights</p>
-                    """
-                    , elem_classes="full-width-center"
+                    """,
+                    elem_classes="full-width-center"
                 )
 
             with gr.Column(elem_classes="main-dashboard-container"):
@@ -1025,6 +708,19 @@ Answer:"""
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     f"""
+                    <style>
+                        .custom-link {{
+                            font-weight: bold !important;
+                            color: var(--custom-primary-color) !important;
+                            text-decoration: underline;
+                        }}
+                        .app-footer p {{
+                            color: var(--custom-text-secondary) !important;
+                        }}
+                        .app-footer strong, .app-footer b {{
+                            color: var(--custom-primary-color) !important;
+                        }}
+                    </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>
                     """