*{box-sizing:border-box;margin:0;padding:0}

:root{
--bg:#020817;
--card:#071224;
--line:#1f2a44;
--purple:#6d28d9;
--purple2:#8b5cf6;
--blue:#2563eb;
--green:#22c55e;
--red:#ef4444;
--muted:#9ca3af;
}

body{
height:100vh;
overflow:hidden;
background:#020817;
color:white;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}

button,input,select{font-family:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* ================= LOGIN FINAL ================= */

#loginModal.auth-modal{
position:fixed!important;
inset:0!important;
z-index:9999!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.58)),
url("/bg-login.png") center center / cover no-repeat!important;
}

/* Logo */
#loginModal .auth-bg-brand{
position:absolute!important;
left:38px!important;
top:32px!important;
z-index:5!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
}

#loginModal .auth-logo-mini{
width:50px!important;
height:50px!important;
border:3px solid #ef4444!important;
border-radius:50%!important;
background:rgba(0,0,0,.50)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:23px!important;
box-shadow:0 0 28px rgba(239,68,68,.6)!important;
}

#loginModal .auth-bg-brand strong{
display:block!important;
font-size:30px!important;
font-weight:900!important;
letter-spacing:-1px!important;
line-height:1!important;
}

#loginModal .auth-bg-brand strong span{color:#ef4444!important}

#loginModal .auth-bg-brand small{
display:block!important;
margin-top:4px!important;
font-size:10px!important;
font-weight:900!important;
color:#e5e7eb!important;
}

/* Online */
#loginModal .auth-online{
position:absolute!important;
right:40px!important;
top:38px!important;
z-index:5!important;
padding:12px 20px!important;
border-radius:999px!important;
background:rgba(0,0,0,.62)!important;
border:1px solid rgba(255,255,255,.25)!important;
color:white!important;
font-size:15px!important;
font-weight:900!important;
}

#loginModal .auth-online span{
display:inline-block!important;
width:9px!important;
height:9px!important;
background:#ef4444!important;
border-radius:50%!important;
margin-right:8px!important;
box-shadow:0 0 18px #ef4444!important;
}

/* Sol */
#loginModal .auth-left-slogan{
position:absolute!important;
left:65px!important;
top:245px!important;
z-index:5!important;
display:flex!important;
flex-direction:column!important;
gap:15px!important;
font-size:25px!important;
font-weight:900!important;
line-height:1.1!important;
text-shadow:0 10px 30px rgba(0,0,0,.9)!important;
}

#loginModal .neon-chat{
font-size:58px!important;
filter:drop-shadow(0 0 18px #ef4444)!important;
}

#loginModal .auth-left-slogan b:nth-child(3){color:#ef4444!important}

#loginModal .auth-left-slogan:after{
content:""!important;
width:82px!important;
height:4px!important;
border-radius:99px!important;
background:#ef4444!important;
box-shadow:0 0 18px #ef4444!important;
margin-top:4px!important;
}

/* Sağ */
#loginModal .auth-side-cards{
position:absolute!important;
right:48px!important;
top:245px!important;
z-index:5!important;
width:285px!important;
display:flex!important;
flex-direction:column!important;
gap:16px!important;
}

#loginModal .auth-side-cards div{
min-height:78px!important;
padding:15px 16px!important;
border-radius:13px!important;
background:rgba(0,0,0,.62)!important;
border:1px solid rgba(255,255,255,.16)!important;
border-left:5px solid #ef4444!important;
box-shadow:0 18px 42px rgba(0,0,0,.45)!important;
}

#loginModal .auth-side-cards b{
display:block!important;
font-size:14px!important;
font-weight:900!important;
line-height:1.2!important;
margin-bottom:6px!important;
}

#loginModal .auth-side-cards span{
display:block!important;
font-size:12px!important;
line-height:1.35!important;
color:#d1d5db!important;
}

/* Orta kart */
#loginModal .auth-card{
position:relative!important;
z-index:6!important;
width:430px!important;
max-width:430px!important;
min-height:auto!important;
padding:28px 32px!important;
border-radius:26px!important;
background:linear-gradient(180deg,rgba(8,8,8,.82),rgba(0,0,0,.72))!important;
border:1px solid rgba(255,255,255,.32)!important;
box-shadow:
0 0 0 1px rgba(239,68,68,.14),
0 35px 95px rgba(0,0,0,.75),
0 0 50px rgba(239,68,68,.18)!important;
text-align:center!important;
backdrop-filter:blur(16px)!important;
overflow:visible!important;
}

