wakz-chat-widget 3.0.0 → 4.0.0

package/index.js

@@ -1,8 +1,8 @@
 /**
- * WAKZ Chat Widget v3.0.0
+ * WAKZ Chat Widget v4.0.0
  * ─────────────────────────────────────────────────────────────────
  * A production-grade, self-contained chat widget using Shadow DOM.
- * Complete UI/UX revamp — glass morphism, centered modal, modern design.
+ * 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>
  *
@@ -127,17 +127,24 @@
     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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>',
+      '<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 viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>',
+      '<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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+      '<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>'
   };
@@ -149,7 +156,7 @@
   var _I18N = {
     ar: {
       placeholder: 'اكتب رسالتك...',
-      online: 'متصل',
+      online: 'متصل الآن',
       offline: 'غير متصل',
       errorMsg: 'حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.',
       retry: 'إعادة المحاولة',
@@ -157,7 +164,8 @@
       openChat: 'فتح المحادثة',
       closeChat: 'إغلاق المحادثة',
       sendMessage: 'إرسال',
-      humanBadge: '👤 فريق الدعم'
+      humanBadge: 'فريق الدعم',
+      defaultSubtitle: 'المساعد الذكي'
     },
     en: {
       placeholder: 'Type your message...',
@@ -169,7 +177,8 @@
       openChat: 'Open chat',
       closeChat: 'Close chat',
       sendMessage: 'Send',
-      humanBadge: '👤 Support Team'
+      humanBadge: 'Support Team',
+      defaultSubtitle: 'Smart Assistant'
     },
     fr: {
       placeholder: 'Tapez votre message...',
@@ -181,7 +190,8 @@
       openChat: 'Ouvrir le chat',
       closeChat: 'Fermer le chat',
       sendMessage: 'Envoyer',
-      humanBadge: '👤 Équipe de support'
+      humanBadge: 'Équipe de support',
+      defaultSubtitle: 'Assistant intelligent'
     }
   };
 
@@ -195,10 +205,11 @@
 
   var _DEFAULTS = {
     botName: 'WAKZ',
+    botSubtitle: '',
     welcomeMessage: '',
-    primaryColor: '#171717',
-    chatBg: '#f8f9fa',
-    btnColor: '#171717',
+    primaryColor: '#111111',
+    chatBg: '#ffffff',
+    btnColor: '#111111',
     widgetBg: '#ffffff',
     position: 'bottom-right',
     language: 'en',
@@ -245,16 +256,18 @@
     self._root = null;
     self._overlay = null;
     self._chatWindow = null;
-    self._messagesContainer = null;
-    self._inputArea = 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._headerAvatarEl = null;
-    self._headerNameEl = null;
+    self._closeBtn = null;
 
     /* ── Bootstrap ── */
     self._injectCSS();
@@ -265,7 +278,7 @@
   }
 
   /* ════════════════════════════════════════════════════════════════
-     CSS — Complete styling injected into Shadow DOM (v3.0.0 revamp)
+     CSS — Complete Liquid Glass design (v4.0.0)
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._injectCSS = function () {
@@ -275,18 +288,12 @@
     self._styleEl.textContent = [
       /* ── CSS Custom Properties (theming) ── */
       ':host {',
-      '  --wakz-primary: #171717;',
-      '  --wakz-btn: #171717;',
-      '  --wakz-chat-bg: #f8f9fa;',
+      '  --wakz-primary: #111111;',
+      '  --wakz-btn: #111111;',
+      '  --wakz-chat-bg: #ffffff;',
       '  --wakz-widget-bg: #ffffff;',
-      '  --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 25px 60px rgba(0,0,0,.15), 0 10px 20px rgba(0,0,0,.1);',
-      '  --wakz-transition: 200ms ease;',
-      '  --wakz-font: \'Inter\', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;',
       '  all: initial;',
-      '  font-family: var(--wakz-font);',
+      '  font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;',
       '}',
 
       /* ── Reset ── */
@@ -297,38 +304,57 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         FLOATING ACTION BUTTON (FAB) — 48px, independent color
+         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: 48px;',
-      '  height: 48px;',
-      '  border-radius: var(--wakz-icon-radius);',
+      '  width: 56px;',
+      '  height: 56px;',
+      '  border-radius: 50%;',
       '  border: none;',
       '  cursor: pointer;',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
