UI v35

app.py

@@ -263,7 +263,7 @@ Answer:"""
                 return answer
             else:
                 # Wrap successful response in a div with an animation class
-                formatted_response_content = f"<div class='response-header'><span class='response-icon'>📋</span>Legal Analysis for {state}</div><hr class='divider'>{answer}"
+                formatted_response_content = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
                 return f"<div class='animated-output-content'>{formatted_response_content}</div>"
 
         try:
@@ -279,6 +279,7 @@ Answer:"""
             radio_choices = ["Error: Critical failure loading states"]
             initial_value_radio = radio_choices[0]
 
+
         # Define example queries, filtering based on available states
         example_queries_base = [
             ["What are the rules for security deposit returns?", "California"],
@@ -299,587 +300,655 @@ Answer:"""
         else: # Fallback if states list is problematic (e.g., empty or error)
             example_queries.append(["What basic rights do tenants have?", "California"])
 
-        # Professional custom CSS with refined design
+
+        # Custom CSS for better UI design, clear boundaries, and text alignment for HuggingFace
         custom_css = """
-        /* Import professional fonts */
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
+        /* 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');
         
-        /* Professional color palette with refined oranges and neutrals */
+        /* Root variables for consistent theming - adjusted for an inviting orange palette */
         :root {
-            --primary-color: #D97706; /* Refined amber-orange */
-            --primary-hover: #B45309; /* Deeper amber for hover */
-            --primary-light: #FEF3C7; /* Very light amber for backgrounds */
-            --secondary-color: #6B7280; /* Professional gray */
-            --accent-color: #0F172A; /* Deep slate for text */
-            
-            --background-primary: #FFFFFF; /* Pure white for cards */
-            --background-secondary: #F8FAFC; /* Very light gray for page background */
-            --background-tertiary: #F1F5F9; /* Slightly darker for subtle contrast */
-            
-            --text-primary: #0F172A; /* Deep slate for primary text */
-            --text-secondary: #475569; /* Medium slate for secondary text */
-            --text-muted: #64748B; /* Lighter slate for muted text */
-            
-            --border-color: #E2E8F0; /* Light gray for borders */
-            --border-focus: #D97706; /* Primary color for focus states */
-            --border-subtle: #F1F5F9; /* Very subtle border */
-            
-            --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
-            --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
-            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
-            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
-            --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
-            
-            --error-bg: #FEF2F2; /* Light red background */
-            --error-border: #FECACA; /* Light red border */
-            --error-text: #DC2626; /* Strong red text */
-            
-            --success-bg: #F0FDF4; /* Light green background */
-            --success-border: #BBF7D0; /* Light green border */
-            --success-text: #16A34A; /* Strong green text */
+            --primary-color: #FF8C00; /* Darker Orange for buttons/accents */
+            --primary-hover: #E07B00; /* Slightly darker orange for hover */
+            --background-primary: #FFFFFF; /* Pure White for main cards, inputs, output area - NO GREY */
+            --background-secondary: #FFF5E0; /* Very light, warm cream for overall app background, table headers, placeholder */
+            --text-primary: #4A3C32; /* Dark warm brown/charcoal for main text */
+            --text-secondary: #8C7B6F; /* Muted warm gray/brown for secondary text */
+            --border-color: #DDC6AF; /* Light, desaturated orange-brown for borders */
+            --border-focus: #FF8C00; /* Focus color matches primary */
+            --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
+            --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
+            --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
+            --error-bg: #FFF0E0; /* Light orange-pink for errors */
+            --error-border: #FFD2B2; /* Medium orange-pink for error borders */
+            --error-text: #E05C00; /* Darker, strong orange-red for error text */
         }
-
-        /* Base styling */
+        
+        /* Dark mode variables - for consistency if a dark mode toggle were present */
+        body.dark {
+            --primary-color: #FFA500; /* Bright orange for dark mode */
+            --primary-hover: #CC8400;
+            --background-primary: #2C2C2C; /* Dark charcoal */
+            --background-secondary: #1F1F1F; /* Even darker charcoal */
+            --text-primary: #F0F0F0;
+            --text-secondary: #B0B0B0;
+            --border-color: #555555;
+            --border-focus: #FFA500;
+            --error-bg: #400000;
+            --error-border: #800000;
+            --error-text: #FF6666;
+        }
+
+        /* Ensure the very outer body background is also set, overriding any Gradio defaults */
         body, html {
             background-color: var(--background-secondary) !important;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
         }
 
-        /* Main container with professional spacing */
+        /* Base container improvements */
         .gradio-container {
-            max-width: 1000px !important;
-            margin: 0 auto !important;
-            padding: 2rem !important;
-            background-color: var(--background-secondary) !important;
+            max-width: 900px !important; /* Slightly smaller for focused content */
+            margin: 0 auto !important; /* Center the whole app */
+            padding: 1.5rem !important;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+            background-color: var(--background-secondary) !important; /* Overall background of the container */
+            box-shadow: none !important; /* Remove default gradio container shadow */
+        }
+        /* Ensure all main content sections have primary background */
+        .main-dashboard-container > * {
+            background-color: var(--background-primary) !important;
         }
 
-        /* Professional header with subtle elegance */
+        /* Header styling - centered and prominent */
         .app-header-wrapper {
-            background: linear-gradient(135deg, var(--background-primary) 0%, var(--primary-light) 100%) !important;
-            border: 1px solid var(--border-color) !important;
+            background-color: var(--background-primary) !important; /* Solid primary background, removed gradient */
+            border: 2px solid var(--border-color) !important;
             border-radius: 16px !important;
-            padding: 3rem 2rem !important;
-            margin-bottom: 2rem !important;
-            box-shadow: var(--shadow-sm) !important;
-            position: relative !important;
-            text-align: center !important;
-            overflow: hidden !important;
+            padding: 2.5rem 1.5rem !important; /* More vertical padding */
+            margin-bottom: 1.5rem !important;
+            box-shadow: var(--shadow-md) !important;
+            position: relative; /* For potential pseudo-element effects */
+            overflow: hidden; /* For any overflow animations */
+            text-align: center !important; /* Centers block content within the wrapper */
         }
 
-        .app-header-wrapper::before {
+        .app-header-wrapper::before { /* Subtle background pattern for dynamism */
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at 30% 20%, rgba(217, 119, 6, 0.03) 0%, transparent 50%),
-                        radial-gradient(circle at 70% 80%, rgba(217, 119, 6, 0.03) 0%, transparent 50%);
+            background: radial-gradient(circle at top left, rgba(255,140,0,0.1) 0%, transparent 40%), /* More orange tint, slightly more opaque */
+                        radial-gradient(circle at bottom right, rgba(255,140,0,0.1) 0%, transparent 40%);
             z-index: 0;
+            opacity: 0.8;
             pointer-events: none;
         }
 
         .app-header-logo {
-            font-size: 3.5rem !important;
-            margin-bottom: 1rem !important;
-            display: block !important;
-            color: var(--primary-color) !important;
+            font-size: 5.5rem !important; /* Significantly larger icon */
+            margin-bottom: 0.75rem !important;
+            display: block !important; 
+            color: var(--primary-color) !important; /* Theme color */
             position: relative;
-            z-index: 1;
-            filter: drop-shadow(0 2px 4px rgba(217, 119, 6, 0.1));
+            z-index: 1; /* Bring icon to front of pseudo-element */
+            animation: float-icon 3s ease-in-out infinite alternate;
+        }
+        /* Keyframes for floating icon */
+        @keyframes float-icon {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-5px); }
+            100% { transform: translateY(0px); }
         }
 
         .app-header-title {
-            font-family: 'Playfair Display', serif !important;
-            font-size: 2.75rem !important;
-            font-weight: 700 !important;
+            font-family: 'Poppins', sans-serif !important;
+            font-size: 3rem !important; /* Even larger title */
+            font-weight: 800 !important; /* Bolder */
             color: var(--text-primary) !important;
-            margin: 0 0 1rem 0 !important;
-            line-height: 1.2 !important;
-            letter-spacing: -0.02em !important;
+            margin: 0 0 0.75rem 0 !important;
+            line-height: 1.1 !important;
+            letter-spacing: -0.03em !important; /* Tighter spacing */
             position: relative;
             z-index: 1;
+            display: inline-block; /* Essential for text-align: center on parent to work for this block */
+            max-width: 100%; /* Prevent overflow on smaller screens */
         }
