:root{
  --bg:#0b1020;
  --panel:#0f1730;
  --panel2:#0c142b;
  --border:rgba(255,255,255,.08);
  --text:#e7ecff;
  --muted:rgba(231,236,255,.72);
  --muted2:rgba(231,236,255,.52);
  --brand:#6ee7ff;
  --brand2:#a78bfa;
  --danger:#ff5a7a;
  --shadow:0 12px 35px rgba(0,0,0,.45);
  --radius:16px;
  --radius2:12px;
  --font:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(800px 500px at 85% 20%, rgba(167,139,250,.16), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(110,231,255,.10), transparent 55%),
    var(--bg);
}

.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(15,23,48,.85), rgba(15,23,48,.55));
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{display:flex;align-items:center;gap:10px}
.brand__dot{
  width:12px;height:12px;border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 0 20px rgba(110,231,255,.35);
}
.brand__title{font-weight:700;letter-spacing:.2px}
.topbar__right{display:flex;gap:8px;align-items:center}

button{
  font-family:inherit;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
button:disabled{opacity:.55;cursor:not-allowed}
.ghost{background:rgba(255,255,255,.04)}
.primary{
  border:1px solid rgba(110,231,255,.30);
  background:linear-gradient(135deg, rgba(110,231,255,.16), rgba(167,139,250,.14));
}
.danger{
  border:1px solid rgba(255,90,122,.35);
  background:rgba(255,90,122,.12);
}

.auth{
  min-height:calc(100vh - 64px);
  display:grid;
  place-items:center;
  padding:22px;
}
.auth__card{
  width:min(520px, 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(15,23,48,.85), rgba(12,20,43,.70));
  box-shadow:var(--shadow);
  padding:18px;
}
.auth__tabs{display:flex;gap:8px;margin-bottom:14px}
.tab{flex:1}
.tab--active{border-color:rgba(110,231,255,.35)}

.form{display:flex;flex-direction:column;gap:12px}
.form--compact{margin-top:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13px;color:var(--muted)}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  color:var(--text);
  outline:none;
}
.field input:focus{border-color:rgba(110,231,255,.35)}
.field__hint{font-size:12px;color:var(--muted2)}
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:12.5px;color:var(--muted);line-height:1.35}
.alert{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,90,122,.35);
  background:rgba(255,90,122,.10);
  color:rgba(255,220,228,.95);
}

.layout{
  height:calc(100vh - 64px);
  display:grid;
  grid-template-columns:320px 1fr;
}
.sidebar{
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(15,23,48,.70), rgba(12,20,43,.55));
  display:flex;
  flex-direction:column;
  min-width:260px;
}
.search{padding:12px;border-bottom:1px solid var(--border)}
.search input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
.users{overflow:auto;padding:8px}
.userItem{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;
  border-radius:14px;
  cursor:pointer;
  border:1px solid transparent;
}
.userItem:hover{background:rgba(255,255,255,.04)}
.userItem--active{border-color:rgba(110,231,255,.26);background:rgba(110,231,255,.06)}
.userItem__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.userItem__name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userItem__sub{font-size:12px;color:var(--muted2)}
.pill{
  margin-left:auto;
  font-size:12px;
  color:rgba(209,255,231,.92);
  border:1px solid rgba(68,255,170,.25);
  background:rgba(68,255,170,.08);
  padding:4px 8px;
  border-radius:999px;
}
.pill--off{
  color:rgba(231,236,255,.7);
  border-color:rgba(231,236,255,.10);
  background:rgba(255,255,255,.04);
}

.main{display:flex;flex-direction:column;min-width:0}
.chatHeader{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(15,23,48,.70), rgba(12,20,43,.35));
}
.chatHeader__left{display:flex;align-items:center;gap:12px;min-width:0}
.chatHeader__meta{min-width:0}
.chatHeader__name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatHeader__status{font-size:12px;color:var(--muted2)}
.chatHeader__right{display:flex;gap:8px}

.messages{
  flex:1;
  overflow:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.msgRow{display:flex;gap:10px;align-items:flex-end}
.msgRow--me{flex-direction:row-reverse}
.bubble{
  max-width:min(680px, 78%);
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  white-space:pre-wrap;
  word-wrap:break-word;
}
.msgRow--me .bubble{
  border-color:rgba(110,231,255,.22);
  background:rgba(110,231,255,.10);
}
.bubble__meta{margin-top:6px;font-size:11px;color:var(--muted2)}

.composer{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(12,20,43,.35), rgba(15,23,48,.55));
}
.composer input{
  flex:1;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}

.avatar{
  width:36px;height:36px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  display:grid;
  place-items:center;
  font-weight:800;
}
.avatar--lg{width:44px;height:44px}
.avatar--xl{width:64px;height:64px}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.58);
  display:grid;place-items:center;
  padding:18px;
  z-index:50;
}
.overlay__card{
  width:min(920px, 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(15,23,48,.92), rgba(12,20,43,.86));
  box-shadow:var(--shadow);
  padding:14px;
}
.overlay__title{font-weight:800;font-size:18px}
.overlay__sub{color:var(--muted);margin-top:4px;margin-bottom:10px}
.overlay__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.callGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.callGrid video{
  width:100%;
  background:rgba(0,0,0,.35);
  border:1px solid var(--border);
  border-radius:14px;
  aspect-ratio:16/9;
}

.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.56);
  display:grid;place-items:center;
  padding:18px;
  z-index:60;
}
.modal__card{
  width:min(560px, 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(15,23,48,.92), rgba(12,20,43,.86));
  box-shadow:var(--shadow);
  padding:16px;
}
.modal__title{font-weight:800;font-size:18px}
.modal__sub{color:var(--muted);margin-top:4px}
.modal__actions{display:flex;justify-content:flex-end;margin-top:14px}
.profileRow{display:flex;gap:12px;align-items:center;margin-top:14px}
.profileName{font-weight:800}
.profileUser{color:var(--muted)}

.chatHidden #chatView{display:none !important}
.chatHidden #authView{display:none !important}

@media (max-width: 860px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
}