*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#0a0e14;
  --bg2:#121722;
  --surface:rgba(255,255,255,.05);
  --surface2:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --text:#eef2f6;
  --muted:#8b98a9;
  --accent:#4c8dff;
  --accent-strong:#3a7bff;
  --accent2:#7b5cff;
  --own:linear-gradient(135deg,#3a7bff,#6a5cff);
  --own2:#2f6be0;
  --other:rgba(255,255,255,.07);
  --danger:#f0555d;
  --ok:#34c471;
  --blur:blur(20px) saturate(150%);
  --shadow-md:0 6px 20px rgba(0,0,0,.30);
  --shadow-lg:0 16px 48px rgba(0,0,0,.45);
  --shadow-accent:0 10px 30px rgba(76,141,255,.30);
  --radius:16px;
  --radius-sm:11px;
  --header-h:56px;
}

html,body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(60% 45% at 15% -5%,rgba(76,141,255,.16),transparent 60%),
    radial-gradient(50% 40% at 95% 15%,rgba(123,92,255,.12),transparent 60%),
    radial-gradient(70% 60% at 50% 115%,rgba(52,196,113,.07),transparent 60%),
    var(--bg);
}

#app{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden}

@supports not (backdrop-filter:blur(1px)){
  .card,.modal,.call-box,.toast,.main-header,.chat-head,.send-bar{background:var(--bg2)}
}

.hidden{display:none !important}

.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:radial-gradient(1100px 600px at 50% -10%,#1b2940 0%,var(--bg) 55%);
}

.start-wrap{
  width:100%;
  max-width:360px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.brand-badge{
  width:72px;
  height:72px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--accent),#6d28d9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  box-shadow:0 10px 30px rgba(59,130,246,.35);
  margin-bottom:6px;
}

.brand-name{font-size:24px;font-weight:700;margin:0;letter-spacing:.2px}

.start-sub{color:var(--muted);margin:0 0 20px;font-size:15px}

.start-actions{display:flex;flex-direction:column;gap:10px;width:100%}

.server-box{
  width:100%;
  display:flex;
  gap:8px;
  margin-top:8px;
}

.card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.card-title{margin:0;font-size:20px}

.link-back{
  background:none;
  border:none;
  color:var(--muted);
  font-size:14px;
  padding:4px 0;
  cursor:pointer;
  align-self:flex-start;
}

.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}

.field input,.filter,input[type="text"],input[type="url"],input[type="password"],input[type="search"]{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-size:16px;
  padding:12px 14px;
  outline:none;
  width:100%;
  transition:border-color .15s;
}

.field input:focus,.filter:focus{
  border-color:var(--accent);
}

.btn{
  appearance:none;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  min-height:46px;
  transition:background .15s,transform .05s;
  user-select:none;
}

.btn:active{transform:scale(.98)}

.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:#fff;
  box-shadow:var(--shadow-accent);
}

.btn-primary:hover{background:linear-gradient(135deg,var(--accent-strong),var(--accent2))}

.btn-primary:disabled{opacity:.5;cursor:default;transform:none}

.btn-outline{
  background:transparent;
  border-color:var(--accent);
  color:var(--accent);
}

.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}

.btn-block{width:100%}

.icon-btn{
  appearance:none;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  min-width:44px;
  min-height:44px;
  font-size:20px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
}

.icon-btn:hover{background:var(--border)}

#screen-main{justify-content:flex-start;padding:0;background:var(--bg)}

.main-header{
  height:var(--header-h);
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background:rgba(18,23,34,.72);
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
  z-index:20;
}

.brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px}

.layout{
  flex:1;
  position:relative;
  width:100%;
  min-height:0;
  overflow:hidden;
}

.sidebar{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--bg2);
  z-index:5;
}

.sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 6px;
}

.sidebar-title{font-size:16px;font-weight:700}

.filter{margin:6px 12px 8px;flex:none}

.room-list{
  list-style:none;
  margin:0;
  padding:0 8px 16px;
  flex:1;
  overflow-y:auto;
}

.room-list-empty{
  padding:30px 20px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

.room-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 10px;
  border-radius:var(--radius-sm);
  cursor:pointer;
}

.room-item:hover{background:var(--surface)}

.room-item.active{background:var(--surface2)}

.room-avatar{
  flex:none;
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,#33415c,#1f2937);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  font-weight:600;
}

