/* === Channels list === */
.channelsList{ display:flex; flex-direction:column; gap:.35rem; overflow:auto; min-height:0; }

.channelItem{
  position: relative;
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .6rem;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  color: var(--text);
  font-weight:600;
  user-select:none;
  cursor: pointer;
}
.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; }

.chanName{font-size:14px;}
.channelBadge{
  margin-left:auto;
  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;
  max-width:100px;
  text-overflow: ellipsis;
  display: inline-block;
}

.channelGroupHeader {
  padding: 6px 10px;
  font-size: 0.8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}

/* Admin delete button */
.chanDelete.btn {
  position: absolute;
  right: 15rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
}
.channelItem:hover .chanDelete,
.channelItem:focus-within .chanDelete { opacity: 1; pointer-events: auto; }
@media (hover: none) { .chanDelete.btn { opacity: 1; pointer-events: auto; } }
.bi-picker { border:1px solid var(--bs-border-color); border-radius:.5rem; padding:.5rem; max-height:240px; overflow:auto; }
.bi-grid { display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:.25rem; }
.bi-grid button { border:1px solid var(--bs-border-color); background:var(--bs-body-bg); border-radius:.375rem; width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.bi-grid button:hover, .bi-grid button.active { outline:2px solid var(--bs-primary); }