UI update

app.py

@@ -249,11 +249,11 @@ Answer:"""
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
             # Basic client-side validation for immediate feedback (redundant but good UX)
             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'>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'>OpenAI</a>.</div>"
             if not state or state is None:
-                return "<div class='error-message'><span class='error-icon'></span>Please select a valid state from the list.</div>"
+                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the list.</div>"
             if not query or not query.strip():
-                return "<div class='error-message'><span class='error-icon'></span>Please enter your question in the text box.</div>"
+                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please enter your question in the text box.</div>"
 
             # Call the core processing logic
             result = self.process_query(query=query, state=state, openai_api_key=api_key)
@@ -293,83 +293,66 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
         custom_css = """
-        /* Import legible fonts from Google Fonts */
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
+        /* Import modern fonts from Google Fonts */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');
 
-        /* Root variables for the light theme (single theme now) */
+        /* Root variables for the single light orange theme */
         :root {
-            --primary-color: #FF8C00;
-            --primary-hover: #E07B00;
-            --background-primary: hsl(30, 100%, 99.9%);
-            --background-secondary: #FFE8CC; /* Light orange background */
-            --text-primary: #4A3C32;
-            --text-secondary: #8C7B6F;
-            --border-color: hsl(30, 70%, 85%);
-            --border-focus: #FF8C00;
-            --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
-            --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
-            --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
-            --error-bg: #FFF0E0;
-            --error-border: #FFD2B2;
-            --error-text: #E05C00;
-            /* Adjusted gradient variables to complement the light orange theme */
-            --gradient-start: #FFDAB3; /* Lighter orange to match the theme */
-            --gradient-end: #FFE8CC;   /* Matches the background for a cohesive look */
+            --primary-color: #FF8C00; /* Orange for buttons and accents */
+            --primary-hover: #E07B00; /* Darker orange for hover states */
+            --background-page: #FFE8CC; /* Light orange background for the page */
+            --background-card: #FFFFFF; /* White background for cards */
+            --text-primary: #333333; /* Dark gray for primary text */
+            --text-secondary: #666666; /* Lighter gray for secondary text */
+            --border-color: #E5E5E5; /* Light gray for borders */
+            --border-focus: #FF8C00; /* Orange for focused input borders */
+            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
+            --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
+            --error-bg: #FFF0E0; /* Light orange for error background */
+            --error-border: #FFD2B2; /* Slightly darker orange for error borders */
+            --error-text: #E05C00; /* Orange for error text */
+            --gradient-start: #FFDAB3; /* Lighter orange for gradient start */
+            --gradient-end: #FFF5E6; /* Very light orange-cream for gradient end */
         }
 
         body, html {
-            background-color: var(--background-secondary) !important;
+            background-color: var(--background-page) !important;
             color: var(--text-primary) !important;
-            transition: background-color 0.3s, color 0.3s;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+            margin: 0;
+            padding: 0;
         }
 
         .gradio-container {
-            max-width: 900px !important;
-            margin: 0 auto !important;
-            padding: 1.5rem !important;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-            background-color: var(--background-secondary) !important;
+            max-width: 1000px !important;
+            margin: 2rem auto !important;
+            padding: 2rem !important;
+            background-color: var(--background-page) !important;
             box-shadow: none !important;
             color: var(--text-primary) !important;
         }
 
-        .main-dashboard-container > * {
-            background-color: var(--background-primary) !important;
+        .main-dashboard-container {
+            display: flex !important;
+            flex-direction: column !important;
+            gap: 2rem !important; /* Increased spacing between sections */
         }
 
         .app-header-wrapper {
             background: linear-gradient(145deg, var(--gradient-start) 0%, var(--gradient-end) 100%) !important;
-            border: 2px solid var(--border-color) !important;
-            border-radius: 16px !important;
-            padding: 2.5rem 1.5rem !important;
-            margin-bottom: 1.5rem !important;
+            border-radius: 12px !important;
+            padding: 3rem 2rem !important;
+            margin-bottom: 2rem !important;
             box-shadow: var(--shadow-md) !important;
-            position: relative;
-            overflow: hidden;
             text-align: center !important;
             color: var(--text-primary) !important;
         }
 
-        .app-header-wrapper::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle at top left, rgba(255,140,0,0.3) 0%, transparent 60%), radial-gradient(circle at bottom right, rgba(255,140,0,0.3) 0%, transparent 60%);
-            z-index: 0;
-            opacity: 0.8;
-            pointer-events: none;
-        }
-
         .app-header-logo {
-            font-size: 8.5rem !important;
-            margin-bottom: 0.75rem !important;
+            font-size: 6rem !important;
+            margin-bottom: 1rem !important;
             display: block !important;
             color: var(--primary-color) !important;
-            position: relative;
-            z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
         }
 
@@ -381,49 +364,34 @@ Answer:"""
 
         .app-header-title {
             font-family: 'Poppins', sans-serif !important;
-            font-size: 3rem !important;
-            font-weight: 800 !important;
+            font-size: 2.5rem !important;
+            font-weight: 700 !important;
             color: var(--text-primary) !important;
-            margin: 0 0 0.75rem 0 !important;
-            line-height: 1.1 !important;
-            letter-spacing: -0.03em !important;
-            position: relative;
-            z-index: 1;
-            display: inline-block;
-            max-width: 100%;
+            margin: 0 0 0.5rem 0 !important;
+            line-height: 1.2 !important;
         }
 
         .app-header-tagline {
-            font-size: 1.25rem !important;
+            font-size: 1.1rem !important;
             color: var(--text-secondary) !important;
             font-weight: 400 !important;
             margin: 0 !important;
-            max-width: 700px;
-            display: inline-block;
-            position: relative;
-            z-index: 1;
-        }
-
-        .main-dashboard-container {
-            display: flex !important;
-            flex-direction: column !important;
-            gap: 1.25rem !important;
+            max-width: 600px;
+            margin: 0 auto;
         }
 
         .dashboard-card-section {
-            background-color: var(--background-primary) !important;
-            border: 2px solid var(--border-color) !important;
+            background-color: var(--background-card) !important;
             border-radius: 12px !important;
             padding: 0 !important;
             box-shadow: var(--shadow-sm) !important;
-            transition: all 0.3s ease-out !important;
-            cursor: default;
+            transition: transform 0.2s ease, box-shadow 0.2s ease !important;
             color: var(--text-primary) !important;
         }
 
         .dashboard-card-section:hover {
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-3px) !important;
+            transform: translateY(-2px) !important;
         }
 
         .full-width-center {
@@ -437,9 +405,9 @@ Answer:"""
 
         .section-title-gradient-bar {
             background: linear-gradient(145deg, var(--gradient-start) 0%, var(--gradient-end) 100%) !important;
-            padding: 1.25rem 1.75rem !important;
-            border-top-left-radius: 10px !important;
-            border-top-right-radius: 10px !important;
+            padding: 1rem 1.5rem !important;
+            border-top-left-radius: 12px !important;
+            border-top-right-radius: 12px !important;
             margin-bottom: 0 !important;
             text-align: center !important;
             box-sizing: border-box;
@@ -449,39 +417,34 @@ Answer:"""
 
         .section-title {
             font-family: 'Poppins', sans-serif !important;
-            font-size: 1.7rem !important;
-            font-weight: 700 !important;
+            font-size: 1.5rem !important;
+            font-weight: 600 !important;
             color: var(--text-primary) !important;
             margin: 0 !important;
-            padding-bottom: 0 !important;
-            border-bottom: 2px solid var(--border-color) !important;
-            line-height: 1.1 !important;
-            display: inline-block !important;
-            text-align: center !important;
-            letter-spacing: -0.01em !important;
+            line-height: 1.2 !important;
         }
 
         .dashboard-card-content-area {
-            padding: 0 1.75rem 1.75rem 1.75rem !important;
-            background-color: var(--background-primary) !important;
+            padding: 1.5rem !important;
+            background-color: var(--background-card) !important;
+            border-bottom-left-radius: 12px !important;
+            border-bottom-right-radius: 12px !important;
             box-sizing: border-box;
             width: 100%;
             color: var(--text-primary) !important;
         }
 
         .dashboard-card-section p {
-            line-height: 1.7 !important;
+            line-height: 1.6 !important;
             color: var(--text-primary) !important;
             font-size: 1rem !important;
             text-align: left !important;
-            background-color: transparent !important;
             margin: 0 !important;
             padding: 0 !important;
-            white-space: normal !important;
         }
 
         .dashboard-card-section strong, .dashboard-card-section b {
-            font-weight: 700 !important;
+            font-weight: 600 !important;
             color: var(--primary-color) !important;
         }
 
@@ -499,35 +462,32 @@ Answer:"""
         .gradio-textbox input,
         .gradio-radio label,
         .placeholder {
-            background-color: var(--background-primary) !important;
+            background-color: #FFFFFF !important;
             color: var(--text-primary) !important;
+            border-radius: 8px !important;
+            box-shadow: var(--shadow-sm) !important;
         }
 
         .gradio-textbox {
-            margin-bottom: 0.5rem !important;
+            margin-bottom: 1rem !important;
         }
 
         .gradio-textbox textarea,
         .gradio-textbox input {
-            border: 2px solid var(--border-color) !important;
+            border: 1px solid var(--border-color) !important;
             border-radius: 8px !important;
-            padding: 0.85rem 1rem !important;
-            font-size: 0.98rem !important;
+            padding: 0.75rem 1rem !important;
+            font-size: 1rem !important;
             font-family: 'Inter', sans-serif !important;
             color: var(--text-primary) !important;
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
-            box-shadow: var(--shadow-sm) !important;
-        }
-
-        .gradio-textbox .scroll-hide {
-            background-color: var(--background-primary) !important;
         }
 
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
             outline: none !important;
             border-color: var(--border-focus) !important;
-            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
+            box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1) !important;
         }
 
         .gradio-radio {
@@ -544,45 +504,37 @@ Answer:"""
             justify-content: center !important;
             align-items: center !important;
             padding: 0.75rem 1rem !important;
-            border: 2px solid var(--border-color) !important;
+            border: 1px solid var(--border-color) !important;
             border-radius: 8px !important;
             color: var(--text-primary) !important;
             font-weight: 500 !important;
             cursor: pointer !important;
             transition: all 0.2s ease-out !important;
-            box-shadow: var(--shadow-sm) !important;
-            margin: 0.2rem 0 !important;
-            width: 100 !important;
+            margin: 0.25rem 0 !important;
+            width: 100% !important;
             box-sizing: border-box !important;
         }
 
         .gradio-radio label span.text-lg {
-            font-weight: 600 !important;
+            font-weight: 500 !important;
             color: var(--text-primary) !important;
-            font-size: 0.98rem !important;
+            font-size: 1rem !important;
         }
 
         .gradio-radio label:hover {
-            background-color: var(--background-secondary) !important;
             border-color: var(--primary-color) !important;
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-2px) !important;
         }
 
         .gradio-radio input[type="radio"]:checked + label {
             background-color: var(--primary-color) !important;
-            color: var(--text-primary) !important;
-            border-color: var(--primary-hover) !important;
+            color: #FFFFFF !important;
+            border-color: var(--primary-color) !important;
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-1px) !important;
         }
 
         .gradio-radio input[type="radio"]:checked + label span.text-lg {
-            color: var(--text-primary) !important;
-        }
-
-        .gradio-radio .gr-form {
-            padding: 0 !important;
+            color: #FFFFFF !important;
         }
 
         .gradio-textbox label,
@@ -590,7 +542,7 @@ Answer:"""
             font-weight: 600 !important;
             color: var(--text-primary) !important;
             font-size: 1rem !important;
-            margin-bottom: 0.6rem !important;
+            margin-bottom: 0.5rem !important;
             display: block !important;
             text-align: left !important;
         }
@@ -598,7 +550,7 @@ Answer:"""
         .gr-prose {
             font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
-            margin-top: 0.4rem !important;
+            margin-top: 0.5rem !important;
             text-align: left !important;
             background-color: transparent !important;
         }
@@ -606,8 +558,8 @@ Answer:"""
         .input-column {
             display: flex !important;
             flex-direction: column !important;
-            gap: 1.25rem !important;
-            margin-bottom: 0.5rem !important;
+            gap: 1.5rem !important;
+            margin-bottom: 1rem !important;
         }
 
         .input-field {
@@ -623,67 +575,67 @@ Answer:"""
         }
 
         .gradio-button {
-            padding: 0.85rem 1.8rem !important;
-            border-radius: 9px !important;
+            padding: 0.75rem 1.5rem !important;
+            border-radius: 8px !important;
             font-weight: 600 !important;
             font-size: 1rem !important;
+            font-family: 'Inter', sans-serif !important;
             transition: all 0.2s ease-out !important;
             cursor: pointer !important;
-            border: 2px solid transparent !important;
+            border: none !important;
             text-align: center !important;
-            color: var(--text-primary) !important;
         }
 
         .gr-button-primary {
             background-color: var(--primary-color) !important;
-            color: white !important;
+            color: #FFFFFF !important;
             box-shadow: var(--shadow-sm) !important;
         }
 
         .gr-button-primary:hover {
             background-color: var(--primary-hover) !important;
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-2px) !important;
+            transform: translateY(-1px) !important;
         }
 
         .gr-button-primary:active {
-            transform: translateY(1px) !important;
-            box-shadow: none !important;
+            transform: translateY(0) !important;
+            box-shadow: var(--shadow-sm) !important;
         }
 
         .gr-button-secondary {
-            background-color: transparent !important;
+            background-color: #F5F5F5 !important;
             color: var(--text-primary) !important;
-            border-color: var(--border-color) !important;
+            border: 1px solid var(--border-color) !important;
         }
 
         .gr-button-secondary:hover {
-            background-color: var(--background-secondary) !important;
+            background-color: #E5E5E5 !important;
             border-color: var(--primary-color) !important;
-            transform: translateY(-2px) !important;
+            transform: translateY(-1px) !important;
         }
 
         .gr-button-secondary:active {
-            transform: translateY(1px) !important;
+            transform: translateY(0) !important;
             box-shadow: none !important;
         }
 
         .output-content-wrapper {
-            background-color: var(--background-primary) !important;
-            border: 2px solid var(--border-color) !important;
+            background-color: #FFFFFF !important;
             border-radius: 8px !important;
             padding: 1.5rem !important;
-            min-height: 150px !important;
+            min-height: 120px !important;
             color: var(--text-primary) !important;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
+            box-shadow: var(--shadow-sm) !important;
         }
 
         .animated-output-content {
             opacity: 0;
-            animation: fadeInAndSlideUp 0.7s ease-out forwards;
+            animation: fadeInAndSlideUp 0.5s ease-out forwards;
             width: 100%;
             white-space: pre-wrap;
             overflow-wrap: break-word;
@@ -693,46 +645,45 @@ Answer:"""
         }
 
         @keyframes fadeInAndSlideUp {
-            from { opacity: 0; transform: translateY(15px); }
+            from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
 
         .response-header {
-            font-size: 1.3rem !important;
-            font-weight: 700 !important;
+            font-size: 1.2rem !important;
+            font-weight: 600 !important;
             color: var(--primary-color) !important;
             margin-bottom: 0.75rem !important;
             display: flex !important;
             align-items: center !important;
-            gap: 0.6rem !important;
+            gap: 0.5rem !important;
             text-align: left !important;
             width: 100%;
-            justify-content: flex-start;
         }
 
         .response-icon {
-            font-size: 1.5rem !important;
+            font-size: 1.3rem !important;
             color: var(--primary-color) !important;
         }
 
         .divider {
             border: none !important;
-            border-top: 1px dashed var(--border-color) !important;
+            border-top: 1px solid var(--border-color) !important;
             margin: 1rem 0 !important;
         }
 
         .error-message {
             background-color: var(--error-bg) !important;
-            border: 2px solid var(--error-border) !important;
+            border: 1px solid var(--error-border) !important;
             color: var(--error-text) !important;
-            padding: 1.25rem !important;
+            padding: 1rem !important;
             border-radius: 8px !important;
             display: flex !important;
             align-items: flex-start !important;
-            gap: 0.8rem !important;
-            font-size: 0.95rem !important;
+            gap: 0.5rem !important;
+            font-size: 0.9rem !important;
             font-weight: 500 !important;
-            line-height: 1.6 !important;
+            line-height: 1.5 !important;
             text-align: left !important;
             width: 100%;
             box-sizing: border-box;
@@ -744,33 +695,26 @@ Answer:"""
         }
 
         .error-icon {
-            font-size: 1.4rem !important;
+            font-size: 1.2rem !important;
             line-height: 1 !important;
             margin-top: 0.1rem !important;
         }
 
-        .error-details {
-            font-size: 0.85rem !important;
-            color: var(--error-text) !important;
-            margin-top: 0.5rem !important;
-            opacity: 0.8;
-        }
-
         .placeholder {
-            background-color: var(--background-primary) !important;
-            border: 2px dashed var(--border-color) !important;
+            background-color: #FFFFFF !important;
+            border: 1px dashed var(--border-color) !important;
             border-radius: 8px !important;
-            padding: 2.5rem 1.5rem !important;
+            padding: 2rem 1.5rem !important;
             text-align: center !important;
             color: var(--text-secondary) !important;
             font-style: italic !important;
-            font-size: 1.1rem !important;
+            font-size: 1rem !important;
             width: 100%;
             box-sizing: border-box;
         }
 
         .examples-section .gr-samples-table {
-            border: 2px solid var(--border-color) !important;
+            border: 1px solid var(--border-color) !important;
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
@@ -778,7 +722,7 @@ Answer:"""
 
         .examples-section .gr-samples-table th,
         .examples-section .gr-samples-table td {
-            padding: 0.9rem !important;
+            padding: 0.75rem 1rem !important;
             border: none !important;
             font-size: 0.95rem !important;
             text-align: left !important;
@@ -786,22 +730,21 @@ Answer:"""
         }
 
         .examples-section .gr-samples-table th {
-            background-color: var(--background-secondary) !important;
-            font-weight: 700 !important;
+            background-color: #F5F5F5 !important;
+            font-weight: 600 !important;
             color: var(--text-primary) !important;
         }
 
         .examples-section .gr-samples-table td {
-            background-color: var(--background-primary) !important;
+            background-color: #FFFFFF !important;
             color: var(--text-primary) !important;
             border-top: 1px solid var(--border-color) !important;
             cursor: pointer !important;
-            transition: background 0.2s ease, transform 0.1s ease !important;
+            transition: background 0.2s ease !important;
         }
 
         .examples-section .gr-samples-table tr:hover td {
-            background-color: var(--background-secondary) !important;
-            transform: translateX(5px);
+            background-color: #F9F9F9 !important;
         }
 
         .gr-examples .gr-label,
@@ -811,36 +754,33 @@ Answer:"""
         }
 
         .app-footer-wrapper {
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
-            border: 2px solid var(--border-color) !important;
+            background-color: var(--background-card) !important;
             border-radius: 12px !important;
-            padding: 1.75rem !important;
-            margin-top: 1.5rem !important;
-            margin-bottom: 1.5rem !important;
+            padding: 1.5rem !important;
+            margin-top: 2rem !important;
             text-align: center !important;
             color: var(--text-primary) !important;
+            box-shadow: var(--shadow-sm) !important;
         }
 
         .app-footer p {
             margin: 0 !important;
-            max-width: 90% !important;
-            font-size: 0.95rem !important;
+            font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
-            line-height: 1.6 !important;
+            line-height: 1.5 !important;
             background-color: transparent !important;
             text-align: center !important;
-            white-space: normal !important;
         }
 
         .app-footer strong, .app-footer b {
-            font-weight: 700 !important;
+            font-weight: 600 !important;
             color: var(--primary-color) !important;
         }
 
         .app-footer a {
             color: var(--primary-color) !important;
             text-decoration: underline !important;
-            font-weight: 600 !important;
+            font-weight: 500 !important;
         }
 
         .app-footer a:hover {
@@ -850,10 +790,11 @@ Answer:"""
         @media (max-width: 768px) {
             .gradio-container {
                 padding: 1rem !important;
+                margin: 1rem auto !important;
             }
 
             .app-header-title {
-                font-size: 2.2rem !important;
+                font-size: 2rem !important;
             }
 
             .app-header-tagline {
@@ -861,7 +802,7 @@ Answer:"""
             }
 
             .section-title {
-                font-size: 1.4rem !important;
+                font-size: 1.3rem !important;
             }
 
             .input-column {
@@ -870,6 +811,7 @@ Answer:"""
 
             .button-row {
                 flex-direction: column !important;
+                gap: 0.75rem !important;
             }
 
             .gradio-button {
@@ -877,20 +819,20 @@ Answer:"""
             }
 
             .section-title-gradient-bar {
-                padding: 0.1rem 1rem !important;
+                padding: 0.75rem 1rem !important;
             }
 
             .dashboard-card-content-area {
-                padding: 0 1rem 1rem 1rem !important;
+                padding: 1rem !important;
             }
 
             .output-content-wrapper {
-                min-height: 120px !important;
+                min-height: 100px !important;
             }
 
             .placeholder {
                 padding: 1.5rem 1rem !important;
-                font-size: 1rem !important;
+                font-size: 0.9rem !important;
             }
         }
         """