#loginModal .auth-card:before{
content:""!important;
position:absolute!important;
top:-2px!important;
left:18%!important;
right:18%!important;
height:3px!important;
background:linear-gradient(90deg,transparent,#ef4444,transparent)!important;
box-shadow:0 0 20px #ef4444!important;
}

#loginModal .auth-card:after{
content:""!important;
position:absolute!important;
bottom:-2px!important;
left:18%!important;
right:18%!important;
height:3px!important;
background:linear-gradient(90deg,transparent,#ef4444,transparent)!important;
box-shadow:0 0 20px #ef4444!important;
}

#loginModal .auth-logo{
width:56px!important;
height:56px!important;
margin:0 auto 12px!important;
border-radius:50%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:25px!important;
border:2px solid #ef4444!important;
background:radial-gradient(circle,rgba(239,68,68,.20),rgba(0,0,0,.72))!important;
box-shadow:0 0 30px rgba(239,68,68,.42)!important;
}

#loginModal .auth-card h1{
font-size:22px!important;
font-weight:900!important;
line-height:1.15!important;
margin-bottom:8px!important;
}

#loginModal .auth-card h1 span,
#loginModal .auth-card p b{color:#ef4444!important}

#loginModal .auth-card p{
font-size:12px!important;
line-height:1.4!important;
color:#e5e7eb!important;
margin-bottom:14px!important;
}

#loginModal .auth-choice:not(.hidden),
#loginModal .auth-form:not(.hidden),
#loginModal .register-fields:not(.hidden){
display:grid!important;
gap:10px!important;
}

#loginModal .primary-auth,
#loginModal .secondary-auth{
width:100%!important;
height:44px!important;
border-radius:12px!important;
font-size:15px!important;
font-weight:900!important;
margin:0!important;
}

#loginModal .primary-auth{
border:0!important;
background:linear-gradient(135deg,#ff3030,#b40000)!important;
color:white!important;
box-shadow:0 14px 30px rgba(239,68,68,.3)!important;
}

#loginModal .secondary-auth{
border:1px solid rgba(255,255,255,.72)!important;
background:rgba(0,0,0,.35)!important;
color:white!important;
}

#loginModal .auth-separator{
display:flex!important;
align-items:center!important;
gap:10px!important;
color:#cfcfcf!important;
font-size:11px!important;
margin:0!important;
}

#loginModal .auth-separator span{
height:1px!important;
background:rgba(255,255,255,.25)!important;
flex:1!important;
}

#loginModal .social-auth{
display:flex!important;
justify-content:center!important;
gap:12px!important;
}

#loginModal .social-auth button{
width:40px!important;
height:40px!important;
border-radius:50%!important;
border:1px solid rgba(255,255,255,.25)!important;
background:rgba(255,255,255,.07)!important;
color:white!important;
font-size:16px!important;
font-weight:900!important;
}

#loginModal .auth-form input,
#loginModal .auth-form select{
width:100%!important;
height:40px!important;
border-radius:10px!important;
border:1px solid rgba(255,255,255,.28)!important;
background:rgba(0,0,0,.55)!important;
color:white!important;
padding:0 13px!important;
font-size:13px!important;
outline:none!important;
}

#loginModal .auth-bottom{
position:absolute!important;
left:50%!important;
bottom:28px!important;
transform:translateX(-50%)!important;
z-index:5!important;
display:flex!important;
gap:34px!important;
font-size:13px!important;
font-weight:800!important;
color:#e5e7eb!important;
white-space:nowrap!important;
}

#authMessage{
color:#fca5a5;
font-size:12px;
min-height:16px;
}

/* ================= MAIN CHAT APP ================= */

.topbar{
height:66px;
display:grid;
grid-template-columns:225px 1fr 323px;
align-items:center;
padding:0 14px;
background:#040b1d;
border-bottom:1px solid var(--line);
}

.brand{display:flex;align-items:center;gap:11px}

.logo{
width:42px;height:42px;border-radius:11px;
background:linear-gradient(135deg,var(--purple2),var(--blue));
display:flex;align-items:center;justify-content:center;
font-weight:900;font-size:17px;
}

