Merge branch 'main' into feat/chat-color-customization

ui/src/components/chat/CanvasChat.vue

@@ -68,6 +68,7 @@ watch(() => chat.items.length, scrollBottom)
               fontFamily: 'var(--chat-font-family)',
               fontSize: 'var(--chat-font-size)'
             }">
+
             {{ m.text }}
           </div>
         </div>
@@ -84,6 +85,7 @@ watch(() => chat.items.length, scrollBottom)
         @keydown="handleKey"
         rows="1"
         placeholder="Escribí un mensaje… (Enter para enviar, Shift+Enter salto)"
+
         class="flex-1 resize-none rounded-lg border p-3 focus:outline-none focus:ring-2 custom-scroll"
         :style="{
           backgroundColor: 'var(--chat-input-box-color)',
@@ -102,6 +104,18 @@ watch(() => chat.items.length, scrollBottom)
 </template>
 
 <style scoped>
+.canvas-chat-root {
+  background-color: var(--background-color-chat, #F0F0F0); /* Fallback to store default */
+}
+
+/* Default accent color for chat if not provided by CSS variable */
+:root {
+  --accent-color-chat-fallback: #0D9488; /* Teal-700 as a fallback */
+  --accent-color-chat-alpha-35-fallback: rgba(13, 148, 136, 0.35);
+  --accent-color-chat-alpha-70-fallback: rgba(13, 148, 136, 0.7);
+  --accent-color-chat-alpha-60-fallback: rgba(13, 148, 136, 0.6);
+}
+
 .custom-scroll::-webkit-scrollbar { width: 8px; }
 .custom-scroll::-webkit-scrollbar-track { background: transparent; } /* Consider if track needs to adapt to --chat-background-color */
 .custom-scroll::-webkit-scrollbar-thumb { background-color: var(--chat-accent-color); opacity: 0.35; border-radius: 4px; }