wakz-chat-widget 2.0.0 → 2.2.0

package/index.js

@@ -1,11 +1,10 @@
 /**
- * WAKZ Chat Widget v3.0.0
+ * WAKZ Chat Widget v2.2.0
  * ─────────────────────────────────────────────────────────────────
  * A production-grade, self-contained chat widget using Shadow DOM.
- * Premium glassmorphism design matching the WAKZ site design system.
+ * Competes with Intercom & Crisp in quality.
  *
  * Embed: <script src="/wakz-widget.js" data-api-key="xxx" data-server="https://..." async></script>
- * New attrs: data-icon-color="#171717" data-icon-shape="circle"
  *
  * ZERO external dependencies — pure vanilla JavaScript.
  */
@@ -51,9 +50,7 @@
     if (!target && scripts.length > 0) target = scripts[scripts.length - 1];
     return {
       apiKey: (target && target.getAttribute('data-api-key')) || '',
-      server: (target && target.getAttribute('data-server')) || '',
-      iconColor: (target && target.getAttribute('data-icon-color')) || '',
-      iconShape: (target && target.getAttribute('data-icon-shape')) || ''
+      server: (target && target.getAttribute('data-server')) || ''
     };
   }
 
@@ -82,6 +79,46 @@
     return el;
   }
 
+  /** Detect device model, platform, and type using userAgentData API (Chrome 90+) with UA fallback */
+  function _getDeviceInfo() {
+    var info = {
+      device_model: '',
+      device_platform: '',
+      device_type: 'desktop'
+    };
+
+    // Try userAgentData API (Chrome 90+, Edge, Samsung Browser — NOT Safari/Firefox)
+    if (navigator.userAgentData) {
+      info.device_model = navigator.userAgentData.model || '';
+      info.device_platform = navigator.userAgentData.platform || '';
+      if (navigator.userAgentData.mobile === true) {
+        info.device_type = 'mobile';
+      } else if (navigator.userAgentData.mobile === false && info.device_platform === 'Android') {
+        info.device_type = 'tablet';
+      } else {
+        info.device_type = 'desktop';
+      }
+    }
+
+    // Fallback: parse from user agent string
+    var ua = navigator.userAgent || '';
+    if (!info.device_platform) {
+      if (/iPhone|iPad|iPod/i.test(ua)) info.device_platform = 'iOS';
+      else if (/Android/i.test(ua)) info.device_platform = 'Android';
+      else if (/Windows/i.test(ua)) info.device_platform = 'Windows';
+      else if (/Mac OS X/i.test(ua)) info.device_platform = 'macOS';
+      else if (/CrOS/i.test(ua)) info.device_platform = 'Chrome OS';
+      else if (/Linux/i.test(ua)) info.device_platform = 'Linux';
+    }
+    if (info.device_type === 'desktop') {
+      if (/iPad/i.test(ua)) info.device_type = 'tablet';
+      else if (/Mobile|iPhone|iPod/i.test(ua)) info.device_type = 'mobile';
+      else if (/Android(?!.*Mobile)/i.test(ua)) info.device_type = 'tablet';
+      else if (/Android/i.test(ua)) info.device_type = 'mobile';
+    }
+    return info;
+  }
+
   /** Fetch with an AbortController timeout (default 30s) */
   function _fetchWithTimeout(url, options, timeoutMs) {
     var controller = new AbortController();
@@ -95,21 +132,12 @@
      ════════════════════════════════════════════════════════════════ */
 
   var _ICONS = {
-    /* Modern chat icon: rounded square with 3 horizontal chat lines */
-    chatIcon:
-      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +
-      '<rect x="3" y="3" width="18" height="18" rx="5" ry="5" stroke="currentColor" stroke-width="1.8" fill="none"/>' +
-      '<line x1="8" y1="9" x2="16" y2="9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>' +
-      '<line x1="8" y1="12.5" x2="14" y2="12.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>' +
-      '<line x1="8" y1="16" x2="12" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>' +
-      '</svg>',
-    /* Send arrow */
+    chatBubble:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>',
     send:
       '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>',
-    /* Close X */
     close:
-      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
-    /* Error circle */
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
     error:
       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
   };
@@ -169,12 +197,11 @@
     botName: 'WAKZ',
     welcomeMessage: '',
     primaryColor: '#171717',
-    iconColor: '#171717',
-    iconShape: 'circle',
-    chatBg: '#FAFAFA',
+    chatBg: '#f8f9fa',
+    btnColor: '#171717',
     widgetBg: '#ffffff',
     position: 'bottom-right',
-    language: 'ar',
+    language: 'en',
     showStatus: true,
     online: true
   };
@@ -195,8 +222,7 @@
     self.apiKey = attrs.apiKey;
     self.server = attrs.server;
     self.visitorId = _getVisitorId();
-    self._scriptIconColor = attrs.iconColor;
-    self._scriptIconShape = attrs.iconShape;
+    self._deviceInfo = _getDeviceInfo(); // Device model, platform, type — collected once
 
     /* ── Runtime state ── */
     self.config = Object.assign({}, _DEFAULTS);
@@ -211,12 +237,12 @@
     self._lastPollTime = null;
     self._POLL_INTERVAL = 4000; /* Poll every 4 seconds */
     self._knownMessageIds = {}; /* Deduplication set for message IDs */
+    self._pendingReply = false;  /* True while waiting for API response — pauses polling */
 
     /* ── DOM refs (populated after mount) ── */
     self._host = null;
     self._shadow = null;
     self._root = null;
-    self._overlayEl = null;
     self._chatWindow = null;
     self._messagesContainer = null;
     self._inputEl = null;
@@ -235,7 +261,7 @@
   }
 
   /* ════════════════════════════════════════════════════════════════
-     CSS — Complete premium styling injected into Shadow DOM
+     CSS — Complete styling injected into Shadow DOM
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._injectCSS = function () {
@@ -246,14 +272,18 @@
       /* ── CSS Custom Properties (theming) ── */
       ':host {',
       '  --wakz-primary: #171717;',
-      '  --wakz-icon-color: #171717;',
-      '  --wakz-chat-bg: #FAFAFA;',
+      '  --wakz-btn: #171717;',
+      '  --wakz-chat-bg: #f8f9fa;',
       '  --wakz-widget-bg: #ffffff;',
