:root{--accent:var(--md-sys-color-primary);--accent-text:var(--md-sys-color-on-primary);--bg:var(--md-sys-color-background);--surface:var(--md-sys-color-surface);--surface2:var(--md-sys-color-surface-variant);--text:var(--md-sys-color-on-surface);--text-strong:var(--md-sys-color-on-background);--outline-color:var(--md-sys-color-outline)}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:none;-webkit-tap-highlight-color:transparent}
*::-webkit-scrollbar{display:none}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',Roboto,sans-serif;height:100vh;overflow:hidden}
.escondido{display:none!important}
button{cursor:pointer;border:none;background:none;color:var(--text)}
input{border:none;outline:none;background:none;color:var(--text)}

#telaLogin{display:flex;justify-content:center;align-items:center;height:100vh;background:var(--bg)}
.caixa-login{background:var(--surface);padding:40px;border-radius:36px;border:1px solid var(--outline-color);width:90%;max-width:400px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.caixa-login h2{color:var(--text-strong);font-size:24px;text-align:center}
.caixa-login input{width:100%;padding:16px 20px;border-radius:50px;background:var(--surface2);color:var(--text-strong);font-size:16px;border:2px solid transparent;transition:.2s}
.caixa-login input:focus{border-color:var(--accent)}
.caixa-login button{padding:16px;border-radius:50px;background:var(--accent);color:var(--accent-text);font-size:16px;font-weight:700;transition:.2s}
.caixa-login button:hover{filter:brightness(1.1);transform:scale(1.02)}
.btn-texto{color:var(--accent);text-decoration:underline;text-align:center;font-size:14px;padding:8px}
#loginErro{color:#ef4444;font-size:14px;text-align:center}

.perfil-foto-grande{width:100px;height:100px;border-radius:36px;background:var(--surface2);border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto;overflow:hidden}
.perfil-foto-grande img{width:100%;height:100%;object-fit:cover}
.perfil-foto-grande span{font-size:40px;font-weight:700;color:var(--accent)}

#telaApp{display:flex;height:100vh;overflow:hidden}
aside#sidebar{width:380px;background:var(--surface);border-right:1px solid var(--outline-color);display:flex;flex-direction:column;flex-shrink:0}
#sidebarHeader{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--outline-color)}
#sidebarUser{display:flex;align-items:center;gap:14px}
.perfil-foto{width:44px;height:44px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:2px solid var(--outline-color)}
.perfil-foto img{width:100%;height:100%;object-fit:cover}
.perfil-foto span{font-size:18px;font-weight:700;color:var(--accent)}
#sidebarUserName{font-size:17px;font-weight:700;color:var(--text-strong)}
#sidebarActions{display:flex;gap:8px}
.btn-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s;color:var(--text)}
.btn-icon:hover{background:var(--surface2);color:var(--accent)}
.btn-icon.enviar{background:var(--accent);color:var(--accent-text)}
.btn-icon.enviar:hover{filter:brightness(1.1)}

#sidebarBusca{padding:12px 20px}
#sidebarBusca input{width:100%;padding:14px 20px;border-radius:50px;background:var(--surface2);font-size:15px;color:var(--text-strong)}
#sidebarBusca input::placeholder{color:var(--md-sys-color-on-surface-variant)}

#listaSalas{flex:1;overflow-y:auto}
.sala-item{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;transition:.15s}
.sala-item:hover{background:var(--surface2)}
.sala-item.ativo{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.sala-foto{width:54px;height:54px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--accent);flex-shrink:0;border:2px solid var(--outline-color)}
.sala-info{flex:1;min-width:0}
.sala-nome{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sala-ultima-msg{font-size:13px;color:var(--md-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

main#chatPrincipal{flex:1;display:flex;flex-direction:column;background:var(--bg);position:relative}
#chatVazio{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;color:var(--md-sys-color-on-surface-variant)}
#chatVazio svg{opacity:0.3}

#chatAtivo{flex:1;display:flex;flex-direction:column}
#chatHeader{padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--outline-color);display:flex;align-items:center;gap:14px}
#chatHeaderInfo{display:flex;flex-direction:column}
#chatHeaderNome{font-size:17px;font-weight:700;color:var(--text-strong)}
#chatHeaderStatus{font-size:12px;color:var(--accent)}

#chatMensagens{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:6px}
.msg-bubble{max-width:70%;padding:12px 18px;border-radius:28px;position:relative;word-wrap:break-word;line-height:1.4}
.msg-bubble.outra{background:var(--surface2);border-bottom-left-radius:4px;align-self:flex-start}
.msg-bubble.propria{background:var(--accent);color:var(--accent-text);border-bottom-right-radius:4px;align-self:flex-end}
.msg-nick{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:4px}
.msg-bubble.propria .msg-nick{color:var(--accent-text);opacity:0.8}
.msg-texto{font-size:15px}
.msg-tempo{font-size:10px;text-align:right;opacity:0.6;margin-top:4px}

#chatInputArea{padding:12px 20px;background:var(--surface);border-top:1px solid var(--outline-color);display:flex;align-items:center;gap:12px}
#msgInput{flex:1;padding:14px 20px;border-radius:50px;background:var(--surface2);font-size:15px;color:var(--text-strong)}
#msgInput::placeholder{color:var(--md-sys-color-on-surface-variant)}
#btnEmoji{font-size:24px;color:var(--md-sys-color-on-surface-variant)}

.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:20;display:flex;justify-content:center;align-items:center}
.modal-conteudo{background:var(--surface);border-radius:36px;width:90%;max-width:450px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.modal-cabecalho{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--outline-color)}
.modal-cabecalho h2{color:var(--text-strong);font-size:20px}
.modal-conteudo input{margin:20px 24px 0;padding:14px 20px;border-radius:50px;background:var(--surface2);font-size:15px;color:var(--text-strong);border:2px solid transparent}
.modal-conteudo input:focus{border-color:var(--accent)}
.lista-resultados{padding:10px 24px 20px;overflow-y:auto;flex:1}
.resultado-item{display:flex;align-items:center;gap:14px;padding:12px 0;cursor:pointer;border-bottom:1px solid var(--outline-color)}
.resultado-item:last-child{border-bottom:none}
.res-foto{width:44px;height:44px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);border:2px solid var(--outline-color)}
.res-nome{font-weight:600;color:var(--text-strong)}
.vazio-msg{text-align:center;padding:40px 20px;color:var(--md-sys-color-on-surface-variant);font-size:14px}

@media(max-width:768px){
aside#sidebar{width:100%;position:absolute;z-index:10;height:100%;transition:transform .3s ease}
aside#sidebar.escondido-mobile{transform:translateX(-100%)}
main#chatPrincipal{width:100%}
.msg-bubble{max-width:85%}
}