UI v31

app.py

@@ -239,7 +239,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 BASED ON IMAGE) ---
+    # --- GRADIO INTERFACE (NEW UI DESIGN BASED ON VERBAL REQUIREMENTS) ---
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
             if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
@@ -286,43 +286,41 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
-        # Custom CSS for the dark theme based on the provided image and latest requests
+        # Custom CSS for the light theme with clear boxes and dynamic effects
         custom_css = """
         /* 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 theming - based on image's dark theme */
+        /* Root variables for consistent theming - based on verbal instructions */
         :root {
-            --primary-color: hsl(150, 60%, 50%); /* Vibrant Seafoam Green for highlights (Submit button, focus) */
-            --primary-hover: hsl(150, 60%, 45%);
-            --accent-orange: hsl(30, 90%, 55%); /* Vibrant Orange for specific highlights (Disclaimer) */
+            --primary-color: hsl(150, 60%, 35%); /* Darker Seafoam Green (for text, links, primary button) */
+            --primary-hover: hsl(150, 60%, 30%);
+            --accent-orange: hsl(30, 90%, 55%); /* Vibrant Orange for Disclaimer */
             
-            --background-app: hsl(210, 15%, 15%); /* Dark charcoal/navy for overall background */
-            --background-card: hsl(210, 30%, 20%); /* Deep blue for main content cards (image primary blue) */
-            --background-input-output: hsl(0, 0%, 100%); /* PURE WHITE for input/output elements (as per latest request) */
+            --background-app: hsl(180, 20%, 98%); /* Very light, off-white seafoam for overall background */
+            --background-header: hsl(150, 40%, 92%); /* Slightly more saturated light seafoam for header */
+            --background-card: hsl(0, 0%, 100%); /* Pure white for content cards */
+            --background-input-output: hsl(0, 0%, 100%); /* Pure white for input/output elements */
             
-            --text-on-dark: hsl(0, 0%, 95%); /* Very light text (white/light gray) for dark backgrounds */
-            --text-dark: hsl(210, 20%, 20%); /* Dark text for light backgrounds (input/output text) */
+            --text-dark: hsl(210, 20%, 20%); /* Dark text for readability on light backgrounds */
+            --text-light: hsl(210, 10%, 30%); /* Slightly lighter dark for general text on white cards */
             
-            --text-muted-on-dark: hsl(210, 10%, 70%); /* Muted light text for secondary info on dark backgrounds */
-            --text-muted-on-input: hsl(210, 15%, 55%); /* Muted blue-gray for placeholders on white input fields */
+            --text-muted: hsl(210, 10%, 50%); /* Muted gray for secondary info/placeholders */
             
-            --border-card: hsl(210, 10%, 65%); /* Light gray for outer card borders (from image) */
-            --border-input: hsl(210, 15%, 45%); /* Mid-tone blue-gray for borders on inner elements (original image) */
-            --border-white-input: hsl(210, 5%, 80%); /* Light gray border for white input fields (new) */
+            --border-card: hsl(210, 10%, 85%); /* Light gray border for cards */
+            --border-input: hsl(210, 10%, 75%); /* Slightly darker gray for input borders */
+            --border-focus: var(--primary-color); /* Primary color for focus borders */
 
-            --shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
-            --shadow-md: 0 4px 10px rgba(0,0,0,0.3);
-            --shadow-lg: 0 10px 20px rgba(0,0,0,0.4);
+            --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
+            --shadow-md: 0 4px 10px rgba(0,0,0,0.15);
+            --shadow-lg: 0 10px 20px rgba(0,0,0,0.25);
             
-            --error-bg: hsl(0, 70%, 20%);
-            --error-border: hsl(0, 70%, 35%);
-            --error-text: hsl(0, 90%, 80%);
+            --error-bg: hsl(0, 80%, 95%);
+            --error-border: hsl(0, 70%, 80%);
+            --error-text: hsl(0, 70%, 40%);
             
-            --button-secondary-bg: hsl(0, 0%, 85%); /* Light gray button */
-            --button-secondary-text: hsl(210, 30%, 20%); /* Dark text for secondary button */
-
-            --link-footer-color: var(--primary-color); /* GREEN for footer links (as per latest request, overrides image) */
+            --button-secondary-bg: hsl(210, 10%, 92%); /* Light gray for secondary button */
+            --button-secondary-text: hsl(210, 20%, 30%); /* Dark text for secondary button */
         }
         
         /* Body and Gradio Container */
@@ -335,15 +333,14 @@ Answer:"""
             padding: 1.5rem !important;
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
             background-color: var(--background-app) !important; /* Overall background */
