/* Aceleres — overrides globais (cache-busted via vueapp.html.erb) */

/* #app ocupa todo o body/viewport igual /login.
   IMPORTANTE: html tem zoom:0.8 (vindo do DASHBOARD_SCRIPTS); unidades vh
   NÃO se ajustam ao zoom e geram espaço em branco no rodapé. Por isso
   usamos cadeia de height:100% em vez de 100vh (mesmo motivo do comentário
   em /aceleres-meta-status-banner.js linhas 65-66). */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
#app {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Inner Vue root (#app filho de #app — Vue 3 monta DENTRO do placeholder,
   App.vue tem id="app" no template, então temos dois #app aninhados). */
div#app > div#app {
  flex: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}
/* Dashboard.vue wrapper (irmão do banner/snackbar dentro do inner #app)
   precisa de altura definida pra propagar h-full pros filhos. flex-grow
   sozinho às vezes não basta pra % heights resolverem. */
#app > div.flex.flex-grow.overflow-hidden {
  height: 100%;
  min-height: 0;
  flex: 1 1 0%;
}
/* Cadeia até o painel da conversa. */
main.flex.flex-1.h-full.w-full.min-h-0.px-0.overflow-hidden.bg-n-surface-1 {
  height: 100% !important;
  min-height: 0;
}
section.painel-atendimento {
  height: 100% !important;
  min-height: 0;
}

/* Esconder botão compose do topbar lateral (substituído pelo do header) */
#aceleres-topbar .acl-tb-compose,
#aceleres-topbar .acl-tb-btn.acl-tb-compose { display: none !important; }

/* Esconder dividers do topbar */
#aceleres-topbar .acl-tb-divider { display: none !important; }

/* Trocar imagem do botão home pelo logo-mini (mesmo do sidebar /rotinas-diarias) */
#aceleres-topbar .acl-tb-home img { display: none !important; }
#aceleres-topbar .acl-tb-home {
  background-image: url("/brand-assets/logo-mini.png") !important;
  background-size: 65% auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #fff !important;
  padding: 5px !important;
}

/* Gap entre itens do topbar */
#aceleres-topbar { gap: 15px !important; }

/* Reset chatwoot adiciona margin-bottom 1rem em todo input — zerar */
input[type]:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=color]):not([type=image]):not([type=hidden]):not(.reset-base):not(.no-margin) {
  margin-bottom: 0 !important;
}

/* Background do painel de conversa WhatsApp */
.conversation-details-wrap.chat-whats {
  background-color: #f7f5f3 !important;
}

/* Scrollbar fina e cinza clara na lista de conversas */
.conversations-list {
  scrollbar-width: thin;
  scrollbar-color: #e5e5e5 transparent;
}
.conversations-list::-webkit-scrollbar { width: 6px; height: 6px; }
.conversations-list::-webkit-scrollbar-thumb {
  background-color: #e5e5e5;
  border-radius: 3px;
}
.conversations-list::-webkit-scrollbar-thumb:hover {
  background-color: #d4d4d4;
}
.conversations-list::-webkit-scrollbar-track { background: transparent; }

/* Modal ComposeNewConversation: corpo com classe própria + remove blur do backdrop */
.acl-compose-modal-body {
  /* hook pra customizações futuras do corpo */
}
.acl-compose-modal-backdrop,
.acl-compose-modal-backdrop *,
.acl-compose-popover-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Empty state ("vazio-chat") com bg igual ao painel WhatsApp */
.acl-vazio-chat {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
  background-color: #f7f5f3 !important;
}

/* Container de filtros (tabs + chips + dropdown) na lista de conversas */
.acl-filters-bar {
  background-color: #fff;
}

/* Tab pill ativa — border-color semi-transparente */
.acl-pill-tab--active,
.acl-pill-tab--active:hover {
  border-color: #15603e45 !important;
}

/* Padding do wrapper de busca rapida (acima da lista de conversas) */
.acl-quick-search-wrap {
  padding: 6px 20px !important;
}

/* Botões do header da nova conversa um pouco maiores */
.acl-new-conv-header__icon-btn {
  width: 40px !important;
  height: 40px !important;
}

.acl-new-conv-header__icon-btn > span {
  width: 24px !important;
  height: 24px !important;
}

/* Pill de busca em si */
.acl-search-pill {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  background: rgba(194, 189, 184, 0.15) !important;
  border: none !important;
  border-radius: 50px !important;
  box-shadow: inset 0 0 0 0 transparent !important;
  transition: box-shadow 0.12s !important;
}

.acl-search-pill:hover {
  box-shadow: inset 0 0 0 1px #c4c4c4 !important;
}

.acl-search-pill:focus-within {
  box-shadow: inset 0 0 0 1.5px #1b8755 !important;
}

.dark .acl-search-pill {
  background: rgba(255, 255, 255, 0.04) !important;
}

.dark .acl-search-pill:hover {
  box-shadow: inset 0 0 0 1px #3f3f46 !important;
}

/* Abas pill (Atribuidos a mim / Nao atribuidos / Todos) centralizadas */
.acl-pill-tabs {
  justify-content: flex-start !important;
  padding: 10px 20px !important;
}

.acl-pill-tabs__rail {
  overflow: visible !important;
}

.acl-pill-tabs__scroller {
  min-height: 52px !important;
  padding-top: 6px !important;
  padding-bottom: 8px !important;
  box-sizing: border-box !important;
  overflow-y: visible !important;
  align-items: stretch !important;
}

