/* Botão do chat fixo no canto inferior direito */
#chatbot-button {
position: fixed;
bottom: -3px;
right: -3px;
cursor: pointer;
z-index: 9999;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#chatbot-button:hover {
transform: translateY(-3px) translateX(-3px);
}

/* Botão × que colapsa o widget inteiro */
.chatbot-minimize-btn {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 10px;
color: #555;
z-index: 10001;
padding: 0;
line-height: 1;
transition: background 0.15s, color 0.15s;
}

.chatbot-minimize-btn:hover {
background: #f0f0f0;
color: #222;
}

/* Botão mínimo de restaurar (estado minimizado) */
#chatbot-restore-btn {
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
background: #659531;
border: none;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
color: white;
font-size: 22px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
padding: 0;
}

#chatbot-restore-btn:hover {
transform: scale(1.1);
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}

/* JANELA DO CHAT */
#chatbot-window {
position: fixed;
bottom: 100px;
right: 120px;
width: 320px;
height: 500px;
background: #ffffff;
border: 1px solid #ccc;
border-radius: 6px;
display: none;
z-index: 10000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
transform-origin: bottom right;
}

/* Container de mensagens */
#chatbox {
height: 350px; /* deixa espaço para o input */
padding: 10px;
overflow-y: auto;
border-bottom: 1px solid #ccc;
font-family: Arial, sans-serif;
font-size: 14px;
}

/* BOLHAS DE MENSAGENS */
.chat-message {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}

/* ÍCONE AO LADO */
.message-icon {
font-size: 20px;
margin-right: 8px;
color: #6c757d; 
}

.message-text {
max-width: 70%;
padding: 8px 12px;
border-radius: 4px;
word-wrap: break-word; /* Quebra links grandes */
position: relative;
}

.user-message .message-text {
margin-left: auto;
background-color: #d4edda; /* verde claro */
}

.bot-message .message-text {
background-color: #e2e3e5; /* cinza claro */
}

/* LINKS dentro do texto */
.message-text a {
color: #007bff;
text-decoration: underline;
}
.message-text a:hover {
color: #0056b3;
text-decoration: none;
}

/* BLOCO DE CÓDIGO */
.message-text pre {
background: #f5f5f5;
border: 1px solid #ccc;
padding: 6px;
overflow-x: auto;
margin: 0.5em 0;
border-radius: 4px;
}

/* INLINE CODE */
.message-text code {
background: #f5f5f5;
border: 1px solid #ccc;
padding: 2px 4px;
border-radius: 4px;
font-family: "Courier New", monospace;
}

/* FORMULÁRIO */
#chat-form {
display: flex;
padding: 5px;
padding-left: 10px;
background-color: #f3f7f2;
}

#user-input {
flex: 1;
padding: 5px;
border: 1px solid #ccc;
}

.chat-close-button:hover {
color: #3f3d3d;
}

.chat-header {
display: flex;
align-items: center;
justify-content: flex-end; /* empurra o botão para a direita */
background-color: #f3f7f2;
border-bottom: 1px solid #ccc;
}

/* Botão de fechar */
.chat-close-button {
cursor: pointer;
color: black;
font-size: 1.2rem;
margin-left: auto; /* Extra: garante que fique no extremo direito */
margin-right: 10px;
}

#chat-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

/* Você pode manter outras propriedades existentes */
background-color: rgba(255,255,255,0.8);
border-radius: 4px;
padding: 6px 10px;
z-index: 9999;
}

/* Estilos para o balão de fala do bot */
.bot-welcome-bubble {
    position: absolute;
    bottom: 100%;
    left: 0%;
    background-color: #f1f1f1;
    border-radius: 10px;
    border: 1px solid black;
    padding: 10px;
    max-width: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s ease-in-out;
    margin-right: 15px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.bot-welcome-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border-width: 10px;
    border-style: solid;
    border-color: #f1f1f1 transparent transparent transparent;
}

/* Animações da janela do chat */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideDownFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
}

/* Animação de reaparição do botão flutuante */
@keyframes popIn {
    0%   { transform: scale(0.4); opacity: 0; }
    65%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* Animação de fade in (usada pelo balão de boas-vindas) */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.chat-entering {
    animation: slideUpFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chat-hiding {
    animation: slideDownFadeOut 0.22s ease-in forwards;
}

.chatbot-pop-in {
    animation: popIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Ajustes de responsividade para telas muito pequenas */
@media (max-width: 576px) {
/* Ajustar tamanho do botão do chat */
#chatbot-button img {
    width: 120px;
    height: 120px;
}

/* Ajustar tamanho e posição da janela do chat */
#chatbot-window {
    width: 90%;
    right: 5%;
    bottom: 130px;
    height: 60%;
}

/* Ajustar a área de mensagens caso precise */
#chatbox {
    height: calc(100% - 150px); /* 100% menos a altura do form de envio */
}

.bot-welcome-bubble {
    bottom: 110%;
    left: 0%;
    padding: 7px;
    margin-right: 7px;
}


}

/* Exemplo de ajuste para telas um pouco maiores (tablets) */
@media (max-width: 768px) and (min-width: 577px) {
#chatbot-window {
    width: 80%;
    right: 10%;
    bottom: 80px;
    height: 60%;
}

}