@pocketping/widget 1.6.0 → 1.8.0

package/dist/index.js

@@ -2,12 +2,42 @@
 import { render, h as h2 } from "preact";
 
 // src/components/ChatWidget.tsx
-import { Fragment } from "preact";
-import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+import { Fragment as Fragment2 } from "preact";
+import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback } from "preact/hooks";
 
 // src/components/styles.ts
-function styles(primaryColor, theme) {
+function resolveThemeColor(color, isDark, defaultLight, defaultDark) {
+  if (!color) {
+    return isDark ? defaultDark : defaultLight;
+  }
+  if (typeof color === "string") {
+    return color;
+  }
+  return isDark ? color.dark : color.light;
+}
+function styles(options) {
+  const { primaryColor, theme, headerColor, footerColor, chatBackground, toggleColor } = options;
   const isDark = theme === "dark";
+  const resolvedHeaderColor = resolveThemeColor(headerColor, isDark, "#008069", "#202c33");
+  const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
+  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
+  const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
+  const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
+  const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
+  const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
+  const chatBgColor = isDark ? "#0b141a" : "#e5ddd5";
+  let chatBgImage = whatsappPattern;
+  let chatBgSize = "auto";
+  if (resolvedChatBg === "plain") {
+    chatBgImage = "none";
+  } else if (resolvedChatBg === "dots") {
+    chatBgImage = dotsPattern;
+  } else if (resolvedChatBg === "whatsapp" || !resolvedChatBg) {
+    chatBgImage = whatsappPattern;
+  } else if (resolvedChatBg.startsWith("http") || resolvedChatBg.startsWith("/") || resolvedChatBg.startsWith("data:")) {
+    chatBgImage = `url("${resolvedChatBg}")`;
+    chatBgSize = "cover";
+  }
   const colors = {
     bg: isDark ? "#1f2937" : "#ffffff",
     bgSecondary: isDark ? "#374151" : "#f3f4f6",
@@ -16,6 +46,13 @@ function styles(primaryColor, theme) {
     border: isDark ? "#4b5563" : "#e5e7eb",
     messageBg: isDark ? "#374151" : "#f3f4f6"
   };
+  function adjustBrightness(hex, percent) {
+    const num = parseInt(hex.replace("#", ""), 16);
+    const r = Math.min(255, Math.max(0, (num >> 16) + percent));
+    const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
+    const b = Math.min(255, Math.max(0, (num & 255) + percent));
+    return "#" + (16777216 + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  }
   return `
     #pocketping-container {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -24,31 +61,47 @@ function styles(primaryColor, theme) {
       color: ${colors.text};
     }
 
+    #pocketping-container,
+    #pocketping-container * {
+      box-sizing: border-box;
+    }
+
+    #pocketping-container img,
+    #pocketping-container video {
+      max-width: 100%;
+      height: auto;
+    }
+
     .pp-toggle {
       position: fixed;
-      width: 56px;
-      height: 56px;
+      width: 60px;
+      height: 60px;
       border-radius: 50%;
-      background: ${primaryColor};
+      background: ${resolvedToggleColor};
       color: white;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      transition: transform 0.2s, box-shadow 0.2s;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
       z-index: 9999;
     }
 
     .pp-toggle:hover {
-      transform: scale(1.05);
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+      transform: scale(1.08);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
+      background: ${resolvedToggleHoverColor};
+    }
+
+    .pp-toggle:active {
+      transform: scale(0.95);
     }
 
     .pp-toggle svg {
-      width: 24px;
-      height: 24px;
+      width: 28px;
+      height: 28px;
     }
 
     .pp-toggle.pp-bottom-right {
@@ -99,13 +152,13 @@ function styles(primaryColor, theme) {
 
     .pp-window {
       position: fixed;
-      width: 380px;
-      height: 520px;
+      width: 375px;
+      height: 550px;
       max-height: calc(100vh - 100px);
       max-height: calc(100dvh - 100px);
-      background: ${colors.bg};
-      border-radius: 16px;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+      background: ${isDark ? "#111b21" : "#ffffff"};
+      border-radius: 12px;
+      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.15);
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -114,12 +167,12 @@ function styles(primaryColor, theme) {
     }
 
     .pp-window.pp-bottom-right {
-      bottom: 88px;
+      bottom: 20px;
       right: 20px;
     }
 
     .pp-window.pp-bottom-left {
-      bottom: 88px;
+      bottom: 20px;
       left: 20px;
     }
 
@@ -128,9 +181,9 @@ function styles(primaryColor, theme) {
         width: calc(100vw - 20px);
         height: auto;
         min-height: 300px;
-        max-height: calc(100vh - 100px);
-        max-height: calc(100svh - 100px); /* svh = small viewport, excludes keyboard */
-        bottom: 80px;
+        max-height: calc(100vh - 40px);
+        max-height: calc(100svh - 40px); /* svh = small viewport, excludes keyboard */
+        bottom: 10px;
         right: 10px;
         left: 10px;
         border-radius: 12px;
@@ -148,35 +201,38 @@ function styles(primaryColor, theme) {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 12px 14px;
-      background: ${primaryColor};
+      padding: 10px 16px;
+      background: ${resolvedHeaderColor};
       color: white;
     }
 
     .pp-header-info {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 12px;
     }
 
     .pp-avatar {
-      width: 36px;
-      height: 36px;
+      width: 40px;
+      height: 40px;
       border-radius: 50%;
       object-fit: cover;
+      border: 2px solid rgba(255, 255, 255, 0.2);
     }
 
     .pp-header-title {
-      font-weight: 600;
-      font-size: 15px;
+      font-weight: 500;
+      font-size: 16px;
+      letter-spacing: 0.1px;
     }
 
     .pp-header-status {
-      font-size: 11px;
-      opacity: 0.85;
+      font-size: 13px;
+      opacity: 0.9;
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: 5px;
+      font-weight: 400;
     }
 
     .pp-status-dot {
@@ -187,7 +243,8 @@ function styles(primaryColor, theme) {
     }
 
     .pp-status-dot.pp-online {
-      background: #22c55e;
+      background: #25d366;
+      box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3);
     }
 
     .pp-close-btn {
@@ -195,13 +252,13 @@ function styles(primaryColor, theme) {
       border: none;
       color: white;
       cursor: pointer;
-      padding: 4px;
-      border-radius: 4px;
-      opacity: 0.8;
-      transition: opacity 0.2s;
+      padding: 8px;
+      border-radius: 50%;
+      opacity: 0.9;
+      transition: opacity 0.2s, background 0.2s;
       flex-shrink: 0;
-      width: 28px;
-      height: 28px;
+      width: 36px;
+      height: 36px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -209,157 +266,199 @@ function styles(primaryColor, theme) {
 
     .pp-close-btn:hover {
       opacity: 1;
+      background: rgba(255, 255, 255, 0.1);
     }
 
     .pp-close-btn svg {
-      width: 16px;
-      height: 16px;
+      width: 18px;
+      height: 18px;
     }
 
     .pp-messages {
       flex: 1;
       overflow-y: auto;
-      padding: 12px;
+      padding: 16px 12px;
       display: flex;
       flex-direction: column;
-      gap: 3px;
+      gap: 2px;
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+      position: relative;
+      background: ${chatBgColor};
+      background-image: ${chatBgImage};
+      background-size: ${chatBgSize};
+      background-position: center;
     }
 
     .pp-welcome {
       text-align: center;
-      color: ${colors.textSecondary};
-      padding: 24px;
-      font-size: 13px;
+      color: ${isDark ? "#8696a0" : "#667781"};
+      padding: 32px 24px;
+      font-size: 14px;
+      line-height: 1.5;
+      background: ${isDark ? "rgba(17, 27, 33, 0.9)" : "rgba(255, 255, 255, 0.95)"};
+      margin: 12px;
+      border-radius: 8px;
+      box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
     }
 
     .pp-date-separator {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: 16px 0 12px;
+      margin: 12px 0;
     }
 
     .pp-date-separator span {
-      background: ${colors.bgSecondary};
-      color: ${colors.textSecondary};
-      font-size: 11px;
-      padding: 4px 12px;
-      border-radius: 12px;
-      font-weight: 500;
+      background: ${isDark ? "rgba(17, 27, 33, 0.9)" : "rgba(255, 255, 255, 0.95)"};
+      color: ${isDark ? "#8696a0" : "#54656f"};
+      font-size: 12px;
+      padding: 6px 12px;
+      border-radius: 8px;
+      font-weight: 400;
+      box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
     }
 
-    .pp-message {
-      max-width: 85%;
-      padding: 6px 10px;
-      border-radius: 12px;
-      word-wrap: break-word;
+    /* Swipe container for mobile actions */
+    .pp-message-swipe-container {
       position: relative;
-      user-select: text;
-      -webkit-user-select: text;
-      font-size: 14px;
-      line-height: 1.35;
+      display: flex;
+      align-items: stretch;
+      overflow: visible;
+      touch-action: pan-y;
+    }
+
+    .pp-swipe-left {
+      justify-content: flex-end;
+    }
+
+    .pp-swipe-right {
+      justify-content: flex-start;
     }
 
-    /* Hover actions container - positioned above message (Slack style) */
-    .pp-message-actions {
+    .pp-swipe-actions {
       position: absolute;
-      top: -28px;
-      display: flex;
-      gap: 2px;
-      background: ${colors.bg};
-      border: 1px solid ${colors.border};
-      border-radius: 6px;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-      padding: 2px;
+      top: 0;
+      bottom: 0;
+      display: none; /* Hidden by default - only show on mobile with touch */
+      align-items: center;
+      gap: 4px;
       opacity: 0;
-      animation: pp-actions-fade-in 0.12s ease forwards;
-      z-index: 10;
-      /* Reset color inheritance from message */
-      color: ${colors.textSecondary};
+      pointer-events: none;
     }
 
-    @keyframes pp-actions-fade-in {
-      from { opacity: 0; transform: translateY(4px); }
-      to { opacity: 1; transform: translateY(0); }
+    /* Only show swipe actions on touch devices */
+    @media (hover: none) and (pointer: coarse) {
+      .pp-swipe-actions {
+        display: flex;
+      }
     }
 
-    /* Visitor messages: actions aligned right */
-    .pp-actions-left {
-      right: 0;
+    .pp-swipe-left .pp-swipe-actions {
+      right: -80px; /* Hidden off-screen to the right */
+      left: auto;
+      padding-right: 8px;
     }
 
-    /* Operator messages: actions aligned left */
-    .pp-actions-right {
-      left: 0;
+    .pp-swipe-right .pp-swipe-actions {
+      left: -80px; /* Hidden off-screen to the left */
+      right: auto;
+      padding-left: 8px;
     }
 
-    .pp-message-actions .pp-action-btn {
-      width: 24px;
-      height: 24px;
+    .pp-swipe-action {
+      width: 32px;
+      height: 32px;
       border: none;
-      background: transparent;
-      border-radius: 4px;
+      border-radius: 50%;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${colors.textSecondary} !important;
-      transition: background 0.1s, color 0.1s;
-    }
-
-    .pp-message-actions .pp-action-btn:hover {
-      background: ${colors.bgSecondary};
-      color: ${colors.text} !important;
-    }
-
-    .pp-message-actions .pp-action-btn svg {
-      width: 14px;
-      height: 14px;
-      stroke: ${colors.textSecondary};
-    }
-
-    .pp-message-actions .pp-action-btn:hover svg {
-      stroke: ${colors.text};
+      opacity: 0.9;
     }
 
-    .pp-message-actions .pp-action-delete:hover {
-      background: #fef2f2;
+    .pp-swipe-action svg {
+      width: 16px;
+      height: 16px;
     }
 
-    .pp-message-actions .pp-action-delete:hover svg {
-      stroke: #ef4444;
+    .pp-swipe-reply {
+      background: ${primaryColor};
     }
 
-    .pp-theme-dark .pp-message-actions .pp-action-delete:hover {
-      background: #7f1d1d;
+    .pp-swipe-edit {
+      background: #3b82f6;
     }
 
-    .pp-theme-dark .pp-message-actions .pp-action-delete:hover svg {
-      stroke: #fca5a5;
+    .pp-swipe-delete {
+      background: #ef4444;
     }
 
-    /* Hide hover actions on mobile */
-    @media (hover: none) and (pointer: coarse) {
-      .pp-message-actions {
-        display: none;
-      }
+    .pp-message {
+      max-width: 80%;
+      padding: 6px 8px 6px 9px;
+      border-radius: 8px;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      position: relative;
+      user-select: text;
+      -webkit-user-select: text;
+      font-size: 14.2px;
+      line-height: 1.4;
+      display: block; /* Block for proper float behavior */
+      will-change: transform;
+      box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
     }
 
     .pp-message-visitor {
       align-self: flex-end;
-      background: ${primaryColor};
-      color: white;
-      border-bottom-right-radius: 3px;
-      margin-left: 32px;
+      background: ${isDark ? "#005c4b" : "#d9fdd3"};
+      color: ${isDark ? "#e9edef" : "#111b21"};
+      border-top-right-radius: 8px;
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 0;
+      margin-left: 48px;
+    }
+
+    /* WhatsApp-style tail for visitor messages */
+    .pp-message-visitor::after {
+      content: '';
+      position: absolute;
+      right: -7px;
+      bottom: 0;
+      width: 8px;
+      height: 13px;
+      background: ${isDark ? "#005c4b" : "#d9fdd3"};
+      clip-path: path('M 0 0 L 0 13 L 8 13 Q 2 10 0 0');
     }
 
     .pp-message-operator,
     .pp-message-ai {
       align-self: flex-start;
-      background: ${colors.messageBg};
-      color: ${colors.text};
-      border-bottom-left-radius: 3px;
-      margin-right: 32px;
+      background: ${isDark ? "#202c33" : "#ffffff"};
+      color: ${isDark ? "#e9edef" : "#111b21"};
+      border-top-right-radius: 8px;
+      border-top-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 0;
+      margin-right: 48px;
+    }
+
+    /* WhatsApp-style tail for operator messages */
+    .pp-message-operator::after,
+    .pp-message-ai::after {
+      content: '';
+      position: absolute;
+      left: -7px;
+      bottom: 0;
+      width: 8px;
+      height: 13px;
+      background: ${isDark ? "#202c33" : "#ffffff"};
+      clip-path: path('M 8 0 L 8 13 L 0 13 Q 6 10 8 0');
     }
 
     /* Add spacing between different senders */
@@ -374,23 +473,38 @@ function styles(primaryColor, theme) {
       display: inline;
     }
 
+    /* WhatsApp-style inline timestamp - floats to the right */
     .pp-message-time {
-      font-size: 10px;
-      opacity: 0.6;
+      font-size: 11px;
       display: inline-flex;
       align-items: center;
       gap: 3px;
       float: right;
-      margin-left: 8px;
+      margin: 3px 0 0 12px;
+      color: ${isDark ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.45)"};
+      white-space: nowrap;
+    }
+
+    .pp-message-visitor .pp-message-time {
+      color: ${isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.45)"};
+    }
+
+    /* Timestamp for attachment-only messages */
+    .pp-attachment-time {
+      float: none;
+      display: flex;
+      justify-content: flex-end;
       margin-top: 4px;
     }
 
     .pp-ai-badge {
-      background: rgba(0, 0, 0, 0.1);
-      padding: 1px 4px;
+      background: ${isDark ? "rgba(255,255,255,0.15)" : "rgba(0, 0, 0, 0.08)"};
+      padding: 2px 5px;
       border-radius: 4px;
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
     }
 
     .pp-status {
@@ -406,11 +520,11 @@ function styles(primaryColor, theme) {
 
     .pp-check,
     .pp-check-double {
-      stroke: rgba(255, 255, 255, 0.7);
+      stroke: ${isDark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.35)"};
     }
 
     .pp-check-read {
-      stroke: #34b7f1;
+      stroke: #53bdeb;
     }
 
     .pp-status-sending .pp-check {
@@ -419,14 +533,15 @@ function styles(primaryColor, theme) {
 
     .pp-typing {
       display: flex;
-      gap: 3px;
-      padding: 8px 12px;
+      gap: 4px;
+      padding: 12px 14px;
+      align-items: center;
     }
 
     .pp-typing span {
-      width: 6px;
-      height: 6px;
-      background: ${colors.textSecondary};
+      width: 7px;
+      height: 7px;
+      background: ${isDark ? "#8696a0" : "#667781"};
       border-radius: 50%;
       animation: pp-bounce 1.4s infinite ease-in-out both;
     }
@@ -441,57 +556,56 @@ function styles(primaryColor, theme) {
 
     .pp-input-form {
       display: flex;
-      padding: 10px 12px;
+      padding: 8px 10px;
       gap: 8px;
-      border-top: 1px solid ${colors.border};
+      background: ${resolvedFooterColor};
       align-items: center;
     }
 
     .pp-input {
       flex: 1;
       min-width: 0;
-      height: 40px;
-      line-height: 40px;
-      padding: 0 16px;
-      border: 1px solid ${colors.border};
-      border-radius: 20px;
-      background: ${colors.bg};
-      color: ${colors.text};
-      font-size: 14px;
+      height: 42px;
+      line-height: 42px;
+      padding: 0 14px;
+      border: none;
+      border-radius: 8px;
+      background: ${isDark ? "#2a3942" : "#ffffff"};
+      color: ${isDark ? "#e9edef" : "#111b21"};
+      font-size: 15px;
       outline: none;
-      transition: border-color 0.2s;
       box-sizing: border-box;
       margin: 0;
     }
 
     .pp-input:focus {
-      border-color: ${primaryColor};
+      outline: none;
     }
 
     .pp-input::placeholder {
-      color: ${colors.textSecondary};
+      color: ${isDark ? "#8696a0" : "#667781"};
     }
 
     .pp-send-btn {
-      width: 40px;
-      height: 40px;
-      min-width: 40px;
+      width: 42px;
+      height: 42px;
+      min-width: 42px;
       border-radius: 50%;
-      background: ${primaryColor};
+      background: #00a884;
       color: white;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: opacity 0.2s, transform 0.1s;
+      transition: background 0.2s, transform 0.1s;
       flex-shrink: 0;
       margin: 0;
       padding: 0;
     }
 
     .pp-send-btn:not(:disabled):hover {
-      transform: scale(1.05);
+      background: #008f72;
     }
 
     .pp-send-btn:not(:disabled):active {
@@ -499,27 +613,27 @@ function styles(primaryColor, theme) {
     }
 
     .pp-send-btn:disabled {
-      opacity: 0.5;
+      background: ${isDark ? "#3b4a54" : "#b3b3b3"};
       cursor: not-allowed;
     }
 
     .pp-send-btn svg {
-      width: 18px;
-      height: 18px;
+      width: 20px;
+      height: 20px;
     }
 
     .pp-footer {
       text-align: center;
-      padding: 8px;
-      font-size: 11px;
-      color: ${colors.textSecondary};
-      border-top: 1px solid ${colors.border};
-      opacity: 0.7;
+      padding: 6px 8px;
+      font-size: 10px;
+      color: ${isDark ? "#8696a0" : "#667781"};
+      background: ${resolvedFooterColor};
     }
 
     .pp-footer a {
-      color: ${primaryColor};
+      color: ${isDark ? "#00a884" : "#008069"};
       text-decoration: none;
+      font-weight: 500;
     }
 
     .pp-footer a:hover {
@@ -541,26 +655,26 @@ function styles(primaryColor, theme) {
     }
 
     .pp-attach-btn {
-      width: 40px;
-      height: 40px;
-      min-width: 40px;
+      width: 42px;
+      height: 42px;
+      min-width: 42px;
       border-radius: 50%;
       background: transparent;
-      color: ${colors.textSecondary};
-      border: 1px solid ${colors.border};
+      color: ${isDark ? "#8696a0" : "#54656f"};
+      border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0;
       padding: 0;
-      transition: color 0.2s, border-color 0.2s;
+      transition: color 0.2s, background 0.2s;
       flex-shrink: 0;
     }
 
     .pp-attach-btn:hover:not(:disabled) {
-      color: ${primaryColor};
-      border-color: ${primaryColor};
+      color: ${isDark ? "#aebac1" : "#3b4a54"};
+      background: ${isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"};
     }
 
     .pp-attach-btn:disabled {
@@ -569,28 +683,27 @@ function styles(primaryColor, theme) {
     }
 
     .pp-attach-btn svg {
-      width: 18px;
-      height: 18px;
+      width: 22px;
+      height: 22px;
     }
 
     .pp-attachments-preview {
       display: flex;
       gap: 8px;
-      padding: 8px 12px;
-      border-top: 1px solid ${colors.border};
+      padding: 10px 12px;
       overflow-x: auto;
-      background: ${colors.bgSecondary};
+      background: ${resolvedFooterColor};
     }
 
     .pp-attachment-preview {
       position: relative;
-      width: 60px;
-      height: 60px;
-      border-radius: 8px;
+      width: 64px;
+      height: 64px;
+      border-radius: 10px;
       overflow: hidden;
       flex-shrink: 0;
-      background: ${colors.bg};
-      border: 1px solid ${colors.border};
+      background: ${isDark ? "#2a3942" : "#ffffff"};
+      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     }
 
     .pp-preview-img {
@@ -674,7 +787,10 @@ function styles(primaryColor, theme) {
       display: flex;
       flex-direction: column;
       gap: 8px;
-      margin-top: 4px;
+      margin-top: 6px;
+      max-width: 100%;
+      align-items: flex-start;
+      flex-shrink: 0;
     }
 
     .pp-attachment {
@@ -685,11 +801,22 @@ function styles(primaryColor, theme) {
       overflow: hidden;
     }
 
+    .pp-attachment-image,
+    .pp-attachment-video,
+    .pp-attachment-audio {
+      width: 240px;
+      max-width: 100%;
+    }
+
     .pp-attachment-image img {
-      max-width: 200px;
+      width: 100% !important;
+      height: auto !important;
+      max-width: 240px;
       max-height: 200px;
       border-radius: 8px;
       display: block;
+      object-fit: cover !important;
+      object-position: center;
     }
 
     .pp-attachment-audio {
@@ -699,7 +826,8 @@ function styles(primaryColor, theme) {
     }
 
     .pp-attachment-audio audio {
-      width: 200px;
+      width: 240px;
+      max-width: 100%;
       height: 36px;
     }
 
@@ -709,14 +837,18 @@ function styles(primaryColor, theme) {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 200px;
+      max-width: 100%;
     }
 
     .pp-attachment-video video {
-      max-width: 200px;
-      max-height: 200px;
+      width: 100% !important;
+      height: auto !important;
+      max-width: 240px;
+      max-height: none;
       border-radius: 8px;
       display: block;
+      object-fit: contain !important;
+      object-position: center;
     }
 
     .pp-attachment-file {
@@ -765,81 +897,86 @@ function styles(primaryColor, theme) {
     .pp-drop-overlay {
       position: absolute;
       inset: 0;
-      background: ${isDark ? "rgba(0,0,0,0.9)" : "rgba(255,255,255,0.95)"};
+      background: ${isDark ? "rgba(17, 27, 33, 0.95)" : "rgba(255,255,255,0.97)"};
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 12px;
+      gap: 16px;
       z-index: 100;
-      border: 3px dashed ${primaryColor};
-      border-radius: 16px;
+      border: 3px dashed #00a884;
+      border-radius: 12px;
       margin: 4px;
       pointer-events: none;
     }
 
     .pp-drop-icon svg {
-      width: 48px;
-      height: 48px;
-      color: ${primaryColor};
+      width: 56px;
+      height: 56px;
+      color: #00a884;
     }
 
     .pp-drop-text {
-      font-size: 16px;
+      font-size: 17px;
       font-weight: 500;
-      color: ${colors.text};
+      color: ${isDark ? "#e9edef" : "#111b21"};
     }
 
     /* Message Context Menu */
     .pp-message-menu {
       position: fixed;
-      background: ${colors.bg};
-      border: 1px solid ${colors.border};
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      padding: 4px;
+      background: ${isDark ? "#233138" : "#ffffff"};
+      border: none;
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
+      padding: 6px;
       z-index: 200;
-      min-width: 120px;
+      min-width: 140px;
     }
 
     .pp-message-menu button {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 10px;
       width: 100%;
-      padding: 8px 12px;
+      padding: 10px 14px;
       border: none;
       background: transparent;
-      color: ${colors.text};
-      font-size: 13px;
+      color: ${isDark ? "#e9edef" : "#111b21"};
+      font-size: 14px;
       cursor: pointer;
-      border-radius: 4px;
+      border-radius: 8px;
       text-align: left;
+      transition: background 0.15s;
     }
 
     .pp-message-menu button:hover {
-      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+      background: ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)"};
     }
 
     .pp-message-menu button svg {
-      width: 16px;
-      height: 16px;
+      width: 18px;
+      height: 18px;
     }
 
     .pp-menu-delete {
       color: #ef4444 !important;
     }
 
+    .pp-menu-delete:hover {
+      background: ${isDark ? "rgba(239,68,68,0.15)" : "rgba(239,68,68,0.08)"} !important;
+    }
+
     /* Edit Modal */
     .pp-edit-modal {
       position: absolute;
       bottom: 80px;
       left: 12px;
       right: 12px;
-      background: ${colors.bg};
-      border: 1px solid ${colors.border};
+      background: ${isDark ? "#233138" : "#ffffff"};
+      border: none;
       border-radius: 12px;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+      box-shadow: 0 8px 28px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.1);
       z-index: 150;
       overflow: hidden;
     }
@@ -848,17 +985,24 @@ function styles(primaryColor, theme) {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 12px 16px;
-      border-bottom: 1px solid ${colors.border};
+      padding: 14px 16px;
+      border-bottom: 1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};
       font-weight: 500;
+      color: ${isDark ? "#e9edef" : "#111b21"};
     }
 
     .pp-edit-header button {
       background: transparent;
       border: none;
-      color: ${colors.textSecondary};
+      color: ${isDark ? "#8696a0" : "#667781"};
       cursor: pointer;
-      padding: 4px;
+      padding: 6px;
+      border-radius: 50%;
+      transition: background 0.15s;
+    }
+
+    .pp-edit-header button:hover {
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
     }
 
     .pp-edit-header button svg {
@@ -868,210 +1012,840 @@ function styles(primaryColor, theme) {
 
     .pp-edit-input {
       width: 100%;
-      padding: 12px 16px;
+      padding: 14px 16px;
       border: none;
       background: transparent;
-      color: ${colors.text};
-      font-size: 14px;
+      color: ${isDark ? "#e9edef" : "#111b21"};
+      font-size: 15px;
       resize: none;
       min-height: 80px;
       outline: none;
+      line-height: 1.5;
+    }
+
+    .pp-edit-input::placeholder {
+      color: ${isDark ? "#8696a0" : "#667781"};
+    }
+
+    .pp-edit-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+      padding: 12px 16px;
+      border-top: 1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};
+    }
+
+    .pp-edit-cancel {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 8px;
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+      color: ${isDark ? "#e9edef" : "#111b21"};
+      font-size: 14px;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .pp-edit-cancel:hover {
+      background: ${isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.08)"};
+    }
+
+    .pp-edit-save {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 8px;
+      background: #00a884;
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .pp-edit-save:hover:not(:disabled) {
+      background: #008f72;
+    }
+
+    .pp-edit-save:disabled {
+      background: ${isDark ? "#3b4a54" : "#b3b3b3"};
+      cursor: not-allowed;
+    }
+
+    /* Reply Preview */
+    .pp-reply-preview {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      background: ${resolvedFooterColor};
+      border-left: 4px solid #00a884;
+    }
+
+    .pp-reply-preview-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .pp-reply-label {
+      display: block;
+      font-size: 12px;
+      color: #00a884;
+      font-weight: 500;
+      margin-bottom: 2px;
+    }
+
+    .pp-reply-text {
+      display: block;
+      font-size: 13px;
+      color: ${isDark ? "#8696a0" : "#667781"};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .pp-reply-cancel {
+      background: transparent;
+      border: none;
+      border-radius: 50%;
+      color: ${isDark ? "#8696a0" : "#667781"};
+      cursor: pointer;
+      padding: 0;
+      width: 28px;
+      height: 28px;
+      min-width: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .pp-reply-cancel:hover {
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};
+      color: ${isDark ? "#aebac1" : "#3b4a54"};
+    }
+
+    .pp-reply-cancel svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    /* Reply Quote in Message */
+    .pp-reply-quote {
+      background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.05)"};
+      border-left: 3px solid #00a884;
+      padding: 6px 10px;
+      margin-bottom: 4px;
+      border-radius: 0 6px 6px 0;
+      font-size: 13px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .pp-reply-sender {
+      display: block;
+      font-weight: 500;
+      color: #00a884;
+      margin-bottom: 2px;
+      font-size: 12px;
+    }
+
+    .pp-reply-content {
+      display: block;
+      color: ${isDark ? "#8696a0" : "#667781"};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* Clickable reply quote */
+    .pp-reply-quote-clickable {
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .pp-reply-quote-clickable:hover {
+      background: ${isDark ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,0.08)"};
+    }
+
+    .pp-reply-quote-clickable:active {
+      transform: scale(0.99);
+    }
+
+    /* Reply quote in visitor message bubble needs higher contrast */
+    .pp-message-visitor .pp-reply-quote {
+      background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.08)"};
+      border-left-color: ${isDark ? "rgba(255,255,255,0.5)" : "#00a884"};
+    }
+
+    .pp-message-visitor .pp-reply-quote-clickable:hover {
+      background: ${isDark ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,0.12)"};
+    }
+
+    .pp-message-visitor .pp-reply-sender {
+      color: ${isDark ? "rgba(255,255,255,0.9)" : "#00a884"};
+    }
+
+    .pp-message-visitor .pp-reply-content {
+      color: ${isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.6)"};
+    }
+
+    /* Message highlight animation (when scrolling to a message) */
+    .pp-message-highlight {
+      animation: pp-highlight-pulse 1.5s ease-out;
+    }
+
+    @keyframes pp-highlight-pulse {
+      0% {
+        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.5);
+      }
+      30% {
+        box-shadow: 0 0 0 6px rgba(0, 168, 132, 0.25);
+      }
+      100% {
+        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0);
+      }
+    }
+
+    /* Deleted Message */
+    .pp-message-deleted {
+      opacity: 0.6;
+    }
+
+    .pp-deleted-content {
+      font-style: italic;
+      color: ${colors.textSecondary};
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .pp-deleted-icon {
+      font-size: 12px;
+    }
+
+    /* Edited Badge */
+    .pp-edited-badge {
+      font-size: 10px;
+      margin-left: 4px;
+      font-style: italic;
+      opacity: 0.7;
+    }
+
+    /* Pre-Chat Form */
+    .pp-prechat {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 24px 20px;
+      overflow-y: auto;
+      background: ${isDark ? "#111b21" : "#ffffff"};
+    }
+
+    .pp-prechat-title {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: ${isDark ? "#e9edef" : "#111b21"};
+    }
+
+    .pp-prechat-subtitle {
+      font-size: 14px;
+      color: ${isDark ? "#8696a0" : "#667781"};
+      margin-bottom: 24px;
+      line-height: 1.5;
+    }
+
+    .pp-prechat-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+    }
+
+    .pp-prechat-tab {
+      flex: 1;
+      padding: 10px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      background: transparent;
+      color: ${colors.textSecondary};
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .pp-prechat-tab:hover {
+      background: ${colors.bgSecondary};
+    }
+
+    .pp-prechat-tab.active {
+      background: ${primaryColor}15;
+      border-color: ${primaryColor};
+      color: ${primaryColor};
+    }
+
+    .pp-prechat-tab svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .pp-prechat-field {
+      margin-bottom: 16px;
+    }
+
+    .pp-prechat-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: ${colors.textSecondary};
+      margin-bottom: 6px;
+    }
+
+    .pp-prechat-input {
+      width: 100%;
+      height: 44px;
+      padding: 0 14px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      background: ${colors.bg};
+      color: ${colors.text};
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.2s;
+      box-sizing: border-box;
+    }
+
+    .pp-prechat-input:focus {
+      border-color: ${primaryColor};
+    }
+
+    .pp-prechat-input::placeholder {
+      color: ${colors.textSecondary};
+    }
+
+    .pp-prechat-input.error {
+      border-color: #ef4444;
+    }
+
+    .pp-prechat-error {
+      color: #ef4444;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .pp-phone-input-wrapper {
+      display: flex;
+      gap: 8px;
+    }
+
+    .pp-country-select {
+      position: relative;
+    }
+
+    .pp-country-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      height: 44px;
+      padding: 0 10px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      background: ${colors.bg};
+      color: ${colors.text};
+      font-size: 14px;
+      cursor: pointer;
+      transition: border-color 0.2s;
+    }
+
+    .pp-country-btn:focus {
+      border-color: ${primaryColor};
+      outline: none;
+    }
+
+    .pp-country-flag {
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    .pp-country-code {
+      font-size: 13px;
+      color: ${colors.textSecondary};
+    }
+
+    .pp-country-chevron {
+      width: 12px;
+      height: 12px;
+      color: ${colors.textSecondary};
+    }
+
+    .pp-country-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      width: 280px;
+      max-height: 280px;
+      overflow-y: auto;
+      background: ${colors.bg};
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 100;
     }
 
-    .pp-edit-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 8px;
-      padding: 12px 16px;
-      border-top: 1px solid ${colors.border};
+    .pp-country-search {
+      position: sticky;
+      top: 0;
+      padding: 8px;
+      background: ${colors.bg};
+      border-bottom: 1px solid ${colors.border};
     }
 
-    .pp-edit-cancel {
-      padding: 8px 16px;
+    .pp-country-search-input {
+      width: 100%;
+      height: 36px;
+      padding: 0 12px;
       border: 1px solid ${colors.border};
       border-radius: 6px;
-      background: transparent;
+      background: ${colors.bgSecondary};
       color: ${colors.text};
       font-size: 13px;
-      cursor: pointer;
+      outline: none;
+      box-sizing: border-box;
     }
 
-    .pp-edit-save {
-      padding: 8px 16px;
-      border: none;
-      border-radius: 6px;
-      background: ${primaryColor};
-      color: white;
-      font-size: 13px;
-      cursor: pointer;
+    .pp-country-search-input:focus {
+      border-color: ${primaryColor};
     }
 
-    .pp-edit-save:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
+    .pp-country-list {
+      padding: 4px;
     }
 
-    /* Reply Preview */
-    .pp-reply-preview {
+    .pp-country-option {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      background: ${isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
-      border-top: 1px solid ${colors.border};
-      border-left: 3px solid ${primaryColor};
-    }
-
-    .pp-reply-preview-content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .pp-reply-label {
-      display: block;
-      font-size: 11px;
-      color: ${primaryColor};
-      font-weight: 500;
-      margin-bottom: 2px;
-    }
-
-    .pp-reply-text {
-      display: block;
-      font-size: 12px;
-      color: ${colors.textSecondary};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .pp-reply-cancel {
-      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
-      border: none;
-      border-radius: 50%;
-      color: ${colors.textSecondary};
+      gap: 10px;
+      padding: 10px 12px;
       cursor: pointer;
-      padding: 0;
-      width: 24px;
-      height: 24px;
-      min-width: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
+      border-radius: 6px;
       transition: background 0.15s;
     }
 
-    .pp-reply-cancel:hover {
-      background: ${isDark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.1)"};
+    .pp-country-option:hover {
+      background: ${colors.bgSecondary};
     }
 
-    .pp-reply-cancel svg {
-      width: 14px;
-      height: 14px;
+    .pp-country-option.selected {
+      background: ${primaryColor}15;
     }
 
-    /* Reply Quote in Message */
-    .pp-reply-quote {
-      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
-      border-left: 2px solid ${primaryColor};
-      padding: 4px 8px;
-      margin-bottom: 6px;
-      border-radius: 0 4px 4px 0;
-      font-size: 12px;
-      position: relative;
-      z-index: 1;
+    .pp-country-name {
+      flex: 1;
+      font-size: 13px;
+      color: ${colors.text};
     }
 
-    .pp-reply-sender {
-      display: block;
-      font-weight: 500;
-      color: ${primaryColor};
-      margin-bottom: 2px;
+    .pp-country-dial {
+      font-size: 12px;
+      color: ${colors.textSecondary};
     }
 
-    .pp-reply-content {
-      display: block;
-      color: ${colors.textSecondary};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .pp-phone-number-input {
+      flex: 1;
     }
 
-    /* Clickable reply quote */
-    .pp-reply-quote-clickable {
+    .pp-prechat-submit {
+      width: 100%;
+      height: 48px;
+      margin-top: 12px;
+      border: none;
+      border-radius: 8px;
+      background: #00a884;
+      color: white;
+      font-size: 15px;
+      font-weight: 500;
       cursor: pointer;
-      transition: background 0.15s, transform 0.1s;
+      transition: background 0.2s, transform 0.1s;
     }
 
-    .pp-reply-quote-clickable:hover {
-      background: ${isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.08)"};
+    .pp-prechat-submit:hover:not(:disabled) {
+      background: #008f72;
     }
 
-    .pp-reply-quote-clickable:active {
+    .pp-prechat-submit:active:not(:disabled) {
       transform: scale(0.98);
     }
 
-    /* Reply quote in visitor message bubble needs higher contrast */
-    .pp-message-visitor .pp-reply-quote {
-      background: rgba(255, 255, 255, 0.18);
-      border-left-color: rgba(255, 255, 255, 0.7);
-    }
-
-    .pp-message-visitor .pp-reply-quote-clickable:hover {
-      background: rgba(255, 255, 255, 0.25);
+    .pp-prechat-submit:disabled {
+      background: ${isDark ? "#3b4a54" : "#b3b3b3"};
+      cursor: not-allowed;
     }
 
-    .pp-message-visitor .pp-reply-sender,
-    .pp-message-visitor .pp-reply-content {
-      color: rgba(255, 255, 255, 0.9);
+    .pp-prechat-skip {
+      width: 100%;
+      padding: 14px;
+      margin-top: 8px;
+      border: none;
+      background: transparent;
+      color: ${isDark ? "#8696a0" : "#667781"};
+      font-size: 14px;
+      cursor: pointer;
+      transition: color 0.2s;
     }
 
-    /* Message highlight animation (when scrolling to a message) */
-    .pp-message-highlight {
-      animation: pp-highlight-pulse 1.5s ease-out;
+    .pp-prechat-skip:hover {
+      color: ${isDark ? "#aebac1" : "#3b4a54"};
     }
+  `;
+}
 
-    @keyframes pp-highlight-pulse {
-      0% {
-        box-shadow: 0 0 0 0 ${primaryColor}80;
-      }
-      30% {
-        box-shadow: 0 0 0 6px ${primaryColor}40;
+// src/components/PreChatForm.tsx
+import { useState, useRef, useEffect } from "preact/hooks";
+import { parsePhoneNumber, isValidPhoneNumber } from "libphonenumber-js/min";
+
+// src/data/countries.ts
+var countries = [
+  // Europe
+  { code: "FR", name: "France", dialCode: "+33", flag: "\u{1F1EB}\u{1F1F7}" },
+  { code: "DE", name: "Germany", dialCode: "+49", flag: "\u{1F1E9}\u{1F1EA}" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
+  { code: "ES", name: "Spain", dialCode: "+34", flag: "\u{1F1EA}\u{1F1F8}" },
+  { code: "IT", name: "Italy", dialCode: "+39", flag: "\u{1F1EE}\u{1F1F9}" },
+  { code: "PT", name: "Portugal", dialCode: "+351", flag: "\u{1F1F5}\u{1F1F9}" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", flag: "\u{1F1F3}\u{1F1F1}" },
+  { code: "BE", name: "Belgium", dialCode: "+32", flag: "\u{1F1E7}\u{1F1EA}" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", flag: "\u{1F1E8}\u{1F1ED}" },
+  { code: "AT", name: "Austria", dialCode: "+43", flag: "\u{1F1E6}\u{1F1F9}" },
+  { code: "SE", name: "Sweden", dialCode: "+46", flag: "\u{1F1F8}\u{1F1EA}" },
+  { code: "NO", name: "Norway", dialCode: "+47", flag: "\u{1F1F3}\u{1F1F4}" },
+  { code: "DK", name: "Denmark", dialCode: "+45", flag: "\u{1F1E9}\u{1F1F0}" },
+  { code: "FI", name: "Finland", dialCode: "+358", flag: "\u{1F1EB}\u{1F1EE}" },
+  { code: "PL", name: "Poland", dialCode: "+48", flag: "\u{1F1F5}\u{1F1F1}" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420", flag: "\u{1F1E8}\u{1F1FF}" },
+  { code: "GR", name: "Greece", dialCode: "+30", flag: "\u{1F1EC}\u{1F1F7}" },
+  { code: "IE", name: "Ireland", dialCode: "+353", flag: "\u{1F1EE}\u{1F1EA}" },
+  { code: "RO", name: "Romania", dialCode: "+40", flag: "\u{1F1F7}\u{1F1F4}" },
+  { code: "HU", name: "Hungary", dialCode: "+36", flag: "\u{1F1ED}\u{1F1FA}" },
+  // North America
+  { code: "US", name: "United States", dialCode: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
+  { code: "CA", name: "Canada", dialCode: "+1", flag: "\u{1F1E8}\u{1F1E6}" },
+  { code: "MX", name: "Mexico", dialCode: "+52", flag: "\u{1F1F2}\u{1F1FD}" },
+  // South America
+  { code: "BR", name: "Brazil", dialCode: "+55", flag: "\u{1F1E7}\u{1F1F7}" },
+  { code: "AR", name: "Argentina", dialCode: "+54", flag: "\u{1F1E6}\u{1F1F7}" },
+  { code: "CL", name: "Chile", dialCode: "+56", flag: "\u{1F1E8}\u{1F1F1}" },
+  { code: "CO", name: "Colombia", dialCode: "+57", flag: "\u{1F1E8}\u{1F1F4}" },
+  { code: "PE", name: "Peru", dialCode: "+51", flag: "\u{1F1F5}\u{1F1EA}" },
+  // Asia
+  { code: "CN", name: "China", dialCode: "+86", flag: "\u{1F1E8}\u{1F1F3}" },
+  { code: "JP", name: "Japan", dialCode: "+81", flag: "\u{1F1EF}\u{1F1F5}" },
+  { code: "KR", name: "South Korea", dialCode: "+82", flag: "\u{1F1F0}\u{1F1F7}" },
+  { code: "IN", name: "India", dialCode: "+91", flag: "\u{1F1EE}\u{1F1F3}" },
+  { code: "ID", name: "Indonesia", dialCode: "+62", flag: "\u{1F1EE}\u{1F1E9}" },
+  { code: "TH", name: "Thailand", dialCode: "+66", flag: "\u{1F1F9}\u{1F1ED}" },
+  { code: "VN", name: "Vietnam", dialCode: "+84", flag: "\u{1F1FB}\u{1F1F3}" },
+  { code: "MY", name: "Malaysia", dialCode: "+60", flag: "\u{1F1F2}\u{1F1FE}" },
+  { code: "SG", name: "Singapore", dialCode: "+65", flag: "\u{1F1F8}\u{1F1EC}" },
+  { code: "PH", name: "Philippines", dialCode: "+63", flag: "\u{1F1F5}\u{1F1ED}" },
+  { code: "PK", name: "Pakistan", dialCode: "+92", flag: "\u{1F1F5}\u{1F1F0}" },
+  { code: "BD", name: "Bangladesh", dialCode: "+880", flag: "\u{1F1E7}\u{1F1E9}" },
+  // Middle East
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971", flag: "\u{1F1E6}\u{1F1EA}" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966", flag: "\u{1F1F8}\u{1F1E6}" },
+  { code: "IL", name: "Israel", dialCode: "+972", flag: "\u{1F1EE}\u{1F1F1}" },
+  { code: "TR", name: "Turkey", dialCode: "+90", flag: "\u{1F1F9}\u{1F1F7}" },
+  { code: "EG", name: "Egypt", dialCode: "+20", flag: "\u{1F1EA}\u{1F1EC}" },
+  // Africa
+  { code: "ZA", name: "South Africa", dialCode: "+27", flag: "\u{1F1FF}\u{1F1E6}" },
+  { code: "NG", name: "Nigeria", dialCode: "+234", flag: "\u{1F1F3}\u{1F1EC}" },
+  { code: "KE", name: "Kenya", dialCode: "+254", flag: "\u{1F1F0}\u{1F1EA}" },
+  { code: "MA", name: "Morocco", dialCode: "+212", flag: "\u{1F1F2}\u{1F1E6}" },
+  { code: "TN", name: "Tunisia", dialCode: "+216", flag: "\u{1F1F9}\u{1F1F3}" },
+  { code: "DZ", name: "Algeria", dialCode: "+213", flag: "\u{1F1E9}\u{1F1FF}" },
+  // Oceania
+  { code: "AU", name: "Australia", dialCode: "+61", flag: "\u{1F1E6}\u{1F1FA}" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64", flag: "\u{1F1F3}\u{1F1FF}" },
+  // Russia & CIS
+  { code: "RU", name: "Russia", dialCode: "+7", flag: "\u{1F1F7}\u{1F1FA}" },
+  { code: "UA", name: "Ukraine", dialCode: "+380", flag: "\u{1F1FA}\u{1F1E6}" }
+].sort((a, b) => a.name.localeCompare(b.name));
+function findCountryByCode(code) {
+  return countries.find((c) => c.code === code.toUpperCase());
+}
+var defaultCountry = findCountryByCode("FR");
+
+// src/components/PreChatForm.tsx
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var EmailIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M22 7l-10 7L2 7" })
+] });
+var PhoneIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" }) });
+var ChevronIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) });
+function isValidEmail(email) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+function PreChatForm({ client: client2, config, onComplete, onSkip }) {
+  const showEmailOnly = config.fields === "email-only";
+  const showPhoneOnly = config.fields === "phone-only";
+  const showBoth = config.fields === "email-and-phone";
+  const showChoice = config.fields === "email-or-phone";
+  const getDefaultTab = () => {
+    if (showPhoneOnly) return "phone";
+    return "email";
+  };
+  const [activeTab, setActiveTab] = useState(getDefaultTab());
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
+  const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false);
+  const [countrySearch, setCountrySearch] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [phoneError, setPhoneError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const countryDropdownRef = useRef(null);
+  const searchInputRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (countryDropdownRef.current && !countryDropdownRef.current.contains(e.target)) {
+        setIsCountryDropdownOpen(false);
       }
-      100% {
-        box-shadow: 0 0 0 0 ${primaryColor}00;
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (isCountryDropdownOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isCountryDropdownOpen]);
+  const filteredCountries = countries.filter(
+    (c) => c.name.toLowerCase().includes(countrySearch.toLowerCase()) || c.dialCode.includes(countrySearch) || c.code.toLowerCase().includes(countrySearch.toLowerCase())
+  );
+  const handleCountrySelect = (country) => {
+    setSelectedCountry(country);
+    setIsCountryDropdownOpen(false);
+    setCountrySearch("");
+  };
+  const formatPhoneForDisplay = (value) => {
+    const digits = value.replace(/\D/g, "");
+    return digits;
+  };
+  const handlePhoneChange = (e) => {
+    const target = e.target;
+    const formatted = formatPhoneForDisplay(target.value);
+    setPhone(formatted);
+    setPhoneError("");
+  };
+  const getFullPhoneNumber = () => {
+    if (!phone) return "";
+    return `${selectedCountry.dialCode}${phone}`;
+  };
+  const validateForm = () => {
+    let valid = true;
+    if (showEmailOnly || showBoth) {
+      if (!email.trim()) {
+        setEmailError("Email is required");
+        valid = false;
+      } else if (!isValidEmail(email)) {
+        setEmailError("Please enter a valid email");
+        valid = false;
       }
     }
-
-    /* Deleted Message */
-    .pp-message-deleted {
-      opacity: 0.6;
-    }
-
-    .pp-deleted-content {
-      font-style: italic;
-      color: ${colors.textSecondary};
-      display: flex;
-      align-items: center;
-      gap: 4px;
+    if (showPhoneOnly || showBoth) {
+      const fullPhone = getFullPhoneNumber();
+      if (!phone.trim()) {
+        setPhoneError("Phone number is required");
+        valid = false;
+      } else if (!isValidPhoneNumber(fullPhone, selectedCountry.code)) {
+        setPhoneError("Please enter a valid phone number");
+        valid = false;
+      }
     }
-
-    .pp-deleted-icon {
-      font-size: 12px;
+    if (showChoice) {
+      if (activeTab === "email") {
+        if (!email.trim()) {
+          setEmailError("Email is required");
+          valid = false;
+        } else if (!isValidEmail(email)) {
+          setEmailError("Please enter a valid email");
+          valid = false;
+        }
+      } else {
+        const fullPhone = getFullPhoneNumber();
+        if (!phone.trim()) {
+          setPhoneError("Phone number is required");
+          valid = false;
+        } else if (!isValidPhoneNumber(fullPhone, selectedCountry.code)) {
+          setPhoneError("Please enter a valid phone number");
+          valid = false;
+        }
+      }
     }
-
-    /* Edited Badge */
-    .pp-edited-badge {
-      font-size: 10px;
-      color: ${colors.textSecondary};
-      margin-left: 4px;
-      font-style: italic;
+    return valid;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validateForm()) return;
+    setIsSubmitting(true);
+    try {
+      const data = {};
+      if (showEmailOnly || showBoth || showChoice && activeTab === "email") {
+        data.email = email.trim();
+      }
+      if (showPhoneOnly || showBoth || showChoice && activeTab === "phone") {
+        const fullPhone = getFullPhoneNumber();
+        const parsed = parsePhoneNumber(fullPhone, selectedCountry.code);
+        if (parsed) {
+          data.phone = parsed.format("E.164");
+          data.phoneCountry = selectedCountry.code;
+        }
+      }
+      await client2.submitPreChat(data);
+      onComplete();
+    } catch (err) {
+      console.error("[PreChatForm] Submit error:", err);
+      if (activeTab === "email" || showEmailOnly || showBoth) {
+        setEmailError("Something went wrong. Please try again.");
+      } else {
+        setPhoneError("Something went wrong. Please try again.");
+      }
+    } finally {
+      setIsSubmitting(false);
     }
-  `;
+  };
+  const renderEmailField = () => /* @__PURE__ */ jsxs("div", { class: "pp-prechat-field", children: [
+    /* @__PURE__ */ jsx("label", { class: "pp-prechat-label", children: "Email address" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "email",
+        class: `pp-prechat-input ${emailError ? "error" : ""}`,
+        placeholder: "you@example.com",
+        value: email,
+        onInput: (e) => {
+          setEmail(e.target.value);
+          setEmailError("");
+        }
+      }
+    ),
+    emailError && /* @__PURE__ */ jsx("div", { class: "pp-prechat-error", children: emailError })
+  ] });
+  const renderPhoneField = () => /* @__PURE__ */ jsxs("div", { class: "pp-prechat-field", children: [
+    /* @__PURE__ */ jsx("label", { class: "pp-prechat-label", children: "Phone number" }),
+    /* @__PURE__ */ jsxs("div", { class: "pp-phone-input-wrapper", children: [
+      /* @__PURE__ */ jsxs("div", { class: "pp-country-select", ref: countryDropdownRef, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "pp-country-btn",
+            onClick: () => setIsCountryDropdownOpen(!isCountryDropdownOpen),
+            children: [
+              /* @__PURE__ */ jsx("span", { class: "pp-country-flag", children: selectedCountry.flag }),
+              /* @__PURE__ */ jsx("span", { class: "pp-country-code", children: selectedCountry.dialCode }),
+              /* @__PURE__ */ jsx(ChevronIcon, {})
+            ]
+          }
+        ),
+        isCountryDropdownOpen && /* @__PURE__ */ jsxs("div", { class: "pp-country-dropdown", children: [
+          /* @__PURE__ */ jsx("div", { class: "pp-country-search", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              class: "pp-country-search-input",
+              placeholder: "Search country...",
+              value: countrySearch,
+              onInput: (e) => setCountrySearch(e.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { class: "pp-country-list", children: filteredCountries.map((country) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: `pp-country-option ${country.code === selectedCountry.code ? "selected" : ""}`,
+              onClick: () => handleCountrySelect(country),
+              children: [
+                /* @__PURE__ */ jsx("span", { class: "pp-country-flag", children: country.flag }),
+                /* @__PURE__ */ jsx("span", { class: "pp-country-name", children: country.name }),
+                /* @__PURE__ */ jsx("span", { class: "pp-country-dial", children: country.dialCode })
+              ]
+            },
+            country.code
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "tel",
+          class: `pp-prechat-input pp-phone-number-input ${phoneError ? "error" : ""}`,
+          placeholder: "612 345 678",
+          value: phone,
+          onInput: handlePhoneChange
+        }
+      )
+    ] }),
+    phoneError && /* @__PURE__ */ jsx("div", { class: "pp-prechat-error", children: phoneError })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { class: "pp-prechat", children: [
+    /* @__PURE__ */ jsx("h2", { class: "pp-prechat-title", children: "How can we reach you?" }),
+    /* @__PURE__ */ jsx("p", { class: "pp-prechat-subtitle", children: showBoth ? "Please provide your contact information so we can follow up if needed." : showChoice ? "Choose how you would like us to contact you." : showEmailOnly ? "Enter your email so we can follow up with you." : "Enter your phone number so we can call you back." }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+      showChoice && /* @__PURE__ */ jsxs("div", { class: "pp-prechat-tabs", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: `pp-prechat-tab ${activeTab === "email" ? "active" : ""}`,
+            onClick: () => {
+              setActiveTab("email");
+              setPhoneError("");
+            },
+            children: [
+              /* @__PURE__ */ jsx(EmailIcon, {}),
+              "Email"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: `pp-prechat-tab ${activeTab === "phone" ? "active" : ""}`,
+            onClick: () => {
+              setActiveTab("phone");
+              setEmailError("");
+            },
+            children: [
+              /* @__PURE__ */ jsx(PhoneIcon, {}),
+              "Phone"
+            ]
+          }
+        )
+      ] }),
+      showEmailOnly && renderEmailField(),
+      showPhoneOnly && renderPhoneField(),
+      showBoth && /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderEmailField(),
+        renderPhoneField()
+      ] }),
+      showChoice && /* @__PURE__ */ jsxs(Fragment, { children: [
+        activeTab === "email" && renderEmailField(),
+        activeTab === "phone" && renderPhoneField()
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "submit", class: "pp-prechat-submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : "Start chatting" }),
+      !config.required && /* @__PURE__ */ jsx("button", { type: "button", class: "pp-prechat-skip", onClick: onSkip, children: "Skip for now" })
+    ] })
+  ] });
 }
 
 // src/components/ChatWidget.tsx
-import { Fragment as Fragment2, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
 function formatDateSeparator(date) {
   const now = /* @__PURE__ */ new Date();
   const messageDate = new Date(date);
@@ -1091,28 +1865,31 @@ function getDateKey(date) {
   return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
 }
 function ChatWidget({ client: client2, config: initialConfig }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-  const [operatorOnline, setOperatorOnline] = useState(false);
-  const [isConnected, setIsConnected] = useState(false);
-  const [unreadCount, setUnreadCount] = useState(0);
-  const [pendingAttachments, setPendingAttachments] = useState([]);
-  const [isUploading, setIsUploading] = useState(false);
-  const [replyingTo, setReplyingTo] = useState(null);
-  const [editingMessage, setEditingMessage] = useState(null);
-  const [editContent, setEditContent] = useState("");
-  const [messageMenu, setMessageMenu] = useState(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [hoveredMessageId, setHoveredMessageId] = useState(null);
-  const [longPressTimer, setLongPressTimer] = useState(null);
-  const [config, setConfig] = useState(initialConfig);
-  const messagesEndRef = useRef(null);
-  const inputRef = useRef(null);
-  const fileInputRef = useRef(null);
-  const messagesContainerRef = useRef(null);
-  useEffect(() => {
+  const [isOpen, setIsOpen] = useState2(false);
+  const [messages, setMessages] = useState2([]);
+  const [inputValue, setInputValue] = useState2("");
+  const [isTyping, setIsTyping] = useState2(false);
+  const [operatorOnline, setOperatorOnline] = useState2(false);
+  const [isConnected, setIsConnected] = useState2(false);
+  const [unreadCount, setUnreadCount] = useState2(0);
+  const [pendingAttachments, setPendingAttachments] = useState2([]);
+  const [isUploading, setIsUploading] = useState2(false);
+  const [replyingTo, setReplyingTo] = useState2(null);
+  const [editingMessage, setEditingMessage] = useState2(null);
+  const [editContent, setEditContent] = useState2("");
+  const [messageMenu, setMessageMenu] = useState2(null);
+  const [isDragging, setIsDragging] = useState2(false);
+  const [swipedMessageId, setSwipedMessageId] = useState2(null);
+  const [swipeOffset, setSwipeOffset] = useState2(0);
+  const touchStartRef = useRef2(null);
+  const [config, setConfig] = useState2(initialConfig);
+  const [preChatForm, setPreChatForm] = useState2(void 0);
+  const [preChatSkipped, setPreChatSkipped] = useState2(false);
+  const messagesEndRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const fileInputRef = useRef2(null);
+  const messagesContainerRef = useRef2(null);
+  useEffect2(() => {
     const unsubOpen = client2.on("openChange", setIsOpen);
     const unsubMessage = client2.on("message", () => {
       setMessages([...client2.getMessages()]);
@@ -1128,6 +1905,10 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setMessages(client2.getMessages());
       setOperatorOnline(client2.getSession()?.operatorOnline ?? false);
       setConfig(client2.getConfig());
+      setPreChatForm(client2.getSession()?.preChatForm);
+    });
+    const unsubPreChat = client2.on("preChatCompleted", () => {
+      setPreChatForm((prev) => prev ? { ...prev, completed: true } : prev);
     });
     const unsubConfig = client2.on("configUpdate", () => {
       setConfig(client2.getConfig());
@@ -1137,6 +1918,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setMessages(client2.getMessages());
       setOperatorOnline(client2.getSession()?.operatorOnline ?? false);
       setConfig(client2.getConfig());
+      setPreChatForm(client2.getSession()?.preChatForm);
     }
     return () => {
       unsubOpen();
@@ -1144,15 +1926,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       unsubTyping();
       unsubPresence();
       unsubConnect();
+      unsubPreChat();
       unsubConfig();
     };
   }, [client2]);
-  useEffect(() => {
+  useEffect2(() => {
     if (isOpen) {
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, isOpen]);
-  useEffect(() => {
+  useEffect2(() => {
     if (isOpen) {
       setTimeout(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
@@ -1161,7 +1944,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setUnreadCount(0);
     }
   }, [isOpen]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isOpen && messages.length > 0) {
       const unread = messages.filter(
         (msg) => msg.sender !== "visitor" && msg.status !== "read"
@@ -1179,14 +1962,14 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       client2.sendReadStatus(messageIds, "read");
     }
   }, [isOpen, isConnected, messages, client2]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isOpen || !isConnected) return;
     const timer = setTimeout(() => {
       markMessagesAsRead();
     }, 1e3);
     return () => clearTimeout(timer);
   }, [isOpen, isConnected, messages, markMessagesAsRead]);
-  useEffect(() => {
+  useEffect2(() => {
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible" && isOpen) {
         markMessagesAsRead();
@@ -1195,7 +1978,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
   }, [isOpen, markMessagesAsRead]);
-  useEffect(() => {
+  useEffect2(() => {
     const unsubRead = client2.on(
       "read",
       () => {
@@ -1334,26 +2117,43 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       y: mouseEvent.clientY
     });
   };
-  const handleTouchStart = (message) => {
-    const timer = setTimeout(() => {
-      if (navigator.vibrate) navigator.vibrate(50);
-      setMessageMenu({
-        message,
-        x: window.innerWidth / 2 - 60,
-        // Center horizontally
-        y: window.innerHeight / 2 - 50
-        // Center vertically
-      });
-    }, 500);
-    setLongPressTimer(timer);
+  const handleTouchStart = (e, message) => {
+    const touch = e.touches[0];
+    touchStartRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+    if (swipedMessageId && swipedMessageId !== message.id) {
+      setSwipedMessageId(null);
+      setSwipeOffset(0);
+    }
   };
-  const handleTouchEnd = () => {
-    if (longPressTimer) {
-      clearTimeout(longPressTimer);
-      setLongPressTimer(null);
+  const handleTouchMove = (e, message) => {
+    if (!touchStartRef.current) return;
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - touchStartRef.current.x;
+    const deltaY = touch.clientY - touchStartRef.current.y;
+    if (Math.abs(deltaY) > Math.abs(deltaX)) return;
+    if (deltaX < 0) {
+      const offset = Math.max(deltaX, -100);
+      setSwipeOffset(offset);
+      setSwipedMessageId(message.id);
     }
   };
-  useEffect(() => {
+  const handleTouchEnd = (message) => {
+    if (!touchStartRef.current) return;
+    const elapsed = Date.now() - touchStartRef.current.time;
+    if (swipeOffset < -50 || swipeOffset < -20 && elapsed < 200) {
+      setSwipeOffset(-80);
+      if (navigator.vibrate) navigator.vibrate(30);
+    } else {
+      setSwipeOffset(0);
+      setSwipedMessageId(null);
+    }
+    touchStartRef.current = null;
+  };
+  const resetSwipe = () => {
+    setSwipedMessageId(null);
+    setSwipeOffset(0);
+  };
+  useEffect2(() => {
     if (!messageMenu) return;
     const handleClickOutside = () => setMessageMenu(null);
     document.addEventListener("click", handleClickOutside);
@@ -1369,7 +2169,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       }, 1500);
     }
   };
-  const dragCounterRef = useRef(0);
+  const dragCounterRef = useRef2(0);
   const handleDragEnter = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1445,22 +2245,32 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const theme = getTheme(config.theme ?? "auto");
   const primaryColor = config.primaryColor ?? "#6366f1";
   const actionIconColor = theme === "dark" ? "#9ca3af" : "#6b7280";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: styles(primaryColor, theme) }),
-    /* @__PURE__ */ jsxs(
+  const styleOptions = {
+    primaryColor,
+    theme,
+    headerColor: config.headerColor,
+    footerColor: config.footerColor,
+    chatBackground: config.chatBackground,
+    toggleColor: config.toggleColor
+  };
+  const shouldShowPreChat = preChatForm && preChatForm.enabled && !preChatForm.completed && !preChatSkipped && // Before first message: show immediately
+  (preChatForm.timing === "before-first-message" && messages.length === 0 || preChatForm.timing === "after-first-message" && messages.some((m) => m.sender === "visitor"));
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("style", { children: styles(styleOptions) }),
+    !isOpen && /* @__PURE__ */ jsxs2(
       "button",
       {
         class: `pp-toggle pp-${position}`,
         onClick: () => client2.toggleOpen(),
-        "aria-label": isOpen ? "Close chat" : "Open chat",
+        "aria-label": "Open chat",
         children: [
-          isOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChatIcon, {}),
-          !isOpen && unreadCount > 0 && /* @__PURE__ */ jsx("span", { class: "pp-unread-badge", children: unreadCount > 9 ? "9+" : unreadCount }),
-          !isOpen && unreadCount === 0 && operatorOnline && /* @__PURE__ */ jsx("span", { class: "pp-online-dot" })
+          /* @__PURE__ */ jsx2(ChatIcon, {}),
+          unreadCount > 0 && /* @__PURE__ */ jsx2("span", { class: "pp-unread-badge", children: unreadCount > 9 ? "9+" : unreadCount }),
+          unreadCount === 0 && operatorOnline && /* @__PURE__ */ jsx2("span", { class: "pp-online-dot" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs(
+    isOpen && /* @__PURE__ */ jsxs2(
       "div",
       {
         class: `pp-window pp-${position} pp-theme-${theme} ${isDragging ? "pp-dragging" : ""}`,
@@ -1469,36 +2279,49 @@ function ChatWidget({ client: client2, config: initialConfig }) {
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          isDragging && /* @__PURE__ */ jsxs("div", { class: "pp-drop-overlay", children: [
-            /* @__PURE__ */ jsx("div", { class: "pp-drop-icon", children: /* @__PURE__ */ jsx(AttachIcon, {}) }),
-            /* @__PURE__ */ jsx("div", { class: "pp-drop-text", children: "Drop files to upload" })
+          isDragging && /* @__PURE__ */ jsxs2("div", { class: "pp-drop-overlay", children: [
+            /* @__PURE__ */ jsx2("div", { class: "pp-drop-icon", children: /* @__PURE__ */ jsx2(AttachIcon, {}) }),
+            /* @__PURE__ */ jsx2("div", { class: "pp-drop-text", children: "Drop files to upload" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { class: "pp-header", children: [
-            /* @__PURE__ */ jsxs("div", { class: "pp-header-info", children: [
-              config.operatorAvatar && /* @__PURE__ */ jsx("img", { src: config.operatorAvatar, alt: "", class: "pp-avatar" }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { class: "pp-header-title", children: config.operatorName ?? "Support" }),
-                /* @__PURE__ */ jsx("div", { class: "pp-header-status", children: operatorOnline ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsx("span", { class: "pp-status-dot pp-online" }),
+          /* @__PURE__ */ jsxs2("div", { class: "pp-header", children: [
+            /* @__PURE__ */ jsxs2("div", { class: "pp-header-info", children: [
+              config.operatorAvatar && /* @__PURE__ */ jsx2("img", { src: config.operatorAvatar, alt: "", class: "pp-avatar" }),
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsx2("div", { class: "pp-header-title", children: config.operatorName ?? "Support" }),
+                /* @__PURE__ */ jsx2("div", { class: "pp-header-status", children: operatorOnline ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                  /* @__PURE__ */ jsx2("span", { class: "pp-status-dot pp-online" }),
                   " Online"
-                ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsx("span", { class: "pp-status-dot" }),
+                ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                  /* @__PURE__ */ jsx2("span", { class: "pp-status-dot" }),
                   " Away"
                 ] }) })
               ] })
             ] }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 class: "pp-close-btn",
                 onClick: () => client2.setOpen(false),
                 "aria-label": "Close chat",
-                children: /* @__PURE__ */ jsx(CloseIcon, {})
+                children: /* @__PURE__ */ jsx2(CloseIcon, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { class: "pp-messages", ref: messagesContainerRef, children: [
-            config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ jsx("div", { class: "pp-welcome", children: config.welcomeMessage }),
+          shouldShowPreChat && preChatForm && /* @__PURE__ */ jsx2(
+            PreChatForm,
+            {
+              client: client2,
+              config: preChatForm,
+              onComplete: () => {
+                setPreChatForm((prev) => prev ? { ...prev, completed: true } : prev);
+              },
+              onSkip: () => {
+                setPreChatSkipped(true);
+              }
+            }
+          ),
+          !shouldShowPreChat && /* @__PURE__ */ jsxs2("div", { class: "pp-messages", ref: messagesContainerRef, onClick: () => swipedMessageId && resetSwipe(), children: [
+            config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ jsx2("div", { class: "pp-welcome", children: config.welcomeMessage }),
             messages.map((msg, index) => {
               const isDeleted = !!msg.deletedAt;
               const isEdited = !!msg.editedAt;
@@ -1524,127 +2347,145 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                   }
                 }
               }
-              const isHovered = hoveredMessageId === msg.id;
-              const showActions = isHovered && !isDeleted;
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                showDateSeparator && /* @__PURE__ */ jsx("div", { class: "pp-date-separator", children: /* @__PURE__ */ jsx("span", { children: formatDateSeparator(msgDate) }) }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    id: `pp-msg-${msg.id}`,
-                    class: `pp-message pp-message-${msg.sender} ${isDeleted ? "pp-message-deleted" : ""}`,
-                    onContextMenu: (e) => handleMessageContextMenu(e, msg),
-                    onMouseEnter: () => setHoveredMessageId(msg.id),
-                    onMouseLeave: () => setHoveredMessageId(null),
-                    onTouchStart: () => handleTouchStart(msg),
-                    onTouchEnd: handleTouchEnd,
-                    onTouchCancel: handleTouchEnd,
-                    children: [
-                      showActions && /* @__PURE__ */ jsxs("div", { class: `pp-message-actions ${msg.sender === "visitor" ? "pp-actions-left" : "pp-actions-right"}`, children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
+              const isSwiped = swipedMessageId === msg.id;
+              const msgSwipeOffset = isSwiped ? swipeOffset : 0;
+              return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                showDateSeparator && /* @__PURE__ */ jsx2("div", { class: "pp-date-separator", children: /* @__PURE__ */ jsx2("span", { children: formatDateSeparator(msgDate) }) }),
+                /* @__PURE__ */ jsxs2("div", { class: `pp-message-swipe-container ${msg.sender === "visitor" ? "pp-swipe-left" : "pp-swipe-right"}`, children: [
+                  /* @__PURE__ */ jsxs2("div", { class: "pp-swipe-actions", children: [
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        class: "pp-swipe-action pp-swipe-reply",
+                        onClick: () => {
+                          handleReply(msg);
+                          resetSwipe();
+                        },
+                        children: /* @__PURE__ */ jsx2(ReplyIcon, { color: "#fff" })
+                      }
+                    ),
+                    msg.sender === "visitor" && !isDeleted && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          class: "pp-swipe-action pp-swipe-edit",
+                          onClick: () => {
+                            handleStartEdit(msg);
+                            resetSwipe();
+                          },
+                          children: /* @__PURE__ */ jsx2(EditIcon, { color: "#fff" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          class: "pp-swipe-action pp-swipe-delete",
+                          onClick: () => {
+                            handleDelete(msg);
+                            resetSwipe();
+                          },
+                          children: /* @__PURE__ */ jsx2(DeleteIcon, { color: "#fff" })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      id: `pp-msg-${msg.id}`,
+                      class: `pp-message pp-message-${msg.sender} ${isDeleted ? "pp-message-deleted" : ""}`,
+                      style: { transform: `translateX(${msgSwipeOffset}px)`, transition: touchStartRef.current ? "none" : "transform 0.2s ease-out" },
+                      onContextMenu: (e) => handleMessageContextMenu(e, msg),
+                      onTouchStart: (e) => handleTouchStart(e, msg),
+                      onTouchMove: (e) => handleTouchMove(e, msg),
+                      onTouchEnd: () => handleTouchEnd(msg),
+                      onTouchCancel: () => handleTouchEnd(msg),
+                      children: [
+                        replyData && (replyData.content || replyData.hasAttachment) && /* @__PURE__ */ jsxs2(
+                          "div",
                           {
-                            class: "pp-action-btn",
-                            onClick: () => handleReply(msg),
-                            title: "Reply",
-                            children: /* @__PURE__ */ jsx(ReplyIcon, { color: actionIconColor })
+                            class: "pp-reply-quote pp-reply-quote-clickable",
+                            onClick: () => scrollToMessage(replyData.id),
+                            role: "button",
+                            tabIndex: 0,
+                            onKeyDown: (e) => e.key === "Enter" && scrollToMessage(replyData.id),
+                            children: [
+                              /* @__PURE__ */ jsx2("span", { class: "pp-reply-sender", children: replyData.sender === "visitor" ? "You" : "Support" }),
+                              /* @__PURE__ */ jsx2("span", { class: "pp-reply-content", children: replyData.deleted ? "Message deleted" : /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                                replyData.hasAttachment && /* @__PURE__ */ jsx2("span", { class: "pp-reply-attachment-icon", children: replyData.attachmentType?.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
+                                replyData.content ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                                  (replyData.content || "").slice(0, 50),
+                                  (replyData.content || "").length > 50 ? "..." : ""
+                                ] }) : replyData.attachmentType?.startsWith("image/") ? "Photo" : "File"
+                              ] }) })
+                            ]
                           }
                         ),
-                        msg.sender === "visitor" && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              class: "pp-action-btn",
-                              onClick: () => handleStartEdit(msg),
-                              title: "Edit",
-                              children: /* @__PURE__ */ jsx(EditIcon, { color: actionIconColor })
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              class: "pp-action-btn pp-action-delete",
-                              onClick: () => handleDelete(msg),
-                              title: "Delete",
-                              children: /* @__PURE__ */ jsx(DeleteIcon, { color: actionIconColor })
-                            }
-                          )
+                        isDeleted ? /* @__PURE__ */ jsxs2("div", { class: "pp-message-content pp-deleted-content", children: [
+                          /* @__PURE__ */ jsx2("span", { class: "pp-deleted-icon", children: "\u{1F5D1}\uFE0F" }),
+                          " Message deleted"
+                        ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                          msg.content && /* @__PURE__ */ jsxs2("div", { class: "pp-message-content", children: [
+                            msg.content,
+                            /* @__PURE__ */ jsxs2("span", { class: "pp-message-time", children: [
+                              formatTime(msg.timestamp),
+                              isEdited && /* @__PURE__ */ jsx2("span", { class: "pp-edited-badge", children: "edited" }),
+                              msg.sender === "ai" && /* @__PURE__ */ jsx2("span", { class: "pp-ai-badge", children: "AI" }),
+                              msg.sender === "visitor" && /* @__PURE__ */ jsx2("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx2(StatusIcon, { status: msg.status }) })
+                            ] })
+                          ] }),
+                          msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ jsxs2("div", { class: "pp-message-attachments", children: [
+                            msg.attachments.map((att) => /* @__PURE__ */ jsx2(AttachmentDisplay, { attachment: att }, att.id)),
+                            !msg.content && /* @__PURE__ */ jsxs2("span", { class: "pp-message-time pp-attachment-time", children: [
+                              formatTime(msg.timestamp),
+                              isEdited && /* @__PURE__ */ jsx2("span", { class: "pp-edited-badge", children: "edited" }),
+                              msg.sender === "ai" && /* @__PURE__ */ jsx2("span", { class: "pp-ai-badge", children: "AI" }),
+                              msg.sender === "visitor" && /* @__PURE__ */ jsx2("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx2(StatusIcon, { status: msg.status }) })
+                            ] })
+                          ] })
                         ] })
-                      ] }),
-                      replyData && (replyData.content || replyData.hasAttachment) && /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          class: "pp-reply-quote pp-reply-quote-clickable",
-                          onClick: () => scrollToMessage(replyData.id),
-                          role: "button",
-                          tabIndex: 0,
-                          onKeyDown: (e) => e.key === "Enter" && scrollToMessage(replyData.id),
-                          children: [
-                            /* @__PURE__ */ jsx("span", { class: "pp-reply-sender", children: replyData.sender === "visitor" ? "You" : "Support" }),
-                            /* @__PURE__ */ jsx("span", { class: "pp-reply-content", children: replyData.deleted ? "Message deleted" : /* @__PURE__ */ jsxs(Fragment2, { children: [
-                              replyData.hasAttachment && /* @__PURE__ */ jsx("span", { class: "pp-reply-attachment-icon", children: replyData.attachmentType?.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
-                              replyData.content ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-                                (replyData.content || "").slice(0, 50),
-                                (replyData.content || "").length > 50 ? "..." : ""
-                              ] }) : replyData.attachmentType?.startsWith("image/") ? "Photo" : "File"
-                            ] }) })
-                          ]
-                        }
-                      ),
-                      isDeleted ? /* @__PURE__ */ jsxs("div", { class: "pp-message-content pp-deleted-content", children: [
-                        /* @__PURE__ */ jsx("span", { class: "pp-deleted-icon", children: "\u{1F5D1}\uFE0F" }),
-                        " Message deleted"
-                      ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-                        msg.content && /* @__PURE__ */ jsx("div", { class: "pp-message-content", children: msg.content }),
-                        msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ jsx("div", { class: "pp-message-attachments", children: msg.attachments.map((att) => /* @__PURE__ */ jsx(AttachmentDisplay, { attachment: att }, att.id)) })
-                      ] }),
-                      /* @__PURE__ */ jsxs("div", { class: "pp-message-time", children: [
-                        formatTime(msg.timestamp),
-                        isEdited && !isDeleted && /* @__PURE__ */ jsx("span", { class: "pp-edited-badge", children: "edited" }),
-                        msg.sender === "ai" && /* @__PURE__ */ jsx("span", { class: "pp-ai-badge", children: "AI" }),
-                        msg.sender === "visitor" && !isDeleted && /* @__PURE__ */ jsx("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx(StatusIcon, { status: msg.status }) })
-                      ] })
-                    ]
-                  }
-                )
+                      ]
+                    }
+                  )
+                ] })
               ] }, msg.id);
             }),
-            isTyping && /* @__PURE__ */ jsxs("div", { class: "pp-message pp-message-operator pp-typing", children: [
-              /* @__PURE__ */ jsx("span", {}),
-              /* @__PURE__ */ jsx("span", {}),
-              /* @__PURE__ */ jsx("span", {})
+            isTyping && /* @__PURE__ */ jsxs2("div", { class: "pp-message pp-message-operator pp-typing", children: [
+              /* @__PURE__ */ jsx2("span", {}),
+              /* @__PURE__ */ jsx2("span", {}),
+              /* @__PURE__ */ jsx2("span", {})
             ] }),
-            /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+            /* @__PURE__ */ jsx2("div", { ref: messagesEndRef })
           ] }),
-          messageMenu && /* @__PURE__ */ jsxs(
+          messageMenu && /* @__PURE__ */ jsxs2(
             "div",
             {
               class: "pp-message-menu",
               style: { top: `${messageMenu.y}px`, left: `${messageMenu.x}px` },
               children: [
-                /* @__PURE__ */ jsxs("button", { onClick: () => handleReply(messageMenu.message), children: [
-                  /* @__PURE__ */ jsx(ReplyIcon, { color: actionIconColor }),
+                /* @__PURE__ */ jsxs2("button", { onClick: () => handleReply(messageMenu.message), children: [
+                  /* @__PURE__ */ jsx2(ReplyIcon, { color: actionIconColor }),
                   " Reply"
                 ] }),
-                messageMenu.message.sender === "visitor" && !messageMenu.message.deletedAt && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsxs("button", { onClick: () => handleStartEdit(messageMenu.message), children: [
-                    /* @__PURE__ */ jsx(EditIcon, { color: actionIconColor }),
+                messageMenu.message.sender === "visitor" && !messageMenu.message.deletedAt && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                  /* @__PURE__ */ jsxs2("button", { onClick: () => handleStartEdit(messageMenu.message), children: [
+                    /* @__PURE__ */ jsx2(EditIcon, { color: actionIconColor }),
                     " Edit"
                   ] }),
-                  /* @__PURE__ */ jsxs("button", { class: "pp-menu-delete", onClick: () => handleDelete(messageMenu.message), children: [
-                    /* @__PURE__ */ jsx(DeleteIcon, { color: "#ef4444" }),
+                  /* @__PURE__ */ jsxs2("button", { class: "pp-menu-delete", onClick: () => handleDelete(messageMenu.message), children: [
+                    /* @__PURE__ */ jsx2(DeleteIcon, { color: "#ef4444" }),
                     " Delete"
                   ] })
                 ] })
               ]
             }
           ),
-          editingMessage && /* @__PURE__ */ jsxs("div", { class: "pp-edit-modal", children: [
-            /* @__PURE__ */ jsxs("div", { class: "pp-edit-header", children: [
-              /* @__PURE__ */ jsx("span", { children: "Edit message" }),
-              /* @__PURE__ */ jsx("button", { onClick: handleCancelEdit, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+          editingMessage && /* @__PURE__ */ jsxs2("div", { class: "pp-edit-modal", children: [
+            /* @__PURE__ */ jsxs2("div", { class: "pp-edit-header", children: [
+              /* @__PURE__ */ jsx2("span", { children: "Edit message" }),
+              /* @__PURE__ */ jsx2("button", { onClick: handleCancelEdit, children: /* @__PURE__ */ jsx2(CloseIcon, {}) })
             ] }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "textarea",
               {
                 class: "pp-edit-input",
@@ -1653,41 +2494,41 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                 autoFocus: true
               }
             ),
-            /* @__PURE__ */ jsxs("div", { class: "pp-edit-actions", children: [
-              /* @__PURE__ */ jsx("button", { class: "pp-edit-cancel", onClick: handleCancelEdit, children: "Cancel" }),
-              /* @__PURE__ */ jsx("button", { class: "pp-edit-save", onClick: handleSaveEdit, disabled: !editContent.trim(), children: "Save" })
+            /* @__PURE__ */ jsxs2("div", { class: "pp-edit-actions", children: [
+              /* @__PURE__ */ jsx2("button", { class: "pp-edit-cancel", onClick: handleCancelEdit, children: "Cancel" }),
+              /* @__PURE__ */ jsx2("button", { class: "pp-edit-save", onClick: handleSaveEdit, disabled: !editContent.trim(), children: "Save" })
             ] })
           ] }),
-          replyingTo && /* @__PURE__ */ jsxs("div", { class: "pp-reply-preview", children: [
-            /* @__PURE__ */ jsxs("div", { class: "pp-reply-preview-content", children: [
-              /* @__PURE__ */ jsx("span", { class: "pp-reply-label", children: "Replying to" }),
-              /* @__PURE__ */ jsxs("span", { class: "pp-reply-text", children: [
-                replyingTo.attachments && replyingTo.attachments.length > 0 && /* @__PURE__ */ jsx("span", { class: "pp-reply-attachment-icon", children: replyingTo.attachments[0].mimeType.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
-                replyingTo.content ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+          replyingTo && /* @__PURE__ */ jsxs2("div", { class: "pp-reply-preview", children: [
+            /* @__PURE__ */ jsxs2("div", { class: "pp-reply-preview-content", children: [
+              /* @__PURE__ */ jsx2("span", { class: "pp-reply-label", children: "Replying to" }),
+              /* @__PURE__ */ jsxs2("span", { class: "pp-reply-text", children: [
+                replyingTo.attachments && replyingTo.attachments.length > 0 && /* @__PURE__ */ jsx2("span", { class: "pp-reply-attachment-icon", children: replyingTo.attachments[0].mimeType.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
+                replyingTo.content ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
                   replyingTo.content.slice(0, 50),
                   replyingTo.content.length > 50 ? "..." : ""
                 ] }) : replyingTo.attachments?.[0]?.mimeType.startsWith("image/") ? "Photo" : "File"
               ] })
             ] }),
-            /* @__PURE__ */ jsx("button", { class: "pp-reply-cancel", onClick: handleCancelReply, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+            /* @__PURE__ */ jsx2("button", { class: "pp-reply-cancel", onClick: handleCancelReply, children: /* @__PURE__ */ jsx2(CloseIcon, {}) })
           ] }),
-          pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { class: "pp-attachments-preview", children: pendingAttachments.map((pending) => /* @__PURE__ */ jsxs("div", { class: `pp-attachment-preview pp-attachment-${pending.status}`, children: [
-            pending.preview ? /* @__PURE__ */ jsx("img", { src: pending.preview, alt: pending.file.name, class: "pp-preview-img" }) : /* @__PURE__ */ jsx("div", { class: "pp-preview-file", children: /* @__PURE__ */ jsx(FileIcon, { mimeType: pending.file.type }) }),
-            /* @__PURE__ */ jsx(
+          pendingAttachments.length > 0 && /* @__PURE__ */ jsx2("div", { class: "pp-attachments-preview", children: pendingAttachments.map((pending) => /* @__PURE__ */ jsxs2("div", { class: `pp-attachment-preview pp-attachment-${pending.status}`, children: [
+            pending.preview ? /* @__PURE__ */ jsx2("img", { src: pending.preview, alt: pending.file.name, class: "pp-preview-img" }) : /* @__PURE__ */ jsx2("div", { class: "pp-preview-file", children: /* @__PURE__ */ jsx2(FileIcon, { mimeType: pending.file.type }) }),
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 class: "pp-remove-attachment",
                 onClick: () => handleRemoveAttachment(pending.id),
                 "aria-label": "Remove attachment",
                 type: "button",
-                children: /* @__PURE__ */ jsx(CloseIcon, {})
+                children: /* @__PURE__ */ jsx2(CloseIcon, {})
               }
             ),
-            pending.status === "uploading" && /* @__PURE__ */ jsx("div", { class: "pp-upload-progress", style: { width: `${pending.progress}%` } }),
-            pending.status === "error" && /* @__PURE__ */ jsx("div", { class: "pp-upload-error", title: pending.error, children: "!" })
+            pending.status === "uploading" && /* @__PURE__ */ jsx2("div", { class: "pp-upload-progress", style: { width: `${pending.progress}%` } }),
+            pending.status === "error" && /* @__PURE__ */ jsx2("div", { class: "pp-upload-error", title: pending.error, children: "!" })
           ] }, pending.id)) }),
-          /* @__PURE__ */ jsxs("form", { class: "pp-input-form", onSubmit: handleSubmit, children: [
-            /* @__PURE__ */ jsx(
+          !shouldShowPreChat && /* @__PURE__ */ jsxs2("form", { class: "pp-input-form", onSubmit: handleSubmit, children: [
+            /* @__PURE__ */ jsx2(
               "input",
               {
                 ref: (el) => {
@@ -1702,7 +2543,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                 multiple: true
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1710,10 +2551,10 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                 onClick: () => fileInputRef.current?.click(),
                 disabled: !isConnected || isUploading,
                 "aria-label": "Attach file",
-                children: /* @__PURE__ */ jsx(AttachIcon, {})
+                children: /* @__PURE__ */ jsx2(AttachIcon, {})
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "input",
               {
                 ref: inputRef,
@@ -1725,20 +2566,20 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                 disabled: !isConnected
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "submit",
                 class: "pp-send-btn",
                 disabled: !inputValue.trim() && pendingAttachments.filter((a) => a.status === "ready").length === 0 || !isConnected || isUploading,
                 "aria-label": "Send message",
-                children: /* @__PURE__ */ jsx(SendIcon, {})
+                children: /* @__PURE__ */ jsx2(SendIcon, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { class: "pp-footer", children: [
+          /* @__PURE__ */ jsxs2("div", { class: "pp-footer", children: [
             "Powered by ",
-            /* @__PURE__ */ jsx("a", { href: "https://pocketping.io", target: "_blank", rel: "noopener", children: "PocketPing" })
+            /* @__PURE__ */ jsx2("a", { href: "https://pocketping.io", target: "_blank", rel: "noopener", children: "PocketPing" })
           ] })
         ]
       }
@@ -1766,90 +2607,90 @@ function formatTime(timestamp) {
   return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 function ChatIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx2("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
 function SendIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-    /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-    /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx2("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+    /* @__PURE__ */ jsx2("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
   ] });
 }
 function StatusIcon({ status }) {
   if (!status || status === "sending" || status === "sent") {
-    return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) });
+    return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check", children: /* @__PURE__ */ jsx2("polyline", { points: "3 8 7 12 13 4" }) });
   }
   if (status === "delivered") {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double", children: [
-      /* @__PURE__ */ jsx("polyline", { points: "1 8 5 12 11 4" }),
-      /* @__PURE__ */ jsx("polyline", { points: "7 8 11 12 17 4" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double", children: [
+      /* @__PURE__ */ jsx2("polyline", { points: "1 8 5 12 11 4" }),
+      /* @__PURE__ */ jsx2("polyline", { points: "7 8 11 12 17 4" })
     ] });
   }
   if (status === "read") {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double pp-check-read", children: [
-      /* @__PURE__ */ jsx("polyline", { points: "1 8 5 12 11 4" }),
-      /* @__PURE__ */ jsx("polyline", { points: "7 8 11 12 17 4" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double pp-check-read", children: [
+      /* @__PURE__ */ jsx2("polyline", { points: "1 8 5 12 11 4" }),
+      /* @__PURE__ */ jsx2("polyline", { points: "7 8 11 12 17 4" })
     ] });
   }
   return null;
 }
 function AttachIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx2("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
 }
 function ReplyIcon({ color, size = 16 }) {
   const strokeColor = color || "currentColor";
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx("polyline", { points: "9 17 4 12 9 7" }),
-    /* @__PURE__ */ jsx("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx2("polyline", { points: "9 17 4 12 9 7" }),
+    /* @__PURE__ */ jsx2("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
   ] });
 }
 function EditIcon({ color, size = 16 }) {
   const strokeColor = color || "currentColor";
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" }) });
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: /* @__PURE__ */ jsx2("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" }) });
 }
 function DeleteIcon({ color, size = 16 }) {
   const strokeColor = color || "currentColor";
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
-    /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx2("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ jsx2("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
   ] });
 }
 function FileIcon({ mimeType }) {
   if (mimeType === "application/pdf") {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-      /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-      /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
-      /* @__PURE__ */ jsx("path", { d: "M9 15h6" }),
-      /* @__PURE__ */ jsx("path", { d: "M9 11h6" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx2("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx2("polyline", { points: "14 2 14 8 20 8" }),
+      /* @__PURE__ */ jsx2("path", { d: "M9 15h6" }),
+      /* @__PURE__ */ jsx2("path", { d: "M9 11h6" })
     ] });
   }
   if (mimeType.startsWith("audio/")) {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-      /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
-      /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
-      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx2("path", { d: "M9 18V5l12-2v13" }),
+      /* @__PURE__ */ jsx2("circle", { cx: "6", cy: "18", r: "3" }),
+      /* @__PURE__ */ jsx2("circle", { cx: "18", cy: "16", r: "3" })
     ] });
   }
   if (mimeType.startsWith("video/")) {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-      /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2.18", ry: "2.18" }),
-      /* @__PURE__ */ jsx("line", { x1: "7", y1: "2", x2: "7", y2: "22" }),
-      /* @__PURE__ */ jsx("line", { x1: "17", y1: "2", x2: "17", y2: "22" }),
-      /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-      /* @__PURE__ */ jsx("line", { x1: "2", y1: "7", x2: "7", y2: "7" }),
-      /* @__PURE__ */ jsx("line", { x1: "2", y1: "17", x2: "7", y2: "17" }),
-      /* @__PURE__ */ jsx("line", { x1: "17", y1: "17", x2: "22", y2: "17" }),
-      /* @__PURE__ */ jsx("line", { x1: "17", y1: "7", x2: "22", y2: "7" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx2("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2.18", ry: "2.18" }),
+      /* @__PURE__ */ jsx2("line", { x1: "7", y1: "2", x2: "7", y2: "22" }),
+      /* @__PURE__ */ jsx2("line", { x1: "17", y1: "2", x2: "17", y2: "22" }),
+      /* @__PURE__ */ jsx2("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx2("line", { x1: "2", y1: "7", x2: "7", y2: "7" }),
+      /* @__PURE__ */ jsx2("line", { x1: "2", y1: "17", x2: "7", y2: "17" }),
+      /* @__PURE__ */ jsx2("line", { x1: "17", y1: "17", x2: "22", y2: "17" }),
+      /* @__PURE__ */ jsx2("line", { x1: "17", y1: "7", x2: "22", y2: "7" })
     ] });
   }
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-    /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx2("polyline", { points: "14 2 14 8 20 8" })
   ] });
 }
 function AttachmentDisplay({ attachment }) {
@@ -1862,22 +2703,22 @@ function AttachmentDisplay({ attachment }) {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
   if (isImage) {
-    return /* @__PURE__ */ jsx("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-image", children: /* @__PURE__ */ jsx("img", { src: attachment.thumbnailUrl || attachment.url, alt: attachment.filename }) });
+    return /* @__PURE__ */ jsx2("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-image", children: /* @__PURE__ */ jsx2("img", { src: attachment.thumbnailUrl || attachment.url, alt: attachment.filename }) });
   }
   if (isAudio) {
-    return /* @__PURE__ */ jsxs("div", { class: "pp-attachment pp-attachment-audio", children: [
-      /* @__PURE__ */ jsx("audio", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx("source", { src: attachment.url, type: attachment.mimeType }) }),
-      /* @__PURE__ */ jsx("span", { class: "pp-attachment-name", children: attachment.filename })
+    return /* @__PURE__ */ jsxs2("div", { class: "pp-attachment pp-attachment-audio", children: [
+      /* @__PURE__ */ jsx2("audio", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx2("source", { src: attachment.url, type: attachment.mimeType }) }),
+      /* @__PURE__ */ jsx2("span", { class: "pp-attachment-name", children: attachment.filename })
     ] });
   }
   if (isVideo) {
-    return /* @__PURE__ */ jsx("div", { class: "pp-attachment pp-attachment-video", children: /* @__PURE__ */ jsx("video", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx("source", { src: attachment.url, type: attachment.mimeType }) }) });
+    return /* @__PURE__ */ jsx2("div", { class: "pp-attachment pp-attachment-video", children: /* @__PURE__ */ jsx2("video", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx2("source", { src: attachment.url, type: attachment.mimeType }) }) });
   }
-  return /* @__PURE__ */ jsxs("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-file", children: [
-    /* @__PURE__ */ jsx(FileIcon, { mimeType: attachment.mimeType }),
-    /* @__PURE__ */ jsxs("div", { class: "pp-attachment-info", children: [
-      /* @__PURE__ */ jsx("span", { class: "pp-attachment-name", children: attachment.filename }),
-      /* @__PURE__ */ jsx("span", { class: "pp-attachment-size", children: formatSize(attachment.size) })
+  return /* @__PURE__ */ jsxs2("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-file", children: [
+    /* @__PURE__ */ jsx2(FileIcon, { mimeType: attachment.mimeType }),
+    /* @__PURE__ */ jsxs2("div", { class: "pp-attachment-info", children: [
+      /* @__PURE__ */ jsx2("span", { class: "pp-attachment-name", children: attachment.filename }),
+      /* @__PURE__ */ jsx2("span", { class: "pp-attachment-size", children: formatSize(attachment.size) })
     ] })
   ] });
 }
@@ -1943,7 +2784,8 @@ var PocketPingClient = class {
       visitorId: response.visitorId,
       operatorOnline: response.operatorOnline ?? false,
       messages: response.messages ?? [],
-      identity: response.identity || storedIdentity || void 0
+      identity: response.identity || storedIdentity || void 0,
+      preChatForm: response.preChatForm
     };
     if (response.operatorName) {
       this.config.operatorName = response.operatorName;
@@ -1954,6 +2796,18 @@ var PocketPingClient = class {
     if (response.primaryColor) {
       this.config.primaryColor = response.primaryColor;
     }
+    if (response.headerColor) {
+      this.config.headerColor = response.headerColor;
+    }
+    if (response.footerColor) {
+      this.config.footerColor = response.footerColor;
+    }
+    if (response.chatBackground) {
+      this.config.chatBackground = response.chatBackground;
+    }
+    if (response.toggleColor) {
+      this.config.toggleColor = response.toggleColor;
+    }
     if (response.welcomeMessage) {
       this.config.welcomeMessage = response.welcomeMessage;
     }
@@ -1961,6 +2815,10 @@ var PocketPingClient = class {
       operatorName: this.config.operatorName,
       operatorAvatar: this.config.operatorAvatar,
       primaryColor: this.config.primaryColor,
+      headerColor: this.config.headerColor,
+      footerColor: this.config.footerColor,
+      chatBackground: this.config.chatBackground,
+      toggleColor: this.config.toggleColor,
       welcomeMessage: this.config.welcomeMessage
     });
     this.storeSessionId(response.sessionId);
@@ -2299,6 +3157,36 @@ var PocketPingClient = class {
       }
     }
   }
+  /**
+   * Submit pre-chat form data (email and/or phone)
+   * @param data - Form data containing email and/or phone
+   */
+  async submitPreChat(data) {
+    if (!this.session) {
+      throw new Error("[PocketPing] Not connected");
+    }
+    if (!data.email && !data.phone) {
+      throw new Error("[PocketPing] Either email or phone is required");
+    }
+    try {
+      await this.fetch("/prechat", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session.sessionId,
+          email: data.email,
+          phone: data.phone,
+          phoneCountry: data.phoneCountry
+        })
+      });
+      if (this.session.preChatForm) {
+        this.session.preChatForm.completed = true;
+      }
+      this.emit("preChatCompleted", data);
+    } catch (err) {
+      console.error("[PocketPing] Failed to submit pre-chat form:", err);
+      throw err;
+    }
+  }
   /**
    * Reset the user identity and optionally start a new session
    * Call on user logout to clear user data
@@ -2948,6 +3836,12 @@ var PocketPingClient = class {
             this.session.messages.push(message);
             this.emit("message", message);
             this.config.onMessage?.(message);
+            if (message.sender !== "visitor" && !this.isOpen) {
+              const autoOpen = this.config.autoOpenOnMessage ?? true;
+              if (autoOpen) {
+                this.setOpen(true);
+              }
+            }
           }
         }
         if (message.sender !== "visitor") {
@@ -3106,6 +4000,12 @@ var PocketPingClient = class {
             this.session.messages.push(message);
             this.emit("message", message);
             this.config.onMessage?.(message);
+            if (message.sender !== "visitor" && !this.isOpen) {
+              const autoOpen = this.config.autoOpenOnMessage ?? true;
+              if (autoOpen) {
+                this.setOpen(true);
+              }
+            }
           }
         }
       } catch (err) {