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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.message-bubble-container
  :is(
    [data-bubble-name='gif'].acl-video-bubble,
    [data-bubble-name='gif'].acl-gif-bubble
  ) {
  width: fit-content !important;
  max-width: min(220px, calc(100vw - 48px)) !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__player, .acl-video-bubble__player--gif) {
  max-height: min(300px, 42vh) !important;
  overflow: hidden !important;
  background: transparent !important;
}

.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__asset, video) {
  max-width: 100% !important;
  max-height: min(300px, 42vh) !important;
  object-fit: contain !important;
  background: transparent !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;
}

/* Só no GIF: respiro extra embaixo do nome (pedido 2026-08-10). O vídeo
   mantém o padding padrão da regra acima. */
.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 {
  padding: 10px 14px 25px !important;
}

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

.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) {
  .message-bubble-container
    :is(
      [data-bubble-name='gif'].acl-video-bubble,
      [data-bubble-name='gif'].acl-gif-bubble
    ) {
    max-width: min(220px, calc(100vw - 32px)) !important;
  }

  .message-bubble-container
    [data-bubble-name='gif']
    :is(.acl-video-bubble__player, .acl-video-bubble__player--gif) {
    width: min(68vw, 220px) !important;
    max-height: min(300px, 42dvh) !important;
  }

  .message-bubble-container
    [data-bubble-name='gif']
    :is(.acl-video-bubble__asset, video) {
    max-height: min(300px, 42dvh) !important;
  }

  .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.
   ======================================================================== */
.message-bubble-container .acl-image-bubble {
  box-sizing: border-box !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(408px, calc(100vw - 48px)) !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;
}

.message-bubble-container .acl-image-bubble > div.relative {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 344px !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background: #fff !important;
}

.message-bubble-container .acl-image-bubble__asset-frame {
  max-height: 344px !important;
  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;
}

.message-bubble-container .acl-image-bubble > div.relative > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  background: #fff !important;
  border-radius: 0 !important;
}