.brand h1{font-size:19px;line-height:1}
.brand span{font-size:10px;color:#a78bfa;font-weight:800}

.nav{
height:100%;
display:flex;
align-items:center;
justify-content:center;
gap:27px;
}

.nav button{
height:100%;
border:0;
background:transparent;
color:#d1d5db;
font-size:12px;
font-weight:800;
border-bottom:2px solid transparent;
}

.nav .active{
color:white;
border-bottom-color:var(--purple2);
}

.top-user{
display:flex;
align-items:center;
justify-content:flex-end;
gap:11px;
}

.icon-btn{
position:relative;
width:36px;
height:36px;
border-radius:12px;
border:1px solid var(--line);
background:#071224;
color:white;
font-size:14px;
}

.icon-btn b{
position:absolute;
right:-4px;
top:-4px;
width:14px;
height:14px;
border-radius:50%;
background:var(--red);
font-size:8px;
display:flex;
align-items:center;
justify-content:center;
}

.mini-profile{
display:flex;
align-items:center;
gap:8px;
}

.mini-profile strong{display:block;font-size:12px}
.mini-profile span{display:block;color:var(--green);font-size:10px;font-weight:800}

.avatar,.big-avatar,.msg-avatar{
background:linear-gradient(135deg,var(--purple),var(--blue));
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
overflow:hidden;
}

.avatar{
width:33px;
height:33px;
border-radius:50%;
font-size:11px;
}

.mini-profile .avatar{
width:38px;
height:38px;
border:2px solid var(--purple2);
font-size:14px;
}

.avatar img,.big-avatar img,.msg-avatar img{
width:100%;
height:100%;
object-fit:cover;
}

.logout{
border:0;
border-radius:11px;
padding:11px 15px;
background:linear-gradient(135deg,var(--purple),var(--blue));
color:white;
font-weight:900;
font-size:12px;
}

.app{
height:calc(100vh - 66px);
display:grid;
grid-template-columns:225px 1fr 293px;
gap:12px;
padding:12px 12px 57px;
}

.left,.right{
display:flex;
flex-direction:column;
gap:11px;
min-height:0;
}

.card,.chat{
background:linear-gradient(180deg,rgba(8,18,37,.97),rgba(3,10,25,.98));
border:1px solid var(--line);
border-radius:12px;
box-shadow:0 17px 52px rgba(0,0,0,.25);
}

.card{
padding:14px;
overflow:auto;
}

.rooms-card{height:237px;flex:none}
.online-card{flex:1;min-height:0}
.profile-card{height:143px;text-align:center;flex:none}
.request-card{height:96px;flex:none}
.friends-card{height:190px;flex:none}
.discover-card{flex:1;min-height:0}

.card-title{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:12px;
}

.card-title h3{font-size:14px}
.card-title button{border:0;background:transparent;color:#a78bfa;font-size:18px;font-weight:900}
.card-title span,.card-title em{font-style:normal;color:#c4b5fd;font-weight:900;font-size:11px}

.card-title em{
width:19px;
height:19px;
border-radius:50%;
background:#4f46e5;
display:flex;
align-items:center;
justify-content:center;
}

.card-title select{
width:83px;
border:0;
border-radius:8px;
background:#101b32;
color:#cbd5e1;
padding:7px 9px;
font-size:11px;
}

.room{
height:36px;
border-radius:9px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 9px;
margin-bottom:6px;
font-size:12px;
font-weight:900;
}

.room.active,.room:hover{
background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(37,99,235,.65));
}

.room b{
width:22px;
height:22px;
border-radius:50%;
background:#4f46e5;
display:flex;
align-items:center;
justify-content:center;
font-size:9px;
}

.user-row{
display:grid;
grid-template-columns:33px 1fr 29px;
gap:8px;
align-items:center;
padding:5px 0;
}

.user-row strong{display:block;font-size:11px}
.user-row small{display:block;color:var(--green);font-size:9px;font-weight:800;margin-top:2px}

.user-row button{
width:27px;
height:27px;
border:0;
border-radius:9px;
background:rgba(124,58,237,.22);
color:#c4b5fd;
font-size:11px;
font-weight:900;
}

.outline{
width:100%;
height:30px;
border:1px solid rgba(124,58,237,.65);
border-radius:8px;
background:transparent;
color:#a78bfa;
font-size:11px;
font-weight:900;
margin-top:8px;
}

.chat{
display:flex;
flex-direction:column;
overflow:hidden;
min-width:0;
}

.chat-head{
height:72px;
display:flex;
align-items:center;
gap:12px;
padding:15px;
border-bottom:1px solid var(--line);
}

.hash{
width:44px;
height:44px;
border-radius:11px;
background:linear-gradient(135deg,#7c3aed,#2563eb);
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
font-weight:900;
}

.chat-head h2{font-size:21px}
.chat-head p{color:var(--green);font-size:11px;font-weight:800;margin-top:3px}

.live{
margin-left:auto;
padding:9px 13px;
border-radius:999px;
background:rgba(34,197,94,.13);
color:var(--green);
font-size:11px;
font-weight:900;
}

.dots{
border:0;
background:transparent;
color:#cbd5e1;
font-size:20px;
}

.messages{
flex:1;
overflow:auto;
padding:21px;
background:rgba(2,8,23,.18);
}

.messages::-webkit-scrollbar,.card::-webkit-scrollbar,.drawer-body::-webkit-scrollbar{width:6px}

.messages::-webkit-scrollbar-thumb,.card::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.14);
border-radius:15px;
}

.msg-row{
display:flex;
align-items:flex-end;
gap:9px;
margin-bottom:15px;
}

.msg-row.mine{justify-content:flex-end}

.msg-avatar{
width:32px;
height:32px;
border-radius:50%;
font-size:10px;
flex-shrink:0;
}

.bubble{
max-width:323px;
background:#0d1729;
border-radius:11px;
padding:10px 11px;
box-shadow:0 6px 18px rgba(0,0,0,.12);
font-size:12px;
}

.mine .bubble{
background:linear-gradient(135deg,#33219a,#1d4ed8);
}

.bubble b{color:#a78bfa}
.bubble small{color:#9ca3af;margin-left:6px;font-size:9px}
.bubble div:last-child{margin-top:5px;line-height:1.42}

.system{
width:fit-content;
margin:6px auto 15px;
background:#0d1729;
border-radius:11px;
padding:9px 12px;
color:#cbd5e1;
font-size:11px;
}

.sendbar{
height:57px;
display:grid;
grid-template-columns:39px 1fr 83px;
gap:9px;
align-items:center;
padding:9px 12px;
border-top:1px solid var(--line);
}

.sendbar input{
height:39px;
border:1px solid var(--line);
outline:0;
border-radius:11px;
background:#071224;
color:white;
padding:0 12px;
font-size:11px;
}

.sendbar button{
height:39px;
border:0;
border-radius:11px;
background:#101b2e;
color:white;
font-size:11px;
font-weight:900;
}

.sendbar .send{
background:linear-gradient(135deg,var(--purple),var(--blue));
}

.big-avatar{
width:65px;
height:65px;
border-radius:50%;
border:4px solid var(--purple2);
font-size:21px;
margin:0 auto 8px;
}

.profile-card h2{font-size:17px}
.profile-card p{color:var(--green);font-size:10px;font-weight:800;margin-top:3px}

.role{
display:inline-flex;
margin-top:8px;
padding:5px 9px;
border-radius:999px;
background:#111827;
color:#d1d5db;
font-size:10px;
}

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
margin-top:14px;
}

.stats div{border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-size:14px}
.stats span{color:#9ca3af;font-size:9px}

.empty{
text-align:center;
color:#818cf8;
font-size:23px;
}

.empty span{
display:block;
color:#9ca3af;
font-size:10px;
margin-top:5px;
}

.discover-user{
display:grid;
grid-template-columns:33px 1fr 41px 29px;
gap:8px;
align-items:center;
padding:8px;
border-radius:11px;
background:rgba(255,255,255,.045);
margin-bottom:8px;
}

.discover-user strong{display:block;font-size:11px}
.discover-user small{color:var(--green);font-size:9px}

.discover-user button{
height:29px;
border:0;
border-radius:8px;
background:rgba(124,58,237,.35);
color:white;
font-size:10px;
font-weight:900;
}

.dmbar{
position:fixed;
left:12px;
right:12px;
bottom:11px;
height:44px;
display:flex;
align-items:center;
gap:8px;
z-index:40;
}

.dm-main,.dm-tab,.dm-plus{
height:41px;
display:flex;
align-items:center;
border-radius:11px;
border:1px solid rgba(124,58,237,.65);
background:#101b2e;
color:white;
font-size:11px;
font-weight:900;
box-shadow:0 0 18px rgba(124,58,237,.18);
}

.dm-main{
width:101px;
padding:0 14px;
background:linear-gradient(135deg,var(--purple),#1e3a8a);
}

.dm-main b{
margin-left:auto;
width:14px;
height:14px;
border-radius:50%;
background:var(--red);
display:flex;
align-items:center;
justify-content:center;
font-size:8px;
}

.dm-tabs{display:flex;gap:8px}
.dm-tab{min-width:113px;padding:0 9px;gap:6px}
.dm-tab .avatar{width:24px;height:24px}
.dm-plus{width:41px;justify-content:center;font-size:18px}

.dm-popup{
position:fixed;
right:304px;
bottom:62px;
width:233px;
height:248px;
z-index:50;
background:#071224;
border:2px solid var(--purple2);
border-radius:12px;
box-shadow:0 0 27px rgba(168,85,247,.45);
display:flex;
flex-direction:column;
overflow:hidden;
}

.dm-head{
height:48px;
padding:8px 9px;
display:flex;
align-items:center;
gap:8px;
border-bottom:1px solid var(--line);
}

.dm-head strong{display:block;font-size:11px}
.dm-head small{display:block;color:var(--green);font-size:9px;font-weight:800}
.dm-head button{margin-left:auto;border:0;background:transparent;color:#d1d5db;font-size:16px}
.dm-head .close{margin-left:2px}

.dm-messages{
flex:1;
overflow:auto;
padding:11px;
}

.dm-line{
width:fit-content;
max-width:75%;
padding:8px 9px;
border-radius:10px;
background:#111827;
margin-bottom:7px;
font-size:11px;
}

.dm-line.mine{
margin-left:auto;
background:linear-gradient(135deg,var(--purple),var(--blue));
}

.dm-send{
display:grid;
grid-template-columns:1fr 35px;
gap:6px;
padding:8px;
border-top:1px solid var(--line);
}

.dm-send input{
border:1px solid var(--line);
outline:0;
background:#071224;
color:white;
border-radius:9px;
padding:9px;
font-size:11px;
}

.dm-send button{
border:0;
border-radius:9px;
background:linear-gradient(135deg,var(--purple),var(--blue));
color:white;
font-size:15px;
}

.toast{
position:fixed;
right:18px;
bottom:69px;
z-index:90;
background:#0b1224;
border:1px solid var(--line);
border-radius:11px;
padding:10px 12px;
opacity:0;
transform:translateY(75px);
transition:.25s;
font-size:11px;
}

.toast.show{
opacity:1;
transform:translateY(0);
}

.mobile-nav,.mobile-overlay,.mobile-drawer{
display:none;
}

@media(max-width:900px){
#loginModal .auth-online,
#loginModal .auth-left-slogan,
#loginModal .auth-side-cards,
#loginModal .auth-bottom{
display:none!important;
}

#loginModal .auth-bg-brand{
left:18px!important;
top:18px!important;
transform:scale(.8)!important;
transform-origin:left top!important;
}

#loginModal .auth-card{
width:calc(100vw - 32px)!important;
max-width:430px!important;
min-height:auto!important;
padding:32px 24px!important;
border-radius:24px!important;
}

#loginModal .auth-logo{
width:62px!important;
height:62px!important;
font-size:28px!important;
}

#loginModal .auth-card h1{
font-size:24px!important;
}

#loginModal .auth-card p{
font-size:14px!important;
}

#loginModal .primary-auth{
height:52px!important;
font-size:17px!important;
}