-      '  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);',
+      '  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;',
-      '  background: var(--wakz-btn);',
       '}',
       '.wakz-fab:hover {',
-      '  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.94);',
-      '}',
-      '.wakz-fab svg {',
-      '  width: 22px;',
-      '  height: 22px;',
-      '  color: #ffffff;',
-      '  pointer-events: none;',
+      '  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; }',
@@ -341,14 +367,8 @@
       '}',
 
       /* ── FAB Entrance Bounce ── */
-      '@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); }',
-      '}',
       '.wakz-fab-enter {',
-      '  animation: wakz-fab-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;',
+      '  animation: wakz-fab-enter 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;',
       '}',
 
       /* ══════════════════════════════════════════════════
@@ -365,31 +385,18 @@
       '  z-index: 2;',
       '  transition: background 0.3s ease;',
       '}',
-      '.wakz-fab-pos-bl .wakz-fab-dot {',
-      '  right: auto;',
-      '  left: -1px;',
-      '}',
-
-      /* ── Online (green pulse) ── */
+      '.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;',
       '}',
-      '@keyframes wakz-dot-pulse {',
-      '  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }',
-      '  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;',
-      '}',
-
-      /* ── Offline (red, no pulse) ── */
       '.wakz-fab-dot.offline {',
       '  background: #ef4444;',
       '  animation: none;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         OVERLAY / BACKDROP — glass blur behind modal
+         OVERLAY / BACKDROP — blur behind modal
          ══════════════════════════════════════════════════ */
       '.wakz-overlay {',
       '  position: fixed;',
@@ -400,7 +407,7 @@
       '  -webkit-backdrop-filter: blur(4px);',
       '  opacity: 0;',
       '  pointer-events: none;',
-      '  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);',
+      '  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);',
       '}',
       '.wakz-overlay.wakz-visible {',
       '  opacity: 1;',
@@ -408,7 +415,7 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         CHAT WINDOW — Centered Modal
+         CHAT WINDOW — Centered, 420x560, 24px radius
          ══════════════════════════════════════════════════ */
       '.wakz-window {',
       '  position: fixed;',
@@ -416,18 +423,23 @@
       '  top: 50%;',
       '  left: 50%;',
       '  transform: translate(-50%, -50%) scale(0.95);',
-      '  width: 390px;',
-      '  height: min(580px, 80vh);',
-      '  border-radius: 16px;',
+      '  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 25px 60px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.1);',
+      '  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);',
+      '  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;',
@@ -436,249 +448,342 @@
       '}',
 
       /* ══════════════════════════════════════════════════
-         HEADER — Glass effect matching main site
+         FLOATING HEADER WRAP — absolute over messages
          ══════════════════════════════════════════════════ */
-      '.wakz-hdr {',
-      '  flex-shrink: 0;',
-      '  height: 52px;',
-      '  padding: 0 16px;',
-      '  display: flex;',
-      '  align-items: center;',
-      '  justify-content: space-between;',
-      '  color: #171717;',
-      '  cursor: default;',
-      '  user-select: none;',
-      '  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-header-wrap {',
+      '  position: absolute;',
+      '  top: 12px;',
+      '  right: 12px;',
+      '  left: 12px;',
+      '  z-index: 100;',
+      '  pointer-events: none;',
       '}',
-      '.wakz-hdr-left {',
+
+      /* ── HEADER — Liquid Glass Pill ── */
+      '.wakz-header {',
+      '  pointer-events: all;',
       '  display: flex;',
       '  align-items: center;',
-      '  gap: 10px;',
-      '  min-width: 0;',
-      '  flex: 1;',
+      '  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;',
       '}',
-      '.wakz-hdr-right {',
-      '  display: flex;',
-      '  align-items: center;',
-      '  gap: 8px;',
-      '  flex-shrink: 0;',
+
+      /* ── 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;',
       '}',
 
-      /* ── Bot Avatar (32px circle) ── */
-      '.wakz-avatar {',
-      '  width: 32px;',
-      '  height: 32px;',
-      '  border-radius: 50%;',
-      '  background: rgba(23,23,23,0.1);',
+      /* ── Brand (right side in RTL) ── */
+      '.wakz-hdr-brand {',
       '  display: flex;',
       '  align-items: center;',
-      '  justify-content: center;',
-      '  font-weight: 700;',
-      '  font-size: 14px;',
       '  flex-shrink: 0;',
-      '  color: var(--wakz-primary);',
+      '  padding: 0 6px;',
       '}',
