/* ── 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; }