/* Chat module – uses global theme vars from styles.css */
.chat-shell{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
  margin-top:16px;
}
@media (max-width: 900px){
  .chat-shell{ grid-template-columns: 1fr; }
  .chat-users{ order:2; }
}
.chat-users, .chat-main{ padding:14px; }
.chat-users-head, .chat-main-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.small{ font-size:12px; }

.user-list{
  display:flex; flex-direction:column;
  gap:8px;
  max-height: 65vh;
  overflow:auto;
  padding-right:6px;
}
.user-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.10);
}
.user-left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.user-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-meta{ font-size:12px; opacity:.85; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dot{ width:8px; height:8px; border-radius:99px; display:inline-block; background: rgba(245,241,232,.35); }
.dot.on{ background: rgba(123,211,137,.95); }
.badge.blocked{ border-color: rgba(255,90,165,.55); color: rgba(255,160,205,.95); }

.user-actions{ display:flex; gap:6px; flex-shrink:0; }

.msg-list{
  height: 58vh;
  overflow:auto;
  padding: 6px 6px 10px 6px;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.10);
}
.msg{
  display:flex; gap:10px;
  padding:10px 10px;
  margin: 6px 0;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.04);
}
.msg.me{ background: rgba(255,176,90,.10); border-color: rgba(255,176,90,.22); }
.msg .who{ font-weight:800; }
.msg .when{ font-size:12px; opacity:.75; }
.msg .text{ white-space:pre-wrap; overflow-wrap:anywhere; margin-top:4px; }
.msg-body{ min-width:0; flex:1; }
.msg-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }

.chat-compose{
  display:flex; gap:10px; align-items:center;
  margin-top:12px;
  position:relative;
}
.chat-compose .input{ flex:1; }
.emoji-panel{
  position:absolute;
  left:0;
  bottom: 44px;
  width: min(320px, 92vw);
  padding:10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(20,17,13,.92);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:6px;
  z-index: 10;
}
.emoji-btn{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding:6px 0;
  cursor:pointer;
}
.emoji-btn:hover{ background: rgba(255,255,255,.08); }

.chat-main-head .card-title{display:flex; align-items:center; gap:10px;}
#btn-lobby{display:none;}

.dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; opacity:.9; }
.dot.on{ background: var(--good, #34d399); }
.dot.off{ background: rgba(255,255,255,.25); }
.user-row{ cursor:pointer; }
.user-row.me{ cursor:default; opacity:.9; }
.user-name{ flex:1; min-width:0; }
.user-title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-badges{ display:flex; gap:6px; align-items:center; }
.badge{ font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); }
.badge.warn{ background: rgba(234,179,8,.12); }
.badge.danger{ background: rgba(239,68,68,.12); }
.user-actions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* Collapsible panels (mobile-friendly) */
.chat-users-head{ align-items:center; }
#btn-users-toggle{ display:none; }
@media (max-width: 900px){
  #btn-users-toggle{ display:inline-flex; }
  .chat-users.collapsed .user-list{ display:none; }
  .chat-users.collapsed{ padding-bottom:10px; }
}



/* --- Mobile drawers (WhatsApp-like) --- */
.chat-head-right{ display:flex; align-items:center; gap:10px; }

.btn.icon{ padding:6px 8px; min-width:34px; justify-content:center; }

#btn-users-close{ display:none; }

.drawer-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index:50;
}

.drawer{
  position:fixed;
  top:0; left:0; bottom:0;
  width:min(340px, 88vw);
  transform: translateX(-105%);
  transition: transform .18s ease;
  z-index:51;
  padding:12px;
  pointer-events:none;
}
.drawer.open{
  transform: translateX(0);
  pointer-events:auto;
}
.drawer .chat-users{
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  overflow:auto;
}

@media (min-width: 901px){
  .drawer-backdrop{ display:none !important; }
  .drawer{
    position:static;
    width:auto;
    transform:none;
    transition:none;
    padding:0;
    pointer-events:auto;
  }
  .drawer .chat-users{
    height:auto;
    max-height:none;
    overflow:visible;
  }
}

@media (max-width: 900px){
  /* users list is now in drawer; keep chat main full width */
  .chat-shell{ grid-template-columns: 1fr; }
  .drawer{ padding:10px; }
  #btn-users-close{ display:inline-flex; }
}


.theme-mount{ display:inline-block; position:relative; margin-left:8px; }