/* Texto das pill tabs maior e mais bold (pedido 2026-06-30). */
.acl-pill-tabs .acl-pill-tab,
.acl-pill-tabs .acl-pill-tab__label {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Link "Esqueceu sua senha?" da tela de login Zoraxy: 12px (pedido 2026-06-30) */
.zoraxy-forgot a {
  font-size: 12px !important;
}

/* Aceleres: corrige o bico (tail) do bubble incoming (left-bubble) pra
   acompanhar o canto rounded-xl (12px) no top-left ao invés de ficar com
   o topo cortado.
   Top horizontal corrido do bubble pela esquerda → desce diagonal pro
   tip em (-12, 6) → volta diagonal pra (0, 12), exatamente onde o canto
   rounded acaba e a borda esquerda fica reta.
   Tail box: 24px wide × 12px tall, ancorado em top:0 / left:-12px.
   Polygon (em % do box 24×12):
     (100%, 0)   → (24, 0)  → bubble (12, 0)  = início do top reto do bubble
     (50%, 100%) → (12, 12) → bubble (0, 12)  = fim do rounded corner
     (0, 50%)   → (0, 6)   → bubble (-12, 6) = tip apontando esquerda
     (0, 0)     → (0, 0)   → topo-esquerda do tail
   (pedido 2026-06-30) */
.left-bubble::after {
  width: 24px !important;
  height: 12px !important;
  left: -12px !important;
  top: 0 !important;
  clip-path: polygon(100% 0, 50% 100%, 0 12%, 0 0) !important;
}

/* Aceleres: espelha o tail do right-bubble (verde outgoing) pro mesmo
   visual do left-bubble — bico no canto SUPERIOR DIREITO, 24×12, com
   polygon mirrored horizontalmente (tip aponta pra DIREITA em (100%, 12%)).
   Também zera o border-top-right-radius e restaura o bottom-right pra 12px
   (sobrescreve `border-bottom-right-radius: 0` definido em Message.vue).
   Polygon (em % do box 24×12, mirror do left-bubble):
     (0, 0)      → canto top-left do tail (encosta no bubble)
     (50%, 100%) → (12, 12) = fim do rounded corner (top-right do bubble)
     (100%, 12%) → (24, 1.44) = tip apontando direita
     (100%, 0)   → canto top-right do tail
   (pedido 2026-07-01) */
.right-bubble {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 12px !important;
}
.right-bubble::after {
  width: 24px !important;
  height: 12px !important;
  top: 0 !important;
  bottom: auto !important;
  right: -12px !important;
  left: auto !important;
  border-top-left-radius: 0 !important;
  clip-path: polygon(0 0, 50% 100%, 100% 12%, 100% 0) !important;
}

/* Aceleres: balões podem CRESCER até ~50% da linha (em vez do cap de 32rem
   do max-w-lg ≈ 512px) MAS continuam shrink-to-fit pra texto curto.
   Pré-requisito: o wrapper `<div class="grid gap-x-2 ...">` em Message.vue
   só recebe `w-full` pra variante EMAIL. Pra mensagens normais ele
   encolhe pra content-size, então qualquer cap em % no balão virava % de
   "nada útil" — texto longo quebrava em várias linhas dentro do balão
   estreito em vez do balão crescer. Forçamos w-full no grid pro 1fr
   representar a linha real, e DAÍ capamos o wrapper do balão em 50%.
     1) `.grid` filho de message-bubble-container: width 100%
     2) `.aceleres-bubble-with-actions`: max-width 50% (cap final)
     3) `.left-bubble / .right-bubble`: max-width 100% (libera max-w-lg)
   Display default (inline-block + inline-flex) preservado pra shrink
   continuar funcionando p/ texto curto. (pedido 2026-07-01) */
.message-bubble-container > div.grid {
  width: 100% !important;
}
div.\[grid-area\:bubble\] > .aceleres-bubble-with-actions {
  max-width: 50% !important;
}
div.\[grid-area\:bubble\] .left-bubble,
div.\[grid-area\:bubble\] .right-bubble {
  max-width: 100% !important;
}

/* Aceleres: esconde o avatar ao lado de cada mensagem — o nome do remetente
   já aparece no prefixo do balão, então o avatar duplica informação e
   come espaço horizontal. (pedido 2026-07-01) */
div.\[grid-area\:avatar\] {
  display: none !important;
}

/* Aceleres: flash de highlight quando o usuário clica num preview de
   reply-to (estilo WhatsApp Web — tap no quote → scrolla pra original
   e dá um flash amarelo suave por ~1.4s pra o agente saber pra onde
   foi). Aplicado pelo onScrollToMessage em MessagesView.vue.
   (pedido 2026-07-01) */
.message-bubble-container.acl-scroll-highlight {
  animation: acl-scroll-highlight-flash 1.4s ease-out;
}
@keyframes acl-scroll-highlight-flash {
  0% {
    background-color: rgba(250, 204, 21, 0);
  }
  20% {
    background-color: rgba(250, 204, 21, 0.32);
  }
  60% {
    background-color: rgba(250, 204, 21, 0.22);
  }
  100% {
    background-color: rgba(250, 204, 21, 0);
  }
}

/* Aceleres: hover state no preview de reply-to dentro do balão pra
   ficar óbvio que é clicável. (pedido 2026-07-01) */
.acl-reply-to-preview {
  transition: background-color 0.15s ease;
}
.acl-reply-to-preview:hover {
  background-color: rgba(194, 189, 184, 0.30) !important;
}

/* Aceleres: thumbnails de imagem/vídeo nos balões caem pro tamanho
   tipo WhatsApp (~280px máx no maior eixo). O clique no bubble já abre
   o GalleryView (lightbox) — definido em Image.vue / Video.vue. Aqui
   só CAPAMOS a renderização inline pra não ocupar a linha inteira.
   width/height auto destrava o intrínseco do <img> (HTML attrs) que
   estava forçando full size; max-width/height fazem o cap real.
   (pedido 2026-07-01) */
.message-bubble-container [data-bubble-name='image'] img,
.message-bubble-container [data-bubble-name='video'] video {
  width: auto !important;
  height: auto !important;
  max-width: 280px !important;
  max-height: 320px !important;
  cursor: pointer;
  display: block;
}
/* No bubble do balão a imagem fica em flex centro vertical — alguns
   navegadores mostram um vazio embaixo por linha-base inline-block;
   `display:block` resolve. */
.message-bubble-container [data-bubble-name='image'] {
  cursor: pointer;
}
.message-bubble-container [data-bubble-name='video'] {
  cursor: pointer;
}

/* ===================================================================
   Aceleres: reply-box em formato PÍLULA WhatsApp (pedido 2026-07-01)
     1. border-radius 50px no container .reply-box
     2. Não cresce sem limite — editor cap em ~8rem com scroll interno
     3. .left-wrap (emoji + botão "+") sai do flow do bottom-panel e vai
        POR CIMA da linha do placeholder via position: absolute, sem cor
        de fundo. Reserva `padding-left` no reply-box pro texto não
        colidir com os ícones. .right-wrap (enviar) fica na direita
        pelo bottom-panel padrão.
   =================================================================== */
/* =================================================================
   Aceleres: reply-box em SINGLE ROW WhatsApp-style (pedido 2026-07-01):
   [+] [emoji] [editor cresce] [🎤/enviar]  — tudo numa linha só, altura
   48.33px.

   Truque: .reply-box vira flex row. O ReplyBottomPanel outer
   (div.flex.justify-between.px-3.py-2) recebe `display: contents` pra
   os children dele (.left-wrap e .right-wrap) virarem flex-items diretos
   do .reply-box. Depois `order` posiciona: left-wrap (-1) → editor (0)
   → right-wrap (10).
   ================================================================= */
/* Aceleres 2026-07-01: reply-box replicado byte-a-byte do #atalhosInputRow
   (.jc-input-row de /atalhos-rapidos) — mesma pílula, mesmo padding, mesmo
   column-gap, mesma altura natural. Referência: public/css/jc-input-row.css
   no repo aceleres_novo. */
div.reply-box {
  margin: 0 0.5rem 0.5rem !important; /* mantém mx-2 mb-2 original */
  padding: 5px 5px 5px 18px !important; /* reduzido pra caber os botões 40px em 50px */
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 50px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  overflow: visible !important;
  height: 62.5px !important;    /* (pedido 2026-07-01) 50px VISUAL — html tem zoom:0.8, então 50/0.8=62.5 CSS */
  min-height: 62.5px !important;
  max-height: 62.5px !important;
  box-sizing: border-box !important;
  transition: border-radius 0.18s ease, padding 0.18s ease;
}
.dark div.reply-box {
  background: #2c2c2c !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
div.reply-box:focus-within,
div.reply-box:hover {
  border-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
.dark div.reply-box:focus-within,
.dark div.reply-box:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}
div.reply-box.is-private {
  background: #fffbeb !important;
}

/* Editor: fica no meio da linha, cresce ocupando o restante. */
div.reply-box .reply-box__top {
  flex: 1 1 auto !important;
  order: 0 !important;
  min-width: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* ReplyBottomPanel outer: display:contents desmonta o wrap, filhos
   (left-wrap + right-wrap) viram flex-items diretos do .reply-box. */
div.reply-box > div.flex.justify-between {
  display: contents !important;
}

/* Left-wrap: PRIMEIRO da linha (order -1), à esquerda do editor. */
div.reply-box .left-wrap {
  position: static !important;
  order: -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  background-color: transparent !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Right-wrap: ÚLTIMO da linha (order 10), à direita. */
div.reply-box .right-wrap {
  order: 10 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
}

/* Aceleres: botões do left-wrap (emoji + "+") — ícones PRETOS, GROSSOS,
   sem cor de fundo (nem no hover). O "grosso" nos mask-icons phosphor é
   feito com 4 drop-shadows offset 0.5px em currentColor (halo que engorda
   o traço). O "+" especificamente troca a mask thin por texto "+" 900. */
div.reply-box .left-wrap > button,
div.reply-box .left-wrap .acl-plus-wrap > button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
div.reply-box .left-wrap > button:hover:not(:disabled),
div.reply-box .left-wrap .acl-plus-wrap > button:hover:not(:disabled) {
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
}
div.reply-box .left-wrap span[class*='i-ph-'],
div.reply-box .left-wrap span[class*='i-lucide-'] {
  width: 22px !important;
  height: 22px !important;
  color: #000000 !important;
  filter:
    drop-shadow(0.6px 0 0 currentColor)
    drop-shadow(-0.6px 0 0 currentColor)
    drop-shadow(0 0.6px 0 currentColor)
    drop-shadow(0 -0.6px 0 currentColor) !important;
}
/* Aceleres 2026-07-01: swap do i-ph-smiley-sticker pelo MESMO SVG usado
   no .aceleres-bubble-smile (botão que abre a quick-react-pill em cada
   bolha) — stroke limpo em vez do filled path do Phosphor smiley original
   que ficava trêmulo em tamanho pequeno.
   SVG: viewBox 24x24, stroke-width 2, círculo grande + smile arc + 2
   dot lines pros olhos. Mesma geometria idêntica à do Message.vue:850. */
div.reply-box .left-wrap .i-ph-smiley-sticker {
  width: 26px !important;
  height: 26px !important;
  filter: none !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") !important;
  background-color: currentColor !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}
/* Botão "+" (acl-plus-wrap): troca o i-ph-plus (stroke 2px fino, não
   engrossável direto por CSS) por um "+" text-based bold. */
div.reply-box .left-wrap .acl-plus-wrap > button .i-ph-plus {
  display: none !important;
}
div.reply-box .left-wrap .acl-plus-wrap > button::before {
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 26px;
  font-weight: 400;         /* (pedido 2026-07-01) "+" regular */
  line-height: 1;
  color: #000000;
}

/* Send button (right-wrap) — VERDE WhatsApp, MAIOR, ícone maior.
   (pedido 2026-07-01) */
div.reply-box .right-wrap .wa-action-btn--send {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  background: #00a884 !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, filter 0.15s ease;
}
div.reply-box .right-wrap .wa-action-btn--send:hover:not(:disabled) {
  filter: brightness(1.05);
  background: #00a884 !important;
}
div.reply-box .right-wrap .wa-action-btn--send:active {
  transform: scale(0.96);
}
div.reply-box .right-wrap .wa-action-btn--send i {
  font-size: 22px !important;
  color: #ffffff !important;
}

/* Aceleres 2026-07-01: NextButton amber (note-send em modo Nota) recebe
   visual IDÊNTICO ao .wa-action-btn--send — verde, circular 42x42, com
   ícone paper-plane no lugar do label de texto. Match por type=submit
   + bg-n-amber-9 pra não pegar o mic amber (que fica sem type=submit). */
div.reply-box .right-wrap button[type="submit"].bg-n-amber-9 {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #00a884 !important;
  background-color: #00a884 !important;
  color: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  gap: 0 !important;
  transition: transform 0.15s ease, filter 0.15s ease;
}
div.reply-box .right-wrap button[type="submit"].bg-n-amber-9:hover:not(:disabled) {
  filter: brightness(1.05);
  background: #00a884 !important;
  background-color: #00a884 !important;
}
div.reply-box .right-wrap button[type="submit"].bg-n-amber-9:active {
  transform: scale(0.96);
}
/* Esconde o texto do label (NextButton renderiza label como span/text). */
div.reply-box .right-wrap button[type="submit"].bg-n-amber-9 > * {
  font-size: 0 !important;
  color: transparent !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}
/* Injeta o ícone paper-plane (mesmo shape do i-ph-paper-plane-right-fill)
   via ::before, centralizado no botão. */
div.reply-box .right-wrap button[type="submit"].bg-n-amber-9::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  visibility: visible !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M223.87 114L68.36 33.82a15.55 15.55 0 0 0-15.94.88a15.36 15.36 0 0 0-6.94 14.44l7.9 77.72a4 4 0 0 0 3.16 3.5l91 20a4 4 0 0 1 0 7.8l-91 20a4 4 0 0 0-3.16 3.5l-7.9 77.72A15.29 15.29 0 0 0 60.86 224a16 16 0 0 0 7.5-1.86L223.86 142a16 16 0 0 0 0-28Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M223.87 114L68.36 33.82a15.55 15.55 0 0 0-15.94.88a15.36 15.36 0 0 0-6.94 14.44l7.9 77.72a4 4 0 0 0 3.16 3.5l91 20a4 4 0 0 1 0 7.8l-91 20a4 4 0 0 0-3.16 3.5l-7.9 77.72A15.29 15.29 0 0 0 60.86 224a16 16 0 0 0 7.5-1.86L223.86 142a16 16 0 0 0 0-28Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* Mic button (right-wrap) — SEM background, ícone PRETO, MAIOR e com
   MAIS PADDING LATERAL (pill oval em vez de círculo fechado). */
div.reply-box .right-wrap .wa-action-btn--mic {
  width: auto !important;
  min-width: 52px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease;
}
div.reply-box .right-wrap .wa-action-btn--mic:hover:not(:disabled) {
  background: transparent !important;
  background-color: transparent !important;
  filter: none !important;
}
div.reply-box .right-wrap .wa-action-btn--mic i {
  font-size: 24px !important;
  color: #000000 !important;
  filter:
    drop-shadow(0.6px 0 0 currentColor)
    drop-shadow(-0.6px 0 0 currentColor)
    drop-shadow(0 0.6px 0 currentColor)
    drop-shadow(0 -0.6px 0 currentColor) !important;
}

/* Aceleres 2026-07-02: mic ficava invisivel em dark mode (icone preto sobre
   fundo escuro #2c2c2c). Icone claro no escuro; light mode inalterado. */
.dark div.reply-box .right-wrap .wa-action-btn--mic,
.dark div.reply-box .right-wrap .wa-action-btn--mic i {
  color: #e9edef !important;
}

/* Aceleres: ReplyTopPanel agora fora do reply-box (via classe
   `acl-reply-top-out` — ver ReplyBox.vue). Faixa estreita informativa
   acima da pílula. (pedido 2026-07-01) */
.acl-reply-top-out {
  padding: 0 0.5rem !important;
  margin-bottom: 0.25rem;
}

/* Banners informacionais movidos pra FORA da .reply-box (reply-to
   preview, quoted email, attachments, signature alert). Ficam como
   cards discretos acima da pílula. */
.acl-reply-banners {
  display: block;
}

/* Wrappers do editor (input/editor-wrap/menubar-wrapper): ZERAR padding
   e min-height. Antes empilhavam 8px×4 = 32px vertical à toa e o
   .reply-box ficava grosso. Só o .ProseMirror (leaf editable) mantém
   padding — é lá que o texto realmente respira. */
div.reply-box .reply-box__top .input,
div.reply-box .reply-box__top .editor-wrap,
div.reply-box .reply-box__top .ProseMirror-menubar-wrapper {
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* .ProseMirror (contenteditable real) — único que ganha altura, padding
   e tipografia da .jc-input do #atalhosInputRow. */
div.reply-box .reply-box__top .ProseMirror {
  min-height: 22px !important;
  max-height: 120px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  background: transparent !important;
  color: #111827 !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  resize: none !important;
}
.dark div.reply-box .reply-box__top .ProseMirror {
  color: #f3f4f6 !important;
}
div.reply-box .reply-box__top {
  width: 100%;
}

/* Enquanto grava áudio, o AudioRecorder ocupa o lugar do editor. */
div.reply-box .reply-box__top > div.w-full.p-1 {
  padding: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center;
  width: 100%;
}

/* ===================================================================
   Aceleres 2026-07-01: media queries responsivas idênticas às do
   #atalhosInputRow (jc-input-row.css). Escalona pílula, tools, send-btn
   e editor conforme a largura da tela.
   =================================================================== */
@media (min-width: 1440px) {
  div.reply-box {
    padding: 7px 7px 7px 20px !important;
    column-gap: 9px !important;
  }
  div.reply-box .reply-box__top .ProseMirror,
  div.reply-box .reply-box__top .input {
    font-size: 14.5px !important;
  }
  div.reply-box .left-wrap > button,
  div.reply-box .left-wrap .acl-plus-wrap > button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  div.reply-box .right-wrap .wa-action-btn,
  div.reply-box .right-wrap .wa-action-btn--send,
  div.reply-box .right-wrap .wa-action-btn--mic {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
}

@media (min-width: 1920px) {
  div.reply-box {
    padding: 8px 8px 8px 22px !important;
    column-gap: 10px !important;
  }
  div.reply-box .reply-box__top .ProseMirror,
  div.reply-box .reply-box__top .input {
    font-size: 15px !important;
    min-height: 24px !important;
    padding: 9px 0 !important;
  }
  div.reply-box .left-wrap > button,
  div.reply-box .left-wrap .acl-plus-wrap > button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  div.reply-box .left-wrap span[class*='i-ph-'],
  div.reply-box .left-wrap span[class*='i-lucide-'] {
    width: 18px !important;
    height: 18px !important;
  }
  div.reply-box .right-wrap .wa-action-btn,
  div.reply-box .right-wrap .wa-action-btn--send,
  div.reply-box .right-wrap .wa-action-btn--mic {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  div.reply-box .right-wrap .wa-action-btn i {
    font-size: 18px !important;
  }
}

@media (min-width: 2560px) {
  div.reply-box {
    padding: 10px 10px 10px 26px !important;
    column-gap: 12px !important;
    border-radius: 60px !important;
  }
  div.reply-box .reply-box__top .ProseMirror,
  div.reply-box .reply-box__top .input {
    font-size: 17px !important;
    min-height: 28px !important;
    max-height: 160px !important;
    padding: 10px 0 !important;
  }
  div.reply-box .left-wrap > button,
  div.reply-box .left-wrap .acl-plus-wrap > button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  div.reply-box .left-wrap span[class*='i-ph-'],
  div.reply-box .left-wrap span[class*='i-lucide-'] {
    width: 20px !important;
    height: 20px !important;
  }
  div.reply-box .right-wrap .wa-action-btn,
  div.reply-box .right-wrap .wa-action-btn--send,
  div.reply-box .right-wrap .wa-action-btn--mic {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  div.reply-box .right-wrap .wa-action-btn i {
    font-size: 20px !important;
  }
}

@media (min-width: 3840px) {
  div.reply-box {
    padding: 14px 14px 14px 34px !important;
    column-gap: 16px !important;
    border-radius: 80px !important;
  }
  div.reply-box .reply-box__top .ProseMirror,
  div.reply-box .reply-box__top .input {
    font-size: 22px !important;
    min-height: 36px !important;
    max-height: 200px !important;
    padding: 12px 0 !important;
  }
  div.reply-box .left-wrap > button,
  div.reply-box .left-wrap .acl-plus-wrap > button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }
  div.reply-box .left-wrap span[class*='i-ph-'],
  div.reply-box .left-wrap span[class*='i-lucide-'] {
    width: 26px !important;
    height: 26px !important;
  }
  div.reply-box .right-wrap .wa-action-btn,
  div.reply-box .right-wrap .wa-action-btn--send,
  div.reply-box .right-wrap .wa-action-btn--mic {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }
  div.reply-box .right-wrap .wa-action-btn i {
    font-size: 26px !important;
  }
}

@media (min-width: 5120px) {
  div.reply-box {
    padding: 18px 18px 18px 44px !important;
    column-gap: 20px !important;
    border-radius: 100px !important;
  }
  div.reply-box .reply-box__top .ProseMirror,
  div.reply-box .reply-box__top .input {
    font-size: 28px !important;
    min-height: 46px !important;
    max-height: 260px !important;
    padding: 16px 0 !important;
  }
  div.reply-box .left-wrap > button,
  div.reply-box .left-wrap .acl-plus-wrap > button {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
  }
  div.reply-box .left-wrap span[class*='i-ph-'],
  div.reply-box .left-wrap span[class*='i-lucide-'] {
    width: 32px !important;
    height: 32px !important;
  }
  div.reply-box .right-wrap .wa-action-btn,
  div.reply-box .right-wrap .wa-action-btn--send,
  div.reply-box .right-wrap .wa-action-btn--mic {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
  }
  div.reply-box .right-wrap .wa-action-btn i {
    font-size: 32px !important;
  }
}

@media (max-width: 768px) {
  /* iOS zoom-guard: 16px+ evita zoom automático no focus */
  div.reply-box .reply-box__top .ProseMirror,
  div.reply-box .reply-box__top .input {
    font-size: 16px !important;
  }
  div.reply-box .left-wrap > button,
  div.reply-box .left-wrap .acl-plus-wrap > button,
  div.reply-box .right-wrap .wa-action-btn,
  div.reply-box .right-wrap .wa-action-btn--send,
  div.reply-box .right-wrap .wa-action-btn--mic {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  /* Aceleres 2026-07-02: mic em tela pequena - a regra base tem padding 0 16px;
     com box-sizing border-box + width 36px o icone fica clipado a 4px e some.
     Zera o padding e vira circulo compacto 36x36 (icone visivel). */
  div.reply-box .right-wrap .wa-action-btn--mic {
    padding: 0 !important;
    min-width: 36px !important;
    border-radius: 50% !important;
  }
}

/* ===================================================================
   Aceleres: emoji picker do reply-box reusa o VISUAL do
   .aceleres-emoji-picker-card usado no MessageContextMenu (reações).
   ReplyBox.vue embrulha o <EmojiInput> em .aceleres-emoji-picker-card
   .acl-inline-picker; aqui aplicamos os estilos globalmente (o card
   scoped em MessageContextMenu.vue é isolado por data-v-* e não
   alcança este uso). Posicionamos ABSOLUTE sobre o input.
   (pedido 2026-07-01)
   =================================================================== */

/* Wrapper: quando dentro da reply-box, flutua ABSOLUTE por cima do
   editor. Fora dela (no MessageContextMenu) o wrap tem seu próprio
   posicionamento por Teleport. */
div.reply-box .aceleres-emoji-picker-card.acl-inline-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 8px;
  z-index: 60;
  background: #f7f8fa;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.06);
  width: 420px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dark div.reply-box .aceleres-emoji-picker-card.acl-inline-picker {
  background: #1e293b;
}

/* Body wrapper — normaliza o EmojiInput embutido (o componente foi
   feito pra abrir flutuando; aqui vai EMBUTIDO). Mesmo shape do
   MessageContextMenu.vue `.aceleres-emoji-picker-body :deep(...)`. */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  z-index: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog > .flex.flex-col {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}
/* Aceleres 2026-07-01: cap de altura do emoji-picker-card + scroll interno
   no grid pra caber DENTRO da MessagesView (.scrollbar-thin). O grid é
   quem rola; footer (tabs) + search continuam visíveis fixos. */
.aceleres-emoji-picker-card {
  height: 280px !important;
  max-height: 280px !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body {
  flex: 1 1 auto;
  min-height: 0;
}
/* Grid interno de emojis: flex-1 + min-height:0 + scroll vertical */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog .emojis-container,
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog [class*="grid-cols"],
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog > .flex.flex-col > div:not(.emoji-dialog--footer):not(.flex.gap-2):last-child {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
/* Footer no topo via order: -1, sem bg, mais padding */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog > .flex.flex-col > .emoji-dialog--footer {
  order: -1;
  background: transparent !important;
  border-bottom: 0 !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 10px 14px !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer ul {
  gap: 0 !important;
  justify-content: space-between;
  overflow: hidden !important;
  left: 0 !important;
  padding: 2px 0 !important;
  list-style: none;
  margin: 0;
  display: flex;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li {
  flex: 1 1 0;
  position: relative;
  padding: 2px !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li .emoji--item {
  width: 100% !important;
  height: 34px !important;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.12s, opacity 0.12s;
  opacity: 0.65;
  filter: grayscale(0.15);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:hover .emoji--item {
  opacity: 1;
  filter: none;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li .active {
  background: transparent !important;
  color: #000 !important;
  opacity: 1 !important;
  filter: none !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:has(.active)::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -2px;
  height: 3px;
  border-radius: 2px;
  background: #00a884;
}
/* --------------------------------------------------------------
   Ícones de categoria estilo WhatsApp: esconde o emoji/glyph
   original renderizado no <button> e substitui por um mask-icon
   (SVG outline) que herda `currentColor` — assim ele fica preto
   automático no estado .active (color: #000 acima) e transparente
   nas outras tabs (color: rgba(0,0,0,0.5)).
   -------------------------------------------------------------- */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li .emoji--item {
  position: relative;
  font-size: 0 !important; /* esconde emoji-glyph inline */
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li .emoji--item svg,
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li .emoji--item i {
  display: none !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li .emoji--item::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* 1º tab (Recentes/Busca) → relógio */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(1) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
/* 2º tab: Smileys & Emotion → carinha */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(2) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
}
/* 3º tab: People & Body → pessoa */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(3) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* 4º tab: Animals & Nature → pata */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(4) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Ccircle cx='4' cy='8' r='2'/%3E%3Cpath d='M8.4 13.4c-1.1 1.1-1.7 2.5-1.7 3.9 0 1.8 1 3.2 2.7 3.2.9 0 1.5-.3 2.6-.3s1.7.3 2.6.3c1.7 0 2.7-1.4 2.7-3.2 0-1.4-.6-2.8-1.7-3.9-.8-.9-1.9-1.4-3.6-1.4s-2.8.5-3.6 1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Ccircle cx='4' cy='8' r='2'/%3E%3Cpath d='M8.4 13.4c-1.1 1.1-1.7 2.5-1.7 3.9 0 1.8 1 3.2 2.7 3.2.9 0 1.5-.3 2.6-.3s1.7.3 2.6.3c1.7 0 2.7-1.4 2.7-3.2 0-1.4-.6-2.8-1.7-3.9-.8-.9-1.9-1.4-3.6-1.4s-2.8.5-3.6 1.4z'/%3E%3C/svg%3E");
}
/* 5º tab: Food & Drink → maçã */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(5) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
}
/* 6º tab: Travel & Places → carro */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(6) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2'/%3E%3Ccircle cx='6.5' cy='16.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2'/%3E%3Ccircle cx='6.5' cy='16.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='2.5'/%3E%3C/svg%3E");
}
/* 7º tab: Activities → bola */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(7) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M19.07 4.93 4.93 19.07'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M19.07 4.93 4.93 19.07'/%3E%3C/svg%3E");
}
/* 8º tab: Objects → lâmpada */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(8) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2V17h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2V17h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
/* 9º tab: Symbols → coração/símbolo */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(9) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
/* 10º tab: Flags → bandeira */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog--footer li:nth-child(10) .emoji--item::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E");
}
/* Search input pill */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog > .flex > .flex.gap-2 {
  margin: 10px 14px 6px 14px !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog input[type='text'] {
  width: 100%;
  border-radius: 50px !important;
  padding-left: 32px !important;
  padding-right: 12px !important;
  /* Aceleres: h-8 (2rem/32px) ficou apertado — subir pra 38px sem
     mexer no arredondamento nem no ícone de lupa. (pedido 2026-07-01) */
  height: 38px !important;
  min-height: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 14px 14px;
}
/* Emoji grid: 8 colunas fixas, item 38px 24px */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-item {
  height: 380px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 8px 8px 8px;
  box-sizing: border-box !important;
  scrollbar-width: thin;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-item--continuous .emoji--section-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f8fa;
  padding: 6px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji--row {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 0 !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji--row .emoji--item {
  width: 100% !important;
  height: 38px !important;
  font-size: 24px !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.1s;
  flex-shrink: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji--row .emoji--item:hover {
  background: rgba(0, 0, 0, 0.06);
}
/* Esconde a setinha pseudo do EmojiInput default */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog::before {
  display: none !important;
}

/* ===================================================================
   Aceleres: gravação de áudio no reply-box — replica o visual da
   .jc-recording-bar dos composers Aceleres (atalhos/rotina/conselho/
   sac). Timer + wave + cancel(X) + send(✓) numa única linha.

   Diferença semântica: o áudio NÃO é transcrito, é enviado direto
   como anexo audio (comportamento nativo do AudioRecorder de Chatwoot
   via `finishAudioRecording` → attaches o blob).
   (pedido 2026-07-01)
   =================================================================== */

/* O <div ref="waveformContainer" class="w-full p-1"> do AudioRecorder
   vive dentro do reply-box__top. Estilo dele pra ficar como wave da
   jc-recording-bar. */
div.reply-box .reply-box__top > div.w-full.p-1 {
  padding: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center;
}
/* Alguns wavesurfer canvases têm inline width — deixamos flex crescer */
div.reply-box .reply-box__top > div.w-full.p-1 canvas {
  height: 32px !important;
  max-height: 32px !important;
}

/* Durante a gravação, quando o AudioRecorder tá visível, escondemos o
   left-wrap (emoji + "+") pra não competir espaço — o mic-cancel-send
   vira o único cluster de controles. O left-wrap volta quando o recorder
   sai. Selector: qualquer .reply-box que TENHA descendente
   .w-full.p-1 (o wrap do wavesurfer). */
/* Aceleres 2026-07-02 (fix gravar audio): durante a gravacao, esconder SO o
   botao "+" e o emoji (limpa a barra), MANTENDO visiveis os controles play /
   finalizar / descartar - que tambem vivem no left-wrap. Antes isto escondia
   o left-wrap inteiro e sumia com o botao de finalizar, entao o audio nunca
   era anexado e o botao enviar ficava bloqueado. */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .left-wrap .acl-plus-wrap,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .left-wrap button:has(.i-ph-smiley-sticker) {
  display: none !important;
}
div.reply-box:has(.reply-box__top > div.w-full.p-1) {
  padding-left: 6px !important;
}

/* Estilos dos botões de finalizar/apagar durante gravação — 32x32
   circular preto/vermelho, mesmo padrão do jc-rec-cancel/jc-rec-stop. */
div.reply-box .left-wrap.acl-recording-controls > button,
div.reply-box .right-wrap.acl-recording-controls > button {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

/* -------------------------------------------------------------------
   Aceleres 2026-07-01: Recording bar visual completa — fecha o gap
   entre a implementação Chatwoot (waveform em .reply-box__top +
   botões em ReplyBottomPanel) e o visual da jc-recording-bar (uma
   barra única com timer • wave • ✓ • 🗑).
   Detecção de estado: `div.reply-box:has(.reply-box__top > div.w-full.p-1)`
   — só aplica quando o AudioRecorder está montado.
   ------------------------------------------------------------------- */

/* 1) Waveform ocupa TODA a largura livre entre timer e cluster de ações.
   O `.reply-box__top` é o wrapper flex que contém a wavesurfer div. */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .reply-box__top {
  flex: 1 1 auto !important;
  min-width: 80px !important;
}
div.reply-box:has(.reply-box__top > div.w-full.p-1) .reply-box__top > div.w-full.p-1 {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 80px !important;
}

/* 2) Timer do play/pause em destaque (WhatsApp-style) — o
   <NextButton :label="recordingAudioDurationText"> vira monoespaçado,
   negrito, com bolinha vermelha pulsante ANTES dele indicando REC. */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-play-fill),
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-pause-fill),
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-play),
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-pause) {
  order: -1 !important;                /* joga o timer pra ANTES da onda */
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  gap: 6px !important;
}
/* Ícone do play/pause preto pra combinar com timer */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-play-fill) span,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-pause-fill) span,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-play) span,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-pause) span {
  color: #111827 !important;
}

/* 3) Botão ✓ FINALIZAR — círculo verde WhatsApp #00a884, ícone branco */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-check),
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-check) {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #00a884 !important;
  background-color: #00a884 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.12s ease, transform 0.08s ease !important;
}
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-check):hover,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-check):hover {
  background: #008f70 !important;
  background-color: #008f70 !important;
  transform: scale(1.04);
}
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-check) span,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-check) span {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
}

/* 4) Botão 🗑 DESCARTAR — círculo vermelho #e5484d, ícone branco */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-trash),
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-trash),
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-trash-2) {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #e5484d !important;
  background-color: #e5484d !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.12s ease, transform 0.08s ease !important;
}
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-trash):hover,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-trash):hover,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-trash-2):hover {
  background: #cd2b31 !important;
  background-color: #cd2b31 !important;
  transform: scale(1.04);
}
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-trash) span,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-trash) span,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-trash-2) span {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
}

