elements.
* Without this rule they would display in monospace font (browser default) which looks
* dramatically different from surrounding text in terms of font-family and sometimes size.
*
* This rule makes inline code within chat bubbles use the SAME font-family and font-size
* as the surrounding chat text, while still showing a subtle highlight background so the
* reader can recognise these as technical terms (not a KaTeX formula or plain prose).
*
* Note: pre > code (block code inside ) is intentionally EXCLUDED so that code blocks
* (multi-line) continue to render in monospace as expected.
*/
.bot-content code:not(pre > code),
.markdown-content code:not(pre > code),
.message-enter code:not(pre > code) {
font-family: var(--chat-font-family, inherit) !important;
font-size: var(--chat-font-size, inherit) !important;
background-color: transparent;
padding: 0;
border-radius: 0;
color: inherit;
white-space: normal;
}
/* Mermaid within chat messages */
.bot-content .mermaid,
.message-enter .mermaid {
background: rgba(255, 255, 255, 0.9);
border: 1px solid #e5e7eb;
margin: 0;
}
/* Mermaid diagram wrapper and toolbar */
.mermaid-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
.mermaid-toolbar {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10;
}
.mermaid-wrapper:hover .mermaid-toolbar {
opacity: 1;
}
.mermaid-toolbar button {
background: rgba(255, 255, 255, 0.95);
border: 1px solid #ddd;
border-radius: 4px;
padding: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.mermaid-toolbar button:hover {
background: #fff;
border-color: #aaa;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.mermaid-toolbar button svg {
width: 16px;
height: 16px;
stroke: #555;
}
.mermaid-toolbar button:hover svg {
stroke: #333;
}
/* Touch device support - always show toolbar */
@media (hover: none) {
.mermaid-toolbar {
opacity: 1;
}
}
/* =========================================
Gemini-Style Animated Spinner
========================================= */
@keyframes gemini-spinner-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes gemini-spinner-dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
@keyframes gemini-spinner-color {
0%, 100% { stroke: #4285f4; }
25% { stroke: #ea4335; }
50% { stroke: #fbbc04; }
75% { stroke: #34a853; }
}
.gemini-spinner {
width: 24px;
height: 24px;
animation: gemini-spinner-rotate 1.4s linear infinite;
}
.gemini-spinner-lg {
width: 36px;
height: 36px;
}
.gemini-spinner circle {
fill: none;
stroke-width: 3;
stroke-linecap: round;
animation:
gemini-spinner-dash 1.4s ease-in-out infinite,
gemini-spinner-color 5.6s ease-in-out infinite;
}
/* Single color variant (blue only) */
.gemini-spinner-blue circle {
animation: gemini-spinner-dash 1.4s ease-in-out infinite;
stroke: #3b82f6;
}
/* =========================================================================
* AGENT MESSAGE LAYOUT - Profile icon and text bubble alignment
* Profile image: 2px from left edge of chatbox
* Text bubble: 4px gap from profile image, 2px from right edge
* ========================================================================= */
#chat-messages .message-enter.flex.items-start.space-x-2 {
gap: 4px !important;
padding-left: 2px !important;
padding-right: 2px !important;
align-items: flex-start !important;
}
/* Agent text bubble - fill available width, proper text wrapping */
#chat-messages .message-enter.flex.items-start .max-w-\[calc\(100\%-3rem\)\] {
max-width: calc(100% - 44px) !important;
width: calc(100% - 44px) !important;
flex: 1;
min-width: 0;
}
/* Agent text content - proper word wrapping and alignment */
.bot-content {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
white-space: pre-wrap !important;
max-width: 100% !important;
overflow-x: auto !important;
}
/* Paragraph spacing in chat messages (Tailwind preflight resets p margin to 0) */
.bot-content p,
.markdown-content p {
margin-bottom: 0.75em;
}
.bot-content p:last-child,
.markdown-content p:last-child {
margin-bottom: 0;
}
/* CRITICAL FIX: Preserve whitespace in italic/em tags - fixes space stripping bug */
#chat-messages em,
#chat-messages i,
.bot-content em,
.bot-content i,
.markdown-content em,
.markdown-content i {
white-space: normal !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* =========================================================================
* TABLE STYLING - Chat widget, HTML artifacts, and general markdown tables
* Added v1.0.152 - Properly aligned, professional table styles
* ========================================================================= */
/* Base table structure */
.table-wrapper {
overflow-x: auto;
width: 100%;
margin: 16px 0;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06);
border: 1px solid #e5e7eb;
margin: 0;
}
.markdown-content table,
.chat-content table,
.bot-content table,
div[class*="chat"] table,
.rendered-content table {
border-collapse: collapse;
width: 100%;
max-width: 100%;
font-size: 0.875rem;
line-height: 1.5;
margin: 0;
}
/* Table header */
.markdown-content table thead,
.chat-content table thead,
.bot-content table thead,
div[class*="chat"] table thead,
.rendered-content table thead {
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
color: #ffffff;
}
.markdown-content table th,
.chat-content table th,
.bot-content table th,
div[class*="chat"] table th,
.rendered-content table th {
padding: 10px 14px;
text-align: left;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.15);
border-top: none;
}
/* Suppress
tags inside table cells.
* markdown-it with breaks:true converts every \n to
, including those
* at the end of GFM table rows, which creates unwanted visible
tags
* appended to the last cell content of each row.
* Hiding them with CSS is the safe fix that doesn't affect non-table content.
*/
.markdown-content table td br:not(.aibr),
.markdown-content table th br:not(.aibr),
.chat-content table td br:not(.aibr),
.chat-content table th br:not(.aibr),
.bot-content table td br:not(.aibr),
.bot-content table th br:not(.aibr),
div[class*="chat"] table td br:not(.aibr),
div[class*="chat"] table th br:not(.aibr),
.rendered-content table td br:not(.aibr),
.rendered-content table th br:not(.aibr) {
display: none;
}
.markdown-content table th:last-child,
.chat-content table th:last-child,
.bot-content table th:last-child,
div[class*="chat"] table th:last-child,
.rendered-content table th:last-child {
border-right: none;
}
/* Table body cells */
.markdown-content table td,
.chat-content table td,
.bot-content table td,
div[class*="chat"] table td,
.rendered-content table td {
padding: 9px 14px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #e5e7eb;
border-right: 1px solid #e5e7eb;
word-break: break-word;
min-width: 80px;
}
.markdown-content table td:last-child,
.chat-content table td:last-child,
.bot-content table td:last-child,
div[class*="chat"] table td:last-child,
.rendered-content table td:last-child {
border-right: none;
}
/* Striped rows */
.markdown-content table tbody tr:nth-child(2n),
.chat-content table tbody tr:nth-child(2n),
.bot-content table tbody tr:nth-child(2n),
div[class*="chat"] table tbody tr:nth-child(2n),
.rendered-content table tbody tr:nth-child(2n) {
background-color: #f8fafc;
}
/* Hover highlight */
.markdown-content table tbody tr:hover,
.chat-content table tbody tr:hover,
.bot-content table tbody tr:hover,
div[class*="chat"] table tbody tr:hover,
.rendered-content table tbody tr:hover {
background-color: #eff6ff;
transition: background-color 0.15s ease;
}
/* Last row: no bottom border */
.markdown-content table tbody tr:last-child td,
.chat-content table tbody tr:last-child td,
.bot-content table tbody tr:last-child td,
div[class*="chat"] table tbody tr:last-child td,
.rendered-content table tbody tr:last-child td {
border-bottom: none;
}
/* Numeric columns: right-align */
.markdown-content table td.num,
.chat-content table td.num,
.rendered-content table td.num {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* Table caption */
.markdown-content table caption,
.chat-content table caption,
.rendered-content table caption {
font-size: 0.8rem;
font-style: italic;
color: #6b7280;
caption-side: bottom;
margin-top: 4px;
text-align: center;
}
/* Responsive scrollbar for wide tables */
.table-wrapper::-webkit-scrollbar,
.markdown-content table::-webkit-scrollbar,
.chat-content table::-webkit-scrollbar,
.rendered-content table::-webkit-scrollbar {
height: 4px;
}
.markdown-content table::-webkit-scrollbar-track,
.chat-content table::-webkit-scrollbar-track,
.rendered-content table::-webkit-scrollbar-track {
background: #f1f5f9;
}
.markdown-content table::-webkit-scrollbar-thumb,
.chat-content table::-webkit-scrollbar-thumb,
.rendered-content table::-webkit-scrollbar-thumb {
background: #93c5fd;
border-radius: 2px;
}