wakz-chat-widget 2.2.0 → 3.0.0

package/index.js

@@ -1,8 +1,8 @@
 /**
- * WAKZ Chat Widget v2.2.0
+ * WAKZ Chat Widget v3.0.0
  * ─────────────────────────────────────────────────────────────────
  * A production-grade, self-contained chat widget using Shadow DOM.
- * Competes with Intercom & Crisp in quality.
+ * Complete UI/UX revamp — glass morphism, centered modal, modern design.
  *
  * Embed: <script src="/wakz-widget.js" data-api-key="xxx" data-server="https://..." async></script>
  *
@@ -222,7 +222,7 @@
     self.apiKey = attrs.apiKey;
     self.server = attrs.server;
     self.visitorId = _getVisitorId();
-    self._deviceInfo = _getDeviceInfo(); // Device model, platform, type — collected once
+    self._deviceInfo = _getDeviceInfo();
 
     /* ── Runtime state ── */
     self.config = Object.assign({}, _DEFAULTS);
@@ -235,22 +235,26 @@
     self._configError = false;
     self._pollTimer = null;
     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 */
+    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._messagesContainer = null;
+    self._inputArea = null;
     self._inputEl = null;
     self._sendBtn = null;
     self._toggleBtn = null;
     self._statusDot = null;
     self._headerStatusDot = null;
     self._headerStatusText = null;
+    self._headerAvatarEl = null;
+    self._headerNameEl = null;
 
     /* ── Bootstrap ── */
     self._injectCSS();
@@ -261,7 +265,7 @@
   }
 
   /* ════════════════════════════════════════════════════════════════
-     CSS — Complete styling injected into Shadow DOM
+     CSS — Complete styling injected into Shadow DOM (v3.0.0 revamp)
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._injectCSS = function () {
@@ -275,15 +279,12 @@
       '  --wakz-btn: #171717;',
       '  --wakz-chat-bg: #f8f9fa;',
       '  --wakz-widget-bg: #ffffff;',
-      '  --wakz-radius-window: 16px;',
-      '  --wakz-radius-bubble: 16px;',
-      '  --wakz-radius-fab: 28px;',
+      '  --wakz-icon-radius: 50%;',
       '  --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-shadow-lg: 0 25px 60px rgba(0,0,0,.15), 0 10px 20px rgba(0,0,0,.1);',
       '  --wakz-transition: 200ms ease;',
-      '  --wakz-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;',
+      '  --wakz-font: \'Inter\', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;',
       '  all: initial;',
       '  font-family: var(--wakz-font);',
       '}',
@@ -296,35 +297,35 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         FLOATING ACTION BUTTON (FAB)
+         FLOATING ACTION BUTTON (FAB) — 48px, independent color
          ══════════════════════════════════════════════════ */
       '.wakz-fab {',
       '  position: fixed;',
       '  z-index: 2147483647;',
-      '  width: 56px;',
-      '  height: 56px;',
-      '  border-radius: var(--wakz-radius-fab);',
+      '  width: 48px;',
+      '  height: 48px;',
+      '  border-radius: var(--wakz-icon-radius);',
       '  border: none;',
       '  cursor: pointer;',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
-      '  box-shadow: var(--wakz-shadow-lg);',
+      '  box-shadow: 0 4px 14px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.1);',
       '  transition: transform var(--wakz-transition), box-shadow var(--wakz-transition);',
       '  outline: none;',
       '  -webkit-tap-highlight-color: transparent;',
       '  background: var(--wakz-btn);',
       '}',
       '.wakz-fab:hover {',
-      '  transform: scale(1.08);',
-      '  box-shadow: var(--wakz-shadow-xl);',
+      '  transform: scale(1.06);',
+      '  box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 4px 10px rgba(0,0,0,.12);',
       '}',
       '.wakz-fab:active {',
-      '  transform: scale(0.96);',
+      '  transform: scale(0.94);',
       '}',
       '.wakz-fab svg {',
-      '  width: 26px;',
-      '  height: 26px;',
+      '  width: 22px;',
+      '  height: 22px;',
       '  color: #ffffff;',
       '  pointer-events: none;',
       '}',
@@ -333,6 +334,12 @@
       '.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 ── */
       '@keyframes wakz-fab-enter {',
       '  0%   { opacity: 0; transform: scale(0.3); }',
@@ -345,22 +352,22 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         STATUS DOT (on FAB)
+         STATUS DOT (on FAB) — 10px, top-right
          ══════════════════════════════════════════════════ */
       '.wakz-fab-dot {',
       '  position: absolute;',
-      '  top: 0px;',
-      '  right: 0px;',
-      '  width: 14px;',
-      '  height: 14px;',
+      '  top: -1px;',
+      '  right: -1px;',
+      '  width: 10px;',
+      '  height: 10px;',
       '  border-radius: 50%;',
-      '  border: 2.5px solid #ffffff;',
+      '  border: 2px solid #ffffff;',
       '  z-index: 2;',
       '  transition: background 0.3s ease;',
       '}',
       '.wakz-fab-pos-bl .wakz-fab-dot {',
       '  right: auto;',
-      '  left: 0px;',
+      '  left: -1px;',
       '}',
 
       /* ── Online (green pulse) ── */
@@ -369,7 +376,7 @@
       '}',
       '@keyframes wakz-dot-pulse {',
       '  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }',
-      '  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }',
+      '  50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); }',
       '}',
       '.wakz-fab-dot.online {',
       '  animation: wakz-dot-pulse 2s ease-in-out infinite;',
@@ -381,77 +388,100 @@
       '  animation: none;',
       '}',
 
-      /* ── Error (red, no pulse) ── */
-      '.wakz-fab-dot.error {',
-      '  background: #ef4444;',
-      '  animation: none;',
+      /* ══════════════════════════════════════════════════
+         OVERLAY / BACKDROP — glass 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
+         CHAT WINDOW — Centered Modal
          ══════════════════════════════════════════════════ */
       '.wakz-window {',
       '  position: fixed;',
       '  z-index: 2147483646;',
-      '  width: 380px;',
-      '  min-height: 500px;',
-      '  max-height: 70vh;',
-      '  border-radius: var(--wakz-radius-window);',
+      '  top: 50%;',
+      '  left: 50%;',
+      '  transform: translate(-50%, -50%) scale(0.95);',
+      '  width: 390px;',
+      '  height: min(580px, 80vh);',
+      '  border-radius: 16px;',
       '  overflow: hidden;',
       '  display: flex;',
       '  flex-direction: column;',
       '  background: var(--wakz-widget-bg);',
-      '  box-shadow: var(--wakz-shadow-xl);',
+      '  box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.1);',
       '  opacity: 0;',
-      '  transform: translateY(20px) scale(0.95);',
       '  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: translateY(0) scale(1);',
+      '  transform: translate(-50%, -50%) scale(1);',
       '  pointer-events: auto;',
       '}',
 
-      /* ── Window Positioning ── */
-      '.wakz-win-pos-br { bottom: 92px; right: 24px; }',
-      '.wakz-win-pos-bl { bottom: 92px; left: 24px; }',
-
       /* ══════════════════════════════════════════════════
-         HEADER
+         HEADER — Glass effect matching main site
          ══════════════════════════════════════════════════ */
       '.wakz-hdr {',
       '  flex-shrink: 0;',
-      '  padding: 14px 18px;',
+      '  height: 52px;',
+      '  padding: 0 16px;',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: space-between;',
-      '  color: #ffffff;',
+      '  color: #171717;',
       '  cursor: default;',
       '  user-select: none;',
-      '  background: var(--wakz-primary);',
+      '  background: rgba(255,255,255,0.85);',
+      '  backdrop-filter: blur(24px);',
+      '  -webkit-backdrop-filter: blur(24px);',
+      '  border-bottom: 1px solid rgba(229,229,229,0.6);',
+      '  box-shadow: 0 4px 12px rgba(0,0,0,0.05);',
+      '  border-radius: 16px 16px 0 0;',
       '}',
       '.wakz-hdr-left {',
       '  display: flex;',
       '  align-items: center;',
-      '  gap: 11px;',
+      '  gap: 10px;',
       '  min-width: 0;',
+      '  flex: 1;',
+      '}',
+      '.wakz-hdr-right {',
+      '  display: flex;',
+      '  align-items: center;',
+      '  gap: 8px;',
+      '  flex-shrink: 0;',
       '}',
 
-      /* ── Bot Avatar ── */
+      /* ── Bot Avatar (32px circle) ── */
       '.wakz-avatar {',
-      '  width: 38px;',
-      '  height: 38px;',
+      '  width: 32px;',
+      '  height: 32px;',
       '  border-radius: 50%;',
-      '  background: rgba(255,255,255,0.18);',
+      '  background: rgba(23,23,23,0.1);',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
       '  font-weight: 700;',
-      '  font-size: 16px;',
+      '  font-size: 14px;',
       '  flex-shrink: 0;',
-      '  letter-spacing: 0.5px;',
+      '  color: var(--wakz-primary);',
       '}',
 
       /* ── Header Info ── */
@@ -464,139 +494,186 @@
       '  font-size: 15px;',
       '  font-weight: 600;',
       '  line-height: 1.3;',
+      '  color: #171717;',
       '  white-space: nowrap;',
       '  overflow: hidden;',
       '  text-overflow: ellipsis;',
       '}',
       '.wakz-hdr-status {',
-      '  font-size: 12px;',
-      '  opacity: 0.9;',
+      '  font-size: 11px;',
+      '  color: #A3A3A3;',
       '  display: flex;',
       '  align-items: center;',
-      '  gap: 5px;',
-      '  margin-top: 2px;',
+      '  gap: 4px;',
+      '  margin-top: 1px;',
       '}',
+
+      /* ── Header Status Dot (6px) ── */
       '.wakz-hdr-status-dot {',
-      '  width: 7px;',
-      '  height: 7px;',
+      '  width: 6px;',
+      '  height: 6px;',
       '  border-radius: 50%;',
       '  display: inline-block;',
       '  flex-shrink: 0;',
       '  transition: background 0.3s ease;',
       '}',
-      '.wakz-hdr-status-dot.online { background: #4ade80; }',
-      '.wakz-hdr-status-dot.offline { background: #f87171; }',
+      '.wakz-hdr-status-dot.online { background: #22c55e; }',
+      '.wakz-hdr-status-dot.offline { background: #ef4444; }',
 
-      /* ── Close Button ── */
+      /* ── Close Button (28px circle, dark) ── */
       '.wakz-close {',
-      '  width: 32px;',
-      '  height: 32px;',
+      '  width: 28px;',
+      '  height: 28px;',
       '  border-radius: 50%;',
       '  border: none;',