/* 5) Esconder editor placeholder + menubar durante gravação — a onda
   assume o espaço horizontal, o texto/placeholder some. */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .reply-box__top .ProseMirror-menubar-wrapper,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .reply-box__top .ProseMirror,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .reply-box__top .editor-wrap,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .reply-box__top .input {
  display: none !important;
}

/* 6) Bolinha vermelha pulsante ANTES do timer — indicador "REC" */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-play-fill)::before,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-pause-fill)::before,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-play)::before,
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-pause)::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  margin-right: 2px;
  flex-shrink: 0;
  animation: acl-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes acl-rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* 7) Gap maior entre elementos do right-wrap durante gravação */
div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap {
  gap: 8px !important;
}

/* 8) Dark mode — timer com fundo alpha-white ao invés de alpha-black */
.dark div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-play-fill),
.dark div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-pause-fill),
.dark div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-play),
.dark div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-pause) {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}
.dark div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-play-fill) span,
.dark div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-ph-pause-fill) span,
.dark div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-play) span,
.dark div.reply-box:has(.reply-box__top > div.w-full.p-1) .right-wrap > button:has(.i-lucide-pause) span {
  color: #f3f4f6 !important;
}

/* ConversationHeader: forçar layout em linha sempre. O Chatwoot só vira
   flex-row no breakpoint xl: (1280px); abaixo disso a barra de ações
   (.header-actions-wrap) quebra pra segunda linha. O painel da conversa
   tipicamente é mais estreito que 1280px, então o stack vertical aparece
   na prática sempre. (pedido 2026-06-30) */
