/* Список чатов Connector (реестр: docs/CORE-MODS.md).
   Здесь живёт ТОЛЬКО левая панель: МЕСТО плашки роли рядом с именем и
   отличие групповых чатов от личных. САМ ВИД ПЛАШКИ - единый компонент
   в connector-roles.js, здесь его нет ни строкой (см. пояснение ниже).
   Лента сообщений - в connector-compact.css, экран входа - в
   connector-login.css.
   Заготовку создал оркестратор блока 24.08.2026, наполняет поток
   «список чатов».

   Разметку сюда ставит connector-roles.js (его тик тикСписок):
     .mx_RoomListItemView               - плитка чата (класс Element, не хэш)
     .mx_RoomListItemView.cnr-плитка-личный  - в чате ровно двое
     .mx_RoomListItemView.cnr-плитка-группа  - всех остальных
     [data-testid="room-name"]          - имя чата (Element, не хэш)
     .cnr-строка                        - РОДИТЕЛЬ имени (колонка
                                          «имя / превью / присутствие»),
                                          класс вешаем только когда есть плашка
     .cnr-плашка                        - плашка роли собеседника, стоит
                                          СЛЕДУЮЩИМ узлом после имени
     .cnr-значок-группы                 - значок «двое» внутри аватара

   ЗАДАЧА 7 (плашка роли в списке чатов). Внутрь самого имени плашку
   класть нельзя: у имени ellipsis, длинное имя плашку просто съедает.
   Поэтому плашка - СОСЕДНИЙ узел, а колонку на время её жизни
   переводим из «столбика» в сетку: первая строка «имя | плашка», всё
   остальное (превью последнего сообщения, подпись присутствия соседнего
   слоя connector-design.js) - целыми строками ниже, ровно как было.
   Имя ужимается первым и получает многоточие; строка не переносится
   и не растёт в высоту даже на имени в 30+ знаков.

   ЗАДАЧА 8 (общие чаты отличаются от личных ВИЗУАЛЬНО, без чтения
   названия). Приём телеграмный и двойной, чтобы разница читалась с
   одного взгляда и не зависела от цвета темы:
     - форма аватара: у группового чата - скруглённый квадрат,
       у личного - круг (родная форма Element);
     - значок «двое» на цветном кружке в правом нижнем углу аватара
       группового чата.
   Личный чат ничем не помечаем вовсе - меньше шума в списке. */

/* ===================== задача 7: плашка роли ===================== */

/* колонка имени превращается в сетку только когда в ней есть плашка */
.mx_RoomListItemView .cnr-строка {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  justify-content: start;
  align-items: center;
  column-gap: 6px;
}
/* по умолчанию каждый ребёнок занимает строку целиком - это и есть
   прежний «столбик»: превью и подпись присутствия остаются как были */
.mx_RoomListItemView .cnr-строка > * {
  grid-column: 1 / -1;
  min-width: 0;
}
.mx_RoomListItemView .cnr-строка > [data-testid="room-name"] { grid-column: 1; }
.mx_RoomListItemView .cnr-строка > .cnr-плашка { grid-column: 2; }

/* ВИДА ПЛАШКИ ЗДЕСЬ БОЛЬШЕ НЕТ - и добавлять его сюда нельзя.
   24.08.2026 плашка сведена в ОДИН компонент: все её правила живут в
   connector-roles.js (блок .cnr-плашка), а места показа отличаются
   только переменными --cnr-плашка-* на своём контейнере. До этого вид
   плашки был описан в двух файлах разными правилами, и каждая просьба
   владельца «поправить плашку» чинила одно место из пяти - за сутки
   таких просьб было три, отсюда его «раз и навсегда».
   Всё, что относилось к списку чатов, переехало туда же без изменений
   вида: мелкая бледная подпись 10px обычным регистром (решения владельца
   «сделать мельче» и «плашки выглядят растянутыми»), синий текст у
   людей, фиолетовый у ИИ, полупрозрачный фон. Менять вид плашки в
   списке - там же, в переменных блока .mx_RoomListItemView. Здесь
   остаётся ТОЛЬКО раскладка строки: где плашка стоит, а не как выглядит. */

/* ============ задача 8: групповой чат отличается от личного ============ */

/* групповой - скруглённый квадрат; overflow:visible нужен значку в углу,
   поэтому картинке аватара форму задаём отдельно (без него фото
   вылезло бы за скруглённый квадрат прямоугольником) */
.mx_RoomListItemView.cnr-плитка-группа .mx_BaseAvatar {
  border-radius: 22% !important;
  overflow: visible !important;
  position: relative;
}
.mx_RoomListItemView.cnr-плитка-группа .mx_BaseAvatar img {
  border-radius: 22% !important;
}
/* личный - круг (родная форма Element, фиксируем явно) */
.mx_RoomListItemView.cnr-плитка-личный .mx_BaseAvatar {
  border-radius: 50% !important;
}

/* ИСТОРИЯ: с 24.08.2026 значок переехал К ИМЕНИ чата (connector-tglist.js,
   эталон docs/ЭТАЛОН_TELEGRAM.md). Правила ниже больше никем не
   применяются - слой ролей значок не ставит. Оставлены на случай отката
   одной строкой: вернуть вызов значокГруппы(плитка, группа) в
   connector-roles.js. */
.cnr-значок-группы {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cnr-значок-фон, #1668b3);
  color: #fff;
  border: 2px solid var(--cpd-color-bg-canvas-default, #fff);
  box-sizing: content-box;
  pointer-events: none;
}
.cnr-значок-группы svg { display: block; }

/* На узком экране (мобильный вид, connector-compact.css отдаёт списку
   весь экран) места в строке БОЛЬШЕ, а не меньше - панель занимает всю
   ширину. Отдельного мобильного сужения плашке не нужно: проверено на
   390px на пяти длинах роли - плашка нигде не растянута, длинную роль
   режет своим многоточием, имя ужимается своим (см. геометрию в
   roles-badges-check.mjs). Понадобится другой размер на мобильном - это
   переменная в connector-roles.js, а не новое правило здесь. */