callix-dialer-widget 1.5.3 → 1.6.0

package/dist-widget/callix-dialer.es.js

@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-import React, { useEffect, useState, useRef, useMemo, useCallback, createContext, StrictMode, useContext } from "react";
+import React, { useEffect, useState, useMemo, useRef, useCallback, createContext, StrictMode, useContext } from "react";
 import require$$0$2, { createPortal } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n) {
@@ -48284,6 +48284,12 @@ function FiAlertCircle(props) {
 function FiAlertTriangle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "9", "x2": "12", "y2": "13" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "17", "x2": "12.01", "y2": "17" }, "child": [] }] })(props);
 }
+function FiArrowLeft(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "line", "attr": { "x1": "19", "y1": "12", "x2": "5", "y2": "12" }, "child": [] }, { "tag": "polyline", "attr": { "points": "12 19 5 12 12 5" }, "child": [] }] })(props);
+}
+function FiBriefcase(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "rect", "attr": { "x": "2", "y": "7", "width": "20", "height": "14", "rx": "2", "ry": "2" }, "child": [] }, { "tag": "path", "attr": { "d": "M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" }, "child": [] }] })(props);
+}
 function FiCheckCircle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M22 11.08V12a10 10 0 1 1-5.93-9.14" }, "child": [] }, { "tag": "polyline", "attr": { "points": "22 4 12 14.01 9 11.01" }, "child": [] }] })(props);
 }
@@ -48293,6 +48299,9 @@ function FiClock(props) {
 function FiDelete(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" }, "child": [] }, { "tag": "line", "attr": { "x1": "18", "y1": "9", "x2": "12", "y2": "15" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "9", "x2": "18", "y2": "15" }, "child": [] }] })(props);
 }
+function FiHash(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "line", "attr": { "x1": "4", "y1": "9", "x2": "20", "y2": "9" }, "child": [] }, { "tag": "line", "attr": { "x1": "4", "y1": "15", "x2": "20", "y2": "15" }, "child": [] }, { "tag": "line", "attr": { "x1": "10", "y1": "3", "x2": "8", "y2": "21" }, "child": [] }, { "tag": "line", "attr": { "x1": "16", "y1": "3", "x2": "14", "y2": "21" }, "child": [] }] })(props);
+}
 function FiHeadphones(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M3 18v-6a9 9 0 0 1 18 0v6" }, "child": [] }, { "tag": "path", "attr": { "d": "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" }, "child": [] }] })(props);
 }
@@ -48329,6 +48338,9 @@ function FiPlus(props) {
 function FiSettings(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }, { "tag": "path", "attr": { "d": "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" }, "child": [] }] })(props);
 }
+function FiSmartphone(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "rect", "attr": { "x": "5", "y": "2", "width": "14", "height": "20", "rx": "2", "ry": "2" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "18", "x2": "12.01", "y2": "18" }, "child": [] }] })(props);
+}
 function FiUser(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "7", "r": "4" }, "child": [] }] })(props);
 }
@@ -52815,7 +52827,9 @@ if (!globalTwind.__twindInitialized) {
   const config = {
     presets: [
       presetTailwind({
-        disablePreflight: false
+        // IMPORTANTE: Desabilitar preflight para evitar conflitos com CSS do MobileDialer
+        // e outros estilos do host. Preflight reseta margin, padding, box-sizing etc.
+        disablePreflight: true
       })
     ],
     theme: {
@@ -52831,8 +52845,8 @@ if (!globalTwind.__twindInitialized) {
   setup(config);
   globalTwind.__twindInitialized = true;
 }
-const API_BASE_URL$1 = typeof window !== "undefined" ? window.__CALLIX_API_BASE_URL__ || (window.location.origin.includes("localhost") ? window.location.origin : "https://callix-zeta.vercel.app") : "";
-function getSessionToken$1() {
+const API_BASE_URL$2 = typeof window !== "undefined" ? window.__CALLIX_API_BASE_URL__ || (window.location.origin.includes("localhost") ? window.location.origin : "https://callix-zeta.vercel.app") : "";
+function getSessionToken$2() {
   if (typeof window === "undefined") return null;
   const lastUsername = localStorage.getItem("callix_dialer_last_username");
   if (lastUsername) {
@@ -52853,8 +52867,8 @@ function getSessionToken$1() {
   }
   return null;
 }
-function getAuthHeaders$1() {
-  const token = getSessionToken$1();
+function getAuthHeaders$2() {
+  const token = getSessionToken$2();
   const headers = {
     "Content-Type": "application/json"
   };
@@ -52864,19 +52878,18 @@ function getAuthHeaders$1() {
   } else {
     try {
       const keys = Array.from({ length: localStorage.length }, (_4, i2) => localStorage.key(i2)).filter(Boolean);
-      console.warn("[CallInfoDisplay] Nenhum token encontrado no localStorage. Chaves disponíveis:", keys);
+      console.warn("[CallInfoDisplay] Nenhum token encontrado no localStorage. Chaves:", keys);
     } catch {
     }
   }
   return headers;
 }
-async function getCampaignConfig$1(contactId) {
-  const url = `${API_BASE_URL$1}/api/campaign-config/${contactId}`;
+async function getCampaignConfig$2(contactId) {
+  const url = `${API_BASE_URL$2}/api/campaign-config/${contactId}`;
   const response = await fetch(url, {
     method: "GET",
-    headers: getAuthHeaders$1(),
+    headers: getAuthHeaders$2(),
     credentials: "omit"
-    // API usa localStorage, não cookies
   });
   if (!response.ok) {
     const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
@@ -52885,11 +52898,11 @@ async function getCampaignConfig$1(contactId) {
   const json = await response.json();
   return json;
 }
-async function getCodeToNameMapping(campaignModelId) {
-  const url = `${API_BASE_URL$1}/api/campaign-fields/${campaignModelId}`;
+async function getCodeToNameMapping$1(campaignModelId) {
+  const url = `${API_BASE_URL$2}/api/campaign-fields/${campaignModelId}`;
   const response = await fetch(url, {
     method: "GET",
-    headers: getAuthHeaders$1(),
+    headers: getAuthHeaders$2(),
     credentials: "omit"
   });
   if (!response.ok) {
@@ -52899,11 +52912,11 @@ async function getCodeToNameMapping(campaignModelId) {
   const json = await response.json();
   return json;
 }
-async function getCustomerCodeToNameMapping(formId) {
-  const url = `${API_BASE_URL$1}/api/campaign-contact/0?source=customer&formId=${encodeURIComponent(String(formId))}`;
+async function getCustomerCodeToNameMapping$1(formId) {
+  const url = `${API_BASE_URL$2}/api/campaign-contact/0?source=customer&formId=${encodeURIComponent(String(formId))}`;
   const response = await fetch(url, {
     method: "GET",
-    headers: getAuthHeaders$1(),
+    headers: getAuthHeaders$2(),
     credentials: "omit"
   });
   if (!response.ok) {
@@ -52923,11 +52936,11 @@ async function getCustomerCodeToNameMapping(formId) {
   }
   return mapping;
 }
-async function getContactValues$1(contactId) {
-  const url = `${API_BASE_URL$1}/api/campaign-contact/${contactId}`;
+async function getContactValues$2(contactId) {
+  const url = `${API_BASE_URL$2}/api/campaign-contact/${contactId}`;
   const response = await fetch(url, {
     method: "GET",
-    headers: getAuthHeaders$1(),
+    headers: getAuthHeaders$2(),
     credentials: "omit"
   });
   if (!response.ok) {
@@ -52937,11 +52950,11 @@ async function getContactValues$1(contactId) {
   const json = await response.json();
   return json;
 }
-async function getCustomerContactValues$1(customerId) {
-  const url = `${API_BASE_URL$1}/api/campaign-fields/0?source=customer&customerId=${encodeURIComponent(String(customerId))}`;
+async function getCustomerContactValues$2(customerId) {
+  const url = `${API_BASE_URL$2}/api/campaign-fields/0?source=customer&customerId=${encodeURIComponent(String(customerId))}`;
   const response = await fetch(url, {
     method: "GET",
-    headers: getAuthHeaders$1(),
+    headers: getAuthHeaders$2(),
     credentials: "omit"
   });
   if (!response.ok) {
@@ -52951,6 +52964,28 @@ async function getCustomerContactValues$1(customerId) {
   const json = await response.json();
   return json;
 }
+function findValue$1(finalData, candidates) {
+  const entries = Object.entries(finalData);
+  const lowerCandidates = candidates.map((item) => item.toLowerCase());
+  for (const [key, value] of entries) {
+    if (lowerCandidates.includes(key.toLowerCase())) {
+      return value;
+    }
+  }
+  return void 0;
+}
+function formatPhoneValue(raw) {
+  if (!raw) return "-";
+  const digits = raw.replace(/\D/g, "");
+  if (digits.length >= 10) {
+    const ddd = digits.slice(0, 2);
+    const core2 = digits.slice(2, digits.length - 4);
+    const tail2 = digits.slice(-4);
+    const formattedCore = core2.length > 5 ? `${core2.slice(0, core2.length - 4)} ${core2.slice(core2.length - 4)}` : core2;
+    return `(${ddd}) ${formattedCore}-${tail2}`.replace(/\s+/g, " ").trim();
+  }
+  return raw.trim();
+}
 function CallInfoDisplay() {
   const callInfo = clientSdkReactExports.useCallOperatorCurrentCallInfo();
   useEffect(() => {
@@ -52966,12 +53001,12 @@ function CallInfoDisplay() {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(CampaignCallInfoDisplay, { campaignCallInfo: callInfo.info });
   }
   if (callInfo) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-yellow-50 rounded-lg p-3 mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-yellow-700", children: "Chamada manual (sem informações de campanha)" }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-semibold text-amber-700", children: "Chamada manual (sem informações de campanha)" }) });
   }
   return null;
 }
 function CampaignCallInfoDisplay(props) {
-  const { campaign, campaignList, campaignContact } = props.campaignCallInfo;
+  const { campaign, campaignContact } = props.campaignCallInfo;
   const [contactData, setContactData] = useState({
     finalData: {},
     isLoading: false,
@@ -52990,30 +53025,23 @@ function CampaignCallInfoDisplay(props) {
       setContactData({ finalData: {}, isLoading: true, error: null });
       try {
         const customer = campaignContact.customer;
-        console.log("[CampaignCallInfoDisplay] 1. Verificando customer no campaignContact:", customer);
         let codeToNameMap = {};
         let contactValues = {};
         if ((customer == null ? void 0 : customer.id) && (customer == null ? void 0 : customer.formId)) {
-          console.log("[CampaignCallInfoDisplay] 2a. Modo CUSTOMER: buscando rows (formId) e dados (customerId)...");
           [codeToNameMap, contactValues] = await Promise.all([
-            getCustomerCodeToNameMapping(customer.formId),
-            getCustomerContactValues$1(customer.id)
+            getCustomerCodeToNameMapping$1(customer.formId),
+            getCustomerContactValues$2(customer.id)
           ]);
         } else {
-          console.log("[CampaignCallInfoDisplay] 2b. Modo CAMPANHA: buscando config, rows e dados...");
-          const config = await getCampaignConfig$1(campaignContact.id);
-          console.log("[CampaignCallInfoDisplay] 2b. Config recebida:", config);
+          const config = await getCampaignConfig$2(campaignContact.id);
           if (!config.campaignModelId) {
             throw new Error("campaignModelId não encontrado");
           }
-          console.log("[CampaignCallInfoDisplay] 3. Buscando mapeamento e valores em paralelo...");
           [codeToNameMap, contactValues] = await Promise.all([
-            getCodeToNameMapping(config.campaignModelId),
-            getContactValues$1(campaignContact.id)
+            getCodeToNameMapping$1(config.campaignModelId),
+            getContactValues$2(campaignContact.id)
           ]);
         }
-        console.log("[CampaignCallInfoDisplay] 4. Mapeamento recebido:", codeToNameMap);
-        console.log("[CampaignCallInfoDisplay] 5. Valores recebidos:", contactValues);
         const finalData = {};
         Object.entries(contactValues).forEach(([code, value]) => {
           if (code in codeToNameMap) {
@@ -53021,7 +53049,6 @@ function CampaignCallInfoDisplay(props) {
           }
         });
         if (!cancelled) {
-          console.log("[CampaignCallInfoDisplay] ✅ Dados finais mapeados:", finalData);
           setContactData({
             finalData,
             isLoading: false,
@@ -53031,7 +53058,7 @@ function CampaignCallInfoDisplay(props) {
         }
       } catch (error2) {
         if (!cancelled) {
-          console.error("[CampaignCallInfoDisplay] ❌ Erro ao buscar dados:", error2);
+          console.error("[CampaignCallInfoDisplay] Erro ao buscar dados:", error2);
           const errorMessage = error2 instanceof Error ? error2.message : "Erro ao buscar dados do contato";
           setContactData({
             finalData: {},
@@ -53045,73 +53072,76 @@ function CampaignCallInfoDisplay(props) {
     return () => {
       cancelled = true;
     };
-  }, [campaignContact == null ? void 0 : campaignContact.id, fetchedContactId]);
-  const hasData = Object.keys(contactData.finalData).length > 0;
-  const Field2 = ({ fieldName, label }) => {
-    const displayLabel = label || fieldName;
-    let value = "-";
-    if (contactData.finalData[fieldName]) {
-      value = contactData.finalData[fieldName];
-    } else {
-      const valueKey = Object.keys(contactData.finalData).find(
-        (k) => k.toLowerCase() === fieldName.toLowerCase()
-      );
-      if (valueKey) {
-        value = contactData.finalData[valueKey];
-      }
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/60 rounded-lg p-2 border border-blue-100", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[9px] text-slate-500 uppercase tracking-wide font-semibold mb-0.5 truncate", children: displayLabel }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-slate-800 font-semibold break-words line-clamp-2", children: value })
-    ] });
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-3 mb-4 shadow-sm border border-blue-100", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex h-6 w-6 items-center justify-center rounded-lg bg-blue-500 text-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-bold text-slate-800", children: "Informações da Campanha" })
+  }, [campaignContact, campaignContact == null ? void 0 : campaignContact.id, fetchedContactId]);
+  const prioritizedFields = useMemo(
+    () => [
+      { label: "Decisor", keys: ["DECISOR"], icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: "text-sm" }) },
+      { label: "Empresa", keys: ["EMPRESA", "RAZAO SOCIAL"], icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FiBriefcase, { className: "text-sm" }) },
+      { label: "Dívida ativa", keys: ["DIVIDA ATIVA", "DÍVIDA ATIVA"], icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FiHash, { className: "text-sm" }) },
+      { label: "Telefone", keys: ["TELEFONE", "CELULAR", "WHATSAPP"], icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FiSmartphone, { className: "text-sm" }) }
+    ],
+    []
+  );
+  const highlightData = useMemo(() => {
+    return prioritizedFields.map((field) => {
+      const rawValue = (field.label === "Telefone" ? findValue$1(contactData.finalData, field.keys) ?? (campaignContact == null ? void 0 : campaignContact.phoneNumber) : findValue$1(contactData.finalData, field.keys)) || "";
+      const display2 = field.label === "Telefone" ? formatPhoneValue(rawValue) : (rawValue || "-").toString().trim() || "-";
+      return {
+        ...field,
+        value: display2,
+        isEmpty: !rawValue
+      };
+    });
+  }, [campaignContact == null ? void 0 : campaignContact.phoneNumber, contactData.finalData, prioritizedFields]);
+  const hasData = highlightData.some((item) => !item.isEmpty);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-2xl border border-slate-200 bg-white/90 p-3 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex h-9 w-9 items-center justify-center rounded-2xl bg-emerald-500 text-white shadow-inner", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: "text-base" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-500", children: "Campanha" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-sm font-bold text-slate-900", children: (campaign == null ? void 0 : campaign.name) || "Chamada de campanha" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-[10px] font-bold uppercase text-emerald-700", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
+        "Em chamada"
+      ] })
     ] }),
-    contactData.isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/60 rounded-lg p-6 border border-blue-100 text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-block h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-slate-600 mt-2 font-medium", children: "Carregando dados do contato..." })
+    contactData.isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 p-4 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto mb-2 inline-block h-7 w-7 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-medium text-slate-600", children: "Carregando dados do contato..." })
     ] }),
-    contactData.error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-red-50 rounded-lg p-3 border border-red-200", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-4 h-4 text-red-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-700 font-semibold", children: "Erro ao carregar dados" })
+    contactData.error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-xl border border-rose-200 bg-rose-50 p-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: "text-sm text-rose-600" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-semibold text-rose-700", children: "Erro ao carregar dados" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[10px] text-red-600 ml-6", children: contactData.error }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ml-6 text-[11px] text-rose-600", children: contactData.error }),
       contactData.error.includes("Muitas requisições") && /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: () => setFetchedContactId(null),
-          className: "mt-2 ml-6 text-[10px] text-red-700 underline hover:text-red-800",
+          className: "mt-2 ml-6 text-[11px] font-semibold text-rose-700 underline hover:text-rose-800",
           children: "Tentar novamente"
         }
       )
     ] }),
