/* Ações dos pills com a mesma escala e cor base dos ícones da topbar. */
.acl-pill-action-btn > span:not(.acl-pill-filter-badge) {
  width: 24px !important;
  height: 24px !important;
  background-color: currentColor !important;
}

.acl-pill-action-btn:not(.acl-pill-action-btn--active):not(
    .acl-pill-action-btn--has-filters
  ) {
  color: rgba(0, 0, 0, 0.6) !important;
}

.acl-pill-action-btn:not(.acl-pill-action-btn--active):not(
    .acl-pill-action-btn--has-filters
  ):hover {
  color: #0f172a !important;
}

.dark
  .acl-pill-action-btn:not(.acl-pill-action-btn--active):not(
    .acl-pill-action-btn--has-filters
  ) {
  color: #94a3b8 !important;
}

.dark
  .acl-pill-action-btn:not(.acl-pill-action-btn--active):not(
    .acl-pill-action-btn--has-filters
  ):hover {
  color: #f1f5f9 !important;
}

/* Keep conversation search/canned-response layers above the composer. */
.painel-atendimento .search-wrapper,
.painel-atendimento .acl-canned-backdrop {
  isolation: isolate;
  z-index: 2147483000 !important;
}

.painel-atendimento .acl-canned-backdrop {
  pointer-events: auto;
}

.painel-atendimento .acl-canned-popover {
  z-index: 1 !important;
}

.painel-atendimento .reply-box.reply-box--multi-line {
  z-index: 0 !important;
}

/* Match the tab heights and give the shorter "Lidas" label a little more room. */
.painel-atendimento .acl-inbox-read-tab {
  min-height: 40px;
}

.painel-atendimento .acl-inbox-read-tab:nth-child(2) {
  min-width: 64px;
}

/* Aceleres: sticker sempre 190x190, com hora/check em pill escura sobre a
   imagem, como no WhatsApp. Fica no último CSS carregado de propósito: os
   blocos de aceleres-overrides.css (190px) e do @media desktop de
   aceleres-desktop-media-fix.css (240px) divergiam entre si.
   Estrutura real do DOM (conferida no inspector): a bolha (.acl-sticker-bubble)
   é flex e tem 3 filhos diretos — o nome do remetente (.acl-media-sender), o
   wrapper "min-w-0 break-words" (que só então contém div.relative > img,
   DOIS níveis abaixo da bolha, não um) e a div do horário (a única com a
   classe "absolute"). As regras antigas usavam ".acl-sticker-bubble >
   div.relative" (um nível) e por isso nunca bateram com a imagem.

   O GIF saiu destas quatro regras de TAMANHO (bolha, wrapper, div.relative e
   img). Estava agrupado com a figurinha e herdava o quadro fixo de 190x190;
   como este é o último ficheiro a carregar e o seletor repete as classes para
   ganhar especificidade, nenhuma regra anterior conseguia alterar a largura do
   GIF — a de aceleres-desktop-media-fix.css (100% da bolha, teto de 360px)
   ficava sempre por baixo. A figurinha continua exatamente como estava; só o
   GIF passa a ter largura própria. As restantes regras deste ficheiro (nome do
   remetente, horário, espaçamento) mantêm os dois juntos de propósito. */
.message-bubble-container.message-bubble-container .acl-sticker-bubble.acl-sticker-bubble {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 190px !important;
  max-width: 190px !important;
  padding: 0 0 4px !important;
  overflow: visible !important;
}

.message-bubble-container.message-bubble-container .acl-sticker-bubble.acl-sticker-bubble > div.min-w-0 {
  width: 190px !important;
}

.message-bubble-container.message-bubble-container .acl-sticker-bubble.acl-sticker-bubble div.relative {
  display: flex !important;
  align-items: center !important;
  justify-content: left !important;
  width: 190px !important;
  height: 190px !important;
  max-width: 190px !important;
  max-height: 190px !important;
}

.message-bubble-container.message-bubble-container .acl-sticker-bubble.acl-sticker-bubble div.relative > img {
  width: 190px !important;
  height: 190px !important;
  max-width: 190px !important;
  max-height: 190px !important;
  object-fit: contain !important;
}

