Restyle app to match OHA branding

app.py

@@ -467,12 +467,17 @@ def format_results_streaming(data, lang):
 
 """
 
+    # Status badge
+    is_eligible = data['eligibility_status'] == t['eligible']
+    badge_class = "badge-eligible" if is_eligible else "badge-not-eligible"
+    badge_html = f'<span class="{badge_class}">{data["eligibility_status"]}</span>'
+
     # Header
     header = f"""## {data['hospital']}
 
-### {t['status']}: {data['eligibility_status']}
+### {t['status']}: {badge_html}
 
-💵 Income: ${data['income']:,.0f} ({data['fpl_percentage']}% FPL)
+Income: ${data['income']:,.0f} ({data['fpl_percentage']}% FPL)
 
 ---
 
@@ -483,19 +488,16 @@ def format_results_streaming(data, lang):
 
 ---
 
-📞 Contact: **{data['contact']}**
+**Contact:** {data['contact']}
 
 ---
 
-### 📄 {t['sources']}
-
-📄 Document: [**{data['hospital']} Financial Assistance Policy**]({data['fap_url']})
-
-📄 Document: [**Connecticut Public Act 24-81**](https://www.cga.ct.gov/2024/ba/pdf/2024HB-05320-R000149-BA.pdf)
+### {t['sources']}
 
-📄 Document: [**2025 Federal Poverty Level Guidelines**](https://www.healthcare.gov/glossary/federal-poverty-level-fpl/)
-
-📄 Document: [**CT Office of the Healthcare Advocate**](https://portal.ct.gov/oha)
+- [**{data['hospital']} Financial Assistance Policy**]({data['fap_url']})
+- [**Connecticut Public Act 24-81**](https://www.cga.ct.gov/2024/ba/pdf/2024HB-05320-R000149-BA.pdf)
+- [**2025 Federal Poverty Level Guidelines**](https://www.healthcare.gov/glossary/federal-poverty-level-fpl/)
+- [**CT Office of the Healthcare Advocate**](https://portal.ct.gov/oha)
 
 ---
 
@@ -631,16 +633,16 @@ def stream_chat_response(message, chat_history, eligibility_data):
 # === CUSTOM CSS ===
 
 custom_css = """
-/* ===== CT.GOV / OHA Official Branding ===== */
+/* ===== CT.GOV / OHA Design System ===== */
 
-/* --- Global --- */
+/* ---------- GLOBAL ---------- */
 .gradio-container {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-    max-width: 960px !important;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                 "Helvetica Neue", Arial, sans-serif !important;
+    max-width: 900px !important;
     width: 100% !important;
     margin: 0 auto !important;
-    padding-left: 1.5rem !important;
-    padding-right: 1.5rem !important;
+    padding: 0 32px !important;
     background: #FFFFFF !important;
     color: #212529 !important;
     font-size: 16px !important;
@@ -649,341 +651,342 @@ custom_css = """
     box-sizing: border-box !important;
 }
 
-/* --- CT.GOV Top Bar --- */
-.ct-gov-bar {
-    background: #00264D;
-    color: #FFFFFF;
-    font-size: 0.8rem;
-    padding: 6px 24px;
-    letter-spacing: 0.03em;
-    margin: -16px -1.5rem 0 -1.5rem;
+/* Kill ALL flex gap on the top-level Gradio column so hidden children
+   leave no trace.  Spacing comes from component margins instead. */
+.gradio-container > div,
+.gradio-container > div > div {
+    gap: 0 !important;
 }
-.ct-gov-bar a, .ct-gov-bar a span, .ct-gov-bar a strong {
-    color: #FFFFFF !important;
-    text-decoration: none;
+
+/* ---------- CT.GOV TOP BAR ---------- */
+.ct-gov-bar {
+    background: #003478;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding: 0 32px;
+    margin: -16px -32px 0 -32px;   /* bleed to edges */
 }
-.ct-gov-bar a:hover, .ct-gov-bar a:hover span {
-    text-decoration: underline;
+.ct-gov-bar a,
+.ct-gov-bar a span,
+.ct-gov-bar a strong {
     color: #FFFFFF !important;
+    text-decoration: none !important;
+    font-size: 14px;
 }
+.ct-gov-bar a:hover span { text-decoration: underline !important; }
 
-/* --- Blue Header Band --- */
+/* ---------- OHA HEADER BAND ---------- */
 .oha-header {
-    background: #003DA5;
-    color: #FFFFFF;
-    padding: 1.25rem 24px;
-    margin: 0 -1.5rem 1rem -1.5rem;
+    background: #0046AD;
+    padding: 24px 32px;
+    margin: 0 -32px 0 -32px;       /* bleed to edges */
 }
 .oha-header a {
     color: #FFFFFF !important;
-    text-decoration: none;
-}
-.oha-header a:hover {
-    opacity: 0.9;
+    text-decoration: none !important;
+    display: block;
 }
+.oha-header a:hover { opacity: 0.92; }
 .oha-header h1 {
     color: #FFFFFF !important;
-    font-size: 1.75rem !important;
+    font-size: 36px !important;
     font-weight: 300 !important;
     margin: 0 !important;
     padding: 0 !important;
     border: none !important;
-    line-height: 1.3;
+    line-height: 1.2;
 }
 .oha-header .oha-subtitle {
     color: rgba(255,255,255,0.85);
-    font-size: 0.95rem;
-    margin-top: 0.25rem;
+    font-size: 16px;
+    margin-top: 4px;
     font-weight: 400;
 }
 .oha-header .oha-beta {
     display: inline-block;
-    background: rgba(255,255,255,0.2);
-    color: #FFFFFF;
+    background: #FFC107;
+    color: #664D03;
     padding: 2px 10px;
-    border-radius: 3px;
-    font-size: 0.7rem;
+    border-radius: 10px;
+    font-size: 11px;
     font-weight: 600;
-    letter-spacing: 0.08em;
-    margin-left: 0.75rem;
+    letter-spacing: 0.05em;
+    margin-left: 12px;
     vertical-align: middle;
 }
 
-/* --- Language Toggle Row --- */
+/* Thin separator below header */
+.oha-separator {
+    height: 1px;
+    background: #E0E0E0;
+    margin: 0 -32px 16px -32px;
+}
+
+/* ---------- FOOTER ---------- */
+.oha-footer {
+    background: #003478;
+    color: #FFFFFF;
+    font-size: 13px;
+    padding: 16px 32px;
+    margin: 2rem -32px -16px -32px;
+    text-align: center;
+    line-height: 1.5;
+}
+.oha-footer a {
+    color: #FFFFFF !important;
+    text-decoration: underline !important;
+}
+
+/* ---------- LANGUAGE TOGGLE ---------- */
 .lang-row {
     justify-content: flex-end !important;
-    margin-bottom: 0.5rem !important;
+    margin: 8px 0 12px 0 !important;
     min-height: 0 !important;
     gap: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
 }
 
-/* --- Section Cards / Groups --- */
+/* ---------- GROUPS (default = invisible wrapper) ---------- */
 .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;
-    width: 100% !important;
-    box-sizing: border-box !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 0 8px 0 !important;
 }
 
-/* --- Prevent streaming reflow --- */
-.results-area {
-    width: 100% !important;
-    min-height: 400px;
-    box-sizing: border-box !important;
-}
-.results-area .prose {
-    overflow-wrap: break-word;
-    word-break: break-word;
+/* Active step gets a subtle card treatment */
+.step-group {
+    background: #FFFFFF !important;
+    padding: 24px !important;
+    border-radius: 4px !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
+    margin-bottom: 12px !important;
+    border: none !important;
 }
 
-/* --- Hide invisible step groups completely --- *
- * When Gradio hides a Group, it may set display:none on the element
- * itself or on a wrapper div. The white bars come from leftover
- * border, padding, margin, and flex gap on those elements.
- * We use .step-group elem_classes to target them precisely.
- */
-
-/* The step-group element itself when hidden */
+/* ---------- HIDDEN STEP COLLAPSE ---------- */
+/* Gradio wraps every component in a div.  When a Group is hidden the
+   wrapper div often keeps its layout contribution (flex gap, min-height).
+   Nuke everything. */
 .step-group[style*="display: none"],
 .step-group[style*="display:none"],
-.step-group.hidden,
-.step-group.hide {
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-    box-shadow: none !important;
-    min-height: 0 !important;
-    max-height: 0 !important;
+.step-group.hidden, .step-group.hide {
+    display: none !important;
+    padding: 0 !important; margin: 0 !important;
+    border: none !important; box-shadow: none !important;
+    min-height: 0 !important; max-height: 0 !important;
     overflow: hidden !important;
 }
-
-/* The wrapper div Gradio puts around each Group */
+/* Wrapper div around a hidden step-group */
 div:has(> .step-group[style*="display: none"]),
 div:has(> .step-group[style*="display:none"]),
 div:has(> .step-group.hidden),
 div:has(> .step-group.hide) {
-    padding: 0 !important;
-    margin: 0 !important;
-    min-height: 0 !important;
-    max-height: 0 !important;
-    gap: 0 !important;
-    border: none !important;
-    box-shadow: none !important;
-    overflow: hidden !important;
     display: none !important;
+    padding: 0 !important; margin: 0 !important;
+    min-height: 0 !important; max-height: 0 !important;
+    gap: 0 !important; overflow: hidden !important;
 }
-
-/* Catch-all: any hidden div inside the app should fully collapse */
+/* Belt-and-suspenders: any hidden div inside the app */
 .gradio-container div[style*="display: none"],
 .gradio-container div[style*="display:none"] {
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-    box-shadow: none !important;
-    max-height: 0 !important;
-    overflow: hidden !important;
+    padding: 0 !important; margin: 0 !important;
+    border: none !important; box-shadow: none !important;
+    max-height: 0 !important; overflow: hidden !important;
 }
 
-/* Eliminate flex gap contribution from hidden children */
-.gradio-container > div {
-    gap: 0 !important;
-}
-.gradio-container > div > div {
-    gap: 0 !important;
-}
-
-/* --- Headings --- */
+/* ---------- TYPOGRAPHY ---------- */
 h1 {
-    color: #003DA5 !important;
+    color: #003478 !important;
     font-weight: 300 !important;
     border: none !important;
     padding: 0 !important;
 }
 h2 {
-    color: #003DA5 !important;
-    font-weight: 500 !important;
+    color: #003478 !important;
+    font-weight: 400 !important;
     font-size: 1.35rem !important;
-    border-bottom: 2px solid #E0E0E0;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 0 0.75rem 0 !important;
 }
 h3 {
-    color: #212529 !important;
+    color: #333333 !important;
     font-weight: 500 !important;
-    font-size: 1.05rem !important;
+    font-size: 18px !important;
+    margin: 0 0 0.5rem 0 !important;
 }
+p, span, li { color: #212529; }
 
-/* --- Body Text --- */
-p, span, div {
-    color: #212529;
-}
-
-/* --- Links --- */
-a {
-    color: #003DA5 !important;
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
-    color: #00264D !important;
-}
+/* ---------- LINKS ---------- */
+a { color: #0046AD !important; text-decoration: none; }
+a:hover { text-decoration: underline; color: #003478 !important; }
 
-/* --- Labels --- */
+/* ---------- LABELS ---------- */
 label {
     color: #212529 !important;
     font-weight: 500 !important;
-    font-size: 0.95rem !important;
-    margin-bottom: 0.4rem !important;
+    font-size: 14px !important;
+    margin-bottom: 6px !important;
 }
 
-/* --- Form Inputs --- */
+/* ---------- 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;
+    padding: 10px 12px !important;
+    font-size: 16px !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;
+    border-color: #0046AD !important;
+    box-shadow: 0 0 0 2px rgba(0,70,173,0.15) !important;
     outline: none !important;
 }
 
-/* --- Primary Buttons --- */
+/* ---------- PRIMARY BUTTONS ---------- */
 .gr-button-primary, button.primary {
-    background: #003DA5 !important;
+    background: #0046AD !important;
     color: #FFFFFF !important;
     border: none !important;
-    border-radius: 5px !important;
+    border-radius: 4px !important;
     font-weight: 500 !important;
-    font-size: 0.95rem !important;
-    padding: 0.6rem 1.5rem !important;
+    font-size: 15px !important;
+    padding: 12px 24px !important;
     transition: background 0.15s ease !important;
+    min-height: 0 !important;
 }
 .gr-button-primary:hover, button.primary:hover {
-    background: #002D7A !important;
+    background: #003478 !important;
 }
 
-/* --- Secondary Buttons --- */
+/* ---------- SECONDARY BUTTONS ---------- */
 .gr-button-secondary, button.secondary {
     background: #FFFFFF !important;
-    color: #003DA5 !important;
-    border: 1.5px solid #003DA5 !important;
-    border-radius: 5px !important;
+    color: #0046AD !important;
+    border: 1px solid #0046AD !important;
+    border-radius: 4px !important;
     font-weight: 500 !important;
-    font-size: 0.95rem !important;
-    padding: 0.6rem 1.5rem !important;
+    font-size: 15px !important;
+    padding: 12px 24px !important;
     transition: all 0.15s ease !important;
+    min-height: 0 !important;
 }
 .gr-button-secondary:hover, button.secondary:hover {
     background: #F0F4FA !important;
-    border-color: #002D7A !important;
 }
 
-/* --- Small / Back Buttons --- */
+/* ---------- SMALL / BACK BUTTONS ---------- */
 button.sm {
-    font-size: 0.85rem !important;
-    padding: 0.35rem 0.9rem !important;
+    font-size: 13px !important;
+    padding: 6px 14px !important;
     color: #495057 !important;
     background: transparent !important;
     border: 1px solid #CED4DA !important;
     border-radius: 4px !important;
+    min-height: 0 !important;
 }
-button.sm:hover {
-    background: #F5F5F5 !important;
-    color: #212529 !important;
-}
+button.sm:hover { background: #F5F5F5 !important; color: #212529 !important; }
 
-/* --- Suggested Prompt Pill Buttons --- */
+/* ---------- SUGGESTED-PROMPT PILLS ---------- */
 .prompt-pill button {
     background: #FFFFFF !important;
-    color: #003DA5 !important;
-    border: 1.5px solid #003DA5 !important;
+    color: #333333 !important;
+    border: 1px solid #CED4DA !important;
     border-radius: 20px !important;
-    font-size: 0.85rem !important;
+    font-size: 13px !important;
     font-weight: 400 !important;
-    padding: 0.4rem 1rem !important;
-    transition: all 0.15s ease !important;
+    padding: 8px 16px !important;
+    transition: background 0.15s ease !important;
+    min-height: 0 !important;
 }
 .prompt-pill button:hover {
-    background: #003DA5 !important;
-    color: #FFFFFF !important;
+    background: #F0F4FA !important;
 }
 
-/* --- Results / Disclaimer --- */
+/* ---------- RESULTS / DISCLAIMER ---------- */
 blockquote {
     background: #FFF8E1 !important;
     border-left: 4px solid #FFC107 !important;
-    padding: 0.75rem 1rem !important;
+    padding: 12px 16px !important;
     border-radius: 4px !important;
-    font-size: 0.9rem !important;
+    font-size: 14px !important;
     color: #495057 !important;
-    margin: 0 0 1rem 0 !important;
+    margin: 0 0 16px 0 !important;
 }
 
-/* --- Status Badge --- */
-.markdown-text h3 {
-    font-size: 1.05rem !important;
+/* Status badges (rendered as <span> in markdown) */
+.badge-eligible {
+    display: inline-block;
+    background: #D4EDDA;
+    color: #155724;
+    padding: 4px 14px;
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 14px;
+}
+.badge-not-eligible {
+    display: inline-block;
+    background: #FFF3CD;
+    color: #856404;
+    padding: 4px 14px;
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 14px;
 }
 
-/* --- Chatbot --- */
+/* Streaming reflow prevention */
+.results-area {
+    width: 100% !important;
+    min-height: 300px;
+    box-sizing: border-box !important;
+}
+.results-area .prose {
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+/* ---------- CHATBOT ---------- */
 .chatbot {
     border: 1px solid #E0E0E0 !important;
-    border-radius: 6px !important;
+    border-radius: 4px !important;
 }
 
-/* --- Map iframe --- */
+/* ---------- MAP ---------- */
 .map-embed iframe {
-    border-radius: 6px;
+    border-radius: 4px;
     border: 1px solid #E0E0E0;
 }
 
-/* --- Horizontal rules in markdown --- */
+/* ---------- HORIZONTAL RULES ---------- */
 hr {
     border: none !important;
     border-top: 1px solid #E0E0E0 !important;
-    margin: 1rem 0 !important;
+    margin: 16px 0 !important;
 }
 
-/* --- File download --- */
+/* ---------- FILE DOWNLOAD ---------- */
 .gr-file {
     border: 1px solid #E0E0E0 !important;
     border-radius: 4px !important;
 }
 
-/* --- Mobile Responsive --- */
+/* ---------- MOBILE ---------- */
 @media (max-width: 640px) {
-    .gradio-container {
-        padding-left: 0.75rem !important;
-        padding-right: 0.75rem !important;
-    }
-    .ct-gov-bar {
-        padding: 6px 12px;
-        margin-left: -0.75rem;
-        margin-right: -0.75rem;
-    }
-    .oha-header {
-        padding: 1rem 12px;
-        margin-left: -0.75rem;
-        margin-right: -0.75rem;
-    }
-    .oha-header h1 {
-        font-size: 1.35rem !important;
-    }
-    .gr-group {
-        padding: 1rem !important;
-    }
-    .prompt-pill button {
-        font-size: 0.78rem !important;
-        padding: 0.35rem 0.75rem !important;
-    }
+    .gradio-container { padding: 0 12px !important; }
+    .ct-gov-bar       { padding: 0 12px; margin-left: -12px; margin-right: -12px; }
+    .oha-header        { padding: 16px 12px; margin-left: -12px; margin-right: -12px; }
+    .oha-header h1     { font-size: 24px !important; }
+    .oha-separator     { margin-left: -12px; margin-right: -12px; }
+    .oha-footer        { padding: 12px; margin-left: -12px; margin-right: -12px; }
+    .step-group        { padding: 16px !important; }
+    .prompt-pill button { font-size: 12px !important; padding: 6px 12px !important; }
 }
 """
 
@@ -995,8 +998,8 @@ def create_interface():
         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",
+                c300="#7BAEE6", c400="#4A8FDB", c500="#0046AD",
+                c600="#003D96", c700="#003478", c800="#002B63",
                 c900="#001B3A", c950="#001028",
             ),
             neutral_hue=gr.themes.Color(
@@ -1035,6 +1038,9 @@ def create_interface():
             '</div>'
         )
 
+        # Thin separator line below header
+        gr.HTML('<div class="oha-separator"></div>')
+
         with gr.Row(elem_classes="lang-row"):
             lang_toggle = gr.Radio(
                 choices=["English", "Espa\u00f1ol"],
@@ -1387,6 +1393,16 @@ def create_interface():
         # Keep chat_history_state in sync with chatbot display
         chatbot.change(fn=lambda h: h, inputs=[chatbot], outputs=[chat_history_state])
 
+        # Footer
+        gr.HTML(
+            '<div class="oha-footer">'
+            'Office of the Healthcare Advocate &nbsp;|&nbsp; '
+            '153 Market Street, 6th Floor, Hartford, CT 06103 &nbsp;|&nbsp; '
+            '1-866-466-4446 &nbsp;|&nbsp; '
+            '<a href="https://portal.ct.gov/oha" target="_blank" rel="noopener">portal.ct.gov/oha</a>'
+            '</div>'
+        )
+
     return demo
 
 # === LAUNCH ===