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

*{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}
}