-
-      /* ── Header Info ── */
       '.wakz-hdr-info {',
       '  display: flex;',
       '  flex-direction: column;',
-      '  min-width: 0;',
+      '  gap: 1px;',
       '}',
-      '.wakz-hdr-name {',
+      '.wakz-hdr-title {',
       '  font-size: 15px;',
-      '  font-weight: 600;',
-      '  line-height: 1.3;',
-      '  color: #171717;',
-      '  white-space: nowrap;',
-      '  overflow: hidden;',
-      '  text-overflow: ellipsis;',
+      '  font-weight: 900;',
+      '  color: #0a0a0a;',
+      '  letter-spacing: -0.2px;',
+      '  line-height: 1.2;',
+      '  font-family: "Cairo", sans-serif;',
       '}',
-      '.wakz-hdr-status {',
+      '.wakz-hdr-subtitle {',
       '  font-size: 11px;',
-      '  color: #A3A3A3;',
+      '  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: 4px;',
-      '  margin-top: 1px;',
+      '  gap: 8px;',
+      '  flex-shrink: 0;',
       '}',
 
-      /* ── Header Status Dot (6px) ── */
-      '.wakz-hdr-status-dot {',
+      /* ── 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%;',
-      '  display: inline-block;',
       '  flex-shrink: 0;',
-      '  transition: background 0.3s ease;',
       '}',
-      '.wakz-hdr-status-dot.online { background: #22c55e; }',
-      '.wakz-hdr-status-dot.offline { background: #ef4444; }',
+      '.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 (28px circle, dark) ── */
+      /* ── Close Button (glass circle) ── */
       '.wakz-close {',
-      '  width: 28px;',
-      '  height: 28px;',
+      '  width: 30px;',
+      '  height: 30px;',
+      '  min-width: 30px;',
+      '  min-height: 30px;',
       '  border-radius: 50%;',
       '  border: none;',
-      '  background: rgba(23,23,23,0.05);',
-      '  color: #525252;',
       '  cursor: pointer;',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
-      '  transition: background var(--wakz-transition), color var(--wakz-transition);',
+      '  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;',
-      '  flex-shrink: 0;',
       '}',
       '.wakz-close:hover {',
-      '  background: rgba(23,23,23,0.1);',
-      '  color: #171717;',
-      '}',
-      '.wakz-close svg {',
-      '  width: 16px;',
-      '  height: 16px;',
+      '  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, padding-bottom for input
+         MESSAGES AREA — scrollable
          ══════════════════════════════════════════════════ */
       '.wakz-msgs {',
       '  flex: 1;',
       '  overflow-y: auto;',
       '  overflow-x: hidden;',
-      '  padding: 16px 14px 88px;',
-      '  display: flex;',
-      '  flex-direction: column;',
-      '  gap: 4px;',
+      '  padding: 0;',
+      '  padding-top: 76px;',
+      '  padding-bottom: 100px;',
+      '  padding-right: 14px;',
+      '  padding-left: 14px;',
       '  scroll-behavior: smooth;',
-      '  background: var(--wakz-chat-bg);',
       '  position: relative;',
       '}',
-      '.wakz-msgs::-webkit-scrollbar { width: 4px; }',
+      '.wakz-msgs::-webkit-scrollbar { width: 3px; }',
       '.wakz-msgs::-webkit-scrollbar-track { background: transparent; }',
       '.wakz-msgs::-webkit-scrollbar-thumb {',
-      '  background: rgba(0,0,0,0.1);',
-      '  border-radius: 10px;',
+      '  background: rgba(0,0,0,0.08);',
+      '  border-radius: 99px;',
+      '}',
+
+      '.wakz-msgs-inner {',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  gap: 6px;',
       '}',
 
       /* ══════════════════════════════════════════════════
-         MESSAGE ROWS — new v3 styles
+         MESSAGE ROWS
          ══════════════════════════════════════════════════ */
       '.wakz-msg-row {',
       '  display: flex;',
-      '  animation: wakz-msg-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;',
-      '}',
-      '.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%;',
+      '  align-items: flex-end;',
+      '  width: 100%;',
+      '  animation: wakz-fade-slide-up 0.3s cubic-bezier(0.22,1,0.36,1) both;',
       '}',
 
