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. 😁
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:
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?
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
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 🙂
