UI update

app.py

@@ -243,6 +243,8 @@ Answer:"""
             raise RuntimeError(f"Failed to process PDF '{pdf_path}': {e}") from e
 
     # --- GRADIO INTERFACE (NEW UI DESIGN) ---
+    import gradio as gr
+
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
             # Basic client-side validation for immediate feedback (redundant but good UX)
@@ -293,52 +295,33 @@ 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 */
-        :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%);
-            --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-secondary) !important;
-            color: var(--text-primary) !important;
-            transition: background-color 0.3s, color 0.3s;
+        /* Forcefully override default styles with high specificity */
+        html, body, .gradio-container {
+            background-color: hsl(30, 100%, 96%) !important;
+            color: #4A3C32 !important;
+            transition: background-color 0.3s, color 0.3s !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-secondary) !important;
             box-shadow: none !important;
-            color: var(--text-primary) !important;
         }
         .main-dashboard-container > * {
-            background-color: var(--background-primary) !important;
+            background-color: hsl(30, 100%, 99.9%) !important;
         }
         .app-header-wrapper {
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
-            border: 2px solid var(--border-color) !important;
+            background: linear-gradient(145deg, hsl(30, 100%, 99.9%) 0%, hsl(30, 100%, 96%) 100%) !important;
+            border: 2px solid hsl(30, 70%, 85%) !important;
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important;
             margin-bottom: 1.5rem !important;
-            box-shadow: var(--shadow-md) !important;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
             position: relative;
             overflow: hidden;
             text-align: center !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .app-header-wrapper::before {
             content: '';
@@ -356,7 +339,7 @@ Answer:"""
             font-size: 8.5rem !important;
             margin-bottom: 0.75rem !important;
             display: block !important;
-            color: var(--primary-color) !important;
+            color: #FF8C00 !important;
             position: relative;
             z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
