/* Вид строки чата как в Telegram (реестр: docs/CORE-MODS.md).
   Пара к connector-tglist.js: время, счётчик, галочки, значок группы.
   Плашки должностей и отличие групп по аватару - в connector-list.css,
   не смешивать. Заготовку создал оркестратор блока 24.08.2026,
   наполнил поток «строка чата как в Telegram» (пункты 1-4 брифа
   владельца 24.08.2026: он сравнил наш список чатов со своим Telegram).

   Разметку сюда ставит connector-tglist.js (его тик), опоры такие:
     .mx_RoomListItemView          - плитка чата (класс Element, не хэш)
     [data-testid="room-name"]     - имя чата (Element, не хэш)
     [data-testid="notification-decoration"] - родная точка/счётчик
                                     непрочитанного (Element, не хэш)
     .cntg-справа                  - НАШ правый столбик плитки:
                                     время сверху, счётчик снизу
     .cntg-время, .cntg-галочки, .cntg-счётчик - его содержимое
     .cntg-плитка                  - метка «эту плитку слой обработал»
     .cntg-группа                  - в чате не двое: значок людей ПЕРЕД
                                     именем рисуется псевдоэлементом
     .cntg-счёт                    - у плитки есть НАШ счётчик, родную
                                     точку на это время прячем

   ПОЧЕМУ ЗНАЧОК ГРУППЫ - ПСЕВДОЭЛЕМЕНТ, А НЕ УЗЕЛ. Имя чата рисует
   React, и любой наш узел ВНУТРИ него живёт до ближайшего перерендера;
   вдобавок соседний слой connector-roles.js читает имя комнаты как
   textContent плитки - лишний узел там ему мешать не должен. Маска
   в ::before не меняет ни разметку, ни текст: значок видно, а для
   кода имя остаётся прежней строкой. Цвет берётся у самого имени
   (currentColor), поэтому значок живёт в обеих темах сам.

   ПОЧЕМУ РОДНУЮ ТОЧКУ ПРЯЧЕМ НЕ ЦЕЛИКОМ. В том же узле Element рисует
   не только точку непрочитанного, но и значки «уведомления выключены»
   и «идёт звонок» - они нарисованы svg. Прячем поэтому только узел
   БЕЗ svg внутри (:not(:has(svg))) и только когда нарисовали свой
   счётчик: значки Element при этом остаются на месте. */

/* ===================== пункт 1-3: правый столбик ===================== */

/* столбик справа: время сверху, счётчик снизу - как в Telegram.
   justify-content: space-between держит время НА УРОВНЕ ИМЕНИ, а
   счётчик - на уровне строки превью; при одном только времени
   (счётчика нет) оно так же остаётся у имени, а не уезжает в
   середину строки - именно это и отличает вид от телеграмного.
   flex: 0 0 auto обязателен: без него браузер жмёт наш столбик вместе
   с именем, и на узком экране время расползается в две строки */
.mx_RoomListItemView .cntg-справа {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: 6px;
  align-self: stretch;
  padding: 2px 0 1px;
}
/* плитка без превью - одна строка: там столбику растягиваться некуда и
   время просто стоит рядом с именем (то же, что в Telegram) */

/* время последнего события: приглушённое, никогда не переносится */
.mx_RoomListItemView .cntg-время {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 14px;
  color: var(--cpd-color-text-secondary, #656d77);
  font-variant-numeric: tabular-nums;
}

/* галочки доставки - ПЕРЕД временем, как в Telegram */
.mx_RoomListItemView .cntg-галочки {
  display: inline-flex;
  align-items: center;
  color: var(--cpd-color-text-secondary, #656d77);
}
.mx_RoomListItemView .cntg-галочки svg { display: block; }
/* прочитано - цветом акцента темы (в светлой это зелёный Element) */
.mx_RoomListItemView .cntg-галочки[data-вид="прочитано"] {
  color: var(--cpd-color-icon-accent-primary, #007a61);
}

/* счётчик непрочитанного: кружок с ЧИСЛОМ.
   При нуле узла нет вовсе - его не рисует JS, прятать нечего */
.mx_RoomListItemView .cntg-счётчик {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--cpd-color-bg-subtle-primary, #e1e6ec);
  color: var(--cpd-color-text-secondary, #656d77);
}
/* упоминание - ярче: сплошная заливка акцентом темы */
.mx_RoomListItemView .cntg-счётчик[data-вид="упоминание"] {
  background: var(--cpd-color-bg-accent-rest, #007a61);
  color: var(--cpd-color-text-on-solid-primary, #fff);
}

/* Пока стоит НАШ счётчик, родную точку и родное число прячем - но
   ПОШТУЧНО, а не весь узел: в том же узле Element рисует значок
   упоминания «собачку», «уведомления выключены» и «идёт звонок», и они
   нарисованы svg. Прячем поэтому только тех детей, внутри которых svg
   нет вовсе - это ровно точка (div без текста) и счётчик (span с
   числом). Поймано снимком 24.08.2026: пока пряталось «если во всём
   узле нет svg», у чата с упоминанием рядом стояли ДВА счётчика - наш
   и родной, потому что рядом с родным был значок «собачки». */
.mx_RoomListItemView.cntg-счёт [data-testid="notification-decoration"] > :not(svg):not(:has(svg)) {
  display: none;
}

/* ===================== пункт 4: значок группы у имени ===================== */

/* маленький значок «двое» ПЕРЕД названием чата: только у групповых.
   Тот же силуэт, что у значка на аватаре соседнего слоя, чтобы список
   не выглядел собранным из двух разных наборов. */
.mx_RoomListItemView.cntg-группа [data-testid="room-name"]::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  flex: none;
  background-color: currentColor;
  opacity: 0.55;
  -webkit-mask: var(--cntg-значок-группы) no-repeat center / contain;
  mask: var(--cntg-значок-группы) no-repeat center / contain;
}
:root {
  --cntg-значок-группы: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5.6' cy='5' r='2.7'/%3E%3Ccircle cx='11.6' cy='5.6' r='2.1'/%3E%3Cpath d='M1 13.4C1 10.9 3 9.3 5.6 9.3s4.6 1.6 4.6 4.1V14.4H1z'/%3E%3Cpath d='M11.3 9.5c2.3 0 3.7 1.4 3.7 3.3v1.6h-3.4v-1.1c0-1.4-.5-2.6-1.4-3.6z'/%3E%3C/svg%3E");
}

/* ===================== узкий экран ===================== */

/* На 390px место в строке дорого: время и счётчик ужимаются на пиксель-
   другой, но НЕ исчезают - владелец просил именно телеграмную строку.
   Имя при этом обрезается многоточием само (ellipsis Element), потому
   что наш столбик из сжатия исключён (flex: 0 0 auto выше). */
@media (max-width: 480px) {
  .mx_RoomListItemView .cntg-справа { margin-left: 4px; gap: 3px; }
  .mx_RoomListItemView .cntg-время { font-size: 11px; line-height: 13px; }
  .mx_RoomListItemView .cntg-счётчик {
    min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px;
  }
  .mx_RoomListItemView.cntg-группа [data-testid="room-name"]::before {
    width: 12px; height: 12px; margin-right: 4px;
  }
}

/* Приглушённый чат: числа сервер не даёт, но активность есть. Ставим
   маленькую точку в СВОЁМ столбике у правого края - как в Telegram, где
   посреди строки ничего не висит (находка приёмки 24.08.2026). */
.mx_RoomListItemView .cntg-счётчик[data-вид="точка"] {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 4px;
}