:root {
    --aiwa-red: #E30613;
    --aiwa-dark: #1A1A1A;
    --aiwa-light: #F4F4F4;
}

body { 
    font-family: 'Segoe UI', sans-serif; 
    background: var(--aiwa-light); 
    margin: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh;
    /* Adicionamos um padding para garantir que o chat nunca "cole" nas bordas da tela */
    padding: 20px; 
    box-sizing: border-box;
}

/* O pulo do gato: A classe principal que envolve o seu chat */
.chat-container {
    width: 100%;
    /* No PC, ele trava em 800px (ou o tamanho que preferir), criando o espaço nas laterais */
    max-width: 1300px; 
    
    height: 100%;
    /* No PC, ele trava em 900px de altura, para não ficar esticado até o rodapé */
    max-height: 900px; 
    
    /* Um pouco de sombra para dar a sensação de que o chat está flutuando sobre o fundo */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
    border-radius: 16px; 
    overflow: hidden; /* Garante que o conteúdo não vaze pelas bordas arredondadas */
    
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.chat-header { 
    background: var(--aiwa-dark); 
    color: white; 
    padding: 15px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    border-bottom: 3px solid var(--aiwa-red); 
}

.avatar { 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    border: 2px solid var(--aiwa-red); 
    object-fit: cover; 
}

/* Animação para novas mensagens */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.msg { 
    padding: 10px 15px; 
    margin: 8px; 
    border-radius: 15px; 
    max-width: 80%; 
    animation: slideIn 0.3s ease-out; 
}

.msg-atendente { background: #eee; align-self: flex-start; border-bottom-left-radius: 2px; }
.msg-cliente { background: var(--aiwa-red); color: white; align-self: flex-end; border-bottom-right-radius: 2px; }

.chat-input { padding: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; }
.chat-input input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 25px; outline: none; }
.chat-input button { background: var(--aiwa-red); color: white; border: none; padding: 10px 20px; border-radius: 25px; cursor: pointer; font-weight: bold; }

.typing-container { display: none; padding: 5px 15px; color: #888; font-size: 0.85em; font-style: italic; align-items: center; gap: 5px; }
.typing-indicator .dot { display: inline-block; width: 5px; height: 5px; background-color: #888; border-radius: 50%; margin: 0 2px; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
#btn-finalizar-chat:hover { background: white !important; color: var(--aiwa-red) !important; }

.msg-row { display: flex; width: 100%; margin-bottom: 15px; }
.msg-row-atendente { justify-content: flex-start; }
.msg-row-cliente { justify-content: flex-end; }
.msg-avatar { width: 35px; height: 35px; border-radius: 50%; margin-right: 8px; align-self: flex-end; border: 2px solid var(--aiwa-red); object-fit: cover; }
.msg-group { display: flex; flex-direction: column; max-width: 75%; }
.msg-group-cliente { align-items: flex-end; }
.msg-group-atendente { align-items: flex-start; }
.msg-group .msg { margin: 0; }
.msg-sender { font-size: 0.7em; color: #999; margin-top: 4px; padding: 0 4px; font-weight: bold; text-transform: uppercase; }

.msg p { margin: 0 0 8px 0; }
.msg p:last-child { margin: 0; }
.msg ul, .msg ol { margin: 8px 0; padding-left: 20px; }
.msg li { margin-bottom: 4px; }
.msg strong { font-weight: 800; }
.msg code { background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 4px; font-family: monospace; }