-            box-shadow: none !important;
-            border: 2px solid var(--border-card) !important; /* Outer border as per image */
+            box-shadow: none !important; /* Remove outer shadow */
             border-radius: 16px !important;
         }
 
-        /* Header Styling (title box) - background matches other cards, not different */
+        /* Header Styling (title box) - distinct background */
         .app-header-wrapper {
-            background: var(--background-card) !important; /* Consistent deep blue with other cards (as per image) */
-            border: 2px solid var(--border-card) !important; /* Border for header is the same as card border */
+            background: var(--background-header) !important; /* Distinct light seafoam background */
+            border: 2px solid var(--border-card) !important; /* Consistent border with cards */
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important;
             margin-bottom: 1.5rem !important;
@@ -351,7 +348,7 @@ Answer:"""
             box-shadow: var(--shadow-md) !important;
             position: relative;
             overflow: hidden;
-            color: var(--text-on-dark) !important;
+            color: var(--text-dark) !important; /* Dark text on light header */
         }
         .app-header-wrapper::before { /* Subtle background pattern */
             content: '';
@@ -360,8 +357,8 @@ Answer:"""
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at top left, rgba(60,179,113,0.08) 0%, transparent 40%),
-                        radial-gradient(circle at bottom right, rgba(60,179,113,0.08) 0%, transparent 40%);
+            background: radial-gradient(circle at top left, rgba(60,179,113,0.05) 0%, transparent 40%),
+                        radial-gradient(circle at bottom right, rgba(60,179,113,0.05) 0%, transparent 40%);
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
@@ -370,7 +367,7 @@ Answer:"""
             font-size: 4.5rem !important; /* Larger icon */
             margin-bottom: 0.75rem !important;
             display: block !important;
-            color: var(--border-card) !important; /* Light gray for icon as per image */
+            color: var(--primary-color) !important; /* Primary color for icon */
             position: relative;
             z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
@@ -384,7 +381,7 @@ Answer:"""
             font-family: 'Poppins', sans-serif !important;
             font-size: 3rem !important;
             font-weight: 800 !important; /* Bold */
-            color: var(--text-on-dark) !important; /* White for title */
+            color: var(--primary-color) !important; /* Primary color for title */
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
             letter-spacing: -0.03em !important;
@@ -393,7 +390,7 @@ Answer:"""
         }
         .app-header-tagline {
             font-size: 1.25rem !important;
-            color: var(--text-on-dark) !important; /* White for tagline */
+            color: var(--text-light) !important; /* Muted text for tagline */
             font-weight: 400 !important;
             margin: 0 !important;
             max-width: 700px;
@@ -410,50 +407,50 @@ Answer:"""
             gap: 1.25rem !important;
         }
         .dashboard-card-section {
-            background: var(--background-card) !important; /* Deep blue for content cards */
-            border: 2px solid var(--border-card) !important; /* Border for all cards */
+            background: var(--background-card) !important; /* Pure white for content cards */
+            border: 2px solid var(--border-card) !important; /* Clear light gray border */
             border-radius: 12px !important;
             padding: 1.75rem !important;
             box-shadow: var(--shadow-sm) !important;
             transition: all 0.3s ease-out !important;
             cursor: default;
-            color: var(--text-on-dark) !important; /* Ensure card content text is light */
+            color: var(--text-light) !important; /* Dark text on white cards */
         }
         .dashboard-card-section:hover {
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-3px) !important;
         }
 
-        /* Section Titles (e.g., "Welcome & Disclaimer") - now centered */
+        /* Section Titles (e.g., "Welcome & Disclaimer") - now centered and bold */
         .sub-section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important;
             font-weight: 700 !important; /* Bold */