-      '  background: rgba(255,255,255,0.12);',
-      '  color: #ffffff;',
+      '  background: rgba(23,23,23,0.05);',
+      '  color: #525252;',
       '  cursor: pointer;',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
-      '  transition: background var(--wakz-transition);',
+      '  transition: background var(--wakz-transition), color var(--wakz-transition);',
       '  outline: none;',
       '  flex-shrink: 0;',
       '}',
       '.wakz-close:hover {',
-      '  background: rgba(255,255,255,0.28);',
+      '  background: rgba(23,23,23,0.1);',
+      '  color: #171717;',
       '}',
       '.wakz-close svg {',
-      '  width: 18px;',
-      '  height: 18px;',
+      '  width: 16px;',
+      '  height: 16px;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         MESSAGES AREA
+         MESSAGES AREA — scrollable, padding-bottom for input
          ══════════════════════════════════════════════════ */
       '.wakz-msgs {',
       '  flex: 1;',
       '  overflow-y: auto;',
       '  overflow-x: hidden;',
-      '  padding: 18px 16px 10px;',
+      '  padding: 16px 14px 88px;',
       '  display: flex;',
       '  flex-direction: column;',
-      '  gap: 6px;',
+      '  gap: 4px;',
       '  scroll-behavior: smooth;',
       '  background: var(--wakz-chat-bg);',
+      '  position: relative;',
       '}',
-      '.wakz-msgs::-webkit-scrollbar { width: 5px; }',
+      '.wakz-msgs::-webkit-scrollbar { width: 4px; }',
       '.wakz-msgs::-webkit-scrollbar-track { background: transparent; }',
       '.wakz-msgs::-webkit-scrollbar-thumb {',
-      '  background: rgba(0,0,0,0.12);',
+      '  background: rgba(0,0,0,0.1);',
       '  border-radius: 10px;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         MESSAGE BUBBLES
+         MESSAGE ROWS — new v3 styles
          ══════════════════════════════════════════════════ */
       '.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; }',
+      '.wakz-msg-row.bot {',
+      '  align-self: flex-start;',
+      '  align-items: flex-start;',
+      '  gap: 8px;',
+      '  max-width: 80%;',
+      '}',
+      '.wakz-msg-row.user {',
+      '  align-self: flex-end;',
+      '  max-width: 75%;',
+      '}',
 
       '@keyframes wakz-msg-in {',
       '  0%   { opacity: 0; transform: translateY(8px); }',
       '  100% { opacity: 1; transform: translateY(0); }',
       '}',
 
-      '.wakz-bubble {',
+      /* ── User Bubbles ── */
+      '.wakz-bubble.user {',
       '  padding: 10px 14px;',
       '  font-size: 14px;',
       '  line-height: 1.55;',
       '  word-wrap: break-word;',
       '  overflow-wrap: break-word;',
       '  white-space: pre-wrap;',
-      '  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-radius: 14px;',
       '  border-bottom-right-radius: 4px;',
       '  background: var(--wakz-primary);',
+      '  color: #ffffff;',
+      '  box-shadow: 0 2px 8px rgba(0,0,0,0.08);',
       '}',
-      '.wakz-bubble.error-bubble {',
-      '  background: #fef2f2;',
-      '  color: #dc2626;',
-      '  border: 1px solid #fecaca;',
-      '  border-bottom-left-radius: 4px;',
-      '  box-shadow: none;',
+
+      /* ── Bot Messages — NO bubble, text directly on background ── */
+      '.wakz-bot-content {',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  gap: 2px;',
+      '  min-width: 0;',
+      '}',
+      '.wakz-bot-text {',
+      '  font-size: 14px;',
+      '  line-height: 1.6;',
+      '  color: #404040;',
+      '  word-wrap: break-word;',
+      '  overflow-wrap: break-word;',
+      '  white-space: pre-wrap;',
+      '}',
+      '.wakz-bot-ts {',
+      '  font-size: 10px;',
+      '  color: #A3A3A3;',
+      '}',
+
+      /* ── Bot Avatar (22px, inline with message) ── */
+      '.wakz-bot-avatar {',
+      '  width: 22px;',
+      '  height: 22px;',
+      '  border-radius: 50%;',
+      '  background: rgba(23,23,23,0.08);',
+      '  display: flex;',
+      '  align-items: center;',
+      '  justify-content: center;',
+      '  font-weight: 700;',
+      '  font-size: 10px;',
+      '  flex-shrink: 0;',
+      '  color: var(--wakz-primary);',
+      '  margin-top: 2px;',
       '}',
 
-      /* ── Message Timestamp ── */
+      /* ── User Timestamp ── */
       '.wakz-ts {',
       '  display: block;',
-      '  font-size: 11px;',
-      '  opacity: 0.45;',
-      '  margin-top: 4px;',
-      '}',
-      '.wakz-bubble.user .wakz-ts {',
+      '  font-size: 10px;',
+      '  opacity: 0.7;',
+      '  margin-top: 3px;',
       '  text-align: right;',
       '}',
 
+      /* ── Error Messages ── */
+      '.wakz-bubble.error-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: 14px;',
+      '  border-bottom-left-radius: 4px;',
+      '  background: #FEF2F2;',
+      '  color: #DC2626;',
+      '  border: 1px solid #FECACA;',
+      '}',
+
       /* ── Human Agent Badge ── */
       '.wakz-human-badge {',
       '  display: inline-block;',
       '  font-size: 10px;',
