/* 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 237.5x237.5, 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 :is(.acl-sticker-bubble.acl-sticker-bubble, .acl-emoji-bubble.acl-emoji-bubble) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  /* Pedido 2026-08-13: a largura volta a ser FIXA (190px na epoca; 237.5px desde o pedido do fim do dia). Em 12/08 ela virou
     `fit-content` com teto de 190px, para o desenho nao-quadrado nao ficar com
     fundo transparente dos lados. O efeito colateral so apareceu agora: o nome
     do remetente e esticado ate a largura da BOLHA (`align-self: stretch`, ver
     regra do `.acl-media-sender` abaixo), entao num sticker 512x768 a bolha
     caia para 127px e o nome cortava em "Fulano ..." — bem antes do que
     cortava com os 190px. Medido no repro do chromium: 190px devolvem
     "Fulano de Tal ...".

     O DESENHO nao muda: as regras de `div.relative` e da `img` logo abaixo
     seguem `fit-content` com teto de 190px, e o alinhamento continua a
     esquerda — o que sobra e caixa vazia a direita, so no sticker estreito.
     Alternativa considerada e descartada: dar 190px so ao nome e deixar a
     bolha em `fit-content`. Da o mesmo texto, mas o nome passa da bolha, e no
     sticker ENVIADO a bolha encosta na margem direita da conversa — o nome
     vazaria para fora. Custo assumido: no sticker estreito a carita de reagir,
     que se posiciona pela bolha, volta a ficar longe do desenho. */
  width: 237.5px !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: fit-content !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;
  /* Pedido 2026-08-13: 237.5x237.5 e o TAMANHO, nao so o teto. Antes a caixa era
     `fit-content` com `max-*` de 190px (a medida da epoca), entao o arquivo pequeno era desenhado
     no tamanho natural — uma figurinha de 96px saia com 96px. Com a caixa
     fixa, o desenho preenche pelo `contain` da regra da img: sobe ate 237.5 se
     for menor, para em 237.5 se for maior, sempre pela proporcao. */
  width: 237.5px !important;
  height: 237.5px !important;
}

.message-bubble-container.message-bubble-container .acl-sticker-bubble.acl-sticker-bubble div.relative > img {
  /* Preenche a caixa de 237.5x237.5 da regra acima. O `contain` garante a
     proporcao: o lado maior encosta nos 237.5px e o menor sai da conta, com o
     resto da caixa transparente — invisivel sobre o papel de parede, porque a
     figurinha nao tem fundo. E o unico jeito de "237.5 e o tamanho" valer tanto
     para arquivo menor (que sobe) quanto para maior (que para). */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  /* Pedido 2026-08-13: desenho encostado a ESQUERDA da caixa. O
     `justify-content` do quadro acima nao faz isso sozinho: a `img` ocupa a
     caixa inteira (100%/100%), entao o flex nao tem o que alinhar — quem
     decide onde o desenho fica dentro dela e o `object-position`. Os dois
     andam juntos: mudar so um deixa o desenho centrado. */
  object-position: left center !important;
  /* Pedido 2026-08-13: cantos arredondados na figurinha. 8px e o mesmo raio da
     barra do nome logo acima, para os dois lerem como uma peca so.

     Vale lembrar o efeito em figurinha NAO quadrada: a `img` ocupa a caixa
     inteira e o desenho fica dentro dela pelo `contain`, entao o arredondamento
     recorta os cantos da CAIXA. Onde sobra area transparente (o lado menor), o
     corte nao aparece — so se nota na figurinha que preenche a caixa. */
  border-radius: 8px !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-emoji-bubble.acl-emoji-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;
  /* Pedido 2026-08-13: era `display: flex` e o nome comprido cortava a seco no
     meio da letra, sem reticencias e por cima do padding direito. Motivo:
     `text-overflow: ellipsis` (abaixo) so vale para container de BLOCO — num
     container flex o texto vira um item anonimo e a propriedade nao se aplica,
     sobrando apenas o corte duro do `overflow: hidden`. Provado com os dois
     casos lado a lado no chromium headless.

     `justify-content`/`align-items` sairam junto: eram inertes fora do flex. O
     texto continua centrado na vertical porque o padding e simetrico em cima e
     embaixo (20px no sticker recebido, 12px no resto) — nao dependia deles.
     `order`/`align-self` FICAM: sao propriedades do item dentro da bolha, que
     continua flex. */
  display: block !important;
  /* Pedido 2026-08-12: `width: 0` + `min-width: 100%` (o mesmo padrao ja usado
     na legenda da foto). Agora que a bolha do sticker acompanha o desenho, um
     nome comprido voltaria a esticar a bolha ate ao teto de 190px e a carita
     de reagir — que se posiciona pela bolha — ficaria outra vez longe do
     sticker. Com largura zero o texto nao entra na largura intrinseca e so
     depois preenche a largura que o sticker definiu; o que nao couber e
     cortado com reticencias, como no WhatsApp. */
  /* `contain: inline-size` e o que resolve o caso do flex: dentro de uma bolha
     `display: flex`, um `min-width: 100%` nao tem contra o que resolver (a
     largura da bolha e `fit-content`, ou seja, depende dos filhos) e o nome
     acabava a esticar a bolha ate ao teto, afastando outra vez a carita do
     sticker. Com `contain: inline-size` a largura do nome deixa de entrar na
     conta da bolha — ele passa a ser esticado pelo `align-self: stretch` ate a
     largura que o sticker definiu, e o texto que nao couber e cortado com
     reticencias. */
  contain: inline-size !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 0 6px !important;
  /* Pedido 2026-08-20: a folga direita continua em 14px para figurinha e GIF.
     Quando a mensagem tem somente um emoji, o Text/Index.vue fornece 36px:
     8px do encosto + 24px do botao + 4px de respiro. A mesma declaracao segue
     dona do padding, sem duplicar a regra somente para o emoji. */
  padding: 12px var(--acl-menu-chevron-space, 14px) 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;
}

