@wakz/chat-widget 1.0.0

package/index.js

@@ -0,0 +1,1936 @@
+/**
+ * WAKZ Chat Widget v4.1.0
+ * ─────────────────────────────────────────────────────────────────
+ * A production-grade, self-contained chat widget using Shadow DOM.
+ * Liquid Glass design — pill header, floating input, dark user bubbles.
+ *
+ * Embed: <script src="/wakz-widget.js" data-api-key="xxx" data-server="https://..." async></script>
+ *
+ * ZERO external dependencies — pure vanilla JavaScript.
+ */
+(function () {
+  'use strict';
+
+  /* ════════════════════════════════════════════════════════════════
+     UTILITY HELPERS
+     ════════════════════════════════════════════════════════════════ */
+
+  /** Generate a UUID v4 compliant string */
+  function _uuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      var r = (Math.random() * 16) | 0;
+      var v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+
+  /** Get or create a persistent visitor ID stored in localStorage */
+  function _getVisitorId() {
+    var KEY = 'wakz_visitor_id';
+    var id = null;
+    try { id = localStorage.getItem(KEY); } catch (e) { /* ignore */ }
+    if (!id) {
+      id = _uuid();
+      try { localStorage.setItem(KEY, id); } catch (e) { /* ignore */ }
+    }
+    return id;
+  }
+
+  /** Locate our own <script> tag and read its data attributes */
+  function _getScriptAttrs() {
+    var scripts = document.querySelectorAll('script[data-api-key]');
+    var target = null;
+    for (var i = 0; i < scripts.length; i++) {
+      var src = scripts[i].getAttribute('src') || '';
+      if (src.indexOf('wakz-widget') !== -1) {
+        target = scripts[i];
+        break;
+      }
+    }
+    if (!target && scripts.length > 0) target = scripts[scripts.length - 1];
+    return {
+      apiKey: (target && target.getAttribute('data-api-key')) || '',
+      server: (target && target.getAttribute('data-server')) || ''
+    };
+  }
+
+  /** Convenience DOM element creator */
+  function _el(tag, attrs, children) {
+    var el = document.createElement(tag);
+    if (attrs) {
+      Object.keys(attrs).forEach(function (k) {
+        var v = attrs[k];
+        if (k === 'className') { el.className = v; }
+        else if (k === 'style' && typeof v === 'object') {
+          Object.keys(v).forEach(function (s) { el.style.setProperty(s, v[s]); });
+        }
+        else if (k.indexOf('on') === 0 && typeof v === 'function') {
+          el.addEventListener(k.slice(2).toLowerCase(), v);
+        }
+        else { el.setAttribute(k, v); }
+      });
+    }
+    if (children) {
+      (Array.isArray(children) ? children : [children]).forEach(function (c) {
+        if (c === null || c === undefined) return;
+        el.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
+      });
+    }
+    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();
+    var merged = Object.assign({}, options, { signal: controller.signal });
+    var timer = setTimeout(function () { controller.abort(); }, timeoutMs || 30000);
+    return fetch(url, merged).finally(function () { clearTimeout(timer); });
+  }
+
+  /** XSS-safe: escape HTML entities */
+  function _escapeHTML(str) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
+  /* ════════════════════════════════════════════════════════════════
+     SVG ICONS (inline for zero-dependency)
+     ════════════════════════════════════════════════════════════════ */
+
+  var _ICONS = {
+    chatBubble:
+      '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+    send:
+      '<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M19 12H5M5 12L11 6M5 12L11 18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    close:
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></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>',
+    message:
+      '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></svg>',
+    whatsapp:
+      '<svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>',
+    headset:
+      '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3ZM3 19a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5"/></svg>'
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     LOCALIZATION STRINGS
+     ════════════════════════════════════════════════════════════════ */
+
+  var _I18N = {
+    ar: {
+      placeholder: 'اكتب رسالتك...',
+      online: 'متصل الآن',
+      offline: 'غير متصل',
+      errorMsg: 'حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.',
+      retry: 'إعادة المحاولة',
+      configError: 'تعذر تحميل إعدادات المحادثة.',
+      openChat: 'فتح المحادثة',
+      closeChat: 'إغلاق المحادثة',
+      sendMessage: 'إرسال',
+      humanBadge: 'فريق الدعم',
+      defaultSubtitle: 'المساعد الذكي'
+    },
+    en: {
+      placeholder: 'Type your message...',
+      online: 'Online',
+      offline: 'Offline',
+      errorMsg: 'Something went wrong. Please try again.',
+      retry: 'Retry',
+      configError: 'Could not load chat settings.',
+      openChat: 'Open chat',
+      closeChat: 'Close chat',
+      sendMessage: 'Send',
+      humanBadge: 'Support Team',
+      defaultSubtitle: 'Smart Assistant'
+    },
+    fr: {
+      placeholder: 'Tapez votre message...',
+      online: 'En ligne',
+      offline: 'Hors ligne',
+      errorMsg: 'Une erreur est survenue. Veuillez réessayer.',
+      retry: 'Réessayer',
+      configError: 'Impossible de charger les paramètres.',
+      openChat: 'Ouvrir le chat',
+      closeChat: 'Fermer le chat',
+      sendMessage: 'Envoyer',
+      humanBadge: 'Équipe de support',
+      defaultSubtitle: 'Assistant intelligent'
+    }
+  };
+
+  function _strings(lang) {
+    return _I18N[lang] || _I18N['en'];
+  }
+
+  /* ════════════════════════════════════════════════════════════════
+     DEFAULT CONFIGURATION
+     ════════════════════════════════════════════════════════════════ */
+
+  var _DEFAULTS = {
+    botName: 'WAKZ',
+    botSubtitle: '',
+    welcomeMessage: '',
+    primaryColor: '#111111',
+    chatBg: '#ffffff',
+    btnColor: '#111111',
+    widgetBg: '#f5f5f5',
+    position: 'bottom-right',
+    language: 'en',
+    showStatus: true,
+    online: true,
+    /* v4.0.1 — Advanced customization */
+    fabShape: 'circle',
+    fabIcon: 'chat',
+    triggerMode: 'manual',
+    triggerDelay: 5,
+    displayMode: 'modal',
+    botBubbleColor: '#ffffff',
+    botTextColor: '#333333',
+    userBubbleColor: '#111111',
+    userTextColor: '#ffffff',
+    headerColor: '',
+    headerTextColor: ''
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     WAKZ WIDGET — MAIN CLASS
+     ════════════════════════════════════════════════════════════════ */
+
+  /** Singleton guard — only one widget per page */
+  if (window.__wakz_widget_initialized) return;
+  window.__wakz_widget_initialized = true;
+
+  function WAKZWidget() {
+    var self = this;
+
+    /* ── Script attributes ── */
+    var attrs = _getScriptAttrs();
+    self.apiKey = attrs.apiKey;
+    self.server = attrs.server;
+    self.visitorId = _getVisitorId();
+    self._deviceInfo = _getDeviceInfo();
+
+    /* ── Runtime state ── */
+    self.config = Object.assign({}, _DEFAULTS);
+    self.isOpen = false;
+    self.isLoading = false;
+    self.messages = [];
+    self._hasFetchedHistory = false;
+    self._typingEl = null;
+    self._configLoaded = false;
+    self._configError = false;
+    self._pollTimer = null;
+    self._lastPollTime = null;
+    self._POLL_INTERVAL = 4000;
+    self._knownMessageIds = {};
+    self._pendingReply = false;
+
+    /* ── DOM refs (populated after mount) ── */
+    self._host = null;
+    self._shadow = null;
+    self._root = null;
+    self._overlay = null;
+    self._chatWindow = null;
+    self._messagesInner = null;
+    self._inputWrap = null;
+    self._inputEl = null;
+    self._sendBtn = null;
+    self._toggleBtn = null;
+    self._statusDot = null;
+    self._headerTitleEl = null;
+    self._headerSubtitleEl = null;
+    self._headerStatusPill = null;
+    self._headerStatusDot = null;
+    self._headerStatusText = null;
+    self._closeBtn = null;
+
+    /* ── Bootstrap ── */
+    self._injectCSS();
+    self._createDOM();
+    self._attachEvents();
+    self._fetchConfig();
+    self._playFabEntrance();
+  }
+
+  /* ════════════════════════════════════════════════════════════════
+     CSS — Complete Liquid Glass design (v4.0.0)
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._injectCSS = function () {
+    var self = this;
+    self._styleEl = _el('style');
+
+    self._styleEl.textContent = [
+      /* ── CSS Custom Properties (theming) ── */
+      ':host {',
+      '  --wakz-primary: #111111;',
+      '  --wakz-btn: #111111;',
+      '  --wakz-chat-bg: #ffffff;',
+      '  --wakz-widget-bg: #ffffff;',
+      '  all: initial;',
+      '  font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;',
+      '}',
+
+      /* ── Reset ── */
+      '.wakz *, .wakz *::before, .wakz *::after {',
+      '  box-sizing: border-box;',
+      '  margin: 0;',
+      '  padding: 0;',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         ANIMATIONS
+         ══════════════════════════════════════════════════ */
+      '@keyframes wakz-fade-slide-up {',
+      '  from { opacity: 0; transform: translateY(6px); }',
+      '  to   { opacity: 1; transform: translateY(0); }',
+      '}',
+
+      '@keyframes wakz-typing-bounce {',
+      '  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }',
+      '  30%            { transform: translateY(-4px); opacity: 1; }',
+      '}',
+
+      '@keyframes wakz-pulse-green {',
+      '  0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }',
+      '  50%      { box-shadow: 0 0 0 4px rgba(34,197,94,0.08); }',
+      '}',
+
+      '@keyframes wakz-fab-enter {',
+      '  0%   { opacity: 0; transform: scale(0.3); }',
+      '  50%  { opacity: 1; transform: scale(1.12); }',
+      '  70%  { transform: scale(0.92); }',
+      '  100% { transform: scale(1); }',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         FLOATING ACTION BUTTON (FAB) — 56px black circle
+         ══════════════════════════════════════════════════ */
+      '.wakz-fab {',
+      '  position: fixed;',
+      '  z-index: 2147483647;',
+      '  width: 56px;',
+      '  height: 56px;',
+      '  border-radius: 50%;',
+      '  border: none;',
+      '  cursor: pointer;',
+      '  display: flex;',
+      '  align-items: center;',
+      '  justify-content: center;',
+      '  color: #ffffff;',
+      '  background: var(--wakz-btn);',
+      '  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 1px 6px rgba(0,0,0,0.12);',
+      '  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);',
+      '  outline: none;',
+      '  -webkit-tap-highlight-color: transparent;',
+      '}',
+      '.wakz-fab:hover {',
+      '  transform: scale(1.1);',
+      '  box-shadow: 0 6px 28px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);',
+      '}',
+      '.wakz-fab:active { transform: scale(0.93); }',
+      '.wakz-fab svg { width: 26px; height: 26px; color: #fff; pointer-events: none; }',
+
+      /* ── FAB Positioning ── */
+      '.wakz-fab-pos-br { bottom: 24px; right: 24px; }',
+      '.wakz-fab-pos-bl { bottom: 24px; left: 24px; }',
+
+      /* ── Hide FAB when chat is open ── */
+      '.wakz-window.wakz-visible ~ .wakz-fab,',
+      '.wakz-fab.wakz-fab-hidden {',
+      '  display: none !important;',
+      '}',
+
+      /* ── FAB Entrance Bounce ── */
+      '.wakz-fab-enter {',
+      '  animation: wakz-fab-enter 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         STATUS DOT (on FAB) — 10px, top-right
+         ══════════════════════════════════════════════════ */
+      '.wakz-fab-dot {',
+      '  position: absolute;',
+      '  top: -1px;',
+      '  right: -1px;',
+      '  width: 10px;',
+      '  height: 10px;',
+      '  border-radius: 50%;',
+      '  border: 2px solid #ffffff;',
+      '  z-index: 2;',
+      '  transition: background 0.3s ease;',
+      '}',
+      '.wakz-fab-pos-bl .wakz-fab-dot { right: auto; left: -1px; }',
+      '.wakz-fab-dot.online {',
+      '  background: #22c55e;',
+      '  animation: wakz-pulse-green 2.5s ease-in-out infinite;',
+      '}',
+      '.wakz-fab-dot.offline {',
+      '  background: #ef4444;',
+      '  animation: none;',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         OVERLAY / BACKDROP — blur behind modal
+         ══════════════════════════════════════════════════ */
+      '.wakz-overlay {',
+      '  position: fixed;',
+      '  inset: 0;',
+      '  z-index: 2147483645;',
+      '  background: rgba(0,0,0,0.25);',
+      '  backdrop-filter: blur(4px);',
+      '  -webkit-backdrop-filter: blur(4px);',
+      '  opacity: 0;',
+      '  pointer-events: none;',
+      '  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);',
+      '}',
+      '.wakz-overlay.wakz-visible {',
+      '  opacity: 1;',
+      '  pointer-events: auto;',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         CHAT WINDOW — Centered, 420x560, 24px radius
+         ══════════════════════════════════════════════════ */
+      '.wakz-window {',
+      '  position: fixed;',
+      '  z-index: 2147483646;',
+      '  top: 50%;',
+      '  left: 50%;',
+      '  transform: translate(-50%, -50%) scale(0.95);',
+      '  width: 420px;',
+      '  height: 560px;',
+      '  max-width: calc(100vw - 24px);',
+      '  max-height: calc(100vh - 24px);',
+      '  border-radius: 24px;',
+      '  overflow: hidden;',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  background: var(--wakz-widget-bg);',
+      '  box-shadow:',
+      '    0 0 0 0.5px rgba(0,0,0,0.06),',
+      '    0 8px 40px rgba(0,0,0,0.08),',
+      '    0 2px 12px rgba(0,0,0,0.04);',
+      '  opacity: 0;',
+      '  pointer-events: none;',
+      '  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);',
+      '  pointer-events: auto;',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         FLOATING HEADER WRAP — absolute over messages
+         ══════════════════════════════════════════════════ */
+      '.wakz-header-wrap {',
+      '  position: absolute;',
+      '  top: 12px;',
+      '  right: 12px;',
+      '  left: 12px;',
+      '  z-index: 100;',
+      '  pointer-events: none;',
+      '}',
+
+      /* ── HEADER — Liquid Glass Pill ── */
+      '.wakz-header {',
+      '  pointer-events: all;',
+      '  display: flex;',
+      '  align-items: center;',
+      '  justify-content: space-between;',
+      '  position: relative;',
+      '  overflow: hidden;',
+      '  backdrop-filter: blur(40px) saturate(180%) brightness(102%);',
+      '  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(102%);',
+      '  background: rgba(255,255,255,0.82);',
+      '  border: 0.5px solid rgba(255,255,255,0.7);',
+      '  border-radius: 9999px;',
+      '  box-shadow:',
+      '    inset 0 1px 0 0 rgba(255,255,255,0.9),',
+      '    inset 0 -1px 0 0 rgba(0,0,0,0.04),',
+      '    0 0 0 0.5px rgba(0,0,0,0.06),',
+      '    0 8px 32px rgba(0,0,0,0.08),',
+      '    0 2px 8px rgba(0,0,0,0.04);',
+      '  padding: 8px 8px 8px 12px;',
+      '  gap: 12px;',
+      '}',
+
+      /* ── Specular Highlight (real DOM element, not ::before) ── */
+      '.wakz-specular {',
+      '  position: absolute;',
+      '  top: 0;',
+      '  left: 15%;',
+      '  right: 15%;',
+      '  height: 1px;',
+      '  background: linear-gradient(',
+      '    90deg,',
+      '    transparent,',
+      '    rgba(255,255,255,0.6) 20%,',
+      '    rgba(255,255,255,0.95) 50%,',
+      '    rgba(255,255,255,0.6) 80%,',
+      '    transparent',
+      '  );',
+      '  border-radius: inherit;',
+      '  pointer-events: none;',
+      '  z-index: 1;',
+      '}',
+
+      /* ── Brand (right side in RTL) ── */
+      '.wakz-hdr-brand {',
+      '  display: flex;',
+      '  align-items: center;',
+      '  flex-shrink: 0;',
+      '  padding: 0 6px;',
+      '}',
+      '.wakz-hdr-info {',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  gap: 1px;',
+      '}',
+      '.wakz-hdr-title {',
+      '  font-size: 15px;',
+      '  font-weight: 900;',
+      '  color: #0a0a0a;',
+      '  letter-spacing: -0.2px;',
+      '  line-height: 1.2;',
+      '  font-family: "Cairo", sans-serif;',
+      '}',
+      '.wakz-hdr-subtitle {',
+      '  font-size: 11px;',
+      '  font-weight: 500;',
+      '  color: #999;',
+      '  line-height: 1.2;',
+      '  font-family: "Tajawal", "Cairo", sans-serif;',
+      '}',
+
+      /* ── Actions (left side in RTL) ── */
+      '.wakz-hdr-actions {',
+      '  display: flex;',
+      '  align-items: center;',
+      '  gap: 8px;',
+      '  flex-shrink: 0;',
+      '}',
+
+      /* ── Status Pill ── */
+      '.wakz-status-pill {',
+      '  display: inline-flex;',
+      '  align-items: center;',
+      '  gap: 5px;',
+      '  padding: 4px 10px;',
+      '  border-radius: 50px;',
+      '  font-size: 11px;',
+      '  font-weight: 600;',
+      '  font-family: "Cairo", sans-serif;',
+      '  white-space: nowrap;',
+      '  transition: all 0.3s ease;',
+      '}',
+      '.wakz-status-pill--online {',
+      '  background: rgba(34,197,94,0.08);',
+      '  color: #16a34a;',
+      '  border: 1px solid rgba(34,197,94,0.15);',
+      '}',
+      '.wakz-status-pill--offline {',
+      '  background: rgba(156,163,175,0.1);',
+      '  color: #6b7280;',
+      '  border: 1px solid rgba(156,163,175,0.15);',
+      '}',
+
+      /* ── Status Dot inside pill (6px) ── */
+      '.wakz-status-dot {',
+      '  width: 6px;',
+      '  height: 6px;',
+      '  border-radius: 50%;',
+      '  flex-shrink: 0;',
+      '}',
+      '.wakz-status-pill--online .wakz-status-dot {',
+      '  background: #22c55e;',
+      '  animation: wakz-pulse-green 2.5s ease-in-out infinite;',
+      '}',
+      '.wakz-status-pill--offline .wakz-status-dot {',
+      '  background: #9ca3af;',
+      '}',
+
+      /* ── Close Button (glass circle) ── */
+      '.wakz-close {',
+      '  width: 30px;',
+      '  height: 30px;',
+      '  min-width: 30px;',
+      '  min-height: 30px;',
+      '  border-radius: 50%;',
+      '  border: none;',
+      '  cursor: pointer;',
+      '  display: flex;',
+      '  align-items: center;',
+      '  justify-content: center;',
+      '  color: #888;',
+      '  position: relative;',
+      '  overflow: hidden;',
+      '  backdrop-filter: blur(20px) saturate(180%);',
+      '  -webkit-backdrop-filter: blur(20px) saturate(180%);',
+      '  background: rgba(255,255,255,0.6);',
+      '  border: 0.5px solid rgba(255,255,255,0.6);',
+      '  box-shadow:',
+      '    inset 0 1px 0 0 rgba(255,255,255,0.8),',
+      '    0 1px 4px rgba(0,0,0,0.04);',
+      '  transition: all 0.2s cubic-bezier(0.22,1,0.36,1);',
+      '  outline: none;',
+      '}',
+      '.wakz-close:hover {',
+      '  background: rgba(255,80,80,0.08);',
+      '  color: #ef4444;',
+      '  transform: scale(1.1);',
+      '  box-shadow:',
+      '    inset 0 1px 0 0 rgba(255,255,255,0.8),',
+      '    0 2px 8px rgba(239,68,68,0.1);',
+      '}',
+      '.wakz-close:active { transform: scale(0.92); }',
+      '.wakz-close svg { width: 14px; height: 14px; }',
+
+      /* ══════════════════════════════════════════════════
+         MESSAGES AREA — scrollable
+         ══════════════════════════════════════════════════ */
+      '.wakz-msgs {',
+      '  flex: 1;',
+      '  overflow-y: auto;',
+      '  overflow-x: hidden;',
+      '  padding: 0;',
+      '  background: var(--wakz-chat-bg);',
+      '  padding-top: 76px;',
+      '  padding-bottom: 100px;',
+      '  padding-right: 14px;',
+      '  padding-left: 14px;',
+      '  scroll-behavior: smooth;',
+      '  position: relative;',
+      '}',
+      '.wakz-msgs::-webkit-scrollbar { width: 3px; }',
+      '.wakz-msgs::-webkit-scrollbar-track { background: transparent; }',
+      '.wakz-msgs::-webkit-scrollbar-thumb {',
+      '  background: rgba(0,0,0,0.08);',
+      '  border-radius: 99px;',
+      '}',
+
+      '.wakz-msgs-inner {',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  gap: 6px;',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         MESSAGE ROWS
+         ══════════════════════════════════════════════════ */
+      '.wakz-msg-row {',
+      '  display: flex;',
+      '  align-items: flex-end;',
+      '  width: 100%;',
+      '  animation: wakz-fade-slide-up 0.3s cubic-bezier(0.22,1,0.36,1) both;',
+      '}',
+
+      /* ── USER MESSAGE — dark bubble ── */
+      '.wakz-msg-row--user { justify-content: flex-end; }',
+      '.wakz-user-card {',
+      '  max-width: 78%;',
+      '  padding: 10px 14px 8px;',
+      '  background: var(--wakz-user-bubble);',
+      '  color: var(--wakz-user-text);',
+      '  border-radius: 18px 18px 5px 18px;',
+      '  box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);',
+      '}',
+      '.wakz-user-text {',
+      '  font-size: 13.5px;',
+      '  font-weight: 400;',
+      '  line-height: 1.7;',
+      '  white-space: pre-wrap;',
+      '  word-break: break-word;',
+      '  text-align: right;',
+      '  font-family: "Tajawal", "Cairo", sans-serif;',
+      '}',
+      '.wakz-user-time {',
+      '  font-size: 9.5px;',
+      '  color: var(--wakz-user-text);',
+      '  opacity: 0.4;',
+      '  display: block;',
+      '  margin-top: 4px;',
+      '  text-align: left;',
+      '  font-family: "Tajawal", sans-serif;',
+      '}',
+
+      /* ── BOT MESSAGE — no bubble, on background ── */
+      '.wakz-msg-row--bot { justify-content: flex-start; }',
+      '.wakz-bot-content {',
+      '  max-width: 78%;',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  align-items: flex-end;',
+      '  gap: 1px;',
+      '  padding: 6px 8px;',
+      '  border-radius: 16px;',
+      '  background: var(--wakz-bot-bubble);',
+      '}',
+      '.wakz-bot-label {',
+      '  font-size: 10px;',
+      '  font-weight: 700;',
+      '  color: #aaa;',
+      '  letter-spacing: 0.1px;',
+      '  padding: 0 4px;',
+      '  font-family: "Cairo", sans-serif;',
+      '}',
+      '.wakz-bot-text {',
+      '  font-size: 13.5px;',
+      '  font-weight: 400;',
+      '  line-height: 1.75;',
+      '  color: var(--wakz-bot-text);',
+      '  white-space: pre-wrap;',
+      '  word-break: break-word;',
+      '  text-align: right;',
+      '  font-family: "Tajawal", "Cairo", sans-serif;',
+      '  padding: 0 4px;',
+      '}',
+      '.wakz-bot-time {',
+      '  font-size: 9.5px;',
+      '  color: #cccccc;',
+      '  display: block;',
+      '  margin-top: 1px;',
+      '  text-align: left;',
+      '  padding-left: 4px;',
+      '  font-family: "Tajawal", sans-serif;',
+      '}',
+
+      /* ── SUPPORT MESSAGE — green accent ── */
+      '.wakz-msg-row--support { justify-content: flex-start; }',
+      '.wakz-support-content {',
+      '  max-width: 78%;',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  align-items: flex-end;',
+      '  gap: 1px;',
+      '  border-right: 2.5px solid #22c55e;',
+      '  padding-right: 10px;',
+      '}',
+      '.wakz-support-label {',
+      '  font-size: 10px;',
+      '  font-weight: 700;',
+      '  color: #16a34a;',
+      '  letter-spacing: 0.1px;',
+      '  padding: 0 4px;',
+      '  font-family: "Cairo", sans-serif;',
+      '  display: flex;',
+      '  align-items: center;',
+      '  gap: 4px;',
+      '}',
+      '.wakz-support-label-dot {',
+      '  width: 4px;',
+      '  height: 4px;',
+      '  border-radius: 50%;',
+      '  background: #22c55e;',
+      '  flex-shrink: 0;',
+      '}',
+      '.wakz-support-text {',
+      '  font-size: 13.5px;',
+      '  font-weight: 400;',
+      '  line-height: 1.75;',
+      '  color: #333333;',
+      '  white-space: pre-wrap;',
+      '  word-break: break-word;',
+      '  text-align: right;',
+      '  font-family: "Tajawal", "Cairo", sans-serif;',
+      '  padding: 0 4px;',
+      '}',
+      '.wakz-support-time {',
+      '  font-size: 9.5px;',
+      '  color: #cccccc;',
+      '  display: block;',
+      '  margin-top: 1px;',
+      '  text-align: left;',
+      '  padding-left: 4px;',
+      '  font-family: "Tajawal", sans-serif;',
+      '}',
+
+      /* ── Error Messages ── */
+      '.wakz-error-bubble {',
+      '  max-width: 78%;',
+      '  padding: 10px 14px;',
+      '  font-size: 13.5px;',
+      '  line-height: 1.6;',
+      '  white-space: pre-wrap;',
+      '  word-break: break-word;',
+      '  border-radius: 14px;',
+      '  border-bottom-left-radius: 4px;',
+      '  background: #FEF2F2;',
+      '  color: #DC2626;',
+      '  border: 1px solid #FECACA;',
+      '  font-family: "Tajawal", "Cairo", sans-serif;',
+      '}',
+
+      /* ── Retry Button ── */
+      '.wakz-retry {',
+      '  display: inline-flex;',
+      '  align-items: center;',
+      '  gap: 4px;',
+      '  margin-top: 8px;',
+      '  padding: 5px 14px;',
+      '  font-size: 12px;',
+      '  font-weight: 500;',
+      '  border-radius: 20px;',
+      '  border: 1px solid #fca5a5;',
+      '  background: #ffffff;',
+      '  color: #dc2626;',
+      '  cursor: pointer;',
+      '  font-family: "Cairo", "Tajawal", sans-serif;',
+      '  transition: background 0.2s ease, border-color 0.2s ease;',
+      '  outline: none;',
+      '}',
+      '.wakz-retry:hover { background: #fef2f2; border-color: #f87171; }',
+
+      /* ══════════════════════════════════════════════════
+         TYPING INDICATOR
+         ══════════════════════════════════════════════════ */
+      '.wakz-typing-row {',
+      '  display: flex;',
+      '  align-items: flex-end;',
+      '  justify-content: flex-start;',
+      '  width: 100%;',
+      '  animation: wakz-fade-slide-up 0.25s ease both;',
+      '}',
+      '.wakz-typing-content {',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  align-items: flex-end;',
+      '  gap: 3px;',
+      '}',
+      '.wakz-typing-label {',
+      '  font-size: 10px;',
+      '  font-weight: 700;',
+      '  color: #aaa;',
+      '  padding: 0 4px;',
+      '  font-family: "Cairo", sans-serif;',
+      '}',
+      '.wakz-typing-dots {',
+      '  display: flex;',
+      '  align-items: center;',
+      '  gap: 4px;',
+      '  padding: 8px 12px;',
+      '}',
+      '.wakz-typing-dots span {',
+      '  width: 6px;',
+      '  height: 6px;',
+      '  border-radius: 50%;',
+      '  background: #bbb;',
+      '  animation: wakz-typing-bounce 1.4s ease-in-out infinite;',
+      '}',
+      '.wakz-typing-dots span:nth-child(1) { animation-delay: 0s; }',
+      '.wakz-typing-dots span:nth-child(2) { animation-delay: 0.18s; }',
+      '.wakz-typing-dots span:nth-child(3) { animation-delay: 0.36s; }',
+
+      /* ══════════════════════════════════════════════════
+         FLOATING INPUT WRAP — absolute bottom
+         ══════════════════════════════════════════════════ */
+      '.wakz-input-wrap {',
+      '  position: absolute;',
+      '  bottom: 12px;',
+      '  right: 12px;',
+      '  left: 12px;',
+      '  z-index: 100;',
+      '  pointer-events: none;',
+      '}',
+      '.wakz-input-row {',
+      '  pointer-events: all;',
+      '  width: 100%;',
+      '  display: flex;',
+      '  align-items: center;',
+      '  gap: 8px;',
+      '}',
+
+      /* ── Input Glass Pill ── */
+      '.wakz-input-glass {',
+      '  flex: 1;',
+      '  display: flex;',
+      '  align-items: center;',
+      '  position: relative;',
+      '  overflow: hidden;',
+      '  backdrop-filter: blur(40px) saturate(180%) brightness(102%);',
+      '  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(102%);',
+      '  background: rgba(255,255,255,0.85);',
+      '  border: 0.5px solid rgba(255,255,255,0.7);',
+      '  border-radius: 9999px;',
+      '  box-shadow:',
+      '    inset 0 1px 0 0 rgba(255,255,255,0.9),',
+      '    inset 0 -1px 0 0 rgba(0,0,0,0.04),',
+      '    0 0 0 0.5px rgba(0,0,0,0.06),',
+      '    0 8px 32px rgba(0,0,0,0.08),',
+      '    0 2px 8px rgba(0,0,0,0.04);',
+      '  padding: 8px 16px;',
+      '}',
+
+      /* ── Input specular highlight ── */
+      '.wakz-input-specular {',
+      '  position: absolute;',
+      '  top: 0;',
+      '  left: 10%;',
+      '  right: 10%;',
+      '  height: 1px;',
+      '  background: linear-gradient(',
+      '    90deg,',
+      '    transparent,',
+      '    rgba(255,255,255,0.5) 20%,',
+      '    rgba(255,255,255,0.8) 50%,',
+      '    rgba(255,255,255,0.5) 80%,',
+      '    transparent',
+      '  );',
+      '  border-radius: inherit;',
+      '  pointer-events: none;',
+      '  z-index: 1;',
+      '}',
+
+      /* ── Textarea ── */
+      '.wakz-input {',
+      '  flex: 1;',
+      '  resize: none;',
+      '  border: none;',
+      '  outline: none;',
+      '  background: transparent;',
+      '  font-family: "Tajawal", "Cairo", sans-serif;',
+      '  font-size: 13.5px;',
+      '  font-weight: 400;',
+      '  color: #111;',
+      '  line-height: 1.5;',
+      '  padding: 1px 4px;',
+      '  max-height: 48px;',
+      '  overflow-y: auto;',
+      '  align-self: center;',
+      '}',
+      '.wakz-input::placeholder {',
+      '  color: #bbb;',
+      '  font-weight: 400;',
+      '  font-family: "Cairo", "Tajawal", sans-serif;',
+      '}',
+      '.wakz-input:focus { outline: none; }',
+      '.wakz-input::-webkit-scrollbar { width: 3px; }',
+      '.wakz-input::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 99px; }',
+
+      /* ── Send Button — 40px circle, separate ── */
+      '.wakz-send {',
+      '  flex-shrink: 0;',
+      '  width: 40px;',
+      '  height: 40px;',
+      '  min-width: 40px;',
+      '  min-height: 40px;',
+      '  border-radius: 50%;',
+      '  border: none;',
+      '  cursor: pointer;',
+      '  display: flex;',
+      '  align-items: center;',
+      '  justify-content: center;',
+      '  position: relative;',
+      '  overflow: hidden;',
+      '  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);',
+      '  outline: none;',
+      '  backdrop-filter: blur(40px) saturate(180%) brightness(102%);',
+      '  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(102%);',
+      '  background: rgba(255,255,255,0.82);',
+      '  border: 0.5px solid rgba(255,255,255,0.7);',
+      '  box-shadow:',
+      '    inset 0 1px 0 0 rgba(255,255,255,0.9),',
+      '    inset 0 -1px 0 0 rgba(0,0,0,0.04),',
+      '    0 0 0 0.5px rgba(0,0,0,0.06),',
+      '    0 4px 16px rgba(0,0,0,0.06);',
+      '  color: #bbb;',
+      '}',
+      '.wakz-send:disabled { cursor: default; }',
+      '.wakz-send svg {',
+      '  width: 18px;',
+      '  height: 18px;',
+      '  pointer-events: none;',
+      '}',
+      /* ── Send Active State ── */
+      '.wakz-send--active {',
+      '  background: var(--wakz-primary);',
+      '  border-color: var(--wakz-primary);',
+      '  color: #ffffff;',
+      '  filter: none;',
+      '  backdrop-filter: none;',
+      '  -webkit-backdrop-filter: none;',
+      '  box-shadow: 0 4px 20px rgba(0,0,0,0.22), 0 1px 6px rgba(0,0,0,0.12);',
+      '}',
+      '.wakz-send--active:hover:not(:disabled) {',
+      '  background: var(--wakz-user-bubble);',
+      '  transform: scale(1.08);',
+      '  box-shadow: 0 6px 24px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.14);',
+      '}',
+      '.wakz-send--active:active:not(:disabled) { transform: scale(0.93); }',
+
+      /* ══════════════════════════════════════════════════
+         RTL SUPPORT
+         ══════════════════════════════════════════════════ */
+      '.wakz-rtl { direction: rtl; }',
+      '.wakz-rtl .wakz-user-card {',
+      '  border-radius: 18px 18px 18px 5px;',
+      '}',
+      '.wakz-rtl .wakz-error-bubble {',
+      '  border-bottom-left-radius: 14px;',
+      '  border-bottom-right-radius: 4px;',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         FULLSCREEN MODE — overrides window to fill viewport
+         ══════════════════════════════════════════════════ */
+      '.wakz-mode-fullscreen {',
+      '  width: 100vw !important;',
+      '  height: 100vh !important;',
+      '  max-width: 100vw !important;',
+      '  max-height: 100vh !important;',
+      '  top: 0 !important;',
+      '  left: 0 !important;',
+      '  transform: none !important;',
+      '  border-radius: 0 !important;',
+      '  box-shadow: none !important;',
+      '}',
+      '.wakz-mode-fullscreen.wakz-visible {',
+      '  transform: none !important;',
+      '}',
+      /* Hide overlay in fullscreen mode — not needed */
+      '.wakz-mode-fullscreen ~ .wakz-overlay {',
+      '  display: none !important;',
+      '}',
+
+      /* ══════════════════════════════════════════════════
+         RESPONSIVE
+         ══════════════════════════════════════════════════ */
+      '@media (max-width: 440px) {',
+      '  .wakz-window {',
+      '    width: 100% !important;',
+      '    height: 100% !important;',
+      '    max-width: 100% !important;',
+      '    max-height: 100% !important;',
+      '    border-radius: 0 !important;',
+      '    box-shadow: none !important;',
+      '  }',
+      '}',
+      '@media (max-width: 380px) {',
+      '  .wakz-hdr-title { font-size: 13px; }',
+      '  .wakz-status-pill span:last-child { display: none; }',
+      '  .wakz-status-pill { padding: 4px 8px; }',
+      '  .wakz-send { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }',
+      '  .wakz-close { width: 26px; height: 26px; min-width: 26px; min-height: 26px; }',
+      '}'
+    ].join('\n');
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     DOM CREATION — v4.0.0 Liquid Glass structure
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._createDOM = function () {
+    var self = this;
+    var isRtl = self.config.language === 'ar';
+    var posClass = self.config.position === 'bottom-left' ? 'bl' : 'br';
+    var str = _strings(self.config.language);
+
+    /* ── Host + Shadow DOM ── */
+    self._host = _el('div');
+    document.body.appendChild(self._host);
+    self._shadow = self._host.attachShadow({ mode: 'closed' });
+
+    /* ── Google Fonts link (injected into shadow root) ── */
+    var fontsLink = _el('link', {
+      rel: 'stylesheet',
+      href: 'https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Tajawal:wght@300;400;500;700&display=swap'
+    });
+    self._shadow.appendChild(fontsLink);
+
+    /* ── Root wrapper ── */
+    self._root = _el('div', { className: 'wakz' + (isRtl ? ' wakz-rtl' : '') });
+    self._shadow.appendChild(self._styleEl);
+    self._shadow.appendChild(self._root);
+
+    /* ══════════════ FLOATING ACTION BUTTON (FAB) ══════════════ */
+    self._toggleBtn = _el('button', {
+      className: 'wakz-fab wakz-fab-pos-' + posClass,
+      'aria-label': str.openChat
+    });
+    self._toggleBtn.innerHTML = _ICONS.chatBubble;
+
+    /* Status dot on FAB (10px) */
+    self._statusDot = _el('span', { className: 'wakz-fab-dot ' + (self.config.online ? 'online' : 'offline') });
+    self._statusDot.style.display = self.config.showStatus ? '' : 'none';
+    self._toggleBtn.appendChild(self._statusDot);
+    self._root.appendChild(self._toggleBtn);
+
+    /* ══════════════ OVERLAY / BACKDROP ══════════════ */
+    self._overlay = _el('div', { className: 'wakz-overlay' });
+    self._root.appendChild(self._overlay);
+
+    /* ══════════════ CHAT WINDOW ══════════════ */
+    self._chatWindow = _el('div', { className: 'wakz-window' });
+
+    /* ── Messages Container (with floating header + input inside) ── */
+    self._messagesContainer = _el('div', { className: 'wakz-msgs' });
+
+    /* ══════════════ FLOATING HEADER (pill, absolute over messages) ══════════════ */
+    var headerWrap = _el('div', { className: 'wakz-header-wrap' });
+    self._headerEl = _el('div', { className: 'wakz-header' });
+    var header = self._headerEl;
+
+    /* Specular highlight (real DOM element, not ::before) */
+    header.appendChild(_el('div', { className: 'wakz-specular' }));
+
+    /* Brand side (right in RTL) */
+    var brand = _el('div', { className: 'wakz-hdr-brand' });
+    var info = _el('div', { className: 'wakz-hdr-info' });
+    self._headerTitleEl = _el('span', { className: 'wakz-hdr-title' }, [self.config.botName]);
+    info.appendChild(self._headerTitleEl);
+
+    var subtitleText = self.config.botSubtitle || str.defaultSubtitle || '';
+    self._headerSubtitleEl = _el('span', { className: 'wakz-hdr-subtitle' }, [subtitleText]);
+    info.appendChild(self._headerSubtitleEl);
+
+    brand.appendChild(info);
+    header.appendChild(brand);
+
+    /* Actions side (left in RTL) */
+    var actions = _el('div', { className: 'wakz-hdr-actions' });
+
+    /* Status pill */
+    self._headerStatusPill = _el('div', {
+      className: 'wakz-status-pill ' + (self.config.online ? 'wakz-status-pill--online' : 'wakz-status-pill--offline')
+    });
+    if (self.config.showStatus) {
+      self._headerStatusDot = _el('span', { className: 'wakz-status-dot' });
+      self._headerStatusPill.appendChild(self._headerStatusDot);
+      self._headerStatusText = document.createTextNode(self.config.online ? str.online : str.offline);
+      self._headerStatusPill.appendChild(self._headerStatusText);
+    }
+    actions.appendChild(self._headerStatusPill);
+
+    /* Close button (glass circle) */
+    self._closeBtn = _el('button', { className: 'wakz-close', 'aria-label': str.closeChat });
+    self._closeBtn.innerHTML = _ICONS.close;
+    actions.appendChild(self._closeBtn);
+
+    header.appendChild(actions);
+    headerWrap.appendChild(header);
+    self._messagesContainer.appendChild(headerWrap);
+
+    /* ── Messages inner (scrollable content) ── */
+    self._messagesInner = _el('div', { className: 'wakz-msgs-inner' });
+    self._messagesContainer.appendChild(self._messagesInner);
+
+    /* ══════════════ FLOATING INPUT (pill, absolute bottom) ══════════════ */
+    self._inputWrap = _el('div', { className: 'wakz-input-wrap' });
+    var inputRow = _el('div', { className: 'wakz-input-row' });
+
+    /* Input glass pill */
+    var inputGlass = _el('div', { className: 'wakz-input-glass' });
+
+    /* Specular highlight for input glass */
+    inputGlass.appendChild(_el('div', { className: 'wakz-input-specular' }));
+
+    self._inputEl = _el('textarea', {
+      className: 'wakz-input',
+      placeholder: str.placeholder,
+      rows: 1,
+      dir: isRtl ? 'rtl' : 'ltr'
+    });
+    inputGlass.appendChild(self._inputEl);
+    inputRow.appendChild(inputGlass);
+
+    /* Send button (40px circle, separate from input) */
+    self._sendBtn = _el('button', {
+      className: 'wakz-send',
+      'aria-label': str.sendMessage
+    });
+    self._sendBtn.innerHTML = _ICONS.send;
+    inputRow.appendChild(self._sendBtn);
+
+    self._inputWrap.appendChild(inputRow);
+    self._messagesContainer.appendChild(self._inputWrap);
+
+    self._chatWindow.appendChild(self._messagesContainer);
+    self._root.appendChild(self._chatWindow);
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     EVENT LISTENERS
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._attachEvents = function () {
+    var self = this;
+
+    /* Toggle button click */
+    self._toggleBtn.addEventListener('click', function () {
+      self.toggleChat(!self.isOpen);
+    });
+
+    /* Overlay click to close */
+    self._overlay.addEventListener('click', function () {
+      self.toggleChat(false);
+    });
+
+    /* Close button click */
+    self._closeBtn.addEventListener('click', function () {
+      self.toggleChat(false);
+    });
+
+    /* Send button click */
+    self._sendBtn.addEventListener('click', function () {
+      self._handleSend();
+    });
+
+    /* Enter key to send, Shift+Enter for newline */
+    self._inputEl.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (!self._sendBtn.disabled) self._handleSend();
+      }
+    });
+
+    /* Auto-resize textarea (max 48px) + toggle send active state */
+    self._inputEl.addEventListener('input', function () {
+      self._inputEl.style.height = 'auto';
+      self._inputEl.style.height = Math.min(self._inputEl.scrollHeight, 48) + 'px';
+      var hasText = (self._inputEl.value || '').trim().length > 0;
+      if (hasText) {
+        self._sendBtn.classList.add('wakz-send--active');
+      } else {
+        self._sendBtn.classList.remove('wakz-send--active');
+      }
+    });
+
+    /* Escape to close */
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' && self.isOpen) self.toggleChat(false);
+    });
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     FAB ENTRANCE ANIMATION
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._playFabEntrance = function () {
+    var self = this;
+    self._toggleBtn.style.opacity = '0';
+    setTimeout(function () {
+      self._toggleBtn.style.opacity = '';
+      self._toggleBtn.classList.add('wakz-fab-enter');
+    }, 800);
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     TOGGLE CHAT OPEN / CLOSE
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype.toggleChat = function (open) {
+    var self = this;
+    self.isOpen = open;
+    if (open) {
+      self._chatWindow.classList.add('wakz-visible');
+      self._overlay.classList.add('wakz-visible');
+      self._toggleBtn.classList.add('wakz-fab-hidden');
+      /* Re-fetch config on every open to get latest customizations */
+      self._fetchConfig();
+      /* Fetch history on first open (after config is loaded) */
+      if (self._configLoaded && !self._hasFetchedHistory) {
+        self._fetchHistory();
+      }
+      /* Show welcome message if no messages yet */
+      if (self._configLoaded && self.messages.length === 0 && self.config.welcomeMessage) {
+        self._appendWelcomeMessage(self.config.welcomeMessage);
+      }
+      /* Start polling for new messages */
+      self._startPolling();
+      setTimeout(function () { self._inputEl.focus(); }, 320);
+    } else {
+      self._chatWindow.classList.remove('wakz-visible');
+      self._overlay.classList.remove('wakz-visible');
+      self._toggleBtn.classList.remove('wakz-fab-hidden');
+      /* Stop polling when chat is closed */
+      self._stopPolling();
+    }
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     FETCH WIDGET CONFIG
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._fetchConfig = function () {
+    var self = this;
+    if (!self.server || !self.apiKey) {
+      self._handleConfigError();
+      return;
+    }
+
+    var url = self.server + '/api/v1/embed/config?key=' + encodeURIComponent(self.apiKey);
+
+    _fetchWithTimeout(url, {
+      method: 'GET',
+      headers: { 'Accept': 'application/json' }
+    }, 30000)
+    .then(function (res) {
+      if (!res.ok) {
+        self._handleConfigError(true);
+        return null;
+      }
+      return res.json();
+    })
+    .then(function (data) {
+      if (data && data.success && data.config) {
+        self.config = Object.assign({}, _DEFAULTS, data.config);
+        self._configLoaded = true;
+        self._applyConfig();
+      } else if (data !== null) {
+        self._handleConfigError(true);
+      }
+    })
+    .catch(function (err) {
+      self._handleConfigError(false);
+    });
+  };
+
+  /** Handle config fetch failure — show offline state */
+  WAKZWidget.prototype._handleConfigError = function (isPermanent) {
+    var self = this;
+    self._configError = true;
+    self.config.online = false;
+
+    /* Hide FAB entirely if key is permanently invalid */
+    if (isPermanent && self._toggleBtn) {
+      self._toggleBtn.style.display = 'none';
+    }
+
+    /* Update FAB dot to red */
+    if (self._statusDot) {
+      self._statusDot.className = 'wakz-fab-dot offline';
+      self._statusDot.style.display = '';
+    }
+    /* Update header status pill to offline */
+    if (self._headerStatusPill) {
+      self._headerStatusPill.className = 'wakz-status-pill wakz-status-pill--offline';
+      self._headerStatusPill.style.display = '';
+    }
+    if (self._headerStatusDot) {
+      self._headerStatusDot.className = 'wakz-status-dot';
+    }
+    if (self._headerStatusText) {
+      self._headerStatusText.textContent = _strings(self.config.language).offline;
+    }
+  };
+
+  /** Apply loaded config to the DOM */
+  WAKZWidget.prototype._applyConfig = function () {
+    var self = this;
+    var cfg = self.config;
+    var str = _strings(cfg.language);
+    var isRtl = cfg.language === 'ar';
+    var posClass = cfg.position === 'bottom-left' ? 'bl' : 'br';
+
+    /* ── Update CSS custom properties ── */
+    var hostStyle = self._shadow.host.style;
+    hostStyle.setProperty('--wakz-primary', cfg.primaryColor);
+    hostStyle.setProperty('--wakz-btn', cfg.btnColor);
+    hostStyle.setProperty('--wakz-chat-bg', cfg.chatBg);
+    hostStyle.setProperty('--wakz-widget-bg', cfg.widgetBg);
+    hostStyle.setProperty('--wakz-bot-bubble', cfg.botBubbleColor || '#ffffff');
+    hostStyle.setProperty('--wakz-bot-text', cfg.botTextColor || '#333333');
+    hostStyle.setProperty('--wakz-user-bubble', cfg.userBubbleColor || '#111111');
+    hostStyle.setProperty('--wakz-user-text', cfg.userTextColor || '#ffffff');
+
+    /* ── RTL ── */
+    if (isRtl) self._root.classList.add('wakz-rtl');
+    else self._root.classList.remove('wakz-rtl');
+
+    /* ── FAB ── */
+    self._toggleBtn.className = 'wakz-fab wakz-fab-pos-' + posClass + ' wakz-fab-enter' + (self.isOpen ? ' wakz-fab-hidden' : '');
+    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' : '');
+
+    /* ── Overlay ── */
+    self._overlay.className = 'wakz-overlay' + (self.isOpen ? ' wakz-visible' : '');
+
+    /* ── Header Title & Subtitle (DYNAMIC from config) ── */
+    if (self._headerTitleEl) self._headerTitleEl.textContent = cfg.botName;
+    if (self._headerSubtitleEl) {
+      var sub = cfg.botSubtitle || str.defaultSubtitle || '';
+      self._headerSubtitleEl.textContent = sub;
+    }
+
+    /* ── Header Status Pill ── */
+    if (self._headerStatusPill) {
+      self._headerStatusPill.className = 'wakz-status-pill ' + (cfg.online ? 'wakz-status-pill--online' : 'wakz-status-pill--offline');
+      self._headerStatusPill.style.display = cfg.showStatus ? '' : 'none';
+      /* Rebuild pill content if needed */
+      if (self._headerStatusDot) {
+        self._headerStatusDot.className = 'wakz-status-dot';
+      }
+      if (self._headerStatusText) {
+        self._headerStatusText.textContent = cfg.online ? str.online : str.offline;
+      }
+    }
+
+    /* ── Input ── */
+    self._inputEl.placeholder = str.placeholder;
+    self._inputEl.dir = isRtl ? 'rtl' : 'ltr';
+
+    /* ── Close button label ── */
+    if (self._closeBtn) self._closeBtn.setAttribute('aria-label', str.closeChat);
+
+    /* ── Send button label ── */
+    self._sendBtn.setAttribute('aria-label', str.sendMessage);
+
+    /* ── FAB Icon ── */
+    var iconKey = cfg.fabIcon || 'chat';
+    if (iconKey === 'chatBubble') iconKey = 'chat';
+    if (_ICONS[iconKey]) {
+      self._toggleBtn.innerHTML = _ICONS[iconKey];
+    } else {
+      self._toggleBtn.innerHTML = _ICONS.chatBubble;
+    }
+    /* Re-append status dot after innerHTML change */
+    if (self._statusDot && self._statusDot.parentNode !== self._toggleBtn) {
+      self._toggleBtn.appendChild(self._statusDot);
+    }
+
+    /* ── FAB Shape ── */
+    if (cfg.fabShape === 'pill') {
+      self._toggleBtn.style.borderRadius = '9999px';
+      self._toggleBtn.style.width = 'auto';
+      self._toggleBtn.style.padding = '0 20px';
+    } else {
+      self._toggleBtn.style.borderRadius = '50%';
+      self._toggleBtn.style.width = '56px';
+      self._toggleBtn.style.padding = '0';
+    }
+
+    /* ── Display Mode ── */
+    if (cfg.displayMode === 'fullscreen') {
+      self._chatWindow.classList.add('wakz-mode-fullscreen');
+      self._chatWindow.classList.remove('wakz-mode-modal');
+    } else {
+      self._chatWindow.classList.add('wakz-mode-modal');
+      self._chatWindow.classList.remove('wakz-mode-fullscreen');
+    }
+
+    /* ── Auto Trigger ── */
+    if (cfg.triggerMode === 'auto' && !self.isOpen) {
+      var autoDelay = Math.max(1, Math.min(60, parseInt(cfg.triggerDelay) || 5)) * 1000;
+      setTimeout(function () {
+        if (!self.isOpen) self.toggleChat(true);
+      }, autoDelay);
+    }
+
+    /* ── Header Colors (only apply if explicitly customized) ── */
+    if (cfg.headerColor) {
+      self._headerEl.style.background = cfg.headerColor;
+    }
+    if (cfg.headerTextColor) {
+      self._headerTitleEl.style.color = cfg.headerTextColor;
+      self._headerSubtitleEl.style.color = cfg.headerTextColor + 'aa';
+      self._closeBtn.style.color = cfg.headerTextColor;
+    }
+
+    /* ── If chat is already open, show welcome message ── */
+    if (self.isOpen && self.messages.length === 0 && cfg.welcomeMessage) {
+      self._appendWelcomeMessage(cfg.welcomeMessage);
+    }
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     FETCH CHAT HISTORY
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._fetchHistory = function () {
+    var self = this;
+    if (!self.server || !self.apiKey) return;
+
+    self._hasFetchedHistory = true;
+    var url = self.server + '/api/v1/embed/chat?api_key=' +
+      encodeURIComponent(self.apiKey) + '&visitor_id=' + encodeURIComponent(self.visitorId);
+
+    _fetchWithTimeout(url, {
+      method: 'GET',
+      headers: { 'Accept': 'application/json' }
+    }, 15000)
+    .then(function (res) { return res.json(); })
+    .then(function (data) {
+      if (data && data.success && data.messages && data.messages.length > 0) {
+        self._clearMessages();
+        self._knownMessageIds = {};
+        var msgs = data.messages;
+        for (var i = 0; i < msgs.length; i++) {
+          var m = msgs[i];
+          if (m.id && self._knownMessageIds[m.id]) continue;
+          if (m.id) self._knownMessageIds[m.id] = true;
+          var role = m.role === 'user' ? 'user' : 'bot';
+          self._appendMessage(role, m.content, false, m.createdAt, m.role === 'human_agent');
+        }
+        var lastMsg = msgs[msgs.length - 1];
+        if (lastMsg && lastMsg.createdAt) {
+          self._lastPollTime = lastMsg.createdAt;
+        }
+      }
+    })
+    .catch(function () {
+      /* Silently ignore history fetch failures */
+    });
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     POLLING — Fetch new messages periodically
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._startPolling = function () {
+    var self = this;
+    self._stopPolling();
+    if (!self._lastPollTime) {
+      self._lastPollTime = new Date().toISOString();
+    }
+    self._pollTimer = setInterval(function () {
+      self._pollForNewMessages();
+    }, self._POLL_INTERVAL);
+  };
+
+  WAKZWidget.prototype._stopPolling = function () {
+    var self = this;
+    if (self._pollTimer) {
+      clearInterval(self._pollTimer);
+      self._pollTimer = null;
+    }
+  };
+
+  WAKZWidget.prototype._pollForNewMessages = function () {
+    var self = this;
+    if (!self.server || !self.apiKey || !self._lastPollTime) return;
+    /* Skip polling while waiting for our own reply */
+    if (self._pendingReply) return;
+
+    var url = self.server + '/api/v1/embed/chat?api_key=' +
+      encodeURIComponent(self.apiKey) +
+      '&visitor_id=' + encodeURIComponent(self.visitorId) +
+      '&since=' + encodeURIComponent(self._lastPollTime);
+
+    _fetchWithTimeout(url, {
+      method: 'GET',
+      headers: { 'Accept': 'application/json' }
+    }, 10000)
+    .then(function (res) { return res.json(); })
+    .then(function (data) {
+      if (data && data.success && data.messages && data.messages.length > 0) {
+        var msgs = data.messages;
+        for (var i = 0; i < msgs.length; i++) {
+          var m = msgs[i];
+          if (m.id && self._knownMessageIds[m.id]) continue;
+          if (m.id) self._knownMessageIds[m.id] = true;
+          var role = m.role === 'user' ? 'user' : 'bot';
+          var isHumanAgent = m.role === 'human_agent';
+          self._appendMessage(role, m.content, false, m.createdAt, isHumanAgent);
+        }
+        var lastMsg = msgs[msgs.length - 1];
+        if (lastMsg && lastMsg.createdAt) {
+          self._lastPollTime = lastMsg.createdAt;
+        }
+      }
+    })
+    .catch(function () {
+      /* Silently ignore polling failures */
+    });
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     CLEAR ALL MESSAGES
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._clearMessages = function () {
+    var self = this;
+    /* Remove all children from messages-inner */
+    if (self._messagesInner) {
+      while (self._messagesInner.firstChild) {
+        self._messagesInner.removeChild(self._messagesInner.firstChild);
+      }
+    }
+    self.messages = [];
+    self._knownMessageIds = {};
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     APPEND WELCOME MESSAGE — no bubble, matching bot messages
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._appendWelcomeMessage = function (text) {
+    var self = this;
+    if (!text) return;
+
+    var row = _el('div', { className: 'wakz-msg-row wakz-msg-row--bot' });
+
+    var content = _el('div', { className: 'wakz-bot-content' });
+
+    /* Bot label */
+    var label = _el('span', { className: 'wakz-bot-label' }, [self.config.botName]);
+    content.appendChild(label);
+
+    /* Bot text */
+    var textEl = _el('p', { className: 'wakz-bot-text' });
+    textEl.textContent = text;
+    content.appendChild(textEl);
+
+    row.appendChild(content);
+    self._messagesInner.appendChild(row);
+    self.messages.push({ sender: 'bot', text: text });
+    self._scrollToBottom();
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     APPEND MESSAGE TO CHAT — v4 rendering
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._appendMessage = function (sender, text, isError, timestamp, isHumanAgent) {
+    var self = this;
+
+    /* ── Format 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');
+    }
+
+    if (sender === 'user') {
+      /* ── USER MESSAGE: dark bubble (#111) ── */
+      if (isError) {
+        /* Error: red error bubble */
+        var errRow = _el('div', { className: 'wakz-msg-row wakz-msg-row--user' });
+        var errBubble = _el('div', { className: 'wakz-error-bubble' });
+        errBubble.appendChild(document.createTextNode(text));
+
+        var errStr = _strings(self.config.language);
+        var errRetryBtn = _el('button', { className: 'wakz-retry' }, [
+          _ICONS.error + ' ' + errStr.retry
+        ]);
+        (function (rowCapture, errText) {
+          errRetryBtn.addEventListener('click', function () {
+            if (rowCapture.parentNode) rowCapture.parentNode.removeChild(rowCapture);
+            for (var i = self.messages.length - 1; i >= 0; i--) {
+              if (self.messages[i].text === errText && self.messages[i].isError) {
+                self.messages.splice(i, 1);
+                break;
+              }
+            }
+            var lastUserMsg = null;
+            for (var j = self.messages.length - 1; j >= 0; j--) {
+              if (self.messages[j].sender === 'user') {
+                lastUserMsg = self.messages[j].text;
+                break;
+              }
+            }
+            if (lastUserMsg) self._sendToAPI(lastUserMsg);
+          });
+        })(errRow, text);
+        errBubble.appendChild(errRetryBtn);
+        errRow.appendChild(errBubble);
+        self._messagesInner.appendChild(errRow);
+        self.messages.push({ sender: sender, text: text, isError: !!isError });
+      } else {
+        /* Normal user message: dark bubble */
+        var userRow = _el('div', { className: 'wakz-msg-row wakz-msg-row--user' });
+        var userCard = _el('div', { className: 'wakz-user-card' });
+
+        var userText = _el('p', { className: 'wakz-user-text' });
+        userText.textContent = text; /* XSS safe: textContent */
+        userCard.appendChild(userText);
+
+        userCard.appendChild(_el('span', { className: 'wakz-user-time' }, [tsText]));
+        userRow.appendChild(userCard);
+        self._messagesInner.appendChild(userRow);
+        self.messages.push({ sender: sender, text: text, isError: false });
+      }
+    } else if (isHumanAgent) {
+      /* ── SUPPORT MESSAGE: green accent ── */
+      var supRow = _el('div', { className: 'wakz-msg-row wakz-msg-row--support' });
+      var supContent = _el('div', { className: 'wakz-support-content' });
+
+      /* Support label with dot */
+      var supLabel = _el('span', { className: 'wakz-support-label' });
+      supLabel.appendChild(_el('span', { className: 'wakz-support-label-dot' }));
+      var supStr = _strings(self.config.language);
+      supLabel.appendChild(document.createTextNode(supStr.humanBadge || 'Support Team'));
+      supContent.appendChild(supLabel);
+
+      /* Support text */
+      var supText = _el('p', { className: 'wakz-support-text' });
+      supText.textContent = text; /* XSS safe: textContent */
+      supContent.appendChild(supText);
+
+      supContent.appendChild(_el('span', { className: 'wakz-support-time' }, [tsText]));
+      supRow.appendChild(supContent);
+      self._messagesInner.appendChild(supRow);
+      self.messages.push({ sender: 'support', text: text, isError: false });
+    } else {
+      /* ── BOT MESSAGE: no bubble, on background ── */
+      if (isError) {
+        /* Error: red error bubble */
+        var botErrRow = _el('div', { className: 'wakz-msg-row wakz-msg-row--bot' });
+        var botErrBubble = _el('div', { className: 'wakz-error-bubble' });
+        botErrBubble.appendChild(document.createTextNode(text));
+
+        var botErrStr = _strings(self.config.language);
+        var botErrRetry = _el('button', { className: 'wakz-retry' }, [
+          _ICONS.error + ' ' + botErrStr.retry
+        ]);
+        (function (rowCapture, errText) {
+          botErrRetry.addEventListener('click', function () {
+            if (rowCapture.parentNode) rowCapture.parentNode.removeChild(rowCapture);
+            for (var i = self.messages.length - 1; i >= 0; i--) {
+              if (self.messages[i].text === errText && self.messages[i].isError) {
+                self.messages.splice(i, 1);
+                break;
+              }
+            }
+            var lastUserMsg = null;
+            for (var j = self.messages.length - 1; j >= 0; j--) {
+              if (self.messages[j].sender === 'user') {
+                lastUserMsg = self.messages[j].text;
+                break;
+              }
+            }
+            if (lastUserMsg) self._sendToAPI(lastUserMsg);
+          });
+        })(botErrRow, text);
+        botErrBubble.appendChild(botErrRetry);
+        botErrRow.appendChild(botErrBubble);
+        self._messagesInner.appendChild(botErrRow);
+        self.messages.push({ sender: sender, text: text, isError: true });
+      } else {
+        /* Normal bot message: no bubble */
+        var botRow = _el('div', { className: 'wakz-msg-row wakz-msg-row--bot' });
+        var botContent = _el('div', { className: 'wakz-bot-content' });
+
+        /* Bot label */
+        botContent.appendChild(_el('span', { className: 'wakz-bot-label' }, [self.config.botName]));
+
+        /* Bot text */
+        var botTextEl = _el('p', { className: 'wakz-bot-text' });
+        botTextEl.textContent = text; /* XSS safe: textContent */
+        botContent.appendChild(botTextEl);
+
+        /* Timestamp */
+        botContent.appendChild(_el('span', { className: 'wakz-bot-time' }, [tsText]));
+
+        botRow.appendChild(botContent);
+        self._messagesInner.appendChild(botRow);
+        self.messages.push({ sender: sender, text: text, isError: false });
+      }
+    }
+
+    self._scrollToBottom();
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     TYPING INDICATOR — dots with label, no bubble
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._showTyping = function () {
+    var self = this;
+    if (self._typingEl) return;
+
+    self._typingEl = _el('div', { className: 'wakz-typing-row' });
+
+    var typingContent = _el('div', { className: 'wakz-typing-content' });
+
+    /* Typing label */
+    typingContent.appendChild(_el('span', { className: 'wakz-typing-label' }, [self.config.botName]));
+
+    /* Bouncing dots */
+    var typingDots = _el('div', { className: 'wakz-typing-dots' });
+    typingDots.appendChild(_el('span'));
+    typingDots.appendChild(_el('span'));
+    typingDots.appendChild(_el('span'));
+    typingContent.appendChild(typingDots);
+
+    self._typingEl.appendChild(typingContent);
+    self._messagesInner.appendChild(self._typingEl);
+    self._scrollToBottom();
+  };
+
+  WAKZWidget.prototype._hideTyping = function () {
+    var self = this;
+    if (self._typingEl && self._typingEl.parentNode) {
+      self._typingEl.parentNode.removeChild(self._typingEl);
+    }
+    self._typingEl = null;
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     SCROLL TO BOTTOM
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._scrollToBottom = function () {
+    var self = this;
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        self._messagesContainer.scrollTop = self._messagesContainer.scrollHeight;
+      });
+    });
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     HANDLE SEND ACTION
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._handleSend = function () {
+    var self = this;
+    var text = (self._inputEl.value || '').trim();
+    if (!text || self.isLoading) return;
+
+    /* Append user message immediately */
+    self._appendMessage('user', text);
+
+    /* Clear input */
+    self._inputEl.value = '';
+    self._inputEl.style.height = 'auto';
+    self._sendBtn.classList.remove('wakz-send--active');
+
+    /* Send to API */
+    self._sendToAPI(text);
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     SEND MESSAGE TO API
+     ════════════════════════════════════════════════════════════════ */
+
+  WAKZWidget.prototype._sendToAPI = function (message) {
+    var self = this;
+
+    if (!self.server || !self.apiKey) {
+      self._appendMessage('bot', 'Widget not configured. Provide data-api-key and data-server.', true);
+      return;
+    }
+
+    self.isLoading = true;
+    self._sendBtn.disabled = true;
+    self._showTyping();
+
+    /* Freeze poll time BEFORE sending */
+    self._lastPollTime = new Date().toISOString();
+    self._pendingReply = true;
+
+    var payload = {
+      api_key: self.apiKey,
+      visitor_id: self.visitorId,
+      message: message,
+      session_data: {
+        domain: window.location.hostname || '',
+        page_url: window.location.href || '',
+        user_agent: navigator.userAgent || '',
+        language: navigator.language || '',
+        device_model: self._deviceInfo.device_model || '',
+        device_platform: self._deviceInfo.device_platform || '',
+        device_type: self._deviceInfo.device_type || 'desktop'
+      }
+    };
+
+    _fetchWithTimeout(self.server + '/api/v1/embed/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: JSON.stringify(payload)
+    }, 30000)
+    .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);
+      }
+      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);
+      self._lastPollTime = new Date(Date.now() + 1000).toISOString();
+    })
+    .finally(function () {
+      self.isLoading = false;
+      self._sendBtn.disabled = false;
+      if (self.isOpen) self._inputEl.focus();
+    });
+  };
+
+  /* ════════════════════════════════════════════════════════════════
+     BOOTSTRAP
+     ════════════════════════════════════════════════════════════════ */
+
+  function boot() {
+    try { new WAKZWidget(); } catch (e) { console.error('[WAKZ Widget v4.0.0] Init error:', e); }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+
+})();