-      '@keyframes wakz-msg-in {',
-      '  0%   { opacity: 0; transform: translateY(8px); }',
-      '  100% { opacity: 1; transform: translateY(0); }',
+      /* ── USER MESSAGE — dark bubble ── */
+      '.wakz-msg-row--user { justify-content: flex-end; }',
+      '.wakz-user-card {',
+      '  max-width: 78%;',
+      '  padding: 10px 14px 8px;',
+      '  background: #111111;',
+      '  color: #ffffff;',
+      '  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);',
       '}',
-
-      /* ── User Bubbles ── */
-      '.wakz-bubble.user {',
-      '  padding: 10px 14px;',
-      '  font-size: 14px;',
-      '  line-height: 1.55;',
-      '  word-wrap: break-word;',
-      '  overflow-wrap: break-word;',
+      '.wakz-user-text {',
+      '  font-size: 13.5px;',
+      '  font-weight: 400;',
+      '  line-height: 1.7;',
       '  white-space: pre-wrap;',
-      '  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);',
+      '  word-break: break-word;',
+      '  text-align: right;',
+      '  font-family: "Tajawal", "Cairo", sans-serif;',
+      '}',
+      '.wakz-user-time {',
+      '  font-size: 9.5px;',
+      '  color: rgba(255,255,255,0.4);',
+      '  display: block;',
+      '  margin-top: 4px;',
+      '  text-align: left;',
+      '  font-family: "Tajawal", sans-serif;',
       '}',
 
-      /* ── Bot Messages — NO bubble, text directly on background ── */
+      /* ── 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;',
-      '  gap: 2px;',
-      '  min-width: 0;',
+      '  align-items: flex-end;',
+      '  gap: 1px;',
+      '}',
+      '.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: 14px;',
-      '  line-height: 1.6;',
-      '  color: #404040;',
-      '  word-wrap: break-word;',
-      '  overflow-wrap: break-word;',
+      '  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-bot-ts {',
-      '  font-size: 10px;',
-      '  color: #A3A3A3;',
+      '.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;',
       '}',
 
-      /* ── Bot Avatar (22px, inline with message) ── */
-      '.wakz-bot-avatar {',
-      '  width: 22px;',
-      '  height: 22px;',
-      '  border-radius: 50%;',
-      '  background: rgba(23,23,23,0.08);',
+      /* ── SUPPORT MESSAGE — green accent ── */
+      '.wakz-msg-row--support { justify-content: flex-start; }',
+      '.wakz-support-content {',
+      '  max-width: 78%;',
       '  display: flex;',
-      '  align-items: center;',
-      '  justify-content: center;',
-      '  font-weight: 700;',
+      '  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;',
-      '  color: var(--wakz-primary);',
-      '  margin-top: 2px;',
       '}',
-
-      /* ── User Timestamp ── */
-      '.wakz-ts {',
-      '  display: block;',
-      '  font-size: 10px;',
-      '  opacity: 0.7;',
-      '  margin-top: 3px;',
+      '.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-bubble.error-bubble {',
+      '.wakz-error-bubble {',
+      '  max-width: 78%;',
       '  padding: 10px 14px;',
-      '  font-size: 14px;',
-      '  line-height: 1.55;',
-      '  word-wrap: break-word;',
-      '  overflow-wrap: break-word;',
+      '  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;',
       '}',
 
-      /* ── Human Agent Badge ── */
-      '.wakz-human-badge {',
-      '  display: inline-block;',
-      '  font-size: 10px;',
-      '  background: rgba(22, 163, 74, 0.08);',
-      '  color: #16A34A;',
-      '  border-radius: 6px;',
-      '  padding: 2px 8px;',
-      '  margin-top: 4px;',
-      '  font-weight: 600;',
-      '  letter-spacing: 0.2px;',
-      '}',
-
-      /* ── Retry Button (inside error bubble) ── */
+      /* ── Retry Button ── */
       '.wakz-retry {',
       '  display: inline-flex;',
       '  align-items: center;',
@@ -692,183 +797,226 @@
       '  background: #ffffff;',
       '  color: #dc2626;',
       '  cursor: pointer;',
-      '  font-family: var(--wakz-font);',
-      '  transition: background var(--wakz-transition), border-color var(--wakz-transition);',
+      '  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;',
-      '}',
+      '.wakz-retry:hover { background: #fef2f2; border-color: #f87171; }',
 
       /* ══════════════════════════════════════════════════
-         TYPING INDICATOR — no bubble, just dots on background
+         TYPING INDICATOR
          ══════════════════════════════════════════════════ */
       '.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;',