.room-item-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.room-item-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.room-item-name{
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.room-item-time{font-size:12px;color:var(--muted);flex:none}

.room-item-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.room-item-sub{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.room-item-unread{
  flex:none;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  min-width:20px;
  height:20px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
}

.chat-view{
  position:absolute;
  inset:0;
  z-index:10;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  min-width:0;
  transform:translateX(100%);
  transition:transform .22s ease;
}

.chat-view.open{transform:translateX(0)}

.chat-head{
  height:var(--header-h);
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background:rgba(18,23,34,.72);
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
}

.back-btn{
  appearance:none;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:22px;
  cursor:pointer;
  min-width:36px;
  min-height:44px;
  padding:0;
}

.chat-head-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.chat-title{
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chat-sub.online{color:var(--ok)}

.messages{
  flex:1;
  overflow-y:auto;
  padding:14px 12px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.empty-chat{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:15px;
  text-align:center;
  padding:20px;
}

.msg-row{display:flex;flex-direction:column;max-width:82%}

.msg-row.own{align-self:flex-end;align-items:flex-end}

.msg-row.other{align-self:flex-start;align-items:flex-start}

.msg-author{font-size:12.5px;color:var(--muted);margin:8px 4px 2px}

.bubble{
  border-radius:var(--radius);
  padding:8px 12px;
  max-width:100%;
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  font-size:15px;
  line-height:1.4;
}

.msg-row.other .bubble{background:var(--other);border-bottom-left-radius:4px}

.msg-row.own .bubble{background:linear-gradient(135deg,var(--own),var(--own2));border-bottom-right-radius:4px}

.bubble.undecryptable{font-style:italic;color:var(--muted);opacity:.85}

.msg-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  padding:0 2px;
  font-size:11.5px;
  color:var(--muted);
}

.msg-row.own .msg-meta{justify-content:flex-end}

.msg-status{color:var(--muted)}

.send-bar{
  flex:none;
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(18,23,34,.72);
  backdrop-filter:var(--blur);
  border-top:1px solid var(--border);
}

.attach-btn{flex:none;min-height:46px;min-width:46px;border-radius:50%;font-size:18px;padding:0}

.send-bar input{flex:1;border-radius:22px;padding:12px 18px}

.send-btn{border-radius:50%;width:46px;padding:0;flex:none;font-size:18px}

.overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(5,8,12,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:fadein .18s ease;
}

@keyframes fadein{from{opacity:0}to{opacity:1}}

.modal{
  width:100%;
  max-width:400px;
  max-height:88dvh;
  overflow-y:auto;
  background:var(--surface);
  backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:pop .2s ease;
}

@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}

.modal-head{display:flex;align-items:center;justify-content:space-between}

.modal-title{font-size:17px;font-weight:700}

.tabs{display:flex;gap:6px;background:var(--bg2);border-radius:var(--radius-sm);padding:4px}

.tab{
  flex:1;
  appearance:none;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:15px;
  font-weight:600;
  padding:9px 8px;
  border-radius:8px;
  cursor:pointer;
}

.tab.active{background:var(--accent);color:#fff}

.tab-panel{display:flex;flex-direction:column;gap:12px}

.search-results{
  list-style:none;
  margin:0;
  padding:0;
  max-height:220px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.search-results li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  cursor:pointer;
}

.search-results li:hover{background:var(--surface2)}

.search-results .sr-name{font-weight:600;font-size:15px}

.search-results .sr-online{font-size:12.5px;color:var(--muted)}

.search-results .sr-online.on{color:var(--ok)}

.search-results .empty{color:var(--muted);font-size:14px;cursor:default}

.search-results .empty:hover{background:transparent}

.call-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  padding:24px;
  background:var(--surface);
  backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  max-width:min(92vw,420px);
  width:100%;
  animation:callpulse .3s ease;
}

.call-videos{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  margin-top:8px;
}

.remote-video{width:100%;height:100%;object-fit:cover}

.local-video{
  position:absolute;
  right:8px;
  bottom:8px;
  width:34%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.3);
  background:#000;
}

@keyframes callpulse{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

.call-avatar{
  width:92px;
  height:92px;
  border-radius:50%;
  background:linear-gradient(135deg,#2b6de0,#6d28d9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  animation:ring 1s ease-in-out infinite;
}

@keyframes ring{
  0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}
  50%{box-shadow:0 0 0 16px rgba(59,130,246,0)}
}

.call-name{font-size:20px;font-weight:700;margin-top:6px;max-width:100%;word-break:break-word}

.call-status{color:var(--muted);font-size:14px}

.call-actions{display:flex;gap:14px;margin-top:18px;align-items:center}

.call-btn{
  appearance:none;
  border:none;
  border-radius:50%;
  width:62px;
  height:62px;
  font-size:20px;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.call-btn.off{background:var(--muted)}

.call-btn:hover{filter:brightness(1.1)}

.call-accept{background:var(--ok);box-shadow:0 6px 18px rgba(52,196,113,.4)}

.call-decline{background:var(--danger);box-shadow:0 6px 18px rgba(240,85,93,.4)}

.call-hangup{background:var(--danger);box-shadow:0 6px 18px rgba(240,85,93,.4);width:auto;border-radius:31px;padding:0 22px;font-size:14px}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:2000;
  background:rgba(32,43,58,.85);
  backdrop-filter:var(--blur);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:11px 18px;
  font-size:14px;
  max-width:min(92vw,420px);
  text-align:center;
  box-shadow:var(--shadow-lg);
  animation:pop .18s ease;
}

.msg-status{color:var(--muted)}

.msg-status.read{color:var(--accent)}

.file-bubble{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}

.file-name{font-weight:600;font-size:15px;word-break:break-word}

.file-meta{font-size:12.5px;color:var(--muted)}

@media (min-width:768px){

  .screen{padding:24px}

  .layout{display:grid;grid-template-columns:320px 1fr}

  .sidebar{position:relative;inset:auto;border-right:1px solid var(--border)}

  .chat-view{
    position:relative;
    inset:auto;
    transform:none;
    transition:none;
    grid-column:2;
  }

  .back-btn{display:none}

  .msg-row{max-width:70%}
}

@media (min-width:1200px){
  .messages{max-width:920px;margin:0 auto;width:100%}
}

@media (hover:hover){
  .btn:hover,.icon-btn:hover{filter:brightness(1.1)}
}

.btn,.icon-btn,.back-btn,.call-btn,.tab,.field input,.filter,.send-bar input,.room-item{
  touch-action:manipulation;
}

@media (max-width:767.98px){
  body.chat-open .main-header{display:none}

  .overlay{align-items:flex-end;padding:0}

  .modal{
    width:100%;
    max-width:none;
    max-height:92dvh;
    border-radius:20px 20px 0 0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}