/* Estilos complementares ao Tailwind (CDN).
   Mantidos enxutos: o grosso do layout vem das classes utilitarias. */

:root {
  --brand: #0b8761;
}

html,
body {
  height: 100%;
}

textarea#message-input {
  line-height: 1.4;
}

/* Barra de rolagem discreta no chat */
.chat-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.chat-scroll::-webkit-scrollbar {
  width: 6px;
}
.chat-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
}

/* Indicador de carregamento do HTMX */
.htmx-indicator {
  display: none;
}
.htmx-request #typing-indicator,
#typing-indicator.htmx-request {
  display: block;
}

/* Fundo estilo WhatsApp (padrao sutil) */
.bg-chat-bg {
  background-color: #efeae2;
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
}

[data-theme='dark'] .bg-chat-bg {
  background-color: #0b141a;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Animacao de entrada das mensagens */
#messages > div {
  animation: bubble-in 0.18s ease-out;
}
@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}