#loginModal .secondary-auth{
height:50px!important;
font-size:16px!important;
}

#loginModal .social-auth button{
width:46px!important;
height:46px!important;
}

body{
overflow:hidden;
font-size:14px;
}

.topbar{
height:74px;
grid-template-columns:118px 1fr 74px;
gap:8px;
padding:8px 10px;
padding-top:env(safe-area-inset-top);
}

.brand{
gap:7px;
min-width:0;
}

.logo{
width:38px;
height:38px;
font-size:15px;
flex:none;
}

.brand h1{
font-size:16px;
line-height:1;
}

.brand span{
font-size:10px;
}

.nav{
display:flex;
justify-content:flex-start;
gap:10px;
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
scrollbar-width:none;
padding:0 2px;
}

.nav::-webkit-scrollbar{
display:none;
}

.nav button{
flex:0 0 auto;
height:74px;
font-size:12px;
padding:0 4px;
}

.nav button:first-child{
display:none;
}

.top-user{
display:flex;
justify-content:flex-end;
}

.icon-btn,.mini-profile{
display:none;
}

.logout{
padding:9px 11px;
font-size:11px;
border-radius:9px;
}

.app{
height:calc(100vh - 74px - 72px);
grid-template-columns:1fr;
padding:8px;
padding-bottom:72px;
gap:8px;
}

