static/css/_chatbot.css

/* ── chatbot container ── */
#hy-chat {
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    --border-color-primary: transparent !important;
    --color-accent-soft: #ffffff !important;
    --background-fill-secondary: #ffffff !important;
}
.dark #hy-chat {
    background: #171717 !important;
    --border-color-primary: transparent !important;
    --color-accent-soft: #1f1f1f !important;
    --background-fill-secondary: #171717 !important;
}

/* ── message panel: uniform style for both user and bot ── */
#hy-chat .message-row .message-bubble-border,
#hy-chat .bot .message-bubble-border,
#hy-chat .user .message-bubble-border,
#hy-chat [data-testid="bot"] .message-bubble-border,
#hy-chat [data-testid="user"] .message-bubble-border {
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: #ffffff !important;
    padding: 4px 16px 4px 0 !important;
    max-width: 100% !important;
}
.dark #hy-chat .message-row .message-bubble-border,
.dark #hy-chat .bot .message-bubble-border,
.dark #hy-chat .user .message-bubble-border,
.dark #hy-chat [data-testid="bot"] .message-bubble-border,
.dark #hy-chat [data-testid="user"] .message-bubble-border {
    background: #171717 !important;
}

/* ── remove user message bubble border (all themes) ── */
#hy-chat .user,
#hy-chat .user .message,
#hy-chat .user .bubble,
#hy-chat .user > div,
#hy-chat [data-testid="user"],
#hy-chat [data-testid="user"] .message,
#hy-chat [data-testid="user"] .bubble,
#hy-chat [data-testid="user"] > div,
#hy-chat .message-row.user-row,
#hy-chat .message-row.user-row > div,
#hy-chat .user-message,
#hy-chat .message.user {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
#hy-chat .user .message,
#hy-chat [data-testid="user"] .message,
#hy-chat .user-message {
    background: transparent !important;
    padding: 4px 16px !important;
}
.dark #hy-chat .user .message,
.dark #hy-chat [data-testid="user"] .message,
.dark #hy-chat .user-message {
    background: transparent !important;
}

/* ── user text: match bot text style ── */
#hy-chat .user .markdown,
#hy-chat .user .message-content,
#hy-chat .user p,
#hy-chat [data-testid="user"] .markdown,
#hy-chat [data-testid="user"] .message-content,
#hy-chat [data-testid="user"] p {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #222222 !important;
    letter-spacing: 0.01em !important;
}
.dark #hy-chat .user .markdown,
.dark #hy-chat .user .message-content,
.dark #hy-chat .user p,
.dark #hy-chat [data-testid="user"] .markdown,
.dark #hy-chat [data-testid="user"] .message-content,
.dark #hy-chat [data-testid="user"] p {
    color: #e8e8e8 !important;
}

/* ── bot text styling ── */
#hy-chat .bot .markdown,
#hy-chat .bot .message-content,
#hy-chat [data-testid="bot"] .markdown {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #222222 !important;
    letter-spacing: 0.01em !important;
}
.dark #hy-chat .bot .markdown,
.dark #hy-chat .bot .message-content,
.dark #hy-chat [data-testid="bot"] .markdown {
    color: #e8e8e8 !important;
}
#hy-chat .bot p { margin: 0.6em 0 !important; }
#hy-chat .bot strong, #hy-chat .bot b {
    font-weight: 600 !important;
    color: #111 !important;
}
.dark #hy-chat .bot strong, .dark #hy-chat .bot b {
    color: #fff !important;
}
#hy-chat .bot ul, #hy-chat .bot ol {
    padding-left: 1.5em !important;
    margin: 0.5em 0 !important;
}
#hy-chat .bot li {
    margin: 0.3em 0 !important;
    line-height: 1.8 !important;
}

/* ── headings ── */
#hy-chat .bot h1 { font-size: 22px !important; font-weight: 700 !important; color: #111 !important; margin: 1em 0 0.5em !important; }
#hy-chat .bot h2 { font-size: 19px !important; font-weight: 700 !important; color: #111 !important; margin: 0.9em 0 0.4em !important; }
#hy-chat .bot h3 { font-size: 17px !important; font-weight: 600 !important; color: #111 !important; margin: 0.8em 0 0.35em !important; }
#hy-chat .bot h4 { font-size: 15px !important; font-weight: 600 !important; color: #222 !important; margin: 0.7em 0 0.3em !important; }
.dark #hy-chat .bot h1 { color: #f2f2f2 !important; }
.dark #hy-chat .bot h2 { color: #ebebeb !important; }
.dark #hy-chat .bot h3 { color: #e0e0e0 !important; }
.dark #hy-chat .bot h4 { color: #d4d4d4 !important; }

/* ── tables ── */
#hy-chat table {
    border-collapse: collapse !important;
    width: auto !important;
    margin: 1em 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
#hy-chat th, #hy-chat td {
    border: 1px solid #e8e8e8 !important;
    padding: 10px 20px !important;
    text-align: left !important;
}
#hy-chat th {
    background: #fafafa !important;
    font-weight: 600 !important;
    color: #333 !important;
}
#hy-chat td {
    color: #444 !important;
    background: #fff !important;
}
#hy-chat tr:hover td {
    background: #fafcff !important;
}
.dark #hy-chat th, .dark #hy-chat td {
    border-color: #2a2a2a !important;
}
.dark #hy-chat th {
    background: #242424 !important;
    color: #e0e0e0 !important;
}
.dark #hy-chat td {
    color: #d0d0d0 !important;
    background: #1c1c1c !important;
}
.dark #hy-chat tr:hover td {
    background: #262626 !important;
}