-
         .app-header-tagline {
-            font-size: 1.125rem !important;
+            font-size: 1.25rem !important; /* Slightly larger tagline */
             color: var(--text-secondary) !important;
             font-weight: 400 !important;
             margin: 0 !important;
-            max-width: 600px;
-            margin: 0 auto !important;
+            max-width: 700px; /* Constrain tagline width */
+            display: inline-block; /* Essential for text-align: center on parent to work for this block */
             position: relative;
             z-index: 1;
         }
 
-        /* Professional card sections */
+        /* Main container with consistent spacing */
         .main-dashboard-container {
             display: flex !important;
             flex-direction: column !important;
-            gap: 1.5rem !important;
+            gap: 1.25rem !important; /* Consistent spacing between cards */
         }
-
+        /* Card sections with clear boundaries and subtle dynamic effects */
         .dashboard-card-section {
-            background-color: var(--background-primary) !important;
-            border: 1px solid var(--border-color) !important;
+            background-color: var(--background-primary) !important; /* Explicitly set background */
+            border: 2px solid var(--border-color) !important; /* Distinct border */
             border-radius: 12px !important;
-            padding: 2rem !important;
-            box-shadow: var(--shadow-sm) !important;
-            transition: all 0.2s ease !important;
+            padding: 1.75rem !important; /* Consistent padding */
+            box-shadow: var(--shadow-sm) !important; /* Subtle shadow */
+            transition: all 0.3s ease-out !important; /* Smoother transition */
+            cursor: default; /* Indicate not directly clickable (unless examples) */
         }
