:root {
    --wpeazyai_primary_color: #0066cc;
    --wpeazyai_chat_bg_color: #f3f4f6;
    --wpeazyai_white_color: #ffffff;
    --wpeazyai_dark_text: #212529;
    --wpeazyai_muted_text: #6c757d;
    --wpeazyai_separator_color: #dee2e6;
    --wpeazyai_light_color: #f8f9fa;
    --wpeazyai_input_border: #86B7FE;
    --wpeazyai_input_outline: #C2DBFE;
    --black_25: #f9f9f9;
    --black_50: #f2f2f2;
    --black_75: #eeeeee;
    --black_100: #d6d9dc;
    --black_150: #c8ccd0;
    --black_200: #bbc0c4;
    --black_300: #9fa6ad;
    --black_350: #9199a1;
    --black_400: #848d95;
    --black_500: #6a737c;
    --black_600: #535a60;
    --black_700: #3c4146;
    --black_750: #2f3337;
    --black_800: #242729;
    --black_900: #0c0d0e;
    --bs-white: #ffffff;
}

body.body_dark, body.dark, body.is-dark, body.dark-mode {
    --bs-white: #1d2027;
    --black_900: #f1f1f1;
    --black_800: #e9e9e9;
    --black_700: #e1e1e1;
    --black_600: #bebebe;
    --black_500: #b9b9b9;
    --black_400: #a2a2a2;
    --black_200: #757474;
    --black_150: rgba(255, 255, 255, 0.3);
    --black_75: #535353;
    --black_50: #3b3b3b;
    --black_25: #2e2d2d;
}

.wea-msg-html {
    h2 {
        font-size: 1.25em;
        margin: 0.8em 0 0.5em;
        font-weight: 600;
        border-bottom: 2px solid var(--black_75);
        padding-bottom: 0.5em;
    }

    h3 {
        font-size: 1.125em;
        margin: 0.6em 0 0.4em;
        font-weight: 500;
        color: var(--black_700);
    }

    p {
        margin: 0.8em 0;
    }

    pre {
        background: var(--black_50);
        padding: 0.8em 1em;
        border-radius: 6px;
        font-family: "Fira Code", monospace;
        font-size: 0.9em;
        overflow-x: auto;
    }

    strong {
        font-weight: 600;
        color: var(--black_900);
    }

    em {
        font-style: italic;
        color: var(--black_600);
    }

    a {
        color: var(--wpeazyai_primary_color);
        text-decoration: none;
        transition: color 0.2s ease, border-color 0.2s ease;
        text-underline-offset: 4px;

        &:hover {
            color: var(--wpeazyai_primary_color);
            text-decoration: underline;
        }
    }

    img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 0.8em 0;
        display: block;
    }

    ul, ol {
        margin: 0 0 1em 2em;
        padding: 0;
    }

    li {
        margin: 0.2em 0;
        line-height: 1.6;
        color: var(--black_800);

        ul, ol {
            margin-top: 0.2em;
        }
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }
}

.components-text-control__input,
.components-input-control__backdrop,
.components-toggle-group-control {
    border: 1px solid var(--black_100) !important;
}