.message-bubble-container .acl-image-bubble:has(> div.min-w-0.break-words > .acl-image-bubble__caption)
  > div.relative {
  width: 100% !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. */
.message-bubble-container .acl-image-bubble
  > div.min-w-0.break-words
  > .acl-image-bubble__caption,
.message-bubble-container .acl-video-bubble
  > div.min-w-0.break-words
  > .acl-video-bubble__caption {
  width: 0 !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

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

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

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

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

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

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

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

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

@media (max-width: 640px) {
  .message-bubble-container .acl-image-bubble,
  .message-bubble-container .acl-text-bubble--with-media {
    max-width: calc(100vw - 32px) !important;
  }

  .message-bubble-container .acl-image-bubble > div.relative > img {
    max-height: min(344px, 52vh) !important;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* #app ocupa todo o body/viewport igual /login.
   IMPORTANTE: html tem zoom:0.8 (vindo do DASHBOARD_SCRIPTS); unidades vh
   NÃO se ajustam ao zoom e geram espaço em branco no rodapé. Por isso
   usamos cadeia de height:100% em vez de 100vh (mesmo motivo do comentário
   em /aceleres-meta-status-banner.js linhas 65-66). */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
#app {
  height: 100%;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

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

/* Inner Vue root (#app filho de #app — Vue 3 monta DENTRO do placeholder,
   App.vue tem id="app" no template, então temos dois #app aninhados). */
div#app > div#app {
  flex: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}
/* Dashboard.vue wrapper (irmão do banner/snackbar dentro do inner #app)
   precisa de altura definida pra propagar h-full pros filhos. flex-grow
   sozinho às vezes não basta pra % heights resolverem. */
#app > div.flex.flex-grow.overflow-hidden {
  height: 100%;
  min-height: 0;
  flex: 1 1 0%;
}
/* Cadeia até o painel da conversa. */
main.flex.flex-1.h-full.w-full.min-h-0.px-0.overflow-hidden.bg-n-surface-1 {
  height: 100% !important;
  min-height: 0;
}
section.painel-atendimento {
  height: 100% !important;
  min-height: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Ocultar Carteirização somente no topbar lateral. A rota e o elemento
   continuam disponíveis no código para acesso direto ou reativação futura. */
#aceleres-topbar [data-acl-carteirizacao="1"],
#aceleres-topbar a[href*="/carteirizacao"],
#aceleres-topbar a[href*="/carterizacao"] { display: none !important; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Aceleres: fallback explicito para a ponta dos bubbles recebidos. O estilo
   do componente tambem define o pseudo-elemento, mas este override fica por
   ultimo na cascata e garante que a ponta exista, seja visivel e mantenha o
   mesmo branco da bolha quando o bundle antigo ainda estiver em cache. */
.message-bubble-container .left-bubble {
  position: relative !important;
  overflow: visible !important;
  border-top-left-radius: 0 !important;
}
.message-bubble-container .aceleres-bubble-surface {
  overflow: visible !important;
}
.message-bubble-container
  .aceleres-bubble-surface
  > .left-bubble::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  z-index: 3 !important;
  width: 18px !important;
  height: 10px !important;
  left: -9px !important;
  top: 0 !important;
  background-color: #fff !important;
  pointer-events: none !important;
  clip-path: polygon(100% 0, 50% 100%, 0 12%, 0 0) !important;
}

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

/* Aceleres: balões podem CRESCER até 100% da linha (em vez do cap de 32rem
   do max-w-lg ≈ 512px) MAS continuam shrink-to-fit pra texto curto.
   Pré-requisito: o wrapper `<div class="grid gap-x-2 ...">` em Message.vue
   só recebe `w-full` pra variante EMAIL. Pra mensagens normais ele
   encolhe pra content-size, então qualquer cap em % no balão virava % de
   "nada útil" — texto longo quebrava em várias linhas dentro do balão
   estreito em vez do balão crescer. Forçamos w-full no grid pro 1fr
   representar a linha real.
     1) `.grid` filho de message-bubble-container: width 100%
     2) `.aceleres-bubble-with-actions`: max-width 100% (sem cap adicional;
        tipos com limite próprio — texto, imagem, mobile — seguem as regras
        mais específicas abaixo)
     3) `.left-bubble / .right-bubble`: max-width 100% (libera max-w-lg)
   Display default (inline-block + inline-flex) preservado pra shrink
   continuar funcionando p/ texto curto. (pedido 2026-07-01) */
.message-bubble-container > div.grid {
  width: 100% !important;
}
div.\[grid-area\:bubble\] > .aceleres-bubble-with-actions {
  max-width: 100% !important;
}
/* Imagens e álbuns de imagem tem 420px como TETO, nao como largura fixa: a
   bolha encolhe junto com a foto. Uma foto vertical bate no teto de altura
   (344px) e fica mais estreita que 420px — com largura fixa sobrava um vao
   de fundo a direita da imagem, com o horario solto no meio dele. */
.message-bubble-container[data-attachment-type='image']
  div.\[grid-area\:bubble\]
  > .aceleres-bubble-with-actions:has(
    [data-bubble-name='image'],
    [data-bubble-name='image-album']
  ) {
  width: fit-content !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
  flex: 0 1 auto !important;
}
div.\[grid-area\:bubble\] .left-bubble,
div.\[grid-area\:bubble\] .right-bubble {
  max-width: 100% !important;
}

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

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

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

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

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

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

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

/* Aceleres: thumbnails de imagem/vídeo nos balões caem pro tamanho
   tipo WhatsApp, com espaço suficiente no desktop. O clique no bubble já abre
   o GalleryView (lightbox) — definido em Image.vue / Video.vue. Aqui
   só CAPAMOS a renderização inline pra não ocupar a linha inteira.
   width/height auto destrava o intrínseco do <img> (HTML attrs) que
   estava forçando full size; max-width/height fazem o cap real.
   (pedido 2026-07-01) */
.message-bubble-container [data-bubble-name='image'] > div.relative > img {
  width: auto !important;
  height: auto !important;
  max-width: min(400px, 100%) !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  cursor: pointer;
  display: block;
}

/* 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) {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(408px, 100%) !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;
    max-width: min(50%, 408px) !important;
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }

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

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

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

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

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

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

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

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

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

   Truque: .reply-box vira flex row. O ReplyBottomPanel outer
   (div.flex.justify-between.px-3.py-2) recebe `display: contents` pra
   os children dele (.left-wrap e .right-wrap) virarem flex-items diretos
   do .reply-box. Depois `order` posiciona: left-wrap (-1) → editor (0)
   → right-wrap (10).
   ================================================================= */
/* Aceleres 2026-07-01: reply-box replicado byte-a-byte do #atalhosInputRow
   (.jc-input-row de /atalhos-rapidos) — mesma pílula, mesmo padding, mesmo
   column-gap, mesma altura natural. Referência: public/css/jc-input-row.css
   no repo aceleres_novo. */
@media (min-width: 768px) {
  .conversation-details-wrap.chat-whats .acl-conversation-composer-shell,
  .conversation-details-wrap.chat-whats
    .acl-conversation-composer-shell.bg-n-surface-1,
  .conversation-details-wrap.chat-whats .acl-conversation-mobile-composer,
  .conversation-details-wrap.chat-whats .resizable-editor-wrapper {
    background: transparent !important;
    background-color: transparent !important;
  }
}

div.reply-box {
  margin: 0 0.5rem 0.5rem !important; /* mantém mx-2 mb-2 original */
  padding: 6px 10px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 50px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  transition: none !important;
}
.dark div.reply-box {
  background: #2c2c2c !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
div.reply-box:focus-within,
div.reply-box:hover {
  border-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
.dark div.reply-box:focus-within,
.dark div.reply-box:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}
div.reply-box.is-private {
  background: #fffbeb !important;
}

/* Editor: fica no meio da linha, cresce ocupando o restante. */
div.reply-box .reply-box__top {
  grid-column: 2 !important;
  grid-row: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  align-self: stretch !important;
  position: relative !important;
  z-index: 1 !important;
}

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

/* Left-wrap / right-wrap vivem na mesma linha do editor. */
div.reply-box .left-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  background-color: transparent !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  margin-bottom: 0 !important;
  z-index: 2 !important;
}

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

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

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

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

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

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

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

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

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

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

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

/* Mic button (right-wrap) — SEM background, ícone PRETO, MAIOR e com
   MAIS PADDING LATERAL (pill oval em vez de círculo fechado). */
div.reply-box .right-wrap .wa-action-btn--mic {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
div.reply-box .right-wrap .wa-action-btn--mic:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.08) !important;
  background-color: rgba(15, 23, 42, 0.08) !important;
  filter: none !important;
}
div.reply-box .right-wrap .wa-action-btn--mic i {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  color: #000000 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0.6px 0 0 currentColor)
    drop-shadow(-0.6px 0 0 currentColor)
    drop-shadow(0 0.6px 0 currentColor)
    drop-shadow(0 -0.6px 0 currentColor) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Body wrapper — normaliza o EmojiInput embutido (o componente foi
   feito pra abrir flutuando; aqui vai EMBUTIDO). Mesmo shape do
   MessageContextMenu.vue `.aceleres-emoji-picker-body :deep(...)`. */
.aceleres-emoji-picker-card .aceleres-emoji-picker-body {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  z-index: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.aceleres-emoji-picker-card .aceleres-emoji-picker-body .emoji-dialog > .flex.flex-col {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}
/* Aceleres 2026-07-01: cap de altura do emoji-picker-card + scroll interno
   no grid pra caber DENTRO da MessagesView (.scrollbar-thin). O grid é
   quem rola; footer (tabs) + search continuam visíveis fixos. */
.aceleres-emoji-picker-card {
  height: 280px !important;
  max-height: 280px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===================================================================
   Aceleres 2026-07-01: texto das mensagens (bubble) em 15,8px.
   O <p> do conteúdo vem do MessageFormatter dentro de .prose-bubble
   (FormattedContent.vue / Text/Index.vue), cuja base é 12px. Bump pra
   melhorar legibilidade. .prose-bubble só existe em bubbles de
   mensagem (Text/Email/Template) — não afeta lista de conversas nem headers.
   2026-08-10: 15px -> 15,8px, alinhado ao corpo de texto das legendas
   de imagem/vídeo. Títulos (nome do remetente) ficam em 16,2px, no
   senderNameClass de Base.vue.
   =================================================================== */
.prose-bubble p {
  font-size: 15.8px !important;
}

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

/* 1) tamanho e posição do smile, sem pop no hover */
.message-bubble-container:hover .aceleres-bubble-smile,
.aceleres-bubble-smile:hover,
.aceleres-bubble-smile:focus,
.aceleres-bubble-smile.is-active,
.aceleres-bubble-forward {
  /* Em midia muito alta (fotos/screenshots verticais grandes), 50% da
     bolha inteira jogava o botao flutuando solto no meio da imagem. O
     clamp trava a distancia maxima do topo, mantendo o centro so em
     bolhas curtas. */
  top: clamp(24px, 50%, 200px) !important;
  width: 26px !important;
  height: 26px !important;
  transform: translateY(-50%) !important;
  filter: none !important;
}

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

/* Em fotos/videos grandes o wrapper as vezes calcula uma largura um pouco
   menor que a midia renderizada, e o smile (que se posiciona a partir da
   borda do wrapper) acaba encostando/cortando no canto da imagem. Mais
   respiro resolve sem depender do calculo exato de largura. */
.aceleres-bubble-smile.is-left-bubble {
  margin-left: 22px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .acl-whatsapp-mobile-scope
    div.reply-box
    .left-wrap
    .acl-plus-wrap
    > button::before {
    content: '' !important;
    width: 28px !important;
    height: 28px !important;
    background-color: #111827 !important;
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .acl-whatsapp-mobile-scope
    div.reply-box:has(.aceleres-emoji-picker-card.acl-inline-picker)
    .acl-composer-emoji
    .i-ph-smiley-sticker {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 16h8'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 16h8'/%3E%3C/svg%3E") !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  html.acl-mobile-chatlist-panel
    .acl-pill-actions--mobile-search
    .acl-pill-action-btn:last-child::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.acl-video-bubble__player,
.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) {
  .acl-whatsapp-mobile-scope .acl-video-bubble__player,
  .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__asset,
  .acl-whatsapp-mobile-scope
    .acl-media-chip--video
    .acl-media-chip__asset {
    max-height: 52dvh !important;
    object-fit: contain !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.right-bubble[data-bubble-name='audio']:has(.acl-forwarded-label)
  .aceleres-audio-avatar-wrap::before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background: #ffffff;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 1440px) {
  .painel-atendimento .contact-details-modal-overlay {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: min(100%, 990px) !important;
    height: 100% !important;
    flex: 0 0 min(100%, 990px) !important;
    align-self: stretch !important;
  }

  .painel-atendimento .contact-details-modal-container {
    width: min(100%, 990px) !important;
    max-width: 100% !important;
    height: 100% !important;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.message-bubble-container .acl-sticker-bubble > div.relative > img {
  display: block !important;
  width: 190px !important;
  height: 190px !important;
  max-width: 190px !important;
  max-height: 190px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Aceleres: horario abaixo do sticker (nao mais sobreposto em cima da
   imagem) - 10px de espaco, fundo esverdeado sutil, texto cinza igual
   o resto das mensagens. Fica fora do quadro de 190x190 do sticker. */
.message-bubble-container .acl-sticker-bubble
  > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
  position: static !important;
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 10px !important;
  margin-inline-start: auto !important;
  z-index: 6 !important;
  gap: 3px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: #6b7280 !important;
  background: rgba(45, 130, 65, 0.12) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

/* GIFs that arrive as image/webp or image/gif use the same compact media
   canvas as video GIFs, while preserving the normal bubble tail. */
.message-bubble-container .acl-gif-bubble {
  box-sizing: border-box !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(360px, calc(100vw - 48px)) !important;
  overflow: visible !important;
}

.message-bubble-container .acl-gif-bubble > div.relative {
  display: flex !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;
}

.message-bubble-container .acl-gif-bubble > div.relative > img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(480px, 62vh) !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;
  }

  .message-bubble-container .acl-gif-bubble {
    max-width: calc(100vw - 32px) !important;
  }

  .message-bubble-container .acl-gif-bubble > div.relative {
    width: min(82vw, 360px) !important;
    max-height: 52dvh !important;
  }

  .message-bubble-container .acl-gif-bubble > div.relative > img {
    max-height: 52dvh !important;
  }
}

/* Aceleres: GIFs y stickers deben conservar el canvas transparente de
   WhatsApp. El fondo #111 se usaba como letterbox para videos normales, pero
   en GIFs/stickers se veía como un bloque negro al pasar el mouse. También
   reducimos el tamaño para que no dominen la conversación. */
.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;
}

.message-bubble-container .acl-gif-bubble {
  max-width: min(220px, calc(100vw - 48px)) !important;
  background: transparent !important;
}

.message-bubble-container .acl-gif-bubble > div.relative {
  width: min(220px, 24vw) !important;
  max-height: min(300px, 42vh) !important;
  background: transparent !important;
}

.message-bubble-container .acl-gif-bubble > div.relative > img {
  max-height: min(300px, 42vh) !important;
  background: transparent !important;
}

.message-bubble-container [data-bubble-name='gif'].acl-video-bubble {
  background: transparent !important;
}

.message-bubble-container
  [data-bubble-name='gif']
  .acl-video-bubble__player {
  width: min(220px, 24vw) !important;
  max-height: min(300px, 42vh) !important;
  background: transparent !important;
}

.message-bubble-container
  [data-bubble-name='gif']
  .acl-video-bubble__asset {
  max-height: min(300px, 42vh) !important;
  background: transparent !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;
  }

  .message-bubble-container .acl-gif-bubble {
    max-width: min(68vw, 220px) !important;
  }

  .message-bubble-container .acl-gif-bubble > div.relative {
    width: min(68vw, 220px) !important;
    max-height: min(300px, 42dvh) !important;
  }

  .message-bubble-container .acl-gif-bubble > div.relative > img {
    max-height: min(300px, 42dvh) !important;
  }

  .message-bubble-container
    [data-bubble-name='gif']
    .acl-video-bubble__player {
    width: min(68vw, 220px) !important;
    max-height: min(300px, 42dvh) !important;
  }

  .message-bubble-container
    [data-bubble-name='gif']
    .acl-video-bubble__asset {
    max-height: min(300px, 42dvh) !important;
  }
}

/* Late media guard: these declarations intentionally live after the legacy
   media rules above so the old #111 GIF canvas cannot win the cascade. */
.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,
.message-bubble-container .acl-gif-bubble,
.message-bubble-container .acl-gif-bubble > div.relative,
.message-bubble-container .acl-gif-bubble > div.relative > img,
.message-bubble-container [data-bubble-name='gif'].acl-video-bubble,
.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__player, .acl-video-bubble__asset, video) {
  background: transparent !important;
}

.message-bubble-container .acl-sticker-bubble > div.relative > img {
  max-width: 180px !important;
  max-height: min(180px, 30vh) !important;
}

.message-bubble-container .acl-gif-bubble,
.message-bubble-container [data-bubble-name='gif'].acl-video-bubble {
  max-width: min(220px, calc(100vw - 48px)) !important;
}

/* A largura do player do GIF é decidida em aceleres-desktop-media-fix.css
   (100% da bolha, teto de 360px). Existia aqui um bloco igual, mas era código
   morto: mais abaixo neste mesmo ficheiro o bloco dos 180px redefine o mesmo
   seletor, e por vir depois com a mesma especificidade era sempre ele a
   ganhar. Ficava a parecer que o 100% estava aplicado quando não estava. */

.message-bubble-container .acl-gif-bubble > div.relative > img,
.message-bubble-container
  [data-bubble-name='gif']
  :is(.acl-video-bubble__asset, video) {
  max-height: min(300px, 42vh) !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  .message-bubble-container .acl-sticker-bubble > div.relative > img {
    max-height: min(180px, 30dvh) !important;
  }

  .message-bubble-container .acl-gif-bubble,
  .message-bubble-container [data-bubble-name='gif'].acl-video-bubble {
    max-width: min(68vw, 220px) !important;
  }

  .message-bubble-container .acl-gif-bubble > div.relative,
  .message-bubble-container
    [data-bubble-name='gif']
    :is(.acl-video-bubble__player, .acl-video-bubble__player--gif) {
    width: min(68vw, 220px) !important;
    max-height: min(300px, 42dvh) !important;
  }
}
/* 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;
}

.message-bubble-container .acl-gif-bubble > div.relative,
.message-bubble-container .acl-gif-bubble > div.relative > img {
  width: min(240px, 70vw) !important;
  max-width: 240px !important;
  max-height: 320px !important;
}

/* Keep the incoming WhatsApp tail inside the conversation column instead of
   letting the left edge clip it. Stickers intentionally stay flush because
   they have no bubble tail. */
.message-bubble-container .left-bubble:not(.acl-sticker-bubble) {
  margin-left: 12px !important;
}

/* Media messages carry their sender and time directly over the asset, like
   WhatsApp. Keep the timestamp readable without the dark rounded capsule. */
.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > .acl-media-sender {
  position: absolute !important;
  top: 8px !important;
  left: 9px !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
  height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2'] {
  z-index: 20 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2'] time {
  font-weight: 700 !important;
}

/* A metadada da mídia fica legível sobre a imagem sem criar uma faixa lateral. */
.message-bubble-container
  .right-bubble:is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2'] {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

/* Sender labels stay on the left inside both bubbles, as in the original
   WhatsApp layout. Outgoing bubbles get extra space above the name. */
.message-bubble-container .left-bubble > .acl-sender-name {
  padding-left: 0 !important;
  text-align: left !important;
}

.message-bubble-container .right-bubble > .acl-sender-name {
  padding-top: 10px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.message-bubble-container .right-bubble > .acl-media-sender {
  right: auto !important;
  left: 6px !important;
}

.message-bubble-container
  [data-bubble-name='attachment'].acl-file-bubble
  > .acl-sender-name {
  padding-top: 8px !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  text-align: left !important;
}

/* The media component samples the top and bottom of the asset so sender and
   timestamp remain black on light media and white on dark media. */
.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > .acl-media-sender {
  left: 6px !important;
  padding: 0 !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='gif'], [data-bubble-name='sticker'])[data-sender-tone='light']
  > .acl-media-sender {
  color: #111827 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='gif'], [data-bubble-name='sticker'])[data-sender-tone='dark']
  > .acl-media-sender {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

.message-bubble-container[data-attachment-type]
  :is([data-bubble-name='image'], [data-bubble-name='gif'], [data-bubble-name='sticker']):has(img)
  > div[class~='absolute'][class~='right-2'] {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])[data-time-tone='light']
  > div[class~='absolute'][class~='right-2'] {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])[data-time-tone='dark']
  > div[class~='absolute'][class~='right-2'] {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

/* Aceleres: horário (elemento <time>) sempre com a mesma cor, em qualquer
   tipo de bolha (texto, imagem, vídeo, gif, sticker, anexo). Fixando a cor
   direto no <time>, ela ganha por herança de qualquer regra acima que só
   define color no wrapper ancestral (.right-2) — inclusive da leitura
   clara/escura por pixel, que ficava inconsistente. */
.message-bubble-container time {
  color: rgb(0, 0, 0, .6) !important;
  text-shadow: none !important;
}

/* Aceleres: imagem e vídeo SEM legenda têm o horário sobreposto por cima da
   própria mídia — ali o preto da regra acima fica ilegível. Nesses casos o
   horário vai a branco, com sombra escura para continuar legível também
   sobre mídia clara. Havendo legenda, o horário cai na faixa de texto do
   balão e mantém o preto padrão, por isso o :not(:has(...)) testa
   exatamente o elemento de legenda que Image.vue/Video.vue só renderizam
   quando há texto. Figurinha fica de fora: continua no preto.
   GIF entrou junto (pedido 2026-08-10): ele também é mídia com o horário
   sobreposto, e no preto ficava ilegível por cima da animação. */
.message-bubble-container
  :is(
    [data-bubble-name='image'],
    [data-bubble-name='video'],
    [data-bubble-name='gif']
  ):not(
    :has(
        > div.min-w-0.break-words
          > :is(.acl-image-bubble__caption, .acl-video-bubble__caption)
      )
  )
  time {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check'],
.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check-check']:not([class~='text-[#7EB6FF]']) {
  color: #637960 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  > div[class~='absolute'][class~='right-2']
  > span[class*='i-lucide-clock-'] {
  color: #fff !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: #9ca3af !important;
  filter: none !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > div[class~='absolute'][class~='right-2']
  > span[class~='text-[#7EB6FF]'] {
  color: #7eb6ff !important;
  filter: none !important;
}

/* Aceleres: tick de enviado (1) e entregue (2, cinza) com a mesma cor em
   qualquer tipo de bolha — texto, arquivo, áudio (mídia acima já tem regra
   própria, mais específica, com a mesma cor). Lido (2 ticks azuis) não é
   tocado. */
.message-bubble-container
  [class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check'],
.message-bubble-container
  [class~='absolute'][class~='right-2']
  > span[class~='i-lucide-check-check']:not([class~='text-[#7EB6FF]']) {
  color: #637960 !important;
}

.message-bubble-container
  :is([data-bubble-name='image'], [data-bubble-name='video'], [data-bubble-name='gif'], [data-bubble-name='sticker'])
  .aceleres-bubble-chevron {
  color: black !important;
  /* filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) !important; */
}

.aceleres-bubble-chevron {
  transform: translateX(8px);
  transition:
    opacity 0.12s,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.12s,
    filter 0.12s;
}

.aceleres-bubble-surface:hover .aceleres-bubble-chevron,
.aceleres-bubble-chevron:focus-visible {
  transform: translateX(0);
}

/* Incoming WhatsApp media stays compact: photos use their native visual area,
   while stickers and GIFs never become a full-width card or video player. */
.message-bubble-container .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable']),
.message-bubble-container .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable']) > div.relative,
.message-bubble-container .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable']) img {
  max-width: min(180px, calc(100vw - 64px)) !important;
}

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

.message-bubble-container .acl-gif-bubble,
.message-bubble-container [data-bubble-name='gif'].acl-video-bubble {
  max-width: min(180px, calc(100vw - 64px)) !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) {
  width: min(180px, calc(100vw - 64px)) !important;
  max-width: 100% !important;
  max-height: 240px !important;
  object-fit: contain !important;
}

/* GIFs usam uma área visual única no chat, sem esticar, recortar ou variar
   conforme a resolução do arquivo original. */
.message-bubble-container .acl-gif-bubble,
.message-bubble-container .acl-gif-bubble > div.relative {
  width: min(180px, calc(100vw - 64px)) !important;
  height: min(180px, calc(100vw - 64px)) !important;
  max-width: min(180px, calc(100vw - 64px)) !important;
  max-height: min(180px, calc(100vw - 64px)) !important;
}

.message-bubble-container .acl-gif-bubble > div.relative > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

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

/* 420px e o TETO da foto, nao a largura fixa. A altura continua limitada a
   344px: quando esse teto e quem manda (foto vertical), a largura cai junto
   e a bolha acompanha, sem sobrar fundo ao lado da imagem. */
.message-bubble-container
  .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable']) {
  width: fit-content !important;
  max-width: min(86vw, 420px) !important;
}

.message-bubble-container
  .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable'])
  > div.relative {
  width: fit-content !important;
  max-width: 100% !important;
}

.message-bubble-container
  .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable'])
  img:not(.cw-emoji) {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 344px !important;
  object-fit: contain !important;
}

.message-bubble-container
  .acl-image-bubble.acl-image-bubble--vertical:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable'])
  img.acl-image-bubble__asset--vertical {
  width: 100% !important;
  height: 344px !important;
  max-width: 100% !important;
  max-height: 344px !important;
  object-fit: contain !important;
}

.message-bubble-container
  .acl-image-bubble.acl-image-bubble--vertical.acl-image-bubble--extreme-vertical:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable'])
  img.acl-image-bubble__asset--extreme-vertical {
  width: 420px !important;
  height: 344px !important;
  max-width: 420px !important;
  max-height: 344px !important;
  object-fit: cover !important;
}

.message-bubble-container
  .acl-image-bubble.acl-image-bubble--vertical.acl-image-bubble--extreme-vertical:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable']):has(> div.min-w-0.break-words > .acl-image-bubble__caption)
  img.acl-image-bubble__asset--extreme-vertical {
  width: 100% !important;
  height: 344px !important;
  max-width: 100% !important;
  max-height: 344px !important;
  object-fit: cover !important;
}

.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) {
  .message-bubble-container
    .acl-image-bubble:not(.acl-sticker-bubble):not(.acl-gif-bubble):not([data-media-state='unavailable']),
  .message-bubble-container [data-bubble-name='image-album'] {
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* O nome do remetente fica acima do vídeo, fora da imagem, como nas fotos. */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > .acl-media-sender {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 5px !important;
  overflow: visible !important;
  color: #000000 !important;
  background: transparent !important;
  font-weight: 700 !important;
  line-height: 0.50rem !important;
  text-align: left !important;
  text-overflow: clip !important;
  text-shadow: none !important;
  white-space: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* O nome acima da galeria de imagens usa a mesma tipografia do nome acima
   do video, com mais respiro vertical acima e abaixo do texto. */
.message-bubble-container
  [data-bubble-name='image-album']
  > .acl-media-sender {
  padding: 13px 5px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  line-height: 0.5rem !important;
  color: #000000 !important;
}

/* O horario da galeria recebida fica abaixo do mosaico, como no WhatsApp,
   em vez de sobreposto por cima da ultima miniatura. */
.message-bubble-container
  .left-bubble[data-bubble-name='image-album']
  .acl-image-album__grid
  > div:last-child {
  position: static !important;
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding: 4px 2px 0 !important;
  color: #667781 !important;
  text-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* A primeira miniatura da galeria recuperou o canto arredondado superior
   esquerdo, que ficava reto por padrao pra casar com a bolha. */
.message-bubble-container
  [data-bubble-name='image-album']
  .acl-image-album__grid
  > div:first-child {
  border-top-left-radius: 6px !important;
}

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

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble {
  border-top-left-radius: 0 !important;
}

/* Mantém visível a faixa verde inferior da bolha enviada, como nas imagens. */
.message-bubble-container
  .aceleres-bubble-surface
  .right-bubble[data-bubble-name='video'].acl-video-bubble {
  box-sizing: border-box !important;
  overflow: visible !important;
  padding-bottom: 6px !important;
  border-bottom: 0 !important;
  background: #d9fdd3 !important;
}

/* 420px e 344px sao TETO do vídeo, não a medida fixa: a bolha acompanha o
   tamanho real do arquivo, senão um vídeo pequeno era esticado e ficava
   grande demais na conversa (mesmo ajuste já feito nas fotos). */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble {
  box-sizing: border-box !important;
  position: relative !important;
  width: fit-content !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__player {
  width: fit-content !important;
  max-width: 420px !important;
  max-height: 344px !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__asset {
  width: auto !important;
  height: auto !important;
  max-width: 420px !important;
  max-height: 344px !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble:has(
    > div.min-w-0.break-words > .acl-video-bubble__caption
  )
  .acl-video-bubble__asset {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 344px !important;
  object-fit: contain !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__caption {
  padding-bottom: 1.5rem !important;
}

/* A duração e o horário permanecem juntos no rodapé da mídia. */
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  > div[class~='absolute'][class~='right-2'] {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: #fff !important;
  background: transparent !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__duration {
  bottom: 8px !important;
  z-index: 31 !important;
  color: #fff !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble:has(
    > div.min-w-0.break-words > .acl-video-bubble__caption
  )
  [class~='absolute'][class~='right-2'] time {
  color: rgb(0, 0, 0, .6) !important;
  text-shadow: none !important;
}

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

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__caption
  > button,
.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='image'].acl-image-bubble
  .acl-image-bubble__caption
  button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: inline !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  text-decoration: none !important;
  color: #1b8755 !important;
  font-weight: 700 !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='image'].acl-image-bubble
  .acl-image-bubble__caption
  > span {
  display: inline !important;
  width: auto !important;
  flex-wrap: nowrap !important;
  white-space: normal !important;
}

.message-bubble-container
  .aceleres-bubble-surface
  [data-bubble-name='video'].acl-video-bubble
  .acl-video-bubble__caption
  > button {
  margin-inline-start: 0 !important;
}