-
         .dashboard-card-section:hover {
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-1px) !important;
+            transform: translateY(-3px) !important; /* More pronounced lift */
         }
 
-        /* Professional typography for section titles */
-        .section-title {
-            font-family: 'Playfair Display', serif !important;
-            font-size: 1.5rem !important;
-            font-weight: 700 !important;
+        /* NEW: Class for Markdown blocks to center their content */
+        .full-width-center {
+            display: flex !important;
+            justify-content: center !important;
+            align-items: center !important;
+            width: 100% !important;
+            flex-direction: column !important; /* Ensure content stacks vertically if needed */
+        }
+
+        /* Section titles (h3 inside markdown) */
+        .section-title { /* Renamed from sub-section-title for clarity */
+            font-family: 'Poppins', sans-serif !important;
+            font-size: 1.7rem !important; /* Slightly larger */
+            font-weight: 700 !important; /* Bolder */
             color: var(--text-primary) !important;
-            margin: 0 0 1.5rem 0 !important;
+            margin: 0 0 1.25rem 0 !important; /* More space below title */
             padding-bottom: 0.75rem !important;
-            border-bottom: 2px solid var(--primary-light) !important;
-            text-align: center !important;
-            position: relative !important;
+            border-bottom: 2px solid var(--border-color) !important; /* Underline effect */
+            display: block !important; /* Ensure it's a block-level element for proper width/border */
+            text-align: center !important; /* Ensure the text within the h3 is centered */
+            width: fit-content !important; /* Make it shrink-wrap its content */
+            margin-left: auto !important; /* Auto margins to center block-level element */
+            margin-right: auto !important;
+            letter-spacing: -0.01em !important;
         }
-
-        .section-title::after {
-            content: '';
-            position: absolute;
-            bottom: -2px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 60px;
-            height: 2px;
-            background-color: var(--primary-color);
-            border-radius: 1px;
+        
+        /* Specific styling for the welcome/disclaimer markdown content */
+        .dashboard-card-section p {
+            line-height: 1.7 !important;
+            color: var(--text-primary) !important;
+            font-size: 1rem !important;
+            text-align: left !important; /* Ensure content text is left-aligned */
+        }
+        .dashboard-card-section strong {
+            color: var(--primary-color) !important; /* Highlight strong text with primary color */
         }
 
-        /* Professional input styling */
+        /* Improved input styling with clear boundaries and focus */
+        .gradio-textbox {
+            margin-bottom: 0.75rem !important;
+        }
         .gradio-textbox textarea,
         .gradio-textbox input {
-            background-color: var(--background-primary) !important;
-            border: 1px solid var(--border-color) !important;
+            background-color: var(--background-primary) !important; /* Explicitly set background to primary cream */
+            border: 2px solid var(--border-color) !important; /* Clear border */
             border-radius: 8px !important;
-            padding: 0.875rem 1rem !important;
-            font-size: 0.95rem !important;
+            padding: 0.85rem 1rem !important; /* Slightly more padding */
+            font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-primary) !important;
-            transition: all 0.2s ease !important;
-            box-shadow: var(--shadow-xs) !important;
+            color: var(--text-primary) !important; /* Text color inside inputs */
+            transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* Smooth transitions */
+            box-shadow: var(--shadow-sm) !important;
         }
-
+        /* Focus styles for textboxes */
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
             outline: none !important;
-            border-color: var(--border-focus) !important;
-            box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1) !important;
+            border-color: var(--border-focus) !important; /* Distinct border on focus */
+            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important; /* Broader, softer glow on focus */
         }
 