/* Pedido 2026-08-13: no STICKER o nome ocupa a caixa inteira, com folga de
   20px em cima e embaixo e 14px dos lados — nos DOIS sentidos da conversa.
   Só o nome: a figurinha, o quadro e o horário não são tocados aqui.

   Fica fora da regra base de propósito: aquela é compartilhada com o GIF, que
   segue com os 12px verticais dele. Este bloco é o único lugar onde a medida
   do nome do sticker é decidida. */
.message-bubble-container.message-bubble-container
  .acl-sticker-bubble.acl-sticker-bubble[data-bubble-name]
  > .acl-media-sender {
  width: 100% !important;
  height: 100% !important;
  padding: 20px 14px !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, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-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, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-bubble)[data-bubble-name].left-bubble.left-bubble
  > .acl-media-sender {
  border-radius: 0 8px 8px 8px !important;
}

/* Pedido 2026-08-13: a flechinha ("puntita") do sticker sozinho, nos DOIS
   sentidos.

   Ela morava no `::after` da BARRA DO NOME e nunca aparecia: a barra tem
   `overflow: hidden` (necessário para as reticências do nome), e o triângulo
   fica 7px fora dela — era recortado. Confirmado no chromium com a barra e o
   triângulo isolados: nada era desenhado, nem no enviado, que já tinha a regra.

   Agora é desenhada na BOLHA, que tem `overflow: visible`. Isso reativa o
   `::after` que o aceleres-desktop-media-fix/overrides desligava para o
   sticker (`display: none; content: none`) — com razão na época, porque o
   rabinho genérico usa `background-color: inherit` e a bolha do sticker é
   transparente, então saía invisível. Aqui a cor é escrita à mão, igual à da
   barra do nome: verde no enviado, branco no recebido. */
.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-bubble)[data-bubble-name].right-bubble::after,
.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-bubble)[data-bubble-name].left-bubble::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  /* Pedido 2026-08-14: a puntita saia SOLTA da barra do nome, com uma costura
     de 1px de fundo entre as duas, nos dois sentidos. A causa nao estava aqui:
     as regras base do bico (Message.vue, `.left-bubble::after` /
     `.right-bubble::after`) trazem um `clip-path` proprio -- desenhado para o
     bico ANTIGO, que era um retangulo com fundo, e nao para o triangulo de
     BORDA que este bloco monta. Como aqui so se sobrescrevia tamanho, posicao
     e cor, aquele recorte continuava valendo e cortava o triangulo pelo meio:
     sobrava uma flamula estreita, encostada so pela base e separada da barra.
     Medido no chromium, pixel a pixel: com o recorte, a coluna do encosto
     ficava com a cor do fundo; sem ele, o verde/branco corre continuo da barra
     para o bico. Zerar o clip-path e o unico ajuste necessario -- o triangulo
     de borda ja nasce com a forma certa. */
  clip-path: none !important;
}

.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-bubble)[data-bubble-name].right-bubble::after {
  right: -13px !important;
  left: auto !important;
  border-top: 14px solid #d9fdd3 !important;
  border-right: 14px solid transparent !important;
  border-left: 0 !important;
}

.message-bubble-container.message-bubble-container.message-bubble-container
  :is(.acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-bubble)[data-bubble-name].left-bubble::after {
  left: -13px !important;
  right: auto !important;
  border-top: 14px solid #ffffff !important;
  border-left: 14px solid transparent !important;
  border-right: 0 !important;
}

