made corners rounded

Author: patriciaflutterflow

src/js/chatbot.js

@@ -13,13 +13,51 @@
   script.defer = true;
   document.head.appendChild(script);
 
-  // Add custom styles for purple color
+  // Add custom styles for purple color and rounded corners
   const style = document.createElement('style');
   style.textContent = `
     #dify-chatbot-bubble-button {
       background-color: #4B39EF !important;
       bottom: 0.25rem !important;
       right: 0.25rem !important;
+      border-radius: 50% !important;
+      width: 50px !important;
+      height: 50px !important;
+    }
+    
+    /* Make the main chat window background more translucent to show rounded corners */
+    .dify-chatbot-widget #dify-chatbot-bubble-window {
+      background-color: rgba(51, 51, 51, 0.6) !important;
+      border-radius: 12px !important;
+      overflow: hidden !important;
+    }
+    
+    /* Also target any main container backgrounds */
+    .dify-chatbot-widget > div {
+      background-color: rgba(51, 51, 51, 0.6) !important;
+      border-radius: 12px !important;
+      overflow: hidden !important;
+    }
+    
+    /* Target the main chat container */
+    .dify-chatbot-widget .dify-chatbot-bubble-window {
+      background-color: rgba(51, 51, 51, 0.6) !important;
+      border-radius: 12px !important;
+      overflow: hidden !important;
+    }
+    
+    /* Target any chat window elements */
+    [id*="chat"], [class*="chat-window"], [class*="bubble-window"] {
+      background-color: rgba(51, 51, 51, 0.6) !important;
+      border-radius: 12px !important;
+      overflow: hidden !important;
+    }
+    
+    /* Ensure the chat button is perfectly circular */
+    [id*="bubble-button"], [class*="bubble-button"] {
+      border-radius: 50% !important;
+      width: 60px !important;
+      height: 60px !important;
     }
   `;
   document.head.appendChild(style);
@@ -88,6 +126,33 @@
         element.style.left = 'auto';
       }
     });
+    
+    // Make background elements more translucent to show rounded corners
+    const allElements = document.querySelectorAll('.dify-chatbot-widget *');
+    allElements.forEach(element => {
+      const computedStyle = window.getComputedStyle(element);
+      // Look for dark backgrounds that are likely the main content area
+      if (computedStyle.backgroundColor && 
+          (computedStyle.backgroundColor.includes('rgb(51, 51, 51)') ||
+           computedStyle.backgroundColor.includes('rgb(64, 64, 64)') ||
+           computedStyle.backgroundColor.includes('rgb(33, 33, 33)') ||
+           computedStyle.backgroundColor.includes('#333333') ||
+           computedStyle.backgroundColor.includes('#404040') ||
+           computedStyle.backgroundColor.includes('#212121'))) {
+        // Make it more translucent
+        element.style.backgroundColor = 'rgba(51, 51, 51, 0.5)';
+        element.style.borderRadius = '12px';
+        element.style.overflow = 'hidden';
+      }
+    });
+    
+    // Ensure chat button is circular
+    const chatButtons = document.querySelectorAll('[id*="bubble-button"], [class*="bubble-button"]');
+    chatButtons.forEach(button => {
+      button.style.borderRadius = '50%';
+      button.style.width = '60px';
+      button.style.height = '60px';
+    });
   }
 
   // Apply positioning after script loads