/* Paleta de cores e gradientes renovados */
        .gradient-bg { background: linear-gradient(135deg, #8E2DE2, #4A00E0); }
        .gradient-bg-dark { background: linear-gradient(135deg, #1e0a35, #110029); }
        .gradient-text { background: linear-gradient(135deg, #a777e3, #6e8efb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        /* Animações e Efeitos */
        .service-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
        .testimonial-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
        .loader { border-top-color: #a777e3; -webkit-animation: spinner 1.5s linear infinite; animation: spinner 1.5s linear infinite; }
        
        @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        .toast {
            position: fixed; bottom: 20px; right: 20px;
            background: #4CAF50; color: #fff; padding: 15px 20px;
            border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            opacity: 0; transform: translateY(20px); transition: all 0.4s ease;
            z-index: 9999;
        }
        .toast.show { opacity: 1; transform: translateY(0); }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in { animation: fadeIn 0.5s ease-out forwards; }

        /* Estilo para ícones de passos */
        .step-icon {
            background: linear-gradient(135deg, #a777e3, #6e8efb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        @keyframes floatAnimation {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
        }
            .animate-float {
            animation: floatAnimation 6s ease-in-out infinite;
        }

    @keyframes animateChameleon {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .animate-chameleon {
        /* Define a animação: nome, duração, ritmo e repetição */
        animation: animateChameleon 8s ease-in-out infinite;
        
        /* Cria o gradiente de cores vibrantes */
        background: linear-gradient(135deg, #a777e3, #6e8efb, #50ffc1, #a777e3);
        
        /* Aumenta o tamanho do gradiente para que ele tenha espaço para se mover */
        background-size: 300% 300%;
        
        /* Aplica o gradiente como fundo do texto */
        -webkit-background-clip: text;
        background-clip: text;
        
        /* Torna a cor da fonte transparente para que o gradiente apareça */
        -webkit-text-fill-color: transparent;
    }
    
/* ===== [NOVOS ESTILOS DO CHAT - VERSÃO CORRIGIDA 5] ===== */

/* Remove as bordas que tínhamos antes no activeChatBox */
#activeChatBox > div {
    border-bottom: 0 !important;
}

/* O contêiner de cada balão (controla o alinhamento GERAL) */
.chat-bubble-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px; 
    max-width: 100%;
    /* [FORÇA TUDO A ALINHAR O TEXTO À ESQUERDA POR PADRÃO] */
    text-align: left !important; 
}
.chat-bubble-sender {
    align-items: flex-end; /* Alinha filhos (info + bubble) à direita */
}
.chat-bubble-receiver {
    align-items: flex-start; /* Alinha filhos (info + bubble) à esquerda */
}

/* As informações (Nome e Data) */
.chat-bubble-info {
    font-size: 0.75rem; 
    font-weight: 500; 
    margin-bottom: 4px; 
    color: #6B7281; 
    padding: 0 10px; 
    width: 100%; /* Faz a info ocupar a largura para o text-align funcionar */
}

/* [SOBRESCRITA] Força o alinhamento do *texto* da info do remetente à direita */
.chat-bubble-sender .chat-bubble-info {
    text-align: right !important; 
}
.chat-bubble-receiver .chat-bubble-info {
    text-align: left !important;
}


/* O balão de chat (controla o alinhamento DO TEXTO DENTRO) */
.chat-bubble {
    max-width: 85%;
    padding: 10px 15px;
    border-radius: 18px;
    word-wrap: break-word;
    line-height: 1.4;
    position: relative;
    
    /* ===== [A CORREÇÃO DEFINITIVA ESTÁ AQUI] ===== */
    
    /* 1. Força o alinhamento de texto (como segurança) */
    text-align: left !important; 
    
    /* 2. Garante que o balão é um container flex */
    display: flex !important; 
    
    /* 3. Força o conteúdo horizontal para a ESQUERDA */
    justify-content: flex-start !important; 
    
    /* 4. Mantém o conteúdo verticalmente centrado (opcional) */
    align-items: center; 
}

/* Cores dos balões */
.chat-bubble-sender .chat-bubble {
    background-color: #8E2DE2; 
    background-image: linear-gradient(135deg, #8E2DE2, #4A00E0);
    color: #FFFFFF; 
    border-bottom-right-radius: 4px;
}
.chat-bubble-receiver .chat-bubble {
    background-color: #E2E8F0; 
    color: #1F2937; 
    border-bottom-left-radius: 4px;
}

/* Mensagem de "Carregando" */
.chat-loading {
    padding: 20px;
    text-align: center;
    color: #6B7281;
}

.chat-bubble-wrapper .chat-bubble * {
  text-align: left !important;
}

/* --- ESTILOS DA ROLETA (V6 - Neon Corrigido) --- */

/* O PINO (Marcador de prêmio V3) */
#roletaPointer {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid #FFD700; /* Dourado */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
    z-index: 20;
    top: 10px; 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* O Botão central GIRAR (V3) */
#btnGirarRoleta {
    z-index: 20; 
    background: radial-gradient(circle, #c084fc 0%, #8E2DE2 100%);
    border: 4px solid #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.3);
    animation: callToAction 1.5s ease-in-out infinite;
}
#btnGirarRoleta:disabled {
    opacity: 0.7;
    transform: scale(1);
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 10px rgba(255,255,255,0.5); }
    50% { box-shadow: 0 0 20px rgba(255,255,255,1); }
    100% { box-shadow: 0 0 10px rgba(255,255,255,0.5); }
}

/* Animação de "Chamar Atenção" (scale) */
@keyframes callToAction {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* A ROLETA (Sua V1 #roletaVisual) */
#roletaVisual {
    width: 18rem; /* w-72 */
    height: 18rem; /* h-72 */
    position: relative;
    /* [CORREÇÃO] overflow: hidden; REMOVIDO DAQUI... */
    border-radius: 50%;
    border: none;
    box-shadow: 
        inset 0 0 15px rgba(0,0,0,0.5), 
        0 0 20px rgba(0,0,0,0.7);
    transition: transform 6s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* [NOVO] Adiciona o brilho neon e a animação AQUI */
    box-shadow: 
        inset 0 0 15px rgba(0,0,0,0.5), /* Sombra interna */
        0 0 5px #c084fc,  /* Brilho neon */
        0 0 10px #c084fc, /* Brilho neon */
        0 0 15px #8E2DE2; /* Brilho neon */
    animation: neon-glow 2s ease-in-out infinite;
}

/* Borda interna da Roda */
#roletaVisual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #8E2DE2; 
    box-sizing: border-box; 
    z-index: 10;
    /* [CORREÇÃO] box-shadow e animation REMOVIDOS DAQUI */
}


/* Containers (Seus V1) */
.roleta-fatias-container,
.roleta-textos-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* [CORREÇÃO] ...e ADICIONADOS AQUI para cortar as fatias */
    overflow: hidden;
    border-radius: 50%;
}
.roleta-textos-container { z-index: 15; }

/* Fatia de Cor (Sua V1) - COM BORDAS PRETAS */
.roleta-fatia {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 100% 100%;
    
    border-left: 2px solid #000; /* Borda preta */
    box-sizing: border-box;      
    
    background-color: var(--fatia-cor); /* Fallback */
    clip-path: polygon(100% 100%, 0 0, 100% 0);
    transform: rotate(calc(45deg * var(--i, 0)));
}

/* Container de Texto (Sua V1) */
.roleta-texto {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 100% 100%;
    transform: rotate(calc(45deg * var(--i, 0)));
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 1rem; 
    background-color: transparent; 
    pointer-events: none;
}

/* Texto (Sua V1 span) - (Melhorado) */
.roleta-texto span {
    display: block;
    width: 5.5rem; 
    text-align: center;
    position: relative; 
    z-index: 2;
    color: white;
    font-size: 0.875rem; 
    font-weight: 700;   
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); 
    transform: rotate(-67.5deg) translateY(-1.5rem);
}

/* --- CLASSES DE COR (Corretas para o HTML) --- */

.roleta-fatia.cor-7 { background-image: linear-gradient(135deg, #6B7280, #4B5563); } /* Tente Novamente (Cinza) */

.roleta-fatia.cor-0 { background-image: linear-gradient(135deg, #60A5FA, #3B82F6); } /* R$100 (Azul) */

.roleta-fatia.cor-1 { background-image: linear-gradient(135deg, #34D399, #10B981); } /* 5 Giros (Verde) */

.roleta-fatia.cor-2 { background-image: linear-gradient(135deg, #F472B6, #EC4899); } /* R$200 (Rosa) */

.roleta-fatia.cor-3 { background-image: linear-gradient(135deg, #F87171, #EF4444); } /* R$500 (Vermelho) */

.roleta-fatia.cor-4 { background-image: linear-gradient(135deg, #8B5CF6, #6D28D9); } /* R$1.000 (Roxo) */

.roleta-fatia.cor-5 { background-image: linear-gradient(135deg, #c084fc, #a777e3); } /* R$5.000 (Roxo Claro) */

.roleta-fatia.cor-6 { background-image: linear-gradient(135deg, #F59E0B, #F97316); } /* R$10.000 (Laranja) */


/* Texto do Jackpot (Sua V1 span.jackpot-text) */
.roleta-texto span.jackpot-text {
    color: #1F2937;   
    font-weight: 700;
    font-size: 0.875rem; 
    transform: rotate(-67.5deg) translateY(-1.5rem);
}

/* Estilo para o texto "Tente Novamente" */
.roleta-texto span.fatia-texto-loss {
    font-size: 0.75rem; 
    line-height: 1.1; 
    width: 5rem; 
    color: #cccccc; 
}

/* Animação do Brilho Neon */
@keyframes neon-glow {
    0%, 100% {
        box-shadow: 
            inset 0 0 15px rgba(0,0,0,0.5), /* Sombra interna (estática) */
            0 0 5px #c084fc,  /* Brilho roxo claro */
            0 0 10px #c084fc, /* Brilho roxo claro */
            0 0 15px #8E2DE2; /* Brilho roxo escuro */
    }
    50% {
        box-shadow: 
            inset 0 0 15px rgba(0,0,0,0.5), /* Sombra interna (estática) */
            0 0 10px #c084fc, /* Brilho roxo claro */
            0 0 20px #8E2DE2, /* Brilho roxo escuro */
            0 0 30px #8E2DE2; /* Brilho roxo escuro */
    }
}