/* ═══════════════════════════════════════════════════════════════════════════
   Вариант C — «Учебная доска», основное оформление сайта с 06.10 (?design=off — прежнее). По референсам владельца
   (Learnify, Dei): приложение — парящие белые панели на пастельном холсте, крупные цифры
   на цветных плитках, чёрные кнопки-таблетки, тёмный баннер с иллюстрацией.

   Цвет = тип: масляный — фразы и курс, мятный — слова и сценарии, небесный — XP и игры,
   розовый — серия и персонажи. Смелость — в баннере первого экрана и плитках «Моего дня».

   Палитра: canvas #ECE8FF · paper #FFFFFF · ink #16131F · black #000000 · violet #7B61FF
            butter #FFEFB0 · mint #D7F3E1 · sky #D9E9FF · blush #F8DDF3
   Шрифты: Jost — заголовки и цифры, Onest — текст.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-design="c"] {
  --color-accent:         #7B61FF;
  --color-accent-hover:   #6A4FE0;
  --color-accent-light:   #EFEBFF;
  --color-bg:             #FFFFFF;
  --color-bg-sidebar:     #FFFFFF;
  --color-bg-input:       #F4F3F8;
  --color-bg-bubble-bot:  #F4F3F8;
  --color-bg-bubble-user: #E4DDFF;
  --color-text-primary:   #16131F;
  --color-text-secondary: #6C6880;
  --color-text-bubble-user: #16131F;
  --color-text-bubble-bot:  #16131F;
  --color-text-sidebar:   #16131F;
  --color-border:         #ECEAF3;
  --color-border-input:   #E4E1EE;
  --font-family: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Jost', 'Onest', system-ui, sans-serif;
  --font-size-md: 15.5px;
  --line-height:  1.6;
  --sidebar-width: 264px;
  --c-canvas: #ECE8FF;
  --c-black:  #000000;
  --c-butter: #FFEFB0;
  --c-mint:   #D7F3E1;
  --c-sky:    #D9E9FF;
  --c-blush:  #F8DDF3;
  --c-panel-radius: 28px;
  --c-gap: 14px;
}

:root[data-design="c"][data-theme="dark"] {
  --color-accent:         #A592FF;
  --color-accent-hover:   #B7A8FF;
  --color-accent-light:   #2A2546;
  --color-bg:             #1A1824;
  --color-bg-sidebar:     #1A1824;
  --color-bg-input:       #24212F;
  --color-bg-bubble-bot:  #24212F;
  --color-bg-bubble-user: #3A3166;
  --color-text-primary:   #F1EFF8;
  --color-text-secondary: #A6A1BA;
  --color-text-bubble-user: #F1EFF8;
  --color-text-bubble-bot:  #F1EFF8;
  --color-text-sidebar:   #F1EFF8;
  --color-border:         #2C2938;
  --color-border-input:   #2C2938;
  --c-canvas: #0F0E15;
  --c-black:  #FFFFFF;
  --c-butter: #4A4120;
  --c-mint:   #1F3B2B;
  --c-sky:    #1F2F4A;
  --c-blush:  #43243F;
}

[data-design="c"] body { font-family: var(--font-family); }

/* ─── Холст и парящие панели (компьютер) ─── */
@media (min-width: 769px) {
  [data-design="c"] body {
    background: var(--c-canvas);
    padding: var(--c-gap);
    gap: var(--c-gap);
  }
  [data-design="c"] .sidebar,
  [data-design="c"] .main {
    height: calc(100vh - var(--c-gap) * 2);
    border-radius: var(--c-panel-radius);
    border: 0;
    overflow: hidden;
  }
}

/* ─── Меню ─── */
[data-design="c"] .sidebar__logo { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.01em; }
[data-design="c"] .sidebar__section-label {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; padding: 18px 16px 6px;
}
[data-design="c"] .sidebar__nav-item { font-size: 15px; font-weight: 500; padding: 9px 12px; gap: 12px; border-radius: 14px; min-height: 42px; }
[data-design="c"] .sidebar__nav-item__icon { width: 20px; font-size: 0; color: var(--color-text-secondary); display: inline-flex; }
[data-design="c"] .sidebar__nav-item__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Выбранный режим — в цветах «Заняться сегодня» (лаванда), а выделяется сплошным фиолетовым
   «Тарифы и подписка» (по отзыву владельца 06.10) */
[data-design="c"] .sidebar__nav-item--active { background: var(--color-accent-light); color: var(--color-accent); font-weight: 600; }
[data-design="c"] .sidebar__nav-item--active .sidebar__nav-item__icon { color: var(--color-accent); }
[data-design="c"] .sidebar__nav-item__arrow { display: inline-flex; opacity: 0.6; }
/* «Заняться сегодня» — в цветах «Тарифов и подписки» из того же меню (по отзыву владельца:
   без новых цветов); выбранный режим ниже — сплошной фиолетовый, так их не спутать */
