updated UI

app.py

@@ -289,7 +289,6 @@ Answer:"""
         # --- Custom CSS for "Legal Noir" Theme (Dark Mode First) ---
         custom_css = """
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700;800;900&display=swap');
-
         :root {
             /* Dark Theme Colors (Default: Legal Noir) */
             --app-bg-dark: #0F0F1A; /* Very dark blue-purple for the absolute background */
@@ -306,7 +305,6 @@ Answer:"""
             --error-bg-dark: #4D001A; /* Deep red for errors */
             --error-text-dark: #FFB3C2; /* Light pink for error text */
             --error-border-dark: #990026;
-
             /* Light Theme Colors (Alternative: Legal Lumen) */
             --app-bg-light: #F0F2F5; /* Soft light gray background */
             --header-bg-light: #E0E4EB; /* Lighter header/footer elements */
@@ -322,7 +320,6 @@ Answer:"""
             --error-bg-light: #F8D7DA;
             --error-text-light: #721C24;
             --error-border-light: #F5C6CB;
-
             /* General Styling Variables */
             --font-family-main: 'Inter', sans-serif;
             --font-family-header: 'Playfair Display', serif; /* Elegant serif for titles */
@@ -336,7 +333,6 @@ Answer:"""
             --padding-md: 2.5rem;
             --padding-sm: 1.8rem;
         }
-
         /* Apply theme based on system preference */
         body, .gradio-container {
             font-family: var(--font-family-main) !important;
@@ -352,14 +348,12 @@ Answer:"""
             transition: background var(--transition-speed), color var(--transition-speed);
         }
         * { box-sizing: border-box; }
-
         @media (prefers-color-scheme: light) {
             body, .gradio-container {
                 background: var(--app-bg-light) !important;
                 color: var(--text-primary-light) !important;
             }
         }
-
         /* Global container for content alignment and padding */
         .gradio-container > .flex.flex-col {
             max-width: 1120px; /* Even wider for a more expansive dashboard feel */
@@ -368,7 +362,6 @@ Answer:"""
             gap: 0 !important;
             transition: padding var(--transition-speed);
         }
-
         /* Header styling: dynamic, centralized, and visually connecting */
         .app-header-wrapper {
             background: var(--header-bg-dark); 
@@ -400,7 +393,6 @@ Answer:"""
                 border-top: none;
             }
         }
-
         .app-header {
             display: flex;
             flex-direction: column;
@@ -418,7 +410,6 @@ Answer:"""
             transition: filter var(--transition-speed);
         }
         @media (prefers-color-scheme: light) { .app-header-logo { filter: drop-shadow(0 0 10px var(--accent-main-light)); } }
-
         .app-header-title {
             font-family: var(--font-family-header) !important;
             font-size: 4.2rem; /* The main title: massive, bold, and dynamic */
@@ -431,7 +422,6 @@ Answer:"""
             transition: text-shadow var(--transition-speed), color var(--transition-speed);
         }
         @media (prefers-color-scheme: light) { .app-header-title { text-shadow: 0 6px 12px rgba(0,0,0,0.25); } }
-
         .app-header-tagline {
             font-family: var(--font-family-main) !important;
             font-size: 1.6rem; /* Larger, more inviting tagline */
@@ -442,13 +432,11 @@ Answer:"""
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.9s;
             transition: opacity var(--transition-speed);
         }
-
         /* Keyframe animations for header elements */
         @keyframes fadeInSlideDown {
             from { opacity: 0; transform: translateY(-40px); }
             to { opacity: 1; transform: translateY(0); }
         }
-
         /* --- NEW: Main Dashboard Console Container --- */
         .main-dashboard-container {
             background: var(--main-card-bg-dark) !important;
@@ -473,7 +461,6 @@ Answer:"""
                 border: 1px solid var(--border-light) !important;
             }
         }
-
         /* --- NEW: Card Sections within the Main Console --- */
         .dashboard-card-section {
             background: var(--card-section-bg-dark) !important;
@@ -493,7 +480,6 @@ Answer:"""
                 box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
             }
         }
-
         /* Section titles within the unified main content area */
         .section-title { /* For 'Know Your Rights' */
             font-family: var(--font-family-header) !important;
@@ -523,7 +509,6 @@ Answer:"""
                 border-bottom-color: var(--border-light) !important;
             }
         }