div.flex.flex-col.gap-3.items-center.justify-between.flex-1.w-full.min-w-0.h-20.bg-white.cursor-pointer {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
div.flex.flex-col.gap-3.items-center.justify-between.flex-1.w-full.min-w-0.h-20.bg-white.cursor-pointer > div:first-child {
  width: auto !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
div.flex.flex-col.gap-3.items-center.justify-between.flex-1.w-full.min-w-0.h-20.bg-white.cursor-pointer > .header-actions-wrap {
  width: auto !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
}

/* Modal de nova conversa (popover): abrir pra DIREITA do trigger */
:has(> .acl-compose-modal-body) {
  left: 0 !important;
  right: unset !important;
}
/* Sobe stacking context da raiz do ComposeConversation pra ficar acima do #aceleres-topbar (z 9999) */
.relative.z-50:has(.acl-compose-modal-body) {
  z-index: 100001 !important;
}
/* Backdrop escuro precisa cobrir tambem o topbar pra modal se destacar */
.acl-compose-popover-backdrop {
  z-index: 100000 !important;
}

/* ===================================================================
   Aceleres 2026-07-01: dentro da .aceleres-quick-react-pill.is-right
   (pill de reação rápida aberta em bubbles outgoing) —
     1) ícones (emojis + botão "+") maiores que o default 3rem
     2) o "+" fica MAIS GROSSO: escondemos o span .i-lucide-plus (stroke
        fino de 2px, não configurável via CSS por ser mask-image) e
        injetamos um "+" text-based com font-weight 900 via ::before
     3) hover do "+" ganha CÍRCULO CINZA de fundo (override da regra
        base em Message.vue que deixa transparente).
   Selectors casam a especificidade dos scoped da Message.vue (0,3,0);
   este arquivo carrega DEPOIS do bundle Vite → wins na cascata.
   =================================================================== */
.aceleres-quick-react-pill.is-right .aceleres-emoji-btn {
  width: 2.25rem !important;   /* ~36px — padrão WhatsApp reaction pill */
  height: 2.25rem !important;
  font-size: 1.375rem !important; /* ~22px emoji glyph */
}
.aceleres-quick-react-pill.is-right .aceleres-emoji-btn > span {
  width: 1.375rem !important;  /* ~22px SVG dentro do botão */
  height: 1.375rem !important;
}
/* Reforço: alguns SVGs vêm com w-*/h-* utilities inline (ex.: w-6 h-6, w-8 h-8)
   ou size fixo direto no atributo — apertar por seletor de elemento. */
.aceleres-quick-react-pill.is-right .aceleres-emoji-btn svg {
  width: 1.375rem !important;
  height: 1.375rem !important;
}
.aceleres-quick-react-pill.is-right .aceleres-emoji-btn--more {
  position: relative;
  border-radius: 50% !important;
  transition: background-color 0.15s ease;
}
.aceleres-quick-react-pill.is-right .aceleres-emoji-btn--more .i-lucide-plus {
  display: none !important;
}
.aceleres-quick-react-pill.is-right .aceleres-emoji-btn--more::before {
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: #060606;
}
.aceleres-quick-react-pill.is-right .aceleres-emoji-btn--more:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
}
.aceleres-quick-react-pill.is-right .aceleres-emoji-btn--more:hover::before {
  color: #111827;
}
.dark .aceleres-quick-react-pill.is-right .aceleres-emoji-btn--more::before {
  color: #d1d5db;
}
.dark .aceleres-quick-react-pill.is-right .aceleres-emoji-btn--more:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
}
.dark .aceleres-quick-react-pill.is-right .aceleres-emoji-btn--more:hover::before {
  color: #ffffff;
}

