showFillToast function

function showFillToast(filled: number, total: number, aiCount: number): void {
  const toast = document.createElement("div");
  toast.setAttribute("data-fill-all-toast", "1");

  const aiNote =
    aiCount > 0
      ? `<span style="opacity:0.85;font-size:11px"> (${aiCount} via ✨ IA)</span>`
      : "";
  toast.innerHTML = `
    <span style="font-size:15px;margin-right:6px">✅</span>
    <span><strong>${filled}</strong> de <strong>${total}</strong> campos preenchidos${aiNote}</span>
    <button data-fill-all-toast-close style="
      background:none;border:none;color:inherit;cursor:pointer;
      font-size:14px;margin-left:12px;opacity:0.7;padding:0;line-height:1;
    " title="Fechar">×</button>
  `;

  toast.style.cssText = `
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1e1e2e;
    color: #e2e8f0;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.38);
    border: 1px solid rgba(255,255,255,0.08);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(12px);
    max-width: 320px;
  `;

  document.body.appendChild(toast);

  // Animate in
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      toast.style.opacity = "1";
      toast.style.transform = "translateY(0)";
    });
  });

  const dismiss = (): void => {
    toast.style.opacity = "0";
    toast.style.transform = "translateY(12px)";
    setTimeout(() => toast.remove(), 350);
  };

  const closeBtn = toast.querySelector<HTMLButtonElement>(
    "[data-fill-all-toast-close]",
  );
  closeBtn?.addEventListener("click", dismiss);

  const timer = setTimeout(dismiss, 4000);
  toast.addEventListener("mouseenter", () => clearTimeout(timer));
  toast.addEventListener("mouseleave", () => setTimeout(dismiss, 1500));
}