@adatechnology/conversations-ui 0.1.0-rc.26 → 0.1.0-rc.28

package/dist/index.js

@@ -1,7 +1,17 @@
+import {
+  TOOLTIP_ATTRIBUTE,
+  TooltipLayer
+} from "./chunk-DXPSPUWF.js";
 import {
   AudioPlayer,
   AudioRecorderButton,
   AudioTranscription,
+  COMPOSER_BAR_CLASS,
+  COMPOSER_COMPACT_WIDTH,
+  COMPOSER_MONOSPACE_CLASS,
+  COMPOSER_TOOL_BUTTON_ACTIVE_CLASS,
+  COMPOSER_TOOL_BUTTON_CLASS,
+  COMPOSER_TOOL_BUTTON_IDLE_CLASS,
   ConversationDocumentsPanel,
   ConversationLocalesProvider,
   ConversationWallpaper,
@@ -26,6 +36,8 @@ import {
   MediaRenderer,
   MessageBubble,
   MessageComposer,
+  PAGINATION_LABELS,
+  QUICK_REPLY_PILL_CLASS,
   StatusTicks,
   applyQuickReplyVariables,
   cn,
@@ -45,22 +57,123 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-TV4OQRGH.js";
+} from "./chunk-UZJBYD5O.js";
 import {
+  ZERO_WIDTH_SPACE,
   htmlToWA,
   parseWhatsAppFormatting,
   useDarkMode,
   useIsDarkTheme,
   waToHTML,
   waToHTMLInline
-} from "./chunk-2AYDBWNE.js";
+} from "./chunk-WCBDXZ3X.js";
 
 // src/RichMessageComposer.tsx
-import { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
-import { Bold, Italic, Strikethrough, Code, Paperclip, SendHorizonal, Braces } from "lucide-react";
+import { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
+import { Bold, Italic, Strikethrough, Code, Paperclip, SendHorizonal, Braces, Type } from "lucide-react";
+
+// src/hooks/useContainerWidth.ts
+import { useEffect, useState } from "react";
+function useContainerWidth(ref) {
+  const [width, setWidth] = useState(void 0);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const measure = () => setWidth(element.getBoundingClientRect().width);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+  return width;
+}
+
+// src/lib/composer-formatting.ts
+var FORMATTING_ACTION = {
+  BOLD: "bold",
+  ITALIC: "italic",
+  STRIKETHROUGH: "strikethrough",
+  MONOSPACE: "monospace"
+};
+var EXEC_COMMAND_BY_ACTION = {
+  [FORMATTING_ACTION.BOLD]: "bold",
+  [FORMATTING_ACTION.ITALIC]: "italic",
+  [FORMATTING_ACTION.STRIKETHROUGH]: "strikeThrough"
+};
+var FORMATTING_SEPARATOR = "|";
+function codeAncestorOf({ node, editor }) {
+  let current = node;
+  while (current && current !== editor) {
+    if (current instanceof HTMLElement && current.tagName === "CODE") return current;
+    current = current.parentNode;
+  }
+  return void 0;
+}
+function canQueryCommandState() {
+  return typeof document !== "undefined" && typeof document.queryCommandState === "function";
+}
+function canExecuteFormattingCommand() {
+  return typeof document !== "undefined" && typeof document.execCommand === "function";
+}
+function isCommandActive(command) {
+  if (!canQueryCommandState()) return false;
+  try {
+    return document.queryCommandState(command);
+  } catch {
+    return false;
+  }
+}
+function activeFormattingIn(editor) {
+  const selection = typeof window !== "undefined" ? window.getSelection() : null;
+  const anchor = selection?.anchorNode;
+  if (!anchor || !editor.contains(anchor)) return "";
+  const active = [];
+  for (const [action, command] of Object.entries(EXEC_COMMAND_BY_ACTION)) {
+    if (isCommandActive(command)) active.push(action);
+  }
+  if (codeAncestorOf({ node: anchor, editor })) active.push(FORMATTING_ACTION.MONOSPACE);
+  return active.join(FORMATTING_SEPARATOR);
+}
+function isFormattingActive({ active, action }) {
+  return active.split(FORMATTING_SEPARATOR).includes(action);
+}
+function startMonospaceAt(range) {
+  const code = document.createElement("code");
+  code.className = COMPOSER_MONOSPACE_CLASS;
+  code.textContent = ZERO_WIDTH_SPACE;
+  range.deleteContents();
+  range.insertNode(code);
+  placeCaretAfter(code.firstChild, ZERO_WIDTH_SPACE.length);
+}
+function exitMonospaceAfter(code) {
+  const anchor = document.createTextNode(ZERO_WIDTH_SPACE);
+  code.after(anchor);
+  placeCaretAfter(anchor, ZERO_WIDTH_SPACE.length);
+}
+function unwrapMonospace(code) {
+  code.replaceWith(document.createTextNode(code.textContent?.replace(ZERO_WIDTH_SPACE, "") ?? ""));
+}
+function placeCaretAfter(node, offset) {
+  const caret = document.createRange();
+  caret.setStart(node, offset);
+  caret.collapse(true);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(caret);
+}
+function toggleFormattingCommand(action) {
+  const command = EXEC_COMMAND_BY_ACTION[action];
+  if (!command || !canExecuteFormattingCommand()) return false;
+  try {
+    document.execCommand("styleWithCSS", false, "false");
+    return document.execCommand(command);
+  } catch {
+    return false;
+  }
+}
 
 // src/SimpleEmojiPicker.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { Smile } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var EMOJIS = [
@@ -146,9 +259,9 @@ var EMOJIS = [
   "\u{1F6E1}\uFE0F"
 ];
 function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px", pickerMaxHeight = "220px" }) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState2(false);
   const containerRef = useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -164,9 +277,10 @@ function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px",
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
-        className: "w-7 h-7 flex items-center justify-center rounded-lg text-gray-400 dark:text-gray-500 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 transition-colors",
-        title: label,
-        children: /* @__PURE__ */ jsx(Smile, { size: 15 })
+        className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-400 dark:text-gray-500 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 transition-colors",
+        "data-cv-tooltip": label,
+        "aria-label": label,
+        children: /* @__PURE__ */ jsx(Smile, { size: 18 })
       }
     ),
     open && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl p-2 z-50", children: /* @__PURE__ */ jsx(
@@ -177,6 +291,8 @@ function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px",
         children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx(
           "button",
           {
+            "data-cv-tooltip": emoji,
+            "aria-label": emoji,
             type: "button",
             onClick: () => {
               onSelect(emoji);
@@ -211,7 +327,8 @@ var DEFAULT_RICH_COMPOSER_TOOLTIPS = {
   emoji: "Emojis",
   attach: "Anexar arquivo",
   send: "Enviar",
-  variables: "Vari\xE1veis dispon\xEDveis"
+  variables: "Vari\xE1veis dispon\xEDveis",
+  formatting: "Formata\xE7\xE3o"
 };
 var FORMATTING_ELEMENT = {
   bold: "strong",
@@ -219,7 +336,6 @@ var FORMATTING_ELEMENT = {
   strikethrough: "del",
   monospace: "code"
 };
-var MONOSPACE_CLASS = "bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm";
 var RichMessageComposer = forwardRef(function RichMessageComposer2({
   value,
   onChange,
@@ -234,14 +350,41 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
   isSending = false,
   idleAction,
   attachmentsPreview,
+  hasQueuedAttachments = false,
   acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
   className
 }, ref) {
   const editorRef = useRef2(null);
   const fileInputRef = useRef2(null);
   const variablesRef = useRef2(null);
-  const [isVariablesOpen, setIsVariablesOpen] = useState2(false);
-  useEffect2(() => {
+  const formattingRef = useRef2(null);
+  const barRef = useRef2(null);
+  const [isVariablesOpen, setIsVariablesOpen] = useState3(false);
+  const [isFormattingOpen, setIsFormattingOpen] = useState3(false);
+  const [activeFormatting, setActiveFormatting] = useState3("");
+  const barWidth = useContainerWidth(barRef);
+  const isCompact = barWidth !== void 0 && barWidth < COMPOSER_COMPACT_WIDTH;
+  const lastEmittedRef = useRef2("");
+  const emitChange = useCallback((html) => {
+    const text = htmlToWA(html);
+    lastEmittedRef.current = text;
+    onChange(text);
+  }, [onChange]);
+  useEffect3(() => {
+    const editor = editorRef.current;
+    if (!editor || value === lastEmittedRef.current) return;
+    lastEmittedRef.current = value;
+    editor.innerHTML = waToHTML(value);
+  }, [value]);
+  const refreshActiveFormatting = useCallback(() => {
+    const editor = editorRef.current;
+    if (editor) setActiveFormatting(activeFormattingIn(editor));
+  }, []);
+  useEffect3(() => {
+    document.addEventListener("selectionchange", refreshActiveFormatting);
+    return () => document.removeEventListener("selectionchange", refreshActiveFormatting);
+  }, [refreshActiveFormatting]);
+  useEffect3(() => {
     if (!isVariablesOpen) return;
     const closeOnOutsideClick = (event) => {
       if (!variablesRef.current?.contains(event.target)) setIsVariablesOpen(false);
@@ -249,25 +392,36 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
     document.addEventListener("mousedown", closeOnOutsideClick);
     return () => document.removeEventListener("mousedown", closeOnOutsideClick);
   }, [isVariablesOpen]);
+  useEffect3(() => {
+    if (!isFormattingOpen) return;
+    const closeOnOutsideClick = (event) => {
+      if (!formattingRef.current?.contains(event.target)) setIsFormattingOpen(false);
+    };
+    document.addEventListener("mousedown", closeOnOutsideClick);
+    return () => document.removeEventListener("mousedown", closeOnOutsideClick);
+  }, [isFormattingOpen]);
+  useEffect3(() => {
+    if (!isCompact) setIsFormattingOpen(false);
+  }, [isCompact]);
   const tooltipOf = (action) => tooltips?.[action] ?? DEFAULT_RICH_COMPOSER_TOOLTIPS[action];
   const shows = (action) => toolbar?.[action] !== false;
   const replaceContent = useCallback((text) => {
     const editor = editorRef.current;
     if (!editor) return;
     editor.innerHTML = waToHTML(text);
-    onChange(htmlToWA(editor.innerHTML));
+    emitChange(editor.innerHTML);
     editor.focus();
-  }, [onChange]);
+  }, [emitChange]);
   useImperativeHandle(ref, () => ({
     setContent: replaceContent,
     clear: () => {
       const editor = editorRef.current;
       if (!editor) return;
       editor.innerHTML = "";
-      onChange("");
+      emitChange("");
     },
     focus: () => editorRef.current?.focus()
-  }), [onChange, replaceContent]);
+  }), [emitChange, replaceContent]);
   const currentRange = useCallback(() => {
     const editor = editorRef.current;
     if (!editor) return void 0;
@@ -282,8 +436,8 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
     range.collapse(true);
     selection?.removeAllRanges();
     selection?.addRange(range);
-    onChange(htmlToWA(editorRef.current?.innerHTML ?? ""));
-  }, [onChange]);
+    emitChange(editorRef.current?.innerHTML ?? "");
+  }, [emitChange]);
   const insertAtCursor = useCallback((fragment) => {
     const range = currentRange();
     if (!range) return;
@@ -298,26 +452,74 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
     if (!range || !selectedText) return;
     range.deleteContents();
     const wrapper = document.createElement(FORMATTING_ELEMENT[action]);
-    if (action === "monospace") wrapper.className = MONOSPACE_CLASS;
+    if (action === "monospace") wrapper.className = COMPOSER_MONOSPACE_CLASS;
     wrapper.textContent = selectedText;
     range.insertNode(wrapper);
     commitRange(range, wrapper);
   }, [commitRange, currentRange]);
+  const applyFormatting = useCallback((action) => {
+    const editor = editorRef.current;
+    const range = currentRange();
+    if (!editor || !range) return;
+    if (action === FORMATTING_ACTION.MONOSPACE) {
+      const code = codeAncestorOf({ node: range.startContainer, editor });
+      if (range.collapsed) {
+        if (code) exitMonospaceAfter(code);
+        else startMonospaceAt(range);
+      } else if (code) {
+        unwrapMonospace(code);
+      } else {
+        wrapSelection(action);
+      }
+      emitChange(editor.innerHTML);
+      refreshActiveFormatting();
+      return;
+    }
+    if (toggleFormattingCommand(action)) emitChange(editor.innerHTML);
+    else wrapSelection(action);
+    refreshActiveFormatting();
+  }, [currentRange, emitChange, refreshActiveFormatting, wrapSelection]);
   const handleInput = useCallback((event) => {
-    onChange(htmlToWA(event.currentTarget.innerHTML));
-  }, [onChange]);
+    emitChange(event.currentTarget.innerHTML);
+    refreshActiveFormatting();
+  }, [emitChange, refreshActiveFormatting]);
   const handleKeyDown = useCallback((event) => {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
-      if (!disabled) onSend();
+      if (!disabled && !isSending) onSend();
     }
-  }, [disabled, onSend]);
+  }, [disabled, isSending, onSend]);
   const handleFileChange = useCallback((event) => {
     if (event.target.files?.length) onAttachFiles?.(event.target.files);
     if (fileInputRef.current) fileInputRef.current.value = "";
   }, [onAttachFiles]);
