callix-dialer-widget 2.2.0 → 2.4.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, useMemo, useRef, useCallback, forwardRef, useLayoutEffect, createContext, useImperativeHandle, StrictMode, useContext } from "react";
+import React, { useState, useMemo, useRef, useEffect, useCallback, forwardRef, useLayoutEffect, useId, createContext, useImperativeHandle, 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) {
@@ -101,9 +101,9 @@ function requireAxios() {
   const { toString } = Object.prototype;
   const { getPrototypeOf } = Object;
   const { iterator, toStringTag } = Symbol;
-  const kindOf = /* @__PURE__ */ ((cache) => (thing) => {
+  const kindOf = /* @__PURE__ */ ((cache2) => (thing) => {
     const str = toString.call(thing);
-    return cache[str] || (cache[str] = str.slice(8, -1).toLowerCase());
+    return cache2[str] || (cache2[str] = str.slice(8, -1).toLowerCase());
   })(/* @__PURE__ */ Object.create(null));
   const kindOfTest = (type) => {
     type = type.toLowerCase();
@@ -307,10 +307,10 @@ function requireAxios() {
     }
   };
   const matchAll = (regExp, str) => {
-    let matches;
+    let matches2;
     const arr = [];
-    while ((matches = regExp.exec(str)) !== null) {
-      arr.push(matches);
+    while ((matches2 = regExp.exec(str)) !== null) {
+      arr.push(matches2);
     }
     return arr;
   };
@@ -5774,11 +5774,11 @@ var StateNode = (
       if (!afterConfig) {
         return [];
       }
-      var mutateEntryExit = function(delay, i2) {
-        var delayRef = isFunction(delay) ? "".concat(_this.id, ":delay[").concat(i2, "]") : delay;
+      var mutateEntryExit = function(delay2, i2) {
+        var delayRef = isFunction(delay2) ? "".concat(_this.id, ":delay[").concat(i2, "]") : delay2;
         var eventType = after(delayRef, _this.id);
         _this.onEntry.push(send$1(eventType, {
-          delay
+          delay: delay2
         }));
         _this.onExit.push(cancel$1(eventType));
         return eventType;
@@ -5788,12 +5788,12 @@ var StateNode = (
         return __assign(__assign({}, transition), {
           event: eventType
         });
-      }) : flatten(Object.keys(afterConfig).map(function(delay, i2) {
-        var configTransition = afterConfig[delay];
+      }) : flatten(Object.keys(afterConfig).map(function(delay2, i2) {
+        var configTransition = afterConfig[delay2];
         var resolvedTransition = isString(configTransition) ? {
           target: configTransition
         } : configTransition;
-        var resolvedDelay = !isNaN(+delay) ? +delay : delay;
+        var resolvedDelay = !isNaN(+delay2) ? +delay2 : delay2;
         var eventType = mutateEntryExit(resolvedDelay, i2);
         return toArray(resolvedTransition).map(function(transition) {
           return __assign(__assign({}, transition), {
@@ -5803,9 +5803,9 @@ var StateNode = (
         });
       }));
       return delayedTransitions.map(function(delayedTransition) {
-        var delay = delayedTransition.delay;
+        var delay2 = delayedTransition.delay;
         return __assign(__assign({}, _this.formatTransition(delayedTransition)), {
-          delay
+          delay: delay2
         });
       });
     };
@@ -7785,13 +7785,13 @@ function requireExtractExtension() {
         return {};
       }
       var numberWithoutExtension = number.slice(0, start2);
-      var matches = number.match(EXTN_PATTERN2);
+      var matches2 = number.match(EXTN_PATTERN2);
       var i2 = 1;
-      while (i2 < matches.length) {
-        if (matches[i2]) {
+      while (i2 < matches2.length) {
+        if (matches2[i2]) {
           return {
             number: numberWithoutExtension,
-            ext: matches[i2]
+            ext: matches2[i2]
           };
         }
         i2++;
@@ -10797,10 +10797,10 @@ function requirePhoneNumberMatcher() {
       return _createClass2(PhoneNumberMatcher2, [{
         key: "find",
         value: function find() {
-          var matches;
-          while (this.maxTries > 0 && (matches = this.PATTERN.exec(this.text)) !== null) {
-            var candidate = matches[0];
-            var offset = matches.index;
+          var matches2;
+          while (this.maxTries > 0 && (matches2 = this.PATTERN.exec(this.text)) !== null) {
+            var candidate = matches2[0];
+            var offset = matches2.index;
             candidate = (0, _parsePreCandidate["default"])(candidate);
             if ((0, _isValidPreCandidate["default"])(candidate, offset, this.text)) {
               var match2 = (
@@ -14024,12 +14024,12 @@ function requireMemoize() {
       throw new TypeError(FUNC_ERROR_TEXT);
     }
     var memoized = function() {
-      var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
-      if (cache.has(key)) {
-        return cache.get(key);
+      var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache2 = memoized.cache;
+      if (cache2.has(key)) {
+        return cache2.get(key);
       }
       var result2 = func.apply(this, args);
-      memoized.cache = cache.set(key, result2) || cache;
+      memoized.cache = cache2.set(key, result2) || cache2;
       return result2;
     };
     memoized.cache = new (memoize.Cache || MapCache)();
@@ -14503,14 +14503,14 @@ function requirePhoneNumberSearch() {
       return _createClass2(PhoneNumberSearch2, [{
         key: "find",
         value: function find() {
-          var matches = this.regexp.exec(this.text);
-          if (!matches) {
+          var matches2 = this.regexp.exec(this.text);
+          if (!matches2) {
             return;
           }
-          var number = matches[0];
-          var startsAt = matches.index;
+          var number = matches2[0];
+          var startsAt = matches2.index;
           number = number.replace(WHITESPACE_IN_THE_BEGINNING_PATTERN, "");
-          startsAt += matches[0].length - number.length;
+          startsAt += matches2[0].length - number.length;
           number = number.replace(PUNCTUATION_IN_THE_END_PATTERN, "");
           number = (0, _parsePreCandidate["default"])(number);
           var result2 = this.parseCandidate(number, startsAt);
@@ -42753,73 +42753,73 @@ function requireChunk52ALM2Y4() {
   function isInjector(value) {
     return __isInternalType(value, Injector);
   }
-  var getWeakCacheItem = (cache, deps) => {
+  var getWeakCacheItem = (cache2, deps) => {
     while (true) {
       const [dep, ...rest] = deps;
-      const entry = cache.get(dep);
+      const entry = cache2.get(dep);
       if (!entry) {
         return;
       }
       if (!rest.length) {
         return entry[1];
       }
-      cache = entry[0];
+      cache2 = entry[0];
       deps = rest;
     }
   };
-  var setWeakCacheItem = (cache, deps, item) => {
+  var setWeakCacheItem = (cache2, deps, item) => {
     while (true) {
       const [dep, ...rest] = deps;
-      let entry = cache.get(dep);
+      let entry = cache2.get(dep);
       if (!entry) {
         entry = [/* @__PURE__ */ new WeakMap()];
-        cache.set(dep, entry);
+        cache2.set(dep, entry);
       }
       if (!rest.length) {
         entry[1] = item;
         return;
       }
-      cache = entry[0];
+      cache2 = entry[0];
       deps = rest;
     }
   };
   var createDeepCache = () => {
-    let cache = /* @__PURE__ */ new WeakMap();
+    let cache2 = /* @__PURE__ */ new WeakMap();
     const deepCache = (createFn, foundFn, deps) => {
       if (!deps.length)
         throw new Error("Dependencies need to exist.");
-      const cachedValue = getWeakCacheItem(cache, deps);
+      const cachedValue = getWeakCacheItem(cache2, deps);
       if (cachedValue) {
         foundFn(cachedValue);
         return cachedValue;
       }
       const newObject = createFn();
-      setWeakCacheItem(cache, deps, newObject);
+      setWeakCacheItem(cache2, deps, newObject);
       return newObject;
     };
     const upsert = (createFn, deps) => {
       if (!deps.length)
         throw new Error("Dependencies need to exist.");
-      const cachedValue = getWeakCacheItem(cache, deps);
+      const cachedValue = getWeakCacheItem(cache2, deps);
       const newObject = createFn(cachedValue);
-      setWeakCacheItem(cache, deps, newObject);
+      setWeakCacheItem(cache2, deps, newObject);
     };
     const remove = (...deps) => {
-      removeWeakCacheItem(cache, deps);
+      removeWeakCacheItem(cache2, deps);
     };
-    const get = (deps) => getWeakCacheItem(cache, deps);
+    const get = (deps) => getWeakCacheItem(cache2, deps);
     return {
       get,
-      cache,
+      cache: cache2,
       deepCache,
       upsert,
       remove
     };
   };
-  var removeWeakCacheItem = (cache, deps) => {
+  var removeWeakCacheItem = (cache2, deps) => {
     while (true) {
       const [dep, ...rest] = deps;
-      let entry = cache.get(dep);
+      let entry = cache2.get(dep);
       if (!entry) {
         return;
       }
@@ -42828,7 +42828,7 @@ function requireChunk52ALM2Y4() {
         entry[1] = void 0;
         return;
       } else {
-        cache = entry[0];
+        cache2 = entry[0];
         deps = rest;
       }
     }
@@ -44185,11 +44185,11 @@ var directive = (factory, data) => {
   const key = stringify(data);
   let directive2;
   if (key) {
-    var cache = cacheByFactory.get(factory);
-    if (!cache) {
-      cacheByFactory.set(factory, cache = /* @__PURE__ */ new Map());
+    var cache2 = cacheByFactory.get(factory);
+    if (!cache2) {
+      cacheByFactory.set(factory, cache2 = /* @__PURE__ */ new Map());
     }
-    directive2 = cache.get(key);
+    directive2 = cache2.get(key);
   }
   if (!directive2) {
     directive2 = Object.defineProperty((params, context) => {
@@ -44198,9 +44198,9 @@ var directive = (factory, data) => {
     }, "toJSON", {
       value: () => key || data
     });
-    if (cache) {
-      cache.set(key, directive2);
-      ensureMaxSize(cache, 1e4);
+    if (cache2) {
+      cache2.set(key, directive2);
+      ensureMaxSize(cache2, 1e4);
     }
   }
   return directive2;
@@ -45472,7 +45472,7 @@ var resolveContext = {
 };
 var handleArbitraryValues = (section, key) => (key = key[0] == "[" && key.slice(-1) == "]" && key.slice(1, -1)) && includes(section, "olor") == /^(#|(hsl|rgb)a?\(|[a-z]+$)/.test(key) && (includes(key, "calc(") ? key.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ") : key);
 var makeThemeResolver = (config) => {
-  const cache = /* @__PURE__ */ new Map();
+  const cache2 = /* @__PURE__ */ new Map();
   const theme2 = { ...defaultTheme, ...config };
   const deref = (theme3, section) => {
     const base = theme3 && theme3[section];
@@ -45486,9 +45486,9 @@ var makeThemeResolver = (config) => {
       defaultValue = key;
       key = join$1(tail(keypath), ".");
     }
-    let base = cache.get(section);
+    let base = cache2.get(section);
     if (!base) {
-      cache.set(section, base = { ...deref(theme2, section) });
+      cache2.set(section, base = { ...deref(theme2, section) });
       Object.assign(base, deref(theme2.extend, section));
     }
     if (key != null) {
@@ -48472,96 +48472,146 @@ function getAuthHeaders() {
   }
   return headers;
 }
-async function getCampaignConfig$2(contactId) {
-  const url = `${API_BASE_URL}/api/campaign-config/${contactId}`;
-  const response = await fetch(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 config: ${response.status}`);
-  }
-  const json = await response.json();
-  return json;
-}
-async function getCodeToNameMapping(campaignModelId) {
-  const url = `${API_BASE_URL}/api/campaign-fields/${campaignModelId}`;
-  const response = await fetch(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 mapeamento: ${response.status}`);
-  }
-  const json = await response.json();
-  return json;
-}
-async function getCustomerCodeToNameMapping(formId) {
-  const url = `${API_BASE_URL}/api/campaign-contact/0?source=customer&formId=${encodeURIComponent(String(formId))}`;
-  const response = await fetch(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 CAMPAIGN_FORM_CACHE_TTL_MS = 5 * 60 * 1e3;
+const DEFAULT_RETRIES = 2;
+const RETRY_DELAY_MS = 800;
+const REQUEST_TIMEOUT_MS$1 = 15e3;
+const cache = /* @__PURE__ */ new Map();
+function campaignFormCacheKey(request) {
+  return `${request.source}:${request.id}`;
+}
+function campaignFormRequestFromCallInfo(info, phoneId) {
+  var _a2, _b;
+  const contact = info == null ? void 0 : info.campaignContact;
+  if (!(contact == null ? void 0 : contact.id)) {
+    return null;
   }
-  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;
-        }
+  const customer = contact.customer;
+  if ((customer == null ? void 0 : customer.id) && (customer == null ? void 0 : customer.formId)) {
+    return { source: "customer", id: customer.id, formId: customer.formId, campaignId: ((_a2 = info == null ? void 0 : info.campaign) == null ? void 0 : _a2.id) ?? null, phoneId: phoneId ?? null };
+  }
+  return { source: "campaign", id: contact.id, campaignId: ((_b = info == null ? void 0 : info.campaign) == null ? void 0 : _b.id) ?? null, phoneId: phoneId ?? null };
+}
+function buildCampaignFormUrl(apiBaseUrl, request) {
+  const params = new URLSearchParams();
+  if (request.source === "customer") params.set("source", "customer");
+  if (request.campaignId) params.set("campaignId", String(request.campaignId));
+  if (request.formId) params.set("formId", String(request.formId));
+  if (request.phoneId) params.set("phoneId", String(request.phoneId));
+  if (request.signature && request.expiresAt) {
+    params.set("sig", request.signature);
+    params.set("exp", String(request.expiresAt));
+  }
+  const query = params.toString();
+  return `${apiBaseUrl}/api/campaign-form/${encodeURIComponent(String(request.id))}${query ? `?${query}` : ""}`;
+}
+function isFormResponse(value) {
+  if (!value || typeof value !== "object") return false;
+  const form = value;
+  return typeof form.id === "number" && !!form.values && typeof form.values === "object" && Array.isArray(form.fields);
+}
+const NETWORK_ERROR_MESSAGE = "Não foi possível conectar ao servidor do discador. Verifique a conexão ou se o back-end está atualizado.";
+const ROUTE_MISSING_MESSAGE = "Rota do formulário não encontrada no servidor do discador. Atualize o back-end (deploy) para esta versão do widget.";
+function describeHttpError(status, body) {
+  if (status === 401) return "Sessão expirada. Entre novamente no discador.";
+  const fromBody = body.message || body.error;
+  if (fromBody) return fromBody;
+  if (status === 404) return ROUTE_MISSING_MESSAGE;
+  return `Erro ${status}`;
+}
+async function requestOnce(url, headers) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS$1);
+  try {
+    const response = await fetch(url, { method: "GET", headers, credentials: "omit", signal: controller.signal });
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      const error2 = new Error(describeHttpError(response.status, body));
+      error2.status = response.status;
+      throw error2;
+    }
+    const data = await response.json();
+    if (!isFormResponse(data)) {
+      throw new Error("Resposta inesperada do servidor");
+    }
+    return data;
+  } catch (error2) {
+    if (error2 instanceof Error && error2.name === "AbortError") {
+      throw new Error("Tempo esgotado ao buscar o formulário");
+    }
+    if (error2 instanceof TypeError) {
+      const wrapped = new Error(NETWORK_ERROR_MESSAGE);
+      wrapped.cause = error2;
+      throw wrapped;
+    }
+    throw error2;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+function shouldRetry(error2) {
+  const status = error2 == null ? void 0 : error2.status;
+  if (status === void 0) return true;
+  return status >= 500 || status === 408 || status === 429;
+}
+function fetchCampaignForm(request, options = {}) {
+  const key = campaignFormCacheKey(request);
+  const now = Date.now();
+  const cached = cache.get(key);
+  if (cached && cached.until > now && !options.force) {
+    return cached.promise;
+  }
+  const url = buildCampaignFormUrl(options.apiBaseUrl ?? API_BASE_URL, request);
+  const headers = options.headers ?? getAuthHeaders();
+  const retries = Math.max(0, options.retries ?? DEFAULT_RETRIES);
+  const promise = (async () => {
+    let lastError;
+    for (let attempt = 0; attempt <= retries; attempt++) {
+      try {
+        return await requestOnce(url, headers);
+      } catch (error2) {
+        lastError = error2;
+        if (attempt === retries || !shouldRetry(error2)) break;
+        await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS * 2 ** attempt));
       }
     }
-  }
-  return mapping;
-}
-async function getContactValues$2(contactId) {
-  const url = `${API_BASE_URL}/api/campaign-contact/${contactId}`;
-  const response = await fetch(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$1(customerId) {
-  const url = `${API_BASE_URL}/api/campaign-fields/0?source=customer&customerId=${encodeURIComponent(String(customerId))}`;
-  const response = await fetch(url, {
-    method: "GET",
-    headers: getAuthHeaders(),
-    credentials: "omit"
+    throw lastError instanceof Error ? lastError : new Error("Erro ao buscar o formulário");
+  })();
+  cache.set(key, { promise, until: now + CAMPAIGN_FORM_CACHE_TTL_MS });
+  promise.then((form) => {
+    var _a2;
+    if (form.partial && ((_a2 = cache.get(key)) == null ? void 0 : _a2.promise) === promise) cache.delete(key);
+  }).catch(() => {
+    var _a2;
+    if (((_a2 = cache.get(key)) == null ? void 0 : _a2.promise) === promise) cache.delete(key);
   });
-  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;
+  return promise;
 }
-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())) {
+function normalizeFormKey(value) {
+  return String(value ?? "").normalize("NFC").trim().toLowerCase().replace(/\s+/g, " ");
+}
+function findFormValue(form, candidates) {
+  if (!(form == null ? void 0 : form.values)) {
+    return void 0;
+  }
+  const byNormalizedKey = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(form.values)) {
+    const normalized = stripAccents(normalizeFormKey(key));
+    if (!byNormalizedKey.has(normalized) && value !== void 0 && value !== null && String(value).trim() !== "") {
+      byNormalizedKey.set(normalized, String(value));
+    }
+  }
+  for (const candidate of candidates) {
+    const value = byNormalizedKey.get(stripAccents(normalizeFormKey(candidate)));
+    if (value !== void 0) {
       return value;
     }
   }
   return void 0;
 }
+function stripAccents(value) {
+  return value.normalize("NFD").replace(/[̀-ͯ]/g, "");
+}
 function formatPhoneValue(raw) {
   if (!raw) return "-";
   const digits = raw.replace(/\D/g, "");
@@ -48575,18 +48625,12 @@ function formatPhoneValue(raw) {
   return raw.trim();
 }
 function CallInfoDisplay() {
+  var _a2;
   const callInfo = clientSdkReactExports.useCallOperatorCurrentCallInfo();
-  useEffect(() => {
-    console.log("[CallInfoDisplay] Call info atualizado:", {
-      callInfo,
-      type: callInfo == null ? void 0 : callInfo.type,
-      hasCampaignInfo: (callInfo == null ? void 0 : callInfo.type) === "campaign",
-      info: (callInfo == null ? void 0 : callInfo.type) === "campaign" ? callInfo.info : null,
-      campaignContact: (callInfo == null ? void 0 : callInfo.type) === "campaign" ? callInfo.info.campaignContact : null
-    });
-  }, [callInfo]);
+  const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
+  const campaignContactPhoneId = ((_a2 = currentCall == null ? void 0 : currentCall.data) == null ? void 0 : _a2.campaignContactPhoneId) ?? null;
   if ((callInfo == null ? void 0 : callInfo.type) === "campaign") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(CampaignCallInfoDisplay, { campaignCallInfo: callInfo.info });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(CampaignCallInfoDisplay, { campaignCallInfo: callInfo.info, campaignContactPhoneId });
   }
   if (callInfo) {
     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)" }) });
@@ -48596,83 +48640,63 @@ function CallInfoDisplay() {
 function CampaignCallInfoDisplay(props) {
   const { campaign, campaignContact } = props.campaignCallInfo;
   const [contactData, setContactData] = useState({
-    finalData: {},
+    form: null,
     isLoading: false,
     error: null
   });
-  const [fetchedContactId, setFetchedContactId] = useState(null);
+  const [retry, setRetry] = useState({ key: null, n: 0 });
+  const request = useMemo(
+    () => campaignFormRequestFromCallInfo(props.campaignCallInfo, props.campaignContactPhoneId),
+    [props.campaignCallInfo, props.campaignContactPhoneId]
+  );
+  const requestKey = request ? campaignFormCacheKey(request) : null;
+  const requestRef = useRef(request);
+  requestRef.current = request;
+  const partialRefreshKeyRef = useRef(null);
   useEffect(() => {
-    if (!(campaignContact == null ? void 0 : campaignContact.id)) {
-      return;
-    }
-    if (fetchedContactId === campaignContact.id) {
+    const current = requestRef.current;
+    if (!current || !requestKey) {
+      setContactData({ form: null, isLoading: false, error: null });
       return;
     }
     let cancelled = false;
-    const fetchContactData = async () => {
-      setContactData({ finalData: {}, isLoading: true, error: null });
-      try {
-        const customer = campaignContact.customer;
-        let codeToNameMap = {};
-        let contactValues = {};
-        if ((customer == null ? void 0 : customer.id) && (customer == null ? void 0 : customer.formId)) {
-          [codeToNameMap, contactValues] = await Promise.all([
-            getCustomerCodeToNameMapping(customer.formId),
-            getCustomerContactValues$1(customer.id)
-          ]);
-        } else {
-          const config = await getCampaignConfig$2(campaignContact.id);
-          if (!config.campaignModelId) {
-            throw new Error("campaignModelId não encontrado");
-          }
-          [codeToNameMap, contactValues] = await Promise.all([
-            getCodeToNameMapping(config.campaignModelId),
-            getContactValues$2(campaignContact.id)
-          ]);
+    let refreshTimer = null;
+    setContactData({ form: null, isLoading: true, error: null });
+    fetchCampaignForm(current, { force: retry.key === requestKey && retry.n > 0 }).then((form) => {
+      if (!cancelled) {
+        setContactData({ form, isLoading: false, error: null });
+        if (form.partial && partialRefreshKeyRef.current !== requestKey) {
+          partialRefreshKeyRef.current = requestKey;
+          refreshTimer = setTimeout(() => setRetry((prev) => ({ key: requestKey, n: prev.n + 1 })), 3e3);
         }
-        const finalData = {};
-        Object.entries(contactValues).forEach(([code, value]) => {
-          if (code in codeToNameMap) {
-            finalData[codeToNameMap[code]] = value;
-          }
+      }
+    }).catch((error2) => {
+      if (!cancelled) {
+        console.error("[CampaignCallInfoDisplay] Erro ao buscar dados:", error2);
+        setContactData({
+          form: null,
+          isLoading: false,
+          error: error2 instanceof Error ? error2.message : "Erro ao buscar dados do contato"
         });
-        if (!cancelled) {
-          setContactData({
-            finalData,
-            isLoading: false,
-            error: null
-          });
-          setFetchedContactId(campaignContact.id);
-        }
-      } catch (error2) {
-        if (!cancelled) {
-          console.error("[CampaignCallInfoDisplay] Erro ao buscar dados:", error2);
-          const errorMessage = error2 instanceof Error ? error2.message : "Erro ao buscar dados do contato";
-          setContactData({
-            finalData: {},
-            isLoading: false,
-            error: errorMessage
-          });
-        }
       }
-    };
-    void fetchContactData();
+    });
     return () => {
       cancelled = true;
+      if (refreshTimer) clearTimeout(refreshTimer);
     };
-  }, [campaignContact, campaignContact == null ? void 0 : campaignContact.id, fetchedContactId]);
+  }, [requestKey, retry]);
   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: "Decisor", keys: ["DECISOR", "CONTATO", "NOME"], icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: "text-sm" }) },
+      { label: "Empresa", keys: ["EMPRESA", "RAZAO SOCIAL", "RAZÃO SOCIAL", "CLIENTE"], icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FiBriefcase, { className: "text-sm" }) },
+      { label: "Dívida ativa", keys: ["DIVIDA ATIVA", "DÍVIDA ATIVA", "VALOR TOTAL DEVIDO"], 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 rawValue = (field.label === "Telefone" ? findFormValue(contactData.form, field.keys) ?? (campaignContact == null ? void 0 : campaignContact.phoneNumber) : findFormValue(contactData.form, field.keys)) || "";
       const display2 = field.label === "Telefone" ? formatPhoneValue(rawValue) : (rawValue || "-").toString().trim() || "-";
       return {
         ...field,
@@ -48680,7 +48704,7 @@ function CampaignCallInfoDisplay(props) {
         isEmpty: !rawValue
       };
     });
-  }, [campaignContact == null ? void 0 : campaignContact.phoneNumber, contactData.finalData, prioritizedFields]);
+  }, [campaignContact == null ? void 0 : campaignContact.phoneNumber, contactData.form, 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: [
@@ -48696,7 +48720,7 @@ function CampaignCallInfoDisplay(props) {
         "Em chamada"
       ] })
     ] }),
-    contactData.isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 p-4 text-center", children: [
+    contactData.isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 p-4 text-center", role: "status", 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..." })
     ] }),
@@ -48706,10 +48730,11 @@ function CampaignCallInfoDisplay(props) {
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-semibold text-rose-700", children: "Erro ao carregar dados" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ml-6 text-[11px] text-rose-600", children: contactData.error }),
-      contactData.error.includes("Muitas requisições") && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
-          onClick: () => setFetchedContactId(null),
+          type: "button",
+          onClick: () => setRetry((prev) => ({ key: requestKey, n: prev.n + 1 })),
           className: "mt-2 ml-6 text-[11px] font-semibold text-rose-700 underline hover:text-rose-800",
           children: "Tentar novamente"
         }
@@ -50237,13 +50262,13 @@ function extractExtension(number) {
     return {};
   }
   var numberWithoutExtension = number.slice(0, start2);
-  var matches = number.match(EXTN_PATTERN);
+  var matches2 = number.match(EXTN_PATTERN);
   var i2 = 1;
-  while (i2 < matches.length) {
-    if (matches[i2]) {
+  while (i2 < matches2.length) {
+    if (matches2[i2]) {
       return {
         number: numberWithoutExtension,
-        ext: matches[i2]
+        ext: matches2[i2]
       };
     }
     i2++;
@@ -51141,6 +51166,266 @@ function buildDialPlan(rawValue, defaultPrefix = DEFAULT_COUNTRY_PREFIX) {
   const differs = Boolean(e164) && onlyDigits(e164 ?? "") !== typedDigits;
   return { raw, display: display2, e164, dialDisplay, isValid: isValid2, differs };
 }
+const QUERIES = {
+  fine: "(pointer: fine)",
+  coarse: "(pointer: coarse)",
+  hover: "(hover: hover)"
+};
+function matches(query) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return null;
+  }
+  try {
+    return window.matchMedia(query).matches;
+  } catch {
+    return null;
+  }
+}
+function getInputProfile() {
+  const fine = matches(QUERIES.fine);
+  const coarse = matches(QUERIES.coarse);
+  const hover = matches(QUERIES.hover);
+  const pointer = coarse ? "coarse" : fine ? "fine" : "unknown";
+  const touchLike = pointer === "coarse" || pointer !== "fine" && hover === false;
+  return { pointer, hover: hover === true, touchLike };
+}
+function resolveDensity(density, profile) {
+  if (density === "compact" || density === "comfortable") {
+    return density;
+  }
+  return profile.touchLike ? "comfortable" : "compact";
+}
+function parseDensity(value) {
+  const normalized = (value ?? "").trim().toLowerCase();
+  if (normalized === "compact" || normalized === "compacta" || normalized === "compacto") return "compact";
+  if (normalized === "comfortable" || normalized === "confortavel" || normalized === "confortável" || normalized === "touch") return "comfortable";
+  if (normalized === "auto") return "auto";
+  return void 0;
+}
+function useInputProfile() {
+  const [profile, setProfile] = useState(() => getInputProfile());
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const update2 = () => setProfile(getInputProfile());
+    const lists = [];
+    for (const query of Object.values(QUERIES)) {
+      try {
+        const list = window.matchMedia(query);
+        if (typeof list.addEventListener === "function") {
+          list.addEventListener("change", update2);
+        } else if (typeof list.addListener === "function") {
+          list.addListener(update2);
+        }
+        lists.push(list);
+      } catch {
+      }
+    }
+    update2();
+    return () => {
+      for (const list of lists) {
+        if (typeof list.removeEventListener === "function") {
+          list.removeEventListener("change", update2);
+        } else if (typeof list.removeListener === "function") {
+          list.removeListener(update2);
+        }
+      }
+    };
+  }, []);
+  return profile;
+}
+const CLICK_TO_CALL_EVENT = "callix:click-to-call";
+function presenceFromOperatorState(state) {
+  if (!state) {
+    return "unknown";
+  }
+  switch (state) {
+    case "idle":
+      return "available";
+    case "onBreak":
+      return "on_break";
+    case "afterCall":
+    case "manualCallFailed":
+      return "after_call";
+    case "offline":
+    case "stopped":
+    case "startupError":
+    case "startup.error":
+    case "networkDown":
+      return "offline";
+    case "starting":
+      return "unknown";
+    case "callRinging":
+    case "manualCallSetup":
+    case "manualCallRinging":
+    case "callInProgress":
+      return "in_call";
+    default:
+      return /call|ringing|dial/i.test(state) ? "in_call" : "unknown";
+  }
+}
+function canDispatchTo(presence) {
+  return presence === "available" || presence === "on_break";
+}
+const REQUEST_TIMEOUT_MS = 1e4;
+const DEFAULT_PRESENCE_TTL_SECONDS = 45;
+function withTimeout(signal) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+  if (signal) {
+    if (signal.aborted) {
+      controller.abort();
+    } else {
+      signal.addEventListener("abort", () => controller.abort(), { once: true });
+    }
+  }
+  return { signal: controller.signal, clear: () => clearTimeout(timer) };
+}
+async function pollClickToCall(options) {
+  const { signal, clear } = withTimeout(options.signal);
+  try {
+    const response = await fetch(`${options.apiBaseUrl}/api/click-to-call/poll`, {
+      method: "POST",
+      headers: options.headers,
+      body: JSON.stringify({ state: options.state ?? null, claim: options.claim }),
+      credentials: "omit",
+      signal
+    });
+    if (!response.ok) {
+      let code = null;
+      try {
+        const data2 = await response.json();
+        code = typeof (data2 == null ? void 0 : data2.error) === "string" ? data2.error : null;
+      } catch {
+      }
+      return { ok: false, status: response.status, code };
+    }
+    const data = await response.json();
+    return {
+      ok: true,
+      presence: data.presence ?? "unknown",
+      task: data.task && typeof data.task === "object" && typeof data.task.phone === "string" ? data.task : null,
+      pollIntervalMs: typeof data.pollIntervalMs === "number" ? data.pollIntervalMs : 0,
+      presenceTtlSeconds: typeof data.presenceTtlSeconds === "number" && data.presenceTtlSeconds > 0 ? data.presenceTtlSeconds : DEFAULT_PRESENCE_TTL_SECONDS
+    };
+  } finally {
+    clear();
+  }
+}
+async function ackClickToCall(options) {
+  const { signal, clear } = withTimeout();
+  try {
+    const response = await fetch(`${options.apiBaseUrl}/api/click-to-call/${encodeURIComponent(options.taskId)}`, {
+      method: "PATCH",
+      headers: options.headers,
+      body: JSON.stringify({ status: options.status, error: options.error, retry: options.retry === true }),
+      credentials: "omit",
+      keepalive: true,
+      signal
+    });
+    if (!response.ok) {
+      let code = null;
+      try {
+        const data2 = await response.json();
+        code = typeof (data2 == null ? void 0 : data2.error) === "string" ? data2.error : null;
+      } catch {
+      }
+      return { ok: false, status: response.status, code };
+    }
+    const data = await response.json();
+    return { ok: true, task: data.task ?? null };
+  } finally {
+    clear();
+  }
+}
+function reportClickToCallOffline(config) {
+  try {
+    void fetch(`${config.apiBaseUrl}/api/click-to-call/poll`, {
+      method: "POST",
+      headers: config.headers,
+      body: JSON.stringify({ state: "offline", claim: false }),
+      credentials: "omit",
+      keepalive: true
+    }).catch(() => void 0);
+  } catch {
+  }
+}
+const WORKER_SOURCE = `
+let timer = null;
+self.onmessage = (event) => {
+  const interval = Number(event && event.data && event.data.interval) || 0;
+  if (timer) { clearInterval(timer); timer = null; }
+  if (interval > 0) { timer = setInterval(() => self.postMessage('tick'), interval); }
+};
+`;
+function createBackgroundTicker(callback, intervalMs) {
+  let current = Math.max(250, Math.round(intervalMs));
+  let fallbackTimer = null;
+  let worker = null;
+  let objectUrl = null;
+  let stopped = false;
+  const startFallback = () => {
+    if (stopped) return;
+    if (fallbackTimer) clearInterval(fallbackTimer);
+    fallbackTimer = setInterval(callback, current);
+  };
+  try {
+    if (typeof Worker !== "undefined" && typeof Blob !== "undefined" && typeof URL !== "undefined" && URL.createObjectURL) {
+      objectUrl = URL.createObjectURL(new Blob([WORKER_SOURCE], { type: "application/javascript" }));
+      worker = new Worker(objectUrl);
+      worker.onmessage = () => {
+        if (!stopped) callback();
+      };
+      worker.onerror = () => {
+        worker == null ? void 0 : worker.terminate();
+        worker = null;
+        startFallback();
+      };
+      worker.postMessage({ interval: current });
+    } else {
+      startFallback();
+    }
+  } catch {
+    worker = null;
+    startFallback();
+  }
+  return {
+    setInterval(ms2) {
+      if (stopped) return;
+      const next = Math.max(250, Math.round(ms2));
+      if (next === current) return;
+      current = next;
+      if (worker) {
+        worker.postMessage({ interval: current });
+      } else {
+        startFallback();
+      }
+    },
+    stop() {
+      stopped = true;
+      if (worker) {
+        worker.terminate();
+        worker = null;
+      }
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+        objectUrl = null;
+      }
+      if (fallbackTimer) {
+        clearInterval(fallbackTimer);
+        fallbackTimer = null;
+      }
+    }
+  };
+}
+function nationalDigitsFromE164(e164) {
+  const digits = (e164 ?? "").replace(/\D/g, "");
+  if (digits.startsWith("55") && (digits.length === 12 || digits.length === 13)) {
+    return digits.slice(2);
+  }
+  return e164.startsWith("+") ? `+${digits}` : digits;
+}
 const DEFAULT_DIALER_DIMENSIONS = { width: 448, height: 640 };
 const MIN_DIALER_WIDTH = 280;
 const MIN_DIALER_HEIGHT = 420;
@@ -51344,6 +51629,17 @@ function FloatingDialer({
     }
     prevAuthRef.current = isAuthenticated;
   }, [isAuthenticated]);
+  useEffect(() => {
+    const onClickToCall = (event) => {
+      const task = event.detail;
+      setIsOpen(true);
+      if (task == null ? void 0 : task.phone) {
+        updateDialValue(nationalDigitsFromE164(task.phone).slice(0, MAX_DIAL_LENGTH));
+      }
+    };
+    window.addEventListener(CLICK_TO_CALL_EVENT, onClickToCall);
+    return () => window.removeEventListener(CLICK_TO_CALL_EVENT, onClickToCall);
+  }, [updateDialValue]);
   const prevLoginSignalRef = useRef(false);
   useEffect(() => {
     const hasLoginSignal = !isAuthenticated && Boolean(loginConfirmation || sessionError);
@@ -51845,7 +52141,8 @@ function AuthenticatedDialer({
     typeof window !== "undefined" ? window.innerWidth <= 640 : false
   );
   const isMobileVariant = variant === "mobile";
-  const isMobileLayout = isMobileVariant || isMobileViewport;
+  const inputProfile = useInputProfile();
+  const isMobileLayout = isMobileVariant || isMobileViewport && inputProfile.touchLike;
   const breaks = useSignal(operator == null ? void 0 : operator.breaks) || [];
   const { goOnBreak, goOffBreak } = useOperatorBreak();
   const sanitizedDialValue = useMemo(() => dialValue.slice(0, MAX_DIAL_LENGTH), [dialValue]);
@@ -51879,11 +52176,16 @@ function AuthenticatedDialer({
     [becomeAvailable]
   );
   useEffect(() => {
-    if (!hasRequestedAvailabilityRef.current) {
-      hasRequestedAvailabilityRef.current = true;
-      void requestAvailability("Nao foi possivel ficar disponivel automaticamente.");
+    if (hasRequestedAvailabilityRef.current) {
+      return;
     }
-  }, [requestAvailability]);
+    hasRequestedAvailabilityRef.current = true;
+    const busyStates = ["onBreak", "manualCallSetup", "manualCallRinging", "manualCallFailed", "callRinging", "callInProgress", "afterCall"];
+    if (callState && busyStates.includes(callState)) {
+      return;
+    }
+    void requestAvailability("Nao foi possivel ficar disponivel automaticamente.");
+  }, [requestAvailability, callState]);
   useEffect(() => {
     if (callState === "idle") {
       setAvailabilityError(null);
@@ -51968,8 +52270,14 @@ function AuthenticatedDialer({
     }, 8e3);
     return () => window.clearTimeout(timer);
   }, [callState]);
+  const normalizedNumberRef = useRef(normalizedNumber);
+  normalizedNumberRef.current = normalizedNumber;
   useEffect(() => {
     if (callState === "manualCallRinging" || callState === "callInProgress") {
+      const dialed = normalizedNumberRef.current;
+      if (dialed) {
+        setLastDialedNumber((previous) => previous ?? dialed);
+      }
       setDialValue("");
     }
     if (callState === "idle") {
@@ -52368,6 +52676,16 @@ function AuthenticatedDialer({
       return newValue;
     });
   }, [setDialValue, cursorPosition]);
+  useEffect(() => {
+    const onClickToCall = (event) => {
+      const task = event.detail;
+      if (!(task == null ? void 0 : task.phone)) return;
+      setCallError(null);
+      setLastDialedNumber(task.phone);
+    };
+    window.addEventListener(CLICK_TO_CALL_EVENT, onClickToCall);
+    return () => window.removeEventListener(CLICK_TO_CALL_EVENT, onClickToCall);
+  }, []);
   const handleCall = useCallback(async () => {
     if (!isIdle && !isOnBreak) {
       return;
@@ -54056,30 +54374,65 @@ function historyPhoneDigits(item) {
   }
   return digits;
 }
+function normalizeSearchText(value) {
+  return (value ?? "").toString().normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/\s+/g, " ").trim();
+}
+function classifyHistoryQuery(query) {
+  const raw = (query ?? "").trim();
+  if (!raw) {
+    return { kind: "empty", digits: "", text: "" };
+  }
+  const digits = onlyDigits(raw);
+  const nonPhoneChars = raw.replace(/[\d\s()+\-.]/g, "");
+  if (digits.length >= 3 && nonPhoneChars.length === 0) {
+    return { kind: "phone", digits, text: normalizeSearchText(raw) };
+  }
+  return { kind: "text", digits, text: normalizeSearchText(raw) };
+}
+function historySearchHaystack(item) {
+  const parts = [
+    item.formattedPhone,
+    historyPhoneDigits(item),
+    item.callTypeLabel,
+    item.campaignName,
+    item.contactLabel,
+    item.qualificationName,
+    item.failureCauseLabel,
+    item.hangupCauseLabel,
+    item.formattedDate,
+    item.note,
+    item.protocol !== void 0 ? String(item.protocol) : void 0
+  ];
+  if (item.fields) {
+    for (const value of Object.values(item.fields)) {
+      if (value !== void 0 && value !== null) {
+        parts.push(String(value));
+      }
+    }
+  }
+  return normalizeSearchText(parts.filter(Boolean).join(" | "));
+}
+function itemMatchesHistoryQuery(item, query) {
+  if (query.kind === "empty") {
+    return true;
+  }
+  if (query.kind === "phone") {
+    return historyPhoneDigits(item).includes(query.digits) || onlyDigits(item.phoneNumber).includes(query.digits) || item.protocol !== void 0 && String(item.protocol).includes(query.digits);
+  }
+  const haystack = historySearchHaystack(item);
+  const terms = query.text.split(" ").filter(Boolean);
+  return terms.every((term) => haystack.includes(term));
+}
+function filterHistoryItems(items, query) {
+  const parsed = typeof query === "string" ? classifyHistoryQuery(query) : query;
+  if (parsed.kind === "empty") {
+    return items;
+  }
+  return items.filter((item) => itemMatchesHistoryQuery(item, parsed));
+}
 const DEFAULT_QUALIFICATION = "chamada sem qualificação";
+const SEARCH_DEBOUNCE_MS = 350;
 const DETAILS_TITLE = "Ver detalhes da chamada";
-async function fetchJson(url, headers) {
-  const response = await fetch(url, { method: "GET", headers, credentials: "omit" });
-  if (!response.ok) {
-    const body = await response.json().catch(() => ({}));
-    throw new Error(body.error || `Erro ${response.status}`);
-  }
-  return await response.json();
-}
-async function fetchCampaignForm(apiBaseUrl, contactId, headers) {
-  const config = await fetchJson(`${apiBaseUrl}/api/campaign-config/${contactId}`, headers);
-  if (!(config == null ? void 0 : config.campaignModelId)) {
-    throw new Error("Formulário da campanha não encontrado");
-  }
-  const [fields, values] = await Promise.all([
-    fetchJson(`${apiBaseUrl}/api/campaign-fields/${config.campaignModelId}`, headers),
-    fetchJson(`${apiBaseUrl}/api/campaign-contact/${contactId}`, headers)
-  ]);
-  return {
-    rows: Array.isArray(fields == null ? void 0 : fields.rows) ? fields.rows.filter((row) => Array.isArray(row) && row.length > 0) : [],
-    values: values && typeof values === "object" ? values : {}
-  };
-}
 function useRecordings(apiBaseUrl, getAuthHeaders2) {
   const [states, setStates] = useState({});
   const statesRef = useRef(states);
@@ -54335,7 +54688,7 @@ function CallDetailsSheet({
   onCall,
   onWhatsApp
 }) {
-  const [form, setForm] = useState({ status: "idle", rows: [], values: {} });
+  const [form, setForm] = useState({ status: "idle", form: null });
   const closeButtonRef = useRef(null);
   const isCampaign = item.callType === "campaign";
   useEffect(() => {
@@ -54361,65 +54714,79 @@ function CallDetailsSheet({
   }, [onClose]);
   useEffect(() => {
     if (!isCampaign || !item.campaignContactId) {
-      setForm({ status: "idle", rows: [], values: {} });
+      setForm({ status: "idle", form: null });
       return;
     }
     let cancelled = false;
-    setForm({ status: "loading", rows: [], values: {} });
-    fetchCampaignForm(apiBaseUrl, item.campaignContactId, getAuthHeaders2()).then((result2) => {
+    setForm({ status: "loading", form: null });
+    fetchCampaignForm(
+      {
+        source: "campaign",
+        id: item.campaignContactId,
+        campaignId: item.campaignId ?? null,
+        signature: item.formSignature ?? null,
+        expiresAt: item.formExpiresAt ?? null
+      },
+      { apiBaseUrl, headers: getAuthHeaders2(), retries: 0 }
+    ).then((result2) => {
       if (!cancelled) {
-        setForm({ status: "ready", rows: result2.rows, values: result2.values });
+        setForm({ status: "ready", form: result2 });
       }
     }).catch((error2) => {
       if (!cancelled) {
         console.warn("[CallHistoryList] Formulário da campanha indisponível, usando campos do histórico:", error2);
-        setForm({
-          status: "error",
-          rows: [],
-          values: {},
-          error: error2 instanceof Error ? error2.message : "Erro ao carregar formulário"
-        });
+        setForm({ status: "error", form: null, error: error2 instanceof Error ? error2.message : "Erro ao carregar formulário" });
       }
     });
     return () => {
       cancelled = true;
     };
-  }, [apiBaseUrl, getAuthHeaders2, isCampaign, item.campaignContactId, item.id]);
+  }, [apiBaseUrl, getAuthHeaders2, isCampaign, item.campaignContactId, item.campaignId, item.id]);
   const fallbackFields = useMemo(
     () => Object.entries(item.fields ?? {}).filter(
       ([key, value]) => value !== void 0 && value !== null && String(value).trim() !== "" && !isInternalFieldKey(key)
     ),
     [item.fields]
   );
+  const fallbackByKey = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const [key, value] of Object.entries(item.fields ?? {})) {
+      if (value === void 0 || value === null || String(value).trim() === "") continue;
+      map.set(stripAccents(normalizeFormKey(key)), String(value));
+    }
+    return map;
+  }, [item.fields]);
   const resolveFieldValue = (field) => {
-    var _a2;
-    const byCode = form.values[field.code];
-    if (byCode !== void 0 && byCode !== null && String(byCode).trim() !== "") {
-      return String(byCode);
-    }
-    const byName = (_a2 = item.fields) == null ? void 0 : _a2[field.name];
-    if (byName !== void 0 && byName !== null && String(byName).trim() !== "") {
-      return String(byName);
+    if (field.value && field.value.trim() !== "") {
+      return field.value;
     }
-    return "-";
+    const byName = fallbackByKey.get(stripAccents(normalizeFormKey(field.label))) ?? fallbackByKey.get(stripAccents(normalizeFormKey(field.key)));
+    return byName ?? "-";
   };
-  const hasFormRows = form.status === "ready" && form.rows.length > 0;
+  const formRows = form.status === "ready" && form.form ? form.form.rows && form.form.rows.length > 0 ? form.form.rows : form.form.fields.length > 0 ? [form.form.fields] : [] : [];
+  const hasFormRows = formRows.length > 0;
   let formContent;
-  if (form.status === "loading") {
+  if (form.status === "loading" && fallbackFields.length === 0) {
     formContent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details-loading", role: "status", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-spinner fa-spin", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Carregando formulário..." })
     ] });
   } else if (hasFormRows) {
-    formContent = form.rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-form-row", children: row.map((field, fieldIndex) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details-field", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-field-label", title: field.name, children: field.name }),
+    formContent = formRows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-form-row", children: row.map((field, fieldIndex) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details-field", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-field-label", title: field.label, children: field.label }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-field-value", children: resolveFieldValue(field) })
-    ] }, `${rowIndex}-${fieldIndex}-${field.code}`)) }, rowIndex));
+    ] }, `${rowIndex}-${fieldIndex}-${field.key}`)) }, rowIndex));
   } else if (fallbackFields.length > 0) {
-    formContent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-form-row", children: fallbackFields.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details-field", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-field-label", title: key, children: key }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-field-value", children: value })
-    ] }, key)) });
+    formContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      form.status === "loading" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details-loading details-loading-inline", role: "status", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-spinner fa-spin", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Atualizando formulário..." })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-form-row", children: fallbackFields.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details-field", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-field-label", title: key, children: key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-field-value", children: value })
+      ] }, key)) })
+    ] });
   } else {
     formContent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details-empty", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-user", "aria-hidden": "true" }),
