/* Estiliza o botão flutuante */
#chatbot-titulo{
	padding: 20px;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	background: #242121;
	color:white;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	position: relative;
}
/* Botão flutuante com efeito de pulso */
#chatbot-btn {
	position: fixed;
	bottom: 70px;
	right: 20px;
	background: #242121;
	color: white;
	border: none;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease-in-out;
	animation: pulse 1.5s infinite;
}

#chatbot-btn svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

@keyframes pulse {
	0% { box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); }
	50% { box-shadow: 0 0 20px rgba(0, 123, 255, 0.8); }
	100% { box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); }
}


/* Estiliza o container do chatbot */
/* Animação suave do chatbot */
#chatbot-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 360px;
	height: 480px;
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.3s ease, transform 0.3s ease;
	visibility: hidden;
}

/* Quando o chatbot estiver ativo */
#chatbot-container.active {
	opacity: 1;
	transform: scale(1);
	visibility: visible;
	z-index: 999;
}

/* Estiliza a área de mensagens */
#chatbot-messages {
	display: flex;
	flex-direction: column;
	height: 350px; 
	padding: 10px;
	overflow-y: auto; 
	font-size: 13px;
	scrollbar-width: thin; 
	scrollbar-color: #ccc transparent;
	border-bottom: 1px solid #ccc; 
}

/* 📌 Estiliza a barra de rolagem no Chrome */
#chatbot-messages::-webkit-scrollbar {
	width: 8px;
}

#chatbot-messages::-webkit-scrollbar-track {
	background: transparent;
}

#chatbot-messages::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 4px;
}

/* Estiliza o campo de entrada */
#chatbot-input {
	border: none;
	padding: 9px 9px 9px 30px;
	width: 80%; 
	margin: 0 auto; 
	display: block; 
	border: 1px solid rgb(153, 172, 194);
	border-radius: 28px;
	margin-top: 10px;
}

#close-chatbot {
	position: absolute;
	top: 15px;
	right: 10px;
	width: 28px;
	height: 28px;
	background: red;
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

#close-chatbot:hover {
	background: darkred;
	transform: scale(1.1);
}

#close-chatbot svg {
	pointer-events: none;
}


/* Adiciona espaçamento entre mensagens */
#chatbot-messages div {
	margin-bottom: 12px;
	padding: 5px 10px;
	border-radius: 5px;
	max-width: 99%;
	display: block;
	width: 94%;
}

/* Estiliza mensagens do bot */
#chatbot-messages .bot {
	background: #f1f1f1;
	align-self: flex-start;
}
#chatbot-messages .bot strong:first-of-type {
	width: auto; 
	font-weight: bold;
	text-align: left;
	margin-right: 10px;
	display: inline;
	align-items: flex-start;
}

/* Estiliza mensagens do usuário */
#chatbot-messages .user {
	background: rgb(234, 240, 246);
	color: rgb(66, 91, 118);
	align-self: flex-end;
	text-align: right;
}

/* 📌 Estiliza o crédito do desenvolvedor */
#chatbot-credit {
	text-align: center;
	font-size: 11px;
	color: #777;
	padding: 5px;
}
#chatbot-credit a {
	color: #007bff;
	text-decoration: none;
}

/* Ajusta a largura no mobile */
@media (max-width: 768px) {
	#chatbot-container {
		right: auto;
		width: 95%;
		max-width: 360px;
		height: 80vh;
		max-height: 500px; 
	}
	#chatbot-messages {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
}

/* Ajusta quando o teclado do celular aparece */
@media (max-width: 768px) {
	#chatbot-container.keyboard-active {
		height: 60vh; 
	}
}

/* Ajusta a rolagem quando o teclado aparece */
.keyboard-active #chatbot-messages {
	height: 45vh; 
}


.chat-options {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.chat-options div {
  background: #eef3f8;
  border: 1px solid #c5d4e4;
  padding: 8px 12px;
  border-radius: 6px;
  width: fit-content;
}