UI update

app.py

@@ -351,7 +351,7 @@ Answer:"""
             /* Button colors */
             --button-primary-background: var(--custom-primary-color) !important;
             --button-primary-background-hover: var(--custom-primary-hover) !important;
-            --button-primary-text-color: white !important; /* Ensure text is white on primary buttons */
+            --button-primary-text-color: white !important;
             --button-secondary-background: transparent !important;
             --button-secondary-background-hover: var(--custom-background-secondary) !important;
             --button-secondary-border-color: var(--custom-border-color) !important;
@@ -381,67 +381,268 @@ Answer:"""
             --color-error-background: var(--custom-error-bg) !important;
             --color-error-border: var(--custom-error-border) !important;
 
-            /* Specific overrides for common Gradio components that might be problematic */
+            /* Additional common Gradio variables for comprehensive override */
             --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;
-
-            /* Ensure scrollbar in textboxes if it ever gets themed */
             --scrollbar-thumb-color: var(--custom-border-color) !important;
             --scrollbar-track-color: var(--custom-background-secondary) !important;
         }}
 
-        /* Base styles for html and body - ensure no dark mode inheritance */
+        /* 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; /* Extremely important to prevent theme transition flickering */
         }}
 
-        /* Target the main Gradio application container directly if it's the root */
+        /* Target the main Gradio application root */
         .gradio-app {{
             background-color: var(--custom-background-secondary) !important;
             color: var(--custom-text-primary) !important;
-            /* Add any other global overrides if needed for the app container */
         }}
 
         /* Ensure all core Gradio blocks and components use our defined colors */
-        .gr-block, .gr-box, .gr-panel, .gr-form, .gr-columns, .gr-column,
-        .gradio-html, .gradio-markdown, .gradio-prose {{
+        .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 > * {{
+            background-color: var(--custom-background-primary) !important;
+            border-color: var(--custom-border-color) !important;
+            color: var(--custom-text-primary) !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 {{
+            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;
-            /* Ensure text content within markdown and HTML is consistent */
-            --text-color-body: var(--custom-text-primary) !important; /* Re-apply explicitly */
-            --text-color-subdued: var(--custom-text-secondary) !important; /* Re-apply explicitly */
+            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;
         }}
-        
-        /* Specific overrides for input fields */
+        .gradio-textbox, .gradio-radio, .gradio-button {{ /* Remove background from parent for these */
+            background-color: transparent !important;
+        }}
+
         .gradio-textbox textarea,
-        .gradio-textbox input {{
+        .gradio-textbox input,
+        .gradio-radio label,
+        .placeholder {{
             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 {{
-            border-color: var(--custom-border-focus) !important;
-            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important; /* Use rgba for consistent shadow */
             outline: none !important;
+            border-color: var(--custom-border-focus) !important;
+            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !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 {{
-            background-color: var(--custom-background-primary) !important;
-            color: var(--custom-text-primary) !important;
+            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;
+            color: var(--custom-text-primary) !important;
+            font-weight: 500 !important;
+            cursor: pointer !important;
+            transition: all 0.2s ease-out !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 {{
-            color: var(--custom-text-primary) !important; /* Ensure text color of radio labels */
+            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;
@@ -451,21 +652,73 @@ Answer:"""
         }}
         .gradio-radio input[type="radio"]:checked + label {{
             background-color: var(--custom-primary-color) !important;
-            color: white !important; /* Text should be white on selected primary background */
+            color: white !important; /* Ensure text is white when selected */
             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; /* Text should be white on selected primary background */
+            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 */
         }}
-        
-        /* Overrides for buttons */
         .gr-button-primary {{
             background-color: var(--custom-primary-color) !important;
-            color: white !important;
+            color: white !important; /* Ensure text is white for primary buttons */
+            box-shadow: var(--custom-shadow-sm) !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;
@@ -475,98 +728,170 @@ 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;
-            background-color: var(--custom-background-primary) !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;
             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;
         }}
         .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); /* Keep the hover effect */
-        }}
-        .examples-section .gr-samples-table th, .examples-section .gr-samples-table td {{
-            border-color: var(--custom-border-color) !important; /* Explicitly set border color */
-        }}
-
-        /* 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;
+            transform: translateX(5px);
         }}
-        .error-message a {{
-            color: var(--custom-error-text) !important; /* Ensure link color in error messages */
+        .gr-examples .gr-label,
+        .gr-examples .label-wrap,
+        .gr-examples .gr-accordion-header {{
+            display: none !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;
         }}
-
-        /* General element classes that might inherit */
-        .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;
-        }}
-        /* And then 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;
-        }}
-        /* And 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, not inherited secondary */
-        .gradio-textbox textarea, .gradio-textbox input,
-        .gradio-radio label span.text-lg {{
-            color: var(--custom-text-primary) !important;
+        .app-footer a:hover {{
+            text-decoration: none !important;
         }}
 
-
         /* Existing Media Queries (keep as is) */
         @media (max-width: 768px) {{
             .gradio-container {{
@@ -608,16 +933,17 @@ Answer:"""
         }}
         """
 
-        # Removed theme_mode="light" to prevent the TypeError
+        # 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"):
@@ -699,21 +1025,6 @@ Answer:"""
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     f"""
-                    <style>
-                        /* Use custom variables for consistency */
-                        .custom-link {{
-                            font-weight: bold !important;
-                            color: var(--custom-primary-color) !important;
-                            text-decoration: underline;
-                        }}
-                        /* Ensure general footer text color */
-                        .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>
                     """