.left,.right{
display:none;
}

.chat{
width:100%;
height:100%;
border-radius:14px;
}

.chat-head{
height:72px;
padding:12px;
gap:10px;
}

.hash{
width:46px;
height:46px;
font-size:26px;
border-radius:12px;
}

.chat-head h2{
font-size:22px;
}

.chat-head p{
font-size:12px;
}

.live{
padding:8px 12px;
font-size:11px;
}

.messages{
padding:14px;
}

.msg-row{
gap:8px;
margin-bottom:13px;
}

.msg-avatar{
width:34px;
height:34px;
font-size:10px;
}

.bubble{
max-width:72vw;
padding:10px 12px;
border-radius:13px;
font-size:14px;
}

.bubble small{
font-size:10px;
}

.sendbar{
height:62px;
grid-template-columns:42px 1fr 76px;
gap:8px;
padding:9px;
margin-bottom:0;
}

.sendbar input,.sendbar button{
height:42px;
border-radius:12px;
font-size:13px;
}

.dmbar{
display:none;
}

.mobile-nav{
display:grid;
position:fixed;
left:0;
right:0;
bottom:0;
height:72px;
grid-template-columns:repeat(5,1fr);
background:#040b1d;
border-top:1px solid var(--line);
z-index:70;
padding-bottom:env(safe-area-inset-bottom);
}