/* Aceleres 2026-07-01: pill/chevron do resize handle REMOVIDO por pedido
   do usuário. Volta ao visual original de ChatList.vue: linha de 4px
   invisível que fica cinza translúcida no hover/drag. Nada de pseudo-
   elementos aqui — se algum estilo scoped da Vue precisar ser mantido,
   é ele que manda. */

/* ===================================================================
   Aceleres: .resizable-editor-wrapper (container que embrulha a
   ReplyBox / pílula de composição) NÃO deve ficar branco chapado —
   tem que herdar/casar com o bg do chat de mensagem (WhatsApp beige
   #f7f5f3). O ancestral `bg-n-surface-1` da MessagesView vinha
   pintando branco em light mode; explicitamos aqui.
   (pedido 2026-07-01)
   =================================================================== */
.resizable-editor-wrapper {
  background-color: #f7f5f3 !important;
}
.dark .resizable-editor-wrapper {
  background-color: transparent !important;
}

/* ===================================================================
   Aceleres: DropdownMenu (components-next/dropdown-menu/DropdownMenu.vue)
   — o container `bg-n-alpha-3 backdrop-blur-[100px] outline-n-container
   rounded-xl flex flex-col ...`. Reveste os botões pra ficarem com o
   MESMO visual dos items do #acl-pill-sort-popover: font 15px, cor
   #1a1a1a (near-black), hover #f3f4f6, ícones 16px, padding 10×12,
   border-radius 6px.

   Selector-âncora: `.bg-n-alpha-3.backdrop-blur-\[100px\]
   .outline-n-container.rounded-xl.flex-col` — combinação única do
   DropdownMenu (não colide com dropdowns customizados que usam bg-alpha
   sem outline-n-container ou sem rounded-xl).
   (pedido 2026-07-01)
   =================================================================== */
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  color: #1a1a1a !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}
/* Label span dentro do botão (Tailwind text-sm → 14px; forçar 15px) */
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button > span {
  font-size: 15px !important;
  color: inherit !important;
}
/* Ícones (size-3.5 = 14px → 16px pra bater com .acl-pill-sort-item__icon) */
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button [class*='i-lucide-'],
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button [class*='i-ph-'],
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
/* Hover — cinza claro como o .acl-pill-sort-item:hover */
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button:hover:not(:disabled) {
  background-color: #f3f4f6 !important;
  color: #1a1a1a !important;
}
/* Item selecionado (Chatwoot marca com .bg-n-alpha-1) — mesma cor de
   fundo do .acl-pill-sort-item--active + font-weight 600. */
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button.bg-n-alpha-1 {
  background-color: #e5e7eb !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
}
/* Dark mode — bate com :global(.dark) do ChatTypeTabs.vue */
.dark .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button {
  color: #e5e5e5 !important;
}
.dark .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button:hover:not(:disabled) {
  background-color: #2a2d30 !important;
  color: #e5e5e5 !important;
}
.dark .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button.bg-n-alpha-1 {
  background-color: #3a3d40 !important;
  color: #f3f4f6 !important;
}

