@supernal/interface-nextjs 1.0.21 → 1.0.22

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/SupernalProvider.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect8 } from "react";
 
 // src/contexts/ChatInputContext.tsx
 import { createContext, useContext, useCallback, useRef } from "react";
@@ -200,13 +200,13 @@ function getInitialMessages() {
     },
     {
       id: "3",
-      text: '\u{1F3AE} Try these commands:\n\u2022 "open menu" or "close menu"\n\u2022 "toggle notifications"\n\u2022 "set priority high"',
+      text: '\u{1F3AE} **Try these commands:**\n\n- "open menu" or "close menu"\n- "toggle notifications"\n- "set priority high"',
       type: "system",
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     },
     {
       id: "4",
-      text: '\u{1F5FA}\uFE0F  Navigate pages:\n\u2022 "architecture" or "dashboard"\n\u2022 "demo" or "home"\n\u2022 "docs" or "examples"',
+      text: '\u{1F5FA}\uFE0F **Navigate pages:**\n\n- "architecture" or "dashboard"\n- "demo" or "home"\n- "docs" or "examples"',
       type: "system",
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     },
@@ -303,74 +303,40 @@ function ChatProvider({
   return /* @__PURE__ */ jsx2(ChatContext.Provider, { value: { messages, sendMessage, clearMessages, isLoading }, children });
 }
 
-// src/components/ChatBubble.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+// src/components/ChatBubble/constants.ts
+import React3 from "react";
 
-// ../names/Components.ts
+// src/names/Components.ts
 var Components = {
-  // Chat components
+  // Chat component testids
+  ChatToggleButton: "chat-toggle-button",
   ChatInput: "chat-message-input",
   ChatSendButton: "chat-send-button",
-  ChatClearButton: "chat-clear-button",
-  ChatToggleButton: "chat-bubble-toggle",
-  ChatMessageList: "chat-message-list",
-  ChatTypingIndicator: "chat-typing-indicator",
-  // Demo widget components - buttons
-  OpenMenuButton: "open-main-menu",
-  CloseMenuButton: "close-main-menu",
-  // Demo widget components - checkboxes
-  FeatureToggle: "feature-toggle",
-  NotificationsToggle: "notification-toggle",
-  // Demo widget components - radios
-  PriorityHighRadio: "priority-high",
-  PriorityMediumRadio: "priority-medium",
-  PriorityLowRadio: "priority-low",
-  // Demo widget components - selects
-  StatusSelect: "status-dropdown",
-  ThemeSelect: "theme-toggle",
-  // Demo widget components - form
-  FormNameInput: "form-name",
-  DemoFormSubmitButton: "form-submit",
-  // Generic widget components
-  WidgetButton: "widget-button",
-  WidgetInput: "widget-input",
-  WidgetSelect: "widget-select",
-  WidgetCheckbox: "widget-checkbox",
-  WidgetRadio: "widget-radio",
-  WidgetTextarea: "widget-textarea",
-  // Tool command components
-  ToolCommandsList: "tool-commands-list",
-  ToolExecuteButton: "tool-execute-button",
-  ToolApprovalButton: "tool-approval-button",
-  ToolMetadataDisplay: "tool-metadata-display",
-  // Navigation components
-  NavMainMenu: "nav-main-menu",
-  NavHomeLink: "nav-home-link",
-  NavToolsLink: "nav-tools-link",
-  NavSettingsLink: "nav-settings-link",
-  NavBackButton: "nav-back-button",
-  // Form components
-  FormSubmitButton: "form-submit-button",
-  FormCancelButton: "form-cancel-button",
-  FormResetButton: "form-reset-button",
-  FormTextInput: "form-text-input",
-  FormEmailInput: "form-email-input",
-  FormPasswordInput: "form-password-input",
-  // Modal components
-  ModalCloseButton: "modal-close-button",
-  ModalConfirmButton: "modal-confirm-button",
-  ModalCancelButton: "modal-cancel-button",
-  ModalOverlay: "modal-overlay",
-  // Status/Feedback components
-  StatusSuccessMessage: "status-success-message",
-  StatusErrorMessage: "status-error-message",
-  StatusWarningMessage: "status-warning-message",
-  StatusLoadingSpinner: "status-loading-spinner",
-  StatusProgressBar: "status-progress-bar"
+  ChatClearButton: "chat-clear-button"
+};
+var ChatBubbleVariant = {
+  full: "full",
+  // Full-screen chat panel
+  floating: "floating",
+  // Floating draggable widget
+  drawer: "drawer",
+  // Mobile bottom drawer
+  subtitle: "subtitle"
+  // Minimalist voice-first overlay (premium)
+};
+var PageLayout = {
+  default: "default",
+  // Standard page layout
+  landing: "landing",
+  // Landing page with hero
+  docs: "docs",
+  // Documentation layout
+  blog: "blog"
+  // Blog post layout
 };
 
-// src/components/ChatBubble.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+// src/components/ChatBubble/constants.ts
+var DEFAULT_LOGO = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibG9nb0dyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzAwNjZmZjtzdG9wLW9wYWNpdHk6MSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0eWxlPSJzdG9wLWNvbG9yOiM0ZDk0ZmY7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6IzAwY2NmZjtzdG9wLW9wYWNpdHk6MSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgoKICA8IS0tIENpcmNsZSBiYWNrZ3JvdW5kIHdpdGggZ3JhZGllbnQgLS0+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9InVybCgjbG9nb0dyYWRpZW50KSIgb3BhY2l0eT0iMC4xNSIgLz4KCiAgPCEtLSBUZXh0OiAnQC8nIC0gZWFzeSB0byBjaGFuZ2UgdG8gJ34rJyBvciBhbnkgb3RoZXIgY2hhcmFjdGVycyAtLT4KICA8dGV4dCB4PSIyMCIgeT0iMjciCiAgICAgICAgZm9udC1mYW1pbHk9InN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgQmxpbmtNYWNTeXN0ZW1Gb250LCAnU2Vnb2UgVUknLCBzYW5zLXNlcmlmIgogICAgICAgIGZvbnQtc2l6ZT0iMjAiCiAgICAgICAgZm9udC13ZWlnaHQ9IjcwMCIKICAgICAgICB0ZXh0LWFuY2hvcj0ibWlkZGxlIgogICAgICAgIGZpbGw9InVybCgjbG9nb0dyYWRpZW50KSI+QC88L3RleHQ+Cjwvc3ZnPg==";
 var ChatNames = {
   bubble: Components.ChatToggleButton,
   input: Components.ChatInput,
@@ -511,9 +477,44 @@ var THEME_CLASSES = {
     bubble: "w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 flex items-center justify-center relative hover:scale-110"
   }
 };
+var GLASS_RESPONSE_BUBBLE = {
+  light: {
+    background: "rgba(255, 255, 255, 0.7)",
+    border: "1px solid rgba(0, 0, 0, 0.08)",
+    backdropFilter: "blur(12px) saturate(180%)",
+    WebkitBackdropFilter: "blur(12px) saturate(180%)",
+    boxShadow: "0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+  },
+  dark: {
+    background: "rgba(55, 65, 81, 0.6)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    backdropFilter: "blur(12px) saturate(180%)",
+    WebkitBackdropFilter: "blur(12px) saturate(180%)",
+    boxShadow: "0 2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
+  }
+};
+var GLASS_INVERTED = {
+  darkOnLight: {
+    background: "rgba(0, 0, 0, 0.6)",
+    border: "1px solid rgba(255, 255, 255, 0.15)",
+    backdropFilter: "blur(16px) saturate(150%)",
+    WebkitBackdropFilter: "blur(16px) saturate(150%)",
+    color: "rgba(255, 255, 255, 0.95)",
+    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
+  },
+  lightOnDark: {
+    background: "rgba(255, 255, 255, 0.7)",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    backdropFilter: "blur(16px) saturate(180%)",
+    WebkitBackdropFilter: "blur(16px) saturate(180%)",
+    color: "rgba(0, 0, 0, 0.9)",
+    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+  }
+};
 var DEFAULT_CONFIG = {
   title: "Supernal Interface",
-  avatar: /* @__PURE__ */ jsx3("img", { src: "/logo.svg", alt: "Supernal", className: "w-6 h-6" }),
+  logo: DEFAULT_LOGO,
+  avatar: React3.createElement("img", { src: DEFAULT_LOGO, alt: "Supernal", className: "w-6 h-6" }),
   description: "I'm a TOOL system AI can use to control this site",
   placeholder: "Try: toggle notifications",
   sendButtonLabel: "Send",
@@ -534,6 +535,9 @@ var DEFAULT_CONFIG = {
     background: "white"
   }
 };
+
+// src/components/ChatBubble/InputField.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var InputField = ({
   compact = false,
   inputValue,
@@ -543,7 +547,11 @@ var InputField = ({
   glassClasses,
   theme,
   inputRef,
-  sendButtonLabel
+  sendButtonLabel,
+  voiceEnabled = false,
+  isListening = false,
+  onMicClick,
+  modKey = "Ctrl"
 }) => /* @__PURE__ */ jsx3("form", { onSubmit, className: compact ? "flex space-x-2" : THEME_CLASSES.bg.inputForm + " bg-transparent", children: /* @__PURE__ */ jsxs("div", { className: compact ? "flex space-x-2 flex-1" : "relative", children: [
   /* @__PURE__ */ jsx3(
     "input",
@@ -553,30 +561,1450 @@ var InputField = ({
       value: inputValue,
       onChange: (e) => onInputChange(e.target.value),
       placeholder,
-      className: compact ? `flex-1 px-3 py-2 text-xs border rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${glassClasses}` : `${THEME_CLASSES.input.field} ${glassClasses}`,
+      className: compact ? `flex-1 px-3 py-2 text-xs border rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${glassClasses}` : `w-full pl-4 ${inputValue.trim() ? "pr-12" : "pr-12"} py-3 text-sm text-gray-900 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-300 rounded-3xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-sm ${glassClasses}`,
       style: INLINE_STYLES.input(theme === "dark"),
-      "data-testid": Components.ChatInput
+      "data-testid": ChatNames.input
     }
   ),
-  /* @__PURE__ */ jsx3(
+  voiceEnabled && onMicClick && !compact && (!inputValue.trim() || isListening) && /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick: onMicClick,
+      className: `absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full transition-all ${isListening ? "bg-red-500 text-white animate-pulse" : "text-gray-500 hover:text-blue-600 hover:bg-gray-100 dark:hover:bg-gray-700"}`,
+      title: isListening ? "Stop recording (ESC)" : `Voice input (click or press ${modKey}+/)`,
+      "data-testid": "voice-input-button",
+      children: isListening ? /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) })
+    }
+  ),
+  inputValue.trim() && /* @__PURE__ */ jsx3(
     "button",
     {
       type: "submit",
-      disabled: !inputValue.trim(),
       className: compact ? "px-3 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed transition-all text-xs font-medium shadow-md hover:shadow-lg" : THEME_CLASSES.input.sendButton,
-      "data-testid": Components.ChatSendButton,
+      "data-testid": ChatNames.sendButton,
       title: sendButtonLabel,
       children: compact ? "\u2192" : /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7m0 0l-7 7m7-7H3" }) })
     }
   )
 ] }) });
