updated UI v7

app.py

@@ -281,7 +281,7 @@ Answer:"""
             ["What is an implied warranty of habitability?", "Illinois"]
         ]
         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[0] and len(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]
@@ -307,30 +307,33 @@ Answer:"""
         }
         /* Header specific styling */
         .app-header-wrapper {
-            padding: 4.5rem 3.5rem !important; /* Use hardcoded padding to override theme potentially */
+            padding: 4.5rem 3.5rem !important;
             text-align: center !important;
-            border-bottom-left-radius: 24px; /* Use hardcoded radius */
+            border-bottom-left-radius: 24px;
             border-bottom-right-radius: 24px;
             position: relative;
             overflow: hidden;
             z-index: 10;
-            margin-bottom: 2.5rem; /* Use hardcoded margin */
-            border: 1px solid var(--border-color-primary) !important;
+            margin-bottom: 2rem; /* Reduced margin */
+            border: 2px 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)); /* Using primary color from theme */
+            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; /* Explicit font family */
+            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);
@@ -338,7 +341,7 @@ Answer:"""
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.6s;
         }
         .app-header-tagline {
-            font-family: 'Inter', sans-serif !important; /* Explicit font family */
+            font-family: 'Inter', sans-serif !important;
             font-size: 1.6rem; font-weight: 300;
             opacity: 0.9; max-width: 900px;
             transform: translateY(-40px); opacity: 0;
@@ -346,19 +349,19 @@ Answer:"""
         }
         /* Main dashboard container */
         .main-dashboard-container {
-            border-radius: 24px; /* Use hardcoded radius */
-            border: 1px solid var(--border-color-primary) !important;
-            padding: 3.5rem !important; /* Use hardcoded padding */
-            margin: 0 auto 0.8rem auto;
+            border-radius: 24px;
+            border: 2px 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: 2.5rem; /* Use hardcoded gap */
+            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; /* Use hardcoded radius */
-            border: 1px solid var(--border-color-primary);
-            padding: 2.5rem; /* Use hardcoded padding */
+            border-radius: 12px;
+            border: 2px 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;
         }
@@ -369,9 +372,9 @@ Answer:"""
         /* Section titles */
         .sub-section-title {
             font-family: 'Playfair Display', serif !important;
-            font-size: 2.7rem !important;
+            font-size: 3.0rem !important; /* Increased font size */
             font-weight: 800 !important;
-            text-align: center !important;
+            text-align: center !important; /* Already centered, kept */
             margin-top: 1.5rem !important;
             margin-bottom: 0.8rem !important;
             display: block !important;
@@ -394,12 +397,12 @@ Answer:"""
         /* Button layout */
         .button-row { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; justify-content: flex-end; }
         .gradio-button {
-            border-radius: 12px !important; /* Hardcode radius */
-            padding: 1.2rem 2.8rem !important; /* Hardcode padding */
-            font-size: 1.15rem !important; /* Hardcode font size */
-            font-weight: 600 !important; /* Hardcode font weight */
+            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); /* Custom shadow */
+            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
             transition: all 0.4s cubic-bezier(0.0, 0.0, 0.2, 1);
         }
         .gradio-button:hover:not(:disabled) { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important; }
@@ -410,12 +413,12 @@ Answer:"""
         }
         .gr-button-secondary { /* Override for secondary button specific look */
             background: transparent !important;
-            border: 2px solid var(--border-color-primary) !important;
+            border: 2px solid var(--neutral-500) !important; /* Used neutral-500 for clearer border */
             box-shadow: none !important;
         }
         .gr-button-secondary:hover:not(:disabled) {
-            background: var(--button-secondary-background-hover) !important; /* Use theme variable */
-            border-color: var(--primary-500) !important; /* Use theme primary color */
+            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); }
@@ -427,7 +430,7 @@ Answer:"""
             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); } /* Use theme primary color */
+        .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; }
@@ -436,23 +439,23 @@ Answer:"""
         .output-card .output-content-wrapper li { margin-bottom: 0.8rem; }
         .output-card .error-message {
             padding: 1.5rem 2rem; margin-top: 1.5rem; font-size: 1.1rem;
-            border-radius: 12px; /* Hardcoded radius */
-            background: var(--error-background-fill) !important; /* Use theme error background */
-            color: var(--error-text-color) !important; /* Use theme error text */
-            border: 2px solid var(--error-border-color) !important; /* Use theme error border */
+            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; }
         .output-card .placeholder {
-            padding: 2.5rem 2rem; font-size: 1.2rem; border-radius: 12px; /* Hardcoded radius */
+            padding: 2.5rem 2rem; font-size: 1.2rem; border-radius: 12px;
             border: 3px dashed var(--border-color-primary);
             text-align: center; opacity: 0.8;
         }
         /* Examples table styling */
         .examples-section table.gr-samples-table {
-            border-radius: 12px !important; /* Hardcoded radius */
-            border: 1px solid var(--border-color-primary) !important;
+            border-radius: 12px !important;
+            border: 2px solid var(--border-color-primary) !important; /* Thicker border */
             overflow: hidden;
             box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
         }
@@ -461,22 +464,22 @@ Answer:"""
         }
         .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; /* Using theme background fill for table headers */
+            background: var(--block-background-fill) !important;
             font-weight: 600 !important; text-align: left;
         }
         .examples-section table.gr-samples-table td {
             border-top: 1px solid var(--border-color-primary) !important;
             cursor: pointer;
         }
-        .examples-section table.gr-samples-table tr:hover td { background: var(--hover-color) !important; } /* Use theme hover color */
+        .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: 1px solid var(--border-color-primary) !important;
-            margin-top: 0.5rem; /* Hardcoded margin */
-            padding-top: 2.5rem; /* Hardcoded padding */
-            padding-bottom: 2.5rem; /* Hardcoded padding */
-            border-top-left-radius: 24px; /* Hardcoded radius */
+            border-top: 2px 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;
@@ -485,10 +488,10 @@ Answer:"""
             width: 100%;
             display: flex !important;
             flex-direction: column !important;
-            align-items: flex-start !important; /* Left aligns the content */
+            align-items: flex-start !important;
         }
         .app-footer {
-            padding: 0 3.5rem !important; /* Hardcoded padding */
+            padding: 0 3.5rem !important;
             display: flex;
             flex-direction: column;
             align-items: stretch;
@@ -515,14 +518,14 @@ Answer:"""
             font-size: 0 !important; line-height: 0 !important; position: absolute !important;
             pointer-events: none !important;
         }
-        /* Responsive Adjustments (remaining hardcoded overrides) */
+        /* 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: 2rem; 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: 2rem; }
+            .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.0rem !important; margin-bottom: 0.7rem !important; }
+            .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; }
@@ -532,12 +535,12 @@ Answer:"""
         }
         @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.8rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
+            .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.8rem; }
+            .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: 1.8rem !important; margin-top: 1rem !important; margin-bottom: 0.6rem !important; }
+            .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; }
@@ -550,12 +553,12 @@ Answer:"""
         }
         @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.5rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
+            .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.5rem; }
+            .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.5rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; }
+            .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: 1rem !important; }
@@ -695,7 +698,7 @@ if __name__ == "__main__":
         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)
+        exit(1)
 
         logging.info(f"PDF file '{os.path.basename(PDF_PATH)}' found and is readable.")