/*
  Este arquivo contém estilos personalizados para a janela de chat
  que complementam as classes do Tailwind CSS.
*/

.chat-messages-container {
  /* Garante que a barra de rolagem apareça quando o conteúdo exceder a altura */
  overflow-y: auto;
  /* Melhora a suavidade da rolagem em alguns navegadores */
  -webkit-overflow-scrolling: touch;
}

/* Estilização da barra de rolagem para navegadores Webkit (Chrome, Safari, Edge) */
.chat-messages-container::-webkit-scrollbar {
  width: 8px;
}

.chat-messages-container::-webkit-scrollbar-track {
  background-color: #f1f5f9; /* cinza claro, tailwind gray-100 */
  border-radius: 10px;
}

.chat-messages-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; /* cinza um pouco mais escuro, tailwind gray-300 */
  border-radius: 10px;
  border: 2px solid #f1f5f9;
}

.chat-messages-container::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8; /* cinza mais escuro no hover, tailwind gray-400 */
}

/* Estilização da barra de rolagem para Firefox */
@supports (scrollbar-color: #cbd5e1 #f1f5f9) {
  .chat-messages-container {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
  }
}