CSS classes

Haha, thank you @arumgeorge! ??

So you are talking about the AI conversation and the reply section, right? If yes, you can definitely change everything! ??

• The User conversation uses .mwai-ai.
• The AI conversation .mwai-user.
• And the bottom section containing the textfield and the buttons uses .mwai-input.

That should work.

So if you view a page with the chatbot shortcode present, you have a bar along the top with something like: AI: Hi, how can I help you?

That has by default a black(ish) background and uses .mwai-ai

under that there is the text input area and a button to send.

When the AI replies it adds a new section for the response and this section is styled the same as the original bar along the top with the AI name and message. This is because it also uses .mwai-ai.

I have included a link to a screenshot that hopefully shows what I mean a bit clearer. ??

https://hussstle.co.uk/chatbot-styling/

I can’t see your screenshot, haha, it’s geofenced! Can’t be seem from Japan. But I know what you mean… the very first reply in the conversation? If that’s the case, what about this:

.mwai-conversation > div:first-child {
    background: purple !important;
}

Thanks Jordy, gave that a go and no luck unfortunately.

I sorted the geofencing issue, removed it for Japan.

Really? But it does; on all my tests ?? Are you sure you added the CSS? Can I see your chatbot? Are you using the latest version of the plugin, just in case?

I went back and had another go and I tweaked it to this:

.mwai-conversation .mwai-reply.mwai-ai:first-child {
background: #003a6f!important;
}

And it works.
But now I have the issue of trying to get the font color to be different, I need white for the first section but I can’t get it to work, trying multiple pseudo classes and in different ways but I’m not getting it to work aahhhh lol

Yes you can see here:
https://hussstle.co.uk/job-description-writer

Mmm, maybe need to be connected? I don’t see it ??

try again, I realised there was a user status filter which I just removed

Haha, so basically… I think you really went a bit too far with all those “important!”, don’t use them, as much as little as possible, and add the CSS at the bottom of the page (yeah, you use !important because it is before, to override mine, and whatever comes after).

You have an important that makes all the font dark.

If you remove your CSS completely and just use the one I shared with you before, with a “color: white” for example in it, that will work I think. Then you can try to find a way to do it all without any important.

You can use the filter style I talk about on my website too ??

Sorry been tied up for a few days.

haha yes you right, lots of !important been used lol
to be honest I did this because I can get the custom css to have any effect without it ?????♂?