@@ -54528,12 +54895,52 @@ function CallHistoryList({
   onCall,
   onWhatsApp,
   apiBaseUrl,
-  getAuthHeaders: getAuthHeaders2
+  getAuthHeaders: getAuthHeaders2,
+  query,
+  onQueryChange,
+  isSearching = false,
+  searchHint = null
 }) {
   const [openPlayerId, setOpenPlayerId] = useState(null);
   const [selectedId, setSelectedId] = useState(null);
   const recordings = useRecordings(apiBaseUrl, getAuthHeaders2);
   const { retain } = recordings;
+  const [draft, setDraft] = useState(query ?? "");
+  const lastEmittedRef = useRef(query ?? "");
+  const debounceRef = useRef(null);
+  useEffect(() => {
+    const external = query ?? "";
+    if (external !== lastEmittedRef.current) {
+      lastEmittedRef.current = external;
+      setDraft(external);
+    }
+  }, [query]);
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const handleDraftChange = useCallback(
+    (value) => {
+      setDraft(value);
+      if (!onQueryChange) return;
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        lastEmittedRef.current = value;
+        onQueryChange(value);
+      }, SEARCH_DEBOUNCE_MS);
+    },
+    [onQueryChange]
+  );
+  const clearSearch = useCallback(() => {
+    setDraft("");
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    lastEmittedRef.current = "";
+    onQueryChange == null ? void 0 : onQueryChange("");
+  }, [onQueryChange]);
+  const parsedQuery = useMemo(() => classifyHistoryQuery(draft), [draft]);
+  const visibleItems = useMemo(() => filterHistoryItems(items, parsedQuery), [items, parsedQuery]);
+  const hasQuery = parsedQuery.kind !== "empty";
   const dayLabels = useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     const labels = {};
