chat colors, IBM Plex Sans

web/src/components/ChatPanel.vue

@@ -496,8 +496,18 @@ const chatStyles = {
 onMounted(() => {
   wsManager.addHandler(handleMessage)
 
-  // Focus on the chat input when component mounts
   setTimeout(() => {
+    // Inject styles into shadow DOM to widen message bubbles
+    const chatEl = document.querySelector('vue-advanced-chat')
+    if (chatEl?.shadowRoot) {
+      const style = document.createElement('style')
+      style.textContent = `
+        .vac-message-wrapper .vac-message-box { max-width: 80%; }
+        .vac-message-wrapper .vac-offset-current { margin-left: 20%; }
+      `
+      chatEl.shadowRoot.appendChild(style)
+    }
+
     const chatInput = document.querySelector('.vac-textarea') as HTMLTextAreaElement
     if (chatInput) {
       chatInput.focus()