+      '  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 {',
+      '.wakz-typing-dots {',
       '  display: flex;',
       '  align-items: center;',
       '  gap: 4px;',
-      '  padding: 6px 0;',
+      '  padding: 8px 12px;',
       '}',
-      '.wakz-typing-dot {',
+      '.wakz-typing-dots span {',
       '  width: 6px;',
       '  height: 6px;',
       '  border-radius: 50%;',
-      '  background: #A3A3A3;',
-      '  animation: wakz-bounce-dot 1.4s ease-in-out infinite;',
-      '}',
-      '.wakz-typing-dot:nth-child(2) { animation-delay: 0.16s; }',
-      '.wakz-typing-dot:nth-child(3) { animation-delay: 0.32s; }',
-      '@keyframes wakz-bounce-dot {',
-      '  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }',
-      '  30% { transform: translateY(-7px); opacity: 1; }',
+      '  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; }',
 
       /* ══════════════════════════════════════════════════
-         INPUT AREA — Floating, glass effect, inside messages
+         FLOATING INPUT WRAP — absolute bottom
          ══════════════════════════════════════════════════ */
-      '.wakz-input-area {',
+      '.wakz-input-wrap {',
       '  position: absolute;',
       '  bottom: 12px;',
-      '  left: 12px;',
       '  right: 12px;',
+      '  left: 12px;',
+      '  z-index: 100;',
+      '  pointer-events: none;',
+      '}',
+      '.wakz-input-row {',
+      '  pointer-events: all;',
+      '  width: 100%;',
       '  display: flex;',
-      '  align-items: flex-end;',
+      '  align-items: center;',
       '  gap: 8px;',
-      '  padding: 8px 10px 8px 14px;',
-      '  border-radius: 12px;',
+      '}',
+
+      /* ── 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);',
-      '  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;',
+      '  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;',
-      '  border-radius: 0;',
-      '  padding: 6px 4px;',
-      '  font-size: 14px;',
-      '  line-height: 1.4;',
       '  outline: none;',
-      '  font-family: var(--wakz-font);',
-      '  resize: none;',
-      '  max-height: 80px;',
-      '  min-height: 22px;',
-      '  overflow-y: auto;',
       '  background: transparent;',
-      '  color: #171717;',
-      '}',
-      '.wakz-input:focus {',
-      '  outline: none;',
+      '  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: #A3A3A3;',
+      '  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 (36px floating circle, separate from input) ── */
+      /* ── Send Button — 40px circle, separate ── */
       '.wakz-send {',
-      '  width: 36px;',
-      '  height: 36px;',
-      '  min-width: 36px;',
+      '  flex-shrink: 0;',
+      '  width: 40px;',
+      '  height: 40px;',
+      '  min-width: 40px;',
+      '  min-height: 40px;',
       '  border-radius: 50%;',
       '  border: none;',
-      '  color: #ffffff;',
       '  cursor: pointer;',
       '  display: flex;',
       '  align-items: center;',
       '  justify-content: center;',
-      '  flex-shrink: 0;',
-      '  transition: transform var(--wakz-transition), opacity var(--wakz-transition), box-shadow var(--wakz-transition);',
+      '  position: relative;',
+      '  overflow: hidden;',
+      '  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);',
       '  outline: none;',
-      '  background: var(--wakz-primary);',
-      '  box-shadow: 0 2px 8px rgba(0,0,0,0.12);',
-      '}',
-      '.wakz-send:hover:not(:disabled) {',
-      '  transform: scale(1.05);',
-      '  box-shadow: 0 4px 14px rgba(0,0,0,0.18);',
-      '}',
-      '.wakz-send:disabled {',
-      '  opacity: 0.3;',
-      '  cursor: not-allowed;',
-      '}',
-      '.wakz-send:not(:disabled):active {',
-      '  transform: scale(0.92);',
+      '  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: 16px;',
-      '  height: 16px;',
+      '  width: 18px;',
+      '  height: 18px;',
       '  pointer-events: none;',
       '}',
