/* Classe para estilizar o botão do dropdown */
.custom-dropdown-button .dropdown-toggle {
    background-color: #24242c !important; /* Cor de fundo preta */
    color: white !important; /* Cor do texto branco */
    font-size: 15px !important; /* Tamanho da fonte */
    border: none; /* Remover borda se desejado */
}

/* Classe para estilizar os itens do dropdown */
.custom-dropdown-button .dropdown-menu a {
    background-color: #24242c !important; /* Cor de fundo preta */
    color: white !important; /* Cor do texto branco */
    font-size: 15px !important; /* Tamanho da fonte */
}

/* Classe para estilizar os itens do dropdown em hover */
.custom-dropdown-button .dropdown-menu a:hover {
    background-color: #24242c !important; /* Cor de fundo branca */
    color: white !important; /* Cor do texto preto */
    font-size: 15px !important; /* Tamanho da fonte */
}


/* Dropdown com fundo preto e letras brancas */
.custom-dropdown-button .dropdown-toggle {
    background-color: black !important;
    color: white !important;
    border: none;
}

.custom-dropdown-button .dropdown-menu a {
    background-color: black !important;
    color: white !important;
}

.custom-dropdown-button .dropdown-menu a:hover {
    background-color: white !important;
    color: black !important;
}

/* Botão preto com letras brancas */
.botao-preto {
    background-color: black;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.botao-preto:hover {
    color: white; /* Apenas a cor do texto muda ao passar o mouse */
}

.botao-preto:active {
    color: white; /* Mantém a cor cinza ao clicar sem mudar o fundo */
    background-color: black; /* Garante que o fundo continue preto */
    border: none; /* Garante que não haja borda ao clicar */
}


/* Configuração padrão do chat em telas grandes (flutuante) */
        .demo {
            position: relative;
            max-width: 470px;
            width: 100%;
            justify-self: end
        }

        .chat {
            background: #fff;
            border: 1px solid var(--borda);
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 18px 55px #2a1b521a;
            transform: rotate(1deg)
        }

        /* Ajuste automático para telas menores (celulares) para evitar sobreposição */
        @media(max-width: 900px) {
            .demo {
                justify-self: center;
                max-width: 510px;
                margin-bottom: 20px;
            }

            .chat {
                position: relative; /* Remove o absolute se houver */
                left: 0;
                bottom: 0;
                width: 100%;
                max-width: 100%;
                margin-top: 25px;
                transform: none; /* Remove a rotação no mobile para encaixar melhor */
            }
        }