-      '  --wakz-radius: 20px;',
-      '  --wakz-radius-bubble: 18px;',
+      '  --wakz-radius-window: 16px;',
+      '  --wakz-radius-bubble: 16px;',
+      '  --wakz-radius-fab: 28px;',
+      '  --wakz-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);',
+      '  --wakz-shadow-md: 0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);',
+      '  --wakz-shadow-lg: 0 12px 40px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.1);',
+      '  --wakz-shadow-xl: 0 20px 60px rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.12);',
+      '  --wakz-transition: 200ms ease;',
       '  --wakz-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;',
-      '  --wakz-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1);',
-      '  --wakz-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);',
       '  all: initial;',
       '  font-family: var(--wakz-font);',
       '}',
@@ -271,46 +301,34 @@
       '.wakz-fab {',
       '  position: fixed;',
       '  z-index: 2147483647;',
-      '  width: 52px;',
-      '  height: 52px;',
-      '  border-radius: 50%;',
+      '  width: 56px;',
+      '  height: 56px;',
+      '  border-radius: var(--wakz-radius-fab);',
       '  border: none;',
       '  cursor: pointer;',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
-      '  box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1);',
-      '  transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;',
+      '  box-shadow: var(--wakz-shadow-lg);',
+      '  transition: transform var(--wakz-transition), box-shadow var(--wakz-transition);',
       '  outline: none;',
       '  -webkit-tap-highlight-color: transparent;',
-      '  background: var(--wakz-icon-color, #171717);',
+      '  background: var(--wakz-btn);',
       '}',
       '.wakz-fab:hover {',
       '  transform: scale(1.08);',
-      '  box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.12);',
+      '  box-shadow: var(--wakz-shadow-xl);',
       '}',
       '.wakz-fab:active {',
       '  transform: scale(0.96);',
       '}',
       '.wakz-fab svg {',
-      '  width: 24px;',
-      '  height: 24px;',
+      '  width: 26px;',
+      '  height: 26px;',
       '  color: #ffffff;',
       '  pointer-events: none;',
       '}',
 
-      /* ── FAB Shape: rounded square ── */
-      '.wakz-fab-shape-rounded {',
-      '  border-radius: 16px;',
-      '}',
-
-      /* ── FAB hidden when chat is open ── */
-      '.wakz-fab-hidden {',
-      '  opacity: 0;',
-      '  pointer-events: none;',
-      '  transform: scale(0.8);',
-      '}',
-
       /* ── FAB Positioning ── */
       '.wakz-fab-pos-br { bottom: 24px; right: 24px; }',
       '.wakz-fab-pos-bl { bottom: 24px; left: 24px; }',
@@ -331,18 +349,18 @@
          ══════════════════════════════════════════════════ */
       '.wakz-fab-dot {',
       '  position: absolute;',
-      '  top: -1px;',
-      '  right: -1px;',
-      '  width: 12px;',
-      '  height: 12px;',
+      '  top: 0px;',
+      '  right: 0px;',
+      '  width: 14px;',
+      '  height: 14px;',
       '  border-radius: 50%;',
-      '  border: 2px solid #ffffff;',
+      '  border: 2.5px solid #ffffff;',
       '  z-index: 2;',
       '  transition: background 0.3s ease;',
       '}',
       '.wakz-fab-pos-bl .wakz-fab-dot {',
       '  right: auto;',
-      '  left: -1px;',
+      '  left: 0px;',
       '}',
 
       /* ── Online (green pulse) ── */
@@ -363,60 +381,45 @@
       '  animation: none;',
       '}',
 
-      /* ══════════════════════════════════════════════════
-         OVERLAY BACKDROP
-         ══════════════════════════════════════════════════ */
-      '.wakz-overlay {',
-      '  position: fixed;',
-      '  top: 0;',
-      '  left: 0;',
-      '  right: 0;',
-      '  bottom: 0;',
-      '  z-index: 2147483645;',
-      '  background: rgba(0,0,0,0.4);',
-      '  -webkit-backdrop-filter: blur(4px);',
-      '  backdrop-filter: blur(4px);',
-      '  opacity: 0;',
-      '  pointer-events: none;',
-      '  transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1);',
-      '}',
-      '.wakz-overlay.wakz-visible {',
-      '  opacity: 1;',
-      '  pointer-events: auto;',
+      /* ── Error (red, no pulse) ── */
+      '.wakz-fab-dot.error {',
+      '  background: #ef4444;',
+      '  animation: none;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         CHAT WINDOW — Centered Modal
+         CHAT WINDOW
          ══════════════════════════════════════════════════ */
       '.wakz-window {',
       '  position: fixed;',
       '  z-index: 2147483646;',
-      '  top: 50%;',
-      '  left: 50%;',
-      '  transform: translate(-50%, -50%) scale(0.95);',
-      '  width: 420px;',
-      '  max-height: 75vh;',
-      '  border-radius: 20px;',
+      '  width: 380px;',
+      '  min-height: 500px;',
+      '  max-height: 70vh;',
+      '  border-radius: var(--wakz-radius-window);',
       '  overflow: hidden;',
       '  display: flex;',
       '  flex-direction: column;',
       '  background: var(--wakz-widget-bg);',
-      '  border: 1px solid #E5E5E5;',
-      '  box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1);',
-      '  -webkit-backdrop-filter: blur(20px);',
-      '  backdrop-filter: blur(20px);',
+      '  box-shadow: var(--wakz-shadow-xl);',
       '  opacity: 0;',
+      '  transform: translateY(20px) scale(0.95);',
       '  pointer-events: none;',
-      '  transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1);',
+      '  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),',
+      '              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);',
       '}',
       '.wakz-window.wakz-visible {',
       '  opacity: 1;',
-      '  transform: translate(-50%, -50%) scale(1);',
+      '  transform: translateY(0) scale(1);',
       '  pointer-events: auto;',
       '}',
 
