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

/* Aceleres 2026-07-17: o wallpaper do WhatsApp deve aparecer também no chat
   desktop. A regra equivalente ficava limitada ao breakpoint mobile. */
.painel-atendimento .conversation-details-wrap.chat-whats .acl-messages-view {
  background-color: #efeae2 !important;
  background-image: url('/assets/images/aceleres-chat-pattern.svg') !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  background-size: 160px 160px !important;
}

/* Aceleres: the conversation column must be a bounded flex column on every
   viewport. Without this, its content-sized message list expands the whole
   column and pushes the composer below the visible area. */
.painel-atendimento .conversation-details-wrap {
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 0% !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.painel-atendimento .conversation-details-wrap .acl-conversation-mobile-body {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
}

.painel-atendimento .conversation-details-wrap .acl-messages-view {
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
}

.painel-atendimento .conversation-details-wrap .acl-message-list {
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 0% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.painel-atendimento .conversation-details-wrap .acl-conversation-composer-shell,
.painel-atendimento .conversation-details-wrap .acl-conversation-mobile-composer {
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* Mobile media viewer: use the dynamic viewport, keep every action reachable,
   and overlay gallery navigation instead of shrinking the image stage. */
@media (max-width: 767px) {
  .acl-media-viewer-modal {
    --acl-media-safe-top: var(
      --aceleres-app-safe-top,
      env(safe-area-inset-top, 0px)
    );
    --acl-media-safe-bottom: var(
      --aceleres-app-safe-bottom,
      env(safe-area-inset-bottom, 0px)
    );
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: var(--acl-media-viewport-width, 125vw) !important;
    min-width: var(--acl-media-viewport-width, 125vw) !important;
    max-width: var(--acl-media-viewport-width, 125vw) !important;
    height: var(--acl-media-viewport-height, 125dvh) !important;
    min-height: var(--acl-media-viewport-height, 125dvh) !important;
    max-height: var(--acl-media-viewport-height, 125dvh) !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    z-index: 2147483647 !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .acl-media-viewer-modal .acl-media-viewer {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px 64px !important;
    width: 100% !important;
    height: calc(132px + var(--acl-media-safe-top)) !important;
    min-height: calc(132px + var(--acl-media-safe-top)) !important;
    padding: calc(8px + var(--acl-media-safe-top)) 8px 8px !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-header > div:first-child {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 68px !important;
    box-sizing: border-box !important;
  }

  .acl-media-viewer-modal
    .acl-media-viewer-header
    > div:first-child
    > div {
    min-width: 0 !important;
  }

  .acl-media-viewer-modal
    .acl-media-viewer-header
    > div:first-child
    h3,
  .acl-media-viewer-modal
    .acl-media-viewer-header
    > div:first-child
    span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-header > div:nth-child(2) {
    display: none !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-actions {
    grid-row: 2 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-actions > button {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    padding: 0 !important;
    flex: 0 0 60px !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #111827 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-actions > button svg,
  .acl-media-viewer-modal
    .acl-media-viewer-actions
    > button
    [class*='i-lucide'] {
    width: 32px !important;
    height: 32px !important;
    font-size: 32px !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-actions > button:last-child {
    position: absolute !important;
    top: calc(6px + var(--acl-media-safe-top)) !important;
    right: 8px !important;
    z-index: 2 !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-stage {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-content {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-image-wrap {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-content img,
  .acl-media-viewer-modal .acl-media-viewer-content video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-content audio {
    width: min(100%, 32rem) !important;
    max-width: 100% !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-nav {
    position: absolute !important;
    top: 50% !important;
    width: 68px !important;
    height: 76px !important;
    z-index: 20 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-nav--previous {
    left: 4px !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-nav--next {
    right: 4px !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-nav > button {
    width: 64px !important;
    height: 64px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 9999px !important;
    background: rgba(17, 24, 39, 0.82) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.24) !important;
    pointer-events: auto !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-nav > button svg,
  .acl-media-viewer-modal
    .acl-media-viewer-nav
    > button
    [class*='i-lucide'] {
    width: 34px !important;
    height: 34px !important;
    font-size: 34px !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-nav > button:disabled {
    opacity: 0.32 !important;
  }

  .dark .acl-media-viewer-modal .acl-media-viewer-actions > button {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(32, 44, 51, 0.96) !important;
    color: #f8fafc !important;
  }

  .acl-media-viewer-modal .acl-media-viewer-footer {
    width: 100% !important;
    height: calc(44px + var(--acl-media-safe-bottom)) !important;
    min-height: calc(44px + var(--acl-media-safe-bottom)) !important;
    padding: 0 8px var(--acl-media-safe-bottom) !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* Aceleres: GIFs e stickers nao devem receber o overlay escuro dos controles
   de imagem quando o cursor passa por cima. O componente antigo ainda pode
   estar em cache, por isso o override cobre tambem a estrutura legada. */
.message-bubble-container
  :is([data-bubble-name='gif'], [data-bubble-name='sticker'])
  .group
  > div.absolute.inset-0 {
  display: none !important;
}

.message-bubble-container
  :is([data-bubble-name='gif'], [data-bubble-name='sticker'])
  .group
  > div.absolute.right-2.bottom-2 {
  display: none !important;
}

/* Pedido 2026-08-11: GIF passa a ter cartão igual ao vídeo normal — fundo
   (branco recebido, verde claro enviado, herdado da classe bg-* que o
   Base.vue já aplica em toda bolha) e moldura #111 no player, em vez do
   canvas transparente "flutuante" que o GIF tinha antes. Por isso as
   declaracoes `background: transparent` que existiam aqui (bolha, player e
   asset) saíram — sem elas a bolha volta a usar o mesmo fundo/letterbox que
   já vale pra vídeo (linhas ~7938 e ~7985). */
.message-bubble-container
  :is(
    [data-bubble-name='gif'].acl-video-bubble,
    [data-bubble-name='gif'].acl-gif-bubble
  ) {
  /* Espessura da moldura do GIF num lugar só. Ela entra na conta do teto do
     frame (max-width: 100% menos as duas bordas), então os dois números têm
     de andar juntos — quando eram literais separados, o mobile baixava a
     moldura para 2px só numa das duas formas do GIF e o mesmo ficheiro saía
     com 338px vindo do WhatsApp e 340px vindo de um .gif. */
  --acl-gif-frame-border: 3px;
  --acl-gif-frame-radius: 8px;
  padding: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* Pedido 2026-08-12: o teto de altura (min(344px, 42vh)) e o `aspect-ratio:
   auto` saíram daqui. O tamanho do GIF agora vem inline do componente
   (gifFrameStyle), com a proporção real do arquivo; um teto de altura em
   !important só cortava a caixa-alvo pela metade e devolvia tarja preta, e o
   `aspect-ratio: auto` apagava a proporção inline. O que continua sendo
   trabalho do CSS é a moldura e o fundo. */
.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__player, .acl-video-bubble__player--gif) {
  overflow: hidden !important;
  background: #111 !important;
}

.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__asset, video) {
  object-fit: contain !important;
  background: #111 !important;
}

/* Pedido 2026-08-11: GIF enviado ganha moldura no mesmo verde da própria
   bolha de mensagem enviada (#d9fdd3), só do lado de quem envia — mesma
   ideia e mesma cor da moldura da imagem enviada
   (.acl-image-bubble__asset-frame, linha ~622). */
.message-bubble-container
  .right-bubble[data-bubble-name='gif']
  :is(.acl-video-bubble__player, .acl-video-bubble__player--gif),
.message-bubble-container
  .right-bubble.acl-gif-bubble
  div.relative {
  border: var(--acl-gif-frame-border) solid #d9fdd3 !important;
}

/* Pedido 2026-08-11: GIF recebido ganha a mesma moldura, em branco — mesma
   cor da bolha de mensagem recebida, espelhando a regra acima. */
.message-bubble-container
  .left-bubble[data-bubble-name='gif']
  :is(.acl-video-bubble__player, .acl-video-bubble__player--gif),
.message-bubble-container
  .left-bubble.acl-gif-bubble
  div.relative {
  border: var(--acl-gif-frame-border) solid #fff !important;
}

/* Nome do remetente ACIMA do GIF, em barra própria — mesmo desenho que
   figurinha e GIF-imagem já usam (aceleres-pill-icons.css). Aqui precisa de
   regra separada porque aquele seletor casa só com `.acl-gif-bubble`, e
   junto vem a escala fixa de 190x190, que não serve pro GIF renderizado
   pelo VideoBubble. Verde no enviado e branco no recebido, como nas demais
   bolhas. */
.message-bubble-container
  :is([data-bubble-name='gif'], [data-bubble-name='video']).acl-video-bubble {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* `[data-sender-tone]` entra no seletor só para ganhar da regra de tom
   automático (linha ~8930), que pinta o nome de BRANCO quando a amostra de
   pixel dá "escuro". Aqui o nome fica numa barra própria, fora da animação,
   então tom claro/escuro não se aplica: é preto sempre. */
.message-bubble-container
  :is([data-bubble-name='gif'], [data-bubble-name='video']).acl-video-bubble[data-sender-tone]
  > .acl-media-sender,
.message-bubble-container
  :is([data-bubble-name='gif'], [data-bubble-name='video']).acl-video-bubble
  > .acl-media-sender {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  order: -1 !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: left !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.message-bubble-container
  .right-bubble:is([data-bubble-name='gif'], [data-bubble-name='video']).acl-video-bubble
  > .acl-media-sender {
  background: #d9fdd3 !important;
}

/* Pedido 2026-08-11: só no GIF o nome do remetente vai a 16,2px (mesmo
   tamanho do senderNameClass de Base.vue, usado em qualquer outra bolha).
   Vídeo mantém os 14px de sempre. */
.message-bubble-container
  [data-bubble-name='gif'].acl-video-bubble[data-sender-tone]
  > .acl-media-sender,
.message-bubble-container
  [data-bubble-name='gif'].acl-video-bubble
  > .acl-media-sender {
  font-size: 16.2px !important;
}

/* Pedido 2026-08-11: nome do remetente do GIF volta ao padding padrão
   (10px 14px 10px, igual ao vídeo) — o respiro extra embaixo (25px) do
   pedido 2026-08-10 foi removido, então a regra que só existia pra
   sobrescrever isso no GIF saiu daqui (ficaria idêntica à regra genérica
   acima, herdada por padrão). */

/* A metadata do GIF fica por cima da animação, então precisa de contraste
   próprio. Definida aqui, e não por classe utilitária, porque `bg-black/55`
   e `bg-black/40` não existem nesta paleta do Tailwind (só há os tokens
   `n-*`) — o círculo saía sem fundo e a marca sem sombra, sumindo. */
.message-bubble-container [data-bubble-name='gif'] .acl-video-bubble__giphy {
  color: rgb(var(--slate-11)) !important;
  text-shadow: none !important;
}

/* Botao redondo escuro com "GIF", no centro da animacao, no fim das 3
   repeticoes. Voltou no pedido de 2026-08-12: as 3 voltas e o botao ficam na
   BOLHA; o loop infinito e da galeria, ao tocar. */
.message-bubble-container
  [data-bubble-name='gif']
  .acl-video-bubble__gif-replay
  > span {
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* WhatsApp-style document bubble: compact file header, metadata and action
   row inside the same colored bubble, without the generic white attachment
   card or the sender sentence. */
.message-bubble-container
  [data-bubble-name='attachment'].acl-file-bubble {
  width: min(420px, calc(100vw - 48px)) !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  border: 0 !important;
  box-shadow: none !important;
}

.message-bubble-container
  [data-bubble-name='attachment'].acl-file-bubble.left-bubble {
  background: #fff !important;
}

.message-bubble-container
  [data-bubble-name='attachment'].acl-file-bubble.right-bubble {
  background: #d9fdd3 !important;
}

.message-bubble-container .acl-file-bubble__body {
  min-width: 0 !important;
  padding: 8px !important;
}

.message-bubble-container .acl-file-bubble__file {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 7px !important;
}

.message-bubble-container .acl-file-bubble__icon {
  display: inline-flex !important;
  width: 30px !important;
  height: 34px !important;
  flex: 0 0 30px !important;
  align-items: center !important;
  justify-content: center !important;
}

.message-bubble-container .acl-file-bubble__icon > * {
  width: 27px !important;
  height: 31px !important;
}

.message-bubble-container .acl-file-bubble__details {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* O nome do arquivo é o título do documento — mesma categoria dos nomes
   acima de imagem/vídeo, por isso 16,2px. Fonte única: a segunda regra
   que reafirmava um tamanho próprio para o card com prévia de PDF foi
   removida, para não haver dois valores concorrentes. */
.message-bubble-container .acl-file-bubble__name {
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 16.2px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.message-bubble-container .acl-file-bubble__info {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 2px !important;
  color: #667781 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

.message-bubble-container .acl-file-bubble__separator {
  width: 3px !important;
  height: 3px !important;
  flex: 0 0 3px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

.message-bubble-container .acl-file-bubble__caption {
  margin-top: 8px !important;
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  white-space: pre-wrap !important;
}

.message-bubble-container
  [data-bubble-name='attachment'].acl-file-bubble
  > div[class*='text-xs'][class*='items-center'] {
  right: 8px !important;
  bottom: 6px !important;
  z-index: 4 !important;
  color: #667781 !important;
  font-size: 10px !important;
}

.message-bubble-container
  [data-bubble-name='attachment'].acl-file-bubble.right-bubble
  > div[class*='text-xs'][class*='items-center'] {
  color: #4f6f63 !important;
}

@media (max-width: 767px) {
  /* Pedido 2026-08-12: as regras de TAMANHO do GIF que viviam aqui saíram.
     Existe agora um bloco único (procure por "BLOCO ÚNICO DE TAMANHO DO
     GIF", no fim deste ficheiro) e o resto vem inline do componente. */

  .message-bubble-container
    [data-bubble-name='attachment'].acl-file-bubble {
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: min(420px, calc(100vw - 32px)) !important;
  }
}

/* ========================================================================
   WhatsApp media bubbles — imagem, ponta e legenda

   A bolha de mídia precisa ser uma única superfície: a imagem ocupa a área
   superior e a legenda fica imediatamente abaixo, sem um segundo card ou
   uma faixa separada. A ponta fica no canto superior, como no WhatsApp.
   ======================================================================== */
/* Medida nenhuma aqui: largura e teto da bolha da foto sao decididos no
   "BLOCO UNICO DE TAMANHO DA FOTO", no fim do arquivo. */
.message-bubble-container .acl-image-bubble {
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: #111827 !important;
}

.message-bubble-container .acl-image-bubble.left-bubble {
  background: #fff !important;
  border-top-left-radius: 0 !important;
  padding: 6px !important;
}

.message-bubble-container .acl-image-bubble.right-bubble {
  background: #d9fdd3 !important;
  color: #111827 !important;
  border-top-right-radius: 0 !important;
  padding: 6px !important;
}

/* Pedido 2026-08-12: sairam daqui quatro regras com seletor MORTO
   (`.acl-image-bubble > div.relative[ > img]`). O frame da midia esta dois
   niveis abaixo da bolha — dentro do wrapper `min-w-0 break-words` do
   Base.vue — entao o combinador de filho nunca casou com nada. Elas nao
   mudavam pixel nenhum e so faziam parecer que o tamanho da foto morava aqui.
   O tamanho esta no "BLOCO UNICO DE TAMANHO DA FOTO", no fim do arquivo. */

/* O frame recorta o que passar do seu tamanho — e so isso. O teto de altura
   da foto que estava aqui (344px) saiu para o bloco unico do fim do arquivo,
   onde o valor vem do componente; e por isso a distincao `:not(.acl-gif-media)`
   deixou de ser necessaria: nao ha mais medida de foto neste seletor, que e o
   mesmo elemento nas duas midias. */
.message-bubble-container .acl-image-bubble__asset-frame {
  overflow: hidden !important;
}

.message-bubble-container .acl-image-bubble.right-bubble
  .acl-image-bubble__asset-frame {
  box-sizing: border-box !important;
  border: 4px solid #d9fdd3 !important;
}

/* `width: 0` + `min-width: 100%`: com a bolha em fit-content, quem decide a
   largura passa a ser SO a mídia — o texto da legenda não entra na conta da
   largura intrínseca (por isso o zero) e depois preenche a largura já
   definida pela mídia (por isso o min-width). Sem isso, uma legenda longa
   esticava a bolha até 420px e sobrava fundo ao lado de uma foto/vídeo
   estreito, o mesmo vão que a mídia sem legenda tinha.
   Foto e vídeo dividem a regra porque o comportamento é idêntico.

   Pedido 2026-08-12: o GIF entrou aqui. O GIF que chega como .gif de verdade
   monta a bolha com `.acl-gif-bubble` (e não `.acl-image-bubble`), então não
   casava com nenhum dos dois seletores e era o único que ainda esticava: uma
   legenda longa levava a bolha aos 420px enquanto o GIF ficava nos 286px
   dele, com fundo sobrando ao lado. O MP4 tratado como GIF já vinha certo,
   porque a bolha dele é `.acl-video-bubble`. */
.message-bubble-container .acl-image-bubble
  > div.min-w-0.break-words
  > .acl-image-bubble__caption,
.message-bubble-container .acl-gif-bubble
  > div.min-w-0.break-words
  > .acl-image-bubble__caption,
.message-bubble-container .acl-video-bubble
  > div.min-w-0.break-words
  > .acl-video-bubble__caption {
  width: 0 !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

.message-bubble-container .acl-image-bubble
  > div.min-w-0.break-words
  > .acl-image-bubble__caption {
  margin: 0 !important;
  padding: 8px 8px 24px !important;
  color: inherit !important;
}

.message-bubble-container .acl-image-bubble
  > div.min-w-0.break-words
  > .acl-image-bubble__caption p:last-child {
  margin-bottom: 0 !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='image'].acl-image-bubble
  .acl-image-bubble__caption
  .acl-message-caption
  p {
  display: inline !important;
  margin: 0 !important;
}

/* A legenda de imagem/video nao tinha as classes "prose prose-bubble" que
   as mensagens de texto normais usam, entao herdava um tamanho proprio em
   vez do padrao da conversa. Alinha aqui, sem depender do componente Vue.
   2026-08-10: 12px -> 15,8px, o mesmo corpo de texto das mensagens
   (.prose-bubble p) — legenda e mensagem sao a mesma categoria de texto. */
.message-bubble-container .acl-image-bubble__caption .acl-message-caption,
.message-bubble-container .acl-video-bubble__caption .acl-message-caption {
  font-size: 15.8px !important;
  line-height: 1.5 !important;
  color: rgb(var(--slate-12)) !important;
}

/* O horário da imagem recebida com legenda fica abaixo do texto, em preto,
   em vez de sobreposto em branco (a regra antiga usava a classe Tailwind
   "bottom-2", que virou "bottom-2.5" e nunca mais casou com o elemento
   real). Envio (right-bubble) ja tem seu proprio ajuste no Base.vue. */
.message-bubble-container
  .left-bubble.acl-image-bubble:has(> div.min-w-0.break-words > .acl-image-bubble__caption)
  > div[class~='absolute'][class~='right-2'][class~='bottom-2.5'] {
  position: static !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 5px 4px !important;
  color: #667781 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Mensagem de texto com mídia: mantém imagem e texto no mesmo card e na
   ordem visual do WhatsApp (imagem acima, legenda abaixo). */
.message-bubble-container .acl-text-bubble--with-media {
  box-sizing: border-box !important;
  width: fit-content !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
  padding: 6px 6px 4px !important;
  overflow: visible !important;
}

.message-bubble-container .acl-text-bubble--with-media .acl-message-content {
  gap: 0 !important;
}

.message-bubble-container .acl-text-bubble--with-media
  .acl-media-attachments {
  order: -1 !important;
  width: 100% !important;
  margin: 0 0 2px !important;
}

/* Pedido 2026-08-12: o ajuste de mobile da imagem saiu daqui e passou a ser
   feito junto com o do vídeo e o do GIF, no bloco "mídia com moldura no
   mobile" no fim do arquivo — as três mídias dividem a mesma medida e ela não
   pode viver em dois lugares. */

/* Desktop attachment captions reuse the same emoji card as the conversation
   composer. The runtime wrapper keeps the shared picker rules as the single
   visual source of truth while leaving the mobile bottom sheet untouched. */
@media (min-width: 768px) {
  .aceleres-media-gallery .acl-attachment-emoji-picker {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 10px) !important;
    left: auto !important;
    z-index: 260 !important;
    display: flex !important;
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: 280px !important;
    max-height: min(280px, calc(100dvh - 96px)) !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 12px !important;
    background: #f7f8fa !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2),
      0 2px 4px rgba(15, 23, 42, 0.06) !important;
    transform-origin: right bottom !important;
  }

  .dark .aceleres-media-gallery .acl-attachment-emoji-picker {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: #1e293b !important;
  }
}

/* Conversation activity events: keep system text readable over the chat pattern. */
@media (min-width: 769px) {
  .aceleres-activity-event .acl-activity-detail {
    padding: 7px 11px !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .aceleres-activity-event .acl-activity-detail > div > span {
    color: #475569 !important;
    font-weight: 600 !important;
  }

  .aceleres-activity-card
    .acl-activity-detail
    > div
    > span:first-child,
  .aceleres-activity-event .acl-activity-detail b {
    color: #1f2937 !important;
    font-weight: 700 !important;
  }

  .aceleres-activity-event:not(.aceleres-activity-card)
    .acl-activity-detail
    > div
    > span:last-child {
    color: #64748b !important;
    font-weight: 600 !important;
  }

  .dark .aceleres-activity-event .acl-activity-detail {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(31, 41, 55, 0.88) !important;
  }

  .dark .aceleres-activity-event .acl-activity-detail > div > span,
  .dark
    .aceleres-activity-event:not(.aceleres-activity-card)
    .acl-activity-detail
    > div
    > span:last-child {
    color: #cbd5e1 !important;
  }

  .dark
    .aceleres-activity-card
    .acl-activity-detail
    > div
    > span:first-child,
  .dark .aceleres-activity-event .acl-activity-detail b {
    color: #f8fafc !important;
  }
}

/* Profile search: live feedback and immediate results above the avatar area. */
.acl-profile-search-clear-direct {
  display: inline-flex !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 21px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.acl-profile-search-clear-direct:hover {
  background: rgba(15, 23, 42, 0.07) !important;
  color: #1f2937 !important;
}

.acl-profile-search-status {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 4px 12px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(27, 135, 85, 0.08);
  color: #166534;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.acl-profile-search-status--empty {
  min-height: 86px;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
}

.acl-profile-search-status__clear {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: #1b8755;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.profile-settings-avatar[hidden],
.profile-settings-nav__item[hidden],
.acl-profile-search-status[hidden],
.acl-profile-search-clear-direct[hidden],
.acl-profile-search-status__clear[hidden] {
  display: none !important;
}

.dark .painel-atendimento .conversation-details-wrap.chat-whats .acl-messages-view {
  background-color: #111b21 !important;
  background-image:
    linear-gradient(rgba(17, 27, 33, 0.78), rgba(17, 27, 33, 0.78)),
    url('/assets/images/aceleres-chat-pattern.svg') !important;
}

/* Aceleres 2026-07-15: mobile conversation surface. Keep the chat wallpaper
   surface isolated from the Atendimento panel floating-button overrides. */
@media (max-width: 767px) {
  .painel-atendimento .conversation-details-wrap.chat-whats,
  .painel-atendimento .conversation-details-wrap.chat-whats.bg-n-surface-1,
  .painel-atendimento .conversation-details-wrap.chat-whats .acl-whatsapp-mobile-scope,
  .painel-atendimento .conversation-details-wrap.chat-whats .acl-messages-view {
    background-color: #efeae2 !important;
  }

  .painel-atendimento .conversation-details-wrap.chat-whats .acl-messages-view {
    background-image: url('/assets/images/aceleres-chat-pattern.svg') !important;
    background-position: center top !important;
    background-repeat: repeat !important;
    background-size: 160px 160px !important;
  }

  html:not(.acl-mobile-chatlist-panel) .acl-mobile-floating-action,
  html:not(.acl-mobile-chatlist-panel) #acl-mobile-floating-menu-btn,
  html:not(.acl-mobile-chatlist-panel) #acl-mobile-floating-new-contact-btn,
  html:not(.acl-mobile-chatlist-panel) #acl-mobile-floating-copilot-btn {
    display: none !important;
  }

  body:has(.painel-atendimento.acl-mobile-conversation-active) .acl-copilot-launcher,
  body:has(.conversation-details-wrap.chat-whats.acl-whatsapp-mobile-scope) .acl-copilot-launcher,
  body:has(.acl-conversation-mobile-page) .acl-copilot-launcher,
  body:has(.painel-atendimento.acl-mobile-conversation-active) #acl-mobile-floating-copilot-btn,
  body:has(.conversation-details-wrap.chat-whats.acl-whatsapp-mobile-scope) #acl-mobile-floating-copilot-btn,
  body:has(.acl-conversation-mobile-page) #acl-mobile-floating-copilot-btn {
    display: none !important;
  }
}

/* El compositor usa un z-index intencionalmente muy alto. El selector de canal
   debe quedar por encima y, para bundles antiguos, recibe una cubierta propia. */
.acl-quick-start-overlay {
  z-index: 2147483500 !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

body:not(:has(> .acl-quick-start-overlay)):has(.acl-quick-start-overlay)
  .acl-conversation-composer-shell,
body:not(:has(> .acl-quick-start-overlay)):has(.acl-quick-start-overlay)
  .acl-conversation-mobile-composer {
  position: relative !important;
}

body:not(:has(> .acl-quick-start-overlay)):has(.acl-quick-start-overlay)
  .acl-conversation-composer-shell::after,
body:not(:has(> .acl-quick-start-overlay)):has(.acl-quick-start-overlay)
  .acl-conversation-mobile-composer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2147483000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
}

/* Nuevo contacto: selector visible de país/DDI junto al número. */
.acl-new-contact-panel__phone-row {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.acl-new-contact-panel__select {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  appearance: auto !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 10px !important;
  background: #f7f7f8 !important;
  padding: 0 10px !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-size: 14px !important;
  line-height: normal !important;
  font-weight: 600 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Noto Color Emoji" !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-align: left !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

[data-acl-floating-copilot-hidden='1'],
body > .fixed:has(.i-woot-captain),
body > [class~='fixed']:has(.i-woot-captain),
.acl-mobile-floating-action:has(.i-woot-captain),
.conversation-details-wrap .absolute:has(.i-woot-captain),
.conversation-details-wrap [class~='absolute']:has(.i-woot-captain),
html.acl-mobile-chatlist-panel body #acl-mobile-floating-copilot-btn {
  display: none !important;
  pointer-events: none !important;
}

[data-sidebar-collapsed-popover][data-acl-sidebar-popover-closing='1'] {
  display: none !important;
  pointer-events: none !important;
}

/* Editar contato: o modal lateral deve cobrir também el compositor. Algunos
   bundles lo montan dentro del sidebar y crean un contexto de capas inferior. */
.modal-mask.right-aligned,
.modal-mask.right-aligned[data-acl-right-modal-layer-fixed='1'] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483550 !important;
}

body:has(.modal-mask.right-aligned) .acl-conversation-composer-shell,
body:has(.modal-mask.right-aligned) .acl-conversation-mobile-composer,
body:has(.modal-mask.right-aligned) .resizable-editor-wrapper,
body:has(.modal-mask.right-aligned) div.reply-box {
  z-index: 0 !important;
  pointer-events: none !important;
}

.acl-new-contact-panel__select option {
  color: #111827 !important;
  background: #ffffff !important;
}

.acl-new-contact-panel__input--phone {
  width: 100% !important;
  min-width: 0 !important;
}

/* Perfil > Interface: evita que la preferencia de precarga se superponga. */
.profile-settings-detail__body .conversation-prefetch-setting,
.profile-settings-detail__body
  .flex.flex-col.gap-6.items-start
  > .flex.w-full.items-start.justify-between.gap-2:last-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
  align-items: start !important;
  gap: 32px !important;
  width: 100% !important;
}

.profile-settings-detail__body .conversation-prefetch-setting__copy,
.profile-settings-detail__body .conversation-prefetch-setting__controls,
.profile-settings-detail__body
  .flex.flex-col.gap-6.items-start
  > .flex.w-full.items-start.justify-between.gap-2:last-child
  > div {
  min-width: 0 !important;
  max-width: none !important;
}

.profile-settings-detail__body .conversation-prefetch-setting__copy p,
.profile-settings-detail__body
  .flex.flex-col.gap-6.items-start
  > .flex.w-full.items-start.justify-between.gap-2:last-child
  > div:first-child
  p {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.profile-settings-detail__body .conversation-prefetch-setting__controls,
.profile-settings-detail__body .conversation-prefetch-setting__input,
.profile-settings-detail__body
  .flex.flex-col.gap-6.items-start
  > .flex.w-full.items-start.justify-between.gap-2:last-child
  > div:last-child {
  width: 100% !important;
}

.profile-settings-detail__body .conversation-prefetch-setting__save {
  align-self: flex-end !important;
}

@media (max-width: 720px) {
  .profile-settings-detail__body .conversation-prefetch-setting,
  .profile-settings-detail__body
    .flex.flex-col.gap-6.items-start
    > .flex.w-full.items-start.justify-between.gap-2:last-child {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .profile-settings-detail__body .conversation-prefetch-setting__controls {
    align-items: stretch !important;
  }

  .profile-settings-detail__body .conversation-prefetch-setting__save {
    align-self: stretch !important;
  }
}

/* Perfil: el encabezado del panel ya contiene el nombre de la sección.
   Conservamos las descripciones internas, pero no repetimos el título. */
.profile-settings-detail__body > section > header h4,
.profile-settings-detail__body
  > div:not(.profile-settings-stack)
  > section
  > header
  h4,
.profile-settings-detail__body
  > .profile-settings-stack
  > section:first-child
  > header
  h4 {
  display: none !important;
}

.profile-settings-detail__body > section > header:not(:has(p)),
.profile-settings-detail__body
  > div:not(.profile-settings-stack)
  > section
  > header:not(:has(p)),
.profile-settings-detail__body
  > .profile-settings-stack
  > section:first-child
  > header:not(:has(p)) {
  display: none !important;
}

.profile-settings-detail__body > section > header p,
.profile-settings-detail__body
  > div:not(.profile-settings-stack)
  > section
  > header
  p,
.profile-settings-detail__body
  > .profile-settings-stack
  > section:first-child
  > header
  p {
  margin-top: 0 !important;
}

/* Perfil: respiración entre la línea del encabezado y el contenido principal. */
.profile-settings-primary-section--password,
.profile-settings-primary-section--audio,
.profile-settings-detail__body
  > .profile-settings-stack
  > section:first-child:has(form),
.profile-settings-detail__body
  > div:not(.profile-settings-stack)
  > section:has(#profile-settings-notifications) {
  padding-top: 24px !important;
}

/* Perfil: botón de cierre cómodo y claramente clicable. */
.profile-settings-detail__close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
  font-size: 20px !important;
}

.profile-settings-detail__close i {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
}

/* Perfil > Token: sustitución directa para bundles que reutilizan Notificaciones. */
.profile-settings-detail__body[data-acl-profile-token-active='1']
  > :not(#acl-profile-token-panel) {
  display: none !important;
}

.acl-profile-token-panel {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  color: #111827;
}

.acl-profile-token-panel__description,
.acl-profile-token-panel__status {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

.acl-profile-token-panel__label {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.acl-profile-token-panel__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.acl-profile-token-panel__field {
  position: relative;
  min-width: 0;
}

.acl-profile-token-panel__input {
  width: 100% !important;
  height: 44px !important;
  box-sizing: border-box !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  padding: 0 44px 0 12px !important;
  color: #111827 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px !important;
  outline: none !important;
}

.acl-profile-token-panel__reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  transform: translateY(-50%);
}

.acl-profile-token-panel__button {
  min-height: 44px;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #ffffff;
  padding: 0 16px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.acl-profile-token-panel__button:hover:not(:disabled),
.acl-profile-token-panel__reveal:hover {
  background: #f1f5f9;
}

.acl-profile-token-panel__button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.acl-profile-token-panel__status[data-type='success'] {
  color: #15803d;
}

.acl-profile-token-panel__status[data-type='error'] {
  color: #b91c1c;
}

@media (max-width: 720px) {
  .acl-profile-token-panel__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* #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%;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* O tour customizado estava cobrindo a tela de perfil e impedindo o acesso
   ao controle "Pré-carregar conversas". Mantemos desativado em homolog. */
#aceleres-tour {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 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; }

/* Ocultar atalho redundante de perfil no topbar lateral. O avatar já abre o perfil. */
#aceleres-topbar .acl-tb-btn[data-act="profile"],
#aceleres-topbar .acl-tb-btn[data-act="perfil"] {
  display: none !important;
}

/* Ocultar o atalho de ajuda no topbar lateral. */
#aceleres-topbar [data-act="help"] {
  display: none !important;
}

/* Usar a mesma cor dos ícones da topbar no menu de configurações. */
.profile-settings-nav__scroll .profile-settings-nav__item-icon {
  color: rgb(var(--slate-11)) !important;
}

/* Avatar de perfil alinhado no final do topbar lateral. */
#aceleres-topbar #acl-profile-topbar-link {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;
}

#aceleres-topbar #acl-profile-topbar-link::after {
  inset: -4px !important;
  background: rgba(100, 116, 139, 0.14) !important;
  transform: none !important;
}

#aceleres-topbar #acl-profile-topbar-link .acl-profile-topbar-link__avatar {
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#aceleres-topbar #acl-profile-topbar-link .acl-profile-topbar-link__avatar::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -22px !important;
  width: 44px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: #cbd5e1 !important;
  transform: translateX(-50%) !important;
}

#aceleres-topbar #acl-profile-topbar-link .acl-profile-topbar-link__avatar[data-avatar-mode="fallback"] {
  background: var(--acl-avatar-bg, #e8e8e8) !important;
  border-color: rgba(0, 0, 0, 0.03) !important;
  color: var(--acl-avatar-text, #60646c) !important;
}

#aceleres-topbar #acl-profile-topbar-link .acl-profile-topbar-link__avatar[data-avatar-mode="fallback"] .acl-profile-topbar-link__initials {
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
}

.dark #aceleres-topbar #acl-profile-topbar-link .acl-profile-topbar-link__avatar[data-avatar-mode="fallback"] {
  background: var(--acl-avatar-dark-bg, #2a2a2a) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--acl-avatar-dark-text, #adb1b8) !important;
}

.dark #aceleres-topbar #acl-profile-topbar-link::after {
  background: rgba(148, 163, 184, 0.16) !important;
}

.dark #aceleres-topbar #acl-profile-topbar-link .acl-profile-topbar-link__avatar::before {
  background: #475569 !important;
}

/* Ocultar Carteirização somente no topbar lateral. A rota e o elemento
   continuam disponíveis no código para acesso direto ou reativação futura. */
#aceleres-topbar [data-acl-carteirizacao="1"],
#aceleres-topbar a[href*="/carteirizacao"],
#aceleres-topbar a[href*="/carterizacao"] { 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;
}

/* A galeria de mídia precisa ficar acima do cabeçalho da conversa. O
   componente é teletransportado para .conversation-details-wrap, enquanto
   o header usa z-index 100; este override também cobre builds antigos até a
   próxima recompilação do bundle. */
.aceleres-media-gallery {
  z-index: 200 !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; }

.team-summary-modal.aceleres-team-summary-panel {
  overflow: hidden !important;
}

.team-summary-modal__content {
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #c7cdd4 transparent !important;
}

.team-summary-modal__content::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.team-summary-modal__content::-webkit-scrollbar-thumb {
  background-color: #c7cdd4 !important;
  border-radius: 3px !important;
}

.team-summary-modal__content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8 !important;
}

.team-summary-modal__content::-webkit-scrollbar-track {
  background: transparent !important;
}

.team-summary-modal__footer {
  position: relative !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  background: #eef1f4 !important;
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.04) !important;
}

.profile-settings-action__icon {
  width: 25px !important;
  height: 25px !important;
}

/* 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 {
  position: relative;
  overflow: hidden;
  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;
}

/* Estado vazio de conversas: orientacao clara e atalhos de acao. */
.acl-empty-conversation-state__source
  > :not(.acl-empty-conversation-state) {
  display: none !important;
}

.acl-empty-conversation-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 680px);
  min-height: 100%;
  padding: 32px 36px;
  text-align: center;
}

.acl-empty-conversation-state__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  min-height: 184px;
  margin-bottom: 8px;
}

.acl-empty-conversation-state__illustration img {
  display: block !important;
  width: 240px;
  height: auto;
  margin: 0;
  opacity: 0.78;
  filter: hue-rotate(295deg) saturate(0.78);
}

.acl-empty-conversation-state__title {
  margin: 0;
  color: #111827;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0;
}

.acl-empty-conversation-state__description {
  max-width: 460px;
  margin: 8px 0 0;
  color: #687078;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.acl-empty-conversation-state__actions {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

/* Dashboard vazio: mantém apenas a orientação textual. */
.acl-empty-conversation-state__actions {
  display: none !important;
}

.acl-empty-conversation-state__description {
  font-size: 15px !important;
}

.acl-empty-conversation-state__action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 92px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #111827;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: color 0.16s ease;
}

.acl-empty-conversation-state__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 52px;
  border-radius: 50px;
  background: rgba(194, 189, 184, 0.15);
  color: #000000;
  transition: background 0.16s ease;
}

.acl-empty-conversation-state__action-icon > span {
  width: 25px;
  height: 25px;
  background-color: currentColor;
}

.acl-empty-conversation-state__action-label {
  margin-top: 10px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
}

.acl-empty-conversation-state__action:hover
  .acl-empty-conversation-state__action-icon {
  background: rgba(194, 189, 184, 0.28);
}

.acl-empty-conversation-state__action:active
  .acl-empty-conversation-state__action-icon {
  transform: scale(0.96);
}

.acl-empty-conversation-state__action:focus-visible {
  outline: 2px solid #15603e;
  outline-offset: 5px;
}

.dark .acl-empty-conversation-state__title {
  color: #f3f4f6;
}

.dark .acl-empty-conversation-state__description {
  color: #aeb6bf;
}

.dark .acl-empty-conversation-state__action-icon {
  background: #29352f;
  color: #e5ebe7;
}

.dark .acl-empty-conversation-state__action-label {
  color: #e5ebe7;
}

@media (max-width: 767px) {
  .acl-empty-conversation-state {
    width: min(100%, 520px);
    min-height: 100%;
    padding: 28px 20px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .acl-empty-conversation-state__illustration,
  .acl-empty-conversation-state__illustration img {
    width: 148px;
  }

  .acl-empty-conversation-state__illustration {
    min-height: 112px;
  }

  .acl-empty-conversation-state__title {
    font-size: 18px;
  }

  .acl-empty-conversation-state__description {
    max-width: 310px;
    margin-top: 8px;
    font-size: 12.5px;
  }

  .acl-empty-conversation-state__actions {
    gap: 10px;
    margin-top: 22px;
  }

  .acl-empty-conversation-state__action {
    min-width: 104px;
    min-height: 82px;
    padding: 0 10px;
    font-size: 12px;
  }

  .acl-empty-conversation-state__action-icon {
    width: 58px;
    height: 44px;
  }

  .acl-empty-conversation-state__action-icon > span {
    width: 19px;
    height: 19px;
  }

  .acl-empty-conversation-state__action-label {
    margin-top: 8px;
    font-size: 11px;
  }
}

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

/* A linha abaixo dos subfiltros não faz parte da hierarquia visual da lista. */
.conversations-list-wrap .acl-filters-bar,
.conversations-list-wrap .acl-unread-subfilters {
  border: 0 !important;
  border-block-end: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.conversations-list-wrap.conversas.acl-conv-list-resizable .acl-filters-bar {
  border-bottom: none !important;
}
.conversations-list-wrap .acl-filters-bar::before,
.conversations-list-wrap .acl-filters-bar::after,
.conversations-list-wrap .acl-unread-subfilters::before,
.conversations-list-wrap .acl-unread-subfilters::after {
  display: none !important;
  content: none !important;
}

/* 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: 18px !important;
  height: 10px !important;
  left: -9px !important;
  top: 0 !important;
  clip-path: polygon(100% 0, 50% 100%, 0 12%, 0 0) !important;
}

/* Aceleres: fallback explicito para a ponta dos bubbles recebidos. O estilo
   do componente tambem define o pseudo-elemento, mas este override fica por
   ultimo na cascata e garante que a ponta exista, seja visivel e mantenha o
   mesmo branco da bolha quando o bundle antigo ainda estiver em cache. */
.message-bubble-container .left-bubble {
  position: relative !important;
  overflow: visible !important;
  border-top-left-radius: 0 !important;
}
.message-bubble-container .aceleres-bubble-surface {
  overflow: visible !important;
}
.message-bubble-container
  .aceleres-bubble-surface
  > .left-bubble::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  z-index: 3 !important;
  width: 18px !important;
  height: 10px !important;
  left: -9px !important;
  top: 0 !important;
  background-color: #fff !important;
  pointer-events: none !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é 100% 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.
     1) `.grid` filho de message-bubble-container: width 100%
     2) `.aceleres-bubble-with-actions`: max-width 100% (sem cap adicional;
        tipos com limite próprio — texto, imagem, mobile — seguem as regras
        mais específicas abaixo)
     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: 100% !important;
}
/* Imagens e álbuns de imagem tem 420px como TETO, nao como largura fixa: a
   bolha encolhe junto com a foto. Uma foto vertical bate no teto de altura
   (344px) e fica mais estreita que 420px — com largura fixa sobrava um vao
   de fundo a direita da imagem, com o horario solto no meio dele. */
.message-bubble-container[data-attachment-type='image']
  div.\[grid-area\:bubble\]
  > .aceleres-bubble-with-actions:has(
    [data-bubble-name='image'],
    [data-bubble-name='image-album']
  ) {
  width: fit-content !important;
  /* Pedido 2026-08-12: 420 -> 432px. Este envelope e o de fora da bolha; com
     420px aqui, a foto panoramica nunca chegava aos 420px dela — perdia os
     8px da moldura do frame e parava em 400px, medido no harness. 432 = 420
     da foto + 6px de moldura de cada lado, o mesmo numero do teto da bolha. */
  max-width: min(432px, calc(100vw - 48px)) !important;
  flex: 0 1 auto !important;
}
div.\[grid-area\:bubble\] .left-bubble,
div.\[grid-area\:bubble\] .right-bubble {
  max-width: 100% !important;
}

/* Mensagens de texto seguem a largura útil da conversa: crescem até o limite
   visual do WhatsApp, mas mantêm a largura do conteúdo quando são curtas. */
.message-bubble-container
  div.\[grid-area\:bubble\]
  > .aceleres-bubble-with-actions:has([data-bubble-name='text']) {
  max-width: min(65%, 42rem) !important;
}

.message-bubble-container [data-bubble-name='text'].acl-text-bubble {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 6px 8px 18px !important;
  font-size: 14px !important;
  line-height: 19px !important;
}

.message-bubble-container [data-bubble-name='text'] .acl-message-content {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 767px) {
  .message-bubble-container
    div.\[grid-area\:bubble\]
    > .aceleres-bubble-with-actions:has([data-bubble-name='text']) {
    max-width: calc(100vw - 48px) !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;
}

/* Pedido 2026-08-12: o teto de 400px que estava aqui (de 2026-07-01) tambem
   usava o seletor morto `> div.relative > img` e foi removido junto com os
   outros. Teto de largura da foto: bloco unico no fim do arquivo. */

/* Image + caption messages use one WhatsApp-style bubble. TextBubble renders
   media as attachment chips, so promote image chips from thumbnail to preview
   size and keep the caption below the media on desktop and mobile. */
.message-bubble-container .acl-text-bubble--with-media {
  padding: 3px 3px 22px !important;
  overflow: hidden !important;
}

.message-bubble-container .acl-text-bubble--with-media > div.pr-12 {
  margin-bottom: 0 !important;
  padding-right: 0 !important;
}

.message-bubble-container
  .acl-text-bubble--with-media
  .acl-message-content {
  gap: 6px !important;
}

.message-bubble-container
  .acl-text-bubble--with-media
  .acl-media-attachments {
  order: -1 !important;
  width: 100% !important;
  margin: 0 0 2px !important;
  justify-content: stretch !important;
}

.message-bubble-container
  .acl-text-bubble--with-media
  .acl-media-chip--image {
  display: flex !important;
  width: min(420px, 34vw) !important;
  height: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.message-bubble-container
  .acl-text-bubble--with-media
  .acl-media-chip--image
  .acl-media-chip__asset {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.message-bubble-container
  .acl-text-bubble--with-media
  .acl-message-content
  > .acl-message-caption {
  margin-right: 8px !important;
  margin-left: 8px !important;
}

.message-bubble-container [data-bubble-name='video'] video {
  width: auto !important;
  height: auto !important;
  max-width: 360px !important;
  max-height: 480px !important;
  cursor: pointer;
  display: block;
}

/* WhatsApp-style image bubble: the media uses the bubble surface and the
   message metadata sits over the image instead of creating a footer strip. */
.message-bubble-container .acl-image-bubble.right-bubble {
  overflow: visible !important;
}

.message-bubble-container[data-attachment-type='image']
  [data-bubble-name='image']:has(img) {
  min-width: 0 !important;
  flex: 0 0 auto !important;
  padding: 6px !important;
  padding-bottom: 6px !important;
}

.message-bubble-container[data-attachment-type='image']
  [data-bubble-name='image']:has(img)
  > div[class~='pr-12'] {
  width: fit-content !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  padding-right: 0 !important;
}

.message-bubble-container[data-attachment-type='image']
  [data-bubble-name='image']:has(img)
  > div[class~='pr-12']
  > .relative {
  width: fit-content !important;
  max-width: 100% !important;
}

.message-bubble-container[data-attachment-type='image']
  [data-bubble-name='image']:has(img)
  > .text-\[13px\].font-bold {
  margin: 4px 6px 6px !important;
}

.message-bubble-container[data-attachment-type='image']
  [data-bubble-name='image']:has(img)
  > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
  right: 11px !important;
  bottom: 11px !important;
  z-index: 12 !important;
  gap: 3px !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.28) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

.message-bubble-container[data-attachment-type='image']
  [data-bubble-name='image']:has(img)
  > div[class~='pr-12']
  > .relative
  > div[class~='absolute'][class~='right-2'][class~='bottom-2'] {
  right: auto !important;
  left: 8px !important;
  bottom: 8px !important;
}
/* 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;
}

/* Desktop outgoing images stay in the same right-aligned column as text.
   The message grid keeps the regular text layout (including its right-side
   avatar track); only the media wrapper shrinks to the real bubble size so
   the hover actions stay anchored beside the image. */
@media (min-width: 768px) {
  .message-bubble-container[data-outgoing-image='true'] {
    justify-content: flex-end !important;
  }

  .message-bubble-container[data-outgoing-image='true']
    .acl-message-bubble-row
    > .aceleres-bubble-with-actions,
  .acl-outgoing-image-wrapper {
    display: inline-flex !important;
    width: fit-content !important;
    /* Pedido 2026-08-11: 408 -> 420, pra bater com o teto do GIF/vídeo
       (420x344) — com 408 o GIF enviado nunca alcançava a largura cheia que
       o recebido já tinha, porque este wrapper prendia antes da bolha. Sem
       efeito em imagem/documento: o teto interno deles já é 408 mesmo. */
    max-width: min(50%, 420px) !important;
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  .acl-outgoing-image-wrapper > .aceleres-bubble-surface {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  .message-bubble-container[data-outgoing-image='true']
    .aceleres-bubble-smile.is-right-bubble {
    margin-right: 40px !important;
  }

  .message-bubble-container[data-outgoing-image='true']
    .aceleres-bubble-forward {
    margin-right: 8px !important;
  }
}

/* Álbuns usam a mesma escala das mídias avulsas e ocupam uma área estável,
   evitando um mosaico menor que a própria foto. */
.message-bubble-container [data-bubble-name='image-album'] {
  width: min(360px, 32vw) !important;
  max-width: 360px !important;
}

.message-bubble-container [data-bubble-name='image-album'] > div {
  width: 100% !important;
}

/* Aceleres: imagem indisponível usa um card estável e intencional. O estado
   anterior encolhia até o conteúdo e espremia a legenda contra o horário. */
.message-bubble-container
  [data-bubble-name='image'][data-media-state='unavailable'] {
  box-sizing: border-box !important;
  width: min(280px, calc(100vw - 48px)) !important;
  min-width: min(280px, calc(100vw - 48px)) !important;
  max-width: min(280px, calc(100vw - 48px)) !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  margin-inline-start: 0 !important;
}

.message-bubble-container
  [data-bubble-name='image'][data-media-state='unavailable']
  .acl-image-unavailable {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 88px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  padding: 14px 18px !important;
  border: 1px solid #e2e6ea !important;
  border-radius: 9px !important;
  background: #f3f4f6 !important;
  text-align: center !important;
}

.message-bubble-container
  [data-bubble-name='image'][data-media-state='unavailable']
  .acl-image-unavailable
  p {
  max-width: 220px !important;
  margin: 0 !important;
  color: #66717d !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* ===================================================================
   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. */
@media (min-width: 768px) {
  .conversation-details-wrap.chat-whats .acl-conversation-composer-shell,
  .conversation-details-wrap.chat-whats
    .acl-conversation-composer-shell.bg-n-surface-1,
  .conversation-details-wrap.chat-whats .acl-conversation-mobile-composer,
  .conversation-details-wrap.chat-whats .resizable-editor-wrapper {
    background: transparent !important;
    background-color: transparent !important;
  }
}

div.reply-box {
  margin: 0 0.5rem 0.5rem !important; /* mantém mx-2 mb-2 original */
  padding: 6px 10px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !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: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  transition: none !important;
}
.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 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  align-self: stretch !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ReplyBottomPanel só fornece os clusters laterais; o editor ocupa a
   coluna do meio do mesmo grid. */
div.reply-box > div.flex.justify-between {
  display: contents !important;
}

/* Left-wrap / right-wrap vivem na mesma linha do editor. */
div.reply-box .left-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !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;
  align-self: center !important;
  margin-bottom: 0 !important;
  z-index: 2 !important;
}

div.reply-box .right-wrap {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: transparent !important;
  background-color: transparent !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  margin-bottom: 0 !important;
  z-index: 2 !important;
}

/* Mantém os clusters laterais estáveis independentemente do estado
   multiline para evitar "tremor" enquanto o editor recalcula altura. */
div.reply-box:not(.reply-box--multi-line) .reply-box__top,
div.reply-box:not(.reply-box--multi-line) .left-wrap,
div.reply-box:not(.reply-box--multi-line) .right-wrap {
  align-self: center !important;
}

div.reply-box:not(.reply-box--multi-line) .reply-box__top {
  justify-content: center !important;
}

div.reply-box:not(.reply-box--multi-line) .left-wrap,
div.reply-box:not(.reply-box--multi-line) .right-wrap {
  margin-bottom: 0 !important;
}

/* Mesmo com várias linhas, os controles ficam centralizados em relação ao
   campo de digitação, tal como na barra de uma linha. */
div.reply-box.reply-box--multi-line {
  align-items: center !important;
}

div.reply-box.reply-box--multi-line .reply-box__top {
  align-self: center !important;
}

div.reply-box.reply-box--multi-line .left-wrap,
div.reply-box.reply-box--multi-line .right-wrap {
  align-self: center !important;
  margin-bottom: 0 !important;
}

div.reply-box.reply-box--multi-line .reply-box__top {
  justify-content: center !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: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  flex: 0 0 auto !important;
  position: relative !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;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
div.reply-box .right-wrap .wa-action-btn--mic:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.08) !important;
  background-color: rgba(15, 23, 42, 0.08) !important;
  filter: none !important;
}
div.reply-box .right-wrap .wa-action-btn--mic i {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  color: #000000 !important;
  flex-shrink: 0 !important;
  line-height: 1 !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: 18px !important;
  max-height: calc(8 * 1.35em + 12px) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  background: transparent !important;
  color: #111827 !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  resize: none !important;
}
div.reply-box.reply-box--multi-line .reply-box__top .ProseMirror {
  min-height: calc(2 * 1.35em + 12px) !important;
}
div.reply-box .reply-box__top .ProseMirror p {
  font-size: 1rem !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: 52px !important;
  min-height: 52px !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: 15px !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 .reply-box__top .ProseMirror p.empty-node:first-child::before {
    font-size: 11px !important;
    line-height: 1.2 !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 {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  min-width: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

div.reply-box .right-wrap .wa-action-btn--mic i {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

/* Reafirma visibilidade/geométria para o botão com tooltip real (classe
   v-popper--has-tooltip), que às vezes cai para escala/min-size
   incorreta em zooms baixos no Chrome. */
div.reply-box .right-wrap > button.wa-action-btn--mic.v-popper--has-tooltip,
div.reply-box .right-wrap > button.wa-action-btn--mic[aria-label="Gravar áudio"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
}

@media (min-width: 769px) {
  div.reply-box .right-wrap > button.wa-action-btn--mic.v-popper--has-tooltip,
  div.reply-box .right-wrap > button.wa-action-btn--mic[aria-label="Gravar áudio"] {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  div.reply-box .right-wrap > button.wa-action-btn--mic.v-popper--has-tooltip i,
  div.reply-box .right-wrap > button.wa-action-btn--mic[aria-label="Gravar áudio"] i {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !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;
}

/* Biblioteca de GIFs: área maior, porém compacta, para enxergar os previews
   sem duplicar controles ou encobrir o compositor. */
@media (min-width: 768px) {
  div.reply-box .aceleres-emoji-picker-card.acl-inline-picker {
    width: min(440px, calc(100vw - 32px)) !important;
    height: min(420px, calc(100vh - 120px)) !important;
    max-height: min(420px, calc(100vh - 120px)) !important;
  }
}

@media (max-width: 767px) {
  div.reply-box .aceleres-emoji-picker-card.acl-inline-picker {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(68dvh, 520px) !important;
    max-height: min(68dvh, 520px) !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

/* Twemoji da legenda nunca deve herdar as dimensões das imagens de mídia. */
.message-bubble-container .cw-emoji {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  vertical-align: -0.125em !important;
}

.message-bubble-container .cw-emoji--single-message {
  width: 60px !important;
  height: 60px !important;
}

/* Mobile Copilot suggestion: this state replaces the compact five-column
   composer with a full-width card. Without the reset, the suggestion is
   constrained to the text column and its actions end up below the viewport. */
@media (max-width: 767px) {
  .acl-whatsapp-mobile-scope div.reply-box:has(.copilot-suggestion) {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    flex-direction: column !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .reply-box__top {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    :is(.copilot-editor, .copilot-suggestion) {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .copilot-suggestion {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .copilot-suggestion__scroll {
    max-height: min(28dvh, 170px) !important;
    margin-bottom: 12px !important;
    padding-right: 40px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .editor--copilot
    :is(.ProseMirror, .ProseMirror-woot-style) {
    min-height: 72px !important;
    max-height: 120px !important;
    padding: 12px 48px 12px 14px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .copilot-reply-actions {
    display: flex !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 8px 12px 12px !important;
    box-sizing: border-box !important;
    border-radius: 0 0 16px 16px !important;
    background: #ffffff !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .copilot-reply-actions__buttons {
    width: 100% !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .copilot-reply-actions__discard,
  .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .copilot-reply-actions__accept {
    min-height: 40px !important;
    padding-inline: 14px !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box:has(.copilot-suggestion)
    .copilot-reply-actions {
    background: #1f2937 !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 → 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: 12px !important;
  padding-right: 12px !important;
  /* Aceleres: h-8 (2rem/32px) ficou apertado — subir pra 38px. */
  height: 38px !important;
  min-height: 38px !important;
}
/* 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) */
.painel-atendimento .acl-conversation-header {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
.painel-atendimento .acl-conversation-header > div:first-child {
  width: auto !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.painel-atendimento .acl-conversation-header > .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: reações da pill aberta acima da mensagem. */
.aceleres-quick-react-pill.is-up .aceleres-emoji-btn {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
.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: #f7f5f300 !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:not(.acl-conversation-more-actions-menu) 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:not(.acl-conversation-more-actions-menu) 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:not(.acl-conversation-more-actions-menu) button [class*='i-lucide-'],
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col:not(.acl-conversation-more-actions-menu) button [class*='i-ph-'],
.bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col:not(.acl-conversation-more-actions-menu) 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:not(.acl-conversation-more-actions-menu) 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:not(.acl-conversation-more-actions-menu) 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:not(.acl-conversation-more-actions-menu) button {
  color: #e5e5e5 !important;
}

/* ===================================================================
   Aceleres 2026-07-10: ocultar a scrollbar do menu de opcoes
   `#acl-settings-dropdown` em qualquer engine, mantendo o scroll
   funcional dentro do menu e dos containers internos.
   =================================================================== */
#acl-settings-dropdown,
#acl-settings-dropdown * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#acl-settings-dropdown::-webkit-scrollbar,
#acl-settings-dropdown *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.dark .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col:not(.acl-conversation-more-actions-menu) 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:not(.acl-conversation-more-actions-menu) button.bg-n-alpha-1 {
  background-color: #3a3d40 !important;
  color: #f3f4f6 !important;
}

/* Menu dos três pontos da conversa: mantém o dropdown original do Chatwoot.
   O escopo impede que a personalização geral acima afete este menu. */
.acl-conversation-header__menu.actions--container > div > .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button {
  width: 100% !important;
  min-width: 100% !important;
  height: 2rem !important;
  min-height: 2rem !important;
  padding: 0.375rem 0.25rem !important;
  gap: 0.5rem !important;
  border-radius: 0.5rem !important;
  color: rgb(var(--slate-12)) !important;
  font-size: 0.875rem !important;
  font-weight: inherit !important;
  white-space: nowrap !important;
}

.acl-conversation-header__menu.actions--container > div > .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col {
  min-width: 13rem !important;
}

.acl-conversation-header__menu.actions--container > div > .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button > span {
  font-size: 0.875rem !important;
  color: inherit !important;
}

.acl-conversation-header__menu.actions--container > div > .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button [class*='i-lucide-'],
.acl-conversation-header__menu.actions--container > div > .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button [class*='i-ph-'],
.acl-conversation-header__menu.actions--container > div > .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
}

.acl-conversation-header__menu.actions--container > div > .bg-n-alpha-3.backdrop-blur-\[100px\].outline-n-container.rounded-xl.flex-col button:hover:not(:disabled) {
  background-color: rgb(var(--alpha-1)) !important;
  color: rgb(var(--slate-12)) !important;
}

.acl-conversation-header__instance-actions .i-lucide-more-vertical,
.acl-conversation-header__instance-actions button:has(.i-lucide-more-vertical),
.acl-header-menu-btn .i-lucide-more-vertical,
.acl-header-menu-btn:has(.i-lucide-more-vertical) {
  color: #000000 !important;
}

.acl-conversation-header__instance-actions .i-lucide-more-vertical,
.acl-header-menu-btn .i-lucide-more-vertical {
  background-color: #000000 !important;
}

/* ===================================================================
   Aceleres 2026-07-01: texto das mensagens (bubble) em 15,8px.
   O <p> do conteúdo vem do MessageFormatter dentro de .prose-bubble
   (FormattedContent.vue / Text/Index.vue), cuja base é 12px. Bump pra
   melhorar legibilidade. .prose-bubble só existe em bubbles de
   mensagem (Text/Email/Template) — não afeta lista de conversas nem headers.
   2026-08-10: 15px -> 15,8px, alinhado ao corpo de texto das legendas
   de imagem/vídeo. Títulos (nome do remetente) ficam em 16,2px, no
   senderNameClass de Base.vue.
   =================================================================== */
.prose-bubble p {
  font-size: 15.8px !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) tamanho e posição do smile, sem pop no hover */
.message-bubble-container:hover .aceleres-bubble-smile,
.aceleres-bubble-smile:hover,
.aceleres-bubble-smile:focus,
.aceleres-bubble-smile.is-active,
.aceleres-bubble-forward {
  /* Em midia muito alta (fotos/screenshots verticais grandes), 50% da
     bolha inteira jogava o botao flutuando solto no meio da imagem. O
     clamp trava a distancia maxima do topo, mantendo o centro so em
     bolhas curtas. */
  top: clamp(24px, 50%, 200px) !important;
  width: 26px !important;
  height: 26px !important;
  transform: translateY(-50%) !important;
  filter: none !important;
}

.aceleres-bubble-forward:hover {
  transform: translateY(-50%) !important;
  filter: none !important;
}

/* Pedido 2026-08-11: os 22px daqui (de um ajuste anterior pro smile não
   cortar o canto de fotos/vídeos grandes) ficaram menores que a zona do
   forward (margin-left:14px + 26px de largura = até 40px, ver Message.vue)
   — smile [22,48] e forward [14,40] se sobrepunham em 18px assim que o
   forward passou a existir também em mensagens recebidas (antes só existia
   em enviadas). Sem override aqui, o smile volta ao padrão de Message.vue
   (margin-left:46px, span [46,72]) — 6px de vão livre depois do forward,
   igual ao lado enviado já tem. */

/* 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;
}

/* Pedido 2026-08-11: encaminhar fica sempre aceso, sem precisar passar o
   mouse — só a carita (smile) continua exigindo hover pra aparecer. */
.aceleres-bubble-forward {
  opacity: 1 !important;
}

/* Pedido 2026-08-11: quando não existe botão de encaminhar (texto, sticker,
   vídeo, áudio — ver v-if em Message.vue), a carita ocupa o lugar dele em
   vez de ficar longe com o vão vazio no meio. `:has()` detecta a ausência
   do irmão sem precisar de uma classe nova no componente Vue. */
.aceleres-bubble-surface:not(:has(> .aceleres-bubble-forward))
  > .aceleres-bubble-smile.is-left-bubble {
  margin-left: 14px !important;
}
.aceleres-bubble-surface:not(:has(> .aceleres-bubble-forward))
  > .aceleres-bubble-smile.is-right-bubble {
  margin-right: 14px !important;
}
@media (min-width: 768px) {
  .message-bubble-container[data-outgoing-image='true']
    .aceleres-bubble-surface:not(:has(> .aceleres-bubble-forward))
    > .aceleres-bubble-smile.is-right-bubble {
    margin-right: 8px !important;
  }
}

/* Aceleres 2026-08-11: sticker sozinho ENVIADO por baixo dos panos usa o
   MESMO componente de imagem (ImageBubble), entao `data-outgoing-image`
   tambem fica 'true' nele — mas como o sticker nunca tem forward (ver
   `!isStickerBubble` no v-if de Message.vue), a intencao e sempre o vao
   minimo, igual ao texto/video sem forward. Especificidade dobrada de
   proposito (mesmo padrao ja usado em aceleres-pill-icons.css) pra
   garantir a vitoria independente de qual outra regra de smile tambem
   bata no sticker. */
.aceleres-bubble-surface.aceleres-bubble-surface:has(
    > [data-bubble-name='sticker']
  )
  > .aceleres-bubble-smile.aceleres-bubble-smile.is-right-bubble {
  margin-right: 14px !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-top-right-radius: 0 !important;
  border-bottom-right-radius: 11px !important;
}

/* ponta no card — cor idêntica ao card (bg-n-alpha-white) via inherit.
   Geometria igual à dos bubbles de texto: left e right usam a ponta no topo. */
.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: 24px !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 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;
}

/* Aceleres 2026-07-13: ajustes visuais do modal "Criar Tarefa para Mim".
   O modal vem de runtime externo, então public/aceleres-profile-topbar.js marca
   o dialog pelo título antes destas regras entrarem. */
.aceleres-create-task-dom-patched .aceleres-create-task-field-clean {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.aceleres-create-task-dom-patched .aceleres-create-task-field-clean::before,
.aceleres-create-task-dom-patched .aceleres-create-task-field-clean::after {
  border: 0 !important;
  box-shadow: none !important;
}

.aceleres-create-task-dom-patched .aceleres-create-task-add-button {
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 50px !important;
  align-self: stretch !important;
}

.aceleres-create-task-dom-patched .aceleres-create-task-footer-flow {
  position: static !important;
  inset: auto !important;
  bottom: auto !important;
  margin-top: 16px !important;
}

.aceleres-create-task-dom-patched .aceleres-create-task-action-button {
  border-radius: 50px !important;
}

.aceleres-create-task-dom-patched .aceleres-create-task-cancel-button {
  border: 1px solid #d1d5db !important;
}

/* Rodape do campo de descricao do modal de rotina diaria: reduz o bloco de
   ferramentas no proprio layout, incluindo icones, textos e botoes internos. */
.rotina-modal.ctm-modal .ctm-description-tools {
  zoom: 0.8 !important;
}

#createTaskModal .ctm-description-tools,
.aceleres-create-task-dom-patched .ctm-description-tools {
  zoom: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  position: relative !important;
  pointer-events: auto !important;
}

#createTaskModal .ctm-description-tool,
.aceleres-create-task-dom-patched .ctm-description-tool {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#createTaskModal .ctm-description-tool svg,
#createTaskModal .ctm-description-tool svg *,
.aceleres-create-task-dom-patched .ctm-description-tool svg,
.aceleres-create-task-dom-patched .ctm-description-tool svg * {
  pointer-events: none !important;
}

#createTaskModal .ctm-description-tool svg,
.aceleres-create-task-dom-patched .ctm-description-tool svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
}

#createTaskModal .aceleres-create-task-emoji-dialog,
.aceleres-create-task-dom-patched .aceleres-create-task-emoji-dialog {
  right: 0 !important;
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  width: 320px !important;
  height: 300px !important;
  max-width: min(320px, 92vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#createTaskModal .aceleres-create-task-emoji-dialog .emoji-item,
.aceleres-create-task-dom-patched .aceleres-create-task-emoji-dialog .emoji-item {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 8px 8px !important;
  box-sizing: border-box !important;
}

#createTaskModal .aceleres-create-task-emoji-dialog .emoji--row,
.aceleres-create-task-dom-patched .aceleres-create-task-emoji-dialog .emoji--row {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 2px !important;
}

#createTaskModal .aceleres-create-task-emoji-dialog .emoji--item,
.aceleres-create-task-dom-patched .aceleres-create-task-emoji-dialog .emoji--item {
  width: 100% !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#createTaskModal .aceleres-create-task-emoji-dialog .emoji--item:hover,
.aceleres-create-task-dom-patched .aceleres-create-task-emoji-dialog .emoji--item:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

.aceleres-create-task-dom-patched .ctm-collaborator-dropdown__item .avatar,
.aceleres-create-task-dom-patched .ctm-collaborator-dropdown__item [class*="avatar"],
.aceleres-create-task-dom-patched .ctm-collaborator-dropdown__item [class*="Avatar"],
.aceleres-create-task-dom-patched .ctm-collaborator-dropdown__item > :first-child,
.ctm-collaborator-dropdown__item .avatar,
.ctm-collaborator-dropdown__item [class*="avatar"],
.ctm-collaborator-dropdown__item [class*="Avatar"],
.ctm-collaborator-dropdown__item > :first-child {
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
}

.aceleres-create-task-dom-patched .ctm-collaborator-dropdown__item img,
.ctm-collaborator-dropdown__item img {
  filter: grayscale(1) contrast(1.08) !important;
}

.ctm-collaborator-dropdown__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 4px 6px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.ctm-collaborator-dropdown__item + .ctm-collaborator-dropdown__item {
  margin-top: 6px !important;
}

.ctm-collaborator-dropdown__item:hover,
.ctm-collaborator-dropdown__item.is-selected {
  border-radius: 10px !important;
}

.ctm-collaborator-dropdown__item > :not(:first-child) {
  min-width: 0 !important;
}

.ctm-collaborator-dropdown__item .ctm-collaborator-dropdown__content,
.ctm-collaborator-dropdown__item .ctm-collaborator-dropdown__info,
.ctm-collaborator-dropdown__item .ctm-collaborator-dropdown__meta,
.ctm-collaborator-dropdown__item [class*="content"],
.ctm-collaborator-dropdown__item [class*="info"],
.ctm-collaborator-dropdown__item [class*="meta"] {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 0 !important;
  white-space: nowrap !important;
}

.ctm-collaborator-dropdown__item .ctm-collaborator-dropdown__name,
.ctm-collaborator-dropdown__item [class*="name"] {
  display: inline-flex !important;
  min-width: 0 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ctm-collaborator-dropdown__item .ctm-collaborator-dropdown__email,
.ctm-collaborator-dropdown__item [class*="email"] {
  display: inline-flex !important;
  min-width: 0 !important;
  max-width: 220px !important;
  align-items: center !important;
  overflow: hidden !important;
  color: #6b7280 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ctm-collaborator-dropdown__item .ctm-collaborator-dropdown__email::before,
.ctm-collaborator-dropdown__item [class*="email"]::before {
  content: '•' !important;
  margin: 0 8px !important;
  color: #9ca3af !important;
  flex-shrink: 0 !important;
}

.ctm-card.ctm-field-card {
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease !important;
}

.ctm-card.ctm-field-card + .ctm-card.ctm-field-card {
  margin-top: 8px !important;
}

.rotina-modal.ctm-modal .ctm-card.ctm-field-card.ctm-field-card--wide {
  border: 0 !important;
}

.ctm-card.ctm-field-card:hover,
.ctm-card.ctm-field-card.is-hovered {
  border-color: rgba(27, 135, 85, 0.24) !important;
  background: #f8faf9 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10) !important;
}

.ctm-card.ctm-field-card.is-selected,
.ctm-card.ctm-field-card[aria-selected='true'],
.ctm-card.ctm-field-card[data-selected='true'] {
  border-color: rgba(27, 135, 85, 0.34) !important;
  background: #f3faf6 !important;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.10),
    inset 0 0 0 1px rgba(27, 135, 85, 0.12) !important;
}

.ctm-card.ctm-field-card:hover *,
.ctm-card.ctm-field-card.is-selected *,
.ctm-card.ctm-field-card[aria-selected='true'] *,
.ctm-card.ctm-field-card[data-selected='true'] * {
  --tw-ring-color: transparent !important;
}

.dark .ctm-card.ctm-field-card {
  border-color: rgba(255, 255, 255, 0.10) !important;
  background: #111827 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26) !important;
}

.dark .ctm-card.ctm-field-card:hover,
.dark .ctm-card.ctm-field-card.is-selected,
.dark .ctm-card.ctm-field-card[aria-selected='true'],
.dark .ctm-card.ctm-field-card[data-selected='true'] {
  border-color: rgba(16, 185, 129, 0.32) !important;
  background: #14221c !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32) !important;
}

/* Aceleres 2026-07-13: o source do filtro de canais nao renderiza mais a tag
   "voce", mas o bundle Vite publicado ainda esta root-owned e com build antigo.
   Esconde apenas o badge legado usado nas tres variantes do filtro. */
span[class~="text-[10px]"][class~="text-[#1b8755]"][class~="bg-[#1b8755]/10"][class~="dark:text-[#25D366]"][class~="dark:bg-[#25D366]/15"] {
  display: none !important;
}

/* Aceleres 2026-07-13: acoes do painel expirado na direita, centralizadas de cima a baixo. */
.acl-session-expired {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 14px !important;
}

.acl-session-expired__actions {
  justify-content: flex-end !important;
  align-items: center !important;
  align-self: center !important;
  margin-top: 0 !important;
}

#aceleres-session-expired-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 14px !important;
}

#aceleres-session-expired-panel .acl-sep-title {
  margin-bottom: 0 !important;
}

#aceleres-session-expired-panel .acl-sep-actions {
  justify-content: flex-end !important;
  align-items: center !important;
  align-self: center !important;
}

@media (max-width: 680px) {
  .acl-session-expired,
  #aceleres-session-expired-panel {
    grid-template-columns: 1fr !important;
  }

  .acl-session-expired__actions,
  #aceleres-session-expired-panel .acl-sep-actions {
    justify-content: flex-start !important;
    margin-top: 8px !important;
  }
}

/* Aceleres 2026-07-14: deixa o menu de formatacao clicavel acima das
   camadas do composer sem aplicar o deslocamento visual extra, porque o
   bundle rebuildado ja posiciona a barra acima da selecao. */
.reply-box .popover-prosemirror-menu.has-selection .ProseMirror-menubar {
  transform: none !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
}

/* ===================================================================
   Zoraxy mobile WhatsApp layout. The channel class is attached by
   ConversationBox and every override is additionally gated by 767px.
   Desktop and non-WhatsApp/API inboxes keep their existing layout.
   =================================================================== */
.acl-activity-mobile {
  display: none;
}

@media (max-width: 767px) {
  /* Mobile navigation behaves as a single WhatsApp screen. In the
     condensed desktop layout ChatList and ConversationBox are both mounted;
     the active state below turns them into two mobile routes without changing
     the router contract or the desktop split-pane layout. */
  .painel-atendimento {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .painel-atendimento .conversations-list-wrap,
  .painel-atendimento .conversation-details-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .painel-atendimento .conversations-list-wrap {
    width: 100% !important;
    flex: 1 1 100% !important;
    border: 0 !important;
  }

  .painel-atendimento .conversation-details-wrap {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .painel-atendimento.acl-mobile-conversation-active
    .conversations-list-wrap {
    display: none !important;
  }

  .painel-atendimento.acl-conversation-mobile-page {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    background: #f7f5f3 !important;
  }

  .painel-atendimento.acl-mobile-conversation-active {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    background: #f7f5f3 !important;
  }

  .acl-conversation-mobile-page .acl-conversation-mobile-shell,
  .painel-atendimento.acl-mobile-conversation-active
    .conversation-details-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .acl-conversation-mobile-page .acl-conversation-mobile-header,
  .painel-atendimento.acl-mobile-conversation-active
    .acl-conversation-header {
    position: sticky !important;
    top: var(--acl-mobile-visual-viewport-top, 0px) !important;
    z-index: 80 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .acl-conversation-mobile-page .acl-conversation-mobile-body,
  .painel-atendimento.acl-mobile-conversation-active
    .conversation-details-wrap
    > .flex.h-full.min-h-0.m-0 {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .acl-conversation-mobile-page .acl-conversation-mobile-messages,
  .painel-atendimento.acl-mobile-conversation-active .acl-messages-view {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .acl-conversation-mobile-page .acl-message-list,
  .painel-atendimento.acl-mobile-conversation-active .acl-message-list,
  .acl-whatsapp-mobile-scope .acl-message-list {
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: 8px !important;
  }

  .acl-conversation-mobile-page .acl-message-list__items,
  .painel-atendimento.acl-mobile-conversation-active .acl-message-list__items,
  .acl-whatsapp-mobile-scope .acl-message-list__items {
    min-height: 0 !important;
  }

  .acl-conversation-mobile-page .acl-conversation-mobile-composer,
  .painel-atendimento.acl-mobile-conversation-active
    .acl-conversation-composer-shell {
    position: relative !important;
    bottom: auto !important;
    z-index: 70 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding-bottom: 0 !important;
  }

  .painel-atendimento.acl-mobile-conversation-empty
    .conversation-details-wrap {
    display: none !important;
  }

  .painel-atendimento .acl-conv-list-resize-handle {
    display: none !important;
  }

  /* Conversation list: compact header and cards, with horizontal filter rails
     that remain touch-scrollable instead of forcing the viewport wider. */
  html.acl-mobile-chatlist-panel .acl-chatlist-header,
  html.acl-mobile-chatlist-panel .acl-chatlist-header--floating {
    position: fixed !important;
    inset-block: env(safe-area-inset-top, 0px) auto !important;
    inset-inline: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: env(safe-area-inset-top, 0px) !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px !important;
    background: rgba(248, 250, 252, 0.98) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 60 !important;
  }

  /* Dashboard mobile header: title stays visible and centered, while controls
     remain reachable. Mobile-only so desktop and bottom navigation are untouched. */
  html.acl-mobile-chatlist-panel .acl-chatlist-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    overflow: visible !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-chatlist-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: left !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-chatlist-heading > div {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-chatlist-title {
    display: block !important;
    max-width: calc(100vw - 156px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-mobile-sidebar-btn {
    display: none !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-chatlist-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 2 !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-chatlist-actions::-webkit-scrollbar {
    display: none !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-chatlist-actions > * {
    flex: 0 0 auto !important;
  }

  html.acl-mobile-chatlist-panel .acl-dashboard-flow,
  html.acl-mobile-chatlist-panel .acl-dashboard-flow--with-hero {
    padding-top: calc(82px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.acl-mobile-chatlist-panel .conversations-list {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.acl-mobile-chatlist-panel .acl-archived-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    background: #fff !important;
  }

  html.acl-mobile-chatlist-panel .acl-archived-row ~ .acl-archived-row {
    display: none !important;
  }

  html.dark.acl-mobile-chatlist-panel .acl-archived-row,
  html.acl-mobile-chatlist-panel.dark .acl-archived-row {
    background: #111827 !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-title {
    max-width: 52vw !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-subtitle {
    display: none !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-new-conv-btn,
  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-header-menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-new-conv-btn:not(.acl-archive-btn) {
    display: none !important;
  }

  html.acl-mobile-chatlist-panel .acl-chatlist-header .acl-archive-btn {
    display: none !important;
  }

  .painel-atendimento .acl-pill-tabs {
    min-height: calc(
      84px + var(
          --aceleres-app-safe-bottom,
          env(safe-area-inset-bottom, 0px)
        )
    ) !important;
    padding: 10px 0
      calc(
        10px + var(
            --aceleres-app-safe-bottom,
            env(safe-area-inset-bottom, 0px)
          )
      ) !important;
    background: #ffffff !important;
  }

  .painel-atendimento .acl-pill-tab {
    height: 64px !important;
    min-height: 64px !important;
    padding: 5px 2px !important;
    font-size: 12px !important;
  }

  .painel-atendimento
    .acl-pill-tab--active
    .acl-pill-tab__icon-pill {
    width: 56px !important;
    min-width: 56px !important;
    height: 30px !important;
  }

  .painel-atendimento .acl-pill-action-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .painel-atendimento .acl-unread-subfilters {
    padding-inline: 12px !important;
    padding-bottom: 5px !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .painel-atendimento .acl-unread-subfilters + div {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .painel-atendimento .acl-unread-subfilter-btn {
    -webkit-tap-highlight-color: transparent !important;
  }

  .painel-atendimento .acl-unread-subfilter-btn--unread,
  .painel-atendimento .acl-unread-subfilter-btn--unread:hover {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: #d4d4d4 !important;
    color: #767676 !important;
    box-shadow: none !important;
  }

  .painel-atendimento
    .acl-unread-subfilter-btn--unread.acl-unread-subfilter-btn--active,
  .painel-atendimento
    .acl-unread-subfilter-btn--unread.acl-unread-subfilter-btn--active:hover {
    background: #d9fdd3 !important;
    border-color: #15603e !important;
    color: #15603e !important;
    box-shadow: 0 0 0 1px rgba(21, 96, 62, 0.06) !important;
  }

  .acl-unread-subfilters .acl-unread-subfilter-btn--unread,
  .acl-unread-subfilters .acl-unread-subfilter-btn--unread:hover,
  .acl-unread-subfilters .acl-unread-subfilter-btn:nth-of-type(2),
  .acl-unread-subfilters .acl-unread-subfilter-btn:nth-of-type(2):hover {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: #d4d4d4 !important;
    color: #767676 !important;
    box-shadow: none !important;
  }

  .acl-unread-subfilters
    .acl-unread-subfilter-btn--unread.acl-unread-subfilter-btn--active,
  .acl-unread-subfilters
    .acl-unread-subfilter-btn--unread.acl-unread-subfilter-btn--active:hover,
  .acl-unread-subfilters
    .acl-unread-subfilter-btn:nth-of-type(2).acl-unread-subfilter-btn--active,
  .acl-unread-subfilters
    .acl-unread-subfilter-btn:nth-of-type(2).acl-unread-subfilter-btn--active:hover {
    background: #d9fdd3 !important;
    border-color: #15603e !important;
    color: #15603e !important;
    box-shadow: 0 0 0 1px rgba(21, 96, 62, 0.06) !important;
  }

  .painel-atendimento .chips-scroll {
    padding-block: 6px !important;
  }

  .painel-atendimento .conversations-list {
    margin-top: 3px !important;
    overscroll-behavior-y: contain !important;
  }

  .painel-atendimento .acl-conversation-card {
    min-height: 72px !important;
    padding-inline: 10px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  }

  .painel-atendimento .acl-conversation-card .avatar-conversa {
    margin-inline: 0 8px !important;
  }

  .painel-atendimento .acl-conversation-card .conversation--user,
  .painel-atendimento .acl-conversation-card .message-preview,
  .painel-atendimento .acl-conversation-card .text-n-slate-11 {
    font-size: 13px !important;
  }

  /* Flutter Android already pads the SPA below the status bar. Avoid adding
     the same inset a second time to the conversation header. */
  html.aceleres-flutter-app
    .acl-whatsapp-mobile-scope
    .acl-conversation-header {
    height: 56px !important;
    min-height: 56px !important;
    padding-top: 0 !important;
  }

  .acl-whatsapp-mobile-scope {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    background: #efeae2 !important;
  }

  /* Compact contact header */
  .acl-whatsapp-mobile-scope .acl-conversation-header {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: calc(56px + env(safe-area-inset-top)) !important;
    min-height: calc(56px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 8px 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: rgba(248, 246, 242, 0.94) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__identity {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 56px !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__back {
    margin: 0 4px 0 0 !important;
  }

  .acl-whatsapp-mobile-scope .acl-back-button,
  .painel-atendimento .conversation-details-wrap .acl-back-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    color: #334155 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .acl-whatsapp-mobile-scope .acl-back-button__label {
    display: none !important;
  }

  /* Fallback for conversations whose inbox metadata arrives after the
     header: mobile navigation is always icon-only, like WhatsApp. */
  .painel-atendimento
    .conversation-details-wrap
    .acl-back-button__label {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope .acl-back-button__icon,
  .painel-atendimento .conversation-details-wrap .acl-back-button__icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    font-size: 24px !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__avatar,
  .acl-whatsapp-mobile-scope .acl-conversation-contact-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__contact {
    flex: 1 1 auto !important;
    margin-left: 9px !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__contact > span:first-child {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__actions {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 56px !important;
    margin: 0 !important;
    justify-content: flex-end !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__menu,
  .acl-whatsapp-mobile-scope .acl-conversation-header__menu .actions--container {
    height: 40px !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__menu .acl-tip-wrapper > button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  }

  /* Chat wallpaper and scroll surface */
  .acl-whatsapp-mobile-scope .acl-messages-view {
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #efeae2 !important;
    background-image: url('/assets/images/aceleres-chat-pattern.svg') !important;
    background-position: center top !important;
    background-repeat: repeat !important;
    background-size: 160px 160px !important;
  }

  .acl-whatsapp-mobile-scope .acl-message-list {
    width: 100% !important;
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 8px !important;
    overscroll-behavior: contain !important;
  }

  .acl-whatsapp-mobile-scope .acl-message-list__items {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  .acl-whatsapp-mobile-scope .acl-day-separator {
    padding: 7px 0 !important;
  }

  .acl-whatsapp-mobile-scope .acl-day-separator__label,
  .acl-whatsapp-mobile-scope .acl-history-context > div {
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  .acl-whatsapp-mobile-scope .acl-history-context {
    padding: 4px 0 !important;
  }

  /* Mobile message density and widths */
  .acl-whatsapp-mobile-scope .message-bubble-container {
    margin-bottom: 1px !important;
    padding-inline: 4px !important;
  }

  .acl-whatsapp-mobile-scope .acl-message-bubble-row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-bottom: 2px !important;
  }

  .acl-whatsapp-mobile-scope .message-bubble-container > div.grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: 'bubble' 'reactions' 'meta' !important;
    column-gap: 0 !important;
  }

  .acl-whatsapp-mobile-scope
    .message-bubble-container
    > div.grid
    div.\[grid-area\:bubble\]
    > .aceleres-bubble-with-actions {
    max-width: 88% !important;
  }

  .acl-whatsapp-mobile-scope .message-bubble-container[data-attachment-type='image'] .aceleres-bubble-with-actions:has([data-bubble-name='image'], [data-bubble-name='image-album']) {
    max-width: min(420px, calc(100vw - 32px)) !important;
    width: fit-content !important;
    flex: 0 1 auto !important;
  }

  .acl-whatsapp-mobile-scope .message-bubble-container[data-attachment-type='video'] .aceleres-bubble-with-actions,
  .acl-whatsapp-mobile-scope .message-bubble-container[data-attachment-type='audio'] .aceleres-bubble-with-actions {
    max-width: 94% !important;
  }

  .acl-whatsapp-mobile-scope .left-bubble,
  .acl-whatsapp-mobile-scope .right-bubble {
    max-width: 100% !important;
    border-radius: 9px !important;
    line-height: 1.35 !important;
  }

  .acl-whatsapp-mobile-scope .acl-message-avatar,
  .acl-whatsapp-mobile-scope .aceleres-bubble-chevron {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope .left-bubble .text-xs,
  .acl-whatsapp-mobile-scope .right-bubble .text-xs {
    font-size: 10px !important;
    line-height: 1.2 !important;
    opacity: 0.72 !important;
  }

  .acl-whatsapp-mobile-scope .left-bubble {
    border-top-left-radius: 0 !important;
  }

  .acl-whatsapp-mobile-scope .right-bubble {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 9px !important;
  }

  .acl-whatsapp-mobile-scope .right-bubble > .text-\[13px\].font-bold {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope .aceleres-bubble-smile,
  .acl-whatsapp-mobile-scope .aceleres-bubble-forward {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope .acl-load-previous-button {
    min-height: 28px !important;
    padding: 5px 12px !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    border-radius: 9999px !important;
    color: rgba(71, 85, 105, 0.82) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    font-size: 11px !important;
  }

  .acl-whatsapp-mobile-scope .aceleres-bubble-chevron {
    width: 26px !important;
    height: 24px !important;
  }

  /* Full-size media, including messages that also have a caption */
  .acl-whatsapp-mobile-scope [data-bubble-name='image'] {
    padding: 6px !important;
    border-radius: 8px !important;
  }

  .acl-whatsapp-mobile-scope .message-bubble-container [data-bubble-name='video'] video {
    width: auto !important;
    height: auto !important;
    max-width: min(76vw, 360px) !important;
    max-height: 52dvh !important;
    object-fit: contain !important;
    border-radius: 7px !important;
  }

  .acl-whatsapp-mobile-scope .acl-text-bubble--with-media {
    padding: 3px 3px 22px !important;
    overflow: hidden !important;
  }

  .acl-whatsapp-mobile-scope .message-bubble-container [data-bubble-name='image-album'] {
    width: min(76vw, 420px) !important;
    max-width: min(76vw, 420px) !important;
  }

  .acl-whatsapp-mobile-scope .acl-text-bubble--with-media > div.pr-12 {
    margin-bottom: 0 !important;
    padding-right: 0 !important;
  }

  .acl-whatsapp-mobile-scope .acl-text-bubble--with-media .acl-message-content {
    gap: 6px !important;
  }

  .acl-whatsapp-mobile-scope .acl-media-attachments {
    order: -1 !important;
    width: 100% !important;
    margin: 0 0 2px !important;
    justify-content: stretch !important;
  }

  .acl-whatsapp-mobile-scope .acl-media-chip {
    width: min(80vw, 420px) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 62dvh !important;
    border-radius: 7px !important;
  }

  .acl-whatsapp-mobile-scope .acl-media-chip__asset {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 62dvh !important;
    object-fit: contain !important;
  }

  .acl-whatsapp-mobile-scope .acl-media-chip--video,
  .acl-whatsapp-mobile-scope .acl-media-chip--video .acl-media-chip__asset {
    object-fit: contain !important;
  }

  .acl-whatsapp-mobile-scope .acl-text-bubble--with-media .acl-message-content > .acl-message-caption {
    margin-right: 8px !important;
    margin-left: 8px !important;
  }

  .acl-whatsapp-mobile-scope .acl-wa-audio {
    width: min(78vw, 360px) !important;
    max-width: 100% !important;
  }

  /* System events become WhatsApp-like centered chips. */
  .acl-whatsapp-mobile-scope .aceleres-activity-event,
  .acl-whatsapp-mobile-scope .aceleres-activity-event.aceleres-activity-card {
    justify-content: center !important;
    padding: 3px 0 !important;
    margin: 1px 0 !important;
  }

  .acl-whatsapp-mobile-scope .acl-activity-detail {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope .acl-activity-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    max-width: 84% !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
    border-radius: 9px !important;
    color: rgba(30, 41, 59, 0.76) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  .acl-whatsapp-mobile-scope .acl-activity-mobile__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 9999px !important;
  }

  .acl-whatsapp-mobile-scope .acl-activity-mobile__icon > span {
    width: 11px !important;
    height: 11px !important;
  }

  .acl-whatsapp-mobile-scope .acl-activity-mobile__text {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #64748b !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .acl-whatsapp-mobile-scope .acl-activity-mobile__time {
    flex-shrink: 0 !important;
    color: rgba(71, 85, 105, 0.68) !important;
  }

  .acl-whatsapp-mobile-scope .acl-activity-mobile__separator {
    flex: 0 0 auto !important;
    color: rgba(71, 85, 105, 0.72) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  /* Composer mobile: preserve the bottom safe area and use the compact
     WhatsApp-style split between the input capsule and its main action. */
  .acl-whatsapp-mobile-scope .acl-conversation-composer-shell {
    flex: 0 0 auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border-top: 0 !important;
    background: rgba(239, 234, 226, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .painel-atendimento.acl-mobile-conversation-active
    .acl-conversation-composer-shell.bg-n-surface-1,
  .painel-atendimento.acl-mobile-conversation-active
    .acl-conversation-mobile-composer.bg-n-surface-1,
  .acl-conversation-mobile-page
    .acl-conversation-composer-shell.bg-n-surface-1,
  .acl-conversation-mobile-page
    .acl-conversation-mobile-composer.bg-n-surface-1,
  .conversation-details-wrap.chat-whats
    .acl-conversation-composer-shell.bg-n-surface-1,
  .conversation-details-wrap.chat-whats
    .acl-conversation-mobile-composer.bg-n-surface-1 {
    --surface-1: 239 234 226 !important;
    --tw-bg-opacity: 1 !important;
    background: #efeae2 !important;
    background-color: #efeae2 !important;
  }

  /* WhatsApp-style mobile composer: emoji and tools stay inside the white
     capsule; microphone/send is a separate circular action on the right. */
  .acl-whatsapp-mobile-scope div.reply-box {
    width: auto !important;
    min-height: 64px !important;
    margin: 0 6px 6px !important;
    padding: 4px 6px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px 48px 58px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate;
    overflow: visible !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 2px;
    right: 64px;
    bottom: 2px;
    left: 6px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    pointer-events: none;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box.reply-box--multi-line::before {
    border-radius: 28px;
  }

  .acl-whatsapp-mobile-scope div.reply-box.is-private::before {
    border-color: rgba(217, 119, 6, 0.18);
    background: #fffbeb;
  }

  .dark .acl-whatsapp-mobile-scope div.reply-box::before {
    border-color: rgba(255, 255, 255, 0.18);
    background: #2c2c2c;
  }

  /* Audio recording and the start-conversation gate need the full row: in
     those states there is no detached mic/send action to reserve space for. */
  .acl-whatsapp-mobile-scope
    div.reply-box:has(.reply-box__top > div.w-full.p-1),
  .acl-whatsapp-mobile-scope div.reply-box:has(> .aceleres-start-gate) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.reply-box__top > div.w-full.p-1)::before,
  .acl-whatsapp-mobile-scope
    div.reply-box:has(> .aceleres-start-gate)::before {
    right: 6px;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.reply-box__top > div.w-full.p-1)
    .reply-box__top,
  .acl-whatsapp-mobile-scope div.reply-box .aceleres-start-gate {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 56px !important;
    position: relative;
    z-index: 1;
  }

  .acl-whatsapp-mobile-scope div.reply-box > div.flex.justify-between,
  .acl-whatsapp-mobile-scope div.reply-box .left-wrap,
  .acl-whatsapp-mobile-scope div.reply-box .right-wrap {
    display: contents !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .reply-box__top {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    z-index: 1 !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-composer-emoji,
  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-wrap,
  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-wrap,
  .acl-whatsapp-mobile-scope div.reply-box .right-wrap > button {
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-composer-emoji {
    grid-column: 1 !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-wrap {
    grid-column: 3 !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-wrap {
    grid-column: 4 !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .right-wrap > button {
    grid-column: 5 !important;
    margin-left: 6px !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-wrap,
  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-wrap {
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .left-wrap > button,
  .acl-whatsapp-mobile-scope
    div.reply-box
    .left-wrap
    .acl-plus-wrap
    > button,
  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .left-wrap
    .acl-plus-wrap
    > button::before {
    content: '' !important;
    width: 28px !important;
    height: 28px !important;
    background-color: #111827 !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%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%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%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box
    .left-wrap
    .acl-plus-wrap
    > button::before {
    background-color: #e9edef !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .left-wrap
    .i-ph-smiley-sticker,
  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-button i {
    width: 28px !important;
    height: 28px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > .wa-action-btn--send,
  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > button.wa-action-btn--mic,
  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > button[type='submit'].bg-n-amber-9 {
    position: relative !important;
    right: 8px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    background: #00a884 !important;
    background-color: #00a884 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  }

  @media (hover: hover) {
    .acl-whatsapp-mobile-scope
      div.reply-box
      .right-wrap
      > button.wa-action-btn--mic:hover:not(:disabled) {
      background: #008f70 !important;
      background-color: #008f70 !important;
      color: #ffffff !important;
    }
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > button.wa-action-btn--mic:focus-visible {
    background: #008f70 !important;
    background-color: #008f70 !important;
    color: #ffffff !important;
    outline: 2px solid #d9fdd3 !important;
    outline-offset: 2px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > .wa-action-btn--send
    i,
  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > button.wa-action-btn--mic
    i {
    width: 27px !important;
    height: 27px !important;
    font-size: 27px !important;
    color: #ffffff !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box.reply-box--multi-line
    .acl-composer-emoji,
  .acl-whatsapp-mobile-scope
    div.reply-box.reply-box--multi-line
    .acl-copilot-wrap,
  .acl-whatsapp-mobile-scope
    div.reply-box.reply-box--multi-line
    .acl-plus-wrap,
  .acl-whatsapp-mobile-scope
    div.reply-box.reply-box--multi-line
    .right-wrap
    > button {
    align-self: center !important;
    margin-bottom: 0 !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .reply-box__top .ProseMirror {
    min-height: 18px !important;
    max-height: min(48dvh, 15rem) !important;
    padding: 5px 0 !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .reply-box__top
    .ProseMirror:has(> p.empty-node:only-child) {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .reply-box__top
    .ProseMirror
    > p.empty-node:only-child {
    width: 100% !important;
    min-height: 24px !important;
    margin: 0 !important;
    line-height: 24px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .reply-box__top
    .ProseMirror
    p.empty-node:first-child::before {
    font-size: 15px !important;
    line-height: 24px !important;
  }

  .acl-whatsapp-mobile-scope .acl-message-error {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: -2px !important;
    margin-bottom: 2px !important;
    padding-inline: 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .acl-whatsapp-mobile-scope .acl-message-error > span {
    white-space: nowrap !important;
  }

  /* WhatsApp mobile: composer tools replace the keyboard area instead of
     opening as floating popovers above the composer. */
  .acl-whatsapp-mobile-scope {
    --acl-mobile-emoji-sheet-height: clamp(300px, 42dvh, 380px);
    --acl-mobile-options-sheet-height: clamp(280px, 40dvh, 360px);
    --acl-mobile-copilot-sheet-height: clamp(276px, 36dvh, 310px);
  }

  .acl-whatsapp-mobile-scope .acl-conversation-composer-shell {
    bottom: var(--acl-mobile-keyboard-offset, 0px) !important;
    transition: bottom 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  /* A bottom sheet replaces the native keyboard. Never keep a stale
     VisualViewport keyboard offset while emoji/Jarvis/attachments is open. */
  .acl-whatsapp-mobile-scope:has(
      .acl-inline-picker,
      .acl-plus-menu,
      .acl-copilot-menu
    )
    .acl-conversation-composer-shell {
    bottom: 0 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box {
    bottom: 0 !important;
    transition: bottom 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.aceleres-emoji-picker-card.acl-inline-picker) {
    bottom: var(--acl-mobile-emoji-sheet-height) !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box:has(.acl-plus-menu) {
    bottom: var(--acl-mobile-options-sheet-height) !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box:has(.acl-copilot-menu) {
    bottom: var(--acl-mobile-copilot-sheet-height) !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .aceleres-emoji-picker-card.acl-inline-picker {
    position: fixed !important;
    inset: auto auto 0 0 !important;
    z-index: 2147483000 !important;
    /* The dashboard root runs at zoom: .8. Compensate it so the fixed sheet
       spans the complete visible viewport instead of only its left 80%. */
    width: 125vw !important;
    max-width: 125vw !important;
    height: var(--acl-mobile-emoji-sheet-height) !important;
    max-height: var(--acl-mobile-emoji-sheet-height) !important;
    padding: 16px 0 env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #f7f8fa !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.14) !important;
    transform-origin: center bottom !important;
    animation: acl-mobile-composer-sheet-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1)
      both !important;
    will-change: transform !important;
    overscroll-behavior: contain !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .aceleres-emoji-picker-card.acl-inline-picker::before {
    content: '' !important;
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    width: 38px !important;
    height: 4px !important;
    border-radius: 9999px !important;
    background: rgba(71, 85, 105, 0.46) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .aceleres-emoji-picker-card.acl-inline-picker.acl-mobile-composer-sheet--closing {
    pointer-events: none !important;
    animation: acl-mobile-composer-sheet-out 180ms cubic-bezier(0.4, 0, 1, 1)
      both !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-menu,
  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu {
    position: fixed !important;
    inset: auto auto 0 0 !important;
    z-index: 2147483000 !important;
    width: 125vw !important;
    min-width: 125vw !important;
    max-width: 125vw !important;
    height: var(--acl-mobile-options-sheet-height) !important;
    max-height: var(--acl-mobile-options-sheet-height) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #f7f8fa !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.14) !important;
    transform-origin: center bottom !important;
    animation: acl-mobile-composer-sheet-in 220ms
      cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
    will-change: transform !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .acl-whatsapp-mobile-scope .acl-mobile-composer-sheet-handle {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    z-index: 20 !important;
    width: 76px !important;
    height: 32px !important;
    border: 0 !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
    touch-action: none !important;
    cursor: ns-resize !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .acl-whatsapp-mobile-scope .acl-mobile-composer-sheet-handle::after {
    content: '' !important;
    position: absolute !important;
    top: 7px !important;
    left: 50% !important;
    width: 38px !important;
    height: 4px !important;
    border-radius: 9999px !important;
    background: rgba(71, 85, 105, 0.46) !important;
    transform: translateX(-50%) !important;
  }

  .acl-whatsapp-mobile-scope
    :is(
      .aceleres-emoji-picker-card.acl-inline-picker,
      .acl-plus-menu,
      .acl-copilot-menu
    ).acl-mobile-composer-sheet--dragging {
    animation: none !important;
    transition: none !important;
    user-select: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.acl-mobile-composer-sheet--dragging) {
    transition: none !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu {
    height: var(--acl-mobile-copilot-sheet-height) !important;
    max-height: var(--acl-mobile-copilot-sheet-height) !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-menu::before,
  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu::before {
    content: '' !important;
    position: absolute !important;
    top: 7px !important;
    left: 50% !important;
    z-index: 2 !important;
    width: 38px !important;
    height: 4px !important;
    border-radius: 9999px !important;
    background: rgba(71, 85, 105, 0.46) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu.acl-mobile-composer-sheet--closing,
  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu.acl-mobile-composer-sheet--closing {
    pointer-events: none !important;
    animation: acl-mobile-composer-sheet-out 180ms cubic-bezier(0.4, 0, 1, 1)
      both !important;
  }

  /* Attachment options use the compact WhatsApp grid: large circular icons
     with their labels directly underneath. */
  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-menu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(86px, auto) !important;
    align-content: start !important;
    gap: 8px 6px !important;
    padding: 28px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-menu__item {
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 5px 3px !important;
    color: #334155 !important;
    text-align: center !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-menu__icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18) !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-menu__icon i {
    width: 25px !important;
    height: 25px !important;
    font-size: 25px !important;
    color: #ffffff !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-plus-menu__label {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    width: 100% !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu__item--violet
    .acl-plus-menu__icon {
    background: #7c3aed !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu__item--orange
    .acl-plus-menu__icon {
    background: #f97316 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu__item--blue
    .acl-plus-menu__icon {
    background: #2563eb !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu__item--teal
    .acl-plus-menu__icon {
    background: #0d9488 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu__item--amber
    .acl-plus-menu__icon {
    background: #d97706 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu__item--slate
    .acl-plus-menu__icon {
    background: #64748b !important;
  }

  /* Jarvis has its own compact mobile tray. The heading and card-like actions
     fill the available space without making three short labels look adrift. */
  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu {
    display: block !important;
    padding: 24px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    background:
      radial-gradient(circle at 88% 8%, rgba(139, 92, 246, 0.12), transparent 34%),
      #f5f6f8 !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu > ul {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    .acl-mobile-copilot-heading {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 48px !important;
    padding: 2px 8px 5px !important;
    color: #172033 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    .acl-mobile-copilot-heading__icon {
    display: inline-flex !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 54%, #f59e0b 100%) !important;
    box-shadow: 0 5px 14px rgba(109, 40, 217, 0.22) !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    .acl-mobile-copilot-heading__icon i {
    width: 23px !important;
    height: 23px !important;
    font-size: 23px !important;
    color: currentColor !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    .acl-mobile-copilot-heading__copy {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.2 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    .acl-mobile-copilot-heading__copy strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    .acl-mobile-copilot-heading__copy small {
    overflow: hidden !important;
    color: #697386 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu > ul > div:not(.acl-mobile-copilot-heading) {
    gap: 8px !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu > ul button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 9px 13px !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 14px !important;
    color: #263244 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu > ul button::after {
    content: '\203A' !important;
    grid-column: 3 !important;
    color: #94a3b8 !important;
    font-size: 25px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    > ul
    button
    > span:first-child:not(.min-w-0) {
    grid-column: 1 !important;
    width: 24px !important;
    height: 24px !important;
    color: #7c3aed !important;
    font-size: 24px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    > ul
    button
    > .min-w-0 {
    grid-column: 2 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu > ul button:active {
    border-color: rgba(124, 58, 237, 0.28) !important;
    background: #f4f0ff !important;
    transform: scale(0.985) !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu-fade-enter-active,
  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu-fade-leave-active {
    transition: none !important;
  }

  .acl-whatsapp-mobile-scope
    .aceleres-emoji-picker-card.acl-inline-picker
    .aceleres-emoji-picker-body {
    height: 100% !important;
    min-height: 0 !important;
  }

  .acl-whatsapp-mobile-scope
    .aceleres-emoji-picker-card.acl-inline-picker
    .emoji-dialog
    > .flex.flex-col
    > .emoji-item {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overscroll-behavior: contain !important;
  }

  /* EmojiInput renders 1,847 buttons in continuous mode. Skip layout/paint
     work for categories that are still outside the visible scroll area. */
  .acl-whatsapp-mobile-scope
    .aceleres-emoji-picker-card.acl-inline-picker
    .emoji--section {
    content-visibility: auto !important;
    contain-intrinsic-size: auto 960px !important;
  }

  .acl-whatsapp-mobile-scope
    .aceleres-emoji-picker-card.acl-inline-picker
    .emoji--section:first-child {
    content-visibility: visible !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.aceleres-emoji-picker-card.acl-inline-picker)
    .acl-composer-emoji
    .i-ph-smiley-sticker {
    -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%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 16h8'/%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%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 16h8'/%3E%3C/svg%3E") !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box
    .aceleres-emoji-picker-card.acl-inline-picker,
  .dark .acl-whatsapp-mobile-scope div.reply-box .acl-plus-menu,
  .dark .acl-whatsapp-mobile-scope div.reply-box .acl-copilot-menu {
    background: #202c33 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3) !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    .acl-mobile-copilot-heading {
    color: #f1f5f9 !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    .acl-mobile-copilot-heading__copy small {
    color: #a8b3bd !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-copilot-menu
    > ul
    button {
    border-color: rgba(148, 163, 184, 0.16) !important;
    color: #e9edef !important;
    background: rgba(42, 57, 66, 0.96) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-plus-menu__item {
    color: #e9edef !important;
  }

  @keyframes acl-mobile-composer-sheet-in {
    from {
      transform: translate3d(0, 100%, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes acl-mobile-composer-sheet-out {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(0, 100%, 0);
    }
  }

  .dark .acl-whatsapp-mobile-scope,
  .dark .acl-whatsapp-mobile-scope .acl-messages-view {
    background-color: #111b21 !important;
    background-image:
      linear-gradient(rgba(17, 27, 33, 0.78), rgba(17, 27, 33, 0.78)),
      url('/assets/images/aceleres-chat-pattern.svg') !important;
  }

  .dark .acl-whatsapp-mobile-scope .acl-conversation-header,
  .dark .acl-whatsapp-mobile-scope .acl-conversation-composer-shell {
    background: rgba(31, 44, 52, 0.96) !important;
  }

  .dark .acl-whatsapp-mobile-scope .acl-activity-mobile,
  .dark .acl-whatsapp-mobile-scope .acl-day-separator__label,
  .dark .acl-whatsapp-mobile-scope .acl-history-context > div {
    color: rgba(241, 245, 249, 0.76) !important;
    background: rgba(31, 44, 52, 0.92) !important;
  }
}

@media (min-width: 768px) {
  .acl-unread-subfilters .acl-unread-subfilter-btn:first-of-type,
  .acl-unread-subfilters .acl-unread-subfilter-btn:first-of-type:hover {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: #d4d4d4 !important;
    color: #767676 !important;
    box-shadow: none !important;
  }

  .acl-unread-subfilters
    .acl-unread-subfilter-btn:first-of-type.acl-unread-subfilter-btn--active,
  .acl-unread-subfilters
    .acl-unread-subfilter-btn:first-of-type.acl-unread-subfilter-btn--active:hover {
    background: #d9fdd3 !important;
    border-color: #15603e !important;
    color: #15603e !important;
    box-shadow: 0 0 0 1px rgba(21, 96, 62, 0.06) !important;
  }
}

/* Aceleres 2026-07-17: identidade própria do compositor de nota interna.
   Diferencia claramente a ação privada do envio verde ao cliente. */
div.reply-box.is-private {
  grid-template-rows: auto auto !important;
  background: #fffdf7 !important;
  border-color: #e0ae38 !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 4px rgba(146, 100, 10, 0.1) !important;
}

div.reply-box.is-private:hover,
div.reply-box.is-private:focus-within {
  border-color: #cc941d !important;
  box-shadow: 0 1px 6px rgba(146, 100, 10, 0.14) !important;
}

div.reply-box.is-private .right-wrap button[type="submit"].bg-n-amber-9 {
  background: #d39a20 !important;
  background-color: #d39a20 !important;
}

div.reply-box.is-private .left-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

/* Compatibilidad con el bundle anterior mientras el watcher publica la
   plantilla nueva: compacta el antiguo aviso externo en una sola línea. */
div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private) {
  min-height: 30px !important;
  margin: 0 10px -1px !important;
  padding: 4px 10px !important;
  gap: 6px !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: none !important;
}

div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private)
  > span:first-child {
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
}

div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private)
  > span:first-child
  span {
  width: 16px !important;
  height: 16px !important;
}

div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private)
  > span:nth-child(2) {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private)
  > span:nth-child(2)
  strong {
  font-size: 12px !important;
  line-height: 1 !important;
}

div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private)
  > span:nth-child(2)
  > span {
  font-size: 0 !important;
  line-height: 1 !important;
}

div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private)
  > span:nth-child(2)
  > span::after {
  content: '· Somente equipe';
  font-size: 11px;
}

div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private)
  > button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

div.mx-2.mb-2.flex.items-center.gap-3:has(+ div.reply-box.is-private)
  > button
  span {
  width: 18px !important;
  height: 18px !important;
}

div.reply-box .acl-internal-note-banner {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -1px 2px 3px;
  padding: 0 4px 6px;
  color: #79580d;
  font-size: 12px;
  line-height: 1;
  border-bottom: 1px solid rgba(204, 148, 29, 0.3);
}

div.reply-box .acl-internal-note-banner strong {
  font-weight: 700;
}

div.reply-box .acl-internal-note-team-only {
  color: #9a6e0e;
}

div.reply-box .acl-internal-note-team-only::before {
  content: '·';
  margin-right: 6px;
}

div.reply-box.is-private .reply-box__top,
div.reply-box.is-private .left-wrap,
div.reply-box.is-private .right-wrap {
  grid-row: 2 !important;
}

.dark div.reply-box.is-private {
  background: #2f291b !important;
  border-color: #8d681a !important;
}

.dark div.reply-box .acl-internal-note-banner {
  color: #f3cf72;
  border-bottom-color: rgba(243, 207, 114, 0.2);
}

.dark div.reply-box .acl-internal-note-team-only {
  color: #d9b85d;
}

/* Los tooltips del compositor se renderizan en body y deben quedar por
   encima del indicador de nota y de cualquier panel de la conversación. */
.v-popper__popper.v-popper--theme-tooltip {
  z-index: 2147483649 !important;
}

@media (max-width: 480px) {
  div.reply-box .acl-internal-note-banner {
    font-size: 11px;
  }
}

/* Aceleres 2026-07-17: oculta somente os lançadores redondos/flutuantes do
   Copilot em desktop e mobile. O Copilot interno do compositor permanece. */
.acl-copilot-launcher,
#acl-mobile-floating-copilot-btn,
.acl-copilot-sidepanel-switch,
.conversation-details-wrap > div.absolute:has(.i-woot-captain) {
  display: none !important;
}

[data-acl-copilot-launcher-hidden='1'] {
  display: none !important;
}

/* Recuperación directa del panel de mensajes destacados cuando el bundle
   activo conserva la API pero no monta el acceso del menú. */
.acl-direct-starred-panel {
  position: absolute;
  inset: 0;
  z-index: 220;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}

.acl-direct-starred-panel__header {
  display: flex;
  min-height: 64px;
  flex: 0 0 64px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #e5e7eb;
}

.acl-direct-starred-panel__header h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acl-direct-starred-panel__back {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #334155;
  cursor: pointer;
}

.acl-direct-starred-panel__back:hover {
  background: #f1f5f9;
}

.acl-direct-starred-panel__back span {
  width: 21px;
  height: 21px;
}

.acl-direct-starred-panel__search-wrap {
  display: flex;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  gap: 10px;
  margin: 12px 16px;
  padding: 0 14px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
}

.acl-direct-starred-panel__search-wrap > span {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.acl-direct-starred-panel__search {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #1f2937 !important;
  font-size: 14px;
  box-shadow: none !important;
}

.acl-direct-starred-panel__list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}

.acl-direct-starred-message {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 9px;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
}

.acl-direct-starred-message:hover {
  background: #f8fafc;
}

.acl-direct-starred-message__header,
.acl-direct-starred-message__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.acl-direct-starred-message__header strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acl-direct-starred-message__header time,
.acl-direct-starred-message__footer {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

.acl-direct-starred-message__preview {
  display: -webkit-box;
  overflow: hidden;
  padding: 10px 12px;
  border-radius: 10px;
  background: #e7f6ef;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.acl-direct-starred-message__footer {
  justify-content: flex-end;
}

.acl-direct-starred-message__footer span {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.acl-direct-starred-panel__empty {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  color: #64748b;
  text-align: center;
}

.acl-direct-starred-panel__empty > span {
  width: 30px;
  height: 30px;
}

.acl-direct-starred-panel__empty p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.acl-direct-starred-panel__empty.is-error {
  color: #b42318;
}

/* Aceleres 2026-07-17: el panel de ordenamiento comparte el mismo lenguaje
   visual que el panel de filtros: ancho, tarjetas, radios y sombras. */
#acl-pill-sort-popover.acl-pill-sort-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 254px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
}

#acl-pill-sort-popover .acl-pill-sort-item {
  width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #343a40 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#acl-pill-sort-popover .acl-pill-sort-item:hover {
  border-color: #d7dce2 !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1) !important;
}

#acl-pill-sort-popover .acl-pill-sort-item--active {
  border-color: #b8d8c3 !important;
  background: #f3faf5 !important;
  color: #27332b !important;
}

#acl-pill-sort-popover .acl-pill-sort-item__icon {
  width: 20px !important;
  height: 20px !important;
  color: #626c76 !important;
}

#acl-pill-sort-popover .acl-pill-sort-item__check {
  width: 18px !important;
  height: 18px !important;
  color: #15603e !important;
}

@media (min-width: 1024px) {
  #acl-pill-sort-popover.acl-pill-sort-menu {
    top: 170.771px !important;
    left: 524.802px !important;
    width: 420px !important;
    min-height: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #acl-pill-sort-popover.acl-pill-sort-menu {
    top: 245.562px !important;
    left: 70px !important;
    width: 388px !important;
    min-height: 0 !important;
  }
}

.dark #acl-pill-sort-popover.acl-pill-sort-menu {
  border-color: #2c2f33 !important;
  background: #1f2123 !important;
}

.dark #acl-pill-sort-popover .acl-pill-sort-item {
  border-color: #34383d !important;
  background: #202326 !important;
  color: #e5e5e5 !important;
}

.dark #acl-pill-sort-popover .acl-pill-sort-item:hover {
  border-color: #454a50 !important;
  background: #292d31 !important;
}

.dark #acl-pill-sort-popover .acl-pill-sort-item--active {
  border-color: #397554 !important;
  background: rgba(21, 96, 62, 0.28) !important;
  color: #f3f4f6 !important;
}

/* Mobile filter and sort controls. The dashboard runs at zoom:.8, so the
   runtime publishes a compensated anchor below the compact toolbar. */
@media (max-width: 767px) {
  /* O buscador usa toda a largura da coluna em todas as caixas mobile. */
  html.acl-mobile-chatlist-panel .acl-quick-search-wrap {
    min-height: 50px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Em Novos, busca + filtro + ordenação compartilham a mesma linha.
     A classe é aplicada pelo runtime apenas enquanto a aba Novos está ativa. */
  html.acl-mobile-chatlist-panel
    .acl-quick-search-wrap--with-mobile-actions {
    min-height: 50px !important;
    padding: 0 92px 0 0 !important;
    box-sizing: border-box !important;
  }

  html.acl-mobile-chatlist-panel
    .acl-quick-search-wrap--with-mobile-actions
    .acl-search-pill {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html.acl-mobile-chatlist-panel
    .acl-pill-actions.acl-pill-actions--mobile-toolbar.acl-pill-actions--mobile-search {
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html.acl-mobile-chatlist-panel
    .acl-pill-actions--mobile-search
    .acl-pill-action-btn {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 999px !important;
    color: #475569 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html.acl-mobile-chatlist-panel
    .acl-pill-actions--mobile-search
    .acl-pill-action-btn--active,
  html.acl-mobile-chatlist-panel
    .acl-pill-actions--mobile-search
    .acl-pill-action-btn--has-filters {
    border-color: rgba(21, 96, 62, 0.22) !important;
    color: #15603e !important;
    background: #eaf7ef !important;
  }

  html.acl-mobile-chatlist-panel
    .acl-pill-actions--mobile-search
    .acl-pill-action-btn:last-child
    > span {
    display: none !important;
  }

  html.acl-mobile-chatlist-panel
    .acl-pill-actions--mobile-search
    .acl-pill-action-btn:last-child::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: currentColor;
    -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%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3C/svg%3E");
    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%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  html.acl-mobile-chatlist-panel .acl-mobile-filter-actions-slot {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }

  html.acl-mobile-chatlist-panel .acl-mobile-filter-actions-slot[hidden] {
    display: none !important;
  }

  html.acl-mobile-chatlist-panel
    .acl-pill-actions.acl-pill-actions--mobile-toolbar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding-inline-start: 6px !important;
    border: 0 !important;
    background: #ffffff !important;
  }

  .acl-pill-filter-menu {
    position: fixed !important;
    inset: var(--acl-mobile-overlay-top, 210px) 15px auto auto !important;
    top: var(--acl-mobile-overlay-top, 210px) !important;
    right: 15px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(420px, var(--acl-mobile-overlay-width, calc(100vw - 24px))) !important;
    min-width: 0 !important;
    max-width: var(--acl-mobile-overlay-width, calc(100vw - 24px)) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
    box-sizing: border-box !important;
    transform-origin: top right !important;
    z-index: 2147482700 !important;
  }

  #acl-pill-sort-popover.acl-pill-sort-menu {
    position: fixed !important;
    inset: var(--acl-mobile-overlay-top, 210px) 15px auto auto !important;
    top: var(--acl-mobile-overlay-top, 210px) !important;
    right: 15px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(260px, var(--acl-mobile-overlay-width, calc(125vw - 30px))) !important;
    height: 204px !important;
    min-width: 0 !important;
    max-width: calc(125vw - 30px) !important;
    max-height: var(--acl-mobile-overlay-max-height, 52dvh) !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
    box-sizing: border-box !important;
    transform-origin: top right !important;
    z-index: 2147482700 !important;
    overscroll-behavior: contain !important;
  }

  .acl-pill-filter-menu .overflow-y-auto {
    max-height: 4rem !important;
  }

  #acl-pill-sort-popover .acl-pill-sort-item {
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  #acl-pill-sort-popover .acl-pill-sort-item__icon {
    width: 20px !important;
    height: 20px !important;
  }

  html.dark.acl-mobile-chatlist-panel
    .acl-pill-actions.acl-pill-actions--mobile-toolbar,
  html.acl-mobile-chatlist-panel.dark
    .acl-pill-actions.acl-pill-actions--mobile-toolbar {
    background: #111315 !important;
  }

  .dark .acl-pill-filter-menu,
  .dark #acl-pill-sort-popover.acl-pill-sort-menu {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: #1f2123 !important;
  }
}

/* Aceleres 2026-07-17: snackbar global estilo WhatsApp. Todas las
   confirmaciones usan la misma cápsula en la esquina inferior izquierda. */
.acl-snackbar-container,
div[popover='manual'][class*='top-4'][class*='left-1/2'] {
  position: fixed !important;
  inset: auto auto 24px 24px !important;
  width: auto !important;
  max-width: calc(100vw - 48px) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  text-align: left !important;
  transform: none !important;
  z-index: 2147483600 !important;
}

.acl-snackbar-container::backdrop {
  background: transparent !important;
}

.acl-snackbar-container > div,
div[popover='manual'][class*='top-4'][class*='left-1/2'] > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.acl-snackbar-entry {
  margin: 0;
}

.acl-whatsapp-snackbar,
div[popover='manual'][class*='top-4'][class*='left-1/2']
  > div
  > div
  > div {
  width: max-content !important;
  min-width: 320px !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 8px 10px 8px 18px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #202321 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important;
  text-align: left !important;
}

.acl-whatsapp-snackbar__icon {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px;
  color: #f5f7f6 !important;
}

/* Icono de compatibilidad para el bundle anterior. */
div[popover='manual'][class*='top-4'][class*='left-1/2']
  > div
  > div
  > div::before {
  content: '✓';
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #f5f7f6;
  border-radius: 999px;
  color: #f5f7f6;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.acl-whatsapp-snackbar__message,
div[popover='manual'][class*='top-4'][class*='left-1/2']
  > div
  > div
  > div
  > div:first-of-type {
  min-width: 0;
  flex: 1 1 auto;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.acl-whatsapp-snackbar__action-wrap {
  flex: 0 0 auto;
}

.acl-whatsapp-snackbar__action,
div[popover='manual'][class*='top-4'][class*='left-1/2']
  > div
  > div
  > div
  > div:last-child:not(:first-child)
  a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: #131614;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
}

.acl-whatsapp-snackbar__action:hover {
  background: #0b0d0c;
}

@media (max-width: 767px) {
  .acl-snackbar-container,
  div[popover='manual'][class*='top-4'][class*='left-1/2'] {
    inset: auto 12px calc(78px + env(safe-area-inset-bottom, 0px)) 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  .acl-whatsapp-snackbar,
  div[popover='manual'][class*='top-4'][class*='left-1/2']
    > div
    > div
    > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Aceleres mobile audio recorder — WhatsApp phone layout.
   AudioRecorder now renders .acl-wa-recorder--conversation; the older mobile
   rules still looked for its retired .w-full.p-1 wrapper and squeezed the
   recorder into the editor column. In recording mode the composer becomes a
   full-width tray: time/wave above, then trash, pause/resume and send. */
@media (max-width: 767px) {
  .acl-whatsapp-mobile-scope
    div.reply-box:has(.acl-wa-recorder--conversation) {
    width: 100% !important;
    min-height: 142px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -1px 5px rgba(15, 23, 42, 0.07) !important;
    overflow: hidden !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.acl-wa-recorder--conversation)::before {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.acl-wa-recorder--conversation)
    .reply-box__top {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 142px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 14px 12px
      calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-recorder-main {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 106px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 50px !important;
    grid-template-rows: 44px 50px !important;
    grid-template-areas:
      'audio audio audio'
      'trash pause send' !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
    align-items: center !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-recorder-main
    > * {
    order: 0 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-audio-center {
    grid-area: audio !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas: 'time wave' !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-time {
    grid-area: time !important;
    order: 0 !important;
    min-width: 0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #111111 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-wave {
    grid-area: wave !important;
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-canvas {
    width: 100% !important;
    height: 34px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-rec-dot {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-icon-btn:not(.acl-wa-playpause) {
    grid-area: trash !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    justify-self: start !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #ffe8ee !important;
    color: #d7003f !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-icon-btn:not(.acl-wa-playpause)
    svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.6 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-icon-btn:not(.acl-wa-playpause)::before {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-playpause {
    grid-area: pause !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    justify-self: stretch !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #f2f2f2 !important;
    color: #111111 !important;
    transform: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation:not(.is-paused)
    .acl-wa-playpause::after {
    content: 'Pausar';
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: #111111;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-playpause
    svg {
    width: 22px !important;
    height: 22px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation:not(.is-paused)
    .acl-tip-wrapper {
    grid-area: pause !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation.is-paused
    .acl-wa-playpause {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation.is-paused
    .acl-tip-wrapper {
    grid-area: pause !important;
    width: 100% !important;
    height: 50px !important;
    visibility: visible !important;
    pointer-events: auto !important;
    justify-self: stretch !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation.is-paused
    .acl-wa-mic-resume {
    width: 100% !important;
    height: 50px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #f2f2f2 !important;
    color: #111111 !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation.is-paused
    .acl-wa-mic-resume
    svg {
    width: 22px !important;
    height: 22px !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation.is-paused
    .acl-wa-mic-resume::after {
    content: 'Continuar';
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: #111111;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-tip-wrapper::after {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-send {
    grid-area: send !important;
    position: static !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    justify-self: end !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-send
    svg {
    width: 25px !important;
    height: 25px !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box:has(.acl-wa-recorder--conversation),
  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation {
    background: #202c33 !important;
  }

  .dark
    .acl-whatsapp-mobile-scope
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-time {
    color: #e9edef !important;
  }
}

/* Desktop audio recorder: the conversation variant is a phone layout in the
   component itself. Restore the previous single-row WhatsApp Web recorder on
   larger viewports while keeping the mobile tray above untouched. */
@media (min-width: 769px) {
  div.reply-box .acl-wa-recorder--conversation {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-recorder-main {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: 36px 8px 40px minmax(0, 1fr) 40px 42px !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-audio-center {
    display: contents !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-rec-dot {
    display: block !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-time {
    min-width: 40px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0a0a0a !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-wave {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-canvas {
    width: 100% !important;
    height: 28px !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-icon-btn:not(.acl-wa-playpause) {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    justify-self: auto !important;
    background: transparent !important;
    color: #54656f !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-icon-btn:not(.acl-wa-playpause):hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1f2c33 !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-playpause {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    justify-self: auto !important;
    background: transparent !important;
    color: #54656f !important;
    transform: none !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-playpause:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1f2c33 !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation.is-paused
    .acl-wa-playpause {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-playpause svg,
  div.reply-box .acl-wa-recorder--conversation .acl-wa-mic-resume svg {
    width: 24px !important;
    height: 24px !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-tip-wrapper {
    position: relative !important;
    justify-self: auto !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-mic-resume {
    width: 40px !important;
    height: 40px !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-send {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    justify-self: auto !important;
    background: #00a884 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    transform: none !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-send:hover {
    background: #069373 !important;
  }

  div.reply-box .acl-wa-recorder--conversation .acl-wa-send:active {
    transform: scale(0.94) !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-recorder-main
    > .acl-wa-icon-btn:not(.acl-wa-playpause) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-recorder-main
    > .acl-wa-rec-dot {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-audio-center
    > .acl-wa-time {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-audio-center
    > .acl-wa-wave {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-recorder-main
    > .acl-wa-playpause {
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-recorder-main
    > .acl-tip-wrapper {
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-recorder-main
    > .acl-wa-send {
    grid-column: 6 !important;
    grid-row: 1 !important;
  }

  .dark div.reply-box .acl-wa-recorder--conversation .acl-wa-time {
    color: #e9edef !important;
  }

  .dark
    div.reply-box
    .acl-wa-recorder--conversation
    .acl-wa-icon-btn {
    color: #aebac1 !important;
  }

  div.reply-box
    .right-wrap
    > button.wa-action-btn--mic {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
  }

  div.reply-box
    .right-wrap
    > button.wa-action-btn--mic
    > i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    line-height: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Conversation activity cards: one quiet, consistent treatment on desktop
   and mobile. Activity.vue already exposes Lucide icons in the compact row,
   so the public override can be served without rebuilding the frontend. */
.aceleres-activity-event,
.aceleres-activity-event.aceleres-activity-card {
  justify-content: center !important;
  padding: 5px 0 !important;
  margin: 0 !important;
}

.aceleres-activity-event .acl-activity-detail {
  display: none !important;
}

.aceleres-activity-event .acl-activity-mobile {
  display: flex !important;
  width: fit-content !important;
  max-width: min(calc(100% - 24px), 680px) !important;
  flex: 0 1 auto !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 9px 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  color: #475569 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.07),
    0 1px 2px rgba(15, 23, 42, 0.05) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.aceleres-activity-event .acl-activity-mobile__icon {
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  color: #64748b !important;
  background: transparent !important;
  opacity: 0.82 !important;
}

.aceleres-activity-event .acl-activity-mobile__icon > span {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.aceleres-activity-event .acl-activity-mobile__text {
  display: block !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  overflow: visible !important;
  color: #64748b !important;
  font-size: inherit !important;
  line-height: inherit !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
}

.aceleres-activity-event .acl-activity-mobile__time {
  flex: 0 0 auto !important;
  color: #8491a3 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.aceleres-activity-event .acl-activity-mobile__separator {
  flex: 0 0 auto !important;
  color: #8491a3 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.dark .aceleres-activity-event .acl-activity-mobile {
  color: #d1d7db !important;
  background: rgba(31, 44, 52, 0.95) !important;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.14) !important;
}

.dark .aceleres-activity-event .acl-activity-mobile__icon,
.dark .aceleres-activity-event .acl-activity-mobile__time,
.dark .aceleres-activity-event .acl-activity-mobile__separator {
  color: #9ca8b0 !important;
}

/* Group members modal: use the same solid overlay as the other dialogs and
   keep the content clean and white without backdrop blur. */
.modal-mask.contact-group-members-modal {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-mask.contact-group-members-modal .modal-container {
  width: min(656px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  height: min(760px, calc(100vh - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #fff !important;
}

.modal-mask.contact-group-members-modal
  .contact-group-members-modal__content {
  background: #fff !important;
  background-image: none !important;
}

@media (max-width: 640px) {
  .modal-mask.contact-group-members-modal {
    padding: 16px !important;
  }

  .modal-mask.contact-group-members-modal .modal-container {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    height: calc(100vh - 2rem) !important;
    max-height: calc(100vh - 2rem) !important;
    border-radius: 24px !important;
  }
}

/* Media gallery: keep the remove affordance visible even when the icon-mask
   utility is missing from the currently served Vite bundle. */
.aceleres-media-gallery__footer .group > button:last-child {
  z-index: 10 !important;
  display: inline-flex !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--color-n-background, #fff) !important;
  color: #fff !important;
  opacity: 1 !important;
}

.aceleres-media-gallery__footer .group > button:last-child > i {
  display: none !important;
}

.aceleres-media-gallery__footer .group > button:last-child::after {
  content: "\00d7";
  display: block;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 18px;
}

/* ===================================================================
   Jarvis desktop — card de sugestão isolado do composer em formato pill.
   As regras gerais de .reply-box reduzem o ProseMirror a uma única linha;
   este estado precisa de uma hierarquia própria (cabeçalho, resposta,
   instrução e ações) sem alterar o composer normal nem o layout mobile.
   =================================================================== */
@media (min-width: 769px) {
  /* Enquanto Jarvis gera a resposta, mostra somente o estado de carregamento.
     O painel de ações fica oculto até existir uma sugestão para aceitar. */
  div.reply-box:has(.copilot-thinking) {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  div.reply-box:has(.copilot-thinking):hover,
  div.reply-box:has(.copilot-thinking):focus-within {
    border: 0 !important;
    box-shadow: none !important;
  }

  div.reply-box:has(.copilot-thinking) .reply-box__top {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  div.reply-box:has(.copilot-thinking) .copilot-thinking {
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  div.reply-box:has(.copilot-suggestion) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: stretch !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow:
      0 14px 34px rgba(15, 23, 42, 0.1),
      0 2px 6px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
  }

  div.reply-box:has(.copilot-suggestion):hover,
  div.reply-box:has(.copilot-suggestion):focus-within {
    border-color: rgba(15, 23, 42, 0.16) !important;
    box-shadow:
      0 16px 38px rgba(15, 23, 42, 0.12),
      0 2px 7px rgba(15, 23, 42, 0.06) !important;
  }

  div.reply-box:has(.copilot-suggestion) .reply-box__top {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  div.reply-box:has(.copilot-suggestion) .copilot-editor,
  div.reply-box:has(.copilot-suggestion) .copilot-suggestion {
    width: 100% !important;
    min-width: 0 !important;
  }

  div.reply-box:has(.copilot-suggestion) .editor--copilot {
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden !important;
  }

  div.reply-box:has(.copilot-suggestion) .editor--copilot:focus-within {
    border-color: rgba(0, 168, 132, 0.68) !important;
    box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.1) !important;
  }

  div.reply-box:has(.copilot-suggestion)
    .editor--copilot
    .ProseMirror-menubar-wrapper,
  div.reply-box:has(.copilot-suggestion) .editor--copilot .editor-wrap {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  div.reply-box:has(.copilot-suggestion) .editor--copilot .ProseMirror {
    min-height: 84px !important;
    max-height: 120px !important;
    height: auto !important;
    padding: 12px 48px 12px 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }

  div.reply-box:has(.copilot-suggestion)
    .editor--copilot
    .ProseMirror
    p.empty-node:first-child::before {
    color: #94a3b8 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  div.reply-box:has(.copilot-suggestion) > .copilot-reply-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dark div.reply-box:has(.copilot-suggestion) {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: #1f2937 !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.28),
      0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }

  .dark div.reply-box:has(.copilot-suggestion) .editor--copilot {
    border-color: #475569 !important;
    background: #111827 !important;
  }

  .dark div.reply-box:has(.copilot-suggestion)
    .editor--copilot
    .ProseMirror {
    color: #f1f5f9 !important;
  }
}

/* Desktop composer: keep the send and microphone actions slightly away from
   the right edge without changing their pressed-state transforms. */
@media (min-width: 768px) {
  .conversation-details-wrap.chat-whats:not(.acl-whatsapp-mobile-scope)
    div.reply-box
    .right-wrap
    > .wa-action-btn--send,
  .conversation-details-wrap.chat-whats:not(.acl-whatsapp-mobile-scope)
    div.reply-box
    .right-wrap
    > button.wa-action-btn--mic {
    margin-right: 6px !important;
  }
}

/* Desktop emoji picker: the picker lives inside the text grid column, while
   its trigger is the last action in the left column. Pull it back over that
   trigger so opening it feels attached to the button. Mobile keeps its
   full-width bottom-sheet positioning. */
@media (min-width: 769px) {
  .conversation-details-wrap.chat-whats:not(.acl-whatsapp-mobile-scope)
    div.reply-box
    .aceleres-emoji-picker-card.acl-inline-picker {
    left: -44px !important;
    right: auto !important;
    transform: none !important;
  }
}

/* Conversation-scoped file drop target. The upload component teleports this
   layer into the active chat instead of dimming the entire dashboard. */
.conversation-details-wrap.chat-whats .acl-conversation-drop-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 190 !important;
  display: flex;
  padding: 20px !important;
  pointer-events: none !important;
  color: #1f2937 !important;
  background: rgba(247, 248, 250, 0.94) !important;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.conversation-details-wrap.chat-whats
  .acl-conversation-drop-overlay--gallery {
  z-index: 210 !important;
}

.conversation-details-wrap.chat-whats
  .acl-conversation-drop-overlay--persistent {
  z-index: 210 !important;
}

.conversation-details-wrap.chat-whats
  .acl-conversation-drop-overlay__frame {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border: 2px dashed #1f2937 !important;
  border-radius: 28px !important;
}

.conversation-details-wrap.chat-whats
  .acl-conversation-drop-overlay__icon {
  width: 40px !important;
  height: 40px !important;
}

.conversation-details-wrap.chat-whats
  .acl-conversation-drop-overlay__title {
  margin: 0 !important;
  padding: 0 16px !important;
  color: inherit !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

.dark .conversation-details-wrap.chat-whats .acl-conversation-drop-overlay {
  color: #f8fafc !important;
  background: rgba(17, 24, 39, 0.94) !important;
}

.dark
  .conversation-details-wrap.chat-whats
  .acl-conversation-drop-overlay__frame {
  border-color: #f8fafc !important;
}

/* WhatsApp-style video and GIF bubbles: stable media canvas, centered play
   affordance and metadata over the preview instead of a separate white strip. */
.message-bubble-container
  :is([data-bubble-name='video'], [data-bubble-name='gif']) {
  padding: 4px !important;
  padding-bottom: 4px !important;
  cursor: pointer;
}

.message-bubble-container
  :is([data-bubble-name='video'], [data-bubble-name='gif'])
  > div[class~='pr-12'] {
  margin-bottom: 0 !important;
  padding-right: 0 !important;
}

.message-bubble-container
  :is([data-bubble-name='video'], [data-bubble-name='gif'])
  > .text-\[13px\].font-bold {
  margin: 4px 6px 6px !important;
}

.message-bubble-container
  :is([data-bubble-name='video'], [data-bubble-name='gif'])
  > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
  right: 9px !important;
  bottom: 9px !important;
  z-index: 6 !important;
  gap: 3px !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.38) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

.message-bubble-container
  .acl-video-bubble--playing
  > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
  opacity: 0 !important;
}

/* Pedido 2026-08-12: `:not(.acl-video-bubble__player--gif)` tira o GIF desta
   regra. Ela é a tela padrão do VÍDEO (largura fixa de 34vw, `aspect-ratio:
   auto`), e como vem em !important vencia o `width`/`aspect-ratio` que o
   componente escreve inline no GIF — todo GIF acabava com a mesma largura de
   vídeo e tarja preta dos lados. Era esta a regra, genérica e sem "gif" no
   seletor, que sobrevivia a cada tentativa de arrumar o tamanho do GIF. */
.acl-video-bubble__player:not(.acl-video-bubble__player--gif),
.acl-media-chip--video {
  position: relative !important;
  display: flex !important;
  aspect-ratio: auto !important;
  width: min(360px, 34vw) !important;
  max-width: 100% !important;
  max-height: min(480px, 62vh) !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #111 !important;
}

.acl-video-bubble--reel .acl-video-bubble__player {
  width: min(240px, 28vw) !important;
}

.message-bubble-container .acl-video-bubble__asset,
.message-bubble-container .acl-media-chip--video .acl-media-chip__asset {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(480px, 62vh) !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: #111 !important;
}

.acl-video-bubble--reel .acl-video-bubble__asset {
  object-fit: contain !important;
}

.acl-video-bubble__play,
.acl-video-chip__play {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.acl-video-bubble__play-circle {
  display: inline-flex !important;
  width: 52px !important;
  height: 52px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(17, 24, 39, 0.58) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
  transition: background-color 120ms ease, transform 120ms ease !important;
}

.acl-video-bubble__play:hover .acl-video-bubble__play-circle,
.acl-video-chip__play:hover .acl-video-bubble__play-circle {
  background: rgba(17, 24, 39, 0.72) !important;
  transform: scale(1.04);
}

.acl-video-bubble__duration {
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

@media (max-width: 767px) {
  /* Mesma exclusão do GIF que a regra de desktop acima: aqui o teto de
     52dvh cortava a caixa-alvo do GIF vertical e devolvia tarja. */
  .acl-whatsapp-mobile-scope
    .acl-video-bubble__player:not(.acl-video-bubble__player--gif),
  .acl-whatsapp-mobile-scope .acl-media-chip--video {
    width: min(82vw, 360px) !important;
    max-height: 52dvh !important;
    border-radius: 7px !important;
  }

  .acl-whatsapp-mobile-scope
    .acl-video-bubble__player:not(.acl-video-bubble__player--gif)
    .acl-video-bubble__asset,
  .acl-whatsapp-mobile-scope
    .acl-media-chip--video
    .acl-media-chip__asset {
    max-height: 52dvh !important;
    object-fit: contain !important;
  }

  .acl-whatsapp-mobile-scope
    .acl-video-bubble--reel
    .acl-video-bubble__player {
    width: min(64vw, 260px) !important;
  }

  .acl-whatsapp-mobile-scope .acl-video-bubble__play-circle {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ===================================================================
   Mensagens de áudio — composição WhatsApp em desktop e mobile.
   Enviado: avatar à esquerda. Recebido: avatar à direita. Encaminhado:
   círculo coral com microfone e rótulo dentro do próprio card.
   =================================================================== */
[data-bubble-name='audio'] {
  position: relative !important;
}

/* O áudio recebido usa uma superfície interna transparente no BaseBubble;
   portanto a ponta precisa ficar na própria tarjeta branca, como no WhatsApp. */
.message-bubble-container .left-bubble .acl-wa-audio--incoming {
  position: relative !important;
  overflow: visible !important;
  border-top-left-radius: 0 !important;
}

.message-bubble-container .left-bubble .acl-wa-audio--incoming::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  width: 24px !important;
  height: 12px !important;
  left: -12px !important;
  top: 0 !important;
  background-color: #fff !important;
  pointer-events: none !important;
  clip-path: polygon(100% 0, 50% 100%, 0 12%, 0 0) !important;
}

.acl-wa-audio {
  width: 400px !important;
  min-width: 360px !important;
  max-width: 430px !important;
  padding: 9px 11px 8px !important;
  border-radius: 11px !important;
  box-sizing: border-box !important;
}

/* A prévia de áudio no painel de informações tem um card menor que as
   mensagens da conversa. Esta exceção precisa permanecer aqui porque as
   dimensões padrão acima usam !important. */
.aceleres-message-info-bubble.has-audio .acl-wa-audio {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.aceleres-message-info-bubble.has-audio .acl-wa-audio__row {
  max-width: 100% !important;
  min-width: 0 !important;
}

.aceleres-message-info-bubble.has-audio .acl-wa-audio__column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.aceleres-message-info-bubble.has-audio .acl-wa-audio__waveform {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Compatibilidade com o bundle anterior: remove o nome do agente que ainda
   pode ser injetado como primeiro filho antes da linha do player. */
.acl-wa-audio > div:first-child:not(.acl-wa-audio__row) {
  display: none !important;
}

.acl-wa-audio__row {
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 9px !important;
}

.right-bubble .acl-wa-audio__row > .aceleres-audio-avatar-wrap {
  order: -1 !important;
}

.acl-wa-audio__play {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
  color: #111827 !important;
  background: transparent !important;
}

.acl-wa-audio__play > * {
  width: 24px !important;
  height: 24px !important;
}

.acl-wa-audio__play.is-playing > *,
.acl-wa-audio__play.is-paused > * {
  display: none !important;
}

.acl-wa-audio__play.is-paused::before {
  content: '' !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 2px !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 11px solid currentColor !important;
}

.acl-wa-audio__play.is-playing::before {
  content: '' !important;
  width: 11px !important;
  height: 14px !important;
  background: linear-gradient(
    to right,
    currentColor 0 4px,
    transparent 4px 7px,
    currentColor 7px 11px
  ) !important;
}

.acl-wa-audio__column {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.acl-wa-audio__waveform {
  height: 30px !important;
  gap: 2px !important;
}

.acl-wa-audio__bar {
  min-width: 2px !important;
  border-radius: 999px !important;
  background: rgba(71, 85, 105, 0.25) !important;
}

.acl-wa-audio__bar.is-played {
  background: #53bdeb !important;
}

.acl-wa-audio__playhead {
  width: 12px !important;
  height: 12px !important;
  margin-left: -6px !important;
  background: #53bdeb !important;
  box-shadow: none !important;
}

/* Áudio enviado normalmente: trilha pontilhada como na referência. */
.right-bubble[data-bubble-name='audio']:not(:has(.acl-forwarded-label))
  .acl-wa-audio__waveform,
.acl-wa-audio--dotted .acl-wa-audio__waveform {
  gap: 3px !important;
}

.right-bubble[data-bubble-name='audio']:not(:has(.acl-forwarded-label))
  .acl-wa-audio__bar,
.acl-wa-audio--dotted .acl-wa-audio__bar {
  height: 3px !important;
  min-width: 3px !important;
  border-radius: 999px !important;
  background: rgba(74, 124, 86, 0.28) !important;
}

.right-bubble[data-bubble-name='audio']:not(:has(.acl-forwarded-label))
  .acl-wa-audio__bar.is-played,
.acl-wa-audio--dotted .acl-wa-audio__bar.is-played {
  background: #53bdeb !important;
}

.acl-wa-audio__meta {
  width: 100% !important;
  min-width: 0 !important;
  padding: 3px 0 0 !important;
  color: rgba(71, 85, 105, 0.78) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

/* Alinhamento equivalente enquanto o bundle anterior ainda mantém o meta
   fora da coluna central. */
.right-bubble .acl-wa-audio > .acl-wa-audio__meta {
  padding-left: 108px !important;
}

.left-bubble .acl-wa-audio > .acl-wa-audio__meta {
  padding-right: 67px !important;
  padding-left: 41px !important;
}

.aceleres-audio-avatar-wrap {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  flex: 0 0 58px !important;
  overflow: visible !important;
}

.aceleres-audio-avatar-wrap > div:first-child,
.aceleres-audio-avatar-wrap > span:first-child:not(.aceleres-audio-mic-icon) {
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
}

.right-bubble[data-bubble-name='audio']:not(:has(.acl-forwarded-label))
  .aceleres-audio-avatar-wrap {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  flex-basis: 64px !important;
}

.right-bubble[data-bubble-name='audio']:not(:has(.acl-forwarded-label))
  .aceleres-audio-avatar-wrap
  > div:first-child,
.right-bubble[data-bubble-name='audio']:not(:has(.acl-forwarded-label))
  .aceleres-audio-avatar-wrap
  > span:first-child:not(.aceleres-audio-mic-icon) {
  width: 64px !important;
  height: 64px !important;
}

.aceleres-audio-mic-icon {
  bottom: -1px !important;
  display: inline-flex !important;
  width: 22px !important;
  height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #00a884 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16) !important;
  box-sizing: border-box !important;
}

.right-bubble .aceleres-audio-mic-icon {
  right: -2px !important;
  left: auto !important;
}

.left-bubble .aceleres-audio-mic-icon {
  right: auto !important;
  left: -2px !important;
  background: #53bdeb !important;
}

.aceleres-audio-mic-icon :is(svg, span) {
  width: 13px !important;
  height: 13px !important;
}

.aceleres-audio-voice-avatar {
  display: inline-flex !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  flex: 0 0 58px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #ff5e3a !important;
}

.aceleres-audio-voice-avatar :is(svg, span) {
  width: 25px !important;
  height: 25px !important;
}

/* Aparência de encaminhado no bundle novo e fallback para o markup anterior. */
[data-bubble-name='audio']:has(.acl-forwarded-label)
  .acl-forwarded-label {
  position: absolute !important;
  z-index: 3 !important;
  top: 7px !important;
  left: 12px !important;
  margin: 0 !important;
  color: rgba(71, 85, 105, 0.82) !important;
  font-size: 12px !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

[data-bubble-name='audio']:has(.acl-forwarded-label) .acl-wa-audio {
  padding-top: 30px !important;
}

.right-bubble[data-bubble-name='audio']:has(.acl-forwarded-label)
  .aceleres-audio-avatar-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #ff5e3a !important;
}

.right-bubble[data-bubble-name='audio']:has(.acl-forwarded-label)
  .aceleres-audio-avatar-wrap
  > * {
  display: none !important;
}

.right-bubble[data-bubble-name='audio']:has(.acl-forwarded-label)
  .aceleres-audio-avatar-wrap::before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background: #ffffff;
  -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%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E");
  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%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (max-width: 767px) {
  .acl-whatsapp-mobile-scope .acl-wa-audio {
    width: min(88vw, 390px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 9px 7px !important;
  }

  .acl-whatsapp-mobile-scope
    [data-bubble-name='audio']:has(.acl-forwarded-label)
    .acl-wa-audio {
    padding-top: 28px !important;
  }

  .acl-whatsapp-mobile-scope .aceleres-audio-avatar-wrap,
  .acl-whatsapp-mobile-scope .aceleres-audio-voice-avatar {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex-basis: 54px !important;
  }

  .acl-whatsapp-mobile-scope
    .aceleres-audio-avatar-wrap
    > div:first-child,
  .acl-whatsapp-mobile-scope
    .aceleres-audio-avatar-wrap
    > span:first-child:not(.aceleres-audio-mic-icon) {
    width: 54px !important;
    height: 54px !important;
  }

  .acl-whatsapp-mobile-scope .acl-wa-audio__row {
    gap: 7px !important;
  }

  .acl-whatsapp-mobile-scope .acl-wa-audio__play {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    flex-basis: 30px !important;
  }

  .acl-whatsapp-mobile-scope .right-bubble .acl-wa-audio > .acl-wa-audio__meta {
    padding-left: 98px !important;
  }

  .acl-whatsapp-mobile-scope .left-bubble .acl-wa-audio > .acl-wa-audio__meta {
    padding-right: 61px !important;
    padding-left: 37px !important;
  }
}

/* Composer action alignment. Desktop keeps the circular action farther from
   the right edge; mobile relies on its grid column and must not receive the
   previous relative left shift. Apply the same geometry to send and mic so
   switching between them never moves the control. */
@media (min-width: 769px) {
  .conversation-details-wrap.chat-whats:not(.acl-whatsapp-mobile-scope)
    div.reply-box
    .right-wrap
    > .wa-action-btn--send,
  .conversation-details-wrap.chat-whats:not(.acl-whatsapp-mobile-scope)
    div.reply-box
    .right-wrap
    > button.wa-action-btn--mic {
    margin-right: 14px !important;
  }
}

@media (max-width: 767px) {
  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > .wa-action-btn--send,
  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > button.wa-action-btn--mic,
  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > button[type='submit'].bg-n-amber-9 {
    right: 0 !important;
    margin-left: 6px !important;
  }
}

/* Aceleres: o layout desktop deve manter a lista de conversas e o chat lado
   a lado mesmo quando a configuração de exibição está em modo expandido.
   O modo de tela única continua restrito ao mobile. */
@media (min-width: 768px) {
  .painel-atendimento .conversations-list-wrap.basis-full {
    display: flex !important;
    width: clamp(300px, 28vw, 420px) !important;
    min-width: 300px !important;
    max-width: 420px !important;
    flex: 0 0 clamp(300px, 28vw, 420px) !important;
  }

  .painel-atendimento
    .conversations-list-wrap.basis-full
    ~ .conversation-details-wrap {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0% !important;
  }
}

/* Aceleres: o painel de contato ancorado (largura fixa, espremendo a conversa)
   agora e responsabilidade do CSS scoped da ConversationSidebar.vue, em todas
   as larguras de desktop -- nao so >=1440px. O bloco que ficava aqui foi
   removido pra nao duplicar (e brigar com) aquelas regras. */

@media (min-width: 768px) {
  .conversation-details-wrap .acl-conversation-header__back {
    display: none !important;
  }
}

.contact-details-modal-container {
  box-shadow: none !important;
}

.modal-mask.contact-group-members-modal
  .contact-group-members-modal__member-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}

.modal-mask.contact-group-members-modal .contact-group-members-modal__header {
  height: auto !important;
  min-height: 0 !important;
  gap: 22px !important;
  padding: 0 !important;
}

.modal-mask.contact-group-members-modal
  .contact-group-members-modal__search.acl-search-pill {
  background: rgba(194, 189, 184, 0.15) !important;
}

.modal-mask.contact-group-members-modal
  .contact-group-members-modal__search.acl-search-pill
  .acl-search-pill__input,
.modal-mask.contact-group-members-modal
  .contact-group-members-modal__search.acl-search-pill
  .acl-search-pill__input:focus,
.modal-mask.contact-group-members-modal
  .contact-group-members-modal__search.acl-search-pill
  .acl-search-pill__input:focus-visible {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.modal-mask.contact-group-members-modal .contact-group-members-modal__close,
.modal-mask.contact-group-members-modal
  .contact-group-members-modal__close:hover,
.modal-mask.contact-group-members-modal
  .contact-group-members-modal__close:focus,
.modal-mask.contact-group-members-modal
  .contact-group-members-modal__close:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

.modal-mask.contact-group-members-modal
  .contact-group-members-modal__list {
  scrollbar-width: none !important;
}

.modal-mask.contact-group-members-modal
  .contact-group-members-modal__list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Aceleres: stickers received from WhatsApp arrive as image/webp attachments
   with wame_media_type=sticker. They must keep the transparent WhatsApp
   canvas instead of inheriting the white image bubble. */
.message-bubble-container .acl-sticker-bubble {
  box-sizing: border-box !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: min(190px, calc(100vw - 48px)) !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #111827 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message-bubble-container
  :is(.acl-sticker-bubble.left-bubble, .acl-sticker-bubble.right-bubble) {
  border-radius: 0 !important;
}

.message-bubble-container
  :is(.acl-sticker-bubble.left-bubble, .acl-sticker-bubble.right-bubble)::before {
  display: none !important;
  content: none !important;
}

.message-bubble-container .acl-sticker-bubble.right-bubble::after {
  display: none !important;
  content: none !important;
}

.message-bubble-container .acl-sticker-bubble > div.relative {
  display: flex !important;
  width: 190px !important;
  height: 190px !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.message-bubble-container .acl-sticker-bubble > div.relative > img {
  display: block !important;
  width: 190px !important;
  height: 190px !important;
  max-width: 190px !important;
  max-height: 190px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Aceleres: horario abaixo do sticker (nao mais sobreposto em cima da
   imagem) - 10px de espaco, fundo esverdeado sutil, texto cinza igual
   o resto das mensagens. Fica fora do quadro de 190x190 do sticker. */
.message-bubble-container .acl-sticker-bubble
  > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
  position: static !important;
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 10px !important;
  margin-inline-start: auto !important;
  z-index: 6 !important;
  gap: 3px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: #6b7280 !important;
  background: rgba(45, 130, 65, 0.12) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

/* GIFs que chegam como image/webp ou image/gif usam a mesma tela dos GIFs em
   vídeo, preservando a cauda normal da bolha. Pedido 2026-08-12: só a
   aparência ficou aqui — largura, altura e aspect-ratio saíram para o bloco
   único do fim do ficheiro (e para o estilo inline do componente). */
.message-bubble-container .acl-gif-bubble {
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.message-bubble-container .acl-gif-bubble > div.relative {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #111 !important;
}

.message-bubble-container .acl-gif-bubble > div.relative > img {
  display: block !important;
  object-fit: contain !important;
  background: #111 !important;
}

@media (max-width: 767px) {
  .message-bubble-container .acl-sticker-bubble {
    max-width: calc(100vw - 32px) !important;
  }

  .message-bubble-container .acl-sticker-bubble > div.relative > img {
    max-height: 42dvh !important;
  }

  /* Tamanho do GIF no mobile: ver o bloco único no fim do ficheiro. */
}

/* Aceleres: sticker continua com canvas transparente de WhatsApp (o fundo
   #111 usado como letterbox de vídeo virava um bloco preto ao passar o
   mouse). GIF saiu daqui em 2026-08-11 — pedido pra ele ter cartão e
   letterbox #111 iguais ao vídeo normal, ver comentário na primeira
   ocorrência destas regras (~linha 318). Também reduzimos o tamanho para
   que sticker não domine a conversação. */
.message-bubble-container .acl-sticker-bubble {
  max-width: min(180px, calc(100vw - 48px)) !important;
  background: transparent !important;
}

.message-bubble-container .acl-sticker-bubble > div.relative > img {
  max-width: 180px !important;
  max-height: min(180px, 30vh) !important;
  background: transparent !important;
}

/* Pedido 2026-08-12: sobrou só o letterbox. As medidas (fit-content, teto de
   344px e o `aspect-ratio: auto` que apagava a proporção inline) foram para o
   bloco único do fim do ficheiro. */
.message-bubble-container .acl-gif-bubble > div.relative,
.message-bubble-container
  [data-bubble-name='gif']
  .acl-video-bubble__player {
  background: #111 !important;
}

@media (max-width: 767px) {
  .message-bubble-container .acl-sticker-bubble {
    max-width: 180px !important;
  }

  .message-bubble-container .acl-sticker-bubble > div.relative > img {
    max-height: min(180px, 30dvh) !important;
  }

  /* Tamanho do GIF no mobile: ver o bloco único no fim do ficheiro. */
}

/* Late media guard: these declarations intentionally live after the legacy
   media rules above so nothing earlier in the cascade can win. GIF saiu
   deste guard em 2026-08-11 (pedido pra ter cartão/letterbox iguais ao
   vídeo, ver ~linha 318) — só sticker continua com o canvas transparente. */
.message-bubble-container
  :is([data-bubble-name='gif'], [data-bubble-name='sticker'])
  .group
  > div.absolute.inset-0,
.message-bubble-container
  :is([data-bubble-name='gif'], [data-bubble-name='sticker'])
  .group
  > div.absolute.right-2.bottom-2 {
  display: none !important;
}

.message-bubble-container .acl-sticker-bubble > div.relative,
.message-bubble-container .acl-sticker-bubble > div.relative > img {
  background: transparent !important;
}

.message-bubble-container .acl-gif-bubble > div.relative,
.message-bubble-container .acl-gif-bubble > div.relative > img,
.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__player, .acl-video-bubble__asset, video) {
  background: #111 !important;
}

.message-bubble-container .acl-sticker-bubble > div.relative > img {
  max-width: 180px !important;
  max-height: min(180px, 30vh) !important;
}

/* Pedido 2026-08-12: as medidas que estavam neste "late media guard" foram
   para o bloco único do fim do ficheiro; `object-fit: contain` continua sendo
   o único comportamento seguro (nunca `cover`, que cortaria texto do GIF). */
.message-bubble-container .acl-gif-bubble > div.relative > img,
.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__asset, video) {
  object-fit: contain !important;
}

@media (max-width: 767px) {
  .message-bubble-container .acl-sticker-bubble > div.relative > img {
    max-height: min(180px, 30dvh) !important;
  }

  /* Tamanho do GIF no mobile: ver o bloco único no fim do ficheiro. */
}
/* Final compact media sizing for the production Zoraxy conversation bundle. */
.message-bubble-container .acl-sticker-bubble > div.relative > img {
  width: auto !important;
  max-width: 240px !important;
  max-height: 240px !important;
}

/* Pedido 2026-08-12: este bloco só tinha medidas de GIF, todas movidas para o
   bloco único do fim do ficheiro. */

/* Keep the incoming WhatsApp tail inside the conversation column instead of
   letting the left edge clip it. Stickers intentionally stay flush because
   they have no bubble tail. */
.message-bubble-container .left-bubble:not(.acl-sticker-bubble) {
  margin-left: 12px !important;
}

/* Media messages carry their sender and time directly over the asset, like
   WhatsApp. Keep the timestamp readable without the dark rounded capsule. */
.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > .acl-media-sender {
  position: absolute !important;
  top: 8px !important;
  left: 9px !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
  height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2'] {
  z-index: 20 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2'] time {
  font-weight: 700 !important;
}

/* A metadada da mídia fica legível sobre a imagem sem criar uma faixa lateral. */
.message-bubble-container
  .right-bubble:is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2'] {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

/* Sender labels stay on the left inside both bubbles, as in the original
   WhatsApp layout. Outgoing bubbles get extra space above the name. */
.message-bubble-container .left-bubble > .acl-sender-name {
  padding-left: 0 !important;
  text-align: left !important;
}

.message-bubble-container .right-bubble > .acl-sender-name {
  padding-top: 10px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.message-bubble-container .right-bubble > .acl-media-sender {
  right: auto !important;
  left: 6px !important;
}

.message-bubble-container
  [data-bubble-name='attachment'].acl-file-bubble
  > .acl-sender-name {
  padding-top: 8px !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: 5px !important;
  text-align: left !important;
}

/* The media component samples the top and bottom of the asset so sender and
   timestamp remain black on light media and white on dark media. */
.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > .acl-media-sender {
  left: 6px !important;
  padding: 0 !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='gif'], [data-bubble-name='sticker'])[data-sender-tone='light']
  > .acl-media-sender {
  color: #111827 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='gif'], [data-bubble-name='sticker'])[data-sender-tone='dark']
  > .acl-media-sender {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

.message-bubble-container[data-attachment-type]
  :is([data-bubble-name='image'], [data-bubble-name='gif'], [data-bubble-name='sticker']):has(img)
  > div[class~='absolute'][class~='right-2'] {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])[data-time-tone='light']
  > div[class~='absolute'][class~='right-2'] {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])[data-time-tone='dark']
  > div[class~='absolute'][class~='right-2'] {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

/* Aceleres: horário (elemento <time>) sempre com a mesma cor, em qualquer
   tipo de bolha (texto, imagem, vídeo, gif, sticker, anexo). Fixando a cor
   direto no <time>, ela ganha por herança de qualquer regra acima que só
   define color no wrapper ancestral (.right-2) — inclusive da leitura
   clara/escura por pixel, que ficava inconsistente. */
.message-bubble-container time {
  color: rgb(0, 0, 0, .6) !important;
  text-shadow: none !important;
}

/* Aceleres: imagem e vídeo SEM legenda têm o horário sobreposto por cima da
   própria mídia — ali o preto da regra acima fica ilegível. Nesses casos o
   horário vai a branco, com sombra escura para continuar legível também
   sobre mídia clara. Havendo legenda, o horário cai na faixa de texto do
   balão e mantém o preto padrão, por isso o :not(:has(...)) testa
   exatamente o elemento de legenda que Image.vue/Video.vue só renderizam
   quando há texto. Figurinha fica de fora: continua no preto.
   GIF entrou junto (pedido 2026-08-10): ele também é mídia com o horário
   sobreposto, e no preto ficava ilegível por cima da animação. */
.message-bubble-container
  :is(
    [data-bubble-name='image'],
    [data-bubble-name='video'],
    [data-bubble-name='gif']
  ):not(
    :has(
        > div.min-w-0.break-words
          > :is(.acl-image-bubble__caption, .acl-video-bubble__caption)
      )
  )
  time {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check'],
.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check-check']:not([class~='text-[#7EB6FF]']) {
  color: #637960 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2']
  > span[class*='i-lucide-clock-'] {
  color: #637960 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2']
  > span[class~='text-[#7EB6FF]'] {
  color: #7eb6ff !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65)) !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > div[class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check']:not([class~='text-[#7EB6FF]']),
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > div[class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check-check']:not([class~='text-[#7EB6FF]']) {
  color: #637960 !important;
  filter: none !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > div[class~='absolute'][class~='right-2']
  > span[class*='i-lucide-clock-'] {
  color: #637960 !important;
  filter: none !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > div[class~='absolute'][class~='right-2']
  > span[class~='text-[#7EB6FF]'] {
  color: #7eb6ff !important;
  filter: none !important;
}

/* Aceleres: tick de enviado (1) e entregue (2, cinza) com a mesma cor em
   qualquer tipo de bolha — texto, arquivo, áudio (mídia acima já tem regra
   própria, mais específica, com a mesma cor). Lido (2 ticks azuis) não é
   tocado. */
.message-bubble-container
  [class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check'],
.message-bubble-container
  [class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check-check']:not([class~='text-[#7EB6FF]']) {
  color: #637960 !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  .aceleres-bubble-chevron {
  color: black !important;
  /* filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) !important; */
}

.aceleres-bubble-chevron {
  transform: translateX(8px);
  transition:
    opacity 0.12s,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.12s,
    filter 0.12s;
}

.aceleres-bubble-surface:hover .aceleres-bubble-chevron,
.aceleres-bubble-chevron:focus-visible {
  transform: translateX(0);
}

/* Pedido 2026-08-12: aqui vivia um `max-width: min(180px, ...)` para TODA
   foto. Era a razao mais direta de "algumas imagens ficam pequenas demais":
   qualquer foto era espremida em 180px de largura. Removido — o teto da foto
   depende do formato dela agora (bloco unico no fim do arquivo). */

.message-bubble-container .acl-sticker-bubble {
  width: min(190px, calc(100vw - 64px)) !important;
  max-width: 190px !important;
}

.message-bubble-container .acl-sticker-bubble > div.relative,
.message-bubble-container .acl-sticker-bubble > div.relative > img {
  width: min(190px, calc(100vw - 64px)) !important;
  height: 190px !important;
  max-width: 190px !important;
  max-height: 190px !important;
}

.message-bubble-container .acl-sticker-bubble > .acl-media-sender {
  top: 5px !important;
  left: 5px !important;
  max-width: calc(100% - 42px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

.message-bubble-container
  .acl-sticker-bubble
  > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
  right: 3px !important;
  bottom: 3px !important;
  text-shadow: none !important;
}

/* ======================= BLOCO ÚNICO DE TAMANHO DO GIF =======================
   Pedido 2026-08-12. Antes deste bloco havia SEIS blocos espalhados por este
   ficheiro repetindo as mesmas medidas de GIF em !important (fit-content,
   teto de 344px, `aspect-ratio: auto`), cada um a anular o anterior. Era essa
   duplicação a razão de o tamanho do GIF "voltar atrás" a cada ajuste: mexer
   num deles não mudava nada, porque outro, mais abaixo, redefinia tudo. Todos
   foram esvaziados; o que sobrou neles é só aparência (letterbox #111,
   moldura, border-radius). Este é o único lugar com medida.

   E medida aqui é só o TETO responsivo. O tamanho real de cada GIF é decidido
   pelo componente, em `gifFrameStyle` (mediaAspectLayout.js): ele mede a
   proporção do arquivo, escolhe a caixa-alvo do formato — vertical 320x420,
   quadrado 340x360, horizontal 420x310, panorâmico 420 de largura com altura
   livre — e escreve `width` + `aspect-ratio` inline no frame. Um GIF quadrado
   de 200x200 passa a ser desenhado a 340px, e não aos 200px naturais que o
   deixavam minúsculo ao lado de um vertical.

   Por isso NADA aqui pode declarar `width`, `height`, `max-height` ou
   `aspect-ratio` em !important sobre o frame: qualquer um deles ganha do
   estilo inline e devolve o bug. `max-width: 100%` é o que faz o responsive —
   numa tela estreita o frame encolhe com a bolha e a altura acompanha sozinha,
   pela proporção, sem deformar. */
/* Pedido 2026-08-12 (segunda passagem). Três coisas nesta regra:

   1. `100%` em vez de `calc(100vw - 32px)`. O teto era do VIEWPORT, e a área
      útil da conversa não é o ecrã: com o painel de contacto aberto (500px) o
      `100vw` prometia largura que a coluna não tinha e o GIF passava do limite
      direito. `100%` resolve contra `.acl-message-bubble-row`, a linha-limite
      de verdade — o row já reserva 32px do lado oposto (ml-8/mr-8) e o
      alinhamento (enviado à direita, recebido à esquerda) continua a ser dele,
      via `justify-end`.

   2. O teto conta a moldura: os 420px pedidos são da ANIMAÇÃO, e o frame
      desconta as duas bordas do que a bolha lhe dá. Com um teto de 420px na
      bolha, a mídia parava em 414px e nunca chegava aos 420.

   3. `[data-bubble-name='gif']` também no `.acl-gif-bubble`, e não só no
      `.acl-video-bubble`. Sem o atributo o seletor pesa (0,2,0) e perdia para
      uma regra genérica de bolha — `div.[grid-area:bubble] .left-bubble,
      .right-bubble { max-width: 100% }`, que pesa (0,2,1). Resultado: o GIF
      que chega como .gif ficava SEM teto de 420 e sem limite de coluna,
      enquanto o MP4 tratado como GIF — cujo seletor já trazia o atributo e
      pesa (0,3,0) — respeitava os dois. Era esta a razão de as duas formas do
      mesmo GIF divergirem outra vez.

   `width: fit-content` fica: é o que faz a bolha encolher até o GIF em vez de
   esticar pela linha toda. Quem decide a largura é o frame, em px, vindo do
   componente — a bolha só o acompanha. */
.message-bubble-container [data-bubble-name='gif'].acl-gif-bubble,
.message-bubble-container [data-bubble-name='gif'].acl-video-bubble {
  width: fit-content !important;
  max-width: min(
    calc(420px + var(--acl-gif-frame-border) * 2),
    100%
  ) !important;
}

/* O wrapper `div.min-w-0.break-words` do Base.vue precisa acompanhar a
   largura da bolha. Sem isto, ele é um item flex dimensionado pelo conteúdo:
   numa tela estreita a bolha travava nos 358px do teto, mas o wrapper ficava
   com os 420px do frame, e o `max-width: 100%` do frame — que resolve contra
   o wrapper — não travava nada. Resultado: o GIF furava a bolha no mobile.
   Com o wrapper em 100%, a porcentagem passa a resolver contra a largura real
   da bolha e o frame encolhe na proporção certa. */
.message-bubble-container .acl-gif-bubble > div.min-w-0,
.message-bubble-container
  [data-bubble-name='gif'].acl-video-bubble
  > div.min-w-0 {
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Descendente, não filho: entre a bolha e o frame existe o wrapper
   `div.min-w-0.break-words` do Base.vue, então `>` nunca casava com o GIF que
   chega como imagem (.gif de verdade). */
/* `content-box` por causa da moldura de 3px: com `border-box` o `width` e o
   `aspect-ratio` inline valiam para a caixa COM a moldura, então a área
   interna sobrava com outra proporção e o `object-fit: contain` devolvia tarja
   #111 nas laterais — visível sobretudo no GIF panorâmico. Com `content-box` a
   proporção inline é a da área da animação, e a moldura fica por fora. Daí o
   `calc(100% - 6px)`: os 3px de cada lado deixam de caber dentro do teto. */
.message-bubble-container .acl-gif-bubble div.relative,
.message-bubble-container
  [data-bubble-name='gif']
  .acl-video-bubble__player {
  box-sizing: content-box !important;
  max-width: calc(100% - var(--acl-gif-frame-border) * 2) !important;
  /* Cantos arredondados nas quatro pontas. Estavam a vir de dois lugares que
     hoje nao chegam ao GIF: a regra generica do player de video, de onde o GIF
     saiu com `:not(.acl-video-bubble__player--gif)` — e o raio vinha junto —, e
     `.acl-gif-bubble > div.relative`, que usa o combinador de filho e nunca
     casa (entre a bolha e o frame ha o wrapper `div.min-w-0.break-words`).
     Resultado: o MP4 tratado como GIF ficava com as pontas em esquadria. Aqui
     vale para as duas formas, e como o frame tem `overflow: hidden` a animacao
     e a moldura sao recortadas com ele. */
  border-radius: var(--acl-gif-frame-radius) !important;
  overflow: hidden !important;
}

/* `contain` sempre, nunca `cover`: GIF costuma trazer texto, e cortar a borda
   come palavra. Como o frame já tem a proporção exata do arquivo, preencher
   com `contain` não cria tarja. */
.message-bubble-container .acl-gif-bubble div.relative > img,
.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__asset, video) {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
/* ===================== FIM DO BLOCO ÚNICO DE TAMANHO ====================== */

/* WhatsApp document cards: a PDF thumbnail above the compact file row,
   white for incoming and pale green for outgoing messages. */
.message-bubble-container
  [data-bubble-name='attachment'].acl-file-bubble {
  width: min(420px, calc(100vw - 48px)) !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
}

.message-bubble-container .acl-file-bubble__preview {
  height: 118px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
}

.message-bubble-container .acl-file-bubble__preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
}

.message-bubble-container .acl-file-bubble__preview + .acl-file-bubble__body {
  padding: 11px 12px 11px 12px !important;
}

.message-bubble-container .acl-file-bubble__icon {
  width: 36px !important;
  height: 42px !important;
  flex-basis: 36px !important;
}

.message-bubble-container .acl-file-bubble__icon > * {
  width: 31px !important;
  height: 36px !important;
}

.message-bubble-container .acl-file-bubble__info {
  font-size: 11px !important;
}

@media (max-width: 767px) {
  .message-bubble-container
    [data-bubble-name='attachment'].acl-file-bubble {
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: min(420px, calc(100vw - 32px)) !important;
  }
}

/* Final picker sizing override: kept at the end of this legacy stylesheet so
   no older emoji-rule can reduce the GIF library again. */
@media (min-width: 768px) {
  div.reply-box .aceleres-emoji-picker-card.acl-inline-picker {
    width: min(440px, calc(100vw - 32px)) !important;
    height: min(420px, calc(100vh - 120px)) !important;
    max-height: min(420px, calc(100vh - 120px)) !important;
  }
}

@media (max-width: 767px) {
  div.reply-box .aceleres-emoji-picker-card.acl-inline-picker {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(68dvh, 520px) !important;
    max-height: min(68dvh, 520px) !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

/* Pedido 2026-08-12: este bloco tinha seis regras de tamanho da foto e foi
   removido inteiro.
   - a da bolha e a do <img> viraram o bloco unico do fim do arquivo;
   - a de `> div.relative` era seletor morto;
   - as tres de `--vertical` / `--extreme-vertical` fixavam `width: 100%` com
     `height: 344px` (a receita da imagem esticada) e nunca chegaram a rodar:
     nenhuma dessas classes e gerada — nem pelo Vue, nem pelos scripts de
     public/ — e a ultima delas ainda mudava o tamanho conforme a legenda,
     o oposto do pedido. */

.message-bubble-container [data-bubble-name='image-album'] {
  width: 420px !important;
  max-width: calc(100vw - 48px) !important;
}

.message-bubble-container
  .acl-image-bubble:not(
    :has(> div.min-w-0.break-words > .acl-image-bubble__caption)
  )
  > div.min-w-0.break-words > .acl-image-bubble__asset-frame::after,
.message-bubble-container
  :is([data-bubble-name='video'], [data-bubble-name='gif'])
  > div.min-w-0.break-words > .acl-video-bubble__player::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: block;
  height: min(44px, 100%);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  content: '';
  pointer-events: none;
}

@media (max-width: 767px) {
  /* So o album. A foto tem o teto de mobile dela no bloco unico do fim do
     arquivo — eram dois valores diferentes (32px e 72px de folga) para a
     mesma coisa. */
  .message-bubble-container [data-bubble-name='image-album'] {
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* O nome do remetente fica acima do vídeo, fora da imagem, como nas fotos. */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > .acl-media-sender {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 5px !important;
  overflow: visible !important;
  color: #000000 !important;
  background: transparent !important;
  font-weight: 700 !important;
  line-height: 0.50rem !important;
  text-align: left !important;
  text-overflow: clip !important;
  text-shadow: none !important;
  white-space: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* O nome acima da galeria de imagens usa a mesma tipografia do nome acima
   do video, com mais respiro vertical acima e abaixo do texto. */
.message-bubble-container
  [data-bubble-name='image-album']
  > .acl-media-sender {
  padding: 13px 5px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  line-height: 0.5rem !important;
  color: #000000 !important;
}

/* O horario da galeria recebida fica abaixo do mosaico, como no WhatsApp,
   em vez de sobreposto por cima da ultima miniatura. */
.message-bubble-container
  .left-bubble[data-bubble-name='image-album']
  .acl-image-album__grid
  > div:last-child {
  position: static !important;
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding: 4px 2px 0 !important;
  color: #667781 !important;
  text-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* A primeira miniatura da galeria recuperou o canto arredondado superior
   esquerdo, que ficava reto por padrao pra casar com a bolha. */
.message-bubble-container
  [data-bubble-name='image-album']
  .acl-image-album__grid
  > div:first-child {
  border-top-left-radius: 6px !important;
}

.message-bubble-container [data-bubble-name='video'] .acl-video-bubble__asset {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble {
  border-top-left-radius: 0 !important;
}

/* Mantém visível a faixa verde inferior da bolha enviada, como nas imagens. */
.message-bubble-container
  .aceleres-bubble-surface
  .right-bubble[data-bubble-name='video'].acl-video-bubble {
  box-sizing: border-box !important;
  overflow: visible !important;
  padding-bottom: 6px !important;
  border-bottom: 0 !important;
  background: #d9fdd3 !important;
}

/* 420px e 344px sao TETO do vídeo, não a medida fixa: a bolha acompanha o
   tamanho real do arquivo, senão um vídeo pequeno era esticado e ficava
   grande demais na conversa (mesmo ajuste já feito nas fotos). */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble {
  box-sizing: border-box !important;
  position: relative !important;
  width: fit-content !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__player {
  width: fit-content !important;
  max-width: 420px !important;
  max-height: 344px !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__asset {
  width: auto !important;
  height: auto !important;
  max-width: 420px !important;
  max-height: 344px !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble:has(
    > div.min-w-0.break-words > .acl-video-bubble__caption
  )
  .acl-video-bubble__asset {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 344px !important;
  object-fit: contain !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__caption {
  padding-bottom: 1.5rem !important;
}

/* A duração e o horário permanecem juntos no rodapé da mídia. */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > div[class~='absolute'][class~='right-2'] {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: #fff !important;
  background: transparent !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__duration {
  bottom: 8px !important;
  z-index: 31 !important;
  color: #fff !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble:has(
    > div.min-w-0.break-words > .acl-video-bubble__caption
  )
  [class~='absolute'][class~='right-2'] time {
  color: rgb(0, 0, 0, .6) !important;
  text-shadow: none !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__caption
  .acl-message-caption
  p {
  display: inline !important;
  margin: 0 !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__caption
  > button,
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='image'].acl-image-bubble
  .acl-image-bubble__caption
  button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: inline !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  text-decoration: none !important;
  color: #1b8755 !important;
  font-weight: 700 !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='image'].acl-image-bubble
  .acl-image-bubble__caption
  > span {
  display: inline !important;
  width: auto !important;
  flex-wrap: nowrap !important;
  white-space: normal !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__caption
  > button {
  margin-inline-start: 0 !important;
}


/* ===================================================================
   Aceleres 2026-08-12: mídia com moldura (foto, vídeo e GIF) no mobile.

   Os tetos das regras acima — 408/420px de largura e 344px de altura — foram
   medidos no desktop. Num celular a mesma mídia, mais a moldura verde da
   bolha enviada, ocupava quase a tela toda: uma foto vertical sozinha empurrava
   a mensagem seguinte para fora da conversa.

   As medidas ficam em duas variáveis e cada seletor só as consome, para que a
   foto, o vídeo e o GIF encolham exatamente igual e o número exista uma vez só.
   O bloco vem no fim do arquivo de propósito: repete a mesma especificidade
   das regras de desktop do vídeo, e é a ordem que decide o desempate.
   =================================================================== */
@media (max-width: 767px) {
  .message-bubble-container {
    /* dvh, e não vh: no celular a barra do navegador entra e sai, e vh conta
       a tela inteira mesmo com a barra visível. */
    --acl-media-mobile-max-height: 46dvh;
    --acl-media-mobile-max-width: calc(100vw - 72px);
  }

  /* A foto saiu desta regra: o teto dela (desktop e mobile na mesma
     expressao) vive no bloco unico do fim do arquivo. Deixar aqui tambem
     seria a mesma medida em dois lugares — e este seletor, mais fraco,
     perderia sempre para o de la. */
  .message-bubble-container .acl-text-bubble--with-media,
  .message-bubble-container
    .aceleres-bubble-surface
    [data-bubble-name='video'].acl-video-bubble {
    max-width: var(--acl-media-mobile-max-width) !important;
  }

  /* Pedido 2026-08-12: o GIF sai em regra própria por dois motivos.
     Primeiro, as duas formas dele precisam do MESMO teto: o MP4 tratado como
     GIF monta a bolha com `.acl-video-bubble` e o .gif de verdade com
     `.acl-gif-bubble`, e só a primeira estava listada aqui — num telemóvel de
     380px o mesmo GIF quadrado saía com 302px vindo do WhatsApp e 340px vindo
     de um .gif. Segundo, o `min(420px, ...)`: entre 493px e 767px de largura
     (tablet em pé, que ainda cai neste @media) o `calc(100vw - 72px)` passava
     dos 420px e o GIF crescia acima do teto de desenho. */
  .message-bubble-container [data-bubble-name='gif'].acl-video-bubble,
  .message-bubble-container [data-bubble-name='gif'].acl-gif-bubble {
    /* `100%` fecha o limite da conversa, que a variável de mobile (baseada em
       100vw) não conhece; a variável fica para não deixar a mídia colar nas
       duas margens do telemóvel. Vence o menor dos três, e nenhum é o ecrã
       inteiro. O 420 leva a moldura junto pelo mesmo motivo da regra de
       desktop. */
    max-width: min(
      calc(420px + var(--acl-gif-frame-border) * 2),
      100%,
      var(--acl-media-mobile-max-width)
    ) !important;
  }

  /* Idem para a altura da foto: `min(344px, 46dvh)` ja carrega o caso do
     mobile e e escrito pelo componente. Aqui ficou so o video. */
  .message-bubble-container
    .aceleres-bubble-surface
    [data-bubble-name='video'].acl-video-bubble
    .acl-video-bubble__player,
  .message-bubble-container
    .aceleres-bubble-surface
    [data-bubble-name='video'].acl-video-bubble
    .acl-video-bubble__asset {
    max-height: var(--acl-media-mobile-max-height) !important;
  }

  /* O GIF não entra na regra de altura acima: o tamanho dele vem inline do
     componente (gifFrameStyle), com a proporção real do arquivo, e um teto de
     altura em !important cortaria a caixa e devolveria tarja preta. O teto de
     mobile dele é aplicado como largura, no próprio gifFrameStyle. */

  /* A moldura verde é proporcional à mídia: com a mídia menor, 4px de borda
     mais 6px de bolha viravam um quadro grosso demais em volta de uma foto
     pequena. */
  /* `[data-attachment-type='image']` no seletor nao e enfeite: sem ele esta
     regra pesa (0,3,0) e perde para a de 6px, que usa
     `[data-attachment-type='image'] [data-bubble-name='image']:has(img)` —
     a moldura continuava com 6px no telemovel. */
  .message-bubble-container[data-attachment-type='image']
    .acl-image-bubble:is(.left-bubble, .right-bubble) {
    padding: 4px !important;
  }

  .message-bubble-container .acl-image-bubble.right-bubble
    .acl-image-bubble__asset-frame {
    border-width: 2px !important;
  }

  /* Pedido 2026-08-12: baixar a moldura passou a ser mudar a variável na
     bolha, e não `border-width` no frame. Assim o teto do frame (que desconta
     as duas bordas) acompanha sozinho, e as duas formas do GIF recebem a
     mesma medida — o seletor anterior usava `.acl-gif-bubble > div.relative`,
     filho direto, e entre a bolha e o frame existe o wrapper
     `div.min-w-0.break-words`: nunca casava, então só o MP4 tratado como GIF
     afinava a moldura. */
  .message-bubble-container
    :is(
      [data-bubble-name='gif'].acl-video-bubble,
      [data-bubble-name='gif'].acl-gif-bubble
    ) {
    /* Mesma forma de seletor da regra que define os 3px: ali o `:is()` com
       atributo + classe pesa mais, e especificidade ganha da ordem — escrito
       de forma mais curta, o valor de mobile nunca chegava a valer. */
    --acl-gif-frame-border: 2px;
  }
}

/* ===================================================================
   BLOCO UNICO DE TAMANHO DA FOTO — pedido 2026-08-12

   Antes deste bloco o tamanho de uma foto era decidido em seis lugares
   diferentes deste ficheiro (mais um no aceleres-desktop-media-fix.css), em
   !important, uns anulando os outros — e metade deles com seletor morto
   (`.acl-image-bubble > div.relative`, que nunca casa: o frame fica dois
   niveis abaixo da bolha). Dai o relato: foto pequena demais (havia um teto
   de 180px), esticada (`width: 100%` com `height: 344px`) ou cortada onde
   nao devia.

   Agora a decisao e uma so e mora no componente: `photoFrameStyle`
   (mediaAspectLayout.js) mede naturalWidth/naturalHeight, classifica o
   formato e escreve as variaveis `--acl-photo-*` inline no frame. Este bloco
   e o unico ponto do CSS que as le. O !important continua aqui para nenhuma
   regra legada ganhar dele, mas nenhum VALOR de tamanho e decidido aqui —
   por isso os fallbacks do `var()` sao o caso generico (o que vale enquanto
   a imagem ainda nao carregou), e nao mais um tamanho concorrente.

   Consequencias que o pedido exige e que saem de graca desta forma:
   - direcao da mensagem e legenda nao entram na conta: as variaveis so
     dependem das dimensoes do arquivo. `.left-bubble` / `.right-bubble` e
     `:has(legenda)` seguem mudando cor, ponta e espacamento — nunca tamanho;
   - sem deformacao: no caso generico ninguem escreve width/height, entao o
     navegador reduz a imagem respeitando a proporcao intrinseca dentro dos
     tetos, e nunca amplia acima do tamanho natural do arquivo;
   - `contain` e o padrao; `cover` so aparece quando o componente pede, na
     foto muito vertical, junto de uma caixa de tamanho conhecido;
   - mobile sem @media: cada teto e um `min(px, relativo)` — em tela grande o
     px sempre ganha, e a partir de certa largura/altura o relativo assume.
   =================================================================== */
.message-bubble-container
  .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable']) {
  width: fit-content !important;
  /* 432px = os 420px da foto + os 6px de moldura de cada lado. */
  max-width: min(432px, calc(100vw - 72px)) !important;
  /* A bolha e item de um flex (.aceleres-bubble-surface). Sem isto ela pode
     ser encolhida pelo pai e a foto, que tem largura escrita, passaria a
     desenhar por cima da moldura em vez de acompanhar. Encolher quem manda no
     tamanho e justamente o que este bloco existe para impedir. */
  flex-shrink: 0 !important;
}

.message-bubble-container
  .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable'])
  .acl-image-bubble__asset-frame {
  /* `content-box` de proposito (o reset do Tailwind poe border-box em tudo):
     assim a largura escrita pelo componente e a largura da FOTO, e a moldura
     de 4px fica por fora. Com border-box a moldura comia 8px da imagem, e a
     medida do componente deixava de bater com o que aparece na tela.
     Sem caixa (o caso comum) so a largura e escrita e a altura sai da
     proporcao; com caixa (foto muito vertical) chegam as duas, e o recorte
     acontece dentro dela. */
  box-sizing: content-box !important;
  width: var(--acl-photo-frame-width, fit-content) !important;
  height: var(--acl-photo-frame-height, auto) !important;
  max-width: 100% !important;
  max-height: none !important;
}

.message-bubble-container
  .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable'])
  .acl-image-bubble__asset-frame
  > img {
  display: block !important;
  width: var(--acl-photo-width, auto) !important;
  height: var(--acl-photo-height, auto) !important;
  min-width: 0 !important;
  max-width: var(--acl-photo-max-width, min(420px, 100%)) !important;
  max-height: var(--acl-photo-max-height, min(344px, 46dvh)) !important;
  object-fit: var(--acl-photo-object-fit, contain) !important;
}