UI v15

app.py

@@ -5,10 +5,7 @@ from functools import lru_cache
 import re
 
 import gradio as gr
-import gradio.themes as themes # Import gradio.themes
-
 try:
-    # Assuming vector_db.py exists in the same directory or is installed
     from vector_db import VectorDatabase
 except ImportError:
     print("Error: Could not import VectorDatabase from vector_db.py.")
@@ -36,7 +33,7 @@ logging.basicConfig(
     format='%(asctime)s - %(levelname)s - [%(filename)s:%(lineno)d] - %(message)s'
 )
 
-# --- RAGSystem Class (Processing Logic - kept intact as requested) ---
+# --- RAGSystem Class ---
 class RAGSystem:
     def __init__(self, vector_db: Optional[VectorDatabase] = None):
         logging.info("Initializing RAGSystem")
@@ -60,7 +57,7 @@ Statutes from context:
 Context information:
 --- START CONTEXT ---
 {context}
---- END CONCONTEXT ---
+--- END CONTEXT ---
 Answer:"""
         self.prompt_template = PromptTemplate(
             input_variables=["query", "context", "state", "statutes"],
@@ -75,7 +72,7 @@ Answer:"""
         for statute in statutes:
             statute = statute.strip()
             if '§' in statute and any(char.isdigit() for char in statute):
-                if not re.match(r'^\([\w\.]+\)$', statute) and 'http' not in statute:
+                 if not re.match(r'^\([\w\.]+\)$', statute) and 'http' not in statute:
                     if len(statute) > 5:
                         valid_statutes.append(statute)
 
@@ -83,7 +80,7 @@ Answer:"""
             seen = set()
             unique_statutes = [s for s in valid_statutes if not (s.rstrip('.,;') in seen or seen.add(s.rstrip('.,;')))]
             logging.info(f"Extracted {len(unique_statutes)} unique statutes.")
-            return "\n".join(f"- {s}" for unique_statutes)
+            return "\n".join(f"- {s}" for s in unique_statutes)
 
         logging.info("No statutes found matching the pattern in the context.")
         return "No specific statutes found in the provided context."
@@ -172,7 +169,7 @@ Answer:"""
 
             if not answer_text:
                 logging.warning("LLM returned an empty answer.")
-                answer_text = "<div class='error-message'><span class='error-icon'>⚠️</span>The AI model returned an empty response. This might be due to the query, context limitations, or temporary issues. Please try rephrasing your question or try again later.</div>"
+                answer_text = "<div class='error-message'>The AI model returned an empty response. This might be due to the query, context limitations, or temporary issues. Please try rephrasing your question or try again later.</div>"
             else:
                 logging.info("LLM generated answer successfully.")
 
@@ -192,10 +189,10 @@ Answer:"""
                 error_message = "Error: The request was too long for the AI model. This can happen with very complex questions or extensive retrieved context."
                 details = "Try simplifying your question or asking about a more specific aspect."
             elif "timeout" in str(e).lower():
-                error_message = "Error: The request to the AI model timed out. The service might be busy."
-                details = "Please try again in a few moments."
+                 error_message = "Error: The request to the AI model timed out. The service might be busy."
+                 details = "Please try again in a few moments."
 
-            formatted_error = f"<div class='error-message'><span class='error-icon'>❌</span>{error_message}</div>"
+            formatted_error = f"<div class='error-message'>{error_message}</div>"
             if details:
                 formatted_error += f"<div class='error-details'>{details}</div>"
 
@@ -223,7 +220,6 @@ Answer:"""
             raise FileNotFoundError(f"PDF file not found: {pdf_path}")
         try:
             logging.info(f"Attempting to load/verify data from PDF: {pdf_path}")
-            # Assuming process_and_load_pdf is part of VectorDatabase and correctly implemented
             num_states_processed = self.vector_db.process_and_load_pdf(pdf_path)
             doc_count = self.vector_db.document_collection.count()
             state_count = self.vector_db.state_collection.count()
@@ -241,12 +237,15 @@ 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 (Refactored to use earneleh/paris theme) ---
+    # --- GRADIO INTERFACE ---
     def gradio_interface(self):
+        # Wrapper function for the Gradio interface logic
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
-            # Basic client-side validation for immediate feedback (redundant but good UX)
+            logging.info(f"Gradio interface received query: '{query[:50]}...', state: '{state}'")
+
+            # Re-validate inputs robustly
             if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
-                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.</div>"
+                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>Get one here</a>.</div>"
             if not state or state == "Select a state..." or "Error" in state:
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the dropdown.</div>"
             if not query or not query.strip():
