* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: #0f141c; color: #f5f5f5; height: 100vh; display: flex; justify-content: center; align-items: center; }

.hidden { display: none !important; }

/* Telas de Autenticação */
.auth-container { background: #18222d; padding: 30px; border-radius: 12px; width: 100%; max-width: 400px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.auth-container h2 { margin-bottom: 20px; color: #53bdeb; text-align: center; }
.auth-container input { width: 100%; padding: 12px; margin-bottom: 15px; background: #0f141c; border: 1px solid #2b3847; border-radius: 8px; color: #fff; }
.auth-container button { width: 100%; padding: 12px; background: #53bdeb; border: none; border-radius: 8px; color: #0f141c; font-weight: bold; cursor: pointer; }
.auth-container button:hover { background: #40a0cf; }
.switch-auth { text-align: center; margin-top: 15px; font-size: 14px; color: #8696a7; cursor: pointer; }

/* Layout estilo Telegram */
#app-screen { display: flex; width: 100vw; height: 100vh; background: #0f141c; }
.sidebar { width: 320px; background: #18222d; border-right: 1px solid #2b3847; display: flex; flex-direction: column; }
.sidebar-header { padding: 15px; background: #202b36; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2b3847; }
.contact-list { overflow-y: auto; flex: 1; }
.contact-item { padding: 15px; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); }
.contact-item:hover, .contact-item.active { background: #2b3847; }
.contact-name { font-weight: 500; font-size: 15px; }

/* Área do Chat */
.chat-area { flex: 1; display: flex; flex-direction: column; background: #0e1621; }
.chat-header { padding: 15px; background: #18222d; border-bottom: 1px solid #2b3847; font-weight: bold; font-size: 16px; }
.chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 60%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; word-break: break-word; }
.msg.sent { background: #2b5278; align-self: flex-end; border-bottom-right-radius: 2px; }
.msg.received { background: #18222d; align-self: flex-start; border-bottom-left-radius: 2px; }
.msg-time { font-size: 10px; color: #8696a7; text-align: right; margin-top: 4px; }

/* Input de Mensagem */
.chat-input-area { padding: 15px; background: #18222d; display: flex; gap: 10px; align-items: center; }
.chat-input-area input { flex: 1; padding: 12px; background: #0f141c; border: 1px solid #2b3847; border-radius: 8px; color: #fff; outline: none; }
.chat-input-area button { padding: 12px 20px; background: #53bdeb; border: none; border-radius: 8px; color: #0f141c; font-weight: bold; cursor: pointer; }