:root{
--bg:#ffffff;
--soft:#f4f6f8;
--hover:#e9eef3;
--border:#e2e8f0;
--text:#111;
--muted:#6b7280;
--radius:14px
}

.auth-main{
width:100%;
max-width:420px;
margin:auto;
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
gap:14px;
padding:32px;
position:relative;
z-index:2;
}

.auth-main h1{
margin:0 0 8px;
font-size:2rem;
font-weight:700;
letter-spacing:-1px;
color:#111;
}

.auth-main p{
margin:0;
font-size:.85rem;
color:var(--muted);
line-height:1.5;
}

.auth-main a{
color:#111;
font-weight:600;
text-decoration:none;
transition:.2s;
}

.auth-main a:hover{
opacity:.7;
}

.auth-main input{
width:100%;
padding:14px 16px;
border-radius:14px;
border:1px solid var(--border);
background:#fff;
font-size:.95rem;
font-family:'Poppins',sans-serif;
outline:none;
transition:.2s;
box-shadow:0 2px 10px rgba(0,0,0,0.03);
}

.auth-main input:focus{
border-color:#111;
transform:translateY(-1px);
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.auth-main button{
height:50px;
border:none;
border-radius:14px;
background:#111;
color:#fff;
font-size:.92rem;
font-weight:600;
font-family:'Poppins',sans-serif;
cursor:pointer;
transition:.2s;
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.auth-main button:hover{
transform:translateY(-2px);
opacity:.92;
}

.auth-main button:active{
transform:scale(.98);
}

#infoText{
min-height:18px;
font-size:.8rem;
font-weight:500;
color:#ef4444;
}

.copy-btn{
height:auto!important;
padding:8px 12px;
font-size:.75rem!important;
border-radius:10px!important;
margin-left:8px;
background:#ff751f!important;
box-shadow:none!important;
}

.copy-btn:hover{
opacity:.85;
transform:none!important;
}

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at top left,rgba(255,255,255,0.9),transparent 30%),
radial-gradient(circle at bottom right,rgba(0,0,0,0.04),transparent 35%);
pointer-events:none;
z-index:0;
}

.auth-main{
background:rgba(255,255,255,0.78);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.5);
border-radius:28px;
box-shadow:
0 10px 40px rgba(0,0,0,0.08),
0 2px 10px rgba(255,255,255,0.6) inset;
}

@media(max-width:600px){
.auth-main{
max-width:100%;
min-height:100vh;
border-radius:0;
padding:24px;
justify-content:center;
}
}

*{box-sizing:border-box}

body{
margin:0;
font-family:'Poppins',sans-serif;
background:var(--soft);
color:var(--text)
}

.app{
display:flex;
height:100vh
}

.sidebar{
width:270px;
background:#fff;
border-right:1px solid var(--border);
display:flex;
flex-direction:column;
padding:14px;
gap:16px
}

.sidebar-top{
display:flex;
align-items:center;
gap:10px
}

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

.status-dot{
width:8px;
height:8px;
background:#22c55e;
border-radius:50%
}

.logo{
height:32px
}

.search-box input{
width:100%;
padding:8px 10px;
border-radius:10px;
border:1px solid var(--border);
font-size:.85rem
}

.section{
display:flex;
flex-direction:column;
gap:8px
}

.section-title{
font-size:.75rem;
color:var(--muted)
}

.input-row{
display:flex;
gap:6px
}

.input-row input{
flex:1;
padding:7px 9px;
border-radius:8px;
border:1px solid var(--border);
font-size:.8rem
}

.input-row button{
padding:7px 10px;
border:none;
background:#111;
color:#fff;
border-radius:8px;
cursor:pointer
}

ul{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:4px;
overflow:auto
}

li{
padding:8px 10px;
border-radius:8px;
cursor:pointer;
font-size:.85rem;
transition:.2s
}

li:hover{
background:var(--hover);
transform:translateX(4px)
}

.sidebar-bottom{
margin-top:auto;
font-size:.75rem;
display:flex;
flex-direction:column;
gap:6px
}

.sidebar-bottom button{
padding:7px;
border:none;
background:#111;
color:#fff;
border-radius:8px;
cursor:pointer
}

.chat-area{
flex:1;
display:flex;
align-items:center;
justify-content:center
}

.empty{
text-align:center;
color:var(--muted)
}

.chat{
display:none;
flex-direction:column;
width:100%;
max-width:750px;
height:92%;
background:#fff;
border-radius:18px;
border:1px solid var(--border);
overflow:hidden;
animation:fade .25s ease
}

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

.chat-header{
padding:14px 16px;
border-bottom:1px solid var(--border);
display:flex;
justify-content:space-between;
align-items:center;
font-weight:500
}

