/* ===========================================================================
   FIGURINHAS COMO NO WHATSAPP — 29/09/2026
   A marca `data-rs-fig` na fileira e posta pelo figurinhas.js, que e onde esta
   escrito o que conta como figurinha. Aqui e so desenho.

   AS DUAS FORMAS QUE O CHATWOOT USA PARA A MESMA FIGURINHA
     conversa com cliente ... bolha de imagem  [data-bubble-name="image"]
     grupo .................. bolha de TEXTO   [data-bubble-name="text"],
                              porque o Evolution poe "**Nome:**" como texto da
                              midia; ai a imagem vira uma miniatura de 72px.
   As duas terminam iguais: sem balao, a figurinha em 190px (o tamanho do
   WhatsApp Web), e a hora numa pilula embaixo, a direita. No grupo o nome de
   quem mandou fica num balaozinho em cima, como la.

   SE A MARCA NAO VIER (erro no js, atualizacao do Chatwoot), nada daqui casa e
   a figurinha aparece como antes: imagem no balao. Falha aberta.
   =========================================================================== */

/* ---------- o balao some ---------- */
.message-bubble-container[data-rs-fig] [data-bubble-name="image"],
.message-bubble-container[data-rs-fig] [data-bubble-name="text"] {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ---------- a figurinha em 190px, inteira (contain, nunca recortada) ---------- */
.message-bubble-container[data-rs-fig] [data-bubble-name="image"] > div.relative {
  border-radius: 0 !important;
  overflow: visible !important;
}
.message-bubble-container[data-rs-fig] [data-bubble-name="image"] img,
.message-bubble-container[data-rs-fig] [data-bubble-name="text"] div[class*="size-[72px]"] img {
  display: block;
  width: 190px !important;
  height: 190px !important;
  max-width: 190px !important;
  object-fit: contain !important;
  /* O mouse atravessa a imagem e cai na moldura: e o que deixa o clique
     direito abrir o menu da mensagem (o Chatwoot ignora clique direito em
     <img>). O porque completo esta no figurinhas.js, "A IMAGEM DA FIGURINHA
     NAO RECEBE O MOUSE". */
  pointer-events: none;
}
.message-bubble-container[data-rs-fig] [data-bubble-name="image"] > div.relative,
.message-bubble-container[data-rs-fig] [data-bubble-name="text"] div[class*="size-[72px]"] {
  cursor: pointer;
}
/* Ampliar e baixar nao existem na figurinha do WhatsApp; nem o degrade que o
   Chatwoot pinta por cima ao passar o mouse. */
.message-bubble-container[data-rs-fig] [data-bubble-name="image"] img ~ div {
  display: none !important;
}

/* ---------- grupo: a miniatura de 72px cresce, o nome vira balaozinho ---------- */
.message-bubble-container[data-rs-fig] [data-bubble-name="text"] > div.flex-col {
  gap: 4px !important;
}
.message-bubble-container[data-rs-fig] [data-bubble-name="text"] div[class*="size-[72px]"] {
  width: 190px !important;
  height: 190px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  contain: none !important;
}
.message-bubble-container[data-rs-fig] [data-bubble-name="text"] > div.flex-col > .prose {
  align-self: flex-start;
  background: #ffffff;
  color: #2a2520;
  padding: 3px 9px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(74, 58, 34, 0.10);
  font-size: 12.5px;
  max-width: 260px;
}
.message-bubble-container[data-rs-fig] [data-bubble-name="text"] > div.flex-col > .prose p {
  margin: 0 !important;
}

/* ---------- resposta com citacao em cima da figurinha ---------- */
.message-bubble-container[data-rs-fig] [data-bubble-name] > div.cursor-pointer {
  margin: 0 0 4px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 1px rgba(74, 58, 34, 0.10);
  max-width: 260px;
}
.message-bubble-container.justify-end[data-rs-fig] [data-bubble-name] > div.cursor-pointer {
  background: #f5ead0 !important;
  margin-left: auto !important;
}

/* ---------- a hora: pilula embaixo, a direita ---------- */
.message-bubble-container[data-rs-fig] [data-bubble-name] > .text-xs:has(time) {
  width: fit-content;
  margin-top: 3px !important;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 1px rgba(74, 58, 34, 0.12);
}

/* ---------- tema escuro ---------- */
body.dark .message-bubble-container[data-rs-fig] [data-bubble-name="text"] > div.flex-col > .prose,
body.dark .message-bubble-container[data-rs-fig] [data-bubble-name] > div.cursor-pointer {
  background: #1e1a16 !important;
  color: #ece2d2;
  box-shadow: none;
}
body.dark .message-bubble-container.justify-end[data-rs-fig] [data-bubble-name] > div.cursor-pointer {
  background: #4e3417 !important;
}
body.dark .message-bubble-container[data-rs-fig] [data-bubble-name] > .text-xs:has(time) {
  background: rgba(30, 26, 22, 0.88);
  box-shadow: none;
}

/* ===========================================================================
   O BOTAO NA BARRA DE ESCREVER — logo depois da carinha.
   O tema.css poe a carinha em `order: 2` e da `order: 4` a qualquer botao que
   nao conhece (o piso). Esta regra (0,3,1) vence o piso (0,2,0) e deixa a
   figurinha colada na carinha, que e onde ela mora no WhatsApp.
   =========================================================================== */
.reply-box .left-wrap > button.rs-fig-botao {
  order: 2;
}
.reply-box .left-wrap > button.rs-fig-botao[data-rs-ativo] {
  color: #855b22;
}
body.dark .reply-box .left-wrap > button.rs-fig-botao[data-rs-ativo] {
  color: #dec078;
}
/* Gravando audio a barra vira o gravador: a figurinha sai, como a carinha. */
.reply-box[data-rs-gravando="1"] .rs-fig-botao {
  display: none !important;
}

/* ===========================================================================
   O PAINEL DE ENVIAR — Recentes e Favoritas, numa lista so, com os dois
   icones em cima servindo de atalho (como no WhatsApp).
   =========================================================================== */
.rs-fig-painel {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #2a2520;
  border: 1px solid #ead7a6;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(42, 37, 32, 0.18);
  overflow: hidden;
}
.rs-fig-abas {
  display: flex;
  gap: 4px;
  padding: 6px 10px 0;
  border-bottom: 1px solid #f0ebe2;
  flex: 0 0 auto;
}
.rs-fig-aba {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #6f675a;
  cursor: pointer;
}
.rs-fig-aba:hover { color: #2a2520; }
.rs-fig-aba[aria-selected="true"] { color: #855b22; }
.rs-fig-aba[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #855b22;
}
.rs-fig-lista {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: 0 10px 12px;
  position: relative;
}
.rs-fig-secao-titulo {
  margin: 12px 2px 6px;
  font-size: 13px;
  font-weight: 500;
  color: #6f675a;
}
.rs-fig-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 4px;
}
.rs-fig-item {
  aspect-ratio: 1 / 1;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.12s ease, opacity 0.12s ease;
}
.rs-fig-item:hover,
.rs-fig-item:focus-visible { background: #f4f1ea; outline: none; }
.rs-fig-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.rs-fig-item[data-rs-enviando] { opacity: 0.4; }
.rs-fig-vazio {
  margin: 0;
  padding: 6px 2px 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #6f675a;
}

body.dark .rs-fig-painel {
  background: #1e1a16;
  color: #ece2d2;
  border-color: #3b332b;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
body.dark .rs-fig-abas { border-bottom-color: #3b332b; }
body.dark .rs-fig-aba,
body.dark .rs-fig-secao-titulo,
body.dark .rs-fig-vazio { color: #b8a894; }
body.dark .rs-fig-aba:hover { color: #ece2d2; }
body.dark .rs-fig-aba[aria-selected="true"] { color: #dec078; }
body.dark .rs-fig-aba[aria-selected="true"]::after { background: #dec078; }
body.dark .rs-fig-item:hover,
body.dark .rs-fig-item:focus-visible { background: #2a241e; }

/* ===========================================================================
   O VISOR — o que abre ao clicar numa figurinha da conversa.
   Referencia do dono: a figurinha grande, "emojis • pacote" embaixo, e o
   botao "Adicionar às favoritas". So isso.
   =========================================================================== */
.rs-fig-visor {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(20, 17, 14, 0.55);
}
.rs-fig-visor-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 360px;
  max-width: calc(100vw - 32px);
  padding: 44px 48px 30px;
  border-radius: 16px;
  background: #ffffff;
  color: #2a2520;
  box-shadow: 0 18px 50px rgba(20, 17, 14, 0.35);
}
.rs-fig-visor-img {
  width: 300px;
  height: 300px;
  max-width: 70vw;
  max-height: 55vh;
  object-fit: contain;
}
.rs-fig-visor-info {
  min-height: 20px;
  margin-top: 22px;
  font-size: 14px;
  color: #6f675a;
  text-align: center;
}
.rs-fig-visor-fav {
  margin-top: 34px;
  padding: 9px 24px;
  border: 1px solid #ead7a6;
  border-radius: 999px;
  background: transparent;
  color: #855b22;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.rs-fig-visor-fav:hover:not(:disabled) { background: #f5ead0; }
.rs-fig-visor-fav:disabled { opacity: 0.5; cursor: default; }
.rs-fig-visor-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6f675a;
  cursor: pointer;
}
.rs-fig-visor-fechar:hover { background: #f4f1ea; color: #2a2520; }

body.dark .rs-fig-visor { background: rgba(0, 0, 0, 0.65); }
body.dark .rs-fig-visor-caixa { background: #1e1a16; color: #ece2d2; }
body.dark .rs-fig-visor-info { color: #b8a894; }
body.dark .rs-fig-visor-fav { border-color: #4e3417; color: #dec078; }
body.dark .rs-fig-visor-fav:hover:not(:disabled) { background: #2a241e; }
body.dark .rs-fig-visor-fechar { color: #b8a894; }
body.dark .rs-fig-visor-fechar:hover { background: #2a241e; color: #ece2d2; }

/* ---------- o aviso curto (adicionada, removida, falhou) ---------- */
.rs-fig-aviso {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 10001;
  padding: 8px 14px;
  border-radius: 8px;
  background: #2a2520;
  color: #ffffff;
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.rs-fig-aviso[data-rs-visivel] {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .rs-fig-aviso, .rs-fig-item { transition: none; }
}