/* Список чатов: строка ~72 px (аватар 52, имя · время, сценарий, превью), меню — долгим тапом */

.chats { padding-top: 10px; }
/* Строка переключателя «Реализм 3 | Аниме 1» — всегда, как у Luna. Вид — как у стиля на главной (.home-seg):
   36 px на вид, зона касания 44 (::before). У стиля — счётчик строк и точка непрочитанного.
   На телефоне сегмент во всю ширину (как у Luna); строка от 520 px — сегмент 280 px, как на главной.
   В fullscreen баланс ушёл из полосы Telegram (К1) — он здесь, справа. На телефоне — своей строкой над сегментом:
   рядом с балансом ⚡120 💎2 500 на 360 px сегменту осталось бы ~70 px на пункт, а «Реализм 12 •» шире.
   Раскладка зависит только от ширины строки, не от счётчиков и баланса — после загрузки ничего не прыгает (К9) */
.chats__bar { container: chats-bar / inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 12px; }
.chats__bar-energy { display: none; }
.is-fullscreen .chats__bar-energy { display: inline-flex; order: -1; margin-left: auto; }
.chats__seg { flex: 1 1 100%; min-width: 0; padding: 3px; }
@container chats-bar (min-width: 520px) {
  .chats__seg { flex: 0 0 280px; }
  .is-fullscreen .chats__bar-energy { order: 0; }
}
.chats__seg .seg__item {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 36px; padding: 0 10px; font-size: 14px;
}
/* Зона касания 36 + 5 + 5: с запасом на дробные координаты (попадание считается по целым пикселям) */
.chats__seg .seg__item::before { content: ""; position: absolute; inset: -5px 0; }
/* Не влезло (очень узко) — сжимается подпись с многоточием; счётчик и точка остаются внутри плашки */
.chats__seg-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chats__seg-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; }
.chats__seg-count:empty { display: none; }
.chats__seg .chat-unread-dot { flex: 0 0 auto; margin-left: -1px; }
.chats__list { gap: 6px; }
@media (min-width: 720px) {
  .chats { max-width: 792px; margin: 0 auto; width: 100%; }
}

.chat-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--line);
  color: var(--text);
  overflow: hidden;
  animation: rise-in 280ms var(--ease) both;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease);
}
/* Перерисовка после архивации — без повторного появления строк */
.chat-row--static { animation: none; }
.chat-row:not(.is-open):has(.chat-row__main:active) { transform: scale(0.985); background: var(--card-2); }
.chat-row.is-open { border-color: var(--line-2); }
.chat-row.is-open .chat-row__main:active { background: var(--card-2); }
@media (hover: hover) {
  .chat-row:not(.is-open):hover { background: var(--card-2); border-color: var(--line-2); }
  .chat-row.is-open .chat-row__main:hover { background: color-mix(in srgb, var(--card-2) 60%, transparent); }
}
.chat-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  color: inherit;
  text-align: left;
  -webkit-touch-callout: none;
}
.chat-row--group .chat-row__main { padding-right: 2px; }
.chat-row__main:focus-visible { outline-offset: -2px; border-radius: var(--r-lg); }

/* Аватар с кольцом и точкой «онлайн» */
.chat-row__ava-wrap { position: relative; flex: 0 0 auto; width: 52px; height: 52px; padding: 2px; border-radius: 50%; background: var(--grad-diag); }
.chat-row__ava { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--card); }
.chat-row__ava .avatar-fallback { font-size: 18px; }
.chat-row__ava-wrap::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 2.5px var(--card);
}

.chat-row__body { flex: 1; min-width: 0; }
.chat-row__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-row__name { font-weight: 800; font-size: 15.5px; line-height: 1.25; letter-spacing: -0.01em; }
/* «35 чатов» — рядом с именем, время остаётся справа */
.chat-row__count {
  flex: 0 0 auto; margin-right: auto; margin-left: -2px;
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--violet) 55%, var(--text));
  background: color-mix(in srgb, var(--violet) 18%, transparent);
}
/* «🔒 3» — свои фото ждут открытия: повод вернуться. Коротко и не сжимается (полный текст — в aria-label строки):
   на 390 px длинная подпись съедала имя персонажа */
