Fixed widget alignment: corrected icon sizing, implemented CSS reset to prevent theme leaks, and ensured proper positioning

static/addon.html

@@ -18,44 +18,67 @@
     }
 
     #martech-chat-wrapper {
+        all: initial; /* Reset to prevent theme leaks */
         font-family: 'Outfit', sans-serif;
+        position: fixed;
+        z-index: 999999;
+        bottom: 0;
+        right: 0;
+    }
+
+    #martech-chat-wrapper * {
+        box-sizing: border-box;
     }
 
     /* Floating Action Button (FAB) */
     #martech-chat-fab {
         position: fixed;
         right: 20px;
-        bottom: 25px;
-        width: 80px;
-        height: 80px;
+        bottom: 20px;
+        width: 70px;
+        height: 70px;
         background: transparent;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        z-index: 999999;
+        z-index: 1000000;
         transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
 
+    #chat-icon {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    dotlottie-player {
+        width: 120% !important; /* Slightly larger to fill space */
+        height: 120% !important;
+    }
+
     #martech-chat-fab:hover {
-        transform: scale(1.1) rotate(5deg);
+        transform: scale(1.1);
     }
 
     /* Chat Window Styling */
     #martech-chat-box {
         position: fixed;
         right: 25px;
-        bottom: 110px;
-        width: 420px;
+        bottom: 100px;
+        width: 400px;
         height: 600px;
         background: var(--glass-bg);
-        backdrop-filter: blur(10px);
+        backdrop-filter: blur(15px);
+        -webkit-backdrop-filter: blur(15px);
         border-radius: var(--radius);
         overflow: hidden;
         display: none;
         flex-direction: column;
         box-shadow: var(--shadow-lg);
-        z-index: 999998;
+        z-index: 999999;
         border: 1px solid rgba(226, 232, 240, 0.8);
         opacity: 0;
         transform: translateY(30px) scale(0.95);
@@ -225,10 +248,10 @@
 <div id="martech-chat-wrapper">
     <div id="martech-chat-fab">
         <!-- Animated Chatbot Icon -->
-        <div id="chat-icon" style="width: 233px; height: 238px; display: flex; align-items: center; justify-content: center; pointer-events: none;">
+        <div id="chat-icon">
             <dotlottie-player
                 src="https://joedown11-chatrag.hf.space/static/bot-icon.lottie"
-                background="transparent" speed="1" style="width: 100%; height: 100%; will-change: transform;" loop autoplay>
+                background="transparent" speed="1" style="width: 100%; height: 100%;" loop autoplay>
             </dotlottie-player>
         </div>
         <!-- Close Icon -->