/* BOTÃO FLUTUANTE PREMIUM */
#chat-botao{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #007bff, #00c6ff);
    color: #fff;
    font-size: 22px;
    padding: 16px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    animation: pulse 2s infinite;
}

#chat-botao:hover{
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* ANIMAÇÃO PULSE */
@keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(0,123,255,0.5); }
    70%{ box-shadow: 0 0 0 15px rgba(0,123,255,0); }
    100%{ box-shadow: 0 0 0 0 rgba(0,123,255,0); }
}

/* CAIXA DO CHAT */
#chat-box{
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 320px;
    height: 420px;
    background: #fff;
    border-radius: 15px;
    display: none;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    overflow: hidden;
    z-index: 999;

    animation: fadeInUp 0.3s ease;
}

/* ANIMAÇÃO ENTRADA */
@keyframes fadeInUp{
    from{
        opacity: 0;
        transform: translateY(20px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* HEADER */
.chat-header{
    background: linear-gradient(135deg, #007bff, #00c6ff);
    color: #fff;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

/* MENSAGENS */
.chat-mensagens{
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    background: #f5f7fb;
}

/* SCROLL BONITO */
.chat-mensagens::-webkit-scrollbar{
    width: 6px;
}
.chat-mensagens::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 10px;
}

/* BOLHAS */
.msg{
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 15px;
    max-width: 75%;
    font-size: 14px;
    animation: fadeMsg 0.3s ease;
}

/* ANIMAÇÃO MENSAGEM */
@keyframes fadeMsg{
    from{
        opacity: 0;
        transform: translateY(10px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* USUÁRIO */
.msg.user{
    background: linear-gradient(135deg, #007bff, #00c6ff);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 5px;
}

/* BOT */
.msg.bot{
    background: #fff;
    color: #333;
    border-bottom-left-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* DIGITANDO (BOLINHAS) */
.msg.typing{
    display: flex;
    gap: 5px;
    align-items: center;
}

.dot{
    width: 6px;
    height: 6px;
    background: #888;
    border-radius: 50%;
    animation: blink 1.4s infinite;
}

.dot:nth-child(2){
    animation-delay: 0.2s;
}
.dot:nth-child(3){
    animation-delay: 0.4s;
}

@keyframes blink{
    0%, 80%, 100%{
        opacity: 0.2;
    }
    40%{
        opacity: 1;
    }
}

/* INPUT */
.chat-input{
    display: flex;
    border-top: 1px solid #eee;
    background: #fff;
}

.chat-input input{
    flex: 1;
    border: none;
    padding: 12px;
    outline: none;
}

.chat-input button{
    background: linear-gradient(135deg, #007bff, #00c6ff);
    border: none;
    color: #fff;
    padding: 12px 14px;
    cursor: pointer;
    transition: 0.3s;
}

.chat-input button:hover{
    opacity: 0.8;
}

.msg{
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 15px;
    max-width: 75%;
    font-size: 14px;

    line-height: 1.5;          /* espaçamento entre linhas */
    word-wrap: break-word;     /* quebra palavras grandes */
    white-space: pre-wrap;     /* respeita espaços e quebras */
}

/* MENSAGEM ACIMA DO BOTÃO */
#chat-preview{
    position: fixed;
    bottom: 90px;
    right: 20px;
    background: #fff;
    color: #333;
    padding: 10px 12px;
    border-radius: 10px;
    width: 220px;
    font-size: 13px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 999;

    display: flex;
    justify-content: space-between;
    gap: 10px;

    animation: fadeInUp 0.5s ease;
}

/* X FECHAR */
#chat-preview span:last-child{
    cursor: pointer;
    font-weight: bold;
    color: #999;
}

/* SETINHA */
#chat-preview::after{
    content: "";
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);
}