[data-design="c"] .sidebar__nav-item--today { background: var(--color-accent-light); color: var(--color-accent); margin: 4px 0 2px; font-weight: 600; }
[data-design="c"] .sidebar__nav-item--today .sidebar__nav-item__icon { color: var(--color-accent); }
[data-design="c"] .sidebar__nav-item--today .sidebar__nav-item__sub { color: var(--color-accent); opacity: 0.85; }
[data-design="c"] .sidebar__nav-item--today:hover { filter: brightness(0.97); opacity: 1; }
[data-design="c"] .sidebar__nav-item__sub { font-size: 12px; }
[data-design="c"] .sidebar__badges { gap: 0; padding: 12px 8px 4px; }
[data-design="c"] .sidebar__badge--faq {
  background: none; border: 0; color: var(--color-text-secondary); padding: 6px 10px; font-size: 13px; font-weight: 500; border-radius: 10px;
}
[data-design="c"] .sidebar__badge--faq:hover { background: var(--color-bg-input); color: var(--color-text-primary); transform: none; opacity: 1; }
[data-design="c"] .sidebar__badge-icon { width: 16px; height: 16px; }
[data-design="c"] .sidebar__badge--plans { background: var(--color-accent); color: #fff; border-radius: 999px; justify-content: center; font-weight: 600; }

[data-design="c"] .theme-toggle-btn {
  background: var(--color-bg-input); border: 0; color: var(--color-text-primary); width: 40px; height: 40px;
}

/* ─── Переписка ─── */
[data-design="c"] .chat-messages__inner { max-width: 720px; gap: 18px; }
[data-design="c"] .message__bubble { font-size: var(--font-size-md); line-height: var(--line-height); border-radius: 22px; }
[data-design="c"] .message--bot .message__bubble { border-bottom-left-radius: 8px; }
[data-design="c"] .message--user .message__bubble { border-bottom-right-radius: 8px; }

/* ─── Карточки экранов ─── */
/* Прозрачен только карточный экран: у него свои карточки. Сообщение с кнопками управления
   (--cardbtns: «Я запомнила это слово» + «Мои слова») — обычная реплика, ей нужен пузырь,
   иначе текст висел на белом без подложки (iPhone, 06.10). */
[data-design="c"] .message__bubble--glist { background: transparent; padding: 0; }
[data-design="c"] .glist__group,
[data-design="c"] .glist__hero { background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 22px; }
[data-design="c"] .glist__title,
[data-design="c"] .glist__hero-title,
[data-design="c"] .modal__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
[data-design="c"] .glist__header { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--color-text-primary); }
[data-design="c"] .glist__footnote { font-size: 13px; font-weight: 500; }
/* Иконки строк — в цветной плашке, цвет по порядку */
[data-design="c"] .glist .glist-row .glist-row__icon {
  width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-butter); flex-shrink: 0; align-self: center;
  font-size: 18px; line-height: 1; overflow: hidden; min-width: 38px; flex-basis: 38px; margin: 0;
}
[data-design="c"] .glist .glist-row:nth-child(4n+2) .glist-row__icon { background: var(--c-mint); }
[data-design="c"] .glist .glist-row:nth-child(4n+3) .glist-row__icon { background: var(--c-sky); }
[data-design="c"] .glist .glist-row:nth-child(4n+4) .glist-row__icon { background: var(--c-blush); }

/* Первый экран — тёмный баннер с портретом Polly */
[data-design="c"] .glist--first .glist__hero {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  text-align: left;
  padding: 30px 46% 30px 28px;
  min-height: 210px;
  border: 0;
  border-radius: 26px;
  background: #16131F url("../assets/images/polly-portrait.jpg") right center / auto 112% no-repeat;
  /* webp в 4 раза легче (28 КБ вместо 106 КБ) — первый экран нового гостя (07.10) */
  background-image: image-set(url("../assets/images/polly-portrait-640.webp") type("image/webp"), url("../assets/images/polly-portrait.jpg") type("image/jpeg"));
  color: #fff;
}
[data-design="c"] .glist--first .glist__hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #16131F 46%, rgba(22, 19, 31, 0.55) 62%, rgba(22, 19, 31, 0) 80%);
}
[data-design="c"] .glist--first .glist__hero > * { position: relative; z-index: 1; }
[data-design="c"] .glist--first .glist__hero-img { display: none; }
[data-design="c"] .glist--first .glist__hero-title { color: #fff; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; }
[data-design="c"] .glist--first .glist__hero-sub { color: #CFCBE0; font-size: 16px; }
[data-design="c"] .glist--first .glist__hero-note {
  background: var(--c-butter); color: #16131F; font-weight: 600; font-size: 13px; border-radius: 999px; padding: 6px 13px;
}
[data-design="c"][data-theme="dark"] .glist--first .glist__hero-note { background: #FFEFB0; }
[data-design="c"] .glist--first .glist__group { background: var(--color-bg-bubble-bot); border: 0; }
[data-design="c"] .glist--first .glist-row--quote .glist-row__label { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 600; }

/* Подсказки-ответы — цветные таблетки, как нижняя панель в Dei */
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips .message-action-btn {
  background: var(--c-butter); border: 0; color: var(--color-text-primary); font-weight: 600; font-size: 14px; padding: 9px 16px;
}
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips .message-action-btn:nth-child(3n+2) { background: var(--c-mint); }
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips .message-action-btn:nth-child(3n+3) { background: var(--c-sky); }
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips .message-action-btn:hover { filter: brightness(0.96); }

/* ─── Поле ввода ─── */
[data-design="c"] .chat-input {
  max-width: 720px; background: var(--color-bg-input); border: 1.5px solid transparent; border-radius: 999px; padding: 6px 6px 6px 22px;
}
[data-design="c"] .chat-input:focus-within { border-color: var(--color-accent); background: var(--color-bg); }
[data-design="c"] .chat-input__text { font-size: 16px; padding: 8px 0; }
[data-design="c"] .chat-input__send { background: var(--color-accent); color: #fff; width: 42px; height: 42px; }
[data-design="c"] .chat-input__send:hover { background: var(--color-accent-hover); }
[data-design="c"] .chat-input__voice { width: 42px; height: 42px; }

[data-design="c"] .modal { border-radius: 28px; }

/* ─── Экран уровня курса ─── */
[data-design="c"] .glist .glist-row { align-items: center; }
[data-design="c"] .glist-row--topic .glist-row__label { flex: 1; }
/* Текущая тема — подсвечена, вместо ▶️ таблетка «Продолжить» */
[data-design="c"] .glist-row--topic.glist-row--current { background: color-mix(in srgb, var(--color-accent-light) 70%, var(--color-bg)); }
[data-design="c"] .glist-row--topic.glist-row--current .glist-row__label { font-weight: 600; }
[data-design="c"] .glist-row--topic.glist-row--current .glist-row__value { font-size: 0; }
[data-design="c"] .glist-row--topic.glist-row--current .glist-row__value::after {
  content: "Продолжить"; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--color-accent);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
[data-design="c"] .glist-row--topic.glist-row--done .glist-row__label { color: var(--color-text-secondary); }
[data-design="c"] .glist-row--topic.glist-row--locked { opacity: 0.55; }
[data-design="c"] .glist-row--topic.glist-row--locked .glist-row__icon { filter: grayscale(0.6); }

/* ─── Кнопки-строки в экранах чата: как строки карточек ─── */
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row--choice.message-action-btn {
  display: flex; align-items: center; gap: 12px; color: var(--color-text-primary); font-weight: 500; text-align: left;
}
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row--choice.message-action-btn::after {
  content: ""; width: 7px; height: 7px; margin-left: auto; flex-shrink: 0;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); opacity: 0.4;
}
[data-design="c"] .message-action-btn .pi-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; background: var(--c-butter);
}
[data-design="c"] .message-action-btn:nth-child(4n+2) .pi-icon { background: var(--c-mint); }
[data-design="c"] .message-action-btn:nth-child(4n+3) .pi-icon { background: var(--c-sky); }
[data-design="c"] .message-action-btn:nth-child(4n+4) .pi-icon { background: var(--c-blush); }
[data-design="c"] .message-action-btn .pi-text { white-space: normal; overflow: visible; display: inline; }
/* «Назад» и одиночные действия — скромнее, по центру, без плашки */
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row--action.message-action-btn {
  justify-content: center; color: var(--color-text-secondary); font-weight: 500;
}
[data-design="c"] .glist-row--action.message-action-btn .pi-icon { background: none; width: auto; height: auto; font-size: 15px; }
/* Главная строка-действие («📊 Профиль навыков» под планом) залита акцентом — правило выше красило её
   текст вторичным серым, и надпись почти пропадала на фиолетовом (замечено 10.10). */
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row--accent.message-action-btn,
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row--accent.message-action-btn:hover {
  color: #fff; font-weight: 600;
}

/* ─── Цель дня, серия и остаток сообщений — в строке статистики вверху ───
   Виджеты внизу меню на ноутбуке были за краем экрана. Они остаются в разметке источником чисел
   (их обновляют xp.js и chat.js, строка статистики следит за ними), но не показываются. Таблетка
   «Осталось N» в шапке телефона тоже переехала в строку. */
[data-design="c"] .sidebar :is(.xp-widget, .streak-widget, .msg-counter),
[data-design="c"] .msg-pill { display: none !important; }

/* ─── Polly говорит: кольцо вокруг аватара заметнее (на пастельном фоне прежнее терялось) ─── */
[data-design="c"] .message__avatar--speaking::after {
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.45), 0 0 16px 4px rgba(123, 97, 255, 0.35);
}

/* ─── Статистика — шторкой (см. блок «Шторка статистики» ниже) ─── */


/* ─── Вложенные меню: смайлик в цветной плашке, текст в одну строку ─── */
[data-design="c"] .sidebar__panel-header { padding: 14px 12px; gap: 6px; }
[data-design="c"] .sidebar__panel-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
[data-design="c"] .sidebar__panel-back { width: 34px; height: 34px; border-radius: 12px; color: var(--color-text-primary); }
[data-design="c"] .sidebar__panel-back:hover { background: var(--color-bg-input); }
[data-design="c"] .sidebar__panel-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
[data-design="c"] :is(.scenario-topic, .scenario-category) {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px; min-height: 44px; border-radius: 14px;
  font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--color-text-primary);
}
[data-design="c"] .scenario-category__label { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
[data-design="c"] :is(.scenario-topic, .scenario-category):hover { background: var(--color-bg-input); }
[data-design="c"] .pi-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; background: var(--c-butter);
}
[data-design="c"] .sidebar__panel-list > :nth-child(4n+2) .pi-icon { background: var(--c-mint); }
[data-design="c"] .sidebar__panel-list > :nth-child(4n+3) .pi-icon { background: var(--c-sky); }
[data-design="c"] .sidebar__panel-list > :nth-child(4n+4) .pi-icon { background: var(--c-blush); }
[data-design="c"] .pi-text {
  min-width: 0; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-design="c"] .pi-chevron { display: inline-flex; color: var(--color-text-secondary); opacity: 0.6; margin-left: auto; }