.chat-row__locked {
  flex: 0 0 auto; margin-right: auto;
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--pink) 60%, var(--text));
  background: color-mix(in srgb, var(--pink) 16%, transparent);
}
.chat-row__count + .chat-row__locked { margin-left: -4px; }
/* Оба значка: свободное место — после второго, первый стоит вплотную к имени */
.chat-row__count:has(+ .chat-row__locked) { margin-right: 0; }
/* Имя не сжимается в «Ни…» из-за значков справа */
.chat-row__top .chat-row__name { min-width: min(8ch, 45%); }
.chat-row__time { flex: 0 0 auto; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.chat-row__scn { margin-top: 1px; font-size: 12px; line-height: 1.3; font-weight: 600; color: color-mix(in srgb, var(--violet) 70%, var(--text)); }
.chat-row__preview { margin-top: 1px; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.chat-row__preview.is-empty { color: var(--muted-2); font-style: italic; }
.chat-row__preview--media { display: flex; align-items: center; gap: 5px; color: var(--text); }
.chat-row__preview--media .icon { width: 15px; height: 15px; color: var(--pink); }

/* Правая колонка — только у персонажа с несколькими чатами: шеврон раскрытия во всю высоту строки */
.chat-row__side { flex: 0 0 44px; display: flex; flex-direction: column; }
.chat-row__toggle {
  flex: 1 1 auto;
  width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.chat-row__toggle:active { background: var(--card-3); color: var(--text); }
.chat-row__toggle .icon { width: 20px; height: 20px; transition: transform var(--t) var(--ease); }
.chat-row.is-open .chat-row__toggle { color: var(--text); }
.chat-row.is-open .chat-row__toggle .icon { transform: rotate(180deg); }
@media (hover: hover) { .chat-row__toggle:hover { color: var(--text); } }
/* Кнопки у края карточки (overflow: hidden) — рамка фокуса внутрь, чтобы не обрезалась */
.chat-row__toggle:focus-visible, .chat-row__more-all:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }

/* Раскрытие: остальные чаты персонажа — с колонки текста строки (10 + 52 + 12 px), по строке на чат:
   «🌙 Сценарий · сегодня 19:06» и превью; меню — долгим тапом */
.chat-row__panel { flex: 0 0 100%; min-width: 0; }
.chat-row__panel.is-animated .chat-row__panel-in { animation: fade-in var(--t) var(--ease) both; }
.chat-row__panel-in { padding: 0 12px 4px 74px; }
.chat-sub { display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.chat-sub__main {
  flex: 1; min-width: 0; min-height: 48px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7px 0 8px; color: inherit; text-align: left;
  -webkit-touch-callout: none;
  transition: background var(--t-fast);
}
.chat-sub__main:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.chat-sub__head { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.chat-sub__scn { min-width: 0; font-weight: 700; color: color-mix(in srgb, var(--violet) 70%, var(--text)); }
.chat-sub__date { flex: 0 0 auto; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-sub__scn + .chat-sub__date { color: var(--muted); }
.chat-sub__preview { margin-top: 1px; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.chat-sub__preview.is-empty { color: var(--muted-2); font-style: italic; }
.chat-sub__preview--media { display: flex; align-items: center; gap: 5px; }
.chat-sub__preview--media .icon { width: 14px; height: 14px; color: var(--pink); }
.chat-sub__main:active { opacity: 0.7; }
@media (hover: hover) { .chat-sub__main:hover .chat-sub__date { color: var(--pink); } }
.chat-row__more-all {
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-height: 44px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; color: var(--pink); text-align: left;
}
.chat-row__more-all .icon { width: 16px; height: 16px; }
.chat-row__more-left {
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--pink) 14%, transparent);
}
.chat-row__more-all:active { opacity: 0.7; }

/* Скелетон строки — той же высоты, что готовая */
.chat-row--sk { align-items: center; gap: 12px; padding: 8px 14px 8px 10px; animation: none; }
.chat-row__sk-ava { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; }

/* Пустое состояние: лица персонажей внахлёст и заметная кнопка в каталог */
.chats-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 36px 24px 24px;
}
.chats-empty__faces { position: relative; display: flex; justify-content: center; height: 92px; margin-bottom: 14px; }
.chats-empty__face {
  position: relative; width: 76px; height: 76px; margin: 0 -12px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--bg); background: var(--grad-soft); box-shadow: var(--shadow);
}
.chats-empty__face--0 { transform: translateY(12px) rotate(-8deg); }
.chats-empty__face--1 { z-index: 1; width: 88px; height: 88px; }
.chats-empty__face--2 { transform: translateY(12px) rotate(8deg); }
.chats-empty__img { position: absolute; inset: 0; width: 100%; height: 100%; animation: fade-in var(--t) both; }
.chats-empty__bubble {
  position: absolute; z-index: 2; right: calc(50% - 64px); top: -6px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--grad); box-shadow: var(--glow);
}
.chats-empty__bubble .icon { width: 18px; height: 18px; }
.chats-empty__title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.chats-empty__hint { max-width: 300px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.chats-empty__cta { margin-top: 12px; min-height: 48px; padding: 0 24px; }
/* Низкий экран (К5, Android маленький — 512 px): лица меньше, отступы плотнее — обе кнопки над навигацией */
.h-short .chats-empty { gap: 6px; padding-top: 12px; }
.h-short .chats-empty__faces { zoom: 0.7; margin-bottom: 10px; }
.h-short .chats-empty__cta { margin-top: 6px; }
/* Пустой стиль, а чаты есть в другом: «Чаты · Реализм 2 •» — сразу к ним */
.chats-empty__other { gap: 8px; min-height: 44px; padding: 0 18px; font-size: 14px; color: var(--text-2); }
.chats-empty__other-count {
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--violet) 55%, var(--text));
  background: color-mix(in srgb, var(--violet) 18%, transparent);
}

/* Непрочитанное: персонаж написал в Telegram, а чат ещё не открывали (chat.nudge.unread).
   Точка у времени в строке и в раскрытии, превью ярче; точка на вкладке «Чаты» нижней навигации */
.chat-unread-dot {
  display: inline-block; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 22%, transparent);
  vertical-align: 1px;
}
.chat-row__time .chat-unread-dot { margin-right: 7px; }
.chat-sub__head .chat-unread-dot { align-self: center; margin-left: 2px; }
.chat-row.is-unread .chat-row__time { color: var(--pink); font-weight: 700; }
.chat-row.is-unread .chat-row__preview:not(.is-empty) { color: var(--text-2); }
.bottom-nav__dot {
  position: absolute; top: 9px; left: calc(50% + 7px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pink); box-shadow: 0 0 0 2px rgba(22, 19, 38, 0.95);
  pointer-events: none;
}
.bottom-nav__item.is-active .bottom-nav__dot { background: #fff; box-shadow: 0 0 0 2px var(--pink); }
@media (min-width: 1024px) {
  .bottom-nav__dot { top: 10px; left: calc(50% + 8px); box-shadow: 0 0 0 2px var(--bg); }
}