UI update

app.py

@@ -242,8 +242,7 @@ Answer:"""
             logging.error(f"Failed to load or process PDF '{pdf_path}': {str(e)}", exc_info=True)
             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:
@@ -275,7 +274,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"],
@@ -293,285 +291,201 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
         custom_css = """
-        /* Import modern fonts from Google Fonts */
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');
+        /* Import modern 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 the single light orange theme */
+        /* Define custom properties for light and dark themes */
         :root {
-            --primary-color: #FF8C00; /* Orange for buttons and accents */
-            --primary-hover: #E07B00; /* Darker orange for hover states */
-            --background-page: #FFE8CC; /* Light orange background for the page */
-            --background-card: #FFFFFF; /* White background for cards */
-            --text-primary: #333333; /* Dark gray for primary text */
-            --text-secondary: #666666; /* Lighter gray for secondary text */
-            --border-color: #E5E5E5; /* Light gray for borders */
-            --border-focus: #FF8C00; /* Orange for focused input borders */
+            --background-primary: #FAFAFA;
+            --background-secondary: #F1F5F9;
+            --text-primary: #2D3748;
+            --text-secondary: #718096;
+            --title-color: #1A1A1A;
+            --accent-primary: #2C7A7B;
+            --accent-hover: #234E52;
+            --border-color: #E2E8F0;
             --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
-            --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
-            --error-bg: #FFF0E0; /* Light orange for error background */
-            --error-border: #FFD2B2; /* Slightly darker orange for error borders */
-            --error-text: #E05C00; /* Orange for error text */
-            --gradient-start: #FFDAB3; /* Lighter orange for gradient start */
-            --gradient-end: #FFF5E6; /* Very light orange-cream for gradient end */
+            --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
+            --error-bg: #FEE2E2;
+            --error-text: #DC2626;
+        }
+
+        /* Dark theme variables */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-primary: #1A1A1A;
+                --background-secondary: #2D3748;
+                --text-primary: #D1D5DB;
+                --text-secondary: #A0AEC0;
+                --title-color: #E5E5E5;
+                --border-color: #4A5568;
+                --error-bg: #7F1D1D;
+            }
         }
 
-        body, html {
-            background-color: var(--background-page) !important;
+        /* Base styles */
+        html, body, .gradio-container {
+            background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-            margin: 0;
-            padding: 0;
+            font-family: 'Inter', sans-serif !important;
+            margin: 0 !important;
+            padding: 0 !important;
         }
 
         .gradio-container {
             max-width: 1000px !important;
             margin: 2rem auto !important;
             padding: 2rem !important;
-            background-color: var(--background-page) !important;
-            box-shadow: none !important;
-            color: var(--text-primary) !important;
-        }
-
-        .main-dashboard-container {
-            display: flex !important;
-            flex-direction: column !important;
-            gap: 2rem !important; /* Increased spacing between sections */
+            border-radius: 12px !important;
+            background-color: var(--background-primary) !important;
+            box-shadow: var(--shadow-md) !important;
         }
 
+        /* Header Section */
         .app-header-wrapper {
-            background: linear-gradient(145deg, var(--gradient-start) 0%, var(--gradient-end) 100%) !important;
+            background: linear-gradient(135deg, var(--background-secondary), var(--background-primary)) !important;
+            border: 1px solid var(--border-color) !important;
             border-radius: 12px !important;
-            padding: 3rem 2rem !important;
+            padding: 2rem !important;
             margin-bottom: 2rem !important;
-            box-shadow: var(--shadow-md) !important;
+            position: relative;
             text-align: center !important;
-            color: var(--text-primary) !important;
+            box-shadow: var(--shadow-sm) !important;
+            overflow: hidden;
+        }
+
+        .app-header-wrapper::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at top left, rgba(44, 122, 123, 0.2), transparent 70%);
+            z-index: 0;
+            opacity: 0.8;
         }
 
         .app-header-logo {
-            font-size: 6rem !important;
+            font-size: 5rem !important;
+            color: var(--accent-primary) !important;
             margin-bottom: 1rem !important;
-            display: block !important;
-            color: var(--primary-color) !important;
-            animation: float-icon 3s ease-in-out infinite alternate;
+            position: relative;
+            z-index: 1;
+            animation: bounce 2s infinite ease-in-out;
         }
 
