/* ═══════════════════════════════════════════════════════════════════════════
   Сгруппированный список — ОСНОВНОЙ стиль экранов веб-версии (решение 01.09).
   Экран живёт внутри пузыря Polly: его фон (--color-bg-bubble-bot, #F2F2F5) — ровно тот
   серый, на котором iOS рисует сгруппированные списки, поэтому пузырь работает «страницей»,
   а группы внутри — карточками. Ничего перекрашивать не пришлось.

   Примитивы .glist* переиспользуются всеми такими экранами. Ниже них — блоки под конкретные
   экраны (статистика, приветствие онбординга).
   ═══════════════════════════════════════════════════════════════════════════ */

.message__bubble--glist {
  /* Карточки идут от края до края «страницы», поэтому собственных отступов у пузыря минимум. */
  padding: var(--space-md);
  max-width: 100%;
}

.glist {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Крупный заголовок экрана: вес + отрицательный трекинг (§15 Typography). */
.glist__title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: calc(var(--space-xs) * -1);
  overflow-wrap: normal;   /* см. .glist-row__label: наследуемый break-word рвёт слова */
  word-break: normal;
}

/* Подзаголовок секции — над карточкой, серым. Не капсом: в русском капс из 2–3 слов читается
   тяжелее латиницы, ради которой это правило в iOS и появилось. */
.glist__header {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 0 var(--space-sm);
  margin-bottom: calc(var(--space-sm) * -1);
}

/* Карточка группы. Радиус 14 — как у iOS inset-grouped. */
.glist__group {
  background: var(--color-bg);
  border-radius: 14px;
  overflow: hidden;
}

/* Вводная строка под заголовком экрана («Твой личный тренажёр английского. Выбери режим:»). */
.glist__lead {
  padding: 0 var(--space-sm);
  font-size: var(--font-size-md);
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin-top: calc(var(--space-sm) * -1);
}