+      /* ── Window Positioning ── */
+      '.wakz-win-pos-br { bottom: 92px; right: 24px; }',
+      '.wakz-win-pos-bl { bottom: 92px; left: 24px; }',
+
       /* ══════════════════════════════════════════════════
-         HEADER — Glassmorphism (matching floatingGlassShell)
+         HEADER
          ══════════════════════════════════════════════════ */
       '.wakz-hdr {',
       '  flex-shrink: 0;',
@@ -424,35 +427,30 @@
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: space-between;',
-      '  color: #171717;',
+      '  color: #ffffff;',
       '  cursor: default;',
       '  user-select: none;',
-      '  background: rgba(255,255,255,0.85);',
-      '  -webkit-backdrop-filter: blur(20px);',
-      '  backdrop-filter: blur(20px);',
-      '  border-bottom: 1px solid rgba(0,0,0,0.06);',
-      '  height: 60px;',
+      '  background: var(--wakz-primary);',
       '}',
-      '.wakz-hdr-right {',
+      '.wakz-hdr-left {',
       '  display: flex;',
       '  align-items: center;',
       '  gap: 11px;',
       '  min-width: 0;',
       '}',
 
-      /* ── Bot Avatar (header) ── */
+      /* ── Bot Avatar ── */
       '.wakz-avatar {',
-      '  width: 36px;',
-      '  height: 36px;',
+      '  width: 38px;',
+      '  height: 38px;',
       '  border-radius: 50%;',
-      '  background: var(--wakz-primary);',
+      '  background: rgba(255,255,255,0.18);',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
       '  font-weight: 700;',
-      '  font-size: 15px;',
+      '  font-size: 16px;',
       '  flex-shrink: 0;',
-      '  color: #ffffff;',
       '  letter-spacing: 0.5px;',
       '}',
 
@@ -463,27 +461,20 @@
       '  min-width: 0;',
       '}',
       '.wakz-hdr-name {',
-      '  font-size: 16px;',
+      '  font-size: 15px;',
       '  font-weight: 600;',
       '  line-height: 1.3;',
-      '  color: #171717;',
       '  white-space: nowrap;',
       '  overflow: hidden;',
       '  text-overflow: ellipsis;',
       '}',
-
-      /* ── Header Left: status + close ── */
-      '.wakz-hdr-left {',
-      '  display: flex;',
-      '  align-items: center;',
-      '  gap: 10px;',
-      '}',
       '.wakz-hdr-status {',
       '  font-size: 12px;',
-      '  color: #171717;',
+      '  opacity: 0.9;',
       '  display: flex;',
       '  align-items: center;',
       '  gap: 5px;',
+      '  margin-top: 2px;',
       '}',
       '.wakz-hdr-status-dot {',
       '  width: 7px;',
@@ -493,8 +484,8 @@
       '  flex-shrink: 0;',
       '  transition: background 0.3s ease;',
       '}',
-      '.wakz-hdr-status-dot.online { background: #22c55e; }',
-      '.wakz-hdr-status-dot.offline { background: #ef4444; }',
+      '.wakz-hdr-status-dot.online { background: #4ade80; }',
+      '.wakz-hdr-status-dot.offline { background: #f87171; }',
 
       /* ── Close Button ── */
       '.wakz-close {',
@@ -502,18 +493,18 @@
       '  height: 32px;',
       '  border-radius: 50%;',
       '  border: none;',
-      '  background: transparent;',
-      '  color: #171717;',
+      '  background: rgba(255,255,255,0.12);',
+      '  color: #ffffff;',
       '  cursor: pointer;',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
-      '  transition: background 0.2s ease;',
+      '  transition: background var(--wakz-transition);',
       '  outline: none;',
       '  flex-shrink: 0;',
       '}',
       '.wakz-close:hover {',
-      '  background: rgba(0,0,0,0.06);',
+      '  background: rgba(255,255,255,0.28);',
       '}',
       '.wakz-close svg {',
       '  width: 18px;',
@@ -527,130 +518,90 @@
       '  flex: 1;',
       '  overflow-y: auto;',
       '  overflow-x: hidden;',
-      '  padding: 16px;',
+      '  padding: 18px 16px 10px;',
       '  display: flex;',
       '  flex-direction: column;',
-      '  gap: 8px;',
+      '  gap: 6px;',
       '  scroll-behavior: smooth;',
       '  background: var(--wakz-chat-bg);',
       '}',
       '.wakz-msgs::-webkit-scrollbar { width: 5px; }',
       '.wakz-msgs::-webkit-scrollbar-track { background: transparent; }',
       '.wakz-msgs::-webkit-scrollbar-thumb {',
-      '  background: rgba(0,0,0,0.08);',
+      '  background: rgba(0,0,0,0.12);',
       '  border-radius: 10px;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         MESSAGE STYLES
+         MESSAGE BUBBLES
          ══════════════════════════════════════════════════ */
+      '.wakz-msg-row {',
+      '  display: flex;',
+      '  max-width: 82%;',
+      '  animation: wakz-msg-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;',
+      '}',
+      '.wakz-msg-row.bot { align-self: flex-start; }',
+      '.wakz-msg-row.user { align-self: flex-end; }',
+
       '@keyframes wakz-msg-in {',
       '  0%   { opacity: 0; transform: translateY(8px); }',
       '  100% { opacity: 1; transform: translateY(0); }',
       '}',
 
-      /* ── User Message (bubble, right-aligned LTR / left-aligned RTL) ── */
-      '.wakz-msg-row {',
-      '  animation: wakz-msg-in 0.3s cubic-bezier(0.16,1,0.3,1) forwards;',
-      '}',
-      '.wakz-msg-row.user {',
-      '  align-self: flex-end;',
-      '  max-width: 75%;',
-      '}',
-      '.wakz-msg-row.bot {',
-      '  align-self: flex-start;',
-      '  max-width: 85%;',
-      '}',
-
-      '.wakz-bubble-user {',
-      '  padding: 10px 16px;',
+      '.wakz-bubble {',
+      '  padding: 10px 14px;',
       '  font-size: 14px;',
       '  line-height: 1.55;',
       '  word-wrap: break-word;',
       '  overflow-wrap: break-word;',
       '  white-space: pre-wrap;',
