fix: prevent overlap between Vapi widget and Fern Ask AI panel

Author: sahil485

fern/custom.js

@@ -13,6 +13,11 @@ function injectVapiWidget() {
     return;
   }
 
+  // Add --ask-ai-panel-width CSS variable for widget positioning if it doesn't exist already
+  if (!getComputedStyle(document.documentElement).getPropertyValue('--ask-ai-panel-width').trim()) {
+    document.documentElement.style.setProperty('--ask-ai-panel-width', '0px');
+  }
+
   const script = document.createElement('script');
   script.src = WIDGET_SCRIPT_URL;
   script.async = true;
@@ -22,10 +27,14 @@ function injectVapiWidget() {
     const widget = document.createElement(WIDGET_TAG);
     const apiKey = '6d46661c-2dce-4032-b62d-64c151a14e0d';
     widget.setAttribute('apiKey', apiKey);
+
     widget.style.position = 'fixed';
     widget.style.bottom = '0';
-    widget.style.right = '0';
+    widget.style.right = `var(--ask-ai-panel-width)`;
     widget.style.zIndex = '9999';
+
+    widget.style.transition = 'right 0.5s ease-out';
+
     document.body.appendChild(widget);
     console.log('[custom.js] Widget element appended to DOM');
   };