/* ─── Наведение мыши: отклик у всего, что нажимается (только где есть мышь) ─── */
@media (hover: hover) {
  [data-design="c"] :is(.sidebar__nav-item, .sidebar__badge--faq, .scenario-topic, .scenario-category, .stats-bar__item,
      .chat-input__voice, .theme-toggle-btn, .sidebar__login-btn, .sidebar__panel-back, .msg-counter__cta, .sidebar__badge--plans,
      .glist-row, .message-action-btn, .sidebar__collapse) {
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  }
  [data-design="c"] .sidebar__nav-item:not(.sidebar__nav-item--active):not(.sidebar__nav-item--today):hover,
  [data-design="c"] :is(.scenario-topic, .scenario-category):hover,
  [data-design="c"] .sidebar__badge--faq:hover {
    /* на тон светлее выбранного режима — чтобы наведение не путалось с выбором */
    background: color-mix(in srgb, var(--color-accent-light) 55%, var(--color-bg)); color: var(--color-accent);
  }
  [data-design="c"] .sidebar__nav-item:not(.sidebar__nav-item--active):not(.sidebar__nav-item--today):hover .sidebar__nav-item__icon { color: var(--color-accent); }
  [data-design="c"] :is(.sidebar__nav-item--active, .sidebar__nav-item--today):hover { filter: brightness(0.96); }
  [data-design="c"] .sidebar__badge--plans:hover { background: var(--color-accent-hover); transform: translateY(-1px); opacity: 1; }
  [data-design="c"] .msg-counter__cta:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
  [data-design="c"] :is(.chat-input__voice, .theme-toggle-btn, .sidebar__panel-back, .sidebar__collapse):hover { background: var(--color-accent-light); color: var(--color-accent); }
  [data-design="c"] .sidebar__login-btn:hover { background: var(--color-accent); color: #fff; }
  [data-design="c"] .stats-bar__item:hover { transform: translateY(-1px); filter: brightness(0.96); }
  [data-design="c"] .glist .glist-row--link:hover,
  [data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .glist-row.message-action-btn:hover { background: color-mix(in srgb, var(--color-accent-light) 70%, var(--color-bg)); }
  [data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions--chips .message-action-btn:hover {
    filter: brightness(0.95); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 19, 31, 0.08);
  }
  [data-design="c"] .message-action-btn:not(.glist-row):hover { color: var(--color-accent-hover); }
}

/* ─── Окно тарифов ───
   Тот же язык, что у приложения: белые карточки на пастельном холсте. Смелость — в одном месте:
   рекомендуемый годовой залит фиолетовым. На телефоне заливка означает «выбран» — она переходит
   на строку, которую нажали (выбор делает auth.js классом .plan--selected), а годовой без выбора
   становится белой карточкой. Цвета карточки — через переменные, чтобы состояние менялось одним
   набором, а не переопределением каждого текста. */
[data-design="c"] .modal--plans { background: var(--c-canvas); border: 0; max-width: 1060px; }
[data-design="c"] .modal--plans .modal__title { font-size: 30px; text-align: center; }
[data-design="c"] .modal--plans .modal__close { background: var(--color-bg); border-radius: 50%; width: 36px; height: 36px; }
[data-design="c"] .plans-trust {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px;
  background: none; border: 0; padding: 0; margin-top: 14px;
}
[data-design="c"] .plans-trust__item {
  align-items: center; gap: 8px; background: var(--color-bg); border-radius: 999px;
  padding: 6px 14px 6px 6px; font-size: 13.5px; font-weight: 500;
}
[data-design="c"] .plans-trust__icon {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-mint); font-size: 13px; margin: 0;
}
[data-design="c"] .plans-trust__item:nth-child(2) .plans-trust__icon { background: var(--c-blush); }
[data-design="c"] .plans-trust__item:nth-child(3) .plans-trust__icon { background: var(--c-sky); }
[data-design="c"] .plans { gap: 12px; margin-top: 30px; }
[data-design="c"] .plan {
  --pl-bg: var(--color-bg); --pl-ink: var(--color-text-primary); --pl-muted: var(--color-text-secondary);
  --pl-accent: var(--color-accent); --pl-line: var(--color-border); --pl-chip: var(--c-mint);
  background: var(--pl-bg); color: var(--pl-ink);
  border: 2px solid transparent; border-radius: 24px; padding: 24px 16px 16px; gap: 8px; box-shadow: none;
}
[data-design="c"] .plan--free { --pl-bg: color-mix(in srgb, var(--color-bg) 55%, transparent); }
[data-design="c"] .plan--highlight { border-color: var(--color-accent); }
[data-design="c"] :is(.plan--featured, .plan--selected) {
  --pl-bg: #7B61FF; --pl-ink: #FFFFFF; --pl-muted: rgba(255, 255, 255, 0.78);
  --pl-accent: #FFFFFF; --pl-line: rgba(255, 255, 255, 0.24); --pl-chip: rgba(255, 255, 255, 0.2);
  border-color: #7B61FF; box-shadow: 0 16px 34px rgba(123, 97, 255, 0.32);
}
[data-design="c"] .plan .plan__name {
  text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--pl-ink);
}
[data-design="c"] .plan .plan__price { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--pl-ink); }
[data-design="c"] .plan .plan__currency { font-size: 22px; font-weight: 500; }
[data-design="c"] .plan .plan__period { font-size: 13px; margin-top: -2px; color: var(--pl-muted); }
[data-design="c"] .plan .plan__perday { font-size: 13px; color: var(--pl-accent); }
[data-design="c"] .plan .plan__saving { background: var(--pl-chip); color: var(--pl-ink); font-size: 12.5px; padding: 4px 10px; }
[data-design="c"] .plan .plan__features { border-top-color: var(--pl-line); gap: 8px; padding-top: 12px; }
[data-design="c"] .plan .plan__features li { font-size: 13.5px; line-height: 1.4; padding-left: 20px; color: var(--pl-ink); }
[data-design="c"] .plan .plan__features li::before { color: var(--pl-accent); }
[data-design="c"] .plan__badge {
  background: #FFEFB0; color: #16131F; border: 0; font-size: 12px; font-weight: 600; letter-spacing: 0;
  padding: 4px 12px; top: -13px;
}
[data-design="c"] .plan__btn { border-radius: 999px; padding: 11px 16px; font-size: 14px; font-weight: 600; border: 0; }
[data-design="c"] .plan__btn--primary { background: var(--color-accent-light); color: var(--color-accent); }
[data-design="c"] .plan__btn--current { background: transparent; color: var(--color-text-secondary); box-shadow: inset 0 0 0 1.5px var(--color-border); }
[data-design="c"] .plan .plan__btn--featured { background: #FFFFFF; color: #5B41E0; }
[data-design="c"] .plans-sticky__btn { border-radius: 999px; }
[data-design="c"] .plans-anchor { margin-top: 18px; font-size: 13.5px; }
[data-design="c"] .plans-legal { border-top-color: color-mix(in srgb, var(--color-text-secondary) 18%, transparent); }
@media (hover: hover) {
  [data-design="c"] :is(.plan__btn, .modal--plans .modal__close) { transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
  [data-design="c"] .plan__btn--primary:hover { background: var(--color-accent); color: #fff; transform: translateY(-1px); }
  [data-design="c"] .plan .plan__btn--featured:hover { background: #F1EDFF; transform: translateY(-1px); }
  [data-design="c"] .modal--plans .modal__close:hover { background: var(--color-accent-light); color: var(--color-accent); }
}
@media (max-width: 640px) {
  [data-design="c"] .modal--plans .modal__title { font-size: 24px; }
  [data-design="c"] .plans-trust { flex-direction: column; align-items: stretch; gap: 6px; }
  [data-design="c"] .plans-trust__item { border-radius: 16px; }
  [data-design="c"] .plans { margin-top: 26px; gap: 10px; }
  [data-design="c"] .plan:not(.plan--featured) { padding: 14px 16px; border-radius: 20px; }
  [data-design="c"] .plan--highlight:not(.plan--selected) { border-color: transparent; }
  [data-design="c"] .plan--featured:not(.plan--selected) {
    --pl-bg: var(--color-bg); --pl-ink: var(--color-text-primary); --pl-muted: var(--color-text-secondary);
    --pl-accent: var(--color-accent); --pl-line: var(--color-border); --pl-chip: var(--c-mint);
    border-color: transparent; box-shadow: none;
  }
  [data-design="c"] .plan:not(.plan--featured) .plan__price { font-size: 24px; }
  /* Липкая полоса прилипала над нижним отступом окна, и под кнопкой просвечивали тарифы —
     опускаем её на величину этого отступа (mobile.css: .modal padding-bottom). */
  [data-design="c"] .plans-sticky {
    --pad-b: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    bottom: calc(-1 * var(--pad-b));
    margin-bottom: calc(-1 * var(--pad-b));
    padding-bottom: calc(var(--space-sm) + var(--pad-b));
    background: color-mix(in srgb, var(--c-canvas) 80%, transparent); border-top: 0;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
}

/* ─── Обложки разделов — широкой полосой, целиком по нажатию (design.js ставит класс) ─── */
[data-design="c"] .lesson-image--cover {
  width: 440px; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: 50% 32%; border-radius: 22px;
}
/* Схемы и прочие картинки не обрезаем, но и выше полэкрана не растягиваем */
[data-design="c"] .message__bubble--image .lesson-image:not(.lesson-image--cover):not(.polly-face) {
  max-height: min(60vh, 520px); width: auto; border-radius: 18px;
}

/* ─── Строки-ссылки под карточками (под статистикой) — как пункты меню ─── */
[data-design="c"] .message__bubble--glist > .message-actions:not(.message-actions--chips) {
  background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 22px; margin-top: 14px;
}
[data-design="c"] .message-actions .c-linkrow { padding: 10px 16px; min-height: 54px; font-size: 15px; }
[data-design="c"] .c-linkrow .pi-text { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
[data-design="c"] .c-linkrow .pi-sub { margin-left: auto; color: var(--color-text-secondary); font-size: 13.5px; font-weight: 500; white-space: nowrap; }

/* ─── Строки статистики с длинным значением — значение серой строкой под подписью ─── */
[data-design="c"] .glist-row--stack { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; }
[data-design="c"] .glist-row--stack .glist-row__icon { grid-row: 1 / span 2; }
[data-design="c"] .glist-row--stack .glist-row__label { align-self: end; }
[data-design="c"] .glist-row--stack .glist-row__value {
  grid-column: 2; align-self: start; margin: 0; text-align: left; font-weight: 500; font-size: 13.5px; flex-basis: auto;
}
/* Разделитель строк — от текста, а не из-под плашки иконки (плашка в C шире, чем в базовом списке) */
[data-design="c"] .glist-row + .glist-row::before { left: calc(var(--space-md) + 38px + var(--space-sm)); }

/* ─── Телефон ─── */
@media (max-width: 768px) {
  [data-design="c"] .glist-row + .glist-row::before { left: calc(12px + 38px + var(--space-sm)); }
  [data-design="c"] body:has(.sidebar--open) :is(.stats-bar, .theme-toggle-btn) { display: none; }
  [data-design="c"] .sidebar__hamburger { background: var(--color-bg-input); border: 0; box-shadow: none; border-radius: 14px; color: var(--color-text-primary); }
  [data-design="c"] .glist--first .glist__hero { padding: 24px 40% 24px 20px; min-height: 190px; background-size: auto 105%; }
  [data-design="c"] .glist--first .glist__hero-title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="c"] * { transition-duration: 0.01ms !important; }
}
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) .message-actions .c-linkrow + .c-linkrow::before { left: calc(16px + 32px + 12px); right: 0; }
/* Картинка без рамки-пузыря вокруг: на белом фоне рамка читалась как лишняя серая подложка */
[data-design="c"] .message__bubble--image { padding: 0; background: none; }
[data-design="c"] .glist__figure--cover { border-radius: 20px; }
/* Строка без смайлика — без пустой цветной плашки (место под значок сохраняем для выравнивания) */
[data-design="c"] .glist .glist-row .glist-row__icon:empty { background: none; }

/* ─── Единственная кнопка под сообщением — это действие, а не пункт списка ───
   «📗 Мои слова» под «Я запомнила это слово» рисовался строкой без рамки (белым по белому) и
   не читался как кнопка (iPhone, 06.10). Одиночную — таблеткой с стрелкой, как «Выбрать» в
   тарифах; списки из нескольких кнопок остаются строками меню (design.js, .c-linkrow). */
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) > .message-actions:not(.message-actions--chips):has(> .message-action-btn:only-child:not(.glist-row)) {
  background: none; border: 0; border-radius: 0; overflow: visible; margin-top: 14px; align-items: flex-start;
}
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) > .message-actions:not(.message-actions--chips) > .message-action-btn:only-child:not(.glist-row) {
  display: inline-flex; align-items: center; gap: 8px; width: auto; align-self: flex-start;
  background: var(--color-accent-light); color: var(--color-accent);
  border-radius: 999px; padding: 11px 18px 11px 20px; font-size: 15px; font-weight: 600; text-align: left;
}
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) > .message-actions:not(.message-actions--chips) > .message-action-btn:only-child:not(.glist-row)::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
@media (hover: hover) {
  [data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) > .message-actions:not(.message-actions--chips) > .message-action-btn:only-child:not(.glist-row):hover {
    background: var(--color-accent); color: #fff; transform: translateY(-1px);
  }
}
[data-design="c"] :is(.message__bubble--glist, .message__bubble--cardbtns) > .message-actions:not(.message-actions--chips) > .message-action-btn:only-child:not(.glist-row):active { transform: scale(0.97); }

/* ═══ Статистика: строка плашек в шапке + шторка (06.10, по отзывам владельца) ═══
   Шапка: плашки (компьютер — все пять с подписями; телефон — сколько помещается, без подписей).
   Нажатие на строку или пункт меню «Статистика» — шторка: плитки с подсказками «что это и как
   считается» и полная статистика бота (не в ленте). Логика — design.js (buildStatsBar). */
[data-design="c"] .stats-strip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px; border: 0; border-radius: 999px; background: transparent;
  font-family: inherit; color: #16131F; white-space: nowrap; cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
[data-design="c"] .stats-strip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[data-design="c"] body.stats-open .stats-strip { box-shadow: 0 0 0 2px var(--color-accent); background: var(--color-bg); }
@media (hover: hover) { [data-design="c"] .stats-strip:hover { background: color-mix(in srgb, var(--color-accent-light) 60%, transparent); } }
[data-design="c"] .stats-strip__chev { width: 16px; height: 16px; opacity: 0.55; margin: 0 4px 0 -2px; transition: transform 0.25s ease; }
[data-design="c"] body.stats-open .stats-strip__chev { transform: rotate(180deg); }
[data-design="c"] .stats-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 4px; border-radius: 999px; font-size: 13px; color: #16131F;
}
[data-design="c"][data-theme="dark"] :is(.stats-chip, .stats-bar__item) { color: #F1EFF8; }
[data-design="c"] .stats-chip[hidden] { display: none; }
[data-design="c"] .stats-chip .stats-bar__icon { width: 24px; height: 24px; }
[data-design="c"] .stats-chip .stats-bar__icon > svg:not(.stats-bar__ring) { width: 13px; height: 13px; }
[data-design="c"] .stats-chip .stats-bar__icon .stats-bar__ring { width: 28px; height: 28px; }
[data-design="c"] .stats-chip .stats-bar__num { font-size: 16px; }
[data-design="c"] .stats-chip__label { opacity: 0.75; }
[data-design="c"] :is(.stats-chip, .stats-bar__item):is(.stats-chip--butter, .stats-bar__item--butter) { background: var(--c-butter); }
[data-design="c"] :is(.stats-chip, .stats-bar__item):is(.stats-chip--mint, .stats-bar__item--mint) { background: var(--c-mint); }
[data-design="c"] :is(.stats-chip, .stats-bar__item):is(.stats-chip--sky, .stats-bar__item--sky) { background: var(--c-sky); }
[data-design="c"] :is(.stats-chip, .stats-bar__item):is(.stats-chip--blush, .stats-bar__item--blush) { background: var(--c-blush); }
[data-design="c"] :is(.stats-chip--left, .stats-bar__item--left) { background: var(--color-bg-input); box-shadow: inset 0 0 0 1px var(--color-border); }
[data-design="c"] :is(.stats-chip--left, .stats-bar__item--left).stats-bar__item--warning { background: var(--c-butter); box-shadow: none; }
[data-design="c"] :is(.stats-chip--left, .stats-bar__item--left).stats-bar__item--critical { background: var(--c-blush); box-shadow: inset 0 0 0 1.5px #E0559B; }

/* Шторка */
[data-design="c"] .stats-bar {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px; border-radius: 26px; background: var(--color-bg);
  box-shadow: 0 18px 40px rgba(22, 19, 31, 0.18), 0 0 0 1px var(--color-border);
  pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-14px) scale(0.98); transform-origin: top center;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.28s;
}
[data-design="c"] body.stats-open .stats-bar {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
[data-design="c"] .stats-bar__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-design="c"] .stats-bar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px; border: 0; border-radius: 18px; min-width: 0; text-align: left;
  font-family: inherit; font-size: 13px; color: #16131F;
}
[data-design="c"] button.stats-bar__item { cursor: pointer; }
[data-design="c"] .stats-bar__item[hidden] { display: none; }
[data-design="c"] .stats-bar__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Цель дня и остаток — во всю ширину, серия / слова / фразы — тремя в ряд */
[data-design="c"] .stats-bar__item:is([data-item="xp"], [data-item="left"]) {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 10px;
}
[data-design="c"] .stats-bar__item[data-item="left"][hidden] { display: none; }
[data-design="c"] .stats-bar__icon {
  position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.7);
}
[data-design="c"][data-theme="dark"] .stats-bar__icon { background: rgba(255, 255, 255, 0.12); }
[data-design="c"] .stats-bar__icon > svg:not(.stats-bar__ring) { width: 15px; height: 15px; }
[data-design="c"] .stats-bar__icon .stats-bar__ring { position: absolute; inset: -2px; width: 34px; height: 34px; transform: rotate(-90deg); }
[data-design="c"] .stats-bar__ring circle { fill: none; stroke: color-mix(in srgb, var(--color-accent) 18%, transparent); stroke-width: 2.4; }
[data-design="c"] .stats-bar__ring .stats-bar__ring-fill { stroke: var(--color-accent); stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
[data-design="c"] .stats-bar__item--done .stats-bar__ring .stats-bar__ring-fill { stroke: #2FA36B; }
[data-design="c"] .stats-bar__num { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.1; }
[data-design="c"] .stats-bar__label { display: block; font-size: 12.5px; opacity: 0.75; }
[data-design="c"] .stats-bar__goalbar {
  display: block; grid-column: 1 / -1; height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
}
[data-design="c"][data-theme="dark"] .stats-bar__goalbar { background: rgba(255, 255, 255, 0.12); }
[data-design="c"] .stats-bar__goalbar i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: var(--color-accent); transition: width 0.6s ease; }
[data-design="c"] .stats-bar__item--done .stats-bar__goalbar i { background: #2FA36B; }
[data-design="c"] .stats-bar__explain {
  grid-column: 1 / -1; justify-self: center; padding: 2px 10px; border: 0; background: none;
  font-family: inherit; font-size: 13px; color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* Полная статистика бота — та же карточка, что в ленте, без аватара и времени */
[data-design="c"] .stats-bar__full { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
[data-design="c"] .stats-bar__full:empty { display: none; }
[data-design="c"] .stats-bar__full .message { display: block; margin: 0; max-width: none; animation: none; }
[data-design="c"] .stats-bar__full .message > div { max-width: none; }
[data-design="c"] .stats-bar__full :is(.message__avatar, .message__time) { display: none; }
[data-design="c"] .stats-bar__full .message__bubble { max-width: none; }
[data-design="c"] .stats-bar__full .message__bubble--skeleton { width: 100%; display: flex; flex-direction: column; gap: 12px; background: none; padding: 0; }
/* Ручка внизу шторки — свернуть */
[data-design="c"] .stats-bar__close {
  display: flex; align-items: center; justify-content: center; width: calc(100% + 24px); height: 40px;
  touch-action: none;   /* жест на ручке — наш (тянуть шторку), браузер его не прокручивает */
  margin: 4px -12px -12px; border: 0; cursor: pointer;
  position: sticky; bottom: -12px; z-index: 6;   /* всегда видна у нижнего края, сколько ни листай */
  background: linear-gradient(to bottom, transparent, var(--color-bg) 45%);
}
[data-design="c"] .stats-bar__close span { width: 44px; height: 5px; border-radius: 3px; background: var(--color-border-input); transition: background-color 0.15s ease; }
@media (hover: hover) { [data-design="c"] .stats-bar__close:hover span { background: var(--color-text-secondary); } }
[data-design="c"] .stats-bar__error { margin: 0; font-size: 14px; color: var(--color-text-secondary); text-align: center; }
/* Подсказка «что это и как считается» */
[data-design="c"] .stats-bar__tip {
  display: none; grid-column: 1 / -1;
  font-size: 12.5px; line-height: 1.4; font-weight: 400; color: inherit; opacity: 0.85; text-align: left;
}
@media (hover: hover) {
  [data-design="c"] .stats-bar__explain { display: none; }
  /* Подсказка — во всю ширину плитки: по центру она вылезала за край шторки (у той прокрутка,
     лишнее обрезается), а плитка без z-index уходила под карточку статистики ниже (06.10). */
  [data-design="c"] .stats-bar__item:is(:hover, :focus-visible) { z-index: 5; }
  [data-design="c"] .stats-bar__item:is(:hover, :focus-visible) .stats-bar__tip {
    display: block; position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 6px);
    padding: 9px 12px; border-radius: 12px;
    background: #16131F; color: #FFFFFF; opacity: 1; box-shadow: 0 8px 24px rgba(22, 19, 31, 0.25); pointer-events: none;
  }
  [data-design="c"][data-theme="dark"] .stats-bar__item:is(:hover, :focus-visible) .stats-bar__tip { background: #F1EFF8; color: #16131F; }
  [data-design="c"] button.stats-bar__item:hover { filter: brightness(0.97); }
  [data-design="c"] .stats-bar__explain:hover { filter: brightness(0.96); }
}
/* Телефон: пояснения строкой под числом, плитки тогда строками */
[data-design="c"] .stats-bar--explain .stats-bar__tip { display: block; margin-top: 4px; }
[data-design="c"] .stats-bar--explain .stats-bar__item {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 10px;
}
[data-design="c"] .stats-bar--explain .stats-bar__item[hidden] { display: none; }
@media (hover: hover) { [data-design="c"] .stats-bar--explain .stats-bar__tip { display: none; } }

/* Затемнение существует, только пока шторка открыта (display: none, а не прозрачность):
   невидимый тёмный слой на весь экран iOS 26 Safari учитывал — серая подкраска строки
   состояния и панели Safari, и, похоже, перехват нажатий у верхнего края (бургер и шапка
   не нажимались на iPhone, 07.10). Появление — короткая анимация прозрачности. */
[data-design="c"] .stats-scrim { display: none; background: rgba(22, 19, 31, 0.28); }
[data-design="c"] body.stats-open .stats-scrim { display: block; animation: c-scrim-in 0.22s ease; }
@keyframes c-scrim-in { from { opacity: 0; } }

/* Компьютер: строка по центру матовой полосы над лентой, шторка — карточкой под ней */
@media (min-width: 769px) {
  [data-design="c"] body.has-stats-bar .main::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 8; pointer-events: none;
    background: color-mix(in srgb, var(--color-bg) 70%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  }
  [data-design="c"] body.has-stats-bar .chat-messages { padding-top: 76px; }
  [data-design="c"] .stats-strip { position: absolute; z-index: 9; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 140px); }
  [data-design="c"] .stats-bar {
    position: absolute; z-index: 9; top: 64px; left: 50%; width: min(600px, calc(100% - 32px)); transform-origin: top center;
    margin-left: calc(min(600px, calc(100% - 32px)) / -2); max-height: calc(100% - 80px);
  }
  [data-design="c"] .stats-scrim { position: absolute; inset: 0; z-index: 7; background: rgba(22, 19, 31, 0.12); }
}
/* Узкий компьютер / планшет: подписи у плашек убираем, чтобы строка помещалась */
@media (min-width: 769px) and (max-width: 1099px) {
  [data-design="c"] .stats-chip__label { display: none; }
}
/* Телефон: плашки в шапке между меню и темой, без подписей; шторка во всю ширину */
@media (max-width: 768px) {
  [data-design="c"] .stats-strip {
    position: fixed; z-index: 295; gap: 4px;
    top: calc(var(--space-md) + 2px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
    max-width: calc(100vw - 2 * (var(--space-md) + 44px + 6px)); overflow: hidden;
  }
  [data-design="c"] .stats-chip { padding: 3px 8px 3px 3px; gap: 4px; }
  [data-design="c"] .stats-chip__label, [data-design="c"] .stats-strip__chev { display: none; }
  /* Помещается четыре: цель, серия, слова и фразы — или остаток вместо фраз, когда он есть */
  [data-design="c"] .stats-strip--with-left .stats-chip[data-item="phrases"] { display: none; }
  [data-design="c"] .stats-bar {
    position: fixed; z-index: 290;
    top: calc(var(--space-md) + 52px + 8px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px;
    max-height: calc(100dvh - var(--space-md) - 52px - 24px - env(safe-area-inset-top, 0px));
  }
  [data-design="c"] .stats-scrim { position: fixed; inset: 0; z-index: 285; }
  [data-design="c"] body:has(.sidebar--open) .stats-strip { display: none; }
}
@media (max-width: 359px) {
  [data-design="c"] .stats-chip[data-item="words"] { display: none; }
}

/* ─── Голосовые пользователя (06.10): в C пузырь светло-лавандовый, а кнопка и волна были
   белыми полупрозрачными — расчёт на тёмный пузырь прежнего оформления. Отправленное
   голосовое выглядело неактивным. Делаем как у голоса Polly: сплошная фиолетовая кнопка,
   фиолетовая волна; лавандовый пузырь (цвет «уже отправлено») остаётся. ─── */
[data-design="c"] .message--user .voice-bubble__play { background: var(--color-accent); color: #fff; }
[data-design="c"] .message--user .voice-bubble__play:hover { background: var(--color-accent-hover); }
[data-design="c"] .message--user .waveform-bar { background: var(--color-accent); opacity: 0.35; }
[data-design="c"] .message--user .waveform-bar--played { background: var(--color-accent); opacity: 1; }
[data-design="c"] .message--user .voice-bubble__duration { color: var(--color-text-secondary); }

/* ═══ Движение (07.10): слово летит в словарь, первый экран, каскад, пружинный отклик ═══
   Правило: движение отвечает на действие или показывает прогресс, а не украшает. Анимации
   появления — с fill-mode backwards: после окончания они не держат transform, иначе отклик
   на нажатие (press.css, :active scale) перестал бы работать. */

/* Слово улетает в плашку «слова» (design.js, pollyFlyWord) */
.fly-word {
  position: fixed; z-index: 600; pointer-events: none;
  padding: 6px 13px; border-radius: 999px;
  background: var(--c-mint, #D7F3E1); color: #16131F;
  font-family: var(--font-display, inherit); font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(22, 19, 31, 0.18);
}
[data-design="c"] .stats-chip--bump { animation: c-chip-bump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes c-chip-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Первый экран: портрет «наезжает», текст поднимается по очереди, плашка всплывает, Polly машет.
   Портрет смещается за курсором через --px/--py (design.js), по горизонтали до ±7px. Прижатый к правому
   краю портрет при сдвиге влево открывал тёмную полосу фона справа (замечено 10.10) — поэтому он всегда
   заходит за правый край на 8px: запас больше любого сдвига. По вертикали запас даёт размер 112%. */
[data-design="c"] .glist--first .glist__hero {
  background-size: auto var(--hero-size, 112%);
  background-position: calc(100% + 8px + var(--px, 0px)) calc(50% + var(--py, 0px));
  transition: background-position 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-design="c"] .glist--first .glist__hero.hero-intro { animation: c-hero-zoom 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes c-hero-zoom { from { background-size: auto calc(var(--hero-size, 112%) + 18%); } }
[data-design="c"] .hero-intro .glist__hero-title { animation: c-rise 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
[data-design="c"] .hero-intro .glist__hero-sub   { animation: c-rise 0.6s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
[data-design="c"] .hero-intro .glist__hero-note  { animation: c-pop 0.55s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes c-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes c-pop  { from { opacity: 0; transform: scale(0.7); } }
[data-design="c"] .hero-wave { display: inline-block; transform-origin: 70% 85%; }
[data-design="c"] .hero-intro .hero-wave { animation: c-wave 1.5s 0.7s ease-in-out backwards; }
[data-design="c"] .hero-intro .hero-wave.hero-wave--again { animation: c-wave 1.2s ease-in-out; }
@keyframes c-wave {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(16deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(14deg); }
  60% { transform: rotate(-4deg); } 75% { transform: rotate(10deg); }
}
@media (max-width: 768px) { [data-design="c"] .glist--first .glist__hero { --hero-size: 105%; } }

/* Каскад: подсказки-ответы и строки новых карточек появляются по очереди, а не разом.
   Только живая лента — история лежит в #historySlot и не анимируется. */
[data-design="c"] #chatMessagesInner > .message .message-actions > .message-action-btn,
[data-design="c"] #chatMessagesInner > .message .glist__group > :is(.glist-row, .message-action-btn) {
  animation: c-cascade 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
@keyframes c-cascade { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
[data-design="c"] #chatMessagesInner > .message :is(.message-actions, .glist__group) > :nth-child(2) { animation-delay: 0.05s; }
[data-design="c"] #chatMessagesInner > .message :is(.message-actions, .glist__group) > :nth-child(3) { animation-delay: 0.1s; }
[data-design="c"] #chatMessagesInner > .message :is(.message-actions, .glist__group) > :nth-child(4) { animation-delay: 0.15s; }
[data-design="c"] #chatMessagesInner > .message :is(.message-actions, .glist__group) > :nth-child(5) { animation-delay: 0.2s; }
[data-design="c"] #chatMessagesInner > .message :is(.message-actions, .glist__group) > :nth-child(6) { animation-delay: 0.25s; }
[data-design="c"] #chatMessagesInner > .message :is(.message-actions, .glist__group) > :nth-child(n+7) { animation-delay: 0.3s; }

/* Пружинный отклик: нажатие — быстрое сжатие (press.css), отпускание — возврат с лёгким
   перелётом, как у пружины. Цвета и тени меняются как раньше. */
[data-design="c"] :is(.message-action-btn, .glist-row--link, .sidebar__nav-item, .scenario-topic, .scenario-category,
    .plan__btn, .chat-input__send, .chat-input__voice, .theme-toggle-btn, .sidebar__hamburger, .stats-bar__more,
    button.stats-bar__item, .sidebar__badge, .sidebar__login-btn, .modal__close) {
  transition-property: background-color, color, box-shadow, filter, opacity, transform;
  transition-duration: 0.15s, 0.15s, 0.15s, 0.15s, 0.15s, 0.45s;
  transition-timing-function: ease, ease, ease, ease, ease, cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-design="c"] :is(.message-action-btn, .glist-row--link, .sidebar__nav-item, .scenario-topic, .scenario-category,
    .plan__btn, .chat-input__send, .chat-input__voice, .theme-toggle-btn, .sidebar__hamburger, .stats-bar__more,
    button.stats-bar__item, .sidebar__badge, .sidebar__login-btn, .modal__close):active { transition-duration: 0.08s; }
[data-design="c"] .glist-row--link:active { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  [data-design="c"] :is(.hero-intro, .hero-intro *, .stats-chip--bump),
  [data-design="c"] #chatMessagesInner > .message :is(.message-actions, .glist__group) > * { animation: none !important; }
}

/* ─── Цель дня выполнена: кольцо вспыхивает, конфетти из кольца, пузырь Polly (design.js) ─── */
[data-design="c"] .stats-chip--goal { animation: c-goal-flash 1.5s ease-out; }
[data-design="c"] .stats-chip--goal .stats-bar__icon { animation: c-goal-ring 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes c-goal-flash {
  0% { box-shadow: 0 0 0 0 rgba(47, 163, 107, 0.55); background: #D7F3E1; }
  60% { box-shadow: 0 0 0 12px rgba(47, 163, 107, 0); background: #D7F3E1; }
  100% { box-shadow: 0 0 0 0 rgba(47, 163, 107, 0); }
}
@keyframes c-goal-ring { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1); } }
.goal-spark { position: fixed; z-index: 700; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; }
.goal-bubble {
  position: fixed; z-index: 700; display: flex; gap: 10px; align-items: center;
  padding: 10px 14px 10px 10px; border-radius: 18px 18px 18px 6px;
  background: var(--color-bg, #fff); color: var(--color-text-primary, #16131F);
  box-shadow: 0 14px 34px rgba(22, 19, 31, 0.22), 0 0 0 1.5px #2FA36B;
  opacity: 0; transform: translateY(-6px) scale(0.95); transform-origin: top left;
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.goal-bubble--on { opacity: 1; transform: none; }
.goal-bubble img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.goal-bubble b { display: block; font-family: var(--font-display, inherit); font-size: 16px; font-weight: 600; }
.goal-bubble span { font-size: 13px; color: var(--color-text-secondary, #6C6880); }
@media (prefers-reduced-motion: reduce) {
  [data-design="c"] .stats-chip--goal, [data-design="c"] .stats-chip--goal .stats-bar__icon { animation: none; }
  .goal-bubble { transition: opacity 0.2s ease; transform: none; }
}