-      '  background: rgba(22, 163, 74, 0.1);',
+      '  background: rgba(22, 163, 74, 0.08);',
       '  color: #16A34A;',
-      '  border-radius: 8px;',
-      '  padding: 1px 7px;',
-      '  margin-top: 5px;',
+      '  border-radius: 6px;',
+      '  padding: 2px 8px;',
+      '  margin-top: 4px;',
       '  font-weight: 600;',
       '  letter-spacing: 0.2px;',
       '}',
@@ -625,23 +702,26 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         TYPING INDICATOR
+         TYPING INDICATOR — no bubble, just dots on background
          ══════════════════════════════════════════════════ */
+      '.wakz-typing-row {',
+      '  display: flex;',
+      '  align-items: flex-start;',
+      '  gap: 8px;',
+      '  align-self: flex-start;',
+      '  animation: wakz-msg-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;',
+      '}',
       '.wakz-typing {',
       '  display: flex;',
       '  align-items: center;',
       '  gap: 4px;',
-      '  padding: 14px 18px;',
-      '  background: #ffffff;',
-      '  border-radius: var(--wakz-radius-bubble);',
-      '  border-bottom-left-radius: 4px;',
-      '  box-shadow: var(--wakz-shadow-sm);',
+      '  padding: 6px 0;',
       '}',
       '.wakz-typing-dot {',
-      '  width: 7px;',
-      '  height: 7px;',
+      '  width: 6px;',
+      '  height: 6px;',
       '  border-radius: 50%;',
-      '  background: #9ca3af;',
+      '  background: #A3A3A3;',
       '  animation: wakz-bounce-dot 1.4s ease-in-out infinite;',
       '}',
       '.wakz-typing-dot:nth-child(2) { animation-delay: 0.16s; }',
@@ -652,45 +732,53 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         INPUT AREA
+         INPUT AREA — Floating, glass effect, inside messages
          ══════════════════════════════════════════════════ */
-      '.wakz-input-wrap {',
-      '  flex-shrink: 0;',
-      '  padding: 12px 14px;',
-      '  border-top: 1px solid #e5e7eb;',
-      '  background: var(--wakz-widget-bg);',
+      '.wakz-input-area {',
+      '  position: absolute;',
+      '  bottom: 12px;',
+      '  left: 12px;',
+      '  right: 12px;',
       '  display: flex;',
       '  align-items: flex-end;',
       '  gap: 8px;',
+      '  padding: 8px 10px 8px 14px;',
+      '  border-radius: 12px;',
+      '  background: rgba(255,255,255,0.85);',
+      '  backdrop-filter: blur(24px);',
+      '  -webkit-backdrop-filter: blur(24px);',
+      '  border: 1px solid rgba(229,229,229,0.6);',
+      '  box-shadow: 0 4px 12px rgba(0,0,0,0.05);',
+      '  z-index: 10;',
       '}',
       '.wakz-input {',
       '  flex: 1;',
-      '  border: 1.5px solid #e5e7eb;',
-      '  border-radius: 22px;',
-      '  padding: 10px 16px;',
+      '  border: none;',
+      '  border-radius: 0;',
+      '  padding: 6px 4px;',
       '  font-size: 14px;',
       '  line-height: 1.4;',
       '  outline: none;',
       '  font-family: var(--wakz-font);',
-      '  transition: border-color var(--wakz-transition);',
       '  resize: none;',
-      '  max-height: 100px;',
+      '  max-height: 80px;',
+      '  min-height: 22px;',
       '  overflow-y: auto;',
-      '  background: #f9fafb;',
-      '  color: #111827;',
+      '  background: transparent;',
+      '  color: #171717;',
       '}',
       '.wakz-input:focus {',
-      '  border-color: var(--wakz-primary);',
-      '  background: #ffffff;',
+      '  outline: none;',
       '}',
       '.wakz-input::placeholder {',
-      '  color: #9ca3af;',
+      '  color: #A3A3A3;',
       '}',
 
-      /* ── Send Button ── */
+      /* ── Send Button (36px floating circle, separate from input) ── */
       '.wakz-send {',
-      '  width: 40px;',
-      '  height: 40px;',
+      '  width: 36px;',
+      '  height: 36px;',
+      '  min-width: 36px;',
       '  border-radius: 50%;',
       '  border: none;',
       '  color: #ffffff;',
@@ -699,99 +787,88 @@
       '  align-items: center;',
       '  justify-content: center;',
       '  flex-shrink: 0;',
-      '  transition: opacity var(--wakz-transition), transform 0.1s ease, box-shadow var(--wakz-transition);',
+      '  transition: transform var(--wakz-transition), opacity var(--wakz-transition), box-shadow var(--wakz-transition);',
       '  outline: none;',
       '  background: var(--wakz-primary);',
-      '  box-shadow: var(--wakz-shadow-sm);',
+      '  box-shadow: 0 2px 8px rgba(0,0,0,0.12);',
       '}',
       '.wakz-send:hover:not(:disabled) {',
-      '  box-shadow: var(--wakz-shadow-md);',
+      '  transform: scale(1.05);',
+      '  box-shadow: 0 4px 14px rgba(0,0,0,0.18);',
       '}',
       '.wakz-send:disabled {',
-      '  opacity: 0.35;',
+      '  opacity: 0.3;',
       '  cursor: not-allowed;',
       '}',
       '.wakz-send:not(:disabled):active {',