+
+// src/components/ChatBubble/Avatar.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
 var Avatar = ({ avatar, size = "normal" }) => {
   if (!avatar) return null;
   if (typeof avatar === "string") {
-    return size === "small" ? /* @__PURE__ */ jsx3("span", { className: "text-lg", children: avatar }) : /* @__PURE__ */ jsx3("div", { className: "w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx3("span", { className: "text-white text-sm font-bold", children: avatar }) });
+    return size === "small" ? /* @__PURE__ */ jsx4("span", { className: "text-lg", children: avatar }) : /* @__PURE__ */ jsx4("div", { className: "w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx4("span", { className: "text-white text-sm font-bold", children: avatar }) });
+  }
+  return /* @__PURE__ */ jsx4(Fragment, { children: avatar });
+};
+
+// src/components/ChatBubble/ChatBubble.tsx
+import React7, { useState as useState7, useRef as useRef6, useEffect as useEffect5, useMemo as useMemo2 } from "react";
+
+// src/components/MessageRenderer.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkDirective from "remark-directive";
+import rehypeKatex from "rehype-katex";
+
+// src/components/CodeBlock.tsx
+import React4, { useState as useState2 } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus, vs } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function CodeBlock({ children, className, inline, theme = "dark" }) {
+  const [copied, setCopied] = useState2(false);
+  const match = /language-(\w+)/.exec(className || "");
+  const language = match ? match[1] : "text";
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(children);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  if (inline) {
+    return /* @__PURE__ */ jsx5("code", { className: `${className || ""} px-1.5 py-0.5 rounded text-sm font-mono ${theme === "dark" ? "bg-gray-800 text-gray-200" : "bg-gray-100 text-gray-800"}`, children });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "relative group my-4", children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        onClick: handleCopy,
+        className: `absolute top-2 right-2 px-3 py-1.5 text-xs font-medium rounded transition-all ${theme === "dark" ? "bg-gray-700 hover:bg-gray-600 text-gray-200" : "bg-gray-200 hover:bg-gray-300 text-gray-700"} ${copied ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
+        "aria-label": "Copy code",
+        children: copied ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx5("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+          "Copied!"
+        ] }) : /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx5("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
+          "Copy"
+        ] })
+      }
+    ),
+    React4.createElement(SyntaxHighlighter, {
+      language,
+      style: theme === "dark" ? vscDarkPlus : vs,
+      customStyle: {
+        margin: 0,
+        borderRadius: "0.5rem",
+        fontSize: "0.875rem",
+        padding: "1rem"
+      },
+      showLineNumbers: true,
+      wrapLines: true,
+      children
+    })
+  ] });
+}
+
+// src/components/MermaidDiagram.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function MermaidDiagram({ chart, theme = "dark" }) {
+  const containerRef = useRef2(null);
+  const [error, setError] = useState3(null);
+  const [isLoading, setIsLoading] = useState3(true);
+  useEffect2(() => {
+    let mounted = true;
+    const renderDiagram = async () => {
+      if (!containerRef.current) return;
+      try {
+        setIsLoading(true);
+        setError(null);
+        const mermaid = (await import("mermaid")).default;
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: theme === "dark" ? "dark" : "default",
+          securityLevel: "loose",
+          fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
+        });
+        const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+        const { svg } = await mermaid.render(id, chart);
+        if (mounted && containerRef.current) {
+          containerRef.current.innerHTML = svg;
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (mounted) {
+          console.error("Mermaid rendering error:", err);
+          setError(err instanceof Error ? err.message : "Failed to render diagram");
+          setIsLoading(false);
+        }
+      }
+    };
+    renderDiagram();
+    return () => {
+      mounted = false;
+    };
+  }, [chart, theme]);
+  if (error) {
+    return /* @__PURE__ */ jsxs3("div", { className: `my-4 p-4 rounded-lg border ${theme === "dark" ? "bg-red-900/20 border-red-500 text-red-200" : "bg-red-50 border-red-300 text-red-800"}`, children: [
+      /* @__PURE__ */ jsx6("div", { className: "font-semibold mb-1", children: "Mermaid Diagram Error" }),
+      /* @__PURE__ */ jsx6("div", { className: "text-sm opacity-90", children: error }),
+      /* @__PURE__ */ jsxs3("details", { className: "mt-2 text-xs opacity-75", children: [
+        /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer", children: "View diagram source" }),
+        /* @__PURE__ */ jsx6("pre", { className: "mt-2 whitespace-pre-wrap", children: chart })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "my-4 flex justify-center", children: [
+    isLoading && /* @__PURE__ */ jsx6("div", { className: `py-8 text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-600"}`, children: "Rendering diagram..." }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref: containerRef,
+        className: `mermaid-diagram ${isLoading ? "hidden" : ""} ${theme === "dark" ? "mermaid-dark" : "mermaid-light"}`
+      }
+    )
+  ] });
+}
+
+// src/components/MessageRenderer.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function MessageRenderer({ content, theme = "dark" }) {
+  const components = {
+    // Code blocks with syntax highlighting
+    code(props) {
+      const { node, className, children, ...rest } = props;
+      const value = String(children).replace(/\n$/, "");
+      const match = /language-(\w+)/.exec(className || "");
+      const language = match ? match[1] : "";
+      const inline = !className;
+      if (language === "mermaid") {
+        return /* @__PURE__ */ jsx7(MermaidDiagram, { chart: value, theme });
+      }
+      return /* @__PURE__ */ jsx7(
+        CodeBlock,
+        {
+          className,
+          inline,
+          theme,
+          children: value
+        }
+      );
+    },
+    // Headings with better styling
+    h1: ({ children }) => /* @__PURE__ */ jsx7("h1", { className: `text-2xl font-bold mt-6 mb-3 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
+    h2: ({ children }) => /* @__PURE__ */ jsx7("h2", { className: `text-xl font-bold mt-5 mb-2.5 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
+    h3: ({ children }) => /* @__PURE__ */ jsx7("h3", { className: `text-lg font-semibold mt-4 mb-2 ${theme === "dark" ? "text-gray-200" : "text-gray-800"}`, children }),
+    // Paragraphs
+    p: ({ children }) => /* @__PURE__ */ jsx7("p", { className: `mb-3 leading-relaxed ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    // Links
+    a: ({ href, children }) => /* @__PURE__ */ jsx7(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: `underline transition-colors ${theme === "dark" ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-700"}`,
+        children
+      }
+    ),
+    // Lists
+    ul: ({ children }) => /* @__PURE__ */ jsx7("ul", { className: `list-disc list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    ol: ({ children }) => /* @__PURE__ */ jsx7("ol", { className: `list-decimal list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    // Blockquotes
+    blockquote: ({ children }) => /* @__PURE__ */ jsx7("blockquote", { className: `border-l-4 pl-4 my-3 italic ${theme === "dark" ? "border-blue-500 bg-blue-900/20 py-2 pr-2" : "border-blue-400 bg-blue-50 py-2 pr-2"}`, children }),
+    // Tables
+    table: ({ children }) => /* @__PURE__ */ jsx7("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx7("table", { className: `min-w-full border-collapse ${theme === "dark" ? "border-gray-700" : "border-gray-300"}`, children }) }),
+    thead: ({ children }) => /* @__PURE__ */ jsx7("thead", { className: theme === "dark" ? "bg-gray-800" : "bg-gray-100", children }),
+    th: ({ children }) => /* @__PURE__ */ jsx7("th", { className: `px-4 py-2 text-left font-semibold border ${theme === "dark" ? "border-gray-700 text-gray-200" : "border-gray-300 text-gray-800"}`, children }),
+    td: ({ children }) => /* @__PURE__ */ jsx7("td", { className: `px-4 py-2 border ${theme === "dark" ? "border-gray-700 text-gray-300" : "border-gray-300 text-gray-700"}`, children }),
+    // Horizontal rule
+    hr: () => /* @__PURE__ */ jsx7("hr", { className: `my-4 border-t ${theme === "dark" ? "border-gray-700" : "border-gray-300"}` }),
+    // Admonitions support (using containerDirective from remark-directive)
+    div: ({ node, className, children, ...props }) => {
+      if (className?.includes("admonition")) {
+        const type = className.split("-")[1];
+        const styles = {
+          tip: {
+            border: theme === "dark" ? "border-green-500" : "border-green-600",
+            bg: theme === "dark" ? "bg-green-900/20" : "bg-green-50",
+            icon: "\u{1F4A1}"
+          },
+          warning: {
+            border: theme === "dark" ? "border-yellow-500" : "border-yellow-600",
+            bg: theme === "dark" ? "bg-yellow-900/20" : "bg-yellow-50",
+            icon: "\u26A0\uFE0F"
+          },
+          danger: {
+            border: theme === "dark" ? "border-red-500" : "border-red-600",
+            bg: theme === "dark" ? "bg-red-900/20" : "bg-red-50",
+            icon: "\u{1F6A8}"
+          },
+          info: {
+            border: theme === "dark" ? "border-blue-500" : "border-blue-600",
+            bg: theme === "dark" ? "bg-blue-900/20" : "bg-blue-50",
+            icon: "\u2139\uFE0F"
+          }
+        };
+        const style = styles[type] || styles.info;
+        return /* @__PURE__ */ jsx7("div", { className: `my-4 p-4 border-l-4 rounded-r-lg ${style.border} ${style.bg}`, children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx7("span", { className: "text-lg flex-shrink-0", children: style.icon }),
+          /* @__PURE__ */ jsx7("div", { className: "flex-1", children })
+        ] }) });
+      }
+      return /* @__PURE__ */ jsx7("div", { className, ...props, children });
+    }
+  };
+  return /* @__PURE__ */ jsx7("div", { className: "markdown-content", children: /* @__PURE__ */ jsx7(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm, remarkMath, remarkDirective],
+      rehypePlugins: [rehypeKatex],
+      components,
+      children: content
+    }
+  ) });
+}
+
+// src/hooks/useTTS.ts
+import { useState as useState4, useRef as useRef3, useCallback as useCallback3 } from "react";
+var Platform = {
+  isNative: typeof window !== "undefined" && "Capacitor" in window,
+  isWeb: typeof window !== "undefined" && !("Capacitor" in window)
+};
+function isNativeTTSSupported() {
+  if (Platform.isNative) {
+    return true;
+  }
+  if (Platform.isWeb && "speechSynthesis" in window) {
+    return true;
+  }
+  return false;
+}
+function useTTS() {
+  const [isPlaying, setIsPlaying] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [currentText, setCurrentText] = useState4(null);
+  const audioRef = useRef3(null);
+  const utteranceRef = useRef3(null);
+  const isNativeSupported = isNativeTTSSupported();
+  const speakNative = useCallback3(
+    async (text, options = {}) => {
+      if (Platform.isNative) {
+        try {
+          const { TextToSpeech } = await import("@capacitor/text-to-speech");
+          await TextToSpeech.speak({
+            text,
+            lang: "en-US",
+            rate: options.speed || 1
+          });
+        } catch (err) {
+          throw new Error("Capacitor TTS failed: " + err.message);
+        }
+        return;
+      }
+      if ("speechSynthesis" in window) {
+        return new Promise((resolve, reject) => {
+          const utterance = new SpeechSynthesisUtterance(text);
+          utterance.rate = options.speed || 1;
+          if (options.voice) {
+            const voices = window.speechSynthesis.getVoices();
+            const voice = voices.find(
+              (v) => v.name.toLowerCase().includes(options.voice.toLowerCase())
+            );
+            if (voice) utterance.voice = voice;
+          }
+          utterance.onend = () => {
+            utteranceRef.current = null;
+            resolve();
+          };
+          utterance.onerror = (e) => {
+            utteranceRef.current = null;
+            reject(new Error("SpeechSynthesis error: " + e.error));
+          };
+          utteranceRef.current = utterance;
+          window.speechSynthesis.speak(utterance);
+        });
+      }
+      throw new Error("Native TTS not supported on this platform");
+    },
+    []
+  );
+  const speakAPI = useCallback3(
+    async (text, options = {}) => {
+      const apiUrl = process.env.NEXT_PUBLIC_TTS_API_URL || "https://tts.supernal.ai";
+      const apiKey = process.env.NEXT_PUBLIC_TTS_API_KEY || "";
+      if (!apiKey && !apiUrl.includes("localhost")) {
+        throw new Error("TTS_API_KEY not configured for premium voices");
+      }
+      const response = await fetch(`${apiUrl}/api/v1/generate`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...apiKey && { "X-API-Key": apiKey }
+        },
+        body: JSON.stringify({
+          text,
+          options: {
+            provider: "openai",
+            voice: options.voice || "alloy",
+            speed: 1
+            // Always generate at 1.0x, adjust playback client-side
+          }
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`TTS API failed: ${response.status} ${response.statusText}`);
+      }
+      const contentType = response.headers.get("content-type") || "";
+      let audioUrl;
+      if (contentType.includes("audio")) {
+        const blob = await response.blob();
+        audioUrl = URL.createObjectURL(blob);
+      } else {
+        const data = await response.json();
+        if (data.audio) {
+          const blob = base64ToBlob(data.audio, "audio/mpeg");
+          audioUrl = URL.createObjectURL(blob);
+        } else if (data.audioUrl) {
+          audioUrl = data.audioUrl;
+        } else {
+          throw new Error("Invalid TTS API response format");
+        }
+      }
+      const audio = new Audio(audioUrl);
+      audio.playbackRate = options.speed || 1;
+      return new Promise((resolve, reject) => {
+        audio.onended = () => {
+          URL.revokeObjectURL(audioUrl);
+          audioRef.current = null;
+          resolve();
+        };
+        audio.onerror = () => {
+          URL.revokeObjectURL(audioUrl);
+          audioRef.current = null;
+          reject(new Error("Audio playback failed"));
+        };
+        audioRef.current = audio;
+        audio.play().catch(reject);
+      });
+    },
+    []
+  );
+  const speak = useCallback3(
+    async (options) => {
+      const {
+        text,
+        voice,
+        speed = 1,
+        preferNative = true,
+        usePremium = false,
+        onComplete,
+        onError
+      } = options;
+      stop();
+      setIsPlaying(true);
+      setError(null);
+      setCurrentText(text);
+      try {
+        if (preferNative && !usePremium && isNativeSupported) {
+          await speakNative(text, { voice, speed });
+        } else {
+          await speakAPI(text, { voice, speed });
+        }
+        onComplete?.();
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : "Unknown TTS error";
+        setError(errorMsg);
+        if (usePremium && isNativeSupported) {
+          try {
+            console.warn("Premium TTS failed, falling back to native");
+            await speakNative(text, { voice, speed });
+            onComplete?.();
+            setError(null);
+          } catch (fallbackErr) {
+            onError?.(fallbackErr);
+          }
+        } else {
+          onError?.(err);
+        }
+      } finally {
+        setIsPlaying(false);
+        setCurrentText(null);
+      }
+    },
+    [speakNative, speakAPI, isNativeSupported]
+  );
+  const stop = useCallback3(() => {
+    if ("speechSynthesis" in window && window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel();
+      utteranceRef.current = null;
+    }
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+      audioRef.current = null;
+    }
+    setIsPlaying(false);
+    setCurrentText(null);
+  }, []);
+  return {
+    speak,
+    stop,
+    isPlaying,
+    error,
+    isNativeSupported,
+    currentText
+  };
+}
+function base64ToBlob(base64, mimeType) {
+  const byteCharacters = atob(base64);
+  const byteNumbers = new Array(byteCharacters.length);
+  for (let i = 0; i < byteCharacters.length; i++) {
+    byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  const byteArray = new Uint8Array(byteNumbers);
+  return new Blob([byteArray], { type: mimeType });
+}
+
+// src/hooks/useSTT.ts
+import { useState as useState5, useRef as useRef4, useCallback as useCallback4, useMemo, useEffect as useEffect3 } from "react";
+var Platform2 = {
+  isNative: typeof window !== "undefined" && "Capacitor" in window,
+  isWeb: typeof window !== "undefined" && !("Capacitor" in window)
+};
+function useSTT() {
+  const [isListening, setIsListening] = useState5(false);
+  const [transcript, setTranscript] = useState5("");
+  const [interimTranscript, setInterimTranscript] = useState5("");
+  const [error, setError] = useState5(null);
+  const recognitionRef = useRef4(null);
+  const isSupported = useMemo(() => {
+    if (Platform2.isNative) {
+      return true;
+    }
+    if (Platform2.isWeb) {
+      return "SpeechRecognition" in window || "webkitSpeechRecognition" in window;
+    }
+    return false;
+  }, []);
+  useEffect3(() => {
+    if (!isSupported || Platform2.isNative) return;
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) return;
+    const recognition = new SpeechRecognition();
+    recognition.continuous = false;
+    recognition.interimResults = true;
+    recognition.lang = "en-US";
+    recognition.maxAlternatives = 1;
+    recognition.onresult = (event) => {
+      let interim = "";
+      let final = "";
+      for (let i = 0; i < event.results.length; i++) {
+        const result = event.results[i];
+        if (result.isFinal) {
+          final += result[0].transcript;
+        } else {
+          interim += result[0].transcript;
+        }
+      }
+      if (final) setTranscript(final);
+      setInterimTranscript(interim);
+    };
+    recognition.onerror = (event) => {
+      console.error("Speech recognition error:", event.error);
+      setError(event.error);
+      setIsListening(false);
+    };
+    recognition.onend = () => {
+      setIsListening(false);
+    };
+    recognitionRef.current = recognition;
+    return () => {
+      if (recognition) {
+        recognition.stop();
+      }
+    };
+  }, [isSupported]);
+  const startListening = useCallback4(async () => {
+    setError(null);
+    setTranscript("");
+    setInterimTranscript("");
+    setIsListening(true);
+    try {
+      if (Platform2.isNative) {
+        const { SpeechRecognition: CapSpeech } = await import("@capacitor-community/speech-recognition");
+        await CapSpeech.requestPermissions();
+        const { matches } = await CapSpeech.start({
+          language: "en-US",
+          maxResults: 1,
+          popup: false
+        });
+        setTranscript(matches[0] || "");
+        setIsListening(false);
+        return;
+      }
+      if (recognitionRef.current) {
+        recognitionRef.current.start();
+      } else {
+        throw new Error("Speech recognition not initialized");
+      }
+    } catch (err) {
+      console.error("Failed to start speech recognition:", err);
+      setError(err instanceof Error ? err.message : "Failed to start microphone");
+      setIsListening(false);
+    }
+  }, []);
+  const stopListening = useCallback4(() => {
+    if (Platform2.isNative) {
+      setIsListening(false);
+      return;
+    }
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+    }
+  }, []);
+  const resetTranscript = useCallback4(() => {
+    setTranscript("");
+    setInterimTranscript("");
+    setError(null);
+  }, []);
+  return {
+    startListening,
+    stopListening,
+    resetTranscript,
+    isListening,
+    transcript,
+    interimTranscript,
+    error,
+    isSupported
+  };
+}
+
+// src/components/TTSButton.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function TTSButton({
+  text,
+  usePremiumVoices = false,
+  speed = 1,
+  size = "small",
+  theme = "light"
+}) {
+  const { speak, stop, isPlaying, error, isNativeSupported } = useTTS();
+  const handleClick = async (e) => {
+    e.stopPropagation();
+    if (isPlaying) {
+      stop();
+    } else {
+      await speak({
+        text,
+        speed,
+        usePremium: usePremiumVoices,
+        preferNative: !usePremiumVoices
+      });
+    }
+  };
+  if (!isNativeSupported && !usePremiumVoices) {
+    return null;
   }
-  return /* @__PURE__ */ jsx3(Fragment, { children: avatar });
+  const isDark = theme === "dark";
+  const iconSize = size === "small" ? "w-3 h-3" : "w-4 h-4";
+  const buttonPadding = size === "small" ? "p-1" : "p-2";
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      onClick: handleClick,
+      className: `${buttonPadding} rounded-lg transition-all ${isPlaying ? "bg-blue-500 text-white animate-pulse" : error ? "bg-red-500 text-white" : isDark ? "text-gray-400 hover:text-blue-400 hover:bg-gray-700/50" : "text-gray-500 hover:text-blue-600 hover:bg-gray-100/50"}`,
+      title: isPlaying ? "Stop speaking" : "Read aloud",
+      "data-testid": "tts-button",
+      "aria-label": isPlaying ? "Stop speaking" : "Read aloud",
+      children: isPlaying ? (
+        // Stop icon (pulsing square)
+        /* @__PURE__ */ jsx8("svg", { className: iconSize, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) })
+      ) : error ? (
+        // Error icon
+        /* @__PURE__ */ jsx8("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+      ) : (
+        // Speaker icon
+        /* @__PURE__ */ jsx8("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.414a2 2 0 002.828 0l1.768-1.768a2 2 0 00 0-2.828l-1.768-1.768a2 2 0 00-2.828 0V15.414z" }) })
+      )
+    }
+  );
+}
+
+// src/components/SubtitleOverlay.tsx
+import { useState as useState6, useEffect as useEffect4, useRef as useRef5 } from "react";
+
+// src/components/TTSPlaylistMenu.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var TTSPlaylistMenu = ({
+  isOpen,
+  onClose,
+  widgets,
+  theme,
+  onWidgetSelect
+}) => {
+  if (!isOpen || widgets.length === 0) return null;
+  const handleWidgetClick = (widget) => {
+    onWidgetSelect(widget);
+  };
+  const glassStyles = theme === "dark" ? {
+    background: "rgba(31, 41, 55, 0.9)",
+    border: "1px solid rgba(255, 255, 255, 0.12)",
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)"
+  } : {
+    background: "rgba(255, 255, 255, 0.9)",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)"
+  };
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: "fixed z-50",
+      style: {
+        bottom: "calc(env(safe-area-inset-bottom, 0px) + 80px)",
+        left: "16px",
+        maxHeight: "50vh",
+        width: "min(90vw, 400px)"
+      },
+      "data-testid": "tts-playlist-menu",
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          style: {
+            ...glassStyles,
+            backdropFilter: "blur(20px) saturate(180%)",
+            WebkitBackdropFilter: "blur(20px) saturate(180%)",
+            borderRadius: "16px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: `p-4 border-b flex items-center justify-between ${theme === "dark" ? "border-white/10" : "border-black/10"}`,
+                children: [
+                  /* @__PURE__ */ jsx9(
+                    "h3",
+                    {
+                      className: `font-semibold text-sm ${theme === "dark" ? "text-white" : "text-gray-900"}`,
+                      children: "Readable Sections"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      onClick: onClose,
+                      className: `p-1.5 rounded-lg transition-all ${theme === "dark" ? "text-gray-400 hover:text-white hover:bg-white/10" : "text-gray-600 hover:text-gray-900 hover:bg-black/5"}`,
+                      title: "Close",
+                      "data-testid": "close-playlist-menu",
+                      children: /* @__PURE__ */ jsx9("span", { className: "text-lg font-bold", "aria-hidden": "true", children: "\xD7" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx9("div", { className: "overflow-y-auto max-h-80 p-2", children: widgets.length === 0 ? /* @__PURE__ */ jsx9(
+              "div",
+              {
+                className: `p-6 text-center text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-600"}`,
+                children: "No readable sections found on this page"
+              }
+            ) : widgets.map((widget) => /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: () => handleWidgetClick(widget),
+                className: `w-full text-left p-3 rounded-lg transition-all ${theme === "dark" ? "hover:bg-white/10" : "hover:bg-black/5"}`,
+                style: {
+                  backdropFilter: "blur(8px)",
+                  WebkitBackdropFilter: "blur(8px)"
+                },
+                "data-testid": "playlist-widget-item",
+                children: /* @__PURE__ */ jsxs5(
+                  "div",
+                  {
+                    className: `font-medium text-sm flex items-center ${theme === "dark" ? "text-white" : "text-gray-900"}`,
+                    children: [
+                      /* @__PURE__ */ jsx9("span", { className: "mr-2", "aria-hidden": "true", children: "\u{1F50A}" }),
+                      widget.label || `TTS Widget ${widget.id}`
+                    ]
+                  }
+                )
+              },
+              widget.id
+            )) })
+          ]
+        }
+      )
+    }
+  );
 };
