:root{
  --bg:#050815;--panel:rgba(10,16,32,.88);--line:rgba(190,170,255,.22);
  --purple:#8c4cff;--purple2:#d9c8ff;--green:#65ffb1;--text:#f5f4ff;--muted:#a7a8ba;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}
body{overflow-x:hidden;background:
radial-gradient(circle at 50% -10%,rgba(106,255,168,.16),transparent 34rem),
radial-gradient(circle at 18% 30%,rgba(116,50,255,.18),transparent 30rem),
linear-gradient(135deg,#070818,#02040d 70%)}
.ambient{position:fixed;border-radius:50%;filter:blur(80px);opacity:.22;pointer-events:none}.ambient-a{width:280px;height:280px;right:-90px;top:8%;background:#50ff9e}.ambient-b{width:300px;height:300px;left:-120px;bottom:10%;background:#7c39ff}
.shell{width:min(1180px,94vw);margin:0 auto;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:34px 0}
.auth-card{width:min(470px,100%);padding:28px 32px 24px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(13,18,37,.92),rgba(5,8,19,.96));box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 50px rgba(111,60,255,.12);backdrop-filter:blur(15px);text-align:center}
.logo{width:230px;max-width:75%;height:auto;filter:drop-shadow(0 0 20px rgba(145,90,255,.28))}
.brand-line{height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);margin:2px 30px 24px;opacity:.8}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:22px}.tab{background:none;border:0;color:var(--muted);padding:12px 6px;font-weight:800;font-size:12px;letter-spacing:1px;cursor:pointer}.tab.active{color:#fff;border-bottom:2px solid var(--purple)}
form{text-align:left}.auth-card label{display:block;font-size:12px;font-weight:700;color:#d9d8e6;margin:13px 0 7px}
input{width:100%;border:1px solid rgba(210,200,255,.17);background:rgba(0,0,0,.24);color:#fff;border-radius:12px;padding:14px 15px;outline:0;transition:.2s;font-size:14px}
input:focus{border-color:rgba(145,90,255,.75);box-shadow:0 0 0 3px rgba(125,63,255,.12)}
.primary,.send{width:100%;border:0;border-radius:12px;padding:14px;margin-top:18px;color:#fff;font-weight:900;letter-spacing:1px;cursor:pointer;background:linear-gradient(100deg,#5e28cf,#a765ff);box-shadow:0 8px 25px rgba(104,43,225,.25)}
.error{min-height:20px;color:#ff8eae;font-size:13px;text-align:center}.tagline{margin:18px 0 0;color:#cfd0d9;font-size:10px;letter-spacing:5px}
.hidden{display:none!important}
.chat-app{width:100%;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(4,7,17,.9);box-shadow:0 30px 100px rgba(0,0,0,.55)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(9,13,28,.94)}
.top-brand{display:flex;align-items:center;gap:10px}.mini-logo{width:58px;height:58px;object-fit:cover;border-radius:50%}.top-brand strong{display:block;font-size:15px;letter-spacing:2px}.top-brand span{font-size:8px;letter-spacing:2.5px;color:var(--green)}
.account{display:flex;align-items:center;gap:12px}.account span{font-weight:700;color:#ddd}.ghost{border:1px solid var(--line);background:transparent;color:#ddd;border-radius:10px;padding:9px 11px;font-size:10px;font-weight:800;cursor:pointer}
.chat-grid{display:grid;grid-template-columns:270px 1fr;min-height:650px}.users-panel{border-right:1px solid var(--line);background:rgba(8,11,24,.75)}.panel-title{display:flex;justify-content:space-between;align-items:center;padding:20px 17px;color:#ddd;font-size:11px;letter-spacing:1.2px;border-bottom:1px solid var(--line)}.panel-title b{background:rgba(101,255,177,.12);color:var(--green);padding:5px 8px;border-radius:999px}
.users-list{padding:10px}.user{display:flex;align-items:center;gap:10px;padding:11px 9px;border-radius:10px}.user:hover{background:rgba(255,255,255,.035)}.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(101,255,177,.8)}.user-name{font-size:13px;font-weight:700}.you{color:var(--purple2);font-size:10px;margin-left:auto}
.conversation{display:flex;flex-direction:column;min-width:0}.conversation-head{display:flex;justify-content:space-between;align-items:center;padding:19px 22px;border-bottom:1px solid var(--line)}.conversation-head h1{font-size:15px;margin:0 0 5px;letter-spacing:2px}.conversation-head p{margin:0;color:var(--muted);font-size:12px}.live{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--green);display:flex;align-items:center;gap:7px}.live i{display:block;width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}
.messages{flex:1;overflow:auto;padding:20px 22px;min-height:0;max-height:540px}.msg{display:flex;gap:10px;margin:0 0 14px}.avatar{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:grid;place-items:center;background:linear-gradient(135deg,#6c35d8,#b982ff);font-weight:900;font-size:12px;box-shadow:0 0 18px rgba(129,69,255,.2)}.bubble{max-width:min(760px,84%);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:4px 14px 14px 14px;padding:9px 12px}.meta{display:flex;gap:9px;align-items:center;margin-bottom:4px}.meta strong{font-size:12px}.meta time{font-size:9px;color:#7f8193}.body{font-size:13px;line-height:1.45;color:#eee;white-space:pre-wrap;word-break:break-word}
.msg.mine{justify-content:flex-end}.msg.mine .avatar{order:2;background:linear-gradient(135deg,#25bb7a,#9affd1)}.msg.mine .bubble{order:1;background:rgba(127,66,255,.13);border-color:rgba(152,112,255,.18);border-radius:14px 4px 14px 14px}.msg.mine .meta{justify-content:flex-end}
.composer{display:flex;gap:9px;padding:13px;border-top:1px solid var(--line);background:rgba(7,10,22,.95)}.composer input{margin:0}.send{width:auto;min-width:100px;margin:0}
@media(max-width:760px){.shell{width:100%;padding:0}.chat-app,.auth-card{border-radius:0;min-height:100vh}.chat-grid{grid-template-columns:1fr}.users-panel{display:none}.topbar{padding:10px}.account span{display:none}.conversation-head{padding:15px}.messages{max-height:none;height:calc(100vh - 180px)}}