-  const canSend = value.trim().length > 0;
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col", className), children: [
+  const canSend = value.trim().length > 0 || hasQueuedAttachments;
+  const formattingButtons = [
+    [RICH_COMPOSER_ACTION.BOLD, Bold],
+    [RICH_COMPOSER_ACTION.ITALIC, Italic],
+    [RICH_COMPOSER_ACTION.STRIKETHROUGH, Strikethrough],
+    [RICH_COMPOSER_ACTION.MONOSPACE, Code]
+  ].filter(([action]) => shows(action)).map(([action, Icon]) => {
+    const isActive = isFormattingActive({ active: activeFormatting, action });
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => applyFormatting(action),
+        "data-cv-tooltip": tooltipOf(action),
+        "aria-label": tooltipOf(action),
+        "aria-pressed": isActive,
+        className: cn(
+          COMPOSER_TOOL_BUTTON_CLASS,
+          isActive ? COMPOSER_TOOL_BUTTON_ACTIVE_CLASS : COMPOSER_TOOL_BUTTON_IDLE_CLASS
+        ),
+        children: /* @__PURE__ */ jsx2(Icon, { size: 18 })
+      },
+      action
+    );
+  });
+  return /* @__PURE__ */ jsxs2("div", { className: cn(COMPOSER_BAR_CLASS, "flex flex-col", className), children: [
     attachmentsPreview,
     quickReplies?.length ? (
       /* Uma linha só, rolando na horizontal. Deixar quebrar em várias linhas faz a barra crescer
@@ -327,32 +529,35 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
         "button",
         {
           type: "button",
-          title: quickReply.tooltip,
+          "data-cv-tooltip": quickReply.tooltip,
+          "aria-label": quickReply.tooltip,
           onClick: () => replaceContent(quickReply.text),
-          className: "flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
+          className: cn(QUICK_REPLY_PILL_CLASS, "flex-shrink-0"),
           children: quickReply.label
         },
         quickReply.id
       )) })
     ) : null,
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-end gap-2", children: [
-      /* @__PURE__ */ jsx2("div", { className: "mb-0.5 hidden items-center gap-0.5 sm:flex", children: [
-        [RICH_COMPOSER_ACTION.BOLD, Bold],
-        [RICH_COMPOSER_ACTION.ITALIC, Italic],
-        [RICH_COMPOSER_ACTION.STRIKETHROUGH, Strikethrough],
-        [RICH_COMPOSER_ACTION.MONOSPACE, Code]
-      ].filter(([action]) => shows(action)).map(([action, Icon]) => /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: () => wrapSelection(action),
-          title: tooltipOf(action),
-          "aria-label": tooltipOf(action),
-          className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
-          children: /* @__PURE__ */ jsx2(Icon, { size: 15 })
-        },
-        action
-      )) }),
+    /* @__PURE__ */ jsxs2("div", { ref: barRef, className: "flex flex-nowrap items-end gap-1", children: [
+      formattingButtons.length > 0 ? isCompact ? /* @__PURE__ */ jsxs2("div", { ref: formattingRef, className: "relative hidden flex-shrink-0 sm:block", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => setIsFormattingOpen((open) => !open),
+            "data-cv-tooltip": tooltipOf("formatting"),
+            "aria-label": tooltipOf("formatting"),
+            "aria-expanded": isFormattingOpen,
+            className: cn(
+              COMPOSER_TOOL_BUTTON_CLASS,
+              activeFormatting || isFormattingOpen ? COMPOSER_TOOL_BUTTON_ACTIVE_CLASS : COMPOSER_TOOL_BUTTON_IDLE_CLASS
+            ),
+            children: /* @__PURE__ */ jsx2(Type, { size: 18 })
+          }
+        ),
+        isFormattingOpen ? /* @__PURE__ */ jsx2("div", { className: "absolute bottom-full left-0 z-20 mb-2 flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1 py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800", children: formattingButtons }) : null
+      ] }) : /* @__PURE__ */ jsx2("div", { className: "hidden flex-shrink-0 items-center gap-1 sm:flex", children: formattingButtons }) : null,
       shows(RICH_COMPOSER_ACTION.EMOJI) ? /* @__PURE__ */ jsx2(SimpleEmojiPicker, { onSelect: insertAtCursor, label: tooltipOf("emoji") }) : null,
       variables?.length && shows(RICH_COMPOSER_ACTION.VARIABLES) ? /* @__PURE__ */ jsxs2("div", { ref: variablesRef, className: "relative", children: [
         /* @__PURE__ */ jsx2(
@@ -360,10 +565,10 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
           {
             type: "button",
             onClick: () => setIsVariablesOpen((open) => !open),
-            title: tooltipOf("variables"),
+            "data-cv-tooltip": tooltipOf("variables"),
             "aria-label": tooltipOf("variables"),
             "aria-expanded": isVariablesOpen,
-            className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
+            className: cn(COMPOSER_TOOL_BUTTON_CLASS, COMPOSER_TOOL_BUTTON_IDLE_CLASS),
             children: /* @__PURE__ */ jsx2(Braces, { size: 18 })
           }
         ),
@@ -371,7 +576,8 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
           "button",
           {
             type: "button",
-            title: variable.tooltip ?? variable.value,
+            "data-cv-tooltip": variable.tooltip ?? variable.value,
+            "aria-label": variable.tooltip ?? variable.value,
             onClick: () => {
               insertAtCursor(variable.value);
               setIsVariablesOpen(false);
@@ -402,9 +608,9 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
           {
             type: "button",
             onClick: () => fileInputRef.current?.click(),
-            title: tooltipOf("attach"),
+            "data-cv-tooltip": tooltipOf("attach"),
             "aria-label": tooltipOf("attach"),
-            className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
+            className: cn(COMPOSER_TOOL_BUTTON_CLASS, COMPOSER_TOOL_BUTTON_IDLE_CLASS),
             children: /* @__PURE__ */ jsx2(Paperclip, { size: 18 })
           }
         )
@@ -422,7 +628,7 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
           onInput: handleInput,
           onKeyDown: handleKeyDown,
           style: { minHeight: "36px", maxHeight: "120px" },
-          className: "flex-1 min-w-[180px] overflow-y-auto rounded-2xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-800 transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-teal-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 dark:empty:before:text-gray-500 before:pointer-events-none [&_strong]:font-semibold [&_em]:italic [&_del]:line-through [&_code]:rounded [&_code]:bg-black/5 [&_code]:px-0.5 [&_code]:font-mono [&_code]:text-sm dark:[&_code]:bg-white/10"
+          className: "ml-1 min-w-0 flex-1 overflow-y-auto rounded-2xl border border-transparent bg-white px-4 py-2 text-sm text-gray-800 transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-teal-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 dark:empty:before:text-gray-500 before:pointer-events-none [&_strong]:font-semibold [&_b]:font-semibold [&_em]:italic [&_i]:italic [&_del]:line-through [&_s]:line-through [&_strike]:line-through [&_code]:rounded [&_code]:bg-black/5 [&_code]:px-0.5 [&_code]:font-mono [&_code]:text-sm dark:[&_code]:bg-white/10"
         }
       ),
       !canSend && idleAction ? /* @__PURE__ */ jsx2("div", { className: "flex-shrink-0", children: idleAction }) : /* @__PURE__ */ jsx2(
@@ -431,7 +637,7 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
           type: "button",
           onClick: onSend,
           disabled: disabled || isSending || !canSend,
-          title: tooltipOf("send"),
+          "data-cv-tooltip": tooltipOf("send"),
           "aria-label": tooltipOf("send"),
           className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-teal-600 text-white transition-colors hover:bg-teal-700 disabled:cursor-not-allowed disabled:opacity-40",
           children: isSending ? /* @__PURE__ */ jsx2("span", { className: "text-xs", children: "\u23F3" }) : /* @__PURE__ */ jsx2(SendHorizonal, { size: 16 })
@@ -523,9 +729,9 @@ function WhatsAppMessageEditor({
   const toolbarButtonClass = "inline-flex items-center justify-center h-8 w-8 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
   return /* @__PURE__ */ jsxs3("div", { children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-1.5 mb-2", children: [
-      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("*"), className: toolbarButtonClass, title: editorLabels.boldHint, "aria-label": editorLabels.bold, children: /* @__PURE__ */ jsx3(Bold2, { size: 15 }) }),
-      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("_"), className: toolbarButtonClass, title: editorLabels.italicHint, "aria-label": editorLabels.italic, children: /* @__PURE__ */ jsx3(Italic2, { size: 15 }) }),
-      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("~"), className: toolbarButtonClass, title: editorLabels.strikethroughHint, "aria-label": editorLabels.strikethrough, children: /* @__PURE__ */ jsx3(Strikethrough2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("*"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.boldHint, "aria-label": editorLabels.bold, children: /* @__PURE__ */ jsx3(Bold2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("_"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.italicHint, "aria-label": editorLabels.italic, children: /* @__PURE__ */ jsx3(Italic2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("~"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.strikethroughHint, "aria-label": editorLabels.strikethrough, children: /* @__PURE__ */ jsx3(Strikethrough2, { size: 15 }) }),
       placeholders.length > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
         /* @__PURE__ */ jsx3("span", { className: "mx-1 h-5 w-px bg-gray-200 dark:bg-gray-600" }),
         placeholders.map((token) => /* @__PURE__ */ jsx3(
@@ -534,7 +740,8 @@ function WhatsAppMessageEditor({
             type: "button",
             onClick: () => insertAtCursor(token),
             className: "inline-flex items-center h-8 px-2 rounded-lg border border-gray-200 dark:border-gray-600 text-xs text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/40 transition-colors",
-            title: editorLabels.insertPlaceholder(token),
+            "data-cv-tooltip": editorLabels.insertPlaceholder(token),
+            "aria-label": editorLabels.insertPlaceholder(token),
             children: token
           },
           token
@@ -618,7 +825,7 @@ function Avatar({ name, avatarUrl, size = "md", className = "", labels }) {
     "div",
     {
       className: `${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`,
-      title: name,
+      "data-cv-tooltip": name,
       children: getInitials(name)
     }
   );
@@ -793,6 +1000,8 @@ var ConversationListItem = ({
   return /* @__PURE__ */ jsxs4(
     "button",
     {
+      "data-cv-tooltip": name,
+      "aria-label": name,
       onClick: handleClick,
       className: `w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${highlightActive ? "hover:bg-[#f0f2f5]" : ""} ${showDivider ? "border-b border-[#e9edef]" : ""}`,
       style: {
@@ -808,8 +1017,8 @@ var ConversationListItem = ({
             /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 min-w-0", children: [
               !conversation.clientName && flag ? /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: flag }) : null,
               /* @__PURE__ */ jsx5("span", { className: "text-[16px] text-[#111b21] truncate", children: name }),
-              windowStatus && windowStatus.label === "expired" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-red-500 flex-shrink-0", title: expiredWindowLabel }),
-              windowStatus && windowStatus.label === "warning" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-orange-500 flex-shrink-0", title: warningWindowLabel })
+              windowStatus && windowStatus.label === "expired" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-red-500 flex-shrink-0", "data-cv-tooltip": expiredWindowLabel }),
+              windowStatus && windowStatus.label === "warning" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-orange-500 flex-shrink-0", "data-cv-tooltip": warningWindowLabel })
             ] }),
             timestamp && /* @__PURE__ */ jsx5("span", { className: "text-xs text-[#667781] flex-shrink-0", children: timestamp })
           ] }),
@@ -835,7 +1044,7 @@ var ConversationListItem = ({
 };
 
 // src/Toast.tsx
-import { createContext, useContext, useState as useState3, useCallback as useCallback2, useEffect as useEffect3 } from "react";
+import { createContext, useContext, useState as useState4, useCallback as useCallback2, useEffect as useEffect4 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
 var nextId = 0;
@@ -847,6 +1056,7 @@ var toast = {
     }
   }
 };
+var TOAST_CLOSE_LABEL = "Fechar aviso";
 var typeStyles = {
   success: "bg-green-600",
   error: "bg-red-600",
@@ -865,8 +1075,8 @@ var typeIcons = {
   ] })
 };
 function ToastItemComponent({ item, onRemove }) {
-  const [exiting, setExiting] = useState3(false);
-  useEffect3(() => {
+  const [exiting, setExiting] = useState4(false);
+  useEffect4(() => {
     const timer = setTimeout(() => {
       setExiting(true);
       setTimeout(() => onRemove(item.id), 300);
@@ -887,6 +1097,8 @@ function ToastItemComponent({ item, onRemove }) {
               setExiting(true);
               setTimeout(() => onRemove(item.id), 300);
             },
+            "data-cv-tooltip": TOAST_CLOSE_LABEL,
+            "aria-label": TOAST_CLOSE_LABEL,
             className: "flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity",
             children: /* @__PURE__ */ jsxs5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
               /* @__PURE__ */ jsx6("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
@@ -899,7 +1111,7 @@ function ToastItemComponent({ item, onRemove }) {
   );
 }
 function ToastProvider({ children }) {
-  const [items, setItems] = useState3([]);
+  const [items, setItems] = useState4([]);
   const show = useCallback2((type, message) => {
     const id = ++nextId;
     setItems((prev) => [...prev, { id, type, message }]);
@@ -907,7 +1119,7 @@ function ToastProvider({ children }) {
   const remove = useCallback2((id) => {
     setItems((prev) => prev.filter((item) => item.id !== id));
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     singletonShow = show;
     return () => {
       singletonShow = null;
@@ -939,10 +1151,10 @@ function useToast() {
 }
 
 // src/MessageText.tsx
-import { useCallback as useCallback3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useState as useState5 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function MessageText({ message }) {
-  const [copied, setCopied] = useState4(false);
+  const [copied, setCopied] = useState5(false);
   const handleCopy = useCallback3(async () => {
     if (!message.content) return;
     try {
@@ -996,11 +1208,11 @@ var CONVERSATION_WINDOW = {
   EXPIRED: "expired"
 };
 var WINDOW_FILTERS = [
-  { value: CONVERSATION_WINDOW.ALL, label: "Todas", dotClass: "" },
-  { value: CONVERSATION_WINDOW.FRESH, label: "<12h", dotClass: "bg-green-500" },
-  { value: CONVERSATION_WINDOW.WARNING, label: "12-21h", dotClass: "bg-yellow-500" },
-  { value: CONVERSATION_WINDOW.CRITICAL, label: "21-24h", dotClass: "bg-red-500" },
-  { value: CONVERSATION_WINDOW.EXPIRED, label: ">24h", dotClass: "bg-gray-400" }
+  { value: CONVERSATION_WINDOW.ALL, label: "Todas", tone: "" },
+  { value: CONVERSATION_WINDOW.FRESH, label: "<12h", tone: "fresh" },
+  { value: CONVERSATION_WINDOW.WARNING, label: "12-21h", tone: "warning" },
+  { value: CONVERSATION_WINDOW.CRITICAL, label: "21-24h", tone: "critical" },
+  { value: CONVERSATION_WINDOW.EXPIRED, label: ">24h", tone: "expired" }
 ];
 var WARNING_RATIO = 0.5;
 var CRITICAL_RATIO = 0.875;
@@ -1025,6 +1237,14 @@ function formatStalledFor(lastAt, now) {
   return `${minutes}m`;
 }
 
+// src/ConversationRow.tsx
+import { AlarmClock, Bot, Hourglass, Play, UserRound } from "lucide-react";
+
+// src/icon.constant.ts
+var ICON_SIZE_PILL = 12;
+var ICON_SIZE_INLINE = 14;
+var ICON_SIZE_ACTION = 16;
+
 // src/ChannelIcon.tsx
 import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var CHANNEL_BRAND_COLOR = {
@@ -1093,6 +1313,7 @@ var WINDOW_TITLE = {
   [CONVERSATION_WINDOW.EXPIRED]: "Janela de 24h expirada \u2014 s\xF3 template"
 };
 var STALLED_THRESHOLD_MS = 60 * 60 * 1e3;
+var TAKEOVER_LABEL = "Continuar Atendimento";
 var WINDOW_BAR_CLASS = {
   [CONVERSATION_WINDOW.ALL]: "bg-transparent",
   [CONVERSATION_WINDOW.FRESH]: "bg-green-500",
@@ -1122,7 +1343,7 @@ function ConversationRow({
       "span",
       {
         className: cn("w-1 shrink-0", WINDOW_BAR_CLASS[window2], classNames?.windowBar),
-        title: WINDOW_TITLE[window2],
+        "data-cv-tooltip": WINDOW_TITLE[window2],
         "aria-label": WINDOW_TITLE[window2]
       }
     ),
@@ -1155,25 +1376,56 @@ function ConversationRow({
           " ",
           capabilities.label
         ] }),
-        conversation.mode === "human" ? /* @__PURE__ */ jsx11("span", { className: "cv-pill cv-pill--success", children: "\u{1F9D1}\u200D\u{1F4BC} em atendimento" }) : null,
-        isWaiting ? /* @__PURE__ */ jsx11("span", { className: "cv-pill cv-pill--warning", children: "\u23F3 aguardando atendimento" }) : null,
-        !isWaiting && conversation.mode === "bot" ? /* @__PURE__ */ jsx11("span", { className: "cv-pill", children: "\u{1F916} bot ativo" }) : null,
+        conversation.mode === "human" ? /* @__PURE__ */ jsxs9("span", { className: "cv-pill cv-pill--success", children: [
+          /* @__PURE__ */ jsx11(UserRound, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
+          " em atendimento"
+        ] }) : null,
+        isWaiting ? /* @__PURE__ */ jsxs9("span", { className: "cv-pill cv-pill--warning", children: [
+          /* @__PURE__ */ jsx11(Hourglass, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
+          " aguardando atendimento"
+        ] }) : null,
+        !isWaiting && conversation.mode === "bot" ? /* @__PURE__ */ jsxs9("span", { className: "cv-pill", children: [
+          /* @__PURE__ */ jsx11(Bot, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
+          " bot ativo"
+        ] }) : null,
         isStalled ? /* @__PURE__ */ jsxs9("span", { className: "cv-pill cv-pill--danger", children: [
-          "\u23F1\uFE0F parada h\xE1 ",
+          /* @__PURE__ */ jsx11(AlarmClock, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
+          " parada h\xE1",
+          " ",
           formatStalledFor(conversation.lastAt, now)
         ] }) : null,
-        isWaiting ? /* @__PURE__ */ jsx11("button", { type: "button", onClick: onTakeover, disabled: busy, className: "cv-header-action", children: "\u25B6\uFE0F Continuar Atendimento" }) : null
+        isWaiting ? /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: onTakeover,
+            disabled: busy,
+            "data-cv-tooltip": TAKEOVER_LABEL,
+            "aria-label": TAKEOVER_LABEL,
+            className: "cv-header-action",
+            children: [
+              /* @__PURE__ */ jsx11(Play, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
+              " ",
+              TAKEOVER_LABEL
+            ]
+          }
+        ) : null
       ] })
     ] })
   ] });
 }
 
 // src/ConversationHeader.tsx
-import { useState as useState5 } from "react";
+import { useRef as useRef4, useState as useState6 } from "react";
+import { ArrowLeft, Bot as Bot2, Download, FileText, Headset, MoreVertical, UserRound as UserRound2, X } from "lucide-react";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var HEADER_UTILITIES_MIN_WIDTH = 720;
+var HEADER_ACTIONS_MIN_WIDTH = 600;
 var DEFAULT_CONVERSATION_HEADER_LABELS = {
-  botMode: "\u{1F916} atendimento autom\xE1tico",
-  humanMode: "\u{1F9D1}\u200D\u{1F4BC} atendimento humano",
+  // Sem emoji no rótulo: quem desenha o modo é o ícone ao lado, e o emoji embutido no texto voltava
+  // a aparecer no tooltip e no leitor de tela como um caractere sem nome.
+  botMode: "atendimento autom\xE1tico",
+  humanMode: "atendimento humano",
   returnToBot: "Devolver ao bot",
   finish: "Finalizar",
   takeover: "Assumir atendimento",
@@ -1203,31 +1455,71 @@ function ConversationHeader({
   const displayHandle = formatContactHandle({ handle, channel: conversation.channel });
   const flag = contactFlag({ handle, channel: conversation.channel });
   const capabilities = capabilitiesOf(conversation.channel);
-  const [menuOpen, setMenuOpen] = useState5(false);
-  const utilities = [
-    onOpenDocuments ? { key: "documents", icon: "\u{1F4C4}", label: labels.documents, run: onOpenDocuments, active: documentsOpen } : void 0,
-    onDownload ? { key: "download", icon: "\u2B07\uFE0F", label: labels.download, run: onDownload, active: false } : void 0,
+  const [menuOpen, setMenuOpen] = useState6(false);
+  const headerRef = useRef4(null);
+  const headerWidth = useContainerWidth(headerRef);
+  const showsUtilitiesInline = headerWidth === void 0 || headerWidth >= HEADER_UTILITIES_MIN_WIDTH;
+  const showsActionsInline = headerWidth === void 0 || headerWidth >= HEADER_ACTIONS_MIN_WIDTH;
+  const utilityCandidates = [
+    onOpenDocuments ? {
+      key: "documents",
+      icon: /* @__PURE__ */ jsx12(FileText, { size: ICON_SIZE_ACTION }),
+      label: labels.documents,
+      run: onOpenDocuments,
+      active: documentsOpen
+    } : void 0,
+    onDownload ? {
+      key: "download",
+      icon: /* @__PURE__ */ jsx12(Download, { size: ICON_SIZE_ACTION }),
+      label: labels.download,
+      run: onDownload,
+      active: false
+    } : void 0,
     ...(extraUtilities ?? []).map((utility) => ({ ...utility, active: utility.active ?? false }))
-  ].filter(
-    (utility) => Boolean(utility)
-  );
-  const actions = [
-    !isHuman && onTakeover ? { key: "takeover", label: labels.takeover, run: onTakeover, className: "cv-header-action--primary" } : void 0,
-    isHuman && onReturnToBot ? { key: "release", label: labels.returnToBot, run: onReturnToBot, className: "" } : void 0,
-    isHuman && onFinish ? { key: "finish", label: `\u2715 ${labels.finish}`, run: onFinish, className: "cv-header-action--danger" } : void 0
-  ].filter((action) => Boolean(action));
+  ];
+  const utilities = utilityCandidates.filter((utility) => Boolean(utility));
+  const actionCandidates = [
+    !isHuman && onTakeover ? {
+      key: "takeover",
+      icon: /* @__PURE__ */ jsx12(Headset, { size: ICON_SIZE_ACTION }),
+      label: labels.takeover,
+      hint: labels.takeover,
+      run: onTakeover,
+      className: "cv-header-action--primary"
+    } : void 0,
+    isHuman && onReturnToBot ? {
+      key: "release",
+      icon: /* @__PURE__ */ jsx12(Bot2, { size: ICON_SIZE_ACTION }),
+      label: labels.returnToBot,
+      hint: labels.returnToBot,
+      run: onReturnToBot,
+      className: ""
+    } : void 0,
+    isHuman && onFinish ? {
+      key: "finish",
+      icon: /* @__PURE__ */ jsx12(X, { size: ICON_SIZE_ACTION }),
+      label: labels.finish,
+      hint: labels.finish,
+      run: onFinish,
+      className: "cv-header-action--danger"
+    } : void 0
+  ];
+  const actions = actionCandidates.filter((action) => Boolean(action));
   const menuItems = [
-    ...utilities.map((utility) => ({
+    ...showsUtilitiesInline ? [] : utilities.map((utility) => ({
       key: utility.key,
-      label: `${utility.icon} ${utility.label}`,
+      icon: utility.icon,
+      label: utility.label,
+      hint: utility.label,
       run: utility.run,
       className: ""
     })),
-    ...actions
+    ...showsActionsInline ? [] : actions
   ];
   return /* @__PURE__ */ jsxs10(
     "header",
     {
+      ref: headerRef,
       className: cn(
         "flex flex-nowrap items-center justify-between gap-3 border-b px-4 py-3",
         classNames?.root,
@@ -1235,51 +1527,67 @@ function ConversationHeader({
       ),
       children: [
         /* @__PURE__ */ jsxs10("div", { className: cn("flex min-w-0 flex-1 items-center gap-3", classNames?.identity), children: [
-          onBack ? /* @__PURE__ */ jsx12("button", { type: "button", onClick: onBack, className: "cv-back cv-touch", "aria-label": labels.back, title: labels.back, children: "\u2190" }) : null,
+          onBack ? /* @__PURE__ */ jsx12("button", { type: "button", onClick: onBack, className: "cv-back cv-touch", "aria-label": labels.back, "data-cv-tooltip": labels.back, children: /* @__PURE__ */ jsx12(ArrowLeft, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }) }) : null,
           /* @__PURE__ */ jsx12(Avatar, { name: conversation.clientName, size: "md" }),
           /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx12("p", { className: cn("truncate font-medium", classNames?.name), children: conversation.clientName ?? displayHandle }),
-            /* @__PURE__ */ jsxs10("p", { className: cn("truncate text-xs text-gray-500", classNames?.meta), children: [
-              flag ? `${flag} ` : "",
-              displayHandle,
-              /* @__PURE__ */ jsxs10("span", { className: "ml-2 inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs10("p", { className: cn("flex min-w-0 flex-nowrap items-center gap-2 overflow-hidden text-xs text-gray-500", classNames?.meta), children: [
+              /* @__PURE__ */ jsxs10("span", { className: "truncate", children: [
+                flag ? `${flag} ` : "",
+                displayHandle
+              ] }),
+              /* @__PURE__ */ jsxs10("span", { className: "inline-flex flex-shrink-0 items-center gap-1", children: [
                 /* @__PURE__ */ jsx12(ChannelIcon, { channel: conversation.channel }),
-                /* @__PURE__ */ jsx12("span", { className: "cv-only-wide", children: capabilities.label })
+                showsUtilitiesInline ? /* @__PURE__ */ jsx12("span", { children: capabilities.label }) : null
               ] }),
-              /* @__PURE__ */ jsx12("span", { className: "ml-2 cv-only-wide", children: isHuman ? labels.humanMode : labels.botMode }),
-              /* @__PURE__ */ jsx12("span", { className: "ml-1 cv-only-narrow", title: isHuman ? labels.humanMode : labels.botMode, children: isHuman ? "\u{1F9D1}\u200D\u{1F4BC}" : "\u{1F916}" })
+              /* @__PURE__ */ jsxs10(
+                "span",
+                {
+                  className: "inline-flex flex-shrink-0 items-center gap-1",
+                  ...showsUtilitiesInline ? {} : { role: "img", "aria-label": isHuman ? labels.humanMode : labels.botMode, "data-cv-tooltip": isHuman ? labels.humanMode : labels.botMode },
+                  children: [
+                    isHuman ? /* @__PURE__ */ jsx12(UserRound2, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }) : /* @__PURE__ */ jsx12(Bot2, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
+                    showsUtilitiesInline ? /* @__PURE__ */ jsx12("span", { children: isHuman ? labels.humanMode : labels.botMode }) : null
+                  ]
+                }
+              )
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs10("div", { className: cn("flex shrink-0 items-center gap-2", classNames?.actions), children: [
-          /* @__PURE__ */ jsxs10("div", { className: cn("hidden items-center gap-2 lg:flex", classNames?.desktopActions), children: [
-            utilities.map((utility) => /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs10("div", { className: cn("flex items-center gap-2", classNames?.desktopActions), children: [
+            (showsUtilitiesInline ? utilities : []).map((utility) => /* @__PURE__ */ jsx12(
               "button",
               {
                 type: "button",
                 onClick: utility.run,
                 disabled: busy,
                 "aria-pressed": utility.active,
-                title: utility.label,
+                "data-cv-tooltip": utility.label,
                 "aria-label": utility.label,
                 className: `cv-header-icon ${utility.active ? "cv-header-icon--active" : ""}`,
                 children: utility.icon
               },
               utility.key
             )),
-            actions.map((action) => /* @__PURE__ */ jsx12(
+            (showsActionsInline ? actions : []).map((action) => /* @__PURE__ */ jsxs10(
               "button",
               {
                 type: "button",
                 onClick: action.run,
                 disabled: busy,
+                "data-cv-tooltip": action.hint,
+                "aria-label": action.hint,
                 className: `cv-header-action ${action.className}`,
-                children: action.label
+                children: [
+                  action.icon,
+                  action.label
+                ]
               },
               action.key
             ))
           ] }),
-          menuItems.length > 0 ? /* @__PURE__ */ jsxs10("div", { className: cn("cv-menu lg:hidden", classNames?.mobileMenu), children: [
+          menuItems.length > 0 ? /* @__PURE__ */ jsxs10("div", { className: cn("cv-menu", classNames?.mobileMenu), children: [
             /* @__PURE__ */ jsx12(
               "button",
               {
@@ -1287,12 +1595,12 @@ function ConversationHeader({
                 onClick: () => setMenuOpen(!menuOpen),
                 "aria-expanded": menuOpen,
                 "aria-label": labels.moreActions,
-                title: labels.moreActions,
+                "data-cv-tooltip": labels.moreActions,
                 className: "cv-header-icon cv-touch",
-                children: "\u22EE"
+                children: /* @__PURE__ */ jsx12(MoreVertical, { size: ICON_SIZE_ACTION, "aria-hidden": "true" })
               }
             ),
-            menuOpen ? /* @__PURE__ */ jsx12("div", { className: "cv-menu-panel", role: "menu", children: menuItems.map((item) => /* @__PURE__ */ jsx12(
+            menuOpen ? /* @__PURE__ */ jsx12("div", { className: "cv-menu-panel", role: "menu", children: menuItems.map((item) => /* @__PURE__ */ jsxs10(
               "button",
               {
                 type: "button",
@@ -1302,8 +1610,13 @@ function ConversationHeader({
                   item.run();
                 },
                 disabled: busy,
+                "data-cv-tooltip": item.hint,
+                "aria-label": item.hint,
                 className: `cv-header-action cv-touch ${item.className}`,
-                children: item.label
+                children: [
+                  item.icon,
+                  item.label
+                ]
               },
               item.key
             )) }) : null
@@ -1315,17 +1628,17 @@ function ConversationHeader({
 }
 
 // src/ConversationContextPanel.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { Check, ChevronDown, ChevronUp, Clock, Pencil } from "lucide-react";
 
 // src/useIsNarrow.ts
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 var NARROW_MAX_WIDTH_PX = 1023;
 function useIsNarrow() {
-  const [isNarrow, setIsNarrow] = useState6(
+  const [isNarrow, setIsNarrow] = useState7(
     () => typeof window !== "undefined" && window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH_PX}px)`).matches
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const query = window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH_PX}px)`);
     const handleChange = (event) => setIsNarrow(event.matches);
     query.addEventListener("change", handleChange);
@@ -1387,7 +1700,7 @@ function ConversationContextPanel({
   const counts = { completed: 0, pending: 0, editing: 0 };
   for (const entry of entries) counts[statusOf(entry)] += 1;
   const isNarrow = useIsNarrow();
-  const [manualOpen, setManualOpen] = useState7(void 0);
+  const [manualOpen, setManualOpen] = useState8(void 0);
   const open = manualOpen ?? defaultOpen ?? (!isNarrow && counts.completed > 0);
   return (
     // Faixa azul clara com separador, como o wrapper do financiamento: sem ela o card encostava
@@ -1406,7 +1719,8 @@ function ConversationContextPanel({
               type: "button",
               onClick: () => setManualOpen(!open),
               "aria-expanded": open,
-              title: open ? labels.collapse : labels.expand,
+              "data-cv-tooltip": open ? labels.collapse : labels.expand,
+              "aria-label": open ? labels.collapse : labels.expand,
               className: cn(
                 "flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-2.5 text-left transition-colors hover:bg-blue-100/40 dark:hover:bg-blue-900/20",
                 classNames?.toggle
@@ -1504,7 +1818,7 @@ function ConversationContextPanel({
                                 "truncate text-center text-xs font-semibold",
                                 entry.value ? "text-gray-900 dark:text-gray-100" : "italic font-normal text-gray-400 dark:text-gray-500"
                               ),
-                              title: entry.value ?? labels.notCollected,
+                              "data-cv-tooltip": entry.value ?? labels.notCollected,
                               children: entry.value ?? labels.notCollected
                             }
                           )
@@ -1524,11 +1838,12 @@ function ConversationContextPanel({
 }
 
 // src/WindowExpiredNotice.tsx
+import { AlarmClock as AlarmClock2, Send } from "lucide-react";
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_WINDOW_EXPIRED_LABELS = {
-  title: "\u23F0 Janela de 24h expirada \u2014 o WhatsApp n\xE3o aceita mensagens livres.",
+  title: "Janela de 24h expirada \u2014 o WhatsApp n\xE3o aceita mensagens livres.",
   description: "Envie uma mensagem de template para reabrir a conversa com o cliente.",
-  sendTemplate: "\u{1F4E8} Enviar Template (HSM)"
+  sendTemplate: "Enviar Template (HSM)"
 };
 function WindowExpiredNotice({
   onSendTemplate,
@@ -1538,9 +1853,15 @@ function WindowExpiredNotice({
 }) {
   const labels = { ...DEFAULT_WINDOW_EXPIRED_LABELS, ...labelsOverride };
   return /* @__PURE__ */ jsxs12("div", { role: "status", className: cn("border-t bg-yellow-50 px-4 py-3 text-sm dark:bg-yellow-950", className), children: [
-    /* @__PURE__ */ jsx14("p", { className: "font-medium text-yellow-900 dark:text-yellow-200", children: labels.title }),
+    /* @__PURE__ */ jsxs12("p", { className: "flex items-center gap-2 font-medium text-yellow-900 dark:text-yellow-200", children: [
+      /* @__PURE__ */ jsx14(AlarmClock2, { size: ICON_SIZE_INLINE, "aria-hidden": "true", className: "shrink-0" }),
+      labels.title
+    ] }),
     /* @__PURE__ */ jsx14("p", { className: "text-yellow-800 dark:text-yellow-300", children: labels.description }),
-    onSendTemplate ? /* @__PURE__ */ jsx14("button", { type: "button", onClick: onSendTemplate, disabled, className: "cv-header-action mt-2", children: labels.sendTemplate }) : null
+    onSendTemplate ? /* @__PURE__ */ jsxs12("button", { "data-cv-tooltip": labels.sendTemplate, "aria-label": labels.sendTemplate, type: "button", onClick: onSendTemplate, disabled, className: "cv-header-action mt-2", children: [
+      /* @__PURE__ */ jsx14(Send, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
+      labels.sendTemplate
+    ] }) : null
   ] });
 }
 function isWindowBlocking(window2) {
@@ -1548,12 +1869,12 @@ function isWindowBlocking(window2) {
 }
 
 // src/documents/DocumentsWorkspace.tsx
-import { useEffect as useEffect6, useMemo as useMemo2, useState as useState10 } from "react";
-import { Download, Eye, MessageSquare, Trash2, X as X2 } from "lucide-react";
+import { useEffect as useEffect7, useMemo as useMemo2, useState as useState11 } from "react";
+import { Download as Download2, Eye, MessageSquare, Trash2, X as X3 } from "lucide-react";
 
 // src/listing/index.tsx
-import { useState as useState8 } from "react";
-import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown as ChevronDown2, X } from "lucide-react";
+import { useState as useState9 } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown as ChevronDown2, X as X2 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function SortableHead({ label, field, activeField, direction, onSort, className }) {
   const isActive = activeField === field;
@@ -1561,6 +1882,7 @@ function SortableHead({ label, field, activeField, direction, onSort, className
   return /* @__PURE__ */ jsx15("th", { scope: "col", className: cn("px-3 py-2 text-left text-xs font-medium", className), children: /* @__PURE__ */ jsxs13(
     "button",
     {
+      "data-cv-tooltip": label,
       type: "button",
       onClick: () => onSort(field),
       "aria-label": label,
@@ -1573,7 +1895,7 @@ function SortableHead({ label, field, activeField, direction, onSort, className
   ) });
 }
 function MultiSelectFilter({ label, options, selected, onChange, className }) {
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState9(false);
   function toggle(value) {
     onChange(selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value]);
   }
@@ -1581,6 +1903,8 @@ function MultiSelectFilter({ label, options, selected, onChange, className }) {
     /* @__PURE__ */ jsxs13(
       "button",
       {
+        "data-cv-tooltip": label,
+        "aria-label": label,
         type: "button",
         onClick: () => setOpen((current) => !current),
         className: "cv-header-action inline-flex items-center gap-1",
@@ -1613,8 +1937,8 @@ function BulkActionBar({ selectedCount, selectedLabel, clearLabel, onClear, chil
   return /* @__PURE__ */ jsxs13("div", { className: "cv-bulk-bar", role: "toolbar", "aria-label": selectedLabel(selectedCount), children: [
     /* @__PURE__ */ jsx15("span", { className: "text-xs font-medium", children: selectedLabel(selectedCount) }),
     children,
-    /* @__PURE__ */ jsxs13("button", { type: "button", onClick: onClear, className: "cv-header-action ml-auto inline-flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx15(X, { size: 12, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs13("button", { "data-cv-tooltip": clearLabel, "aria-label": clearLabel, type: "button", onClick: onClear, className: "cv-header-action ml-auto inline-flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx15(X2, { size: 12, "aria-hidden": "true" }),
       clearLabel
     ] })
   ] });
@@ -1651,6 +1975,7 @@ function ListingPagination({
       /* @__PURE__ */ jsx15(
         "button",
         {
+          "data-cv-tooltip": labels.previous,
           type: "button",
           onClick: () => onPageChange(page - 1),
           disabled: page <= 1,
@@ -1663,6 +1988,7 @@ function ListingPagination({
       /* @__PURE__ */ jsx15(
         "button",
         {
+          "data-cv-tooltip": labels.next,
           type: "button",
           onClick: () => onPageChange(page + 1),
           disabled: page >= lastPage,
@@ -1676,7 +2002,7 @@ function ListingPagination({
 }
 
 // src/hooks/useUrlFilterState.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState10 } from "react";
 var LIST_SEPARATOR = ",";
 function readParams() {
   if (typeof window === "undefined") return new URLSearchParams();
@@ -1691,7 +2017,7 @@ function writeParam(key, value) {
   window.history.replaceState(null, "", query ? `${window.location.pathname}?${query}` : window.location.pathname);
 }
 function useUrlStringState(key, initial, { enabled = true } = {}) {
-  const [value, setValue] = useState9(() => enabled ? readParams().get(key) ?? initial : initial);
+  const [value, setValue] = useState10(() => enabled ? readParams().get(key) ?? initial : initial);
   const update = useCallback4(
     (next) => {
       setValue(next);
@@ -1702,7 +2028,7 @@ function useUrlStringState(key, initial, { enabled = true } = {}) {
   return [value, update];
 }
 function useUrlNumberState(key, initial, { enabled = true } = {}) {
-  const [value, setValue] = useState9(() => {
+  const [value, setValue] = useState10(() => {
     if (!enabled) return initial;
     const raw = Number(readParams().get(key));
     return Number.isFinite(raw) && raw > 0 ? raw : initial;
@@ -1717,7 +2043,7 @@ function useUrlNumberState(key, initial, { enabled = true } = {}) {
   return [value, update];
 }
 function useUrlArrayState(key, { enabled = true } = {}) {
-  const [value, setValue] = useState9(() => {
+  const [value, setValue] = useState10(() => {
     if (!enabled) return [];
     const raw = readParams().get(key);
     return raw ? raw.split(LIST_SEPARATOR).filter(Boolean) : [];
@@ -1732,8 +2058,8 @@ function useUrlArrayState(key, { enabled = true } = {}) {
   return [value, update];
 }
 function useDebouncedValue(value, delayMs = 300) {
-  const [debounced, setDebounced] = useState9(value);
-  useEffect5(() => {
+  const [debounced, setDebounced] = useState10(value);
+  useEffect6(() => {
     const timer = setTimeout(() => setDebounced(value), delayMs);
     return () => clearTimeout(timer);
   }, [value, delayMs]);
@@ -1813,14 +2139,14 @@ function DocumentsWorkspace({
   const [sortDirection, setSortDirection] = useUrlStringState("sortDirection", "desc", urlOptions);
   const [page, setPage] = useUrlNumberState("page", 1, urlOptions);
   const [perPage, setPerPage] = useUrlNumberState("limit", initialPerPage, urlOptions);
-  const [extra, setExtra] = useState10({});
-  const [documents, setDocuments] = useState10([]);
-  const [total, setTotal] = useState10(0);
-  const [loading, setLoading] = useState10(false);
-  const [failed, setFailed] = useState10(false);
-  const [selectedIds, setSelectedIds] = useState10(/* @__PURE__ */ new Set());
-  const [reloadToken, setReloadToken] = useState10(0);
-  const [busy, setBusy] = useState10(false);
+  const [extra, setExtra] = useState11({});
+  const [documents, setDocuments] = useState11([]);
+  const [total, setTotal] = useState11(0);
+  const [loading, setLoading] = useState11(false);
+  const [failed, setFailed] = useState11(false);
+  const [selectedIds, setSelectedIds] = useState11(/* @__PURE__ */ new Set());
+  const [reloadToken, setReloadToken] = useState11(0);
+  const [busy, setBusy] = useState11(false);
   const debouncedSearch = useDebouncedValue(search);
   const fetchAll = context?.api.getAllDocuments;
   const removeDocument = context?.api.deleteDocument;
@@ -1835,7 +2161,7 @@ function DocumentsWorkspace({
     [categories, labels.categoryLabels]
   );
   const hasFilters = debouncedSearch !== "" || source.length > 0 || category.length > 0 || startDate !== "" || endDate !== "" || Object.keys(extra).length > 0;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!fetchAll) return;
     let active = true;
     setLoading(true);
@@ -1864,7 +2190,7 @@ function DocumentsWorkspace({
       active = false;
     };
   }, [fetchAll, debouncedSearch, source, category, startDate, endDate, sortField, sortDirection, page, perPage, extraKey, reloadToken]);
-  useEffect6(() => {
+  useEffect7(() => {
     setPage(1);
     setSelectedIds(/* @__PURE__ */ new Set());
   }, [debouncedSearch, source, category, startDate, endDate, perPage, extraKey]);
@@ -1928,6 +2254,7 @@ function DocumentsWorkspace({
   const direction = sortDirection === "asc" ? "asc" : "desc";
   const canSelect = Boolean(removeDocument ?? downloadArchive);
   return /* @__PURE__ */ jsxs14("div", { className: cn("space-y-4", classNames?.root, className), children: [
+    /* @__PURE__ */ jsx16(TooltipLayer, {}),
     /* @__PURE__ */ jsxs14("header", { className: cn("space-y-0.5", classNames?.header), children: [
       /* @__PURE__ */ jsx16("h2", { className: "text-lg font-semibold", children: labels.title }),
       /* @__PURE__ */ jsx16("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: labels.subtitle(total) })
@@ -1977,8 +2304,8 @@ function DocumentsWorkspace({
         )
       ] }) : null,
       renderFilters?.({ extra, setExtra }),
-      hasFilters ? /* @__PURE__ */ jsxs14("button", { type: "button", onClick: clearFilters, className: "cv-header-action inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx16(X2, { size: 12, "aria-hidden": "true" }),
+      hasFilters ? /* @__PURE__ */ jsxs14("button", { "data-cv-tooltip": labels.clearFilters, "aria-label": labels.clearFilters, type: "button", onClick: clearFilters, className: "cv-header-action inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx16(X3, { size: 12, "aria-hidden": "true" }),
         labels.clearFilters
       ] }) : null
     ] }),
@@ -1993,12 +2320,14 @@ function DocumentsWorkspace({
           downloadArchive ? /* @__PURE__ */ jsxs14(
             "button",
             {
+              "data-cv-tooltip": labels.bulkDownloadZip,
+              "aria-label": labels.bulkDownloadZip,
               type: "button",
               onClick: () => void handleDownloadArchive(),
               disabled: busy,
               className: "cv-header-action inline-flex items-center gap-1 disabled:opacity-40",
               children: [
-                /* @__PURE__ */ jsx16(Download, { size: 12, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx16(Download2, { size: 12, "aria-hidden": "true" }),
                 labels.bulkDownloadZip
               ]
             }
@@ -2006,6 +2335,8 @@ function DocumentsWorkspace({
           removeDocument ? /* @__PURE__ */ jsxs14(
             "button",
             {
+              "data-cv-tooltip": labels.bulkRemove(selectedIds.size),
+              "aria-label": labels.bulkRemove(selectedIds.size),
               type: "button",
               onClick: () => {
                 if (window.confirm(labels.bulkRemoveConfirm(selectedIds.size))) void handleRemove(Array.from(selectedIds));
@@ -2057,14 +2388,15 @@ function DocumentsWorkspace({
           ) }) : null,
           /* @__PURE__ */ jsx16("td", { className: "max-w-xs px-3 py-2", children: /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 items-center gap-2", children: [
             /* @__PURE__ */ jsx16(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
-            /* @__PURE__ */ jsx16("span", { className: "truncate font-medium", title: document2.filename, children: document2.filename })
+            /* @__PURE__ */ jsx16("span", { className: "truncate font-medium", "data-cv-tooltip": document2.filename, children: document2.filename })
           ] }) }),
           /* @__PURE__ */ jsx16("td", { className: "hidden px-3 py-2 sm:table-cell", children: onOpenConversation ? /* @__PURE__ */ jsxs14(
             "button",
             {
               type: "button",
               onClick: () => onOpenConversation(document2.conversationId),
-              title: labels.openConversation,
+              "data-cv-tooltip": labels.openConversation,
+              "aria-label": labels.openConversation,
               className: "cv-header-action inline-flex items-center gap-1",
               children: [
                 /* @__PURE__ */ jsx16(MessageSquare, { size: 12, "aria-hidden": "true" }),
@@ -2082,7 +2414,7 @@ function DocumentsWorkspace({
               {
                 type: "button",
                 onClick: () => void handleOpen(document2.id, "inline"),
-                title: labels.view,
+                "data-cv-tooltip": labels.view,
                 "aria-label": `${labels.view}: ${document2.filename}`,
                 className: "cv-header-icon",
                 children: /* @__PURE__ */ jsx16(Eye, { size: 14 })
@@ -2093,10 +2425,10 @@ function DocumentsWorkspace({
               {
                 type: "button",
                 onClick: () => void handleOpen(document2.id, "attachment"),
-                title: labels.download,
+                "data-cv-tooltip": labels.download,
                 "aria-label": `${labels.download}: ${document2.filename}`,
                 className: "cv-header-icon",
-                children: /* @__PURE__ */ jsx16(Download, { size: 14 })
+                children: /* @__PURE__ */ jsx16(Download2, { size: 14 })
               }
             ),
             removeDocument ? /* @__PURE__ */ jsx16(
@@ -2107,7 +2439,7 @@ function DocumentsWorkspace({
                   if (window.confirm(labels.removeConfirm(document2.filename))) void handleRemove([document2.id]);
                 },
                 disabled: busy,
-                title: labels.remove,
+                "data-cv-tooltip": labels.remove,
                 "aria-label": `${labels.remove}: ${document2.filename}`,
                 className: "cv-header-icon disabled:opacity-40",
                 children: /* @__PURE__ */ jsx16(Trash2, { size: 14, className: "text-red-500" })
@@ -2184,7 +2516,7 @@ function downloadTextFile(filename, content) {
 }
 
 // src/useWaitingNotifications.ts
-import { useState as useState11, useEffect as useEffect7, useRef as useRef4, useCallback as useCallback5 } from "react";
+import { useState as useState12, useEffect as useEffect8, useRef as useRef5, useCallback as useCallback5 } from "react";
 var DEFAULT_POLL_INTERVAL_MS = 1e4;
 var DEFAULT_LIMIT = 50;
 var DEFAULT_LABELS = {
@@ -2193,10 +2525,10 @@ var DEFAULT_LABELS = {
 };
 function useWaitingNotifications(params) {
   const conversationsContext = useConversations();
-  const [conversations, setConversations] = useState11([]);
-  const previousUnreadMap = useRef4(/* @__PURE__ */ new Map());
-  const notifiedIds = useRef4(/* @__PURE__ */ new Set());
-  const isPollingRef = useRef4(false);
+  const [conversations, setConversations] = useState12([]);
+  const previousUnreadMap = useRef5(/* @__PURE__ */ new Map());
+  const notifiedIds = useRef5(/* @__PURE__ */ new Set());
+  const isPollingRef = useRef5(false);
   const isEnabled = params?.enabled ?? true;
   const intervalMs = params?.intervalMs ?? DEFAULT_POLL_INTERVAL_MS;
   const icon = params?.icon;
@@ -2228,7 +2560,7 @@ function useWaitingNotifications(params) {
       isPollingRef.current = false;
     }
   }, [conversationsContext, listParams, icon, labelTitle, labelBody]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isEnabled) return;
     if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "default") {
       Notification.requestPermission();
@@ -2314,6 +2646,8 @@ function WhatsAppTemplateSettingsForm({
           /* @__PURE__ */ jsxs15(
             "button",
             {
+              "data-cv-tooltip": labels.refreshList,
+              "aria-label": labels.refreshList,
               type: "button",
               onClick: onRefreshTemplates,
               disabled: loadingTemplates,
@@ -2363,6 +2697,8 @@ function WhatsAppTemplateSettingsForm({
           /* @__PURE__ */ jsxs15(
             "button",
             {
+              "data-cv-tooltip": labels.addVariable,
+              "aria-label": labels.addVariable,
               type: "button",
               onClick: () => onVariablesChange([...variables, ""]),
               className: "flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline",
@@ -2380,7 +2716,8 @@ function WhatsAppTemplateSettingsForm({
             {
               type: "button",
               onClick: () => insertVariable(available.token),
-              title: `Inserir ${available.token}`,
+              "data-cv-tooltip": `Inserir ${available.token}`,
+              "aria-label": `Inserir ${available.token}`,
               className: "inline-flex items-center gap-1 rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs hover:border-blue-400 dark:hover:border-blue-500 transition-colors",
               children: [
                 /* @__PURE__ */ jsx17("code", { className: "text-blue-600 dark:text-blue-300", children: available.token }),
@@ -2414,7 +2751,8 @@ function WhatsAppTemplateSettingsForm({
               type: "button",
               onClick: () => removeVariable(index),
               className: "text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors flex-shrink-0",
-              title: labels.removeVariable,
+              "data-cv-tooltip": labels.removeVariable,
+              "aria-label": labels.removeVariable,
               children: /* @__PURE__ */ jsx17(Trash22, { size: 14 })
             }
           )
@@ -2424,6 +2762,8 @@ function WhatsAppTemplateSettingsForm({
       /* @__PURE__ */ jsx17("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs15(
         "button",
         {
+          "data-cv-tooltip": saving ? labels.saving : labels.save,
+          "aria-label": saving ? labels.saving : labels.save,
           type: "submit",
           disabled: saving || !selectedTemplateName.trim(),
           className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
@@ -2661,6 +3001,8 @@ function WhatsAppCreateTemplateForm({
       /* @__PURE__ */ jsx18("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs16(
         "button",
         {
+          "data-cv-tooltip": submitting ? labels.sending : labels.sendForApproval,
+          "aria-label": submitting ? labels.sending : labels.sendForApproval,
           type: "submit",
           disabled: submitting || !value.name || !value.bodyText,
           className: "flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
@@ -2743,6 +3085,8 @@ function WelcomeFarewellForm({
       /* @__PURE__ */ jsx19("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs17(
         "button",
         {
+          "data-cv-tooltip": saving ? labels.saving : labels.save,
+          "aria-label": saving ? labels.saving : labels.save,
           type: "submit",
           disabled: saving,
           className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
@@ -2835,6 +3179,8 @@ function TranscriptionSettingsForm({
       /* @__PURE__ */ jsx20("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs18(
         "button",
         {
+          "data-cv-tooltip": saving ? labels.saving : labels.save,
+          "aria-label": saving ? labels.saving : labels.save,
           type: "submit",
           disabled: saving || !isAvailable,
           className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
@@ -2881,7 +3227,7 @@ function ModeOption({
 }
 
 // src/settings/WhatsAppTemplatesSettings.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var TEMPLATE_SETTINGS_TAB = {
   SELECT: "select",
@@ -2898,12 +3244,14 @@ function WhatsAppTemplatesSettings({
   ...settingsProps
 }) {
   const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride };
-  const [tab, setTab] = useState12(TEMPLATE_SETTINGS_TAB.SELECT);
+  const [tab, setTab] = useState13(TEMPLATE_SETTINGS_TAB.SELECT);
   return /* @__PURE__ */ jsxs19("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs19("nav", { className: "flex gap-1 border-b", role: "tablist", children: [
       /* @__PURE__ */ jsx21(
         "button",
         {
+          "data-cv-tooltip": labels.selectTab,
+          "aria-label": labels.selectTab,
           type: "button",
           role: "tab",
           "aria-selected": tab === TEMPLATE_SETTINGS_TAB.SELECT,
@@ -2915,6 +3263,8 @@ function WhatsAppTemplatesSettings({
       create ? /* @__PURE__ */ jsx21(
         "button",
         {
+          "data-cv-tooltip": labels.createTab,
+          "aria-label": labels.createTab,
           type: "button",
           role: "tab",
           "aria-selected": tab === TEMPLATE_SETTINGS_TAB.CREATE,
@@ -2963,6 +3313,8 @@ function TopicsForm({
           /* @__PURE__ */ jsx22(
             "button",
             {
+              "data-cv-tooltip": topic.label,
+              "aria-label": topic.label,
               type: "button",
               onClick: () => onToggle(topic.key),
               className: `relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${topic.enabled ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-700"}`,
@@ -2993,6 +3345,8 @@ function TopicsForm({
         /* @__PURE__ */ jsxs20(
           "button",
           {
+            "data-cv-tooltip": labels.saveButton,
+            "aria-label": labels.saveButton,
             type: "submit",
             disabled: saving,
             className: "inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50",
@@ -3009,7 +3363,7 @@ function TopicsForm({
 }
 
 // src/settings/MessagesWorkspace.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useState as useState13 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useState as useState14 } from "react";
 import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var DEFAULT_LABELS7 = {
   title: "Mensagens",
@@ -3065,26 +3419,26 @@ function MessagesWorkspace({
   const hasTopics = Boolean(api.getTopics && api.saveTopics);
   const hasTemplates = Boolean(api.getTemplateSettings && api.saveTemplateSettings);
   const hasTranscription = Boolean(api.getTranscription && api.saveTranscription);
-  const [tab, setTab] = useState13(MESSAGES_TAB.BOT);
-  const [loadState, setLoadState] = useState13("loading");
-  const [messages, setMessages] = useState13(EMPTY_MESSAGES);
-  const [savingMessages, setSavingMessages] = useState13(false);
-  const [messagesSaved, setMessagesSaved] = useState13(false);
-  const [topics, setTopics] = useState13([]);
-  const [savingTopics, setSavingTopics] = useState13(false);
-  const [topicsSaved, setTopicsSaved] = useState13(false);
-  const [templateSettings, setTemplateSettings] = useState13(EMPTY_TEMPLATE_SETTINGS);
-  const [templates, setTemplates] = useState13([]);
-  const [loadingTemplates, setLoadingTemplates] = useState13(false);
-  const [templatesError, setTemplatesError] = useState13(false);
-  const [savingTemplate, setSavingTemplate] = useState13(false);
-  const [templateSaved, setTemplateSaved] = useState13(false);
-  const [createTemplate, setCreateTemplate] = useState13(EMPTY_CREATE_TEMPLATE);
-  const [creatingTemplate, setCreatingTemplate] = useState13(false);
-  const [createResult, setCreateResult] = useState13(null);
-  const [transcription, setTranscription] = useState13(UNDECIDED_TRANSCRIPTION);
-  const [savingTranscription, setSavingTranscription] = useState13(false);
-  const [transcriptionSaved, setTranscriptionSaved] = useState13(false);
+  const [tab, setTab] = useState14(MESSAGES_TAB.BOT);
+  const [loadState, setLoadState] = useState14("loading");
+  const [messages, setMessages] = useState14(EMPTY_MESSAGES);
+  const [savingMessages, setSavingMessages] = useState14(false);
+  const [messagesSaved, setMessagesSaved] = useState14(false);
+  const [topics, setTopics] = useState14([]);
+  const [savingTopics, setSavingTopics] = useState14(false);
+  const [topicsSaved, setTopicsSaved] = useState14(false);
+  const [templateSettings, setTemplateSettings] = useState14(EMPTY_TEMPLATE_SETTINGS);
+  const [templates, setTemplates] = useState14([]);
+  const [loadingTemplates, setLoadingTemplates] = useState14(false);
+  const [templatesError, setTemplatesError] = useState14(false);
+  const [savingTemplate, setSavingTemplate] = useState14(false);
+  const [templateSaved, setTemplateSaved] = useState14(false);
+  const [createTemplate, setCreateTemplate] = useState14(EMPTY_CREATE_TEMPLATE);
+  const [creatingTemplate, setCreatingTemplate] = useState14(false);
+  const [createResult, setCreateResult] = useState14(null);
+  const [transcription, setTranscription] = useState14(UNDECIDED_TRANSCRIPTION);
+  const [savingTranscription, setSavingTranscription] = useState14(false);
+  const [transcriptionSaved, setTranscriptionSaved] = useState14(false);
   const reloadTemplates = useCallback6(async () => {
     if (!api.listTemplates) return;
     setLoadingTemplates(true);
@@ -3097,7 +3451,7 @@ function MessagesWorkspace({
       setLoadingTemplates(false);
     }
   }, [api]);
-  useEffect8(() => {
+  useEffect9(() => {
     let active = true;
     async function load() {
       try {
@@ -3122,7 +3476,7 @@ function MessagesWorkspace({
       active = false;
     };
   }, [api]);
-  useEffect8(() => {
+  useEffect9(() => {
     void reloadTemplates();
   }, [reloadTemplates]);
   function flash(setter) {
@@ -3213,6 +3567,7 @@ function MessagesWorkspace({
     ...hasTranscription ? [{ id: MESSAGES_TAB.TRANSCRIPTION, label: labels.tabTranscription }] : []
   ];
   return /* @__PURE__ */ jsxs21("div", { className: `space-y-6 p-4 lg:p-0 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx23(TooltipLayer, {}),
     /* @__PURE__ */ jsxs21("header", { children: [
       /* @__PURE__ */ jsx23("h1", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: labels.title }),
       /* @__PURE__ */ jsx23("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: labels.subtitle })
@@ -3220,6 +3575,8 @@ function MessagesWorkspace({
     tabs.length > 1 ? /* @__PURE__ */ jsx23("nav", { className: "flex gap-1 border-b border-gray-200 dark:border-gray-700", role: "tablist", children: tabs.map((item) => /* @__PURE__ */ jsx23(
       "button",
       {
+        "data-cv-tooltip": item.label,
+        "aria-label": item.label,
         type: "button",
         role: "tab",
         "aria-selected": tab === item.id,
@@ -3351,16 +3708,16 @@ function useConversationMessages(conversationId, params) {
 }
 
 // src/hooks/useScrollToLatestMessage.ts
-import { useCallback as useCallback8, useLayoutEffect, useRef as useRef5, useState as useState14 } from "react";
+import { useCallback as useCallback8, useLayoutEffect, useRef as useRef6, useState as useState15 } from "react";
 var NEAR_BOTTOM_THRESHOLD_PX = 120;
 var SCROLL_BEHAVIOR = "auto";
 function useScrollToLatestMessage({
   conversationId,
   messageCount
 }) {
-  const containerRef = useRef5(null);
-  const [isAwayFromBottom, setIsAwayFromBottom] = useState14(false);
-  const isAwayFromBottomRef = useRef5(false);
+  const containerRef = useRef6(null);
+  const [isAwayFromBottom, setIsAwayFromBottom] = useState15(false);
+  const isAwayFromBottomRef = useRef6(false);
   const scrollToBottom = useCallback8((behavior = SCROLL_BEHAVIOR) => {
     const container = containerRef.current;
     if (!container) return;
@@ -3373,7 +3730,7 @@ function useScrollToLatestMessage({
     isAwayFromBottomRef.current = away;
     setIsAwayFromBottom((current) => current === away ? current : away);
   }, []);
-  const jumpedForConversationRef = useRef5(void 0);
+  const jumpedForConversationRef = useRef6(void 0);
   useLayoutEffect(() => {
     const isNewConversation = jumpedForConversationRef.current !== conversationId;
     if (isNewConversation) {
@@ -3420,36 +3777,36 @@ function useConversationContext(conversationId) {
 }
 
 // src/hooks/useConversationRealtime.ts
-import { useEffect as useEffect9, useRef as useRef6 } from "react";
+import { useEffect as useEffect10, useRef as useRef7 } from "react";
 function useConversationRealtime(conversationId, onEvent) {
-  const context = useConversations();
-  const onEventRef = useRef6(onEvent);
+  const sse = useConversations()?.sse;
+  const onEventRef = useRef7(onEvent);
   onEventRef.current = onEvent;
-  useEffect9(() => {
-    if (!context || !conversationId) return;
-    const source = context.sse.connectConversationStream(conversationId);
+  useEffect10(() => {
+    if (!sse || !conversationId) return;
+    const source = sse.connectConversationStream(conversationId);
     const handler = (event) => onEventRef.current(event);
     source.addEventListener("message", handler);
     return () => {
       source.removeEventListener("message", handler);
       source.close();
     };
-  }, [context, conversationId]);
+  }, [sse, conversationId]);
 }
 function useGlobalRealtime(onEvent) {
-  const context = useConversations();
-  const onEventRef = useRef6(onEvent);
+  const sse = useConversations()?.sse;
+  const onEventRef = useRef7(onEvent);
   onEventRef.current = onEvent;
-  useEffect9(() => {
-    if (!context) return;
-    const source = context.sse.connectGlobalStream();
+  useEffect10(() => {
+    if (!sse) return;
+    const source = sse.connectGlobalStream();
     const handler = (event) => onEventRef.current(event);
     source.addEventListener("message", handler);
     return () => {
       source.removeEventListener("message", handler);
       source.close();
     };
-  }, [context]);
+  }, [sse]);
 }
 
 // src/hooks/useConversationActions.ts
@@ -3485,10 +3842,11 @@ function useInboxActions() {
 }
 
 // src/workspace/ConversationsWorkspace.tsx
-import { useEffect as useEffect13, useMemo as useMemo6, useState as useState18 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo6, useState as useState19 } from "react";
+import { Check as Check2, CheckCheck, FlaskConical, Hourglass as Hourglass2, Mail as Mail2, MessagesSquare } from "lucide-react";
 
 // src/workspace/BulkTemplateModal.tsx
-import { useEffect as useEffect10, useMemo as useMemo4, useState as useState15 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo4, useState as useState16 } from "react";
 import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function BulkTemplateModal({
   labels,
@@ -3502,10 +3860,10 @@ function BulkTemplateModal({
     throw new Error("BulkTemplateModal requires an ancestor <ConversationsProvider>");
   }
   const { api } = context;
-  const [templates, setTemplates] = useState15([]);
-  const [search, setSearch] = useState15("");
-  const [selected, setSelected] = useState15("");
-  useEffect10(() => {
+  const [templates, setTemplates] = useState16([]);
+  const [search, setSearch] = useState16("");
+  const [selected, setSelected] = useState16("");
+  useEffect11(() => {
     let active = true;
     void api.listTemplates?.().then((loaded) => {
       if (active) setTemplates(loaded);
@@ -3526,7 +3884,7 @@ function BulkTemplateModal({
         /* @__PURE__ */ jsx24("h3", { children: labels.templateModalTitle }),
         /* @__PURE__ */ jsx24("p", { children: labels.templateModalAvailable(templates.length) })
       ] }),
-      /* @__PURE__ */ jsx24("button", { type: "button", onClick: onClose, "aria-label": labels.templateModalCancel, children: "\u2715" })
+      /* @__PURE__ */ jsx24("button", { "data-cv-tooltip": labels.templateModalCancel, type: "button", onClick: onClose, "aria-label": labels.templateModalCancel, children: "\u2715" })
     ] }),
     /* @__PURE__ */ jsx24("div", { className: "cv-workspace-modal__search", children: /* @__PURE__ */ jsx24(
       "input",
@@ -3543,6 +3901,8 @@ function BulkTemplateModal({
       filtered.map((template) => /* @__PURE__ */ jsxs22(
         "button",
         {
+          "data-cv-tooltip": template.name,
+          "aria-label": template.name,
           type: "button",
           onClick: () => setSelected(template.name === selected ? "" : template.name),
           "aria-pressed": template.name === selected,
@@ -3560,10 +3920,12 @@ function BulkTemplateModal({
     ] }),
     expiredCount === 0 ? /* @__PURE__ */ jsx24("p", { className: "cv-workspace-modal__warning", children: labels.templateModalNoneExpired }) : null,
     /* @__PURE__ */ jsxs22("footer", { className: "cv-workspace-modal__footer", children: [
-      /* @__PURE__ */ jsx24("button", { type: "button", onClick: onClose, children: labels.templateModalCancel }),
+      /* @__PURE__ */ jsx24("button", { "data-cv-tooltip": labels.templateModalCancel, "aria-label": labels.templateModalCancel, type: "button", onClick: onClose, children: labels.templateModalCancel }),
       /* @__PURE__ */ jsx24(
         "button",
         {
+          "data-cv-tooltip": sending ? labels.templateModalSending : labels.templateModalSend(expiredCount),
+          "aria-label": sending ? labels.templateModalSending : labels.templateModalSend(expiredCount),
           type: "button",
           disabled: sending || expiredCount === 0,
           onClick: () => onSend(selected || void 0),
@@ -3575,7 +3937,7 @@ function BulkTemplateModal({
 }
 
 // src/workspace/ConversationPane.tsx
-import { useEffect as useEffect11, useState as useState16 } from "react";
+import { useEffect as useEffect12, useRef as useRef8, useState as useState17 } from "react";
 import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function ConversationPane({
   conversation,
@@ -3609,12 +3971,14 @@ function ConversationPane({
   const { api } = context;
   const { messages, refetch } = useConversationMessages(conversation.id);
   const { context: conversationContext } = useConversationContext(conversation.id);
-  const [documentsOpen, setDocumentsOpen] = useState16(false);
-  const [sendFailure, setSendFailure] = useState16(void 0);
-  const [selectedMessageIds, setSelectedMessageIds] = useState16(/* @__PURE__ */ new Set());
-  const [draft, setDraft] = useState16(initialComposerText ?? "");
-  const [queuedFiles, setQueuedFiles] = useState16([]);
-  useEffect11(() => {
+  const [documentsOpen, setDocumentsOpen] = useState17(false);
+  const [sendFailure, setSendFailure] = useState17(void 0);
+  const [selectedMessageIds, setSelectedMessageIds] = useState17(/* @__PURE__ */ new Set());
+  const [draft, setDraft] = useState17(initialComposerText ?? "");
+  const [queuedFiles, setQueuedFiles] = useState17([]);
+  const [isSendingDraft, setIsSendingDraft] = useState17(false);
+  const sendInFlightRef = useRef8(false);
+  useEffect12(() => {
     setSelectedMessageIds(/* @__PURE__ */ new Set());
     setDraft(initialComposerText ?? "");
     setQueuedFiles([]);
@@ -3646,25 +4010,40 @@ function ConversationPane({
     try {
       await action();
       await refetch();
+      return true;
     } catch (error) {
       setSendFailure(error instanceof Error ? error.message : fallback);
+      return false;
     }
   }
   async function handleSend(text) {
-    await runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure);
+    return runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure);
+  }
+  async function handleSendTemplate() {
+    if (conversation.mode !== "human" && onTakeover) await onTakeover();
+    await runSend(() => api.sendTemplate(conversation.id, {}), labels.sendFailure);
   }
   async function handleRichSend() {
-    if (onSendAttachments && queuedFiles.length > 0) {
-      const files = queuedFiles;
-      const caption = draft;
-      await runSend(() => onSendAttachments(files, caption), labels.attachFailure);
-      setQueuedFiles([]);
-      setDraft("");
-      return;
+    if (sendInFlightRef.current) return;
+    sendInFlightRef.current = true;
+    setIsSendingDraft(true);
+    try {
+      if (onSendAttachments && queuedFiles.length > 0) {
+        const files = queuedFiles;
+        const caption = draft;
+        const didSend = await runSend(() => onSendAttachments(files, caption), labels.attachFailure);
+        if (didSend) {
+          setQueuedFiles([]);
+          setDraft("");
+        }
+        return;
+      }
+      if (!draft.trim()) return;
+      if (await handleSend(draft)) setDraft("");
+    } finally {
+      sendInFlightRef.current = false;
+      setIsSendingDraft(false);
     }
-    if (!draft.trim()) return;
-    await handleSend(draft);
-    setDraft("");
   }
   async function handleAttach(file) {
     if (!onAttach) return;
@@ -3738,8 +4117,8 @@ function ConversationPane({
     messageSelection && selectedMessageIds.size > 0 ? /* @__PURE__ */ jsxs23("div", { className: "cv-workspace-selection", children: [
       /* @__PURE__ */ jsx25("span", { children: labels.messagesSelected(selectedMessageIds.size) }),
       /* @__PURE__ */ jsxs23("div", { className: "cv-workspace-selection__actions", children: [
-        /* @__PURE__ */ jsx25("button", { type: "button", onClick: () => setSelectedMessageIds(/* @__PURE__ */ new Set()), children: labels.bulkClear }),
-        /* @__PURE__ */ jsx25("button", { type: "button", onClick: copySelectedMessages, children: labels.copySelected })
+        /* @__PURE__ */ jsx25("button", { "data-cv-tooltip": labels.bulkClear, "aria-label": labels.bulkClear, type: "button", onClick: () => setSelectedMessageIds(/* @__PURE__ */ new Set()), children: labels.bulkClear }),
+        /* @__PURE__ */ jsx25("button", { "data-cv-tooltip": labels.copySelected, "aria-label": labels.copySelected, type: "button", onClick: copySelectedMessages, children: labels.copySelected })
       ] })
     ] }) : null,
     sendFailure ? /* @__PURE__ */ jsx25("p", { role: "alert", className: "cv-workspace-alert", children: sendFailure }) : null,
@@ -3747,7 +4126,7 @@ function ConversationPane({
       WindowExpiredNotice,
       {
         disabled: busy,
-        onSendTemplate: () => void api.sendTemplate(conversation.id, {}).then(() => refetch())
+        onSendTemplate: () => void handleSendTemplate()
       }
     ) : botOwnsConversation ? (
       // Responder com a conversa no bot atropelaria o fluxo automático no meio de uma pergunta.
@@ -3764,7 +4143,8 @@ function ConversationPane({
           }
         } : {},
         placeholder: labels.composerPlaceholder,
-        isSending: busy,
+        isSending: busy || isSendingDraft,
+        hasQueuedAttachments: queuedFiles.length > 0,
         ...onRecordAudio ? {
           idleAction: /* @__PURE__ */ jsx25(
             AudioRecorderButton,
@@ -3780,6 +4160,7 @@ function ConversationPane({
             /* @__PURE__ */ jsx25(
               "button",
               {
+                "data-cv-tooltip": labels.attachmentRemove,
                 type: "button",
                 "aria-label": labels.attachmentRemove,
                 onClick: () => setQueuedFiles((current) => current.filter((_, position) => position !== index)),
@@ -3822,11 +4203,13 @@ function ConversationsInboxList({
     hasSelection ? /* @__PURE__ */ jsxs24("div", { className: "cv-workspace-bulk", children: [
       /* @__PURE__ */ jsx26("span", { className: "cv-workspace-bulk__count", children: labels.bulkSelected(inbox.selectedIds.size) }),
       /* @__PURE__ */ jsxs24("div", { className: "cv-workspace-bulk__actions", children: [
-        /* @__PURE__ */ jsx26("button", { type: "button", onClick: inbox.clearBulkSelection, children: labels.bulkClear }),
-        onSendTemplateToSelected ? /* @__PURE__ */ jsx26("button", { type: "button", onClick: onSendTemplateToSelected, disabled: inbox.busy, children: labels.bulkTemplate }) : null,
+        /* @__PURE__ */ jsx26("button", { "data-cv-tooltip": labels.bulkClear, "aria-label": labels.bulkClear, type: "button", onClick: inbox.clearBulkSelection, children: labels.bulkClear }),
+        onSendTemplateToSelected ? /* @__PURE__ */ jsx26("button", { "data-cv-tooltip": labels.bulkTemplate, "aria-label": labels.bulkTemplate, type: "button", onClick: onSendTemplateToSelected, disabled: inbox.busy, children: labels.bulkTemplate }) : null,
         inbox.canFinalize ? /* @__PURE__ */ jsx26(
           "button",
           {
+            "data-cv-tooltip": labels.bulkFinalize,
+            "aria-label": labels.bulkFinalize,
             type: "button",
             disabled: inbox.busy,
             onClick: () => {
@@ -3853,17 +4236,20 @@ function ConversationsInboxList({
       ),
       /* @__PURE__ */ jsxs24("div", { className: "cv-workspace-chips", children: [
         /* @__PURE__ */ jsx26("span", { className: "cv-workspace-chips__legend", children: labels.windowLegend }),
-        WINDOW_FILTERS.map((filter) => /* @__PURE__ */ jsxs24(
+        WINDOW_FILTERS.map((filter) => /* @__PURE__ */ jsx26(
           "button",
           {
             type: "button",
             onClick: () => inbox.setWindowFilter(filter.value),
             "aria-pressed": inbox.windowFilter === filter.value,
-            className: `cv-workspace-chip${inbox.windowFilter === filter.value ? " cv-workspace-chip--on" : ""}`,
-            children: [
-              filter.dotClass ? /* @__PURE__ */ jsx26("span", { className: `cv-workspace-dot ${filter.dotClass}` }) : null,
-              filter.label
-            ]
+            "data-cv-tooltip": filter.label,
+            "aria-label": filter.label,
+            className: [
+              "cv-workspace-chip",
+              filter.tone ? `cv-workspace-chip--${filter.tone}` : "",
+              inbox.windowFilter === filter.value ? "cv-workspace-chip--on" : ""
+            ].filter(Boolean).join(" "),
+            children: filter.label
           },
           filter.value
         ))
@@ -3873,6 +4259,8 @@ function ConversationsInboxList({
         inbox.channelFilters.map((filter) => /* @__PURE__ */ jsxs24(
           "button",
           {
+            "data-cv-tooltip": filter.label,
+            "aria-label": filter.label,
             type: "button",
             onClick: () => inbox.setChannelFilter(filter.value),
             "aria-pressed": inbox.channelFilter === filter.value,
@@ -3913,14 +4301,15 @@ function ConversationsInboxList({
     /* @__PURE__ */ jsxs24("div", { className: "cv-workspace-pager", children: [
       /* @__PURE__ */ jsx26("span", { children: labels.rangeOf(inbox.firstOnPage, inbox.lastOnPage, inbox.filteredCount) }),
       /* @__PURE__ */ jsxs24("div", { className: "cv-workspace-pager__buttons", children: [
-        /* @__PURE__ */ jsx26("button", { type: "button", onClick: () => inbox.goToPage(1), disabled: inbox.page === 1, "aria-label": "Primeira p\xE1gina", children: "\xAB" }),
+        /* @__PURE__ */ jsx26("button", { type: "button", onClick: () => inbox.goToPage(1), disabled: inbox.page === 1, "aria-label": PAGINATION_LABELS.first, "data-cv-tooltip": PAGINATION_LABELS.first, children: "\xAB" }),
         /* @__PURE__ */ jsx26(
           "button",
           {
             type: "button",
             onClick: () => inbox.goToPage(inbox.page - 1),
             disabled: inbox.page === 1,
-            "aria-label": "P\xE1gina anterior",
+            "aria-label": PAGINATION_LABELS.previous,
+            "data-cv-tooltip": PAGINATION_LABELS.previous,
             children: "\u2039"
           }
         ),
@@ -3931,7 +4320,8 @@ function ConversationsInboxList({
             type: "button",
             onClick: () => inbox.goToPage(inbox.page + 1),
             disabled: inbox.page === inbox.pageCount,
-            "aria-label": "Pr\xF3xima p\xE1gina",
+            "aria-label": PAGINATION_LABELS.next,
+            "data-cv-tooltip": PAGINATION_LABELS.next,
             children: "\u203A"
           }
         ),
@@ -3941,7 +4331,8 @@ function ConversationsInboxList({
             type: "button",
             onClick: () => inbox.goToPage(inbox.pageCount),
             disabled: inbox.page === inbox.pageCount,
-            "aria-label": "\xDAltima p\xE1gina",
+            "aria-label": PAGINATION_LABELS.last,
+            "data-cv-tooltip": PAGINATION_LABELS.last,
             children: "\xBB"
           }
         )
@@ -3992,7 +4383,7 @@ var DEFAULT_CONVERSATIONS_WORKSPACE_LABELS = {
 };
 
 // src/workspace/useConversationsInbox.ts
-import { useCallback as useCallback9, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef7, useState as useState17 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect13, useMemo as useMemo5, useRef as useRef9, useState as useState18 } from "react";
 var CONVERSATIONS_PER_PAGE = 50;
 function defaultDescribeFailure(error) {
   const status = error.status;
@@ -4010,14 +4401,14 @@ function useConversationsInbox(params = {}) {
   const perPage = params.perPage ?? CONVERSATIONS_PER_PAGE;
   const markReadOnOpen = params.markReadOnOpen ?? true;
   const describeFailure = params.describeFailure ?? defaultDescribeFailure;
-  const [waitingOnly, setWaitingOnly] = useState17(false);
-  const [windowFilter, setWindowFilter] = useState17(CONVERSATION_WINDOW.ALL);
-  const [channelFilter, setChannelFilter] = useState17(CHANNEL_FILTER_ALL);
-  const [search, setSearch] = useState17("");
-  const [page, setPage] = useState17(1);
-  const [selectedId, setSelectedId] = useState17(void 0);
-  const [selectedIds, setSelectedIds] = useState17(/* @__PURE__ */ new Set());
-  const [busy, setBusy] = useState17(false);
+  const [waitingOnly, setWaitingOnly] = useState18(false);
+  const [windowFilter, setWindowFilter] = useState18(CONVERSATION_WINDOW.ALL);
+  const [channelFilter, setChannelFilter] = useState18(CHANNEL_FILTER_ALL);
+  const [search, setSearch] = useState18("");
+  const [page, setPage] = useState18(1);
+  const [selectedId, setSelectedId] = useState18(void 0);
+  const [selectedIds, setSelectedIds] = useState18(/* @__PURE__ */ new Set());
+  const [busy, setBusy] = useState18(false);
   const { conversations, total, loading, error, refetch } = useConversationList({
     ...waitingOnly ? { waitingHuman: true } : {},
     ...search ? { search } : {},
@@ -4042,16 +4433,16 @@ function useConversationsInbox(params = {}) {
   const pageCount = Math.max(1, Math.ceil(totalForPaging / perPage));
   const currentPage = Math.min(page, pageCount);
   const pageConversations = params.serverPaginated ? filtered : filtered.slice((currentPage - 1) * perPage, currentPage * perPage);
-  useEffect12(() => {
+  useEffect13(() => {
     setPage(1);
   }, [search, waitingOnly, windowFilter, channelFilter]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (selectedId && !conversations.some((conversation) => conversation.id === selectedId)) {
       setSelectedId(void 0);
     }
   }, [conversations, selectedId]);
-  const lastMarkReadAttempt = useRef7(void 0);
-  useEffect12(() => {
+  const lastMarkReadAttempt = useRef9(void 0);
+  useEffect13(() => {
     if (!markReadOnOpen || !selectedId) return;
     const opened = conversations.find((conversation) => conversation.id === selectedId);
     if (!opened || opened.unread === 0) return;
@@ -4111,8 +4502,11 @@ function useConversationsInbox(params = {}) {
     selectedConversation: conversations.find((conversation) => conversation.id === selectedId),
     loading,
     now,
-    totalCount: conversations.length,
-    unreadCount: conversations.reduce((total2, conversation) => total2 + conversation.unread, 0),
+    // Com paginação no servidor `conversations` é só a página, então contar o array mostrava o
+    // tamanho da página no lugar do tamanho da base. Não lidas e aguardando seguem sendo da página:
+    // somar a base inteira exige agregado do servidor, que a listagem não devolve.
+    totalCount: params.serverPaginated ? total : conversations.length,
+    unreadCount: conversations.reduce((sum, conversation) => sum + conversation.unread, 0),
     waitingCount: conversations.filter((conversation) => conversation.waitingHuman).length,
     filteredCount: totalForPaging,
     expiredSelectedCount: conversations.filter(
@@ -4211,10 +4605,10 @@ function ConversationsWorkspace({
     ...markReadOnOpen === void 0 ? {} : { markReadOnOpen },
     ...serverPaginated ? { serverPaginated } : {}
   });
-  const [simulatorOpen, setSimulatorOpen] = useState18(false);
-  const [templateModalOpen, setTemplateModalOpen] = useState18(false);
-  const [openedFromLink, setOpenedFromLink] = useState18(void 0);
-  useEffect13(() => {
+  const [simulatorOpen, setSimulatorOpen] = useState19(false);
+  const [templateModalOpen, setTemplateModalOpen] = useState19(false);
+  const [openedFromLink, setOpenedFromLink] = useState19(void 0);
+  useEffect14(() => {
     const link = initialConversationId ?? initialWhatsappNumber;
     if (!link || openedFromLink === link) return;
     const target = inbox.conversations.find(
@@ -4235,7 +4629,7 @@ function ConversationsWorkspace({
       ...fromProduct,
       {
         key: "simulator",
-        icon: simulator?.icon ?? "\u{1F9EA}",
+        icon: simulator?.icon ?? /* @__PURE__ */ jsx27(FlaskConical, { size: ICON_SIZE_ACTION }),
         label: simulator?.label ?? "Simular cliente",
         active: simulatorOpen,
         run: () => setSimulatorOpen((open) => !open)
@@ -4243,28 +4637,32 @@ function ConversationsWorkspace({
     ];
   }, [selected, extraUtilitiesFor, simulatorEnabled, simulator, simulatorOpen]);
   return /* @__PURE__ */ jsxs25("div", { className: `cv-workspace${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx27(TooltipLayer, {}),
     /* @__PURE__ */ jsxs25("header", { className: "cv-workspace-header", children: [
       /* @__PURE__ */ jsxs25("div", { className: "cv-workspace-header__titles", children: [
         /* @__PURE__ */ jsx27("h1", { children: labels.title }),
         /* @__PURE__ */ jsxs25("p", { children: [
-          /* @__PURE__ */ jsxs25("span", { title: labels.conversations, children: [
-            "\u{1F4AC} ",
+          /* @__PURE__ */ jsxs25("span", { "data-cv-tooltip": labels.conversations, className: "cv-stat", children: [
+            /* @__PURE__ */ jsx27(MessagesSquare, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
+            " ",
             inbox.totalCount,
             /* @__PURE__ */ jsxs25("span", { className: "cv-only-wide", children: [
               " ",
               labels.conversations
             ] })
           ] }),
-          /* @__PURE__ */ jsxs25("span", { title: labels.waiting, className: "cv-workspace-header__waiting", children: [
-            "\u23F3 ",
+          /* @__PURE__ */ jsxs25("span", { "data-cv-tooltip": labels.waiting, className: "cv-stat cv-workspace-header__waiting", children: [
+            /* @__PURE__ */ jsx27(Hourglass2, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
+            " ",
             inbox.waitingCount,
             /* @__PURE__ */ jsxs25("span", { className: "cv-only-wide", children: [
               " ",
               labels.waiting
             ] })
           ] }),
-          /* @__PURE__ */ jsxs25("span", { title: labels.unread, children: [
-            "\u2709\uFE0F ",
+          /* @__PURE__ */ jsxs25("span", { "data-cv-tooltip": labels.unread, className: "cv-stat", children: [
+            /* @__PURE__ */ jsx27(Mail2, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
+            " ",
             inbox.unreadCount,
             /* @__PURE__ */ jsxs25("span", { className: "cv-only-wide", children: [
               " ",
@@ -4280,14 +4678,12 @@ function ConversationsWorkspace({
             type: "button",
             onClick: () => inbox.setWaitingOnly(!inbox.waitingOnly),
             "aria-pressed": inbox.waitingOnly,
-            title: labels.waitingOnly,
+            "data-cv-tooltip": labels.waitingOnly,
+            "aria-label": labels.waitingOnly,
             className: inbox.waitingOnly ? "cv-workspace-toggle cv-workspace-toggle--on" : "cv-workspace-toggle",
             children: [
-              "\u23F3",
-              /* @__PURE__ */ jsxs25("span", { className: "cv-only-wide", children: [
-                " ",
-                labels.waitingOnly
-              ] })
+              /* @__PURE__ */ jsx27(Hourglass2, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx27("span", { className: "cv-only-wide", children: labels.waitingOnly })
             ]
           }
         ),
@@ -4297,16 +4693,17 @@ function ConversationsWorkspace({
             type: "button",
             onClick: () => void inbox.markSelectedAsRead(),
             disabled: inbox.selectedIds.size === 0 || inbox.busy,
-            title: labels.markSelectedAsRead,
+            "data-cv-tooltip": labels.markSelectedAsRead,
             "aria-label": labels.markSelectedAsRead,
             className: "cv-workspace-toggle",
             children: [
-              "\u2713",
-              /* @__PURE__ */ jsxs25("span", { className: "cv-only-wide", children: [
-                " ",
-                labels.markSelectedAsRead
-              ] }),
-              inbox.selectedIds.size > 0 ? ` (${inbox.selectedIds.size})` : ""
+              /* @__PURE__ */ jsx27(Check2, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx27("span", { className: "cv-only-wide", children: labels.markSelectedAsRead }),
+              inbox.selectedIds.size > 0 ? /* @__PURE__ */ jsxs25("span", { children: [
+                "(",
+                inbox.selectedIds.size,
+                ")"
+              ] }) : null
             ]
           }
         ),
@@ -4316,14 +4713,12 @@ function ConversationsWorkspace({
             type: "button",
             onClick: () => void inbox.markAllAsRead(),
             disabled: inbox.busy,
-            title: labels.markAllAsRead,
+            "data-cv-tooltip": labels.markAllAsRead,
+            "aria-label": labels.markAllAsRead,
             className: "cv-workspace-toggle",
             children: [
-              "\u2713\u2713",
-              /* @__PURE__ */ jsxs25("span", { className: "cv-only-wide", children: [
-                " ",
-                labels.markAllAsRead
-              ] })
+              /* @__PURE__ */ jsx27(CheckCheck, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx27("span", { className: "cv-only-wide", children: labels.markAllAsRead })
             ]
           }
         ) : null,
@@ -4362,7 +4757,7 @@ function ConversationsWorkspace({
               now: inbox.now,
               busy: inbox.busy,
               labels,
-              ...inbox.canTakeover ? { onTakeover: () => void inbox.takeover(selected.id) } : {},
+              ...inbox.canTakeover ? { onTakeover: () => inbox.takeover(selected.id) } : {},
               ...inbox.canTakeover ? { onReturnToBot: () => void inbox.releaseToBot(selected.id) } : {},
               ...inbox.canFinalize ? { onFinish: () => void inbox.finalize(selected.id) } : {},
               ...flowLabelOf ? { flowLabel: flowLabelOf(selected) } : {},
@@ -4478,7 +4873,9 @@ export {
   SortableHead,
   StatusTicks,
   TEMPLATE_SETTINGS_TAB,
+  TOOLTIP_ATTRIBUTE,
   ToastProvider,
+  TooltipLayer,
   TopicsForm,
   TranscriptionSettingsForm,
   WINDOW_FILTERS,