/* Scoped styles for chat list within #chatContent only */
#chatContent .chat-list {
  padding: 10px 10px 16px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
#chatContent .chat-list-header {
  padding: 6px 4px 10px;
}
#chatContent .chat-list-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #e8ecff;
}

/* Search */
#chatContent .chat-search {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 4px 10px;
}
#chatContent .chat-search input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  outline: none;
}
#chatContent .icon-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #cfd6ff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
#chatContent .icon-btn:hover { filter: brightness(1.1); }

/* Sections */
#chatContent .chat-section { margin-top: 8px; }
#chatContent .chat-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px;
}
#chatContent .chat-section-header h4 {
  margin: 0; font-size: 13px; font-weight: 700; color: #9fb2ff;
}
#chatContent .chat-empty { color: #9aa3c7; font-size: 13px; padding: 4px 8px 10px; }

/* Items */
#chatContent .chat-list-items { display: flex; flex-direction: column; gap: 6px; }
#chatContent .chat-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas: "avatar name badge" "avatar last last";
  gap: 2px 10px;
  align-items: center;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
}
#chatContent .chat-item:hover { background: rgba(255,255,255,0.06); }
#chatContent .chat-item.active { outline: 2px solid #5865f2; }
#chatContent .chat-item .avatar { grid-area: avatar; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background:#1b1e33; }
#chatContent .chat-item .avatar img { width: 100%; height: 100%; object-fit: cover; display:block; }
#chatContent .chat-item .name { grid-area: name; font-weight: 700; font-size: 14px; color: #e9ecff; }
#chatContent .chat-item .last { grid-area: last; font-size: 12px; color: #9fb2c3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#chatContent .chat-item .badge { grid-area: badge; background:#ff5a5f; color:#fff; padding: 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; }
#chatContent .chat-item .time { margin-left: 8px; color:#7f8fa9; font-size:11px; }

@media (max-width: 920px){
  #chatContent .chat-list { border-right: none; }
}