/* === Layout containers === */
#container{
  height:100vh;
  width:100%;
  display:grid;
  grid-template-columns: 300px minmax(0,1fr) 300px;
  gap:12px;
  padding:12px;
}
.sidebar{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius:var(--radius);
  padding:12px;
  border:1px solid var(--border-weak-2);
  display:flex; flex-direction:column; gap:.6rem;
  min-height:0;
}
.rightbar{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius:var(--radius);
  padding:12px;
  border:1px solid var(--border-weak-2);
  display:flex; flex-direction:column; gap:.6rem;
  min-height:0;
}
.channelsList{ display:flex; flex-direction:column; gap:.35rem; overflow:auto; min-height:0; }
.channelItem{
display:flex; align-items:center; gap:.5rem;
padding:.45rem .6rem; border-radius:10px;
background: rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.06);
color: var(--text);
font-weight:600;
user-select:none;
}
.channelItem:hover{ background:rgba(255,255,255,.06) }
.channelItem.active{
color:#fff; background:rgba(52, 152, 219,.15);
border-color:rgba(52, 152, 219,.35);
}
.channelItem[aria-disabled="true"]{
opacity:.6; cursor:not-allowed;
}
.channelBadge{
font-size:.72rem; padding:.1rem .45rem; border-radius:999px;
background:rgba(13,110,253,.16); color:#9ec5fe; border:1px solid rgba(13,110,253,.35);
text-align:center;
}
.soonBadge {
  font-size: .72rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(255,193,7,.12);
  color: #ffda6a;
  border: 1px solid rgba(255,193,7,.35);
  text-align: right;

  white-space: nowrap;      
  overflow: hidden;         
  text-overflow: ellipsis;  
  display: inline-block;   
}
.channelHeader{ display:flex; align-items:center; justify-content:space-between; gap:.6rem }
.channelTitle{ font-weight:700; color:var(--text-strong) }
.badges{ display:flex; gap:.35rem; align-items:center }
.onlineBadge{
font-size:.75rem; padding:.2rem .5rem; border-radius:999px;
background:rgba(13,110,253,0.12); color:var(--accent);
}
.searchWrap{ display:flex; align-items:center; gap:.5rem }
.searchWrap input{
background:var(--input-bg);
border:1px solid var(--border-weak);
color:var(--text);
padding:.5rem .6rem;
border-radius:10px; width:100%;
}
.channelSection{
margin:.5rem .1rem .25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
color:var(--muted);
}
.dm-sound-toggle .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.dm-sound-toggle .form-check-label {
display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
padding: .25rem .6rem; border-radius: var(--radius); background: var(--panel);
border: 1px solid var(--border-weak); font-weight: 600; color: var(--text);
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dm-sound-toggle .form-check-label:hover { background: var(--card); border-color: var(--border-weak-2); }
.dm-sound-toggle .form-check-input:checked + .form-check-label { background: var(--accent); border-color: var(--accent); color: #fff; }
.dm-sound-toggle .form-check-input:checked + .form-check-label i { color: #fff; }
/* Drawer scrim (mobile) */
#drawerScrim{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:999; display:none;
}
body.drawer-open #drawerScrim{ display:block; }
body.channels-open #drawerScrim{ display:block; }

/* Collapsed states */
body.channels-collapsed #container{ grid-template-columns: 300px minmax(0,1fr) 0; }
body.channels-collapsed .rightbar{ display:none; }

body.sidebar-collapsed #container{ grid-template-columns: 68px minmax(0,1fr) 300px; }
body.sidebar-collapsed .sidebar{ padding:10px 8px; }
body.sidebar-collapsed .channelTitle,
body.sidebar-collapsed .badges,
body.sidebar-collapsed .searchWrap,
body.sidebar-collapsed .userMeta,
body.sidebar-collapsed .sidebarFooter{ display:none !important; }
body.sidebar-collapsed .avatarWrap{ margin-inline:auto; }
body.sidebar-collapsed .userItemBtn{ justify-content:center; padding:8px 6px; }
body.sidebar-collapsed .userList{ padding-right:0 }

/* Responsive stacks */
@media (max-width: 1024px){
  #container{ grid-template-columns: 1fr; }
  .sidebar{ order:2; height:38vh; }
  .userList{ gap:.5rem; overflow:auto; padding:0 }
  .chatPanel{ order:1; }

  .sidebar{
    position:fixed; top:0; bottom:0; left:0;
    width:86vw; max-width:320px;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:none;
    height:100vh; display:flex; flex-direction:column;
  }
  body.drawer-open .sidebar{ transform:translateX(0); }

  .rightbar{
    position:fixed; top:0; bottom:0; right:0;
    width:86vw; max-width:340px;
    z-index:1000;
    transform:translateX(100%);
    transition:transform .25s ease;
    height:100vh; display:flex; flex-direction:column;
    border-left:1px solid var(--border-weak-2);
    border-right:none; border-radius:0;
  }
  body.channels-open .rightbar{ transform:translateX(0); }
}
.onlineBadge{
font-size:.75rem; padding:.2rem .5rem; border-radius:999px;
background:rgba(13,110,253,0.12); color:var(--accent);
}
.channelHeader .badge { font-weight: 500; padding: .4rem .6rem; }
.channelHeader .bi { vertical-align: -.1em; }


.stats-modal .modal-content { border-radius: 14px; }

.metrics-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem;
}
@media (min-width: 768px){
  .metrics-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.metric{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem .9rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background: rgba(255,255,255,.05);
}
.metric-label{
  font-size:.85rem;
  color: rgba(255,255,255,.75);
  margin-bottom:-0.6rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

:root[data-theme="light"] .metric{
  border-color: var(--border-weak, rgba(0,0,0,.12));
  background:   var(--surface-1, rgba(0,0,0,.02));
}
:root[data-theme="light"] .metric-label{
  color: var(--text-weak, rgba(0,0,0,.65));
}

.metric-icon{
  width:40px; height:40px; flex:0 0 40px;
  display:grid; place-items:center;
  border-radius:10px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
}
.metric-icon i{ font-size:1.1rem; opacity:.9; }

.metric-body{ min-width:0; }
.metric-value{
  font-size:1.6rem; font-weight:700;
  letter-spacing:.015em; font-variant-numeric: tabular-nums;
}
.metric .count{ white-space:nowrap; }