@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
    --bg: #05070a;
    --side: #0d1117;
    --neon-blue: #00d2ff;
    --neon-purple: #8a2be2;
    --grad: linear-gradient(135deg, #00d2ff, #8a2be2);
    --text: #e1e1e1;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }

/* 100dvh garante a altura correta em celulares */
body { background: var(--bg); color: var(--text); height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }

.app { display: flex; width: 100vw; height: 100%; position: relative; overflow: hidden; }

/* --- SIDEBAR (Barra Lateral) --- */
.sidebar {
    width: 300px; background: var(--side); border-right: 1px solid rgba(0, 210, 255, 0.1);
    display: flex; flex-direction: column; z-index: 50; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    .sidebar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(-100%); }
    .sidebar.active { transform: translateX(0); }
}

/* --- ÁREA PRINCIPAL --- */
.main { flex: 1; display: flex; flex-direction: column; background: var(--bg); position: relative; width: 100%; height: 100%; }

header {
    height: 60px; min-height: 60px; padding: 0 15px; background: var(--side);
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid var(--neon-blue); box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
    z-index: 20; flex-shrink: 0; /* Não deixa esmagar */
}

/* --- CHAT LISTA --- */
#mensagens { 
    flex: 1; 
    overflow-y: auto; 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    scroll-behavior: auto; /* Controlado pelo JS */
}

/* Estilo do Balão de Mensagem */
.msg-bubble { 
    background: #1b1f24; padding: 10px; border-radius: 18px; 
    border-left: 3px solid var(--neon-blue); max-width: 85%; word-wrap: break-word;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); position: relative;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Minhas mensagens (Direita + Roxo) */
.msg-bubble.me { align-self: flex-end; border-left: none; border-right: 3px solid var(--neon-purple); }

/* Cabeçalho do Balão (Foto, Nome, Hora, Lixeira) */
.msg-header { display: flex; align-items: center; margin-bottom: 6px; justify-content: space-between; }
.msg-bubble.me .msg-header { flex-direction: row-reverse; }

.msg-user-info { display: flex; align-items: center; gap: 8px; }
.msg-bubble.me .msg-user-info { flex-direction: row-reverse; }

.msg-avatar { 
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--neon-blue); 
    object-fit: cover; flex-shrink: 0;
}
.msg-bubble.me .msg-avatar { border-color: var(--neon-purple); }

.msg-username { font-weight: bold; font-size: 12px; color: var(--neon-blue); }
.msg-bubble.me .msg-username { color: var(--neon-purple); }

/* Metadados (Hora e Lixeira) */
.msg-meta { display: flex; align-items: center; gap: 6px; }

.msg-time { font-size: 10px; color: #888; }

/* Botão de Apagar (Lixeira) */
.btn-delete {
    background: none; border: none; cursor: pointer; font-size: 14px;
    color: #ff5555; opacity: 0.5; transition: 0.2s; padding: 0;
}
.btn-delete:hover { opacity: 1; transform: scale(1.2); }

/* Mídia (Imagens e Vídeos) */
.msg-bubble img, .msg-bubble video { 
    max-width: 100%; height: auto; border-radius: 10px; margin-top: 5px; border: 1px solid #333; display: block;
}
@media (min-width: 769px) {
    .msg-bubble img, .msg-bubble video { max-width: 350px; }
}

/* --- RODAPÉ (Input e Preview) --- */
.footer-container {
    background: var(--side); border-top: 1px solid #333; z-index: 20; flex-shrink: 0;
}

/* Preview de Arquivo */
.preview-area {
    padding: 10px; display: none; gap: 10px; align-items: center; 
    background: rgba(0, 210, 255, 0.05); border-bottom: 1px solid #333;
}
.preview-thumb { height: 50px; border-radius: 5px; border: 1px solid var(--neon-blue); }
.preview-name { font-size: 12px; color: var(--neon-blue); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-close-preview { background: none; border: none; color: #ff4444; font-weight: bold; cursor: pointer; margin-left: auto; padding: 5px; }

/* Área de Input */
.input-area {
    padding: 10px 15px; display: flex; gap: 10px; align-items: center; min-height: 60px;
}

.btn-icon { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--neon-blue); padding: 5px; transition: 0.2s; }
.btn-icon:hover { color: white; transform: scale(1.1); }

.input-field {
    flex: 1; background: #161b22; border: 1px solid #333; color: white;
    padding: 12px 20px; border-radius: 50px; outline: none;
}
.btn-send {
    width: 45px; height: 45px; border-radius: 50%; background: var(--grad);
    border: none; color: white; font-weight: bold; cursor: pointer;
    box-shadow: 0 0 10px var(--neon-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* --- MODAIS --- */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); display: none; justify-content: center; align-items: center; z-index: 1000;
    backdrop-filter: blur(5px);
}
.modal-content {
    background: #0f1216; padding: 25px; border-radius: 25px; 
    border: 2px solid var(--neon-purple); width: 90%; max-width: 350px; text-align: center;
}