/* Подпись под списком — вровень с подзаголовками, чтобы не читалась как мелкая сноска. */
.glist__footnote {
  padding: 0 var(--space-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ─── Шапка экрана: крупная иконка + название + описание ───
   Прямой аналог верхней карточки в Настройках iPhone («General» с шестерёнкой и абзацем). */
.glist__hero {
  background: var(--color-bg);
  border-radius: 14px;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.glist__hero-img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.glist__hero-title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.glist__hero-sub {
  font-size: var(--font-size-md);
  line-height: 1.4;
  color: var(--color-text-secondary);
  max-width: 34em;
}

/* ─── Строка ─── */
.glist-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 11px var(--space-md);
  font-size: var(--font-size-md);
  line-height: 1.35;
}

/* Разделитель начинается ПОСЛЕ иконки и не доходит до левого края — ключевая примета
   iOS-списка. Рисуем псевдоэлементом, а не border: у border такого отступа не задать. */
.glist-row + .glist-row::before {
  content: '';
  position: absolute;
  left: calc(var(--space-md) + 22px + var(--space-sm));
  right: 0;
  top: 0;
  height: 1px;
  background: var(--color-border);
}

.glist-row__icon {
  flex: 0 0 22px;
  font-size: var(--font-size-md);
  line-height: 1.35;
  text-align: center;
}

.glist-row__label {
  color: var(--color-text-primary);
  /* Подпись не должна рваться посреди слова («Интерес / ы», «Цел / ь»), когда значение справа
     длинное. Нужны ОБА условия:
     1. min-width не обнуляем — значение auto не даёт флекс-элементу стать уже своего
        min-content, то есть уже самого длинного слова;
     2. сбрасываем наследуемый перенос. Пузырь задаёт word-break: break-word (нужен для длинных
        ссылок в переписке), это свойство НАСЛЕДУЕТСЯ и по спеке равносильно
        overflow-wrap: anywhere — с ним min-content схлопывается до одного символа, и первое
        условие обесценивается.
     Переносится при нехватке места значение справа: у него min-width: 0 как раз стоит. */
  overflow-wrap: normal;
  word-break: normal;
}

/* Значение прижато вправо и при нехватке места переносится внутри своей колонки. */
.glist-row__value {
  margin-left: auto;
  text-align: right;
  color: var(--color-text-secondary);
  font-weight: 600;
  min-width: 0;
}

/* Двухэтажная строка: подпись сверху, пояснение/длинное значение снизу. */
.glist-row--block {
  align-items: flex-start;
}

.glist-row--block .glist-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.glist-row--block .glist-row__label {
  font-weight: 600;
}

.glist-row--block .glist-row__value {
  margin-left: 0;
  text-align: left;
  font-weight: 400;
}

/* ─── Тапабельная строка ───
   Строка, ведущая в раздел. Шеврон «›» обязателен: в iOS именно он отличает «сюда можно
   перейти» от справочной строки. Без него список выглядит кликабельным, но им не является —
   человек жмёт и ничего не происходит.
   Это <button>, поэтому гасим наследуемое выравнивание текста и растягиваем на всю ширину. */
.glist-row--link {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.glist-row__chevron {
  margin-left: auto;
  align-self: center;
  color: var(--color-text-secondary);
  opacity: 0.5;
  font-size: var(--font-size-lg);
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Отклик на нажатие — подсветкой строки, а не сжатием: ряд списка в iOS именно подсвечивается
   (сжимать строку внутри карточки выглядело бы как дефект вёрстки). */
.glist-row--link:active {
  background: var(--color-bg-input);
}

/* Строка-действие без перехода в раздел («Назад»): по центру, акцентным цветом.
   В iOS такие действия выносят в отдельную карточку под основным списком. */
.glist-row--action {
  justify-content: center;
  color: var(--color-accent);
  font-weight: 500;
}

/* Кнопка, переехавшая в карточку-список (экран Обучения): класс .message-action-btn на ней
   остаётся — по нему wireActionChips навешивает обработчик, — но выглядеть она должна строкой,
   а не кнопкой-пилюлей. */
:is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row.message-action-btn {
  border: none;
  border-radius: 0;
  font-size: var(--font-size-md);
  font-weight: 400;
  width: 100%;
  /* background здесь НЕ задаём: у .message-action-btn он и так transparent, а лишнее
     объявление с этой специфичностью перебивало подсветку :hover/:active у строки. */
}

:is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row.message-action-btn:active {
  background: var(--color-bg-input);
}

/* press.css даёт всем .message-action-btn сжатие на нажатии — для пилюли верно, но строка
   внутри карточки сжиматься не должна (выглядит как дефект вёрстки), у неё своя подсветка.
   press.css грузится позже, поэтому перебиваем специфичностью, а не порядком. */
:is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row.message-action-btn:active {
  transform: none;
}

/* Текстовая карточка: сплошная проза экрана (вступления Аудирования, Коллокаций и т.п.).
   На сером фоне «страницы» длинный серый абзац читается тяжело — выносим его на белое. */
.glist__text {
  padding: 12px var(--space-md);
  font-size: var(--font-size-md);
  line-height: 1.45;
  color: var(--color-text-primary);
}

/* Строка-выбор из списка (уровень, тема, жанр, категория ошибок): слева, акцентным цветом.
   Шеврон НЕ ставим: в этих списках вперемешку и переходы, и действия («Предложить другие
   темы»), а шеврон обещал бы именно переход. */
.glist-row--choice {
  color: var(--color-accent);
  font-weight: 500;
}

/* ─── Пикер плитками ───
   Часы, минуты, дни недели, голоса: коротких кнопок много, и вертикальным списком во всю
   ширину они читаются как стена. Внутри карточки раскладываем их плитками с переносом. */
.glist__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.glist__chips .message-action-btn {
  width: auto;
  border: 1px solid var(--color-accent);
  background: var(--color-accent-light);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent);
}

@media (hover: hover) {
  .glist__chips .message-action-btn:hover { background: var(--color-accent); color: #fff; }
}

/* Закрытая тема курса: по ней нельзя кликнуть, и выглядеть она должна тише открытых —
   иначе список из 29 одинаково ярких строк не даёт понять, где ты сейчас. */
.glist-row--locked .glist-row__label {
  color: var(--color-text-secondary);
}
.glist-row--locked .glist-row__value {
  opacity: 0.45;
}

/* Пояснение под подписью (описание фичи в приветствии). */
.glist-row__sub {
  font-size: var(--font-size-sm);
  line-height: 1.35;
  color: var(--color-text-secondary);
}

/* Свободная строка без пары «подпись — значение»: акцентные фразы, неразобранный текст. */
.glist-row--note .glist-row__note {
  color: var(--color-text-primary);
  min-width: 0;
}

/* ─── Кнопки внутри такого экрана ───
   Фиолетовая пилюля с обводкой выбивалась из списка. Здесь кнопки — «actionable rows»:
   вся панель становится одной карточкой, кнопки внутри неё — строки с разделителями
   и акцентным текстом, ровно как действия в Настройках. */
:is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions {
  margin-top: var(--space-md);
  gap: 0;
  background: var(--color-bg);
  border-radius: 14px;
  overflow: hidden;
}

:is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions .message-action-btn {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 13px var(--space-md);
  color: var(--color-accent);
  font-size: var(--font-size-md);
  font-weight: 500;
  text-align: center;
}

:is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions .message-action-btn + .message-action-btn::before {
  content: '';
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  top: 0;
  height: 1px;
  background: var(--color-border);
}

/* ─── Стартеры разговора — компактные пилюли ───
   Форма несёт смысл: строки-карточки выше уже означают «раздел, в который можно перейти».
   Если сделать стартеры такими же, два одинаковых списка подряд читаются как один, и непонятно,
   что чем является. Пилюли — та же форма, что у idle-чипов над строкой ввода, где они значат
   ровно то же самое: «быстро начать разговор». */
:is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

:is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips .message-action-btn {
  width: auto;
  border: 1px solid var(--color-accent);
  background: var(--color-accent-light);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

:is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips .message-action-btn::before {
  display: none;   /* разделители нужны только в режиме «карточка со строками» */
}


/* В тёмной теме карточки должны быть СВЕТЛЕЕ фона-пузыря, иначе группы сливаются в пятно
   (в светлой теме соотношение обратное — белое на сером). */
[data-theme="dark"] .glist-row--link:active { background: #3A3A46; }

/* ─── Наведение ───
   Без него строки и кнопки на десктопе не читались как интерактивные: подсказку давал только
   курсор. Всё под @media (hover: hover) — на тач-экранах :hover «залипает» после тапа, и
   элемент остаётся подсвеченным, будто выбран. Там за отклик отвечает :active.
   Градация намеренная: наведение мягче нажатия (#F7F7F8 → #F2F2F5), чтобы тап читался как
   отдельное событие, а не как продолжение наведения. */
@media (hover: hover) {
  .glist-row--link:hover {
    background: var(--color-bg-sidebar);
  }
  /* Шеврон подаётся вперёд — маленький жест «сюда можно перейти» (§8: промежуточное движение
     должно указывать на исход). */
  .glist-row--link:hover .glist-row__chevron {
    opacity: 0.85;
    transform: translateX(2px);
  }

  :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions .message-action-btn:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
  }

  :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips .message-action-btn:hover {
    background: var(--color-accent);
    color: #fff;
  }

  /* .message-action-btn:hover из chat.css красит текст в белый (для пилюли с акцентной
     заливкой это верно). Здесь заливки нет — на белой карточке текст «Назад» просто
     исчезал. Возвращаем и фон, и цвет. */
  :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row.message-action-btn:hover {
    background: var(--color-bg-sidebar);
    color: inherit;
  }
  :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row--action.message-action-btn:hover {
    color: var(--color-accent);
  }

  [data-theme="dark"] .glist-row--link:hover,
  [data-theme="dark"] :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row.message-action-btn:hover {
    background: #35353F;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glist-row--link,
  .glist-row__chevron { transition: none; }
  .glist-row--link:hover .glist-row__chevron { transform: none; }
}


[data-theme="dark"] .glist__group,
[data-theme="dark"] .glist__hero,
[data-theme="dark"] :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions {
  background: #2E2E38;
}

/* ─── Статистика: ракета в мотивирующей подписи ───
   Периодически «стартует»: короткий взлёт раз в 4 секунды, остальное время покой —
   бесконечная тряска раздражала бы. Только transform (§11): композитор, без перерисовки. */
.glist__rocket {
  display: inline-block;
  animation: glist-rocket 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes glist-rocket {
  0%, 62%, 100% { transform: translate(0, 0) rotate(0); }
  70%           { transform: translate(1px, -5px)  rotate(8deg); }
  78%           { transform: translate(3px, -11px) rotate(16deg); }
  86%           { transform: translate(1px, -4px)  rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .glist__rocket { animation: none; }
}

@media (max-width: 768px) {
  /* На узком экране 13px для подзаголовков и подписей уже читается правильно — 15px там
     перетягивал бы внимание с самих карточек. */
  .glist__header,
  .glist__footnote {
    font-size: var(--font-size-sm);
  }
  .glist-row {
    padding: 10px var(--space-sm) 10px 12px;
    font-size: var(--font-size-sm);
  }
  .glist-row + .glist-row::before {
    left: calc(12px + 20px + var(--space-sm));
  }
  .glist-row__icon { flex-basis: 20px; }
  .glist-row__sub  { font-size: var(--font-size-xs); }
  .glist__hero-sub { font-size: var(--font-size-sm); }
  .message__bubble--glist { padding: var(--space-sm); }
}