body, html { margin: 0; padding: 0; font-family: Arial; height: 100%; }
#app { display: flex; flex-direction: column; height: 100vh; }
#auth-section { text-align: center; padding: 50px; }
#auth-section input { display: block; margin: 10px auto; padding: 10px; width: 250px; }
#auth-section button { margin: 5px; padding: 10px 20px; cursor: pointer; }

#chat-section { display: flex; flex: 1; }
.sidebar { width: 300px; background: #075E54; color: white; display: flex; flex-direction: column; }
.logo { padding: 20px; font-size: 24px; text-align: center; border-bottom: 1px solid #111; }
.contacts { flex: 1; overflow-y: auto; }
.chat-window { flex: 1; display: flex; flex-direction: column; }
.chat-header { padding: 20px; background: #128C7E; color: white; font-weight: bold; }
.chat-messages { flex: 1; padding: 20px; overflow-y: auto; background: #ECE5DD; }
.chat-input { display: flex; padding: 10px; background: #f0f0f0; }
#message-input { flex: 1; padding: 10px; font-size: 16px; }
#send-btn { padding: 10px 20px; background: #128C7E; color: white; border: none; cursor: pointer; }