+
+// src/utils/pageContentParser.ts
+var GENERIC_SUGGESTIONS = [
+  { text: "Try: navigate to...", type: "generic" },
+  { text: "Ask: what can I do here?", type: "generic" },
+  { text: "Show me around", type: "generic" },
+  { text: "What's on this page?", type: "generic" }
+];
+function extractPageSpecificSuggestions() {
+  if (typeof window === "undefined") return [];
+  const headings = document.querySelectorAll("h1, h2, h3");
+  const suggestions = [];
+  Array.from(headings).slice(0, 3).forEach((heading) => {
+    const text = heading.textContent?.trim();
+    if (text && text.length > 0 && text.length < 50) {
+      suggestions.push({
+        text: `Ask about: ${text}`,
+        type: "page-specific"
+      });
+    }
+  });
+  return suggestions;
+}
+function extractPageSuggestions(maxSuggestions = 7, genericRatio = 0.4) {
+  const pageSpecific = extractPageSpecificSuggestions();
+  const numGeneric = Math.ceil(maxSuggestions * genericRatio);
+  const numPageSpecific = maxSuggestions - numGeneric;
+  const suggestions = [
+    ...GENERIC_SUGGESTIONS.slice(0, numGeneric),
+    ...pageSpecific.slice(0, numPageSpecific)
+  ];
+  return suggestions;
+}
+
+// src/utils/backgroundDetection.ts
+function calculateLuminance(rgbColor) {
+  const rgb = rgbColor.match(/\d+/g)?.map(Number);
+  if (!rgb || rgb.length < 3) {
+    console.warn("Invalid RGB color format, defaulting to 0.5 luminance");
+    return 0.5;
+  }
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  return 0.299 * r + 0.587 * g + 0.114 * b;
+}
+function sampleBackgroundColor(x, y) {
+  if (typeof window === "undefined") return null;
+  const element = document.elementFromPoint(x, y);
+  if (!element) return null;
+  return getComputedStyle(element).backgroundColor;
+}
+function detectBackgroundContext() {
+  if (typeof window === "undefined") {
+    return {
+      pageTheme: "light",
+      glassTheme: "dark",
+      luminance: 0.5
+    };
+  }
+  const explicitTheme = document.documentElement.getAttribute("data-theme");
+  const overlayY = window.innerHeight - 100;
+  const overlayX = window.innerWidth / 2;
+  const bgColor = sampleBackgroundColor(overlayX, overlayY);
+  const luminance = bgColor ? calculateLuminance(bgColor) : 0.5;
+  const sampledTheme = luminance > 0.5 ? "light" : "dark";
+  const pageTheme = explicitTheme === "dark" || explicitTheme === "light" ? explicitTheme : sampledTheme;
+  const glassTheme = sampledTheme === "light" ? "dark" : "light";
+  return {
+    pageTheme,
+    glassTheme,
+    luminance
+  };
+}
+
+// src/utils/ttsDetection.ts
+function detectTTSWidgets() {
+  if (typeof window === "undefined") return false;
+  const widgetWrappers = document.querySelectorAll(".supernal-tts-widget[data-text]");
+  console.log("[TTS Detection] Found widget wrappers:", widgetWrappers.length);
+  if (widgetWrappers.length > 0) {
+    console.log("[TTS Detection] Wrapper visible?", widgetWrappers[0].offsetParent !== null);
+    console.log("[TTS Detection] Has play button?", !!widgetWrappers[0].querySelector(".supernal-tts-play"));
+  }
+  return widgetWrappers.length > 0;
+}
+function extractWidgetLabel(element, fallbackIndex) {
+  const ariaLabel = element.getAttribute("aria-label");
+  if (ariaLabel && ariaLabel.trim()) return ariaLabel.trim();
+  const dataLabel = element.getAttribute("data-label");
+  if (dataLabel && dataLabel.trim()) return dataLabel.trim();
+  const parent = element.closest("section, article, div, p");
+  if (parent) {
+    const heading = parent.querySelector("h1, h2, h3, h4, h5, h6");
+    if (heading?.textContent?.trim()) {
+      return heading.textContent.trim();
+    }
+    let sibling = parent.previousElementSibling;
+    while (sibling) {
+      if (sibling.matches("h1, h2, h3, h4, h5, h6")) {
+        return sibling.textContent?.trim() || `Readable Section ${fallbackIndex}`;
+      }
+      sibling = sibling.previousElementSibling;
+    }
+  }
+  const parentSection = element.closest("section, article");
+  if (parentSection) {
+    const sectionHeading = parentSection.querySelector("h1, h2, h3, h4, h5, h6");
+    if (sectionHeading?.textContent?.trim()) {
+      return sectionHeading.textContent.trim();
+    }
+  }
+  if (parent?.textContent) {
+    const text = parent.textContent.trim().slice(0, 50);
+    if (text.length > 10) return text;
+  }
+  return `Readable Section ${fallbackIndex}`;
+}
+function extractTTSWidgets() {
+  if (typeof window === "undefined") return [];
+  const widgets = [];
+  const ttsWidgets = document.querySelectorAll(".supernal-tts-widget[data-text]");
+  ttsWidgets.forEach((wrapper, idx) => {
+    const element = wrapper;
+    if (element.offsetParent === null) {
+      console.log("[TTS Extract] Skipping hidden widget:", wrapper);
+      return;
+    }
+    const label = extractWidgetLabel(wrapper, widgets.length + 1);
+    const playButton = element.querySelector(".supernal-tts-play");
+    const widgetId = `tts-widget-${idx}`;
+    if (!element.hasAttribute("data-testid")) {
+      element.setAttribute("data-testid", widgetId);
+    }
+    if (playButton && !playButton.hasAttribute("data-testid")) {
+      playButton.setAttribute("data-testid", `${widgetId}-play`);
+    }
+    console.log("[TTS Extract] Widget:", {
+      id: widgetId,
+      label,
+      hasButton: !!playButton,
+      wrapper: element,
+      playButton,
+      testId: element.getAttribute("data-testid")
+    });
+    widgets.push({
+      id: widgetId,
+      element: wrapper,
+      // Always use wrapper as the element to scroll to
+      label
+    });
+  });
+  console.log("[TTS Extract] Total widgets found:", widgets.length);
+  return widgets;
+}
+
+// src/components/SubtitleOverlay.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var opacityStates = {
+  mobile: {
+    idle: 1,
+    // Always full opacity
+    listening: 1,
+    typing: 1,
+    speaking: 1
+  },
+  desktop: {
+    idle: 0.4,
+    // Increased from 0.1 for better visibility
+    listening: 0.7,
+    typing: 0.9,
+    speaking: 0.5
+  }
+};
+function detectMode(context) {
+  if (context.isListening) return "voice";
+  if (context.inputValue.trim().length > 0) return "text";
+  if (context.lastInputMethod && context.timeSinceLastInput < 1e4) {
+    return context.lastInputMethod;
+  }
+  return "voice";
+}
+var getOverlayOpacity = (state, isMobile) => {
+  return isMobile ? opacityStates.mobile[state] : opacityStates.desktop[state];
+};
+var SubtitleOverlay = ({
+  messages,
+  inputValue,
+  onInputChange,
+  onSendMessage,
+  voiceEnabled,
+  isListening,
+  onMicClick,
+  theme,
+  config,
+  sttTranscript,
+  resetTranscript
+}) => {
+  const [overlayState, setOverlayState] = useState6("idle");
+  const [opacity, setOpacity] = useState6(1);
+  const [lastInputMethod, setLastInputMethod] = useState6(null);
+  const [isMobile, setIsMobile] = useState6(false);
+  const [messageOpacity, setMessageOpacity] = useState6(1);
+  const [expansionState, setExpansionState] = useState6("collapsed");
+  const [touchStartY, setTouchStartY] = useState6(null);
+  const lastInputTimeRef = useRef5(Date.now());
+  const autoFadeTimerRef = useRef5(null);
+  const messageFadeTimerRef = useRef5(null);
+  const inputRef = useRef5(null);
+  const [suggestions, setSuggestions] = useState6([]);
+  const [currentSuggestionIndex, setCurrentSuggestionIndex] = useState6(0);
+  const [glassTheme, setGlassTheme] = useState6("auto");
+  const [detectedGlassTheme, setDetectedGlassTheme] = useState6("light");
+  const [hasTTSWidgets, setHasTTSWidgets] = useState6(false);
+  const [showPlaylist, setShowPlaylist] = useState6(false);
+  const [ttsWidgets, setTTSWidgets] = useState6([]);
+  const [touchStartYInput, setTouchStartYInput] = useState6(null);
+  useEffect4(() => {
+    const checkMobile = () => {
+      const mobile = window.innerWidth < 768;
+      setIsMobile(mobile);
+      if (!mobile && expansionState === "collapsed") {
+        setExpansionState("expanded");
+      }
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  useEffect4(() => {
+    if (autoFadeTimerRef.current) {
+      clearTimeout(autoFadeTimerRef.current);
+      autoFadeTimerRef.current = null;
+    }
+    if (!isMobile && overlayState === "idle") {
+      autoFadeTimerRef.current = setTimeout(() => {
+        setOpacity(0.4);
+      }, 5e3);
+    }
+    return () => {
+      if (autoFadeTimerRef.current) {
+        clearTimeout(autoFadeTimerRef.current);
+      }
+    };
+  }, [overlayState, isMobile]);
+  useEffect4(() => {
+    if (messageFadeTimerRef.current) {
+      clearTimeout(messageFadeTimerRef.current);
+      messageFadeTimerRef.current = null;
+    }
+    setMessageOpacity(1);
+    messageFadeTimerRef.current = setTimeout(() => {
+      setMessageOpacity(0);
+    }, 8e3);
+    return () => {
+      if (messageFadeTimerRef.current) {
+        clearTimeout(messageFadeTimerRef.current);
+      }
+    };
+  }, [messages.filter((m) => m.type === "ai").slice(-1)[0]?.text]);
+  useEffect4(() => {
+    if (sttTranscript && voiceEnabled && resetTranscript) {
+      onSendMessage(sttTranscript);
+      resetTranscript();
+      setExpansionState("expanded");
+      setLastInputMethod("voice");
+      lastInputTimeRef.current = Date.now();
+    }
+  }, [sttTranscript, voiceEnabled, resetTranscript, onSendMessage]);
+  useEffect4(() => {
+    const pageSuggestions = extractPageSuggestions();
+    setSuggestions(pageSuggestions);
+  }, []);
+  useEffect4(() => {
+    const detectWidgets = () => {
+      const detected = detectTTSWidgets();
+      setHasTTSWidgets(detected);
+      if (detected) {
+        const widgets = extractTTSWidgets();
+        setTTSWidgets(widgets);
+      } else {
+        setTTSWidgets([]);
+      }
+    };
+    detectWidgets();
+    let timeoutId;
+    const observer = new MutationObserver(() => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(detectWidgets, 500);
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  useEffect4(() => {
+    if (glassTheme !== "auto") return;
+    const { glassTheme: detected } = detectBackgroundContext();
+    setDetectedGlassTheme(detected);
+    let lastDetection = Date.now();
+    const handleScroll = () => {
+      const now = Date.now();
+      if (now - lastDetection > 500) {
+        const { glassTheme: newDetected } = detectBackgroundContext();
+        setDetectedGlassTheme(newDetected);
+        lastDetection = now;
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [glassTheme]);
+  useEffect4(() => {
+    const handleGlobalKeyDown = (e) => {
+      if (e.key === "/" && expansionState === "collapsed" && !(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+        e.preventDefault();
+        setExpansionState("expanded");
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        if (expansionState === "collapsed") {
+          setExpansionState("expanded");
+        } else {
+          inputRef.current?.focus();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => window.removeEventListener("keydown", handleGlobalKeyDown);
+  }, [expansionState]);
+  useEffect4(() => {
+    if (expansionState === "expanded" && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+    }
+  }, [expansionState]);
+  useEffect4(() => {
+    const timeSinceLastInput = Date.now() - lastInputTimeRef.current;
+    const context = {
+      isListening,
+      inputValue,
+      lastInputMethod,
+      timeSinceLastInput
+    };
+    const detectedMode = detectMode(context);
+    if (isListening) {
+      setOverlayState("listening");
+      setOpacity(getOverlayOpacity("listening", isMobile));
+    } else if (inputValue.trim()) {
+      setOverlayState("typing");
+      setOpacity(getOverlayOpacity("typing", isMobile));
+    } else {
+      setOverlayState("idle");
+      if (isMobile) {
+        setOpacity(1);
+      }
+    }
+  }, [isListening, inputValue, lastInputMethod, isMobile]);
+  const handleInputChange = (value) => {
+    onInputChange(value);
+    setLastInputMethod("text");
+    lastInputTimeRef.current = Date.now();
+  };
+  const handleIconClick = () => {
+    if (expansionState === "collapsed") {
+      setExpansionState("expanded");
+      if (!isListening && voiceEnabled) {
+        onMicClick();
+        setLastInputMethod("voice");
+        lastInputTimeRef.current = Date.now();
+      }
+    } else {
+      onMicClick();
+      setLastInputMethod("voice");
+      lastInputTimeRef.current = Date.now();
+    }
+  };
+  const handleTouchStart = (e) => {
+    setTouchStartY(e.touches[0].clientY);
+  };
+  const handleTouchMove = (e) => {
+    if (touchStartY === null) return;
+    const touchY = e.touches[0].clientY;
+    const deltaY = touchY - touchStartY;
+    if (deltaY > 50 && expansionState === "expanded") {
+      setExpansionState("collapsed");
+      setTouchStartY(null);
+    }
+  };
+  const handleTouchEnd = () => {
+    setTouchStartY(null);
+  };
+  const handleSend = () => {
+    if (inputValue.trim()) {
+      onSendMessage(inputValue);
+      lastInputTimeRef.current = Date.now();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && inputValue.trim()) {
+      e.preventDefault();
+      handleSend();
+    }
+    if (e.key === "Escape" && isListening) {
+      onMicClick();
+    }
+  };
+  const handleSuggestionTap = () => {
+    if (suggestions.length > 0 && !inputValue.trim()) {
+      onInputChange(suggestions[currentSuggestionIndex].text);
+    }
+  };
+  const handleInputTouchStart = (e) => {
+    setTouchStartYInput(e.touches[0].clientY);
+  };
+  const handleInputTouchMove = (e) => {
+    if (touchStartYInput === null || inputValue.trim()) return;
+    const touchY = e.touches[0].clientY;
+    const deltaY = touchY - touchStartYInput;
+    if (deltaY < -30) {
+      setCurrentSuggestionIndex((prev) => (prev + 1) % suggestions.length);
+      setTouchStartYInput(null);
+    } else if (deltaY > 30) {
+      setCurrentSuggestionIndex((prev) => (prev - 1 + suggestions.length) % suggestions.length);
+      setTouchStartYInput(null);
+    }
+  };
+  const handleInputTouchEnd = () => {
+    setTouchStartYInput(null);
+  };
+  const handleWidgetSelect = (widget) => {
+    console.log("[SubtitleOverlay] Selecting widget:", widget);
+    const wrapper = widget.element.closest(".supernal-tts-widget") || widget.element;
+    const playButton = wrapper.querySelector(".supernal-tts-play");
+    const scrollTarget = playButton || wrapper;
+    console.log("[SubtitleOverlay] Scrolling to:", scrollTarget);
+    scrollTarget.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+      inline: "nearest"
+    });
+    setShowPlaylist(false);
+    setTimeout(() => {
+      if (playButton) {
+        console.log("[SubtitleOverlay] Clicking Supernal TTS play button:", playButton);
+        playButton.click();
+      } else {
+        console.warn("[SubtitleOverlay] No play button found in widget. Widget may not be initialized yet.");
+        console.warn("[SubtitleOverlay] Widget element:", wrapper);
+        console.warn("[SubtitleOverlay] Widget HTML:", wrapper.innerHTML.substring(0, 300));
+      }
+    }, 800);
+  };
+  const handleTTSPlaylistClick = () => {
+    if (ttsWidgets.length === 1) {
+      handleWidgetSelect(ttsWidgets[0]);
+    } else {
+      setShowPlaylist(!showPlaylist);
+    }
+  };
+  const effectiveGlassTheme = glassTheme === "auto" ? detectedGlassTheme : glassTheme;
+  const glassStyles = effectiveGlassTheme === "dark" ? GLASS_INVERTED.darkOnLight : GLASS_INVERTED.lightOnDark;
+  const lastAiMessage = messages.filter((m) => m.type === "ai").slice(-1)[0];
+  const getIcon = () => {
+    if (expansionState === "collapsed") return "@/";
+    if (isListening) return "~/";
+    return "</";
+  };
+  const getIconTitle = () => {
+    if (expansionState === "collapsed") return "Tap to open chat";
+    if (isListening) return "Tap to stop recording";
+    return "Tap to start voice input";
+  };
+  if (expansionState === "collapsed") {
+    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      hasTTSWidgets && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: handleTTSPlaylistClick,
+          className: `fixed p-3 rounded-full transition-all ${theme === "dark" ? "text-gray-400 hover:text-purple-400" : "text-gray-600 hover:text-purple-600"}`,
+          style: {
+            bottom: isMobile ? "calc(env(safe-area-inset-bottom, 0px) + 16px)" : "16px",
+            left: "16px",
+            zIndex: 55,
+            background: theme === "dark" ? "rgba(55, 65, 81, 0.7)" : "rgba(255, 255, 255, 0.7)",
+            backdropFilter: "blur(12px) saturate(180%)",
+            WebkitBackdropFilter: "blur(12px) saturate(180%)",
+            border: theme === "dark" ? "1px solid rgba(255, 255, 255, 0.12)" : "1px solid rgba(0, 0, 0, 0.1)",
+            boxShadow: theme === "dark" ? "0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1)" : "0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+          },
+          title: ttsWidgets.length === 1 ? "Go to readable section" : "View readable sections",
+          "data-testid": "tts-playlist-button",
+          "aria-label": ttsWidgets.length === 1 ? "Go to readable section" : "View readable sections",
+          children: /* @__PURE__ */ jsx10("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: "~+" })
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        TTSPlaylistMenu,
+        {
+          isOpen: showPlaylist,
+          onClose: () => setShowPlaylist(false),
+          widgets: ttsWidgets,
+          theme,
+          onWidgetSelect: handleWidgetSelect
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: "fixed",
+          style: {
+            bottom: isMobile ? "calc(env(safe-area-inset-bottom, 0px) + 16px)" : "16px",
+            right: "16px",
+            zIndex: 55
+          },
+          "data-testid": "subtitle-overlay-collapsed",
+          children: /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: handleIconClick,
+              className: `p-3 rounded-full transition-all ${theme === "dark" ? "text-gray-400 hover:text-blue-400" : "text-gray-600 hover:text-blue-600"}`,
+              style: {
+                background: theme === "dark" ? "rgba(55, 65, 81, 0.7)" : "rgba(255, 255, 255, 0.7)",
+                backdropFilter: "blur(12px) saturate(180%)",
+                WebkitBackdropFilter: "blur(12px) saturate(180%)",
+                border: theme === "dark" ? "1px solid rgba(255, 255, 255, 0.12)" : "1px solid rgba(0, 0, 0, 0.1)",
+                boxShadow: theme === "dark" ? "0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1)" : "0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+              },
+              title: getIconTitle(),
+              "data-testid": "voice-input-button",
+              "aria-label": getIconTitle(),
+              children: /* @__PURE__ */ jsx10("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: getIcon() })
+            }
+          )
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `fixed bottom-0 left-0 right-0 transition-all duration-300 ease-in-out`,
+      style: {
+        opacity,
+        bottom: isMobile ? "env(safe-area-inset-bottom, 0px)" : "0px",
+        zIndex: 55,
+        maxWidth: isMobile ? "100vw" : "650px",
+        marginLeft: isMobile ? "0" : "auto",
+        marginRight: isMobile ? "0" : "auto",
+        padding: isMobile ? "12px" : "16px"
+      },
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      "data-testid": "subtitle-overlay",
+      role: "complementary",
+      "aria-label": "Chat overlay",
+      children: [
+        lastAiMessage && messageOpacity > 0 && /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: `mb-2 px-4 py-2 text-sm rounded-2xl transition-opacity duration-1000 ease-out animate-popup-in ${theme === "dark" ? "text-white" : "text-gray-900"}`,
+            style: {
+              opacity: messageOpacity,
+              pointerEvents: messageOpacity === 0 ? "none" : "auto",
+              ...theme === "dark" ? GLASS_RESPONSE_BUBBLE.dark : GLASS_RESPONSE_BUBBLE.light,
+              animation: messageOpacity === 0 ? "popupFadeOut 0.5s forwards" : void 0
+            },
+            role: "status",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ jsx10("span", { className: "font-medium opacity-70", children: "AI:" }),
+              " ",
+              lastAiMessage.text
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center space-x-2", children: [
+          hasTTSWidgets && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: handleTTSPlaylistClick,
+              className: `p-2 rounded-full transition-all flex-shrink-0 ${theme === "dark" ? "text-gray-400 hover:text-purple-400" : "text-gray-600 hover:text-purple-600"}`,
+              style: {
+                background: theme === "dark" ? "rgba(55, 65, 81, 0.5)" : "rgba(243, 244, 246, 0.5)",
+                backdropFilter: "blur(8px)",
+                WebkitBackdropFilter: "blur(8px)",
+                border: theme === "dark" ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid rgba(0, 0, 0, 0.08)"
+              },
+              title: ttsWidgets.length === 1 ? "Go to readable section" : "View readable sections",
+              "data-testid": "tts-playlist-button-expanded",
+              "aria-label": ttsWidgets.length === 1 ? "Go to readable section" : "View readable sections",
+              children: /* @__PURE__ */ jsx10("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "~+" })
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: "flex-1 flex items-center space-x-2 px-4 py-2 rounded-3xl",
+              style: {
+                ...glassStyles,
+                border: effectiveGlassTheme === "dark" ? "1px solid rgba(255, 255, 255, 0.12)" : "1px solid rgba(0, 0, 0, 0.1)"
+              },
+              children: [
+                /* @__PURE__ */ jsx10(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    value: inputValue,
+                    onChange: (e) => handleInputChange(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    onTouchStart: handleInputTouchStart,
+                    onTouchMove: handleInputTouchMove,
+                    onTouchEnd: handleInputTouchEnd,
+                    onClick: handleSuggestionTap,
+                    placeholder: suggestions.length > 0 && !inputValue.trim() ? `${suggestions[currentSuggestionIndex].text} (tap to use, swipe \u2195 to change)` : config.placeholder || "Type or speak...",
+                    className: "flex-1 px-3 py-2 text-sm bg-transparent focus:outline-none placeholder:opacity-60",
+                    style: {
+                      color: effectiveGlassTheme === "dark" ? "rgba(255, 255, 255, 0.95)" : "rgba(0, 0, 0, 0.9)"
+                    },
+                    "data-testid": "chat-input",
+                    "aria-label": "Chat message input"
+                  }
+                ),
+                isListening && /* @__PURE__ */ jsx10("div", { className: "flex space-x-1 items-center", "aria-hidden": "true", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx10(
+                  "div",
+                  {
+                    className: "w-0.5 bg-red-500 rounded-full animate-pulse",
+                    style: {
+                      height: `${8 + Math.random() * 8}px`,
+                      animationDelay: `${i * 0.1}s`
+                    }
+                  },
+                  i
+                )) }),
+                inputValue.trim() && !isListening && /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleSend,
+                    className: "p-2 rounded-full text-white transition-all flex-shrink-0",
+                    style: {
+                      background: "linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.95))",
+                      backdropFilter: "blur(8px)",
+                      WebkitBackdropFilter: "blur(8px)",
+                      boxShadow: "0 0 12px rgba(59, 130, 246, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2)",
+                      border: "1px solid rgba(255, 255, 255, 0.2)"
+                    },
+                    title: "Send message",
+                    "data-testid": "send-button",
+                    "aria-label": "Send message",
+                    children: /* @__PURE__ */ jsx10("span", { className: "text-base select-none", "aria-hidden": "true", children: "\u2192" })
+                  }
+                ),
+                voiceEnabled && /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleIconClick,
+                    className: `p-2 rounded-full transition-all flex-shrink-0 ${isListening ? "text-white animate-pulse" : `${theme === "dark" ? "text-gray-400 hover:text-blue-400" : "text-gray-600 hover:text-blue-600"}`}`,
+                    style: isListening ? {
+                      background: "linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.9))",
+                      backdropFilter: "blur(8px)",
+                      WebkitBackdropFilter: "blur(8px)",
+                      boxShadow: "0 0 16px rgba(239, 68, 68, 0.5), 0 2px 6px rgba(0, 0, 0, 0.2)"
+                    } : {
+                      background: theme === "dark" ? "rgba(55, 65, 81, 0.5)" : "rgba(243, 244, 246, 0.5)",
+                      backdropFilter: "blur(8px)",
+                      WebkitBackdropFilter: "blur(8px)",
+                      border: theme === "dark" ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid rgba(0, 0, 0, 0.08)"
+                    },
+                    title: getIconTitle(),
+                    "data-testid": "voice-input-button",
+                    "aria-label": getIconTitle(),
+                    children: /* @__PURE__ */ jsx10("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: getIcon() })
+                  }
+                ),
+                /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setExpansionState("collapsed"),
+                    className: `p-2 rounded-full transition-all flex-shrink-0 ${theme === "dark" ? "text-gray-400 hover:text-red-400" : "text-gray-600 hover:text-red-600"}`,
+                    style: {
+                      background: theme === "dark" ? "rgba(55, 65, 81, 0.5)" : "rgba(243, 244, 246, 0.5)",
+                      backdropFilter: "blur(8px)",
+                      WebkitBackdropFilter: "blur(8px)",
+                      border: theme === "dark" ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid rgba(0, 0, 0, 0.08)"
+                    },
+                    title: "Collapse",
+                    "data-testid": "collapse-button",
+                    "aria-label": "Collapse overlay",
+                    children: /* @__PURE__ */ jsx10("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "\xD7" })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/ChatBubble/ChatBubble.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var ChatBubble = ({
   messages,
   onSendMessage,
@@ -585,27 +2013,78 @@ var ChatBubble = ({
   variant = "full",
   config: userConfig,
   defaultExpanded = true,
-  storageKey = "chat-bubble-state"
+  storageKey = "chat-bubble-state",
+  displayMode: propDisplayMode = "auto",
+  drawerSide: propDrawerSide = "right"
 }) => {
-  const config = { ...DEFAULT_CONFIG, ...userConfig };
-  const [isExpanded, setIsExpanded] = useState2(defaultExpanded);
-  const [isMinimized, setIsMinimized] = useState2(false);
-  const [inputValue, setInputValue] = useState2("");
-  const [lastReadMessageCount, setLastReadMessageCount] = useState2(0);
-  const [showWelcome, setShowWelcome] = useState2(
+  const mergedConfig = { ...DEFAULT_CONFIG, ...userConfig };
+  if (userConfig?.logo && !userConfig?.avatar) {
+    mergedConfig.avatar = /* @__PURE__ */ jsx11("img", { src: userConfig.logo, alt: "Supernal", className: "w-6 h-6" });
+  }
+  const config = mergedConfig;
+  const [isExpanded, setIsExpanded] = useState7(defaultExpanded);
+  const [isMinimized, setIsMinimized] = useState7(false);
+  const [inputValue, setInputValue] = useState7("");
+  const [lastReadMessageCount, setLastReadMessageCount] = useState7(0);
+  const [showWelcome, setShowWelcome] = useState7(
     config.welcome?.enabled && messages.length === 0
   );
-  const [showInfo, setShowInfo] = useState2(false);
-  const [isDragging, setIsDragging] = useState2(false);
-  const [isDocked, setIsDocked] = useState2(true);
-  const [panelPosition, setPanelPosition] = useState2({ x: 0, y: 0 });
-  const [theme, setTheme] = useState2("light");
-  const [showMoreMenu, setShowMoreMenu] = useState2(false);
-  const [, setTimestampTick] = useState2(0);
-  const messagesEndRef = useRef2(null);
-  const inputRef = useRef2(null);
-  const panelRef = useRef2(null);
-  const dragRef = useRef2(null);
+  const [isDragging, setIsDragging] = useState7(false);
+  const [dragInitiated, setDragInitiated] = useState7(false);
+  const [isDocked, setIsDocked] = useState7(true);
+  const [dockPosition, setDockPosition] = useState7(position);
+  const [panelPosition, setPanelPosition] = useState7({ x: 0, y: 0 });
+  const [theme, setTheme] = useState7("light");
+  const [showMoreMenu, setShowMoreMenu] = useState7(false);
+  const [, setTimestampTick] = useState7(0);
+  const [localGlassMode, setLocalGlassMode] = useState7(config.glassMode ?? true);
+  const [glassOpacity, setGlassOpacity] = useState7("medium");
+  const [notifications, setNotifications] = useState7(true);
+  const [voiceEnabled, setVoiceEnabled] = useState7(true);
+  const [usePremiumVoices, setUsePremiumVoices] = useState7(false);
+  const [autoReadResponses, setAutoReadResponses] = useState7(false);
+  const [ttsSpeed, setTtsSpeed] = useState7(1);
+  const [sttAutoRecordTimeout, setSttAutoRecordTimeout] = useState7(5e3);
+  const [sttAutoExecute, setSttAutoExecute] = useState7(true);
+  const sttAutoRecordTimeoutRef = useRef6(null);
+  const { speak: speakTTS, stop: stopTTS, isPlaying: isTTSPlaying } = useTTS();
+  const { startListening, stopListening, transcript: sttTranscript, isListening, resetTranscript } = useSTT();
+  const [displayMode, setDisplayMode] = useState7(propDisplayMode);
+  const [drawerSide, setDrawerSide] = useState7(propDrawerSide);
+  useEffect5(() => {
+    setDisplayMode(propDisplayMode);
+  }, [propDisplayMode]);
+  const [drawerOpen, setDrawerOpen] = useState7(false);
+  const [touchStart, setTouchStart] = useState7(null);
+  const [swipeProgress, setSwipeProgress] = useState7(0);
+  const [isMobile, setIsMobile] = useState7(false);
+  const [isMac, setIsMac] = useState7(false);
+  const [currentHintIndex, setCurrentHintIndex] = useState7(0);
+  const [isHydrated, setIsHydrated] = useState7(false);
+  useEffect5(() => {
+    if (typeof window !== "undefined") {
+      const platform = window.navigator.platform.toLowerCase();
+      const isMacPlatform = platform.includes("mac");
+      setIsMac(isMacPlatform);
+    }
+  }, []);
+  const inputHints = useMemo2(() => {
+    const modKey = isMac ? "Cmd" : "Ctrl";
+    return [
+      `Press ${modKey}+/ to start voice recording`,
+      "Press ESC to close this chat",
+      "Type your message or click the mic",
+      sttAutoExecute ? `Voice commands execute automatically` : "Voice commands fill this input"
+    ];
+  }, [isMac, sttAutoExecute]);
+  useEffect5(() => {
+    setCurrentHintIndex((prev) => (prev + 1) % inputHints.length);
+  }, [messages.length, inputHints.length]);
+  const messagesEndRef = useRef6(null);
+  const inputRef = useRef6(null);
+  const panelRef = useRef6(null);
+  const dragRef = useRef6(null);
+  const rafRef = useRef6(null);
   const formatRelativeTime = (timestamp) => {
     const now = /* @__PURE__ */ new Date();
     const messageTime = new Date(timestamp);
@@ -620,48 +2099,178 @@ var ChatBubble = ({
     if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`;
     return messageTime.toLocaleDateString();
   };
-  useEffect2(() => {
+  useEffect5(() => {
     if (variant === "full") {
       try {
         const stored = localStorage.getItem(storageKey);
         if (stored !== null) {
           const state = JSON.parse(stored);
-          setIsExpanded(state.isExpanded ?? defaultExpanded);
-          setIsMinimized(state.isMinimized ?? false);
-          setIsDocked(state.isDocked ?? true);
-          setPanelPosition(state.panelPosition || { x: 0, y: 0 });
-          setTheme(state.theme || "light");
+          const windowWidth = typeof window !== "undefined" ? window.innerWidth : 1920;
+          const windowHeight = typeof window !== "undefined" ? window.innerHeight : 1080;
+          const pos = state.panelPosition || { x: 0, y: 0 };
+          const isInvalidPosition = Math.abs(pos.x) > windowWidth * 2 || Math.abs(pos.y) > windowHeight * 2;
+          if (isInvalidPosition) {
+            console.warn("ChatBubble: Invalid stored position detected, resetting to docked");
+            setIsExpanded(defaultExpanded);
+            setIsMinimized(false);
+            setIsDocked(true);
+            setDockPosition(position);
+            setPanelPosition({ x: 0, y: 0 });
+            setTheme(state.theme || "light");
+            if (state.localGlassMode !== void 0) {
+              setLocalGlassMode(state.localGlassMode);
+            }
+            if (state.glassOpacity !== void 0) {
+              setGlassOpacity(state.glassOpacity);
+            }
+            if (state.notifications !== void 0) {
+              setNotifications(state.notifications);
+            }
+          } else {
+            setIsExpanded(state.isExpanded ?? defaultExpanded);
+            setIsMinimized(state.isMinimized ?? false);
+            setIsDocked(state.isDocked ?? true);
+            setDockPosition(state.dockPosition || position);
+            setPanelPosition(pos);
+            setTheme(state.theme || "light");
+            if (state.localGlassMode !== void 0) {
+              setLocalGlassMode(state.localGlassMode);
+            }
+            if (state.notifications !== void 0) {
+              setNotifications(state.notifications);
+            }
+            if (state.displayMode !== void 0) {
+              setDisplayMode(state.displayMode);
+            }
+            if (state.drawerSide !== void 0) {
+              setDrawerSide(state.drawerSide);
+            }
+            if (state.drawerOpen !== void 0) {
+              setDrawerOpen(state.drawerOpen);
+            }
+            if (state.glassOpacity !== void 0) {
+              setGlassOpacity(state.glassOpacity);
+            }
+            if (state.voiceEnabled !== void 0) {
+              setVoiceEnabled(state.voiceEnabled);
+            }
+            if (state.usePremiumVoices !== void 0) {
+              setUsePremiumVoices(state.usePremiumVoices);
+            }
+            if (state.autoReadResponses !== void 0) {
+              setAutoReadResponses(state.autoReadResponses);
+            }
+            if (state.ttsSpeed !== void 0) {
+              setTtsSpeed(state.ttsSpeed);
+            }
+            if (state.sttAutoRecordTimeout !== void 0) {
+              setSttAutoRecordTimeout(state.sttAutoRecordTimeout);
+            }
+            if (state.sttAutoExecute !== void 0) {
+              setSttAutoExecute(state.sttAutoExecute);
+            }
+          }
         }
       } catch {
       }
     }
-  }, [storageKey, variant, defaultExpanded]);
-  useEffect2(() => {
+    setIsHydrated(true);
+  }, [storageKey, variant, defaultExpanded, position]);
+  useEffect5(() => {
+    if (variant !== "full") {
+      setIsHydrated(true);
+    }
+  }, [variant]);
+  useEffect5(() => {
+    if (!isExpanded || isDocked || !panelRef.current) return;
+    const checkBounds = () => {
+      const rect = panelRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      const isOffScreen = rect.right < 0 || rect.left > windowWidth || rect.bottom < 0 || rect.top > windowHeight;
+      if (isOffScreen) {
+        console.warn("ChatBubble detected off-screen, resetting to docked position");
+        setIsDocked(true);
+        setPanelPosition({ x: 0, y: 0 });
+      }
+    };
+    const timeoutId = setTimeout(checkBounds, 100);
+    return () => clearTimeout(timeoutId);
+  }, [isExpanded, isDocked]);
+  useEffect5(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isExpanded && !isDocked) {
+        console.log("ChatBubble reset via Escape key");
+        setIsDocked(true);
+        setDockPosition(position);
+        setPanelPosition({ x: 0, y: 0 });
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isExpanded, isDocked, position]);
+  useEffect5(() => {
     if (typeof window !== "undefined") {
       const isDark = document.documentElement.getAttribute("data-theme") === "dark";
       setTheme(isDark ? "dark" : "light");
     }
   }, []);
-  useEffect2(() => {
+  useEffect5(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 767px)");
+    const handleChange = (e) => {
+      setIsMobile(e.matches);
+    };
+    handleChange(mediaQuery);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const currentVariant = React7.useMemo(() => {
+    if (displayMode !== "auto") {
+      return displayMode;
+    }
+    return isMobile ? "drawer" : variant;
+  }, [displayMode, isMobile, variant]);
+  useEffect5(() => {
     const interval = setInterval(() => {
       setTimestampTick((tick) => tick + 1);
     }, 6e4);
     return () => clearInterval(interval);
   }, []);
-  useEffect2(() => {
-    if (variant === "full") {
+  useEffect5(() => {
+    if (variant === "full" || variant === "drawer") {
       try {
         localStorage.setItem(
           storageKey,
-          JSON.stringify({ isExpanded, isMinimized, isDocked, panelPosition, theme })
+          JSON.stringify({
+            isExpanded,
+            isMinimized,
+            isDocked,
+            dockPosition,
+            panelPosition,
+            theme,
+            localGlassMode,
+            notifications,
+            displayMode,
+            drawerSide,
+            drawerOpen,
+            glassOpacity,
+            voiceEnabled,
+            usePremiumVoices,
+            autoReadResponses,
+            ttsSpeed,
+            sttAutoRecordTimeout,
+            sttAutoExecute
+          })
         );
       } catch (error) {
         console.error("Failed to save chat state:", error);
       }
     }
-  }, [isExpanded, isMinimized, isDocked, panelPosition, theme, storageKey, variant]);
+  }, [isExpanded, isMinimized, isDocked, dockPosition, panelPosition, theme, localGlassMode, notifications, displayMode, drawerSide, drawerOpen, glassOpacity, voiceEnabled, usePremiumVoices, autoReadResponses, ttsSpeed, sttAutoRecordTimeout, sttAutoExecute, storageKey, variant]);
   const { registerInput } = useChatInput();
-  useEffect2(() => {
+  useEffect5(() => {
     registerInput((text, submit = false) => {
       setInputValue(text);
       if (!isExpanded && variant === "full") {
@@ -678,7 +2287,7 @@ var ChatBubble = ({
   }, [registerInput, onSendMessage]);
   const unreadCount = Math.max(0, messages.length - lastReadMessageCount);
   const hasUnread = unreadCount > 0 && !isExpanded && variant === "full";
-  useEffect2(() => {
+  useEffect5(() => {
     if (isExpanded || variant === "floating") {
       messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
       setLastReadMessageCount(messages.length);
@@ -690,15 +2299,67 @@ var ChatBubble = ({
       }
     }
   }, [messages, isExpanded, variant]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (isExpanded && variant === "full") {
       inputRef.current?.focus();
     }
   }, [isExpanded, variant]);
-  useEffect2(() => {
+  useEffect5(() => {
+    if (!voiceEnabled || !autoReadResponses || messages.length === 0) return;
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.type === "ai") {
+      speakTTS({
+        text: lastMessage.text,
+        speed: ttsSpeed,
+        usePremium: usePremiumVoices,
+        preferNative: !usePremiumVoices
+      });
+    }
+  }, [messages, voiceEnabled, autoReadResponses, ttsSpeed, usePremiumVoices, speakTTS]);
+  useEffect5(() => {
+    if (sttTranscript && voiceEnabled) {
+      setInputValue(sttTranscript);
+      resetTranscript();
+      if (sttAutoExecute && sttAutoRecordTimeoutRef.current) {
+        onSendMessage(sttTranscript);
+        setInputValue("");
+      }
+      if (sttAutoRecordTimeoutRef.current) {
+        clearTimeout(sttAutoRecordTimeoutRef.current);
+        sttAutoRecordTimeoutRef.current = null;
+      }
+    }
+  }, [sttTranscript, voiceEnabled, resetTranscript, sttAutoExecute, onSendMessage]);
+  useEffect5(() => {
     const handleKeyDown = (e) => {
       if (variant !== "full") return;
-      if (e.key === "/" && !isExpanded) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "/" && voiceEnabled) {
+        e.preventDefault();
+        const wasExpanded = isExpanded;
+        if (!isExpanded) {
+          setIsExpanded(true);
+        }
+        if (!isListening) {
+          const startRecording = async () => {
+            try {
+              await startListening();
+              sttAutoRecordTimeoutRef.current = setTimeout(() => {
+                stopListening();
+                sttAutoRecordTimeoutRef.current = null;
+              }, sttAutoRecordTimeout);
+            } catch (error) {
+              console.error("[ChatBubble] Failed to start recording:", error);
+            }
+          };
+          if (wasExpanded) {
+            startRecording();
+          } else {
+            setTimeout(startRecording, 300);
+          }
+        }
+        return;
+      }
+      if (e.key === "/" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !isExpanded) {
         const target = e.target;
         if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
           e.preventDefault();
@@ -707,26 +2368,37 @@ var ChatBubble = ({
         }
       }
       if (e.key === "Escape") {
+        if (sttAutoRecordTimeoutRef.current) {
+          clearTimeout(sttAutoRecordTimeoutRef.current);
+          sttAutoRecordTimeoutRef.current = null;
+          stopListening();
+        }
         if (showMoreMenu) {
           setShowMoreMenu(false);
-        } else if (showInfo) {
-          setShowInfo(false);
         } else if (isExpanded) {
           setIsExpanded(false);
         }
       }
-      if ((e.metaKey || e.ctrlKey) && e.key === "/") {
-        e.preventDefault();
-        if (!isExpanded) {
-          setIsExpanded(true);
-        }
-        inputRef.current?.focus();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      if (sttAutoRecordTimeoutRef.current) {
+        clearTimeout(sttAutoRecordTimeoutRef.current);
+      }
+    };
+  }, [isExpanded, showMoreMenu, variant, voiceEnabled, isListening, startListening, stopListening, sttAutoRecordTimeout]);
+  useEffect5(() => {
+    if (currentVariant !== "drawer") return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && drawerOpen) {
+        setDrawerOpen(false);
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isExpanded, showInfo, showMoreMenu, variant]);
-  useEffect2(() => {
+  }, [currentVariant, drawerOpen]);
+  useEffect5(() => {
     if (!showMoreMenu) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -737,6 +2409,59 @@ var ChatBubble = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showMoreMenu]);
+  useEffect5(() => {
+    if (typeof window === "undefined" || currentVariant !== "drawer") return;
+    const EDGE_ZONE_PX = 20;
+    const SWIPE_THRESHOLD = 0.4;
+    const VELOCITY_THRESHOLD = 0.5;
+    const handleTouchStart = (e) => {
+      const touch = e.touches[0];
+      const isRightEdge = touch.clientX > window.innerWidth - EDGE_ZONE_PX;
+      const isLeftEdge = touch.clientX < EDGE_ZONE_PX;
+      if (drawerSide === "right" && isRightEdge || drawerSide === "left" && isLeftEdge) {
+        setTouchStart({
+          x: touch.clientX,
+          y: touch.clientY,
+          time: Date.now()
+        });
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (!touchStart || drawerOpen) return;
+      const touch = e.touches[0];
+      const deltaX = touch.clientX - touchStart.x;
+      const deltaY = Math.abs(touch.clientY - touchStart.y);
+      if (deltaY > 10 && Math.abs(deltaX) < deltaY) {
+        setTouchStart(null);
+        return;
+      }
+      const screenWidth = window.innerWidth;
+      const direction = drawerSide === "right" ? -1 : 1;
+      const progress = Math.max(0, Math.min(100, deltaX * direction / screenWidth * 100));
+      setSwipeProgress(progress);
+      if (Math.abs(deltaX) > 10) {
+        e.preventDefault();
+      }
+    };
+    const handleTouchEnd = () => {
+      if (!touchStart) return;
+      const deltaTime = Date.now() - touchStart.time;
+      const velocity = swipeProgress / deltaTime;
+      if (swipeProgress > SWIPE_THRESHOLD * 100 || velocity > VELOCITY_THRESHOLD) {
+        setDrawerOpen(true);
+      }
+      setTouchStart(null);
+      setSwipeProgress(0);
+    };
+    window.addEventListener("touchstart", handleTouchStart, { passive: true });
+    window.addEventListener("touchmove", handleTouchMove, { passive: false });
+    window.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      window.removeEventListener("touchstart", handleTouchStart);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [touchStart, swipeProgress, drawerOpen, drawerSide, currentVariant]);
   const handlePanelMouseDown = (e) => {
     if (variant !== "full" || !isExpanded) return;
     const target = e.target;
@@ -745,56 +2470,105 @@ var ChatBubble = ({
       return;
     }
     e.preventDefault();
-    setIsDragging(true);
+    setDragInitiated(true);
     const rect = panelRef.current?.getBoundingClientRect();
     if (!rect) return;
-    const currentCenterX = rect.left + rect.width / 2;
-    const currentCenterY = rect.top + rect.height / 2;
-    const viewportCenterX = window.innerWidth / 2;
-    const viewportCenterY = window.innerHeight / 2;
-    const targetX = currentCenterX - viewportCenterX;
-    const targetY = currentCenterY - viewportCenterY;
-    setIsDocked(false);
-    setPanelPosition({ x: targetX, y: targetY });
-    dragRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      initialX: targetX,
-      initialY: targetY
-    };
+    if (isDocked) {
+      const currentCenterX = rect.left + rect.width / 2;
+      const currentCenterY = rect.top + rect.height / 2;
+      const viewportCenterX = window.innerWidth / 2;
+      const viewportCenterY = window.innerHeight / 2;
+      const targetX = currentCenterX - viewportCenterX;
+      const targetY = currentCenterY - viewportCenterY;
+      setPanelPosition({ x: targetX, y: targetY });
+      dragRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        initialX: targetX,
+        initialY: targetY,
+        thresholdMet: false
+      };
+    } else {
+      dragRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        initialX: panelPosition.x,
+        initialY: panelPosition.y,
+        thresholdMet: false
+      };
+    }
   };
-  useEffect2(() => {
-    if (!isDragging || !dragRef.current) return;
+  useEffect5(() => {
+    if (!dragInitiated || !dragRef.current) return;
+    const dragThresholdPx = 5;
     const handleMouseMove = (e) => {
       if (!dragRef.current) return;
       const deltaX = e.clientX - dragRef.current.startX;
       const deltaY = e.clientY - dragRef.current.startY;
-      setPanelPosition({
-        x: dragRef.current.initialX + deltaX,
-        y: dragRef.current.initialY + deltaY
+      const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
+      if (!dragRef.current.thresholdMet && distance < dragThresholdPx) {
+        return;
+      }
+      if (!dragRef.current.thresholdMet) {
+        dragRef.current.thresholdMet = true;
+        setIsDragging(true);
+        setIsDocked(false);
+      }
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(() => {
+        setPanelPosition({
+          x: dragRef.current.initialX + deltaX,
+          y: dragRef.current.initialY + deltaY
+        });
       });
     };
     const handleMouseUp = () => {
-      setIsDragging(false);
-      dragRef.current = null;
-      if (panelRef.current) {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      if (dragRef.current?.thresholdMet && panelRef.current) {
         const rect = panelRef.current.getBoundingClientRect();
-        const threshold = 50;
+        const threshold = 20;
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
-        if (rect.right > windowWidth - threshold || rect.left < threshold || rect.top < threshold || rect.bottom > windowHeight - threshold) {
+        const distanceToRight = windowWidth - rect.right;
+        const distanceToLeft = rect.left;
+        const distanceToTop = rect.top;
+        const distanceToBottom = windowHeight - rect.bottom;
+        const minDistance = Math.min(distanceToRight, distanceToLeft, distanceToTop, distanceToBottom);
+        if (minDistance < threshold) {
+          let newDockPosition;
+          if (minDistance === distanceToRight) {
+            newDockPosition = rect.top < windowHeight / 3 ? "top-right" : rect.bottom > windowHeight * 2 / 3 ? "bottom-right" : "right-center";
+          } else if (minDistance === distanceToLeft) {
+            newDockPosition = rect.top < windowHeight / 3 ? "top-left" : rect.bottom > windowHeight * 2 / 3 ? "bottom-left" : "left-center";
+          } else if (minDistance === distanceToTop) {
+            newDockPosition = rect.left < windowWidth / 3 ? "top-left" : rect.right > windowWidth * 2 / 3 ? "top-right" : "top-right";
+          } else {
+            newDockPosition = rect.left < windowWidth / 3 ? "bottom-left" : rect.right > windowWidth * 2 / 3 ? "bottom-right" : "bottom-center";
+          }
+          setDockPosition(newDockPosition);
           setIsDocked(true);
           setPanelPosition({ x: 0, y: 0 });
         }
       }
+      setIsDragging(false);
+      setDragInitiated(false);
+      dragRef.current = null;
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
     };
-  }, [isDragging]);
+  }, [dragInitiated]);
   const handleSend = (e) => {
     e.preventDefault();
     if (!inputValue.trim()) return;
@@ -808,10 +2582,12 @@ var ChatBubble = ({
     setIsExpanded(!isExpanded);
   };
   const handleDock = () => {
+    setDockPosition(position);
     setIsDocked(true);
     setPanelPosition({ x: 0, y: 0 });
   };
   const handleHome = () => {
+    setDockPosition(position);
     setIsDocked(true);
     setPanelPosition({ x: 0, y: 0 });
     setIsMinimized(false);
@@ -822,56 +2598,287 @@ var ChatBubble = ({
       setShowWelcome(true);
     }
   };
-  const handleToggleTheme = () => {
-    const newTheme = theme === "light" ? "dark" : "light";
-    setTheme(newTheme);
-    if (typeof window !== "undefined") {
-      document.documentElement.setAttribute("data-theme", newTheme);
+  const handleMicClick = () => {
+    if (isListening) {
+      stopListening();
+    } else {
+      startListening();
+    }
+  };
+  const handleDrawerTouchStart = (e) => {
+    if (!drawerOpen) return;
+    const touch = e.touches[0];
+    setTouchStart({
+      x: touch.clientX,
+      y: touch.clientY,
+      time: Date.now()
+    });
+  };
+  const handleDrawerTouchMove = (e) => {
+    if (!touchStart || !drawerOpen) return;
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - touchStart.x;
+    const deltaY = Math.abs(touch.clientY - touchStart.y);
+    if (deltaY > 10 && Math.abs(deltaX) < deltaY) {
+      return;
     }
+    const screenWidth = window.innerWidth;
+    const direction = drawerSide === "right" ? 1 : -1;
+    const progress = Math.max(0, Math.min(100, deltaX * direction / screenWidth * 100));
+    setSwipeProgress(progress);
   };
-  const dockClasses = DOCK_POSITIONS[position];
+  const handleDrawerTouchEnd = () => {
+    if (!touchStart) return;
+    const SWIPE_THRESHOLD = 0.4;
+    if (swipeProgress > SWIPE_THRESHOLD * 100) {
+      setDrawerOpen(false);
+    }
+    setTouchStart(null);
+    setSwipeProgress(0);
+  };
+  const dockClasses = DOCK_POSITIONS[dockPosition];
   const primaryColor = config.theme?.primary || "blue";
-  const glassMode = config.glassMode ?? true;
+  const glassMode = localGlassMode;
+  const glassClasses = glassMode ? glassOpacity === "low" ? "backdrop-blur-xl bg-white/90 dark:bg-gray-900/90 border border-white/20 dark:border-white/10" : glassOpacity === "high" ? "backdrop-blur-xl bg-white/50 dark:bg-gray-900/50 border border-white/20 dark:border-white/10" : "backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10" : "bg-white dark:bg-gray-900";
+  const glassGradient = glassMode ? glassOpacity === "low" ? "bg-gradient-to-br from-white/95 via-white/85 to-white/70 dark:from-gray-900/90 dark:via-gray-900/80 dark:to-gray-900/70" : glassOpacity === "high" ? "bg-gradient-to-br from-white/70 via-white/50 to-white/30 dark:from-gray-900/60 dark:via-gray-900/50 dark:to-gray-900/40" : "bg-gradient-to-br from-white/90 via-white/70 to-white/50 dark:from-gray-900/80 dark:via-gray-900/70 dark:to-gray-900/60" : "bg-white dark:bg-gray-900";
+  const getFloatingPositionStyle = () => {
+    if (dockPosition.includes("top") && dockPosition.includes("left")) {
+      return {
+        top: 0,
+        left: 0,
+        transform: `translate(${panelPosition.x}px, ${panelPosition.y}px)`
+      };
+    } else if (dockPosition.includes("top") && dockPosition.includes("right")) {
+      return {
+        top: 0,
+        right: 0,
+        transform: `translate(${-panelPosition.x}px, ${panelPosition.y}px)`
+      };
+    } else if (dockPosition.includes("bottom") && dockPosition.includes("left")) {
+      return {
+        bottom: 0,
+        left: 0,
+        transform: `translate(${panelPosition.x}px, ${-panelPosition.y}px)`
+      };
+    } else if (dockPosition.includes("bottom") && dockPosition.includes("right")) {
+      return {
+        bottom: 0,
+        right: 0,
+        transform: `translate(${-panelPosition.x}px, ${-panelPosition.y}px)`
+      };
+    } else if (dockPosition.includes("left-center")) {
+      return {
+        left: 0,
+        top: "50%",
+        transform: `translate(${panelPosition.x}px, calc(-50% + ${panelPosition.y}px))`
+      };
+    } else if (dockPosition.includes("right-center")) {
+      return {
+        right: 0,
+        top: "50%",
+        transform: `translate(${-panelPosition.x}px, calc(-50% + ${panelPosition.y}px))`
+      };
+    } else if (dockPosition.includes("bottom-center")) {
+      return {
+        bottom: 0,
+        left: "50%",
+        transform: `translate(calc(-50% + ${panelPosition.x}px), ${-panelPosition.y}px)`
+      };
+    } else {
+      return {
+        left: "50%",
+        top: "50%",
+        transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
+      };
+    }
+  };
   const maxHeightVh = 80;
   const dynamicHeight = `min(${maxHeightVh}vh, 700px)`;
   const panelWidth = "min(650px, calc(100vw - 2rem))";
+  const getDrawerTransform = () => {
+    if (touchStart && swipeProgress > 0) {
+      return drawerSide === "right" ? `translateX(${100 - swipeProgress}%)` : `translateX(${-100 + swipeProgress}%)`;
+    }
+    return drawerOpen ? "translateX(0%)" : drawerSide === "right" ? "translateX(100%)" : "translateX(-100%)";
+  };
+  if (!isHydrated) {
+    return null;
+  }
+  if (currentVariant === "subtitle") {
+    return /* @__PURE__ */ jsx11(
+      SubtitleOverlay,
+      {
+        messages,
+        inputValue,
+        onInputChange: setInputValue,
+        onSendMessage: () => {
+          const syntheticEvent = {
+            preventDefault: () => {
+            },
+            stopPropagation: () => {
+            }
+          };
+          handleSend(syntheticEvent);
+        },
+        voiceEnabled,
+        isListening,
+        onMicClick: handleMicClick,
+        theme,
+        config,
+        sttTranscript,
+        resetTranscript
+      }
+    );
+  }
+  if (currentVariant === "drawer") {
+    const drawerWidth = "100vw";
+    return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      (drawerOpen || swipeProgress > 0) && /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: "fixed inset-0 bg-black z-[99998] transition-opacity duration-300",
+          style: {
+            opacity: touchStart && swipeProgress > 0 ? swipeProgress / 100 * 0.5 : 0.5,
+            zIndex: 999998
+            // Force high z-index for overlay
+          },
+          onClick: () => setDrawerOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: `fixed ${drawerSide === "right" ? "right-0" : "left-0"} top-0 h-full z-[99999] flex flex-col ${glassClasses} shadow-2xl`,
+          style: {
+            width: drawerWidth,
+            transform: getDrawerTransform(),
+            transition: touchStart ? "none" : "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+            willChange: "transform",
+            zIndex: 999999
+            // Force extremely high z-index
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Chat drawer",
+          onTouchStart: handleDrawerTouchStart,
+          onTouchMove: handleDrawerTouchMove,
+          onTouchEnd: handleDrawerTouchEnd,
+          children: [
+            /* @__PURE__ */ jsxs7("div", { className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight}`, children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-3", children: [
+                config.avatar && /* @__PURE__ */ jsxs7("div", { className: "relative flex-shrink-0", children: [
+                  /* @__PURE__ */ jsx11(Avatar, { avatar: config.avatar }),
+                  /* @__PURE__ */ jsx11("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                ] }),
+                config.title && /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx11("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+              ] }),
+              /* @__PURE__ */ jsx11("button", { onClick: () => setDrawerOpen(false), className: THEME_CLASSES.button.close, title: "Close drawer", children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
+              showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs7("div", { className: THEME_CLASSES.welcome.container, children: [
+                config.welcome.title && /* @__PURE__ */ jsx11("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+                config.welcome.content && /* @__PURE__ */ jsx11("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content })
+              ] }),
+              messages.map((message) => /* @__PURE__ */ jsxs7("div", { className: `group flex items-center gap-1 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+                /* @__PURE__ */ jsx11(
+                  "div",
+                  {
+                    className: `inline-block px-4 py-2.5 rounded-2xl max-w-[95%] text-sm shadow-sm transition-all ${message.type === "user" ? THEME_CLASSES.message.user : message.type === "ai" ? THEME_CLASSES.message.ai : THEME_CLASSES.message.system}`,
+                    style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
+                    children: /* @__PURE__ */ jsx11(MessageRenderer, { content: message.text, theme })
+                  }
+                ),
+                message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx11(
+                  TTSButton,
+                  {
+                    text: message.text,
+                    usePremiumVoices,
+                    speed: ttsSpeed,
+                    theme,
+                    size: "small"
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  "div",
+                  {
+                    className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${message.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
+                    title: typeof window !== "undefined" ? new Date(message.timestamp).toLocaleString() : "",
+                    children: typeof window !== "undefined" ? formatRelativeTime(message.timestamp) : ""
+                  }
+                )
+              ] }, message.id)),
+              /* @__PURE__ */ jsx11("div", { ref: messagesEndRef })
+            ] }),
+            /* @__PURE__ */ jsx11(
+              InputField,
+              {
+                inputValue,
+                onInputChange: setInputValue,
+                onSubmit: handleSend,
+                placeholder: inputHints[currentHintIndex],
+                glassClasses: "",
+                theme,
+                inputRef,
+                sendButtonLabel: config.sendButtonLabel,
+                voiceEnabled,
+                isListening,
+                onMicClick: handleMicClick,
+                modKey: isMac ? "Cmd" : "Ctrl"
+              }
+            )
+          ]
+        }
+      ),
+      !drawerOpen && /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: `fixed ${drawerSide === "right" ? "right-0" : "left-0"} bottom-20 opacity-30 hover:opacity-90 transition-opacity duration-300 z-[99999] cursor-pointer`,
+          style: { zIndex: 999999 },
+          onClick: () => setDrawerOpen(true),
+          children: /* @__PURE__ */ jsx11("div", { className: `${glassMode ? "backdrop-blur-md bg-white/50 dark:bg-gray-800/50" : "bg-white dark:bg-gray-800"} text-gray-700 dark:text-gray-200 px-3 py-3 ${drawerSide === "right" ? "rounded-l-xl" : "rounded-r-xl"} shadow-md hover:shadow-lg flex items-center justify-center transition-all`, children: voiceEnabled ? /* @__PURE__ */ jsx11("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }) : /* @__PURE__ */ jsx11("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }) })
+        }
+      )
+    ] });
+  }
   if (variant === "floating") {
     const recentMessage = messages[messages.length - 1];
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
-        className: `fixed z-50 ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
+        className: `fixed z-[99999] ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
         style: {
           transform: `translate(${panelPosition.x}px, ${panelPosition.y}px)`,
+          zIndex: 999999,
+          // Force extremely high z-index
           ...!isDragging && { transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }
         },
         onMouseDown: handlePanelMouseDown,
-        children: /* @__PURE__ */ jsxs("div", { className: glassMode ? "backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10 rounded-2xl shadow-2xl p-3 max-w-xs" : "bg-white dark:bg-gray-900 border-gray-200 rounded-2xl shadow-2xl border p-3 max-w-xs", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar, size: "small" }),
-              config.title && /* @__PURE__ */ jsx3("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
+        children: /* @__PURE__ */ jsxs7("div", { className: `${glassClasses} rounded-2xl shadow-2xl p-3 max-w-xs ${!glassMode && "border-gray-200 border"}`, children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx11(Avatar, { avatar: config.avatar, size: "small" }),
+              config.title && /* @__PURE__ */ jsx11("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
             ] }),
-            onClearChat && /* @__PURE__ */ jsx3(
+            onClearChat && /* @__PURE__ */ jsx11(
               "button",
               {
                 onClick: onClearChat,
                 className: THEME_CLASSES.button.floatingClear,
                 title: "Clear chat",
                 "data-testid": ChatNames.clearButton,
-                children: /* @__PURE__ */ jsx3("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx11("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          recentMessage && /* @__PURE__ */ jsxs("div", { className: `mb-2 group flex items-center gap-2 ${recentMessage.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-            /* @__PURE__ */ jsx3(
+          recentMessage && /* @__PURE__ */ jsxs7("div", { className: `mb-2 group flex items-center gap-2 ${recentMessage.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+            /* @__PURE__ */ jsx11(
               "div",
               {
                 className: `text-xs px-3 py-2 rounded-xl transition-all ${recentMessage.type === "user" ? "bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg" : recentMessage.type === "ai" ? "bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-white shadow-md" : "bg-gradient-to-br from-yellow-100 to-yellow-200 text-yellow-900 shadow-md"}`,
                 children: recentMessage.text.length > 60 ? `${recentMessage.text.slice(0, 60)}...` : recentMessage.text
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx11(
               "div",
               {
                 className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${recentMessage.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
@@ -880,29 +2887,33 @@ var ChatBubble = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx11(
             InputField,
             {
               compact: true,
               inputValue,
               onInputChange: setInputValue,
               onSubmit: handleSend,
-              placeholder: config.placeholder,
+              placeholder: inputHints[currentHintIndex],
               glassClasses: "",
               theme,
-              sendButtonLabel: config.sendButtonLabel
+              sendButtonLabel: config.sendButtonLabel,
+              modKey: isMac ? "Cmd" : "Ctrl"
             }
           )
         ] })
       }
     );
   }
-  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx11(Fragment3, { children: /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: "fixed z-50",
+      className: "fixed",
       style: {
         ...dockClasses.container,
+        zIndex: 2147483647,
+        // Maximum z-index value
+        position: "fixed",
         ...isExpanded ? {
           width: panelWidth,
           height: isMinimized ? "auto" : dynamicHeight
@@ -912,107 +2923,247 @@ var ChatBubble = ({
         }
       },
       children: [
-        isExpanded && isMinimized && /* @__PURE__ */ jsxs(
+        isExpanded && isMinimized && /* @__PURE__ */ jsxs7(
           "div",
           {
-            className: glassMode ? "absolute backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10 rounded-3xl shadow-2xl p-4 transition-all duration-300" : "absolute bg-white dark:bg-gray-900 border-gray-200 rounded-3xl shadow-2xl border p-4 transition-all duration-300",
+            ref: panelRef,
+            className: `${isDocked ? "absolute" : "fixed z-[99999]"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 ${!isDragging && "backdrop-blur-xl"} flex flex-col overflow-hidden ${!isDragging && "transition-all duration-300"}`,
             style: {
-              ...dockClasses.panel,
               width: panelWidth,
-              maxWidth: "400px"
+              maxWidth: "400px",
+              zIndex: 999999,
+              // Force extremely high z-index
+              ...isDocked ? {
+                ...dockClasses.panel,
+                // Only clear transform if dock position doesn't use transform
+                ...dockClasses.panel.transform ? {} : { transform: "none" }
+              } : getFloatingPositionStyle(),
+              ...isDragging && { cursor: "grabbing" }
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-                  /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar, size: "small" }),
-                  config.title && /* @__PURE__ */ jsx3("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
-                ] }),
-                /* @__PURE__ */ jsx3(
-                  "button",
+              /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  "data-drag-handle": true,
+                  className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight} cursor-move`,
+                  onMouseDown: handlePanelMouseDown,
+                  onClick: (e) => {
+                    if (!dragRef.current?.thresholdMet) {
+                      const target = e.target;
+                      if (target.closest("button") || target.closest('[role="button"]')) {
+                        return;
+                      }
+                      setIsMinimized(false);
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-3", children: [
+                      config.avatar && /* @__PURE__ */ jsxs7("div", { className: "relative flex-shrink-0", children: [
+                        /* @__PURE__ */ jsx11(Avatar, { avatar: config.avatar }),
+                        /* @__PURE__ */ jsx11("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                      ] }),
+                      config.title && /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx11("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                    ] }),
+                    /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-1 flex-shrink-0", children: [
+                      /* @__PURE__ */ jsx11(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setIsMinimized(true);
+                          },
+                          className: THEME_CLASSES.button.minimize,
+                          title: "Minimize chat",
+                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx11(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setIsExpanded(false);
+                          },
+                          className: THEME_CLASSES.button.close,
+                          title: "Close chat",
+                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7("div", { className: "p-4", children: [
+                (() => {
+                  const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
+                  return lastAiMessage ? /* @__PURE__ */ jsx11("div", { className: "mb-3", children: /* @__PURE__ */ jsx11("div", { className: `text-xs px-3 py-2 rounded-xl ${THEME_CLASSES.message.ai}`, style: INLINE_STYLES.messageAI(theme === "dark"), children: lastAiMessage.text.length > 100 ? `${lastAiMessage.text.slice(0, 100)}...` : lastAiMessage.text }) }) : /* @__PURE__ */ jsx11("div", { className: "mb-3", children: /* @__PURE__ */ jsx11("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
+                })(),
+                /* @__PURE__ */ jsx11(
+                  InputField,
                   {
-                    onClick: () => setIsMinimized(false),
-                    className: "p-1 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200 transition-colors",
-                    title: "Expand chat",
-                    children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                    compact: true,
+                    inputValue,
+                    onInputChange: setInputValue,
+                    onSubmit: handleSend,
+                    placeholder: inputHints[currentHintIndex],
+                    glassClasses: "",
+                    theme,
+                    sendButtonLabel: config.sendButtonLabel,
+                    modKey: isMac ? "Cmd" : "Ctrl"
                   }
                 )
-              ] }),
-              (() => {
-                const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
-                return lastAiMessage ? /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsx3("div", { className: `text-xs px-3 py-2 rounded-xl ${THEME_CLASSES.message.ai}`, style: INLINE_STYLES.messageAI(theme === "dark"), children: lastAiMessage.text.length > 100 ? `${lastAiMessage.text.slice(0, 100)}...` : lastAiMessage.text }) }) : /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsx3("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
-              })(),
-              /* @__PURE__ */ jsx3(
-                InputField,
-                {
-                  compact: true,
-                  inputValue,
-                  onInputChange: setInputValue,
-                  onSubmit: handleSend,
-                  placeholder: config.placeholder,
-                  glassClasses: "",
-                  theme,
-                  sendButtonLabel: config.sendButtonLabel
-                }
-              )
+              ] })
             ]
           }
         ),
-        isExpanded && !isMinimized && /* @__PURE__ */ jsxs(
+        isExpanded && !isMinimized && /* @__PURE__ */ jsxs7(
           "div",
           {
             ref: panelRef,
-            className: `${isDocked ? "absolute" : "fixed"} ${glassMode ? "bg-gradient-to-br from-white/90 via-white/70 to-white/50 dark:from-gray-900/80 dark:via-gray-900/70 dark:to-gray-900/60" : "bg-white dark:bg-gray-900"} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 backdrop-blur-xl flex flex-col overflow-hidden transition-all duration-300`,
+            className: `${isDocked ? "absolute" : "fixed z-[99999]"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 ${!isDragging && "backdrop-blur-xl"} flex flex-col overflow-hidden ${!isDragging && "transition-all duration-300"}`,
             style: {
               width: panelWidth,
               height: dynamicHeight,
-              ...isDocked ? dockClasses.panel : {
-                left: "50%",
-                top: "50%",
-                transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
-              },
+              zIndex: 999999,
+              // Force extremely high z-index
+              ...isDocked ? {
+                ...dockClasses.panel,
+                // Only clear transform if dock position doesn't use transform
+                ...dockClasses.panel.transform ? {} : { transform: "none" }
+              } : getFloatingPositionStyle(),
               ...isDragging && { cursor: "grabbing" }
             },
             children: [
-              /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   "data-drag-handle": true,
                   className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight} cursor-move`,
                   onMouseDown: handlePanelMouseDown,
                   children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
-                      config.avatar && /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
-                        /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar }),
-                        /* @__PURE__ */ jsx3("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                    /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-3", children: [
+                      config.avatar && /* @__PURE__ */ jsxs7("div", { className: "relative flex-shrink-0", children: [
+                        /* @__PURE__ */ jsx11(Avatar, { avatar: config.avatar }),
+                        /* @__PURE__ */ jsx11("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                       ] }),
-                      config.title && /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx3("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                      config.title && /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx11("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
                     ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
-                      /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
+                      /* @__PURE__ */ jsx11(
+                        "a",
+                        {
+                          href: "https://www.interface.supernal.ai",
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: "p-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors rounded-lg hover:bg-white/30",
+                          title: "Visit Supernal Interface Documentation",
+                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx11(
                         "button",
                         {
                           onClick: () => setShowMoreMenu(!showMoreMenu),
                           className: THEME_CLASSES.button.more,
                           title: "More options",
-                          children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
+                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
                         }
                       ),
-                      showMoreMenu && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 z-[100] min-w-[160px]", "data-more-menu": true, children: [
-                        /* @__PURE__ */ jsxs(
+                      showMoreMenu && /* @__PURE__ */ jsxs7("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 min-w-[220px] z-50", "data-more-menu": true, children: [
+                        /* @__PURE__ */ jsx11("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", children: /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-4 gap-1", children: [
+                          /* @__PURE__ */ jsx11(
+                            "button",
+                            {
+                              onClick: () => setLocalGlassMode(false),
+                              className: `flex items-center justify-center p-2 rounded transition-all ${!localGlassMode ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
+                              title: "Glass Off",
+                              children: /* @__PURE__ */ jsx11("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx11(
+                            "button",
+                            {
+                              onClick: () => {
+                                setLocalGlassMode(true);
+                                setGlassOpacity("low");
+                              },
+                              className: `flex items-center justify-center p-2 rounded transition-all ${localGlassMode && glassOpacity === "low" ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
+                              title: "Glass Low",
+                              children: /* @__PURE__ */ jsx11("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", strokeWidth: "2" }) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx11(
+                            "button",
+                            {
+                              onClick: () => {
+                                setLocalGlassMode(true);
+                                setGlassOpacity("medium");
+                              },
+                              className: `flex items-center justify-center p-2 rounded transition-all ${localGlassMode && glassOpacity === "medium" ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
+                              title: "Glass Medium",
+                              children: /* @__PURE__ */ jsxs7("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                                /* @__PURE__ */ jsx11("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", strokeWidth: "2" }),
+                                /* @__PURE__ */ jsx11("rect", { x: "10", y: "10", width: "4", height: "4", rx: "0.5", strokeWidth: "1.5" })
+                              ] })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx11(
+                            "button",
+                            {
+                              onClick: () => {
+                                setLocalGlassMode(true);
+                                setGlassOpacity("high");
+                              },
+                              className: `flex items-center justify-center p-2 rounded transition-all ${localGlassMode && glassOpacity === "high" ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
+                              title: "Glass High",
+                              children: /* @__PURE__ */ jsxs7("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                                /* @__PURE__ */ jsx11("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1", strokeWidth: "2" }),
+                                /* @__PURE__ */ jsx11("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.5", strokeWidth: "1.5" }),
+                                /* @__PURE__ */ jsx11("rect", { x: "11", y: "11", width: "2", height: "2", rx: "0.5", strokeWidth: "1" })
+                              ] })
+                            }
+                          )
+                        ] }) }),
+                        /* @__PURE__ */ jsxs7(
                           "button",
                           {
                             onClick: () => {
-                              handleToggleTheme();
-                              setShowMoreMenu(false);
+                              const newTheme = theme === "light" ? "dark" : "light";
+                              setTheme(newTheme);
+                              if (typeof window !== "undefined") {
+                                document.documentElement.setAttribute("data-theme", newTheme);
+                              }
+                            },
+                            className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+                            children: [
+                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }),
+                              /* @__PURE__ */ jsxs7("span", { children: [
+                                theme === "light" ? "Dark" : "Light",
+                                " Mode"
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs7(
+                          "button",
+                          {
+                            onClick: () => {
+                              setVoiceEnabled(!voiceEnabled);
+                              if (!voiceEnabled) {
+                                onSendMessage("Voice control enabled! Use the microphone button to speak, or click speaker icons to hear messages.");
+                              }
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              theme === "light" ? /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }) : /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }),
-                              /* @__PURE__ */ jsx3("span", { children: theme === "light" ? "Dark mode" : "Light mode" })
+                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }),
+                              /* @__PURE__ */ jsxs7("span", { children: [
+                                voiceEnabled ? "Disable" : "Enable",
+                                " Voice"
+                              ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsxs(
+                        /* @__PURE__ */ jsxs7(
                           "button",
                           {
                             onClick: () => {
@@ -1021,26 +3172,33 @@ var ChatBubble = ({
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
-                              /* @__PURE__ */ jsx3("span", { children: "Reset position" })
+                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
+                              /* @__PURE__ */ jsx11("span", { children: "Reset position" })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsxs(
+                        /* @__PURE__ */ jsxs7(
                           "button",
                           {
                             onClick: () => {
-                              setShowInfo(!showInfo);
+                              const helpMessages = [
+                                '**How to Use This Chat**\n\n- **Theme**: Toggle between light and dark modes\n- **Glass Effect**: Adjust transparency (Off/Low/Medium/High)\n- **Reset Position**: Return chat to default corner\n- **Minimize**: Compact view showing last message\n- **Clear**: Delete all messages and start fresh\n- **Drag**: Click and drag header to reposition chat\n- **Keyboard**: Press "/" to focus input, Esc to reset position'
+                              ];
+                              helpMessages.forEach((text, index) => {
+                                setTimeout(() => {
+                                  onSendMessage(text);
+                                }, index * 100);
+                              });
                               setShowMoreMenu(false);
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-                              /* @__PURE__ */ jsx3("span", { children: "How to use" })
+                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                              /* @__PURE__ */ jsx11("span", { children: "How to use" })
                             ]
                           }
                         ),
-                        onClearChat && /* @__PURE__ */ jsxs(
+                        onClearChat && /* @__PURE__ */ jsxs7(
                           "button",
                           {
                             onClick: () => {
@@ -1049,77 +3207,41 @@ var ChatBubble = ({
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
-                              /* @__PURE__ */ jsx3("span", { children: "Clear chat" })
+                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+                              /* @__PURE__ */ jsx11("span", { children: "Clear chat" })
                             ]
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx11(
                         "button",
                         {
                           onClick: () => setIsMinimized(true),
                           className: THEME_CLASSES.button.minimize,
                           title: "Minimize",
-                          children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
                         }
                       ),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx11(
                         "button",
                         {
                           onClick: handleToggle,
                           className: THEME_CLASSES.button.close,
                           title: "Close",
-                          children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              showInfo && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.text.infoPopup, style: INLINE_STYLES.infoText(theme === "dark"), children: [
-                /* @__PURE__ */ jsx3("div", { className: "font-bold mb-2", children: "How to Use" }),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-xs", style: INLINE_STYLES.infoText(theme === "dark"), children: [
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    "\u2022 ",
-                    /* @__PURE__ */ jsx3("strong", { children: "Theme:" }),
-                    " Toggle between light and dark modes"
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    "\u2022 ",
-                    /* @__PURE__ */ jsx3("strong", { children: "Home:" }),
-                    " Reset chat position to default"
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    "\u2022 ",
-                    /* @__PURE__ */ jsx3("strong", { children: "Minimize:" }),
-                    " Compact view with last message"
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    "\u2022 ",
-                    /* @__PURE__ */ jsx3("strong", { children: "Clear:" }),
-                    " Delete all messages and start fresh"
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    "\u2022 ",
-                    /* @__PURE__ */ jsx3("strong", { children: "Drag:" }),
-                    " Click and drag header to reposition"
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    "\u2022 ",
-                    /* @__PURE__ */ jsx3("strong", { children: "Keyboard:" }),
-                    ' Press "/" to open, Esc to close'
-                  ] })
-                ] }),
-                config.description && /* @__PURE__ */ jsx3("div", { className: "mt-3 pt-3 border-t border-gray-300/30 dark:border-gray-600/30", children: config.description })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
-                showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.container, children: [
-                  config.welcome.title && /* @__PURE__ */ jsx3("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
-                  config.welcome.content && /* @__PURE__ */ jsx3("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
-                  config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
-                    /* @__PURE__ */ jsx3("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
-                    /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs7("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
+                showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs7("div", { className: THEME_CLASSES.welcome.container, children: [
+                  config.welcome.title && /* @__PURE__ */ jsx11("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+                  config.welcome.content && /* @__PURE__ */ jsx11("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
+                  config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ jsxs7("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
+                    /* @__PURE__ */ jsx11("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
+                    /* @__PURE__ */ jsx11("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs7(
                       "button",
                       {
                         onClick: () => {
@@ -1129,29 +3251,39 @@ var ChatBubble = ({
                         },
                         className: THEME_CLASSES.welcome.commandButton,
                         children: [
-                          /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
+                          /* @__PURE__ */ jsxs7("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
                             '"',
                             cmd.text,
                             '"'
                           ] }),
-                          cmd.desc && /* @__PURE__ */ jsx3("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
+                          cmd.desc && /* @__PURE__ */ jsx11("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
                         ]
                       },
                       idx
                     )) })
                   ] })
                 ] }),
-                messages.map((message) => /* @__PURE__ */ jsxs("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-                  /* @__PURE__ */ jsx3(
+                messages.map((message) => /* @__PURE__ */ jsxs7("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+                  /* @__PURE__ */ jsx11(
                     "div",
                     {
                       className: `inline-block px-4 py-2.5 rounded-2xl max-w-[80%] text-sm shadow-sm transition-all ${message.type === "user" ? THEME_CLASSES.message.user : message.type === "ai" ? THEME_CLASSES.message.ai : THEME_CLASSES.message.system}`,
                       style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
                       "data-testid": `chat-message-${message.type}`,
-                      children: /* @__PURE__ */ jsx3("div", { className: "break-words leading-relaxed", children: message.text })
+                      children: /* @__PURE__ */ jsx11(MessageRenderer, { content: message.text, theme })
+                    }
+                  ),
+                  message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx11(
+                    TTSButton,
+                    {
+                      text: message.text,
+                      usePremiumVoices,
+                      speed: ttsSpeed,
+                      theme,
+                      size: "small"
                     }
                   ),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx11(
                     "div",
                     {
                       className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${message.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
@@ -1160,34 +3292,38 @@ var ChatBubble = ({
                     }
                   )
                 ] }, message.id)),
-                /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+                /* @__PURE__ */ jsx11("div", { ref: messagesEndRef })
               ] }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx11(
                 InputField,
                 {
                   inputValue,
                   onInputChange: setInputValue,
                   onSubmit: handleSend,
-                  placeholder: config.placeholder,
+                  placeholder: inputHints[currentHintIndex],
                   glassClasses: "",
                   theme,
                   inputRef,
-                  sendButtonLabel: config.sendButtonLabel
+                  sendButtonLabel: config.sendButtonLabel,
+                  voiceEnabled,
+                  isListening,
+                  onMicClick: handleMicClick,
+                  modKey: isMac ? "Cmd" : "Ctrl"
                 }
               )
             ]
           }
         ),
-        !isExpanded && /* @__PURE__ */ jsxs(
+        !isExpanded && /* @__PURE__ */ jsxs7(
           "button",
           {
             onClick: handleToggle,
             className: THEME_CLASSES.bg.bubble,
             "data-testid": ChatNames.bubble,
-            title: "Open chat",
+            title: `Open chat (press ${isMac ? "Cmd" : "Ctrl"}+/ for voice recording)`,
             children: [
-              /* @__PURE__ */ jsx3("img", { src: "/logo.svg", alt: "Supernal", className: "w-8 h-8" }),
-              hasUnread && /* @__PURE__ */ jsx3("div", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse shadow-lg", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
+              /* @__PURE__ */ jsx11("img", { src: config.logo, alt: "Supernal", className: "w-8 h-8" }),
+              hasUnread && notifications && /* @__PURE__ */ jsx11("div", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse shadow-lg", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx11("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
             ]
           }
         )
@@ -1197,24 +3333,24 @@ var ChatBubble = ({
 };
 
 // src/components/AutoNavigationContext.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 
 // src/hooks/useNavigationGraph.tsx
-import { useEffect as useEffect3, useState as useState3, useCallback as useCallback3, createContext as createContext3, useContext as useContext3 } from "react";
+import { useEffect as useEffect6, useState as useState8, useCallback as useCallback5, createContext as createContext3, useContext as useContext3 } from "react";
 import {
   NavigationGraph
 } from "@supernal/interface/browser";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var NavigationContextContext = createContext3("global");
 function NavigationContextProvider({
   value,
   children
 }) {
   const graph = useNavigationGraph();
-  useEffect3(() => {
+  useEffect6(() => {
     graph.setCurrentContext(value);
   }, [value, graph]);
-  return /* @__PURE__ */ jsx4(NavigationContextContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx12(NavigationContextContext.Provider, { value, children });
 }
 function useNavigationGraph() {
   return NavigationGraph.getInstance();
@@ -1222,8 +3358,8 @@ function useNavigationGraph() {
 function useCurrentContext() {
   const contextFromProvider = useContext3(NavigationContextContext);
   const graph = useNavigationGraph();
-  const [graphContext, setGraphContext] = useState3("");
-  useEffect3(() => {
+  const [graphContext, setGraphContext] = useState8("");
+  useEffect6(() => {
     const interval = setInterval(() => {
       const current = graph.getCurrentContext?.() || "";
       if (current !== graphContext) {
@@ -1237,7 +3373,7 @@ function useCurrentContext() {
 function useRegisterTool(toolId, contextId, metadata) {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  useEffect3(() => {
+  useEffect6(() => {
     let targetContext = contextId || currentContext;
     if (!contextId && metadata) {
       const detection = graph.detectToolContext?.(toolId, metadata);
@@ -1251,10 +3387,10 @@ function useRegisterTool(toolId, contextId, metadata) {
 function useNavigationPath(targetContextOrToolId, isToolId = false) {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  const [path, setPath] = useState3(null);
-  const [loading, setLoading] = useState3(true);
-  const [error, setError] = useState3();
-  useEffect3(() => {
+  const [path, setPath] = useState8(null);
+  const [loading, setLoading] = useState8(true);
+  const [error, setError] = useState8();
+  useEffect6(() => {
     try {
       let targetContext = targetContextOrToolId;
       if (isToolId) {
@@ -1282,9 +3418,9 @@ function useNavigationPath(targetContextOrToolId, isToolId = false) {
 function useNavigate() {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  const [navigating, setNavigating] = useState3(false);
-  const [error, setError] = useState3();
-  const navigateTo = useCallback3(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
+  const [navigating, setNavigating] = useState8(false);
+  const [error, setError] = useState8();
+  const navigateTo = useCallback5(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
     setNavigating(true);
     setError(void 0);
     try {
@@ -1326,8 +3462,8 @@ function useNavigate() {
 }
 function useAllContexts() {
   const graph = useNavigationGraph();
-  const [contexts, setContexts] = useState3(graph.getAllContexts?.());
-  useEffect3(() => {
+  const [contexts, setContexts] = useState8(graph.getAllContexts?.());
+  useEffect6(() => {
     const interval = setInterval(() => {
       setContexts(graph.getAllContexts?.());
     }, 1e3);
@@ -1337,28 +3473,28 @@ function useAllContexts() {
 }
 
 // src/components/AutoNavigationContext.tsx
-import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13 } from "react/jsx-runtime";
 function AutoNavigationContext({
   children,
   routes,
   onNavigate
 }) {
-  const [pathname, setPathname] = useState4("/");
-  useEffect4(() => {
+  const [pathname, setPathname] = useState9("/");
+  useEffect7(() => {
     if (typeof window !== "undefined") {
       setPathname(window.location.pathname);
     }
   }, []);
   const context = routes ? inferContextFromPath(pathname, routes) : null;
-  useEffect4(() => {
+  useEffect7(() => {
     if (onNavigate && context) {
       onNavigate(context);
     }
   }, [context, onNavigate]);
   if (!context) {
-    return /* @__PURE__ */ jsx5(Fragment2, { children });
+    return /* @__PURE__ */ jsx13(Fragment4, { children });
   }
-  return /* @__PURE__ */ jsx5(NavigationContextProvider, { value: context, children });
+  return /* @__PURE__ */ jsx13(NavigationContextProvider, { value: context, children });
 }
 function inferContextFromPath(path, customRoutes) {
   if (customRoutes) {
@@ -1389,22 +3525,35 @@ function inferContextFromPath(path, customRoutes) {
 
 // src/components/SupernalProvider.tsx
 import { ExposureCollector, ToolRegistry } from "@supernal/interface/browser";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function ChatBubbleConnector({
   theme,
   position,
-  welcomeMessage
+  welcomeMessage,
+  glassMode,
+  logo,
+  variant,
+  displayMode,
+  drawerSide
 }) {
   const { messages, sendMessage, clearMessages } = useChatContext();
-  return /* @__PURE__ */ jsx6(
+  console.log("[ChatBubbleConnector] Props received:", { variant, displayMode, position });
+  const config = {
+    glassMode,
+    ...logo ? { logo } : {}
+  };
+  return /* @__PURE__ */ jsx14(
     ChatBubble,
     {
       messages,
       onSendMessage: sendMessage,
       onClearChat: clearMessages,
       position,
-      variant: "full",
-      defaultExpanded: true
+      variant: variant || "full",
+      defaultExpanded: true,
+      config,
+      displayMode,
+      drawerSide
     }
   );
 }
@@ -1417,13 +3566,20 @@ function SupernalProvider({
   welcomeMessage,
   routes,
   disabled = false,
+  glassMode = true,
+  logo,
+  variant = "full",
+  displayMode = "auto",
+  drawerSide = "right",
   onNavigate,
   onToolExecute
 }) {
   const shouldRenderChatBubble = !disabled;
+  const effectiveDisplayMode = variant !== "full" ? variant : displayMode;
   console.log("[SupernalProvider] disabled:", disabled, "type:", typeof disabled);
   console.log("[SupernalProvider] shouldRenderChatBubble:", shouldRenderChatBubble);
-  useEffect5(() => {
+  console.log("[SupernalProvider] variant:", variant, "effectiveDisplayMode:", effectiveDisplayMode);
+  useEffect8(() => {
     if (typeof window === "undefined") return;
     const collector = ExposureCollector.getInstance();
     const registeredToolIds = /* @__PURE__ */ new Set();
@@ -1455,19 +3611,426 @@ function SupernalProvider({
       collector.destroy();
     };
   }, []);
-  return /* @__PURE__ */ jsx6(ChatInputProvider, { children: /* @__PURE__ */ jsxs2(ChatProvider, { mode, apiKey, onToolExecute, children: [
-    /* @__PURE__ */ jsx6(AutoNavigationContext, { routes, onNavigate, children }),
-    shouldRenderChatBubble ? /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx14(ChatInputProvider, { children: /* @__PURE__ */ jsxs8(ChatProvider, { mode, apiKey, onToolExecute, children: [
+    /* @__PURE__ */ jsx14(AutoNavigationContext, { routes, onNavigate, children }),
+    shouldRenderChatBubble ? /* @__PURE__ */ jsx14(
       ChatBubbleConnector,
       {
         theme,
         position,
-        welcomeMessage
+        welcomeMessage,
+        glassMode,
+        logo,
+        variant,
+        displayMode: effectiveDisplayMode,
+        drawerSide
       }
     ) : null
   ] }) });
 }
 
+// src/components/ChatBubbleSettingsModal.tsx
+import React11, { useEffect as useEffect9 } from "react";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChatBubbleSettingsModal({
+  isOpen,
+  onClose,
+  settings,
+  onSettingsChange
+}) {
+  const [localSettings, setLocalSettings] = React11.useState(settings);
+  useEffect9(() => {
+    if (isOpen) {
+      setLocalSettings(settings);
+    }
+  }, [isOpen, settings]);
+  useEffect9(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+  if (!isOpen) {
+    return null;
+  }
+  const handleSave = () => {
+    onSettingsChange(localSettings);
+    onClose();
+  };
+  const handleCancel = () => {
+    setLocalSettings(settings);
+    onClose();
+  };
+  const isDark = localSettings.theme === "dark";
+  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    /* @__PURE__ */ jsx15(
+      "div",
+      {
+        className: "fixed inset-0 bg-black bg-opacity-50 z-[60] backdrop-blur-sm",
+        onClick: handleCancel,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "div",
+      {
+        className: "fixed inset-0 z-[70] flex items-center justify-center p-4",
+        "data-testid": "chat-settings-modal",
+        children: /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            className: `${isDark ? "bg-gray-800 text-white" : "bg-white text-gray-900"} rounded-2xl shadow-2xl max-w-md w-full p-6 border ${isDark ? "border-gray-700" : "border-gray-200"}`,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "settings-modal-title",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mb-6", children: [
+                /* @__PURE__ */ jsx15(
+                  "h2",
+                  {
+                    id: "settings-modal-title",
+                    className: "text-2xl font-bold",
+                    children: "Chat Settings"
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  "button",
+                  {
+                    onClick: handleCancel,
+                    className: `${isDark ? "text-gray-400 hover:text-gray-200" : "text-gray-400 hover:text-gray-600"} transition-colors p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700`,
+                    "aria-label": "Close modal",
+                    children: /* @__PURE__ */ jsx15("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs9("div", { className: "space-y-5 mb-6", children: [
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs9("div", { children: [
+                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Theme" }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Switch between light and dark modes" })
+                  ] }),
+                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx15(
+                      "button",
+                      {
+                        onClick: () => setLocalSettings({ ...localSettings, theme: "light" }),
+                        className: `p-2 rounded-lg transition-all ${localSettings.theme === "light" ? "bg-blue-600 text-white shadow-lg" : isDark ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+                        title: "Light mode",
+                        children: /* @__PURE__ */ jsx15("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx15(
+                      "button",
+                      {
+                        onClick: () => setLocalSettings({ ...localSettings, theme: "dark" }),
+                        className: `p-2 rounded-lg transition-all ${localSettings.theme === "dark" ? "bg-blue-600 text-white shadow-lg" : isDark ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+                        title: "Dark mode",
+                        children: /* @__PURE__ */ jsx15("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs9("div", { children: [
+                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Glass Mode" }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable glassmorphism transparency effect" })
+                  ] }),
+                  /* @__PURE__ */ jsx15(
+                    "button",
+                    {
+                      onClick: () => setLocalSettings({ ...localSettings, glassMode: !localSettings.glassMode }),
+                      className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.glassMode ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
+                      role: "switch",
+                      "aria-checked": localSettings.glassMode,
+                      children: /* @__PURE__ */ jsx15(
+                        "span",
+                        {
+                          className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.glassMode ? "translate-x-6" : "translate-x-1"}`
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs9("div", { children: [
+                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Notifications" }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Show unread message indicators" })
+                  ] }),
+                  /* @__PURE__ */ jsx15(
+                    "button",
+                    {
+                      onClick: () => setLocalSettings({ ...localSettings, notifications: !localSettings.notifications }),
+                      className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.notifications ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
+                      role: "switch",
+                      "aria-checked": localSettings.notifications,
+                      children: /* @__PURE__ */ jsx15(
+                        "span",
+                        {
+                          className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.notifications ? "translate-x-6" : "translate-x-1"}`
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx15("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs9("div", { children: [
+                    /* @__PURE__ */ jsxs9("label", { className: "block text-base font-medium mb-1 flex items-center space-x-2", children: [
+                      /* @__PURE__ */ jsx15("span", { children: "Subtitle Overlay" }),
+                      /* @__PURE__ */ jsx15("span", { className: "inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", children: "BETA" })
+                    ] }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Minimalist voice-first overlay with @/ icon" })
+                  ] }),
+                  /* @__PURE__ */ jsx15(
+                    "button",
+                    {
+                      onClick: () => setLocalSettings({
+                        ...localSettings,
+                        subtitleOverlayEnabled: !localSettings.subtitleOverlayEnabled,
+                        // When enabling subtitle overlay, switch displayMode to subtitle
+                        ...!localSettings.subtitleOverlayEnabled && { displayMode: "subtitle" }
+                      }),
+                      className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.subtitleOverlayEnabled ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
+                      role: "switch",
+                      "aria-checked": localSettings.subtitleOverlayEnabled,
+                      children: /* @__PURE__ */ jsx15(
+                        "span",
+                        {
+                          className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.subtitleOverlayEnabled ? "translate-x-6" : "translate-x-1"}`
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs9("div", { children: [
+                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Display Mode" }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Auto switches drawer on mobile, panel on desktop" })
+                  ] }),
+                  /* @__PURE__ */ jsxs9(
+                    "select",
+                    {
+                      value: localSettings.displayMode || "auto",
+                      onChange: (e) => setLocalSettings({
+                        ...localSettings,
+                        displayMode: e.target.value
+                      }),
+                      className: `px-3 py-2 rounded-lg border ${isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300 text-gray-900"} focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`,
+                      children: [
+                        /* @__PURE__ */ jsx15("option", { value: "auto", children: "Auto (Recommended)" }),
+                        /* @__PURE__ */ jsx15("option", { value: "drawer", children: "Always Drawer" }),
+                        /* @__PURE__ */ jsx15("option", { value: "full", children: "Always Panel" }),
+                        /* @__PURE__ */ jsx15("option", { value: "floating", children: "Always Floating" }),
+                        /* @__PURE__ */ jsx15("option", { value: "subtitle", children: "Subtitle Overlay (Beta)" })
+                      ]
+                    }
+                  )
+                ] }),
+                (localSettings.displayMode === "auto" || localSettings.displayMode === "drawer") && /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs9("div", { children: [
+                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Drawer Side" }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Which edge drawer slides from" })
+                  ] }),
+                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx15(
+                      "button",
+                      {
+                        onClick: () => setLocalSettings({ ...localSettings, drawerSide: "left" }),
+                        className: `px-4 py-2 rounded-lg transition-all ${localSettings.drawerSide === "left" ? "bg-blue-600 text-white shadow-lg" : isDark ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+                        children: "Left"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx15(
+                      "button",
+                      {
+                        onClick: () => setLocalSettings({ ...localSettings, drawerSide: "right" }),
+                        className: `px-4 py-2 rounded-lg transition-all ${localSettings.drawerSide === "right" ? "bg-blue-600 text-white shadow-lg" : isDark ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+                        children: "Right"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx15("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                /* @__PURE__ */ jsxs9("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ jsx15("h3", { className: "text-lg font-semibold mb-1", children: "Voice Control" }),
+                  /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and audio feedback" })
+                ] }),
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs9("div", { children: [
+                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Voice Control" }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and TTS responses" })
+                  ] }),
+                  /* @__PURE__ */ jsx15(
+                    "button",
+                    {
+                      onClick: () => setLocalSettings({ ...localSettings, voiceEnabled: !localSettings.voiceEnabled }),
+                      className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.voiceEnabled ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
+                      role: "switch",
+                      "aria-checked": localSettings.voiceEnabled,
+                      children: /* @__PURE__ */ jsx15(
+                        "span",
+                        {
+                          className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.voiceEnabled ? "translate-x-6" : "translate-x-1"}`
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                localSettings.voiceEnabled && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ jsxs9("div", { children: [
+                      /* @__PURE__ */ jsx15("label", { className: "block text-sm font-medium mb-1", children: "Auto-read AI Responses" }),
+                      /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically read AI messages aloud" })
+                    ] }),
+                    /* @__PURE__ */ jsx15(
+                      "button",
+                      {
+                        onClick: () => setLocalSettings({ ...localSettings, autoReadResponses: !localSettings.autoReadResponses }),
+                        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.autoReadResponses ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
+                        role: "switch",
+                        "aria-checked": localSettings.autoReadResponses,
+                        children: /* @__PURE__ */ jsx15(
+                          "span",
+                          {
+                            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.autoReadResponses ? "translate-x-6" : "translate-x-1"}`
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ jsxs9("div", { children: [
+                      /* @__PURE__ */ jsx15("label", { className: "block text-sm font-medium mb-1", children: "Premium Voices \u{1F48E}" }),
+                      /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Use high-quality OpenAI voices (requires network)" })
+                    ] }),
+                    /* @__PURE__ */ jsx15(
+                      "button",
+                      {
+                        onClick: () => setLocalSettings({ ...localSettings, usePremiumVoices: !localSettings.usePremiumVoices }),
+                        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.usePremiumVoices ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
+                        role: "switch",
+                        "aria-checked": localSettings.usePremiumVoices,
+                        children: /* @__PURE__ */ jsx15(
+                          "span",
+                          {
+                            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.usePremiumVoices ? "translate-x-6" : "translate-x-1"}`
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs9("div", { className: "pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ jsxs9("label", { className: "block text-sm font-medium mb-2", children: [
+                      "Voice Speed: ",
+                      localSettings.ttsSpeed.toFixed(1),
+                      "x"
+                    ] }),
+                    /* @__PURE__ */ jsx15(
+                      "input",
+                      {
+                        type: "range",
+                        min: "0.5",
+                        max: "2.0",
+                        step: "0.1",
+                        value: localSettings.ttsSpeed,
+                        onChange: (e) => setLocalSettings({ ...localSettings, ttsSpeed: parseFloat(e.target.value) }),
+                        className: "w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                      /* @__PURE__ */ jsx15("span", { children: "0.5x (Slow)" }),
+                      /* @__PURE__ */ jsx15("span", { children: "1.0x (Normal)" }),
+                      /* @__PURE__ */ jsx15("span", { children: "2.0x (Fast)" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx15("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                  /* @__PURE__ */ jsxs9("div", { className: "mb-3", children: [
+                    /* @__PURE__ */ jsx15("h4", { className: "text-sm font-semibold mb-1", children: "Voice Quick Record (Ctrl+/)" }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Press Ctrl+/ (or Cmd+/ on Mac) to auto-record and execute voice commands" })
+                  ] }),
+                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between pl-4 border-l-2 border-purple-500/30", children: [
+                    /* @__PURE__ */ jsxs9("div", { children: [
+                      /* @__PURE__ */ jsx15("label", { className: "block text-sm font-medium mb-1", children: "Auto-Execute Commands" }),
+                      /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically run recognized voice commands" })
+                    ] }),
+                    /* @__PURE__ */ jsx15(
+                      "button",
+                      {
+                        onClick: () => setLocalSettings({ ...localSettings, sttAutoExecute: !localSettings.sttAutoExecute }),
+                        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.sttAutoExecute ? "bg-purple-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
+                        role: "switch",
+                        "aria-checked": localSettings.sttAutoExecute,
+                        children: /* @__PURE__ */ jsx15(
+                          "span",
+                          {
+                            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.sttAutoExecute ? "translate-x-6" : "translate-x-1"}`
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs9("div", { className: "pl-4 border-l-2 border-purple-500/30", children: [
+                    /* @__PURE__ */ jsxs9("label", { className: "block text-sm font-medium mb-2", children: [
+                      "Recording Timeout: ",
+                      (localSettings.sttAutoRecordTimeout / 1e3).toFixed(1),
+                      "s"
+                    ] }),
+                    /* @__PURE__ */ jsx15(
+                      "input",
+                      {
+                        type: "range",
+                        min: "2000",
+                        max: "15000",
+                        step: "1000",
+                        value: localSettings.sttAutoRecordTimeout,
+                        onChange: (e) => setLocalSettings({ ...localSettings, sttAutoRecordTimeout: parseInt(e.target.value) }),
+                        className: "w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-600"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                      /* @__PURE__ */ jsx15("span", { children: "2s" }),
+                      /* @__PURE__ */ jsx15("span", { children: "8s" }),
+                      /* @__PURE__ */ jsx15("span", { children: "15s" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs9("div", { className: `p-3 rounded-lg ${isDark ? "bg-purple-900/20 border border-purple-500/30" : "bg-purple-50 border border-purple-200"}`, children: [
+                    /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"} mb-1 font-medium`, children: "\u26A1 Quick Tip: Press Ctrl+/ anywhere (even while typing!)" }),
+                    /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-purple-400" : "text-purple-700"}`, children: localSettings.sttAutoExecute ? "Recording auto-stops and executes your command" : "Recording auto-stops and fills the input (press Enter to send)" })
+                  ] }),
+                  !localSettings.usePremiumVoices && /* @__PURE__ */ jsx15("div", { className: `p-3 rounded-lg ${isDark ? "bg-green-900/20 border border-green-500/30" : "bg-green-50 border border-green-200"}`, children: /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-green-300" : "text-green-800"}`, children: "\u{1F49A} Using free device voices (works offline, zero cost)" }) }),
+                  localSettings.usePremiumVoices && /* @__PURE__ */ jsx15("div", { className: `p-3 rounded-lg ${isDark ? "bg-purple-900/20 border border-purple-500/30" : "bg-purple-50 border border-purple-200"}`, children: /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"}`, children: "\u{1F48E} Using premium OpenAI voices (requires internet connection)" }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs9("div", { className: "flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+                /* @__PURE__ */ jsx15(
+                  "button",
+                  {
+                    onClick: handleCancel,
+                    className: `px-4 py-2 rounded-lg transition-colors ${isDark ? "bg-gray-700 text-gray-200 hover:bg-gray-600" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  "button",
+                  {
+                    onClick: handleSave,
+                    className: "px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors shadow-lg",
+                    children: "Save Changes"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/lib/FuzzyMatcher.ts
 var FuzzyMatcher = class {
   /**
@@ -1589,11 +4152,19 @@ function findBestMatch(query, tools) {
 export {
   AutoNavigationContext,
   ChatBubble,
+  ChatBubbleSettingsModal,
+  ChatBubbleVariant,
   ChatInputProvider,
   ChatProvider,
+  CodeBlock,
+  Components,
   DemoAIInterface,
   FuzzyMatcher,
+  MermaidDiagram,
+  MessageRenderer,
   NavigationContextProvider,
+  PageLayout,
+  SubtitleOverlay,
   SupernalProvider,
   ToolManager,
   findBestMatch,