@bnagaraju7/chat-widget 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1316 @@
+"use client";
+
+// src/components/GarudaChatWidget.tsx
+import { useState as useState4, useRef as useRef3, useEffect as useEffect3, useMemo } from "react";
+import {
+  X,
+  Send,
+  ChevronRight,
+  FileText,
+  Bot,
+  Star,
+  RefreshCcw,
+  Plus,
+  ShieldCheck,
+  CheckCircle2,
+  Mic,
+  MicOff,
+  CircleStop,
+  Phone,
+  PhoneOff
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// src/services/api-client.ts
+function createApiClient(config) {
+  const baseUrl = config.apiBaseUrl.replace(/\/$/, "");
+  return async function apiClient(endpoint, options = {}) {
+    const { body, headers, skipAuth = false, quiet = false, ...rest } = options;
+    const requestHeaders = {
+      "Content-Type": "application/json",
+      ...headers
+    };
+    if (config.authToken && !skipAuth) {
+      requestHeaders["Authorization"] = `Bearer ${config.authToken}`;
+    }
+    if (config.organisationId) {
+      requestHeaders["organisation_id"] = config.organisationId;
+    }
+    try {
+      const response = await fetch(`${baseUrl}${endpoint}`, {
+        ...rest,
+        headers: requestHeaders,
+        body: body ? JSON.stringify(body) : void 0
+      });
+      const data = await response.json().catch(() => ({}));
+      if (response.status === 401) {
+        if (config.authToken && !skipAuth) {
+          config.onUnauthorized?.();
+        }
+        throw new Error(data.detail || "Unauthorized");
+      }
+      if (!response.ok) {
+        if (!quiet) {
+          console.error("[GarudaChat] Backend error:", data);
+        }
+        let message = "Something went wrong";
+        if (typeof data.detail === "string") {
+          message = data.detail;
+        } else if (Array.isArray(data.detail)) {
+          message = data.detail.map((e) => e.msg).join(", ");
+        } else if (data.message) {
+          message = data.message;
+        }
+        throw new Error(message);
+      }
+      return data;
+    } catch (error) {
+      if (!quiet) {
+        console.error("[GarudaChat] API error:", error);
+      }
+      throw new Error(error.message || "Failed to connect to server");
+    }
+  };
+}
+
+// src/services/chat.service.ts
+var CHAT_ENDPOINT = "/api/v1/agents/chat";
+function createChatService(apiClient) {
+  return {
+    sendMessage: (payload, skipAuth = false) => apiClient(CHAT_ENDPOINT, {
+      method: "POST",
+      body: payload,
+      skipAuth
+    })
+  };
+}
+
+// src/services/voice.service.ts
+var VOICE_TOKEN_ENDPOINT = "/api/v1/call/getToken";
+var CALL_SUBMIT_OTP_ENDPOINT = "/api/v1/call/submit-otp";
+function createVoiceService(config) {
+  const baseUrl = config.apiBaseUrl.replace(/\/$/, "");
+  return {
+    getTo: () => config.supportPhone ?? "",
+    getToken: async () => {
+      const resp = await fetch(`${baseUrl}${VOICE_TOKEN_ENDPOINT}`, { method: "POST" });
+      if (!resp.ok) {
+        throw new Error("Failed to fetch voice token");
+      }
+      const data = await resp.json();
+      return data?.token || data?.accessToken || data?.access_token;
+    },
+    submitOtp: async (code, opts = {}) => {
+      const body = new URLSearchParams({ code });
+      if (opts.callSid) body.set("call_sid", opts.callSid);
+      if (opts.clientRef) body.set("client_ref", opts.clientRef);
+      const resp = await fetch(`${baseUrl}${CALL_SUBMIT_OTP_ENDPOINT}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body
+      });
+      return resp.json();
+    }
+  };
+}
+
+// src/hooks/useVoiceInput.ts
+import { useRef, useState } from "react";
+function resolveSpeechRecognitionLocale() {
+  const browserLang = navigator.language || navigator.languages?.[0] || "en-US";
+  return browserLang;
+}
+function useVoiceInput(onResult) {
+  const recognitionRef = useRef(null);
+  const [isListening, setIsListening] = useState(false);
+  const start = () => {
+    if (recognitionRef.current) return;
+    const SpeechRecognitionImpl = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognitionImpl) {
+      console.error("[GarudaChat] SpeechRecognition is not supported in this browser.");
+      return;
+    }
+    const recognition = new SpeechRecognitionImpl();
+    const speechLocale = resolveSpeechRecognitionLocale();
+    recognition.lang = speechLocale;
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.onstart = () => {
+      setIsListening(true);
+    };
+    recognition.onresult = (event) => {
+      let interimTranscript = "";
+      let finalTranscript = "";
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const result = event.results[i];
+        const transcript = result[0].transcript;
+        if (result.isFinal) {
+          finalTranscript += transcript;
+        } else {
+          interimTranscript += transcript;
+        }
+      }
+      const text = finalTranscript + interimTranscript;
+      if (text.trim()) {
+        onResult(text);
+      }
+    };
+    recognition.onerror = (event) => {
+      console.error("[GarudaChat] SpeechRecognition error:", event.error);
+      setIsListening(false);
+    };
+    recognition.onend = () => {
+      setIsListening(false);
+      recognitionRef.current = null;
+    };
+    recognitionRef.current = recognition;
+    try {
+      recognition.start();
+    } catch (error) {
+      console.error("[GarudaChat] Failed to start SpeechRecognition:", error);
+      recognitionRef.current = null;
+      setIsListening(false);
+    }
+  };
+  const stop = () => {
+    if (recognitionRef.current) {
+      try {
+        recognitionRef.current.stop();
+      } catch {
+      }
+      recognitionRef.current = null;
+    }
+    setIsListening(false);
+  };
+  return {
+    start,
+    stop,
+    isListening
+  };
+}
+
+// src/hooks/useVoiceCall.ts
+import { useState as useState2, useRef as useRef2, useCallback, useEffect } from "react";
+import { Device, Call } from "@twilio/voice-sdk";
+var { Opus, PCMU } = Call.Codec;
+function useVoiceCall(voiceService) {
+  const [voiceCall, setVoiceCall] = useState2({
+    isActive: false,
+    duration: 0,
+    status: "idle",
+    clientRef: "",
+    callSid: "",
+    isMuted: false
+  });
+  const timerRef = useRef2(null);
+  const deviceRef = useRef2(null);
+  const activeCallRef = useRef2(null);
+  const activeRef = useRef2(false);
+  const updateStatus = useCallback((status) => {
+    setVoiceCall((prev) => ({ ...prev, status }));
+  }, []);
+  const updateDuration = useCallback(() => {
+    setVoiceCall((prev) => ({ ...prev, duration: prev.duration + 1 }));
+  }, []);
+  const resetState = useCallback(() => {
+    setVoiceCall({
+      isActive: false,
+      duration: 0,
+      status: "idle",
+      clientRef: "",
+      callSid: "",
+      isMuted: false
+    });
+  }, []);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const endVoiceCall = useCallback(async () => {
+    activeRef.current = false;
+    clearTimer();
+    try {
+      activeCallRef.current?.disconnect();
+    } catch {
+    }
+    activeCallRef.current = null;
+    resetState();
+  }, [clearTimer, resetState]);
+  const wireCall = useCallback(
+    (call) => {
+      activeCallRef.current = call;
+      call.on("accept", () => {
+        if (!activeRef.current) return;
+        const callSid = call.parameters && call.parameters.CallSid || "";
+        updateStatus("in-call");
+        setVoiceCall((prev) => ({ ...prev, callSid }));
+        clearTimer();
+        timerRef.current = setInterval(updateDuration, 1e3);
+      });
+      call.on("disconnect", () => {
+        if (!activeRef.current) return;
+        activeRef.current = false;
+        clearTimer();
+        activeCallRef.current = null;
+        resetState();
+      });
+      call.on("error", (error) => {
+        console.error("[GarudaChat] Call error:", error);
+        endVoiceCall();
+      });
+    },
+    [updateDuration, updateStatus, clearTimer, resetState, endVoiceCall]
+  );
+  const handleIncoming = useCallback(
+    (call) => {
+      activeRef.current = true;
+      const callSid = call.parameters && call.parameters.CallSid || "";
+      clearTimer();
+      setVoiceCall({
+        isActive: true,
+        duration: 0,
+        status: "in-call",
+        clientRef: "",
+        callSid,
+        isMuted: false
+      });
+      call.accept();
+      wireCall(call);
+    },
+    [clearTimer, wireCall]
+  );
+  const handleIncomingRef = useRef2(handleIncoming);
+  useEffect(() => {
+    handleIncomingRef.current = handleIncoming;
+  }, [handleIncoming]);
+  const initDevice = useCallback(async () => {
+    if (deviceRef.current) return deviceRef.current;
+    try {
+      const token = await voiceService.getToken();
+      if (!token) return null;
+      const device = new Device(token, {
+        logLevel: 1,
+        codecPreferences: [Opus, PCMU]
+      });
+      deviceRef.current = device;
+      device.on("error", (error) => {
+        console.error("[GarudaChat] Device error:", error);
+      });
+      device.on("incoming", (call) => {
+        handleIncomingRef.current(call);
+      });
+      await device.register();
+      return device;
+    } catch (err) {
+      console.error("[GarudaChat] Device init failed:", err);
+      return null;
+    }
+  }, [voiceService]);
+  useEffect(() => {
+    initDevice();
+    return () => {
+      try {
+        deviceRef.current?.disconnectAll();
+      } catch {
+      }
+      try {
+        deviceRef.current?.destroy();
+      } catch {
+      }
+      deviceRef.current = null;
+      activeCallRef.current = null;
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [initDevice]);
+  const startVoiceCall = useCallback(async () => {
+    if (activeRef.current) return;
+    const device = await initDevice();
+    if (!device) {
+      console.error("[GarudaChat] Device not available");
+      return;
+    }
+    const clientRef = "ref_" + Date.now() + "_" + Math.random().toString(36).slice(2, 10);
+    activeRef.current = true;
+    setVoiceCall({
+      isActive: true,
+      duration: 0,
+      status: "connecting",
+      clientRef,
+      callSid: "",
+      isMuted: false
+    });
+    try {
+      const call = await device.connect({
+        params: {
+          To: voiceService.getTo(),
+          clientRef
+        }
+      });
+      wireCall(call);
+    } catch (err) {
+      console.error("[GarudaChat] Failed to start call:", err);
+      activeRef.current = false;
+      resetState();
+    }
+  }, [initDevice, wireCall, resetState, voiceService]);
+  const toggleMute = useCallback(() => {
+    const call = activeCallRef.current;
+    if (!call) return;
+    setVoiceCall((prev) => {
+      const nextMuted = !prev.isMuted;
+      try {
+        call.mute(nextMuted);
+      } catch (err) {
+        console.error("[GarudaChat] Toggle mute failed:", err);
+      }
+      return { ...prev, isMuted: nextMuted };
+    });
+  }, []);
+  return {
+    voiceCall,
+    startVoiceCall,
+    endVoiceCall,
+    toggleMute
+  };
+}
+
+// src/utils/cleanSanityMarkdown.ts
+function cleanSanityMarkdown(rawMarkdown) {
+  let text = rawMarkdown;
+  text = text.replace(/<\/?table[^>]*>/gi, "\n").replace(/<\/?thead[^>]*>/gi, "").replace(/<\/?tbody[^>]*>/gi, "").replace(/<\/?tr[^>]*>/gi, "\n").replace(/<\/?t[dh][^>]*>/gi, " ").replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "").replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">").replace(/&nbsp;/gi, " ");
+  text = text.split("\n").filter((line) => !/^\|[\s\-:|]+\|$/.test(line.trim())).join("\n");
+  text = text.split("\n").map((line) => {
+    if (line.trim().startsWith("|") && line.trim().endsWith("|")) {
+      return line.replace(/^\|/, "").replace(/\|$/, "").split("|").map((cell) => cell.trim()).filter(Boolean).join(" - ");
+    }
+    return line;
+  }).join("\n");
+  const lines = text.split("\n");
+  const cleanedLines = [];
+  let bufferList = [];
+  lines.forEach((line) => {
+    const trimmed = line.trim();
+    if (!trimmed) return;
+    const isHeading = /^\*\*.*:\*\*/.test(trimmed);
+    const isListItem = /^(\-|\*|\+)?\s*(\d+\.|\w\.)?\s/.test(trimmed);
+    if (isHeading && isListItem) {
+      if (bufferList.length > 0) {
+        cleanedLines.push(...bufferList);
+        bufferList = [];
+      }
+      cleanedLines.push(trimmed.replace(/^[-*+]\s*/, ""));
+    } else if (isHeading) {
+      if (bufferList.length > 0) {
+        cleanedLines.push(...bufferList);
+        bufferList = [];
+      }
+      cleanedLines.push(trimmed);
+    } else if (isListItem) {
+      bufferList.push(trimmed.replace(/^([-*+]?\s*\d*\.*\s)/, ""));
+    } else {
+      if (bufferList.length > 0) {
+        cleanedLines.push(...bufferList);
+        bufferList = [];
+      }
+      cleanedLines.push(trimmed);
+    }
+  });
+  if (bufferList.length > 0) cleanedLines.push(...bufferList);
+  return cleanedLines.join("\n");
+}
+
+// src/components/ShadowHost.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+
+// src/styles/widget-css.generated.ts
+var WIDGET_CSS = `*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.bottom-6{bottom:1.5rem}.bottom-full{bottom:100%}.left-0{left:0}.left-3{left:.75rem}.right-0{right:0}.right-14{right:3.5rem}.right-2{right:.5rem}.right-3{right:.75rem}.right-6{right:1.5rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mt-0{margin-top:0}.mt-0\\.5{margin-top:.125rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-1\\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-\\[750px\\]{height:750px}.h-full{height:100%}.max-h-\\[90vh\\]{max-height:90vh}.min-h-\\[12px\\]{min-height:12px}.min-h-\\[28px\\]{min-height:28px}.w-1{width:.25rem}.w-1\\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-64{width:16rem}.w-auto{width:auto}.w-full{width:100%}.max-w-\\[240px\\]{max-width:240px}.max-w-\\[500px\\]{max-width:500px}.max-w-\\[85\\%\\]{max-width:85%}.max-w-\\[90\\%\\]{max-width:90%}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-tl-sm{border-top-left-radius:.125rem}.rounded-tr-sm{border-top-right-radius:.125rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-foreground{--tw-border-opacity:1;border-color:rgb(248 250 252/var(--tw-border-opacity,1))}.border-foreground\\/10{border-color:rgba(248,250,252,.1)}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-green-500\\/20{border-color:rgba(34,197,94,.2)}.border-primary{--tw-border-opacity:1;border-color:rgb(0 240 255/var(--tw-border-opacity,1))}.border-primary\\/20{border-color:rgba(0,240,255,.2)}.border-primary\\/30{border-color:rgba(0,240,255,.3)}.border-primary\\/40{border-color:rgba(0,240,255,.4)}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-red-500\\/20{border-color:rgba(239,68,68,.2)}.border-red-500\\/30{border-color:rgba(239,68,68,.3)}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\\/10{border-color:hsla(0,0%,100%,.1)}.border-white\\/15{border-color:hsla(0,0%,100%,.15)}.border-white\\/20{border-color:hsla(0,0%,100%,.2)}.border-white\\/5{border-color:hsla(0,0%,100%,.05)}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-foreground{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-500\\/10{background-color:rgba(34,197,94,.1)}.bg-navy-700{--tw-bg-opacity:1;background-color:rgb(17 29 54/var(--tw-bg-opacity,1))}.bg-navy-800{--tw-bg-opacity:1;background-color:rgb(10 19 36/var(--tw-bg-opacity,1))}.bg-navy-800\\/50{background-color:rgba(10,19,36,.5)}.bg-navy-800\\/80{background-color:rgba(10,19,36,.8)}.bg-navy-800\\/90{background-color:rgba(10,19,36,.9)}.bg-navy-900{--tw-bg-opacity:1;background-color:rgb(5 11 20/var(--tw-bg-opacity,1))}.bg-navy-900\\/50{background-color:rgba(5,11,20,.5)}.bg-navy-900\\/95{background-color:rgba(5,11,20,.95)}.bg-primary{--tw-bg-opacity:1;background-color:rgb(0 240 255/var(--tw-bg-opacity,1))}.bg-primary\\/10{background-color:rgba(0,240,255,.1)}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\\/10{background-color:rgba(239,68,68,.1)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity,1))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.from-navy-900{--tw-gradient-from:#050b14 var(--tw-gradient-from-position);--tw-gradient-to:rgba(5,11,20,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-navy-900\\/50{--tw-gradient-from:rgba(5,11,20,.5) var(--tw-gradient-from-position);--tw-gradient-to:rgba(5,11,20,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary{--tw-gradient-from:#00f0ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,240,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary\\/10{--tw-gradient-from:rgba(0,240,255,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,240,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary\\/30{--tw-gradient-from:rgba(0,240,255,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,240,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.to-cyan-500\\/10{--tw-gradient-to:rgba(6,182,212,.1) var(--tw-gradient-to-position)}.to-navy-900{--tw-gradient-to:#050b14 var(--tw-gradient-to-position)}.to-teal-400{--tw-gradient-to:#2dd4bf var(--tw-gradient-to-position)}.to-teal-500{--tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)}.to-teal-500\\/30{--tw-gradient-to:rgba(20,184,166,.3) var(--tw-gradient-to-position)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-0{padding-bottom:0}.pb-0\\.5{padding-bottom:.125rem}.pl-5{padding-left:1.25rem}.pr-24{padding-right:6rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\\[10px\\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\\[0\\.35em\\]{letter-spacing:.35em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-foreground{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-navy-900{--tw-text-opacity:1;color:rgb(5 11 20/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(0 240 255/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.opacity-0{opacity:0}.opacity-60{opacity:.6}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-\\[0_0_15px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.5\\)\\]{--tw-shadow:0 0 15px rgba(0,0,0,.5);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_0_15px_rgba\\(32\\2c 201\\2c 151\\2c 0\\.2\\)\\]{--tw-shadow:0 0 15px rgba(32,201,151,.2);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_0_30px_rgba\\(32\\2c 201\\2c 151\\2c 0\\.8\\)\\]{--tw-shadow:0 0 30px rgba(32,201,151,.8);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_20px_50px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.5\\)\\]{--tw-shadow:0 20px 50px rgba(0,0,0,.5);--tw-shadow-colored:0 20px 50px var(--tw-shadow-color)}.shadow-\\[0_20px_50px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.5\\)\\],.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-primary{--tw-shadow-color:#00f0ff;--tw-shadow:var(--tw-shadow-colored)}.shadow-primary\\/10{--tw-shadow-color:rgba(0,240,255,.1);--tw-shadow:var(--tw-shadow-colored)}.shadow-red-500{--tw-shadow-color:#ef4444;--tw-shadow:var(--tw-shadow-colored)}.shadow-red-500\\/30{--tw-shadow-color:rgba(239,68,68,.3);--tw-shadow:var(--tw-shadow-colored)}.ring-primary{--tw-ring-opacity:1;--tw-ring-color:rgb(0 240 255/var(--tw-ring-opacity,1))}.drop-shadow-\\[0_0_5px_rgba\\(250\\2c 204\\2c 21\\2c 0\\.5\\)\\]{--tw-drop-shadow:drop-shadow(0 0 5px rgba(250,204,21,.5))}.drop-shadow-\\[0_0_5px_rgba\\(250\\2c 204\\2c 21\\2c 0\\.5\\)\\],.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-2xl{--tw-backdrop-blur:blur(40px)}.backdrop-blur-2xl,.backdrop-blur-md{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}:host{all:initial;display:block;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*,:after,:before{box-sizing:border-box}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0a1324}::-webkit-scrollbar-thumb{background:rgba(49,46,129,.5);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(79,70,229,.8)}.chat-markdown p{margin:.4em 0;line-height:1.6}.chat-markdown p:first-child{margin-top:0}.chat-markdown p:last-child{margin-bottom:0}.chat-markdown ol,.chat-markdown ul{margin:.4em 0;padding-left:1.5em}.chat-markdown li{margin:.2em 0;line-height:1.5}.chat-markdown strong{font-weight:600}.chat-markdown code{background:hsla(0,0%,100%,.1);padding:.15em .4em;border-radius:4px;font-size:.9em}.hover\\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\\:scale-105:hover,.hover\\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\\:border-green-500\\/40:hover{border-color:rgba(34,197,94,.4)}.hover\\:border-primary\\/40:hover{border-color:rgba(0,240,255,.4)}.hover\\:border-primary\\/50:hover{border-color:rgba(0,240,255,.5)}.hover\\:border-red-400\\/20:hover{border-color:hsla(0,91%,71%,.2)}.hover\\:border-red-500\\/40:hover{border-color:rgba(239,68,68,.4)}.hover\\:bg-green-400\\/10:hover{background-color:rgba(74,222,128,.1)}.hover\\:bg-green-500\\/20:hover{background-color:rgba(34,197,94,.2)}.hover\\:bg-navy-600:hover{--tw-bg-opacity:1;background-color:rgb(26 44 82/var(--tw-bg-opacity,1))}.hover\\:bg-navy-700:hover{--tw-bg-opacity:1;background-color:rgb(17 29 54/var(--tw-bg-opacity,1))}.hover\\:bg-primary\\/10:hover{background-color:rgba(0,240,255,.1)}.hover\\:bg-primary\\/20:hover{background-color:rgba(0,240,255,.2)}.hover\\:bg-primary\\/90:hover{background-color:rgba(0,240,255,.9)}.hover\\:bg-red-400\\/10:hover{background-color:hsla(0,91%,71%,.1)}.hover\\:bg-red-500\\/20:hover{background-color:rgba(239,68,68,.2)}.hover\\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\\:bg-white\\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\\:bg-yellow-600:hover{--tw-bg-opacity:1;background-color:rgb(202 138 4/var(--tw-bg-opacity,1))}.hover\\:text-green-400:hover{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.hover\\:text-primary\\/80:hover{color:rgba(0,240,255,.8)}.hover\\:text-red-400:hover{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\\:text-yellow-400\\/50:hover{color:rgba(250,204,21,.5)}.hover\\:opacity-80:hover{opacity:.8}.hover\\:opacity-90:hover{opacity:.9}.hover\\:shadow-\\[0_0_10px_rgba\\(32\\2c 201\\2c 151\\2c 0\\.15\\)\\]:hover{--tw-shadow:0 0 10px rgba(32,201,151,.15);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:shadow-\\[0_0_15px_rgba\\(32\\2c 201\\2c 151\\2c 0\\.1\\)\\]:hover{--tw-shadow:0 0 15px rgba(32,201,151,.1);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(0 240 255/var(--tw-border-opacity,1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 240 255/var(--tw-ring-opacity,1))}.focus\\:ring-primary\\/50:focus{--tw-ring-color:rgba(0,240,255,.5)}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:text-primary{--tw-text-opacity:1;color:rgb(0 240 255/var(--tw-text-opacity,1))}.group:hover .group-hover\\:opacity-100{opacity:1}@media (min-width:640px){.sm\\:left-auto{left:auto}.sm\\:right-6{right:1.5rem}.sm\\:w-full{width:100%}}`;
+
+// src/components/ShadowHost.tsx
+function ShadowHost({ children }) {
+  const [mountNode, setMountNode] = useState3(null);
+  useEffect2(() => {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const shadowRoot = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = WIDGET_CSS;
+    shadowRoot.appendChild(style);
+    const mount = document.createElement("div");
+    shadowRoot.appendChild(mount);
+    setMountNode(mount);
+    return () => {
+      document.body.removeChild(host);
+    };
+  }, []);
+  if (!mountNode) return null;
+  return createPortal(children, mountNode);
+}
+
+// src/components/GarudaChatWidget.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function extractStripeUrl(text) {
+  const match = text.match(
+    /https?:\/\/checkout\.stripe\.com\/c\/pay\/[a-zA-Z0-9_#%-]+(?:\?[a-zA-Z0-9_&=%-]+)?(?:#[a-zA-Z0-9_%-]+)?/
+  );
+  return match ? match[0] : null;
+}
+function extractPlanName(text) {
+  const match = text.match(/for\s+([A-Za-z\s]+?)(?:\s*:|$|https)/);
+  return match ? match[1].trim() : null;
+}
+function extractBilling(text) {
+  const lower = text.toLowerCase();
+  if (lower.includes("yearly") || lower.includes("/year")) return "yearly";
+  if (lower.includes("monthly") || lower.includes("/month")) return "monthly";
+  return "";
+}
+function extractAmount(text) {
+  const match = text.match(/\$([0-9,]+\.?[0-9]*)/);
+  if (!match) return 0;
+  return parseFloat(match[1].replace(/,/g, ""));
+}
+function cleanResponse(text) {
+  if (!text) return "";
+  text = text.replace(/<think>[\s\S]*?<\/think>/gi, "");
+  text = text.replace(/<think>[\s\S]*/gi, "");
+  text = text.trim();
+  return cleanSanityMarkdown(text);
+}
+function GarudaChatWidget({ config }) {
+  return /* @__PURE__ */ jsx(ShadowHost, { children: /* @__PURE__ */ jsx(ChatWidgetInner, { config }) });
+}
+function ChatWidgetInner({ config }) {
+  const user = config.user ?? null;
+  const pathname = typeof window !== "undefined" ? window.location.pathname : "";
+  const apiClient = useMemo(
+    () => createApiClient(config),
+    [config.apiBaseUrl, config.organisationId, config.authToken, config.onUnauthorized]
+  );
+  const chatService = useMemo(() => createChatService(apiClient), [apiClient]);
+  const voiceService = useMemo(
+    () => createVoiceService(config),
+    [config.apiBaseUrl, config.supportPhone]
+  );
+  const [isOpen, setIsOpen] = useState4(false);
+  const { start, stop, isListening } = useVoiceInput((text) => {
+    setInput(text);
+  });
+  const [currentSessionId, setCurrentSessionId] = useState4(null);
+  const [input, setInput] = useState4("");
+  const [rating, setRating] = useState4(0);
+  const [feedback, setFeedback] = useState4("");
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState4(false);
+  const [isBotTyping, setIsBotTyping] = useState4(false);
+  const messagesEndRef = useRef3(null);
+  const { voiceCall, startVoiceCall, endVoiceCall, toggleMute } = useVoiceCall(voiceService);
+  const [typedCode, setTypedCode] = useState4("");
+  const [callStatus, setCallStatus] = useState4("");
+  const [showCallPopup, setShowCallPopup] = useState4(false);
+  const [callCopied, setCallCopied] = useState4(false);
+  const userName = user?.fullname?.trim() || "";
+  const [resolved, setResolved] = useState4(null);
+  const [isSubmittingRating, setIsSubmittingRating] = useState4(false);
+  const initialWelcomeMessage = useMemo(
+    () => ({
+      id: "msg_init",
+      sender: "bot",
+      type: "text",
+      text: `\u{1F44B} Welcome ${userName} to GarudaVPN Support.
+
+I'm your AI Support Assistant. I can help with:
+\u2022 Subscription Plans
+\u2022 Billing Questions
+\u2022 Refund Requests
+\u2022 VPN Connection & Network Issues
+\u2022 Device Management
+
+How can I help you today?`
+    }),
+    [userName]
+  );
+  const [messages, setMessages] = useState4([initialWelcomeMessage]);
+  useEffect3(() => {
+    setMessages((prev) => {
+      const hasInitialMessage = prev.some((message) => message.id === "msg_init");
+      if (!hasInitialMessage) return prev;
+      return prev.map((message) => message.id === "msg_init" ? initialWelcomeMessage : message);
+    });
+  }, [initialWelcomeMessage]);
+  useEffect3(() => {
+    if (messages.length === 1 && messages[0].id === "msg_init" && !messages.some((m) => m.type === "suggestions")) {
+      let suggestions = [];
+      if (pathname.includes("/billing")) {
+        suggestions = ["Show invoices", "Payment history", "Next billing date", "Refund request"];
+      } else if (pathname.includes("/devices")) {
+        suggestions = ["Remove device", "Device limit", "Login issue"];
+      } else if (pathname.includes("/subscriptions")) {
+        suggestions = ["Upgrade plan", "Compare plans", "Renew subscription", "Cancel subscription"];
+      } else if (!user) {
+        suggestions = ["Why is my VPN not connecting?", "Compare plans", "Login issue", "Install guide"];
+      } else {
+        suggestions = [
+          "Why is my VPN not connecting?",
+          "How do I request a refund?",
+          "Raise a ticket",
+          "I am facing network issues"
+        ];
+      }
+      const newMsg = {
+        id: `msg_${Date.now()}`,
+        sender: "bot",
+        type: "suggestions",
+        payload: suggestions
+      };
+      setMessages([...messages, newMsg]);
+    }
+  }, [pathname, messages]);
+  useEffect3(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isOpen]);
+  const startNewChat = () => {
+    setCurrentSessionId(crypto.randomUUID());
+    setMessages([initialWelcomeMessage]);
+    setFeedbackSubmitted(false);
+    setRating(0);
+    setResolved(null);
+  };
+  const handleMicClick = () => {
+    if (isListening) {
+      stop();
+    } else {
+      start();
+    }
+  };
+  const handleSend = async (text) => {
+    if (!text.trim()) return;
+    const userMsg = {
+      id: `msg_${Date.now()}`,
+      sender: "user",
+      text,
+      type: "text"
+    };
+    const updatedMessages = [...messages.filter((m) => m.type !== "suggestions"), userMsg];
+    setMessages(updatedMessages);
+    setInput("");
+    setIsBotTyping(true);
+    try {
+      const response = await chatService.sendMessage(
+        {
+          message: text,
+          session_id: currentSessionId ?? void 0
+        },
+        !config.authToken
+      );
+      setIsBotTyping(false);
+      const finalMessages = [...updatedMessages];
+      const cleanedMessage = cleanResponse(response.response);
+      if (response.session_id) {
+        setCurrentSessionId(response.session_id);
+      }
+      if (response.payment_link) {
+        const link = response.payment_link;
+        if (!link.amount) {
+          link.amount = extractAmount(cleanedMessage) || extractAmount(response.response) || 0;
+        }
+        if (!link.plan) {
+          link.plan = extractPlanName(cleanedMessage) || link.plan || "Subscription";
+        }
+        if (!link.billing) {
+          link.billing = extractBilling(cleanedMessage) || link.billing || "";
+        }
+        const cleanText = cleanedMessage.replace(/https?:\/\/checkout\.stripe\.com\/[^\s)]+/gi, "").replace(/\[.*?\]\(.*?\)/gi, "").trim();
+        if (cleanText) {
+          finalMessages.push({ id: crypto.randomUUID(), sender: "bot", type: "text", text: cleanText });
+        }
+        finalMessages.push({ id: crypto.randomUUID(), sender: "bot", type: "payment", payload: response.payment_link });
+      } else {
+        const stripeUrl = extractStripeUrl(cleanedMessage) || extractStripeUrl(response.response);
+        if (stripeUrl) {
+          const cleanText = cleanedMessage.replace(/https?:\/\/checkout\.stripe\.com\/[^\s)]+/gi, "").replace(/\[.*?\]\(.*?\)/gi, "").trim();
+          if (cleanText) {
+            finalMessages.push({ id: crypto.randomUUID(), sender: "bot", type: "text", text: cleanText });
+          }
+          finalMessages.push({
+            id: crypto.randomUUID(),
+            sender: "bot",
+            type: "payment",
+            payload: {
+              url: stripeUrl,
+              plan: extractPlanName(cleanedMessage) || "Subscription",
+              billing: extractBilling(cleanedMessage) || "",
+              amount: extractAmount(cleanedMessage) || 0,
+              text: "Complete your payment"
+            }
+          });
+        } else {
+          finalMessages.push({ id: crypto.randomUUID(), sender: "bot", type: "text", text: cleanedMessage });
+        }
+      }
+      if (response.followups && response.followups.length > 0) {
+        finalMessages.push({ id: crypto.randomUUID(), sender: "bot", type: "suggestions", payload: response.followups });
+      }
+      setMessages(finalMessages);
+    } catch (error) {
+      setIsBotTyping(false);
+      console.error("[GarudaChat] AI chat request failed:", error);
+      const errorMsg = {
+        id: `msg_${Date.now()}_err`,
+        sender: "bot",
+        type: "error",
+        text: "Something went wrong. Please try again after some time.",
+        payload: { retryText: text }
+      };
+      setMessages([...updatedMessages, errorMsg]);
+    }
+  };
+  const retrySend = (retryText) => {
+    setMessages((prev) => prev.filter((m) => m.type !== "error"));
+    handleSend(retryText);
+  };
+  const handleEndChat = () => {
+    if (messages.length <= 1) return;
+    if (!messages.some((m) => m.type === "resolution" || m.type === "rating")) {
+      setMessages([...messages, { id: `msg_${Date.now()}_end`, sender: "bot", type: "resolution" }]);
+    }
+  };
+  const handleResolution = (isResolved) => {
+    setResolved(isResolved);
+    const filtered = messages.filter((m) => m.type !== "resolution" && m.type !== "rating");
+    setMessages([...filtered, { id: `msg_${Date.now()}_rate`, sender: "bot", type: "rating" }]);
+  };
+  const submitRating = async () => {
+    if (rating === 0 || !currentSessionId || isSubmittingRating) {
+      return;
+    }
+    setIsSubmittingRating(true);
+    try {
+      const response = await fetch(`${config.apiBaseUrl.replace(/\/$/, "")}/api/v1/ratings/respond`, {
+        method: "POST",
+        headers: {
+          accept: "application/json",
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          session_id: currentSessionId,
+          user_id: user?.id || "",
+          user_email: user?.email || "",
+          rating,
+          content: feedback || "",
+          issue_solved: resolved === true ? "yes" : resolved === false ? "no" : ""
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`Rating submission failed: ${response.status}`);
+      }
+      const data = await response.json();
+      if (data.status === "success") {
+        setFeedbackSubmitted(true);
+        const filteredMessages = messages.filter((m) => m.type !== "rating");
+        const responseMessage = {
+          id: `msg_${Date.now()}_response`,
+          sender: "bot",
+          type: "text",
+          text: data.response
+        };
+        if (resolved === false) {
+          setMessages([
+            ...filteredMessages,
+            responseMessage,
+            {
+              id: `msg_${Date.now()}_opts`,
+              sender: "bot",
+              type: "suggestions",
+              payload: ["Raise a ticket", "Browse Help Articles"]
+            }
+          ]);
+        } else {
+          setMessages([...filteredMessages, responseMessage]);
+        }
+        setRating(0);
+        setFeedback("");
+        setResolved(null);
+      }
+    } catch (error) {
+      console.error("[GarudaChat] Failed to submit rating:", error);
+    } finally {
+      setIsSubmittingRating(false);
+    }
+  };
+  const isCallConnected = voiceCall.isActive && voiceCall.status === "in-call";
+  const appendDigit = (digit) => {
+    if (!isCallConnected) {
+      setCallStatus("Wait for the call to connect before entering the code.");
+      return;
+    }
+    setTypedCode((prev) => {
+      const next = (prev + digit).slice(-6);
+      setCallStatus(next.length === 6 ? "Press Enter to send the code." : "");
+      return next;
+    });
+  };
+  const submitCode = async () => {
+    if (!isCallConnected) {
+      setCallStatus("Wait for the call to connect before entering the code.");
+      return;
+    }
+    if (!typedCode) {
+      setCallStatus("Enter the 6-digit code first.");
+      return;
+    }
+    const code = typedCode;
+    setTypedCode("");
+    setCallStatus("Code sent - verifying...");
+    try {
+      const data = await voiceService.submitOtp(code, {
+        callSid: voiceCall.callSid || void 0,
+        clientRef: voiceCall.clientRef || void 0
+      });
+      if (data && data.status === "ok") {
+        setCallStatus(
+          data.detail === "verified" ? "Code verified! The bot will continue shortly..." : "Code received by server - verifying..."
+        );
+      } else {
+        const detail = data && data.detail || "unknown";
+        setCallStatus(detail === "incorrect_code" ? "Incorrect code. Try again." : "Submit warning: " + detail);
+      }
+    } catch (err) {
+      console.error("[GarudaChat] submit-otp error:", err);
+      setCallStatus("Submit error: " + (err.message || "unknown"));
+    }
+  };
+  const resendCode = async () => {
+    if (!voiceCall.clientRef && !voiceCall.callSid) {
+      setCallStatus("No active call to resend the code.");
+      return;
+    }
+    setCallStatus("Sending a new code...");
+    try {
+      const data = await voiceService.submitOtp("RESEND", {
+        callSid: voiceCall.callSid || void 0,
+        clientRef: voiceCall.clientRef || void 0
+      });
+      if (data && data.status === "ok") {
+        setCallStatus("New code sent to your email. Enter it on the keypad.");
+      } else {
+        setCallStatus("Resend failed: " + (data && data.detail || "unknown"));
+      }
+    } catch (err) {
+      setCallStatus("Resend error: " + (err.message || "unknown"));
+    }
+  };
+  useEffect3(() => {
+    if (!isCallConnected) return;
+    const onKeyDown = (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (/^[0-9#*]$/.test(e.key)) {
+        e.preventDefault();
+        appendDigit(e.key);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        submitCode();
+      } else if (e.key === "Backspace") {
+        e.preventDefault();
+        setTypedCode((prev) => prev.slice(0, -1));
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isCallConnected, typedCode, voiceCall]);
+  useEffect3(() => {
+    if (!voiceCall.isActive) {
+      setTypedCode("");
+      setCallStatus("");
+    }
+  }, [voiceCall.isActive]);
+  useEffect3(() => {
+    if (voiceCall.status === "in-call" && voiceCall.isActive) {
+      setCallStatus(
+        voiceCall.callSid ? `Connected (CallSid: ${voiceCall.callSid}). When the bot asks for the code, type it on the keypad and press Enter.` : "Connected. When the bot asks for the code, type it on the keypad and press Enter."
+      );
+    }
+  }, [voiceCall.status, voiceCall.isActive]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { scale: 0, opacity: 0 },
+        animate: { scale: 1, opacity: 1 },
+        exit: { scale: 0, opacity: 0 },
+        className: "fixed bottom-6 right-6 z-50 flex items-center group",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-full mb-4 right-0 bg-navy-800 text-foreground px-4 py-2 rounded-xl text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none shadow-[0_0_15px_rgba(0,0,0,0.5)] border border-primary/20", children: "How can I help you?" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsOpen(true),
+              className: "w-16 h-16 bg-gradient-to-tr from-primary to-teal-400 text-navy-900 rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(32,201,151,0.8)] hover:scale-105 transition-all duration-300 border border-white/20 animate-pulse",
+              children: /* @__PURE__ */ jsx(Bot, { size: 32 })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 20, scale: 0.95 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: { opacity: 0, y: 20, scale: 0.95 },
+        className: "fixed bottom-6 left-3 right-3 sm:left-auto sm:right-6 z-50 w-auto sm:w-full max-w-[500px] h-[750px] max-h-[90vh] bg-navy-900 backdrop-blur-2xl border border-foreground/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)] shadow-primary/10 rounded-3xl flex flex-col overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "h-16 border-b border-white/10 bg-navy-800/50 flex items-center justify-between px-5 shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: startNewChat,
+                  className: "text-gray-400 hover:text-white transition-colors",
+                  title: "New chat",
+                  children: /* @__PURE__ */ jsx(Plus, { size: 20 })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-gradient-to-br from-primary/30 to-teal-500/30 rounded-xl flex items-center justify-center border border-primary/20 shadow-inner", children: /* @__PURE__ */ jsx(ShieldCheck, { size: 20, className: "text-primary" }) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h3", { className: "font-bold text-sm text-white", children: "Aegis AI Support" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 font-medium tracking-wide", children: "ONLINE" })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              config.supportPhone && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setShowCallPopup(true),
+                  className: "flex items-center justify-center text-gray-400 hover:text-green-400 transition-colors p-2 hover:bg-green-400/10 rounded-full",
+                  title: "Voice Call",
+                  children: /* @__PURE__ */ jsx(Phone, { size: 18 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleEndChat,
+                  className: "text-xs font-bold text-gray-400 hover:text-red-400 transition-colors px-3 py-1.5 hover:bg-red-400/10 rounded-lg mr-1 border border-transparent hover:border-red-400/20",
+                  children: "End Chat"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  className: "text-gray-400 hover:text-white transition-colors p-2 hover:bg-white/5 rounded-full",
+                  children: /* @__PURE__ */ jsx(X, { size: 20 })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden relative", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full w-full relative z-0 bg-gradient-to-b from-navy-900/50 to-navy-900", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-hidden p-5 space-y-5 custom-scrollbar", children: [
+                messages.map((msg) => /* @__PURE__ */ jsxs("div", { id: msg.id, className: `flex flex-col ${msg.sender === "user" ? "items-end" : "items-start"}`, children: [
+                  msg.sender === "bot" && msg.type !== "system" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1 ml-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-primary" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-primary", children: "AI Assistant" })
+                  ] }),
+                  msg.type === "text" && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `max-w-[85%] rounded-2xl px-5 py-3 text-base shadow-sm break-words overflow-hidden whitespace-pre-wrap chat-markdown ${msg.sender === "user" ? "bg-gradient-to-r from-primary to-teal-400 text-navy-900 font-medium rounded-tr-sm" : "bg-navy-800/80 backdrop-blur-sm border border-white/10 text-foreground rounded-tl-sm"}`,
+                      children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: msg.text })
+                    }
+                  ),
+                  msg.type === "error" && /* @__PURE__ */ jsxs("div", { className: "max-w-[85%] rounded-2xl px-5 py-3 border border-red-500/30 bg-red-500/10 text-foreground rounded-tl-sm", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-base text-red-300 flex items-start gap-2", children: /* @__PURE__ */ jsx("span", { children: msg.text }) }),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => retrySend(msg.payload?.retryText),
+                        className: "mt-3 flex items-center gap-2 px-4 py-2 bg-primary text-navy-900 rounded-xl text-sm font-bold hover:bg-primary/90 transition-colors",
+                        children: [
+                          /* @__PURE__ */ jsx(RefreshCcw, { size: 14 }),
+                          "Try Again"
+                        ]
+                      }
+                    )
+                  ] }),
+                  msg.type === "suggestions" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-3 max-w-[90%]", children: msg.payload.map((suggestion, idx) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        handleSend(suggestion);
+                      },
+                      className: "px-4 py-2 bg-navy-800/50 border border-primary/30 text-primary rounded-xl text-sm hover:bg-primary/10 hover:border-primary/50 transition-all font-medium shadow-sm hover:shadow-[0_0_10px_rgba(32,201,151,0.15)]",
+                      children: suggestion
+                    },
+                    idx
+                  )) }),
+                  msg.type === "resolution" && /* @__PURE__ */ jsxs("div", { className: "mt-3 w-full max-w-[85%] bg-navy-800/80 backdrop-blur-md border border-white/10 rounded-2xl p-5 shadow-lg", children: [
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-foreground font-medium mb-4 flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(CheckCircle2, { size: 18, className: "text-primary" }),
+                      " Was your issue resolved?"
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => handleResolution(true),
+                          className: "flex-1 py-2 bg-green-500/10 text-green-500 border border-green-500/20 rounded-xl text-sm font-bold hover:bg-green-500/20 hover:border-green-500/40 transition-all shadow-sm",
+                          children: "Yes"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => handleResolution(false),
+                          className: "flex-1 py-2 bg-red-500/10 text-red-500 border border-red-500/20 rounded-xl text-sm font-bold hover:bg-red-500/20 hover:border-red-500/40 transition-all shadow-sm",
+                          children: "No"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  msg.type === "rating" && /* @__PURE__ */ jsxs("div", { className: "mt-3 w-full max-w-[85%] bg-navy-800/80 backdrop-blur-md border border-white/10 rounded-2xl p-5 shadow-lg", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-medium mb-3", children: "Rate your experience" }),
+                    /* @__PURE__ */ jsx("div", { className: "flex gap-1 mb-4", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => setRating(star),
+                        className: `transition-all hover:scale-110 ${rating >= star ? "text-yellow-400 drop-shadow-[0_0_5px_rgba(250,204,21,0.5)]" : "text-gray-600 hover:text-yellow-400/50"}`,
+                        children: /* @__PURE__ */ jsx(Star, { size: 24, fill: "currentColor" })
+                      },
+                      star
+                    )) }),
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        value: feedback,
+                        onChange: (e) => setFeedback(e.target.value),
+                        className: "w-full bg-navy-900/50 border border-white/10 rounded-xl p-3 text-sm text-foreground focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none resize-none transition-all placeholder-gray-500",
+                        placeholder: "Leave feedback (optional)...",
+                        rows: 2
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: submitRating,
+                        disabled: rating === 0 || isSubmittingRating,
+                        className: "mt-3 w-full py-2.5 bg-primary text-navy-900 font-bold rounded-xl text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors shadow-[0_0_15px_rgba(32,201,151,0.2)]",
+                        children: isSubmittingRating ? "Submitting..." : "Submit Feedback"
+                      }
+                    )
+                  ] }),
+                  msg.type === "payment" && /* @__PURE__ */ jsx("div", { className: "w-full max-w-[85%] mt-3 overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-primary/30 bg-gradient-to-br from-primary/10 to-cyan-500/10 p-5 overflow-hidden break-words", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                      /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: msg.payload.plan }),
+                      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: "Stripe Secure Checkout" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-5", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                        /* @__PURE__ */ jsx("span", { children: "Plan" }),
+                        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: msg.payload.plan })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                        /* @__PURE__ */ jsx("span", { children: "Billing" }),
+                        /* @__PURE__ */ jsx("span", { className: "capitalize", children: msg.payload.billing })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                        /* @__PURE__ */ jsx("span", { children: "Amount" }),
+                        /* @__PURE__ */ jsxs("span", { className: "text-primary font-bold text-lg", children: [
+                          "$",
+                          msg.payload.amount
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: msg.payload.url,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: "w-full rounded-xl bg-primary py-3 font-bold text-navy-900 hover:opacity-90 text-center block",
+                          children: "Continue to Secure Payment"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => handleSend("I have completed the payment"),
+                          className: "w-full rounded-xl border border-primary/30 py-2.5 font-semibold text-primary hover:bg-primary/10 text-sm",
+                          children: "\u2713 Payment Done"
+                        }
+                      )
+                    ] })
+                  ] }) }),
+                  msg.type === "article" && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      onClick: () => {
+                        setIsOpen(false);
+                        config.onNavigateToKnowledgeBase?.();
+                      },
+                      className: "mt-3 w-full max-w-[85%] bg-navy-800/80 backdrop-blur-md border border-white/10 rounded-2xl p-4 hover:border-primary/40 hover:shadow-[0_0_15px_rgba(32,201,151,0.1)] transition-all cursor-pointer group",
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
+                          /* @__PURE__ */ jsx("div", { className: "p-2 bg-primary/10 text-primary rounded-xl shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(FileText, { size: 18 }) }),
+                          /* @__PURE__ */ jsx("h4", { className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors line-clamp-2 leading-tight", children: msg.payload.title })
+                        ] }),
+                        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 line-clamp-2 mb-3 leading-relaxed", children: msg.payload.content }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-white/5 pt-3", children: [
+                          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-500 font-medium uppercase tracking-wider", children: [
+                            msg.payload.readTime,
+                            " read"
+                          ] }),
+                          /* @__PURE__ */ jsxs("span", { className: "text-xs text-primary font-bold flex items-center group-hover:translate-x-1 transition-transform", children: [
+                            "Read Article ",
+                            /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-1" })
+                          ] })
+                        ] })
+                      ]
+                    }
+                  ),
+                  msg.type === "refund" && /* @__PURE__ */ jsxs("div", { className: "mt-3 w-full max-w-[85%] bg-navy-800/80 backdrop-blur-md border border-white/10 rounded-2xl p-5 shadow-lg", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+                      /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ jsx(RefreshCcw, { size: 20, className: "text-primary" }) }),
+                      /* @__PURE__ */ jsx("h4", { className: "text-sm font-bold text-foreground", children: "Refund Request" })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-5 leading-relaxed", children: "Your current plan is eligible for a refund under our 30-day guarantee." }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => handleSend("Create Refund Request"),
+                        className: "w-full py-2.5 bg-primary/10 text-primary border border-primary/20 rounded-xl text-sm font-bold hover:bg-primary/20 transition-colors shadow-sm",
+                        children: "Proceed with Refund"
+                      }
+                    )
+                  ] })
+                ] }, msg.id)),
+                isBotTyping && /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, className: "flex items-start", children: /* @__PURE__ */ jsx("div", { className: "bg-navy-800/80 backdrop-blur-sm border border-white/10 rounded-2xl rounded-tl-sm px-5 py-4 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "w-2 h-2 rounded-full bg-primary",
+                      animate: { y: [0, -5, 0] },
+                      transition: { duration: 0.6, repeat: Infinity, delay: 0 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "w-2 h-2 rounded-full bg-primary",
+                      animate: { y: [0, -5, 0] },
+                      transition: { duration: 0.6, repeat: Infinity, delay: 0.2 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "w-2 h-2 rounded-full bg-primary",
+                      animate: { y: [0, -5, 0] },
+                      transition: { duration: 0.6, repeat: Infinity, delay: 0.4 }
+                    }
+                  )
+                ] }) }) }),
+                /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "p-4 border-t border-white/10 bg-navy-800/80 backdrop-blur-md shrink-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: input,
+                      onChange: (e) => setInput(e.target.value),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          handleSend(input);
+                        }
+                      },
+                      placeholder: isListening ? "Listening..." : "Ask Aegis AI anything...",
+                      className: "w-full bg-navy-900 border border-white/10 rounded-2xl py-3.5 pl-5 pr-24 text-base text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/50 transition-all shadow-inner"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleMicClick,
+                      className: `absolute right-14 w-10 h-10 rounded-xl flex items-center justify-center transition-all ${isListening ? "bg-red-500 text-white animate-pulse" : "bg-navy-700 text-gray-300 hover:text-white"}`,
+                      children: isListening ? /* @__PURE__ */ jsx(CircleStop, { size: 30 }) : /* @__PURE__ */ jsx(Mic, { size: 18 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => handleSend(input),
+                      disabled: !input.trim(),
+                      className: "absolute right-2 w-10 h-10 bg-gradient-to-r from-primary to-teal-400 text-navy-900 rounded-xl flex items-center justify-center disabled:opacity-50",
+                      children: /* @__PURE__ */ jsx(Send, { size: 16 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "text-center mt-2", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-500", children: "Aegis AI can make mistakes. Verify important info." }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: showCallPopup && config.supportPhone && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                className: "absolute inset-0 z-50 bg-navy-900/95 backdrop-blur-xl flex items-center justify-center p-6",
+                children: /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    initial: { scale: 0.9, opacity: 0 },
+                    animate: { scale: 1, opacity: 1 },
+                    exit: { scale: 0.9, opacity: 0 },
+                    transition: { type: "spring", bounce: 0, duration: 0.3 },
+                    className: "w-full max-w-sm bg-navy-800/90 backdrop-blur-md border border-white/10 rounded-3xl p-6 shadow-2xl text-center",
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "w-14 h-14 bg-gradient-to-br from-primary/30 to-teal-500/30 rounded-full flex items-center justify-center mx-auto mb-4 border border-primary/20", children: /* @__PURE__ */ jsx(Phone, { size: 24, className: "text-primary" }) }),
+                      /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-white mb-2", children: "Voice Support" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 mb-5 leading-relaxed", children: "If you want this chatbot experience in voice, then call to this number:" }),
+                      /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: `tel:${config.supportPhone.replace(/[^+\d]/g, "")}`,
+                          className: "text-2xl font-bold text-primary tracking-wider hover:opacity-80 transition-opacity",
+                          children: config.supportPhone
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-6", children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => {
+                              navigator.clipboard.writeText(config.supportPhone);
+                              setCallCopied(true);
+                              setTimeout(() => setCallCopied(false), 2e3);
+                            },
+                            className: "flex-1 py-2.5 bg-navy-700 text-gray-200 border border-white/10 rounded-xl text-sm font-bold hover:bg-navy-600 transition-colors",
+                            children: callCopied ? "Copied!" : "Copy Number"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => setShowCallPopup(false),
+                            className: "flex-1 py-2.5 bg-navy-700 text-gray-200 border border-white/10 rounded-xl text-sm font-bold hover:bg-navy-600 transition-colors",
+                            children: "Close"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => {
+                            setShowCallPopup(false);
+                            startVoiceCall();
+                          },
+                          className: "mt-3 w-full py-2.5 bg-primary text-navy-900 rounded-xl text-sm font-bold hover:bg-primary/90 transition-colors shadow-[0_0_15px_rgba(32,201,151,0.2)]",
+                          children: "Call Now"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ) }),
+            voiceCall.isActive && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 bg-navy-900/98 backdrop-blur-xl flex items-center justify-center overflow-hidden p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2.5 w-full max-w-[240px]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-gradient-to-br from-primary/30 to-teal-500/30 rounded-full flex items-center justify-center border-2 border-primary/30", children: /* @__PURE__ */ jsx(Phone, { size: 24, className: "text-primary" }) }),
+                voiceCall.status === "in-call" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full border-2 border-primary/40 animate-ping" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("h3", { className: "font-bold text-white text-sm", children: "Aegis AI Support" }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-400 mt-0.5", children: [
+                  voiceCall.status === "connecting" && "Connecting...",
+                  voiceCall.status === "in-call" && `In call \xB7 ${String(Math.floor(voiceCall.duration / 60)).padStart(2, "0")}:${String(
+                    voiceCall.duration % 60
+                  ).padStart(2, "0")}`
+                ] })
+              ] }),
+              isCallConnected && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xl tracking-[0.35em] min-h-[28px] text-center text-white border-b border-white/15 pb-0.5 w-full", children: typedCode }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1.5 w-full", children: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "0", "#"].map((d) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => appendDigit(d),
+                    className: "py-1 text-base font-semibold bg-navy-800 hover:bg-navy-700 text-white rounded-lg border border-white/10 active:scale-95 transition-all",
+                    children: d
+                  },
+                  d
+                )) }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-1.5 w-full", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setTypedCode("");
+                        setCallStatus("");
+                      },
+                      className: "py-1 text-xs bg-navy-800 text-gray-300 rounded-lg border border-white/10 hover:bg-navy-700 transition-colors",
+                      children: "Clear"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: submitCode,
+                      className: "py-1 text-xs font-bold bg-primary text-navy-900 rounded-lg hover:bg-primary/90 transition-colors",
+                      children: "Enter \u2713"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: resendCode,
+                    className: "py-0.5 text-[10px] text-primary underline underline-offset-4 hover:text-primary/80 transition-colors",
+                    children: "Resend code"
+                  }
+                ),
+                callStatus && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-center text-gray-400 min-h-[12px] leading-tight", children: callStatus })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                isCallConnected && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: toggleMute,
+                    className: `w-11 h-11 rounded-full flex items-center justify-center transition-colors ${voiceCall.isMuted ? "bg-yellow-500 hover:bg-yellow-600" : "bg-navy-700 hover:bg-navy-600"}`,
+                    title: voiceCall.isMuted ? "Unmute" : "Mute",
+                    children: voiceCall.isMuted ? /* @__PURE__ */ jsx(MicOff, { size: 18, className: "text-white" }) : /* @__PURE__ */ jsx(Mic, { size: 18, className: "text-white" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: endVoiceCall,
+                    className: "w-12 h-12 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center transition-colors shadow-lg shadow-red-500/30",
+                    children: /* @__PURE__ */ jsx(PhoneOff, { size: 20, className: "text-white" })
+                  }
+                )
+              ] })
+            ] }) })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  GarudaChatWidget
+};