*{box-sizing:border-box}
body{margin:0;background:#050505;color:#eee;font-family:Tahoma,Arial,sans-serif}
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
aside{background:linear-gradient(180deg,#120606,#080808);border-left:1px solid #2a0b0b;padding:22px}
h1{margin:0;color:#d01414;letter-spacing:4px}.sub{color:#888;margin-top:6px}
button{background:#b30000;color:white;border:0;border-radius:12px;padding:11px 16px;cursor:pointer;font-weight:bold}
button:hover{filter:brightness(1.15)}.ghost{background:#1d1d1d;border:1px solid #333}
input{width:100%;background:#111;border:1px solid #333;color:white;border-radius:12px;padding:13px;margin:7px 0}
main{display:flex;align-items:center;justify-content:center;padding:20px}
#auth{width:min(420px,100%);background:#0d0d0d;border:1px solid #241010;border-radius:22px;padding:24px;box-shadow:0 0 45px #260000}
.row{display:flex;gap:10px}.row button{flex:1}
.hidden{display:none!important}
#chat{width:min(900px,100%);height:82vh;background:#0d0d0d;border:1px solid #241010;border-radius:22px;display:flex;flex-direction:column;overflow:hidden}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid #222;background:#111}
#messages{flex:1;overflow:auto;padding:18px}
.msg{background:#151515;border:1px solid #252525;margin-bottom:10px;padding:12px;border-radius:14px}
.msg b{color:#ff3737}.msg small{color:#777;margin-right:8px}
.composer{display:flex;gap:10px;padding:15px;border-top:1px solid #222}.composer input{margin:0}
#rooms button{display:block;width:100%;margin:8px 0;text-align:right;background:#151515;border:1px solid #2b2b2b}
#rooms button.active{border-color:#b30000;background:#210909}
.fileBtn{background:#181818;border:1px solid #333;border-radius:12px;padding:10px 14px;cursor:pointer}
.fileBtn input{display:none}
a{color:#ff5757}
@media(max-width:720px){.app{grid-template-columns:1fr}aside{min-height:auto}#chat{height:70vh}}


.topActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#voicePanel{border-bottom:1px solid #222;background:#080808;padding:12px;display:grid;grid-template-columns:1fr 180px;gap:10px}
#remoteVideos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
#remoteVideos video,#localVideo{width:100%;background:#000;border:1px solid #331010;border-radius:14px;min-height:120px;object-fit:cover}
.voiceCard{position:relative}
.voiceCard span{position:absolute;right:10px;bottom:10px;background:#000a;padding:5px 8px;border-radius:8px;color:#fff;font-size:12px}
@media(max-width:720px){#voicePanel{grid-template-columns:1fr}.topActions button,.fileBtn{font-size:12px;padding:9px}}

.contentGrid{flex:1;display:grid;grid-template-columns:1fr 220px;min-height:0}
#membersPanel{border-right:1px solid #222;background:#090909;padding:14px;overflow:auto}
#membersPanel h3{margin-top:0;color:#ddd}
.memberItem{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;background:#121212;border:1px solid #222;margin-bottom:8px}
.memberItem img,.avatarFallback{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#300;color:#fff;display:grid;place-items:center;font-weight:bold;flex:0 0 auto}
.memberItem small{display:block;color:#888;margin-top:2px}
.memberItem p{margin:4px 0 0;color:#aaa;font-size:12px;line-height:1.4}
.voiceHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
#voiceMembers{display:flex;gap:6px;flex-wrap:wrap}
.voicePill{background:#1b1b1b;border:1px solid #333;border-radius:999px;padding:5px 9px;font-size:12px}
.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:99998}
.modalBox{width:min(460px,92vw);background:#101010;border:1px solid #3a1111;border-radius:20px;padding:20px;box-shadow:0 0 50px #300}
.modalBox textarea{width:100%;min-height:90px;background:#111;border:1px solid #333;color:#fff;border-radius:12px;padding:13px;margin:7px 0;resize:vertical}
.modalBox select{width:100%;background:#111;border:1px solid #333;color:#fff;border-radius:12px;padding:13px;margin:7px 0}
.fullscreen-video{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:99999!important;background:#000!important;object-fit:contain!important;border-radius:0!important}
#remoteVideos video,#localVideo{cursor:pointer;object-fit:contain}
@media(max-width:900px){.contentGrid{grid-template-columns:1fr}#membersPanel{display:none}}

.fullscreen-video{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  background:#000;
  object-fit:contain;
  z-index:99999;
  border-radius:0 !important;
}