* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #e9ebee; }

.auth-container { width: 340px; margin: 80px auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.auth-container h1 { text-align: center; margin-bottom: 20px; color: #1877f2; }
.tabs { display: flex; margin-bottom: 15px; }
.tabs button { flex: 1; padding: 10px; border: none; background: #f0f2f5; cursor: pointer; }
.tabs button.active { background: #1877f2; color: #fff; }
#authForm input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 8px; }
#authForm button { width: 100%; padding: 12px; border: none; background: #1877f2; color: #fff; border-radius: 8px; cursor: pointer; font-size: 1rem; }
#msg { text-align: center; color: #e74c3c; margin-top: 10px; }

.chat-app { display: flex; height: 100vh; }
.sidebar { width: 280px; background: #fff; border-right: 1px solid #ddd; overflow-y: auto; }
.sidebar h2 { padding: 15px; background: #1877f2; color: #fff; }
.sidebar ul { list-style: none; }
.sidebar li { padding: 14px 15px; border-bottom: 1px solid #eee; cursor: pointer; }
.sidebar li:hover { background: #f0f2f5; }

.chat-area { flex: 1; display: flex; flex-direction: column; background: #f7f8fa; }
.chat-area header { padding: 15px; background: #fff; border-bottom: 1px solid #ddd; font-weight: bold; }
#messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; }
.message { max-width: 60%; padding: 10px 14px; border-radius: 18px; margin-bottom: 10px; word-break: break-word; }
.message.in { background: #fff; align-self: flex-start; }
.message.out { background: #1877f2; color: #fff; align-self: flex-end; }
.call-actions { float: right; }
.call-actions button { background: #1877f2; color: #fff; border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-left: 6px; }
.call-actions button:disabled { background: #bcc; cursor: not-allowed; }

.call-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; z-index: 100; }
.call-overlay.hidden { display: none; }
.call-overlay video { width: 320px; height: 240px; background: #000; margin: 10px; border-radius: 10px; }
#localVideo { position: absolute; bottom: 90px; right: 20px; width: 140px; height: 110px; }
.call-controls button { margin: 6px; padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer; background: #e74c3c; color: #fff; }
.call-controls button:first-child, .call-controls button:nth-child(2) { background: #555; }

.msg-form { display: flex; gap: 10px; padding: 12px; background: #fff; border-top: 1px solid #ddd; }
.msg-form input[type=text] { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; }
.msg-form button { padding: 10px 20px; border: none; background: #1877f2; color: #fff; border-radius: 20px; cursor: pointer; }