-
         /* General text styling within main content: highly legible */
         .dashboard-card-section p, .output-content-wrapper p {
             font-size: 1.15rem; /* Larger, more readable body text */
@@ -553,7 +538,6 @@ Answer:"""
             .dashboard-card-section a:hover, .output-content-wrapper a:hover { color: var(--accent-hover-light); }
             .dashboard-card-section strong, .output-content-wrapper strong { color: var(--text-primary-light); }
         }
-
         /* Horizontal rule for visual separation within the main block */
         .section-divider {
             border: none;
@@ -562,7 +546,6 @@ Answer:"""
             transition: border-color var(--transition-speed);
         }
         @media (prefers-color-scheme: light) { .section-divider { border-top: 1px solid var(--border-light); } }
-
         /* Input field groups and layout: spacious and clear */
         .input-field-group { margin-bottom: 1rem; } /* Reduced from 1.5rem */
         .input-row {
@@ -574,7 +557,6 @@ Answer:"""
         .input-field {
             flex: 1; /* Allows flexible sizing */
         }
-
         /* Input labels and info text: prominent and clear */
         .gradio-input-label {
             font-size: 1.2rem !important; /* Larger, more prominent labels */
@@ -585,7 +567,7 @@ Answer:"""
             transition: color var(--transition-speed);
         }
         .gradio-input-info {
-            font-size: 1rem !important;
+            font-size: 1.0rem !important;
             color: var(--text-secondary-dark) !important;
             margin-top: 0.6rem;
             transition: color var(--transition-speed);
@@ -594,7 +576,6 @@ Answer:"""
             .gradio-input-label { color: var(--text-primary-light) !important; }
             .gradio-input-info { color: var(--text-secondary-light) !important; }
         }
-
         /* Textbox, Dropdown, Password input styling: larger, more refined */
         .gradio-textbox textarea,
         .gradio-dropdown select,
@@ -637,7 +618,6 @@ Answer:"""
                 box-shadow: 0 0 0 6px var(--focus-ring-light) !important, inset 0 1px 3px rgba(0,0,0,0.2);
             }
         }
-
         /* Custom dropdown arrow */
         .gradio-dropdown select {
             appearance: none; -webkit-appearance: none; -moz-appearance: none;
@@ -652,7 +632,6 @@ Answer:"""
                 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236C757D%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
             }
         }
-
         /* Button group and styling: dynamic and clear actions */
         .button-row {
             display: flex;
@@ -682,7 +661,6 @@ Answer:"""
             border-color: #4A4A60 !important;
             cursor: not-allowed;
         }
-
         /* Primary button */
         .gr-button-primary {
             background: var(--accent-main-dark) !important;
@@ -693,7 +671,6 @@ Answer:"""
             background: var(--accent-hover-dark) !important;
             border-color: var(--accent-hover-dark) !important;
         }
-
         /* Secondary button */
         .gr-button-secondary {
             background: transparent !important;
@@ -706,7 +683,6 @@ Answer:"""
             color: var(--accent-main-dark) !important;
             border-color: var(--accent-main-dark) !important;
         }
-
         @media (prefers-color-scheme: light) {
             .gradio-button { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
             .gradio-button:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(0,0,0,0.2) !important; }
@@ -735,7 +711,6 @@ Answer:"""
                 border-color: var(--accent-main-light) !important;
             }
         }
-
         /* Output Styling within the main content area */
         .output-card { /* Class for the output content area markdown component */
             padding: 0 !important; /* Markdown itself might have padding, control it within */
@@ -787,7 +762,6 @@ Answer:"""
         .output-card .output-content-wrapper a:hover {
             color: var(--accent-hover-dark);
         }
-
         @media (prefers-color-scheme: light) {
             .output-card .response-header { color: var(--text-primary-light); }
             .output-card .response-icon { color: var(--accent-main-light); }
@@ -796,7 +770,6 @@ Answer:"""
             .output-card .output-content-wrapper a { color: var(--accent-main-light); }
             .output-card .output-content-wrapper a:hover { color: var(--accent-hover-light); }
         }
-
         /* Error messages: clear, prominent, and legible */
         .output-card .error-message { /* This is also an inner div within the output markdown */
             padding: 1.5rem 2rem; /* Reduced padding */
@@ -829,7 +802,6 @@ Answer:"""
                 border: 2px solid var(--error-border-light);
             }
         }