@@ -370,7 +353,7 @@ Answer:"""
             font-family: 'Poppins', sans-serif !important;
             font-size: 3rem !important;
             font-weight: 800 !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
             letter-spacing: -0.03em !important;
@@ -381,7 +364,7 @@ Answer:"""
         }
         .app-header-tagline {
             font-size: 1.25rem !important;
-            color: var(--text-secondary) !important;
+            color: #8C7B6F !important;
             font-weight: 400 !important;
             margin: 0 !important;
             max-width: 700px;
@@ -395,17 +378,17 @@ Answer:"""
             gap: 1.25rem !important;
         }
         .dashboard-card-section {
-            background-color: var(--background-primary) !important;
-            border: 2px solid var(--border-color) !important;
+            background-color: hsl(30, 100%, 99.9%) !important;
+            border: 2px solid hsl(30, 70%, 85%) !important;
             border-radius: 12px !important;
             padding: 0 !important;
-            box-shadow: var(--shadow-sm) !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
             transition: all 0.3s ease-out !important;
             cursor: default;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .dashboard-card-section:hover {
-            box-shadow: var(--shadow-md) !important;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
             transform: translateY(-3px) !important;
         }
         .full-width-center {
@@ -417,7 +400,7 @@ Answer:"""
             background-color: transparent !important;
         }
         .section-title-gradient-bar {
-            background-color: var(--background-secondary) !important;
+            background-color: hsl(30, 100%, 96%) !important;
             padding: 1.25rem 1.75rem !important;
             border-top-left-radius: 10px !important;
             border-top-right-radius: 10px !important;
@@ -425,16 +408,16 @@ Answer:"""
             text-align: center !important;
             box-sizing: border-box;
             width: 100%;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important;
             font-weight: 700 !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
             margin: 0 !important;
             padding-bottom: 0 !important;
-            border-bottom: 2px solid var(--border-color) !important;
+            border-bottom: 2px solid hsl(30, 70%, 85%) !important;
             line-height: 1.1 !important;
             display: inline-block !important;
             text-align: center !important;
@@ -442,14 +425,14 @@ Answer:"""
         }
         .dashboard-card-content-area {
             padding: 0 1.75rem 1.75rem 1.75rem !important;
-            background-color: var(--background-primary) !important;
+            background-color: hsl(30, 100%, 99.9%) !important;
             box-sizing: border-box;
             width: 100%;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .dashboard-card-section p {
             line-height: 1.7 !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
             font-size: 1rem !important;
             text-align: left !important;
             background-color: transparent !important;
@@ -459,13 +442,13 @@ Answer:"""
         }
         .dashboard-card-section strong, .dashboard-card-section b {
             font-weight: 700 !important;
-            color: var(--primary-color) !important;
+            color: #FF8C00 !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 {
             background-color: transparent !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
             white-space: normal !important;
             overflow-wrap: break-word;
             word-break: break-word;
@@ -474,30 +457,30 @@ Answer:"""
         .gradio-textbox input,
         .gradio-radio label,
         .placeholder {
-            background-color: var(--background-primary) !important;
-            color: var(--text-primary) !important;
+            background-color: hsl(30, 100%, 99.9%) !important;
+            color: #4A3C32 !important;
         }
         .gradio-textbox {
             margin-bottom: 0.5rem !important;
         }
         .gradio-textbox textarea,
         .gradio-textbox input {
-            border: 2px solid var(--border-color) !important;
+            border: 2px solid hsl(30, 70%, 85%) !important;
             border-radius: 8px !important;
             padding: 0.85rem 1rem !important;
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
-            box-shadow: var(--shadow-sm) !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
         }
         .gradio-textbox .scroll-hide {
-            background-color: var(--background-primary) !important;
+            background-color: hsl(30, 100%, 99.9%) !important;
         }
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
             outline: none !important;
-            border-color: var(--border-focus) !important;
+            border-color: #FF8C00 !important;
             box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
         }
         .gradio-radio {
@@ -512,37 +495,37 @@ Answer:"""
             justify-content: center !important;
             align-items: center !important;
             padding: 0.75rem 1rem !important;
-            border: 2px solid var(--border-color) !important;
+            border: 2px solid hsl(30, 70%, 85%) !important;
             border-radius: 8px !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
             font-weight: 500 !important;
             cursor: pointer !important;
             transition: all 0.2s ease-out !important;
-            box-shadow: var(--shadow-sm) !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08) !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(--text-primary) !important;
+            color: #4A3C32 !important;
             font-size: 0.98rem !important;
         }
         .gradio-radio label:hover {
-            background-color: var(--background-secondary) !important;
-            border-color: var(--primary-color) !important;
-            box-shadow: var(--shadow-md) !important;
+            background-color: hsl(30, 100%, 96%) !important;
+            border-color: #FF8C00 !important;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
             transform: translateY(-2px) !important;
         }
         .gradio-radio input[type="radio"]:checked + label {
-            background-color: var(--primary-color) !important;
-            color: var(--text-primary) !important;
-            border-color: var(--primary-hover) !important;
-            box-shadow: var(--shadow-md) !important;
+            background-color: #FF8C00 !important;
+            color: #4A3C32 !important;
+            border-color: #E07B00 !important;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
             transform: translateY(-1px) !important;
         }
         .gradio-radio input[type="radio"]:checked + label span.text-lg {
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .gradio-radio .gr-form {
             padding: 0 !important;
@@ -550,7 +533,7 @@ Answer:"""
         .gradio-textbox label,
         .gradio-radio > label {
             font-weight: 600 !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
             font-size: 1rem !important;
             margin-bottom: 0.6rem !important;
             display: block !important;
@@ -558,7 +541,7 @@ Answer:"""
         }
         .gr-prose {
             font-size: 0.9rem !important;
-            color: var(--text-secondary) !important;
+            color: #8C7B6F !important;
             margin-top: 0.4rem !important;
             text-align: left !important;
             background-color: transparent !important;
@@ -588,16 +571,16 @@ Answer:"""
             cursor: pointer !important;
             border: 2px solid transparent !important;
             text-align: center !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .gr-button-primary {
-            background-color: var(--primary-color) !important;
+            background-color: #FF8C00 !important;
             color: white !important;
-            box-shadow: var(--shadow-sm) !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
         }
         .gr-button-primary:hover {
-            background-color: var(--primary-hover) !important;
-            box-shadow: var(--shadow-md) !important;
+            background-color: #E07B00 !important;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
             transform: translateY(-2px) !important;
         }
         .gr-button-primary:active {
@@ -606,12 +589,12 @@ Answer:"""
         }
         .gr-button-secondary {
             background-color: transparent !important;
-            color: var(--text-primary) !important;
-            border-color: var(--border-color) !important;
+            color: #4A3C32 !important;
+            border-color: hsl(30, 70%, 85%) !important;
         }
         .gr-button-secondary:hover {
-            background-color: var(--background-secondary) !important;
-            border-color: var(--primary-color) !important;
+            background-color: hsl(30, 100%, 96%) !important;
+            border-color: #FF8C00 !important;
             transform: translateY(-2px) !important;
         }
         .gr-button-secondary:active {
@@ -619,12 +602,12 @@ Answer:"""
             box-shadow: none !important;
         }
         .output-content-wrapper {
-            background-color: var(--background-primary) !important;
-            border: 2px solid var(--border-color) !important;
+            background-color: hsl(30, 100%, 99.9%) !important;
+            border: 2px solid hsl(30, 70%, 85%) !important;
             border-radius: 8px !important;
             padding: 1.5rem !important;
             min-height: 150px !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -638,7 +621,7 @@ Answer:"""
             overflow-wrap: break-word;
             word-break: break-word;
             text-align: left !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         @keyframes fadeInAndSlideUp {
             from { opacity: 0; transform: translateY(15px); }
@@ -647,7 +630,7 @@ Answer:"""
         .response-header {
             font-size: 1.3rem !important;
             font-weight: 700 !important;
-            color: var(--primary-color) !important;
+            color: #FF8C00 !important;
             margin-bottom: 0.75rem !important;
             display: flex !important;
             align-items: center !important;
@@ -658,17 +641,17 @@ Answer:"""
         }
         .response-icon {
             font-size: 1.5rem !important;
-            color: var(--primary-color) !important;
+            color: #FF8C00 !important;
         }
         .divider {
             border: none !important;
-            border-top: 1px dashed var(--border-color) !important;
+            border-top: 1px dashed hsl(30, 70%, 85%) !important;
             margin: 1rem 0 !important;
         }
         .error-message {
-            background-color: var(--error-bg) !important;
-            border: 2px solid var(--error-border) !important;
-            color: var(--error-text) !important;
+            background-color: #FFF0E0 !important;
+            border: 2px solid #FFD2B2 !important;
+            color: #E05C00 !important;
             padding: 1.25rem !important;
             border-radius: 8px !important;
             display: flex !important;
@@ -682,7 +665,7 @@ Answer:"""
             box-sizing: border-box;
         }
         .error-message a {
-            color: var(--error-text) !important;
+            color: #E05C00 !important;
             text-decoration: underline !important;
         }
         .error-icon {
@@ -692,24 +675,24 @@ Answer:"""
         }
         .error-details {
             font-size: 0.85rem !important;
-            color: var(--error-text) !important;
+            color: #E05C00 !important;
             margin-top: 0.5rem !important;
             opacity: 0.8;
         }
         .placeholder {
-            background-color: var(--background-primary) !important;
-            border: 2px dashed var(--border-color) !important;
+            background-color: hsl(30, 100%, 99.9%) !important;
+            border: 2px dashed hsl(30, 70%, 85%) !important;
             border-radius: 8px !important;
             padding: 2.5rem 1.5rem !important;
             text-align: center !important;
-            color: var(--text-secondary) !important;
+            color: #8C7B6F !important;
             font-style: italic !important;
             font-size: 1.1rem !important;
             width: 100%;
             box-sizing: border-box;
         }
         .examples-section .gr-samples-table {
-            border: 2px solid var(--border-color) !important;
+            border: 2px solid hsl(30, 70%, 85%) !important;
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
@@ -720,22 +703,22 @@ Answer:"""
             border: none !important;
             font-size: 0.95rem !important;
             text-align: left !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .examples-section .gr-samples-table th {
-            background-color: var(--background-secondary) !important;
+            background-color: hsl(30, 100%, 96%) !important;
             font-weight: 700 !important;
-            color: var(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .examples-section .gr-samples-table td {
-            background-color: var(--background-primary) !important;
-            color: var(--text-primary) !important;
-            border-top: 1px solid var(--border-color) !important;
+            background-color: hsl(30, 100%, 99.9%) !important;
+            color: #4A3C32 !important;
+            border-top: 1px solid hsl(30, 70%, 85%) !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(--background-secondary) !important;
+            background-color: hsl(30, 100%, 96%) !important;
             transform: translateX(5px);
         }
         .gr-examples .gr-label,
@@ -744,20 +727,20 @@ Answer:"""
             display: none !important;
         }
         .app-footer-wrapper {
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
-            border: 2px solid var(--border-color) !important;
+            background: linear-gradient(145deg, hsl(30, 100%, 99.9%) 0%, hsl(30, 100%, 96%) 100%) !important;
+            border: 2px solid hsl(30, 70%, 85%) !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(--text-primary) !important;
+            color: #4A3C32 !important;
         }
         .app-footer p {
             margin: 0 !important;
             max-width: 90% !important;
             font-size: 0.95rem !important;
-            color: var(--text-secondary) !important;
+            color: #8C7B6F !important;
             line-height: 1.6 !important;
             background-color: transparent !important;
             text-align: center !important;
@@ -765,10 +748,10 @@ Answer:"""
         }
         .app-footer strong, .app-footer b {
             font-weight: 700 !important;
-            color: var(--primary-color) !important;
+            color: #FF8C00 !important;
         }
         .app-footer a {
-            color: var(--primary-color) !important;
+            color: #FF8C00 !important;
             text-decoration: underline !important;
             font-weight: 600 !important;
         }
@@ -815,7 +798,10 @@ Answer:"""
         }
         """
 
-        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
+        # Explicitly set Gradio theme to avoid platform defaults
+        custom_theme = gr.themes.Default(primary_hue="orange", secondary_hue="neutral", neutral_hue="beige")
+
+        with gr.Blocks(css=custom_css, theme=custom_theme, title="Landlord-Tenant Rights Assistant") as demo:
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -933,7 +919,6 @@ Answer:"""
             )
 
             return demo
-
 # --- Main Execution Block (UNCHANGED from original logic) ---
 if __name__ == "__main__":
     logging.info("Starting Landlord-Tenant Rights Bot application...")