-      '  transform: scale(0.88);',
+      '  transform: scale(0.92);',
       '}',
       '.wakz-send svg {',
-      '  width: 18px;',
-      '  height: 18px;',
+      '  width: 16px;',
+      '  height: 16px;',
       '  pointer-events: none;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         WELCOME MESSAGE
+         WELCOME MESSAGE — same as bot (no bubble)
          ══════════════════════════════════════════════════ */
       '.wakz-welcome-wrap {',
       '  display: flex;',
+      '  align-items: flex-start;',
       '  gap: 8px;',
-      '  max-width: 88%;',
+      '  max-width: 80%;',
       '  align-self: flex-start;',
       '  animation: wakz-msg-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;',
       '}',
-      '.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;',
-      '}',
 
       /* ══════════════════════════════════════════════════
          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-bubble.user {',
-      '  border-bottom-right-radius: var(--wakz-radius-bubble);',
+      '  border-bottom-right-radius: 14px;',
       '  border-bottom-left-radius: 4px;',
       '}',
-      '.wakz-rtl .wakz-typing {',
-      '  border-bottom-left-radius: var(--wakz-radius-bubble);',
+      '.wakz-rtl .wakz-bubble.error-bubble {',
+      '  border-bottom-left-radius: 14px;',
       '  border-bottom-right-radius: 4px;',
       '}',
-      '.wakz-rtl .wakz-bubble.user .wakz-ts {',
+      '.wakz-rtl .wakz-ts {',
       '  text-align: left;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         MOBILE RESPONSIVE
+         MOBILE RESPONSIVE — centered modal, NOT fullscreen
          ══════════════════════════════════════════════════ */
       '@media (max-width: 480px) {',
       '  .wakz-window {',
-      '    width: 100vw !important;',
-      '    height: 100vh !important;',
-      '    min-height: 100vh !important;',
-      '    max-height: 100vh !important;',
-      '    bottom: 0 !important;',
-      '    top: 0 !important;',
-      '    right: 0 !important;',
-      '    left: 0 !important;',
-      '    border-radius: 0 !important;',
+      '    width: calc(100vw - 32px) !important;',
+      '    height: min(500px, 75vh) !important;',
       '  }',
       '  .wakz-window.wakz-visible {',
-      '    transform: translateY(0) scale(1);',
+      '    transform: translate(-50%, -50%) scale(1);',
+      '  }',
+      '  .wakz-fab {',
+      '    width: 44px;',
+      '    height: 44px;',
       '  }',
       '  .wakz-fab-pos-br { bottom: 16px; right: 16px; }',
       '  .wakz-fab-pos-bl { bottom: 16px; left: 16px; }',
+      '  .wakz-input-area {',
+      '    left: 10px;',
+      '    right: 10px;',
+      '    bottom: 10px;',
+      '    padding: 6px 8px 6px 12px;',
+      '  }',
+      '  .wakz-msgs {',
+      '    padding: 14px 12px 84px;',
+      '  }',
       '}'
     ].join('\n');
   };
 
   /* ════════════════════════════════════════════════════════════════
-     DOM CREATION
+     DOM CREATION — v3.0.0 new structure
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._createDOM = function () {
@@ -810,31 +887,38 @@
     self._shadow.appendChild(self._styleEl);
     self._shadow.appendChild(self._root);
 
-    /* ══════════════ FLOATING ACTION BUTTON ══════════════ */
+    /* ══════════════ 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 */
+    /* 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);
 
-    /* ══════════════ CHAT WINDOW ══════════════ */
-    self._chatWindow = _el('div', { className: 'wakz-window wakz-win-pos-' + posClass });
+    /* ══════════════ OVERLAY / BACKDROP ══════════════ */
+    self._overlay = _el('div', { className: 'wakz-overlay' });
+    self._root.appendChild(self._overlay);
+
+    /* ══════════════ CHAT WINDOW (Centered Modal) ══════════════ */
+    self._chatWindow = _el('div', { className: 'wakz-window' });
 
-    /* ── Header ── */
+    /* ── Header (glass effect, dark text) ── */
     var headerEl = _el('div', { className: 'wakz-hdr' });
 
+    /* Left side: avatar + name + status */
     var headerLeft = _el('div', { className: 'wakz-hdr-left' });
     var avatarLetter = (self.config.botName || 'W')[0].toUpperCase();
-    headerLeft.appendChild(_el('div', { className: 'wakz-avatar' }, [avatarLetter]));
+    self._headerAvatarEl = _el('div', { className: 'wakz-avatar' }, [avatarLetter]);
+    headerLeft.appendChild(self._headerAvatarEl);
 
     var headerInfo = _el('div', { className: 'wakz-hdr-info' });
-    headerInfo.appendChild(_el('span', { className: 'wakz-hdr-name' }, [self.config.botName]));
+    self._headerNameEl = _el('span', { className: 'wakz-hdr-name' }, [self.config.botName]);
+    headerInfo.appendChild(self._headerNameEl);
 
     var statusLine = _el('span', { className: 'wakz-hdr-status' });
     self._headerStatusDot = _el('span', { className: 'wakz-hdr-status-dot ' + (self.config.online ? 'online' : 'offline') });
@@ -846,17 +930,20 @@
     headerLeft.appendChild(headerInfo);
     headerEl.appendChild(headerLeft);
 