@@ -54583,6 +54990,28 @@ function CallHistoryList({
       /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "header-title", children: "Recentes" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "history-refresh-btn", onClick: onRefresh, disabled: isLoading, "aria-label": "Atualizar histórico", children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: `fas fa-arrows-rotate ${isLoading ? "fa-spin" : ""}`, "aria-hidden": "true" }) })
     ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "history-search-bar", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "history-search", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-magnifying-glass history-search-icon", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "search",
+            className: "history-search-input",
+            placeholder: "Buscar número, campanha, cliente...",
+            "aria-label": "Buscar no histórico",
+            autoComplete: "off",
+            autoCapitalize: "none",
+            autoCorrect: "off",
+            spellCheck: false,
+            value: draft,
+            onChange: (event) => handleDraftChange(event.target.value)
+          }
+        ),
+        isSearching ? /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-spinner fa-spin history-search-spinner", "aria-hidden": "true", title: "Buscando..." }) : draft ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "history-search-clear", onClick: clearSearch, "aria-label": "Limpar busca", children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-xmark", "aria-hidden": "true" }) }) : null
+      ] }),
+      hasQuery && searchHint && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "history-search-hint", children: searchHint })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-history-list", id: "callHistoryList", children: isLoading && items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "history-loading", role: "status", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-spinner fa-spin", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Carregando..." })
@@ -54593,7 +55022,18 @@ function CallHistoryList({
     ] }) : items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "history-empty", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-phone-slash", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Nenhuma ligação recente" })
