@v-tilt/browser 1.4.0 → 1.4.2

package/lib/extensions/chat/chat.js

@@ -21,18 +21,17 @@ const LOGGER_PREFIX = "[Chat]";
 // ============================================================================
 const DEFAULT_POSITION = "bottom-right";
 const DEFAULT_THEME = {
-    primaryColor: "#6366f1",
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    borderRadius: "12px",
-    headerBgColor: "#6366f1",
-    userBubbleColor: "#6366f1",
-    agentBubbleColor: "#f3f4f6",
+    primaryColor: "#7B68EE", // Intercom-like purple
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    borderRadius: "16px",
+};
+// API endpoints
+const API = {
+    channels: "/api/chat/widget/channels",
+    messages: "/api/chat/widget/messages",
+    read: "/api/chat/widget/read",
+    ablyToken: "/api/chat/ably-token",
 };
-// API endpoints (widget endpoints for SDK use)
-const API_WIDGET = "/api/chat/widget";
-const API_WIDGET_MESSAGES = "/api/chat/widget/messages";
-const API_WIDGET_READ = "/api/chat/widget/read";
-const API_ABLY_TOKEN = "/api/chat/ably-token";
 // ============================================================================
 // LazyLoadedChat Implementation
 // ============================================================================
@@ -58,6 +57,7 @@ class LazyLoadedChat {
         // Read tracking - initial position when widget opens (to show unread indicators)
         this._initialUserReadAt = null;
         this._isMarkingRead = false;
+        this._previousView = "list";
         this._instance = instance;
         this._config = {
             enabled: true,
@@ -73,6 +73,10 @@ class LazyLoadedChat {
             isConnected: false,
             isLoading: false,
             unreadCount: 0,
+            // Multi-channel support
+            currentView: "list",
+            channels: [],
+            // Current channel (when in conversation view)
             channel: null,
             messages: [],
             isTyping: false,
@@ -102,6 +106,20 @@ class LazyLoadedChat {
     get channel() {
         return this._state.channel;
     }
+    get channels() {
+        return this._state.channels;
+    }
+    get currentView() {
+        return this._state.currentView;
+    }
+    // Theme getter to avoid repeated DEFAULT_THEME fallback
+    get _theme() {
+        return this._config.theme || DEFAULT_THEME;
+    }
+    // Distinct ID getter for convenience
+    get _distinctId() {
+        return this._instance.getDistinctId() || "";
+    }
     // ============================================================================
     // Public API - Widget Control
     // ============================================================================
@@ -111,34 +129,47 @@ class LazyLoadedChat {
             return;
         this._state.isOpen = true;
         this._updateUI();
+        // Add opening animation
+        if (this._widget) {
+            this._widget.classList.remove("vtilt-closing");
+            this._widget.classList.add("vtilt-opening");
+        }
         this._trackEvent(types_1.CHAT_EVENTS.WIDGET_OPENED, {
             $page_url: (_a = globals_1.window === null || globals_1.window === void 0 ? void 0 : globals_1.window.location) === null || _a === void 0 ? void 0 : _a.href,
             $trigger: "api",
         });
-        // Initialize channel if needed
-        if (!this._state.channel) {
-            this._initializeChannel();
-        }
-        else {
-            // Channel exists, mark any unread messages as read
-            this._autoMarkAsRead();
-        }
-        // Connect to Ably
-        if (!this._state.isConnected) {
-            this._connectRealtime();
+        // Show channel list view first (multi-channel support)
+        // Only fetch channels if not already loaded
+        if (this._state.channels.length === 0) {
+            this.getChannels();
         }
+        // NOTE: Ably connection is now established only when entering conversation view
+        // This saves connection minutes when user is just browsing the channel list
     }
     close() {
         if (!this._state.isOpen)
             return;
         const timeOpen = this._getTimeOpen();
-        this._state.isOpen = false;
-        this._updateUI();
+        // Add closing animation
+        if (this._widget) {
+            this._widget.classList.remove("vtilt-opening");
+            this._widget.classList.add("vtilt-closing");
+            // Hide after animation completes
+            setTimeout(() => {
+                this._state.isOpen = false;
+                this._updateUI();
+            }, 200);
+        }
+        else {
+            this._state.isOpen = false;
+            this._updateUI();
+        }
         this._trackEvent(types_1.CHAT_EVENTS.WIDGET_CLOSED, {
             $time_open_seconds: timeOpen,
-            $messages_sent: this._state.messages.filter((m) => m.sender_type === "user")
-                .length,
+            $messages_sent: this._state.messages.filter((m) => m.sender_type === "user").length,
         });
+        // Disconnect Ably when widget closes to save connection minutes
+        this._disconnectRealtime();
     }
     toggle() {
         if (this._state.isOpen) {
@@ -157,15 +188,165 @@ class LazyLoadedChat {
         this._updateUI();
     }
     // ============================================================================
+    // Public API - Channel Management (Multi-channel support)
+    // ============================================================================
+    /**
+     * Fetch/refresh the list of user's channels
+     */
+    async getChannels() {
+        this._state.isLoading = true;
+        this._updateUI();
+        try {
+            const response = await this._apiRequest(`${API.channels}?distinct_id=${encodeURIComponent(this._distinctId)}`, {
+                method: "GET",
+            });
+            if (response) {
+                this._state.channels = response.channels || [];
+                // Calculate total unread count from all channels
+                this._state.unreadCount = this._state.channels.reduce((sum, ch) => sum + (ch.unread_count || 0), 0);
+            }
+        }
+        catch (error) {
+            console.error(`${LOGGER_PREFIX} Failed to fetch channels:`, error);
+        }
+        finally {
+            this._state.isLoading = false;
+            this._updateUI();
+        }
+    }
+    /**
+     * Select a channel and load its messages
+     */
+    async selectChannel(channelId) {
+        this._state.isLoading = true;
+        this._updateUI();
+        try {
+            const response = await this._apiRequest(`${API.channels}/${channelId}?distinct_id=${encodeURIComponent(this._distinctId)}`, {
+                method: "GET",
+            });
+            if (response) {
+                this._state.channel = response.channel;
+                this._state.messages = response.messages || [];
+                this._state.currentView = "conversation";
+                // Initialize read cursors from channel
+                this._state.agentLastReadAt =
+                    response.channel.agent_last_read_at || null;
+                this._initialUserReadAt = response.channel.user_last_read_at || null;
+                // Connect to Ably for this channel
+                this._connectRealtime();
+                // Auto-mark unread messages as read if widget is open
+                if (this._state.isOpen) {
+                    this._autoMarkAsRead();
+                }
+            }
+        }
+        catch (error) {
+            console.error(`${LOGGER_PREFIX} Failed to select channel:`, error);
+        }
+        finally {
+            this._state.isLoading = false;
+            this._updateUI();
+        }
+    }
+    /**
+     * Create a new channel and enter it
+     */
+    async createChannel() {
+        var _a;
+        this._state.isLoading = true;
+        this._updateUI();
+        try {
+            const response = await this._apiRequest(API.channels, {
+                method: "POST",
+                body: JSON.stringify({
+                    distinct_id: this._distinctId,
+                    page_url: (_a = globals_1.window === null || globals_1.window === void 0 ? void 0 : globals_1.window.location) === null || _a === void 0 ? void 0 : _a.href,
+                    page_title: globals_1.document === null || globals_1.document === void 0 ? void 0 : globals_1.document.title,
+                }),
+            });
+            if (response) {
+                this._state.channel = response.channel;
+                this._state.messages = response.messages || [];
+                this._state.currentView = "conversation";
+                // Initialize read cursors
+                this._state.agentLastReadAt =
+                    response.channel.agent_last_read_at || null;
+                this._initialUserReadAt = response.channel.user_last_read_at || null;
+                // Add new channel to the list
+                const newChannelSummary = {
+                    id: response.channel.id,
+                    status: response.channel.status,
+                    ai_mode: response.channel.ai_mode,
+                    last_message_at: response.channel.last_message_at,
+                    last_message_preview: response.channel.last_message_preview,
+                    last_message_sender: response.channel.last_message_sender,
+                    unread_count: response.channel.unread_count,
+                    user_last_read_at: response.channel.user_last_read_at,
+                    created_at: response.channel.created_at,
+                };
+                this._state.channels.unshift(newChannelSummary);
+                // Track channel started
+                this._trackEvent(types_1.CHAT_EVENTS.STARTED, {
+                    $channel_id: response.channel.id,
+                    $initiated_by: "user",
+                    $ai_mode: response.channel.ai_mode,
+                });
+                // Connect to Ably for this channel
+                this._connectRealtime();
+            }
+        }
+        catch (error) {
+            console.error(`${LOGGER_PREFIX} Failed to create channel:`, error);
+        }
+        finally {
+            this._state.isLoading = false;
+            this._updateUI();
+        }
+    }
+    /**
+     * Go back to channel list from conversation view
+     */
+    goToChannelList() {
+        // Disconnect Ably when leaving conversation to save connection minutes
+        this._disconnectRealtime();
+        // Update the channel in the list with latest data
+        if (this._state.channel) {
+            const channelIndex = this._state.channels.findIndex((ch) => { var _a; return ch.id === ((_a = this._state.channel) === null || _a === void 0 ? void 0 : _a.id); });
+            if (channelIndex !== -1) {
+                this._state.channels[channelIndex] = {
+                    ...this._state.channels[channelIndex],
+                    last_message_at: this._state.messages.length > 0
+                        ? this._state.messages[this._state.messages.length - 1].created_at
+                        : this._state.channels[channelIndex].last_message_at,
+                    last_message_preview: this._state.messages.length > 0
+                        ? this._state.messages[this._state.messages.length - 1].content.substring(0, 100)
+                        : this._state.channels[channelIndex].last_message_preview,
+                    last_message_sender: this._state.messages.length > 0
+                        ? this._state.messages[this._state.messages.length - 1].sender_type
+                        : this._state.channels[channelIndex].last_message_sender,
+                    unread_count: 0, // We just viewed it
+                };
+            }
+        }
+        // Clear current channel state
+        this._state.channel = null;
+        this._state.messages = [];
+        this._state.currentView = "list";
+        this._state.isTyping = false;
+        this._state.typingSender = null;
+        this._updateUI();
+    }
+    // ============================================================================
     // Public API - Messaging
     // ============================================================================
     async sendMessage(content) {
         var _a, _b, _c, _d;
         if (!content.trim())
             return;
-        // Ensure channel exists
-        if (!this._state.channel) {
-            await this._initializeChannel();
+        // Ensure we're in conversation view with a channel
+        if (!this._state.channel || this._state.currentView !== "conversation") {
+            console.error(`${LOGGER_PREFIX} Cannot send message: not in conversation view`);
+            return;
         }
         const channelId = (_a = this._state.channel) === null || _a === void 0 ? void 0 : _a.id;
         if (!channelId) {
@@ -177,7 +358,7 @@ class LazyLoadedChat {
             id: `temp-${Date.now()}`,
             channel_id: channelId,
             sender_type: "user",
-            sender_id: this._instance.getDistinctId() || null,
+            sender_id: this._distinctId || null,
             sender_name: null,
             sender_avatar_url: null,
             content,
@@ -189,11 +370,11 @@ class LazyLoadedChat {
         this._updateUI();
         try {
             // Send to API
-            const response = await this._apiRequest(`${API_WIDGET_MESSAGES}`, {
+            const response = await this._apiRequest(API.messages, {
                 method: "POST",
                 body: JSON.stringify({
                     channel_id: channelId,
-                    distinct_id: this._instance.getDistinctId(),
+                    distinct_id: this._distinctId,
                     content,
                 }),
             });
@@ -239,18 +420,19 @@ class LazyLoadedChat {
         if (!latestMessage)
             return;
         // Check if there are unread agent messages
-        const hasUnreadAgentMessages = this._state.messages.some((m) => (m.sender_type === "agent" || m.sender_type === "ai") && !this._isMessageReadByUser(m.created_at));
+        const hasUnreadAgentMessages = this._state.messages.some((m) => (m.sender_type === "agent" || m.sender_type === "ai") &&
+            !this._isMessageReadByUser(m.created_at));
         if (!hasUnreadAgentMessages)
             return;
         this._state.unreadCount = 0;
         this._isMarkingRead = true;
         this._updateUI();
         // API call to update read cursor with latest message timestamp
-        this._apiRequest(API_WIDGET_READ, {
+        this._apiRequest(API.read, {
             method: "POST",
             body: JSON.stringify({
                 channel_id: this._state.channel.id,
-                distinct_id: this._instance.getDistinctId(),
+                distinct_id: this._distinctId,
                 read_at: latestMessage.created_at,
             }),
         })
@@ -323,52 +505,6 @@ class LazyLoadedChat {
         console.info(`${LOGGER_PREFIX} destroyed`);
     }
     // ============================================================================
-    // Private - Channel Management
-    // ============================================================================
-    async _initializeChannel() {
-        var _a;
-        this._state.isLoading = true;
-        this._updateUI();
-        try {
-            const response = await this._apiRequest(`${API_WIDGET}`, {
-                method: "POST",
-                body: JSON.stringify({
-                    distinct_id: this._instance.getDistinctId(),
-                    page_url: (_a = globals_1.window === null || globals_1.window === void 0 ? void 0 : globals_1.window.location) === null || _a === void 0 ? void 0 : _a.href,
-                    page_title: globals_1.document === null || globals_1.document === void 0 ? void 0 : globals_1.document.title,
-                }),
-            });
-            if (response) {
-                this._state.channel = response.channel;
-                this._state.messages = response.messages || [];
-                // Initialize read cursors from channel
-                this._state.agentLastReadAt = response.channel.agent_last_read_at || null;
-                this._initialUserReadAt = response.channel.user_last_read_at || null;
-                // Track channel started (only if new)
-                if (response.messages.length === 0 || response.messages.length === 1) {
-                    this._trackEvent(types_1.CHAT_EVENTS.STARTED, {
-                        $channel_id: response.channel.id,
-                        $initiated_by: "user",
-                        $ai_mode: response.channel.ai_mode,
-                    });
-                }
-                // Connect to Ably now that we have channel ID
-                this._connectRealtime();
-                // Auto-mark unread messages as read if widget is open
-                if (this._state.isOpen) {
-                    this._autoMarkAsRead();
-                }
-            }
-        }
-        catch (error) {
-            console.error(`${LOGGER_PREFIX} Failed to initialize channel:`, error);
-        }
-        finally {
-            this._state.isLoading = false;
-            this._updateUI();
-        }
-    }
-    // ============================================================================
     // Private - Ably Realtime Connection
     // ============================================================================
     async _connectRealtime() {
@@ -379,10 +515,10 @@ class LazyLoadedChat {
         this._notifyConnectionChange(false);
         try {
             // Get Ably token from server
-            const tokenResponse = await this._apiRequest(API_ABLY_TOKEN, {
+            const tokenResponse = await this._apiRequest(API.ablyToken, {
                 method: "POST",
                 body: JSON.stringify({
-                    distinct_id: this._instance.getDistinctId(),
+                    distinct_id: this._distinctId,
                     channel_id: this._state.channel.id,
                 }),
             });
@@ -396,10 +532,10 @@ class LazyLoadedChat {
                 authCallback: async (_, callback) => {
                     var _a;
                     try {
-                        const refreshResponse = await this._apiRequest(API_ABLY_TOKEN, {
+                        const refreshResponse = await this._apiRequest(API.ablyToken, {
                             method: "POST",
                             body: JSON.stringify({
-                                distinct_id: this._instance.getDistinctId(),
+                                distinct_id: this._distinctId,
                                 channel_id: (_a = this._state.channel) === null || _a === void 0 ? void 0 : _a.id,
                             }),
                         });
@@ -493,9 +629,12 @@ class LazyLoadedChat {
             return;
         // Skip user's own messages - we already have them from optimistic updates
         // The sender_id for user messages is the distinct_id
-        if (message.sender_type === "user" && message.sender_id === this._instance.getDistinctId()) {
+        if (message.sender_type === "user" &&
+            message.sender_id === this._distinctId) {
             // But DO replace temp message with real one if present
-            const tempIndex = this._state.messages.findIndex((m) => m.id.startsWith("temp-") && m.content === message.content && m.sender_type === "user");
+            const tempIndex = this._state.messages.findIndex((m) => m.id.startsWith("temp-") &&
+                m.content === message.content &&
+                m.sender_type === "user");
             if (tempIndex !== -1) {
                 this._state.messages[tempIndex] = message;
                 this._updateUI();
@@ -533,7 +672,8 @@ class LazyLoadedChat {
         // Only show typing for non-user senders
         if (event.sender_type === "user")
             return;
-        const senderName = event.sender_name || (event.sender_type === "ai" ? "AI Assistant" : "Agent");
+        const senderName = event.sender_name ||
+            (event.sender_type === "ai" ? "AI Assistant" : "Agent");
         this._state.isTyping = event.is_typing;
         this._state.typingSender = event.is_typing ? senderName : null;
         // Notify callbacks
@@ -578,27 +718,14 @@ class LazyLoadedChat {
         globals_1.document.body.appendChild(this._container);
     }
     _attachEventListeners() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         // Bubble click
         (_a = this._bubble) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => this.toggle());
-        // Close button
+        // Close button (initial attachment - re-attached in _updateHeader)
         const closeBtn = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-close");
         closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener("click", () => this.close());
-        // Send button
-        const sendBtn = (_c = this._widget) === null || _c === void 0 ? void 0 : _c.querySelector(".vtilt-chat-send");
-        sendBtn === null || sendBtn === void 0 ? void 0 : sendBtn.addEventListener("click", () => this._handleSend());
-        // Input enter key and typing indicator
-        const input = (_d = this._widget) === null || _d === void 0 ? void 0 : _d.querySelector(".vtilt-chat-input");
-        input === null || input === void 0 ? void 0 : input.addEventListener("keypress", (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                this._handleSend();
-            }
-        });
-        // Send typing indicator on input
-        input === null || input === void 0 ? void 0 : input.addEventListener("input", () => {
-            this._handleUserTyping();
-        });
+        // Note: Channel list and conversation listeners are attached dynamically
+        // in _attachChannelListListeners() and _attachConversationListeners()
     }
     _handleUserTyping() {
         // Don't send typing if not connected to Ably
@@ -625,7 +752,7 @@ class LazyLoadedChat {
         try {
             this._typingChannel.publish("typing", {
                 sender_type: "user",
-                sender_id: this._instance.getDistinctId(),
+                sender_id: this._distinctId,
                 sender_name: null,
                 is_typing: isTyping,
             });
@@ -668,8 +795,39 @@ class LazyLoadedChat {
                 this._state.unreadCount > 0 ? "flex" : "none";
             badge.textContent = String(this._state.unreadCount);
         }
-        // Update messages
-        this._renderMessages();
+        // Detect view change for animation
+        const viewChanged = this._previousView !== this._state.currentView;
+        const animationClass = viewChanged
+            ? this._state.currentView === "conversation"
+                ? "vtilt-view-enter-right"
+                : "vtilt-view-enter-left"
+            : "";
+        // Update content based on current view
+        const contentContainer = this._widget.querySelector(".vtilt-chat-content");
+        if (contentContainer) {
+            // Remove previous animation classes
+            contentContainer.classList.remove("vtilt-view-enter-right", "vtilt-view-enter-left");
+            if (this._state.currentView === "list") {
+                contentContainer.innerHTML = this._getChannelListHTML();
+                this._attachChannelListListeners();
+            }
+            else {
+                contentContainer.innerHTML = this._getConversationHTML();
+                this._attachConversationListeners();
+                // Render messages in conversation view
+                this._renderMessages();
+            }
+            // Add animation class if view changed
+            if (animationClass) {
+                // Force reflow to restart animation
+                void contentContainer.offsetWidth;
+                contentContainer.classList.add(animationClass);
+            }
+        }
+        // Update previous view
+        this._previousView = this._state.currentView;
+        // Update header based on view
+        this._updateHeader();
         // Update loading state
         const loader = this._widget.querySelector(".vtilt-chat-loader");
         if (loader) {
@@ -677,38 +835,475 @@ class LazyLoadedChat {
                 ? "flex"
                 : "none";
         }
-        // Update typing indicator
+        // Update typing indicator (only in conversation view)
         const typing = this._widget.querySelector(".vtilt-chat-typing");
         if (typing) {
-            typing.style.display = this._state.isTyping
-                ? "flex"
-                : "none";
+            typing.style.display =
+                this._state.isTyping && this._state.currentView === "conversation"
+                    ? "flex"
+                    : "none";
             const typingText = typing.querySelector("span");
             if (typingText && this._state.typingSender) {
                 typingText.textContent = `${this._state.typingSender} is typing...`;
             }
         }
     }
+    _updateHeader() {
+        var _a, _b;
+        const header = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-header");
+        if (!header)
+            return;
+        const greeting = this._config.greeting || "Messages";
+        const primary = this._theme.primaryColor;
+        if (this._state.currentView === "list") {
+            header.style.cssText = `
+        background: #ffffff;
+        border-bottom: 1px solid #E5E5E5;
+        padding: 18px 16px;
+        padding-top: max(18px, env(safe-area-inset-top, 18px));
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 60px;
+        box-sizing: border-box;
+        flex-shrink: 0;
+      `;
+            header.innerHTML = `
+        <div style="font-weight: 600; font-size: 17px; color: #000000;">${greeting}</div>
+        <button class="vtilt-chat-close" style="
+          background: transparent;
+          border: none;
+          color: #666666;
+          cursor: pointer;
+          padding: 6px;
+          margin: -6px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          -webkit-tap-highlight-color: transparent;
+        ">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6L6 18M6 6l12 12"></path>
+          </svg>
+        </button>
+      `;
+        }
+        else {
+            const isAiMode = (_b = this._state.channel) === null || _b === void 0 ? void 0 : _b.ai_mode;
+            header.style.cssText = `
+        background: #ffffff;
+        border-bottom: 1px solid #E5E5E5;
+        padding: 12px 16px;
+        padding-top: max(12px, env(safe-area-inset-top, 12px));
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-height: 60px;
+        box-sizing: border-box;
+        flex-shrink: 0;
+      `;
+            header.innerHTML = `
+        <button class="vtilt-chat-back" style="
+          background: transparent;
+          border: none;
+          color: #666666;
+          cursor: pointer;
+          padding: 6px;
+          margin-left: -6px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          -webkit-tap-highlight-color: transparent;
+        ">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M15 18l-6-6 6-6"></path>
+          </svg>
+        </button>
+        <div style="
+          width: 44px;
+          height: 44px;
+          border-radius: 50%;
+          background: ${isAiMode ? primary : "#DEDEDE"};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        ">
+          ${isAiMode
+                ? `<svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A1.5 1.5 0 0 0 6 14.5A1.5 1.5 0 0 0 7.5 16A1.5 1.5 0 0 0 9 14.5A1.5 1.5 0 0 0 7.5 13m9 0a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 0 0 1.5 1.5a1.5 1.5 0 0 0 1.5-1.5a1.5 1.5 0 0 0-1.5-1.5"/></svg>`
+                : `<svg width="22" height="22" viewBox="0 0 24 24" fill="#666"><path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg>`}
+        </div>
+        <div style="flex: 1; min-width: 0;">
+          <div style="font-weight: 600; font-size: 16px; color: #000000;">${isAiMode ? "AI Assistant" : "Support"}</div>
+          <div style="font-size: 13px; color: #16A34A; display: flex; align-items: center; gap: 5px; margin-top: 1px;">
+            <span style="width: 7px; height: 7px; background: #16A34A; border-radius: 50%;"></span>
+            Online
+          </div>
+        </div>
+        <button class="vtilt-chat-close" style="
+          background: transparent;
+          border: none;
+          color: #666666;
+          cursor: pointer;
+          padding: 6px;
+          margin-right: -6px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          -webkit-tap-highlight-color: transparent;
+        ">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6L6 18M6 6l12 12"></path>
+          </svg>
+        </button>
+      `;
+        }
+        // Re-attach header event listeners
+        const closeBtn = header.querySelector(".vtilt-chat-close");
+        closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener("click", () => this.close());
+        const backBtn = header.querySelector(".vtilt-chat-back");
+        backBtn === null || backBtn === void 0 ? void 0 : backBtn.addEventListener("click", () => this.goToChannelList());
+    }
+    _getChannelListHTML() {
+        const primary = this._theme.primaryColor;
+        if (this._state.channels.length === 0 && !this._state.isLoading) {
+            return `
+        <div style="
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 48px 24px;
+          text-align: center;
+          animation: vtilt-fadein 0.4s ease;
+        ">
+          <div style="
+            width: 72px;
+            height: 72px;
+            margin-bottom: 24px;
+            background: ${primary};
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            animation: vtilt-bubble-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
+          ">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="white">
+              <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+            </svg>
+          </div>
+          <div style="font-size: 18px; font-weight: 600; color: #000000; margin-bottom: 8px; animation: vtilt-fadein 0.4s ease 0.15s both;">No conversations yet</div>
+          <div style="font-size: 15px; color: #666666; margin-bottom: 28px; line-height: 1.5; max-width: 280px; animation: vtilt-fadein 0.4s ease 0.2s both;">Questions? We're here to help. Start a conversation with us.</div>
+          <button class="vtilt-chat-new-channel" style="
+            background: ${primary};
+            color: white;
+            border: none;
+            border-radius: 100px;
+            padding: 14px 28px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 15px;
+            -webkit-tap-highlight-color: transparent;
+            touch-action: manipulation;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
+            animation: vtilt-fadein 0.4s ease 0.25s both;
+          ">
+            Send us a message
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
+              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+            </svg>
+          </button>
+        </div>
+      `;
+        }
+        const channelsHtml = this._state.channels
+            .map((ch, index) => this._getChannelItemHTML(ch, index))
+            .join("");
+        return `
+      <div style="flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;">
+        ${channelsHtml}
+      </div>
+      <div style="
+        padding: 16px;
+        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
+        border-top: 1px solid #E5E5E5;
+      ">
+        <button class="vtilt-chat-new-channel" style="
+          width: 100%;
+          background: ${primary};
+          color: white;
+          border: none;
+          border-radius: 100px;
+          padding: 14px 24px;
+          cursor: pointer;
+          font-weight: 500;
+          font-size: 15px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+          -webkit-tap-highlight-color: transparent;
+          touch-action: manipulation;
+          box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
+        ">
+          Send us a message
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
+            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+          </svg>
+        </button>
+      </div>
+    `;
+    }
+    _getChannelItemHTML(channel, index = 0) {
+        const hasUnread = channel.unread_count > 0;
+        const timeStr = this._formatRelativeTime(channel.last_message_at || channel.created_at);
+        const preview = channel.last_message_preview || "No messages yet";
+        const primary = this._theme.primaryColor;
+        const senderPrefix = channel.last_message_sender === "user" ? "You: " : "";
+        const animationDelay = Math.min(index * 0.05, 0.3); // Max 300ms total delay
+        return `
+      <div class="vtilt-channel-item" data-channel-id="${channel.id}" style="
+        padding: 14px 16px;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        touch-action: manipulation;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        background: white;
+        border-bottom: 1px solid #EEEEEE;
+        animation: vtilt-item-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) ${animationDelay}s both;
+      ">
+        <div style="
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          background: ${channel.ai_mode ? primary : "#DEDEDE"};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        ">
+          ${channel.ai_mode
+            ? `<svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A1.5 1.5 0 0 0 6 14.5A1.5 1.5 0 0 0 7.5 16A1.5 1.5 0 0 0 9 14.5A1.5 1.5 0 0 0 7.5 13m9 0a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 0 0 1.5 1.5a1.5 1.5 0 0 0 1.5-1.5a1.5 1.5 0 0 0-1.5-1.5"/></svg>`
+            : `<svg width="24" height="24" viewBox="0 0 24 24" fill="#666"><path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg>`}
+        </div>
+        <div style="flex: 1; min-width: 0;">
+          <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px;">
+            <div style="font-weight: ${hasUnread ? "600" : "500"}; font-size: 15px; color: #000000; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+              ${channel.ai_mode ? "AI Assistant" : "Support"}
+            </div>
+            <div style="font-size: 13px; color: #888888; white-space: nowrap; flex-shrink: 0;">${timeStr}</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px;">
+            <div style="
+              font-size: 14px;
+              color: ${hasUnread ? "#333333" : "#888888"};
+              font-weight: 400;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              flex: 1;
+              min-width: 0;
+              line-height: 1.4;
+            ">${senderPrefix}${this._escapeHTML(preview)}${channel.status === "closed" ? ' · Closed' : ""}</div>
+            ${hasUnread ? `<div style="
+              min-width: 10px;
+              width: 10px;
+              height: 10px;
+              background: ${primary};
+              border-radius: 50%;
+              flex-shrink: 0;
+            "></div>` : ""}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    _getConversationHTML() {
+        const primary = this._theme.primaryColor;
+        return `
+      <div class="vtilt-chat-messages" style="
+        flex: 1;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        padding: 20px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        min-height: 0;
+        background: #FAFAFA;
+      "></div>
+      
+      <div class="vtilt-chat-typing" style="
+        display: none;
+        padding: 0 16px 12px;
+        background: #FAFAFA;
+        align-items: center;
+      ">
+        <div style="
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          padding: 12px 16px;
+          background: white;
+          border-radius: 20px;
+        ">
+          <span style="width: 7px; height: 7px; background: #999; border-radius: 50%; animation: vtilt-typing 1.2s infinite 0s;"></span>
+          <span style="width: 7px; height: 7px; background: #999; border-radius: 50%; animation: vtilt-typing 1.2s infinite 0.2s;"></span>
+          <span style="width: 7px; height: 7px; background: #999; border-radius: 50%; animation: vtilt-typing 1.2s infinite 0.4s;"></span>
+        </div>
+      </div>
+      <style>
+        @keyframes vtilt-typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
+      </style>
+      
+      <div class="vtilt-chat-input-container" style="
+        padding: 12px 16px;
+        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
+        border-top: 1px solid #E5E5E5;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-shrink: 0;
+        background: #ffffff;
+      ">
+        <div style="flex: 1; min-width: 0;">
+          <input
+            type="text"
+            class="vtilt-chat-input"
+            placeholder="Message..."
+            autocomplete="off"
+            autocorrect="on"
+            autocapitalize="sentences"
+            style="
+              width: 100%;
+              box-sizing: border-box;
+              border: 1px solid #DDDDDD;
+              border-radius: 24px;
+              padding: 12px 18px;
+              font-size: 16px;
+              line-height: 1.4;
+              outline: none;
+              background: #ffffff;
+              -webkit-appearance: none;
+              appearance: none;
+              color: #000000;
+              transition: border-color 0.15s ease, box-shadow 0.15s ease;
+            "
+          />
+        </div>
+        <button class="vtilt-chat-send" style="
+          background: ${primary};
+          color: white;
+          border: none;
+          border-radius: 50%;
+          padding: 0;
+          width: 44px;
+          height: 44px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          -webkit-tap-highlight-color: transparent;
+          touch-action: manipulation;
+          flex-shrink: 0;
+        ">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+          </svg>
+        </button>
+      </div>
+    `;
+    }
+    _attachChannelListListeners() {
+        var _a, _b;
+        // New channel button
+        const newChannelBtn = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-new-channel");
+        newChannelBtn === null || newChannelBtn === void 0 ? void 0 : newChannelBtn.addEventListener("click", () => this.createChannel());
+        // Channel items
+        const channelItems = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelectorAll(".vtilt-channel-item");
+        const isTouchDevice = globals_1.window && ("ontouchstart" in globals_1.window || navigator.maxTouchPoints > 0);
+        channelItems === null || channelItems === void 0 ? void 0 : channelItems.forEach((item) => {
+            item.addEventListener("click", () => {
+                const channelId = item.getAttribute("data-channel-id");
+                if (channelId)
+                    this.selectChannel(channelId);
+            });
+            // Hover effect (only on non-touch devices)
+            if (!isTouchDevice) {
+                item.addEventListener("mouseenter", () => {
+                    item.style.background = "#F5F5F5";
+                });
+                item.addEventListener("mouseleave", () => {
+                    item.style.background = "white";
+                });
+            }
+        });
+    }
+    _attachConversationListeners() {
+        var _a, _b;
+        // Send button
+        const sendBtn = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-send");
+        sendBtn === null || sendBtn === void 0 ? void 0 : sendBtn.addEventListener("click", () => this._handleSend());
+        // Input enter key and typing indicator
+        const input = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-input");
+        input === null || input === void 0 ? void 0 : input.addEventListener("keypress", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                this._handleSend();
+            }
+        });
+        // Send typing indicator on input
+        input === null || input === void 0 ? void 0 : input.addEventListener("input", () => {
+            this._handleUserTyping();
+        });
+    }
+    _formatRelativeTime(isoString) {
+        const date = new Date(isoString);
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return "Just now";
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return date.toLocaleDateString();
+    }
     _renderMessages() {
         var _a;
         const messagesContainer = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-messages");
         if (!messagesContainer)
             return;
-        const theme = this._config.theme || DEFAULT_THEME;
+        const primary = this._theme.primaryColor;
         // Find first unread agent message index
-        const firstUnreadIndex = this._state.messages.findIndex((m) => (m.sender_type === "agent" || m.sender_type === "ai") && !this._isMessageReadByUser(m.created_at));
+        const firstUnreadIndex = this._state.messages.findIndex((m) => (m.sender_type === "agent" || m.sender_type === "ai") &&
+            !this._isMessageReadByUser(m.created_at));
         // Build HTML with unread divider
         const messagesHtml = this._state.messages
             .map((msg, index) => {
             let html = "";
             // Add unread divider before first unread message
             if (index === firstUnreadIndex && firstUnreadIndex > 0) {
-                html += `
-            <div style="display: flex; align-items: center; gap: 12px; margin: 8px 0;">
-              <div style="flex: 1; height: 1px; background: ${theme.primaryColor}40;"></div>
-              <span style="font-size: 11px; font-weight: 500; color: ${theme.primaryColor}; padding: 0 8px;">New messages</span>
-              <div style="flex: 1; height: 1px; background: ${theme.primaryColor}40;"></div>
-            </div>
+                html += `
+            <div style="display: flex; align-items: center; gap: 12px; margin: 12px 0;">
+              <div style="flex: 1; height: 1px; background: #DDDDDD;"></div>
+              <span style="font-size: 12px; font-weight: 600; color: ${primary};">New</span>
+              <div style="flex: 1; height: 1px; background: #DDDDDD;"></div>
+            </div>
           `;
             }
             html += this._getMessageHTML(msg);
@@ -716,230 +1311,277 @@ class LazyLoadedChat {
         })
             .join("");
         messagesContainer.innerHTML = messagesHtml;
-        // Scroll to bottom
         messagesContainer.scrollTop = messagesContainer.scrollHeight;
     }
     // ============================================================================
     // Private - Styles & HTML
     // ============================================================================
+    _isMobile() {
+        return globals_1.window ? globals_1.window.innerWidth < 480 : false;
+    }
     _getContainerStyles() {
-        var _a;
-        const position = this._config.position || DEFAULT_POSITION;
-        const isRight = position === "bottom-right";
-        return `
-      position: fixed;
-      bottom: 20px;
-      ${isRight ? "right: 20px;" : "left: 20px;"}
-      z-index: 999999;
-      font-family: ${((_a = this._config.theme) === null || _a === void 0 ? void 0 : _a.fontFamily) || DEFAULT_THEME.fontFamily};
+        const isRight = (this._config.position || DEFAULT_POSITION) === "bottom-right";
+        return `
+      position: fixed;
+      bottom: 20px;
+      ${isRight ? "right: 20px;" : "left: 20px;"}
+      z-index: 999999;
+      font-family: ${this._theme.fontFamily};
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     `;
     }
     _getBubbleStyles() {
-        const theme = this._config.theme || DEFAULT_THEME;
-        return `
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      background: ${theme.primaryColor};
-      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;
-      position: relative;
+        const primary = this._theme.primaryColor;
+        return `
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: ${primary};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 16px rgba(123, 104, 238, 0.4);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      position: relative;
+      -webkit-tap-highlight-color: transparent;
+      touch-action: manipulation;
     `;
     }
     _getBubbleHTML() {
-        return `
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
-        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-      </svg>
-      <div class="vtilt-chat-badge" style="
-        display: none;
-        position: absolute;
-        top: -5px;
-        right: -5px;
-        background: #ef4444;
-        color: white;
-        font-size: 12px;
-        font-weight: 600;
-        min-width: 20px;
-        height: 20px;
-        border-radius: 10px;
-        align-items: center;
-        justify-content: center;
-      ">0</div>
+        return `
+      <svg width="28" height="28" viewBox="0 0 28 28" fill="white">
+        <path d="M14 3C7.925 3 3 7.262 3 12.5c0 2.56 1.166 4.884 3.063 6.606L4.5 24l5.25-2.625C11.1 21.79 12.52 22 14 22c6.075 0 11-4.262 11-9.5S20.075 3 14 3z"/>
+      </svg>
+      <div class="vtilt-chat-badge" style="
+        display: none;
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        background: #E53935;
+        color: white;
+        font-size: 11px;
+        font-weight: 700;
+        min-width: 20px;
+        height: 20px;
+        border-radius: 10px;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6px;
+        box-sizing: border-box;
+        border: 2px solid white;
+      ">0</div>
     `;
     }
     _getWidgetStyles() {
-        const theme = this._config.theme || DEFAULT_THEME;
-        return `
-      display: none;
-      flex-direction: column;
-      position: absolute;
-      bottom: 80px;
-      right: 0;
-      width: 380px;
-      height: 520px;
-      background: white;
-      border-radius: ${theme.borderRadius};
-      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-      overflow: hidden;
+        return `
+      display: none;
+      flex-direction: column;
+      position: absolute;
+      bottom: 80px;
+      right: 0;
+      width: 380px;
+      max-width: calc(100vw - 40px);
+      height: 600px;
+      max-height: calc(100vh - 120px);
+      max-height: calc(100dvh - 120px);
+      background: #ffffff;
+      border-radius: 16px;
+      box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
+      overflow: hidden;
     `;
     }
     _getWidgetHTML() {
-        const theme = this._config.theme || DEFAULT_THEME;
-        const greeting = this._config.greeting || "How can we help you?";
-        return `
-      <div class="vtilt-chat-header" style="
-        background: ${theme.headerBgColor};
-        color: white;
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      ">
-        <div style="font-weight: 600; font-size: 16px;">${greeting}</div>
-        <button class="vtilt-chat-close" style="
-          background: none;
-          border: none;
-          color: white;
-          cursor: pointer;
-          padding: 4px;
-        ">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M18 6L6 18M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-      
-      <div class="vtilt-chat-messages" style="
-        flex: 1;
-        overflow-y: auto;
-        padding: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-      "></div>
-      
-      <div class="vtilt-chat-loader" style="
-        display: none;
-        align-items: center;
-        justify-content: center;
-        padding: 20px;
-      ">
-        <div style="
-          width: 24px;
-          height: 24px;
-          border: 2px solid #e5e7eb;
-          border-top-color: ${theme.primaryColor};
-          border-radius: 50%;
-          animation: vtilt-spin 0.8s linear infinite;
-        "></div>
-      </div>
-      
-      <div class="vtilt-chat-typing" style="
-        display: none;
-        padding: 8px 16px;
-        color: #6b7280;
-        font-size: 14px;
-      ">
-        <span style="animation: vtilt-pulse 1.5s infinite;">Agent is typing...</span>
-      </div>
-      
-      <div class="vtilt-chat-input-container" style="
-        padding: 16px;
-        border-top: 1px solid #e5e7eb;
-        display: flex;
-        gap: 8px;
-      ">
-        <input
-          type="text"
-          class="vtilt-chat-input"
-          placeholder="Type a message..."
-          style="
-            flex: 1;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            padding: 10px 14px;
-            font-size: 14px;
-            outline: none;
-            transition: border-color 0.2s;
-          "
-        />
-        <button class="vtilt-chat-send" style="
-          background: ${theme.primaryColor};
-          color: white;
-          border: none;
-          border-radius: 8px;
-          padding: 10px 16px;
-          cursor: pointer;
-          font-weight: 500;
-          transition: opacity 0.2s;
-        ">Send</button>
-      </div>
-      
-      <style>
-        @keyframes vtilt-spin {
-          to { transform: rotate(360deg); }
-        }
-        @keyframes vtilt-pulse {
-          0%, 100% { opacity: 1; }
-          50% { opacity: 0.5; }
-        }
-        #vtilt-chat-bubble:hover {
-          transform: scale(1.05);
-          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-        }
-        .vtilt-chat-input:focus {
-          border-color: ${theme.primaryColor} !important;
-        }
-        .vtilt-chat-send:hover {
-          opacity: 0.9;
-        }
-      </style>
+        const greeting = this._config.greeting || "Messages";
+        const primary = this._theme.primaryColor;
+        return `
+      <div class="vtilt-chat-header" style="
+        background: #ffffff;
+        border-bottom: 1px solid #E5E5E5;
+        padding: 18px 16px;
+        padding-top: max(18px, env(safe-area-inset-top, 18px));
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 60px;
+        box-sizing: border-box;
+        flex-shrink: 0;
+      ">
+        <div style="font-weight: 600; font-size: 17px; color: #000000;">${greeting}</div>
+        <button class="vtilt-chat-close" style="
+          background: transparent;
+          border: none;
+          color: #666666;
+          cursor: pointer;
+          padding: 6px;
+          margin: -6px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          -webkit-tap-highlight-color: transparent;
+          touch-action: manipulation;
+        ">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6L6 18M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="vtilt-chat-content" style="
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        min-height: 0;
+        background: #ffffff;
+      ">
+      </div>
+      
+      <div class="vtilt-chat-loader" style="
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(255, 255, 255, 0.95);
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+      ">
+        <div style="
+          width: 32px;
+          height: 32px;
+          border: 3px solid #E5E5E5;
+          border-top-color: ${primary};
+          border-radius: 50%;
+          animation: vtilt-spin 0.8s linear infinite;
+        "></div>
+      </div>
+      
+      <style>
+        @keyframes vtilt-spin { to { transform: rotate(360deg); } }
+        @keyframes vtilt-fade { from { opacity: 0; } to { opacity: 1; } }
+        
+        #vtilt-chat-bubble { transition: transform 0.15s ease, box-shadow 0.15s ease; }
+        #vtilt-chat-bubble:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(123, 104, 238, 0.45); }
+        #vtilt-chat-bubble:active { transform: scale(0.95); }
+        
+        #vtilt-chat-widget { transition: opacity 0.2s ease; }
+        #vtilt-chat-widget.vtilt-opening { animation: vtilt-fade 0.2s ease forwards; }
+        #vtilt-chat-widget.vtilt-closing { opacity: 0; }
+        
+        .vtilt-chat-content { transition: opacity 0.15s ease; }
+        
+        .vtilt-chat-close:hover { color: #000 !important; background: #F0F0F0 !important; }
+        .vtilt-chat-back:hover { color: #000 !important; background: #F0F0F0 !important; }
+        
+        .vtilt-chat-input { font-size: 16px !important; -webkit-text-size-adjust: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
+        .vtilt-chat-input:focus { border-color: ${primary} !important; box-shadow: 0 0 0 2px ${primary}20 !important; outline: none !important; }
+        .vtilt-chat-input::placeholder { color: #999999; }
+        
+        .vtilt-chat-send { transition: opacity 0.1s ease; }
+        .vtilt-chat-send:hover { opacity: 0.85; }
+        .vtilt-chat-send:active { opacity: 0.7; }
+        
+        .vtilt-chat-new-channel { transition: opacity 0.1s ease; }
+        .vtilt-chat-new-channel:hover { opacity: 0.9; }
+        .vtilt-chat-new-channel:active { opacity: 0.8; }
+        
+        .vtilt-channel-item { transition: background 0.1s ease; cursor: pointer; }
+        .vtilt-channel-item:hover { background: #F5F5F5 !important; }
+        .vtilt-channel-item:active { background: #EBEBEB !important; }
+        
+        @media (max-width: 480px) {
+          #vtilt-chat-container { bottom: 16px !important; right: 16px !important; }
+          #vtilt-chat-bubble { width: 56px !important; height: 56px !important; }
+          #vtilt-chat-bubble svg { width: 24px !important; height: 24px !important; }
+          #vtilt-chat-widget {
+            position: fixed !important;
+            top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
+            width: 100% !important; max-width: 100% !important;
+            height: 100% !important; max-height: 100% !important;
+            border-radius: 0 !important;
+            z-index: 1000000 !important;
+          }
+        }
+        
+        @media (prefers-reduced-motion: reduce) {
+          * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+        }
+      </style>
     `;
     }
     _getMessageHTML(message) {
-        const theme = this._config.theme || DEFAULT_THEME;
         const isUser = message.sender_type === "user";
-        const isAgentOrAI = message.sender_type === "agent" || message.sender_type === "ai";
-        // Check read status
+        const isAi = message.sender_type === "ai";
         const isReadByAgent = isUser && this._isMessageReadByAgent(message.created_at);
-        const isUnread = isAgentOrAI && !this._isMessageReadByUser(message.created_at);
-        const bubbleStyle = isUser
-            ? `background: ${theme.userBubbleColor}; color: white; margin-left: auto;`
-            : `background: ${theme.agentBubbleColor}; color: #1f2937; margin-right: auto;${isUnread && !this._isMarkingRead ? " box-shadow: 0 0 0 2px " + theme.primaryColor + "40;" : ""}`;
-        const senderLabel = message.sender_type === "ai"
-            ? "AI Assistant"
-            : message.sender_type === "agent"
-                ? message.sender_name || "Agent"
-                : "";
-        // Read receipt SVG icons
-        const singleCheckSvg = `<svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" style="color: #9ca3af;"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>`;
-        const doubleCheckSvg = `<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="color: ${theme.primaryColor};"><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/></svg>`;
-        // Unread badge for agent messages
-        const unreadBadge = isUnread && !this._isMarkingRead
-            ? `<span style="font-size: 10px; font-weight: 600; color: ${theme.primaryColor}; background: ${theme.primaryColor}20; padding: 2px 6px; border-radius: 9999px;">NEW</span>`
-            : "";
-        return `
-      <div style="display: flex; flex-direction: column; ${isUser ? "align-items: flex-end;" : "align-items: flex-start;"}${isUnread && !this._isMarkingRead ? " position: relative;" : ""}">
-        ${!isUser && senderLabel ? `<div style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">${senderLabel}</div>` : ""}
-        <div style="
-          max-width: 80%;
-          padding: 10px 14px;
-          border-radius: 12px;
-          font-size: 14px;
-          line-height: 1.4;
-          transition: opacity 0.3s, box-shadow 0.3s;
-          ${bubbleStyle}${this._isMarkingRead && isUnread ? " opacity: 0.7;" : ""}
-        ">${this._escapeHTML(message.content)}</div>
-        <div style="font-size: 11px; color: #9ca3af; margin-top: 4px; display: flex; align-items: center; gap: 4px;">
-          ${this._formatTime(message.created_at)}
-          ${isUser ? (isReadByAgent ? doubleCheckSvg : singleCheckSvg) : unreadBadge}
-        </div>
-      </div>
+        const primary = this._theme.primaryColor;
+        if (isUser) {
+            return `
+        <div class="vtilt-msg" style="
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        ">
+          <div style="
+            max-width: 80%;
+            padding: 12px 16px;
+            background: ${primary};
+            color: white;
+            border-radius: 20px 20px 4px 20px;
+            font-size: 15px;
+            line-height: 1.45;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+          ">${this._escapeHTML(message.content)}</div>
+          <div style="font-size: 12px; color: #888888; margin-top: 6px; display: flex; align-items: center; gap: 4px;">
+            ${this._formatTime(message.created_at)}
+            ${isReadByAgent ? `<svg width="14" height="14" viewBox="0 0 24 24" fill="${primary}"><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/></svg>` : ""}
+          </div>
+        </div>
+      `;
+        }
+        const senderLabel = isAi ? "AI Assistant" : (message.sender_name || "Support");
+        return `
+      <div class="vtilt-msg" style="
+        display: flex;
+        gap: 10px;
+        align-items: flex-end;
+      ">
+        <div style="
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background: ${isAi ? primary : "#DEDEDE"};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        ">
+          ${isAi
+            ? `<svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A1.5 1.5 0 0 0 6 14.5A1.5 1.5 0 0 0 7.5 16A1.5 1.5 0 0 0 9 14.5A1.5 1.5 0 0 0 7.5 13m9 0a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 0 0 1.5 1.5a1.5 1.5 0 0 0 1.5-1.5a1.5 1.5 0 0 0-1.5-1.5"/></svg>`
+            : `<svg width="16" height="16" viewBox="0 0 24 24" fill="#666"><path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg>`}
+        </div>
+        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;">
+          <div style="
+            max-width: 85%;
+            padding: 12px 16px;
+            background: #ffffff;
+            color: #000000;
+            border-radius: 20px 20px 20px 4px;
+            font-size: 15px;
+            line-height: 1.45;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+          ">${this._escapeHTML(message.content)}</div>
+          <div style="font-size: 12px; color: #888888; margin-top: 6px; margin-left: 4px;">
+            ${senderLabel} · ${this._formatTime(message.created_at)}
+          </div>
+        </div>
+      </div>
     `;
     }
     /**
@@ -957,7 +1599,9 @@ class LazyLoadedChat {
         const config = this._instance.getConfig();
         const apiHost = config.api_host || "";
         const token = config.token || "";
-        const url = `${apiHost}${endpoint}?token=${encodeURIComponent(token)}`;
+        // Use & if endpoint already has query params, otherwise use ?
+        const separator = endpoint.includes("?") ? "&" : "?";
+        const url = `${apiHost}${endpoint}${separator}token=${encodeURIComponent(token)}`;
         try {
             const response = await fetch(url, {
                 ...options,