diff --git a/packages/studio-theme/src/theme/studio-dark/ai-chart.scss b/packages/studio-theme/src/theme/studio-dark/ai-chart.scss
index d66734f73a79f92d3f4b4aaa57b0a43b1371b34b..41a1149fb181e2f26dc45add6e1c220749d5fa1d 100644
--- a/packages/studio-theme/src/theme/studio-dark/ai-chart.scss
+++ b/packages/studio-theme/src/theme/studio-dark/ai-chart.scss
@@ -1,14 +1,15 @@
 /* stylelint-disable selector-class-pattern */
 :root.studio_dark {
-    .#{bem(chat-container)},
-    .#{bem(chat-container-minimize)} {
+    @include b(chat-container) {
         #{getCssVarName(ai-chat, background-color)}: getCssVar(color, bg, 0);
         #{getCssVarName(ai-chat, border-color)}: getCssVar(color, border);
         #{getCssVarName(ai-chat, color)}: getCssVar(color, text, 0);
         #{getCssVarName(ai-chat, disabled-color)}: getCssVar(color, disabled, text);
         #{getCssVarName(ai-chat, hover-background-color)}: getCssVar(color, primary, hover);
         #{getCssVarName(ai-chat, hover-color)}: getCssVar(color, primary, hover, text);
-
+        #{getCssVarName(ai-chat, color-2)}: getCssVar(color, white);
+        #{getCssVarName(ai-chat, background-color-2)}: rgba(var(#{getCssVarName(light, blue, 3)}), 1);
+        #{getCssVarName(ai-chat, hover-background-color-2)}: rgba(var(#{getCssVarName(light, blue, 4)}), 1);
         .cherry.theme__dark .cherry-previewer {
             background-color: getCssVar(color, bg, 1);
         }