-
-      /* ══════════════════════════════════════════════════
-         WELCOME MESSAGE — same as bot (no bubble)
-         ══════════════════════════════════════════════════ */
-      '.wakz-welcome-wrap {',
-      '  display: flex;',
-      '  align-items: flex-start;',
-      '  gap: 8px;',
-      '  max-width: 80%;',
-      '  align-self: flex-start;',
-      '  animation: wakz-msg-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;',
+      /* ── Send Active State ── */
+      '.wakz-send--active {',
+      '  background: #111111;',
+      '  border-color: #111111;',
+      '  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: #222;',
+      '  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-bubble.user {',
-      '  border-bottom-right-radius: 14px;',
-      '  border-bottom-left-radius: 4px;',
+      '.wakz-rtl .wakz-user-card {',
+      '  border-radius: 18px 18px 18px 5px;',
       '}',
-      '.wakz-rtl .wakz-bubble.error-bubble {',
+      '.wakz-rtl .wakz-error-bubble {',
       '  border-bottom-left-radius: 14px;',
       '  border-bottom-right-radius: 4px;',
       '}',
-      '.wakz-rtl .wakz-ts {',
-      '  text-align: left;',
-      '}',
 
       /* ══════════════════════════════════════════════════
-         MOBILE RESPONSIVE — centered modal, NOT fullscreen
+         RESPONSIVE
          ══════════════════════════════════════════════════ */
-      '@media (max-width: 480px) {',
+      '@media (max-width: 440px) {',
       '  .wakz-window {',
-      '    width: calc(100vw - 32px) !important;',
-      '    height: min(500px, 75vh) !important;',
-      '  }',
-      '  .wakz-window.wakz-visible {',
-      '    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;',
+      '    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 — v3.0.0 new structure
+     DOM CREATION — v4.0.0 Liquid Glass structure
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._createDOM = function () {
@@ -882,6 +1030,13 @@
     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);
@@ -904,46 +1059,69 @@
     self._overlay = _el('div', { className: 'wakz-overlay' });
     self._root.appendChild(self._overlay);
 
-    /* ══════════════ CHAT WINDOW (Centered Modal) ══════════════ */
+    /* ══════════════ CHAT WINDOW ══════════════ */
     self._chatWindow = _el('div', { className: 'wakz-window' });
 
-    /* ── Header (glass effect, dark text) ── */
-    var headerEl = _el('div', { className: 'wakz-hdr' });
+    /* ── Messages Container (with floating header + input inside) ── */
+    self._messagesContainer = _el('div', { className: 'wakz-msgs' });
 
-    /* Left side: avatar + name + status */
-    var headerLeft = _el('div', { className: 'wakz-hdr-left' });
-    var avatarLetter = (self.config.botName || 'W')[0].toUpperCase();
-    self._headerAvatarEl = _el('div', { className: 'wakz-avatar' }, [avatarLetter]);
-    headerLeft.appendChild(self._headerAvatarEl);
+    /* ══════════════ FLOATING HEADER (pill, absolute over messages) ══════════════ */
+    var headerWrap = _el('div', { className: 'wakz-header-wrap' });
+    var header = _el('div', { className: 'wakz-header' });
 
-    var headerInfo = _el('div', { className: 'wakz-hdr-info' });
-    self._headerNameEl = _el('span', { className: 'wakz-hdr-name' }, [self.config.botName]);
-    headerInfo.appendChild(self._headerNameEl);
+    /* Specular highlight (real DOM element, not ::before) */
+    header.appendChild(_el('div', { className: 'wakz-specular' }));
 
-    var statusLine = _el('span', { className: 'wakz-hdr-status' });
-    self._headerStatusDot = _el('span', { className: 'wakz-hdr-status-dot ' + (self.config.online ? 'online' : 'offline') });
-    if (self.config.showStatus) statusLine.appendChild(self._headerStatusDot);
-    self._headerStatusText = document.createTextNode(self.config.online ? str.online : str.offline);
-    statusLine.appendChild(self._headerStatusText);
-    headerInfo.appendChild(statusLine);
+    /* 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);
 
-    headerLeft.appendChild(headerInfo);
-    headerEl.appendChild(headerLeft);
+    var subtitleText = self.config.botSubtitle || str.defaultSubtitle || '';
+    self._headerSubtitleEl = _el('span', { className: 'wakz-hdr-subtitle' }, [subtitleText]);
+    info.appendChild(self._headerSubtitleEl);
 
-    /* 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;
-    headerRight.appendChild(closeBtn);
-    headerEl.appendChild(headerRight);
+    brand.appendChild(info);
+    header.appendChild(brand);
 
-    self._chatWindow.appendChild(headerEl);
+    /* Actions side (left in RTL) */
+    var actions = _el('div', { className: 'wakz-hdr-actions' });
 