/* GIF recebido: padding próprio do nome — só o vertical difere do enviado
   (20px contra 12px). A folga da direita acompanha a regra base: 14px.

   O sticker SAIU deste seletor em 13/08/2026: ele passou a ter bloco próprio
   (procure por "no STICKER o nome ocupa a caixa inteira"), com os mesmos 20px
   14px. Mantê-lo aqui deixaria a mesma medida declarada em dois lugares. */
.message-bubble-container.message-bubble-container.message-bubble-container
  .acl-gif-bubble.acl-gif-bubble.acl-gif-bubble[data-bubble-name].left-bubble.left-bubble
  > .acl-media-sender {
  padding: 20px 14px 20px 14px !important;
}

/* Sticker RECEBIDO: só o padding difere do enviado — 10px em cima, 14px dos
   lados e 30px embaixo (pedido 2026-08-13). Largura, altura e o resto do
   visual continuam vindo do bloco do sticker acima; aqui não se repete nada
   além da medida que muda. */
.message-bubble-container.message-bubble-container.message-bubble-container
  .acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble[data-bubble-name].left-bubble.left-bubble
  > .acl-media-sender {
  padding: 10px 14px 30px !important;
}

/* Sticker ENVIADO: padding próprio, 10px em cima e embaixo, 14px dos lados
   (pedido 2026-08-13). Fica separado do bloco `.right-bubble` logo acima
   porque aquele é compartilhado com o GIF, que mantém os 12px verticais dele —
   e separado do bloco geral do sticker porque ali o valor é 20px, dos dois
   sentidos. Só a medida que muda vive aqui. */
