/* 2026-06-12 — fix assistant bubble background showing as grey/white despite
 * the inline pearl style from assistant_bubble_style prop. Root cause: the
 * dash-chat 0.3.0 component renders an INNER .markdown-content div with its
 * own background that covers up the parent .chat-bubble.assistant pearl.
 * The bubble itself is correctly pearl (verified via inline style in DOM);
 * we just need to make the inner content transparent so the pearl shows
 * through. */
.chat-bubble.assistant .markdown-content,
.chat-bubble.assistant .markdown-content > div,
.chat-bubble.assistant .markdown-content > div > p,
.chat-bubble.assistant ul,
.chat-bubble.assistant ol,
.chat-bubble.assistant li,
.chat-bubble.assistant blockquote {
    background-color: transparent !important;
}

/* Universal text-element guard — any prose-style element inside the assistant
 * bubble gets transparent background. EXCLUDES table elements (th/td/tr) so
 * we can style the table explicitly below with visible header + alternating
 * rows that look good on pearl. */
.chat-bubble.assistant *:not(.chat-bubble):not(table):not(thead):not(tbody):not(tr):not(th):not(td) {
    background-color: transparent !important;
}

/* Table styling for pearl bubble — dash-chat's default is blue header with
 * white text + light-grey alternating rows (#f2f2f2). The grey rows are
 * exactly what looked "grey" inside responses with big tables. Replace with
 * an emerald-toned header (matches the bubble border) and very-faint pearl-
 * tinted alternating rows for subtle striping without the grey look. */
.chat-bubble.assistant table {
    background-color: transparent !important;
}
.chat-bubble.assistant th {
    background-color: #10b981 !important;  /* match bubble border */
    color: white !important;
    font-weight: 600 !important;
}
.chat-bubble.assistant tr:nth-child(even) {
    background-color: rgba(16, 185, 129, 0.05) !important;  /* 5% emerald tint */
}
.chat-bubble.assistant tr:nth-child(odd) {
    background-color: transparent !important;
}
.chat-bubble.assistant tr:hover {
    background-color: rgba(16, 185, 129, 0.10) !important;  /* 10% emerald on hover */
}

/* 2026-06-12: math text leakage fix. The model sometimes writes responses
 * containing $100K (dollar amount) and later $33 (another dollar). dash-chat's
 * MathJax plugin interprets everything between as inline math and renders it
 * with default math styling, which is white text — invisible against the
 * pearl bubble background. Force any math-rendered span to use dark text
 * so the user can at least SEE the response, even if the model ignored the
 * "no LaTeX, no dollar wrappers" data-turn nudge. */
.chat-bubble.assistant .MathJax,
.chat-bubble.assistant .MathJax_Display,
.chat-bubble.assistant mjx-container,
.chat-bubble.assistant mjx-math,
.chat-bubble.assistant .katex,
.chat-bubble.assistant .math,
.chat-bubble.assistant .math-inline,
.chat-bubble.assistant .math-display {
    color: #1a1a1a !important;
    background-color: transparent !important;
}

/* Defense-in-depth: keep the bubble explicitly white in case some library
 * update changes the inline style behavior. Higher-specificity selectors below
 * win against any library-injected !important rule. 2026-06-12: switched from
 * pearl #FAF9F6 to pure white per user request — pearl was rendering as grey
 * on user's display. */
div.chat-container .chat-messages div.chat-bubble.assistant,
.chat-container.AML .chat-messages .chat-bubble.assistant {
    background-color: white !important;
}

/* Match user bubble too if you want a consistent palette — commented for now;
 * uncomment if the contrast between user and assistant bubbles looks off
 * after the assistant turns pearl. */
/* div.chat-container .chat-messages div.chat-bubble.user {
 *     background-color: #E8F5E9 !important;
 * } */

/* 2026-06-13 — 2D sweep param invisibility fix.
 * 2D sweep responses render heading-prefixed "param: value" rows and inline
 * code spans for risk_factor / threshold_column values. Some of these inherit
 * white text from a library-injected stylesheet (likely dash-chat's syntax
 * highlighter for inline code), making sweep params invisible on the white
 * bubble. Force dark text on ALL prose elements inside the assistant bubble
 * EXCEPT table headers (which are intentionally white-on-emerald) and the
 * already-handled math spans (#1a1a1a — same color, so consistent). */
.chat-bubble.assistant,
.chat-bubble.assistant p,
.chat-bubble.assistant h1,
.chat-bubble.assistant h2,
.chat-bubble.assistant h3,
.chat-bubble.assistant h4,
.chat-bubble.assistant h5,
.chat-bubble.assistant h6,
.chat-bubble.assistant li,
.chat-bubble.assistant strong,
.chat-bubble.assistant em,
.chat-bubble.assistant b,
.chat-bubble.assistant i,
.chat-bubble.assistant code,
.chat-bubble.assistant pre,
.chat-bubble.assistant pre code,
.chat-bubble.assistant td,
.chat-bubble.assistant blockquote,
.chat-bubble.assistant span:not(.MathJax):not([class*="katex"]) {
    color: #1a1a1a !important;
}

/* Inline code blocks (`backticks`) — give them a faint tint background so they
 * stand out from prose without being invisible on white. */
.chat-bubble.assistant code:not(pre code) {
    background-color: rgba(16, 185, 129, 0.08) !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
}

/* Fenced code blocks (```...```) — slightly darker tint, monospace stays dark. */
.chat-bubble.assistant pre {
    background-color: rgba(16, 185, 129, 0.06) !important;
    padding: 8px !important;
    border-radius: 4px !important;
}