.chat-wrapper {
    position: relative;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px;
}

/* Caixa de mensagens */
.chat-box {
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    padding:10px;
    height:320px;
    overflow-y:auto;
    font-size:14px;
}

/* Mensagens */
.chat-message {
    padding:6px 10px;
    border-radius:8px;
    margin-bottom:8px;
    background:#f1f1f1;
    animation: chatFadeIn .15s ease-out;
}
.chat-message.mine {
    background:#e6ffe0; /* verde clarinho */
}
.chat-user {
    font-weight:bold;
    color:#007bff;
}
.chat-user.mine {
    color:#28a745;
}
.chat-time {
    float:right;
    font-size:11px;
    color:#666;
}
.chat-text {
    color:#000;
    margin-top:2px;
    word-wrap:break-word;
}

/* barra de ações em cima do chat */
.chat-top-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.chat-top-bar small {
    color:#666;
}

/* Emoji bar */
.chat-emoji-bar {
    margin-top:5px;
    margin-bottom:5px;
}
.chat-emoji-bar span {
    cursor:pointer;
    margin-right:4px;
    font-size:18px;
    transition: transform .1s;
}
.chat-emoji-bar span:hover {
    transform:scale(1.2);
}

/* Formulário */
.chat-form {
    margin-top:10px;
}
.chat-form textarea {
    resize:none;
}

/* Digitando... */
.chat-typing {
    font-size:12px;
    color:#777;
    margin-top:4px;
}

/* Tela de boas-vindas ("login" do chat) */
.chat-welcome-overlay {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
}
.chat-welcome-card {
    background:#fff;
    border-radius:10px;
    padding:25px 20px;
    max-width:320px;
    width:100%;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,0.35);
}
.chat-welcome-card h5 {
    margin-bottom:10px;
}
.chat-welcome-card p {
    font-size:13px;
    color:#666;
    margin-bottom:15px;
}

/* Animação simples */
@keyframes chatFadeIn {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}