/* Estilos gerais do chat */
body {
  padding-top: 20px !important; /* Empurra o conteúdo do body para baixo em 20px */
}
.chat-body-custom {
  min-height: 320px; /* Altura mínima para o corpo do chat */
  max-height: 400px; /* Altura máxima com scroll */
  overflow-y: auto; /* Adiciona scroll quando o conteúdo excede a altura máxima */
  background-color: #f8f9fa; /* Cor de fundo leve */
}
.btn-interac {
  color: #ffffff;
  background-color: #1f77ba;
  border-color: #1f77ba;
}
.btn-interac:hover {
  color: #ffffff;
  background-color: rgb(14, 73, 118);
  border-color: rgb(14, 73, 118);
}

/* Estilo para as mensagens do bot */
.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.bot-message .message-content {
  background-color: #e2e6ea; /* Cinza claro */
  color: #212529; /* Texto escuro */
  border-radius: 0.75rem; /* Borda arredondada */
  padding: 12px 15px;
  max-width: 80%; /* Largura máxima da bolha */
}

.bot-message .message-icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* Imagem circular */
  object-fit: cover; /* Garante que a imagem preencha o círculo */
  margin-right: 10px;
}

/* Estilo para as mensagens do usuário */
.user-message {
  justify-content: flex-end; /* Alinha à direita */
}

.user-message .message-content {
  background-color: #0d6efd; /* Cor primária do Bootstrap (azul) */
  color: white; /* Texto branco */
  border-radius: 0.75rem; /* Borda arredondada */
  padding: 12px 15px;
  max-width: 80%; /* Largura máxima da bolha */
}

/* Indicador de digitação */
.typing-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #6c757d; /* Cor do texto do indicador */
}

.typing-indicator .dot {
  background-color: #6c757d;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 4px;
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator .dot:nth-child(1) {
  animation-delay: -0.32s;
}
.typing-indicator .dot:nth-child(2) {
  animation-delay: -0.16s;
}
.typing-indicator .dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Estilo para a área de input (campo de texto + botão) */
#inputArea.hidden {
  display: none !important;
}

/* Estilos para os botões de opção */
.options-container {
  display: flex;
  flex-direction: column; /* Botões um abaixo do outro */
  gap: 10px; /* Espaçamento entre os botões */
  margin-top: 15px;
}

.options-container .btn {
  width: 100%; /* Botões ocupam a largura total */
  text-align: left; /* Texto alinhado à esquerda no botão */
  padding: 10px 15px;
}