-    !contactData.isLoading && !contactData.error && hasData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "CNPJ", label: "CNPJ" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "EMPRESA", label: "EMPRESA" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "TOTAL BENEFICIO", label: "TOTAL BENEFÍCIO" })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "DECISOR", label: "DECISOR" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "PRODUTO PROSPECTADO", label: "PRODUTO PROSPECTADO" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "VALOR QUE PAGA POR MÊS EM PARCELAMENTOS", label: "VALOR PARCELAMENTO" })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "TOTAL SALDO DEVEDOR PGFN", label: "SALDO DEVEDOR PGFN" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "TOTAL SALDO DEVEDOR RFB", label: "SALDO DEVEDOR RFB" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "DIVIDA ATIVA", label: "DÍVIDA ATIVA" })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "CORRESPONSABILIDADE SOCIO", label: "CORRESP. SÓCIO" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "EXECUÇÃO FISCAL", label: "EXECUÇÃO FISCAL" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "TRANSAÇÃO COM BENEFICIO", label: "TRANSAÇÃO BENEFÍCIO" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Field2, { fieldName: "REGIME TRIBUTARIO", label: "REGIME TRIBUTÁRIO" })
-      ] })
-    ] })
+    !contactData.isLoading && !contactData.error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: highlightData.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "flex flex-col gap-1 rounded-xl border border-slate-200 bg-slate-50 p-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.6)]",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: [
+            item.icon,
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: item.label })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "break-words text-sm font-bold leading-tight text-slate-900", children: item.value || "-" })
+        ]
+      },
+      item.label
+    )) }),
+    !contactData.isLoading && !contactData.error && !hasData && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs font-medium text-slate-600", children: "Nenhuma informação de campanha disponível para este contato." })
   ] });
 }
 function useSignal(signal) {
@@ -53211,6 +53241,29 @@ function normalizePhoneNumberPaste(pastedText) {
   }
   return cleaned;
 }
+function formatPhoneForDisplay(phoneNumber) {
+  const cleaned = phoneNumber.replace(/\D/g, "");
+  if (cleaned.length === 11) {
+    const ddd = cleaned.substring(0, 2);
+    const part1 = cleaned.substring(2, 7);
+    const part2 = cleaned.substring(7);
+    return `(${ddd}) ${part1}-${part2}`;
+  }
+  if (cleaned.length === 10) {
+    const ddd = cleaned.substring(0, 2);
+    const part1 = cleaned.substring(2, 6);
+    const part2 = cleaned.substring(6);
+    if (["2", "3", "4"].some((prefix) => cleaned.startsWith(prefix))) {
+      return `(${ddd}) ${part1}-${part2}`;
+    }
+    return `(${ddd}) 9${part1}-${part2}`;
+  }
+  return phoneNumber;
+}
+function isValidPhoneFormat(phoneNumber) {
+  const cleaned = phoneNumber.replace(/\D/g, "");
+  return cleaned.length === 10 || cleaned.length === 11;
+}
 const DEFAULT_COUNTRY_PREFIX = "+55";
 const MAX_DIAL_LENGTH = 32;
 const DEFAULT_DIALER_DIMENSIONS = { width: 448, height: 640 };
@@ -53257,7 +53310,8 @@ function FloatingDialer({
   onLogout,
   isLoadingSession,
   sessionError,
-  variant = "default"
+  variant = "default",
+  portalTarget = null
 }) {
   const containerRef = useRef(null);
   const cardRef = useRef(null);
@@ -53576,7 +53630,9 @@ function FloatingDialer({
       dialValue,
       setDialValue: updateDialValue,
       onLogout,
-      variant
+      variant,
+      onRequestClose: () => setIsOpen(false),
+      portalTarget
     }
   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
     LoginForm,
@@ -53771,17 +53827,32 @@ function LoginForm({ defaultValue, onSubmit, isLoading, error: error2 }) {
     )
   ] });
 }