/* Mesmo padrão já usado no nome do remetente das imagens (aceleres-overrides.css,
   [data-bubble-name='image'] > .acl-media-sender): barra na largura toda,
   texto colado à esquerda. Cantos arredondados nos 4 lados + uma "flechinha"
   (triângulo, ::after) no canto de cima que aponta pro lado da bolha. */
.message-bubble-container.message-bubble-container :is(.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble) > .acl-media-sender {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  order: -1 !important;
  align-self: stretch !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  padding: 12px 34px 12px 14px !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #000 !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  text-align: left !important;
  text-shadow: none !important;
}

/* Enviada (bolha à direita): verde-WhatsApp e a flechinha no canto superior
   direito, apontando pro lado direito (mesma técnica da bolha de mensagem).
   Seletor reforçado (classe repetida + atributo) pra garantir que ganhe da
   regra base, já que ".left-bubble"/".right-bubble" sozinho como 4º nível
   de especificidade estava perdendo em alguns casos. */
.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble)[data-bubble-name].right-bubble.right-bubble
  > .acl-media-sender {
  border-radius: 8px 0 8px 8px !important;
  background: #d9fdd3 !important;
  color: #111b21 !important;
}

.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble)[data-bubble-name].left-bubble.left-bubble
  > .acl-media-sender {
  border-radius: 0 8px 8px 8px !important;
}

.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble)[data-bubble-name].right-bubble.right-bubble
  > .acl-media-sender::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: -7px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 8px solid #d9fdd3 !important;
  border-right: 8px solid transparent !important;
}

/* Recebida: padding próprio do nome, separado do padrão usado no enviado. */
.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble)[data-bubble-name].left-bubble.left-bubble
  > .acl-media-sender {
  padding: 20px 34px 20px 14px !important;
}

/* Fora da imagem, como o nome: horário numa linha própria abaixo do sticker,
   não mais sobreposto em cima da imagem. Seletor reforçado (classe repetida
   3x + atributo) pra bater a regra de aceleres-overrides.css que usa
   ":has(img)" — essa tem mais especificidade que uma versão simples e
   estava cancelando o padding/border-radius daqui. */
.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble)[data-bubble-name]
  > div.absolute.absolute {
  position: static !important;
  inset: auto !important;
  align-self: flex-end !important;
  width: fit-content !important;
  margin: 4px 0 0 !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111b21 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble)[data-bubble-name]
  > div.absolute.absolute time {
  color: rgb(0, 0, 0, .6) !important;
}

/* Enviada (bolha à direita): verde-WhatsApp, igual ao nome. */
.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble)[data-bubble-name].right-bubble
  > div.absolute.absolute {
  background: #d9fdd3 !important;
}

/* 12px de espaço entre QUALQUER mensagem (texto, gif, vídeo, sticker, etc.).
   Message.vue define isso via .acl-bubble-tight-pb (padding-bottom: 0.2rem),
   aplicado sempre que a mensagem não tem reação — ou seja, na prática quase
   sempre. Sobrescreve pra 12px de forma genérica, sem depender do tipo. */
.acl-bubble-tight-pb {
  padding-bottom: 12px !important;
}

/* Botão de menu (setinha) do sticker: sem fundo/círculo, só a seta em negrito. */
.message-bubble-container.message-bubble-container .acl-sticker-bubble.acl-sticker-bubble .aceleres-bubble-chevron {
  background: transparent !important;
  box-shadow: none !important;
  color: #000 !important;
}

/* 12px entre a pill de horário e o fim da bolha do sticker/gif (além dos
   12px genéricos entre mensagens do .acl-bubble-tight-pb acima). Usa margin
   em vez de padding: uma regra legada (:has(img), mais específica) fica
   brigando pelo padding desse elemento; margin é outra propriedade, livre
   dessa guerra de cascata. */
.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble)[data-bubble-name] {
  padding-bottom: 4px !important;
  margin-bottom: 12px !important;
}