+    /* Right side: status dot + text + close button */
+    var headerRight = _el('div', { className: 'wakz-hdr-right' });
     var closeBtn = _el('button', { className: 'wakz-close', 'aria-label': str.closeChat });
     closeBtn.innerHTML = _ICONS.close;
-    headerEl.appendChild(closeBtn);
+    headerRight.appendChild(closeBtn);
+    headerEl.appendChild(headerRight);
+
     self._chatWindow.appendChild(headerEl);
 
-    /* ── Messages Container ── */
+    /* ── Messages Container (with floating input area inside) ── */
     self._messagesContainer = _el('div', { className: 'wakz-msgs' });
-    self._chatWindow.appendChild(self._messagesContainer);
 
-    /* ── Input Area ── */
-    var inputWrap = _el('div', { className: 'wakz-input-wrap' });
+    /* ── Floating Input Area (inside messages container) ── */
+    self._inputArea = _el('div', { className: 'wakz-input-area' });
 
     self._inputEl = _el('textarea', {
       className: 'wakz-input',
@@ -864,15 +951,17 @@
       rows: 1,
       dir: isRtl ? 'rtl' : 'ltr'
     });
-    inputWrap.appendChild(self._inputEl);
+    self._inputArea.appendChild(self._inputEl);
 
     self._sendBtn = _el('button', {
       className: 'wakz-send',
       'aria-label': str.sendMessage
     });
     self._sendBtn.innerHTML = _ICONS.send;
-    inputWrap.appendChild(self._sendBtn);
-    self._chatWindow.appendChild(inputWrap);
+    self._inputArea.appendChild(self._sendBtn);
+
+    self._messagesContainer.appendChild(self._inputArea);
+    self._chatWindow.appendChild(self._messagesContainer);
 
     self._root.appendChild(self._chatWindow);
   };
@@ -889,6 +978,11 @@
       self.toggleChat(!self.isOpen);
     });
 
+    /* Overlay click to close */
+    self._overlay.addEventListener('click', function () {
+      self.toggleChat(false);
+    });
+
     /* Close button click */
     self._chatWindow.querySelector('.wakz-close').addEventListener('click', function () {
       self.toggleChat(false);
@@ -907,10 +1001,10 @@
       }
     });
 
-    /* Auto-resize textarea */
+    /* Auto-resize textarea (max 80px) */
     self._inputEl.addEventListener('input', function () {
       self._inputEl.style.height = 'auto';
-      self._inputEl.style.height = Math.min(self._inputEl.scrollHeight, 100) + 'px';
+      self._inputEl.style.height = Math.min(self._inputEl.scrollHeight, 80) + 'px';
     });
 
     /* Escape to close */
@@ -925,7 +1019,6 @@
 
   WAKZWidget.prototype._playFabEntrance = function () {
     var self = this;
-    /* Start invisible, then animate after a brief delay */
     self._toggleBtn.style.opacity = '0';
     setTimeout(function () {
       self._toggleBtn.style.opacity = '';
@@ -942,6 +1035,8 @@
     self.isOpen = open;
     if (open) {
       self._chatWindow.classList.add('wakz-visible');
+      self._overlay.classList.add('wakz-visible');
+      self._toggleBtn.classList.add('wakz-fab-hidden');
       /* Fetch history on first open (after config is loaded) */
       if (self._configLoaded && !self._hasFetchedHistory) {
         self._fetchHistory();
@@ -955,6 +1050,8 @@
       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();
     }
@@ -988,7 +1085,6 @@
       }
     })
     .catch(function (err) {
-      /* AbortError means timeout */
       self._handleConfigError();
     });
   };
@@ -1027,31 +1123,29 @@
     hostStyle.setProperty('--wakz-btn', cfg.btnColor);
     hostStyle.setProperty('--wakz-chat-bg', cfg.chatBg);
     hostStyle.setProperty('--wakz-widget-bg', cfg.widgetBg);
+    hostStyle.setProperty('--wakz-icon-radius', cfg.iconRadius || '50%');
 
     /* ── 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._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 Position ── */
-    self._chatWindow.className = 'wakz-window wakz-win-pos-' + posClass + (self.isOpen ? ' wakz-visible' : '');
+    /* ── Window ── */
+    self._chatWindow.className = 'wakz-window' + (self.isOpen ? ' wakz-visible' : '');
 
-    /* ── Header ── */
-    var headerEl = self._chatWindow.querySelector('.wakz-hdr');
-    if (headerEl) headerEl.style.background = cfg.primaryColor;
+    /* ── Overlay ── */
+    self._overlay.className = 'wakz-overlay' + (self.isOpen ? ' wakz-visible' : '');
 
     /* ── Bot Name & Avatar ── */