.message-bubble-container.message-bubble-container.message-bubble-container
  .acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble[data-bubble-name].right-bubble.right-bubble
  > .acl-media-sender {
  padding: 10px 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, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-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, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-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, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-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 :is(.acl-sticker-bubble.acl-sticker-bubble, .acl-emoji-bubble.acl-emoji-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, .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-bubble)[data-bubble-name] {
  padding-bottom: 4px !important;
  margin-bottom: 12px !important;
}

/* ===================================================================
   Aceleres 2026-08-18: figurinha menor no CELULAR.

   A medida canônica (237,5px) mora neste ficheiro e usa a classe repetida
   (`.acl-sticker-bubble.acl-sticker-bubble`) para valer (0,4,0). Um ajuste em
   `aceleres-overrides.css` perde duas vezes: por especificidade e por ordem —
   o layout carrega este ficheiro DEPOIS daquele. Por isso a versão de celular
   fica aqui, junto da medida que ela corrige, e não espalhada noutro ficheiro.

   Vale para os três caminhos de figurinha: a estática, a vetorial (Lottie, que
   desenha num `canvas`) e o par do álbum, que herdava os mesmos 237,5px por
   tile e era a que mais saltava à vista no telemóvel.
   =================================================================== */
@media (max-width: 767px) {
  .acl-whatsapp-mobile-scope
    .message-bubble-container.message-bubble-container
    .acl-sticker-bubble.acl-sticker-bubble {
    width: 140px !important;
    max-width: min(140px, calc(100vw - 96px)) !important;
  }

  .acl-whatsapp-mobile-scope
    .message-bubble-container.message-bubble-container
    .acl-sticker-bubble.acl-sticker-bubble
    div.relative {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }

  /* O Lottie desenha num `canvas`, que tem medida própria em atributo: sem
     isto a bolha encolhia e o desenho continuava grande, a transbordar. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container.message-bubble-container
    .acl-sticker-bubble.acl-sticker-bubble
    :is(canvas, img) {
    width: 100% !important;
    height: 100% !important;
    max-width: 140px !important;
    max-height: 140px !important;
    object-fit: contain !important;
  }

  /* O nome do remetente herdava o recheio da regra genérica da mídia — aquela
     que o desenha SOBRE a foto e reserva espaço embaixo. Medido na figurinha:
     `padding: 10px 14px 30px` mais 6px de margem, ou seja 36px de folga só por
     baixo de um rótulo de 18px de entrelinha, num balão de 112px. Aqui o nome
     está numa faixa própria, acima da figurinha, e não precisa dessa reserva. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container.message-bubble-container.message-bubble-container
    .acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble[data-bubble-name]:is(
      .left-bubble.left-bubble,
      .right-bubble.right-bubble
    )
    > .acl-media-sender,
  .acl-whatsapp-mobile-scope
    .message-bubble-container.message-bubble-container.message-bubble-container
    .acl-sticker-bubble.acl-sticker-bubble.acl-sticker-bubble
    .acl-media-sender {
    /* Pedido 2026-08-18: mínimo de 5 a 10px. Os 2/4/3 da primeira tentativa
       tiraram os 30px de folga do original, mas coleram o nome na figurinha.
       6px em cima e embaixo, 8px dos lados: respira sem devolver a folga. */
    padding: 6px 8px !important;
    margin: 0 0 2px !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Par de figurinhas: dois tiles de 237,5 com 50px de vão não cabem numa tela
     de 390. O vão também aperta, senão o par fica mais largo que a conversa. */
  .acl-whatsapp-mobile-scope
    .message-bubble-container.message-bubble-container
    [data-bubble-name='sticker-album']
    .acl-sticker-album__grid {
    grid-template-columns: repeat(2, minmax(0, 122px)) !important;
    gap: 14px !important;
  }

  .acl-whatsapp-mobile-scope
    .message-bubble-container.message-bubble-container
    [data-bubble-name='sticker-album']
    :is(canvas, img) {
    max-width: 122px !important;
    max-height: 122px !important;
    object-fit: contain !important;
  }
}

/* Pedido 2026-08-19: a mensagem que e SO um emoji passa a ser desenhada como
   uma figurinha — sem fundo de bolha, com a barra do nome em cima e o horario
   na pilha propria embaixo. Quem marca a bolha e o Text/Index.vue, que emite
   `data-bubble-name="emoji"` e a classe `.acl-emoji-bubble` assim que o parse
   do twemoji confirma o emoji sozinho.

   Nao ha desenho novo neste ficheiro: a bolha de emoji entra nos MESMOS
   seletores da figurinha (caixa, barra do nome, puntita, pilha do horario,
   espacamento e chevron), que ja eram partilhados com o GIF. Repetir aquelas
   medidas aqui e o que sempre criou as brigas de cascata deste projeto — se
   uma delas mudar, muda para os tres de uma vez.

   O unico bloco proprio e este: a bolha de texto traz o fundo (`bg-white` /
   `bg-[#d9fdd3]`) e os cantos do variante pelo Base.vue, e e isso que tem de
   sair para o emoji ficar sobre o papel de parede. A figurinha nao precisa
   disto porque ja e apagada em aceleres-overrides.css. */
.message-bubble-container.message-bubble-container .acl-emoji-bubble.acl-emoji-bubble {
  --acl-menu-chevron-space: 36px;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Pedido 2026-08-19 (segunda passagem): a barra do nome sai da largura de
     FIGURINHA e passa a ter a largura do nome. O que ela herdava do bloco
     partilhado eram os 237,5px do desenho da figurinha — medida que existe
     porque a figurinha ocupa aquilo; o emoji nao. Nao ha teto novo escrito
     aqui: sem `width`, a bolha volta a obedecer o `max-w-[min(85vw,42rem)]`
     que o Base.vue ja poe em toda bolha, e o nome comprido continua a cortar
     com reticencias. O emoji em si nao muda de tamanho. */
  width: fit-content !important;
}

/* O `contain: inline-size` da barra existe para o nome NAO esticar a bolha da
   figurinha (que tem largura propria a respeitar). Na bolha de emoji e o
   contrario: e o nome que decide a largura, entao o confinamento sai — sem
   ele, `fit-content` acima nao teria o que medir e a barra encolheria ate ao
   emoji, cortando o nome na primeira letra. */
.message-bubble-container.message-bubble-container
  .acl-emoji-bubble.acl-emoji-bubble
  > .acl-media-sender {
  contain: none !important;
}

/* Pedido 2026-08-19 (terceira passagem): o emoji ao centro da barra do nome.
   O wrapper do conteudo herdava o `fit-content` da figurinha — ali ele existe
   porque o desenho tem largura propria a respeitar; aqui encolhia ate ao
   emoji, e centrar dentro de uma caixa do tamanho do proprio emoji nao move
   nada. Com a largura da bolha, o `text-align` tem sobre o que agir (o emoji
   e um `<img>` inline dentro do paragrafo). O horario nao se mexe: continua
   preso a direita pelo `align-self` da pilha. */
.message-bubble-container.message-bubble-container
  .acl-emoji-bubble.acl-emoji-bubble
  > div.min-w-0 {
  width: 100% !important;
  text-align: center !important;
}

/* A puntita e a mesma da figurinha, e por isso vinha com os 14px dela — que
   sobre esta barra, mais baixa (12px de folga contra 20px), sobrava por cima
   do nome. Aqui muda-se so a MEDIDA (e o encosto, que a acompanha): a cor, a
   forma e o lado continuam a vir do bloco partilhado, para nao haver dois
   donos do mesmo bico. 10px estao para os 42px desta barra como os 14px estao
   para os 58px da figurinha. */
.message-bubble-container.message-bubble-container.message-bubble-container
  .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-bubble[data-bubble-name].right-bubble::after {
  right: -9px !important;
  border-top-width: 10px !important;
  border-right-width: 10px !important;
}

.message-bubble-container.message-bubble-container.message-bubble-container
  .acl-emoji-bubble.acl-emoji-bubble.acl-emoji-bubble[data-bubble-name].left-bubble::after {
  left: -9px !important;
  border-top-width: 10px !important;
  border-left-width: 10px !important;
}