/* ===================================================================
   Aceleres 2026-07-01: .aceleres-gallery-overlay (overlay do preview de
   anexos que fica DENTRO de .conversation-details-wrap) precisa colar
   flush no border-b do ConversationHeader (h-20 = 5rem).

   Regras herdadas do scoped SCSS de AttachmentsPreview.vue: top:5rem +
   padding:0.5rem 1rem 1rem 1rem. Sob zoom:0.8 do html, o border-b de
   1px do header renderiza como 0.8px físico e sobra hairline gap entre
   o header e o overlay.

   Fix: sobrepõe 1px no border-b via `top: calc(5rem - 1px)` — o overlay
   passa a "grudar" na linha do border, sem gap subpixel; e o padding-top
   interno vai a zero pra que o topbar do overlay (X de descartar) fique
   ancorado logo abaixo da borda em vez de flutuar 8px pra baixo.
   =================================================================== */
.aceleres-gallery-overlay {
  top: calc(5rem - 23px) !important;
  padding-top: 0 !important;
  /* z-index alto pra ficar POR CIMA do botão "Ver mensagens anteriores"
     (div.flex.justify-center.py-2.flex-shrink-0 em MessagesView.vue:742)
     e de qualquer outro elemento absolute/sticky dentro da conversa.
     (pedido 2026-07-01) */
  z-index: 9999 !important;
}

