.chatbot-demo-section {
    isolation: isolate;
    position: relative
}

.chatbot-demo-section .chatbot-demo-markdown {
    color: inherit;
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.6
}

.chatbot-demo-section .chatbot-demo-markdown>* {
    margin: 0;
    padding: 0
}

.chatbot-demo-section .chatbot-demo-p {
    color: inherit;
    line-height: 1.6;
    font-size: inherit;
    margin: 0 0 .5rem;
    font-family: inherit;
    display: block
}

.chatbot-demo-section .chatbot-demo-p:last-child {
    margin-bottom: 0
}

.chatbot-demo-section .chatbot-demo-link {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    display: inline;
    color: #2563eb !important
}

.chatbot-demo-section .chatbot-demo-link:hover {
    text-decoration: underline;
    color: #1d4ed8 !important
}

.chatbot-demo-section .chatbot-demo-strong {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    display: inline;
    font-weight: 700 !important
}

.chatbot-demo-section .chatbot-demo-ul,
.chatbot-demo-section .chatbot-demo-ol {
    margin: .5rem 0;
    padding: 0 0 0 1.5rem;
    list-style-position: outside;
    display: block
}

.chatbot-demo-section .chatbot-demo-ul {
    list-style-type: disc
}

.chatbot-demo-section .chatbot-demo-ol {
    list-style-type: decimal
}

.chatbot-demo-section .chatbot-demo-li {
    color: inherit;
    font-family: inherit;
    line-height: 1.6;
    font-size: inherit;
    margin: .25rem 0;
    display: list-item
}

.chatbot-demo-section .bg-blue-50 .chatbot-demo-markdown {
    color: #1e40af
}

.chatbot-demo-section .bg-blue-50 .chatbot-demo-strong {
    color: #1e3a8a !important;
    font-weight: 600 !important
}

.chatbot-demo-section .bg-blue-50 .chatbot-demo-p {
    color: #1e40af;
    margin-bottom: .25rem
}

#sale-ai-chatbot-widget,
#sale-ai-chatbot-container,
[id^=sale-ai-chatbot] {
    all: initial !important;
    display: block !important
}

#sale-ai-chatbot-widget *,
#sale-ai-chatbot-container *,
[id^=sale-ai-chatbot] * {
    all: unset
}

#sale-ai-chatbot-widget button,
#sale-ai-chatbot-container button {
    cursor: pointer !important;
    justify-content: center !important;
    align-items: center !important;
    display: inline-flex !important
}

#sale-ai-chatbot-widget iframe,
#sale-ai-chatbot-container iframe {
    border: none !important;
    display: block !important
}

.ai-answer {
    font-size: 14px;
    line-height: 1.6;
}

.ai-answer h4 {
    margin-top: 14px;
    color: #1e40af;
}

.greeting {
    font-weight: 600;
}

.formula-box,
.example-box {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 10px;
    margin: 10px 0;
}

.highlight {
    background: #eef2ff;
    padding: 8px;
    border-radius: 6px;
}

.case-list li {
    margin-bottom: 10px;
}

.math {
    margin: 10px 0;
    text-align: center;
}

.math-inline {
    background: #eef2ff;
    padding: 2px 6px;
    border-radius: 4px;
}

.result-box {
    background: #ecfeff;
    border-left: 4px solid #06b6d4;
    padding: 10px;
    margin-top: 12px;
    font-weight: 600;
}

.cta {
    margin-top: 10px;
    color: #2563eb;
    font-weight: 500;
}

/* ===== KaTeX fix ===== */
.katex {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ===== Assistant bubble rộng hơn ===== */
.message.assistant {
    max-width: 92%;
}

/* ===== Math spacing ===== */
.math {
    margin: 10px 0;
}

/* ===== List spacing ===== */
.ai-answer ul,
.ai-answer ol {
    padding-left: 18px;
    margin: 6px 0;
}

/* ===== Better font ===== */
#chatbox {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== Mobile ===== */
@media (max-width: 480px) {
    #chatbox {
        width: 95%;
        right: 2.5%;
        bottom: 10px;
    }
}