/* ═══════════════════════════════════════════════
   Chat — tamanho das GIFs/imagens do bot
   ═══════════════════════════════════════════════
   O bundle React (index-CwqIvZ6s.js) renderiza as imagens do chat
   com a classe:
     rounded-lg max-w-full h-auto max-h-[250px] sm:max-h-[300px] object-contain
   Isso deixa a imagem pequena quando o arquivo no CDN tem tamanho
   natural menor que 250px. Aqui forçamos largura cheia do balão
   (240px mobile / 280px desktop) e altura automática.
*/

/* Imagem dentro de balão de mensagem — largura cheia do balão.
   !important é necessário porque o React aplica max-h-[250px]
   direto na <img>, e essa classe tem mesma especificidade que a
   nossa regra. Sem !important, o React ganha (regra posterior). */
.max-w-\[280px\] img[alt="Chat image"],
.sm\:max-w-\[80\%\] img[alt="Chat image"],
.max-w-\[85\%\] img[alt="Chat image"] {
  width: 100% !important;
  height: auto !important;
  max-width: 240px !important;
  max-height: 320px !important;
}

/* Em telas >= 640px, dá um boost de largura */
@media (min-width: 640px) {
  .max-w-\[280px\] img[alt="Chat image"],
  .sm\:max-w-\[80\%\] img[alt="Chat image"],
  .max-w-\[85\%\] img[alt="Chat image"] {
    max-width: 280px !important;
    max-height: 360px !important;
  }
}