-    /* ── Messages Container (with floating input area inside) ── */
-    self._messagesContainer = _el('div', { className: 'wakz-msgs' });
+    /* 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 Area (inside messages container) ── */
-    self._inputArea = _el('div', { className: 'wakz-input-area' });
+    /* ══════════════ 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',
@@ -951,18 +1129,21 @@
       rows: 1,
       dir: isRtl ? 'rtl' : 'ltr'
     });
-    self._inputArea.appendChild(self._inputEl);
+    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;
-    self._inputArea.appendChild(self._sendBtn);
+    inputRow.appendChild(self._sendBtn);
 
-    self._messagesContainer.appendChild(self._inputArea);
-    self._chatWindow.appendChild(self._messagesContainer);
+    self._inputWrap.appendChild(inputRow);
+    self._messagesContainer.appendChild(self._inputWrap);
 
+    self._chatWindow.appendChild(self._messagesContainer);
     self._root.appendChild(self._chatWindow);
   };
 
@@ -984,7 +1165,7 @@
     });
 
     /* Close button click */
-    self._chatWindow.querySelector('.wakz-close').addEventListener('click', function () {
+    self._closeBtn.addEventListener('click', function () {
       self.toggleChat(false);
     });
 
@@ -1001,10 +1182,16 @@
       }
     });
 
-    /* Auto-resize textarea (max 80px) */
+    /* 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, 80) + 'px';
+      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 */
@@ -1100,9 +1287,13 @@
       self._statusDot.className = 'wakz-fab-dot offline';
       self._statusDot.style.display = '';
     }
-    /* Update header status */
+    /* 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-hdr-status-dot offline';
+      self._headerStatusDot.className = 'wakz-status-dot';
     }
     if (self._headerStatusText) {
       self._headerStatusText.textContent = _strings(self.config.language).offline;
@@ -1123,7 +1314,6 @@
     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');
@@ -1143,17 +1333,24 @@
     /* ── Overlay ── */
     self._overlay.className = 'wakz-overlay' + (self.isOpen ? ' wakz-visible' : '');
 