-      '  border-radius: 18px 18px 6px 18px;',
-      '  background: var(--wakz-primary);',
+      '  border-radius: var(--wakz-radius-bubble);',
+      '  position: relative;',
+      '}',
+      '.wakz-bubble.bot {',
+      '  background: #ffffff;',
+      '  color: #1a1a1a;',
+      '  border-bottom-left-radius: 4px;',
+      '  box-shadow: var(--wakz-shadow-sm);',
+      '}',
+      '.wakz-bubble.user {',
       '  color: #ffffff;',
+      '  border-bottom-right-radius: 4px;',
+      '  background: var(--wakz-primary);',
+      '}',
+      '.wakz-bubble.error-bubble {',
+      '  background: #fef2f2;',
+      '  color: #dc2626;',
+      '  border: 1px solid #fecaca;',
+      '  border-bottom-left-radius: 4px;',
+      '  box-shadow: none;',
       '}',
 
-      /* ── Timestamp ── */
+      /* ── Message Timestamp ── */
       '.wakz-ts {',
       '  display: block;',
-      '  font-size: 10px;',
-      '  opacity: 0.6;',
+      '  font-size: 11px;',
+      '  opacity: 0.45;',
       '  margin-top: 4px;',
       '}',
-      '.wakz-bubble-user .wakz-ts {',
+      '.wakz-bubble.user .wakz-ts {',
       '  text-align: right;',
-      '  color: rgba(255,255,255,0.7);',
       '}',
 
-      /* ── Bot Message (no bubble, flat on bg with left accent border) ── */
-      '.wakz-msg-bot-wrap {',
-      '  display: flex;',
-      '  flex-direction: column;',
-      '  gap: 2px;',
-      '}',
-      '.wakz-msg-bot-avatar {',
-      '  width: 20px;',
-      '  height: 20px;',
-      '  border-radius: 50%;',
-      '  background: var(--wakz-primary);',
-      '  display: flex;',
-      '  align-items: center;',
-      '  justify-content: center;',
-      '  color: #ffffff;',
-      '  font-weight: 700;',
-      '  font-size: 9px;',
-      '  flex-shrink: 0;',
-      '  margin-bottom: 2px;',
-      '}',
-      '.wakz-msg-bot-content {',
-      '  border-left: 3px solid rgba(23,23,23,0.2);',
-      '  padding: 10px 0 10px 14px;',
-      '  font-size: 14px;',
-      '  line-height: 1.6;',
-      '  color: #374151;',
-      '  word-wrap: break-word;',
-      '  overflow-wrap: break-word;',
-      '  white-space: pre-wrap;',
-      '}',
-      '.wakz-msg-bot-content .wakz-ts {',
-      '  color: #9CA3AF;',
-      '}',
-
-      /* ── Support / Human Agent Message ── */
-      '.wakz-msg-bot-content.wakz-human {',
-      '  border-left-color: #16A34A;',
-      '}',
+      /* ── Human Agent Badge ── */
       '.wakz-human-badge {',
-      '  display: inline-flex;',
-      '  align-items: center;',
-      '  font-size: 11px;',
-      '  background: rgba(22,163,74,0.08);',
+      '  display: inline-block;',
+      '  font-size: 10px;',
+      '  background: rgba(22, 163, 74, 0.1);',
       '  color: #16A34A;',
-      '  border-radius: 20px;',
-      '  padding: 2px 8px;',
-      '  margin-top: 6px;',
+      '  border-radius: 8px;',
+      '  padding: 1px 7px;',
+      '  margin-top: 5px;',
       '  font-weight: 600;',
+      '  letter-spacing: 0.2px;',
       '}',
 
-      /* ── Error bubble ── */
-      '.wakz-bubble-error {',
-      '  padding: 10px 14px;',
-      '  font-size: 14px;',
-      '  line-height: 1.55;',
-      '  word-wrap: break-word;',
-      '  overflow-wrap: break-word;',
-      '  white-space: pre-wrap;',
-      '  background: #FEF2F2;',
-      '  color: #DC2626;',
-      '  border: 1px solid #FECACA;',
-      '  border-radius: 18px 18px 6px 18px;',
-      '}',
-
-      /* ── Retry Button (inside error) ── */
+      /* ── Retry Button (inside error bubble) ── */
       '.wakz-retry {',
       '  display: inline-flex;',
       '  align-items: center;',
@@ -665,7 +616,7 @@
       '  color: #dc2626;',
       '  cursor: pointer;',
       '  font-family: var(--wakz-font);',
-      '  transition: background 0.2s ease, border-color 0.2s ease;',
+      '  transition: background var(--wakz-transition), border-color var(--wakz-transition);',
       '  outline: none;',
       '}',
       '.wakz-retry:hover {',
@@ -674,32 +625,23 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         WELCOME MESSAGE
-         ══════════════════════════════════════════════════ */
-      '.wakz-welcome-wrap {',
-      '  display: flex;',
-      '  flex-direction: column;',
-      '  gap: 2px;',
-      '  max-width: 85%;',
-      '  align-self: flex-start;',
-      '  animation: wakz-msg-in 0.35s cubic-bezier(0.16,1,0.3,1) forwards;',
-      '}',
-
-      /* ══════════════════════════════════════════════════
-         TYPING INDICATOR (no bubble — on background)
+         TYPING INDICATOR
          ══════════════════════════════════════════════════ */
       '.wakz-typing {',
       '  display: flex;',
       '  align-items: center;',
       '  gap: 4px;',
-      '  padding: 10px 0 10px 14px;',
-      '  border-left: 3px solid rgba(23,23,23,0.2);',
+      '  padding: 14px 18px;',
+      '  background: #ffffff;',
+      '  border-radius: var(--wakz-radius-bubble);',
+      '  border-bottom-left-radius: 4px;',
+      '  box-shadow: var(--wakz-shadow-sm);',
       '}',
       '.wakz-typing-dot {',
       '  width: 7px;',
       '  height: 7px;',
       '  border-radius: 50%;',
-      '  background: #9CA3AF;',
+      '  background: #9ca3af;',
       '  animation: wakz-bounce-dot 1.4s ease-in-out infinite;',
       '}',
       '.wakz-typing-dot:nth-child(2) { animation-delay: 0.16s; }',
