.room-list {
  max-height: 150px;
}

.nav-empty {
  padding: 9px 8px;
  color: #778596;
  font-size: 10px;
}

.dm-chip {
  display: flex;
  align-items: center;
  gap: 7px;
}

.presence-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: #596574;
  box-shadow: none;
}

.presence-dot.online {
  background: #32d583;
  box-shadow: 0 0 7px rgba(50, 213, 131, .45);
}

.people-list {
  display: grid;
  gap: 5px;
}

.person-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #111820;
}

.person-card:hover {
  border-color: #283442;
  background: #151e28;
}

.person-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #213047;
  color: #dfeaff;
  font-size: 12px;
  font-weight: 800;
}

.person-copy {
  min-width: 0;
}

.person-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eef3f8;
  font-size: 12px;
  font-weight: 700;
}

.person-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: #7f8c9c;
  font-size: 9px;
}

.person-message {
  padding: 5px 8px;
  font-size: 10px;
}

@media (max-width: 850px) {
  .room-list {
    max-height: 180px;
  }
}