-    var nameEl = self._chatWindow.querySelector('.wakz-hdr-name');
-    if (nameEl) nameEl.textContent = cfg.botName;
-    var avatarEl = self._chatWindow.querySelector('.wakz-avatar');
-    if (avatarEl) avatarEl.textContent = (cfg.botName || 'W')[0].toUpperCase();
+    if (self._headerNameEl) self._headerNameEl.textContent = cfg.botName;
+    if (self._headerAvatarEl) self._headerAvatarEl.textContent = (cfg.botName || 'W')[0].toUpperCase();
 
     /* ── Header Status ── */
     if (self._headerStatusDot) {
@@ -1098,7 +1192,6 @@
     .then(function (res) { return res.json(); })
     .then(function (data) {
       if (data && data.success && data.messages && data.messages.length > 0) {
-        /* Clear any existing messages (e.g., welcome) and render history */
         self._clearMessages();
         self._knownMessageIds = {};
         var msgs = data.messages;
@@ -1109,7 +1202,6 @@
           var role = m.role === 'user' ? 'user' : 'bot';
           self._appendMessage(role, m.content, false, m.createdAt, m.role === 'human_agent');
         }
-        /* Set last poll time to the most recent message */
         var lastMsg = msgs[msgs.length - 1];
         if (lastMsg && lastMsg.createdAt) {
           self._lastPollTime = lastMsg.createdAt;
@@ -1127,7 +1219,7 @@
 
   WAKZWidget.prototype._startPolling = function () {
     var self = this;
-    self._stopPolling(); /* Clear any existing timer */
+    self._stopPolling();
     if (!self._lastPollTime) {
       self._lastPollTime = new Date().toISOString();
     }
@@ -1147,7 +1239,7 @@
   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 */
+    /* Skip polling while waiting for our own reply */
     if (self._pendingReply) return;
 
     var url = self.server + '/api/v1/embed/chat?api_key=' +
@@ -1171,7 +1263,6 @@
           var isHumanAgent = m.role === 'human_agent';
           self._appendMessage(role, m.content, false, m.createdAt, isHumanAgent);
         }
-        /* Update last poll time */
         var lastMsg = msgs[msgs.length - 1];
         if (lastMsg && lastMsg.createdAt) {
           self._lastPollTime = lastMsg.createdAt;
@@ -1189,13 +1280,19 @@
 
   WAKZWidget.prototype._clearMessages = function () {
     var self = this;
-    self._messagesContainer.innerHTML = '';
+    /* Remove all children except the input area */
+    var children = Array.prototype.slice.call(self._messagesContainer.children);
+    for (var i = 0; i < children.length; i++) {
+      if (children[i] !== self._inputArea) {
+        self._messagesContainer.removeChild(children[i]);
+      }
+    }
     self.messages = [];
     self._knownMessageIds = {};
   };
 
   /* ════════════════════════════════════════════════════════════════
-     APPEND WELCOME MESSAGE (with bot avatar)
+     APPEND WELCOME MESSAGE — no bubble style, matching bot messages
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._appendWelcomeMessage = function (text) {
@@ -1204,36 +1301,30 @@
 
     var wrap = _el('div', { className: 'wakz-welcome-wrap' });
 
-    /* Bot avatar */
-    var avatar = _el('div', { className: 'wakz-welcome-avatar' },
+    /* Bot avatar (22px) */
+    var avatar = _el('div', { className: 'wakz-bot-avatar' },
       [(self.config.botName || 'W')[0].toUpperCase()]);
     wrap.appendChild(avatar);
 
-    /* Bubble */
-    var bubble = _el('div', { className: 'wakz-bubble bot' }, [text]);
-    wrap.appendChild(bubble);
+    /* Bot text content — no bubble */
+    var content = _el('div', { className: 'wakz-bot-content' });
+    content.appendChild(_el('div', { className: 'wakz-bot-text' }, [text]));
+    wrap.appendChild(content);
 
-    self._messagesContainer.appendChild(wrap);
+    /* Insert before input area */
+    self._messagesContainer.insertBefore(wrap, self._inputArea);
     self.messages.push({ sender: 'bot', text: text });
     self._scrollToBottom();
   };
 
   /* ════════════════════════════════════════════════════════════════
-     APPEND MESSAGE TO CHAT
+     APPEND MESSAGE TO CHAT — v3 rendering
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._appendMessage = function (sender, text, isError, timestamp, isHumanAgent) {
     var self = this;
 
-    var row = _el('div', { className: 'wakz-msg-row ' + sender });
-
-    var bubbleClass = 'wakz-bubble ' + sender;
-    if (isError) bubbleClass += ' error-bubble';
-    var bubble = _el('div', { className: bubbleClass });
-
-    bubble.appendChild(document.createTextNode(text));
-
-    /* Timestamp */
+    /* ── Format timestamp ── */
     var tsText = '';
     if (timestamp) {
       try {
@@ -1249,69 +1340,135 @@
       tsText = now.getHours().toString().padStart(2, '0') + ':' +
                now.getMinutes().toString().padStart(2, '0');
     }
-    bubble.appendChild(_el('span', { className: 'wakz-ts' }, [tsText]));
 
-    /* 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);
-    }
+    if (sender === 'user') {
+      /* ── USER MESSAGE: colored bubble with tail ── */
+      var row = _el('div', { className: 'wakz-msg-row user' });
+
+      var bubbleClass = 'wakz-bubble user';
+      if (isError) bubbleClass += ' error-bubble';
+      var bubble = _el('div', { className: bubbleClass });
+      bubble.appendChild(document.createTextNode(text));
+      bubble.appendChild(_el('span', { className: 'wakz-ts' }, [tsText]));
+
+      /* Retry button for error user messages */
+      if (isError) {
+        var str = _strings(self.config.language);
+        var retryBtn = _el('button', { className: 'wakz-retry' }, [
+          _ICONS.error + ' ' + str.retry
+        ]);
+        (function (rowCapture) {
+          retryBtn.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 === text && 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);
+          });
+        })(row);
+        bubble.appendChild(retryBtn);
+      }
 
-    /* Retry button for errors */
-    if (isError) {
-      var str = _strings(self.config.language);
-      var retryBtn = _el('button', { className: 'wakz-retry' }, [
-        _ICONS.error + ' ' + str.retry
-      ]);
-      (function (rowCapture) {
-        retryBtn.addEventListener('click', function () {
-          /* Remove error row */
-          if (rowCapture.parentNode) rowCapture.parentNode.removeChild(rowCapture);
-          /* Find and remove from messages array */
-          for (var i = self.messages.length - 1; i >= 0; i--) {
-            if (self.messages[i].text === text && self.messages[i].isError) {
-              self.messages.splice(i, 1);
-              break;
+      row.appendChild(bubble);
+      self._messagesContainer.insertBefore(row, self._inputArea);
+      self.messages.push({ sender: sender, text: text, isError: !!isError });
+    } else {
+      /* ── BOT / HUMAN AGENT MESSAGE: no bubble, text on background ── */
+      var botRow = _el('div', { className: 'wakz-msg-row bot' });
+
+      /* Small bot avatar (22px) */
+      var botAvatar = _el('div', { className: 'wakz-bot-avatar' },
+        [(self.config.botName || 'W')[0].toUpperCase()]);
+      botRow.appendChild(botAvatar);
+
+      /* Content wrapper */
+      var botContent = _el('div', { className: 'wakz-bot-content' });
+
+      if (isError) {
+        /* Error: subtle red area */
+        var errBubble = _el('div', { className: 'wakz-bubble 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;
+              }
             }
-          }
-          /* Resend last user message */
-          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;
+            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);
-        });
-      })(row);
-      bubble.appendChild(retryBtn);
-    }
+            if (lastUserMsg) self._sendToAPI(lastUserMsg);
+          });
+        })(botRow, text);
+        errBubble.appendChild(errRetryBtn);
+        botContent.appendChild(errBubble);
+      } else {
+        /* Normal bot/human message: no bubble */
+        botContent.appendChild(_el('div', { className: 'wakz-bot-text' }, [text]));
 
-    row.appendChild(bubble);
-    self._messagesContainer.appendChild(row);
+        /* Timestamp */
+        botContent.appendChild(_el('span', { className: 'wakz-bot-ts' }, [tsText]));
+
+        /* Human agent badge */
+        if (isHumanAgent) {
+          var iStr = _strings(self.config.language);
+          var badge = _el('span', { className: 'wakz-human-badge' }, [iStr.humanBadge || '👤 فريق الدعم']);
+          botContent.appendChild(badge);
+        }
+      }
+
+      botRow.appendChild(botContent);
+      self._messagesContainer.insertBefore(botRow, self._inputArea);
+      self.messages.push({ sender: sender, text: text, isError: !!isError });
+    }
 