@@ -710,33 +652,31 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         INPUT AREA — Glass Effect
+         INPUT AREA
          ══════════════════════════════════════════════════ */
       '.wakz-input-wrap {',
       '  flex-shrink: 0;',
-      '  padding: 12px 16px;',
-      '  border-top: 1px solid rgba(0,0,0,0.06);',
-      '  background: rgba(255,255,255,0.7);',
-      '  -webkit-backdrop-filter: blur(12px);',
-      '  backdrop-filter: blur(12px);',
+      '  padding: 12px 14px;',
+      '  border-top: 1px solid #e5e7eb;',
+      '  background: var(--wakz-widget-bg);',
       '  display: flex;',
       '  align-items: flex-end;',
       '  gap: 8px;',
       '}',
       '.wakz-input {',
       '  flex: 1;',
-      '  border: 1.5px solid #E5E5E5;',
-      '  border-radius: 14px;',
+      '  border: 1.5px solid #e5e7eb;',
+      '  border-radius: 22px;',
       '  padding: 10px 16px;',
       '  font-size: 14px;',
       '  line-height: 1.4;',
       '  outline: none;',
       '  font-family: var(--wakz-font);',
-      '  transition: border-color 0.2s ease, background 0.2s ease;',
+      '  transition: border-color var(--wakz-transition);',
       '  resize: none;',
       '  max-height: 100px;',
       '  overflow-y: auto;',
-      '  background: #F9FAFB;',
+      '  background: #f9fafb;',
       '  color: #111827;',
       '}',
       '.wakz-input:focus {',
@@ -747,10 +687,10 @@
       '  color: #9ca3af;',
       '}',
 
-      /* ── Send Button (floating circle, separate from textarea) ── */
+      /* ── Send Button ── */
       '.wakz-send {',
-      '  width: 44px;',
-      '  height: 44px;',
+      '  width: 40px;',
+      '  height: 40px;',
       '  border-radius: 50%;',
       '  border: none;',
       '  color: #ffffff;',
@@ -759,21 +699,20 @@
       '  align-items: center;',
       '  justify-content: center;',
       '  flex-shrink: 0;',
-      '  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;',
+      '  transition: opacity var(--wakz-transition), transform 0.1s ease, box-shadow var(--wakz-transition);',
       '  outline: none;',
       '  background: var(--wakz-primary);',
-      '  box-shadow: 0 2px 8px rgba(0,0,0,0.12);',
+      '  box-shadow: var(--wakz-shadow-sm);',
       '}',
       '.wakz-send:hover:not(:disabled) {',
-      '  transform: scale(1.05);',
-      '  box-shadow: 0 4px 16px rgba(0,0,0,0.18);',
+      '  box-shadow: var(--wakz-shadow-md);',
       '}',
       '.wakz-send:disabled {',
       '  opacity: 0.35;',
       '  cursor: not-allowed;',
       '}',
       '.wakz-send:not(:disabled):active {',
-      '  transform: scale(0.92);',
+      '  transform: scale(0.88);',
       '}',
       '.wakz-send svg {',
       '  width: 18px;',
@@ -782,55 +721,68 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         RTL SUPPORT
+         WELCOME MESSAGE
          ══════════════════════════════════════════════════ */
-      '.wakz-rtl { direction: rtl; }',
-      '.wakz-rtl .wakz-bubble-user {',
-      '  border-radius: 18px 18px 18px 6px;',
+      '.wakz-welcome-wrap {',
+      '  display: flex;',
+      '  gap: 8px;',
+      '  max-width: 88%;',
+      '  align-self: flex-start;',
+      '  animation: wakz-msg-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;',
       '}',
-      '.wakz-rtl .wakz-bubble-user .wakz-ts {',
-      '  text-align: left;',
+      '.wakz-welcome-avatar {',
+      '  width: 28px;',
+      '  height: 28px;',
+      '  border-radius: 50%;',
+      '  background: var(--wakz-primary);',
+      '  display: flex;',
+      '  align-items: center;',
+      '  justify-content: center;',
+      '  color: #ffffff;',
+      '  font-weight: 700;',
+      '  font-size: 12px;',
+      '  flex-shrink: 0;',
+      '  align-self: flex-end;',
+      '  margin-bottom: 2px;',
       '}',
-      '.wakz-rtl .wakz-msg-bot-content {',
-      '  border-left: none;',
-      '  border-right: 3px solid rgba(23,23,23,0.2);',
-      '  padding: 10px 14px 10px 0;',
+
+      /* ══════════════════════════════════════════════════
+         RTL SUPPORT
+         ══════════════════════════════════════════════════ */
+      '.wakz-rtl { direction: rtl; }',
+      '.wakz-rtl .wakz-bubble.bot {',
+      '  border-bottom-left-radius: var(--wakz-radius-bubble);',
+      '  border-bottom-right-radius: 4px;',
       '}',
-      '.wakz-rtl .wakz-msg-bot-content.wakz-human {',
-      '  border-left: none;',
-      '  border-right-color: #16A34A;',
+      '.wakz-rtl .wakz-bubble.user {',
+      '  border-bottom-right-radius: var(--wakz-radius-bubble);',
+      '  border-bottom-left-radius: 4px;',
       '}',
       '.wakz-rtl .wakz-typing {',
-      '  border-left: none;',
-      '  border-right: 3px solid rgba(23,23,23,0.2);',
-      '  padding: 10px 14px 10px 0;',
+      '  border-bottom-left-radius: var(--wakz-radius-bubble);',
+      '  border-bottom-right-radius: 4px;',
       '}',
-      '.wakz-rtl .wakz-bubble-error {',
-      '  border-radius: 18px 18px 18px 6px;',
+      '.wakz-rtl .wakz-bubble.user .wakz-ts {',
+      '  text-align: left;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         MOBILE RESPONSIVE (< 480px)
+         MOBILE RESPONSIVE
          ══════════════════════════════════════════════════ */
       '@media (max-width: 480px) {',
-      '  .wakz-overlay {',
-      '    display: none;',
-      '  }',
       '  .wakz-window {',
