:root{color-scheme:dark;--bg:#10131a;--panel:#17212b;--panel2:#0e1621;--bubble:#2b5278;--other:#182533;--line:#243244;--text:#eef6ff;--muted:#8fa4b8;--blue:#2aabee;--green:#28a745;--red:#dc3545}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;height:100vh;height:100dvh;overflow:hidden}button,input{font:inherit}button{border:0;color:white;background:var(--blue)}input{border:0;outline:0;color:var(--text);background:#202b36}.hidden{display:none!important}.muted{color:var(--muted);font-size:13px}
.login{height:100%;display:grid;align-content:center;gap:12px;padding:24px;max-width:420px;margin:auto}.logo{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2aabee,#7c3aed);font-size:34px;font-weight:900}.login h1{font-size:40px;margin:0}.login p{margin:0 0 8px;color:var(--muted)}.login input,.login button{height:48px;border-radius:10px;padding:0 14px}.login button{font-weight:800}
.app{height:100%;display:grid;grid-template-columns:320px 1fr}.sidebar{min-width:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 12px) 10px calc(env(safe-area-inset-bottom) + 10px);gap:10px}.sideTop{display:flex;align-items:center;justify-content:space-between}.topActions{display:flex;gap:8px}.appTitle{font-size:24px;font-weight:900}.iconBtn{width:42px;height:42px;border-radius:50%;background:#263545;display:grid;place-items:center;font-size:18px}.mobileMenu{display:none}.search{height:42px;border-radius:999px;padding:0 16px}.dialogs{display:flex;flex-direction:column;gap:4px;overflow:auto}.dialog{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:transparent}.dialog.active,.dialog:hover{background:#223142}.avatar,.peerAvatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2aabee,#3867d6);font-weight:900}.dialogName{font-weight:800}.dialogLast{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{min-width:0;background:var(--panel2);display:flex;flex-direction:column}.chatHead{height:66px;padding:10px 14px;display:flex;align-items:center;gap:10px;background:var(--panel);border-bottom:1px solid var(--line)}.peerInfo{flex:1;min-width:0}.peerName{font-weight:900}.messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:radial-gradient(circle at top,#142235,#0e1621 55%)}.msg{max-width:min(72%,620px);padding:8px 10px;border-radius:14px;background:var(--other);line-height:1.35;word-break:break-word}.msg.me{align-self:flex-end;background:var(--bubble)}.msgMeta{font-size:11px;color:#c8d5e0;text-align:right;margin-top:4px}.msg a{color:#bde7ff}.composer{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:10px 14px calc(env(safe-area-inset-bottom) + 10px);background:var(--panel);border-top:1px solid var(--line)}.composer input{height:44px;border-radius:999px;padding:0 16px}.sendBtn{width:44px;height:44px;border-radius:50%;font-size:18px}
.incoming{position:fixed;inset:0;z-index:20;display:grid;align-content:center;justify-items:center;gap:18px;background:radial-gradient(circle at 50% 18%,#2aabee 0,#17212b 38%,#05070c 100%);padding:24px}.callAvatar{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:#223a55;font-size:52px;border:1px solid #73d1ff}.callMode{font-size:22px;color:#dceeff}.callName{font-size:34px;font-weight:900}.callActions{display:flex;gap:50px;margin-top:48px}.round{width:64px;height:64px;border-radius:50%;background:#34495e;font-size:24px}.round.ok{background:var(--green)}.round.danger{background:var(--red)}
.call{position:fixed;inset:0;z-index:30;background:#05070c;display:grid;grid-template-rows:1fr auto;padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 14px);gap:10px}.videoBox{position:relative;overflow:hidden;border-radius:14px;background:#0b1020}.videoBox video:first-child{width:100%;height:100%;object-fit:cover}.videoBox video:nth-child(2){position:absolute;right:12px;top:12px;width:32%;max-width:180px;aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1px solid #73d1ff;background:#111827}.callShade{position:absolute;left:0;right:0;top:0;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0))}.callTop{font-size:22px;font-weight:900}.callSub{color:#dbeafe}.callBar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.callControl{min-width:150px;height:58px;border-radius:16px;background:#253445;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-size:14px;font-weight:800}.callControl.off{background:#4a5568;color:#d6dee8}.callControl.danger{background:var(--red)}.callControl:disabled{opacity:.55}.controlIcon{font-size:20px;line-height:1}
.modal{position:fixed;inset:0;z-index:40;background:rgba(5,7,12,.72);display:grid;place-items:center;padding:18px}.settingsPanel{width:min(560px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:10px;box-shadow:0 20px 80px rgba(0,0,0,.45)}.settingsHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.settingsTitle{font-size:22px;font-weight:900}.instructions{display:grid;gap:6px;background:#111b27;border:1px solid var(--line);border-radius:12px;padding:12px;color:#dbeafe;font-size:14px;line-height:1.35}.settingsPanel label{font-size:13px;color:var(--muted);font-weight:800}.settingsInput{height:44px;border-radius:10px;padding:0 12px;width:100%}.settingsActions{display:flex;gap:10px}.settingsActions button{height:44px;border-radius:10px;padding:0 16px;font-weight:900}.secondaryBtn{background:#34495e}
@media(max-width:760px){.app{grid-template-columns:1fr}.mobileMenu{display:grid}.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:15;width:min(86vw,330px);box-shadow:20px 0 60px rgba(0,0,0,.45);transform:translateX(-105%);transition:transform .22s ease}.sidebar.open{transform:translateX(0)}.chatHead{height:62px}.messages{padding:12px}.msg{max-width:86%}.peerAvatar{width:42px;height:42px}.chatHead .iconBtn{width:40px;height:40px}.composer{padding-left:10px;padding-right:10px}.callActions{gap:42px}.callBar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.callControl{min-width:0;width:100%;height:54px;border-radius:14px;font-size:13px}.callControl.danger{grid-column:1/-1}}