@maebgch/rcs-emulator 0.1.11 → 0.1.13

package/dist/rcs-emulator.es.js

@@ -1,109 +1,109 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { createContext as te, useContext as ne, useReducer as re, useRef as W, useEffect as S, useCallback as M, useState as z, memo as g, useMemo as V } from "react";
-function q(r) {
-  return "reply" in r;
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { createContext as re, useContext as te, useReducer as se, useRef as W, useEffect as j, useCallback as $, useState as A, memo as p, useMemo as V } from "react";
+function Y(s) {
+  return "reply" in s;
 }
-function $(r) {
-  return "action" in r;
+function I(s) {
+  return "action" in s;
 }
-function Je(r) {
-  if (!$(r)) return !1;
-  const { urlAction: t } = r.action;
-  return t?.openUrl?.application === "WEBVIEW";
+function qe(s) {
+  if (!I(s)) return !1;
+  const { urlAction: r } = s.action;
+  return r?.openUrl?.application === "WEBVIEW";
 }
-function oe(r) {
-  const { urlAction: t } = r.action;
-  return t?.openUrl?.application === "WEBVIEW" ? t.openUrl : null;
+function oe(s) {
+  const { urlAction: r } = s.action;
+  return r?.openUrl?.application === "WEBVIEW" ? r.openUrl : null;
 }
-const se = {
+const ae = {
   name: "Business",
   verified: !1
-}, ie = {
+}, le = {
   currentMessageId: null,
   chatHistory: [],
   isTyping: !1,
   error: null
-}, Q = te(null);
-function X({
-  children: r,
-  theme: t,
-  device: n,
+}, Q = re(null);
+function Z({
+  children: s,
+  theme: r,
+  device: t,
   businessInfo: o,
-  state: s,
-  showSuggestions: a,
-  isProfileOpen: i,
+  state: a,
+  showSuggestions: c,
+  isProfileOpen: l,
   toggleProfile: u,
-  onReply: c,
-  onAction: d,
-  webView: m,
+  onReply: m,
+  onAction: i,
+  webView: h,
   openWebView: f,
   closeWebView: v
 }) {
-  const x = {
-    theme: t,
-    device: n,
-    businessInfo: { ...se, ...o },
-    state: { ...ie, ...s },
-    showSuggestions: a,
-    isProfileOpen: i,
+  const b = {
+    theme: r,
+    device: t,
+    businessInfo: { ...ae, ...o },
+    state: { ...le, ...a },
+    showSuggestions: c,
+    isProfileOpen: l,
     toggleProfile: u,
-    handleReply: c,
-    handleAction: d,
-    webView: m,
+    handleReply: m,
+    handleAction: i,
+    webView: h,
     openWebView: f,
     closeWebView: v
   };
-  return /* @__PURE__ */ e(Q.Provider, { value: x, children: r });
+  return /* @__PURE__ */ e(Q.Provider, { value: b, children: s });
 }
-function N() {
-  const r = ne(Q);
-  if (!r)
+function k() {
+  const s = te(Q);
+  if (!s)
     throw new Error("useEmulator must be used within an EmulatorProvider");
-  return r;
+  return s;
 }
-function Z(r) {
-  const t = Object.values(r.messages);
-  return t.find((n) => n.is_first) || t[0] || null;
+function K(s) {
+  const r = Object.values(s.messages);
+  return r.find((t) => t.is_first) || r[0] || null;
 }
-function R(r, t) {
-  return r.messages[t] || null;
+function R(s, r) {
+  return s.messages[r] || null;
 }
-function O(r, t) {
-  const n = r.responses?.keyword?.keyword_response?.choices;
-  return n && n[t]?.next_message || null;
+function O(s, r) {
+  const t = s.responses?.keyword?.keyword_response?.choices;
+  return t && t[r]?.next_message || null;
 }
-function H(r, t) {
-  const n = r.parts, o = ae(n), s = ce(n);
+function H(s, r) {
+  const t = s.parts, o = ce(t), a = ie(t);
   return {
-    id: `${r.id}-${t}-${Date.now()}`,
+    id: `${s.id}-${r}-${Date.now()}`,
     sender: "business",
     content: o,
     timestamp: Date.now(),
-    suggestions: s
+    suggestions: a
   };
 }
-function ae(r) {
-  for (const t of r) {
-    const n = t.RCSMessage;
-    if (n.textMessage)
+function ce(s) {
+  for (const r of s) {
+    const t = r.RCSMessage;
+    if (t.textMessage)
       return {
         type: "text",
-        text: n.textMessage
+        text: t.textMessage
       };
-    const o = n.richcardMessage?.message?.generalPurposeCard;
+    const o = t.richcardMessage?.message?.generalPurposeCard;
     if (o)
       return {
         type: "richcard",
         card: P(o.content, o.layout)
       };
-    const s = n.richcardMessage?.message?.generalPurposeCardCarousel;
-    if (s)
+    const a = t.richcardMessage?.message?.generalPurposeCardCarousel;
+    if (a)
       return {
         type: "carousel",
-        cards: s.content.map(
-          (a) => P(a, {
+        cards: a.content.map(
+          (c) => P(c, {
             cardOrientation: "VERTICAL",
-            cardWidth: s.layout.cardWidth
+            cardWidth: a.layout.cardWidth
           })
         )
       };
@@ -113,36 +113,36 @@ function ae(r) {
     text: "[Unsupported message type]"
   };
 }
-function P(r, t) {
-  const n = () => {
-    if (r.media) {
-      if (r.media.mediaUrl) return r.media.mediaUrl;
-      if (r.media.contentInfo?.fileUrl) return r.media.contentInfo.fileUrl;
+function P(s, r) {
+  const t = () => {
+    if (s.media) {
+      if (s.media.mediaUrl) return s.media.mediaUrl;
+      if (s.media.contentInfo?.fileUrl) return s.media.contentInfo.fileUrl;
     }
   }, o = () => {
-    if (r.media) {
-      if (r.media.thumbnailUri) return r.media.thumbnailUri;
-      if (r.media.contentInfo?.thumbnailUrl) return r.media.contentInfo.thumbnailUrl;
+    if (s.media) {
+      if (s.media.thumbnailUri) return s.media.thumbnailUri;
+      if (s.media.contentInfo?.thumbnailUrl) return s.media.contentInfo.thumbnailUrl;
     }
-  }, s = n();
+  }, a = t();
   return {
-    title: r.title,
-    description: r.description,
-    media: s ? {
-      url: s,
-      height: le(r.media?.height || "MEDIUM_HEIGHT"),
+    title: s.title,
+    description: s.description,
+    media: a ? {
+      url: a,
+      height: ne(s.media?.height || "MEDIUM_HEIGHT"),
       thumbnailUrl: o()
     } : void 0,
-    suggestions: r.suggestions,
+    suggestions: s.suggestions,
     layout: {
-      orientation: t.cardOrientation === "HORIZONTAL" ? "horizontal" : "vertical",
-      width: t.cardWidth === "SMALL_WIDTH" ? "small" : "medium",
-      imageAlignment: t.imageAlignment === "RIGHT" ? "right" : "left"
+      orientation: r.cardOrientation === "HORIZONTAL" ? "horizontal" : "vertical",
+      width: r.cardWidth === "SMALL_WIDTH" ? "small" : "medium",
+      imageAlignment: r.imageAlignment === "RIGHT" ? "right" : "left"
     }
   };
 }
-function le(r) {
-  switch (r) {
+function ne(s) {
+  switch (s) {
     case "SHORT_HEIGHT":
       return "short";
     case "TALL_HEIGHT":
@@ -151,488 +151,494 @@ function le(r) {
       return "medium";
   }
 }
-function ce(r) {
-  const t = [];
-  for (const n of r) {
-    const o = n.RCSMessage;
-    o.suggestedChipList?.suggestions && t.push(...o.suggestedChipList.suggestions);
+function ie(s) {
+  const r = [];
+  for (const t of s) {
+    const o = t.RCSMessage;
+    o.suggestedChipList?.suggestions && r.push(...o.suggestedChipList.suggestions);
   }
-  return t;
+  return r;
 }
-function de(r) {
+function ue(s) {
   return {
     id: `user-${Date.now()}`,
     sender: "user",
     content: {
       type: "userReply",
-      text: r
+      text: s
     },
     timestamp: Date.now()
   };
 }
-function ue(r) {
-  if (!r || typeof r != "object") return !1;
-  const t = r;
-  if (typeof t.name != "string" || !t.messages || typeof t.messages != "object") return !1;
-  const n = Object.values(t.messages);
-  if (n.length === 0) return !1;
-  for (const o of n) {
+function me(s) {
+  if (!s || typeof s != "object") return !1;
+  const r = s;
+  if (typeof r.name != "string" || !r.messages || typeof r.messages != "object") return !1;
+  const t = Object.values(r.messages);
+  if (t.length === 0) return !1;
+  for (const o of t) {
     if (!o || typeof o != "object") return !1;
-    const s = o;
-    if (typeof s.id != "string" || !Array.isArray(s.parts)) return !1;
+    const a = o;
+    if (typeof a.id != "string" || !Array.isArray(a.parts)) return !1;
   }
   return !0;
 }
-function he(r) {
-  const t = Z(r);
-  if (!t || !t.parts.length) return "New message";
-  const o = t.parts[0].RCSMessage;
+function de(s) {
+  const r = K(s);
+  if (!r || !r.parts.length) return "New message";
+  const o = r.parts[0].RCSMessage;
   if (o.textMessage)
     return o.textMessage.slice(0, 50) + (o.textMessage.length > 50 ? "..." : "");
-  const s = o.richcardMessage?.message?.generalPurposeCard;
-  if (s?.content.title)
-    return s.content.title;
-  const a = o.richcardMessage?.message?.generalPurposeCardCarousel;
-  return a?.content[0]?.title ? a.content[0].title : "New message";
+  const a = o.richcardMessage?.message?.generalPurposeCard;
+  if (a?.content.title)
+    return a.content.title;
+  const c = o.richcardMessage?.message?.generalPurposeCardCarousel;
+  return c?.content[0]?.title ? c.content[0].title : "New message";
 }
-const K = {
+const X = {
   currentMessageId: null,
   chatHistory: [],
   isTyping: !1,
   error: null
 };
-function me(r, t) {
-  switch (t.type) {
+function he(s, r) {
+  switch (r.type) {
     case "INIT":
       return {
-        ...r,
-        currentMessageId: t.messageId,
+        ...s,
+        currentMessageId: r.messageId,
         error: null
       };
     case "ADD_BUSINESS_MESSAGE":
       return {
-        ...r,
-        chatHistory: [...r.chatHistory, t.message],
+        ...s,
+        chatHistory: [...s.chatHistory, r.message],
         isTyping: !1
       };
     case "ADD_USER_REPLY": {
-      const n = de(t.text), o = r.chatHistory.map(
-        (s, a) => a === r.chatHistory.length - 1 ? { ...s, suggestions: void 0 } : s
+      const t = ue(r.text), o = s.chatHistory.map(
+        (a, c) => c === s.chatHistory.length - 1 ? { ...a, suggestions: void 0 } : a
       );
       return {
-        ...r,
-        chatHistory: [...o, n]
+        ...s,
+        chatHistory: [...o, t]
       };
     }
     case "SET_TYPING":
       return {
-        ...r,
-        isTyping: t.isTyping
+        ...s,
+        isTyping: r.isTyping
       };
     case "NAVIGATE_TO":
       return {
-        ...r,
-        currentMessageId: t.messageId
+        ...s,
+        currentMessageId: r.messageId
       };
     case "SET_ERROR":
       return {
-        ...r,
-        error: t.error,
+        ...s,
+        error: r.error,
         isTyping: !1
       };
     case "RESET":
-      return K;
+      return X;
     default:
-      return r;
+      return s;
   }
 }
 function fe({
-  flow: r,
-  onUserReply: t,
-  typingDelay: n = 800
+  flow: s,
+  onUserReply: r,
+  typingDelay: t = 800
 }) {
-  const [o, s] = re(me, K), a = W(0), i = W(!1);
-  S(() => {
-    if (i.current) return;
-    i.current = !0;
-    const m = Z(r);
-    if (!m) {
-      s({
+  const [o, a] = se(he, X), c = W(0), l = W(!1);
+  j(() => {
+    if (l.current) return;
+    l.current = !0;
+    const h = K(s);
+    if (!h) {
+      a({
         type: "SET_ERROR",
         error: "No first message found in conversation flow"
       });
       return;
     }
-    s({ type: "INIT", messageId: m.id });
+    a({ type: "INIT", messageId: h.id });
     const f = H(
-      m,
-      a.current++
+      h,
+      c.current++
     );
-    s({ type: "ADD_BUSINESS_MESSAGE", message: f });
-  }, [r]);
-  const u = M(
-    (m) => {
-      if (!q(m)) return;
-      const { displayText: f, postback: v } = m.reply, x = v.data;
-      s({ type: "ADD_USER_REPLY", text: f, postbackData: x });
-      const L = {
+    a({ type: "ADD_BUSINESS_MESSAGE", message: f });
+  }, [s]);
+  const u = $(
+    (h) => {
+      if (!Y(h)) return;
+      const { displayText: f, postback: v } = h.reply, b = v.data;
+      a({ type: "ADD_USER_REPLY", text: f, postbackData: b });
+      const N = {
         type: "reply",
-        postbackData: x,
+        postbackData: b,
         displayText: f,
         timestamp: Date.now()
       };
-      t(L);
-      const b = o.currentMessageId ? R(r, o.currentMessageId) : null;
-      if (!b) {
-        s({ type: "SET_ERROR", error: "Current message not found" });
+      r(N);
+      const y = o.currentMessageId ? R(s, o.currentMessageId) : null;
+      if (!y) {
+        a({ type: "SET_ERROR", error: "Current message not found" });
         return;
       }
-      const p = O(b, x);
-      if (!p)
+      const w = O(y, b);
+      if (!w)
         return;
-      const y = R(r, p);
-      if (!y) {
-        s({
+      const g = R(s, w);
+      if (!g) {
+        a({
           type: "SET_ERROR",
-          error: `Next message "${p}" not found`
+          error: `Next message "${w}" not found`
         });
         return;
       }
-      s({ type: "SET_TYPING", isTyping: !0 }), s({ type: "NAVIGATE_TO", messageId: p }), setTimeout(() => {
-        const h = H(
-          y,
-          a.current++
+      a({ type: "SET_TYPING", isTyping: !0 }), a({ type: "NAVIGATE_TO", messageId: w }), setTimeout(() => {
+        const d = H(
+          g,
+          c.current++
         );
-        s({ type: "ADD_BUSINESS_MESSAGE", message: h });
-      }, n);
+        a({ type: "ADD_BUSINESS_MESSAGE", message: d });
+      }, t);
     },
-    [r, o.currentMessageId, t, n]
-  ), c = M(
-    (m) => {
-      if (!$(m)) return;
+    [s, o.currentMessageId, r, t]
+  ), m = $(
+    (h) => {
+      if (!I(h)) return;
       const {
         displayText: f,
         postback: v,
-        openUrlAction: x,
-        dialAction: L,
-        dialerAction: b,
-        mapAction: p,
-        viewLocationAction: y
-      } = m.action, h = v.data, w = L?.phoneNumber || b?.dialPhoneNumber?.phoneNumber, C = p?.showLocation?.location || y?.latLong;
-      let I;
-      x ? I = { type: "openUrl", url: x.url } : w ? I = { type: "dial", phoneNumber: w } : C && (I = {
+        openUrlAction: b,
+        dialAction: N,
+        dialerAction: y,
+        mapAction: w,
+        viewLocationAction: g
+      } = h.action, d = v.data, x = N?.phoneNumber || y?.dialPhoneNumber?.phoneNumber, L = w?.showLocation?.location || g?.latLong;
+      let z;
+      b ? z = { type: "openUrl", url: b.url } : x ? z = { type: "dial", phoneNumber: x } : L && (z = {
         type: "viewLocation",
-        latitude: C.latitude,
-        longitude: C.longitude,
-        query: y?.query
+        latitude: L.latitude,
+        longitude: L.longitude,
+        query: g?.query
       });
-      const k = {
+      const C = {
         type: "action",
-        postbackData: h,
+        postbackData: d,
         displayText: f,
         timestamp: Date.now(),
-        actionData: I
+        actionData: z
       };
-      if (t(k), x)
-        window.open(x.url, "_blank", "noopener,noreferrer");
-      else if (w)
-        window.location.href = `tel:${w}`;
-      else if (C) {
-        const T = p?.showLocation?.location?.label || y?.label || "", B = `https://www.google.com/maps/search/?api=1&query=${C.latitude},${C.longitude}${T ? `&query_place_id=${encodeURIComponent(T)}` : ""}`;
-        window.open(B, "_blank", "noopener,noreferrer");
+      if (r(C), b)
+        window.open(b.url, "_blank", "noopener,noreferrer");
+      else if (x)
+        window.location.href = `tel:${x}`;
+      else if (L) {
+        const M = w?.showLocation?.location?.label || g?.label || "", S = `https://www.google.com/maps/search/?api=1&query=${L.latitude},${L.longitude}${M ? `&query_place_id=${encodeURIComponent(M)}` : ""}`;
+        window.open(S, "_blank", "noopener,noreferrer");
       }
-      const A = o.currentMessageId ? R(r, o.currentMessageId) : null;
-      if (A) {
-        const T = O(A, h);
-        if (T) {
-          const B = R(r, T);
-          B && (s({
+      const T = o.currentMessageId ? R(s, o.currentMessageId) : null;
+      if (T) {
+        const M = O(T, d);
+        if (M) {
+          const S = R(s, M);
+          S && (a({
             type: "ADD_USER_REPLY",
             text: f,
-            postbackData: h
-          }), s({ type: "SET_TYPING", isTyping: !0 }), s({ type: "NAVIGATE_TO", messageId: T }), setTimeout(() => {
+            postbackData: d
+          }), a({ type: "SET_TYPING", isTyping: !0 }), a({ type: "NAVIGATE_TO", messageId: M }), setTimeout(() => {
             const ee = H(
-              B,
-              a.current++
+              S,
+              c.current++
             );
-            s({ type: "ADD_BUSINESS_MESSAGE", message: ee });
-          }, n));
+            a({ type: "ADD_BUSINESS_MESSAGE", message: ee });
+          }, t));
         }
       }
     },
-    [r, o.currentMessageId, t, n]
-  ), d = M(() => {
-    i.current = !1, a.current = 0, s({ type: "RESET" });
+    [s, o.currentMessageId, r, t]
+  ), i = $(() => {
+    l.current = !1, c.current = 0, a({ type: "RESET" });
   }, []);
   return {
     state: o,
     handleReply: u,
-    handleAction: c,
-    reset: d
+    handleAction: m,
+    reset: i
   };
 }
-function ge(r) {
-  const [t, n] = z(null), [o, s] = z(!1), [a, i] = z(null), u = M(async () => {
-    if (!r) {
-      n(null), i(null);
+function pe(s) {
+  const [r, t] = A(null), [o, a] = A(!1), [c, l] = A(null), u = $(async () => {
+    if (!s) {
+      t(null), l(null);
       return;
     }
-    s(!0), i(null);
+    a(!0), l(null);
     try {
-      const c = await fetch(r, {
+      const m = await fetch(s, {
         method: "GET",
         headers: {
           Accept: "application/json"
         }
       });
-      if (!c.ok)
-        throw new Error(`HTTP ${c.status}: ${c.statusText}`);
-      const d = await c.json();
-      if (!d || typeof d != "object")
+      if (!m.ok)
+        throw new Error(`HTTP ${m.status}: ${m.statusText}`);
+      const i = await m.json();
+      if (!i || typeof i != "object")
         throw new Error("Invalid JSON: Expected an object");
-      if (!d.messages || typeof d.messages != "object")
+      if (!i.messages || typeof i.messages != "object")
         throw new Error("Invalid RBM JSON: Missing 'messages' object");
-      n(d);
-    } catch (c) {
-      const d = c instanceof Error ? c.message : "Failed to fetch JSON";
-      i(d), n(null);
+      t(i);
+    } catch (m) {
+      const i = m instanceof Error ? m.message : "Failed to fetch JSON";
+      l(i), t(null);
     } finally {
-      s(!1);
+      a(!1);
     }
-  }, [r]);
-  return S(() => {
+  }, [s]);
+  return j(() => {
     u();
   }, [u]), {
-    data: t,
+    data: r,
     isLoading: o,
-    error: a,
+    error: c,
     refetch: u
   };
 }
-function pe(r) {
-  const t = W(null);
-  return S(() => {
-    t.current && t.current.scrollTo({
-      top: t.current.scrollHeight,
+function ge(s) {
+  const r = W(null);
+  return j(() => {
+    r.current && r.current.scrollTo({
+      top: r.current.scrollHeight,
       behavior: "smooth"
     });
-  }, [r]), t;
+  }, [s]), r;
 }
-const xe = g(function() {
-  const { theme: t, businessInfo: n, toggleProfile: o } = N(), s = t === "dark", a = n.brandColor || "#0084ff";
-  return /* @__PURE__ */ l(
+const xe = p(function() {
+  const { theme: r, businessInfo: t, toggleProfile: o } = k(), a = r === "dark", c = a ? "rcs-emulator-dark" : "rcs-emulator-light", l = t.brandColor || "#1A73E8";
+  return /* @__PURE__ */ n(
     "header",
     {
-      className: `
-        flex items-center gap-3 px-3 py-2.5 border-b
-        ${s ? "bg-zinc-900 border-zinc-800" : "bg-white border-gray-100"}
-      `,
+      className: `rcs-emulator-header ${c}`,
       role: "banner",
-      "aria-label": `Chat with ${n.name}`,
+      "aria-label": `Chat with ${t.name}`,
       children: [
         /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            className: `
-          p-1.5 -ml-1 rounded-full transition-colors
-          ${s ? "hover:bg-zinc-800 text-white" : "hover:bg-gray-100 text-gray-700"}
-        `,
+            className: `rcs-emulator-icon-btn rcs-emulator-p-1-5 rcs-emulator--ml-1 ${c} ${a ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-700"}`,
             "aria-label": "Go back",
-            children: /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                className: "rcs-emulator-w-5 rcs-emulator-h-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M15 19l-7-7 7-7"
+                  }
+                )
+              }
+            )
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ n(
           "button",
           {
             onClick: o,
-            className: "flex items-center gap-2.5 flex-1 min-w-0 text-left",
+            className: "rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-2-5 rcs-emulator-flex-1 rcs-emulator-min-w-0 rcs-emulator-text-left rcs-emulator-bg-transparent",
+            style: { background: "transparent" },
             "aria-label": "View business info",
             children: [
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: `
-            relative w-9 h-9 rounded-full overflow-hidden flex-shrink-0
-            ${s ? "bg-zinc-800" : "bg-gray-100"}
-          `,
+                  className: `rcs-emulator-logo-avatar rcs-emulator-w-9 rcs-emulator-h-9 ${c}`,
                   style: {
-                    backgroundColor: n.logo ? void 0 : a
+                    backgroundColor: t.logo ? void 0 : l
                   },
-                  children: n.logo ? /* @__PURE__ */ e(
+                  children: t.logo ? /* @__PURE__ */ e(
                     "img",
                     {
-                      src: n.logo,
-                      alt: `${n.name} logo`,
-                      className: "w-full h-full object-cover"
+                      src: t.logo,
+                      alt: `${t.name} logo`,
+                      className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-object-cover"
                     }
-                  ) : /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center text-sm font-bold text-white", children: n.name.charAt(0).toUpperCase() })
+                  ) : /* @__PURE__ */ e("div", { className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-text-sm rcs-emulator-font-bold rcs-emulator-text-white", children: t.name.charAt(0).toUpperCase() })
                 }
               ),
               /* @__PURE__ */ e(
                 "h1",
                 {
-                  className: `
-            text-base font-medium truncate
-            ${s ? "text-white" : "text-gray-900"}
-          `,
-                  children: n.name
+                  className: `rcs-emulator-text-base rcs-emulator-font-medium rcs-emulator-truncate ${a ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
+                  children: t.name
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5", children: [
-          n.verified && /* @__PURE__ */ e(
+        /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-0-5", children: [
+          t.verified && /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: `
-              p-2 rounded-full transition-colors
-              ${s ? "hover:bg-zinc-800" : "hover:bg-gray-100"}
-            `,
+              className: `rcs-emulator-icon-btn rcs-emulator-p-2 ${c}`,
               "aria-label": "Verified business",
-              children: /* @__PURE__ */ l("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", children: [
-                /* @__PURE__ */ e(
-                  "path",
-                  {
-                    d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
-                    stroke: s ? "#9ca3af" : "#6b7280",
-                    strokeWidth: 2,
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "path",
-                  {
-                    d: "M9 12l2 2 4-4",
-                    stroke: "#3b82f6",
-                    strokeWidth: 2,
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                )
-              ] })
+              children: /* @__PURE__ */ n(
+                "svg",
+                {
+                  className: "rcs-emulator-w-5 rcs-emulator-h-5",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  children: [
+                    /* @__PURE__ */ e(
+                      "path",
+                      {
+                        d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
+                        stroke: a ? "#9ca3af" : "#6b7280",
+                        strokeWidth: 2,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "path",
+                      {
+                        d: "M9 12l2 2 4-4",
+                        stroke: "#3b82f6",
+                        strokeWidth: 2,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  ]
+                }
+              )
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: `
-            p-2 rounded-full transition-colors
-            ${s ? "hover:bg-zinc-800 text-zinc-400" : "hover:bg-gray-100 text-gray-500"}
-          `,
+              className: `rcs-emulator-icon-btn rcs-emulator-p-2 ${c} ${a ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`,
               "aria-label": "More options",
-              children: /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("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__ */ e(
+                "svg",
+                {
+                  className: "rcs-emulator-w-5 rcs-emulator-h-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ e(
+                    "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"
+                    }
+                  )
+                }
+              )
             }
           )
         ] })
       ]
     }
   );
-}), be = g(function() {
-  const { theme: t, businessInfo: n } = N(), o = t === "dark", s = n.brandColor || "#0084ff";
-  return /* @__PURE__ */ l("div", { className: "flex flex-col items-center py-4 px-4", children: [
-    /* @__PURE__ */ l("div", { className: "relative mb-3", children: [
+}), be = p(function() {
+  const { theme: r, businessInfo: t } = k(), o = r === "dark", a = o ? "rcs-emulator-dark" : "rcs-emulator-light", c = t.brandColor || "#0084ff";
+  return /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-items-center rcs-emulator-py-4 rcs-emulator-px-4", children: [
+    /* @__PURE__ */ n("div", { className: "rcs-emulator-relative rcs-emulator-mb-3", children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: `
-            w-16 h-16 rounded-full overflow-hidden
-            ${o ? "bg-zinc-800" : "bg-gray-100"}
-            shadow-lg
-          `,
+          className: `rcs-emulator-logo-avatar rcs-emulator-w-16 rcs-emulator-h-16 rcs-emulator-shadow-lg ${a}`,
           style: {
-            backgroundColor: n.logo ? void 0 : s
+            backgroundColor: t.logo ? void 0 : c
           },
-          children: n.logo ? /* @__PURE__ */ e(
+          children: t.logo ? /* @__PURE__ */ e(
             "img",
             {
-              src: n.logo,
-              alt: `${n.name} logo`,
-              className: "w-full h-full object-cover"
+              src: t.logo,
+              alt: `${t.name} logo`,
+              className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-object-cover"
             }
-          ) : /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center text-2xl font-bold text-white", children: n.name.charAt(0).toUpperCase() })
+          ) : /* @__PURE__ */ e("div", { className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-text-2xl rcs-emulator-font-bold rcs-emulator-text-white", children: t.name.charAt(0).toUpperCase() })
         }
       ),
-      n.verified && /* @__PURE__ */ e(
-        "div",
+      t.verified && /* @__PURE__ */ e("div", { className: "rcs-emulator-verified-badge", children: /* @__PURE__ */ e(
+        "svg",
         {
-          className: "absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center border-2 border-white shadow-sm",
-          children: /* @__PURE__ */ e(
-            "svg",
-            {
-              className: "w-3 h-3 text-white",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              children: /* @__PURE__ */ e("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" })
-            }
-          )
+          className: "rcs-emulator-w-3 rcs-emulator-h-3 rcs-emulator-text-white",
+          viewBox: "0 0 24 24",
+          fill: "currentColor",
+          children: /* @__PURE__ */ e("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" })
         }
-      )
+      ) })
     ] }),
     /* @__PURE__ */ e(
       "h1",
       {
-        className: `
-          text-lg font-semibold text-center
-          ${o ? "text-white" : "text-gray-900"}
-        `,
-        children: n.name
+        className: `rcs-emulator-text-lg rcs-emulator-font-semibold rcs-emulator-text-center ${o ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
+        children: t.name
       }
     ),
-    n.description && /* @__PURE__ */ e(
+    t.description && /* @__PURE__ */ e(
       "p",
       {
-        className: `
-            text-sm text-center mt-0.5
-            ${o ? "text-zinc-400" : "text-gray-500"}
-          `,
-        children: n.description
+        className: `rcs-emulator-text-sm rcs-emulator-text-center rcs-emulator-mt-0-5 ${o ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`,
+        children: t.description
       }
     )
   ] });
-}), ye = g(function({
-  text: t,
-  sender: n,
+}), ve = p(function({
+  text: r,
+  sender: t,
   timestamp: o
 }) {
-  const { theme: s, businessInfo: a } = N(), i = s === "dark", u = n === "business", c = a.brandColor || "#0084ff", d = new Date(o).toLocaleTimeString([], {
+  const { theme: a, businessInfo: c } = k(), u = a === "dark" ? "rcs-emulator-dark" : "rcs-emulator-light", m = t === "business", i = c.brandColor || "#1A73E8", h = new Date(o).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
   });
-  return u ? /* @__PURE__ */ l("div", { className: "max-w-[90%]", children: [
+  return m ? /* @__PURE__ */ n("div", { className: "rcs-emulator-max-w-90 rcs-emulator-flex rcs-emulator-flex-col", children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: `
-            px-4 py-3 rounded-2xl text-sm leading-relaxed
-            ${i ? "bg-zinc-800 text-white" : "bg-gray-100 text-gray-900"}
-          `,
-        children: t
+        className: `rcs-emulator-message-bubble rcs-emulator-business ${u}`,
+        children: r
       }
     ),
-    /* @__PURE__ */ e("span", { className: "sr-only", children: d })
-  ] }) : /* @__PURE__ */ l("div", { className: "flex items-end gap-1.5 max-w-[85%] ml-auto", children: [
+    /* @__PURE__ */ e("span", { className: "rcs-emulator-sr-only", children: h })
+  ] }) : /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-items-end rcs-emulator-gap-1-5 rcs-emulator-max-w-85 rcs-emulator-ml-auto", children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: "px-4 py-2.5 rounded-full text-white text-sm leading-relaxed",
-        style: { backgroundColor: c },
-        children: t
+        className: "rcs-emulator-message-bubble rcs-emulator-user",
+        style: { backgroundColor: i },
+        children: r
       }
     ),
     /* @__PURE__ */ e(
       "div",
       {
-        className: "w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0",
-        style: { backgroundColor: c },
+        className: "rcs-emulator-delivery-status",
+        style: { backgroundColor: i },
         children: /* @__PURE__ */ e(
           "svg",
           {
-            className: "w-3 h-3 text-white",
+            className: "rcs-emulator-w-3 rcs-emulator-h-3 rcs-emulator-text-white",
             viewBox: "0 0 24 24",
             fill: "none",
             stroke: "currentColor",
@@ -642,34 +648,34 @@ const xe = g(function() {
         )
       }
     ),
-    /* @__PURE__ */ e("span", { className: "sr-only", children: d })
+    /* @__PURE__ */ e("span", { className: "rcs-emulator-sr-only", children: h })
   ] });
-}), we = g(function({
-  text: t,
-  timestamp: n
+}), ye = p(function({
+  text: r,
+  timestamp: t
 }) {
-  const { businessInfo: o } = N(), s = o.brandColor || "#0084ff", a = new Date(n).toLocaleTimeString([], {
+  const { businessInfo: o } = k(), a = o.brandColor || "#1A73E8", c = new Date(t).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
   });
-  return /* @__PURE__ */ l("div", { className: "flex items-end gap-1.5 max-w-[85%] ml-auto", children: [
+  return /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-items-end rcs-emulator-gap-1-5 rcs-emulator-max-w-85 rcs-emulator-ml-auto", children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: "px-4 py-2.5 rounded-full text-white text-sm leading-relaxed shadow-sm",
-        style: { backgroundColor: s },
-        children: t
+        className: "rcs-emulator-message-bubble rcs-emulator-user rcs-emulator-shadow-sm",
+        style: { backgroundColor: a, color: "white" },
+        children: r
       }
     ),
     /* @__PURE__ */ e(
       "div",
       {
-        className: "w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0",
-        style: { backgroundColor: s },
+        className: "rcs-emulator-delivery-status",
+        style: { backgroundColor: a },
         children: /* @__PURE__ */ e(
           "svg",
           {
-            className: "w-3 h-3 text-white",
+            className: "rcs-emulator-w-3 rcs-emulator-h-3 rcs-emulator-text-white",
             viewBox: "0 0 24 24",
             fill: "none",
             stroke: "currentColor",
@@ -686,83 +692,73 @@ const xe = g(function() {
         )
       }
     ),
-    /* @__PURE__ */ e("span", { className: "sr-only", children: a })
+    /* @__PURE__ */ e("span", { className: "rcs-emulator-sr-only", children: c })
   ] });
-}), ve = g(function({
-  card: t,
-  timestamp: n
+}), we = p(function({
+  card: r,
+  timestamp: t
 }) {
-  const { theme: o, handleReply: s, handleAction: a } = N(), i = o === "dark", u = new Date(n).toLocaleTimeString([], {
+  const { theme: o, handleReply: a, handleAction: c } = k(), l = o === "dark", u = l ? "rcs-emulator-dark" : "rcs-emulator-light", m = new Date(t).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
-  }), c = (f) => {
-    "reply" in f ? s(f) : a(f);
-  }, d = {
-    short: "h-36",
-    medium: "h-44",
-    tall: "h-56"
+  }), i = (f) => {
+    "reply" in f ? a(f) : c(f);
+  }, h = {
+    short: "rcs-emulator-h-36",
+    medium: "rcs-emulator-h-44",
+    tall: "rcs-emulator-h-56"
   };
-  return /* @__PURE__ */ l("div", { className: "w-full", children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ n("div", { className: "rcs-emulator-w-full", children: [
+    /* @__PURE__ */ n(
       "div",
       {
-        className: `
-          overflow-hidden rounded-2xl w-full shadow-sm
-          ${i ? "bg-zinc-800" : "bg-[#e8f5e9]"}
-        `,
+        className: `rcs-emulator-rich-card ${u}`,
         children: [
-          t.media && /* @__PURE__ */ e(
+          r.media && /* @__PURE__ */ e(
             "div",
             {
-              className: `
-              w-full overflow-hidden
-              ${d[t.media.height]}
-            `,
+              className: `rcs-emulator-w-full rcs-emulator-overflow-hidden rcs-emulator-media-placeholder ${h[r.media.height]} ${l ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
+              style: { borderRadius: "12px 12px 0 0" },
               children: /* @__PURE__ */ e(
                 "img",
                 {
-                  src: t.media.url,
-                  alt: t.title || "Rich card media",
-                  className: "w-full h-full object-cover",
-                  loading: "lazy"
+                  src: r.media.url,
+                  alt: r.title || "Rich card media",
+                  className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-object-cover",
+                  loading: "lazy",
+                  onError: (f) => {
+                    const v = f.target;
+                    v.style.display = "none";
+                  }
                 }
               )
             }
           ),
-          /* @__PURE__ */ l("div", { className: "p-4", children: [
-            t.title && /* @__PURE__ */ e(
+          /* @__PURE__ */ n("div", { className: "rcs-emulator-p-4", children: [
+            r.title && /* @__PURE__ */ e(
               "h3",
               {
-                className: `
-                text-base font-semibold leading-snug
-                ${i ? "text-white" : "text-gray-900"}
-              `,
-                children: t.title
+                className: `rcs-emulator-text-base rcs-emulator-font-semibold rcs-emulator-leading-snug rcs-emulator-card-title ${l ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
+                children: r.title
               }
             ),
-            t.description && /* @__PURE__ */ e(
+            r.description && /* @__PURE__ */ e(
               "p",
               {
-                className: `
-                text-sm leading-relaxed mt-1.5
-                ${i ? "text-zinc-300" : "text-gray-700"}
-              `,
-                children: t.description
+                className: `rcs-emulator-text-sm rcs-emulator-leading-relaxed rcs-emulator-mt-1-5 rcs-emulator-card-subtitle ${l ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
+                children: r.description
               }
             ),
-            t.suggestions && t.suggestions.length > 0 && /* @__PURE__ */ e(
+            r.suggestions && r.suggestions.length > 0 && /* @__PURE__ */ e(
               "div",
               {
-                className: `
-                mt-4 rounded-xl overflow-hidden divide-y
-                ${i ? "divide-zinc-700 bg-zinc-800" : "divide-gray-100 bg-white"}
-              `,
-                children: t.suggestions.map((f, v) => /* @__PURE__ */ e(
+                className: `rcs-emulator-card-actions rcs-emulator-mt-4 rcs-emulator-divide-y ${l ? "rcs-emulator-divide-zinc-700" : "rcs-emulator-divide-gray-100"} ${u}`,
+                children: r.suggestions.map((f, v) => /* @__PURE__ */ e(
                   Me,
                   {
                     suggestion: f,
-                    onClick: () => c(f),
-                    isDark: i
+                    onClick: () => i(f),
+                    isDark: l
                   },
                   v
                 ))
@@ -772,248 +768,346 @@ const xe = g(function() {
         ]
       }
     ),
-    /* @__PURE__ */ e("span", { className: "sr-only", children: u })
+    /* @__PURE__ */ e("span", { className: "rcs-emulator-sr-only", children: m })
   ] });
-}), E = "w-5 h-5 text-gray-400", ke = () => /* @__PURE__ */ e("svg", { className: E, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) }), Ne = () => /* @__PURE__ */ e("svg", { className: E, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }), Le = () => /* @__PURE__ */ l("svg", { className: E, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: [
+}), B = "rcs-emulator-w-5 rcs-emulator-h-5 rcs-emulator-text-gray-400", ke = () => /* @__PURE__ */ e("svg", { className: B, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) }), Ne = () => /* @__PURE__ */ e("svg", { className: B, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }), Ce = () => /* @__PURE__ */ n("svg", { className: B, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: [
   /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
   /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
-] }), Ce = () => /* @__PURE__ */ e("svg", { className: E, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), G = () => /* @__PURE__ */ e("svg", { className: E, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", 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" }) }), Me = g(function({
-  suggestion: t,
-  onClick: n,
+] }), Le = () => /* @__PURE__ */ e("svg", { className: B, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), G = () => /* @__PURE__ */ e("svg", { className: B, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", 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" }) }), Me = p(function({
+  suggestion: r,
+  onClick: t,
   isDark: o
 }) {
-  const s = $(t), a = s ? t.action.displayText : t.reply.displayText;
-  return /* @__PURE__ */ l(
+  const a = I(r), c = a ? r.action.displayText : r.reply.displayText;
+  return /* @__PURE__ */ n(
     "button",
     {
-      onClick: n,
-      className: `
-        w-full flex items-center gap-3 px-4 py-3 text-left transition-colors
-        ${o ? "hover:bg-zinc-700" : "hover:bg-gray-50"}
-      `,
+      onClick: t,
+      className: `rcs-emulator-list-item ${o ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
+      style: { gap: "0.75rem", padding: "0.75rem 1rem" },
       children: [
-        /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: (() => {
-          if (!s) return /* @__PURE__ */ e(G, {});
-          const { action: u } = t;
-          return u.urlAction || u.openUrlAction ? /* @__PURE__ */ e(ke, {}) : u.dialerAction || u.dialAction ? /* @__PURE__ */ e(Ne, {}) : u.mapAction || u.viewLocationAction ? /* @__PURE__ */ e(Le, {}) : u.calendarAction || u.createCalendarEventAction ? /* @__PURE__ */ e(Ce, {}) : /* @__PURE__ */ e(G, {});
+        /* @__PURE__ */ e("span", { className: "rcs-emulator-flex-shrink-0", children: (() => {
+          if (!a) return /* @__PURE__ */ e(G, {});
+          const { action: u } = r;
+          return u.urlAction || u.openUrlAction ? /* @__PURE__ */ e(ke, {}) : u.dialerAction || u.dialAction ? /* @__PURE__ */ e(Ne, {}) : u.mapAction || u.viewLocationAction ? /* @__PURE__ */ e(Ce, {}) : u.calendarAction || u.createCalendarEventAction ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(G, {});
         })() }),
-        /* @__PURE__ */ e("span", { className: `text-sm ${o ? "text-white" : "text-gray-900"}`, children: a })
+        /* @__PURE__ */ e("span", { className: `rcs-emulator-text-sm ${o ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`, children: c })
       ]
     }
   );
-}), ze = g(function({ cards: t, timestamp: n }) {
-  const { theme: o, handleReply: s, handleAction: a } = N(), i = W(null), [u, c] = z(!1), [d, m] = z(t.length > 1), f = o === "dark", v = new Date(n).toLocaleTimeString([], {
+}), $e = p(function({
+  cards: r,
+  timestamp: t
+}) {
+  const { theme: o, handleReply: a, handleAction: c } = k(), l = W(null), [u, m] = A(!1), [i, h] = A(r.length > 1), f = o === "dark", v = f ? "rcs-emulator-dark" : "rcs-emulator-light", b = new Date(t).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
-  }), x = (p) => {
-    "reply" in p ? s(p) : a(p);
-  }, L = M(() => {
-    if (i.current) {
-      const { scrollLeft: p, scrollWidth: y, clientWidth: h } = i.current;
-      c(p > 0), m(p < y - h - 10);
+  }), N = (g) => {
+    "reply" in g ? a(g) : c(g);
+  }, y = $(() => {
+    if (l.current) {
+      const { scrollLeft: g, scrollWidth: d, clientWidth: x } = l.current;
+      m(g > 0), h(g < d - x - 10);
     }
-  }, []), b = (p) => {
-    i.current && i.current.scrollBy({
-      left: p === "left" ? -200 : 200,
+  }, []), w = (g) => {
+    l.current && l.current.scrollBy({
+      left: g === "left" ? -200 : 200,
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ l("div", { className: "w-full -mx-3", children: [
-    /* @__PURE__ */ l("div", { className: "relative", children: [
+  return /* @__PURE__ */ n("div", { className: "rcs-emulator-w-full rcs-emulator--mx-3", children: [
+    /* @__PURE__ */ n("div", { className: "rcs-emulator-relative", children: [
       u && /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => b("left"),
-          className: `
-              absolute left-2 top-1/2 -translate-y-1/2 z-10
-              w-8 h-8 rounded-full flex items-center justify-center
-              shadow-lg transition-opacity
-              ${f ? "bg-zinc-700 text-white" : "bg-white text-gray-700"}
-            `,
+          onClick: () => w("left"),
+          className: `rcs-emulator-carousel-arrow rcs-emulator-left ${v}`,
           "aria-label": "Scroll left",
-          children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+          children: /* @__PURE__ */ e(
+            "svg",
+            {
+              className: "rcs-emulator-w-4 rcs-emulator-h-4",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15 19l-7-7 7-7"
+                }
+              )
+            }
+          )
         }
       ),
       /* @__PURE__ */ e(
         "div",
         {
-          ref: i,
-          onScroll: L,
-          className: "flex gap-2.5 overflow-x-auto py-1 px-3 snap-x snap-mandatory",
-          style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-          children: t.map((p, y) => /* @__PURE__ */ e(
-            Ae,
+          ref: l,
+          onScroll: y,
+          className: "rcs-emulator-flex rcs-emulator-gap-2-5 rcs-emulator-overflow-x-auto rcs-emulator-py-1 rcs-emulator-px-3 rcs-emulator-snap-x rcs-emulator-scrollbar-hide",
+          children: r.map((g, d) => /* @__PURE__ */ e(
+            Ie,
             {
-              card: p,
+              card: g,
               isDark: f,
-              onSuggestionClick: x
+              onSuggestionClick: N
             },
-            y
+            d
           ))
         }
       ),
-      d && /* @__PURE__ */ e(
+      i && /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => b("right"),
-          className: `
-              absolute right-2 top-1/2 -translate-y-1/2 z-10
-              w-8 h-8 rounded-full flex items-center justify-center
-              shadow-lg transition-opacity
-              ${f ? "bg-zinc-700 text-white" : "bg-white text-gray-700"}
-            `,
+          onClick: () => w("right"),
+          className: `rcs-emulator-carousel-arrow rcs-emulator-right ${v}`,
           "aria-label": "Scroll right",
-          children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+          children: /* @__PURE__ */ e(
+            "svg",
+            {
+              className: "rcs-emulator-w-4 rcs-emulator-h-4",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M9 5l7 7-7 7"
+                }
+              )
+            }
+          )
         }
       )
     ] }),
-    /* @__PURE__ */ e("span", { className: "sr-only", children: v })
+    /* @__PURE__ */ e("span", { className: "rcs-emulator-sr-only", children: b })
   ] });
-}), j = "w-4 h-4 text-gray-400", $e = (r) => {
-  if (!$(r))
-    return /* @__PURE__ */ e("svg", { className: j, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", 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" }) });
-  const { action: t } = r;
-  return t.urlAction || t.openUrlAction ? /* @__PURE__ */ e("svg", { className: j, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) }) : t.dialerAction || t.dialAction ? /* @__PURE__ */ e("svg", { className: j, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }) : t.mapAction || t.viewLocationAction ? /* @__PURE__ */ l("svg", { className: j, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: [
-    /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
-    /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
-  ] }) : t.calendarAction || t.createCalendarEventAction ? /* @__PURE__ */ e("svg", { className: j, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ e("svg", { className: j, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", 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" }) });
-}, Ae = g(function({
-  card: t,
-  isDark: n,
-  onSuggestionClick: o
-}) {
-  const s = t.layout.width === "small" ? "w-44" : "w-52";
-  return /* @__PURE__ */ l(
-    "div",
+}), E = "rcs-emulator-w-4 rcs-emulator-h-4 rcs-emulator-text-gray-400", Ae = (s) => {
+  if (!I(s))
+    return /* @__PURE__ */ e(
+      "svg",
+      {
+        className: E,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        children: /* @__PURE__ */ e(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            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"
+          }
+        )
+      }
+    );
+  const { action: r } = s;
+  return r.urlAction || r.openUrlAction ? /* @__PURE__ */ e(
+    "svg",
+    {
+      className: E,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+        }
+      )
+    }
+  ) : r.dialerAction || r.dialAction ? /* @__PURE__ */ e(
+    "svg",
+    {
+      className: E,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+        }
+      )
+    }
+  ) : r.mapAction || r.viewLocationAction ? /* @__PURE__ */ n(
+    "svg",
     {
-      className: `
-        flex-shrink-0 snap-start rounded-2xl overflow-hidden shadow-sm
-        ${s}
-        ${n ? "bg-zinc-800" : "bg-[#e8f5e9]"}
-      `,
+      className: E,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
       children: [
-        t.media && /* @__PURE__ */ e("div", { className: "w-full h-32 bg-gray-200 overflow-hidden", children: /* @__PURE__ */ e(
-          "img",
+        /* @__PURE__ */ e(
+          "path",
           {
-            src: t.media.url,
-            alt: t.title || "Carousel card media",
-            className: "w-full h-full object-cover",
-            loading: "lazy"
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
           }
-        ) }),
-        /* @__PURE__ */ l("div", { className: "p-3", children: [
-          t.title && /* @__PURE__ */ e(
-            "h4",
-            {
-              className: `
-              text-sm font-semibold leading-tight mb-1 line-clamp-2
-              ${n ? "text-white" : "text-gray-900"}
-            `,
-              children: t.title
-            }
-          ),
-          t.description && /* @__PURE__ */ e(
-            "p",
-            {
-              className: `
-              text-xs leading-relaxed line-clamp-3
-              ${n ? "text-zinc-400" : "text-gray-700"}
-            `,
-              children: t.description
-            }
-          ),
-          t.suggestions && t.suggestions.length > 0 && /* @__PURE__ */ e(
-            "div",
-            {
-              className: `
-              mt-3 rounded-lg overflow-hidden divide-y
-              ${n ? "divide-zinc-600 bg-zinc-700" : "divide-gray-100 bg-white"}
-            `,
-              children: t.suggestions.map((a, i) => {
-                const c = $(a) ? a.action.displayText : a.reply.displayText;
-                return /* @__PURE__ */ l(
-                  "button",
-                  {
-                    onClick: () => o(a),
-                    className: `
-                    w-full flex items-center gap-2 px-3 py-2.5
-                    text-xs transition-colors text-left
-                    ${n ? "hover:bg-zinc-600 text-white" : "hover:bg-gray-50 text-gray-900"}
-                  `,
-                    children: [
-                      /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: $e(a) }),
-                      /* @__PURE__ */ e("span", { className: "truncate", children: c })
-                    ]
-                  },
-                  i
-                );
-              })
-            }
-          )
-        ] })
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+          }
+        )
       ]
     }
+  ) : r.calendarAction || r.createCalendarEventAction ? /* @__PURE__ */ e(
+    "svg",
+    {
+      className: E,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "svg",
+    {
+      className: E,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          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"
+        }
+      )
+    }
   );
-}), Ie = {
-  text: ({ content: r, sender: t, timestamp: n }) => r.type !== "text" ? null : /* @__PURE__ */ e(ye, { text: r.text, sender: t, timestamp: n }),
-  userReply: ({ content: r, timestamp: t }) => r.type !== "userReply" ? null : /* @__PURE__ */ e(we, { text: r.text, timestamp: t }),
-  richcard: ({ content: r, timestamp: t }) => r.type !== "richcard" ? null : /* @__PURE__ */ e(ve, { card: r.card, timestamp: t }),
-  carousel: ({ content: r, timestamp: t }) => r.type !== "carousel" ? null : /* @__PURE__ */ e(ze, { cards: r.cards, timestamp: t })
-}, Te = g(function({
-  message: t,
-  isLast: n
+}, Ie = p(function({
+  card: r,
+  isDark: t,
+  onSuggestionClick: o
 }) {
-  const { content: o, sender: s, timestamp: a } = t, i = Ie[o.type];
-  return i ? /* @__PURE__ */ e(
-    i,
+  const a = r.layout.width === "small" ? "rcs-emulator-w-44" : "rcs-emulator-w-52", c = t ? "rcs-emulator-dark" : "rcs-emulator-light";
+  return /* @__PURE__ */ n("div", { className: `rcs-emulator-carousel-card ${a} ${c}`, children: [
+    r.media && /* @__PURE__ */ e("div", { className: "rcs-emulator-w-full rcs-emulator-h-32 rcs-emulator-bg-gray-200 rcs-emulator-overflow-hidden", children: /* @__PURE__ */ e(
+      "img",
+      {
+        src: r.media.url,
+        alt: r.title || "Carousel card media",
+        className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-object-cover",
+        loading: "lazy"
+      }
+    ) }),
+    /* @__PURE__ */ n("div", { className: "rcs-emulator-p-3", children: [
+      r.title && /* @__PURE__ */ e(
+        "h4",
+        {
+          className: `rcs-emulator-text-sm rcs-emulator-font-semibold rcs-emulator-leading-tight rcs-emulator-mb-1 rcs-emulator-line-clamp-2 ${t ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
+          children: r.title
+        }
+      ),
+      r.description && /* @__PURE__ */ e(
+        "p",
+        {
+          className: `rcs-emulator-text-xs rcs-emulator-leading-relaxed rcs-emulator-line-clamp-3 ${t ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-700"}`,
+          children: r.description
+        }
+      ),
+      r.suggestions && r.suggestions.length > 0 && /* @__PURE__ */ e(
+        "div",
+        {
+          className: `rcs-emulator-carousel-actions rcs-emulator-mt-3 rcs-emulator-divide-y ${t ? "rcs-emulator-divide-zinc-600" : "rcs-emulator-divide-gray-100"} ${c}`,
+          children: r.suggestions.map((l, u) => {
+            const i = I(l) ? l.action.displayText : l.reply.displayText;
+            return /* @__PURE__ */ n(
+              "button",
+              {
+                onClick: () => o(l),
+                className: `rcs-emulator-w-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-2 rcs-emulator-px-3 rcs-emulator-py-2-5 rcs-emulator-text-xs rcs-emulator-transition-colors rcs-emulator-text-left rcs-emulator-border-none ${t ? "rcs-emulator-hover-bg-zinc-700 rcs-emulator-text-white" : "rcs-emulator-hover-bg-gray-50 rcs-emulator-text-gray-900"}`,
+                children: [
+                  /* @__PURE__ */ e("span", { className: "rcs-emulator-flex-shrink-0", children: Ae(l) }),
+                  /* @__PURE__ */ e("span", { className: "rcs-emulator-truncate", children: i })
+                ]
+              },
+              u
+            );
+          })
+        }
+      )
+    ] })
+  ] });
+}), ze = {
+  text: ({ content: s, sender: r, timestamp: t }) => s.type !== "text" ? null : /* @__PURE__ */ e(ve, { text: s.text, sender: r, timestamp: t }),
+  userReply: ({ content: s, timestamp: r }) => s.type !== "userReply" ? null : /* @__PURE__ */ e(ye, { text: s.text, timestamp: r }),
+  richcard: ({ content: s, timestamp: r }) => s.type !== "richcard" ? null : /* @__PURE__ */ e(we, { card: s.card, timestamp: r }),
+  carousel: ({ content: s, timestamp: r }) => s.type !== "carousel" ? null : /* @__PURE__ */ e($e, { cards: s.cards, timestamp: r })
+}, Te = p(function({
+  message: r,
+  isLast: t
+}) {
+  const { content: o, sender: a, timestamp: c } = r, l = ze[o.type];
+  return l ? /* @__PURE__ */ e(
+    l,
     {
       content: o,
-      sender: s,
-      timestamp: a,
-      showSuggestions: n && s === "business"
+      sender: a,
+      timestamp: c,
+      showSuggestions: t && a === "business"
     }
-  ) : (console.warn(`Unknown message type: ${o.type}`), /* @__PURE__ */ e("div", { className: "px-4 py-2 text-gray-500 text-sm italic", children: "[Unsupported message type]" }));
-}), je = g(function() {
-  const { theme: t } = N(), n = t === "dark";
+  ) : (console.warn(`Unknown message type: ${o.type}`), /* @__PURE__ */ e("div", { className: "rcs-emulator-px-4 rcs-emulator-py-2 rcs-emulator-text-gray-500 rcs-emulator-text-sm rcs-emulator-italic", children: "[Unsupported message type]" }));
+}), Se = p(function() {
+  const { theme: r } = k(), t = r === "dark";
   return /* @__PURE__ */ e(
     "div",
     {
-      className: "flex items-start gap-2 px-4 py-2",
+      className: "rcs-emulator-flex rcs-emulator-items-start rcs-emulator-gap-2 rcs-emulator-px-4 rcs-emulator-py-2",
       role: "status",
       "aria-label": "Business is typing",
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ n(
         "div",
         {
-          className: `
-          inline-flex items-center gap-1 px-4 py-3 rounded-2xl rounded-bl-sm
-          ${n ? "bg-zinc-800" : "bg-gray-100"}
-        `,
+          className: `rcs-emulator-inline-flex rcs-emulator-items-center rcs-emulator-gap-1 rcs-emulator-px-4 rcs-emulator-py-3 rcs-emulator-rounded-2xl rcs-emulator-rounded-bl-sm rcs-emulator-typing-bubble ${t ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
           children: [
             /* @__PURE__ */ e(
               "span",
               {
-                className: `
-            rcs-typing-dot w-2 h-2 rounded-full
-            ${n ? "bg-zinc-500" : "bg-gray-400"}
-          `
+                className: `rcs-emulator-typing-dot rcs-emulator-w-2 rcs-emulator-h-2 rcs-emulator-rounded-full ${t ? "rcs-emulator-bg-zinc-500" : "rcs-emulator-bg-gray-400"}`
               }
             ),
             /* @__PURE__ */ e(
               "span",
               {
-                className: `
-            rcs-typing-dot w-2 h-2 rounded-full
-            ${n ? "bg-zinc-500" : "bg-gray-400"}
-          `
+                className: `rcs-emulator-typing-dot rcs-emulator-w-2 rcs-emulator-h-2 rcs-emulator-rounded-full ${t ? "rcs-emulator-bg-zinc-500" : "rcs-emulator-bg-gray-400"}`
               }
             ),
             /* @__PURE__ */ e(
               "span",
               {
-                className: `
-            rcs-typing-dot w-2 h-2 rounded-full
-            ${n ? "bg-zinc-500" : "bg-gray-400"}
-          `
+                className: `rcs-emulator-typing-dot rcs-emulator-w-2 rcs-emulator-h-2 rcs-emulator-rounded-full ${t ? "rcs-emulator-bg-zinc-500" : "rcs-emulator-bg-gray-400"}`
               }
             )
           ]
@@ -1021,53 +1115,45 @@ const xe = g(function() {
       )
     }
   );
-}), Se = g(function() {
-  const { theme: t, state: n } = N(), { chatHistory: o, isTyping: s } = n, a = t === "dark";
-  return /* @__PURE__ */ l(
+}), Ee = p(function() {
+  const { theme: r, state: t } = k(), { chatHistory: o, isTyping: a } = t, c = r === "dark", l = c ? "rcs-emulator-dark" : "rcs-emulator-light";
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: "px-3 pb-3 space-y-3",
+      className: "rcs-emulator-px-3 rcs-emulator-pb-3 rcs-emulator-space-y-3",
       role: "log",
       "aria-label": "Chat messages",
       "aria-live": "polite",
       children: [
-        o.length > 0 && /* @__PURE__ */ e("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ e(
+        o.length > 0 && /* @__PURE__ */ e("div", { className: "rcs-emulator-flex rcs-emulator-justify-center rcs-emulator-py-2", children: /* @__PURE__ */ e(
           "span",
           {
-            className: `
-              text-xs font-medium px-3 py-1
-              ${a ? "text-zinc-500" : "text-gray-500"}
-            `,
+            className: `rcs-emulator-text-xs rcs-emulator-font-medium rcs-emulator-px-3 rcs-emulator-py-1 ${c ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-500"}`,
             children: "Today"
           }
         ) }),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ n(
           "div",
           {
-            className: `
-          rounded-3xl overflow-hidden
-          ${a ? "bg-zinc-900" : "bg-gray-50"}
-        `,
+            className: `rcs-emulator-messages-container ${l}`,
             children: [
-              o.length === 0 && !s && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ e("p", { className: `text-sm ${a ? "text-zinc-500" : "text-gray-400"}`, children: "No messages yet" }) }),
-              /* @__PURE__ */ l("div", { className: "p-3 space-y-3", children: [
-                o.map((i, u) => /* @__PURE__ */ e(
+              o.length === 0 && !a && /* @__PURE__ */ e("div", { className: "rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-py-12", children: /* @__PURE__ */ e("p", { className: `rcs-emulator-text-sm ${c ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-400"}`, children: "No messages yet" }) }),
+              /* @__PURE__ */ n("div", { className: "rcs-emulator-p-3 rcs-emulator-space-y-3", children: [
+                o.map((u, m) => /* @__PURE__ */ e(
                   "div",
                   {
-                    className: `
-                ${i.sender === "user" ? "flex justify-end" : "flex justify-start"}
-              `,
+                    className: `rcs-emulator-flex ${u.sender === "user" ? "rcs-emulator-justify-end" : "rcs-emulator-justify-start"}`,
                     children: /* @__PURE__ */ e(
                       Te,
                       {
-                        message: i,
-                        isLast: u === o.length - 1 && !s
+                        message: u,
+                        isLast: m === o.length - 1 && !a
                       }
                     )
                   },
-                  i.id
+                  u.id
                 )),
-                s && /* @__PURE__ */ e(je, {})
+                a && /* @__PURE__ */ e(Se, {})
               ] })
             ]
           }
@@ -1075,52 +1161,50 @@ const xe = g(function() {
       ]
     }
   );
-}), Ee = g(function({
-  suggestion: t,
-  onClick: n,
+}), je = p(function({
+  suggestion: r,
+  onClick: t,
   variant: o = "bar"
 }) {
-  const { theme: s, businessInfo: a } = N(), i = s === "dark", u = $(t), c = u ? t.action.displayText : t.reply.displayText, d = u ? Be(t) : null, m = a.brandColor || "#0084ff";
-  return o === "bar" ? /* @__PURE__ */ l(
+  const { theme: a, businessInfo: c } = k(), l = a === "dark", u = I(r), m = u ? r.action.displayText : r.reply.displayText, i = u ? Be(r) : null, h = c.brandColor || "#1A73E8", f = l ? "rcs-emulator-dark" : "rcs-emulator-light";
+  return o === "bar" ? /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      onClick: n,
-      className: `
-          inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium
-          whitespace-nowrap transition-colors flex-shrink-0
-          border
-          ${i ? "bg-zinc-800 border-zinc-700 hover:bg-zinc-700 text-white" : "bg-white border-gray-300 hover:bg-gray-50 text-gray-900"}
-        `,
-      "aria-label": u ? `${Re(t)}: ${c}` : c,
+      onClick: t,
+      className: `rcs-emulator-suggestion-chip rcs-emulator-inline-flex rcs-emulator-items-center rcs-emulator-gap-2 rcs-emulator-px-4 rcs-emulator-py-2 rcs-emulator-rounded-full rcs-emulator-text-sm rcs-emulator-font-medium rcs-emulator-whitespace-nowrap rcs-emulator-transition-colors rcs-emulator-flex-shrink-0 rcs-emulator-border ${f}`,
+      "aria-label": u ? `${Re(r)}: ${m}` : m,
       children: [
-        d && /* @__PURE__ */ e("span", { style: { color: m }, children: /* @__PURE__ */ e(d, { className: "w-4 h-4" }) }),
-        /* @__PURE__ */ e("span", { children: c })
+        i && /* @__PURE__ */ e("span", { style: { color: h }, children: /* @__PURE__ */ e(i, { className: "rcs-emulator-w-4 rcs-emulator-h-4" }) }),
+        /* @__PURE__ */ e("span", { className: "rcs-emulator-text-sm rcs-emulator-font-medium", children: m })
       ]
     }
-  ) : o === "card" ? /* @__PURE__ */ l(
+  ) : o === "card" ? /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      onClick: n,
-      className: `
-          w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors rounded-lg
-          ${i ? "hover:bg-zinc-700" : "hover:bg-gray-100"}
-        `,
+      onClick: t,
+      className: `rcs-emulator-w-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-3 rcs-emulator-px-3 rcs-emulator-py-2-5 rcs-emulator-text-left rcs-emulator-transition-colors rcs-emulator-rounded-lg rcs-emulator-list-item rcs-emulator-border-none ${f}`,
       children: [
-        d && /* @__PURE__ */ e(
+        i && /* @__PURE__ */ e(
           "div",
           {
-            className: "w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0",
-            style: { backgroundColor: `${m}15` },
-            children: /* @__PURE__ */ e(d, { className: "w-4 h-4", style: { color: m } })
+            className: "rcs-emulator-w-8 rcs-emulator-h-8 rcs-emulator-rounded-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-flex-shrink-0",
+            style: { backgroundColor: `${h}15` },
+            children: /* @__PURE__ */ e(
+              i,
+              {
+                className: "rcs-emulator-w-4 rcs-emulator-h-4",
+                style: { color: h }
+              }
+            )
           }
         ),
         /* @__PURE__ */ e(
           "span",
           {
-            className: `text-sm font-medium ${i ? "text-white" : "text-gray-900"}`,
-            children: c
+            className: `rcs-emulator-text-sm rcs-emulator-font-medium ${l ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
+            children: m
           }
         )
       ]
@@ -1129,117 +1213,203 @@ const xe = g(function() {
     "button",
     {
       type: "button",
-      onClick: n,
-      className: `
-        w-full px-3 py-2 rounded-lg text-xs font-medium text-center
-        border transition-colors
-        ${i ? "border-zinc-600 hover:bg-zinc-700 text-white" : "border-gray-300 hover:bg-gray-50 text-gray-900"}
-      `,
-      children: c
+      onClick: t,
+      className: `rcs-emulator-w-full rcs-emulator-px-3 rcs-emulator-py-2 rcs-emulator-rounded-lg rcs-emulator-text-xs rcs-emulator-font-medium rcs-emulator-text-center rcs-emulator-border rcs-emulator-transition-colors ${l ? "rcs-emulator-border-zinc-600 rcs-emulator-hover-bg-zinc-700 rcs-emulator-text-white" : "rcs-emulator-border-gray-300 rcs-emulator-hover-bg-gray-50 rcs-emulator-text-gray-900"}`,
+      children: m
     }
   );
 });
-function Be(r) {
-  if (!$(r)) return null;
-  const { action: t } = r;
-  return t.openUrlAction ? ({ className: n, style: o }) => /* @__PURE__ */ e("svg", { className: n, style: o, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) }) : t.dialAction ? ({ className: n, style: o }) => /* @__PURE__ */ e("svg", { className: n, style: o, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }) : t.shareLocationAction ? ({ className: n, style: o }) => /* @__PURE__ */ l("svg", { className: n, style: o, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
-    /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
-    /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
-  ] }) : t.viewLocationAction ? ({ className: n, style: o }) => /* @__PURE__ */ l("svg", { className: n, style: o, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
-    /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
-    /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
-  ] }) : t.createCalendarEventAction ? ({ className: n, style: o }) => /* @__PURE__ */ e("svg", { className: n, style: o, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : null;
+function Be(s) {
+  if (!I(s)) return null;
+  const { action: r } = s;
+  return r.openUrlAction ? ({ className: t, style: o }) => /* @__PURE__ */ e(
+    "svg",
+    {
+      className: t,
+      style: o,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+        }
+      )
+    }
+  ) : r.dialAction ? ({ className: t, style: o }) => /* @__PURE__ */ e(
+    "svg",
+    {
+      className: t,
+      style: o,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+        }
+      )
+    }
+  ) : r.shareLocationAction ? ({ className: t, style: o }) => /* @__PURE__ */ n(
+    "svg",
+    {
+      className: t,
+      style: o,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+          }
+        )
+      ]
+    }
+  ) : r.viewLocationAction ? ({ className: t, style: o }) => /* @__PURE__ */ n(
+    "svg",
+    {
+      className: t,
+      style: o,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+          }
+        )
+      ]
+    }
+  ) : r.createCalendarEventAction ? ({ className: t, style: o }) => /* @__PURE__ */ e(
+    "svg",
+    {
+      className: t,
+      style: o,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+        }
+      )
+    }
+  ) : null;
 }
-function Re(r) {
-  if (!$(r)) return "Reply";
-  const { action: t } = r;
-  return t.openUrlAction ? "Open link" : t.dialAction ? "Call" : t.shareLocationAction ? "Share location" : t.viewLocationAction ? "View location" : t.createCalendarEventAction ? "Add to calendar" : "Action";
+function Re(s) {
+  if (!I(s)) return "Reply";
+  const { action: r } = s;
+  return r.openUrlAction ? "Open link" : r.dialAction ? "Call" : r.shareLocationAction ? "Share location" : r.viewLocationAction ? "View location" : r.createCalendarEventAction ? "Add to calendar" : "Action";
 }
-const We = g(function({
-  suggestions: t
+const We = p(function({
+  suggestions: r
 }) {
-  const { theme: n, handleReply: o, handleAction: s } = N(), a = n === "dark";
-  if (!t || t.length === 0)
+  const { theme: t, handleReply: o, handleAction: a } = k(), c = t === "dark";
+  if (!r || r.length === 0)
     return null;
-  const i = (u) => {
-    q(u) ? o(u) : $(u) && s(u);
+  const l = (u) => {
+    Y(u) ? o(u) : I(u) && a(u);
   };
   return /* @__PURE__ */ e(
     "div",
     {
-      className: `
-        px-3 py-2
-        ${a ? "bg-zinc-900" : "bg-white"}
-      `,
+      className: `rcs-emulator-suggestions-bar rcs-emulator-px-3 rcs-emulator-py-2 ${c ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
       role: "group",
       "aria-label": "Quick replies",
       children: /* @__PURE__ */ e(
         "div",
         {
-          className: "flex gap-2 overflow-x-auto pb-1 -mx-1 px-1",
-          style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-          children: t.map((u, c) => /* @__PURE__ */ e(
-            Ee,
+          className: "rcs-emulator-flex rcs-emulator-gap-2 rcs-emulator-overflow-x-auto rcs-emulator-pb-1 rcs-emulator--mx-1 rcs-emulator-px-1 rcs-emulator-scrollbar-hide",
+          children: r.map((u, m) => /* @__PURE__ */ e(
+            je,
             {
               suggestion: u,
-              onClick: () => i(u),
+              onClick: () => l(u),
               variant: "bar"
             },
-            c
+            m
           ))
         }
       )
     }
   );
-}), Ve = g(function() {
-  const { theme: t, state: n, showSuggestions: o } = N(), { chatHistory: s, isTyping: a, error: i } = n, u = pe([
-    s.length,
-    a
-  ]), c = t === "dark", d = s[s.length - 1], m = o && d?.sender === "business" && !a ? d.suggestions : void 0;
-  return /* @__PURE__ */ l(
+}), Ve = p(function() {
+  const { theme: r, state: t, showSuggestions: o } = k(), { chatHistory: a, isTyping: c, error: l } = t, u = ge([
+    a.length,
+    c
+  ]), m = r === "dark", i = m ? "rcs-emulator-dark" : "rcs-emulator-light", h = a[a.length - 1], f = o && h?.sender === "business" && !c ? h.suggestions : void 0;
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: `
-        flex flex-col h-full w-full overflow-hidden
-        ${c ? "bg-zinc-950" : "bg-white"}
-      `,
+      className: `rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-h-full rcs-emulator-w-full rcs-emulator-overflow-hidden ${m ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
       children: [
         /* @__PURE__ */ e(xe, {}),
-        i && /* @__PURE__ */ e(
+        l && /* @__PURE__ */ e(
           "div",
           {
-            className: "px-4 py-2 bg-red-500/10 border-b border-red-500/20",
+            className: "rcs-emulator-error-alert",
             role: "alert",
-            children: /* @__PURE__ */ e("p", { className: "text-sm text-red-500", children: i })
+            children: /* @__PURE__ */ e("p", { className: "rcs-emulator-text-sm rcs-emulator-text-red-500", children: l })
           }
         ),
-        /* @__PURE__ */ l("div", { ref: u, className: "flex-1 overflow-y-auto rcs-scrollbar", children: [
+        /* @__PURE__ */ n("div", { ref: u, className: "rcs-emulator-flex-1 rcs-emulator-overflow-y-auto rcs-emulator-scrollbar", children: [
           /* @__PURE__ */ e(be, {}),
-          /* @__PURE__ */ e(Se, {})
+          /* @__PURE__ */ e(Ee, {})
         ] }),
-        m && m.length > 0 && /* @__PURE__ */ e(We, { suggestions: m }),
-        /* @__PURE__ */ l(
+        f && f.length > 0 && /* @__PURE__ */ e(We, { suggestions: f }),
+        /* @__PURE__ */ n(
           "div",
           {
-            className: `
-          px-3 py-2 flex items-center gap-2
-          ${c ? "bg-zinc-900" : "bg-white"}
-        `,
+            className: `rcs-emulator-input-area ${i}`,
             children: [
               /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  className: `
-            w-9 h-9 flex items-center justify-center rounded-full flex-shrink-0
-            border transition-colors
-            ${c ? "border-zinc-700 text-zinc-400 hover:bg-zinc-800" : "border-gray-300 text-gray-500 hover:bg-gray-100"}
-          `,
+                  className: `rcs-emulator-add-btn ${i}`,
                   "aria-label": "Add attachment",
                   children: /* @__PURE__ */ e(
                     "svg",
                     {
-                      className: "w-5 h-5",
+                      className: "rcs-emulator-w-5 rcs-emulator-h-5",
                       fill: "none",
                       viewBox: "0 0 24 24",
                       stroke: "currentColor",
@@ -1256,18 +1426,15 @@ const We = g(function({
                   )
                 }
               ),
-              /* @__PURE__ */ l(
+              /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `
-            flex-1 flex items-center gap-2 px-4 py-2 rounded-full
-            ${c ? "bg-zinc-800" : "bg-gray-100"}
-          `,
+                  className: `rcs-emulator-input-container ${i}`,
                   children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
-                        className: `flex-1 text-sm ${c ? "text-zinc-500" : "text-gray-400"}`,
+                        className: `rcs-emulator-flex-1 rcs-emulator-text-sm ${m ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-400"}`,
                         children: "RCS message"
                       }
                     ),
@@ -1275,12 +1442,12 @@ const We = g(function({
                       "button",
                       {
                         type: "button",
-                        className: `p-1 ${c ? "text-zinc-500" : "text-gray-400"}`,
+                        className: `rcs-emulator-p-1 ${m ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-400"}`,
                         "aria-label": "Emoji",
                         children: /* @__PURE__ */ e(
                           "svg",
                           {
-                            className: "w-5 h-5",
+                            className: "rcs-emulator-w-5 rcs-emulator-h-5",
                             fill: "none",
                             viewBox: "0 0 24 24",
                             stroke: "currentColor",
@@ -1301,12 +1468,12 @@ const We = g(function({
                       "button",
                       {
                         type: "button",
-                        className: `p-1 ${c ? "text-zinc-500" : "text-gray-400"}`,
+                        className: `rcs-emulator-p-1 ${m ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-400"}`,
                         "aria-label": "Attach image",
                         children: /* @__PURE__ */ e(
                           "svg",
                           {
-                            className: "w-5 h-5",
+                            className: "rcs-emulator-w-5 rcs-emulator-h-5",
                             fill: "none",
                             viewBox: "0 0 24 24",
                             stroke: "currentColor",
@@ -1330,9 +1497,9 @@ const We = g(function({
                 "button",
                 {
                   type: "button",
-                  className: "w-10 h-10 flex items-center justify-center rounded-full bg-green-100 text-green-600 flex-shrink-0",
+                  className: "rcs-emulator-voice-btn",
                   "aria-label": "Voice message",
-                  children: /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93h2c0 3.31 2.69 6 6 6s6-2.69 6-6h2c0 4.08-3.06 7.44-7 7.93V20h4v2H8v-2h4v-4.07z" }) })
+                  children: /* @__PURE__ */ e("svg", { className: "rcs-emulator-w-5 rcs-emulator-h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93h2c0 3.31 2.69 6 6 6s6-2.69 6-6h2c0 4.08-3.06 7.44-7 7.93V20h4v2H8v-2h4v-4.07z" }) })
                 }
               )
             ]
@@ -1341,37 +1508,28 @@ const We = g(function({
       ]
     }
   );
-}), He = g(function() {
-  const { theme: t, businessInfo: n, toggleProfile: o } = N(), [s, a] = z("info"), i = t === "dark", u = n.bannerImage || "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=800&q=80", c = n.brandColor || "#0084ff";
-  return /* @__PURE__ */ l(
+}), He = p(function() {
+  const { theme: r, businessInfo: t, toggleProfile: o } = k(), [a, c] = A("info"), l = r === "dark", u = t.bannerImage || "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=800&q=80", m = t.brandColor || "#0084ff";
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: `
-        absolute inset-0 z-50 flex flex-col
-        ${i ? "bg-zinc-950" : "bg-white"}
-      `,
+      className: `rcs-emulator-absolute rcs-emulator-inset-0 rcs-emulator-z-50 rcs-emulator-flex rcs-emulator-flex-col ${l ? "rcs-emulator-bg-zinc-950" : "rcs-emulator-bg-white"}`,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ n(
           "header",
           {
-            className: `
-          flex items-center gap-3 px-4 py-3 border-b
-          ${i ? "bg-zinc-900 border-zinc-800" : "bg-white border-gray-200"}
-        `,
+            className: `rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-3 rcs-emulator-px-4 rcs-emulator-py-3 rcs-emulator-border-b ${l ? "rcs-emulator-bg-zinc-900 rcs-emulator-border-zinc-800" : "rcs-emulator-bg-white rcs-emulator-border-gray-200"}`,
             children: [
               /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: o,
-                  className: `
-            p-1.5 -ml-1.5 rounded-full transition-colors
-            ${i ? "hover:bg-zinc-800 text-white" : "hover:bg-gray-100 text-gray-900"}
-          `,
+                  className: `rcs-emulator-p-1-5 rcs-emulator--ml-1-5 rcs-emulator-rounded-full rcs-emulator-transition-colors ${l ? "rcs-emulator-hover-bg-zinc-800 rcs-emulator-text-white" : "rcs-emulator-hover-bg-gray-100 rcs-emulator-text-gray-900"}`,
                   "aria-label": "Go back",
                   children: /* @__PURE__ */ e(
                     "svg",
                     {
-                      className: "w-5 h-5",
+                      className: "rcs-emulator-w-5 rcs-emulator-h-5",
                       fill: "none",
                       viewBox: "0 0 24 24",
                       stroke: "currentColor",
@@ -1391,158 +1549,147 @@ const We = g(function({
               /* @__PURE__ */ e(
                 "span",
                 {
-                  className: `text-base font-medium ${i ? "text-white" : "text-gray-900"}`,
+                  className: `rcs-emulator-text-base rcs-emulator-font-medium ${l ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
                   children: "Info & options"
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ l("div", { className: "flex-1 overflow-y-auto", children: [
-          /* @__PURE__ */ e("div", { className: "relative h-40 bg-gray-200", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ n("div", { className: "rcs-emulator-flex-1 rcs-emulator-overflow-y-auto", children: [
+          /* @__PURE__ */ e("div", { className: "rcs-emulator-relative rcs-emulator-h-40 rcs-emulator-bg-gray-200", children: /* @__PURE__ */ e(
             "img",
             {
               src: u,
               alt: "Business banner",
-              className: "w-full h-full object-cover"
+              className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-object-cover"
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: "relative px-4", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "rcs-emulator-relative rcs-emulator-px-4", children: /* @__PURE__ */ e(
             "div",
             {
-              className: `
-              absolute -top-10 left-1/2 -translate-x-1/2
-              w-20 h-20 rounded-full overflow-hidden border-4
-              ${i ? "border-zinc-950 bg-zinc-800" : "border-white bg-gray-100"}
-              shadow-lg
-            `,
-              children: n.logo ? /* @__PURE__ */ e(
+              className: `rcs-emulator-absolute rcs-emulator--top-10 rcs-emulator-left-1-2 rcs-emulator--translate-x-1-2 rcs-emulator-w-20 rcs-emulator-h-20 rcs-emulator-rounded-full rcs-emulator-overflow-hidden rcs-emulator-border-4 ${l ? "rcs-emulator-border-zinc-950 rcs-emulator-bg-zinc-800" : "rcs-emulator-border-white rcs-emulator-bg-gray-100"} rcs-emulator-shadow-lg`,
+              children: t.logo ? /* @__PURE__ */ e(
                 "img",
                 {
-                  src: n.logo,
-                  alt: `${n.name} logo`,
-                  className: "w-full h-full object-cover"
+                  src: t.logo,
+                  alt: `${t.name} logo`,
+                  className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-object-cover"
                 }
               ) : /* @__PURE__ */ e(
                 "div",
                 {
-                  className: "w-full h-full flex items-center justify-center text-2xl font-bold text-white",
-                  style: { backgroundColor: c },
-                  children: n.name.charAt(0).toUpperCase()
+                  className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-text-2xl rcs-emulator-font-bold rcs-emulator-text-white",
+                  style: { backgroundColor: m },
+                  children: t.name.charAt(0).toUpperCase()
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ l("div", { className: "pt-12 pb-4 px-4 text-center", children: [
+          /* @__PURE__ */ n("div", { className: "rcs-emulator-pt-12 rcs-emulator-pb-4 rcs-emulator-px-4 rcs-emulator-text-center", children: [
             /* @__PURE__ */ e(
               "h1",
               {
-                className: `text-xl font-semibold ${i ? "text-white" : "text-gray-900"}`,
-                children: n.name
+                className: `rcs-emulator-text-xl rcs-emulator-font-semibold ${l ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
+                children: t.name
               }
             ),
-            n.description && /* @__PURE__ */ e("p", { className: `text-sm mt-1 ${i ? "text-zinc-400" : "text-gray-500"}`, children: n.description })
+            t.description && /* @__PURE__ */ e("p", { className: `rcs-emulator-text-sm rcs-emulator-mt-1 ${l ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`, children: t.description })
           ] }),
-          /* @__PURE__ */ l("div", { className: "flex justify-center gap-4 px-4 pb-4", children: [
-            n.phoneNumbers && n.phoneNumbers.length > 0 && /* @__PURE__ */ e(
+          /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-justify-center rcs-emulator-gap-4 rcs-emulator-px-4 rcs-emulator-pb-4", children: [
+            t.phoneNumbers && t.phoneNumbers.length > 0 && /* @__PURE__ */ e(
               _,
               {
                 icon: "phone",
                 label: "Call",
-                isDark: i,
-                brandColor: c,
+                isDark: l,
+                brandColor: m,
                 onClick: () => {
-                  const d = n.phoneNumbers?.[0]?.number;
-                  d && (window.location.href = `tel:${d}`);
+                  const i = t.phoneNumbers?.[0]?.number;
+                  i && (window.location.href = `tel:${i}`);
                 }
               }
             ),
-            n.websites && n.websites.length > 0 && /* @__PURE__ */ e(
+            t.websites && t.websites.length > 0 && /* @__PURE__ */ e(
               _,
               {
                 icon: "globe",
                 label: "Website",
-                isDark: i,
-                brandColor: c,
+                isDark: l,
+                brandColor: m,
                 onClick: () => {
-                  const d = n.websites?.[0]?.url;
-                  d && window.open(d, "_blank", "noopener,noreferrer");
+                  const i = t.websites?.[0]?.url;
+                  i && window.open(i, "_blank", "noopener,noreferrer");
                 }
               }
             ),
-            n.emails && n.emails.length > 0 && /* @__PURE__ */ e(
+            t.emails && t.emails.length > 0 && /* @__PURE__ */ e(
               _,
               {
                 icon: "mail",
                 label: "Contact",
-                isDark: i,
-                brandColor: c,
+                isDark: l,
+                brandColor: m,
                 onClick: () => {
-                  const d = n.emails?.[0]?.email;
-                  d && (window.location.href = `mailto:${d}`);
+                  const i = t.emails?.[0]?.email;
+                  i && (window.location.href = `mailto:${i}`);
                 }
               }
             )
           ] }),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ n(
             "div",
             {
-              className: `
-            flex mx-4 rounded-lg overflow-hidden border
-            ${i ? "border-zinc-700 bg-zinc-800" : "border-gray-200 bg-gray-100"}
-          `,
+              className: `rcs-emulator-tabs-container rcs-emulator-flex rcs-emulator-mx-4 rcs-emulator-rounded-lg rcs-emulator-overflow-hidden rcs-emulator-border ${l ? "rcs-emulator-border-zinc-700 rcs-emulator-bg-zinc-800" : "rcs-emulator-border-gray-200 rcs-emulator-bg-gray-100"}`,
               children: [
                 /* @__PURE__ */ e(
                   F,
                   {
-                    active: s === "info",
-                    onClick: () => a("info"),
-                    isDark: i,
-                    brandColor: c,
+                    active: a === "info",
+                    onClick: () => c("info"),
+                    isDark: l,
+                    brandColor: m,
                     children: "Info"
                   }
                 ),
                 /* @__PURE__ */ e(
                   F,
                   {
-                    active: s === "options",
-                    onClick: () => a("options"),
-                    isDark: i,
-                    brandColor: c,
+                    active: a === "options",
+                    onClick: () => c("options"),
+                    isDark: l,
+                    brandColor: m,
                     children: "Options"
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ e("div", { className: "p-4", children: s === "info" ? /* @__PURE__ */ e(_e, { isDark: i, brandColor: c }) : /* @__PURE__ */ e(Ue, { isDark: i }) })
+          /* @__PURE__ */ e("div", { className: "rcs-emulator-p-4", children: a === "info" ? /* @__PURE__ */ e(_e, { isDark: l, brandColor: m }) : /* @__PURE__ */ e(Ue, { isDark: l }) })
         ] })
       ]
     }
   );
-}), _ = g(function({
-  icon: t,
-  label: n,
+}), _ = p(function({
+  icon: r,
+  label: t,
   isDark: o,
-  brandColor: s,
-  onClick: a
+  brandColor: a,
+  onClick: c
 }) {
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ n(
     "button",
     {
-      onClick: a,
-      className: `
-        flex flex-col items-center gap-2 px-6 py-3 rounded-xl border transition-colors
-        ${o ? "bg-zinc-800 border-zinc-700 hover:bg-zinc-700" : "bg-white border-gray-200 hover:bg-gray-50"}
-      `,
+      onClick: c,
+      className: `rcs-emulator-quick-action-btn rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-items-center rcs-emulator-gap-2 rcs-emulator-px-6 rcs-emulator-py-3 rcs-emulator-rounded-xl rcs-emulator-border rcs-emulator-transition-colors ${o ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
       children: [
         /* @__PURE__ */ e(
           "svg",
           {
-            className: "w-6 h-6",
+            className: "rcs-emulator-w-6 rcs-emulator-h-6",
             fill: "none",
             viewBox: "0 0 24 24",
-            stroke: s,
+            stroke: a,
             children: {
               phone: /* @__PURE__ */ e(
                 "path",
@@ -1571,113 +1718,104 @@ const We = g(function({
                   d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                 }
               )
-            }[t]
+            }[r]
           }
         ),
         /* @__PURE__ */ e(
           "span",
           {
-            className: `text-xs font-medium ${o ? "text-zinc-300" : "text-gray-600"}`,
-            children: n
+            className: `rcs-emulator-text-xs rcs-emulator-font-medium ${o ? "rcs-emulator-text-zinc-300" : "rcs-emulator-text-gray-600"}`,
+            children: t
           }
         )
       ]
     }
   );
-}), F = g(function({
-  active: t,
-  onClick: n,
+}), F = p(function({
+  active: r,
+  onClick: t,
   isDark: o,
-  brandColor: s,
-  children: a
+  brandColor: a,
+  children: c
 }) {
   return /* @__PURE__ */ e(
     "button",
     {
-      onClick: n,
-      className: `
-        flex-1 py-2.5 text-sm font-medium transition-colors rounded-lg
-        ${t ? "text-white" : o ? "text-zinc-400 hover:text-zinc-200" : "text-gray-500 hover:text-gray-700"}
-      `,
-      style: t ? { backgroundColor: s } : void 0,
-      children: a
+      onClick: t,
+      className: `rcs-emulator-tab-btn rcs-emulator-flex-1 rcs-emulator-py-2-5 rcs-emulator-text-sm rcs-emulator-font-medium rcs-emulator-transition-colors rcs-emulator-rounded-lg ${r ? "rcs-emulator-active" : `rcs-emulator-inactive ${o ? "rcs-emulator-dark" : "rcs-emulator-light"}`}`,
+      style: r ? { backgroundColor: a } : void 0,
+      children: c
     }
   );
-}), _e = g(function({ isDark: t, brandColor: n }) {
-  const { businessInfo: o } = N();
-  return o.phoneNumbers && o.phoneNumbers.length > 0 || o.websites && o.websites.length > 0 || o.emails && o.emails.length > 0 ? /* @__PURE__ */ l(
+}), _e = p(function({ isDark: r, brandColor: t }) {
+  const { businessInfo: o } = k();
+  return o.phoneNumbers && o.phoneNumbers.length > 0 || o.websites && o.websites.length > 0 || o.emails && o.emails.length > 0 ? /* @__PURE__ */ n(
     "div",
     {
-      className: `
-        rounded-xl overflow-hidden border divide-y
-        ${t ? "bg-zinc-900 border-zinc-800 divide-zinc-800" : "bg-gray-50 border-gray-200 divide-gray-200"}
-      `,
+      className: `rcs-emulator-profile-section rcs-emulator-rounded-xl rcs-emulator-overflow-hidden rcs-emulator-border rcs-emulator-divide-y ${r ? "rcs-emulator-dark rcs-emulator-divide-zinc-800" : "rcs-emulator-light rcs-emulator-divide-gray-200"}`,
       children: [
-        o.phoneNumbers?.map((a, i) => /* @__PURE__ */ e(
+        o.phoneNumbers?.map((c, l) => /* @__PURE__ */ e(
           U,
           {
             icon: "phone",
-            primary: a.number,
-            secondary: a.label,
-            isDark: t,
-            brandColor: n,
-            onClick: () => window.location.href = `tel:${a.number}`
+            primary: c.number,
+            secondary: c.label,
+            isDark: r,
+            brandColor: t,
+            onClick: () => window.location.href = `tel:${c.number}`
           },
-          `phone-${i}`
+          `phone-${l}`
         )),
-        o.websites?.map((a, i) => /* @__PURE__ */ e(
+        o.websites?.map((c, l) => /* @__PURE__ */ e(
           U,
           {
             icon: "globe",
-            primary: a.url.replace(/^https?:\/\//, ""),
-            secondary: a.label || "Website",
-            isDark: t,
-            brandColor: n,
-            onClick: () => window.open(a.url, "_blank", "noopener,noreferrer")
+            primary: c.url.replace(/^https?:\/\//, ""),
+            secondary: c.label || "Website",
+            isDark: r,
+            brandColor: t,
+            onClick: () => window.open(c.url, "_blank", "noopener,noreferrer")
           },
-          `web-${i}`
+          `web-${l}`
         )),
-        o.emails?.map((a, i) => /* @__PURE__ */ e(
+        o.emails?.map((c, l) => /* @__PURE__ */ e(
           U,
           {
             icon: "mail",
-            primary: a.email,
-            secondary: a.label || "Email",
-            isDark: t,
-            brandColor: n,
-            onClick: () => window.location.href = `mailto:${a.email}`
+            primary: c.email,
+            secondary: c.label || "Email",
+            isDark: r,
+            brandColor: t,
+            onClick: () => window.location.href = `mailto:${c.email}`
           },
-          `email-${i}`
+          `email-${l}`
         ))
       ]
     }
   ) : /* @__PURE__ */ e(
     "div",
     {
-      className: `text-center py-8 ${t ? "text-zinc-500" : "text-gray-400"}`,
+      className: `rcs-emulator-text-center rcs-emulator-py-8 ${r ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-400"}`,
       children: "No contact information available"
     }
   );
-}), U = g(function({
-  icon: t,
-  primary: n,
+}), U = p(function({
+  icon: r,
+  primary: t,
   secondary: o,
-  isDark: s,
-  onClick: a
+  isDark: a,
+  onClick: c
 }) {
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ n(
     "button",
     {
-      onClick: a,
-      className: `
-        w-full flex items-center gap-4 px-4 py-3.5 text-left transition-colors
-        ${s ? "hover:bg-zinc-800" : "hover:bg-gray-100"}
-      `,
+      onClick: c,
+      className: `rcs-emulator-list-item rcs-emulator-w-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-4 rcs-emulator-px-4 rcs-emulator-py-3-5 rcs-emulator-text-left rcs-emulator-transition-colors ${a ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
       children: [
         /* @__PURE__ */ e(
           "svg",
           {
-            className: `w-5 h-5 flex-shrink-0 ${s ? "text-zinc-500" : "text-gray-400"}`,
+            className: `rcs-emulator-w-5 rcs-emulator-h-5 rcs-emulator-flex-shrink-0 ${a ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-400"}`,
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -1691,23 +1829,23 @@ const We = g(function({
                   phone: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z",
                   globe: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9",
                   mail: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                }[t]
+                }[r]
               }
             )
           }
         ),
-        /* @__PURE__ */ l("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ n("div", { className: "rcs-emulator-flex-1 rcs-emulator-min-w-0", children: [
           /* @__PURE__ */ e(
             "p",
             {
-              className: `text-sm font-medium truncate ${s ? "text-white" : "text-gray-900"}`,
-              children: n
+              className: `rcs-emulator-text-sm rcs-emulator-font-medium rcs-emulator-truncate ${a ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
+              children: t
             }
           ),
           o && /* @__PURE__ */ e(
             "p",
             {
-              className: `text-xs truncate ${s ? "text-zinc-500" : "text-gray-500"}`,
+              className: `rcs-emulator-text-xs rcs-emulator-truncate ${a ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-500"}`,
               children: o
             }
           )
@@ -1715,21 +1853,18 @@ const We = g(function({
       ]
     }
   );
-}), Ue = g(function({ isDark: t }) {
-  return /* @__PURE__ */ l(
+}), Ue = p(function({ isDark: r }) {
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: `
-        rounded-xl overflow-hidden border divide-y
-        ${t ? "bg-zinc-900 border-zinc-800 divide-zinc-800" : "bg-gray-50 border-gray-200 divide-gray-200"}
-      `,
+      className: `rcs-emulator-profile-section rcs-emulator-rounded-xl rcs-emulator-overflow-hidden rcs-emulator-border rcs-emulator-divide-y ${r ? "rcs-emulator-dark rcs-emulator-divide-zinc-800" : "rcs-emulator-light rcs-emulator-divide-gray-200"}`,
       children: [
         /* @__PURE__ */ e(
           D,
           {
             icon: "bell",
             label: "Notifications",
-            isDark: t
+            isDark: r
           }
         ),
         /* @__PURE__ */ e(
@@ -1737,7 +1872,7 @@ const We = g(function({
           {
             icon: "block",
             label: "Block & report spam",
-            isDark: t
+            isDark: r
           }
         ),
         /* @__PURE__ */ e(
@@ -1745,29 +1880,26 @@ const We = g(function({
           {
             icon: "info",
             label: "About RCS",
-            isDark: t
+            isDark: r
           }
         )
       ]
     }
   );
-}), D = g(function({
-  icon: t,
-  label: n,
+}), D = p(function({
+  icon: r,
+  label: t,
   isDark: o
 }) {
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ n(
     "button",
     {
-      className: `
-        w-full flex items-center gap-4 px-4 py-3.5 text-left transition-colors
-        ${o ? "hover:bg-zinc-800" : "hover:bg-gray-100"}
-      `,
+      className: `rcs-emulator-list-item rcs-emulator-w-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-4 rcs-emulator-px-4 rcs-emulator-py-3-5 rcs-emulator-text-left rcs-emulator-transition-colors ${o ? "rcs-emulator-dark" : "rcs-emulator-light"}`,
       children: [
         /* @__PURE__ */ e(
           "svg",
           {
-            className: `w-5 h-5 flex-shrink-0 ${o ? "text-zinc-500" : "text-gray-400"}`,
+            className: `rcs-emulator-w-5 rcs-emulator-h-5 rcs-emulator-flex-shrink-0 ${o ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-400"}`,
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -1781,7 +1913,7 @@ const We = g(function({
                   bell: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9",
                   block: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636",
                   info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                }[t]
+                }[r]
               }
             )
           }
@@ -1789,97 +1921,80 @@ const We = g(function({
         /* @__PURE__ */ e(
           "span",
           {
-            className: `text-sm font-medium ${o ? "text-white" : "text-gray-900"}`,
-            children: n
+            className: `rcs-emulator-text-sm rcs-emulator-font-medium ${o ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
+            children: t
           }
         )
       ]
     }
   );
-}), J = {
-  FULL: "h-full",
-  TALL: "h-[80%]",
-  HALF: "h-[50%]"
-}, De = g(function() {
-  const { theme: t, businessInfo: n, webView: o, closeWebView: s } = N(), [a, i] = z(!0), [u, c] = z(!1), d = t === "dark", m = n.brandColor || "#0084ff";
-  S(() => {
-    o?.url && (i(!0), c(!1));
+}), q = {
+  FULL: "rcs-emulator-webview-full",
+  TALL: "rcs-emulator-webview-tall",
+  HALF: "rcs-emulator-webview-half"
+}, De = p(function() {
+  const { theme: r, businessInfo: t, webView: o, closeWebView: a } = k(), [c, l] = A(!0), [u, m] = A(!1), i = r === "dark", h = t.brandColor || "#0084ff";
+  j(() => {
+    o?.url && (l(!0), m(!1));
   }, [o?.url]);
-  const f = M(() => {
-    i(!1);
-  }, []), v = M(() => {
-    i(!1), c(!0);
-  }, []), x = (k) => {
+  const f = $(() => {
+    l(!1);
+  }, []), v = $(() => {
+    l(!1), m(!0);
+  }, []), b = (C) => {
     try {
-      return new URL(k).hostname;
+      return new URL(C).hostname;
     } catch {
       return "Web Page";
     }
   };
   if (!o || !o.isOpen) return null;
-  const { url: L, viewMode: b, title: p, postbackData: y } = o, h = p || x(L), w = b === "FULL", C = b === "TALL" || b === "HALF", I = J[b] || J.TALL;
-  return /* @__PURE__ */ l(
+  const { url: N, viewMode: y, title: w, postbackData: g } = o, d = w || b(N), x = y === "FULL", L = y === "TALL" || y === "HALF", z = q[y] || q.TALL;
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: `
-        rcs-webview-overlay absolute inset-0 z-50 flex flex-col
-        ${w ? "" : "justify-end"}
-        ${d ? "bg-black/60" : "bg-black/40"}
-      `,
+      className: `rcs-emulator-webview-overlay ${x ? "rcs-emulator-webview-full" : "rcs-emulator-webview-bottom-sheet"} rcs-emulator-absolute rcs-emulator-inset-0 rcs-emulator-z-50 rcs-emulator-flex rcs-emulator-flex-col ${x ? "" : "rcs-emulator-justify-end"} ${i ? "rcs-emulator-bg-black-60" : "rcs-emulator-bg-black-40"}`,
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": `WebView: ${h}`,
-      "data-postback": y,
-      "data-view-mode": b,
+      "aria-label": `WebView: ${d}`,
+      "data-postback": g,
+      "data-view-mode": y,
       children: [
-        C && /* @__PURE__ */ e(
+        L && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            className: "absolute inset-0 w-full h-full cursor-default",
-            onClick: s,
+            className: "rcs-emulator-absolute rcs-emulator-inset-0 rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-cursor-default",
+            onClick: a,
             "aria-label": "Close WebView"
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ n(
           "div",
           {
-            className: `
-          rcs-webview-container relative flex flex-col overflow-hidden
-          ${d ? "bg-zinc-900" : "bg-white"}
-          ${I} w-full
-          ${C ? "rounded-t-2xl shadow-2xl" : ""}
-        `,
+            className: `rcs-emulator-relative rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-overflow-hidden ${i ? "rcs-emulator-bg-zinc-900" : "rcs-emulator-bg-white"} ${z} rcs-emulator-w-full ${L ? "rcs-emulator-rounded-t-2xl rcs-emulator-shadow-2xl" : ""}`,
             style: {
               // Ensure container is above backdrop
               position: "relative",
               zIndex: 1
             },
             children: [
-              /* @__PURE__ */ l(
+              /* @__PURE__ */ n(
                 "header",
                 {
-                  className: `
-            rcs-webview-header flex items-center gap-3 px-2 py-2 flex-shrink-0
-            border-b
-            ${d ? "bg-zinc-900 border-zinc-800" : "bg-white border-gray-200"}
-          `,
+                  className: `rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-3 rcs-emulator-px-2 rcs-emulator-py-2 rcs-emulator-flex-shrink-0 rcs-emulator-border-b ${i ? "rcs-emulator-bg-zinc-900 rcs-emulator-border-zinc-800" : "rcs-emulator-bg-white rcs-emulator-border-gray-200"}`,
                   children: [
                     /* @__PURE__ */ e(
                       "button",
                       {
                         type: "button",
-                        onClick: s,
-                        className: `
-              rcs-webview-close w-10 h-10 rounded-full flex items-center justify-center
-              transition-colors
-              ${d ? "text-white hover:bg-zinc-800" : "text-gray-700 hover:bg-gray-100"}
-            `,
+                        onClick: a,
+                        className: `rcs-emulator-w-10 rcs-emulator-h-10 rcs-emulator-rounded-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-transition-colors ${i ? "rcs-emulator-text-white rcs-emulator-hover-bg-zinc-800" : "rcs-emulator-text-gray-700 rcs-emulator-hover-bg-gray-100"}`,
                         "aria-label": "Close WebView",
                         children: /* @__PURE__ */ e(
                           "svg",
                           {
-                            className: "w-6 h-6",
+                            className: "rcs-emulator-w-6 rcs-emulator-h-6",
                             fill: "none",
                             viewBox: "0 0 24 24",
                             stroke: "currentColor",
@@ -1896,25 +2011,19 @@ const We = g(function({
                         )
                       }
                     ),
-                    /* @__PURE__ */ l("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ n("div", { className: "rcs-emulator-flex-1 rcs-emulator-min-w-0", children: [
                       /* @__PURE__ */ e(
                         "h2",
                         {
-                          className: `
-                rcs-webview-title text-base font-medium truncate
-                ${d ? "text-white" : "text-gray-900"}
-              `,
-                          children: h
+                          className: `rcs-emulator-text-base rcs-emulator-font-medium rcs-emulator-truncate ${i ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
+                          children: d
                         }
                       ),
                       /* @__PURE__ */ e(
                         "p",
                         {
-                          className: `
-                rcs-webview-url text-xs truncate
-                ${d ? "text-zinc-400" : "text-gray-500"}
-              `,
-                          children: x(L)
+                          className: `rcs-emulator-text-xs rcs-emulator-truncate ${i ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`,
+                          children: b(N)
                         }
                       )
                     ] }),
@@ -1922,15 +2031,12 @@ const We = g(function({
                       "button",
                       {
                         type: "button",
-                        className: `
-              w-10 h-10 rounded-full flex items-center justify-center
-              ${d ? "text-zinc-400 hover:bg-zinc-800" : "text-gray-500 hover:bg-gray-100"}
-            `,
+                        className: `rcs-emulator-w-10 rcs-emulator-h-10 rcs-emulator-rounded-full rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center ${i ? "rcs-emulator-text-zinc-400 rcs-emulator-hover-bg-zinc-800" : "rcs-emulator-text-gray-500 rcs-emulator-hover-bg-gray-100"}`,
                         "aria-label": "More options",
-                        children: /* @__PURE__ */ l(
+                        children: /* @__PURE__ */ n(
                           "svg",
                           {
-                            className: "w-5 h-5",
+                            className: "rcs-emulator-w-5 rcs-emulator-h-5",
                             fill: "currentColor",
                             viewBox: "0 0 24 24",
                             children: [
@@ -1945,36 +2051,32 @@ const We = g(function({
                   ]
                 }
               ),
-              a && /* @__PURE__ */ e(
+              c && /* @__PURE__ */ e(
                 "div",
                 {
-                  className: "rcs-webview-loading absolute top-14 left-0 right-0 h-1 overflow-hidden",
-                  style: { backgroundColor: `${m}20` },
+                  className: "rcs-emulator-absolute rcs-emulator-top-14 rcs-emulator-left-0 rcs-emulator-right-0 rcs-emulator-h-1 rcs-emulator-overflow-hidden",
+                  style: { backgroundColor: `${h}20` },
                   children: /* @__PURE__ */ e(
                     "div",
                     {
-                      className: "h-full animate-pulse",
+                      className: "rcs-emulator-h-full rcs-emulator-animate-pulse rcs-emulator-webview-loading-bar",
                       style: {
-                        backgroundColor: m,
-                        animation: "webview-loading 1.5s ease-in-out infinite",
+                        backgroundColor: h,
                         width: "30%"
                       }
                     }
                   )
                 }
               ),
-              u && /* @__PURE__ */ l(
+              u && /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `
-              rcs-webview-error flex-1 flex flex-col items-center justify-center p-6 text-center
-              ${d ? "text-zinc-400" : "text-gray-500"}
-            `,
+                  className: `rcs-emulator-flex-1 rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-p-6 rcs-emulator-text-center ${i ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`,
                   children: [
                     /* @__PURE__ */ e(
                       "svg",
                       {
-                        className: "w-16 h-16 mb-4 opacity-50",
+                        className: "rcs-emulator-w-16 rcs-emulator-h-16 rcs-emulator-mb-4 rcs-emulator-opacity-50",
                         fill: "none",
                         viewBox: "0 0 24 24",
                         stroke: "currentColor",
@@ -1989,29 +2091,26 @@ const We = g(function({
                         )
                       }
                     ),
-                    /* @__PURE__ */ e("p", { className: "text-sm font-medium mb-2", children: "Unable to load page" }),
-                    /* @__PURE__ */ e("p", { className: "text-xs opacity-75 mb-4", children: "This content cannot be displayed in the emulator" }),
+                    /* @__PURE__ */ e("p", { className: "rcs-emulator-text-sm rcs-emulator-font-medium rcs-emulator-mb-2", children: "Unable to load page" }),
+                    /* @__PURE__ */ e("p", { className: "rcs-emulator-text-xs rcs-emulator-opacity-75 rcs-emulator-mb-4", children: "This content cannot be displayed in the emulator" }),
                     /* @__PURE__ */ e(
                       "button",
                       {
                         type: "button",
-                        onClick: s,
-                        className: `
-                px-4 py-2 rounded-full text-sm font-medium
-                ${d ? "bg-zinc-800 text-white hover:bg-zinc-700" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}
-              `,
+                        onClick: a,
+                        className: `rcs-emulator-px-4 rcs-emulator-py-2 rcs-emulator-rounded-full rcs-emulator-text-sm rcs-emulator-font-medium ${i ? "rcs-emulator-bg-zinc-800 rcs-emulator-text-white rcs-emulator-hover-bg-zinc-700" : "rcs-emulator-bg-gray-100 rcs-emulator-text-gray-700 rcs-emulator-hover-bg-gray-200"}`,
                         children: "Go Back"
                       }
                     )
                   ]
                 }
               ),
-              !u && /* @__PURE__ */ e("div", { className: "rcs-webview-iframe-container flex-1 overflow-hidden", children: /* @__PURE__ */ e(
+              !u && /* @__PURE__ */ e("div", { className: "rcs-emulator-flex-1 rcs-emulator-overflow-hidden", children: /* @__PURE__ */ e(
                 "iframe",
                 {
-                  src: L,
-                  title: h,
-                  className: "w-full h-full border-0",
+                  src: N,
+                  title: d,
+                  className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-border-0",
                   onLoad: f,
                   onError: v,
                   sandbox: "allow-scripts allow-same-origin allow-forms allow-popups",
@@ -2019,61 +2118,48 @@ const We = g(function({
                   loading: "lazy"
                 }
               ) }),
-              C && /* @__PURE__ */ e(
+              L && /* @__PURE__ */ e(
                 "div",
                 {
-                  className: `
-              rcs-webview-safe-area h-2 flex-shrink-0
-              ${d ? "bg-zinc-900" : "bg-white"}
-            `
+                  className: `rcs-emulator-h-2 rcs-emulator-flex-shrink-0 ${i ? "rcs-emulator-bg-zinc-900" : "rcs-emulator-bg-white"}`
                 }
               )
             ]
           }
-        ),
-        /* @__PURE__ */ e("style", { children: `
-        @keyframes webview-loading {
-          0% { transform: translateX(-100%); }
-          50% { transform: translateX(200%); }
-          100% { transform: translateX(-100%); }
-        }
-      ` })
+        )
       ]
     }
   );
-}), Oe = g(function({
-  onUnlock: t,
-  messagePreview: n = "New message"
+}), Oe = p(function({
+  onUnlock: r,
+  messagePreview: t = "New message"
 }) {
-  const { theme: o, businessInfo: s } = N(), [a, i] = z(/* @__PURE__ */ new Date()), u = o === "dark";
-  S(() => {
-    const f = setInterval(() => {
-      i(/* @__PURE__ */ new Date());
+  const { theme: o, businessInfo: a } = k(), [c, l] = A(/* @__PURE__ */ new Date()), u = o === "dark";
+  j(() => {
+    const h = setInterval(() => {
+      l(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(f);
+    return () => clearInterval(h);
   }, []);
-  const c = a.toLocaleTimeString([], {
+  const m = c.toLocaleTimeString([], {
     hour: "numeric",
     minute: "2-digit",
     hour12: !0
-  }), d = a.toLocaleDateString([], {
+  }), i = c.toLocaleDateString([], {
     weekday: "short",
     month: "long",
     day: "numeric"
   });
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: `
-        lock-screen flex flex-col h-full w-full select-none
-        ${u ? "bg-zinc-900" : "bg-zinc-800"}
-      `,
+      className: `rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-h-full rcs-emulator-w-full rcs-emulator-select-none ${u ? "rcs-emulator-bg-zinc-900" : "rcs-emulator-bg-zinc-800"}`,
       children: [
-        /* @__PURE__ */ e("div", { className: "h-6" }),
-        /* @__PURE__ */ e("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-zinc-700 flex items-center justify-center", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "rcs-emulator-h-6" }),
+        /* @__PURE__ */ e("div", { className: "rcs-emulator-flex rcs-emulator-justify-center rcs-emulator-mt-4", children: /* @__PURE__ */ e("div", { className: "rcs-emulator-w-8 rcs-emulator-h-8 rcs-emulator-rounded-full rcs-emulator-bg-zinc-700 rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center", children: /* @__PURE__ */ e(
           "svg",
           {
-            className: "w-4 h-4 text-zinc-400",
+            className: "rcs-emulator-w-4 rcs-emulator-h-4 rcs-emulator-text-zinc-400",
             fill: "currentColor",
             viewBox: "0 0 20 20",
             children: /* @__PURE__ */ e(
@@ -2086,33 +2172,26 @@ const We = g(function({
             )
           }
         ) }) }),
-        /* @__PURE__ */ e("div", { className: "mt-6 text-center", children: /* @__PURE__ */ e("h1", { className: "text-5xl font-light text-white tracking-tight", children: c }) }),
-        /* @__PURE__ */ l("div", { className: "mt-2 text-center", children: [
-          /* @__PURE__ */ e("p", { className: "text-zinc-400 text-sm", children: d }),
-          /* @__PURE__ */ l("div", { className: "flex items-center justify-center gap-1 mt-1 text-zinc-500 text-xs", children: [
-            /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { d: "M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z" }) }),
-            /* @__PURE__ */ e("span", { children: "19°C" })
-          ] })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "h-24" }),
-        /* @__PURE__ */ e("div", { className: "px-4 pb-8", children: /* @__PURE__ */ l(
+        /* @__PURE__ */ e("div", { className: "rcs-emulator-mt-6 rcs-emulator-text-center", children: /* @__PURE__ */ e("h1", { className: "rcs-emulator-text-5xl rcs-emulator-font-light rcs-emulator-text-white rcs-emulator-tracking-tight", children: m }) }),
+        /* @__PURE__ */ e("div", { className: "rcs-emulator-mt-2 rcs-emulator-text-center", children: /* @__PURE__ */ e("p", { className: "rcs-emulator-text-zinc-400 rcs-emulator-text-sm", children: i }) }),
+        /* @__PURE__ */ e("div", { className: "rcs-emulator-h-24" }),
+        /* @__PURE__ */ e("div", { className: "rcs-emulator-px-4 rcs-emulator-pb-8", children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: t,
-            className: `w-full bg-white rounded-2xl p-3 flex items-center gap-3 shadow-lg 
-                     transition-transform active:scale-[0.98] hover:shadow-xl`,
+            onClick: r,
+            className: "rcs-emulator-notification-card rcs-emulator-w-full rcs-emulator-bg-white rcs-emulator-rounded-2xl rcs-emulator-p-3 rcs-emulator-flex rcs-emulator-items-center rcs-emulator-gap-3 rcs-emulator-shadow-lg rcs-emulator-transition-transform rcs-emulator-active-scale-98 rcs-emulator-hover-shadow-xl",
             children: [
-              /* @__PURE__ */ e("div", { className: "w-12 h-12 rounded-xl bg-zinc-900 flex items-center justify-center flex-shrink-0 overflow-hidden", children: s.logo ? /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: "rcs-emulator-w-12 rcs-emulator-h-12 rcs-emulator-rounded-xl rcs-emulator-bg-zinc-900 rcs-emulator-flex rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-flex-shrink-0 rcs-emulator-overflow-hidden", children: a.logo ? /* @__PURE__ */ e(
                 "img",
                 {
-                  src: s.logo,
-                  alt: s.name,
-                  className: "w-full h-full object-cover"
+                  src: a.logo,
+                  alt: a.name,
+                  className: "rcs-emulator-w-full rcs-emulator-h-full rcs-emulator-object-cover"
                 }
-              ) : /* @__PURE__ */ e("div", { className: "text-white", children: /* @__PURE__ */ l(
+              ) : /* @__PURE__ */ e("div", { className: "rcs-emulator-text-white", children: /* @__PURE__ */ n(
                 "svg",
                 {
-                  className: "w-7 h-7",
+                  className: "rcs-emulator-w-7 rcs-emulator-h-7",
                   viewBox: "0 0 24 24",
                   fill: "currentColor",
                   children: [
@@ -2132,170 +2211,161 @@ const We = g(function({
                   ]
                 }
               ) }) }),
-              /* @__PURE__ */ l("div", { className: "flex-1 text-left min-w-0", children: [
-                /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-gray-900 truncate", children: s.name }),
-                /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 truncate", children: n })
+              /* @__PURE__ */ n("div", { className: "rcs-emulator-flex-1 rcs-emulator-text-left rcs-emulator-min-w-0", children: [
+                /* @__PURE__ */ e("p", { className: "rcs-emulator-text-sm rcs-emulator-font-semibold rcs-emulator-text-gray-900 rcs-emulator-truncate rcs-emulator-mb-1", children: a.name }),
+                /* @__PURE__ */ e("p", { className: "rcs-emulator-text-sm rcs-emulator-text-gray-500 rcs-emulator-truncate rcs-emulator-line-clamp-2 rcs-emulator-mb-1", children: t })
               ] }),
-              /* @__PURE__ */ e("span", { className: "text-xs text-gray-400 flex-shrink-0", children: "now" })
+              /* @__PURE__ */ e("span", { className: "rcs-emulator-text-xs rcs-emulator-text-gray-400 rcs-emulator-flex-shrink-0", children: "now" })
             ]
           }
         ) }),
-        /* @__PURE__ */ e("div", { className: "flex-1" }),
-        /* @__PURE__ */ e("div", { className: "flex justify-center pb-2", children: /* @__PURE__ */ e("div", { className: "w-32 h-1 rounded-full bg-zinc-600" }) })
+        /* @__PURE__ */ e("div", { className: "rcs-emulator-flex-1" }),
+        /* @__PURE__ */ e("div", { className: "rcs-emulator-flex rcs-emulator-justify-center rcs-emulator-pb-2", children: /* @__PURE__ */ e("div", { className: "rcs-emulator-home-indicator rcs-emulator-w-32 rcs-emulator-h-1 rcs-emulator-rounded-full rcs-emulator-bg-zinc-600" }) })
       ]
     }
   );
-}), Y = {
+}), J = {
   name: "Business",
   verified: !1
-}, Pe = g(function({
-  flow: t,
-  onUserReply: n,
+}, Pe = p(function({
+  flow: r,
+  onUserReply: t,
   theme: o,
-  device: s,
-  businessInfo: a,
-  showSuggestions: i
+  device: a,
+  businessInfo: c,
+  showSuggestions: l
 }) {
   const {
     state: u,
-    handleReply: c,
-    handleAction: d
+    handleReply: m,
+    handleAction: i
   } = fe({
-    flow: t,
-    onUserReply: n,
+    flow: r,
+    onUserReply: t,
     typingDelay: 800
-  }), [m, f] = z(!1), v = M(() => {
-    f((h) => !h);
-  }, []), [x, L] = z(null), b = M((h) => {
-    L({
-      ...h,
+  }), [h, f] = A(!1), v = $(() => {
+    f((d) => !d);
+  }, []), [b, N] = A(null), y = $((d) => {
+    N({
+      ...d,
       isOpen: !0
     });
-  }, []), p = M(() => {
-    L(null);
-  }, []), y = M(
-    (h) => {
-      if (!$(h)) return;
-      const w = oe(h);
-      if (w) {
-        b({
-          url: w.url,
-          viewMode: w.webviewViewMode || "TALL",
-          title: w.description || "",
-          postbackData: h.action.postback.data
-        }), n({
+  }, []), w = $(() => {
+    N(null);
+  }, []), g = $(
+    (d) => {
+      if (!I(d)) return;
+      const x = oe(d);
+      if (x) {
+        y({
+          url: x.url,
+          viewMode: x.webviewViewMode || "TALL",
+          title: x.description || "",
+          postbackData: d.action.postback.data
+        }), t({
           type: "action",
-          postbackData: h.action.postback.data,
-          displayText: h.action.displayText,
+          postbackData: d.action.postback.data,
+          displayText: d.action.displayText,
           timestamp: Date.now(),
           actionData: {
             type: "webview",
-            url: w.url,
-            viewMode: w.webviewViewMode || "TALL",
-            description: w.description
+            url: x.url,
+            viewMode: x.webviewViewMode || "TALL",
+            description: x.description
           }
         });
         return;
       }
-      d(h);
+      i(d);
     },
-    [d, b, n]
+    [i, y, t]
   );
-  return /* @__PURE__ */ l(
-    X,
+  return /* @__PURE__ */ n(
+    Z,
     {
       theme: o,
-      device: s,
-      businessInfo: a,
+      device: a,
+      businessInfo: c,
       state: u,
-      showSuggestions: i,
-      isProfileOpen: m,
+      showSuggestions: l,
+      isProfileOpen: h,
       toggleProfile: v,
-      onReply: c,
-      onAction: y,
-      webView: x,
-      openWebView: b,
-      closeWebView: p,
+      onReply: m,
+      onAction: g,
+      webView: b,
+      openWebView: y,
+      closeWebView: w,
       children: [
         /* @__PURE__ */ e(Ve, {}),
-        m && /* @__PURE__ */ e(He, {}),
+        h && /* @__PURE__ */ e(He, {}),
         /* @__PURE__ */ e(De, {})
       ]
     }
   );
-}), Ye = g(function({
-  messages: t,
-  jsonUrl: n,
+}), Je = p(function({
+  messages: r,
+  jsonUrl: t,
   onUserReply: o,
-  theme: s = "light",
-  device: a = "android",
-  businessInfo: i,
+  theme: a = "light",
+  device: c = "android",
+  businessInfo: l,
   className: u = "",
-  width: c = 375,
-  height: d = 667,
-  showSuggestions: m = !0,
+  width: m = 375,
+  height: i = 667,
+  showSuggestions: h = !0,
   showLockScreen: f = !1
 }) {
-  const [v, x] = z(f), L = M(() => {
-    x(!1);
+  const [v, b] = A(f), N = $(() => {
+    b(!1);
   }, []), {
-    data: b,
-    isLoading: p,
-    error: y
-  } = ge(n), h = n ? b : t, w = V(
-    () => h ? ue(h) : !1,
-    [h]
-  ), C = V(
+    data: y,
+    isLoading: w,
+    error: g
+  } = pe(t), d = t ? y : r, x = V(
+    () => d ? me(d) : !1,
+    [d]
+  ), L = V(
     () => ({
-      ...Y,
-      ...i,
+      ...J,
+      ...l,
       // Extract name from flow if not provided
-      name: i?.name || h?.name || Y.name
+      name: l?.name || d?.name || J.name
     }),
-    [i, h?.name]
-  ), I = V(
-    () => h && w ? he(h) : "New message",
-    [h, w]
-  ), k = s === "dark", A = ({ children: T }) => /* @__PURE__ */ e(
+    [l, d?.name]
+  ), z = V(
+    () => d && x ? de(d) : "New message",
+    [d, x]
+  ), C = a === "dark", T = C ? "rcs-emulator-dark" : "rcs-emulator-light", M = ({ children: S }) => /* @__PURE__ */ e(
     "div",
     {
-      className: `
-        rcs-emulator relative overflow-hidden
-        rounded-2xl shadow-2xl
-        ${k ? "bg-zinc-950" : "bg-white"}
-        ${u}
-      `,
-      style: { width: c, height: d },
+      className: `rcs-emulator rcs-emulator-container ${T} ${u}`,
+      style: { width: m, height: i },
       role: "application",
       "aria-label": "RCS Message Emulator",
-      "data-theme": s,
-      "data-device": a,
-      children: T
+      "data-theme": a,
+      "data-device": c,
+      children: S
     }
   );
-  return n && p ? /* @__PURE__ */ e(A, { children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center h-full p-6", children: [
+  return t && w ? /* @__PURE__ */ e(M, { children: /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-h-full rcs-emulator-p-6", children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: `
-              w-10 h-10 border-3 border-t-transparent rounded-full animate-spin mb-4
-              ${k ? "border-zinc-600" : "border-gray-300"}
-            `,
-        style: { borderTopColor: "transparent" }
+        className: `rcs-emulator-w-10 rcs-emulator-h-10 rcs-emulator-spinner rcs-emulator-mb-4 ${T}`
       }
     ),
     /* @__PURE__ */ e(
       "p",
       {
-        className: `text-sm ${k ? "text-zinc-400" : "text-gray-500"}`,
+        className: `rcs-emulator-text-sm ${C ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`,
         children: "Loading conversation..."
       }
     )
-  ] }) }) : n && y ? /* @__PURE__ */ e(A, { children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center h-full p-6 text-center", children: [
+  ] }) }) : t && g ? /* @__PURE__ */ e(M, { children: /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-h-full rcs-emulator-p-6 rcs-emulator-text-center", children: [
     /* @__PURE__ */ e(
       "svg",
       {
-        className: "w-12 h-12 mx-auto mb-4 text-red-500",
+        className: "rcs-emulator-w-12 rcs-emulator-h-12 rcs-emulator-mb-4 rcs-emulator-text-red-500",
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
@@ -2313,30 +2383,31 @@ const We = g(function({
     /* @__PURE__ */ e(
       "h3",
       {
-        className: `text-lg font-medium mb-2 ${k ? "text-white" : "text-gray-900"}`,
+        className: `rcs-emulator-text-lg rcs-emulator-font-medium rcs-emulator-mb-2 ${C ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
         children: "Failed to Load"
       }
     ),
     /* @__PURE__ */ e(
       "p",
       {
-        className: `text-sm ${k ? "text-zinc-400" : "text-gray-500"}`,
-        children: y
+        className: `rcs-emulator-text-sm ${C ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`,
+        children: g
       }
     ),
     /* @__PURE__ */ e(
       "p",
       {
-        className: `text-xs mt-2 break-all max-w-full ${k ? "text-zinc-500" : "text-gray-400"}`,
-        children: n
+        className: `rcs-emulator-text-xs rcs-emulator-mt-2 rcs-emulator-max-w-full ${C ? "rcs-emulator-text-zinc-500" : "rcs-emulator-text-gray-400"}`,
+        style: { wordBreak: "break-all" },
+        children: t
       }
     )
-  ] }) }) : h ? w ? /* @__PURE__ */ e(A, { children: v ? /* @__PURE__ */ e(
-    X,
+  ] }) }) : d ? x ? /* @__PURE__ */ e(M, { children: v ? /* @__PURE__ */ e(
+    Z,
     {
-      theme: s,
-      device: a,
-      businessInfo: C,
+      theme: a,
+      device: c,
+      businessInfo: L,
       state: {
         currentMessageId: null,
         chatHistory: [],
@@ -2356,23 +2427,24 @@ const We = g(function({
       },
       closeWebView: () => {
       },
-      children: /* @__PURE__ */ e(Oe, { onUnlock: L, messagePreview: I })
+      children: /* @__PURE__ */ e(Oe, { onUnlock: N, messagePreview: z })
     }
   ) : /* @__PURE__ */ e(
     Pe,
     {
-      flow: h,
+      flow: d,
       onUserReply: o,
-      theme: s,
-      device: a,
-      businessInfo: C,
-      showSuggestions: m
+      theme: a,
+      device: c,
+      businessInfo: L,
+      showSuggestions: h
     }
-  ) }) : /* @__PURE__ */ e(A, { children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center h-full p-6 text-center", children: [
+  ) }) : /* @__PURE__ */ e(M, { children: /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-h-full rcs-emulator-p-6 rcs-emulator-text-center", children: [
     /* @__PURE__ */ e(
       "svg",
       {
-        className: "w-12 h-12 mx-auto mb-4 text-amber-500",
+        className: "rcs-emulator-w-12 rcs-emulator-h-12 rcs-emulator-mb-4",
+        style: { color: "#f59e0b" },
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
@@ -2390,22 +2462,22 @@ const We = g(function({
     /* @__PURE__ */ e(
       "h3",
       {
-        className: `text-lg font-medium mb-2 ${k ? "text-white" : "text-gray-900"}`,
+        className: `rcs-emulator-text-lg rcs-emulator-font-medium rcs-emulator-mb-2 ${C ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
         children: "Invalid RBM JSON"
       }
     ),
     /* @__PURE__ */ e(
       "p",
       {
-        className: `text-sm ${k ? "text-zinc-400" : "text-gray-500"}`,
+        className: `rcs-emulator-text-sm ${C ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`,
         children: "The conversation flow structure is not valid"
       }
     )
-  ] }) }) : /* @__PURE__ */ e(A, { children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center h-full p-6 text-center", children: [
+  ] }) }) : /* @__PURE__ */ e(M, { children: /* @__PURE__ */ n("div", { className: "rcs-emulator-flex rcs-emulator-flex-col rcs-emulator-items-center rcs-emulator-justify-center rcs-emulator-h-full rcs-emulator-p-6 rcs-emulator-text-center", children: [
     /* @__PURE__ */ e(
       "svg",
       {
-        className: `w-12 h-12 mx-auto mb-4 ${k ? "text-zinc-600" : "text-gray-300"}`,
+        className: `rcs-emulator-w-12 rcs-emulator-h-12 rcs-emulator-mb-4 ${C ? "rcs-emulator-text-zinc-600" : "rcs-emulator-text-gray-300"}`,
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
@@ -2423,22 +2495,22 @@ const We = g(function({
     /* @__PURE__ */ e(
       "h3",
       {
-        className: `text-lg font-medium mb-2 ${k ? "text-white" : "text-gray-900"}`,
+        className: `rcs-emulator-text-lg rcs-emulator-font-medium rcs-emulator-mb-2 ${C ? "rcs-emulator-text-white" : "rcs-emulator-text-gray-900"}`,
         children: "No Conversation Data"
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ n(
       "p",
       {
-        className: `text-sm ${k ? "text-zinc-400" : "text-gray-500"}`,
+        className: `rcs-emulator-text-sm ${C ? "rcs-emulator-text-zinc-400" : "rcs-emulator-text-gray-500"}`,
         children: [
           "Provide either",
           " ",
-          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 rounded bg-gray-100 dark:bg-zinc-800", children: "messages" }),
+          /* @__PURE__ */ e("code", { className: `rcs-emulator-code-inline ${T}`, children: "messages" }),
           " ",
           "or",
           " ",
-          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 rounded bg-gray-100 dark:bg-zinc-800", children: "jsonUrl" }),
+          /* @__PURE__ */ e("code", { className: `rcs-emulator-code-inline ${T}`, children: "jsonUrl" }),
           " ",
           "prop"
         ]
@@ -2447,15 +2519,15 @@ const We = g(function({
   ] }) });
 });
 export {
-  Ye as RcsEmulator,
+  Je as RcsEmulator,
   De as WebViewRenderer,
-  Ye as default,
-  he as getFirstMessagePreview,
+  Je as default,
+  de as getFirstMessagePreview,
   oe as getWebViewConfig,
-  $ as isSuggestedAction,
-  q as isSuggestedReply,
-  Je as isWebViewAction,
-  ge as useJsonFetch,
-  ue as validateConversationFlow
+  I as isSuggestedAction,
+  Y as isSuggestedReply,
+  qe as isWebViewAction,
+  pe as useJsonFetch,
+  me as validateConversationFlow
 };
 //# sourceMappingURL=rcs-emulator.es.js.map