-      '    top: auto !important;',
-      '    left: 0 !important;',
-      '    right: 0 !important;',
-      '    bottom: 0 !important;',
       '    width: 100vw !important;',
       '    height: 100vh !important;',
+      '    min-height: 100vh !important;',
       '    max-height: 100vh !important;',
-      '    border-radius: 20px 20px 0 0 !important;',
-      '    transform: translateY(100%) !important;',
-      '    border: none !important;',
-      '    border-top: 1px solid #E5E5E5 !important;',
+      '    bottom: 0 !important;',
+      '    top: 0 !important;',
+      '    right: 0 !important;',
+      '    left: 0 !important;',
+      '    border-radius: 0 !important;',
       '  }',
       '  .wakz-window.wakz-visible {',
-      '    transform: translateY(0) !important;',
+      '    transform: translateY(0) scale(1);',
       '  }',
       '  .wakz-fab-pos-br { bottom: 16px; right: 16px; }',
       '  .wakz-fab-pos-bl { bottom: 16px; left: 16px; }',
@@ -847,8 +799,6 @@
     var isRtl = self.config.language === 'ar';
     var posClass = self.config.position === 'bottom-left' ? 'bl' : 'br';
     var str = _strings(self.config.language);
-    var iconColor = self._scriptIconColor || self.config.iconColor;
-    var iconShape = self._scriptIconShape || self.config.iconShape;
 
     /* ── Host + Shadow DOM ── */
     self._host = _el('div');
@@ -861,16 +811,11 @@
     self._shadow.appendChild(self._root);
 
     /* ══════════════ FLOATING ACTION BUTTON ══════════════ */
-    var fabClasses = 'wakz-fab wakz-fab-pos-' + posClass;
-    if (iconShape === 'rounded') fabClasses += ' wakz-fab-shape-rounded';
-
     self._toggleBtn = _el('button', {
-      className: fabClasses,
-      'aria-label': str.openChat,
-      style: { '--wakz-icon-color': iconColor }
+      className: 'wakz-fab wakz-fab-pos-' + posClass,
+      'aria-label': str.openChat
     });
-    self._toggleBtn.style.background = iconColor;
-    self._toggleBtn.innerHTML = _ICONS.chatIcon;
+    self._toggleBtn.innerHTML = _ICONS.chatBubble;
 
     /* Status dot on FAB */
     self._statusDot = _el('span', { className: 'wakz-fab-dot ' + (self.config.online ? 'online' : 'offline') });
@@ -878,41 +823,32 @@
     self._toggleBtn.appendChild(self._statusDot);
     self._root.appendChild(self._toggleBtn);
 
-    /* ══════════════ OVERLAY BACKDROP ══════════════ */
-    self._overlayEl = _el('div', { className: 'wakz-overlay' });
-    self._root.appendChild(self._overlayEl);
-
-    /* ══════════════ CHAT WINDOW (Centered Modal) ══════════════ */
-    self._chatWindow = _el('div', { className: 'wakz-window' });
+    /* ══════════════ CHAT WINDOW ══════════════ */
+    self._chatWindow = _el('div', { className: 'wakz-window wakz-win-pos-' + posClass });
 
     /* ── Header ── */
     var headerEl = _el('div', { className: 'wakz-hdr' });
 
-    /* Right side: avatar + name (in RTL, right side = start) */
-    var headerRight = _el('div', { className: 'wakz-hdr-right' });
+    var headerLeft = _el('div', { className: 'wakz-hdr-left' });
     var avatarLetter = (self.config.botName || 'W')[0].toUpperCase();
-    headerRight.appendChild(_el('div', { className: 'wakz-avatar' }, [avatarLetter]));
+    headerLeft.appendChild(_el('div', { className: 'wakz-avatar' }, [avatarLetter]));
 
     var headerInfo = _el('div', { className: 'wakz-hdr-info' });
     headerInfo.appendChild(_el('span', { className: 'wakz-hdr-name' }, [self.config.botName]));
-    headerRight.appendChild(headerInfo);
-    headerEl.appendChild(headerRight);
-
-    /* Left side: status + close (in RTL, left side = end) */
-    var headerLeft = _el('div', { className: 'wakz-hdr-left' });
 
     var statusLine = _el('span', { className: 'wakz-hdr-status' });
     self._headerStatusDot = _el('span', { className: 'wakz-hdr-status-dot ' + (self.config.online ? 'online' : 'offline') });
     if (self.config.showStatus) statusLine.appendChild(self._headerStatusDot);
     self._headerStatusText = document.createTextNode(self.config.online ? str.online : str.offline);
     statusLine.appendChild(self._headerStatusText);
-    headerLeft.appendChild(statusLine);
+    headerInfo.appendChild(statusLine);
 
-    var closeBtn = _el('button', { className: 'wakz-close', 'aria-label': str.closeChat });
-    closeBtn.innerHTML = _ICONS.close;
-    headerLeft.appendChild(closeBtn);
+    headerLeft.appendChild(headerInfo);
     headerEl.appendChild(headerLeft);
 
+    var closeBtn = _el('button', { className: 'wakz-close', 'aria-label': str.closeChat });
+    closeBtn.innerHTML = _ICONS.close;
+    headerEl.appendChild(closeBtn);
     self._chatWindow.appendChild(headerEl);
 
     /* ── Messages Container ── */
@@ -958,11 +894,6 @@
       self.toggleChat(false);
     });
 
