@myned-ai/avatar-chat-widget 0.2.0 → 0.3.0

package/dist/avatar-chat-widget.js

@@ -105,13 +105,13 @@ function deepMerge(target, source) {
 function setConfig(config) {
   runtimeConfig = deepMerge(runtimeConfig, config);
 }
-const CONFIG = new Proxy(runtimeConfig, {
-  get(target, prop) {
-    if (typeof prop === "string" && prop in target) {
-      return target[prop];
+const CONFIG = new Proxy({}, {
+  get(_target2, prop) {
+    if (typeof prop === "string" && prop in runtimeConfig) {
+      return runtimeConfig[prop];
     }
     if (typeof prop === "symbol") {
-      return target[prop];
+      return runtimeConfig[prop];
     }
     throw new Error(`Invalid config property: ${String(prop)}`);
   },
@@ -129,17 +129,7 @@ const LogLevel = {
   Info: 3,
   Debug: 4
 };
-const isDevelopment = () => {
-  try {
-    const meta = import.meta;
-    if (meta?.env) {
-      return meta.env.DEV === true || meta.env.MODE === "development";
-    }
-  } catch {
-  }
-  return false;
-};
-const DEFAULT_LEVEL = isDevelopment() ? LogLevel.Debug : LogLevel.Info;
+const DEFAULT_LEVEL = LogLevel.Debug;
 class Logger {
   constructor() {
     this.level = DEFAULT_LEVEL;
@@ -840,9 +830,8 @@ class AuthService {
 }
 const log$c = logger.scope("SocketService");
 class SocketService extends EventEmitter {
-  constructor(url = CONFIG.websocket.url) {
+  constructor(url) {
     super();
-    this.url = url;
     this.ws = null;
     this.connectionState = "disconnected";
     this.reconnectAttempts = 0;
@@ -853,6 +842,7 @@ class SocketService extends EventEmitter {
     this.maxReconnectAttempts = 10;
     this.isIntentionallyClosed = false;
     this.useBinaryProtocol = false;
+    this.url = url ?? CONFIG.websocket.url;
     this.authService = new AuthService();
     errorBoundary.registerHandler("websocket", (error2) => {
       this.emit("error", error2);
@@ -932,6 +922,16 @@ class SocketService extends EventEmitter {
         message = JSON.parse(event.data);
       }
       this.emit("message", message);
+      try {
+        const meta = { type: message.type };
+        if (message.frameIndex !== void 0) meta.frameIndex = message.frameIndex;
+        if (message.timestamp !== void 0) meta.timestamp = message.timestamp;
+        if (message.itemId !== void 0) meta.itemId = message.itemId;
+        if (event.data instanceof ArrayBuffer) meta.byteLength = event.data.byteLength;
+        log$c.debug("Incoming message", meta);
+      } catch (e) {
+        log$c.warn("Failed to log incoming message meta", e);
+      }
       this.emit(message.type, message);
     } catch (error2) {
       errorBoundary.handleError(error2, "websocket");
@@ -1942,7 +1942,13 @@ class AudioOutput {
     }
     const chunk = this.audioBuffer.pop();
     if (!chunk) {
-      log$8.warn("Audio buffer underrun");
+      log$8.warn("Audio buffer underrun", { bufferSize: this.audioBuffer.size });
+      try {
+        const stats = this.getBufferStats();
+        log$8.debug("Adaptive buffer stats on underrun:", stats);
+      } catch (e) {
+        log$8.warn("Failed to get buffer stats on underrun", e);
+      }
       this.adaptiveBuffer.recordUnderrun();
       this.isPlaying = false;
       return;
@@ -1997,7 +2003,7 @@ class AudioOutput {
     this.isPlaying = false;
     for (const source of this.activeSourceNodes) {
       try {
-        source.stop();
+        source.stop(0);
         source.disconnect();
       } catch {
       }
@@ -2362,6 +2368,7 @@ class SyncPlayback {
     this.audioStartTime = 0;
     this.activeSourceNodes = /* @__PURE__ */ new Set();
     this.currentFrameIndex = 0;
+    this.lastReceivedFrameIndex = null;
     this.lastBlendshapeUpdate = 0;
     this.onBlendshapeUpdate = null;
     this.onPlaybackEnd = null;
@@ -2416,6 +2423,14 @@ class SyncPlayback {
     if (sampleRate) {
       this.sampleRate = sampleRate;
     }
+    AudioContextManager.resume().catch(() => {
+    });
+    try {
+      const ctx = this.audioContext;
+      log$5.debug("Server sampleRate:", this.sampleRate, "AudioContext sampleRate:", ctx.sampleRate);
+    } catch (e) {
+      log$5.warn("Unable to read AudioContext sampleRate for diagnostics", e);
+    }
     this.frameBuffer = [];
     this.scheduledFrames = [];
     this.currentFrameIndex = 0;
@@ -2426,7 +2441,7 @@ class SyncPlayback {
     this.currentWeights = { ...this.neutralWeights };
     for (const source of this.activeSourceNodes) {
       try {
-        source.stop();
+        source.stop(0);
         source.disconnect();
       } catch {
       }
@@ -2440,6 +2455,15 @@ class SyncPlayback {
     if (this.isStopped) {
       return;
     }
+    if (typeof frame.frameIndex === "number") {
+      if (this.lastReceivedFrameIndex !== null) {
+        const expected = this.lastReceivedFrameIndex + 1;
+        if (frame.frameIndex !== expected) {
+          log$5.warn("SyncPlayback frame index gap/detect:", { last: this.lastReceivedFrameIndex, got: frame.frameIndex, expected });
+        }
+      }
+      this.lastReceivedFrameIndex = frame.frameIndex;
+    }
     this.frameBuffer.push(frame);
     if (frame.frameIndex === 0) {
       log$5.debug("First sync frame added:", frame.audio.byteLength, "bytes audio");
@@ -2620,12 +2644,14 @@ class SyncPlayback {
     }
     for (const source of this.activeSourceNodes) {
       try {
-        source.stop();
+        source.stop(0);
         source.disconnect();
       } catch {
       }
     }
     this.activeSourceNodes.clear();
+    AudioContextManager.suspend().catch(() => {
+    });
     this.currentWeights = { ...this.neutralWeights };
     if (this.onBlendshapeUpdate) {
       this.onBlendshapeUpdate(this.neutralWeights);
@@ -2747,10 +2773,16 @@ class ChatManager {
   constructor(avatar, options = {}) {
     this.currentSessionId = null;
     this.messages = [];
+    this.typingIndicator = null;
     this.isRecording = false;
     this.animationFrameId = null;
     this.useSyncPlayback = false;
-    this.currentStreamingMessage = null;
+    this.streamingByItem = /* @__PURE__ */ new Map();
+    this.latestItemForRole = {};
+    this.bufferedDeltas = /* @__PURE__ */ new Map();
+    this.bufferTimeouts = /* @__PURE__ */ new Map();
+    this.BUFFER_WAIT_MS = 200;
+    this.SHOW_ASSISTANT_STREAMING = false;
     this.avatar = avatar;
     this.options = options;
     this.userId = this.generateUserId();
@@ -2772,10 +2804,21 @@ class ChatManager {
     this.chatInput = options.chatInput || root.getElementById("chatInput");
     this.sendBtn = options.sendBtn || root.getElementById("sendBtn");
     this.micBtn = options.micBtn || root.getElementById("micBtn");
+    this.typingIndicator = root.getElementById("typingIndicator");
     this.setupEventListeners();
     this.setupWebSocketHandlers();
     this.startBlendshapeSync();
   }
+  setTyping(typing) {
+    if (this.typingIndicator) {
+      if (typing) {
+        this.typingIndicator.classList.remove("hidden");
+        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+      } else {
+        this.typingIndicator.classList.add("hidden");
+      }
+    }
+  }
   async initialize() {
     FeatureDetection.logCapabilities();
     try {
@@ -2823,6 +2866,7 @@ class ChatManager {
     });
     this.socketService.on("text", (message) => {
       if (message.type === "text") {
+        this.setTyping(false);
         this.addMessage(message.data, "assistant");
       }
     });
@@ -2840,6 +2884,7 @@ class ChatManager {
     });
     this.socketService.on("audio_start", (message) => {
       if (message.type === "audio_start") {
+        this.setTyping(false);
         log$3.info("Audio start received:", message.sessionId);
         this.currentSessionId = message.sessionId;
         this.syncPlayback.startSession(message.sessionId, message.sampleRate);
@@ -2852,6 +2897,10 @@ class ChatManager {
     });
     this.socketService.on("audio_chunk", (message) => {
       if (message.type === "audio_chunk") {
+        if (message.sessionId && this.currentSessionId && message.sessionId !== this.currentSessionId) {
+          log$3.debug("Ignoring audio_chunk from stale session:", message.sessionId);
+          return;
+        }
         let audioData;
         if (message.data instanceof ArrayBuffer) {
           audioData = message.data;
@@ -2872,6 +2921,10 @@ class ChatManager {
     });
     this.socketService.on("sync_frame", (message) => {
       if (message.type === "sync_frame") {
+        if (message.sessionId && this.currentSessionId && message.sessionId !== this.currentSessionId) {
+          log$3.debug("Ignoring sync_frame from stale session:", message.sessionId, "current:", this.currentSessionId);
+          return;
+        }
         this.useSyncPlayback = true;
         const audioData = this.decodeBase64ToArrayBuffer(message.audio);
         if (message.frameIndex === 0) {
@@ -2888,11 +2941,18 @@ class ChatManager {
     });
     this.socketService.on("blendshape", (message) => {
       if (message.type === "blendshape") {
+        if (message.sessionId && this.currentSessionId && message.sessionId !== this.currentSessionId) {
+          return;
+        }
         this.blendshapeBuffer.addFrame(message.weights, message.timestamp);
       }
     });
     this.socketService.on("audio_end", (message) => {
       if (message.type === "audio_end") {
+        if (message.sessionId && this.currentSessionId && message.sessionId !== this.currentSessionId) {
+          log$3.debug("Ignoring audio_end from stale session:", message.sessionId);
+          return;
+        }
         log$3.info("Audio end received");
         if (this.useSyncPlayback) {
           this.syncPlayback.endSession(message.sessionId);
@@ -2909,21 +2969,28 @@ class ChatManager {
         this.syncPlayback.stop();
         this.audioOutput.stop();
         this.blendshapeBuffer.clear();
-        this.finalizeStreamingMessage();
+        const interruptedItem = message.itemId;
+        this.finalizeStreamingMessage(interruptedItem, "assistant", true);
         this.avatar.disableLiveBlendshapes();
         this.avatar.setChatState("Hello");
       }
     });
     this.socketService.on("transcript_delta", (message) => {
       if (message.type === "transcript_delta" && message.text) {
+        console.log("transcript_delta raw:", { role: message.role, text: message.text });
         const role = message.role === "assistant" ? "assistant" : "user";
-        this.streamTranscript(message.text, role);
+        const itemId = message.itemId;
+        const previousItemId = message.previousItemId;
+        this.streamTranscript(message.text, role, itemId, previousItemId);
       }
     });
     this.socketService.on("transcript_done", (message) => {
       if (message.type === "transcript_done") {
         log$3.debug(`Transcript complete [${message.role}]: ${message.text}`);
-        this.finalizeStreamingMessage();
+        const role = message.role === "assistant" ? "assistant" : "user";
+        const itemId = message.itemId;
+        const interrupted = !!message.interrupted;
+        this.finalizeStreamingMessage(itemId, role, interrupted);
       }
     });
     this.socketService.on("error", (error2) => {
@@ -2961,6 +3028,7 @@ class ChatManager {
       timestamp: Date.now()
     };
     this.socketService.send(message);
+    this.setTyping(true);
   }
   async toggleVoiceInput() {
     if (!this.isRecording) {
@@ -3014,6 +3082,7 @@ class ChatManager {
     this.isRecording = false;
     this.micBtn.classList.remove("recording");
     this.micBtn.setAttribute("aria-pressed", "false");
+    this.setTyping(true);
   }
   startBlendshapeSync() {
     const sync = () => {
@@ -3047,58 +3116,233 @@ class ChatManager {
     this.options.onMessage?.({ role: sender, text });
   }
   /**
-   * Stream transcript text in real-time (word by word)
+   * Item-aware streaming transcript: uses server-provided itemId and previousItemId
    */
-  streamTranscript(text, role) {
-    if (!this.currentStreamingMessage || this.currentStreamingMessage.role !== role) {
-      const messageId = Date.now().toString();
+  streamTranscript(text, role, itemId, previousItemId) {
+    const effectiveId = itemId || `${role}_${Date.now().toString()}`;
+    if (role === "assistant" && !this.SHOW_ASSISTANT_STREAMING) {
+      const buf = this.bufferedDeltas.get(effectiveId) || [];
+      buf.push(text);
+      this.bufferedDeltas.set(effectiveId, buf);
+      if (!this.bufferTimeouts.has(effectiveId)) {
+        const t = window.setTimeout(() => {
+          this.flushBufferedDeltas(effectiveId, role, effectiveId);
+        }, Math.max(this.BUFFER_WAIT_MS, 2e3));
+        this.bufferTimeouts.set(effectiveId, t);
+      }
+      return;
+    }
+    if (previousItemId && !this.streamingByItem.has(previousItemId) && !this.latestItemForRole[role]) {
+      const buf = this.bufferedDeltas.get(effectiveId) || [];
+      buf.push(text);
+      this.bufferedDeltas.set(effectiveId, buf);
+      if (this.bufferTimeouts.has(effectiveId)) {
+        clearTimeout(this.bufferTimeouts.get(effectiveId));
+      }
+      const t = window.setTimeout(() => {
+        this.flushBufferedDeltas(
+          effectiveId,
+          role,
+          effectiveId
+          /* fallback id */
+        );
+      }, this.BUFFER_WAIT_MS);
+      this.bufferTimeouts.set(effectiveId, t);
+      return;
+    }
+    if (this.bufferedDeltas.has(effectiveId)) {
+      const buffered = this.bufferedDeltas.get(effectiveId) || [];
+      for (const part of buffered) {
+        this.appendToStreamingItem(effectiveId, role, part);
+      }
+      this.bufferedDeltas.delete(effectiveId);
+      const to = this.bufferTimeouts.get(effectiveId);
+      if (to) {
+        clearTimeout(to);
+        this.bufferTimeouts.delete(effectiveId);
+      }
+    }
+    if (!this.streamingByItem.has(effectiveId)) {
       const messageEl = document.createElement("div");
       messageEl.className = `message ${role}`;
-      messageEl.dataset.id = messageId;
+      messageEl.dataset.id = effectiveId;
       const bubbleEl = document.createElement("div");
       bubbleEl.className = "message-bubble";
       bubbleEl.textContent = text;
+      const footerEl = document.createElement("div");
+      footerEl.className = "message-footer";
       const timeEl = document.createElement("div");
       timeEl.className = "message-time";
-      timeEl.textContent = (/* @__PURE__ */ new Date()).toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit"
-      });
+      timeEl.textContent = (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+      footerEl.appendChild(timeEl);
       messageEl.appendChild(bubbleEl);
-      messageEl.appendChild(timeEl);
+      messageEl.appendChild(footerEl);
       this.chatMessages.appendChild(messageEl);
-      this.currentStreamingMessage = {
-        id: messageId,
-        element: messageEl,
-        role
-      };
+      this.streamingByItem.set(effectiveId, { role, element: messageEl });
+      this.latestItemForRole[role] = effectiveId;
       this.scrollToBottom();
     } else {
-      const bubbleEl = this.currentStreamingMessage.element.querySelector(".message-bubble");
-      if (bubbleEl) {
-        bubbleEl.textContent += text;
-        this.scrollToBottom();
-      }
+      this.appendToStreamingItem(effectiveId, role, text);
     }
   }
-  /**
-   * Finalize the streaming message and add it to messages array
-   */
-  finalizeStreamingMessage() {
-    if (!this.currentStreamingMessage) return;
-    const bubbleEl = this.currentStreamingMessage.element.querySelector(".message-bubble");
-    const text = bubbleEl?.textContent || "";
-    if (text) {
-      const message = {
-        id: this.currentStreamingMessage.id,
+  appendToStreamingItem(id, role, text) {
+    const entry = this.streamingByItem.get(id);
+    if (!entry) return;
+    const bubbleEl = entry.element.querySelector(".message-bubble");
+    if (bubbleEl) {
+      bubbleEl.textContent += text;
+      this.scrollToBottom();
+    }
+  }
+  flushBufferedDeltas(bufferKey, role, fallbackId) {
+    const parts = this.bufferedDeltas.get(bufferKey);
+    if (!parts) return;
+    if (role === "assistant" && !this.SHOW_ASSISTANT_STREAMING) {
+      try {
+        const text = parts.join("");
+        const msg = {
+          id: fallbackId,
+          text,
+          sender: "assistant",
+          timestamp: Date.now()
+        };
+        this.messages.push(msg);
+        this.options.onMessage?.({ role: "assistant", text });
+        this.renderMessage(msg);
+        const el = this.chatMessages.lastElementChild;
+        if (el) {
+          el.classList.add("finalized");
+          el.dataset.finalized = "true";
+        }
+      } catch (err) {
+        log$3.error("Failed to finalize buffered assistant parts:", err);
+      }
+    } else {
+      for (const p of parts) {
+        this.streamTranscript(p, role, fallbackId);
+      }
+    }
+    this.bufferedDeltas.delete(bufferKey);
+    const to = this.bufferTimeouts.get(bufferKey);
+    if (to) {
+      clearTimeout(to);
+      this.bufferTimeouts.delete(bufferKey);
+    }
+  }
+  finalizeStreamingMessage(itemId, role, interrupted = false) {
+    if (itemId) {
+      const entry = this.streamingByItem.get(itemId);
+      if (entry) {
+        const bubbleEl = entry.element.querySelector(".message-bubble");
+        const text = bubbleEl?.textContent || "";
+        const msg = {
+          id: itemId,
+          text,
+          sender: entry.role,
+          timestamp: Date.now()
+        };
+        this.messages.push(msg);
+        this.options.onMessage?.({ role: entry.role, text });
+        entry.element.classList.add("finalized");
+        entry.element.dataset.finalized = "true";
+        if (entry.role === "assistant") {
+          this.addFeedbackButtons(entry.element);
+        }
+        this.streamingByItem.delete(itemId);
+        if (this.latestItemForRole[entry.role] === itemId) {
+          delete this.latestItemForRole[entry.role];
+        }
+        return;
+      }
+      const buffered = this.bufferedDeltas.get(itemId);
+      if (buffered && buffered.length) {
+        const text = buffered.join("");
+        const msg = {
+          id: itemId,
+          text,
+          sender: role || "assistant",
+          timestamp: Date.now()
+        };
+        this.messages.push(msg);
+        this.options.onMessage?.({ role: msg.sender, text });
+        this.renderMessage(msg);
+        const el = this.chatMessages.lastElementChild;
+        if (el) {
+          el.classList.add("finalized");
+          el.dataset.finalized = "true";
+        }
+        this.bufferedDeltas.delete(itemId);
+        const to = this.bufferTimeouts.get(itemId);
+        if (to) {
+          clearTimeout(to);
+          this.bufferTimeouts.delete(itemId);
+        }
+        return;
+      }
+    }
+    const rolesToFinalize = role ? [role] : ["user", "assistant"];
+    for (const r of rolesToFinalize) {
+      const latestId = this.latestItemForRole[r];
+      if (!latestId) continue;
+      const entry = this.streamingByItem.get(latestId);
+      if (!entry) continue;
+      const bubbleEl = entry.element.querySelector(".message-bubble");
+      const text = bubbleEl?.textContent || "";
+      const msg = {
+        id: latestId,
         text,
-        sender: this.currentStreamingMessage.role,
+        sender: r,
         timestamp: Date.now()
       };
-      this.messages.push(message);
-      this.options.onMessage?.({ role: this.currentStreamingMessage.role, text });
+      this.messages.push(msg);
+      this.options.onMessage?.({ role: r, text });
+      entry.element.classList.add("finalized");
+      entry.element.dataset.finalized = "true";
+      if (r === "assistant") {
+        this.addFeedbackButtons(entry.element);
+      }
+      this.streamingByItem.delete(latestId);
+      delete this.latestItemForRole[r];
+    }
+    if (role) {
+      let foundKey = null;
+      for (const k of Array.from(this.bufferedDeltas.keys())) {
+        if (k.startsWith(`${role}_`)) {
+          foundKey = k;
+          break;
+        }
+      }
+      if (foundKey) {
+        const parts = this.bufferedDeltas.get(foundKey) || [];
+        const text = parts.join("");
+        const msg = {
+          id: foundKey,
+          text,
+          sender: role,
+          timestamp: Date.now()
+        };
+        this.messages.push(msg);
+        this.options.onMessage?.({ role, text });
+        this.renderMessage(msg);
+        const el = this.chatMessages.lastElementChild;
+        if (el) {
+          el.classList.add("finalized");
+          el.dataset.finalized = "true";
+        }
+        this.bufferedDeltas.delete(foundKey);
+        const to = this.bufferTimeouts.get(foundKey);
+        if (to) {
+          clearTimeout(to);
+          this.bufferTimeouts.delete(foundKey);
+        }
+      }
+    }
+    if (interrupted) {
+      const assistantId = this.latestItemForRole.assistant;
+      if (assistantId) {
+        this.finalizeStreamingMessage(assistantId, "assistant", false);
+      }
     }
-    this.currentStreamingMessage = null;
   }
   renderMessage(message) {
     const messageEl = document.createElement("div");
@@ -3106,16 +3350,54 @@ class ChatManager {
     const bubbleEl = document.createElement("div");
     bubbleEl.className = "message-bubble";
     bubbleEl.textContent = message.text;
+    const footerEl = document.createElement("div");
+    footerEl.className = "message-footer";
     const timeEl = document.createElement("div");
     timeEl.className = "message-time";
     timeEl.textContent = new Date(message.timestamp).toLocaleTimeString([], {
       hour: "2-digit",
       minute: "2-digit"
     });
+    footerEl.appendChild(timeEl);
     messageEl.appendChild(bubbleEl);
-    messageEl.appendChild(timeEl);
+    messageEl.appendChild(footerEl);
+    if (message.sender === "assistant") {
+      this.addFeedbackButtons(messageEl);
+    }
     this.chatMessages.appendChild(messageEl);
   }
+  addFeedbackButtons(messageEl) {
+    let footerEl = messageEl.querySelector(".message-footer");
+    if (!footerEl) {
+      footerEl = document.createElement("div");
+      footerEl.className = "message-footer";
+      messageEl.appendChild(footerEl);
+    }
+    const feedbackContainer = document.createElement("div");
+    feedbackContainer.className = "message-feedback";
+    const upBtn = document.createElement("button");
+    upBtn.className = "feedback-btn";
+    upBtn.setAttribute("aria-label", "Helpful");
+    upBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>`;
+    const downBtn = document.createElement("button");
+    downBtn.className = "feedback-btn";
+    downBtn.setAttribute("aria-label", "Not helpful");
+    downBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"></path></svg>`;
+    const toggleFeedback = (btn, otherBtn) => {
+      if (btn.classList.contains("selected")) {
+        btn.classList.remove("selected");
+      } else {
+        btn.classList.add("selected");
+        otherBtn.classList.remove("selected");
+        feedbackContainer.classList.add("active");
+      }
+    };
+    upBtn.addEventListener("click", () => toggleFeedback(upBtn, downBtn));
+    downBtn.addEventListener("click", () => toggleFeedback(downBtn, upBtn));
+    feedbackContainer.appendChild(upBtn);
+    feedbackContainer.appendChild(downBtn);
+    footerEl.appendChild(feedbackContainer);
+  }
   scrollToBottom() {
     this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
   }
@@ -3140,6 +3422,12 @@ class ChatManager {
       log$3.debug("Stopping recording...");
       this.stopRecording();
     }
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    log$3.debug("Invalidating session:", this.currentSessionId);
+    this.currentSessionId = null;
     log$3.debug("Stopping audio playback and clearing buffers...");
     this.syncPlayback.stop();
     this.audioOutput.stop();
@@ -3166,6 +3454,9 @@ class ChatManager {
     if ("resume" in this.avatar && typeof this.avatar.resume === "function") {
       this.avatar.resume();
     }
+    if (this.animationFrameId === null) {
+      this.startBlendshapeSync();
+    }
   }
   openChat() {
     const widget = document.getElementById("chatWidget");
@@ -3218,9 +3509,16 @@ const WIDGET_STYLES = `
   line-height: 1.5;
   color: #333;
   box-sizing: border-box;
+  --primary-color: #4B4ACF;
+  --primary-gradient: linear-gradient(135deg, #4B4ACF 0%, #2E3A87 100%);
+  --bg-color: #ffffff;
+  --text-color: #333;
+  --input-bg: #f5f5f7;
+  --border-color: #e0e0e0;
+  --avatar-stage-height: 42%;
 }
 
-:host *, :host *::before, :host *::after {
+:host * {
   box-sizing: inherit;
 }
 
@@ -3229,330 +3527,708 @@ const WIDGET_STYLES = `
 :host(.position-bottom-left) { position: fixed; bottom: 20px; left: 20px; z-index: 999999; }
 :host(.position-top-right) { position: fixed; top: 20px; right: 20px; z-index: 999999; }
 :host(.position-top-left) { position: fixed; top: 20px; left: 20px; z-index: 999999; }
-:host(.position-inline) { position: relative; }
+:host(.position-inline) { position: relative; height: 540px; width: 350px; }
 :host(.hidden) { display: none !important; }
 
 /* Main container */
 .widget-root {
-  width: 100%;
-  height: 100%;
+  width: 350px;
+  height: 540px; /* Taller for immersive view */
+  max-height: 80vh;
   display: flex;
   flex-direction: column;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  overflow: visible;
-  transition: transform 0.3s ease;
+  background: var(--bg-color);
+  border-radius: 20px;
+  /* Softer shadow */
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
   position: relative;
+  border: 1px solid rgba(0,0,0,0.08);
 }
 
-.widget-root.minimized {
-  transform: scale(0);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.widget-root.theme-dark {
-  background: #1a1a2e;
-  color: #e0e0e0;
-}
-
-/* Collapsed bubble state */
-:host(.collapsed) {
-  width: 60px !important;
-  height: 60px !important;
-}
-
-.chat-bubble {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.chat-bubble:hover {
-  transform: scale(1.1);
-  box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
+@media (max-width: 480px) {
+  .widget-root {
+    width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+    bottom: 0;
+    right: 0;
+  }
 }
 
-.chat-bubble.hidden {
-  transform: scale(0);
+.widget-root.minimized {
+  transform: translateY(20px) scale(0.9);
   opacity: 0;
   pointer-events: none;
 }
 
-.chat-bubble svg {
-  width: 28px;
-  height: 28px;
+.widget-root.theme-dark {
+  --bg-color: #0f111a;
+  --text-color: #ffffff;
+  --input-bg: #1e2130;
+  --border-color: #2a2e42;
   color: white;
 }
 
-/* Avatar Circle - Breaking out at top */
-.avatar-circle {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background: #ffffff;
-  border: 3px solid #667eea;
+/* ==========================================================================
+   Avatar Stage (Top Half)
+   ========================================================================== */
+.avatar-stage {
+  height: var(--avatar-stage-height);
+  position: relative;
+  background: radial-gradient(circle at center 40%, #f0f4ff 0%, #ffffff 80%);
   overflow: hidden;
-  position: absolute;
-  left: -35px;
-  top: -40px;
-  z-index: 1001;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.widget-root.minimized .avatar-circle {
-  opacity: 0;
-  pointer-events: none;
-  transform: scale(0.5);
+  flex-shrink: 0;
 }
 
-.theme-dark .avatar-circle {
-  background: #1a1a2e;
-  border-color: #764ba2;
+.theme-dark .avatar-stage {
+  background: radial-gradient(circle at center 30%, #2d3748 0%, #0f111a 100%);
 }
 
-/* Avatar render container - high-res rendering scaled down */
+/* Avatar Render Container (Injected by LazyAvatar) */
 .avatar-render-container {
   width: 800px;
   height: 800px;
   position: absolute;
-  top: -80px;
+  /* Reduced from -280px to -160px because scale is smaller */
+  bottom: -200px;
   left: 50%;
-  transform: translateX(-50%) scale(0.38);
-  transform-origin: center top;
-  will-change: transform;
+  transform: translateX(-50%) scale(0.70);
+  transform-origin: center bottom;
+  pointer-events: none; /* Allow interaction with header overlay */
 }
 
 .avatar-render-container canvas {
-  width: 800px !important;
-  height: 800px !important;
+  width: 100% !important;
+  height: 100% !important;
   object-fit: contain;
 }
 
-.avatar-circle > canvas {
-  width: 800px !important;
-  height: 800px !important;
+/* Header Overlay */
+.chat-header-overlay {
   position: absolute;
-  top: -80px;
-  left: 50%;
-  transform: translateX(-50%) scale(0.38);
-  transform-origin: center top;
-  object-fit: contain;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 16px; /* Reduced padding to push content to top */
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  z-index: 10;
+  /* Removed heavy linear gradient for cleaner look */
+  background: transparent; 
 }
 
-/* Speaking indicator */
-.avatar-circle.speaking {
-  border-color: #27ae60;
-  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(39, 174, 96, 0.3);
-  animation: speakPulse 1s infinite;
+.header-info {
+  /* Removed the "Square" background that covered hair */
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  padding: 0;
+  border: none;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
 }
 
-@keyframes speakPulse {
-  0%, 100% { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(39, 174, 96, 0.3); }
-  50% { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(39, 174, 96, 0.1); }
+.header-info h3 {
+  margin: 0;
+  font-size: 16px; /* Slightly larger for readability without bg */
+  font-weight: 700;
+  color: #1a1a1a;
+  /* Added white glow for readability over avatar hair/bg */
+  text-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,1);
+  letter-spacing: -0.01em;
 }
 
-/* Chat Header */
-.chat-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.theme-dark .header-info {
+  background: transparent;
+  border-color: transparent;
+}
+
+.theme-dark .header-info h3 {
   color: white;
-  padding: 14px;
-  padding-left: 95px;
-  border-radius: 12px 12px 0 0;
+  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+}
+
+.status-badge {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  cursor: pointer;
-  position: relative;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-color);
+  padding: 2px 0;
+  margin-top: 2px;
+  /* Add subtle shadow for readability */
+  text-shadow: 0 0 8px rgba(255,255,255,0.8);
 }
 
-.theme-dark .chat-header {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+/* Green Dot */
+.status-badge::before {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 6px;
+  background-color: #10b981;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #10b981;
 }
 
-.chat-header h3 {
-  font-size: 15px;
-  font-weight: 600;
-  margin: 0;
+.theme-dark .status-badge {
+  color: #ccc;
 }
 
-.chat-header-buttons {
+.control-btn {
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,0.4);
+  color: #1a1a1a;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
   display: flex;
-  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
 }
 
-.chat-header-buttons button {
-  background: rgba(255, 255, 255, 0.2);
-  border: none;
+.control-btn:hover {
+  background: rgba(255, 255, 255, 0.8);
+  transform: scale(1.05);
+}
+
+.theme-dark .control-btn {
   color: white;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 14px;
+  background: rgba(0, 0, 0, 0.4);
+  border-color: rgba(255,255,255,0.1);
+}
+
+/* ==========================================================================
+   Chat Interface (Bottom Half)
+   ========================================================================== */
+.chat-interface {
+  flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.2s;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.95); /* Slightly translucent */
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  position: relative;
+  z-index: 5;
+  /* Removed Sheet Overlap (-24px margin & radius) */
+  margin-top: 0;
+  border-top: 1px solid rgba(0,0,0,0.05); /* Clean straight separation */
+  overflow: hidden; /* Added to constrain child elements */
+  min-height: 0; /* Added to ensure flex container can shrink if needed */
+}
+
+/* Fade overlay at the top of chat interface */
+.chat-interface::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 24px;
+  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+  z-index: 10; /* Above messages */
+  pointer-events: none;
 }
 
-.chat-header-buttons button:hover {
-  background: rgba(255, 255, 255, 0.3);
+.theme-dark .chat-interface::before {
+  background: linear-gradient(to bottom, var(--bg-color) 0%, transparent 100%);
 }
 
-/* Messages Container */
 .chat-messages {
   flex: 1;
+  /* Ensure min-height is 0 so flex scrolling works properly */
+  min-height: 0;
   overflow-y: auto;
-  padding: 14px;
-  min-height: 250px;
-  max-height: 320px;
-  background: #fafafa;
+  /* Added top specific padding to account for the fade overlay */
+  padding: 24px 20px 20px; 
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  /* Scrollbar styling */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,0.1) transparent;
 }
 
-.theme-dark .chat-messages {
-  background: #16213e;
+.chat-messages::-webkit-scrollbar {
+  width: 4px;
+}
+.chat-messages::-webkit-scrollbar-thumb {
+  background-color: rgba(0,0,0,0.1);
+  border-radius: 4px;
 }
 
 .message {
-  margin-bottom: 16px;
   display: flex;
   flex-direction: column;
-  animation: fadeIn 0.3s ease;
+  animation: slideUp 0.3s ease;
+  max-width: 85%; /* Restore max-width constraint */
 }
 
-@keyframes fadeIn {
+@keyframes slideUp {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 .message.user {
+  align-self: flex-end;
   align-items: flex-end;
 }
 
 .message.assistant {
-  align-items: flex-start;
+  align-self: flex-start;
+  align-items: stretch; /* Ensure footer spans full width of the bubble */
 }
 
 .message-bubble {
-  max-width: 80%;
-  padding: 10px 14px;
-  border-radius: 16px;
-  word-wrap: break-word;
+  padding: 10px 16px;
+  border-radius: 18px;
   font-size: 14px;
-  line-height: 1.45;
+  line-height: 1.5;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 
 .message.user .message-bubble {
-  background: #667eea;
+  background: var(--primary-gradient); /* Modern Gradient Bubble */
   color: white;
   border-bottom-right-radius: 4px;
+  box-shadow: 0 4px 12px rgba(75, 74, 207, 0.25); /* Colored shadow for depth */
 }
 
 .message.assistant .message-bubble {
   background: white;
-  color: #333;
-  border: 1px solid #e0e0e0;
+  color: var(--text-color);
   border-bottom-left-radius: 4px;
+  border: 1px solid var(--border-color);
 }
 
-.theme-dark .message.assistant .message-bubble {
-  background: #1a1a2e;
-  color: #e0e0e0;
-  border-color: #333;
+.message-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+  padding: 0 4px; /* Align with bubble curvature */
+  min-height: 20px;
 }
 
 .message-time {
   font-size: 11px;
-  color: #999;
-  margin-top: 6px;
-  padding: 0 4px;
+  color: #9ca3af;
 }
 
-/* Input Area */
-.chat-input-area {
-  padding: 12px;
-  background: white;
-  border-top: 1px solid #e0e0e0;
-  border-radius: 0 0 12px 12px;
+/* Response Feedback (Thumbs Up/Down) */
+.message-feedback {
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+  transform: translateY(-5px);
+  transition: opacity 0.3s, transform 0.3s;
+  pointer-events: none; /* Disabled when hidden */
+}
+
+/* Show feedback only when message is hovered or active */
+.message.assistant:hover .message-feedback,
+.message.assistant .message-feedback.active {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.feedback-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: #9ca3af;
+  transition: all 0.2s;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.theme-dark .chat-input-area {
+.feedback-btn:hover {
+  background: #f3f4f6;
+  color: #4b5563;
+}
+
+.feedback-btn.selected {
+  color: var(--primary-color);
+  background: #e0e7ff;
+}
+
+.feedback-btn:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+.feedback-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.theme-dark .message-feedback .feedback-btn {
+  color: #6b7280;
+}
+
+.theme-dark .message-feedback .feedback-btn:hover {
+  background: #2a2e42;
+  color: #9ca3af;
+}
+
+.theme-dark .message-feedback .feedback-btn.selected {
+  color: var(--primary-color);
+  background: rgba(75, 74, 207, 0.2);
+}
+
+.theme-dark .message.assistant .message-bubble {
   background: #1a1a2e;
-  border-top-color: #333;
+  color: #e0e0e0;
+}
+
+/* Quick Replies */
+.quick-replies {
+  display: flex;
+  flex-direction: column; /* Vertical layout */
+  align-items: flex-end; /* Align to right like user bubbles */
+  gap: 14px; /* Increased gap to spread them out */
+  /* Increased vertical padding to use more empty chat space */
+  padding: 20px 16px 16px;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.quick-replies.hidden {
+  display: none;
+}
+
+.suggestion-chip {
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  color: var(--primary-color);
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+.suggestion-chip:hover {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(75, 74, 207, 0.25);
+}
+
+.theme-dark .suggestion-chip {
+  background: #2a2e42;
+  border-color: #3f445e;
+  color: #e0e0e0;
+}
+.theme-dark .suggestion-chip:hover {
+  background: var(--primary-color);
+  color: white;
+}
+
+/* Typing Indicator */
+.typing-indicator.hidden {
+  display: none;
+}
+
+.typing-dots {
+  display: flex;
+  gap: 4px;
+  padding: 4px 2px;
+}
+
+.typing-dots span {
+  width: 6px;
+  height: 6px;
+  background: #b0b0b0;
+  border-radius: 50%;
+  animation: typingBounce 1.4s infinite ease-in-out both;
+}
+
+.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
+.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes typingBounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+/* Chat Input Area */
+.chat-input-area {
+  padding: 16px;
+  background: var(--bg-color);
+  border-top: 1px solid var(--border-color);
 }
 
 .chat-input-wrapper {
+  margin-bottom: 8px;
+}
+
+.chat-input-controls {
   display: flex;
   gap: 10px;
-  align-items: flex-end;
+  align-items: center;
+  flex: 1; /* Ensure it takes width */
 }
 
-.chat-input-controls {
+/* Button Swapping Logic -> Co-existence Logic */
+
+/* Mic: Always visible */
+.chat-input-controls #micBtn {
   display: flex;
-  gap: 6px;
   align-items: center;
-  flex: 1;
+  justify-content: center;
+  background: transparent; /* Subtle background */
+  width: 40px;
+  height: 40px;
+  color: #6b7280; /* Gray when inactive */
+  margin-left: 4px;
+}
+.chat-input-controls #micBtn:hover {
+  background: #f3f4f6;
+  color: var(--primary-color);
+  transform: scale(1.05);
+}
+
+/* Send: Hidden when empty, Popped In when text exists */
+.chat-input-controls:not(.has-text) #sendBtn {
+  display: none;
+}
+
+.chat-input-controls.has-text #sendBtn {
+  display: flex;
+  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+/* Remove old conflicting hidden rules */
+.chat-input-controls.has-text #micBtn {
+  display: flex; /* Keep visible! */
+}
+
+
+@keyframes popIn {
+  from { transform: scale(0); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
 }
 
 #chatInput {
   flex: 1;
-  padding: 10px 14px;
-  border: 1px solid #e0e0e0;
-  border-radius: 20px;
-  font-size: 14px;
+  padding: 12px 16px;
+  border-radius: 24px;
+  border: 1px solid var(--border-color);
+  background: var(--input-bg);
+  color: var(--text-color);
   outline: none;
-  transition: border-color 0.2s;
   font-family: inherit;
+  transition: box-shadow 0.2s;
 }
 
 #chatInput:focus {
-  border-color: #667eea;
-}
-
-.theme-dark #chatInput {
-  background: #16213e;
-  border-color: #333;
-  color: #e0e0e0;
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+  border-color: var(--primary-color);
 }
 
 .input-button {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
+  background: transparent;
+  color: #9ca3af;
   border: none;
-  background: #667eea;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+
+.input-button:hover {
+  background: var(--input-bg);
+  color: var(--primary-color);
+}
+
+.input-button#micBtn {
+  color: var(--text-color);
+}
+.input-button.recording {
+  color: #e74c3c !important;
+  background: rgba(231, 76, 60, 0.1);
+  animation: recordPulse 1.5s infinite;
+}
+
+.input-button#sendBtn {
+  background: var(--primary-color);
   color: white;
+  padding: 10px;
+}
+.input-button#sendBtn:hover {
+  transform: scale(1.05);
+}
+
+.branding {
+  text-align: center;
+  font-size: 10px;
+  color: #9ca3af;
+  margin-top: 4px;
+}
+
+.branding a {
+  color: #7986cb;
+  text-decoration: none;
+}
+.branding a:hover {
+  text-decoration: underline;
+}
+
+/* ==========================================================================
+   Launcher Bubble (New Face Design)
+   ========================================================================== */
+:host(.collapsed) {
+  width: auto !important;
+  height: auto !important;
+  bottom: 20px !important;
+  right: 20px !important;
+  top: auto !important;
+  left: auto !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.bubble-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.chat-bubble {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--bg-color);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
   cursor: pointer;
+  position: relative;
+  /* Removed overflow: hidden so status dot can sit on the rim */
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  z-index: 20;
+}
+
+.chat-bubble:hover {
+  transform: scale(1.1);
+}
+
+.bubble-avatar-preview {
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
-  flex-shrink: 0;
+  background: white;
+  border-radius: 50%; /* moved radius here */
+  overflow: hidden; /* moved clip here for image */
 }
 
-.input-button:hover:not(:disabled) {
-  background: #5568d3;
-  transform: scale(1.05);
+.avatar-face-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.input-button:disabled {
-  background: #ccc;
-  cursor: not-allowed;
+.status-dot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 14px; /* Slightly larger */
+  height: 14px;
+  background: #10b981;
+  border: 2px solid white;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  z-index: 5;
 }
 
-.input-button.recording {
-  background: #e74c3c;
-  animation: recordPulse 1.5s infinite;
+/* Tooltip (Proactive Reach Out) */
+.bubble-tooltip-wrapper {
+  position: absolute;
+  right: 74px; /* Left of the bubble */
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  width: max-content; /* Ensure it takes needed space */
+  max-width: 240px; /* Increased to allow 2 lines */
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bubble-tooltip {
+  pointer-events: auto;
+  background: white;
+  color: #333;
+  padding: 10px 14px; /* Slightly more compact */
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  font-size: 13px; /* Slightly smaller text */
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  opacity: 0;
+  transform: translateX(10px);
+  animation: tooltipSlideIn 0.5s cubic-bezier(0.19, 1, 0.22, 1) 1.5s forwards;
+  position: relative;
+}
+
+.bubble-tooltip.hidden {
+  display: none;
+}
+
+.bubble-tooltip::after {
+  content: '';
+  position: absolute;
+  right: -6px;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background: white;
+  transform: translateY(-50%) rotate(45deg); /* Diamond shape, centered */
+  border-radius: 2px;
+}
+
+.tooltip-close {
+  background: none;
+  border: none;
+  color: var(--text-muted, #9ca3af);
+  cursor: pointer;
+  font-size: 18px;
+  padding: 0;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+.tooltip-close:hover {
+  background: var(--input-bg);
+  color: var(--text-color);
+}
+
+@keyframes tooltipSlideIn {
+  to { opacity: 1; transform: translateX(0); }
 }
 
 @keyframes recordPulse {
@@ -3560,6 +4236,47 @@ const WIDGET_STYLES = `
   50% { transform: scale(1.1); }
 }
 
+/* ==========================================================================
+   Mobile Full Screen Takeover
+   ========================================================================== */
+@media (max-width: 480px) {
+  :host(:not(.collapsed)) {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: none !important;
+    max-height: none !important;
+    border-radius: 0 !important;
+    z-index: 9999999 !important;
+  }
+  
+  :host(:not(.collapsed)) .widget-root {
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 0 !important;
+    border: none !important;
+  }
+  
+  /* Adjust container sizes for mobile */
+  :host(:not(.collapsed)) .avatar-stage {
+    height: 40%; /* Decreased from 50% to favor chat bubbles */
+  }
+  
+  :host(:not(.collapsed)) .avatar-render-container {
+    transform: translateX(-50%) scale(0.65); /* Adjusted for mobile */
+    bottom: -150px; /* Adjusted coordinate */
+  }
+
+  /* Make header bigger on mobile */
+  :host(:not(.collapsed)) .chat-header-overlay {
+    padding: 16px;
+  }
+}
+
 /* Accessibility */
 .visually-hidden {
   position: absolute;
@@ -3575,65 +4292,88 @@ const WIDGET_STYLES = `
 `;
 const WIDGET_TEMPLATE = `
 <div class="widget-root">
-  <!-- Avatar Circle - Breaking out at top -->
-  <div class="avatar-circle" id="avatarCircle" aria-label="AI Avatar">
-    <div class="avatar-placeholder">👤</div>
+  <!-- Immersive Avatar Stage (Top 42%) -->
+  <div class="avatar-stage" id="avatarContainer" aria-label="AI Avatar Scene">
+    <!-- Header Overlay -->
+    <div class="chat-header-overlay">
+      <div class="header-info">
+        <h3>Nyx Assistant</h3>
+        <span class="status-badge">Live</span>
+      </div>
+      <div class="chat-header-buttons">
+        <button id="minimizeBtn" class="control-btn" aria-label="Minimize chat" title="Minimize">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+    </div>
+    
+    <!-- Avatar Canvas gets injected here by code -->
+    <div class="avatar-placeholder"></div>
   </div>
 
-  <div class="chat-header" role="button" tabindex="0" aria-label="Toggle chat window">
-    <h3>Nyx Assistant</h3>
-    <div class="chat-header-buttons">
-      <button id="minimizeBtn" aria-label="Minimize chat" title="Minimize">−</button>
+  <!-- Chat Interface (Bottom 58%) -->
+  <div class="chat-interface">
+    <div class="chat-messages" id="chatMessages" role="log" aria-live="polite">
+      <!-- Messages injected here -->
+      <div id="typingIndicator" class="message assistant typing-indicator hidden">
+        <div class="message-bubble">
+           <div class="typing-dots">
+             <span></span><span></span><span></span>
+           </div>
+        </div>
+      </div>
     </div>
-  </div>
 
-  <div class="chat-messages" id="chatMessages" role="log" aria-live="polite" aria-atomic="false">
-    <!-- Messages will be added here dynamically -->
-  </div>
+    <!-- Quick Replies -->
+    <div class="quick-replies" id="quickReplies">
+      <!-- Chips injected dynamically from config.suggestions -->
+    </div>
 
-  <div class="chat-input-area">
-    <div class="chat-input-wrapper">
-      <div class="chat-input-controls">
-        <input
-          type="text"
-          id="chatInput"
-          placeholder="Type a message..."
-          aria-label="Chat message input"
-          autocomplete="off"
-        />
-        <button
-          id="micBtn"
-          class="input-button"
-          aria-label="Voice input"
-          title="Voice input"
-        >
-          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
-            <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-            <line x1="12" x2="12" y1="19" y2="22"/>
-          </svg>
-        </button>
-        <button
-          id="sendBtn"
-          class="input-button"
-          aria-label="Send message"
-          title="Send"
-        >
-          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M22 2 11 13"/>
-            <path d="M22 2 15 22 11 13 2 9 22 2z"/>
-          </svg>
-        </button>
+    <div class="chat-input-area">
+       <div class="chat-input-wrapper">
+         <div class="chat-input-controls">
+            <input type="text" id="chatInput" placeholder="Ask me anything..." aria-label="Message input" autocomplete="off" />
+             
+             <!-- Mic Button (Prominent) -->
+             <button id="micBtn" class="input-button" aria-label="Voice input">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
+                  <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                  <line x1="12" x2="12" y1="19" y2="22"/>
+                </svg>
+             </button>
+             
+             <!-- Send Button -->
+             <button id="sendBtn" class="input-button" aria-label="Send message">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M22 2 11 13"/>
+                  <path d="M22 2 15 22 11 13 2 9 22 2z"/>
+                </svg>
+             </button>
+         </div>
       </div>
+      <div class="branding">Powered by <a href="https://www.myned.ai" target="_blank" rel="noopener noreferrer">Myned AI</a></div>
     </div>
   </div>
 </div>
 `;
 const BUBBLE_TEMPLATE = `
-<div class="chat-bubble" role="button" aria-label="Open chat" tabindex="0">
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-  </svg>
+<div class="bubble-container">
+  <div class="bubble-tooltip-wrapper">
+     <div class="bubble-tooltip" id="bubbleTooltip">
+        <span class="tooltip-text" id="tooltipText"></span>
+        <button class="tooltip-close" id="tooltipClose" aria-label="Close tooltip">×</button>
+     </div>
+  </div>
+  <div class="chat-bubble" id="chatBubble" role="button" aria-label="Open chat" tabindex="0">
+    <div class="bubble-avatar-preview">
+      <img src="./asset/avatar.png" class="avatar-face-img" alt="Nyx Avatar" />
+      <div class="status-dot"></div>
+    </div>
+  </div>
 </div>
 `;
 const DEFAULT_CONFIG$1 = {
@@ -3645,7 +4385,19 @@ const DEFAULT_CONFIG$1 = {
   enableVoice: true,
   enableText: true,
   authEnabled: false,
-  logLevel: "error"
+  logLevel: "error",
+  suggestions: [
+    "What is your story?",
+    "What services do you provide?",
+    "Can I book a meeting?"
+  ],
+  tooltipText: "Hi! 👋 Ask me anything."
+};
+const UI_DELAY = {
+  /** Visual feedback delay before triggering send action */
+  CHIP_CLICK_SEND: 200,
+  /** Delay to allow ChatManager to process before UI cleanup */
+  INPUT_CLEANUP: 50
 };
 const log$2 = logger.scope("Widget");
 const DEFAULT_CONFIG = {
@@ -3748,18 +4500,33 @@ class AvatarChatElement extends HTMLElement {
     if (style) this.shadow.appendChild(style);
     const container = document.createElement("div");
     container.innerHTML = BUBBLE_TEMPLATE;
-    const bubble = container.firstElementChild;
-    bubble.addEventListener("click", () => this.expand());
-    bubble.addEventListener("keypress", (e) => {
-      if (e.key === "Enter") this.expand();
-    });
-    this.shadow.appendChild(bubble);
+    const wrapper = container.firstElementChild;
+    const bubble = wrapper.querySelector("#chatBubble");
+    if (bubble) {
+      bubble.addEventListener("click", () => this.expand());
+      bubble.addEventListener("keypress", (e) => {
+        if (e.key === "Enter") this.expand();
+      });
+    }
+    const closeBtn = wrapper.querySelector("#tooltipClose");
+    const tooltip = wrapper.querySelector("#bubbleTooltip");
+    const tooltipTextEl = wrapper.querySelector("#tooltipText");
+    if (tooltipTextEl && this.config.tooltipText) {
+      tooltipTextEl.textContent = this.config.tooltipText;
+    }
+    if (closeBtn && tooltip) {
+      closeBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        tooltip.classList.add("hidden");
+      });
+    }
+    this.shadow.appendChild(wrapper);
   }
   /**
    * Initialize avatar renderer
    */
   async initializeAvatar() {
-    const avatarContainer = this.shadow.getElementById("avatarCircle");
+    const avatarContainer = this.shadow.getElementById("avatarContainer");
     if (!avatarContainer) {
       log$2.error("Avatar container not found");
       return;
@@ -3815,6 +4582,7 @@ class AvatarChatElement extends HTMLElement {
         },
         onMessage: (msg) => {
           this.config.onMessage?.(msg);
+          this.expandWidgetHeight();
         },
         onError: (err) => {
           this.config.onError?.(err);
@@ -3842,6 +4610,82 @@ class AvatarChatElement extends HTMLElement {
       };
       this.themeMediaQuery.addEventListener("change", this.themeChangeHandler);
     }
+    const chatInput = this.shadow.getElementById("chatInput");
+    const inputControls = this.shadow.querySelector(".chat-input-controls");
+    if (chatInput && inputControls) {
+      chatInput.addEventListener("input", () => {
+        if (chatInput.value.trim().length > 0) {
+          inputControls.classList.add("has-text");
+        } else {
+          inputControls.classList.remove("has-text");
+        }
+      });
+    }
+    const quickReplies = this.shadow.getElementById("quickReplies");
+    const sendBtn = this.shadow.getElementById("sendBtn");
+    const micBtn = this.shadow.getElementById("micBtn");
+    if (quickReplies && this.config.suggestions && this.config.suggestions.length > 0) {
+      quickReplies.innerHTML = this.config.suggestions.map((text) => `<button class="suggestion-chip">${this.escapeHtml(text)}</button>`).join("");
+    }
+    if (quickReplies && chatInput && sendBtn) {
+      const hideSuggestions = () => {
+        quickReplies.classList.add("hidden");
+      };
+      quickReplies.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.classList.contains("suggestion-chip")) {
+          this.expandWidgetHeight();
+          hideSuggestions();
+          const text = target.textContent;
+          if (text) {
+            chatInput.value = text;
+            inputControls?.classList.add("has-text");
+            setTimeout(() => sendBtn.click(), UI_DELAY.CHIP_CLICK_SEND);
+          }
+        }
+      });
+      sendBtn.addEventListener("click", () => {
+        this.expandWidgetHeight();
+        hideSuggestions();
+        setTimeout(() => {
+          if (chatInput.value.trim() === "") {
+            inputControls?.classList.remove("has-text");
+          }
+        }, UI_DELAY.INPUT_CLEANUP);
+      });
+      micBtn?.addEventListener("click", () => {
+        this.expandWidgetHeight();
+        hideSuggestions();
+      });
+      chatInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          this.expandWidgetHeight();
+          hideSuggestions();
+          setTimeout(() => {
+            if (chatInput.value.trim() === "") {
+              inputControls?.classList.remove("has-text");
+            }
+          }, UI_DELAY.INPUT_CLEANUP);
+        }
+      });
+    }
+  }
+  /**
+   * Escape HTML to prevent XSS in user-provided suggestions
+   */
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+  /**
+   * Expand the widget to full height (called on first interaction)
+   */
+  expandWidgetHeight() {
+    const root = this.shadow.querySelector(".widget-root");
+    if (root && !root.classList.contains("expanded")) {
+      root.classList.add("expanded");
+    }
   }
   /**
    * Update connection status (stub - connection indicator removed from UI)
@@ -3928,10 +4772,19 @@ class AvatarChatElement extends HTMLElement {
     return this.chatManager.reconnect();
   }
   /**
-   * Cleanup
+   * Web Component lifecycle: Called when element is removed from DOM
+   * Ensures cleanup happens even if element is removed externally (not via destroy())
    */
-  destroy() {
-    log$2.info("Destroying widget");
+  disconnectedCallback() {
+    if (this._isMounted) {
+      log$2.info("Widget removed from DOM - cleaning up resources");
+      this.cleanup();
+    }
+  }
+  /**
+   * Internal cleanup logic (shared by destroy() and disconnectedCallback())
+   */
+  cleanup() {
     if (this.themeMediaQuery && this.themeChangeHandler) {
       this.themeMediaQuery.removeEventListener("change", this.themeChangeHandler);
       this.themeMediaQuery = null;
@@ -3946,10 +4799,17 @@ class AvatarChatElement extends HTMLElement {
       this.avatar = null;
     }
     this.shadow.innerHTML = "";
-    this.remove();
     this._isMounted = false;
     this._isConnected = false;
   }
+  /**
+   * Cleanup and remove from DOM
+   */
+  destroy() {
+    log$2.info("Destroying widget");
+    this.cleanup();
+    this.remove();
+  }
 }
 if (typeof customElements !== "undefined" && !customElements.get("avatar-chat-widget")) {
   customElements.define("avatar-chat-widget", AvatarChatElement);