@@ -254,485 +253,785 @@ Answer:"""
 
             # Call the core processing logic
             result = self.process_query(query=query, state=state, openai_api_key=api_key)
-            answer = result.get("answer", "<div class='error-message'><span class='error-icon'>⚠️</span>An unexpected error occurred.</div>")
 
-            # Check if the answer already contains an error message (from deeper within process_query)
-            if "<div class='error-message'>" in answer:
-                return answer # Return the pre-formatted error message directly
+            # Format the response for display
+            answer = result.get("answer", "<div class='error-message'><span class='error-icon'>⚠️</span>An unexpected error occurred, and no answer was generated. Please check the logs or try again.</div>")
+
+            # Add a header *only* if the answer is not an error message itself
+            if not "<div class='error-message'>" in answer:
+                 formatted_response = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
+            else:
+                 formatted_response = answer # Pass through error messages directly
+
+            # Log context length for debugging (optional)
+            context_used = result.get("context_used", "N/A")
+            if isinstance(context_used, str) and "N/A" not in context_used:
+                logging.debug(f"Context length used for query: {len(context_used)} characters.")
             else:
-                # Format the successful response with the new UI structure
-                formatted_response = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
-                return formatted_response
+                logging.debug(f"No context was used or available for this query ({context_used}).")
 
+            return formatted_response
+
+        # --- Get Available States for Dropdown ---
         try:
             available_states_list = self.get_states()
-            dropdown_choices = ["Select a state..."] + (available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"])
-            initial_value = dropdown_choices[0]
-        except Exception: # Catch-all for safety
+            if not available_states_list or "Error" in available_states_list[0]:
+                dropdown_choices = ["Error: Could not load states"]
+                initial_value = dropdown_choices[0]
+                logging.error("Could not load states for dropdown. UI will show error.")
+            else:
+                dropdown_choices = ["Select a state..."] + available_states_list
+                initial_value = dropdown_choices[0]
+        except Exception as e:
+            logging.error(f"Unexpected critical error getting states: {e}", exc_info=True)
             dropdown_choices = ["Error: Critical failure loading states"]
             initial_value = dropdown_choices[0]
 
-        # Define example queries, filtering based on available states
+        # --- Prepare Example Queries ---
         example_queries_base = [
             ["What are the rules for security deposit returns?", "California"],
             ["Can a landlord enter my apartment without notice?", "New York"],
             ["My landlord hasn't made necessary repairs. What can I do?", "Texas"],
-            ["How much notice must a landlord give to raise rent?", "Florida"],
-            ["What is an implied warranty of habitability?", "Illinois"]
+            ["What are the limits on rent increases in my state?", "Florida"],
+            ["Is my lease automatically renewed if I don't move out?", "Illinois"],
+            ["What happens if I break my lease early?", "Washington"]
         ]
         example_queries = []
-        if available_states_list and "Error" not in available_states_list[0] and len(available_states_list) > 0:
+        if available_states_list and "Error" not in available_states_list[0]:
             loaded_states_set = set(available_states_list)
-            # Filter for examples whose state is in the loaded states
             example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
-            # Add a generic example if no specific state examples match or if list is empty
-            if not example_queries:
-                example_queries.append(["What basic rights do tenants have?", available_states_list[0] if available_states_list else "California"])
-        else: # Fallback if states list is problematic
-            example_queries.append(["What basic rights do tenants have?", "California"])
+        if not example_queries:
+             fallback_state = available_states_list[0] if available_states_list and "Error" not in available_states_list[0] else "California"
+             example_queries.append(["What basic rights do tenants have?", fallback_state])
 
-
-        # --- Minimal Custom CSS for structural/behavioral overrides not covered by the theme ---
-        # This CSS focuses on animations, specific layout tweaks, and hiding unwanted Gradio default elements.
+        # --- Refined Custom CSS ---
         custom_css = """
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700;800;900&display=swap');
-        /* Animation for header */
-        @keyframes fadeInSlideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
-        /* General layout adjustments to Gradio's base container */
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+        /* --- CSS Variables for Theme Consistency --- */
+        :root {
+            --primary-color: #2563EB; /* Tailwind Blue 600 */
+            --primary-hover: #1D4ED8; /* Tailwind Blue 700 */
+            --secondary-color: #4B5563; /* Gray 600 */
+            --secondary-hover: #374151; /* Gray 700 */
+            --text-primary: #111827; /* Gray 900 */
+            --text-secondary: #6B7280; /* Gray 500 */
+            --background: #F3F4F6; /* Gray 100 */
+            --card-background: #FFFFFF; /* White */
+            --border-color: #D1D5DB; /* Gray 300 */
+            --shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06); /* Softer, layered shadow */
+            --error-bg: #FEF2F2; /* Red 50 */
+            --error-border: #FECACA; /* Red 300 */
+            --error-accent: #EF4444; /* Red 500 */
+            --error-text: #B91C1C; /* Red 700 */
+            --success-bg: #F0FDF4; /* Green 50 */
+            --success-border: #A7F3D0; /* Green 300 */
+            --success-text: #15803D; /* Green 700 */
+            --divider: #E5E7EB; /* Gray 200 */
+            --focus-ring: rgba(37, 99, 235, 0.3); /* Based on new primary */
+        }
+
+        /* Dark Mode Variables */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --primary-color: #3B82F6; /* Tailwind Blue 500 (lighter for dark mode primary) */
+                --primary-hover: #60A5FA; /* Tailwind Blue 400 */
+                --text-primary: #F3F4F6; /* Gray 100 */
+                --text-secondary: #9CA3AF; /* Gray 400 */
+                --background: #111827; /* Gray 900 (very dark) */
+                --card-background: #1F2937; /* Gray 800 (main content card bg) */
+                --border-color: #4B5563; /* Gray 600 */
+                --shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
+                --error-bg: #450A0A; /* Darker Red */
+                --error-border: #7F1D1D; /* Darker Red */
+                --error-accent: #F87171; /* Lighter Red for accent */
+                --error-text: #FECACA; /* Lighter Red for text */
+                --success-bg: #064E3B; /* Darker Green */
+                --success-border: #15803D; /* Darker Green */
+                --success-text: #A7F3D0; /* Lighter Green */
+                --divider: #374151; /* Gray 700 */
+                --focus-ring: rgba(59, 130, 246, 0.4);
+            }
+        }
+
+        /* --- Base & Body --- */
+        body, .gradio-container {
+            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
+            background: var(--background) !important;
+            color: var(--text-primary) !important;
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            font-size: 15px; /* Slightly smaller base font */
+            line-height: 1.6; /* Increased line height for readability */
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        * {
+            box-sizing: border-box;
+        }
+
+        /* --- Main Content Container --- */
         .gradio-container > .flex.flex-col {
-            max-width: 1120px;
+            max-width: 960px; /* Slightly narrower for focus */
             margin: 0 auto !important;
-            padding: 0 !important; /* Remove default Gradio padding */
-            gap: 0 !important; /* Remove default Gradio gap */
+            padding: 2.5rem 1.5rem !important; /* Adjusted padding */
+            gap: 2rem !important; /* Adjusted gap */
+            background: transparent !important;
+        }
+
+        /* --- Card Styling --- */
+        .card-style {
+            background: var(--card-background) !important;
+            border: 1px solid var(--border-color) !important;
+            border-radius: 12px !important; /* More modern radius */
+            padding: 1.75rem !important; /* Adjusted padding */
+            box-shadow: var(--shadow) !important;
+            transition: transform 0.2s ease, background 0.2s ease, border 0.2s ease;
         }
-        /* Header specific styling */
-        .app-header-wrapper {
-            padding: 4.5rem 3.5rem !important;
+        .card-style:hover {
+            transform: translateY(-2px);
+        }
+
+        /* --- Header Section --- */
+        .header-section {
+            background: var(--primary-color) !important; /* Solid primary color */
+            border-radius: 12px !important;
+            padding: 2.5rem 2rem !important;
             text-align: center !important;
-            border-bottom-left-radius: 24px;
-            border-bottom-right-radius: 24px;
+            color: #FFFFFF !important;
+            box-shadow: var(--shadow) !important;
             position: relative;
             overflow: hidden;
-            z-index: 10;
-            margin-bottom: 2rem; /* Reduced margin */
-            border: 3px solid var(--border-color-primary) !important; /* Thicker border */
-            border-top: none;
-            max-width: 1120px;
-            margin-left: auto;
-            margin-right: auto;
-            width: 100%;
-            /* Enhanced background */
-            background-image: linear-gradient(135deg, var(--background-fill-primary) 0%, var(--background-fill-secondary) 100%);
-            box-shadow: 0 10px 30px rgba(0,0,0,0.4); /* More pronounced shadow */
-        }
-        .app-header { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
-        .app-header-logo {
-            font-size: 5.5rem; margin-bottom: 0.8rem; line-height: 1;
-            filter: drop-shadow(0 0 15px var(--primary-500));
-            transform: translateY(-40px); opacity: 0;
-            animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.3s;
-        }
-        .app-header-title {
-            font-family: 'Playfair Display', serif !important;
-            font-size: 4.2rem; font-weight: 900;
-            margin: 0 0 0.8rem 0; letter-spacing: -0.07em;
-            text-shadow: 0 8px 16px rgba(0,0,0,0.5);
-            transform: translateY(-40px); opacity: 0;
-            animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.6s;
-        }
-        .app-header-tagline {
-            font-family: 'Inter', sans-serif !important;
-            font-size: 1.6rem; font-weight: 300;
-            opacity: 0.9; max-width: 900px;
-            transform: translateY(-40px); opacity: 0;
-            animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.9s;
-        }
-        /* Main dashboard container */
-        .main-dashboard-container {
-            border-radius: 24px;
-            border: 3px solid var(--border-color-primary) !important; /* Thicker border */
-            padding: 3.5rem !important;
-            margin: 0 auto 0.6rem auto; /* Reduced margin-bottom */
-            z-index: 1; position: relative;
-            display: flex; flex-direction: column; gap: 2rem; /* Reduced gap between boxes */
-            max-width: 1120px;
-        }
-        /* Card sections within the dashboard */
-        .dashboard-card-section {
-            border-radius: 12px;
-            border: 3px solid var(--border-color-primary); /* Thicker border */
-            padding: 2.5rem;
-            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-            display: flex; flex-direction: column; gap: 1.5rem;
-        }
-        /* Light mode specific inner shadow for card sections */
-        @media (prefers-color-scheme: light) {
-            .dashboard-card-section { box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
-        }
-        /* Section titles */
-        .sub-section-title {
-            font-family: 'Playfair Display', serif !important;
-            font-size: 3.0rem !important; /* Increased font size */
-            font-weight: 800 !important;
-            text-align: center !important; /* Already centered, kept */
-            margin-top: 1.5rem !important;
-            margin-bottom: 0.8rem !important;
-            display: block !important;
+        }
+        .header-section::before { /* Subtle background pattern */
+            content: '';
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
+            background-size: 8px 8px;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+        .header-logo {
+            font-size: 2.5rem; /* Adjusted size */
+            margin-bottom: 0.75rem;
+        }
+        .header-title {
+            font-size: 2rem; /* Adjusted size */
+            font-weight: 600; /* Adjusted weight */
+            margin: 0 0 0.5rem 0;
+        }
+        .header-tagline {
+            font-size: 1.1rem; /* Adjusted size */
+            font-weight: 400; /* Adjusted weight */
+            opacity: 0.85;
+        }
+
+        /* --- Introduction Section --- */
+        .intro-card h3 { /* Title like "Know Your Rights" */
+            font-size: 1.5rem; /* Adjusted relative to new base */
+            font-weight: 600;
+            color: var(--primary-color);
+            margin: 0 0 1rem 0;
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid var(--primary-color);
+            display: inline-block;
+        }
+        .intro-card p {
+            font-size: 0.95rem; /* Adjusted relative to new base */
+            line-height: 1.7;
+            color: var(--text-secondary);
+            margin: 0 0 0.75rem 0;
+        }
+        .intro-card a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.2s ease;
+        }
+        .intro-card a:hover {
+            color: var(--primary-hover);
+            text-decoration: underline;
+        }
+        .intro-card strong {
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* --- Input Form Section --- */
+        .input-form-card h3 { /* Title like "Ask Your Question" */
+            font-size: 1.4rem; /* Adjusted */
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 0 0 1.25rem 0;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--divider); /* Thinner divider */
+        }
+        .input-field-group {
+            margin-bottom: 1.25rem;
+        }
+        .input-row {
+            display: flex;
+            gap: 1.25rem;
+            flex-wrap: wrap;
+            margin-bottom: 1.25rem;
+        }
+        .input-field {
+            flex: 1;
+            min-width: 200px; /* Adjusted min-width */
+        }
+        .gradio-textbox textarea,
+        .gradio-dropdown select,
+        .gradio-textbox input[type=password] {
+            border: 1px solid var(--border-color) !important;
+            border-radius: 8px !important; /* Sharper radius */
+            padding: 0.8rem 1rem !important; /* Adjusted padding */
+            font-size: 0.95rem !important; /* Adjusted font size */
+            background: var(--card-background) !important; /* Use card for consistency, can be var(--background) for contrast */
+            color: var(--text-primary) !important;
+            transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
             width: 100% !important;
+            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
+        }
+        .gradio-textbox textarea {
+            min-height: 110px; /* Adjusted height */
+            resize: vertical;
+        }
+        .gradio-textbox textarea:focus,
+        .gradio-dropdown select:focus,
+        .gradio-textbox input[type=password]:focus {
+            border-color: var(--primary-color) !important;
+            box-shadow: 0 0 0 3px var(--focus-ring) !important; /* Slightly smaller focus ring */
+            outline: none !important;
+            /* background: var(--background) !important; */ /* Keep card background on focus or change to main for contrast */
+        }
+        .gradio-input-label,
+        .gradio-output-label {
+            font-size: 0.9rem !important; /* Adjusted */
+            font-weight: 500 !important;
+            color: var(--text-primary) !important;
+            margin-bottom: 0.4rem !important;
+            display: block !important;
+        }
+        .gradio-input-info {
+            font-size: 0.8rem !important; /* Adjusted */
+            color: var(--text-secondary) !important;
+            margin-top: 0.3rem;
+            font-style: italic;
+        }
+        /* Buttons */
+        .button-row {
+            display: flex;
+            gap: 0.75rem; /* Tighter gap */
+            margin-top: 1.25rem;
+            flex-wrap: wrap;
+            justify-content: flex-end;
         }
-        /* Text styling for custom markdown within cards */
-        .dashboard-card-section p, .output-content-wrapper p {
-            font-size: 1.15rem; line-height: 1.8;
-            margin-bottom: 1.2rem;
-        }
-        .dashboard-card-section a, .output-content-wrapper a {
-            text-decoration: none; font-weight: 500;
-        }
-        .dashboard-card-section a:hover, .output-content-wrapper a:hover { text-decoration: underline; }
-        .dashboard-card-section strong, .output-content-wrapper strong { font-weight: 700; }
-        /* Input layout */
-        .input-field-group { margin-bottom: 1rem; }
-        .input-row { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
-        .input-field { flex: 1; }
-        /* Button layout */
-        .button-row { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; justify-content: flex-end; }
         .gradio-button {
-            border-radius: 12px !important;
-            padding: 1.2rem 2.8rem !important;
-            font-size: 1.15rem !important;
-            font-weight: 600 !important;
-            border: 1px solid transparent !important;
-            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
-            transition: all 0.4s cubic-bezier(0.0, 0.0, 0.2, 1);
+            border-radius: 8px !important; /* Sharper radius */
+            padding: 0.75rem 1.5rem !important; /* Adjusted padding */
+            font-size: 0.95rem !important; /* Adjusted font size */
+            font-weight: 500 !important;
+            border: none !important;
+            cursor: pointer;
+            transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; /* More subtle shadow */
+        }
+        .gradio-button:hover:not(:disabled) {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.07) !important;
+        }
+        .gradio-button:active:not(:disabled) {
+            transform: scale(0.98) translateY(0);
         }
-        .gradio-button:hover:not(:disabled) { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important; }
-        .gradio-button:active:not(:disabled) { transform: translateY(-3px); }
         .gradio-button:disabled {
-            box-shadow: none !important;
+            background: var(--border-color) !important;
+            color: var(--text-secondary) !important;
             cursor: not-allowed;
+            box-shadow: none !important;
         }
-        .gr-button-secondary { /* Override for secondary button specific look */
-            background: transparent !important;
-            border: 2px solid var(--neutral-500) !important; /* Used neutral-500 for clearer border */
+        .gr-button-primary {
+            background: var(--primary-color) !important;
+            color: #FFFFFF !important;
+        }
+        .gr-button-primary:hover:not(:disabled) {
+            background: var(--primary-hover) !important;
+        }
+        .gr-button-secondary {
+            background: var(--card-background) !important; /* Changed from transparent */
+            color: var(--text-primary) !important;
+            border: 1px solid var(--border-color) !important;
             box-shadow: none !important;
         }
         .gr-button-secondary:hover:not(:disabled) {
-            background: var(--button-secondary-background-hover) !important;
-            border-color: var(--primary-500) !important;
-        }
-        @media (prefers-color-scheme: light) {
-            .gradio-button { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
-            .gradio-button:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(0,0,0,0.2) !important; }
+            background: var(--background) !important; /* Use main bg for hover */
+            border-color: var(--secondary-hover) !important;
         }
-        /* Output card and placeholders */
-        .output-card { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
+
+        /* --- Output Section --- */
         .output-card .response-header {
-            font-size: 1.8rem; font-weight: 700;
-            margin: 0 0 1rem 0; display: flex; align-items: center; gap: 1.2rem;
-        }
-        .output-card .response-icon { font-size: 2rem; color: var(--primary-500); }
-        .output-card .divider { border: none; border-top: 1px solid var(--border-color-primary); margin: 1.5rem 0 1.8rem 0; }
-        .output-card .output-content-wrapper { font-size: 1.15rem; line-height: 1.8; }
-        .output-card .output-content-wrapper p { margin-bottom: 1rem; }
-        .output-card .output-content-wrapper ul, .output-card .output-content-wrapper ol { margin-left: 2.2rem; margin-bottom: 1.2rem; padding-left: 0; list-style-type: disc; }
-        .output-card .output-content-wrapper ol { list-style-type: decimal; }
-        .output-card .output-content-wrapper li { margin-bottom: 0.8rem; }
+            font-size: 1.3rem; /* Adjusted */
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 0 0 0.75rem 0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .output-card .response-icon {
+            font-size: 1.5rem; /* Adjusted */
+        }
+        .output-card .divider {
+            border: none;
+            border-top: 1px solid var(--divider);
+            margin: 0.75rem 0 1.25rem 0; /* Adjusted margins */
+        }
+        .output-card .output-content-wrapper {
+            font-size: 0.95rem; /* Adjusted */
+            line-height: 1.7; /* Adjusted */
+            color: var(--text-primary);
+        }
+        .output-card .output-content-wrapper p {
+            margin-bottom: 0.85rem;
+        }
+        .output-card .output-content-wrapper ul,
+        .output-card .output-content-wrapper ol {
+            margin-left: 1.25rem;
+            margin-bottom: 0.85rem;
+            padding-left: 0.85rem;
+        }
+        .output-card .output-content-wrapper li {
+            margin-bottom: 0.4rem;
+        }
+        .output-card .output-content-wrapper strong,
+        .output-card .output-content-wrapper b {
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+        .output-card .output-content-wrapper a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+        }
+        .output-card .output-content-wrapper a:hover {
+            color: var(--primary-hover);
+            text-decoration: underline;
+        }
+        /* Error and Success Messages */
+        .output-card .error-message,
+        .output-card .success-message {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.6rem;
+            border-radius: 8px; /* Match other radii */
+            padding: 0.85rem 1.25rem; /* Adjusted padding */
+            margin-top: 0.5rem;
+            font-weight: 500;
+            line-height: 1.5;
+        }
         .output-card .error-message {
-            padding: 1.5rem 2rem; margin-top: 1.5rem; font-size: 1.1rem;
-            border-radius: 12px;
-            background: var(--error-background-fill) !important;
-            color: var(--error-text-color) !important;
-            border: 2px solid var(--error-border-color) !important;
-            display: flex; align-items: flex-start; gap: 1.5em;
-        }
-        .output-card .error-message .error-icon { font-size: 1.8rem; line-height: 1; padding-top: 0.1em; }
-        .output-card .error-details { font-size: 0.95rem; margin-top: 0.8rem; opacity: 0.9; word-break: break-word; }
+            background: var(--error-bg);
+            border: 1px solid var(--error-border);
+            border-left: 3px solid var(--error-accent); /* Thinner accent line */
+            color: var(--error-text);
+        }
+        .output-card .success-message {
+            background: var(--success-bg);
+            border: 1px solid var(--success-border);
+            color: var(--success-text);
+            border-left: 3px solid var(--success-text);
+        }
+        .output-card .error-icon,
+        .output-card .success-icon {
+            font-size: 1.1rem; /* Adjusted */
+            line-height: 1.5;
+            margin-top: 2px; /* Align icon better with text */
+        }
+        .output-card .error-details {
+            font-size: 0.85rem; /* Adjusted */
+            color: var(--error-text); /* Ensure correct text color for dark mode if needed */
+            margin-top: 0.4rem;
+            font-style: italic;
+        }
+        /* Placeholder text */
         .output-card .placeholder {
-            padding: 2.5rem 2rem; font-size: 1.2rem; border-radius: 12px;
-            border: 3px dashed var(--border-color-primary);
-            text-align: center; opacity: 0.8;
+            color: var(--text-secondary);
+            font-style: italic;
+            text-align: center;
+            padding: 1.5rem 1rem; /* Adjusted padding */
+            display: block;
+            font-size: 1rem; /* Adjusted */
         }
-        /* Examples table styling */
-        .examples-section table.gr-samples-table {
-            border-radius: 12px !important;
-            border: 3px solid var(--border-color-primary) !important; /* Thicker border */
+
+        /* --- Examples Section --- */
+        .examples-card .gr-examples-header {
+            font-size: 1.3rem !important; /* Adjusted */
+            font-weight: 600 !important;
+            color: var(--text-primary) !important;
+            margin: 0 0 1.25rem 0 !important;
+            padding-bottom: 0.5rem !important;
+            border-bottom: 1px solid var(--divider) !important; /* Thinner divider */
+        }
+        .examples-card .gr-examples-table {
+            border-collapse: collapse !important;
+            width: 100% !important;
+            background: var(--card-background) !important;
+            border-radius: 8px !important; /* Match other radii */
             overflow: hidden;
-            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
+            border: 1px solid var(--border-color) !important; /* Add outer border to table */
         }
-        @media (prefers-color-scheme: light) {
-            .examples-section table.gr-samples-table { box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
+        .examples-card .gr-examples-table th,
+        .examples-card .gr-examples-table td {
+            text-align: left !important;
+            padding: 0.75rem 1rem !important; /* Adjusted padding */
+            border: 1px solid var(--border-color) !important;
+            font-size: 0.9rem !important; /* Adjusted font size */
+            color: var(--text-primary) !important;
+            background: transparent !important;
         }
-        .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 1rem 1.2rem !important; font-size: 1.05rem !important; border: none !important; }
-        .examples-section table.gr-samples-table th {
-            background: var(--block-background-fill) !important;
-            font-weight: 600 !important; text-align: left;
+        .examples-card .gr-examples-table th {
+            font-weight: 500 !important;
+            background: var(--background) !important; /* Use main bg for header */
         }
-        .examples-section table.gr-samples-table td {
-            border-top: 1px solid var(--border-color-primary) !important;
+        .examples-card .gr-examples-table tr {
             cursor: pointer;
+            transition: background 0.2s ease;
         }
-        .examples-section table.gr-samples-table tr:hover td { background: var(--hover-color) !important; }
-        .examples-section table.gr-samples-table tr:first-child td { border-top: none !important; }
-        /* Footer styling */
-        .app-footer-wrapper {
-            border-top: 3px solid var(--border-color-primary) !important; /* Thicker border */
-            margin-top: 0.5rem;
-            padding-top: 2.5rem;
-            padding-bottom: 2.5rem;
-            border-top-left-radius: 24px;
-            border-top-right-radius: 24px;
-            box-shadow: inset 0 8px 15px rgba(0,0,0,0.2);
-            max-width: 1120px;
-            margin-left: auto;
-            margin-right: auto;
-            width: 100%;
-            display: flex !important;
-            flex-direction: column !important;
-            align-items: flex-start !important;
-        }
-        .app-footer {
-            padding: 0 3.5rem !important;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            width: 100%;
+        .examples-card .gr-examples-table tr:hover td {
+            background: var(--background) !important; /* Use main bg for hover */
         }
-        .app-footer p {
-            font-size: 1.05rem !important;
-            text-align: left !important;
-            margin-bottom: 1rem;
-            padding-left: 2rem; /* Added indent */
-        }
-        .app-footer a { font-weight: 500; }
-        /* Hide default Gradio example labels and related elements for cleaner presentation */
-        .gr-examples .gr-label, .gr-examples button.gr-button-filter, .gr-examples .label-wrap,
-        .gr-examples div[data-testid*="label-text"], .gr-examples span[data-testid*="label-text"],
-        .gr-examples div[class*="label"], .gr-examples .gr-example-label,
-        .gr-examples .gr-box.gr-component.gradio-example > div:first-child:has(> span[data-testid]),
-        .gr-examples .gr-box.gr-component.gradio-example > div:first-child > span,
-        .gr-examples .gr-accordion-header, .gr-examples .gr-accordion-title, .gr-examples .gr-accordion-toggle-icon,
-        .gr-examples .gr-accordion-header button, .gr-examples .gr-button.gr-button-filter,
-        .gr-examples .gr-button.gr-button-primary.gr-button-filter,
-        .gr-examples .gr-examples-header, .gr-examples .gr-examples-header > * {
-            display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important;
-            overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
-            font-size: 0 !important; line-height: 0 !important; position: absolute !important;
-            pointer-events: none !important;
-        }
-        /* Responsive Adjustments */
-        @media (max-width: 1024px) {
-            .gradio-container > .flex.flex-col { max-width: 960px; padding: 0 1.5rem !important; }
-            .app-header-title { font-size: 3.8rem; } .app-header-tagline { font-size: 1.5rem; }
-            .app-header-wrapper { padding: 2.5rem 3.5rem !important; margin-bottom: 1.8rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
-            .main-dashboard-container { padding: 2.5rem !important; margin-bottom: 0.6rem; border-radius: 12px; gap: 1.8rem; } /* Adjusted gap */
-            .dashboard-card-section { padding: 1.8rem; border-radius: 8px; }
-            .sub-section-title { font-size: 2.5rem !important; margin-bottom: 0.7rem !important; } /* Adjusted font size */
-            .input-row { gap: 1.5rem; } .input-field { min-width: 280px; }
-            .gradio-textbox textarea { min-height: 160px; } .output-card .response-header { font-size: 1.7rem; }
-            .examples-section { padding-top: 1.2rem; }
-            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.9rem 1.1rem !important; }
-            .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: 12px; border-top-right-radius: 12px; }
-            .app-footer { padding: 0 1.5rem !important; }
-            .app-footer p { padding-left: 1.5rem; } /* Adjusted indent for smaller screens */
+
+        /* --- Footer Section --- */
+        .footer-section {
+            background: transparent !important;
+            border-top: 1px solid var(--divider) !important;
+            padding: 1.5rem 1rem !important; /* Adjusted padding */
+            margin-top: 1.5rem !important; /* Adjusted margin */
+            text-align: center !important;
+            color: var(--text-secondary) !important;
+            font-size: 0.85rem !important; /* Adjusted font size */
+            line-height: 1.5 !important;
+        }
+        .footer-section strong {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+        .footer-section a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+        }
+        .footer-section a:hover {
+            color: var(--primary-hover);
+            text-decoration: underline;
+        }
+
+        /* --- Accessibility & Focus --- */
+        :focus-visible { /* Standard focus visibility */
+            outline: 2px solid var(--primary-color) !important;
+            outline-offset: 2px;
+        }
+        /* Remove custom box-shadow focus for inputs/selects if :focus-visible is preferred */
+        .gradio-textbox textarea:focus,
+        .gradio-dropdown select:focus,
+        .gradio-textbox input[type=password]:focus {
+            border-color: var(--primary-color) !important;
+            box-shadow: 0 0 0 3px var(--focus-ring) !important; /* Keep this for consistent focus */
+            outline: none !important;
+        }
+        .gradio-button span:focus { /* Remove Gradio's default focus on button text */
+            outline: none !important;
         }
+
+
+        /* --- Responsive Adjustments --- */
         @media (max-width: 768px) {
-            .gradio-container > .flex.flex-col { padding: 0 1rem !important; }
-            .app-header-wrapper { padding: 1.8rem 2.5rem !important; margin-bottom: 1.5rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
-            .app-header-logo { font-size: 4.5rem; margin-bottom: 0.6rem; } .app-header-title { font-size: 3.2rem; letter-spacing: -0.06em; }
-            .app-header-tagline { font-size: 1.3rem; }
-            .main-dashboard-container { padding: 1.8rem !important; margin-bottom: 0.5rem; border-radius: 12px; gap: 1.5rem; } /* Adjusted gap */
-            .dashboard-card-section { padding: 1.5rem; border-radius: 8px; }
-            .sub-section-title { font-size: 2.0rem !important; margin-top: 1rem !important; margin-bottom: 0.6rem !important; } /* Adjusted font size */
-            .input-row { flex-direction: column; gap: 1rem; } .input-field { min-width: 100%; }
-            .gradio-textbox textarea { min-height: 140px; } .button-row { justify-content: stretch; gap: 1rem; }
-            .gradio-button { width: 100%; padding: 1.1rem 2rem !important; font-size: 1.1rem !important; }
-            .output-card .response-header { font-size: 1.5rem; } .output-card .response-icon { font-size: 1.7rem; }
-            .output-card .placeholder { padding: 2.5rem 1.5rem; font-size: 1.1rem; }
-            .examples-section { padding-top: 1.2rem; }
-            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; }
-            .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: 12px; border-top-right-radius: 12px; padding-top: 2rem; padding-bottom: 2rem; }
-            .app-footer { padding: 0 1rem !important; }
-            .app-footer p { padding-left: 1rem; } /* Adjusted indent for smaller screens */
+            body { font-size: 14px; }
+            .gradio-container > .flex.flex-col {
+                padding: 2rem 1rem !important;
+                gap: 1.5rem !important;
+            }
+            .card-style {
+                padding: 1.5rem !important;
+                border-radius: 10px !important;
+            }
+            .header-section {
+                padding: 2rem 1.5rem !important;
+                border-radius: 10px !important;
+            }
+            .header-title { font-size: 1.8rem; }
+            .header-tagline { font-size: 1rem; }
+            .input-row {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            .button-row { justify-content: center; }
+            .intro-card h3, .input-form-card h3, .output-card .response-header, .examples-card .gr-examples-header {
+                font-size: 1.2rem !important;
+            }
         }
         @media (max-width: 480px) {
-            .gradio-container > .flex.flex-col { padding: 0 0.8rem !important; }
-            .app-header-wrapper { padding: 1.2rem 1rem !important; margin-bottom: 1.2rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
-            .app-header-logo { font-size: 3.8rem; margin-bottom: 0.5rem; } .app-header-title { font-size: 2.8rem; }
-            .app-header-tagline { font-size: 1.1rem; }
-            .main-dashboard-container { padding: 1.2rem !important; margin-bottom: 0.4rem; border-radius: 8px; gap: 1.2rem; } /* Adjusted gap */
-            .dashboard-card-section { padding: 1rem; border-radius: 4px; }
-            .sub-section-title { font-size: 1.8rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; } /* Adjusted font size */
-            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 1.05rem !important; padding: 1rem 1.2rem !important; }
-            .gradio-textbox textarea { min-height: 120px; }
-            .gradio-button { padding: 1rem 1.5rem !important; font-size: 1.0rem !important; }
-            .output-card .response-header { font-size: 1.4rem; } .output-card .response-icon { font-size: 1.5rem; }
-            .output-card .placeholder { padding: 2rem 1rem; font-size: 1.05rem; }
-            .examples-section { padding-top: 0.8rem; }
-            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.6rem 0.8rem !important; font-size: 0.95rem !important; }
-            .app-footer-wrapper { margin-top: 0.4rem; border-top-left-radius: 8px; border-top-right-radius: 8px; padding-top: 1.5rem; padding-bottom: 1.5rem; }
-            .app-footer { padding: 0 0.8rem !important; }
-            .app-footer p { padding-left: 0.5rem; } /* Adjusted indent for smallest screens */
+            body { font-size: 14px; } /* Keep 14px or adjust if too small */
+            .gradio-container > .flex.flex-col {
+                padding: 1.25rem 0.75rem !important;
+                gap: 1.25rem !important;
+            }
+            .card-style {
+                padding: 1rem !important;
+                border-radius: 8px !important;
+            }
+            .header-section {
+                padding: 1.5rem 1rem !important;
+                border-radius: 8px !important;
+            }
+            .header-logo { font-size: 2rem; }
+            .header-title { font-size: 1.5rem; }
+            .header-tagline { font-size: 0.9rem; }
+
+            .intro-card h3, .input-form-card h3, .output-card .response-header, .examples-card .gr-examples-header {
+                font-size: 1.1rem !important;
+            }
+            .gradio-textbox textarea,
+            .gradio-dropdown select,
+            .gradio-textbox input[type=password] {
+                font-size: 0.9rem !important;
+                padding: 0.7rem 0.9rem !important;
+            }
+            .gradio-button {
+                width: 100%;
+                padding: 0.7rem 1.25rem !important;
+                font-size: 0.9rem !important;
+            }
+            .button-row {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            .examples-card .gr-examples-table th,
+            .examples-card .gr-examples-table td {
+                padding: 0.5rem 0.7rem !important;
+                font-size: 0.85rem !important;
+            }
+        }
+
+        /* --- Gradio Overrides --- */
+        .gradio-container > .flex {
+            gap: 2rem !important; /* Match main gap */
+        }
+        .gradio-markdown > *:first-child { margin-top: 0; }
+        .gradio-markdown > *:last-child { margin-bottom: 0; }
+        .gradio-dropdown,
+        .gradio-textbox { /* Remove Gradio default borders/padding around components */
+            border: none !important;
+            padding: 0 !important;
+            background: transparent !important;
         }
         """
 
-        with gr.Blocks(theme="earneleh/paris", css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            # --- Header Section ---
-            with gr.Group(elem_classes="app-header-wrapper"):
+        # --- Gradio Blocks Layout ---
+        with gr.Blocks(theme=None, css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
+            # Header Section
+            with gr.Group(elem_classes="header-section"):
                 gr.Markdown(
                     """
-                    <div class="app-header">
-                        <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>
-                    </div>
+                    <span class="header-logo">⚖️</span>
+                    <h1 class="header-title">Landlord-Tenant Rights Assistant</h1>
+                    <p class="header-tagline">Empowering You with State-Specific Legal Insights</p>
+                    """, elem_id="app-title"
+                )
+
+            # Introduction Section
+            with gr.Group(elem_classes="card-style intro-card"):
+                gr.Markdown(
                     """
+                    <h3>Know Your Rights</h3>
+                    <p>Navigate landlord-tenant laws with ease. Enter your <strong>OpenAI API key</strong>, select your state, and ask your question to get detailed, state-specific answers.</p>
+                    <p>Don't have an API key? <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.</p>
+                    <p><strong>Disclaimer:</strong> This tool provides information only, not legal advice. For legal guidance, consult a licensed attorney.</p>
+                    """, elem_id="app-description"
                 )
 
-            # --- Main Dashboard Console Container ---
-            with gr.Column(elem_classes="main-dashboard-container"):
+            # Input Form Section
+            with gr.Group(elem_classes="card-style input-form-card"):
+                gr.Markdown("<h3>Ask Your Question</h3>", elem_id="form-heading")
 
-                # --- Section 1: Introduction and Disclaimer Card ---
-                with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>")
-                    gr.Markdown(
-                        """
-                        <p>Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.</p>
-                        <p><strong>Disclaimer:</strong> This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult a licensed attorney in your jurisdiction.</p>
-                        """
+                with gr.Column(elem_classes="input-field-group"):
+                    api_key_input = gr.Textbox(
+                        label="OpenAI API Key",
+                        type="password",
+                        placeholder="Enter your API key (e.g., sk-...)",
+                        info="Required to process your query. Securely used per request, not stored.",
+                        elem_id="api-key-input",
+                        lines=1
                     )
 
-                # --- Section 2: OpenAI API Key Input Card ---
-                with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>")
-                    api_key_input = gr.Textbox(
-                        label="OpenAI API Key", # Keep label for theme compatibility
-                        type="password", placeholder="Enter your API key (e.g., sk-...)",
-                        info="Required to process your query. Securely used per request, not stored. <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.", lines=1,
-                        elem_classes=["input-field-group"]
+                with gr.Row(elem_classes="input-row"):
+                    with gr.Column(elem_classes="input-field"):
+                        query_input = gr.Textbox(
+                            label="Your Question",
+                            placeholder="E.g., What are the rules for security deposit returns in my state?",
+                            lines=4,
+                            max_lines=8,
+                            elem_id="query-input"
+                        )
+                    with gr.Column(elem_classes="input-field"):
+                        state_input = gr.Dropdown(
+                            label="Select State",
+                            choices=dropdown_choices,
+                            value=initial_value,
+                            allow_custom_value=False,
+                            elem_id="state-dropdown"
+                        )
+
+                with gr.Row(elem_classes="button-row"):
+                    clear_button = gr.Button(
+                        "Clear",
+                        variant="secondary",
+                        elem_id="clear-button",
+                        elem_classes=["gr-button-secondary"]
+                    )
+                    submit_button = gr.Button(
+                        "Submit Query",
+                        variant="primary",
+                        elem_id="submit-button",
+                        elem_classes=["gr-button-primary"]
                     )
 
-                # --- Section 3: Query Input and State Selection Card ---
-                with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>")
-                    with gr.Row(elem_classes="input-row"):
-                        with gr.Column(elem_classes="input-field", scale=3):
-                            query_input = gr.Textbox(
-                                label="Question", placeholder="E.g., What are the rules for security deposit returns in my state?",
-                                lines=5, max_lines=10,
-                                elem_classes=["input-field-group"]
-                            )
-                        with gr.Column(elem_classes="input-field", scale=1):
-                            state_input = gr.Dropdown(
-                                label="Select State", choices=dropdown_choices, value=initial_value,
-                                allow_custom_value=False,
-                                elem_classes=["input-field-group"]
-                            )
-                    with gr.Row(elem_classes="button-row"):
-                        clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
-                        submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])
-
-                # --- Section 4: Output Display Card ---
-                with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>")
+            # Output Section
+            with gr.Group(elem_classes="card-style output-card"):
+                with gr.Column():
                     output = gr.Markdown(
-                        value="<div class='placeholder output-card'>The answer will appear here after submitting your query.</div>",
-                        elem_classes="output-content-wrapper output-card"
+                        value="<div class='placeholder'>Your answer will appear here after submitting your query.</div>",
+                        elem_id="output-content",
+                        elem_classes="output-content-wrapper"
                     )
 
-                # --- Section 5: Example Questions Section ---
-                with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Example Questions to Ask</h3>")
-                    if example_queries:
-                        gr.Examples(
-                            examples=example_queries, inputs=[query_input, state_input],
-                            examples_per_page=5,
-                            label="" # Hide default Examples label
-                        )
-                    else:
-                        gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
+            # Example Questions Section
+            if example_queries:
+                with gr.Group(elem_classes="card-style examples-card"):
+                    gr.Examples(
+                        examples=example_queries,
+                        inputs=[query_input, state_input],
+                        label="Explore Sample Questions",
+                        examples_per_page=6
+                    )
+            else:
+                with gr.Group(elem_classes="card-style examples-card"):
+                    gr.Markdown(
+                        "<div class='placeholder'>Sample questions could not be loaded. Please ensure states are available.</div>"
+                    )
 
-            # --- Footer Section ---
-            with gr.Group(elem_classes="app-footer-wrapper"):
+            # Footer Section
+            with gr.Group(elem_classes="footer-section"):
                 gr.Markdown(
                     """
-                    <div class="app-footer">
-                        <p>This tool is for informational purposes only and does not constitute legal advice. For 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'>LinkedIn</a>
-                        or explore insights at <a href="https://datascientistinsights.substack.com/" target='_blank'>Substack</a>.</p>
-                    </div>
-                    """
+                    **Disclaimer**: This tool is for informational purposes only and does not constitute legal advice.
+                    <br><br>
+                    Developed by **Nischal Subedi**. Connect on <a href="https://www.linkedin.com/in/nischal1/" target="_blank">LinkedIn</a> or explore insights at <a href="https://datascientistinsights.substack.com/" target="_blank">Substack</a>.
+                    """, elem_id="app-footer"
                 )
 
-            # --- Event Listeners (Logic remains identical) ---
+            # --- Event Listeners ---
             submit_button.click(
-                fn=query_interface_wrapper, inputs=[api_key_input, query_input, state_input], outputs=output, api_name="submit_query"
+                fn=query_interface_wrapper,
+                inputs=[api_key_input, query_input, state_input],
+                outputs=output,
+                api_name="submit_query"
             )
+
             clear_button.click(
                 fn=lambda: (
-                    "",
-                    "",
-                    initial_value,
-                    "<div class='placeholder output-card'>Inputs cleared. Ready for your next question.</div>"
+                    "", "", initial_value,
+                    "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
                 ),
-                inputs=[], outputs=[api_key_input, query_input, state_input, output]
+                inputs=[],
+                outputs=[api_key_input, query_input, state_input, output]
             )
-            logging.info("Gradio interface created with earneleh/paris theme and refined custom CSS.")
-            return demo
 
-# --- Main Execution Block (remains untouched from original logic, just fixed the exit) ---
+        logging.info("Refined Gradio interface created successfully.")
+        return demo
+
+# --- Main Execution Block ---
 if __name__ == "__main__":
     logging.info("Starting Landlord-Tenant Rights Bot application...")
     try:
         SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
-        DEFAULT_PDF_PATH = os.path.join(SCRIPT_DIR, "tenant-landlord.pdf")
-        DEFAULT_DB_PATH = os.path.join(SCRIPT_DIR, "chroma_db")
+        DEFAULT_PDF_PATH = os.path.join(SCRIPT_DIR, "data/tenant-landlord.pdf")
+        DEFAULT_DB_PATH = os.path.join(SCRIPT_DIR, "data/chroma_db")
 
         PDF_PATH = os.getenv("PDF_PATH", DEFAULT_PDF_PATH)
         VECTOR_DB_PATH = os.getenv("VECTOR_DB_PATH", DEFAULT_DB_PATH)
 
         os.makedirs(os.path.dirname(VECTOR_DB_PATH), exist_ok=True)
+        os.makedirs(os.path.dirname(PDF_PATH), exist_ok=True)
+
+        logging.info(f"Using PDF path: {PDF_PATH}")
+        logging.info(f"Using Vector DB path: {VECTOR_DB_PATH}")
 
-        logging.info(f"Attempting to load PDF from: {PDF_PATH}")
         if not os.path.exists(PDF_PATH):
             logging.error(f"FATAL: PDF file not found at the specified path: {PDF_PATH}")
-            print(f"\n--- CONFIGURATION ERROR ---\nPDF file ('{os.path.basename(PDF_PATH)}') not found at: {PDF_PATH}.\nPlease ensure it exists or set 'PDF_PATH' environment variable.\n---------------------------\n")
-            exit(1) # This exit is correct: if file not found
-
-        # This `if` block checks for readability *only if the file exists*.
-        # The erroneous `exit(1)` that was likely at line 701 has been removed.
-        if not os.access(PDF_PATH, os.R_OK):
-            logging.error(f"FATAL: PDF file at '{PDF_PATH}' exists but is not readable. Check file permissions.")
-            print(f"\n--- PERMISSION ERROR ---\nPDF file ('{os.path.basename(PDF_PATH)}') found but not readable at: {PDF_PATH}\nPlease check file permissions (e.g., using 'chmod +r' in terminal).\n---------------------------\n")
-            exit(1) # This exit is correct: if file exists but is not readable
-
-        logging.info(f"PDF file '{os.path.basename(PDF_PATH)}' found and is readable.")
+            print(f"\n--- CONFIGURATION ERROR ---")
+            print(f"The required PDF file ('{os.path.basename(PDF_PATH)}') was not found at:")
+            print(f"  {PDF_PATH}")
+            print(f"Please ensure the file exists or set 'PDF_PATH' environment variable.")
+            print(f"---------------------------\n")
+            exit(1)
 
+        logging.info("Initializing Vector Database...")
         vector_db_instance = VectorDatabase(persist_directory=VECTOR_DB_PATH)
+        logging.info("Initializing RAG System...")
         rag = RAGSystem(vector_db=vector_db_instance)
 
-        rag.load_pdf(PDF_PATH)
+        logging.info(f"Loading/Verifying data from PDF: {PDF_PATH}")
+        states_loaded_count = rag.load_pdf(PDF_PATH)
+        doc_count = vector_db_instance.document_collection.count() if vector_db_instance.document_collection else 0
+        state_count = vector_db_instance.state_collection.count() if vector_db_instance.state_collection else 0
+        total_items = doc_count + state_count
+
+        if total_items > 0:
+            logging.info(f"Data loading/verification complete. Vector DB contains {total_items} items. Found {states_loaded_count} distinct states.")
+        else:
+            logging.warning("Potential issue: PDF processed but Vector DB appears empty. Check PDF content/format and logs.")
+            print("\nWarning: No data loaded from PDF or found in DB. Application might not function correctly.\n")
 
+        logging.info("Setting up Gradio interface...")
         app_interface = rag.gradio_interface()
-        SERVER_PORT = int(os.getenv("PORT", 7860)) # Use PORT env var if on Spaces/Cloud, else 7860
 
+        SERVER_PORT = 7860
         logging.info(f"Launching Gradio app on http://0.0.0.0:{SERVER_PORT}")
-        print(f"\n--- Gradio App Running ---\nAccess at: http://localhost:{SERVER_PORT} or your public Spaces URL\n--------------------------\n")
-        app_interface.launch(server_name="0.0.0.0", server_port=SERVER_PORT, share=False) # share=False is typical for Spaces
+        print("\n--- Gradio App Running ---")
+        print(f"Access the interface in your browser at: http://localhost:{SERVER_PORT} or http://<your-ip-address>:{SERVER_PORT}")
+        print("--------------------------\n")
+        app_interface.launch(
+            server_name="0.0.0.0",
+            server_port=SERVER_PORT,
+            share=True # Set to False if you don't want public sharing links
+        )
 
-    except ModuleNotFoundError as e:
-        if "vector_db" in str(e):
-             logging.error(f"FATAL: Could not import VectorDatabase. Ensure 'vector_db.py' is in the same directory and 'chromadb', 'langchain', 'pypdf', 'sentence-transformers' are installed.", exc_info=True)
-             print(f"\n--- MISSING DEPENDENCY OR FILE ---\nCould not find/import 'vector_db.py' or one of its dependencies.\nError: {e}\nPlease ensure 'vector_db.py' is present and all required packages (chromadb, langchain, pypdf, sentence-transformers, etc.) are in your requirements.txt and installed.\n---------------------------\n")
-        else:
-            logging.error(f"Application startup failed due to a missing module: {str(e)}", exc_info=True)
-            print(f"\n--- FATAL STARTUP ERROR - MISSING MODULE ---\n{str(e)}\nPlease ensure all dependencies are installed.\nCheck logs for more details.\n---------------------------\n")
+    except FileNotFoundError as fnf_error:
+        logging.error(f"Initialization failed due to a missing file: {str(fnf_error)}", exc_info=True)
+        print(f"\n--- STARTUP ERROR: File Not Found ---")
+        print(f"{str(fnf_error)}")
+        print(f"---------------------------------------\n")
+        exit(1)
+    except ImportError as import_error:
+        logging.error(f"Import error: {str(import_error)}. Check dependencies.", exc_info=True)
+        print(f"\n--- STARTUP ERROR: Missing Dependency ---")
+        print(f"Import Error: {str(import_error)}")
+        print(f"Please ensure required libraries are installed (e.g., pip install -r requirements.txt).")
+        print(f"-----------------------------------------\n")
         exit(1)
-    except FileNotFoundError as e:
-        logging.error(f"Application startup failed due to a missing file: {str(e)}", exc_info=True)
-        print(f"\n--- FATAL STARTUP ERROR - FILE NOT FOUND ---\n{str(e)}\nPlease ensure the file exists at the specified path.\nCheck logs for more details.\n---------------------------\n")
+    except RuntimeError as runtime_error:
+        logging.error(f"A runtime error occurred during setup: {str(runtime_error)}", exc_info=True)
+        print(f"\n--- STARTUP ERROR: Runtime Problem ---")
+        print(f"Runtime Error: {str(runtime_error)}")
+        print(f"Check logs for details, often related to data loading or DB setup.")
+        print(f"--------------------------------------\n")
         exit(1)
     except Exception as e:
-        logging.error(f"Application startup failed: {str(e)}", exc_info=True)
-        print(f"\n--- FATAL STARTUP ERROR ---\n{str(e)}\nCheck logs for more details.\n---------------------------\n")
+        logging.error(f"An unexpected error occurred during application startup: {str(e)}", exc_info=True)
+        print(f"\n--- FATAL STARTUP ERROR ---")
+        print(f"An unexpected error stopped the application: {str(e)}")
+        print(f"Check logs for detailed traceback.")
+        print(f"---------------------------\n")
         exit(1)