.mobile-nav button{
border:0;
background:transparent;
color:#d1d5db;
font-size:16px;
font-weight:900;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
}

.mobile-nav span{
font-size:10px;
color:#a78bfa;
}

.mobile-overlay{
display:block;
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
z-index:80;
}

.mobile-drawer{
display:flex;
position:fixed;
left:10px;
right:10px;
bottom:82px;
max-height:62vh;
background:#071224;
border:1px solid var(--line);
border-radius:16px;
z-index:90;
box-shadow:0 30px 80px rgba(0,0,0,.55);
flex-direction:column;
overflow:hidden;
}

.drawer-head{
height:52px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 14px;
border-bottom:1px solid var(--line);
}

.drawer-head h3{
font-size:16px;
}

.drawer-head button{
width:34px;
height:34px;
border:0;
border-radius:10px;
background:rgba(124,58,237,.25);
color:white;
font-size:22px;
}

.drawer-body{
overflow:auto;
padding:12px;
}

.drawer-body .card{
display:block;
height:auto;
max-height:none;
box-shadow:none;
border:0;
background:transparent;
padding:0;
}

.drawer-body .room{
height:42px;
font-size:14px;
}

.drawer-body .user-row{
grid-template-columns:40px 1fr 42px;
padding:8px 0;
}

.drawer-body .avatar{
width:40px;
height:40px;
font-size:13px;
}

.drawer-body .user-row strong{
font-size:14px;
}

.drawer-body .user-row small{
font-size:11px;
}

.drawer-body .user-row button{
width:38px;
height:38px;
font-size:13px;
}

.drawer-body .discover-user{
grid-template-columns:40px 1fr 54px 42px;
padding:10px;
}

.drawer-body .discover-user strong{
font-size:14px;
}

.drawer-body .discover-user small{
font-size:11px;
}

.drawer-body .discover-user button{
height:38px;
font-size:12px;
}

.dm-popup{
left:10px;
right:10px;
bottom:82px;
width:auto;
height:330px;
z-index:95;
}
}