/* =======================================================
   MAYA CORE SYSTEMS - WIDGET CHATBOT V12 (CSS PURO)
   ======================================================= */

/* Botão flutuante que abre o chat */
.maya-chat-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.maya-chat-toggle:hover { transform: scale(1.1); }
.maya-chat-toggle i { font-size: 34px; color: #000; }

/* Janela do Chatbot */
.maya-chat-window {
    position: fixed;
    bottom: 110px; /* Acima do botão flutuante */
    right: 30px;
    width: 400px;
    height: 650px;
    max-height: calc(100vh - 140px);
    background: rgba(10, 10, 12, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    display: none; /* Inicia Oculto */
    flex-direction: column;
    z-index: 9998;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    overflow: hidden;
    animation: slideUpChat 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.maya-chat-window.open { display: flex; }

@keyframes slideUpChat {
    from { opacity: 0; transform: translateY(50px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .maya-chat-window {
        width: calc(100% - 40px);
        right: 20px;
        bottom: 100px;
    }
}

/* Header do Chat */
.chat-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    gap: 12px;
}
.chat-header .status-dot { width: 10px; height: 10px; border-radius: 50%; background: #27c93f; box-shadow: 0 0 10px #27c93f; }
.chat-header strong { color: #fff; font-family: var(--font-display); font-size: 1.1rem; display: block; }
.chat-header span { color: var(--text-muted); font-size: 0.8rem; }
.close-chat { margin-left: auto; background: transparent; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; transition: 0.3s; }
.close-chat:hover { color: var(--primary); }

/* Histórico de Mensagens */
.chat-history {
    flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; scroll-behavior: smooth;
}
.chat-history::-webkit-scrollbar { width: 6px; }
.chat-history::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

/* Balões de Mensagem */
.msg-bot { display: flex; gap: 10px; align-items: flex-end; max-width: 90%; animation: fadeInMsg 0.4s ease forwards; }
.avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 1px solid var(--primary); flex-shrink: 0; }
.bubble-bot { background: rgba(255,255,255,0.03); border: 1px solid rgba(212, 175, 55, 0.3); padding: 12px 15px; border-radius: 15px 15px 15px 0; color: #fff; font-size: 0.95rem; line-height: 1.4; }
.bubble-name { font-size: 0.7rem; color: var(--primary); margin-bottom: 4px; display: block; text-transform: uppercase; font-weight: bold; }

.msg-user { display: flex; justify-content: flex-end; animation: fadeInMsg 0.4s ease forwards; }
.bubble-user { background: var(--primary); color: #000; padding: 12px 15px; border-radius: 15px 15px 0 15px; max-width: 85%; font-weight: 600; font-size: 0.95rem; }

@keyframes fadeInMsg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Área de Inputs */
.chat-input-area { padding: 15px; border-top: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.8); display: flex; flex-direction: column; gap: 10px; }
.input-row { display: flex; gap: 10px; }
.chat-input { flex-grow: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 12px 15px; border-radius: 100px; font-size: 0.95rem; outline: none; transition: 0.3s; font-family: var(--font-main); }
.chat-input:focus { border-color: var(--primary); background: rgba(212, 175, 55, 0.05); }
.btn-send { background: var(--primary); border: none; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: 0.3s; }
.btn-send i { color: #000; font-size: 1.2rem; }
.btn-send:hover { transform: scale(1.05); background: #fff; }

/* Botões de Escolha Múltipla */
.options-container { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.chat-btn-option { background: rgba(255,255,255,0.05); border: 1px solid rgba(212, 175, 55, 0.4); color: #fff; padding: 10px 15px; border-radius: 100px; cursor: pointer; font-size: 0.9rem; transition: 0.3s; font-family: var(--font-main); }
.chat-btn-option:hover, .chat-btn-option.selected { background: var(--primary); color: #000; font-weight: bold; }
.btn-confirm { background: #27c93f; color: #fff; border: none; padding: 10px 20px; border-radius: 100px; cursor: pointer; font-weight: bold; margin-top: 5px; display: none; font-size: 0.9rem; font-family: var(--font-main); }

/* Animação Digitando... */
.typing-indicator { display: flex; gap: 5px; padding: 5px 0; }
.typing-indicator span { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; animation: typing 1.4s infinite ease-in-out; }
.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-5px); opacity: 1; } }