-function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, variant }) {
+function AuthenticatedDialer({
+  username,
+  dialValue,
+  setDialValue,
+  onLogout,
+  variant,
+  onRequestClose,
+  portalTarget = null
+}) {
   var _a2, _b;
-  const operator = clientSdkReactExports.useCallOperator();
   const isMiniMode = variant === "min";
   const { skipManualQualification } = useDialerConfig();
   console.log("[FloatingDialer/AuthenticatedDialer] 🔧 skipManualQualification:", skipManualQualification);
+  const operator = clientSdkReactExports.useCallOperator();
   const operatorState = clientSdkReactExports.useCallOperatorState();
   const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
   const currentCallInfo = clientSdkReactExports.useCallOperatorCurrentCallInfo();
-  const successQualifications = clientSdkReactExports.useCallOperatorSuccessQualifications();
-  const discardQualifications = clientSdkReactExports.useCallOperatorDiscardQualifications();
+  const rawSuccessQualifications = clientSdkReactExports.useCallOperatorSuccessQualifications();
+  const rawDiscardQualifications = clientSdkReactExports.useCallOperatorDiscardQualifications();
+  const successQualifications = useMemo(() => rawSuccessQualifications ?? [], [rawSuccessQualifications]);
+  const discardQualifications = useMemo(() => rawDiscardQualifications ?? [], [rawDiscardQualifications]);
+  const { makeManualCall, becomeAvailable, finishAfterCall } = clientSdkReactExports.useCallOperatorControls();
+  const { hangup, answer, reject } = clientSdkReactExports.useCallOperatorCurrentCallControls();
+  const [inputMuted, setInputMuted] = clientSdkReactExports.useCallOperatorAudioInputMuted();
+  const [outputMuted, setOutputMuted] = clientSdkReactExports.useCallOperatorAudioOutputMuted();
+  const [outputVolume, setOutputVolume] = clientSdkReactExports.useCallOperatorAudioOutputVolume();
   useEffect(() => {
     console.log("[FloatingDialer] Estado do operador mudou:", {
       state: operatorState == null ? void 0 : operatorState.state,
@@ -53791,7 +53862,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     });
   }, [operatorState, currentCall]);
   useEffect(() => {
-    console.log("[FloatingDialer] Qualifica��es:", {
+    console.log("[FloatingDialer] Qualificações:", {
       success: successQualifications,
       discard: discardQualifications,
       callState: operatorState == null ? void 0 : operatorState.state
@@ -53799,7 +53870,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
   }, [successQualifications, discardQualifications, operatorState == null ? void 0 : operatorState.state]);
   useEffect(() => {
     if ((currentCall == null ? void 0 : currentCall.direction) === "incoming") {
-      console.log("[FloatingDialer] ?? CHAMADA RECEBIDA:", {
+      console.log("[FloatingDialer] 📞 CHAMADA RECEBIDA:", {
         call: currentCall,
         direction: currentCall.direction,
         state: operatorState == null ? void 0 : operatorState.state,
@@ -53807,8 +53878,6 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
       });
     }
   }, [currentCall, operatorState == null ? void 0 : operatorState.state]);
-  const { makeManualCall, becomeAvailable, finishAfterCall } = clientSdkReactExports.useCallOperatorControls();
-  const { hangup, answer, reject } = clientSdkReactExports.useCallOperatorCurrentCallControls();
   const [isDialerFocused, setIsDialerFocused] = useState(false);
   const dialerCardRef = useRef(null);
   const dialDisplayRef = useRef(null);
@@ -53826,9 +53895,6 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
   const [audioMetric, setAudioMetric] = useState(INITIAL_AUDIO_METRIC);
   const toneContextRef = useRef(null);
   const hasRequestedAvailabilityRef = useRef(false);
-  const [inputMuted, setInputMuted] = clientSdkReactExports.useCallOperatorAudioInputMuted();
-  const [outputMuted, setOutputMuted] = clientSdkReactExports.useCallOperatorAudioOutputMuted();
-  const [outputVolume, setOutputVolume] = clientSdkReactExports.useCallOperatorAudioOutputVolume();
   const [audioDevices, setAudioDevices] = useState({
     inputs: [],
     outputs: []
@@ -53841,6 +53907,11 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
   const [lastDialedNumber, setLastDialedNumber] = useState(null);
   const [isBreakModalOpen, setIsBreakModalOpen] = useState(false);
   const [breakError, setBreakError] = useState(null);
+  const [isMobileViewport, setIsMobileViewport] = useState(
+    typeof window !== "undefined" ? window.innerWidth <= 640 : false
+  );
+  const isMobileVariant = variant === "mobile";
+  const isMobileLayout = isMobileVariant || isMobileViewport;
   const breaks = useSignal(operator == null ? void 0 : operator.breaks) || [];
   const { goOnBreak, goOffBreak } = useOperatorBreak();
   const sanitizedDialValue = useMemo(() => dialValue.slice(0, MAX_DIAL_LENGTH), [dialValue]);
@@ -53883,6 +53954,19 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
       setCallError(null);
     }
   }, [callState]);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const updateViewport = () => setIsMobileViewport(window.innerWidth <= 640);
+    updateViewport();
+    window.addEventListener("resize", updateViewport);
+    window.addEventListener("orientationchange", updateViewport);
+    return () => {
+      window.removeEventListener("resize", updateViewport);
+      window.removeEventListener("orientationchange", updateViewport);
+    };
+  }, []);
   useEffect(() => {
     if (callState === "offline") {
       setAvailabilityError("Conexao perdida. Tentando reconectar...");
@@ -54003,9 +54087,6 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
   }, []);
   useEffect(() => {
     if (!currentCall || callState !== "callInProgress") {
-      if (callDurationSeconds > 0) {
-        console.log("[FloatingDialer] ?? Timer resetado (chamada n�o est� em progresso)");
-      }
       setCallDurationSeconds(0);
       setNetworkMetric(INITIAL_NETWORK_METRIC);
       setAudioMetric(INITIAL_AUDIO_METRIC);
@@ -54366,13 +54447,16 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     try {
       setCallError(null);
       setLastDialedNumber(e164Number);
-      void makeManualCall(e164Number);
+      if (makeManualCall) {
+        void makeManualCall(e164Number);
+      }
     } catch (error2) {
       console.error("Erro ao iniciar chamada", error2);
       setCallError("Nao foi possivel iniciar a ligacao.");
     }
   }, [isIdle, isOnBreak, sanitizedDialValue, makeManualCall]);
   const handleGoOnBreak = useCallback(async (breakId) => {
+    if (!goOnBreak) return;
     try {
       setBreakError(null);
       await goOnBreak(breakId);
@@ -54384,6 +54468,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     }
   }, [goOnBreak]);
   const handleGoOffBreak = useCallback(async () => {
+    if (!goOffBreak) return;
     try {
       await goOffBreak();
       console.log("[FloatingDialer] Saiu da pausa com sucesso");
@@ -54459,6 +54544,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     };
   }, [isMiniMode, isDialerFocused, handleBackspace, handleClear, handleDial, handleCall, isIdle]);
   const handleHangup = useCallback(async () => {
+    if (!hangup) return;
     try {
       await hangup();
     } catch (error2) {
@@ -54467,6 +54553,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     }
   }, [hangup]);
   const handleAnswer = useCallback(async () => {
+    if (!answer) return;
     try {
       await answer();
     } catch (error2) {
@@ -54475,6 +54562,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     }
   }, [answer]);
   const handleReject = useCallback(async () => {
+    if (!reject) return;
     try {
       await reject();
     } catch (error2) {
@@ -54584,11 +54672,14 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
         onSubmit: handleFinishAfterCall,
         isSubmitting: isSubmittingAfterCall,
         errorMessage: afterCallError,
-        onLogout
+        onLogout,
+        isMobile: isMobileLayout,
+        onClose: onRequestClose
       }
     );
   }
-  const breakModal = isBreakModalOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4`, children: [
+  const modalOverlayClass = portalTarget ? tw`absolute inset-0 z-50 flex items-center justify-center bg-black/50 p-4` : tw`fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4`;
+  const breakModalContent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: modalOverlayClass, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between`, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-lg font-bold text-slate-800`, children: "Selecione uma Pausa" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -54639,7 +54730,308 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
         children: "Cancelar"
       }
     )
-  ] }) }) : null;
+  ] }) });
+  const breakModal = isBreakModalOpen ? portalTarget ? createPortal(breakModalContent, portalTarget) : breakModalContent : null;
+  const showActiveSummary = isInCall || isConnecting;
+  if (isMobileLayout && !isMiniMode) {
+    const mobileCanUseKeypad = !availabilityError && (canUseKeypad || isIdle || isOnBreak);
+    const displayNumber = dialDisplayText || sanitizedDialValue || "Digite ou cole um numero";
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: dialerCardRef,
+        tabIndex: 0,
+        role: "application",
+        "aria-label": "Discador mobile",
+        onFocusCapture: handleFocusWithin,
+        onBlurCapture: handleBlurWithin,
+        className: tw`callix mobile flex min-h-[calc(100vh-3rem)] w-full max-w-full flex-col gap-4 rounded-3xl border border-slate-200 bg-gradient-to-b from-white via-slate-50 to-white p-4 shadow-xl outline-none`,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between gap-2`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  if (onRequestClose) {
+                    onRequestClose();
+                  } else {
+                    handleClear();
+                  }
+                },
+                className: tw`inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-slate-300 hover:shadow-md`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiArrowLeft, { className: tw`text-base` }),
+                  "Voltar"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: tw`${statusVisual.badgeClass} inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[11px] font-bold`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(statusVisual.Icon, { className: tw`text-xs` }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: statusLabel })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: isOnBreak ? handleGoOffBreak : () => setIsBreakModalOpen(true),
+                className: tw`inline-flex items-center gap-1.5 rounded-full border ${isOnBreak ? "border-green-200 bg-green-50 text-green-700" : "border-amber-200 bg-amber-50 text-amber-700"} px-3 py-2 text-sm font-semibold transition hover:shadow-md`,
+                children: [
+                  isOnBreak ? /* @__PURE__ */ jsxRuntimeExports.jsx(FiCheckCircle, { className: tw`text-sm` }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FiPauseCircle, { className: tw`text-sm` }),
+                  isOnBreak ? "Voltar" : "Pausa"
+                ]
+              }
+            )
+          ] }),
+          showActiveSummary ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-3`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ActiveCallSummary, { statusLabel, callTarget, durationSeconds: callDurationSeconds }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CallInfoDisplay, {})
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-2 rounded-2xl border border-slate-200 bg-white px-3 py-3 shadow-inner`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[11px] font-semibold uppercase tracking-wide text-slate-500`, children: "Número" }),
+              formattedHintNumber && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[11px] font-semibold text-primary`, children: formattedHintNumber })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-3`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  ref: visibleInputRef,
+                  type: "text",
+                  inputMode: "tel",
+                  value: sanitizedDialValue,
+                  onChange: (e) => {
+                    const input = e.target;
+                    setCursorPosition(input.selectionStart || 0);
+                  },
+                  onClick: (e) => setCursorPosition(e.target.selectionStart || 0),
+                  onKeyUp: (e) => setCursorPosition(e.target.selectionStart || 0),
+                  onSelect: (e) => setCursorPosition(e.target.selectionStart || 0),
+                  onKeyDown: (e) => {
+                    if (!mobileCanUseKeypad) {
+                      e.preventDefault();
+                      return;
+                    }
+                    const key = e.key;
+                    const input = e.target;
+                    const currentPos = input.selectionStart || 0;
+                    setCursorPosition(currentPos);
+                    if (key === "Backspace") {
+                      e.preventDefault();
+                      handleBackspace();
+                      return;
+                    }
+                    if (key === "Delete") {
+                      e.preventDefault();
+                      const capturedPos = currentPos;
+                      setDialValue((prevValue) => {
+                        if (capturedPos < prevValue.length) {
+                          const newValue = prevValue.slice(0, capturedPos) + prevValue.slice(capturedPos + 1);
+                          setTimeout(() => {
+                            if (visibleInputRef.current) {
+                              visibleInputRef.current.setSelectionRange(capturedPos, capturedPos);
+                              setCursorPosition(capturedPos);
+                            }
+                          }, 0);
+                          return newValue;
+                        }
+                        return prevValue;
+                      });
+                      return;
+                    }
+                    if (key === "Enter") {
+                      e.preventDefault();
+                      void handleCall();
+                      return;
+                    }
+                    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(key)) {
+                      return;
+                    }
+                    if ((e.ctrlKey || e.metaKey) && ["a", "c", "v", "x"].includes(key.toLowerCase())) {
+                      return;
+                    }
+                    if (/^[0-9*#]$/.test(key)) {
+                      e.preventDefault();
+                      handleDial(key);
+                      return;
+                    }
+                    e.preventDefault();
+                  },
+                  onPaste: handlePaste,
+                  disabled: !mobileCanUseKeypad,
+                  placeholder: "Digite ou cole um numero",
+                  className: tw`flex-1 bg-transparent text-3xl font-bold text-slate-900 outline-none placeholder:text-slate-300 disabled:opacity-60`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleBackspace,
+                    disabled: !mobileCanUseKeypad,
+                    className: tw`inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-300 hover:shadow-md disabled:opacity-40`,
+                    "aria-label": "Apagar último digito",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiDelete, { className: tw`text-lg` })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleClear,
+                    disabled: !mobileCanUseKeypad,
+                    className: tw`inline-flex h-10 w-10 items-center justify-center rounded-full border border-rose-300 bg-rose-50 text-rose-600 shadow-sm transition hover:border-rose-400 hover:bg-rose-100 hover:shadow-md disabled:opacity-40`,
+                    "aria-label": "Limpar número",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-lg` })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: tw`text-[11px] font-medium text-slate-500`, children: [
+              "Formatação automática: ",
+              displayNumber
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid grid-cols-3 gap-2`, children: keypadKeys.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleDial(item.value),
+              disabled: !mobileCanUseKeypad,
+              className: tw`flex h-14 flex-col items-center justify-center rounded-xl border border-slate-200 bg-white text-xl font-bold text-slate-900 shadow-sm transition active:scale-95 hover:border-slate-300 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-40`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: item.value }),
+                item.detail && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[9px] font-semibold uppercase tracking-widest text-slate-400`, children: item.detail })
+              ]
+            },
+            item.value
+          )) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-3 gap-2`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setInputMuted(!inputMuted),
+                className: tw`${inputMuted ? "border-rose-300 bg-rose-50 text-rose-700" : "border-slate-200 bg-white text-slate-700"} flex items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm font-semibold shadow-sm transition hover:border-slate-300 hover:shadow-md`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(MicIcon, { className: tw`text-base` }),
+                  inputMuted ? "Mudo" : "Áudio"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setOutputMuted(!outputMuted),
+                className: tw`${outputMuted ? "border-amber-300 bg-amber-50 text-amber-700" : "border-slate-200 bg-white text-slate-700"} flex items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm font-semibold shadow-sm transition hover:border-slate-300 hover:shadow-md`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SpeakerIcon, { className: tw`text-base` }),
+                  outputMuted ? "Saída off" : `${volumePercent}%`
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: isOnBreak ? handleGoOffBreak : () => setIsBreakModalOpen(true),
+                className: tw`${isOnBreak ? "border-green-300 bg-green-50 text-green-700" : "border-amber-300 bg-amber-50 text-amber-700"} flex items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm font-semibold shadow-sm transition hover:shadow-md`,
+                children: [
+                  isOnBreak ? /* @__PURE__ */ jsxRuntimeExports.jsx(FiCheckCircle, { className: tw`text-base` }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FiPauseCircle, { className: tw`text-base` }),
+                  isOnBreak ? "Voltar" : "Pausa"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-wrap items-center gap-2`, children: [
+            isIdle || isOnBreak ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleCall,
+                disabled: !isNumberValid,
+                className: tw`flex flex-1 min-w-[8rem] items-center justify-center gap-2 rounded-xl bg-green-500 px-4 py-3 text-base font-bold text-white shadow-lg transition hover:bg-green-600 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-60`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhone, { className: tw`text-lg` }),
+                  "Ligar"
+                ]
+              }
+            ) : isIncoming ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleReject,
+                  className: tw`flex flex-1 min-w-[7rem] items-center justify-center gap-2 rounded-xl bg-rose-500 px-4 py-3 text-sm font-bold text-white shadow-lg transition hover:bg-rose-600`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneOff, { className: tw`text-base` }),
+                    "Recusar"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAnswer,
+                  className: tw`flex flex-1 min-w-[7rem] items-center justify-center gap-2 rounded-xl bg-green-500 px-4 py-3 text-sm font-bold text-white shadow-lg transition hover:bg-green-600`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneIncoming, { className: tw`text-base` }),
+                    "Atender"
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleHangup,
+                className: tw`flex flex-1 min-w-[8rem] items-center justify-center gap-2 rounded-xl bg-rose-500 px-4 py-3 text-base font-bold text-white shadow-lg transition hover:bg-rose-600 hover:shadow-xl`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneOff, { className: tw`text-lg` }),
+                  "Encerrar"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onLogout,
+                className: tw`inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-red-400 hover:text-red-500`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiLogOut, { className: tw`text-base` }),
+                  "Sair"
+                ]
+              }
+            )
+          ] }),
+          (callError || availabilityError || audioDeviceError) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1.5`, children: [
+            callError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-start gap-2 rounded-xl border border-rose-200 bg-rose-50 px-2.5 py-2 text-[11px] text-rose-700`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`mt-0.5 text-xs` }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: callError })
+            ] }),
+            availabilityError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-start gap-2 rounded-xl border border-amber-200 bg-amber-50 px-2.5 py-2 text-[11px] text-amber-700`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`mt-0.5 text-xs` }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: availabilityError })
+            ] }),
+            audioDeviceError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-start gap-2 rounded-xl border border-sky-200 bg-sky-50 px-2.5 py-2 text-[11px] text-sky-700`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`mt-0.5 text-xs` }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: audioDeviceError })
+            ] })
+          ] }),
+          breakModal
+        ]
+      }
+    );
+  }
   if (isMiniMode) {
     const isCallActive = isInCall || isConnecting;
     const hasNumber = sanitizedDialValue.length > 0;
@@ -54949,7 +55341,6 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
       }
     );
   }
-  const showActiveSummary = isInCall || isConnecting;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -55549,84 +55940,110 @@ function AfterCallPanel({
   onSubmit,
   isSubmitting,
   errorMessage,
-  onLogout
+  onLogout,
+  isMobile = false,
+  onClose
 }) {
   const options = result2 === "success" ? successQualifications : discardQualifications;
   const hasOptions = options.length > 0;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-5`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs uppercase tracking-wide text-slate-500`, children: "Logado como" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-800`, children: username })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-5`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-700`, children: "Qualifique a chamada" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs text-slate-500`, children: "Esta etapa e obrigatoria para registrar o desfecho do atendimento." })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-2 gap-2`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: tw`${isMobile ? "min-h-[70vh] rounded-3xl border border-slate-200 bg-white p-4 shadow-xl" : "space-y-5"}`,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`mb-3 flex items-center justify-between`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs uppercase tracking-wide text-slate-500`, children: "Logado como" }),
+          onClose && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: tw`inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600 transition hover:border-slate-300`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(FiArrowLeft, { className: tw`text-xs` }),
+                "Voltar"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`${isMobile ? "space-y-3" : "space-y-1"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-800`, children: username }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
           {
-            type: "button",
-            onClick: () => onChangeResult("success"),
-            className: tw`${result2 === "success" ? "bg-green-500 text-white shadow-lg" : "bg-white text-slate-600"} rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold transition hover:border-green-400`,
-            children: "Atendimento concluido"
+            className: tw`space-y-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-5 ${isMobile ? "shadow-inner" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-700`, children: "Qualifique a chamada" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs text-slate-500`, children: "Esta etapa e obrigatoria para registrar o desfecho do atendimento." })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`${isMobile ? "grid grid-cols-1 gap-2" : "grid grid-cols-2 gap-2"}`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onChangeResult("success"),
+                    className: tw`${result2 === "success" ? "bg-green-500 text-white shadow-lg" : "bg-white text-slate-600"} rounded-xl border border-slate-200 px-3 py-3 text-sm font-semibold transition hover:border-green-400`,
+                    children: "Atendimento concluido"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onChangeResult("failure"),
+                    className: tw`${result2 === "failure" ? "bg-rose-500 text-white shadow-lg" : "bg-white text-slate-600"} rounded-xl border border-slate-200 px-3 py-3 text-sm font-semibold transition hover:border-rose-400`,
+                    children: "Atendimento descartado"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-2`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-medium text-slate-700`, children: "Selecione uma qualificacao" }),
+                hasOptions ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`${isMobile ? "max-h-64" : "max-h-52"} space-y-2 overflow-y-auto pr-1`, children: options.map((qualification) => {
+                  const isSelected = selectedQualificationId === qualification.id;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onSelectQualification(qualification.id),
+                      className: tw`${isSelected ? "ring-2 ring-primary bg-primary/5 border-primary" : "border-slate-200 bg-white"} w-full rounded-xl border px-3 py-3 text-left text-sm font-semibold transition hover:border-primary`,
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-800`, children: qualification.name })
+                    },
+                    qualification.id
+                  );
+                }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700`, children: "Nenhuma qualificacao disponivel para este tipo de resultado." })
+              ] }),
+              errorMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs text-red-500`, children: errorMessage }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onSubmit,
+                  disabled: !hasOptions || !selectedQualificationId || isSubmitting,
+                  className: tw`flex w-full items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-primaryDark disabled:cursor-not-allowed disabled:opacity-60`,
+                  children: [
+                    isSubmitting && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white` }),
+                    "Finalizar atendimento"
+                  ]
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => onChangeResult("failure"),
-            className: tw`${result2 === "failure" ? "bg-rose-500 text-white shadow-lg" : "bg-white text-slate-600"} rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold transition hover:border-rose-400`,
-            children: "Atendimento descartado"
+            onClick: onLogout,
+            className: tw`flex w-full items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-600 transition hover:border-red-400 hover:text-red-500`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FiLogOut, { className: tw`text-base` }),
+              "Sair"
+            ]
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-2`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-medium text-slate-700`, children: "Selecione uma qualificacao" }),
-        hasOptions ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`max-h-52 space-y-2 overflow-y-auto pr-1`, children: options.map((qualification) => {
-          const isSelected = selectedQualificationId === qualification.id;
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onSelectQualification(qualification.id),
-              className: tw`${isSelected ? "ring-2 ring-primary bg-primary/5 border-primary" : "border-slate-200 bg-white"} w-full rounded-xl border px-3 py-2 text-left transition hover:border-primary`,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-800`, children: qualification.name })
-            },
-            qualification.id
-          );
-        }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700`, children: "Nenhuma qualificacao disponivel para este tipo de resultado." })
-      ] }),
-      errorMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs text-red-500`, children: errorMessage }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: onSubmit,
-          disabled: !hasOptions || !selectedQualificationId || isSubmitting,
-          className: tw`flex w-full items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-primaryDark disabled:cursor-not-allowed disabled:opacity-60`,
-          children: [
-            isSubmitting && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white` }),
-            "Finalizar atendimento"
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onLogout,
-        className: tw`flex w-full items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-600 transition hover:border-red-400 hover:text-red-500`,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FiLogOut, { className: tw`text-base` }),
-          "Sair"
-        ]
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 function ActiveCallSummary({
   statusLabel,
@@ -55649,6 +56066,770 @@ function ActiveCallSummary({
     ] })
   ] }) });
 }
+const API_BASE_URL$1 = typeof window !== "undefined" ? window.__CALLIX_API_BASE_URL__ || (window.location.origin.includes("localhost") ? window.location.origin : "https://callix-zeta.vercel.app") : "";
+function getSessionToken$1() {
+  if (typeof window === "undefined") return null;
+  const lastUsername = localStorage.getItem("callix_dialer_last_username");
+  if (lastUsername) {
+    const sessionKey = `callix_dialer_${lastUsername}_session_token`;
+    const token = localStorage.getItem(sessionKey);
+    if (token) return token;
+  }
+  for (let i2 = 0; i2 < localStorage.length; i2++) {
+    const key = localStorage.key(i2);
+    if (key && key.match(/^callix_dialer_.*_session_token$/)) {
+      const token = localStorage.getItem(key);
+      if (token) return token;
+    }
+  }
+  return null;
+}
+function getAuthHeaders$1() {
+  const token = getSessionToken$1();
+  const headers = { "Content-Type": "application/json" };
+  if (token) {
+    headers["x-session-token"] = token;
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  return headers;
+}
+async function getCampaignConfig$1(contactId) {
+  const url = `${API_BASE_URL$1}/api/campaign-config/${contactId}`;
+  const response = await fetch(url, { method: "GET", headers: getAuthHeaders$1(), credentials: "omit" });
+  if (!response.ok) {
+    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
+    throw new Error(error2.error || `Falha ao buscar config: ${response.status}`);
+  }
+  return response.json();
+}
+async function getCodeToNameMapping(campaignModelId) {
+  const url = `${API_BASE_URL$1}/api/campaign-fields/${campaignModelId}`;
+  const response = await fetch(url, { method: "GET", headers: getAuthHeaders$1(), credentials: "omit" });
+  if (!response.ok) {
+    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
+    throw new Error(error2.error || `Falha ao buscar mapeamento: ${response.status}`);
+  }
+  return response.json();
+}
+async function getCustomerCodeToNameMapping(formId) {
+  const url = `${API_BASE_URL$1}/api/campaign-contact/0?source=customer&formId=${encodeURIComponent(String(formId))}`;
+  const response = await fetch(url, { method: "GET", headers: getAuthHeaders$1(), credentials: "omit" });
+  if (!response.ok) {
+    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
+    throw new Error(error2.error || `Falha ao buscar campos (cliente): ${response.status}`);
+  }
+  const json = await response.json();
+  const mapping = {};
+  if (json && Array.isArray(json.rows)) {
+    for (const row of json.rows) {
+      for (const field of row) {
+        if (field && field.code && field.name) {
+          mapping[field.code] = field.name;
+        }
+      }
+    }
+  }
+  return mapping;
+}
+async function getContactValues$1(contactId) {
+  const url = `${API_BASE_URL$1}/api/campaign-contact/${contactId}`;
+  const response = await fetch(url, { method: "GET", headers: getAuthHeaders$1(), credentials: "omit" });
+  if (!response.ok) {
+    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
+    throw new Error(error2.error || `Falha ao buscar valores: ${response.status}`);
+  }
+  return response.json();
+}
+async function getCustomerContactValues$1(customerId) {
+  const url = `${API_BASE_URL$1}/api/campaign-fields/0?source=customer&customerId=${encodeURIComponent(String(customerId))}`;
+  const response = await fetch(url, { method: "GET", headers: getAuthHeaders$1(), credentials: "omit" });
+  if (!response.ok) {
+    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
+    throw new Error(error2.error || `Falha ao buscar valores (cliente): ${response.status}`);
+  }
+  return response.json();
+}
+function findValue(finalData, candidates) {
+  const entries = Object.entries(finalData);
+  const lowerCandidates = candidates.map((item) => item.toLowerCase());
+  for (const [key, value] of entries) {
+    if (lowerCandidates.includes(key.toLowerCase())) {
+      return value;
+    }
+  }
+  return void 0;
+}
+function MobileDialer(props) {
+  useEffect(() => {
+    const existing = document.querySelector('link[data-mobile-dialer-fa="true"]');
+    if (!existing) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css";
+      link.dataset.mobileDialerFa = "true";
+      document.head.appendChild(link);
+    }
+  }, []);
+  if (!props.isAuthenticated) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(MobileDialerLogin, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AuthenticatedMobileDialer, { ...props });
+}
+function MobileDialerLogin({
+  username,
+  onLogin,
+  isLoadingSession,
+  sessionError
+}) {
+  const [loginInput, setLoginInput] = useState(username ?? "");
+  const [loginError, setLoginError] = useState(null);
+  const handleLogin = useCallback(async () => {
+    if (!loginInput.trim()) {
+      setLoginError("Informe o usuário Callix.");
+      return;
+    }
+    setLoginError(null);
+    try {
+      await Promise.resolve(onLogin(loginInput.trim()));
+    } catch (error2) {
+      setLoginError("Falha ao autenticar.");
+      console.error("Erro login", error2);
+    }
+  }, [loginInput, onLogin]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "phone-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "screen dialer-screen active", id: "dialerScreen", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "dialer-header", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "status-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "status-badge available", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-dot" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-text", children: "Login" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "phone-number-display", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: "text",
+        className: "phone-input",
+        placeholder: "Digite seu usuário Callix",
+        value: loginInput,
+        onChange: (e) => setLoginInput(e.target.value),
+        onKeyDown: (e) => e.key === "Enter" && handleLogin(),
+        disabled: isLoadingSession
+      }
+    ) }),
+    loginError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "input-error", children: loginError }),
+    sessionError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "input-error", children: sessionError }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-actions", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "empty-space" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "call-button", onClick: handleLogin, disabled: isLoadingSession, children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-sign-in-alt" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "empty-space" })
+    ] })
+  ] }) });
+}
+function AuthenticatedMobileDialer({
+  username
+}) {
+  var _a2, _b;
+  const [dialValue, setDialValue] = useState("");
+  const [activeScreen, setActiveScreen] = useState("dialer");
+  const [isPauseModalOpen, setIsPauseModalOpen] = useState(false);
+  const [isQualificationOpen, setIsQualificationOpen] = useState(false);
+  const [qualificationResult, setQualificationResult] = useState("success");
+  const [selectedQualificationId, setSelectedQualificationId] = useState(null);
+  const [qualificationError, setQualificationError] = useState(null);
+  const [callDurationSeconds, setCallDurationSeconds] = useState(0);
+  const [callError, setCallError] = useState(null);
+  const [currentBreakName, setCurrentBreakName] = useState(null);
+  const [pauseStartTime, setPauseStartTime] = useState(null);
+  const [pauseDurationSeconds, setPauseDurationSeconds] = useState(0);
+  const [contactData, setContactData] = useState({
+    finalData: {},
+    isLoading: false,
+    error: null
+  });
+  const [fetchedContactId, setFetchedContactId] = useState(null);
+  const operator = clientSdkReactExports.useCallOperator();
+  const operatorState = clientSdkReactExports.useCallOperatorState();
+  const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
+  const currentCallControls = clientSdkReactExports.useCallOperatorCurrentCallControls();
+  const callInfo = clientSdkReactExports.useCallOperatorCurrentCallInfo();
+  const rawSuccessQualifications = clientSdkReactExports.useCallOperatorSuccessQualifications();
+  const rawDiscardQualifications = clientSdkReactExports.useCallOperatorDiscardQualifications();
+  const successQualifications = useMemo(() => rawSuccessQualifications ?? [], [rawSuccessQualifications]);
+  const discardQualifications = useMemo(() => rawDiscardQualifications ?? [], [rawDiscardQualifications]);
+  const { makeManualCall, finishAfterCall, becomeAvailable } = clientSdkReactExports.useCallOperatorControls();
+  const { goOnBreak, goOffBreak } = useOperatorBreak();
+  const breaks = useSignal(operator == null ? void 0 : operator.breaks) || [];
+  const isOnBreak = (operatorState == null ? void 0 : operatorState.state) === "onBreak";
+  const [inputMuted, setInputMuted] = clientSdkReactExports.useCallOperatorAudioInputMuted();
+  const INITIAL_BREAK_ID = 5;
+  const INITIAL_BREAK_NAME = "Reunião";
+  const callState = operatorState == null ? void 0 : operatorState.state;
+  const hasEnteredInitialBreakRef = useRef(false);
+  useEffect(() => {
+    if (breaks.length === 0 || callState !== "idle" || hasEnteredInitialBreakRef.current || isOnBreak) {
+      return;
+    }
+    if (!goOnBreak) {
+      return;
+    }
+    hasEnteredInitialBreakRef.current = true;
+    const reuniaoBreak = breaks.find(
+      (b) => b.id === INITIAL_BREAK_ID || b.name.toLowerCase() === INITIAL_BREAK_NAME.toLowerCase()
+    );
+    if (reuniaoBreak) {
+      console.log("[MobileDialer] Operador conectado (idle), entrando em pausa inicial:", reuniaoBreak.name);
+      Promise.resolve(goOnBreak(reuniaoBreak.id)).then(() => {
+        console.log("[MobileDialer] Pausa inicial aplicada com sucesso:", reuniaoBreak.name);
+        setCurrentBreakName(reuniaoBreak.name);
+        setPauseStartTime(Date.now());
+      }).catch((err) => {
+        console.error("[MobileDialer] Falha ao entrar em pausa:", err);
+        hasEnteredInitialBreakRef.current = false;
+      });
+    } else {
+      const firstBreak = breaks[0];
+      console.log('[MobileDialer] Pausa "Reunião" não encontrada, usando:', firstBreak.name);
+      Promise.resolve(goOnBreak(firstBreak.id)).then(() => {
+        console.log("[MobileDialer] Pausa inicial aplicada com sucesso:", firstBreak.name);
+        setCurrentBreakName(firstBreak.name);
+        setPauseStartTime(Date.now());
+      }).catch((err) => {
+        console.error("[MobileDialer] Falha ao entrar em pausa:", err);
+        hasEnteredInitialBreakRef.current = false;
+      });
+    }
+  }, [breaks, callState, isOnBreak, goOnBreak]);
+  useEffect(() => {
+    console.log("[MobileDialer] Breaks loaded:", breaks);
+  }, [breaks]);
+  useEffect(() => {
+    console.log("[MobileDialer] Call state changed:", callState);
+  }, [callState]);
+  useEffect(() => {
+    if (callInfo) {
+      console.log("[MobileDialer] Call info atualizado:", {
+        type: callInfo == null ? void 0 : callInfo.type,
+        info: (callInfo == null ? void 0 : callInfo.type) === "campaign" ? {
+          campaign: callInfo.info.campaign,
+          campaignContact: callInfo.info.campaignContact
+        } : callInfo
+      });
+    }
+  }, [callInfo]);
+  const campaignContact = (callInfo == null ? void 0 : callInfo.type) === "campaign" ? callInfo.info.campaignContact : null;
+  const campaignContactId = campaignContact == null ? void 0 : campaignContact.id;
+  useEffect(() => {
+    if (!campaignContactId) {
+      setContactData({ finalData: {}, isLoading: false, error: null });
+      setFetchedContactId(null);
+      return;
+    }
+    if (fetchedContactId === campaignContactId) {
+      return;
+    }
+    let cancelled = false;
+    const fetchContactData = async () => {
+      console.log("[MobileDialer] Buscando dados do contato:", campaignContactId);
+      setContactData({ finalData: {}, isLoading: true, error: null });
+      try {
+        const customer = campaignContact == null ? void 0 : campaignContact.customer;
+        let codeToNameMap = {};
+        let contactValues = {};
+        if ((customer == null ? void 0 : customer.id) && (customer == null ? void 0 : customer.formId)) {
+          console.log("[MobileDialer] Usando modo cliente:", customer);
+          [codeToNameMap, contactValues] = await Promise.all([
+            getCustomerCodeToNameMapping(customer.formId),
+            getCustomerContactValues$1(customer.id)
+          ]);
+        } else {
+          const config = await getCampaignConfig$1(campaignContactId);
+          console.log("[MobileDialer] Config recebida:", config);
+          if (!config.campaignModelId) {
+            throw new Error("campaignModelId não encontrado");
+          }
+          [codeToNameMap, contactValues] = await Promise.all([
+            getCodeToNameMapping(config.campaignModelId),
+            getContactValues$1(campaignContactId)
+          ]);
+        }
+        console.log("[MobileDialer] Mapeamento:", codeToNameMap);
+        console.log("[MobileDialer] Valores:", contactValues);
+        const finalData = {};
+        Object.entries(contactValues).forEach(([code, value]) => {
+          if (code in codeToNameMap) {
+            finalData[codeToNameMap[code]] = value;
+          }
+        });
+        console.log("[MobileDialer] Final data:", finalData);
+        if (!cancelled) {
+          setContactData({ finalData, isLoading: false, error: null });
+          setFetchedContactId(campaignContactId);
+        }
+      } catch (error2) {
+        if (!cancelled) {
+          console.error("[MobileDialer] Erro ao buscar dados:", error2);
+          const errorMessage = error2 instanceof Error ? error2.message : "Erro ao buscar dados";
+          setContactData({ finalData: {}, isLoading: false, error: errorMessage });
+          setFetchedContactId(campaignContactId);
+        }
+      }
+    };
+    void fetchContactData();
+    return () => {
+      cancelled = true;
+    };
+  }, [campaignContactId, fetchedContactId]);
+  const callStateStr = callState;
+  const isError = callStateStr === "startup.error" || callStateStr === "offline";
+  const isIdle = !callStateStr || callStateStr === "starting" || callStateStr === "idle" || callStateStr === "manualCallSetup" || callStateStr === "onBreak";
+  const isConnecting = callState === "manualCallSetup" || callState === "manualCallRinging" || callState === "callRinging";
+  const isInCall = callState === "callInProgress";
+  const isAfterCall = callState === "afterCall";
+  useEffect(() => {
+    if (!isInCall) {
+      setCallDurationSeconds(0);
+      return;
+    }
+    const interval = setInterval(() => {
+      setCallDurationSeconds((prev) => prev + 1);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [isInCall]);
+  useEffect(() => {
+    if (!isOnBreak || !pauseStartTime) {
+      return;
+    }
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - pauseStartTime) / 1e3);
+      setPauseDurationSeconds(elapsed);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [isOnBreak, pauseStartTime]);
+  useEffect(() => {
+    if (!isOnBreak && currentBreakName) {
+      setCurrentBreakName(null);
+      setPauseStartTime(null);
+      setPauseDurationSeconds(0);
+    }
+  }, [isOnBreak, currentBreakName]);
+  useEffect(() => {
+    if (isInCall || isConnecting) {
+      setActiveScreen("call");
+    } else if (isAfterCall) {
+      setActiveScreen("dialer");
+    }
+  }, [isInCall, isConnecting, isAfterCall]);
+  useEffect(() => {
+    if (isAfterCall) {
+      const hasSuccess = successQualifications.length > 0;
+      setQualificationResult(hasSuccess ? "success" : "failure");
+      setSelectedQualificationId(null);
+      setQualificationError(null);
+      setIsQualificationOpen(true);
+    } else {
+      setIsQualificationOpen(false);
+    }
+  }, [isAfterCall, successQualifications]);
+  const formattedDial = useMemo(() => formatPhoneForDisplay(dialValue), [dialValue]);
+  const sanitizeInput = useCallback((input) => normalizePhoneNumberPaste(input), []);
+  const handleDigit = useCallback(
+    (digit) => {
+      if (isInCall || isConnecting) {
+        if (currentCall && typeof currentCall.sendDtmf === "function") {
+          try {
+            currentCall.sendDtmf(digit);
+          } catch (error2) {
+            console.error("Falha ao enviar DTMF", error2);
+          }
+        }
+        return;
+      }
+      setDialValue((prev) => (prev + digit).slice(0, 32));
+    },
+    [currentCall, isInCall, isConnecting]
+  );
+  const handleBackspace = useCallback(() => {
+    setDialValue((prev) => prev.slice(0, -1));
+  }, []);
+  const handleCall = useCallback(async () => {
+    console.log("[MobileDialer] handleCall triggered, dialValue:", dialValue);
+    const sanitized = sanitizeInput(dialValue);
+    console.log("[MobileDialer] Sanitized number:", sanitized);
+    if (!sanitized || !isValidPhoneFormat(sanitized)) {
+      console.log("[MobileDialer] Invalid phone format");
+      setCallError("Número inválido.");
+      return;
+    }
+    setCallError(null);
+    if (!makeManualCall) {
+      console.error("[MobileDialer] makeManualCall is not available");
+      setCallError("Função de chamada não disponível.");
+      return;
+    }
+    const e164Number = `+55${sanitized}`;
+    console.log("[MobileDialer] Calling makeManualCall with E.164:", e164Number);
+    try {
+      void makeManualCall(e164Number);
+      console.log("[MobileDialer] makeManualCall called successfully");
+    } catch (error2) {
+      console.error("[MobileDialer] Erro ao iniciar chamada manual:", error2);
+      setCallError("Erro ao iniciar chamada.");
+    }
+  }, [dialValue, makeManualCall, sanitizeInput]);
+  const handleHangup = useCallback(() => {
+    if (!(currentCallControls == null ? void 0 : currentCallControls.hangup)) return;
+    try {
+      currentCallControls.hangup();
+    } catch (error2) {
+      console.error("Erro ao desligar", error2);
+    }
+  }, [currentCallControls]);
+  const toggleMute = useCallback(() => {
+    setInputMuted(!inputMuted);
+  }, [inputMuted, setInputMuted]);
+  const toggleSpeaker = useCallback(() => {
+    console.warn("Alto-falante não suportado no SDK web. Apenas UI.");
+  }, []);
+  const handleGoOnBreak = useCallback(
+    async (breakId) => {
+      if (!goOnBreak) return;
+      try {
+        const selectedBreak = breaks.find((b) => b.id === breakId);
+        await goOnBreak(breakId);
+        setCurrentBreakName((selectedBreak == null ? void 0 : selectedBreak.name) ?? "Em pausa");
+        setPauseStartTime(Date.now());
+        setPauseDurationSeconds(0);
+        setIsPauseModalOpen(false);
+      } catch (error2) {
+        console.error("Erro ao entrar em pausa", error2);
+      }
+    },
+    [goOnBreak, breaks]
+  );
+  const handleGoOffBreak = useCallback(async () => {
+    if (!goOffBreak) return;
+    try {
+      await goOffBreak();
+      setCurrentBreakName(null);
+      setPauseStartTime(null);
+      setPauseDurationSeconds(0);
+      setIsPauseModalOpen(false);
+    } catch (error2) {
+      console.error("Erro ao sair de pausa", error2);
+    }
+  }, [goOffBreak]);
+  const handleQualificationConfirm = useCallback(async () => {
+    if (!finishAfterCall) return;
+    const list = qualificationResult === "success" ? successQualifications : discardQualifications;
+    if (!list.length) {
+      setQualificationError("Nenhuma qualificação disponível.");
+      return;
+    }
+    if (!selectedQualificationId) {
+      setQualificationError("Selecione uma qualificação.");
+      return;
+    }
+    setQualificationError(null);
+    try {
+      await Promise.resolve(
+        finishAfterCall({
+          result: qualificationResult,
+          qualificationId: selectedQualificationId
+        })
+      );
+      setIsQualificationOpen(false);
+    } catch (error2) {
+      setQualificationError("Erro ao enviar qualificação.");
+      console.error("Erro finishAfterCall", error2);
+    }
+  }, [discardQualifications, finishAfterCall, qualificationResult, selectedQualificationId, successQualifications]);
+  const formattedCallNumber = useMemo(() => {
+    var _a3;
+    if ((callInfo == null ? void 0 : callInfo.type) === "campaign" && ((_a3 = callInfo.info.campaignContact) == null ? void 0 : _a3.phoneNumber)) {
+      return formatPhoneForDisplay(callInfo.info.campaignContact.phoneNumber);
+    }
+    return formattedDial || "(--) ----- ----";
+  }, [callInfo, formattedDial]);
+  const callStatusLabel = useMemo(() => {
+    if (isConnecting) return "Ligando...";
+    if (isInCall) return "Em chamada";
+    if (isAfterCall) return "Encerrando...";
+    if (isError) return "Erro de conexão";
+    if (isOnBreak) return "Em pausa";
+    return "Disponível";
+  }, [isAfterCall, isConnecting, isError, isInCall, isOnBreak]);
+  const statusBadgeClass = useMemo(() => {
+    if (isError) return "error";
+    if (isOnBreak) return "paused";
+    return "available";
+  }, [isError, isOnBreak]);
+  const statusBadgeText = useMemo(() => {
+    if (isError) return "Erro";
+    if (isOnBreak) return currentBreakName || "Em pausa";
+    return "Disponível";
+  }, [isError, isOnBreak, currentBreakName]);
+  const pauseDurationLabel = useMemo(() => {
+    const hours = Math.floor(pauseDurationSeconds / 3600);
+    const minutes = Math.floor(pauseDurationSeconds % 3600 / 60).toString().padStart(2, "0");
+    const seconds = (pauseDurationSeconds % 60).toString().padStart(2, "0");
+    if (hours > 0) {
+      return `${hours}:${minutes}:${seconds}`;
+    }
+    return `${minutes}:${seconds}`;
+  }, [pauseDurationSeconds]);
+  const callDurationLabel = useMemo(() => {
+    const m = Math.floor(callDurationSeconds / 60).toString().padStart(2, "0");
+    const s = (callDurationSeconds % 60).toString().padStart(2, "0");
+    return `${m}:${s}`;
+  }, [callDurationSeconds]);
+  const renderKey = (value, letters) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "key", "data-value": value, onClick: () => handleDigit(value), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "number", children: value }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "letters", children: letters || " " })
+  ] }, value);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "phone-container", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `screen dialer-screen ${activeScreen === "dialer" ? "active" : ""}`, id: "dialerScreen", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dialer-header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "status-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: `status-badge ${statusBadgeClass}`, id: "statusBadge", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-dot" }),
+          isOnBreak ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status-info", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-text", children: statusBadgeText }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pause-timer", children: pauseDurationLabel })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-text", children: statusBadgeText })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "status-actions", children: isOnBreak ? /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "resume-btn", id: "resumeBtn", onClick: handleGoOffBreak, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-play" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Voltar" })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "pause-btn", id: "pauseBtn", onClick: () => setIsPauseModalOpen(true), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-pause" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Pausa" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "phone-number-display", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "tel",
+          id: "phoneNumber",
+          className: "phone-input",
+          placeholder: "",
+          autoComplete: "off",
+          inputMode: "tel",
+          value: formattedDial,
+          onChange: (e) => setDialValue(sanitizeInput(e.target.value)),
+          onPaste: (e) => {
+            var _a3;
+            e.preventDefault();
+            const text = ((_a3 = e.clipboardData) == null ? void 0 : _a3.getData("text")) || "";
+            setDialValue(sanitizeInput(text));
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "keypad", children: [
+        renderKey("1", ""),
+        renderKey("2", "ABC"),
+        renderKey("3", "DEF"),
+        renderKey("4", "GHI"),
+        renderKey("5", "JKL"),
+        renderKey("6", "MNO"),
+        renderKey("7", "PQRS"),
+        renderKey("8", "TUV"),
+        renderKey("9", "WXYZ"),
+        renderKey("*", ""),
+        renderKey("0", "+"),
+        renderKey("#", "")
+      ] }),
+      callError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "input-error", children: callError }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-actions", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "empty-space" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "call-button", id: "callButton", onClick: handleCall, disabled: !formattedDial || !isIdle, children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-phone" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: "delete-button",
+            id: "deleteButton",
+            style: { visibility: dialValue ? "visible" : "hidden" },
+            onClick: handleBackspace,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-delete-left" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `screen call-screen ${activeScreen === "call" ? "active" : ""}`, id: "callScreen", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-info", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-status", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "operator-badge-small", children: (username == null ? void 0 : username.slice(0, 2).toUpperCase()) || "OP" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { id: "callStatus", children: [
+            callStatusLabel,
+            " "
+          ] }),
+          isInCall && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: callDurationLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-number", id: "callNumber", children: formattedCallNumber }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-location", children: "Brasil" }),
+        (callInfo == null ? void 0 : callInfo.type) === "campaign" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "client-card", id: "clientCard", children: contactData.isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-card-loading", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-spinner fa-spin" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Carregando dados..." })
+        ] }) : contactData.error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-card-error", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-exclamation-circle" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: contactData.error })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-card-header", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-user-circle client-avatar" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-main-info", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-name", id: "clientName", children: findValue(contactData.finalData, ["DECISOR", "NOME", "CLIENTE"]) ?? ((_a2 = callInfo.info.campaignContact) == null ? void 0 : _a2.label) ?? "--" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-company", id: "clientCompany", children: findValue(contactData.finalData, ["EMPRESA", "RAZAO SOCIAL", "RAZÃO SOCIAL"]) ?? ((_b = callInfo.info.campaign) == null ? void 0 : _b.name) ?? "--" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "client-card-divider" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-values-grid", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-value-item", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-value-label", children: "Dívida Ativa" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-value-amount debt", id: "clientDebt", children: findValue(contactData.finalData, ["DIVIDA_ATIVA", "DIVIDA ATIVA", "DÍVIDA ATIVA", "VALOR DIVIDA", "VALOR DÍVIDA"]) ?? "R$ 0,00" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-value-item", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-value-label", children: "Valor Recuperado" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-value-amount recovered", id: "clientRecovered", children: findValue(contactData.finalData, ["BENEFICIO", "BENEFÍCIO", "VALOR RECUPERADO"]) ?? "R$ 0,00" })
+            ] })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-controls", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "control-row", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "control-button", id: "speakerBtn", onClick: toggleSpeaker, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "control-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-volume-high" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Alto-falante" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: `control-button ${inputMuted ? "active" : ""}`, id: "muteBtn", onClick: toggleMute, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "control-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: `fas ${inputMuted ? "fa-microphone-slash" : "fa-microphone"}` }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: inputMuted ? "Mudo" : "Mudo" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "control-button", id: "keypadBtn", onClick: () => setActiveScreen("incallKeypad"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "control-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-th" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Teclado" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "control-row control-row-center", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "control-button whatsapp-btn", id: "whatsappBtn", onClick: () => window.open("https://wa.me/", "_blank"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "control-icon whatsapp-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fab fa-whatsapp" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "WhatsApp" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "end-call-wrapper", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "end-call-button", id: "endCallButton", onClick: handleHangup, children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-phone-slash" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "end-call-label", children: "Desligar" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `screen incall-keypad-screen ${activeScreen === "incallKeypad" ? "active" : ""}`, id: "incallKeypadScreen", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "incall-header", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "hide-keypad-btn", id: "hideKeypadBtn", onClick: () => setActiveScreen("call"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Ocultar" }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "incall-number-display", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "incallPhoneNumber", children: formattedCallNumber }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "keypad incall-keypad", children: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "0", "#"].map((digit) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "key incall-key", "data-value": digit, onClick: () => handleDigit(digit), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "number", children: digit }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "letters", children: " " })
+      ] }, digit)) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "incall-actions", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "end-call-button", id: "endCallButton2", onClick: handleHangup, children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-phone-slash" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `screen call-history-screen ${activeScreen === "history" ? "active" : ""}`, id: "callHistoryScreen", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "history-header", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "header-title", children: "Ligações" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-history-list", id: "callHistoryList", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "history-empty", children: "Histórico indisponível nesta versão." }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "bottom-nav", id: "bottomNav", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `nav-item ${activeScreen === "history" ? "active" : ""}`,
+          id: "navCalls",
+          onClick: () => setActiveScreen("history"),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "nav-icon", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-clock-rotate-left" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "badge", id: "callsBadge", children: "0" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Ligações" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `nav-item ${activeScreen === "dialer" || activeScreen === "call" || activeScreen === "incallKeypad" ? "active" : ""}`,
+          id: "navKeypad",
+          onClick: () => setActiveScreen("dialer"),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nav-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-th" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Teclado" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `modal-overlay ${isPauseModalOpen ? "active" : ""}`, id: "pauseModal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "modal-content", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "modal-header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "modal-title", children: "Selecionar Pausa" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "modal-close", id: "closePauseModal", onClick: () => setIsPauseModalOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-xmark" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pause-options", id: "pauseOptions", children: [
+        breaks.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pause-option", onClick: () => handleGoOnBreak(item.id), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pause-option-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: `fas ${item.icon || "fa-circle-pause"}` }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pause-option-info", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pause-option-name", children: item.name }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pause-option-id", children: [
+              "ID: ",
+              item.id
+            ] })
+          ] })
+        ] }, item.id)),
+        !breaks.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "history-empty", children: "Nenhuma pausa configurada." })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "modal-cancel-btn", id: "cancelPauseBtn", onClick: () => setIsPauseModalOpen(false), children: "Cancelar" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `modal-overlay qualification-modal ${isQualificationOpen ? "active" : ""}`, id: "qualificationModal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "qualification-sheet", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sheet-handle" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sheet-header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sheet-title", children: "Qualificar Chamada" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sheet-subtitle", children: "Registre o resultado do atendimento" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "result-segmented", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: `segment ${qualificationResult === "success" ? "active" : ""}`,
+            id: "resultSuccess",
+            "data-type": "success",
+            onClick: () => {
+              setQualificationResult("success");
+              setSelectedQualificationId(null);
+            },
+            children: "Sucesso"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: `segment ${qualificationResult === "failure" ? "active" : ""}`,
+            id: "resultFailure",
+            "data-type": "failure",
+            onClick: () => {
+              setQualificationResult("failure");
+              setSelectedQualificationId(null);
+            },
+            children: "Falha"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "segment-indicator" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "qualifications-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "qualification-list", id: "qualificationList", children: [
+        (qualificationResult === "success" ? successQualifications : discardQualifications).map((q) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: `qualification-item ${selectedQualificationId === q.id ? "selected" : ""}`,
+            onClick: () => setSelectedQualificationId(q.id),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: q.name })
+          },
+          q.id
+        )),
+        !(qualificationResult === "success" ? successQualifications : discardQualifications).length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "history-empty", children: "Nenhuma qualificação configurada." })
+      ] }) }),
+      qualificationError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "input-error", children: qualificationError }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sheet-footer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "confirm-btn", id: "confirmQualificationBtn", onClick: handleQualificationConfirm, disabled: !selectedQualificationId, children: "Confirmar" }) })
+    ] }) })
+  ] });
+}
 const VIEWPORT_MARGIN$1 = 16;
 function clamp$1(value, min2, max2) {
   return Math.min(Math.max(value, min2), max2);
@@ -55710,33 +56891,55 @@ function getAuthHeaders() {
   }
   return headers;
 }
+async function fetchWithRetry(url, options, retries = 3, backoff = 1e3) {
+  console.log(`[DraggableClientInfoModal] 🚀 Iniciando fetch: ${url}`);
+  for (let i2 = 0; i2 < retries; i2++) {
+    try {
+      console.log(`[DraggableClientInfoModal] 📡 Tentativa ${i2 + 1}/${retries}`);
+      const startTime = Date.now();
+      const response = await fetch(url, options);
+      const duration = Date.now() - startTime;
+      console.log(`[DraggableClientInfoModal] ⏱️ Resposta em ${duration}ms - Status: ${response.status}`);
+      if (!response.ok) {
+        if (response.status >= 400 && response.status < 500) {
+          const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
+          console.error(`[DraggableClientInfoModal] ❌ Erro do cliente (${response.status}):`, error2);
+          throw new Error(error2.error || `Falha: ${response.status}`);
+        }
+        console.warn(`[DraggableClientInfoModal] ⚠️ Erro do servidor (${response.status}), tentando novamente...`);
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const json = await response.json();
+      console.log(`[DraggableClientInfoModal] ✅ Dados recebidos com sucesso`);
+      return json;
+    } catch (error2) {
+      const isLastAttempt = i2 === retries - 1;
+      if (isLastAttempt) {
+        console.error(`[DraggableClientInfoModal] 💥 Falha final após ${retries} tentativas:`, error2);
+        throw error2;
+      }
+      const delay = backoff * Math.pow(2, i2);
+      console.warn(`[DraggableClientInfoModal] ⏳ Aguardando ${delay}ms antes da próxima tentativa...`);
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+  }
+  throw new Error("Todas as tentativas falharam");
+}
 async function getCampaignConfig(contactId) {
   const url = `${API_BASE_URL}/api/campaign-config/${contactId}`;
-  const response = await fetch(url, {
+  return fetchWithRetry(url, {
     method: "GET",
     headers: getAuthHeaders(),
     credentials: "omit"
-    // API usa localStorage, não cookies
   });
-  if (!response.ok) {
-    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
-    throw new Error(error2.error || `Falha ao buscar config: ${response.status}`);
-  }
-  const json = await response.json();
-  return json;
 }
 async function getCampaignFields(campaignModelId) {
   const url = `${API_BASE_URL}/api/campaign-fields/${campaignModelId}`;
-  const response = await fetch(url, {
+  const json = await fetchWithRetry(url, {
     method: "GET",
     headers: getAuthHeaders(),
     credentials: "omit"
   });
-  if (!response.ok) {
-    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
-    throw new Error(error2.error || `Falha ao buscar campos: ${response.status}`);
-  }
-  const json = await response.json();
   console.log("[DraggableClientInfoModal] Estrutura de campos recebida:", json);
   if (!json.rows || !Array.isArray(json.rows)) {
     console.warn("[DraggableClientInfoModal] Estrutura de campos inválida, usando fallback");
@@ -55750,16 +56953,11 @@ async function getCampaignFields(campaignModelId) {
 }
 async function getCustomerFields(formId) {
   const url = `${API_BASE_URL}/api/campaign-contact/0?source=customer&formId=${encodeURIComponent(String(formId))}`;
-  const response = await fetch(url, {
+  const json = await fetchWithRetry(url, {
     method: "GET",
     headers: getAuthHeaders(),
     credentials: "omit"
   });
-  if (!response.ok) {
-    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
-    throw new Error(error2.error || `Falha ao buscar campos (cliente): ${response.status}`);
-  }
-  const json = await response.json();
   console.log("[DraggableClientInfoModal] (cliente) Estrutura de campos recebida:", json);
   if (!json.rows || !Array.isArray(json.rows)) {
     console.warn("[DraggableClientInfoModal] (cliente) Estrutura de campos inválida, usando fallback");
@@ -55769,31 +56967,19 @@ async function getCustomerFields(formId) {
 }
 async function getContactValues(contactId) {
   const url = `${API_BASE_URL}/api/campaign-contact/${contactId}`;
-  const response = await fetch(url, {
+  return fetchWithRetry(url, {
     method: "GET",
     headers: getAuthHeaders(),
     credentials: "omit"
   });
-  if (!response.ok) {
-    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
-    throw new Error(error2.error || `Falha ao buscar valores: ${response.status}`);
-  }
-  const json = await response.json();
-  return json;
 }
 async function getCustomerContactValues(customerId) {
   const url = `${API_BASE_URL}/api/campaign-fields/0?source=customer&customerId=${encodeURIComponent(String(customerId))}`;
-  const response = await fetch(url, {
+  return fetchWithRetry(url, {
     method: "GET",
     headers: getAuthHeaders(),
     credentials: "omit"
   });
-  if (!response.ok) {
-    const error2 = await response.json().catch(() => ({ error: "Erro desconhecido" }));
-    throw new Error(error2.error || `Falha ao buscar valores (cliente): ${response.status}`);
-  }
-  const json = await response.json();
-  return json;
 }
 function DraggableClientInfoModal({
   isOpen,
@@ -55911,7 +57097,7 @@ function DraggableClientInfoModal({
     return () => {
       cancelled = true;
     };
-  }, [campaignContact == null ? void 0 : campaignContact.id, fetchedContactId]);
+  }, [campaignContact, campaignContact == null ? void 0 : campaignContact.id, fetchedContactId]);
   useEffect(() => {
     if (!isDragging) {
       return;
@@ -56114,7 +57300,8 @@ function DraggableQualificationModal({
   onSelectQualification,
   onSubmit,
   isSubmitting,
-  errorMessage
+  errorMessage,
+  portalTarget = null
 }) {
   const containerRef = useRef(null);
   const pointerRef = useRef({ pointerId: null, offsetX: 0, offsetY: 0 });
@@ -56347,14 +57534,17 @@ function DraggableQualificationModal({
     }
   );
   if (typeof document !== "undefined") {
-    return createPortal(modalContent, document.body);
+    return createPortal(modalContent, portalTarget ?? document.body);
   }
   return null;
 }
-function InlineDialer({ variant = "default", isAuthenticated, ...props }) {
+function InlineDialer({ variant = "default", portalTarget, isAuthenticated, ...props }) {
   const isMiniMode = variant === "min";
+  if (variant === "mobile") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(MobileDialer, { isAuthenticated, ...props });
+  }
   if (!isAuthenticated || !isMiniMode) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { variant, isAuthenticated, ...props });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { variant, portalTarget, isAuthenticated, ...props });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(AuthenticatedMiniDialer, { ...props });
 }
@@ -56367,10 +57557,11 @@ function AuthenticatedMiniDialer({
 }) {
   const { skipManualQualification } = useDialerConfig();
   const operatorState = clientSdkReactExports.useCallOperatorState();
-  const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
   const currentCallInfo = clientSdkReactExports.useCallOperatorCurrentCallInfo();
-  const successQualifications = clientSdkReactExports.useCallOperatorSuccessQualifications();
-  const discardQualifications = clientSdkReactExports.useCallOperatorDiscardQualifications();
+  const rawSuccessQualifications = clientSdkReactExports.useCallOperatorSuccessQualifications();
+  const rawDiscardQualifications = clientSdkReactExports.useCallOperatorDiscardQualifications();
+  const successQualifications = useMemo(() => rawSuccessQualifications ?? [], [rawSuccessQualifications]);
+  const discardQualifications = useMemo(() => rawDiscardQualifications ?? [], [rawDiscardQualifications]);
   const { finishAfterCall } = clientSdkReactExports.useCallOperatorControls();
   const [isClientInfoModalOpen, setIsClientInfoModalOpen] = useState(false);
   const [isQualificationModalOpen, setIsQualificationModalOpen] = useState(false);
@@ -56383,7 +57574,6 @@ function AuthenticatedMiniDialer({
   const isInCall = callState === "callInProgress";
   const isRinging = callState === "manualCallRinging" || callState === "callRinging";
   const isConnecting = callState === "manualCallSetup" || isRinging;
-  (currentCall == null ? void 0 : currentCall.direction) === "incoming";
   const isAfterCall = callState === "afterCall";
   useEffect(() => {
     if (!isInCall) {
@@ -56704,7 +57894,7 @@ class CallixDialerWidget {
       }
       this.root = clientExports.createRoot(this.container);
       this.root.render(
-        /* @__PURE__ */ jsxRuntimeExports.jsx(StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialerWrapper, { options: this.options }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialerWrapper, { options: this.options, containerEl: this.container }) })
       );
       if (this.options.onReady) {
         this.options.onReady();
@@ -56734,8 +57924,7 @@ const getStorageKeys = (username) => ({
   SKIP_MANUAL_QUALIFICATION: `callix_dialer_${username}_skip_manual_qualification`
 });
 const LAST_USERNAME_KEY = "callix_dialer_last_username";
-const SESSION_EXPIRATION_MS = 8 * 60 * 60 * 1e3;
-function DialerWrapper({ options }) {
+function DialerWrapper({ options, containerEl }) {
   const [username, setUsername] = useState(null);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -56746,6 +57935,7 @@ function DialerWrapper({ options }) {
   const [skipManualQualification, setSkipManualQualification] = useState(false);
   const presetUsername = options.presetUsername ? options.presetUsername.trim() : null;
   const uiVariant = options.uiVariant ?? "default";
+  const portalTarget = useMemo(() => options.portalTarget ?? containerEl ?? null, [options.portalTarget, containerEl]);
   const autoLoginAttemptedRef = useRef(false);
   const lastPresetRef = useRef(presetUsername);
   useEffect(() => {
@@ -56756,6 +57946,7 @@ function DialerWrapper({ options }) {
     try {
       const storedLastUsername = localStorage.getItem(LAST_USERNAME_KEY);
       if (!storedLastUsername) {
+        console.log("[Callix Dialer] Nenhum username salvo, aguardando login manual");
         setIsRestoringSession(false);
         return;
       }
@@ -56764,37 +57955,19 @@ function DialerWrapper({ options }) {
         setIsRestoringSession(false);
         return;
       }
+      console.log("[Callix Dialer] Username encontrado, irá fazer novo login:", storedLastUsername);
+      setUsername(storedLastUsername);
       const STORAGE_KEYS = getStorageKeys(storedLastUsername);
-      const storedToken = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN);
-      const storedDomain = localStorage.getItem(STORAGE_KEYS.DOMAIN);
-      const storedTimestamp = localStorage.getItem(STORAGE_KEYS.TIMESTAMP);
-      if (storedLastUsername && storedToken && storedDomain && storedTimestamp) {
-        const timestamp = parseInt(storedTimestamp, 10);
-        const now = Date.now();
-        if (now - timestamp < SESSION_EXPIRATION_MS) {
-          console.log("[Callix Dialer] Restaurando sessão salva:", storedLastUsername);
-          setUsername(storedLastUsername);
-          setSessionToken(storedToken);
-          setCallixDomain(storedDomain);
-          setIsAuthenticated(true);
-          const storedSkipQualification = localStorage.getItem(STORAGE_KEYS.SKIP_MANUAL_QUALIFICATION);
-          if (storedSkipQualification) {
-            setSkipManualQualification(storedSkipQualification === "true");
-          }
-        } else {
-          console.log("[Callix Dialer] Sessão expirada, limpando...");
-          localStorage.removeItem(LAST_USERNAME_KEY);
-          localStorage.removeItem(STORAGE_KEYS.SESSION_TOKEN);
-          localStorage.removeItem(STORAGE_KEYS.DOMAIN);
-          localStorage.removeItem(STORAGE_KEYS.TIMESTAMP);
-        }
+      const storedSkipQualification = localStorage.getItem(STORAGE_KEYS.SKIP_MANUAL_QUALIFICATION);
+      if (storedSkipQualification) {
+        setSkipManualQualification(storedSkipQualification === "true");
       }
     } catch (err) {
-      console.error("[Callix Dialer] Erro ao restaurar sessão:", err);
+      console.error("[Callix Dialer] Erro ao verificar sessão:", err);
     } finally {
       setIsRestoringSession(false);
     }
-  }, []);
+  }, [presetUsername]);
   useEffect(() => {
     if (presetUsername && username !== presetUsername) {
       setUsername(presetUsername);
@@ -56892,6 +58065,14 @@ function DialerWrapper({ options }) {
     autoLoginAttemptedRef.current = true;
     void handleLogin(presetUsername);
   }, [presetUsername, isAuthenticated, isLoading, isRestoringSession, handleLogin]);
+  useEffect(() => {
+    if (presetUsername || !username || isAuthenticated || isLoading || isRestoringSession || autoLoginAttemptedRef.current) {
+      return;
+    }
+    console.log("[Callix Dialer] Auto-login com username restaurado:", username);
+    autoLoginAttemptedRef.current = true;
+    void handleLogin(username);
+  }, [presetUsername, username, isAuthenticated, isLoading, isRestoringSession, handleLogin]);
   const handleLogout = () => {
     const currentUsername = username;
     setUsername(presetUsername ?? null);
@@ -56914,9 +58095,9 @@ function DialerWrapper({ options }) {
       }
     }
   };
-  const DialerComponent = options.mode === "inline" ? InlineDialer : FloatingDialer;
+  const DialerComponent = options.mode === "inline" || uiVariant === "mobile" ? InlineDialer : FloatingDialer;
   if (!isAuthenticated || !sessionToken || !callixDomain) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(DialerConfigContext.Provider, { value: { skipManualQualification }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DialerComponent,
       {
         isAuthenticated: false,
@@ -56925,9 +58106,10 @@ function DialerWrapper({ options }) {
         onLogout: handleLogout,
         isLoadingSession: isLoading || isRestoringSession,
         sessionError: error2,
-        variant: uiVariant
+        variant: uiVariant,
+        portalTarget
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DialerConfigContext.Provider, { value: { skipManualQualification }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     clientSdkReactExports.CallixClientProvider,
@@ -56943,7 +58125,8 @@ function DialerWrapper({ options }) {
           onLogout: handleLogout,
           isLoadingSession: isLoading,
           sessionError: error2,
-          variant: uiVariant
+          variant: uiVariant,
+          portalTarget
         }
       )
     }
@@ -56956,13 +58139,16 @@ function init(options) {
 }
 const CallixDialer = {
   CallixDialerWidget,
-  init
+  init,
+  version: "1.0.0"
 };
 if (typeof window !== "undefined") {
   window.CallixDialer = CallixDialer;
 }
 export {
+  CallixDialerWidget,
   CallixDialer as default,
+  init,
   useDialerConfig
 };
 //# sourceMappingURL=callix-dialer.es.js.map