fix: improve AI chat table rendering with CSS styling and narrow-panel formatting

- Add SCSS for AI chat tables: borders, padding, zebra striping, hover, dark mode
- Style headings, code, bold text, and lists in chat messages
- Update system prompt: enforce 3-column max tables for narrow chat panel
- Use key-value (2-column) tables for summaries, split wide data into sections
- Provide explicit correct/wrong format examples in prompt

fusion_claims/data/ai_agent_data.xml

@@ -124,40 +124,62 @@ Common questions and which tool to use:
 
 You help staff find information about clients, their order status, medical conditions, mobility devices, funding history, billing periods, and claim status.
 
-IMPORTANT - Response Formatting:
+CRITICAL - Response Formatting Rules:
-You MUST format all responses using Markdown for clean, professional presentation. Follow these rules strictly:
+You are displayed inside a narrow chat panel. Follow these rules strictly:
-- Use **bold** for labels, field names, and important values (e.g., **Status:** Approved)
-- Use ### headings to separate sections (e.g., ### Client Information, ### Orders, ### Billing Summary)
-- Use bullet points (- ) for lists of items
-- Use tables (| Column | Column |) when presenting structured data like order lists, invoice summaries, or city breakdowns
-- Use `code formatting` for order numbers, invoice numbers, and reference IDs (e.g., `S30168`)
-- Separate sections with blank lines for readability
-- Never output plain unformatted text walls
 
-Example formatting for a client status response:
+1. TABLES: Maximum 3 columns. Never create tables with 4+ columns -- the panel is too narrow.
+   - For data with many fields, use TWO-COLUMN key-value tables (Label | Value)
+   - Split wide data across multiple small tables with headings between them
+
+2. Use ### headings to separate sections
+3. Use **bold** for labels and important values
+4. Use `code` for order numbers and IDs (e.g., `S30168`)
+5. Never output plain unformatted text walls
+
+CORRECT FORMAT - Client status (multiple small tables, not one wide table):
 
 ### Gurpreet Singh
 **City:** Brampton | **Health Card:** 1234-567-890
 
-| Order | Type | Status | Total | ADP Portion | Client Portion |
+#### Order `S30168` -- ADP
-|-------|------|--------|-------|-------------|----------------|
+| Detail | Value |
-| `S30168` | ADP | Assessment Completed | $5,624.00 | $4,218.00 | $1,406.00 |
+|--------|-------|
+| **Status** | Assessment Completed |
+| **Total** | $5,624.00 |
+| **ADP Portion** | $4,218.00 |
+| **Client Portion** | $1,406.00 |
+| **Next Step** | Send ADP application |
 
-**Next Step:** Prepare and send ADP application to client
+CORRECT FORMAT - Demographics (3-column max):
 
-Example formatting for a billing period response:
+### Applications by Age Group
+| Age Group | Clients | Avg Apps |
+|-----------|---------|----------|
+| Under 18 | 2 | 2.00 |
+| 18-30 | 8 | 1.00 |
+| 75+ | 596 | 1.08 |
 
-### ADP Billing Period: Feb 20 - Mar 5, 2026
+For extra columns, add a second table:
+
+### Funding by Age Group
+| Age Group | Avg ADP | Avg Total |
+|-----------|---------|-----------|
+| Under 18 | $82.00 | $82.00 |
+| 75+ | $473.15 | $1,216.15 |
+
+CORRECT FORMAT - Billing period:
+
+### ADP Billing: Feb 20 - Mar 5, 2026
 | Metric | Value |
 |--------|-------|
 | **Total Invoiced** | $29,447.35 |
 | **Paid** | $25,000.00 |
 | **Unpaid** | $4,447.35 |
 | **Invoices** | 20 |
-| **Orders Billed** | 18 |
+| **Deadline** | Wed, Mar 4 at 6 PM |
 
-**Submission Deadline:** Wednesday, March 4, 2026 at 6:00 PM
+WRONG (too many columns, will look cramped):
-**Expected Payment:** March 15, 2026
+| Age | Clients | Apps | Avg Apps | Avg ADP | Avg Total |
 
 Capabilities:
 1. Search client profiles by name, health card number, city, or medical condition
@@ -179,15 +201,15 @@ How to handle common requests:
 - If a client is not found by profile, the system also searches by contact/partner name
 
 Response guidelines:
-- Always use Markdown formatting as shown above
+- ALWAYS keep tables to 3 columns maximum. Use key-value (2-column) tables for summaries.
+- Split wide data into multiple narrow tables with headings between them
 - Be concise and data-driven
 - Format monetary values with $ and commas (e.g., $1,250.00)
-- When listing orders, always include: order number, status, amounts, and next recommended step
+- When listing orders, show each order as its own key-value table section
-- When showing billing summaries, include: period dates, total invoiced, paid vs unpaid, submission deadline
+- When showing billing summaries, use a key-value table
 - Include key identifiers (name, health card, city) when listing clients
 - If asked about a specific client, use Client Status Lookup first (it searches by name)
 - Always indicate if invoices are paid or unpaid
-- Use tables for any list of 2+ items with multiple columns
 
 Key terminology:
 - ADP = Assistive Devices Program (Ontario government funding)

fusion_claims/static/src/scss/fusion_claims.scss

@@ -928,3 +928,99 @@ html.dark, .o_dark {
 }
 
 
+
+// ========================================================================
+// AI CHAT: Table and response styling for Fusion Claims Intelligence
+// ========================================================================
+.o-mail-Message-body,
+.o-mail-Message-textContent,
+.o_mail_body_content {
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 8px 0;
+        font-size: 12px;
+        line-height: 1.4;
+
+        th, td {
+            border: 1px solid rgba(150, 150, 150, 0.4);
+            padding: 5px 8px;
+            text-align: left;
+            vertical-align: top;
+        }
+
+        th {
+            background-color: rgba(100, 100, 100, 0.15);
+            font-weight: 600;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.3px;
+            white-space: nowrap;
+        }
+
+        td {
+            white-space: nowrap;
+        }
+
+        tr:nth-child(even) td {
+            background-color: rgba(100, 100, 100, 0.05);
+        }
+
+        tr:hover td {
+            background-color: rgba(100, 100, 100, 0.1);
+        }
+    }
+
+    h3 {
+        font-size: 14px;
+        font-weight: 700;
+        margin: 12px 0 6px 0;
+        padding-bottom: 4px;
+        border-bottom: 1px solid rgba(150, 150, 150, 0.3);
+    }
+
+    h4 {
+        font-size: 13px;
+        font-weight: 600;
+        margin: 10px 0 4px 0;
+    }
+
+    strong {
+        font-weight: 600;
+    }
+
+    code {
+        background-color: rgba(100, 100, 100, 0.1);
+        padding: 1px 4px;
+        border-radius: 3px;
+        font-size: 11px;
+    }
+
+    ul, ol {
+        margin: 4px 0;
+        padding-left: 20px;
+    }
+
+    li {
+        margin-bottom: 2px;
+    }
+}
+
+html.dark .o-mail-Message-body,
+html.dark .o-mail-Message-textContent,
+html.dark .o_mail_body_content,
+.o_dark .o-mail-Message-body,
+.o_dark .o-mail-Message-textContent,
+.o_dark .o_mail_body_content {
+    table {
+        th, td {
+            border-color: rgba(200, 200, 200, 0.2);
+        }
+        th {
+            background-color: rgba(200, 200, 200, 0.1);
+        }
+        tr:nth-child(even) td {
+            background-color: rgba(200, 200, 200, 0.04);
+        }
+    }
+}