-        /* Professional radio button styling */
+        /* Styling for the radio button group (state selection) */
         .gradio-radio {
-            padding: 0 !important;
-            margin-top: 0.5rem !important;
+            padding: 0 !important; /* Remove any default padding */
+            margin-top: 0.5rem !important; /* Add a little space above */
         }
-
-        .gradio-radio .gr-radio-input {
+        /* Hide default radio circle/dot */
+        .gradio-radio input[type="radio"] {
             display: none !important;
         }
 
         .gradio-radio label {
-            display: flex !important;
-            justify-content: center !important;
+            /* Style the clickable area for each radio option */
+            display: flex !important; /* Use flexbox for internal alignment */
+            justify-content: center !important; /* Center content horizontally */
             align-items: center !important;
             padding: 0.75rem 1rem !important;
-            border: 1px solid var(--border-color) !important;
+            border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
-            background-color: var(--background-primary) !important;
+            background-color: var(--background-primary) !important; /* Matches card background */
             color: var(--text-primary) !important;
             font-weight: 500 !important;
             cursor: pointer !important;
-            transition: all 0.2s ease !important;
-            box-shadow: var(--shadow-xs) !important;
-            margin: 0.25rem 0 !important;
-            width: 100% !important;
-            box-sizing: border-box !important;
+            transition: all 0.2s ease-out !important;
+            box-shadow: var(--shadow-sm) !important;
+            margin: 0.25rem 0 !important; /* Small vertical margin between options */
+            width: 100% !important; /* Ensure options take full width of their column */
+            box-sizing: border-box !important; /* Include padding/border in width */
         }
 
+        /* Style the text/content within the radio label */
+        .gradio-radio label span.text-lg { /* Gradio uses text-lg for the label text by default */
+            font-weight: 600 !important; /* Make text bold */
+            color: var(--text-primary) !important;
+            font-size: 0.98rem !important; /* Match input text size */
+        }
+
+        /* Hover effect for radio options */
         .gradio-radio label:hover {
-            background-color: var(--background-tertiary) !important;
-            border-color: var(--primary-color) !important;
-            box-shadow: var(--shadow-sm) !important;
-            transform: translateY(-1px) !important;
+            background-color: var(--background-secondary) !important; /* Slightly darker cream on hover */
+            border-color: var(--primary-color) !important; /* Highlight border with primary color */
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-2px) !important;
         }
 
