/* Container principal do chatbot */
.chatbot-container {
    display: flex;
    flex-direction: column; /* Muda para coluna em telas pequenas */
    background: #2c2c2c;
    border-radius: 15px;
    width: 90%;
    max-width: 900px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    animation: slideInModal 0.5s ease-out;
    position: relative; /* Para o botão absoluto se basear no container */
}

/* Imagem lateral */
.chatbot-image {
    width: 100%; /* Ocupa toda a largura em telas pequenas */
    max-height: 150px; /* Limita a altura */
    background: #1a1a1a;
    transition: transform 0.3s ease;
}

.chatbot-image:hover {
    transform: scale(1.05);
}

.chatbot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Conteúdo do chatbot */
.chatbot-content {
    padding: 15px; /* Reduz padding em telas pequenas */
    display: flex;
    flex-direction: column;
    background: #2c2c2c;
}

/* Título */
.chatbot-content h2 {
    font-size: 1.5rem; /* Tamanho reduzido para telas pequenas */
    color: #e74c3c;
    margin-bottom: 10px;
    text-align: center;
    animation: fadeInTitle 1s ease-in;
    margin-top: 40px; /* Espaço para o botão em telas pequenas */
}

/* Área de mensagens */
.chatbot-messages {
    flex: 1;
    max-height: 300px; /* Altura ajustada */
    overflow-y: auto;
    background: #3a3a3a;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #444;
}

/* Estilo das mensagens */
.message {
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.9rem; /* Fonte ajustada */
    line-height: 1.4;
    word-wrap: break-word;
    animation: fadeInMessage 0.5s ease-in;
    max-width: 85%; /* Mais espaço em telas pequenas */
}

.user-message {
    background: #3498db;
    color: #fff;
    align-self: flex-end;
    margin-left: auto;
}

.user-message strong {
    color: #fff;
}

.bot-message {
    background: #555;
    color: #fff;
    align-self: flex-start;
}

.bot-message strong {
    color: #e74c3c;
}

/* Seção de dúvidas frequentes */
.faq-section {
    margin-bottom: 15px;
}

.faq-section h3 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 8px;
    text-align: left;
}

.faq-list {
    list-style: none;
    padding: 0;
}

.faq-list li {
    margin-bottom: 6px;
}

.faq-list button {
    background: none;
    border: none;
    color: #3498db;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    padding: 4px 8px;
    transition: color 0.3s, transform 0.2s;
    width: 100%; /* Garante que o botão ocupe a largura total */
}

.faq-list button:hover {
    color: #e74c3c;
    transform: translateX(5px);
}

/* Formulário de entrada */
#chatForm {
    display: flex;
    flex-wrap: wrap; /* Permite quebra em telas muito pequenas */
    gap: 8px;
    background: #3a3a3a;
    padding: 8px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

#chatForm:hover {
    transform: translateY(-3px);
}

#chatInput {
    flex: 1;
    min-width: 0; /* Evita overflow em telas pequenas */
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    background: #4a4a4a;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    transition: background 0.3s;
}

#chatInput:focus {
    background: #555;
}

#chatInput::placeholder {
    color: #aaa;
}

.btn-chat {
    background: #e74c3c;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.btn-chat:hover {
    background: #c0392b;
    transform: scale(1.05);
}

/* Botão de fechar */
.close-chatbot-btn {
    position: absolute;
    top: 10px;
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta para o centro */
    background: #e74c3c;
    color: #fff;
    padding: 6px 12px;
    border: none;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.close-chatbot-btn:hover {
    background: #c0392b;
    transform: translateX(-50%) scale(1.1); /* Mantém centralizado no hover */
}

/* Classe para esconder o modal */
.modal.hidden {
    display: none;
}

/* Animações */
@keyframes slideInModal {
    from { transform: translateY(-100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInTitle {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInMessage {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Media Queries para responsividade */
@media (min-width: 600px) {
    .chatbot-container {
        flex-direction: row; /* Volta ao layout horizontal em telas maiores */
    }

    .chatbot-image {
        width: 150px; /* Largura fixa em telas maiores */
        max-height: none;
    }

    .chatbot-content {
        padding: 20px;
    }

    .chatbot-content h2 {
        font-size: 1.8rem;
        margin-top: 0; /* Remove o espaço extra em telas grandes */
    }

    .chatbot-messages {
        max-height: 350px;
        padding: 15px;
    }

    .message {
        font-size: 1rem;
        padding: 12px 18px;
    }

    .faq-section h3 {
        font-size: 1.2rem;
    }

    .faq-list button {
        font-size: 0.95rem;
        padding: 5px 10px;
    }

    #chatForm {
        flex-wrap: nowrap; /* Impede quebra em telas maiores */
        padding: 10px;
    }

    #chatInput {
        padding: 12px 20px;
        font-size: 1rem;
    }

    .btn-chat {
        padding: 12px 25px;
    }

    .close-chatbot-btn {
        left: auto; /* Remove centralização */
        right: 15px; /* Volta para o canto direito */
        transform: none; /* Remove o translateX */
        padding: 8px 15px;
        font-size: 1rem;
    }

    .close-chatbot-btn:hover {
        transform: scale(1.1); /* Apenas escala no hover */
    }
}