-    /* ── Bot Name & Avatar ── */
-    if (self._headerNameEl) self._headerNameEl.textContent = cfg.botName;
-    if (self._headerAvatarEl) self._headerAvatarEl.textContent = (cfg.botName || 'W')[0].toUpperCase();
-
-    /* ── Header Status ── */
-    if (self._headerStatusDot) {
-      self._headerStatusDot.className = 'wakz-hdr-status-dot ' + (cfg.online ? 'online' : 'offline');
-      self._headerStatusDot.style.display = cfg.showStatus ? '' : 'none';
+    /* ── 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;
     }
-    if (self._headerStatusText) {
-      self._headerStatusText.textContent = cfg.online ? str.online : str.offline;
+
+    /* ── 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 ── */
@@ -1161,8 +1358,7 @@
     self._inputEl.dir = isRtl ? 'rtl' : 'ltr';
 
     /* ── Close button label ── */
-    var closeBtn = self._chatWindow.querySelector('.wakz-close');
-    if (closeBtn) closeBtn.setAttribute('aria-label', str.closeChat);
+    if (self._closeBtn) self._closeBtn.setAttribute('aria-label', str.closeChat);
 
     /* ── Send button label ── */
     self._sendBtn.setAttribute('aria-label', str.sendMessage);
@@ -1280,11 +1476,10 @@
 
   WAKZWidget.prototype._clearMessages = function () {
     var self = this;
-    /* 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]);
+    /* Remove all children from messages-inner */
+    if (self._messagesInner) {
+      while (self._messagesInner.firstChild) {
+        self._messagesInner.removeChild(self._messagesInner.firstChild);
       }
     }
     self.messages = [];
@@ -1292,33 +1487,34 @@
   };
 
   /* ════════════════════════════════════════════════════════════════
-     APPEND WELCOME MESSAGE — no bubble style, matching bot messages
+     APPEND WELCOME MESSAGE — no bubble, matching bot messages
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._appendWelcomeMessage = function (text) {
     var self = this;
     if (!text) return;
 
-    var wrap = _el('div', { className: 'wakz-welcome-wrap' });
-
-    /* Bot avatar (22px) */
-    var avatar = _el('div', { className: 'wakz-bot-avatar' },
-      [(self.config.botName || 'W')[0].toUpperCase()]);
-    wrap.appendChild(avatar);
+    var row = _el('div', { className: 'wakz-msg-row wakz-msg-row--bot' });
 
-    /* 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);
 
-    /* Insert before input area */
-    self._messagesContainer.insertBefore(wrap, self._inputArea);
+    /* 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 — v3 rendering
+     APPEND MESSAGE TO CHAT — v4 rendering
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._appendMessage = function (sender, text, isError, timestamp, isHumanAgent) {
@@ -1342,26 +1538,22 @@
     }
 
     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 */
+      /* ── USER MESSAGE: dark bubble (#111) ── */
       if (isError) {
-        var str = _strings(self.config.language);
-        var retryBtn = _el('button', { className: 'wakz-retry' }, [
-          _ICONS.error + ' ' + str.retry
+        /* 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) {
-          retryBtn.addEventListener('click', function () {
+        (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 === text && self.messages[i].isError) {
+              if (self.messages[i].text === errText && self.messages[i].isError) {
                 self.messages.splice(i, 1);
                 break;
               }
@@ -1375,36 +1567,60 @@
             }
             if (lastUserMsg) self._sendToAPI(lastUserMsg);
           });
-        })(row);
-        bubble.appendChild(retryBtn);
+        })(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 });
       }
-
-      row.appendChild(bubble);
-      self._messagesContainer.insertBefore(row, self._inputArea);
-      self.messages.push({ sender: sender, text: text, isError: !!isError });
+    } 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 / 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' });
-
+      /* ── BOT MESSAGE: no bubble, on background ── */
       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
+        /* 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) {
-          errRetryBtn.addEventListener('click', function () {
+          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) {
@@ -1421,34 +1637,38 @@
             }
             if (lastUserMsg) self._sendToAPI(lastUserMsg);
           });
-        })(botRow, text);
-        errBubble.appendChild(errRetryBtn);
-        botContent.appendChild(errBubble);
+        })(botErrRow, text);
+        botErrBubble.appendChild(botErrRetry);
+        botErrRow.appendChild(botErrBubble);
+        self._messagesInner.appendChild(botErrRow);
+        self.messages.push({ sender: sender, text: text, isError: true });
       } else {
-        /* Normal bot/human message: no bubble */
-        botContent.appendChild(_el('div', { className: 'wakz-bot-text' }, [text]));
+        /* 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-ts' }, [tsText]));
+        botContent.appendChild(_el('span', { className: 'wakz-bot-time' }, [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._messagesInner.appendChild(botRow);
+        self.messages.push({ sender: sender, text: text, isError: false });
       }
-
-      botRow.appendChild(botContent);
-      self._messagesContainer.insertBefore(botRow, self._inputArea);
-      self.messages.push({ sender: sender, text: text, isError: !!isError });
     }
 
     self._scrollToBottom();
   };
 
   /* ════════════════════════════════════════════════════════════════
-     TYPING INDICATOR — no bubble, dots on background with avatar
+     TYPING INDICATOR — dots with label, no bubble
      ════════════════════════════════════════════════════════════════ */
 
   WAKZWidget.prototype._showTyping = function () {
@@ -1457,18 +1677,20 @@
 
     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()]));
+    var typingContent = _el('div', { className: 'wakz-typing-content' });
+
+    /* Typing label */
+    typingContent.appendChild(_el('span', { className: 'wakz-typing-label' }, [self.config.botName]));
 
-    /* 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);
+    /* 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._messagesContainer.insertBefore(self._typingEl, self._inputArea);
+    self._typingEl.appendChild(typingContent);
+    self._messagesInner.appendChild(self._typingEl);
     self._scrollToBottom();
   };
 
@@ -1508,6 +1730,7 @@
     /* Clear input */
     self._inputEl.value = '';
     self._inputEl.style.height = 'auto';
+    self._sendBtn.classList.remove('wakz-send--active');
 
     /* Send to API */
     self._sendToAPI(text);
@@ -1587,7 +1810,7 @@
      ════════════════════════════════════════════════════════════════ */
 
   function boot() {
-    try { new WAKZWidget(); } catch (e) { console.error('[WAKZ Widget v3.0.0] Init error:', e); }
+    try { new WAKZWidget(); } catch (e) { console.error('[WAKZ Widget v4.0.0] Init error:', e); }
   }
 
   if (document.readyState === 'loading') {