/* Mobile-first, responsive UI */
:root{
  --brand:#27c36a;
  --ink:#222;
  --bg:#f5f7fb;
  --card:#fff;
  --border:#e2e8f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:var(--ink);}

/* Layout */
.container{display:flex;flex-direction:column;min-height:100vh}
.sidebar{width:100%;background:var(--card);padding:16px;border-bottom:1px solid var(--border);overflow:auto}
.main{flex:1;padding:16px}

/* Login */
.login-box{max-width:520px;margin:40px auto;padding:18px;border:1px solid var(--border);background:var(--card);border-radius:12px}
.login-box input{width:100%;padding:12px;margin:8px 0;border:1px solid var(--border);border-radius:10px;font-size:16px}
button{padding:12px 14px;border:0;background:var(--brand);color:#fff;border-radius:12px;cursor:pointer;font-weight:600}
button:disabled{opacity:0.6}

/* Sidebar */
.sidebar h2{margin:0 0 8px 0;font-size:20px}
.sidebar h3{margin:16px 0 8px 0;font-size:16px}
#logoutBtn{width:100%;margin:8px 0}

/* Users list & chat */
ul#usersList{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
ul#usersList li{padding:10px;border:1px solid var(--border);cursor:pointer;border-radius:10px;background:#fafafa}
.chatbox{height:220px;overflow:auto;border:1px solid var(--border);padding:10px;background:#fff;border-radius:10px}
#msgInput{width:100%;margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:10px}

/* Video area */
.video-row{display:flex;flex-direction:column;gap:12px}
video{width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:12px;object-fit:cover}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;align-items:center}
.controls label{display:flex;align-items:center;gap:6px;font-size:14px}
.status{margin-top:10px;color:#666;font-size:14px}

/* Larger screens */
@media (min-width: 960px){
  .container{flex-direction:row}
  .sidebar{width:340px;border-bottom:none;border-right:1px solid var(--border);height:100vh;position:sticky;top:0}
  .main{padding:20px}
  .video-row{flex-direction:row}
  .video-row > div{flex:1}
  ul#usersList{grid-template-columns:1fr}
}