/* ===================================================================
   Aceleres 2026-07-01: texto das mensagens (bubble) em 15px.
   O <p> do conteúdo vem do MessageFormatter dentro de .prose-bubble
   (FormattedContent.vue / Text/Index.vue), cuja base é 12px. Bump pra
   15px pra melhorar legibilidade. .prose-bubble só existe em bubbles de
   mensagem (Text/Email/Template) — não afeta lista de conversas nem headers.
   =================================================================== */
.prose-bubble p {
  font-size: 15px !important;
}

/* ===================================================================
   Aceleres 2026-07-03: botões de hover ao lado da bolha — reagir
   (.aceleres-bubble-smile) e encaminhar (.aceleres-bubble-forward).
   Override dos scoped styles de Message.vue (que vêm no bundle Vite);
   este arquivo carrega DEPOIS do bundle → !important wins na cascata.
   3 ajustes pedidos:
     1) SEM "pop" no hover: remover o scale(1.08) e o drop-shadow que
        fazem o botão "vir pra frente". O botão continua aparecendo
        (opacity) no hover da bolha — só não cresce nem ganha sombra.
        Vale p/ is-right-bubble e is-left-bubble (o forward só existe em
        outgoing/right mesmo).
     2) Ícones (SVG) um pouco maiores.
     3) Sombra (box-shadow) dos botões mais suave.
   =================================================================== */

