* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #0a0b0d; color: #d0d2d6;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
input { font-family: inherit; }

.page-login { display: flex; align-items: center; justify-content: center; }
.login-shell { width: 100%; max-width: 380px; padding: 24px; }
.login-card { display: flex; flex-direction: column; gap: 12px; }
.login-card input {
  background: #15171b; border: 1px solid #23262d; color: #eaeef5;
  padding: 14px 16px; font-size: 16px; border-radius: 8px;
  outline: none; letter-spacing: 2px;
}
.login-card input:focus { border-color: #3a4150; }
.login-card button {
  background: #1f2229; color: #eaeef5; border: 1px solid #2e323a;
  padding: 12px; cursor: pointer; border-radius: 8px; font-size: 14px;
}
.login-card button:hover { background: #262a32; }
.login-card button:disabled { opacity: 0.5; cursor: wait; }
.login-msg { text-align: center; min-height: 18px; color: #8a8f99; font-size: 12px; }
.login-msg.err { color: #d94f4f; }

.page-dashboard { display: grid; grid-template-columns: 300px 1fr; height: 100vh; }
.sidebar {
  display: flex; flex-direction: column;
  background: #0d0e11; border-right: 1px solid #1a1c20; overflow: hidden;
}
.me { padding: 14px; border-bottom: 1px solid #1a1c20; }
.me-label { font-size: 10px; color: #5e636e; text-transform: uppercase; letter-spacing: 1px; }
.me-handle {
  font-size: 12px; color: #c7cbd3; word-break: break-all;
  margin-top: 4px; cursor: pointer; user-select: all;
}
.me-handle:hover { color: #eaeef5; }
.me-status { font-size: 10px; color: #5e636e; margin-top: 6px; }
.me-status.online { color: #4bbf73; }
.me-status.connecting { color: #c99c4a; }

.add-friend { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid #1a1c20; }
.add-friend input {
  flex: 1; min-width: 0; background: #15171b; color: #eaeef5;
  border: 1px solid #23262d; padding: 8px 10px; border-radius: 6px;
  outline: none; font-size: 12px;
}
.add-friend input:focus { border-color: #3a4150; }
.add-friend button {
  background: #1f2229; color: #eaeef5; border: 1px solid #2e323a;
  padding: 0 14px; cursor: pointer; border-radius: 6px;
}
.add-friend button:hover { background: #262a32; }

.friends-list { flex: 1; overflow-y: auto; }
.friend {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-bottom: 1px solid #14161a;
  cursor: pointer; font-size: 12px;
}
.friend:hover { background: #13151a; }
.friend.active { background: #16181d; }
.friend .dot { width: 8px; height: 8px; border-radius: 50%; background: #3a3d45; flex-shrink: 0; }
.friend.online .dot { background: #4bbf73; }
.friend .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend .unread {
  background: #3d4f68; color: #eaeef5; font-size: 10px;
  padding: 2px 7px; border-radius: 10px; min-width: 18px; text-align: center;
}
.friend .del {
  background: transparent; border: none; color: #5e636e;
  cursor: pointer; font-size: 14px; padding: 0 4px;
}
.friend .del:hover { color: #d94f4f; }

.logout {
  margin: 10px; background: transparent; color: #8a8f99;
  border: 1px solid #23262d; padding: 8px; cursor: pointer;
  border-radius: 6px; font-size: 12px;
}
.logout:hover { color: #d94f4f; border-color: #3a2326; }

.chat-pane { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid #1a1c20;
  font-size: 13px; color: #c7cbd3;
}
.chat-title { word-break: break-all; }
.chat-actions button {
  background: #1f2229; border: 1px solid #2e323a; color: #eaeef5;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.chat-actions button:disabled { opacity: 0.3; cursor: not-allowed; }

.chat-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.msg {
  max-width: 72%; padding: 8px 12px; border-radius: 12px;
  font-size: 13px; word-wrap: break-word; line-height: 1.4;
}
.msg.in { background: #15171b; align-self: flex-start; border-bottom-left-radius: 3px; }
.msg.out { background: #2a3a54; align-self: flex-end; border-bottom-right-radius: 3px; color: #e7ecf5; }
.msg .t { display: block; font-size: 9px; color: #666a73; margin-top: 3px; }
.msg.out .t { color: #8a9bbd; }
.msg.system {
  background: transparent; align-self: center; color: #5e636e;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
}

.chat-input { display: flex; gap: 6px; padding: 12px; border-top: 1px solid #1a1c20; }
.chat-input input {
  flex: 1; background: #15171b; border: 1px solid #23262d;
  color: #eaeef5; padding: 10px 12px; border-radius: 6px;
  outline: none; font-size: 13px;
}
.chat-input input:focus { border-color: #3a4150; }
.chat-input input:disabled { opacity: 0.5; }
.chat-input button {
  background: #2a3a54; color: #eaeef5; border: none;
  padding: 0 18px; border-radius: 6px; cursor: pointer;
}
.chat-input button:disabled { opacity: 0.35; cursor: not-allowed; }

.call-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.call-overlay.hidden { display: none; }
.call-card {
  background: #15171b; padding: 32px; border-radius: 12px;
  text-align: center; min-width: 320px; max-width: 90vw;
  border: 1px solid #23262d;
}
.call-peer { font-size: 15px; color: #eaeef5; margin-bottom: 8px; word-break: break-all; }
.call-status { color: #9aa0ac; font-size: 12px; margin-bottom: 8px; }
.call-timer { color: #4bbf73; font-size: 14px; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.call-actions { display: flex; gap: 10px; justify-content: center; }
.call-actions button {
  padding: 10px 18px; border: none; border-radius: 6px;
  cursor: pointer; font-size: 12px;
}
.call-actions .accept { background: #2a5e3a; color: #fff; }
.call-actions .reject { background: #5e2a2a; color: #fff; }
.call-actions .hangup { background: #5e2a2a; color: #fff; }
.call-actions .hidden { display: none; }