-        .gradio-radio label.selected {
-            background-color: var(--primary-color) !important;
-            color: white !important;
+        /* Selected state for radio options */
+        .gradio-radio input[type="radio"]:checked + label { /* Target label when its radio input is checked */
+            background-color: var(--primary-color) !important; /* Primary color for selected item */
+            color: white !important; /* White text on selected */
             border-color: var(--primary-hover) !important;
             box-shadow: var(--shadow-md) !important;
+            transform: translateY(-1px) !important;
         }
-
-        .gradio-radio label.selected span {
-            color: white !important;
+        .gradio-radio input[type="radio"]:checked + label span.text-lg {
+            color: white !important; /* Ensure text is white when selected */
         }
+        /* Gradio's internal wrapper for radio buttons, ensure it doesn't add unwanted padding */
+        .gradio-radio .gr-form {
+            padding: 0 !important;
+        }
+
 
-        /* Professional label styling */
+        /* Label styling for better readability (for Query, State labels) */
         .gradio-textbox label,
-        .gradio-radio .gr-form-label {
-            font-weight: 600 !important;
+        .gradio-radio > label { /* Target the main label for the radio group */
+            font-weight: 600 !important; /* Bolder labels */
             color: var(--text-primary) !important;
-            font-size: 0.95rem !important;
-            margin-bottom: 0.5rem !important;
+            font-size: 1rem !important;
+            margin-bottom: 0.6rem !important;
             display: block !important;
+            text-align: left !important; /* Ensure these labels are left-aligned */
+        }
+        /* Info text styling below inputs (e.g., for API Key) */
+        .gr-prose { /* This class is used by Gradio for info text */
+            font-size: 0.9rem !important;
+            color: var(--text-secondary) !important;
+            margin-top: 0.4rem !important; /* More space for info text */
+            text-align: left !important; /* Ensure info text is left aligned */
+        }
+        /* Input row layout improvements */
+        .input-row {
+            display: flex !important;
+            gap: 1.25rem !important; /* Consistent gap between query and state */
+            margin-bottom: 0.5rem !important;
+        }
+        .input-field {
+            flex: 1 !important;
         }
 
-        /* Professional button styling */
+        /* Button styling improvements with active state for dynamism */
         .button-row {
             display: flex !important;
-            gap: 0.75rem !important;
-            justify-content: flex-end !important;
-            margin-top: 1.5rem !important;
+            gap: 1rem !important;
+            justify-content: flex-end !important; /* Align buttons to the right */
+            margin-top: 1.5rem !important; /* More space above buttons */
         }
-
         .gradio-button {
-            padding: 0.75rem 2rem !important;
-            border-radius: 8px !important;
-            font-weight: 600 !important;
-            font-size: 0.95rem !important;
-            transition: all 0.2s ease !important;
+            padding: 0.85rem 1.8rem !important; /* More padding for bigger buttons */
+            border-radius: 9px !important; /* Slightly more rounded */
+            font-weight: 600 !important; /* Bolder text */
+            font-size: 1rem !important;
+            transition: all 0.2s ease-out !important; /* Smooth transition for hover/active */
             cursor: pointer !important;
-            border: 1px solid transparent !important;
-            text-align: center !important;
+            border: 2px solid transparent !important;
+            text-align: center !important; /* Ensure button text is centered */
         }
-
         .gr-button-primary {
-            background-color: var(--primary-color) !important;
+            background-color: var(--primary-color) !important; /* Explicitly set background */
             color: white !important;
             box-shadow: var(--shadow-sm) !important;
         }
-
         .gr-button-primary:hover {
-            background-color: var(--primary-hover) !important;
+            background-color: var(--primary-hover) !important; /* Explicitly set background */
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-1px) !important;
+            transform: translateY(-2px) !important; /* Subtle lift effect on hover */
+        }
+        .gr-button-primary:active { /* Press down effect on click */
+            transform: translateY(1px) !important;
+            box-shadow: none !important;
         }
-
         .gr-button-secondary {
-            background-color: transparent !important;
-            color: var(--text-secondary) !important;
+            background-color: transparent !important; /* Explicitly set background */
+            color: var(--text-primary) !important;
             border-color: var(--border-color) !important;
         }
-
         .gr-button-secondary:hover {
-            background-color: var(--background-tertiary) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
             border-color: var(--primary-color) !important;
-            color: var(--text-primary) !important;
-            transform: translateY(-1px) !important;
+            transform: translateY(-2px) !important;
+        }
+        .gr-button-secondary:active { /* Press down effect on click */
+            transform: translateY(1px) !important;
+            box-shadow: none !important;
         }
 
-        /* Professional output styling */
+        /* Output styling with clear boundaries and dynamic fade-in */
         .output-content-wrapper {
-            background-color: var(--background-primary) !important;
-            border: 1px solid var(--border-color) !important;
+            background-color: var(--background-primary) !important; /* Explicitly set background */
+            border: 2px solid var(--border-color) !important; /* Clear border */
             border-radius: 8px !important;
             padding: 1.5rem !important;
-            min-height: 120px !important;
+            min-height: 150px !important; /* More space for output */
             color: var(--text-primary) !important;
+            /* Ensure the inner animated content fits well */
             display: flex;
             flex-direction: column;
-            justify-content: center;
-            align-items: center;
+            justify-content: center; /* Center content vertically if small */
+            align-items: center; /* Center content horizontally if small */
         }
-
+        /* The div holding the actual response content, enabling fade-in animation */
         .animated-output-content {
             opacity: 0;
-            animation: fadeInUp 0.5s ease-out forwards;
-            width: 100%;
+            animation: fadeInAndSlideUp 0.7s ease-out forwards; /* More pronounced animation */
+            width: 100%; /* Take full width of parent */
+            /* Preserve formatting within the animated content */
             white-space: pre-wrap;
             overflow-wrap: break-word;
             word-break: break-word;
-            text-align: left !important;
+            text-align: left !important; /* Ensure text is left-aligned within this div */
         }
-
-        @keyframes fadeInUp {
-            from { 
-                opacity: 0; 
-                transform: translateY(10px); 
-            }
-            to { 
-                opacity: 1; 
-                transform: translateY(0); 
-            }
+        @keyframes fadeInAndSlideUp {
+            from { opacity: 0; transform: translateY(15px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
         .response-header {
-            font-size: 1.25rem !important;
+            font-size: 1.3rem !important;
             font-weight: 700 !important;
-            color: var(--primary-color) !important;
-            margin-bottom: 1rem !important;
+            color: var(--primary-color) !important; /* Matches primary color */
+            margin-bottom: 0.75rem !important;
             display: flex !important;
             align-items: center !important;
-            gap: 0.5rem !important;
-            text-align: left !important;
-            width: 100%;
-            justify-content: flex-start;
+            gap: 0.6rem !important;
+            text-align: left !important; /* Ensure header itself is not affected by parent centering */
+            width: 100%; /* Take full width */
+            justify-content: flex-start; /* Align content to the start */
         }
-
         .response-icon {
-            font-size: 1.25rem !important;
+            font-size: 1.5rem !important;
             color: var(--primary-color) !important;
         }
-
         .divider {
             border: none !important;
-            border-top: 1px solid var(--border-color) !important;
+            border-top: 1px dashed var(--border-color) !important; /* Dashed divider for visual separation */
             margin: 1rem 0 !important;
         }
-
-        /* Professional error styling */
+        /* Error message styling */
         .error-message {
-            background-color: var(--error-bg) !important;
-            border: 1px solid var(--error-border) !important;
+            background-color: var(--error-bg) !important; /* Explicitly set background */
+            border: 2px solid var(--error-border) !important;
             color: var(--error-text) !important;
-            padding: 1rem !important;
+            padding: 1.25rem !important;
             border-radius: 8px !important;
             display: flex !important;
             align-items: flex-start !important;
-            gap: 0.75rem !important;
+            gap: 0.8rem !important;
             font-size: 0.95rem !important;
             font-weight: 500 !important;
-            line-height: 1.5 !important;
-            text-align: left !important;
-            width: 100%;
-            box-sizing: border-box;
+            line-height: 1.6 !important;
+            text-align: left !important; /* Ensure error message text is left aligned */
+            width: 100%; /* Take full width of parent */
+            box-sizing: border-box; /* Include padding/border in width */
         }
-
         .error-message a {
             color: var(--error-text) !important;
             text-decoration: underline !important;
         }
-
         .error-icon {
-            font-size: 1.25rem !important;
+            font-size: 1.4rem !important;
             line-height: 1 !important;
             margin-top: 0.1rem !important;
         }
-
-        /* Professional placeholder styling */
+        .error-details {
+            font-size: 0.85rem !important;
+            color: var(--error-text) !important;
+            margin-top: 0.5rem !important;
+            opacity: 0.8;
+        }
+        /* Placeholder styling for empty output */
         .placeholder {
-            background-color: var(--background-tertiary) !important;
-            border: 1px dashed var(--border-color) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
+            border: 2px dashed var(--border-color) !important;
             border-radius: 8px !important;
-            padding: 2rem 1.5rem !important;
-            text-align: center !important;
-            color: var(--text-muted) !important;
+            padding: 2.5rem 1.5rem !important;
+            text-align: center !important; /* Ensure placeholder text is centered */
+            color: var(--text-secondary) !important;
             font-style: italic !important;
-            font-size: 1rem !important;
-            width: 100%;
-            box-sizing: border-box;
+            font-size: 1.1rem !important;
+            width: 100%; /* Ensure it takes full width of parent */
+            box-sizing: border-box; /* Include padding/border in width */
         }
 
-        /* Professional examples table */
+        /* Examples table styling with dynamic hover */
         .examples-section .gr-samples-table {
-            border: 1px solid var(--border-color) !important;
+            border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
-            box-shadow: var(--shadow-xs) !important;
         }
-
         .examples-section .gr-samples-table th,
         .examples-section .gr-samples-table td {
-            padding: 0.875rem !important;
+            padding: 0.9rem !important;
             border: none !important;
             font-size: 0.95rem !important;
-            text-align: left !important;
+            text-align: left !important; /* Ensure example text is left-aligned */
         }
-
         .examples-section .gr-samples-table th {
-            background-color: var(--background-tertiary) !important;
-            font-weight: 600 !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
+            font-weight: 700 !important;
             color: var(--text-primary) !important;
         }
-
         .examples-section .gr-samples-table td {
-            background-color: var(--background-primary) !important;
+            background-color: var(--background-primary) !important; /* Explicitly set background */
             color: var(--text-primary) !important;
-            border-top: 1px solid var(--border-subtle) !important;
+            border-top: 1px solid var(--border-color) !important;
             cursor: pointer !important;
-            transition: background-color 0.2s ease !important;
+            transition: background 0.2s ease, transform 0.1s ease !important; /* Smooth transitions */
         }
-
         .examples-section .gr-samples-table tr:hover td {
-            background-color: var(--background-tertiary) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
+            transform: translateX(5px); /* Subtle slide on hover */
         }
-
-        /* Professional footer */
+        /* Hide Gradio default elements for examples for cleaner look */
+        .gr-examples .gr-label,
+        .gr-examples .label-wrap,
+        .gr-examples .gr-accordion-header {
+            display: none !important;
+        }
+        
+        /* Footer styling - centered text */
         .app-footer-wrapper {
-            background-color: var(--background-primary) !important;
-            border: 1px solid var(--border-color) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
+            border: 2px solid var(--border-color) !important;
             border-radius: 12px !important;
-            padding: 1.5rem !important;
-            margin-top: 2rem !important;
-            text-align: center !important;
-            box-shadow: var(--shadow-xs) !important;
+            padding: 1.75rem !important;
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important; /* Ensures space at the very bottom before the container padding */
+            text-align: center !important; /* Centered footer text */
         }
-
-        .app-footer-wrapper p {
-            margin: 0.5rem 0 !important;
-            font-size: 0.9rem !important;
+        .app-footer p {
+            margin: 0.6rem 0 !important;
+            font-size: 0.95rem !important;
             color: var(--text-secondary) !important;
             line-height: 1.6 !important;
         }
-
-        .app-footer-wrapper a {
+        .app-footer a {
             color: var(--primary-color) !important;
             text-decoration: none !important;
             font-weight: 600 !important;
         }
-
-        .app-footer-wrapper a:hover {
+        .app-footer a:hover {
             text-decoration: underline !important;
         }
 
-        /* Responsive design */
+        /* Responsive design for smaller screens */
         @media (max-width: 768px) {
             .gradio-container {
                 padding: 1rem !important;
             }
-            
             .app-header-title {
-                font-size: 2rem !important;
+                font-size: 2.2rem !important;
             }
-            
             .app-header-tagline {
                 font-size: 1rem !important;
             }
-            
-            .dashboard-card-section {
-                padding: 1.5rem !important;
+            .section-title {
+                font-size: 1.4rem !important;
             }
-            
             .input-row {
-                flex-direction: column !important;
+                flex-direction: column !important; /* Stack inputs vertically */
             }
-            
             .button-row {
-                flex-direction: column !important;
+                flex-direction: column !important; /* Stack buttons vertically */
             }
-            
             .gradio-button {
-                width: 100% !important;
+                width: 100% !important; /* Full width buttons */
+            }
+            .dashboard-card-section {
+                padding: 1.25rem !important;
+            }
+            .output-content-wrapper {
+                min-height: 120px !important;
+            }
+            .placeholder {
+                padding: 1.5rem 1rem !important;
+                font-size: 1rem !important;
             }
         }
         """
 
-        # Using gr.Blocks with custom CSS
+        # Using gr.Blocks with custom CSS only to ensure no undesired colors are inherited from a theme.
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            # Professional Header
+            # Header Section - uses gr.Group for distinct card-like styling
             with gr.Group(elem_classes="app-header-wrapper"):
+                # Using a single Markdown component for header for easier robust centering
+                # The 'full-width-center' class applies flexbox centering to the Markdown content
                 gr.Markdown(
                     """
                     <span class='app-header-logo'>⚖️</span>
                     <h1 class='app-header-title'>Landlord-Tenant Rights Assistant</h1>
-                    <p class='app-header-tagline'>Professional Legal Research & Analysis Platform</p>
+                    <p class='app-header-tagline'>Empowering You with State-Specific Legal Insights</p>
                     """,
                     elem_classes="full-width-center"
                 )
 
-            # Main Dashboard
+            # Main Dashboard Container - acts as a column to stack various sections
             with gr.Column(elem_classes="main-dashboard-container"):
 
-                # Welcome Section
+                # Introduction and Disclaimer Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>Welcome & Legal Disclaimer</h3>")
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>Welcome & Disclaimer</h3>", elem_classes="full-width-center")
                     gr.Markdown(
                         """
-                        This professional legal research platform provides comprehensive, state-specific analysis of landlord-tenant laws. Our system delivers detailed responses grounded in legal authority and precedent.
+                        Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.
                         
-                        **Important Legal Disclaimer:** This platform provides informational content only and does not constitute legal advice. For specific legal matters, always consult with a qualified attorney licensed in your jurisdiction.
+                        **Disclaimer:** 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.
                         """
                     )
 
-                # API Configuration
+                # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>API Configuration</h3>")
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center")
                     api_key_input = gr.Textbox(
-                        label="OpenAI API Key",
-                        type="password",
-                        placeholder="Enter your OpenAI API key (sk-...)",
-                        info="Required for query processing. Obtain from: platform.openai.com/api-keys",
-                        lines=1
+                        label="API Key",
+                        type="password", # Hides the input for security
+                        placeholder="Enter your OpenAI API key (e.g., sk-...)",
+                        info="Required to process your query. Get one from OpenAI: platform.openai.com/api-keys",
+                        lines=1,
+                        elem_classes=["input-field-group"] # Custom class for input styling
                     )
 
-                # Query Interface
+                # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>Legal Query Interface</h3>")
-                    with gr.Row(elem_classes="input-row"):
-                        with gr.Column(elem_classes="input-field", scale=3):
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>Ask Your Question</h3>", elem_classes="full-width-center")
+                    with gr.Row(elem_classes="input-row"): # Row for side-by-side query and state
+                        with gr.Column(elem_classes="input-field", scale=3): # Query text area takes more space
                             query_input = gr.Textbox(
-                                label="Legal Question",
-                                placeholder="Enter your landlord-tenant law question here...",
+                                label="Your Question",
+                                placeholder="E.g., What are the rules for security deposit returns in my state?",
                                 lines=4,
-                                max_lines=8
+                                max_lines=8,
+                                elem_classes=["input-field-group"]
                             )
-                        with gr.Column(elem_classes="input-field", scale=1):
+                        with gr.Column(elem_classes="input-field", scale=1): # State radio buttons take less space
                             state_input = gr.Radio(
-                                label="Jurisdiction",
+                                label="Select State",
                                 choices=radio_choices,
-                                value=initial_value_radio
+                                value=initial_value_radio,
+                                elem_classes=["input-field-group", "gradio-radio-custom"] # Added custom class for specific styling
                             )
-                    with gr.Row(elem_classes="button-row"):
-                        clear_button = gr.Button("Clear Form", variant="secondary")
-                        submit_button = gr.Button("Analyze Query", variant="primary")
+                    with gr.Row(elem_classes="button-row"): # Row for action buttons
+                        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"])
 
-                # Results Display
+                # Output Display Card - Using gr.HTML for better animation control
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>Legal Analysis Results</h3>")
-                    output = gr.HTML(
-                        value="<div class='placeholder'>Your comprehensive legal analysis will appear here after submitting your query.</div>",
-                        elem_classes="output-content-wrapper"
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>Legal Assistant's Response</h3>", elem_classes="full-width-center")
+                    output = gr.HTML( # Changed to gr.HTML to wrap content with animation class
+                        value="<div class='placeholder'>The answer will appear here after submitting your query.</div>",
+                        elem_classes="output-content-wrapper" # Custom class for output styling
                     )
 
-                # Example Queries
+                # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='section-title'>Sample Legal Queries</h3>")
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center")
                     if example_queries:
                         gr.Examples(
                             examples=example_queries,
                             inputs=[query_input, state_input],
                             examples_per_page=5,
-                            label=""
+                            label="" # Hide default Gradio label for examples to use our custom title
                         )
                     else:
-                        gr.Markdown("<div class='placeholder'>Sample queries are currently unavailable. Please ensure the legal database is properly configured.</div>")
+                        gr.Markdown("<div class='placeholder'>Sample questions could not be loaded. Please ensure the vector database is populated.</div>")
 
-            # Professional Footer
+            # Footer Section - contains disclaimer and developer info
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     """
-                    **Legal Notice:** This platform is designed for informational and research purposes only. It does not establish an attorney-client relationship and should not be relied upon as a substitute for professional legal counsel.
-                    
-                    **Platform Development:** Created by **Nischal Subedi** • [LinkedIn](https://www.linkedin.com/in/nischal1/) • [Professional Insights](https://datascientistinsights.substack.com/)
+                    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.
+                    Developed by **Nischal Subedi**. Connect on [LinkedIn](https://www.linkedin.com/in/nischal1/) or explore insights at [Substack](https://datascientistinsights.substack.com/).
                     """
                 )
 
-            # Event Handlers
+            # Event Listeners for buttons
             submit_button.click(
                 fn=query_interface_wrapper,
                 inputs=[api_key_input, query_input, state_input],
                 outputs=output,
-                api_name="submit_query"
+                api_name="submit_query" # Useful for debugging / external calls
             )
             
             clear_button.click(
                 fn=lambda: (
-                    "",
-                    "",
-                    initial_value_radio,
-                    "<div class='placeholder'>Form cleared successfully. Ready for your next legal query.</div>"
+                    "", # Clear API key input
+                    "", # Clear query input
+                    initial_value_radio, # Reset state radio to default prompt
+                    "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>" # Reset output message
                 ),
                 inputs=[],
                 outputs=[api_key_input, query_input, state_input, output]