-    self.messages.push({ sender: sender, text: text, isError: !!isError });
     self._scrollToBottom();
   };
 
   /* ════════════════════════════════════════════════════════════════
-     TYPING INDICATOR
+     TYPING INDICATOR — no bubble, dots on background with avatar
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._showTyping = function () {
     var self = this;
     if (self._typingEl) return;
 
-    self._typingEl = _el('div', { className: 'wakz-msg-row bot' });
-    self._typingEl.innerHTML =
-      '<div class="wakz-typing">' +
-      '<span class="wakz-typing-dot"></span>' +
-      '<span class="wakz-typing-dot"></span>' +
-      '<span class="wakz-typing-dot"></span>' +
-      '</div>';
-    self._messagesContainer.appendChild(self._typingEl);
+    self._typingEl = _el('div', { className: 'wakz-typing-row' });
+
+    /* Small avatar for consistency */
+    self._typingEl.appendChild(_el('div', { className: 'wakz-bot-avatar' },
+      [(self.config.botName || 'W')[0].toUpperCase()]));
+
+    /* Bouncing dots — no bubble wrapper */
+    var typingDots = _el('div', { className: 'wakz-typing' });
+    typingDots.appendChild(_el('span', { className: 'wakz-typing-dot' }));
+    typingDots.appendChild(_el('span', { className: 'wakz-typing-dot' }));
+    typingDots.appendChild(_el('span', { className: 'wakz-typing-dot' }));
+    self._typingEl.appendChild(typingDots);
+
+    self._messagesContainer.insertBefore(self._typingEl, self._inputArea);
     self._scrollToBottom();
   };
 
@@ -1372,7 +1529,7 @@
     self._sendBtn.disabled = true;
     self._showTyping();
 
-    /* Freeze poll time BEFORE sending — prevents polling from fetching our own messages */
+    /* Freeze poll time BEFORE sending */
     self._lastPollTime = new Date().toISOString();
     self._pendingReply = true;
 
@@ -1408,7 +1565,6 @@
       } else {
         self._appendMessage('bot', _strings(self.config.language).errorMsg, true);
       }
-      /* 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();
@@ -1417,7 +1573,6 @@
       self._hideTyping();
       self._pendingReply = false;
       self._appendMessage('bot', _strings(self.config.language).errorMsg, true);
-      /* Advance poll time even on error */
       self._lastPollTime = new Date(Date.now() + 1000).toISOString();
     })
     .finally(function () {
@@ -1432,7 +1587,7 @@
      ════════════════════════════════════════════════════════════════ */
 
   function boot() {
-    try { new WAKZWidget(); } catch (e) { console.error('[WAKZ Widget] Init error:', e); }
+    try { new WAKZWidget(); } catch (e) { console.error('[WAKZ Widget v3.0.0] Init error:', e); }
   }
 
   if (document.readyState === 'loading') {