-    /* Overlay backdrop click to close */
-    self._overlayEl.addEventListener('click', function () {
-      self.toggleChat(false);
-    });
-
     /* Send button click */
     self._sendBtn.addEventListener('click', function () {
       self._handleSend();
@@ -1011,9 +942,6 @@
     self.isOpen = open;
     if (open) {
       self._chatWindow.classList.add('wakz-visible');
-      self._overlayEl.classList.add('wakz-visible');
-      /* Hide FAB when chat is open */
-      self._toggleBtn.classList.add('wakz-fab-hidden');
       /* Fetch history on first open (after config is loaded) */
       if (self._configLoaded && !self._hasFetchedHistory) {
         self._fetchHistory();
@@ -1027,9 +955,6 @@
       setTimeout(function () { self._inputEl.focus(); }, 320);
     } else {
       self._chatWindow.classList.remove('wakz-visible');
-      self._overlayEl.classList.remove('wakz-visible');
-      /* Show FAB when chat is closed */
-      self._toggleBtn.classList.remove('wakz-fab-hidden');
       /* Stop polling when chat is closed */
       self._stopPolling();
     }
@@ -1056,9 +981,6 @@
     .then(function (data) {
       if (data && data.success && data.config) {
         self.config = Object.assign({}, _DEFAULTS, data.config);
-        /* Apply script-level overrides */
-        if (self._scriptIconColor) self.config.iconColor = self._scriptIconColor;
-        if (self._scriptIconShape) self.config.iconShape = self._scriptIconShape;
         self._configLoaded = true;
         self._applyConfig();
       } else {
@@ -1098,13 +1020,11 @@
     var str = _strings(cfg.language);
     var isRtl = cfg.language === 'ar';
     var posClass = cfg.position === 'bottom-left' ? 'bl' : 'br';
-    var iconColor = cfg.iconColor || '#171717';
-    var iconShape = cfg.iconShape || 'circle';
 
     /* ── Update CSS custom properties ── */
     var hostStyle = self._shadow.host.style;
     hostStyle.setProperty('--wakz-primary', cfg.primaryColor);
-    hostStyle.setProperty('--wakz-icon-color', iconColor);
+    hostStyle.setProperty('--wakz-btn', cfg.btnColor);
     hostStyle.setProperty('--wakz-chat-bg', cfg.chatBg);
     hostStyle.setProperty('--wakz-widget-bg', cfg.widgetBg);
 
@@ -1113,19 +1033,19 @@
     else self._root.classList.remove('wakz-rtl');
 
     /* ── FAB ── */
-    var fabClasses = 'wakz-fab wakz-fab-pos-' + posClass + ' wakz-fab-enter';
-    if (iconShape === 'rounded') fabClasses += ' wakz-fab-shape-rounded';
-    if (self.isOpen) fabClasses += ' wakz-fab-hidden';
-    self._toggleBtn.className = fabClasses;
-    self._toggleBtn.style.background = iconColor;
+    self._toggleBtn.className = 'wakz-fab wakz-fab-pos-' + posClass + ' wakz-fab-enter';
     self._toggleBtn.setAttribute('aria-label', str.openChat);
 
     /* ── FAB Status Dot ── */
     self._statusDot.className = 'wakz-fab-dot ' + (cfg.online ? 'online' : 'offline');
     self._statusDot.style.display = cfg.showStatus ? '' : 'none';
 
-    /* ── Window ── */
-    self._chatWindow.className = 'wakz-window' + (self.isOpen ? ' wakz-visible' : '');
+    /* ── Window Position ── */
+    self._chatWindow.className = 'wakz-window wakz-win-pos-' + posClass + (self.isOpen ? ' wakz-visible' : '');
+
+    /* ── Header ── */
+    var headerEl = self._chatWindow.querySelector('.wakz-hdr');
+    if (headerEl) headerEl.style.background = cfg.primaryColor;
 
     /* ── Bot Name & Avatar ── */
     var nameEl = self._chatWindow.querySelector('.wakz-hdr-name');
@@ -1227,6 +1147,8 @@
   WAKZWidget.prototype._pollForNewMessages = function () {
     var self = this;
     if (!self.server || !self.apiKey || !self._lastPollTime) return;
+    /* Skip polling while waiting for our own reply — prevents race condition duplicates */
+    if (self._pendingReply) return;
 
     var url = self.server + '/api/v1/embed/chat?api_key=' +
       encodeURIComponent(self.apiKey) +
@@ -1273,7 +1195,7 @@
   };
 
   /* ════════════════════════════════════════════════════════════════
-     APPEND WELCOME MESSAGE (bot style — no bubble, flat on bg)
+     APPEND WELCOME MESSAGE (with bot avatar)
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._appendWelcomeMessage = function (text) {
@@ -1283,13 +1205,13 @@
     var wrap = _el('div', { className: 'wakz-welcome-wrap' });
 
     /* Bot avatar */
-    var avatar = _el('div', { className: 'wakz-msg-bot-avatar' },
+    var avatar = _el('div', { className: 'wakz-welcome-avatar' },
       [(self.config.botName || 'W')[0].toUpperCase()]);
     wrap.appendChild(avatar);
 
-    /* Flat content with accent border */
-    var content = _el('div', { className: 'wakz-msg-bot-content' }, [text]);
-    wrap.appendChild(content);
+    /* Bubble */
+    var bubble = _el('div', { className: 'wakz-bubble bot' }, [text]);
+    wrap.appendChild(bubble);
 
     self._messagesContainer.appendChild(wrap);
     self.messages.push({ sender: 'bot', text: text });
@@ -1303,30 +1225,41 @@
   WAKZWidget.prototype._appendMessage = function (sender, text, isError, timestamp, isHumanAgent) {
     var self = this;
 
-    if (sender === 'user') {
-      /* ── User message: rounded bubble ── */
-      var row = _el('div', { className: 'wakz-msg-row user' });
-      var bubble = _el('div', { className: 'wakz-bubble-user' });
-      bubble.appendChild(document.createTextNode(text));
+    var row = _el('div', { className: 'wakz-msg-row ' + sender });
 
-      /* Timestamp */
-      var tsText = self._formatTime(timestamp);
-      bubble.appendChild(_el('span', { className: 'wakz-ts' }, [tsText]));
+    var bubbleClass = 'wakz-bubble ' + sender;
+    if (isError) bubbleClass += ' error-bubble';
+    var bubble = _el('div', { className: bubbleClass });
 
-      row.appendChild(bubble);
-      self._messagesContainer.appendChild(row);
-      self.messages.push({ sender: sender, text: text, isError: !!isError });
-      self._scrollToBottom();
-      return;
+    bubble.appendChild(document.createTextNode(text));
+
+    /* Timestamp */
+    var tsText = '';
+    if (timestamp) {
+      try {
+        var d = new Date(timestamp);
+        if (!isNaN(d.getTime())) {
+          tsText = d.getHours().toString().padStart(2, '0') + ':' +
+                   d.getMinutes().toString().padStart(2, '0');
+        }
+      } catch (e) { /* ignore */ }
     }
+    if (!tsText) {
+      var now = new Date();
+      tsText = now.getHours().toString().padStart(2, '0') + ':' +
+               now.getMinutes().toString().padStart(2, '0');
+    }
+    bubble.appendChild(_el('span', { className: 'wakz-ts' }, [tsText]));
 
-    if (isError) {
-      /* ── Error message: red-tinted bubble ── */
-      var errRow = _el('div', { className: 'wakz-msg-row bot' });
-      var errBubble = _el('div', { className: 'wakz-bubble-error' });
-      errBubble.appendChild(document.createTextNode(text));
+    /* Human agent badge — visual distinction for admin replies */
+    if (isHumanAgent) {
+      var iStr = _strings(self.config.language);
+      var badge = _el('span', { className: 'wakz-human-badge' }, [iStr.humanBadge || '👤 فريق الدعم']);
+      bubble.appendChild(badge);
+    }
 
-      /* Retry button for errors */
+    /* Retry button for errors */
+    if (isError) {
       var str = _strings(self.config.language);
       var retryBtn = _el('button', { className: 'wakz-retry' }, [
         _ICONS.error + ' ' + str.retry
@@ -1352,71 +1285,19 @@
           }
           if (lastUserMsg) self._sendToAPI(lastUserMsg);
         });
-      })(errRow);
-      errBubble.appendChild(retryBtn);
-
-      errRow.appendChild(errBubble);
-      self._messagesContainer.appendChild(errRow);
-      self.messages.push({ sender: sender, text: text, isError: true });
-      self._scrollToBottom();
-      return;
+      })(row);
+      bubble.appendChild(retryBtn);
     }
 
-    /* ── Bot / Support message: flat on bg with accent border ── */
-    var botRow = _el('div', { className: 'wakz-msg-row bot' });
-    var wrap = _el('div', { className: 'wakz-msg-bot-wrap' });
+    row.appendChild(bubble);
+    self._messagesContainer.appendChild(row);
 
-    /* Small bot avatar */
-    var avatar = _el('div', { className: 'wakz-msg-bot-avatar' },
-      [(self.config.botName || 'W')[0].toUpperCase()]);
-    wrap.appendChild(avatar);
-
-    /* Flat content */
-    var contentClass = 'wakz-msg-bot-content';
-    if (isHumanAgent) contentClass += ' wakz-human';
-    var content = _el('div', { className: contentClass });
-    content.appendChild(document.createTextNode(text));
-
-    /* Timestamp */
-    var botTs = self._formatTime(timestamp);
-    content.appendChild(_el('span', { className: 'wakz-ts' }, [botTs]));
-
-    /* Human agent badge */
-    if (isHumanAgent) {
-      var iStr = _strings(self.config.language);
-      var badge = _el('span', { className: 'wakz-human-badge' }, [iStr.humanBadge || '👤 فريق الدعم']);
-      content.appendChild(badge);
-    }
-
-    wrap.appendChild(content);
-    botRow.appendChild(wrap);
-    self._messagesContainer.appendChild(botRow);
-
-    self.messages.push({ sender: sender, text: text, isError: false, isHumanAgent: !!isHumanAgent });
+    self.messages.push({ sender: sender, text: text, isError: !!isError });
     self._scrollToBottom();
   };
 
   /* ════════════════════════════════════════════════════════════════
-     FORMAT TIME
-     ════════════════════════════════════════════════════════════════ */
-
-  WAKZWidget.prototype._formatTime = function (timestamp) {
-    if (timestamp) {
-      try {
-        var d = new Date(timestamp);
-        if (!isNaN(d.getTime())) {
-          return d.getHours().toString().padStart(2, '0') + ':' +
-                 d.getMinutes().toString().padStart(2, '0');
-        }
-      } catch (e) { /* ignore */ }
-    }
-    var now = new Date();
-    return now.getHours().toString().padStart(2, '0') + ':' +
-           now.getMinutes().toString().padStart(2, '0');
-  };
-
-  /* ════════════════════════════════════════════════════════════════
-     TYPING INDICATOR (no bubble — on background)
+     TYPING INDICATOR
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._showTyping = function () {
@@ -1491,6 +1372,10 @@
     self._sendBtn.disabled = true;
     self._showTyping();
 
+    /* Freeze poll time BEFORE sending — prevents polling from fetching our own messages */
+    self._lastPollTime = new Date().toISOString();
+    self._pendingReply = true;
+
     var payload = {
       api_key: self.apiKey,
       visitor_id: self.visitorId,
@@ -1499,7 +1384,10 @@
         domain: window.location.hostname || '',
         page_url: window.location.href || '',
         user_agent: navigator.userAgent || '',
-        language: navigator.language || ''
+        language: navigator.language || '',
+        device_model: self._deviceInfo.device_model || '',
+        device_platform: self._deviceInfo.device_platform || '',
+        device_type: self._deviceInfo.device_type || 'desktop'
       }
     };
 
@@ -1514,19 +1402,23 @@
     .then(function (res) { return res.json(); })
     .then(function (data) {
       self._hideTyping();
+      self._pendingReply = false;
       if (data && data.success && data.reply) {
         self._appendMessage('bot', data.reply);
       } else {
         self._appendMessage('bot', _strings(self.config.language).errorMsg, true);
       }
-      /* Update poll time to prevent re-fetching messages we already displayed */
-      self._lastPollTime = new Date().toISOString();
+      /* Advance poll time past any messages created during this request */
+      self._lastPollTime = (data && data.timestamp)
+        ? new Date(new Date(data.timestamp).getTime() + 1000).toISOString()
+        : new Date(Date.now() + 1000).toISOString();
     })
     .catch(function () {
       self._hideTyping();
+      self._pendingReply = false;
       self._appendMessage('bot', _strings(self.config.language).errorMsg, true);
-      /* Update poll time even on error to prevent re-fetching */
-      self._lastPollTime = new Date().toISOString();
+      /* Advance poll time even on error */
+      self._lastPollTime = new Date(Date.now() + 1000).toISOString();
     })
     .finally(function () {
       self.isLoading = false;