-        @keyframes float-icon {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-5px); }
-            100% { transform: translateY(0px); }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
         }
 
         .app-header-title {
             font-family: 'Poppins', sans-serif !important;
-            font-size: 2.5rem !important;
+            font-size: 2.8rem !important;
             font-weight: 700 !important;
-            color: var(--text-primary) !important;
-            margin: 0 0 0.5rem 0 !important;
+            color: var(--title-color) !important; /* Ensure high contrast with background */
+            margin: 0 !important;
             line-height: 1.2 !important;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
+            position: relative;
+            z-index: 1;
         }
 
         .app-header-tagline {
-            font-size: 1.1rem !important;
+            font-size: 1.2rem !important;
             color: var(--text-secondary) !important;
+            margin-top: 0.5rem !important;
             font-weight: 400 !important;
-            margin: 0 !important;
-            max-width: 600px;
-            margin: 0 auto;
+            position: relative;
+            z-index: 1;
+        }
+
+        /* Main Dashboard Layout */
+        .main-dashboard-container {
+            display: flex !important;
+            flex-direction: column !important;
+            gap: 1.5rem !important;
         }
 
         .dashboard-card-section {
-            background-color: var(--background-card) !important;
-            border-radius: 12px !important;
+            background-color: var(--background-primary) !important;
+            border: 1px solid var(--border-color) !important;
+            border-radius: 10px !important;
             padding: 0 !important;
             box-shadow: var(--shadow-sm) !important;
             transition: transform 0.2s ease, box-shadow 0.2s ease !important;
-            color: var(--text-primary) !important;
         }
 
         .dashboard-card-section:hover {
+            transform: translateY(-3px) !important;
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-2px) !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;
         }
 
         .section-title-gradient-bar {
-            background: linear-gradient(145deg, var(--gradient-start) 0%, var(--gradient-end) 100%) !important;
-            padding: 1rem 1.5rem !important;
-            border-top-left-radius: 12px !important;
-            border-top-right-radius: 12px !important;
-            margin-bottom: 0 !important;
+            background-color: var(--background-secondary) !important;
+            padding: 1rem !important;
+            border-top-left-radius: 10px !important;
+            border-top-right-radius: 10px !important;
             text-align: center !important;
-            box-sizing: border-box;
-            width: 100%;
-            color: var(--text-primary) !important;
         }
 
         .section-title {
             font-family: 'Poppins', sans-serif !important;
-            font-size: 1.5rem !important;
+            font-size: 1.6rem !important;
             font-weight: 600 !important;
             color: var(--text-primary) !important;
             margin: 0 !important;
-            line-height: 1.2 !important;
+            border-bottom: 2px solid var(--accent-primary) !important;
+            display: inline-block !important;
         }
 
         .dashboard-card-content-area {
             padding: 1.5rem !important;
-            background-color: var(--background-card) !important;
-            border-bottom-left-radius: 12px !important;
-            border-bottom-right-radius: 12px !important;
-            box-sizing: border-box;
-            width: 100%;
-            color: var(--text-primary) !important;
-        }
-
-        .dashboard-card-section p {
-            line-height: 1.6 !important;
+            background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
-            font-size: 1rem !important;
-            text-align: left !important;
-            margin: 0 !important;
-            padding: 0 !important;
-        }
-
-        .dashboard-card-section strong, .dashboard-card-section b {
-            font-weight: 600 !important;
-            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 {
-            background-color: transparent !important;
-            color: var(--text-primary) !important;
-            white-space: normal !important;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }
-
-        .gradio-textbox textarea,
-        .gradio-textbox input,
-        .gradio-radio label,
-        .placeholder {
-            background-color: #FFFFFF !important;
-            color: var(--text-primary) !important;
-            border-radius: 8px !important;
-            box-shadow: var(--shadow-sm) !important;
-        }
-
-        .gradio-textbox {
-            margin-bottom: 1rem !important;
         }
 
+        /* Input and Form Elements */
         .gradio-textbox textarea,
         .gradio-textbox input {
+            background-color: var(--background-primary) !important;
+            color: var(--text-primary) !important;
             border: 1px solid var(--border-color) !important;
             border-radius: 8px !important;
-            padding: 0.75rem 1rem !important;
+            padding: 0.75rem !important;
             font-size: 1rem !important;
-            font-family: 'Inter', sans-serif !important;
-            color: var(--text-primary) !important;
+            box-shadow: var(--shadow-sm) !important;
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
         }
 
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
+            border-color: var(--accent-primary) !important;
+            box-shadow: 0 0 0 3px rgba(44, 122, 123, 0.2) !important;
             outline: none !important;
-            border-color: var(--border-focus) !important;
-            box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1) !important;
-        }
-
-        .gradio-radio {
-            padding: 0 !important;
-            margin-top: 1rem !important;
-        }
-
-        .gradio-radio input[type="radio"] {
-            display: none !important;
         }
 
         .gradio-radio label {
-            display: flex !important;
-            justify-content: center !important;
-            align-items: center !important;
-            padding: 0.75rem 1rem !important;
+            background-color: var(--background-primary) !important;
+            color: var(--text-primary) !important;
             border: 1px solid var(--border-color) !important;
             border-radius: 8px !important;
-            color: var(--text-primary) !important;
-            font-weight: 500 !important;
-            cursor: pointer !important;
-            transition: all 0.2s ease-out !important;
+            padding: 0.75rem !important;
             margin: 0.25rem 0 !important;
-            width: 100% !important;
-            box-sizing: border-box !important;
-        }
-
-        .gradio-radio label span.text-lg {
-            font-weight: 500 !important;
-            color: var(--text-primary) !important;
-            font-size: 1rem !important;
+            cursor: pointer !important;
+            transition: all 0.2s ease !important;
         }
 
         .gradio-radio label:hover {
-            border-color: var(--primary-color) !important;
-            box-shadow: var(--shadow-md) !important;
+            border-color: var(--accent-primary) !important;
+            background-color: var(--background-secondary) !important;
         }
 
         .gradio-radio input[type="radio"]:checked + label {
-            background-color: var(--primary-color) !important;
-            color: #FFFFFF !important;
-            border-color: var(--primary-color) !important;
-            box-shadow: var(--shadow-md) !important;
-        }
-
-        .gradio-radio input[type="radio"]:checked + label span.text-lg {
-            color: #FFFFFF !important;
-        }
-
-        .gradio-textbox label,
-        .gradio-radio > label {
-            font-weight: 600 !important;
-            color: var(--text-primary) !important;
-            font-size: 1rem !important;
-            margin-bottom: 0.5rem !important;
-            display: block !important;
-            text-align: left !important;
-        }
-
-        .gr-prose {
-            font-size: 0.9rem !important;
-            color: var(--text-secondary) !important;
-            margin-top: 0.5rem !important;
-            text-align: left !important;
-            background-color: transparent !important;
-        }
-
-        .input-column {
-            display: flex !important;
-            flex-direction: column !important;
-            gap: 1.5rem !important;
-            margin-bottom: 1rem !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;
+            background-color: var(--accent-primary) !important;
+            color: white !important;
+            border-color: var(--accent-hover) !important;
         }
 
         .gradio-button {
@@ -579,265 +493,142 @@ Answer:"""
             border-radius: 8px !important;
             font-weight: 600 !important;
             font-size: 1rem !important;
-            font-family: 'Inter', sans-serif !important;
-            transition: all 0.2s ease-out !important;
-            cursor: pointer !important;
-            border: none !important;
-            text-align: center !important;
+            transition: all 0.2s ease !important;
         }
 
         .gr-button-primary {
-            background-color: var(--primary-color) !important;
-            color: #FFFFFF !important;
-            box-shadow: var(--shadow-sm) !important;
+            background-color: var(--accent-primary) !important;
+            color: white !important;
+            border: none !important;
         }
 
         .gr-button-primary:hover {
-            background-color: var(--primary-hover) !important;
-            box-shadow: var(--shadow-md) !important;
-            transform: translateY(-1px) !important;
-        }
-
-        .gr-button-primary:active {
-            transform: translateY(0) !important;
-            box-shadow: var(--shadow-sm) !important;
+            background-color: var(--accent-hover) !important;
+            transform: translateY(-2px) !important;
         }
 
         .gr-button-secondary {
-            background-color: #F5F5F5 !important;
+            background-color: transparent !important;
             color: var(--text-primary) !important;
             border: 1px solid var(--border-color) !important;
         }
 
         .gr-button-secondary:hover {
-            background-color: #E5E5E5 !important;
-            border-color: var(--primary-color) !important;
-            transform: translateY(-1px) !important;
-        }
-
-        .gr-button-secondary:active {
-            transform: translateY(0) !important;
-            box-shadow: none !important;
+            background-color: var(--background-secondary) !important;
+            border-color: var(--accent-primary) !important;
         }
 
+        /* Output and Error Messages */
         .output-content-wrapper {
-            background-color: #FFFFFF !important;
+            background-color: var(--background-primary) !important;
+            border: 1px solid var(--border-color) !important;
             border-radius: 8px !important;
             padding: 1.5rem !important;
-            min-height: 120px !important;
+            min-height: 150px !important;
             color: var(--text-primary) !important;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            box-shadow: var(--shadow-sm) !important;
         }
 
         .animated-output-content {
-            opacity: 0;
-            animation: fadeInAndSlideUp 0.5s ease-out forwards;
-            width: 100%;
-            white-space: pre-wrap;
-            overflow-wrap: break-word;
-            word-break: break-word;
-            text-align: left !important;
+            animation: fadeIn 0.5s ease-out forwards;
             color: var(--text-primary) !important;
         }
 
-        @keyframes fadeInAndSlideUp {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
         }
 
         .response-header {
-            font-size: 1.2rem !important;
+            font-size: 1.3rem !important;
             font-weight: 600 !important;
-            color: var(--primary-color) !important;
+            color: var(--accent-primary) !important;
             margin-bottom: 0.75rem !important;
             display: flex !important;
             align-items: center !important;
             gap: 0.5rem !important;
-            text-align: left !important;
-            width: 100%;
         }
 
         .response-icon {
-            font-size: 1.3rem !important;
-            color: var(--primary-color) !important;
+            font-size: 1.5rem !important;
         }
 
         .divider {
             border: none !important;
-            border-top: 1px solid var(--border-color) !important;
+            border-top: 1px dashed var(--border-color) !important;
             margin: 1rem 0 !important;
         }
 
         .error-message {
             background-color: var(--error-bg) !important;
-            border: 1px solid var(--error-border) !important;
             color: var(--error-text) !important;
             padding: 1rem !important;
             border-radius: 8px !important;
             display: flex !important;
-            align-items: flex-start !important;
+            align-items: center !important;
             gap: 0.5rem !important;
-            font-size: 0.9rem !important;
-            font-weight: 500 !important;
-            line-height: 1.5 !important;
-            text-align: left !important;
-            width: 100%;
-            box-sizing: border-box;
-        }
-
-        .error-message a {
-            color: var(--error-text) !important;
-            text-decoration: underline !important;
         }
 
         .error-icon {
             font-size: 1.2rem !important;
-            line-height: 1 !important;
-            margin-top: 0.1rem !important;
         }
 
         .placeholder {
-            background-color: #FFFFFF !important;
-            border: 1px dashed var(--border-color) !important;
-            border-radius: 8px !important;
-            padding: 2rem 1.5rem !important;
-            text-align: center !important;
             color: var(--text-secondary) !important;
             font-style: italic !important;
-            font-size: 1rem !important;
-            width: 100%;
-            box-sizing: border-box;
-        }
-
-        .examples-section .gr-samples-table {
-            border: 1px solid var(--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.75rem 1rem !important;
-            border: none !important;
-            font-size: 0.95rem !important;
-            text-align: left !important;
-            color: var(--text-primary) !important;
-        }
-
-        .examples-section .gr-samples-table th {
-            background-color: #F5F5F5 !important;
-            font-weight: 600 !important;
-            color: var(--text-primary) !important;
-        }
-
-        .examples-section .gr-samples-table td {
-            background-color: #FFFFFF !important;
-            color: var(--text-primary) !important;
-            border-top: 1px solid var(--border-color) !important;
-            cursor: pointer !important;
-            transition: background 0.2s ease !important;
-        }
-
-        .examples-section .gr-samples-table tr:hover td {
-            background-color: #F9F9F9 !important;
-        }
-
-        .gr-examples .gr-label,
-        .gr-examples .label-wrap,
-        .gr-examples .gr-accordion-header {
-            display: none !important;
+            text-align: center !important;
+            padding: 2rem !important;
         }
 
+        /* Footer */
         .app-footer-wrapper {
-            background-color: var(--background-card) !important;
+            background: linear-gradient(135deg, var(--background-primary), var(--background-secondary)) !important;
+            border: 1px solid var(--border-color) !important;
             border-radius: 12px !important;
             padding: 1.5rem !important;
             margin-top: 2rem !important;
             text-align: center !important;
-            color: var(--text-primary) !important;
-            box-shadow: var(--shadow-sm) !important;
         }
 
         .app-footer p {
-            margin: 0 !important;
-            font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
-            line-height: 1.5 !important;
-            background-color: transparent !important;
-            text-align: center !important;
-        }
-
-        .app-footer strong, .app-footer b {
-            font-weight: 600 !important;
-            color: var(--primary-color) !important;
+            font-size: 0.9rem !important;
         }
 
         .app-footer a {
-            color: var(--primary-color) !important;
+            color: var(--accent-primary) !important;
             text-decoration: underline !important;
-            font-weight: 500 !important;
         }
 
         .app-footer a:hover {
             text-decoration: none !important;
         }
 
+        /* Responsive Design */
         @media (max-width: 768px) {
             .gradio-container {
                 padding: 1rem !important;
-                margin: 1rem auto !important;
+                margin: 1rem !important;
             }
-
             .app-header-title {
                 font-size: 2rem !important;
             }
-
-            .app-header-tagline {
-                font-size: 1rem !important;
-            }
-
             .section-title {
                 font-size: 1.3rem !important;
             }
-
-            .input-column {
-                flex-direction: column !important;
-            }
-
-            .button-row {
-                flex-direction: column !important;
-                gap: 0.75rem !important;
-            }
-
             .gradio-button {
                 width: 100% !important;
             }
-
-            .section-title-gradient-bar {
-                padding: 0.75rem 1rem !important;
-            }
-
-            .dashboard-card-content-area {
-                padding: 1rem !important;
-            }
-
-            .output-content-wrapper {
-                min-height: 100px !important;
-            }
-
-            .placeholder {
-                padding: 1.5rem 1rem !important;
-                font-size: 0.9rem !important;
-            }
         }
         """
 
-        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
+        # Use a professional Gradio theme with custom hues
+        custom_theme = gr.themes.Soft(
+            primary_hue="teal",
+            secondary_hue="gray",
+            neutral_hue="stone"
+        )
+
+        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(
                     """
@@ -930,7 +721,7 @@ Answer:"""
                     <style>
                         .custom-link {{
                             font-weight: bold !important;
-                            color: var(--primary-color) !important;
+                            color: var(--accent-primary) !important;
                             text-decoration: underline;
                         }}
                     </style>
@@ -945,7 +736,7 @@ Answer:"""
                 outputs=output,
                 api_name="submit_query"
             )
-
+            
             clear_button.click(
                 fn=lambda: (
                     "", "", initial_value_radio, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
@@ -955,7 +746,6 @@ Answer:"""
             )
 
             return demo
-
 # --- Main Execution Block (UNCHANGED from original logic) ---
 if __name__ == "__main__":
     logging.info("Starting Landlord-Tenant Rights Bot application...")