-
         /* Output placeholder styling: inviting and distinct */
         .output-card .placeholder { /* Also an inner div within the output markdown */
             padding: 2.5rem 2rem; /* Reduced padding */
@@ -847,7 +819,6 @@ Answer:"""
                 color: var(--text-secondary-light);
             }
         }
-
         /* Examples table styling: integrated within the main content block, but with clear visual identity */
         /* Applied to the gr.Column that wraps the examples */
         .examples-section .gr-examples-table {
@@ -865,7 +836,6 @@ Answer:"""
                 box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
             }
         }
-
         .examples-section .gr-examples-table th,
         .examples-section .gr-examples-table td {
             padding: 1rem 1.2rem !important; /* Slightly reduced padding for tighter coupling */
@@ -890,15 +860,12 @@ Answer:"""
             background: rgba(255, 193, 7, 0.1) !important; /* Gold tint on hover */
         }
         .examples-section .gr-examples-table tr:first-child td { border-top: none !important; }
-
         @media (prefers-color-scheme: light) {
             .examples-section .gr-examples-table { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; }
             .examples-section .gr-examples-table th { background: var(--header-bg-light) !important; color: var(--text-primary-light) !important; }
             .examples-section .gr-examples-table td { background: var(--card-section-bg-light) !important; color: var(--text-primary-light) !important; border-top: 1px solid var(--border-light) !important; }
             .examples-section .gr-examples-table tr:hover td { background: rgba(0, 123, 255, 0.08) !important; }
         }
-
-
         /* Footer styling: clean and informative, integrated at the very bottom */
         .app-footer-wrapper {
             background: var(--header-bg-dark); /* Match header background for consistency */
@@ -923,7 +890,6 @@ Answer:"""
                 box-shadow: inset 0 6px 12px rgba(0,0,0,0.1);
             }
         }
-
         .app-footer {
             padding: 0 var(--padding-lg) !important;
             text-align: center !important;
@@ -953,7 +919,6 @@ Answer:"""
             .app-footer a { color: var(--accent-main-light) !important; }
             .app-footer a:hover { color: var(--accent-hover-light) !important; }
         }
-
         /* Accessibility: Focus styles */
         :focus-visible {
             outline: 5px solid var(--accent-main-dark) !important; /* Even thicker for accessibility */
@@ -968,7 +933,6 @@ Answer:"""
             }
         }
         .gradio-button span:focus { outline: none !important; }
-
         /* MOST AGGRESSIVE "FALSE" & FILTER ICON REMOVAL - THIS SHOULD FINALLY KILL IT */
         /* Targets ALL known problematic elements that might contain "false", the filter menu icon, or accordion toggle */
         .gr-examples .gr-label,
@@ -1004,8 +968,6 @@ Answer:"""
             position: absolute !important; /* Take it out of normal flow */
             pointer-events: none !important; /* Ensure it's not interactive */
         }
-
-
         /* Responsive Adjustments (meticulously refined) */
         @media (max-width: 1024px) {
             .gradio-container > .flex.flex-col { max-width: 960px; padding: 0 1.5rem !important; }
@@ -1025,7 +987,6 @@ Answer:"""
             .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; }
             .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
         }
-
         @media (max-width: 768px) {
             .gradio-container > .flex.flex-col { padding: 0 1rem !important; }
             .app-header-wrapper { padding: var(--padding-sm) var(--padding-md) !important; margin-bottom: 1.8rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
@@ -1049,7 +1010,6 @@ Answer:"""
             .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; } /* Restore to 0.9rem/1.1rem */
             .app-footer-wrapper { margin-top: 0.5rem; padding-top: 2rem; padding-bottom: 2rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
         }
-
         @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: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }