Restyle app to match OHA branding

app.py

@@ -631,79 +631,246 @@ def stream_chat_response(message, chat_history, eligibility_data):
 # === CUSTOM CSS ===
 
 custom_css = """
-/* CT.gov inspired styling */
+/* ===== CT.GOV / OHA Official Branding ===== */
+
+/* --- Global --- */
 .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-    max-width: 1200px !important;
-    margin: auto !important;
+    max-width: 1100px !important;
+    margin: 0 auto !important;
+    background: #FFFFFF !important;
+    color: #212529 !important;
+    font-size: 16px !important;
+    line-height: 1.6 !important;
 }
 
-/* CT Blue header */
-h1 {
-    color: #0d6efd !important;
-    font-weight: 600 !important;
-    border-bottom: 3px solid #0d6efd;
-    padding-bottom: 1rem;
+/* --- CT.GOV Top Bar --- */
+.ct-gov-bar {
+    background: #00264D;
+    color: #FFFFFF;
+    font-size: 0.8rem;
+    padding: 6px 24px;
+    letter-spacing: 0.03em;
+    margin: -16px -16px 0 -16px;
+}
+.ct-gov-bar span {
+    opacity: 0.85;
 }
 
-/* Buttons - CT Blue */
-.gr-button-primary {
-    background: #0d6efd !important;
+/* --- Blue Header Band --- */
+.oha-header {
+    background: #003DA5;
+    color: #FFFFFF;
+    padding: 1.25rem 24px;
+    margin: 0 -16px 1.5rem -16px;
+}
+.oha-header h1 {
+    color: #FFFFFF !important;
+    font-size: 1.75rem !important;
+    font-weight: 300 !important;
+    margin: 0 !important;
+    padding: 0 !important;
     border: none !important;
-    color: white !important;
+    line-height: 1.3;
+}
+.oha-header .oha-subtitle {
+    color: rgba(255,255,255,0.85);
+    font-size: 0.95rem;
+    margin-top: 0.25rem;
+    font-weight: 400;
+}
+.oha-header .oha-beta {
+    display: inline-block;
+    background: rgba(255,255,255,0.2);
+    color: #FFFFFF;
+    padding: 2px 10px;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    margin-left: 0.75rem;
+    vertical-align: middle;
+}
+
+/* --- Language Toggle --- */
+.lang-toggle {
+    text-align: right;
+    padding-top: 2px;
+}
+.lang-toggle .gr-radio-group, .lang-toggle label {
+    color: #FFFFFF !important;
 }
 
-.gr-button-primary:hover {
-    background: #0a58ca !important;
+/* --- Section Cards / Groups --- */
+.gr-group {
+    background: #FFFFFF !important;
+    padding: 1.5rem !important;
+    border-radius: 6px !important;
+    border: 1px solid #E0E0E0 !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
+    margin-bottom: 1rem !important;
 }
 
-.gr-button-secondary {
-    background: #6c757d !important;
+/* --- Headings --- */
+h1 {
+    color: #003DA5 !important;
+    font-weight: 300 !important;
     border: none !important;
-    color: white !important;
+    padding: 0 !important;
+}
+h2 {
+    color: #003DA5 !important;
+    font-weight: 500 !important;
+    font-size: 1.35rem !important;
+    border-bottom: 2px solid #E0E0E0;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+}
+h3 {
+    color: #212529 !important;
+    font-weight: 500 !important;
+    font-size: 1.05rem !important;
 }
 
-/* Form inputs */
-.gr-box, .gr-input, .gr-dropdown {
-    border: 1px solid #ced4da !important;
-    border-radius: 0.375rem !important;
+/* --- Body Text --- */
+p, span, div {
+    color: #212529;
 }
 
-/* Card-like sections */
-.gr-group {
-    background: #f8f9fa !important;
-    padding: 1.5rem !important;
-    border-radius: 0.5rem !important;
-    border: 1px solid #dee2e6 !important;
+/* --- Links --- */
+a {
+    color: #003DA5 !important;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+    color: #00264D !important;
 }
 
-/* Labels */
+/* --- Labels --- */
 label {
     color: #212529 !important;
     font-weight: 500 !important;
-    margin-bottom: 0.5rem !important;
+    font-size: 0.95rem !important;
+    margin-bottom: 0.4rem !important;
 }
 
-/* Results cards */
-.markdown-text h2 {
-    color: #0d6efd !important;
-    border-bottom: 2px solid #e9ecef;
-    padding-bottom: 0.5rem;
+/* --- Form Inputs --- */
+input[type="text"], input[type="number"], textarea, select,
+.gr-box, .gr-input, .gr-dropdown {
+    border: 1px solid #CED4DA !important;
+    border-radius: 4px !important;
+    padding: 0.5rem 0.75rem !important;
+    font-size: 1rem !important;
+    color: #212529 !important;
+    background: #FFFFFF !important;
+}
+input:focus, textarea:focus, select:focus {
+    border-color: #003DA5 !important;
+    box-shadow: 0 0 0 2px rgba(0,61,165,0.15) !important;
+    outline: none !important;
 }
 
-.markdown-text h3 {
+/* --- Primary Buttons --- */
+.gr-button-primary, button.primary {
+    background: #003DA5 !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: 5px !important;
+    font-weight: 500 !important;
+    font-size: 0.95rem !important;
+    padding: 0.6rem 1.5rem !important;
+    transition: background 0.15s ease !important;
+}
+.gr-button-primary:hover, button.primary:hover {
+    background: #002D7A !important;
+}
+
+/* --- Secondary Buttons --- */
+.gr-button-secondary, button.secondary {
+    background: #FFFFFF !important;
+    color: #003DA5 !important;
+    border: 1.5px solid #003DA5 !important;
+    border-radius: 5px !important;
+    font-weight: 500 !important;
+    font-size: 0.95rem !important;
+    padding: 0.6rem 1.5rem !important;
+    transition: all 0.15s ease !important;
+}
+.gr-button-secondary:hover, button.secondary:hover {
+    background: #F0F4FA !important;
+    border-color: #002D7A !important;
+}
+
+/* --- Small / Back Buttons --- */
+button.sm {
+    font-size: 0.85rem !important;
+    padding: 0.35rem 0.9rem !important;
     color: #495057 !important;
-    font-size: 1.1rem;
+    background: transparent !important;
+    border: 1px solid #CED4DA !important;
+    border-radius: 4px !important;
+}
+button.sm:hover {
+    background: #F5F5F5 !important;
+    color: #212529 !important;
 }
 
-/* Source links section */
-.markdown-text a {
-    color: #0d6efd !important;
-    text-decoration: none;
+/* --- Suggested Prompt Pill Buttons --- */
+.prompt-pill button {
+    background: #FFFFFF !important;
+    color: #003DA5 !important;
+    border: 1.5px solid #003DA5 !important;
+    border-radius: 20px !important;
+    font-size: 0.85rem !important;
+    font-weight: 400 !important;
+    padding: 0.4rem 1rem !important;
+    transition: all 0.15s ease !important;
+}
+.prompt-pill button:hover {
+    background: #003DA5 !important;
+    color: #FFFFFF !important;
 }
 
-.markdown-text a:hover {
-    text-decoration: underline;
+/* --- Results / Disclaimer --- */
+blockquote {
+    background: #FFF8E1 !important;
+    border-left: 4px solid #FFC107 !important;
+    padding: 0.75rem 1rem !important;
+    border-radius: 4px !important;
+    font-size: 0.9rem !important;
+    color: #495057 !important;
+    margin: 0 0 1rem 0 !important;
+}
+
+/* --- Status Badge --- */
+.markdown-text h3 {
+    font-size: 1.05rem !important;
+}
+
+/* --- Chatbot --- */
+.chatbot {
+    border: 1px solid #E0E0E0 !important;
+    border-radius: 6px !important;
+}
+
+/* --- Map iframe --- */
+.map-embed iframe {
+    border-radius: 6px;
+    border: 1px solid #E0E0E0;
+}
+
+/* --- Horizontal rules in markdown --- */
+hr {
+    border: none !important;
+    border-top: 1px solid #E0E0E0 !important;
+    margin: 1rem 0 !important;
+}
+
+/* --- File download --- */
+.gr-file {
+    border: 1px solid #E0E0E0 !important;
+    border-radius: 4px !important;
 }
 """
 
@@ -712,7 +879,21 @@ label {
 def create_interface():
     """Build and return the Gradio Blocks interface with all steps and event wiring."""
     with gr.Blocks(
-        theme=gr.themes.Default(primary_hue="blue", neutral_hue="slate"),
+        theme=gr.themes.Default(
+            primary_hue=gr.themes.Color(
+                c50="#F0F4FA", c100="#D6E2F5", c200="#AECAEF",
+                c300="#7BAEE6", c400="#4A8FDB", c500="#003DA5",
+                c600="#003490", c700="#002D7A", c800="#00264D",
+                c900="#001B3A", c950="#001028",
+            ),
+            neutral_hue=gr.themes.Color(
+                c50="#F5F5F5", c100="#E0E0E0", c200="#CED4DA",
+                c300="#ADB5BD", c400="#6C757D", c500="#495057",
+                c600="#343A40", c700="#212529", c800="#1A1E21",
+                c900="#111315", c950="#0A0C0D",
+            ),
+            font=["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
+        ),
         css=custom_css
     ) as demo:
 
@@ -722,13 +903,31 @@ def create_interface():
         chat_history_state = gr.State([])  # List of {"role":..., "content":...} dicts
         chat_count_state = gr.State(0)     # Message counter for rate limiting
 
-        # Header with Beta tag
+        # CT.GOV top bar (decorative)
+        gr.HTML(
+            '<div class="ct-gov-bar">'
+            '<span><strong>CT.GOV</strong> &nbsp;|&nbsp; State of Connecticut</span>'
+            '</div>'
+        )
+
+        # OHA blue header band with language toggle
+        gr.HTML(
+            '<div class="oha-header">'
+            '<div style="display:flex; justify-content:space-between; align-items:center;">'
+            '<div>'
+            '<h1>Office of the Healthcare Advocate<span class="oha-beta">BETA</span></h1>'
+            '<div class="oha-subtitle">Hospital Financial Assistance Eligibility Screener</div>'
+            '</div>'
+            '</div>'
+            '</div>'
+        )
+
         with gr.Row():
-            with gr.Column(scale=4):
-                gr.Markdown("# 🏥 Connecticut Hospital Financial Assistance <span style='background-color: #ffc107; color: #664d03; padding: 4px 12px; border-radius: 4px; font-size: 0.75em; font-weight: bold; margin-left: 0.5rem;'>BETA</span>")
-            with gr.Column(scale=1):
+            with gr.Column():
+                pass
+            with gr.Column(scale=0, min_width=160):
                 lang_toggle = gr.Radio(
-                    choices=["English", "Español"],
+                    choices=["English", "Espa\u00f1ol"],
                     value="English",
                     label="Language",
                     container=False
@@ -739,13 +938,15 @@ def create_interface():
         with step1:
             gr.Markdown("### How would you like to start?")
             with gr.Row():
-                help_btn = gr.Button("🔍 Search: Help me find a hospital", variant="primary", size="lg")
-                know_btn = gr.Button("🏥 Select: I know my hospital", variant="secondary", size="lg")
+                help_btn = gr.Button("Find a Hospital by ZIP Code", variant="primary", size="lg")
+                know_btn = gr.Button("I Know My Hospital", variant="secondary", size="lg")
 
             gr.HTML(
+                '<div class="map-embed" style="margin-top:1rem;">'
                 '<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1UVO9r7ZS26kZr8Q62dY0147v3Milu_s&ll=41.508444988744984%2C-72.7719992&z=9" '
-                'width="100%" height="480" style="border:0; border-radius: 8px; margin-top: 1rem;" '
+                'width="100%" height="480" style="border:0; border-radius: 6px;" '
                 'allowfullscreen="" loading="lazy" title="Map: Connecticut Hospital Locations"></iframe>'
+                '</div>'
             )
 
         # Step 2a: Find hospital by ZIP
@@ -758,7 +959,7 @@ def create_interface():
             nearby_cards = gr.Markdown()
             hospital_radio = gr.Radio(label="Select a hospital", choices=[], visible=False)
             continue_btn_a = gr.Button("Continue", variant="primary", visible=False)
-            back_btn_a = gr.Button("← Back", size="sm")
+            back_btn_a = gr.Button("Back", size="sm")
 
         # Step 2b: Select known hospital
         step2b = gr.Group(visible=False)
@@ -769,7 +970,7 @@ def create_interface():
                 label="Hospital"
             )
             continue_btn_b = gr.Button("Continue", variant="primary")
-            back_btn_b = gr.Button("← Back", size="sm")
+            back_btn_b = gr.Button("Back", size="sm")
 
         # Step 3: Eligibility form
         step3 = gr.Group(visible=False)
@@ -782,32 +983,32 @@ def create_interface():
             insurance_radio = gr.Radio(choices=["Yes", "No"], label="Do you have health insurance?", value="No")
 
             check_btn = gr.Button("Check Eligibility", variant="primary", size="lg")
-            back_btn_c = gr.Button("← Back", size="sm")
+            back_btn_c = gr.Button("Back", size="sm")
 
         # Step 4: Results (with streaming) + follow-up chat
         step4 = gr.Group(visible=False)
         with step4:
             results_output = gr.Markdown()
             with gr.Row():
-                restart_btn = gr.Button("🔄 Restart: Check Another Hospital", variant="secondary")
-                download_btn = gr.Button("📥 Download: Save Results", variant="secondary")
+                restart_btn = gr.Button("Check Another Hospital", variant="secondary")
+                download_btn = gr.Button("Download Results", variant="secondary")
             download_file = gr.File(visible=False, label="Download")
 
             # --- Follow-up chat section ---
             gr.Markdown("---")
-            gr.Markdown("### 💬 Follow-Up Questions")
-            gr.Markdown("Ask questions about your eligibility, the application process, required documents, or appeal rights.")
+            gr.Markdown("### Follow-Up Questions")
+            gr.Markdown("Have additional questions? Ask about eligibility, the application process, required documents, or appeal rights.")
 
             chatbot = gr.Chatbot(
-                label="Chat",
+                label="Conversation",
                 height=350,
             )
 
-            # Suggested prompt buttons
-            with gr.Row():
+            # Suggested prompt buttons (pill-shaped via CSS)
+            with gr.Row(elem_classes="prompt-pill"):
                 prompt_btn_1 = gr.Button("What documents do I need to apply?", size="sm")
                 prompt_btn_2 = gr.Button("Can I appeal if I'm denied?", size="sm")
-            with gr.Row():
+            with gr.Row(elem_classes="prompt-pill"):
                 prompt_btn_3 = gr.Button("Does this cover emergency visits?", size="sm")
                 prompt_btn_4 = gr.Button("How do I contact the financial assistance office?", size="sm")