-    ] }) : items.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ] }) : visibleItems.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "history-empty history-empty-search", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-magnifying-glass", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+        "Nenhuma chamada encontrada para ",
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("strong", { children: [
+          "“",
+          draft.trim(),
+          "”"
+        ] })
+      ] }),
+      isSearching && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "history-search-status", children: "Buscando no servidor..." })
+    ] }) : visibleItems.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       HistoryRow,
       {
         item,
@@ -56061,9 +56501,55 @@ function DebugPanel({ onClose }) {
   ] });
 }
 const VIEWPORT_MARGIN$1 = 16;
+const BASE_WIDTH = 520;
+const FALLBACK_HEIGHT = 600;
+const FORM_SCALE_STORAGE_KEY = "callix_dialer_form_scale";
+const FORM_SCALE_MIN = 70;
+const FORM_SCALE_MAX = 180;
+const FORM_SCALE_STEP = 10;
+const FORM_SCALE_DEFAULT = 100;
+const CONTROL_MIN_PX = 28;
+const CONTROL_BUTTON_CLASS = "flex flex-shrink-0 items-center justify-center rounded-md transition hover:bg-black hover:bg-opacity-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function clamp$1(value, min2, max2) {
   return Math.min(Math.max(value, min2), max2);
 }
+function clampFormScale(percent) {
+  if (!Number.isFinite(percent)) return FORM_SCALE_DEFAULT;
+  const rounded = Math.round(percent / FORM_SCALE_STEP) * FORM_SCALE_STEP;
+  return clamp$1(rounded, FORM_SCALE_MIN, FORM_SCALE_MAX);
+}
+function readStoredFormScale() {
+  if (typeof window === "undefined") return FORM_SCALE_DEFAULT;
+  try {
+    const raw = window.localStorage.getItem(FORM_SCALE_STORAGE_KEY);
+    if (raw === null || raw.trim() === "") return FORM_SCALE_DEFAULT;
+    return clampFormScale(Number(raw));
+  } catch {
+    return FORM_SCALE_DEFAULT;
+  }
+}
+function storeFormScale(percent) {
+  try {
+    window.localStorage.setItem(FORM_SCALE_STORAGE_KEY, String(percent));
+  } catch {
+  }
+}
+function detectZoomSupport() {
+  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return true;
+  try {
+    if (!CSS.supports("zoom", "1.5")) return false;
+  } catch {
+    return true;
+  }
+  const firefox = typeof navigator !== "undefined" ? /\bFirefox\/(\d+)/.exec(navigator.userAgent) : null;
+  if (firefox && Number(firefox[1]) < 131) return false;
+  return true;
+}
+function readViewport() {
+  if (typeof window === "undefined") return { width: 1024, height: 768 };
+  return { width: window.innerWidth, height: window.innerHeight };
+}
 function formatDuration(seconds) {
   const hrs = Math.floor(seconds / 3600);
   const mins = Math.floor(seconds % 3600 / 60);
@@ -56073,147 +56559,91 @@ function formatDuration(seconds) {
   }
   return `${mins}:${secs.toString().padStart(2, "0")}`;
 }
-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$1(contactId) {
-  const url = `${API_BASE_URL}/api/campaign-config/${contactId}`;
-  return fetchWithRetry(url, {
-    method: "GET",
-    headers: getAuthHeaders(),
-    credentials: "omit"
-  });
-}
-async function getCampaignFields(campaignModelId) {
-  const url = `${API_BASE_URL}/api/campaign-fields/${campaignModelId}`;
-  const json = await fetchWithRetry(url, {
-    method: "GET",
-    headers: getAuthHeaders(),
-    credentials: "omit"
-  });
-  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");
-    return {
-      rows: [],
-      labelField: null,
-      phoneFields: []
-    };
-  }
-  return json;
-}
-async function getCustomerFields(formId) {
-  const url = `${API_BASE_URL}/api/campaign-contact/0?source=customer&formId=${encodeURIComponent(String(formId))}`;
-  const json = await fetchWithRetry(url, {
-    method: "GET",
-    headers: getAuthHeaders(),
-    credentials: "omit"
-  });
-  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");
-    return { rows: [], labelField: null, phoneFields: [] };
-  }
-  return json;
-}
-async function getContactValues$1(contactId) {
-  const url = `${API_BASE_URL}/api/campaign-contact/${contactId}`;
-  return fetchWithRetry(url, {
-    method: "GET",
-    headers: getAuthHeaders(),
-    credentials: "omit"
-  });
-}
-async function getCustomerContactValues(customerId) {
-  const url = `${API_BASE_URL}/api/campaign-fields/0?source=customer&customerId=${encodeURIComponent(String(customerId))}`;
-  return fetchWithRetry(url, {
-    method: "GET",
-    headers: getAuthHeaders(),
-    credentials: "omit"
-  });
+function gridColsFor(count) {
+  if (count === 2) return "grid-cols-2";
+  if (count === 3) return "grid-cols-3";
+  if (count === 4) return "grid-cols-4";
+  if (count >= 5) return "grid-cols-5";
+  return "grid-cols-1";
 }
 function DraggableClientInfoModal({
   isOpen,
   campaignCallInfo,
+  campaignContactPhoneId,
   callDuration,
   isCallActive,
-  onClose
+  onClose,
+  portalTarget
 }) {
   const containerRef = useRef(null);
   const pointerRef = useRef({ pointerId: null, offsetX: 0, offsetY: 0 });
   const dragMovedRef = useRef(false);
+  const focusWithinRef = useRef(false);
+  const previouslyFocusedRef = useRef(null);
+  const titleId = useId();
   const [position2, setPosition] = useState({ x: 100, y: 100 });
   const [isDragging, setIsDragging] = useState(false);
-  const [contactData, setContactData] = useState({});
-  const [fieldRows, setFieldRows] = useState([]);
+  const [viewport, setViewport] = useState(readViewport);
+  const zoomSupported = useMemo(detectZoomSupport, []);
+  const [scalePercent, setScalePercent] = useState(readStoredFormScale);
+  const [announcement, setAnnouncement] = useState("");
+  const scale = zoomSupported ? scalePercent / 100 : 1;
+  const scaleRef = useRef(scale);
+  scaleRef.current = scale;
+  const [form, setForm] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error2, setError] = useState(null);
-  const [fetchedContactId, setFetchedContactId] = useState(null);
+  const [retry, setRetry] = useState({ key: null, n: 0 });
   const campaignContact = campaignCallInfo == null ? void 0 : campaignCallInfo.campaignContact;
-  const clampPositionToViewport = useCallback((proposed) => {
-    if (typeof window === "undefined") {
-      return proposed;
-    }
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const element = containerRef.current;
-    const width = (element == null ? void 0 : element.offsetWidth) ?? 500;
-    const height = (element == null ? void 0 : element.offsetHeight) ?? 600;
-    const minX = VIEWPORT_MARGIN$1;
-    const minY = VIEWPORT_MARGIN$1;
-    const maxX = Math.max(minX, viewportWidth - width - VIEWPORT_MARGIN$1);
-    const maxY = Math.max(minY, viewportHeight - height - VIEWPORT_MARGIN$1);
+  const request = useMemo(
+    () => campaignFormRequestFromCallInfo(campaignCallInfo, campaignContactPhoneId),
+    [campaignCallInfo, campaignContactPhoneId]
+  );
+  const requestKey = request ? campaignFormCacheKey(request) : null;
+  const requestRef = useRef(request);
+  requestRef.current = request;
+  const partialRefreshKeyRef = useRef(null);
+  const measure = useCallback(() => {
+    var _a2;
+    const rect = (_a2 = containerRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+    const currentScale = scaleRef.current;
     return {
-      x: clamp$1(proposed.x, minX, maxX),
-      y: clamp$1(proposed.y, minY, maxY)
+      width: rect && rect.width > 0 ? rect.width : BASE_WIDTH * currentScale,
+      height: rect && rect.height > 0 ? rect.height : FALLBACK_HEIGHT * currentScale
     };
   }, []);
-  useEffect(() => {
+  const clampPositionToViewport = useCallback(
+    (proposed) => {
+      if (typeof window === "undefined") {
+        return proposed;
+      }
+      const { width, height } = measure();
+      const minX = VIEWPORT_MARGIN$1;
+      const minY = VIEWPORT_MARGIN$1;
+      const maxX = Math.max(minX, window.innerWidth - width - VIEWPORT_MARGIN$1);
+      const maxY = Math.max(minY, window.innerHeight - height - VIEWPORT_MARGIN$1);
+      return {
+        x: clamp$1(proposed.x, minX, maxX),
+        y: clamp$1(proposed.y, minY, maxY)
+      };
+    },
+    [measure]
+  );
+  useIsomorphicLayoutEffect(() => {
     if (isOpen && typeof window !== "undefined") {
-      const element = containerRef.current;
-      const width = (element == null ? void 0 : element.offsetWidth) ?? 500;
-      const height = (element == null ? void 0 : element.offsetHeight) ?? 600;
+      setViewport(readViewport());
+      const { width, height } = measure();
       const centerX = (window.innerWidth - width) / 2;
       const centerY = (window.innerHeight - height) / 2;
       setPosition(clampPositionToViewport({ x: centerX, y: centerY }));
     }
-  }, [isOpen, clampPositionToViewport]);
+  }, [isOpen, measure, clampPositionToViewport]);
   useEffect(() => {
     if (!isOpen || typeof window === "undefined") {
       return;
     }
     const handleViewportChange = () => {
+      setViewport(readViewport());
       setPosition((prev) => clampPositionToViewport(prev));
     };
     window.addEventListener("resize", handleViewportChange);
@@ -56223,75 +56653,72 @@ function DraggableClientInfoModal({
       window.removeEventListener("orientationchange", handleViewportChange);
     };
   }, [isOpen, clampPositionToViewport]);
+  const keepInsideViewport = useCallback(() => {
+    setPosition((prev) => {
+      const next = clampPositionToViewport(prev);
+      return next.x === prev.x && next.y === prev.y ? prev : next;
+    });
+  }, [clampPositionToViewport]);
   useEffect(() => {
-    if (!(campaignContact == null ? void 0 : campaignContact.id)) {
+    if (!isOpen) {
       return;
     }
-    if (fetchedContactId === campaignContact.id) {
+    keepInsideViewport();
+  }, [isOpen, scalePercent, keepInsideViewport]);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!isOpen || !element || typeof ResizeObserver === "undefined") {
       return;
     }
-    let cancelled = false;
-    const fetchContactData = async () => {
-      setIsLoading(true);
+    const observer = new ResizeObserver(() => keepInsideViewport());
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [isOpen, keepInsideViewport]);
+  useEffect(() => {
+    const current = requestRef.current;
+    if (!current || !requestKey) {
+      setForm(null);
       setError(null);
-      try {
-        const customer = campaignContact.customer;
-        console.log("[DraggableClientInfoModal] Verificando customer em campaignContact:", customer);
-        let campaignFields;
-        let contactValues;
-        if ((customer == null ? void 0 : customer.id) && (customer == null ? void 0 : customer.formId)) {
-          console.log("[DraggableClientInfoModal] Modo CUSTOMER: carregando form-rows (formId) e form-data (customerId)");
-          [campaignFields, contactValues] = await Promise.all([
-            getCustomerFields(customer.formId),
-            getCustomerContactValues(customer.id)
-          ]);
-        } else {
-          console.log("[DraggableClientInfoModal] Modo CAMPANHA: buscando config, campos e valores");
-          const config = await getCampaignConfig$1(campaignContact.id);
-          console.log("[DraggableClientInfoModal] Config recebida:", config);
-          if (!config.campaignModelId) {
-            throw new Error("campaignModelId não encontrado");
-          }
-          [campaignFields, contactValues] = await Promise.all([
-            getCampaignFields(config.campaignModelId),
-            getContactValues$1(campaignContact.id)
-          ]);
-        }
-        console.log("[DraggableClientInfoModal] Campos recebidos:", campaignFields);
-        console.log("[DraggableClientInfoModal] Valores recebidos:", contactValues);
-        if (!cancelled) {
-          console.log("[DraggableClientInfoModal] ✅ Dados carregados com sucesso");
-          setContactData(contactValues);
-          setFieldRows(campaignFields.rows || []);
-          setFetchedContactId(campaignContact.id);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          console.error("[DraggableClientInfoModal] ❌ Erro ao buscar dados:", err);
-          const errorMessage = err instanceof Error ? err.message : "Erro ao buscar dados do contato";
-          setError(errorMessage);
-          setIsLoading(false);
+      setIsLoading(false);
+      return;
+    }
+    let cancelled = false;
+    let refreshTimer = null;
+    setIsLoading(true);
+    setError(null);
+    fetchCampaignForm(current, { force: retry.key === requestKey && retry.n > 0 }).then((result2) => {
+      if (!cancelled) {
+        console.log("[DraggableClientInfoModal] ✅ Formulário carregado:", result2.valuesSource, result2.layoutSource, result2.fields.length, "campos", result2.partial ? "(parcial)" : "");
+        setForm(result2);
+        setIsLoading(false);
+        if (result2.partial && partialRefreshKeyRef.current !== requestKey) {
+          partialRefreshKeyRef.current = requestKey;
+          refreshTimer = setTimeout(() => setRetry((prev) => ({ key: requestKey, n: prev.n + 1 })), 3e3);
         }
       }
-    };
-    void fetchContactData();
+    }).catch((err) => {
+      if (!cancelled) {
+        console.error("[DraggableClientInfoModal] ❌ Erro ao buscar o formulário:", err);
+        setForm(null);
+        setError(err instanceof Error ? err.message : "Erro ao buscar dados do contato");
+        setIsLoading(false);
+      }
+    });
     return () => {
       cancelled = true;
+      if (refreshTimer) clearTimeout(refreshTimer);
     };
-  }, [campaignContact, campaignContact == null ? void 0 : campaignContact.id, fetchedContactId]);
+  }, [requestKey, retry]);
   useEffect(() => {
     if (!isDragging) {
       return;
     }
     const handlePointerMove = (event) => {
-      var _a2, _b;
       if (pointerRef.current.pointerId !== event.pointerId) {
         return;
       }
       dragMovedRef.current = true;
-      const modalWidth = ((_a2 = containerRef.current) == null ? void 0 : _a2.offsetWidth) ?? 0;
-      const modalHeight = ((_b = containerRef.current) == null ? void 0 : _b.offsetHeight) ?? 0;
+      const { width: modalWidth, height: modalHeight } = measure();
       const nextX = event.clientX - pointerRef.current.offsetX;
       const nextY = event.clientY - pointerRef.current.offsetY;
       const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
@@ -56314,19 +56741,32 @@ function DraggableClientInfoModal({
     };
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
     return () => {
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
     };
-  }, [isDragging]);
+  }, [isDragging, measure]);
   const beginDrag = useCallback((event) => {
     if (event.button !== 0 && event.pointerType !== "touch") {
       return;
     }
+    if (event.target instanceof Element && event.target.closest("button")) {
+      return;
+    }
     const element = containerRef.current;
     if (!element) {
       return;
     }
+    event.preventDefault();
+    const handle = event.currentTarget;
+    if (typeof handle.setPointerCapture === "function") {
+      try {
+        handle.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    }
     const rect = element.getBoundingClientRect();
     pointerRef.current = {
       pointerId: event.pointerId,
@@ -56341,119 +56781,243 @@ function DraggableClientInfoModal({
       onClose();
     }
   }, [isCallActive, onClose]);
+  const handleRetry = useCallback(() => {
+    setRetry((prev) => ({ key: requestKey, n: prev.n + 1 }));
+  }, [requestKey]);
+  const applyScale = useCallback((next) => {
+    const value = clampFormScale(next);
+    setScalePercent(value);
+    storeFormScale(value);
+    return value;
+  }, []);
+  const canDecrease = scalePercent > FORM_SCALE_MIN;
+  const canIncrease = scalePercent < FORM_SCALE_MAX;
+  const handleDecrease = useCallback(() => {
+    if (canDecrease) setAnnouncement(`Tamanho do formulário: ${applyScale(scalePercent - FORM_SCALE_STEP)}%`);
+  }, [applyScale, canDecrease, scalePercent]);
+  const handleIncrease = useCallback(() => {
+    if (canIncrease) setAnnouncement(`Tamanho do formulário: ${applyScale(scalePercent + FORM_SCALE_STEP)}%`);
+  }, [applyScale, canIncrease, scalePercent]);
+  const handleResetScale = useCallback(() => {
+    applyScale(FORM_SCALE_DEFAULT);
+    setAnnouncement("");
+  }, [applyScale]);
+  useEffect(() => {
+    if (!isOpen || typeof document === "undefined") {
+      return;
+    }
+    const container = containerRef.current;
+    const active = document.activeElement;
+    previouslyFocusedRef.current = active && active !== document.body ? active : null;
+    if (container && (!active || active === document.body)) {
+      container.focus({ preventScroll: true });
+    }
+    return () => {
+      const previous = previouslyFocusedRef.current;
+      if (focusWithinRef.current && previous && previous.isConnected) {
+        previous.focus({ preventScroll: true });
+      }
+      focusWithinRef.current = false;
+    };
+  }, [isOpen]);
+  const handleFocusWithin = useCallback(() => {
+    focusWithinRef.current = true;
+  }, []);
+  const handleBlurWithin = useCallback((event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      focusWithinRef.current = false;
+    }
+  }, []);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape" && !isCallActive) {
+        event.stopPropagation();
+        handleCloseClick();
+      }
+    },
+    [handleCloseClick, isCallActive]
+  );
   if (!isOpen) {
     return null;
   }
-  const hasData = Object.keys(contactData).length > 0;
-  const hasFieldStructure = fieldRows && fieldRows.length > 0;
-  const getFieldValue = (fieldCode) => {
-    return contactData[fieldCode] || "-";
+  const rows = (form == null ? void 0 : form.rows) && form.rows.length > 0 ? form.rows : [];
+  const hasRows = rows.length > 0;
+  const hasFields = Boolean(form && form.fields.length > 0);
+  const hasData = hasRows || hasFields;
+  const scaledStyle = {
+    zoom: scale,
+    width: `${BASE_WIDTH}px`,
+    maxWidth: `${Math.max(160, Math.floor((viewport.width - 2 * VIEWPORT_MARGIN$1) / scale))}px`,
+    maxHeight: `${Math.max(120, Math.floor((viewport.height - 2 * VIEWPORT_MARGIN$1) / scale))}px`
   };
-  const modalContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const controlPx = scale < 1 ? Math.ceil(CONTROL_MIN_PX / scale) : CONTROL_MIN_PX;
+  const controlStyle = { width: `${controlPx}px`, height: `${controlPx}px` };
+  const percentStyle = { height: `${controlPx}px`, minWidth: `${Math.ceil(48 / Math.min(scale, 1))}px` };
+  const modalContent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: containerRef,
-      className: tw`fixed z-[9999] flex flex-col overflow-hidden rounded-xl border border-slate-300 bg-white shadow-2xl`,
+      role: "dialog",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocusWithin,
+      onBlur: handleBlurWithin,
+      className: tw`fixed z-[9999] overflow-hidden rounded-xl border border-gray-300 bg-white text-gray-900 shadow-2xl focus:outline-none`,
       style: {
         left: `${position2.x}px`,
         top: `${position2.y}px`,
-        width: "520px",
-        maxWidth: "calc(100vw - 32px)",
-        maxHeight: "calc(100vh - 32px)"
+        maxWidth: `calc(100vw - ${2 * VIEWPORT_MARGIN$1}px)`,
+        maxHeight: `calc(100vh - ${2 * VIEWPORT_MARGIN$1}px)`
       },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            onPointerDown: beginDrag,
-            className: tw`flex cursor-move items-center justify-between border-b border-slate-200 bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-3 text-white`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`h-5 w-5` }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-sm font-bold`, children: "Informações da Campanha" })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: handleCloseClick,
-                  disabled: isCallActive,
-                  className: tw`rounded-full p-1 transition hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-40`,
-                  title: isCallActive ? "Aguarde o fim da chamada para fechar" : "Fechar",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`h-5 w-5` })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex-1 space-y-3 overflow-y-auto p-4`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-2 gap-3`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(FiClock, { className: tw`h-4 w-4 text-slate-500` }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-slate-500 uppercase tracking-wide font-medium`, children: "Duração" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-bold text-slate-800`, children: formatDuration(callDuration) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`h-4 w-4 text-slate-500` }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`min-w-0 flex-1`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-slate-500 uppercase tracking-wide font-medium`, children: "Cliente" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`truncate text-sm font-bold text-slate-800`, children: (campaignContact == null ? void 0 : campaignContact.label) || "N/A" })
-              ] })
-            ] })
-          ] }),
-          isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-blue-200 bg-blue-50 p-6 text-center`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`mx-auto mb-2 inline-block h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-medium text-blue-700`, children: "Carregando dados do contato..." })
-          ] }),
-          error2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-lg border border-red-200 bg-red-50 p-3`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertCircle, { className: tw`h-4 w-4 flex-shrink-0 text-red-600` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-semibold text-red-700`, children: "Erro ao carregar dados" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-red-600`, children: error2 })
-            ] })
-          ] }) }),
-          !isLoading && !error2 && hasData && hasFieldStructure && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`space-y-2`, children: fieldRows.map((row, rowIndex) => {
-            const numFields = row.length;
-            let gridCols = "grid-cols-1";
-            if (numFields === 2) {
-              gridCols = "grid-cols-2";
-            } else if (numFields === 3) {
-              gridCols = "grid-cols-3";
-            } else if (numFields === 4) {
-              gridCols = "grid-cols-4";
-            } else if (numFields === 5) {
-              gridCols = "grid-cols-5";
-            }
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          "data-testid": "campaign-form-scaled",
+          "data-scale": zoomSupported ? scalePercent : FORM_SCALE_DEFAULT,
+          className: tw`flex flex-col`,
+          style: scaledStyle,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
-                className: tw`grid gap-2 ${gridCols}`,
-                children: row.map((field, fieldIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Field,
-                  {
-                    label: field.name,
-                    value: getFieldValue(field.code),
-                    fullWidth: field.width === "100%"
-                  },
-                  `${rowIndex}-${fieldIndex}-${field.code}`
-                ))
-              },
-              rowIndex
-            );
-          }) }),
-          !isLoading && !error2 && !hasData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-col items-center justify-center rounded-lg border border-slate-200 bg-slate-50 px-4 py-8 text-center`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`mb-2 h-8 w-8 text-slate-400` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-slate-500`, children: "Nenhum dado disponível" })
-          ] })
-        ] }),
-        isCallActive && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`border-t border-slate-200 bg-slate-50 px-4 py-2`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-center text-xs text-slate-500`, children: "Aguarde o fim da chamada para fechar" }) })
-      ]
+                onPointerDown: beginDrag,
+                className: tw`flex flex-wrap cursor-move select-none items-center gap-2 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 px-3 py-2.5 text-white`,
+                style: { touchAction: "none" },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex min-w-[7rem] flex-1 items-center gap-2`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { "aria-hidden": true, className: tw`h-5 w-5 flex-shrink-0` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { id: titleId, className: tw`truncate text-sm font-bold`, children: "Informações da Campanha" })
+                  ] }),
+                  zoomSupported && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { role: "group", "aria-label": "Tamanho do formulário", className: tw`ml-auto flex flex-shrink-0 items-center gap-0.5`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleDecrease,
+                        "aria-disabled": !canDecrease,
+                        "aria-label": "Diminuir o tamanho do formulário",
+                        title: "Diminuir o formulário e o texto",
+                        className: tw`${CONTROL_BUTTON_CLASS} ${canDecrease ? "" : "cursor-not-allowed"}`,
+                        style: controlStyle,
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiMinus, { "aria-hidden": true, className: tw`h-4 w-4 ${canDecrease ? "" : "opacity-40"}` })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleResetScale,
+                        "aria-label": `Tamanho atual ${scalePercent}%. Restaurar o tamanho padrão`,
+                        title: "Restaurar o tamanho padrão (100%)",
+                        className: tw`flex-shrink-0 rounded-md px-1 text-center text-xs font-semibold tabular-nums transition hover:bg-black hover:bg-opacity-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white`,
+                        style: percentStyle,
+                        children: [
+                          scalePercent,
+                          "%"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleIncrease,
+                        "aria-disabled": !canIncrease,
+                        "aria-label": "Aumentar o tamanho do formulário",
+                        title: "Aumentar o formulário e o texto",
+                        className: tw`${CONTROL_BUTTON_CLASS} ${canIncrease ? "" : "cursor-not-allowed"}`,
+                        style: controlStyle,
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPlus, { "aria-hidden": true, className: tw`h-4 w-4 ${canIncrease ? "" : "opacity-40"}` })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { role: "status", className: tw`sr-only`, children: announcement })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCloseClick,
+                      disabled: isCallActive,
+                      "aria-label": isCallActive ? "Aguarde o fim da chamada para fechar" : "Fechar",
+                      className: tw`${CONTROL_BUTTON_CLASS} rounded-full disabled:cursor-not-allowed disabled:opacity-40`,
+                      style: controlStyle,
+                      title: isCallActive ? "Aguarde o fim da chamada para fechar" : "Fechar",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { "aria-hidden": true, className: tw`h-5 w-5` })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                tabIndex: 0,
+                role: "region",
+                "aria-label": "Dados do contato",
+                className: tw`min-h-0 flex-1 space-y-3 overflow-y-auto p-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-2 gap-3`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2`, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(FiClock, { "aria-hidden": true, className: tw`h-4 w-4 text-gray-500` }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-gray-500 uppercase tracking-wide font-medium`, children: "Duração" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-bold text-gray-800`, children: formatDuration(callDuration) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2`, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { "aria-hidden": true, className: tw`h-4 w-4 text-gray-500` }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`min-w-0 flex-1`, children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-gray-500 uppercase tracking-wide font-medium`, children: "Cliente" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`truncate text-sm font-bold text-gray-800`, children: (campaignContact == null ? void 0 : campaignContact.label) || "N/A" })
+                      ] })
+                    ] })
+                  ] }),
+                  isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-blue-200 bg-blue-50 p-6 text-center`, role: "status", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`mx-auto mb-2 inline-block h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-medium text-blue-700`, children: "Carregando dados do contato..." })
+                  ] }),
+                  error2 && !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-lg border border-red-200 bg-red-50 p-3`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertCircle, { "aria-hidden": true, className: tw`h-4 w-4 flex-shrink-0 text-red-600` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`min-w-0 flex-1`, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-semibold text-red-700`, children: "Erro ao carregar dados" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-red-600`, children: error2 })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleRetry,
+                        className: tw`rounded-md border border-red-300 bg-white px-2 py-1 text-[11px] font-semibold text-red-700 transition hover:bg-red-100`,
+                        children: "Tentar novamente"
+                      }
+                    )
+                  ] }) }),
+                  !isLoading && !error2 && hasRows && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`space-y-2`, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid gap-2 ${gridColsFor(row.length)}`, children: row.map((field, fieldIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Field,
+                    {
+                      label: field.label,
+                      value: field.value || "-",
+                      fullWidth: field.width === "100%"
+                    },
+                    `${rowIndex}-${fieldIndex}-${field.key}`
+                  )) }, rowIndex)) }),
+                  !isLoading && !error2 && !hasRows && hasFields && form && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid grid-cols-2 gap-2`, children: form.fields.map((field) => /* @__PURE__ */ jsxRuntimeExports.jsx(Field, { label: field.label, value: field.value || "-" }, field.key)) }),
+                  !isLoading && !error2 && !hasData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 px-4 py-8 text-center`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { "aria-hidden": true, className: tw`mb-2 h-8 w-8 text-gray-400` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-gray-500`, children: "Nenhum dado disponível" })
+                  ] })
+                ]
+              }
+            ),
+            isCallActive && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`border-t border-gray-200 bg-gray-50 px-4 py-2`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-center text-xs text-gray-500`, children: "Aguarde o fim da chamada para fechar" }) })
+          ]
+        }
+      )
     }
   );
   if (typeof document !== "undefined") {
-    return createPortal(modalContent, document.body);
+    return createPortal(modalContent, portalTarget ?? document.body);
   }
   return null;
 }
@@ -56463,9 +57027,16 @@ function Field({
   fullWidth
 }) {
   const widthClass = fullWidth ? "col-span-full" : "";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-slate-200 bg-white p-2 ${widthClass}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`mb-0.5 truncate text-[9px] font-semibold uppercase tracking-wide text-slate-500`, children: label }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`break-words text-xs font-semibold text-slate-800 line-clamp-2`, children: value })
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-gray-200 bg-white p-2 ${widthClass}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`mb-0.5 truncate text-[9px] font-semibold uppercase tracking-wide text-gray-500`, children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        className: tw`overflow-hidden break-words text-xs font-semibold text-gray-800`,
+        style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" },
+        children: value
+      }
+    )
   ] });
 }
 if (typeof window !== "undefined" && !window.__fetchIntercepted__) {
@@ -56563,104 +57134,8 @@ if (typeof window !== "undefined" && !window.__fetchIntercepted__) {
   };
   console.log("%c[FETCH INTERCEPTOR] ✅ Ativo - todas as requisições serão logadas", "color: #2196F3; font-weight: bold; font-size: 12px");
 }
-async function getCampaignConfig(contactId) {
-  const url = `${API_BASE_URL}/api/campaign-config/${contactId}`;
-  const headers = getAuthHeaders();
-  console.log("[getCampaignConfig] URL:", url);
-  console.log("[getCampaignConfig] Headers:", JSON.stringify(headers));
-  const response = await fetch(url, { method: "GET", headers, credentials: "omit" });
-  if (!response.ok) {
-    const errorBody = await response.json().catch(() => ({ error: "Erro desconhecido" }));
-    console.error("[getCampaignConfig] Erro:", response.status, errorBody);
-    if (response.status === 401) {
-      const token = getSessionToken();
-      console.error("[getCampaignConfig] 401 - Token atual:", token ? `${token.substring(0, 20)}...` : "NULL");
-      console.error("[getCampaignConfig] 401 - Resposta completa:", JSON.stringify(errorBody));
-    }
-    throw new Error(errorBody.error || `Falha ao buscar config: ${response.status}`);
-  }
-  return response.json();
-}
-function processRowsToMapping(apiResponse) {
-  const mapping = {};
-  console.log("[processRowsToMapping] Processando estrutura:", typeof apiResponse);
-  if (!apiResponse || typeof apiResponse !== "object") {
-    console.warn("[processRowsToMapping] Resposta inválida:", apiResponse);
-    return mapping;
-  }
-  const data = apiResponse;
-  if (!data.rows || !Array.isArray(data.rows)) {
-    console.warn("[processRowsToMapping] rows não encontrado ou não é array:", data);
-    return mapping;
-  }
-  console.log("[processRowsToMapping] Total de linhas (rows):", data.rows.length);
-  for (let rowIndex = 0; rowIndex < data.rows.length; rowIndex++) {
-    const row = data.rows[rowIndex];
-    if (!Array.isArray(row)) {
-      console.warn(`[processRowsToMapping] Row ${rowIndex} não é array:`, row);
-      continue;
-    }
-    for (const field of row) {
-      if (field && typeof field === "object" && "code" in field && "name" in field) {
-        const fieldObj = field;
-        if (fieldObj.code && fieldObj.name) {
-          console.log(`[processRowsToMapping] ✓ Mapeando: "${fieldObj.code}" -> "${fieldObj.name}"`);
-          mapping[fieldObj.code] = fieldObj.name;
-        }
-      }
-    }
-  }
-  console.log("[processRowsToMapping] Mapeamento final:", mapping);
-  console.log("[processRowsToMapping] Total de campos mapeados:", Object.keys(mapping).length);
-  return mapping;
-}
-function applyMappingToValues(mapping, values) {
-  const finalData = {};
-  console.log("[applyMappingToValues] Aplicando mapeamento...");
-  console.log("[applyMappingToValues] Mapping keys:", Object.keys(mapping));
-  console.log("[applyMappingToValues] Values keys:", Object.keys(values));
-  for (const [code, value] of Object.entries(values)) {
-    const name = mapping[code];
-    if (name) {
-      console.log(`[applyMappingToValues] ✓ "${code}" -> "${name}" = "${value}"`);
-      finalData[name] = value;
-    } else {
-      console.log(`[applyMappingToValues] ✗ "${code}" não tem mapeamento (valor: "${value}")`);
-    }
-  }
-  console.log("[applyMappingToValues] Final data:", finalData);
-  return finalData;
-}
-async function fetchCampaignFieldsRaw(campaignModelId) {
-  const url = `${API_BASE_URL}/api/campaign-fields/${campaignModelId}`;
-  console.log("[fetchCampaignFieldsRaw] URL:", url);
-  const response = await fetch(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("[fetchCampaignFieldsRaw] Resposta recebida:", JSON.stringify(json, null, 2).substring(0, 500));
-  return json;
-}
-async function getContactValues(contactId) {
-  const url = `${API_BASE_URL}/api/campaign-contact/${contactId}`;
-  const response = await fetch(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}`);
-  }
-  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;
+  return findFormValue({ values: finalData }, candidates);
 }
 function MobileDialer(props) {
   useEffect(() => {
@@ -56673,10 +57148,12 @@ function MobileDialer(props) {
       document.head.appendChild(link);
     }
   }, []);
+  const inputProfile = useInputProfile();
+  const density = resolveDensity(props.density, inputProfile);
   if (!props.isAuthenticated) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(MobileDialerLogin, { ...props });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(MobileDialerLogin, { ...props, density });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(AuthenticatedMobileDialer, { ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AuthenticatedMobileDialer, { ...props, density });
 }
 function MobileDialerLogin({
   username,
@@ -56685,7 +57162,8 @@ function MobileDialerLogin({
   sessionError,
   sessionStatus,
   loginConfirmation,
-  onCancelLoginConfirmation
+  onCancelLoginConfirmation,
+  density
 }) {
   const [loginInput, setLoginInput] = useState(username ?? "");
   const [loginError, setLoginError] = useState(null);
@@ -56712,7 +57190,7 @@ function MobileDialerLogin({
   const handleLogin = useCallback(() => submitLogin(loginInput), [submitLogin, loginInput]);
   const showConfirmation = Boolean(loginConfirmation) && !isLoadingSession;
   const loadingUser = ((loginConfirmation == null ? void 0 : loginConfirmation.username) || loginInput || username || "").trim();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "phone-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "screen dialer-screen login-screen active", id: "dialerScreen", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "phone-container", "data-density": density === "compact" ? "compact" : "comfortable", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "screen dialer-screen login-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", { type: "button", className: `status-badge ${isLoadingSession ? "connecting" : "available"}`, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-dot" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-text", children: isLoadingSession ? "Conectando" : "Login" })
@@ -56826,9 +57304,10 @@ Gostaríamos de fazer um *diagnóstico gratuito* para te apresentar os valores r
 }
 function AuthenticatedMobileDialer({
   username,
-  showClientInfoModal = false
+  showClientInfoModal = false,
+  density
 }) {
-  var _a2, _b, _c;
+  var _a2, _b, _c, _d;
   const { skipManualQualification } = useDialerConfig();
   const [dialValue, setDialValue] = useState("");
   const [activeScreen, setActiveScreen] = useState("dialer");
@@ -56850,10 +57329,14 @@ function AuthenticatedMobileDialer({
     isLoading: false,
     error: null
   });
-  const [fetchedContactId, setFetchedContactId] = useState(null);
   const [callHistory, setCallHistory] = useState([]);
   const [isLoadingHistory, setIsLoadingHistory] = useState(false);
   const [historyError, setHistoryError] = useState(null);
+  const [historyQuery, setHistoryQuery] = useState("");
+  const [historySearchResults, setHistorySearchResults] = useState(null);
+  const [isSearchingHistory, setIsSearchingHistory] = useState(false);
+  const historyTextPoolRef = useRef(null);
+  const historySearchSeqRef = useRef(0);
   const [isSpeakerOn, setIsSpeakerOn] = useState(false);
   const [audioOutputDevices, setAudioOutputDevices] = useState([]);
   const [speakerDeviceId, setSpeakerDeviceId] = useState(null);
@@ -57030,90 +57513,54 @@ function AuthenticatedMobileDialer({
       });
     }
   }, [callInfo]);
-  const campaignContact = (callInfo == null ? void 0 : callInfo.type) === "campaign" ? callInfo.info.campaignContact : null;
-  const campaignContactId = campaignContact == null ? void 0 : campaignContact.id;
+  const campaignFormRequest = useMemo(
+    () => {
+      var _a3;
+      return (callInfo == null ? void 0 : callInfo.type) === "campaign" ? campaignFormRequestFromCallInfo(callInfo.info, ((_a3 = currentCall == null ? void 0 : currentCall.data) == null ? void 0 : _a3.campaignContactPhoneId) ?? null) : null;
+    },
+    [callInfo, currentCall]
+  );
+  const campaignFormKey = campaignFormRequest ? campaignFormCacheKey(campaignFormRequest) : null;
+  const campaignFormRequestRef = useRef(campaignFormRequest);
+  campaignFormRequestRef.current = campaignFormRequest;
   useEffect(() => {
-    if (!campaignContactId) {
+    const request = campaignFormRequestRef.current;
+    if (!request || !campaignFormKey) {
       setContactData({ finalData: {}, isLoading: false, error: null });
-      setFetchedContactId(null);
-      return;
-    }
-    if (fetchedContactId === campaignContactId) {
       return;
     }
     let cancelled = false;
-    const fetchContactData = async () => {
-      console.log("[MobileDialer] ========================================");
-      console.log("[MobileDialer] Buscando dados do contato:", campaignContactId);
-      const tokenAtFetch = getSessionToken();
-      console.log("[MobileDialer] Token no momento da busca:", tokenAtFetch ? `${tokenAtFetch.substring(0, 20)}...` : "NULL");
-      console.log("[MobileDialer] localStorage length:", typeof window !== "undefined" ? localStorage.length : "N/A");
-      addLog("debug", "FetchContact", `Token: ${tokenAtFetch ? "presente" : "AUSENTE"}`, {
-        contactId: campaignContactId,
-        hasToken: !!tokenAtFetch,
-        localStorageLength: typeof window !== "undefined" ? localStorage.length : 0
+    let refreshTimer = null;
+    setContactData({ finalData: {}, isLoading: true, error: null });
+    addLog("debug", "FetchContact", "Buscando formulário do contato", { contactId: request.id, source: request.source });
+    const apply2 = (form) => {
+      setContactData({ finalData: form.values, isLoading: false, error: null });
+      addLog("info", "FetchContact", `✅ Formulário: ${form.fields.length} campos (${form.valuesSource}, layout ${form.layoutSource})`, {
+        contactId: request.id,
+        partial: form.partial === true
       });
-      console.log("[MobileDialer] ========================================");
-      setContactData({ finalData: {}, isLoading: true, error: null });
-      try {
-        const customer = campaignContact == null ? void 0 : campaignContact.customer;
-        let fieldsRawData;
-        let contactValues = {};
-        if ((customer == null ? void 0 : customer.id) && (customer == null ? void 0 : customer.formId)) {
-          console.log("[MobileDialer] 📋 Modo CLIENTE detectado:", customer);
-          const customerFieldsUrl = `${API_BASE_URL}/api/campaign-contact/0?source=customer&formId=${encodeURIComponent(String(customer.formId))}`;
-          const customerValuesUrl = `${API_BASE_URL}/api/campaign-fields/0?source=customer&customerId=${encodeURIComponent(String(customer.id))}`;
-          const [fieldsResponse, valuesResponse] = await Promise.all([
-            fetch(customerFieldsUrl, { method: "GET", headers: getAuthHeaders(), credentials: "omit" }),
-            fetch(customerValuesUrl, { method: "GET", headers: getAuthHeaders(), credentials: "omit" })
-          ]);
-          if (!fieldsResponse.ok) throw new Error(`Erro ao buscar campos cliente: ${fieldsResponse.status}`);
-          if (!valuesResponse.ok) throw new Error(`Erro ao buscar valores cliente: ${valuesResponse.status}`);
-          fieldsRawData = await fieldsResponse.json();
-          contactValues = await valuesResponse.json();
-        } else {
-          console.log("[MobileDialer] 📋 Modo CAMPANHA detectado");
-          const config = await getCampaignConfig(campaignContactId);
-          console.log("[MobileDialer] Config recebida:", config);
-          if (!config.campaignModelId) {
-            throw new Error("campaignModelId não encontrado");
-          }
-          const [rawFields, rawValues] = await Promise.all([
-            fetchCampaignFieldsRaw(config.campaignModelId),
-            getContactValues(campaignContactId)
-          ]);
-          fieldsRawData = rawFields;
-          contactValues = rawValues;
-        }
-        console.log("[MobileDialer] ======= DADOS BRUTOS =======");
-        console.log("[MobileDialer] fieldsRawData:", JSON.stringify(fieldsRawData, null, 2).substring(0, 1e3));
-        console.log("[MobileDialer] contactValues:", JSON.stringify(contactValues, null, 2));
-        const codeToNameMap = processRowsToMapping(fieldsRawData);
-        console.log("[MobileDialer] ======= MAPEAMENTO PROCESSADO =======");
-        console.log("[MobileDialer] codeToNameMap:", JSON.stringify(codeToNameMap, null, 2));
-        const finalData = applyMappingToValues(codeToNameMap, contactValues);
-        console.log("[MobileDialer] ======= RESULTADO FINAL =======");
-        console.log("[MobileDialer] finalData:", JSON.stringify(finalData, null, 2));
-        console.log("[MobileDialer] finalData keys:", Object.keys(finalData));
-        console.log("[MobileDialer] ================================");
-        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();
+    fetchCampaignForm(request).then((form) => {
+      if (cancelled) return;
+      apply2(form);
+      if (form.partial) {
+        refreshTimer = setTimeout(() => {
+          if (cancelled) return;
+          fetchCampaignForm(request, { force: true }).then((refreshed) => {
+            if (!cancelled) apply2(refreshed);
+          }).catch(() => void 0);
+        }, 3e3);
+      }
+    }).catch((error2) => {
+      if (cancelled) return;
+      console.error("[MobileDialer] Erro ao buscar o formulário:", error2);
+      setContactData({ finalData: {}, isLoading: false, error: error2 instanceof Error ? error2.message : "Erro ao buscar dados" });
+    });
     return () => {
       cancelled = true;
+      if (refreshTimer) clearTimeout(refreshTimer);
     };
-  }, [campaignContactId, fetchedContactId]);
+  }, [campaignFormKey]);
   const callStateStr = callState;
   const isError = callStateStr === "startup.error" || callStateStr === "offline";
   const isIdle = !callStateStr || callStateStr === "starting" || callStateStr === "idle" || callStateStr === "manualCallSetup" || callStateStr === "onBreak";
@@ -57165,6 +57612,18 @@ function AuthenticatedMobileDialer({
       setPauseDurationSeconds(0);
     }
   }, [isOnBreak, currentBreakName]);
+  useEffect(() => {
+    const onClickToCall = (event) => {
+      const task = event.detail;
+      if (!(task == null ? void 0 : task.phone)) return;
+      setCallError(null);
+      setDialValue(nationalDigitsFromE164(task.phone).slice(0, 32));
+      setActiveScreen("dialer");
+      addLog("event", "Call", `🖱️ Click-to-call recebido: ${task.phoneDisplay}`, { taskId: task.id, source: task.source });
+    };
+    window.addEventListener(CLICK_TO_CALL_EVENT, onClickToCall);
+    return () => window.removeEventListener(CLICK_TO_CALL_EVENT, onClickToCall);
+  }, []);
   useEffect(() => {
     console.log("[MobileDialer] Screen control effect - callState:", callState, "isInCall:", isInCall, "isConnecting:", isConnecting, "isAfterCall:", isAfterCall);
     if (isInCall || isConnecting) {
@@ -57356,16 +57815,17 @@ function AuthenticatedMobileDialer({
       haptic.notificationError();
     }
   }, [haptic, speakerSupported, speakerDeviceId, defaultDeviceId, isSpeakerOn, operator]);
-  const fetchCallHistory = useCallback(async () => {
-    const agentId = userData == null ? void 0 : userData.id;
-    if (!agentId) {
-      console.log("[MobileDialer] Aguardando ID do usuário para buscar histórico");
-      return;
-    }
-    setIsLoadingHistory(true);
-    setHistoryError(null);
-    try {
-      const response = await fetch(`${API_BASE_URL}/api/call-history?agent_id=${encodeURIComponent(agentId)}&limit=50`, {
+  const requestHistory = useCallback(
+    async ({ phone, limit }) => {
+      const agentId = userData == null ? void 0 : userData.id;
+      if (!agentId) {
+        throw new Error("Aguardando ID do usuário");
+      }
+      const params = new URLSearchParams({ agent_id: String(agentId), limit: String(limit) });
+      if (phone) {
+        params.set("phone", phone);
+      }
+      const response = await fetch(`${API_BASE_URL}/api/call-history?${params.toString()}`, {
         method: "GET",
         headers: getAuthHeaders(),
         credentials: "omit"
@@ -57376,8 +57836,22 @@ function AuthenticatedMobileDialer({
         );
       }
       const data = await response.json();
-      console.log("[MobileDialer] Histórico recebido:", data.total, "registros");
-      setCallHistory(data.items || []);
+      return data.items || [];
+    },
+    [userData == null ? void 0 : userData.id]
+  );
+  const fetchCallHistory = useCallback(async () => {
+    if (!(userData == null ? void 0 : userData.id)) {
+      console.log("[MobileDialer] Aguardando ID do usuário para buscar histórico");
+      return;
+    }
+    setIsLoadingHistory(true);
+    setHistoryError(null);
+    historyTextPoolRef.current = null;
+    try {
+      const items = await requestHistory({ limit: 50 });
+      console.log("[MobileDialer] Histórico recebido:", items.length, "registros");
+      setCallHistory(items);
     } catch (error2) {
       console.error("[MobileDialer] Erro ao buscar histórico:", error2);
       setHistoryError(error2 instanceof Error && error2.message.startsWith("Sessão") ? error2.message : "Erro ao carregar histórico");
@@ -57385,7 +57859,54 @@ function AuthenticatedMobileDialer({
     } finally {
       setIsLoadingHistory(false);
     }
-  }, [userData == null ? void 0 : userData.id]);
+  }, [requestHistory, userData == null ? void 0 : userData.id]);
+  const handleHistoryQueryChange = useCallback(
+    async (query) => {
+      setHistoryQuery(query);
+      const parsed = classifyHistoryQuery(query);
+      const seq = ++historySearchSeqRef.current;
+      if (parsed.kind === "empty") {
+        setHistorySearchResults(null);
+        setIsSearchingHistory(false);
+        return;
+      }
+      setIsSearchingHistory(true);
+      try {
+        let results;
+        if (parsed.kind === "phone") {
+          results = await requestHistory({ phone: parsed.digits, limit: 100 });
+        } else {
+          if (!historyTextPoolRef.current) {
+            historyTextPoolRef.current = await requestHistory({ limit: 200 });
+          }
+          results = historyTextPoolRef.current;
+        }
+        if (seq === historySearchSeqRef.current) {
+          setHistorySearchResults(results);
+        }
+      } catch (error2) {
+        console.error("[MobileDialer] Erro na busca do histórico:", error2);
+        if (seq === historySearchSeqRef.current) {
+          setHistorySearchResults(null);
+        }
+      } finally {
+        if (seq === historySearchSeqRef.current) {
+          setIsSearchingHistory(false);
+        }
+      }
+    },
+    [requestHistory]
+  );
+  const historySearchHint = useMemo(() => {
+    const parsed = classifyHistoryQuery(historyQuery);
+    if (parsed.kind === "phone") {
+      return "Busca por número em todo o histórico";
+    }
+    if (parsed.kind === "text") {
+      return historySearchResults ? "Busca por texto nas últimas 200 chamadas" : "Busca por texto nas chamadas carregadas";
+    }
+    return null;
+  }, [historyQuery, historySearchResults]);
   useEffect(() => {
     if (activeScreen === "history") {
       void fetchCallHistory();
@@ -57536,7 +58057,7 @@ function AuthenticatedMobileDialer({
       addLog("info", "Debug", "🔒 Painel de debug fechado");
     } });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "phone-container", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "phone-container", "data-density": density === "compact" ? "compact" : "comfortable", 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: [
@@ -57699,10 +58220,14 @@ function AuthenticatedMobileDialer({
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `screen call-history-screen ${activeScreen === "history" ? "active" : ""}`, id: "callHistoryScreen", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       CallHistoryList,
       {
-        items: callHistory,
+        items: historySearchResults ?? callHistory,
         isLoading: isLoadingHistory,
         error: historyError,
         onRefresh: fetchCallHistory,
+        query: historyQuery,
+        onQueryChange: handleHistoryQueryChange,
+        isSearching: isSearchingHistory,
+        searchHint: historySearchHint,
         onCall: (call) => {
           haptic.impactLight();
           setDialValue(historyPhoneDigits(call));
@@ -57820,6 +58345,7 @@ function AuthenticatedMobileDialer({
       {
         isOpen: isClientInfoModalOpen,
         campaignCallInfo,
+        campaignContactPhoneId: ((_d = currentCall == null ? void 0 : currentCall.data) == null ? void 0 : _d.campaignContactPhoneId) ?? null,
         callDuration: callDurationSeconds,
         isCallActive: isInCall || isConnecting,
         onClose: () => setIsClientInfoModalOpen(false)
@@ -58087,18 +58613,21 @@ function InlineDialer({ variant = "default", portalTarget, isAuthenticated, mode
   if (!isAuthenticated || !isMiniMode) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { variant, portalTarget, isAuthenticated, ...props });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(AuthenticatedMiniDialer, { ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AuthenticatedMiniDialer, { portalTarget, ...props });
 }
 function AuthenticatedMiniDialer({
   username,
   onLogin,
   onLogout,
   isLoadingSession,
-  sessionError
+  sessionError,
+  portalTarget
 }) {
+  var _a2;
   const { skipManualQualification } = useDialerConfig();
   const operatorState = clientSdkReactExports.useCallOperatorState();
   const currentCallInfo = clientSdkReactExports.useCallOperatorCurrentCallInfo();
+  const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
   const rawSuccessQualifications = clientSdkReactExports.useCallOperatorSuccessQualifications();
   const rawDiscardQualifications = clientSdkReactExports.useCallOperatorDiscardQualifications();
   const successQualifications = useMemo(() => rawSuccessQualifications ?? [], [rawSuccessQualifications]);
@@ -58354,9 +58883,11 @@ function AuthenticatedMiniDialer({
       {
         isOpen: isClientInfoModalOpen,
         campaignCallInfo,
+        campaignContactPhoneId: ((_a2 = currentCall == null ? void 0 : currentCall.data) == null ? void 0 : _a2.campaignContactPhoneId) ?? null,
         callDuration: callDurationSeconds,
         isCallActive: isInCall || isConnecting,
-        onClose: () => setIsClientInfoModalOpen(false)
+        onClose: () => setIsClientInfoModalOpen(false),
+        portalTarget
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -58376,7 +58907,229 @@ function AuthenticatedMiniDialer({
     )
   ] });
 }
-const WIDGET_VERSION = "2.2.0";
+const DEFAULT_CLICK_TO_CALL_INTERVAL_MS = 4e3;
+const BUSY_INTERVAL_FACTOR = 3;
+const DISPATCH_COOLDOWN_MS = 6e3;
+const CALL_START_TIMEOUT_MS = 4e3;
+const CALL_START_CHECK_MS = 100;
+const MAX_BACKOFF_MS = 6e4;
+const NOT_CONFIGURED_INTERVAL_MS = 5 * 6e4;
+const NOT_CONFIGURED_CODES = /* @__PURE__ */ new Set(["STORE_NOT_CONFIGURED", "SERVER_NOT_CONFIGURED"]);
+const ACK_ATTEMPTS = 3;
+const ACK_RETRY_DELAY_MS = 1500;
+const CALL_STARTED_STATES = /* @__PURE__ */ new Set(["manualCallSetup", "manualCallRinging", "callInProgress", "afterCall"]);
+function buildHeaders(sessionToken) {
+  if (sessionToken) {
+    return { "Content-Type": "application/json", "x-session-token": sessionToken, Authorization: `Bearer ${sessionToken}` };
+  }
+  return getAuthHeaders();
+}
+const delay = (ms2) => new Promise((resolve) => setTimeout(resolve, ms2));
+function ClickToCallAgent({ enabled = true, pollIntervalMs, sessionToken, onTask }) {
+  const operatorState = clientSdkReactExports.useCallOperatorState();
+  const { makeManualCall } = clientSdkReactExports.useCallOperatorControls();
+  const stateRef = useRef(operatorState == null ? void 0 : operatorState.state);
+  stateRef.current = operatorState == null ? void 0 : operatorState.state;
+  const makeManualCallRef = useRef(makeManualCall);
+  makeManualCallRef.current = makeManualCall;
+  const onTaskRef = useRef(onTask);
+  onTaskRef.current = onTask;
+  const tickerRef = useRef(null);
+  const applyIntervalRef = useRef(null);
+  useEffect(() => {
+    var _a2;
+    (_a2 = applyIntervalRef.current) == null ? void 0 : _a2.call(applyIntervalRef);
+  }, [operatorState == null ? void 0 : operatorState.state]);
+  useEffect(() => {
+    if (!enabled) {
+      return void 0;
+    }
+    let disposed = false;
+    let inFlight = false;
+    let cooldownUntil = 0;
+    let failureStreak = 0;
+    let mode2 = "normal";
+    let notConfiguredWarned = false;
+    let presenceTtlMs = 45e3;
+    let baseInterval = Math.max(1e3, pollIntervalMs ?? DEFAULT_CLICK_TO_CALL_INTERVAL_MS);
+    const config = { apiBaseUrl: API_BASE_URL, headers: buildHeaders(sessionToken) };
+    const computeInterval = () => {
+      if (mode2 === "notConfigured") {
+        return NOT_CONFIGURED_INTERVAL_MS;
+      }
+      const ceiling = Math.max(1e3, Math.floor(presenceTtlMs / 2));
+      const base = Math.min(baseInterval, ceiling);
+      if (mode2 === "backoff") {
+        return Math.min(base * 2 ** failureStreak, MAX_BACKOFF_MS);
+      }
+      const busy = Math.min(base * BUSY_INTERVAL_FACTOR, ceiling);
+      return canDispatchTo(presenceFromOperatorState(stateRef.current)) ? base : busy;
+    };
+    const applyInterval = () => {
+      var _a2;
+      return (_a2 = tickerRef.current) == null ? void 0 : _a2.setInterval(computeInterval());
+    };
+    applyIntervalRef.current = applyInterval;
+    const ack = async (options) => {
+      for (let attempt = 0; attempt < ACK_ATTEMPTS; attempt++) {
+        try {
+          const result2 = await ackClickToCall({ ...config, ...options });
+          if (result2.ok) {
+            return true;
+          }
+          const retryable = result2.status >= 500 || result2.status === 408 || result2.status === 429;
+          if (!retryable) {
+            console.warn("[ClickToCall] confirmação recusada pelo servidor:", result2.status, result2.code ?? "", "(tarefa", options.taskId, ")");
+            return false;
+          }
+        } catch (error2) {
+          console.warn("[ClickToCall] confirmação falhou (tentativa", attempt + 1, "):", error2 instanceof Error ? error2.message : error2);
+        }
+        if (disposed || attempt === ACK_ATTEMPTS - 1) {
+          break;
+        }
+        await delay(ACK_RETRY_DELAY_MS * (attempt + 1));
+      }
+      console.error("[ClickToCall] não foi possível confirmar a tarefa", options.taskId, "; o servidor a marcará como não confirmada");
+      return false;
+    };
+    const waitForCallStart = () => new Promise((resolve) => {
+      const deadline = Date.now() + CALL_START_TIMEOUT_MS;
+      const check = () => {
+        if (disposed) return resolve("disposed");
+        const state = stateRef.current;
+        if (state && CALL_STARTED_STATES.has(state)) return resolve("started");
+        if (state === "manualCallFailed") return resolve("manual_failed");
+        if (state === "callRinging" || presenceFromOperatorState(state) === "offline") return resolve("interrupted");
+        if (Date.now() >= deadline) return resolve("not_started");
+        setTimeout(check, CALL_START_CHECK_MS);
+      };
+      check();
+    });
+    const dispatch = async (task) => {
+      var _a2;
+      const state = stateRef.current;
+      cooldownUntil = Date.now() + DISPATCH_COOLDOWN_MS;
+      if (!canDispatchTo(presenceFromOperatorState(state))) {
+        console.warn("[ClickToCall] tarefa", task.id, "recebida com operador ocupado (", state, "): devolvendo à fila");
+        await ack({ taskId: task.id, status: "failed", error: `Operador indisponível (${state ?? "desconhecido"})`, retry: true });
+        return;
+      }
+      console.log("[ClickToCall] 🖱️ ligação pedida pela API:", task.phoneDisplay, "(tarefa", task.id, ")");
+      try {
+        window.dispatchEvent(new CustomEvent(CLICK_TO_CALL_EVENT, { detail: task }));
+      } catch (error2) {
+        console.warn("[ClickToCall] falha ao notificar o discador:", error2);
+      }
+      try {
+        (_a2 = onTaskRef.current) == null ? void 0 : _a2.call(onTaskRef, task);
+      } catch (error2) {
+        console.warn("[ClickToCall] onTask lançou erro:", error2);
+      }
+      try {
+        makeManualCallRef.current(task.phone);
+      } catch (error2) {
+        const message = error2 instanceof Error ? error2.message : String(error2);
+        console.error("[ClickToCall] makeManualCall falhou:", message);
+        await ack({ taskId: task.id, status: "failed", error: message, retry: false });
+        return;
+      }
+      const outcome = await waitForCallStart();
+      switch (outcome) {
+        case "started":
+          await ack({ taskId: task.id, status: "calling" });
+          return;
+        case "manual_failed":
+          console.error("[ClickToCall] o SDK não conseguiu completar a chamada manual");
+          await ack({ taskId: task.id, status: "failed", error: "Chamada manual falhou no SDK", retry: false });
+          return;
+        case "interrupted":
+          console.warn("[ClickToCall] chamada manual não aconteceu (estado", stateRef.current, "): devolvendo à fila");
+          await ack({ taskId: task.id, status: "failed", error: `Discador interrompido (${stateRef.current ?? "desconhecido"})`, retry: true });
+          return;
+        case "disposed":
+          await ack({ taskId: task.id, status: "failed", error: "Discador encerrado durante a discagem", retry: true });
+          return;
+        default: {
+          const message = `SDK não iniciou a chamada (estado continua ${stateRef.current ?? "desconhecido"})`;
+          console.error("[ClickToCall]", message);
+          await ack({ taskId: task.id, status: "failed", error: message, retry: false });
+        }
+      }
+    };
+    const tick = async () => {
+      if (disposed || inFlight) {
+        return;
+      }
+      inFlight = true;
+      try {
+        const state = stateRef.current;
+        const claim = canDispatchTo(presenceFromOperatorState(state)) && Date.now() >= cooldownUntil;
+        let result2;
+        try {
+          result2 = await pollClickToCall({ ...config, state, claim });
+        } catch (error2) {
+          result2 = { ok: false, status: 0, code: error2 instanceof Error && error2.name === "AbortError" ? "TIMEOUT" : "NETWORK" };
+        }
+        if (disposed) {
+          if (result2.ok && result2.task) {
+            await ack({ taskId: result2.task.id, status: "failed", error: "Discador encerrado antes de discar", retry: true });
+          }
+          return;
+        }
+        if (!result2.ok) {
+          failureStreak += 1;
+          const notConfigured = result2.code !== null && NOT_CONFIGURED_CODES.has(result2.code);
+          mode2 = notConfigured ? "notConfigured" : "backoff";
+          if (notConfigured) {
+            if (!notConfiguredWarned) {
+              notConfiguredWarned = true;
+              console.warn("[ClickToCall] backend sem click-to-call configurado (", result2.code, "); nova tentativa em 5 min");
+            }
+          } else if (failureStreak === 1) {
+            console.warn("[ClickToCall] polling falhou (HTTP", result2.status, result2.code ?? "", "); aplicando backoff");
+          }
+          applyInterval();
+          return;
+        }
+        if (mode2 !== "normal") {
+          mode2 = "normal";
+          failureStreak = 0;
+        }
+        presenceTtlMs = result2.presenceTtlSeconds * 1e3;
+        if (pollIntervalMs === void 0 && result2.pollIntervalMs > 0) {
+          baseInterval = Math.max(1e3, result2.pollIntervalMs);
+        }
+        applyInterval();
+        if (result2.task) {
+          try {
+            await dispatch(result2.task);
+          } catch (error2) {
+            console.error("[ClickToCall] erro ao tratar a tarefa", result2.task.id, ":", error2 instanceof Error ? error2.message : error2);
+          }
+        }
+      } finally {
+        inFlight = false;
+      }
+    };
+    const ticker = createBackgroundTicker(() => void tick(), computeInterval());
+    tickerRef.current = ticker;
+    void tick();
+    return () => {
+      disposed = true;
+      ticker.stop();
+      if (tickerRef.current === ticker) {
+        tickerRef.current = null;
+      }
+      if (applyIntervalRef.current === applyInterval) {
+        applyIntervalRef.current = null;
+      }
+      reportClickToCallOffline(config);
+    };
+  }, [enabled, pollIntervalMs, sessionToken]);
+  return null;
+}
+const WIDGET_VERSION = "2.4.0";
 let currentSipWebSocket = null;
 function sendSipUnregisterIfPossible(ws) {
   if (ws.readyState !== WebSocket.OPEN) return;
@@ -58576,8 +59329,25 @@ function deriveOptionsFromElement(element) {
   if (datasetAutoLogin !== void 0 && datasetAutoLogin !== null) {
     result2.autoLogin = ["true", "1", "yes", ""].includes(datasetAutoLogin.trim().toLowerCase());
   }
+  const datasetDensity = parseDensity(element.getAttribute("data-callix-density") ?? element.dataset.callixDensity);
+  if (datasetDensity) {
+    result2.density = datasetDensity;
+  }
+  const datasetClickToCall = element.getAttribute("data-callix-click-to-call") ?? element.dataset.callixClickToCall;
+  if (datasetClickToCall !== void 0 && datasetClickToCall !== null) {
+    result2.clickToCall = !["false", "0", "no", "off"].includes(datasetClickToCall.trim().toLowerCase());
+  }
   return result2;
 }
+function normalizeClickToCallOptions(value) {
+  if (value === false) {
+    return { enabled: false };
+  }
+  if (value === true || value === void 0 || value === null) {
+    return { enabled: true };
+  }
+  return { ...value, enabled: value.enabled !== false };
+}
 class CallixDialerWidget {
   constructor(options) {
     this.root = null;
@@ -58608,9 +59378,11 @@ class CallixDialerWidget {
       if (this.options.autoLogin === void 0 && derived.autoLogin !== void 0) {
         this.options.autoLogin = derived.autoLogin;
       }
-      if (this.options.uiVariant === "mobile" && !this.container.style.getPropertyValue("container-type")) {
-        this.container.style.setProperty("container-type", "inline-size");
-        this.container.style.setProperty("container-name", "dialercontainer");
+      if (this.options.density === void 0 && derived.density !== void 0) {
+        this.options.density = derived.density;
+      }
+      if (this.options.clickToCall === void 0 && derived.clickToCall !== void 0) {
+        this.options.clickToCall = derived.clickToCall;
       }
       this.root = clientExports.createRoot(this.container);
       this.root.render(
@@ -58954,6 +59726,7 @@ function DialerWrapper({ options, containerEl }) {
   }, []);
   const DialerComponent = options.mode === "inline" || uiVariant === "mobile" ? InlineDialer : FloatingDialer;
   const dialerMode = options.mode;
+  const clickToCall = normalizeClickToCallOptions(options.clickToCall);
   if (isDisconnecting) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(DialerConfigContext.Provider, { value: { skipManualQualification }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DialerComponent,
@@ -58967,6 +59740,7 @@ function DialerWrapper({ options, containerEl }) {
         sessionStatus: "Encerrando sessão anterior...",
         variant: uiVariant,
         portalTarget,
+        density: options.density,
         mode: dialerMode
       }
     ) });
@@ -58986,6 +59760,7 @@ function DialerWrapper({ options, containerEl }) {
         onCancelLoginConfirmation: handleCancelLoginConfirmation,
         variant: uiVariant,
         portalTarget,
+        density: options.density,
         mode: dialerMode
       }
     ) });
@@ -58995,21 +59770,33 @@ function DialerWrapper({ options, containerEl }) {
     {
       domain: callixDomain,
       userSessionToken: sessionToken,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(SdkCleanupManager, { ref: cleanupRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        DialerComponent,
-        {
-          isAuthenticated,
-          username,
-          onLogin: handleLogin,
-          onLogout: handleLogout,
-          isLoadingSession: isLoading,
-          sessionError: error2,
-          sessionStatus: loginStatus,
-          variant: uiVariant,
-          portalTarget,
-          mode: dialerMode
-        }
-      ) })
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(SdkCleanupManager, { ref: cleanupRef, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DialerComponent,
+          {
+            isAuthenticated,
+            username,
+            onLogin: handleLogin,
+            onLogout: handleLogout,
+            isLoadingSession: isLoading,
+            sessionError: error2,
+            sessionStatus: loginStatus,
+            variant: uiVariant,
+            portalTarget,
+            density: options.density,
+            mode: dialerMode
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ClickToCallAgent,
+          {
+            enabled: clickToCall.enabled,
+            pollIntervalMs: clickToCall.pollIntervalMs,
+            sessionToken,
+            onTask: clickToCall.onTask
+          }
+        )
+      ] })
     },
     providerKey
   ) });