/* 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: #f5f2eb !important;
  background-image: url('/assets/images/aceleres-chat-wallpaper-v16.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !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. */
/* Aceleres 2026-08-17: o `min-width` deixou de ser um zero cravado e passou a
   ler uma variavel. Motivo: com legenda, enquanto a foto/GIF ainda carrega, o
   frame da midia nem existe no DOM (`v-else-if="isLoaded"` em Image.vue) e a
   legenda esta com `width: 0` de proposito — logo a bolha nao tem de onde tirar
   largura e colapsa, deixando o texto com uma palavra por linha. Medido no
   harness: bolha de 16px e legenda em 77 linhas.
   O componente reserva a largura por `--acl-bubble-min-width` enquanto carrega.
   Estilo inline nao servia: o `!important` daqui vence inline, e era por isso
   que a reserva ja escrita em Image.vue nunca surtia efeito. O `0` continua
   sendo o padrao, entao nada muda para midia sem legenda. */
.message-bubble-container .acl-image-bubble {
  box-sizing: border-box !important;
  min-width: var(--acl-bubble-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;
}

/* Aceleres 2026-08-19: a folga de baixo passou de 24px para 2rem. Ela e a
   vaga do horario, que assenta sobre a legenda, e a conta e sempre
   `bottom + altura do horario`: 0,625rem + 1rem = 1,625rem. Em 24px fixos a
   vaga ficava curta e o 14:57 apoiava-se na ultima linha da legenda comprida
   (medido no repro: 4px de sobreposicao). Em rem porque o tamanho da fonte da
   raiz varia por utilizador (ver useFontSize.js) — em pixel fixo o mesmo bug
   voltaria noutro tamanho. Os 8px laterais nao mudam. */
.message-bubble-container .acl-image-bubble
  > div.min-w-0.break-words
  > .acl-image-bubble__caption {
  margin: 0 !important;
  padding: 8px 8px 2rem !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. */
/* 2026-08-18: `overflow-wrap: anywhere` porque uma legenda sem espaço nenhum
   (um link colado, ou o "wwwww..." de um teste) não tem onde quebrar e saía
   pela lateral da bolha, que a corta com `overflow: hidden`. `anywhere` só age
   quando não existe oportunidade de quebra normal — uma legenda com espaços
   continua a quebrar entre palavras, como antes. */
.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;
  overflow-wrap: anywhere !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-wallpaper-v16.webp') !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: #f5f2eb !important;
  }

  .painel-atendimento .conversation-details-wrap.chat-whats .acl-messages-view {
    background-image: url('/assets/images/aceleres-chat-wallpaper-v16.webp') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !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;
}

/* Aceleres 2026-08-19: o LUGAR do horario dentro da bolha de texto.

   O horario e absoluto no canto inferior direito. Para ele nao assentar por
   cima da ultima linha, alguem tem de abrir espaco — e ate aqui isso era uma
   faixa por baixo do texto, que deixava toda mensagem ~20px mais alta do que
   precisava. No WhatsApp o horario partilha a ultima linha: e o que este
   espacador faz. Quando a linha nao tem espaco, ele quebra sozinho e leva o
   horario para a linha seguinte, que e exatamente o comportamento desejado.

   A conta da largura e `largura do horario + afastamento da direita (8px do
   `right-2`) - recheio direito da bolha`, e o recheio difere por sentido
   (15px no envio, 0 na recepcao — ver `textBubbleClass` em Base.vue). Dai as
   duas medidas. Vao em rem porque o horario tambem cresce com a fonte da raiz
   (`leading-4` e os tiques em `size-3`), e uma medida em pixel fixo voltaria a
   ficar curta noutro tamanho — medido nos dois, 16px e 20px.

   Quem decide QUANDO ele existe e o Text/Index.vue (`usesInlineMetaSpacer`):
   so quando o texto e a ultima coisa da bolha. */
.message-bubble-container [data-bubble-name='text'] .acl-meta-spacer {
  display: inline-block !important;
  width: 3.5rem !important;
  height: 1em !important;
  vertical-align: bottom !important;
}

.message-bubble-container
  .left-bubble[data-bubble-name='text']
  .acl-meta-spacer {
  width: 3.25rem !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 de ~1.4s pra o agente saber pra onde foi). Aplicado pelo
   onScrollToMessage em MessagesView.vue. (pedido 2026-07-01)

   Aceleres 2026-08-17: o flash era amarelo (rgba(250, 204, 21, …)) e passou a
   ser preto de baixa opacidade, a pedido. A cor saiu medida da referência
   enviada, não escolhida no olho: o papel de parede do chat está em
   (245, 241, 235) e a faixa destacada em (167, 165, 161) — razão de 0,685 nos
   TRÊS canais, o que só acontece com sobreposição preta, a 1 - 0,685 ≈ 0,32 de
   alpha. Esse 0,32 é exatamente o pico que a animação já usava, então só a cor
   muda: o tempo e a curva de opacidade ficam como estavam. */
.message-bubble-container.acl-scroll-highlight {
  animation: acl-scroll-highlight-flash 1.4s ease-out;
}
@keyframes acl-scroll-highlight-flash {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  20% {
    background-color: rgba(0, 0, 0, 0.32);
  }
  60% {
    background-color: rgba(0, 0, 0, 0.22);
  }
  100% {
    background-color: rgba(0, 0, 0, 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;
  }

  /* Aceleres 2026-08-13: os 46,5px sao a VAGA do botao de encaminhar (8px de
     vao + 32,5px de largura). Sticker e video enviados nao tem encaminhar (ver
     `!isStickerBubble` / `!isNonGifVideoBubble` em shouldShowForwardButton,
     Message.vue), entao a vaga ficava vazia e a carita aparecia uma largura de
     botao longe
     demais da bolha. `.is-without-forward` ja e calculada no Vue e traz o vao
     minimo de 14px do proprio Message.vue — aqui basta nao atropelar. */
  .message-bubble-container[data-outgoing-image='true']
    .aceleres-bubble-smile.is-right-bubble:not(.is-without-forward) {
    margin-right: 46.5px !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: var(--acl-reply-box-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
    var(--acl-reply-box-border-color, rgba(0, 0, 0, 0.18)) !important;
  border-radius: var(--acl-reply-box-radius, 50px) !important;
  box-shadow: var(
    --acl-reply-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: var(
    --acl-reply-box-border-color,
    rgba(0, 0, 0, 0.18)
  ) !important;
  box-shadow: var(
    --acl-reply-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;
}

@media (min-width: 769px) {
  div.reply-box:not(.is-private):not(.reply-box--recording) {
    --acl-reply-box-padding: 2px 10px;
    --acl-reply-box-border-color: rgba(0, 0, 0, 0.1);
    --acl-reply-box-radius: 50px;
    --acl-reply-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
  }

  .dark div.reply-box:not(.is-private):not(.reply-box--recording) {
    --acl-reply-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
  }

  div.reply-box.reply-box--with-reply:not(.is-private):not(
      .reply-box--recording
    ) {
    border-radius: 0 0 50px 50px !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: 0 !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,
   com hover cinza-claro e ícone escuro. O "grosso" nos mask-icons phosphor é
   feito com 4 drop-shadows offset 0.5px em currentColor (halo que engorda
   o traço). O "+" usa a variante compacta e espessa do Fluent. */
div.reply-box .left-wrap > button,
div.reply-box .left-wrap .acl-plus-wrap > button,
div.reply-box .left-wrap .acl-copilot-button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !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;
}

@media (min-width: 769px) {
  div.reply-box .left-wrap .acl-plus-wrap > button {
    position: relative !important;
  }

  div.reply-box
    .left-wrap
    .acl-plus-wrap
    > button
    .i-fluent-add-12-filled {
    display: none !important;
  }

  div.reply-box .left-wrap .acl-plus-wrap > button::before,
  div.reply-box .left-wrap .acl-plus-wrap > button::after {
    content: '' !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    border-radius: 9999px !important;
    background: currentColor !important;
    pointer-events: none !important;
  }

  div.reply-box .left-wrap .acl-plus-wrap > button::before {
    width: 1.4rem !important;
    height: 2.5px !important;
    transform: translate(-50%, -50%) !important;
  }

  div.reply-box .left-wrap .acl-plus-wrap > button::after {
    width: 2.5px !important;
    height: 1.4rem !important;
    transform: translate(-50%, -50%) !important;
  }
}
div.reply-box:not(.reply-box--recording) .left-wrap > button:hover:not(:disabled),
div.reply-box:not(.reply-box--recording)
  .left-wrap
  .acl-plus-wrap
  > button:hover:not(:disabled),
div.reply-box:not(.reply-box--recording)
  .left-wrap
  .acl-copilot-button:hover:not(:disabled) {
  background: #f0f2f5 !important;
  background-color: #f0f2f5 !important;
  color: #111b21 !important;
}
div.reply-box .left-wrap span[class*='i-ph-'],
div.reply-box .left-wrap span[class*='i-lucide-'] {
  width: 1.88rem !important;
  height: 1.88rem !important;
  color: inherit !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: 1.88rem !important;
  height: 1.88rem !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;
}
div.reply-box:not(.reply-box--recording)
  .left-wrap
  .acl-copilot-button:hover:not(:disabled)
  i {
  background: #111b21 !important;
}

/* 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),
div.reply-box .right-wrap .wa-action-btn--mic:hover:not(:disabled) {
  filter: none;
  background: #000000 !important;
  color: #ffffff !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 {
  width: 1.88rem !important;
  height: 1.88rem !important;
  font-size: 1.88rem !important;
  color: #ffffff !important;
}

/* No desktop, enviar e microfone ocupam a mesma quina e alternam entre si;
   por isso compartilham exatamente o mesmo tamanho externo e de ícone. */
@media (min-width: 769px) {
  div.reply-box .right-wrap .wa-action-btn--send {
    width: var(--acl-conversation-action-size, 55px) !important;
    height: var(--acl-conversation-action-size, 55px) !important;
    min-width: var(--acl-conversation-action-size, 55px) !important;
    min-height: var(--acl-conversation-action-size, 55px) !important;
  }

  div.reply-box .right-wrap .wa-action-btn--send i {
    width: 1.88rem !important;
    height: 1.88rem !important;
    font-size: 1.88rem !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: none;
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !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: 1.88rem;
  height: 1.88rem;
  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;
}

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

/* Aceleres 2026-08-19: no compositor, a troca de paragrafo tem de ocupar uma
   LINHA EM BRANCO -- e o que ela vale no texto enviado ("\n\n") e e o que o
   WhatsApp desenha. O padrao do ProseMirror e `margin-bottom: var(--space-small)`
   (8px), menos de meia linha, entao colar dois paragrafos dava duas linhas
   quase coladas: o espaco em branco parecia ter-se perdido na tela, embora
   fosse enviado. A medida sai do mesmo `1.35em` que define a altura minima do
   compositor logo acima; o 8px do padrao e zerado entre paragrafos para as
   duas medidas nao se somarem. */
div.reply-box .reply-box__top .ProseMirror p + p {
  margin-top: 1.35em !important;
}
div.reply-box .reply-box__top .ProseMirror p:has(+ p) {
  margin-bottom: 0 !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, ferramentas e editor
   conforme a largura da tela; enviar e microfone permanecem iguais.
   =================================================================== */
@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;
  }
}

@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 span[class*='i-ph-'],
  div.reply-box .left-wrap span[class*='i-lucide-'] {
    width: 1.88rem !important;
    height: 1.88rem !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 span[class*='i-ph-'],
  div.reply-box .left-wrap span[class*='i-lucide-'] {
    width: 1.88rem !important;
    height: 1.88rem !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 span[class*='i-ph-'],
  div.reply-box .left-wrap span[class*='i-lucide-'] {
    width: 1.88rem !important;
    height: 1.88rem !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 span[class*='i-ph-'],
  div.reply-box .left-wrap span[class*='i-lucide-'] {
    width: 1.88rem !important;
    height: 1.88rem !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 .right-wrap .wa-action-btn--send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !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 {
  /* Pedido 2026-08-13: centro da bolha, sem teto. Aqui existiu um
     `clamp(24px, 50%, 200px)`, pensado para a foto vertical muito alta (o
     botao no centro exato ficava flutuando solto no meio da imagem). Na
     pratica o teto de 200px pegava cedo demais: bolha de midia passa dos
     400px com facilidade — basta a barra do nome do remetente em cima, ou a
     legenda embaixo — e a partir dai o botao parava antes do centro. Deu
     descentrado na foto, no GIF (com e sem legenda) e na galeria, os tres
     reportados juntos.

     Uma unica declaracao manda na posicao vertical dos dois botoes: se um dia
     for preciso tratar a foto muito alta de novo, e aqui, e nao numa regra
     nova por tipo de midia. */
  top: 50% !important;
  width: 32.5px !important;
  height: 32.5px !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 + a largura do botão, ver Message.vue) — smile e
   forward se sobrepunham 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:52,5px) — 6px de vão
   livre depois do forward, igual ao lado enviado já tem.

   Aceleres 2026-08-17: os dois botões passaram de 26px para 32,5px; as
   margens do smile acompanharam (52,5px aqui, 46,5px na mídia enviada) para
   manter esses mesmos 6px de vão. Mexer na largura sem mexer nelas faz um
   botão entrar por cima do outro. */

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

/* Aceleres 2026-08-13: aqui existiam TRES blocos que tentavam encolher o vao
   da carita quando nao ha botao de encaminhar (sticker, video, texto, audio).
   Todos partiam de `.aceleres-bubble-surface > .aceleres-bubble-smile`, mas no
   DOM o smile e IRMAO da surface, nao filho (ver Message.vue: os dois penduram
   em `.aceleres-bubble-with-actions`) — entao nenhum deles casava, e o vao
   errado continuava vindo da regra de `[data-outgoing-image]` la em cima.
   Foram removidos em vez de reescritos porque quem ja resolve o caso e a
   classe `.is-without-forward`, calculada no Vue e aplicada no proprio
   Message.vue; repeti-la aqui so recriaria a duplicacao. O unico ajuste que
   faltava era a regra de midia enviada parar de reservar a vaga do
   encaminhar quando ele nao existe — feito no bloco de
   `[data-outgoing-image='true']`, procure por `:not(.is-without-forward)`. */

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

  /* Aceleres 2026-08-19 -- as duas classes viviam em blocos separados com
     declaracoes identicas, porque o componente aplica as duas ao mesmo tempo.
     Eram duas copias da mesma regra: qualquer ajuste tinha de ser feito em
     dobro, e bastava esquecer uma para as larguras discordarem. Agora e um
     seletor so.

     A altura deixou de ser `100%` fixo. `100%` mede o viewport de LAYOUT, que
     no iOS nao encolhe quando o teclado sobe -- e era por isso que o
     compositor, que fica no fim desta caixa, acabava desenhado debaixo do
     teclado. A variavel vem de `aceleres-mobile-conversation-viewport.js` e
     vale a altura ate o fundo do que se ve. Sem teclado a variavel nem existe
     e o `100%` de reserva assume, entao nada muda no resto do tempo. */
  .painel-atendimento.acl-conversation-mobile-page,
  .painel-atendimento.acl-mobile-conversation-active {
    height: var(--acl-mobile-visual-viewport-height, 100%) !important;
    min-height: 0 !important;
    max-height: var(--acl-mobile-visual-viewport-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 {
    /* Aceleres 2026-08-19 -- sem desfoque de fundo no telemovel. Com o fundo
       a 98% de opacidade o desfoque por tras nao se ve, mas custa uma
       passagem de blur do GPU a CADA fotograma enquanto se rola.
       Este esta por cima do que rola, em posicao fixa. */
    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;
    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;
  }

  /* Aceleres 2026-08-17: removida a regra que achatava nome, previa e textos
     secundarios do card em 13px no celular. Ela estava errada de tres jeitos:
     `.message-preview` nunca existiu como classe (o `message-preview` do
     ConversationCard e um `:key` do Vue), `.text-n-slate-11` so alcanca a
     previa de conversa JA LIDA, e o resultado era uma conversa nao lida com o
     nome em 13px e a previa em 18,75px -- a previa maior que o proprio nome.
     Alem disso o 13px vinha com a entrelinha do desktop (25/30px), quase o
     dobro do texto. Sem a regra, o celular herda a mesma escala e a mesma
     hierarquia do desktop. */

  /* 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 {
    /* Aceleres 2026-08-19 -- sem desfoque de fundo no telemovel. Com o fundo
       a 94% de opacidade o desfoque por tras nao se ve, mas custa uma
       passagem de blur do GPU a CADA fotograma enquanto se rola.
       Este esta por cima do que rola, em posicao fixa. */
    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;
  }

  .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;
  }

  /* Aceleres 2026-08-19: o botao de "Mais accoes" media 32x32 -- o tamanho vem
     do `<style>` da MoreActions.vue e vale para computador e telemovel. E a
     porta de entrada de TODAS as funcoes do atendimento no celular (concluir,
     etapa do funil, transferir, IA, silenciar, seleccionar mensagens), e era o
     alvo mais pequeno do ecra, abaixo dos 44px da Apple e dos 48dp do Android.
     Cresce a area de toque, nao o icone: o `i-` de 18px continua a mandar no
     desenho, so ganha margem a volta. Tres classes de especificidade para
     ganhar do `!important` do componente sem depender da ordem dos ficheiros. */
  .painel-atendimento
    .acl-conversation-header
    .acl-conversation-more-actions-trigger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Aceleres 2026-08-19: entrou aqui o terceiro seletor, ancorado no proprio
     cabecalho. Os dois de cima dependem de classes que ficam em componentes
     acima na arvore (`acl-whatsapp-mobile-scope` na ConversationBox,
     `conversation-details-wrap` no invólucro): numa medicao de 19/08 o botao
     apareceu com 38x38 em vez dos 48px pedidos aqui, sinal de que a cadeia nao
     casou naquele estado. `.acl-conversation-header` e o pai direto e sempre
     existe. Sao medidas para o mesmo elemento, entao entram como seletor na
     regra que ja havia -- nao como uma segunda copia das declaracoes. */
  .acl-whatsapp-mobile-scope .acl-back-button,
  .painel-atendimento .conversation-details-wrap .acl-back-button,
  .painel-atendimento .acl-conversation-header .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;
    /* Aceleres 2026-08-19: sem pastilha, pelo mesmo motivo do botao dos tres
       pontos (procure por "perde a pastilha"): eram dois discos brancos, um em
       cada ponta de um cabecalho que ja e claro. Agora os dois lados ficam so
       com o icone. Os 48px continuam — sao a area de toque, nao a cor. */
    background: none !important;
    box-shadow: none !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;
  }

  /* Aceleres 2026-08-18: a medida tem de alcançar as TRÊS camadas do avatar.
     O componente escreve `width`/`height` INLINE em dois <span> (o de fora e o
     que recorta a imagem), e esta regra só cobria o wrapper e o span de fora:
     o de dentro ficava com a medida inline e a foto saía desenhada 32x40 —
     esticada na vertical e com a parte de baixo cortada pelo recorte do span.
     Medido no aparelho: `img` 32x40 com natural 96x96. Daí o relato de que a
     foto do contato "não aparece" no mobile.

     `span:has(> img)` alcança exatamente o span que recorta a imagem, sem tocar
     no selo de status nem no ícone do canal, que também são <span> ali dentro. */
  .acl-whatsapp-mobile-scope .acl-conversation-header__avatar,
  .acl-whatsapp-mobile-scope .acl-conversation-contact-avatar,
  .acl-whatsapp-mobile-scope .acl-conversation-header__avatar span:has(> img) {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .acl-whatsapp-mobile-scope .acl-conversation-header__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* O cartão da conexão NÃO aparece no cabeçalho do celular.
     Historia curta, porque ela deu duas voltas hoje: em 18/08 saiu por
     largura (inteiro comia 175px de uma barra de 390 e cortava o nome do
     contacto); na manha de 19/08 voltou magro, so com o nome; e a pedido da
     tarde volta a sair — a informacao da conexao passou para dentro do menu
     dos tres pontos (ver `instanceLabel` em MoreActions.vue), que e onde ela
     nao disputa espaco com nada.

     Ficou so esta declaracao: as regras que afinavam o chip (esconder o par
     codigo · numero, encolher o nome, tirar o icone) foram apagadas em vez de
     ficarem por baixo de um `display: none` — seriam codigo morto a fingir que
     ainda decide alguma coisa.

     Nunca mexer no `__instance-actions` que o embrulha: aquele bloco tambem
     guarda os botoes de acao do cabecalho, e ocultá-lo deixou a area de acoes
     com largura 0 — os botoes sumiram junto. Medido e revertido no mesmo dia. */
  .acl-whatsapp-mobile-scope .acl-conversation-header__instance-card {
    display: none !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;
  }

  /* Aceleres 2026-08-19: 40px passaram a 48px, a mesma medida que o botao de
     voltar ja usa do outro lado do cabecalho. Este botao e a porta de entrada
     de TODAS as funcoes do atendimento no telemovel (concluir, etapa do funil,
     transferir, IA, silenciar, seleccionar mensagens) e era o alvo mais pequeno
     do ecra. Cresce a area de toque, nao o icone: o `i-` de 18px continua a
     mandar no desenho.

     Sao 48px e nao 55px de proposito. O `html` leva `zoom: 0.8` (vem dos
     DASHBOARD_SCRIPTS), entao tudo o que se declara aqui sai 20% menor no ecra:
     48px desenham 38px, e os 44pt da Apple exigiriam 55px. So que o cabecalho
     inteiro tem 56px de altura -- um botao de 55px enchia-o de ponta a ponta.
     Chegar aos 44pt de verdade obriga a mexer no zoom global ou na altura do
     cabecalho, que e decisao de desenho e nao ajuste de medida. 48px e o maior
     alvo que cabe aqui, e deixa os dois botoes do cabecalho iguais. */
  .acl-whatsapp-mobile-scope .acl-conversation-header__menu,
  .acl-whatsapp-mobile-scope .acl-conversation-header__menu .actions--container {
    height: 48px !important;
  }

  .acl-whatsapp-mobile-scope .acl-back-button:hover,
  .acl-whatsapp-mobile-scope .acl-back-button:active,
  .acl-whatsapp-mobile-scope .acl-back-button:focus,
  .painel-atendimento .acl-conversation-header .acl-back-button:hover,
  .painel-atendimento .acl-conversation-header .acl-back-button:active,
  .painel-atendimento .acl-conversation-header .acl-back-button:focus {
    background: none !important;
    box-shadow: none !important;
  }

  /* Aceleres 2026-08-19: o botao dos tres pontos perde a pastilha, a pedido.
     Tinha `background: rgba(255, 255, 255, 0.78)` mais uma sombra de 1px --
     um disco branco sobre o cabecalho, que ja e claro. Fica so o icone.

     O que NAO sai: os 48px. Eles sao a area de TOQUE (a nota acima explica por
     que 48 e nao 55), e ela nao depende de haver fundo — tirar a medida junto
     com a cor devolveria o alvo minusculo de antes.

     `background: none` e nao `transparent`: o utilitario que pinta vem do
     ButtonV4 e tambem escreve `background-image` no estado activo; `none`
     apaga os dois de uma vez. */
  .acl-whatsapp-mobile-scope .acl-conversation-header__menu .acl-tip-wrapper > button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    background: none !important;
    box-shadow: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* O toque tambem nao pinta: sem a pastilha, um fundo que aparece so no
     instante do toque le-se como falha de desenho. */
  .acl-whatsapp-mobile-scope
    .acl-conversation-header__menu
    .acl-tip-wrapper
    > button:hover,
  .acl-whatsapp-mobile-scope
    .acl-conversation-header__menu
    .acl-tip-wrapper
    > button:active,
  .acl-whatsapp-mobile-scope
    .acl-conversation-header__menu
    .acl-tip-wrapper
    > button:focus {
    background: none !important;
    box-shadow: none !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: #f5f2eb !important;
    background-image: url('/assets/images/aceleres-chat-wallpaper-v16.webp') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !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;
  }

  /* Aceleres 2026-08-18: o botao "Ver atendimentos anteriores" entra AQUI, na
     regra que ja desenha as etiquetas flutuantes desta conversa. Ele flutua
     sobre as mensagens (o wrapper tem `h-0` de proposito, para elas passarem
     por tras dele), e texto nu sobre bolhas e papel de parede nao se le —
     mudar so a cor nao resolveu. Ganhando o mesmo tratamento da etiqueta de
     data, passa a ter fundo por baixo das letras.

     Nao e a "franja branca" retirada em 17/08: aquela vinha de o botao morar
     numa faixa `py-2` propria, de largura inteira, que cortava a conversa em
     duas. Isto e a pastilha compacta que a data ja usa, do tamanho do texto, e
     o wrapper continua com altura zero — nao rouba altura nenhuma a lista.

     Entrar na regra existente em vez de escrever outra e o que evita repetir as
     cinco declaracoes; se o desenho das etiquetas mudar, o botao acompanha. */
  .acl-whatsapp-mobile-scope .acl-day-separator__label,
  .acl-whatsapp-mobile-scope .acl-history-context > div,
  .acl-whatsapp-mobile-scope .acl-load-previous-button {
    /* Aceleres 2026-08-19 -- sem desfoque de fundo no telemovel. Com o fundo
       a 88% de opacidade o desfoque por tras nao se ve, mas custa uma
       passagem de blur do GPU a CADA fotograma enquanto se rola.
       Este esta DENTRO da lista que rola. */
    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;
  }

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

  /* Mobile message density and widths */
  /* Pedido 19/08/2026: 8px entre mensagens no telemovel, e a REACAO no sitio.
     O vao entre mensagens sao 8px, mas eles nao podem viver todos no
     `padding-bottom` da linha. Esse recheio fica DENTRO da mensagem, entre a
     bolha e a fila da reacao, e a pilula esta calibrada contra ele: em
     Message.vue ela leva `-mt-[8px]` para subir e encostar na bolha. Ao meter
     la os 8px inteiros (primeira tentativa deste pedido) a reacao desceu 6px
     — relato: "as reacoes ficaram muito em baixo".

     Por isso a medida volta a ser duas, mas agora com papeis distintos e nao
     por acaso:
       2px de `padding-bottom` = o vao INTERNO sob a bolha, que a reacao
         atravessa; e o numero contra o qual o `-mt-[8px]` foi calibrado e
         mexer nele mexe na reacao;
       6px de `margin-bottom`  = o vao ENTRE mensagens, por fora de tudo,
         inclusive da reacao.
     Somam os 8px pedidos e a reacao fica exatamente onde estava. */
  .acl-whatsapp-mobile-scope .message-bubble-container {
    margin-bottom: 6px !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;
  }

  /* Aceleres 2026-08-17: o botao perdeu a pastilha tambem aqui. O fundo
     branco, a borda e a sombra eram o que fazia dele uma faixa atravessada no
     topo da conversa; sobram tamanho e cor.

     Aceleres 2026-08-18: a COR e o TAMANHO sairam desta regra. Estavam em
     `rgba(71, 85, 105, 0.82)` e `11px` — cinzento a 82% sobre o papel de
     parede da conversa, um degrau menor que no computador. Sem pastilha para
     o sustentar, o botao praticamente nao se lia (relato: "nao se ve quase
     nada no telemovel"). Tirando as duas declaracoes, quem passa a mandar sao
     as classes do proprio elemento — `text-n-brand` (#25D366) e `text-xs`
     (12px) —, ou seja exatamente o que o computador ja mostra. Preferi APAGAR
     a acrescentar valores: nao entra medida nova nenhuma no ficheiro e as duas
     larguras de ecra passam a ter uma so fonte de verdade.

     O que fica de proposito: `background: transparent` e `border: 0`, que sao
     a decisao de 17/08 de nao devolver a pastilha, e o `min-height: 28px`, que
     e a area de toque. */
  /* As tres declaracoes que anulavam a pastilha (border 0, background
     transparent, box-shadow none) sairam: esta regra vem DEPOIS da regra das
     etiquetas no ficheiro e, com as duas em `!important` e a mesma
     especificidade, era ela que vencia — a pastilha nunca chegaria a aparecer.
     Ficam a area de toque e as medidas, agora iguais as da etiqueta de data
     (raio 6px, 4px/12px), para as duas pastilhas serem a mesma coisa. */
  .acl-whatsapp-mobile-scope .acl-load-previous-button {
    min-height: 28px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
  }

  /* Aceleres 2026-08-19: aqui havia uma regra dando 26x24px a este mesmo
     `.aceleres-bubble-chevron`. Nao tinha efeito nenhum: algumas dezenas de
     linhas acima, no mesmo bloco de telemovel, ele leva
     `display: none !important` -- ou seja, media para um elemento que nunca e
     desenhado. Ficava a impressao de que o chevron aparece no celular e so
     precisa de outro tamanho, quando na verdade a decisao ali e escode-lo e
     deixar o toque longo no lugar dele. Removida a regra; a decisao de
     esconder continua onde sempre esteve. */

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

  /* Aceleres 2026-08-18: mídia mais compacta no celular, para caber mais
     conversa por tela.

     Medido em 390x780 antes deste ajuste: os balões de mídia iam a 307, 317,
     317 e 368px — um balão de foto ocupava até 47% da altura da tela, e a média
     por balão era 242px. Com 780px de altura útil isso dá pouco mais de duas
     mensagens visíveis, que é a queixa de "difícil se deslocar entre tantas
     coisas". Cabeçalho (45px) e compositor (54px) já estão enxutos: o espaço
     está todo na mídia.

     A largura continua vindo do componente; aqui só entra um teto MAIS APERTADO
     no `min()`. Como a altura sai da proporção, a foto encolhe inteira, sem
     deformar e sem tarja. O teto de altura entra pela mesma variável que a
     regra do `<img>` já lê, então nada é duplicado. */
  /* O seletor é longo de propósito: a regra que fixa a medida da foto vale
     (0,6,0) e a do vídeo (0,5,0). Um seletor curto aqui perde e o ajuste não
     acontece — foi o que a primeira tentativa mostrou, com os balões a ficarem
     nos mesmos 317px. Este espelha o seletor de origem e acrescenta o escopo
     mobile, então ganha por um termo. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable'])
    .acl-image-bubble__asset-frame {
    width: min(
      var(--acl-photo-frame-width, 100%),
      var(--acl-media-mobile-frame-width)
    ) !important;
    /* O que fazia o balão alto era a ALTURA do frame, não a da imagem. No
       retrato o componente escreve `--acl-photo-frame-height: min(344px,
       57.5dvh)` e desenha a foto com `cover` dentro dessa caixa; limitar só o
       `<img>` deixava a caixa do mesmo tamanho e o balão não encolhia — medido:
       frame 344px de altura com a imagem já cortada em 265px.

       `max-height` no frame é o corte certo: quem tem altura fixa (o retrato)
       passa a recortar um pouco mais, e quem tem altura automática (paisagem,
       quadrada) não é tocado, porque já fica abaixo deste teto.

       Aceleres 2026-08-19: os dois tetos eram `27dvh` e `34dvh` e cortavam
       justamente a foto EM PE. A regua (mediaAspectLayout.js) desenha o
       retrato numa caixa de 344px de altura; num telemovel de 844px, 27dvh dao
       228px, ou seja o quadro chegava desenhado e era cortado a um terco antes
       do fim — de 258x344 para 258x228. Era isso que fazia a foto comprida
       parecer pequena.

       Agora os dois consomem `--acl-media-mobile-max-height`, o mesmo limite
       de altura que ja existia no ficheiro para a midia do telemovel (46dvh).
       Nao entra medida nova: passam a ser uma so, e como 46dvh (388px) fica
       ACIMA dos 344px da regua, quem decide a altura volta a ser a regua — o
       teto do CSS so age em ecra baixo, que e para o que ele existe.
       Paisagem e quadrada continuam intocadas: ja ficavam abaixo destes
       valores. */
    max-height: var(--acl-media-mobile-max-height) !important;
    --acl-photo-max-height: var(--acl-media-mobile-max-height) !important;
  }

  .acl-whatsapp-mobile-scope
    .message-bubble-container
    .aceleres-bubble-surface
    [data-bubble-name='video'].acl-video-bubble
    .acl-video-bubble__player {
    max-width: var(--acl-media-mobile-frame-width) !important;
    max-height: 34dvh !important;
  }

  /* Pedido 2026-08-18: a mesma régua mais compacta para TODO tipo que se pode
     enviar. Medido a 390x780 antes: figurinha 265px de altura, documento 210px,
     GIF/vídeo até 328px. Os seletores repetem o da regra de origem porque cada
     uma delas já vem em `!important` — um seletor curto aqui perde e o ajuste
     não acontece. */

  /* Figurinha: 190px é medida de desktop; no celular ela competia com uma foto. */
  .acl-whatsapp-mobile-scope .message-bubble-container .acl-sticker-bubble {
    width: 140px !important;
    max-width: min(140px, calc(100vw - 96px)) !important;
  }

  /* A figurinha desenha por dentro o mesmo frame das fotos, e ele tem largura
     própria: encolher só a bolha deixava a imagem de 190px a transbordar uma
     caixa de 140px. As duas medidas andam juntas. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    .acl-sticker-bubble
    > div.relative,
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    .acl-sticker-bubble
    .acl-image-bubble__asset-frame {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }

  /* Documento e cartão de contato dividem a mesma bolha `attachment`. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    [data-bubble-name='attachment'].acl-file-bubble {
    width: min(300px, calc(100vw - 96px)) !important;
    max-width: min(300px, calc(100vw - 96px)) !important;
  }

  .acl-whatsapp-mobile-scope .message-bubble-container .acl-file-bubble__body {
    padding: 6px !important;
  }

  /* Teto GERAL de mídia no celular. Vem depois das regras por tipo de
     propósito: qualquer caminho de renderização que escape das específicas
     (foi o caso de um vídeo que o componente rotula como `gif` e não casava
     com nenhuma das duas) esbarra aqui. Como é `max-height`, só age em quem
     passa do limite — quem já é menor não é tocado. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    :is(.left-bubble, .right-bubble):not(.acl-sticker-bubble)
    :is(
      .acl-video-bubble__player,
      .acl-image-bubble__asset-frame,
      .acl-video-bubble__asset,
      video
    ) {
    max-height: 26dvh !important;
  }

  /* A figurinha fica FORA do teto acima: ela já tem medida própria de 140px e o
     teto relativo (26dvh = ~162px visto) passava a valer como ALTURA, fazendo-a
     crescer de 187 para 237px — o contrário do pedido. Medido e revertido. */

  /* Pedido 2026-08-18: o que encolhe é o BALÃO, não a letra. O corpo continua
     em 14px — reduzi-lo a 13px foi um desvio meu e está revertido.

     Só o RECHEIO encolhe. Estreitar o balão foi medido e sai pela culatra: com
     a mesma letra, menos largura significa mais quebras de linha, e a mensagem
     fica MAIS ALTA — que é o oposto do pedido de "difícil se deslocar". Números
     do mesmo texto longo, a 390px de tela:

       largura 84% (como estava) -> 317px de largura, 376px de altura
       largura 78%               -> 243px de largura, 521px de altura
       largura 72%               -> 225px de largura, 584px de altura

     Por isso a largura fica como estava e só o recheio aperta: 6/8px passam a
     5/8px, ganho pequeno mas sem contrapartida, em toda mensagem de texto. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    :is(.left-bubble, .right-bubble)[data-bubble-name='text'] {
    padding: 5px 8px 5px 8px !important;
  }

  /* Documento e cartão de contato: menos recheio e um pouco mais estreitos. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    [data-bubble-name='attachment'].acl-file-bubble {
    width: min(268px, calc(100vw - 110px)) !important;
    max-width: min(268px, calc(100vw - 110px)) !important;
  }

  .acl-whatsapp-mobile-scope
    .message-bubble-container
    .acl-file-bubble__body {
    padding: 5px !important;
  }

  /* Legenda de foto, vídeo e GIF acompanha o corpo do texto. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    :is(.acl-image-bubble__caption, .acl-video-bubble__caption) {
    padding: 6px 7px 22px !important;
  }



  /* GIF segue o teto do vídeo: os dois usam a bolha de vídeo. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    [data-bubble-name='gif'].acl-gif-bubble
    .acl-video-bubble__player,
  .acl-whatsapp-mobile-scope
    .message-bubble-container
    [data-bubble-name='gif'].acl-video-bubble
    .acl-video-bubble__player {
    max-width: var(--acl-media-mobile-frame-width) !important;
    max-height: 30dvh !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;
  }

  /* Pedido 2026-08-18: o mosaico segue a mesma régua mais apertada das fotos
     soltas — sem isto ele continuava com 76vw e era o balão de mídia mais alto
     que restava na tela. */
  .acl-whatsapp-mobile-scope .message-bubble-container [data-bubble-name='image-album'] {
    width: min(66vw, 420px) !important;
    max-width: min(66vw, 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 {
    /* Aceleres 2026-08-19 -- sem desfoque de fundo no telemovel. Com o fundo
       a 88% de opacidade o desfoque por tras nao se ve, mas custa uma
       passagem de blur do GPU a CADA fotograma enquanto se rola.
       Este esta DENTRO da lista que rola. */
    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;
  }

  .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 {
    /* Aceleres 2026-08-19 -- sem desfoque de fundo no telemovel. Com o fundo
       a 94% de opacidade o desfoque por tras nao se ve, mas custa uma
       passagem de blur do GPU a CADA fotograma enquanto se rola.
       Este esta por cima do que rola, em posicao fixa. */
    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;
  }

  .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: 8px !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
    .i-fluent-add-12-filled {
    display: none !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .left-wrap
    .acl-plus-wrap
    > button::before {
    content: '' !important;
    width: 1.88rem !important;
    height: 1.88rem !important;
    background-color: currentColor !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;
  }

  .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: 1.88rem !important;
    height: 1.88rem !important;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > .wa-action-btn--send,
  .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;
  }

  .acl-whatsapp-mobile-scope
    div.reply-box
    .right-wrap
    > button.wa-action-btn--mic:focus-visible {
    background: #000000 !important;
    background-color: #000000 !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 {
    width: 1.88rem !important;
    height: 1.88rem !important;
    font-size: 1.88rem !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;
  }

  /* Aceleres 2026-08-18: `:not(.acl-composer-emoji-sheet)`. Esta barra e
     DECORATIVA (`pointer-events: none`) e foi escrita quando a folha de emojis
     ainda nao tinha puxador proprio. Hoje o componente renderiza um
     `.acl-composer-emoji-sheet__grabber` dentro de um `__handle` que e quem
     recebe o arrasto — e apareciam as DUAS, uma por cima da outra. Fica a de
     baixo, que e a que funciona; esta sai so na folha, e continua a valer para
     qualquer outro cartao `inline-picker` que nao tenha puxador de verdade. */
  .acl-whatsapp-mobile-scope
    div.reply-box
    .aceleres-emoji-picker-card.acl-inline-picker:not(.acl-composer-emoji-sheet)::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-wallpaper-v16.webp') !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;
  }

  /* O botao acompanha as etiquetas tambem no escuro — sem isto ficaria com a
     pastilha CLARA da regra de cima, um retangulo branco no meio do tema
     escuro. Aqui ele perde o verde da marca e fica com a mesma cor das outras
     etiquetas: e o preco de nao repetir o valor do fundo numa regra so dele. */
  .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,
  .dark .acl-whatsapp-mobile-scope .acl-load-previous-button {
    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 !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: 48px 8px 40px minmax(0, 1fr) 40px 48px !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: 48px !important;
    height: 48px !important;
    margin-right: 0 !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-icon-btn:not(.acl-wa-playpause)
    svg,
  div.reply-box .acl-wa-recorder--conversation .acl-wa-send svg {
    width: 1.88rem !important;
    height: 1.88rem !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: 48px !important;
    height: 48px !important;
    margin-right: 0 !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;
  }

  /* Aceleres 2026-08-19: `100vh` no telemovel e a altura da janela SEM as
     barras do sistema, quase sempre maior que a area que se ve. O modal ficava
     mais alto que a tela e o rodape -- onde estao os botoes -- caia abaixo da
     dobra, pior ainda com o teclado aberto na busca de membro. `dvh` acompanha
     a area realmente visivel, como ja se faz nos outros 34 pontos deste
     ficheiro. */
  .modal-mask.contact-group-members-modal .modal-container {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    height: calc(100dvh - 2rem) !important;
    max-height: calc(100dvh - 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;
  }
}

/* Pedido 2026-08-12: o afastamento do bloco de acoes do compositor saiu daqui
   (era 6px) e da outra copia (14px, @media 769px) para o proprio `.right-wrap`,
   onde existe uma vez so e move microfone e botao de enviar juntos. */

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

/* Pedido 2026-08-14: no audio RECEBIDO a flechinha do menu caia em cima da
   foto redonda (canto sup-direito, `right: 8px`, e a foto ocupa 11px..75px a
   partir da direita). Passa para a ESQUERDA da foto: 11px de padding da
   tarjeta + 64px da foto + os 9px de `gap` da linha = 84px. Vale igual quando
   a foto da lugar a pilula de velocidade, que nasce com a mesma largura de
   proposito.

   O seletor NAO pode ser descendente da bolha. So a imagem e o video passam a
   flechinha pelo slot `#menu-trigger` (hasAdaptiveMediaMenuSlot em
   Message.vue); no audio ela e renderizada como IRMA da bolha, dentro de
   `.aceleres-bubble-surface` -- que e quem tem `position: relative` e, sendo
   `inline-flex`, encosta na largura da tarjeta. Por isso ancoramos na
   superficie e escolhemos o lado pela classe que o proprio botao ja recebe
   (`is-left-bubble`). Uma primeira versao usou
   `.left-bubble[data-bubble-name='audio'] .aceleres-bubble-chevron` e nao
   pegou nada, justamente por procurar a seta DENTRO da bolha.

   No ENVIADO a foto fica no INICIO da linha (`order: -1` acima): sobram 11px
   de padding a esquerda dela e a seta tem 24px, entao nao ha vaga ali dentro.
   La ela continua no canto, onde nunca cobriu a foto. */
.aceleres-bubble-surface:has([data-bubble-name='audio'])
  > .aceleres-bubble-chevron.is-left-bubble {
  right: 84px !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;
}

/* Pedido 2026-08-13: o card do áudio passou de 400px a 420px de largura.
   Continua dentro do teto de 430px já existente e abaixo do limite da bolha
   (`max-w-[min(65vw,42rem)]` no Base.vue), então nada é cortado. O mobile
   segue com a própria medida responsiva (`min(78vw, 360px)` e
   `min(88vw, 390px)` nos blocos `.acl-whatsapp-mobile-scope`), de propósito:
   420px não cabe em tela de telefone. */
.acl-wa-audio {
  width: 420px !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,
.right-bubble .acl-wa-audio__row > .acl-wa-audio__speed-slot {
  order: -1 !important;
}

/* Aceleres 2026-08-17: play um pouco maior (32 -> 36). Os paddings de
   .acl-wa-audio__meta mais abaixo sao a soma literal de avatar + gap + play,
   entao qualquer mudanca aqui tem de ser repetida la, senao a linha do tempo
   sai do prumo com a onda. */
.acl-wa-audio__play {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex: 0 0 36px !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: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 13px solid currentColor !important;
}

.acl-wa-audio__play.is-playing::before {
  content: '' !important;
  width: 13px !important;
  height: 16px !important;
  background: linear-gradient(
    to right,
    currentColor 0 5px,
    transparent 5px 8px,
    currentColor 8px 13px
  ) !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 {
  /* 58 (avatar) + 9 (gap) + 36 (play) + 9 (gap) */
  padding-left: 112px !important;
}

.left-bubble .acl-wa-audio > .acl-wa-audio__meta {
  /* 58 (avatar) + 9 (gap) | 36 (play) + 9 (gap) */
  padding-right: 67px !important;
  padding-left: 45px !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;
}

/* Pedido 2026-08-14: os 64px eram so do ENVIADO e o recebido ficava com 58px
   -- a foto e quem define a altura da linha, entao a tarjeta branca saia 6px
   mais baixa que a verde. A largura sempre foi igual (420px nos dois), a
   diferenca era so essa. O seletor perdeu o `.right-bubble` e passa a valer
   nos dois sentidos; o encaminhado continua de fora pelo `:not(...)`. */
[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;
}

[data-bubble-name='audio']:not(:has(.acl-forwarded-label))
  .aceleres-audio-avatar-wrap
  > div:first-child,
[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;
  }

  /* Aceleres 2026-08-18: a onda do áudio é a única peça elástica da linha —
     avatar (54), play (34) e duração têm medida fixa. O número de barras vem do
     componente e cada barra tem `min-width` própria, então a onda tinha uma
     largura MÍNIMA que não cabia em tela estreita: medido a estourar o balão em
     36px a 320px, 32px a 360px e 23px a 375px.

     `min-width: 0` mais `overflow: hidden` fazem a onda ceder em vez de empurrar
     e cortam as barras que sobram — é o que o WhatsApp faz num aparelho
     estreito. Assim a correção não depende da contagem de barras e não volta a
     quebrar se o componente mudar esse número.

     Aceleres 2026-08-19 -- SAIU o `flex: 1 1 0` que estava aqui. A onda não é
     filha da linha: ela vive dentro de `.acl-wa-audio__column`, que é
     `flex-direction: column`. Ali o `flex` age no eixo VERTICAL, então aquele
     `flex-basis: 0` virava a ALTURA da onda (o `flex-basis` vence o
     `height: 30px`) e, com o `overflow: hidden` logo abaixo, barras e bolinha
     eram cortadas: no telemóvel o áudio ficava sem onda nenhuma. Medido num
     repro fiel a 390px: com o `flex`, onda de 350x0px; sem ele, 350x30px.
     Quem faz a onda caber na largura é o par abaixo — o `flex` nunca tocou
     nela. */
  .acl-whatsapp-mobile-scope .acl-wa-audio__waveform {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Aceleres 2026-08-19: no telemóvel a hora ficava colada ao conteúdo.
     Medido com o CSS real a 390px: entre a última linha do texto e o `14:57`
     havia 6px, e no áudio a linha da duração encostava na onda com 3px de
     folga. Numa mensagem curta ("Ok") isso lê-se como um bloco só.

     A hora é ABSOLUTA no canto (`bottom-1`), e um elemento absoluto não se
     mexe com o padding do pai — ele posiciona-se pela caixa de borda. Por isso
     crescer o padding de baixo da bolha afasta o CONTEÚDO da hora sem mexer na
     hora nem na conta de sobreposição que Base.vue faz (ver `metaBottomClass`).
     Fica em 12px, o dobro do vão de hoje.

     O `:has(> .mb-5)` não é enfeite: desde e6b12c8a2 a bolha de texto abre o
     lugar da hora na PRÓPRIA linha (espaçador inline) e só mantém a faixa de
     baixo quando tem algo depois do texto — "editada", tradutor, chips, cartão
     de link. `mb-5` é essa faixa. Sem a condição, esta regra somaria 6px de
     vazio a toda mensagem depois daquele build, desfazendo parte dos 20px de
     altura que ele tirou.

     Só no telemóvel: no computador o mesmo espaçamento já foi calibrado e
     ninguém se queixou dele. */
  .acl-whatsapp-mobile-scope
    .left-bubble[data-bubble-name='text'].acl-text-bubble:has(> .mb-5),
  .acl-whatsapp-mobile-scope
    .right-bubble[data-bubble-name='text'].acl-text-bubble:has(> .mb-5) {
    padding-bottom: 12px !important;
  }

  /* O mesmo respiro na linha de baixo do áudio (duração + hora), que vinha
     com 3px de `padding-top` do bloco geral. */
  .acl-whatsapp-mobile-scope .acl-wa-audio__meta {
    padding-top: 8px !important;
  }

  /* Barra e vão mais estreitos deixam MAIS barras visíveis antes do corte. */
  .acl-whatsapp-mobile-scope .acl-wa-audio__waveform,
  .acl-whatsapp-mobile-scope
    .acl-wa-audio--dotted
    .acl-wa-audio__waveform {
    gap: 2px !important;
  }

  .acl-whatsapp-mobile-scope .acl-wa-audio__bar,
  .acl-whatsapp-mobile-scope
    .right-bubble[data-bubble-name='audio']:not(:has(.acl-forwarded-label))
    .acl-wa-audio__bar,
  .acl-whatsapp-mobile-scope .acl-wa-audio--dotted .acl-wa-audio__bar {
    min-width: 2px !important;
  }

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

  .acl-whatsapp-mobile-scope .right-bubble .acl-wa-audio > .acl-wa-audio__meta {
    /* 54 (avatar) + 7 (gap) + 34 (play) + 7 (gap) */
    padding-left: 102px !important;
  }

  .acl-whatsapp-mobile-scope .left-bubble .acl-wa-audio > .acl-wa-audio__meta {
    /* 54 (avatar) + 7 (gap) | 34 (play) + 7 (gap) */
    padding-right: 61px !important;
    padding-left: 41px !important;
  }
}

/* Composer action alignment. O desktop tem o afastamento da direita no
   `.right-wrap` (uma unica regra, ver "Pedido 2026-08-12" la em cima); o
   mobile continua com a geometria propria da grelha dele, logo abaixo. */

@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 > 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). */
/* Mesma reserva da foto — ver a nota em `.acl-image-bubble`. */
.message-bubble-container .acl-gif-bubble {
  box-sizing: border-box !important;
  min-width: var(--acl-bubble-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, including transparent sticker bubbles. */
.message-bubble-container .left-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']:has(
        > div.min-w-0.break-words > .acl-image-bubble__caption
      ),
    [data-bubble-name='video']:has(
        > div.min-w-0.break-words > .acl-video-bubble__caption
      ),
    [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 .acl-received-media-chevron {
  color: #ffffff !important;
  background: transparent !important;
  filter: none !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;
}

/* O encaixe do GIF e uma VARIAVEL, com `contain` por omissao.
   A razao original continua valida e por isso e ela o valor por omissao:
   GIF costuma trazer texto, e cortar a borda come palavra. Quando o quadro tem
   a proporcao exata do ficheiro, `contain` nao cria tarja nenhuma.

   Aceleres 2026-08-19: no telemovel a variavel passa a `cover` (declarada no
   bloco de mobile, ao pe das outras medidas de midia). Ali apareciam tarjas
   pretas, e a tarja e sempre o mesmo sintoma — o quadro ficou com uma
   proporcao diferente da do ficheiro e o `contain` desenha o vazio a preto
   (`#111`, o fundo do frame). Onde o quadro ESTA certo, `cover` e `contain`
   desenham exatamente o mesmo e nada e cortado; a diferenca so aparece nos
   casos em que hoje se ve tarja.

   Esta e a unica regra a mudar: a outra que declara o mesmo (o "late media
   guard", mais acima) vem antes no ficheiro e perde para esta, entao mexer la
   tambem seria criar um segundo dono do mesmo comportamento. */
.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: var(--acl-gif-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.

   Pedido 2026-08-18: a tipografia aqui destoava de TODAS as outras bolhas — o
   nome saía em 14px/700 com `line-height: 0.50rem`, enquanto foto, galeria,
   documento e texto usam os 16,2px/600 do `senderNameClass` de Base.vue com
   entrelinha normal. A entrelinha de meio rem (8px, menor que o próprio corpo
   da letra) era o que mais saltava à vista: o nome ficava espremido contra o
   topo, com os descendentes rentes ao vídeo. Isto revoga a parte do pedido de
   2026-08-11 que mantinha o vídeo em 14px.

   O recuo horizontal é 8px de propósito: somado ao `p-1.5` da bolha dá os
   mesmos 14px em que começa a legenda logo abaixo, então nome e legenda ficam
   no mesmo eixo vertical.

   Pedido 2026-08-18 (2): o recuo de BAIXO subiu para 10px e a ALTURA foi
   solta. Só o padding não bastava: a regra genérica da mídia (a que põe o nome
   sobreposto na foto) trava `height` e `max-height` em 30px, e 18px de
   entrelinha mais 20px de recuo não cabem nisso — o excedente era cortado e o
   nome continuava encostado no vídeo. Aqui o nome não está sobreposto a nada,
   está numa faixa própria, então a altura pode seguir o conteúdo. */
.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;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  overflow: visible !important;
  color: #000000 !important;
  background: transparent !important;
  font-size: 16.2px !important;
  font-weight: 600 !important;
  line-height: 18px !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.

   Pedido 2026-08-13: a cor passou de cinza (#667781) a branco, para bater com
   o album ENVIADO — nele o horario nao passa por aqui: fica sobreposto na
   quina de cada miniatura, ja branco pelo `text-white` do ImageAlbum.vue.
   Atencao: aqui o horario NAO esta sobre a foto, esta abaixo do mosaico, e a
   bolha recebida e `!bg-white` (ver albumBubbleBackgroundClass no
   ImageAlbum.vue) — ou seja, branco sobre branco. Foi escolhido assim de
   proposito; para voltar a ler, basta devolver o cinza nesta linha. */
.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;
  text-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* Pedido 2026-08-13: o horário DA MINIATURA fica branco, porque ali ele é
   desenhado por cima da foto.

   Tem de mirar o `<time>`, e não o wrapper: a regra guarda-chuva deste mesmo
   arquivo (`.message-bubble-container time`, procure por "horário (elemento
   <time>) sempre com a mesma cor") pinta TODO `<time>` de preto 60% com
   `!important`. Era ela que anulava o `text-white` que o ImageAlbum.vue põe no
   wrapper — medido no chromium com o DOM real: wrapper `rgb(255,255,255)`,
   `<time>` `rgba(0,0,0,0.6)`.

   Dois níveis (`> div > div time`) de propósito: assim pega só o horário que
   mora DENTRO de uma miniatura (o do álbum enviado, um por foto) e não o do
   álbum recebido, que é filho direto do grid e fica ABAIXO do mosaico, sobre o
   fundo branco da bolha — lá o branco sumiria. Esse segue com a cor padrão do
   horário, que é o que se vê hoje. */
.message-bubble-container
  [data-bubble-name='image-album']
  .acl-image-album__grid
  > div
  > div
  time {
  color: #ffffff !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 comum, 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). O vídeo muito
   vertical recebe do componente uma caixa fixa pelas variáveis abaixo. */
.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: var(--acl-video-frame-width, fit-content) !important;
  height: var(--acl-video-frame-height, auto) !important;
  max-width: 100% !important;
  max-height: var(--acl-video-frame-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: 100% !important;
  max-height: 344px !important;
}

/* O 9:16 e os retratos ainda mais estreitos preenchem a caixa calculada no
   componente. As dimensoes nao se repetem aqui: as variaveis carregam a mesma
   medida que classifica e posiciona o vídeo. */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble[data-aspect-class='very-vertical']
  .acl-video-bubble__asset {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Pedido 2026-08-18: vídeo COM LEGENDA — o vídeo enche a bolha em vez de sair
   pequeno num canto.

   Aqui havia um `:has(> div.min-w-0.break-words > .acl-video-bubble__caption)`
   que NUNCA casava: a legenda é IRMÃ desse wrapper, não filha dele (é o mesmo
   tropeço do `>` que já custou três bugs de mídia). A marca confiável é a
   classe `--captioned`, que o componente põe na bolha.

   Estas medidas existiam num `<style>` do Video.vue, mas lá elas perdiam: o
   bloco NÃO é `scoped`, então os seletores dele valem (0,4,0), enquanto as duas
   regras logo acima — as do vídeo sem legenda — valem (0,5,0) por causa do
   `.aceleres-bubble-surface` e do `[data-bubble-name='video']`. O resultado
   medido era um player de 301x344 dentro de uma bolha de 420 (o `max-height:
   344px` mordia primeiro e o `aspect-ratio` devolvia a largura), com o vídeo a
   420px transbordando a própria caixa e ~119px de verde à direita. Trazer as
   regras para cá resolve por (0,6,0) e ainda dispensa o build do Vite.

   `max-height` tem de ser anulado explicitamente: com `aspect-ratio` na caixa,
   um teto de altura não corta a altura — o navegador preserva a proporção
   encolhendo a LARGURA, que é exatamente como o vídeo encolhia. O teto continua
   implícito: a largura não passa da bolha (420px) e o piso da proporção
   (420/480 = 0,875, em captionedVideoBoxRatio) impede a altura de passar de
   480px. */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble.acl-video-bubble--captioned
  .acl-video-bubble__player:not(.acl-video-bubble__player--gif) {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: var(--acl-video-caption-ratio, 3 / 4) !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble.acl-video-bubble--captioned
  .acl-video-bubble__asset {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Mesma vaga do horario da legenda da foto (procure por "a vaga do horario"):
   1,5rem deixava 0,125rem de folga sobre a conta `bottom + altura`, e qualquer
   legenda que chegasse ao canto direito encostava no horario. */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__caption {
  padding-bottom: 2rem !important;
}

/* A duração e o horário permanecem na mesma linha visual. O horário usa a
   borda da bolha como referência; a duração usa o player, que termina 6px
   acima por causa do padding da bolha. Por isso os deslocamentos diferem. */
.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: 0 !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;
    /* Teto da MIDIA no telemovel. Estava escrito por extenso em tres sitios
       (frame da foto, player do video e player do GIF); agora o numero existe
       uma vez so e aqueles tres consomem-no. */
    --acl-media-mobile-frame-width: calc(100vw - 132px);
    /* Pedido 19/08: no telemovel o GIF preenche o quadro em vez de deixar
       tarja preta. Ver a explicacao completa no bloco unico de tamanho do
       GIF, onde a variavel e consumida. */
    --acl-gif-object-fit: cover;
    /* Teto da BOLHA: a midia mais o recheio dela.
       Antes eram `calc(100vw - 72px)`, ou seja 60px A MAIS do que a midia que
       a bolha carrega. Sem legenda ninguem via: a bolha encolhe ate a midia.
       COM legenda o texto esticava a bolha ate este teto e a midia ficava
       menor que o balao — e por isso que foto, video e GIF com legenda
       "passavam do tamanho normal". Amarrando o teto da bolha a medida da
       midia, a legenda quebra em mais linhas em vez de alargar o balao, que e
       o que o WhatsApp faz.
       Os 12px sao o recheio do video (p-1.5); foto e GIF tem 8px, e os 4px de
       diferenca nao se veem. */
    --acl-media-mobile-max-width: calc(
      var(--acl-media-mobile-frame-width) + 12px
    );
  }

  /* LEGENDA NAO ALARGA A BOLHA (19/08/2026).
     O teto abaixo vale para o video, para a legenda que vem em bolha propria
     (`--with-media`) e — a novidade — para a FOTO.

     A bolha da foto nao tinha teto NENHUM neste ficheiro: dependia so do
     utilitario inline do componente, `!max-w-[calc(100vw-48px)]`, que num ecra
     de 390px da 342px enquanto o video e o GIF paravam nos 318 e a midia em
     258. Era o balao mais largo do chat, e so quando havia legenda para o
     esticar. Agora os tres consomem a mesma variavel e nenhum passa da midia.

     O seletor da foto leva `[data-bubble-name='image']` de proposito: sem o
     atributo pesa (0,2,0) e perde para o utilitario com `!important` do
     bundle, que e carregado antes mas ganha por especificidade. */
  .message-bubble-container .acl-text-bubble--with-media,
  .message-bubble-container
    .aceleres-bubble-surface
    [data-bubble-name='image'].acl-image-bubble,
  .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;
}

/* ===================================================================
   Pedido 2026-08-12: a carita de reacao rapida ficava longe do video (e da
   foto) quando a mensagem trazia o nome do remetente.

   A carita e posicionada a partir da BOLHA (`left/right: 100%` sobre
   `.aceleres-bubble-surface`), com 14px de folga — a folga certa. O que estava
   errado era a largura da bolha: o nome do remetente e uma linha de texto com
   `width: auto`, entao a largura intrinseca dele entrava na conta da bolha
   (que e `fit-content`) e a bolha ficava mais larga que a midia. Medido no
   repro: video de 194px dentro de bolha de 279px (carita a 96px do video) e
   foto de 237px dentro de bolha de 322px (99px). Sem nome, os mesmos casos
   davam 18px e 14px.

   A correcao e a mesma ja usada na legenda (ver "width: 0 + min-width: 100%"
   mais acima): com largura zero o texto nao entra na largura intrinseca, e o
   `min-width: 100%` faz ele preencher depois a largura que a midia definiu.
   Assim a bolha volta a encostar na midia e a carita acompanha sozinha.
   =================================================================== */
.message-bubble-container
  .aceleres-bubble-surface
  :is(
    [data-bubble-name='image'].acl-image-bubble,
    [data-bubble-name='video'].acl-video-bubble
  )
  > .acl-media-sender {
  width: 0 !important;
  min-width: 100% !important;
  /* Com a bolha a encostar na midia, um nome comprido passa a nao caber numa
     linha. Deixa-lo quebrar mostrava duas linhas apertadas (a entrelinha aqui
     e menor que o corpo do texto, entao os descendentes ficavam cortados).
     Uma linha so com reticencias e o que o WhatsApp faz com o nome do
     participante — e nao mexe na altura da bolha. */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ===================================================================
   Aceleres 2026-08-17: menus do cabecalho da conversa acima do compositor.

   O menu "mais acoes" e o sub-menu "Transferir" moram DENTRO de
   `.acl-conversation-header`, que e `relative z-[100]` — um contexto de
   empilhamento. Por isso nao adiantava subir o z-index deles (1000 e 50): o
   que conta la fora e o 100 do cabecalho, e o shell do compositor pinta em
   2147482000, ficando por cima. O menu sumia atras da caixa de texto.

   A correcao eleva o CABECALHO enquanto um dos seus menus esta aberto, em vez
   de teleportar o menu: nada muda no DOM, o clique-fora continua valendo e o
   sub-menu acompanha sozinho, porque esta dentro do mesmo cabecalho. Cabecalho
   e compositor ficam em pontas opostas da tela, entao elevar um nao cobre o
   outro. Mesma faixa dos menus flutuantes do mobile (2147482700): acima do
   compositor e abaixo do aviso de "digitando" e dos modais.
   =================================================================== */
.acl-conversation-header:has(.acl-conversation-more-actions-menu),
.acl-conversation-header:has(.acl-transfer-popup) {
  z-index: 2147482700 !important;
}

/* O menu nunca passa do rodape da janela: o que exceder rola por dentro, em
   vez de ser cortado pela viewport. 152px cobrem a altura do cabecalho mais a
   folga de baixo. */
.acl-conversation-more-actions-menu,
.acl-transfer-popup {
  width: min(400px, calc(100vw - 16px)) !important;
  max-height: min(26rem, calc(100vh - 128px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* ===================================================================
   LINK NO TELEMOVEL: SO O TEXTO, E EM AZUL (pedido 19/08/2026)
   ===================================================================
   No telemovel a mensagem com endereco mostra apenas o texto que foi
   enviado. O cartao de previa (titulo, descricao e dominio) sai de cena:
   num ecra estreito ele ocupava mais altura do que a propria mensagem, e o
   tom dele — mais escuro do que a bolha, `#d5f3cf` no envio — lia-se como
   uma mancha verde por baixo do texto.

   Escondo o CARTAO, e nao o fundo dele. Tirar so a cor deixaria a moldura, o
   espacamento e as tres linhas de texto na mesma; o pedido e nao ver nada
   daquilo.

   O que decide o tom e a margem do cartao vive em `Base.vue`
   (`linkPreviewToneClass` e `linkPreviewInsetClass`) e continua intocado: no
   desktop o cartao fica exatamente como esta. Aqui so se apaga a peca no
   telemovel, o que torna aquela compensacao de margem inofensiva — ela
   aplica-se a um elemento que ja nao ocupa espaco.

   A cor do proprio endereco passa a azul. Ela vinha de `--tw-prose-links`,
   que e `#111827` — quase preto, indistinguivel do resto da frase. O
   `#027eb5` e o azul de ligacao do WhatsApp no tema claro.
   =================================================================== */
@media (max-width: 767px) {
  .message-bubble-container .acl-link-preview {
    display: none !important;
  }

  .message-bubble-container .prose-bubble a,
  .message-bubble-container .acl-message-caption a {
    color: #027eb5 !important;
  }
}

/* ===================================================================
   NOME DO REMETENTE LEGIVEL SOBRE A FOTO, NO TELEMOVEL (19/08/2026)
   ===================================================================
   Relato: "nas fotos compridas o nome ficou ilegivel". Medido no telemovel: o
   nome ESTA onde sempre esteve — `position: absolute`, a 6px do topo do balao,
   por cima da imagem, em branco com sombra. O que muda numa foto comprida e o
   que fica POR BAIXO dele: a foto em pe e desenhada como recorte (`cover`), e
   ao subir o teto de altura de 27dvh para 46dvh (pedido anterior, "fotos em pe
   pequenas demais") a faixa visivel passou a ser outra. Se essa faixa for
   clara, texto branco com sombra desaparece.

   A correcao nao mexe no nome nem no tamanho da foto: poe por baixo dele o
   MESMO degrade que a mídia ja usa no rodape para sustentar o horario (procure
   por `linear-gradient` no bloco acima), agora virado para baixo. Assim o nome
   se le sobre qualquer imagem, comprida ou nao, sem depender da sorte do
   recorte.

   `:has(> .acl-media-sender)` porque nem toda foto mostra nome (Base.vue so o
   desenha em conversa de grupo e afins) — sem a condicao, aparecia uma faixa
   escura no topo de fotos que nao tem nada la para sustentar. O `>` esta certo
   aqui: o nome E filho direto da bolha; o frame e que fica dois niveis abaixo,
   por causa do wrapper `div.min-w-0.break-words`. */
@media (max-width: 767px) {
  .message-bubble-container
    .acl-image-bubble:has(> .acl-media-sender)
    > div.min-w-0.break-words
    > .acl-image-bubble__asset-frame::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    display: block;
    height: min(44px, 100%);
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    content: '';
    pointer-events: none;
  }

  /* A foto sem legenda volta a reservar uma linha para o nome no topo da
     bolha. O nome continua com `width: 0` + `min-width: 100%`: assim ele ocupa
     a largura definida pela foto sem alargar a mídia quando for comprido. */
  .message-bubble-container
    .aceleres-bubble-surface
    [data-bubble-name='image'].acl-image-bubble:not(
      :has(> div.min-w-0.break-words > .acl-image-bubble__caption)
    )
    > .acl-media-sender {
    position: static !important;
    inset: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 8px 10px !important;
    overflow: hidden !important;
    color: #111827 !important;
    background: transparent !important;
    line-height: 18px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    white-space: nowrap !important;
  }

  /* O degradê superior só sustenta texto sobreposto. Sem legenda o nome está
     acima da foto, portanto a imagem não deve conservar uma faixa escura. */
  .message-bubble-container
    .acl-image-bubble:not(
      :has(> div.min-w-0.break-words > .acl-image-bubble__caption)
    ):has(> .acl-media-sender)
    > div.min-w-0.break-words
    > .acl-image-bubble__asset-frame::before {
    display: none !important;
  }
}