.chat-sub{
font-size:.7rem;
color:var(--muted)
}

.messages{
flex:1;
overflow-y:auto;
padding:14px;
display:flex;
flex-direction:column;
gap:6px;
background:var(--soft)
}

.bubble{
padding:6px 9px;
border-radius:12px;
max-width:55%;
font-size:.8rem;
line-height:1.3;
display:flex;
flex-direction:column;
gap:2px;
animation:msg .2s ease
}

@keyframes msg{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}

.self{
background:#111;
color:#fff;
align-self:flex-end;
border-bottom-right-radius:4px
}

.other{
background:#e5e7eb;
align-self:flex-start;
border-bottom-left-radius:4px
}

.time{
font-size:.6rem;
opacity:.6;
text-align:right
}

.chat-input{
display:flex;
gap:8px;
padding:10px;
border-top:1px solid var(--border)
}

.chat-input input{
flex:1;
padding:9px 12px;
border-radius:10px;
border:1px solid var(--border);
font-size:.85rem
}

.chat-input button{
padding:9px 14px;
border:none;
border-radius:10px;
background:#111;
color:#fff;
cursor:pointer
}

.typing{
font-size:.7rem;
color:var(--muted);
padding:0 14px 6px
}

@media(max-width:800px){
.sidebar{display:none}
.chat{height:100%;border-radius:0}
}

.user-row{
display:flex;
justify-content:space-between;
align-items:center;
width:100%
}

.status{
font-size:.65rem;
padding:2px 6px;
border-radius:6px
}

.status.online{
background:#dcfce7;
color:#16a34a
}

.status.offline{
background:#f1f5f9;
color:#64748b
}
.mobile-banner{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#111;
color:#fff;
padding:14px 18px;
border-radius:12px;
display:none;
align-items:center;
gap:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
z-index:9999;
animation:fadeIn .3s ease;
}

.mobile-banner button{
background:#ff751f;
border:none;
padding:8px 12px;
border-radius:8px;
color:#fff;
cursor:pointer;
transition:0.2s;
}

.mobile-banner button:hover{
opacity:0.85;
}

@keyframes fadeIn{
from{opacity:0;transform:translateX(-50%) translateY(20px);}
to{opacity:1;transform:translateX(-50%) translateY(0);}
}
.close-btn{
background:transparent;
border:none;
font-size:18px;
color:#888;
cursor:pointer;
padding:6px 10px;
border-radius:8px;
transition:0.2s;
}

.close-btn:hover{
background:rgba(255,255,255,0.1);
color:#fff;
}

.user-code-box{
background:linear-gradient(135deg,#111,#1f2937);
color:#fff;
padding:14px;
border-radius:14px;
display:flex;
flex-direction:column;
gap:10px;
position:relative;
box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

.code-header{
display:flex;
align-items:center;
gap:8px;
font-size:.8rem;
opacity:.8;
position:relative;
}

.info{
width:18px;
height:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#374151;
cursor:pointer;
font-size:.7rem;
}

.tooltip{
position:absolute;
top:-35px;
left:0;
background:#000;
color:#fff;
padding:6px 8px;
font-size:.7rem;
border-radius:6px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:.2s;
}

.info:hover + .tooltip{
opacity:1;
}

.code-row{
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(255,255,255,0.08);
padding:8px 10px;
border-radius:10px;
font-family:monospace;
letter-spacing:2px;
font-size:.9rem;
}

.code-row button{
background:#ff751f;
border:none;
padding:6px 10px;
border-radius:8px;
color:#fff;
cursor:pointer;
transition:.2s;
}

.code-row button:hover{
opacity:.85;
}

.chat-close{
background:#f3f4f6;
border:none;
width:34px;
height:34px;
border-radius:10px;
cursor:pointer;
font-size:16px;
transition:.2s;
}

.chat-close:hover{
background:#111;
color:#fff;
transform:rotate(90deg);
}

.user-row{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
gap:10px
}

.status{
display:inline-flex;
align-items:center;
gap:6px;
font-size:.7rem;
padding:4px 10px;
border-radius:999px;
font-weight:500;
white-space:nowrap
}

.status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
flex-shrink:0
}

.status.online{
background:#dcfce7;
color:#15803d
}

.status.online::before{
background:#22c55e;
box-shadow:0 0 8px rgba(34,197,94,0.9);
animation:statusPulse 1.5s infinite
}

.status.offline{
background:#f1f5f9;
color:#475569
}

.status.offline::before{
background:#94a3b8
}

@keyframes statusPulse{
0%{transform:scale(1);opacity:1}
50%{transform:scale(1.5);opacity:.6}
100%{transform:scale(1);opacity:1}
}