-            color: var(--text-on-dark) !important; /* White for titles */
-            text-align: center !important; /* CENTERED as per latest request */
+            color: var(--primary-color) !important; /* Primary color for titles */
+            text-align: center !important; /* CENTERED */
             margin: 0 0 1.25rem 0 !important;
             padding-bottom: 0.75rem !important;
-            border-bottom: 1px dashed rgba(255, 255, 255, 0.15) !important; /* Subtle light dashed line as separator */
+            border-bottom: 2px solid var(--primary-color) !important; /* Consistent "blue line" (now green) */
             display: block !important;
             letter-spacing: -0.01em !important;
         }
         .dashboard-card-section p {
             line-height: 1.7 !important;
-            color: var(--text-on-dark) !important; /* Text on dark cards is white */
+            color: var(--text-light) !important; /* General text on white cards */
             font-size: 1rem !important;
         }
         .dashboard-card-section strong {
             color: var(--accent-orange) !important; /* Orange for specific strong text (e.g., Disclaimer) */
         }
 
-        /* Input Styling (textboxes, dropdowns) - now pure white backgrounds */
+        /* Input Styling (textboxes, dropdowns) - pure white backgrounds */
         .gradio-textbox textarea,
         .gradio-textbox input,
         .gradio-dropdown > div > input[type="text"],
         .gradio-dropdown .primary-wrap,
         .gradio-dropdown .scroll-hide {
-            background: var(--background-input-output) !important; /* PURE WHITE background for inputs */
-            border: 2px solid var(--border-white-input) !important; /* Light gray border for white inputs */
+            background: var(--background-input-output) !important; /* Pure white background for inputs */
+            border: 2px solid var(--border-input) !important; /* Light gray border for inputs */
             border-radius: 8px !important;
             padding: 0.85rem 1rem !important;
             font-size: 0.98rem !important;
@@ -464,7 +461,7 @@ Answer:"""
         }
         .gradio-textbox textarea::placeholder,
         .gradio-textbox input::placeholder {
-            color: var(--text-muted-on-input) !important; /* Muted blue-gray placeholder text */
+            color: var(--text-muted) !important; /* Muted gray placeholder text */
             opacity: 0.7;
         }
         .gradio-textbox textarea:focus,
@@ -472,13 +469,13 @@ Answer:"""
         .gradio-dropdown > div > input[type="text"]:focus,
         .gradio-dropdown .primary-wrap.focused {
             outline: none !important;
-            border-color: var(--primary-color) !important; /* Green border on focus */
-            box-shadow: 0 0 0 4px rgba(60, 179, 113, 0.3) !important; /* Green glow on focus */
+            border-color: var(--border-focus) !important; /* Primary color border on focus */
+            box-shadow: 0 0 0 4px rgba(60, 179, 113, 0.2) !important; /* Green glow on focus */
         }
         .gradio-textbox label,
         .gradio-dropdown label {
             font-weight: 600 !important;
-            color: var(--text-on-dark) !important; /* Labels (on dark card background) are white */
+            color: var(--text-light) !important; /* Labels on white cards */
             font-size: 1rem !important;
             margin-bottom: 0.6rem !important;
             display: block !important;
@@ -486,7 +483,7 @@ Answer:"""
         .gradio-textbox .gr-form,
         .gradio-dropdown .gr-form {
             font-size: 0.9rem !important;
-            color: var(--text-muted-on-dark) !important; /* Info text (on dark card background) is muted light */
+            color: var(--text-muted) !important; /* Info text on white cards */
             margin-top: 0.4rem !important;
         }
         .input-row {
@@ -532,10 +529,10 @@ Answer:"""
         .gr-button-secondary {
             background: var(--button-secondary-bg) !important; /* Light gray button */
             color: var(--button-secondary-text) !important; /* Dark text */
-            border-color: var(--border-card) !important; /* Border matches general card border */
+            border-color: var(--border-input) !important; /* Border matches input fields */
         }
         .gr-button-secondary:hover {
-            background: hsl(0, 0%, 75%) !important; /* Darker gray on hover */
+            background: hsl(210, 10%, 85%) !important; /* Darker gray on hover */
             border-color: var(--primary-color) !important; /* Green border on hover */
             transform: translateY(-2px) !important;
         }
@@ -544,10 +541,10 @@ Answer:"""
             box-shadow: none !important;
         }
 
-        /* Output Styling - now pure white background */
+        /* Output Styling - pure white background */
         .output-content-wrapper {
-            background: var(--background-input-output) !important; /* PURE WHITE background for output box */
-            border: 2px dashed var(--border-input) !important; /* Dashed light blue-gray border */
+            background: var(--background-input-output) !important; /* Pure white background for output box */
+            border: 2px dashed var(--border-input) !important; /* Dashed gray border */
             border-radius: 8px !important;
             padding: 1.5rem !important;
             min-height: 150px !important;
@@ -586,7 +583,7 @@ Answer:"""
         }
         .divider {
             border: none !important;
-            border-top: 1px dashed var(--border-input) !important; /* Dashed light blue-gray divider */
+            border-top: 1px dashed var(--border-input) !important; /* Dashed light gray divider */
             margin: 1rem 0 !important;
         }
         .error-message {
@@ -621,19 +618,19 @@ Answer:"""
             opacity: 0.8;
         }
         .placeholder {
-            background: var(--background-input-output) !important; /* PURE WHITE background for placeholder */
-            border: 2px dashed var(--border-input) !important; /* Dashed light blue-gray border */
+            background: var(--background-input-output) !important; /* Pure white background for placeholder */
+            border: 2px dashed var(--border-input) !important; /* Dashed light gray border */
             border-radius: 8px !important;
             padding: 2.5rem 1.5rem !important;
             text-align: center !important;
-            color: var(--text-muted-on-input) !important; /* Muted blue-gray text for placeholder */
+            color: var(--text-muted) !important; /* Muted gray text for placeholder */
             font-style: italic !important;
             font-size: 1.1rem !important;
             width: 100%;
             box-sizing: border-box;
         }
 
-        /* Examples Table Styling - now pure white background rows */
+        /* Examples Table Styling - pure white background rows */
         .examples-section .gr-samples-table {
             border: 2px solid var(--border-card) !important; /* Outer table border matches cards */
             border-radius: 8px !important;
@@ -648,14 +645,14 @@ Answer:"""
             text-align: left !important;
         }
         .examples-section .gr-samples-table th {
-            background: var(--background-card) !important; /* Deep blue for example header */
+            background: var(--background-card) !important; /* White for example header */
             font-weight: 700 !important;
-            color: var(--text-on-dark) !important; /* White text for header */
+            color: var(--primary-color) !important; /* Primary color for header text */
         }
         .examples-section .gr-samples-table td {
-            background: var(--background-input-output) !important; /* PURE WHITE for example rows */
+            background: var(--background-input-output) !important; /* Pure white for example rows */
             color: var(--text-dark) !important; /* Dark text for example rows */
-            border-top: 1px solid var(--border-input) !important; /* Mid-tone blue-gray border between rows */
+            border-top: 1px solid var(--border-input) !important; /* Light gray border between rows */
             cursor: pointer !important;
             transition: background 0.2s ease, transform 0.1s ease !important;
         }
@@ -671,22 +668,22 @@ Answer:"""
         
         /* Footer Styling */
         .app-footer-wrapper {
-            background: var(--background-card) !important; /* Deep blue for footer */
+            background: var(--background-card) !important; /* White for footer */
             border: 2px solid var(--border-card) !important;
             border-radius: 12px !important;
             padding: 1.75rem !important;
             margin-top: 1.5rem !important;
             text-align: center !important;
-            color: var(--text-muted-on-dark) !important; /* Muted light text for footer */
+            color: var(--text-muted) !important; /* Muted text for footer */
         }
         .app-footer p {
             margin: 0.6rem 0 !important;
             font-size: 0.95rem !important;
-            color: var(--text-muted-on-dark) !important; /* Muted light text */
+            color: var(--text-muted) !important; /* Muted text */
             line-height: 1.6 !important;
         }
         .app-footer a {
-            color: var(--link-footer-color) !important; /* GREEN highlight for links (as per latest request) */
+            color: var(--link-footer-color) !important; /* GREEN highlight for links (same as submit button) */
             text-decoration: none !important;
             font-weight: 600 !important;
             transition: text-decoration 0.2s ease, text-decoration-color 0.2s ease !important;