>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3554108. --> Reported by: [ronraney](https://www.drupal.org/user/3674214) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Cannot style <code>&lt;deep-chat id="chat-element"&gt;</code>. It appears that styles are added in some way to the element itself as inline css. Any attempt to override the styles will not work becuase the style attribute in the element takes precedence over other CSS sources.</p> <h4 id="summary-steps-reproduce">Steps to reproduce (required for bugs, but not feature requests)</h4> <p>Please provide information like AI modules enabled, which AI provider, browser, etc.</p> <p>I'm using Drupal AI Chatbot/Deep Chat submodule. The chatbot block that I'm using is Deep Chat. When I inspect the element, it's in a custom element <code>&lt;deep-chat ...&gt;</code>. I don't know how the styles are being added to the element, but I see the element in the <code>ai-deepchat.html.twig</code> template.</p> <p>I do see styles being stored in YML, such as in <code>ai_chatbot.module</code>. I hope this isn't the way things are heading. It seems like front end developers should be able to style elements in the DOM with CSS.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Move all styles for this element to a CSS file.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3>Optional: Other details as applicable (e.g., User interface changes, API changes, Data model changes)</h3>