/* Присутствие: точка статуса и время последнего ухода */

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--offline);
  flex-shrink: 0;
}

.dot.is-online { background: var(--online); }

/* Время ухода прижато к правому краю строки списка пользователей.
   Читаемый текст: --text-muted (5.41:1), а не --text-faint (3.03:1) */
.user-seen {
  margin-left: auto;
  font-size: var(--fs-label);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Точка доступности агента: смысл другой, чем у присутствия человека,
   поэтому и класс свой - .dot означает "онлайн/офлайн", а здесь
   "отвечу ли сейчас". Размер и форма те же, чтобы список не рябил.
   Серый - не проверен, зелёный - отвечает, красный - рантайм недоступен:
   красный, а не серый, потому что недоступность - факт, о котором надо
   узнать, а не отсутствие данных */
.agent-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--offline);
}

.agent-dot.is-online { background: var(--online); }
.agent-dot.is-unknown { background: var(--text-faint); }

.agent-dot:not(.is-online):not(.is-unknown) { background: var(--danger); }

/* Подпись состояния в строке агента: приглушённая, как время ухода */
.agent-state { text-transform: none; }

/* Раздел агентов отделён от людей: у них разные индикаторы, и слипание
   списков читалось бы как один список с разными цветами точек */
#agents {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

#agents .user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }