body { font-family: sans-serif; background: #f0f2f5; margin: 0; }
.container { display: flex; justify-content: center; margin-top: 100px; }
.box { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 350px; text-align: center; }
.hidden { display: none; }
input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
button { width: 100%; padding: 10px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
p { font-size: 0.9em; color: #666; cursor: pointer; }

/* Chat Styles */
.chat-wrapper { display: grid; grid-template-columns: 250px 1fr; height: 100vh; }
.side-panel { background: #343a40; color: white; padding: 20px; display: flex; flex-direction: column; }
.main-chat { display: flex; flex-direction: column; background: white; }
#chat-messages { flex: 1; overflow-y: auto; padding: 20px; background: #e5ddd5; }
.input-area { padding: 20px; display: flex; gap: 10px; border-top: 1px solid #ddd; }
#user-list { list-style: none; padding: 0; flex: 1; }
#user-list li { padding: 10px; border-bottom: 1px solid #454d55; }
.logout-btn { background: #dc3545; }