/* 1) sem pop no hover — smile (:hover + pill aberta/is-active) e forward */
.aceleres-bubble-smile:hover,
.aceleres-bubble-smile.is-active,
.aceleres-bubble-forward:hover {
  transform: translateY(-50%) !important;
  filter: none !important;
}

/* 2) ícones maiores (override do width/height fixo no atributo do SVG) */
.aceleres-bubble-smile svg {
  width: 22px !important;
  height: 22px !important;
}
.aceleres-bubble-forward svg {
  width: 20px !important;
  height: 20px !important;
}

/* 3) sombra mais suave nos dois botões */
.aceleres-bubble-smile,
.aceleres-bubble-forward {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ===================================================================
   Aceleres 2026-07-03: BICO (ponta) do balão de volta no card de ÁUDIO.
   O wrapper BaseBubble do áudio vem com bg-transparent (o fundo visível
   fica no card .acl-wa-audio / bg-n-alpha-white) e, com hide-meta=true,
   sem position:relative. O ::after padrão de .left-bubble/.right-bubble
   por isso (a) herdava background transparente e (b) não ancorava no
   wrapper → o card de áudio perdeu a ponta. Fix: desenhar a ponta no
   PRÓPRIO card .acl-wa-audio (cor idêntica ao card via inherit, em
   qualquer tema), com o canto quadrado onde o bico encaixa (igual aos
   bubbles de texto). A ponta fantasma do wrapper é suprimida pra evitar
   double-tip. Obs: __waveform já é position:relative (Audio.vue:249),
   então tornar o card relative NÃO afeta o playhead.
   =================================================================== */

/* wrapper do áudio: remove a ponta fantasma (herdava bg transparent) */
[data-bubble-name="audio"]::after {
  content: none !important;
}

/* card vira âncora da ponta; canto quadrado onde o bico encaixa */
.acl-wa-audio {
  position: relative !important;
}
.left-bubble .acl-wa-audio {
  border-top-left-radius: 0 !important;
}
.right-bubble .acl-wa-audio {
  border-bottom-right-radius: 0 !important;
}

/* ponta no card — cor idêntica ao card (bg-n-alpha-white) via inherit.
   Geometria igual à dos bubbles de texto: left = clip-path pontiagudo,
   right = curva. (cfr. .left-bubble::after / .right-bubble::after) */
.left-bubble .acl-wa-audio::after,
.right-bubble .acl-wa-audio::after {
  content: '' !important;
  position: absolute !important;
  background-color: inherit !important;
  pointer-events: none !important;
  height: 12px !important;
}
.left-bubble .acl-wa-audio::after {
  width: 24px !important;
  left: -12px !important;
  top: 0 !important;
  clip-path: polygon(100% 0, 50% 100%, 0 12%, 0 0) !important;
}
.right-bubble .acl-wa-audio::after {
  width: 7px !important;
  bottom: 0 !important;
  right: -7px !important;
  border-top-left-radius: 12px 12px !important;
}

/* Aceleres 2026-07-03: card de áudio ENVIADO (outgoing) verde, igual aos
   bubbles de texto/imagem/vídeo/arquivo. O chip .acl-wa-audio vem com
   bg-n-alpha-white (branco) hardcoded e o wrapper BaseBubble do áudio é
   bg-transparent, então o áudio enviado ficava branco — quebrando o padrão
   verde dos cards enviados. #d9fdd3 = mesma cor do variant AGENT
   (bg-[#d9fdd3]) em Base.vue (vale p/ light e dark). A ponta (::after com
   background-color:inherit) acompanha e fica verde também. Play/waveform/
   texto são escuros → legíveis no verde; o playhead verde (#00a884) tem
   outline branco. Incoming (.left-bubble) continua branco. */
.right-bubble .acl-wa-audio {
  background-color: #d9fdd3 !important;
}