/* @docs-version: 2026-05-13 */
/*
 * k/style.css — стили страницы /k (AI-консультант, v3.0)
 *
 * Архитектура: одна страница, два режима.
 *   - Лендинг: обычная страница сайта (карточки ролей + SEO-блоки)
 *   - Чат: fullscreen через body.k-chat-mode (скрывает лендинг, показывает aside.k-chat)
 *
 * Токены (--primary, --accent, --border, --font-body, --font-heading и др.)
 * приходят из css/base.css. Здесь — только стили страницы /k.
 *
 * Все классы изолированы префиксом .k- или применяются только внутри контейнеров
 * .k-landing / .k-chat — не конфликтуют с остальным сайтом.
 */

/* ═══════════════════════════════════════════════════════
   0. Общие токены слоёв (z-index, локальные для /k)
   ═══════════════════════════════════════════════════════ */
:root {
  --k-z-chat: 100;          /* fullscreen-чат поверх лендинга */
  --k-z-chat-sticky: 110;   /* composer и header внутри чата */
  --k-z-modal: 9999;        /* v3.3 — модалка полной карточки поверх шапки сайта витрины */
  --k-z-modal-close: 10000; /* v3.3 — крестик над модалкой */
}

html { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════════════════
   1. ЛЕНДИНГ (видим всегда, скрывается в chat-режиме)
   ═══════════════════════════════════════════════════════ */

.k-landing .page-nav { padding-bottom: 24px; }
@media (min-width: 768px) {
  .k-landing .page-nav { padding-bottom: 32px; }
}

/* ───── Центральный блок с 3 ролями ───── */
/* База — мобилка: сжатые отступы, чтобы 3 карточки помещались в первый экран */
.consultant-page {
  text-align: center;
  padding: 0 8px 24px;
}
@media (min-width: 768px) {
  .consultant-page { padding: 0 16px 64px; }
}

.cp-brand {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--primary, #0a0a0a);
  text-transform: uppercase;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .cp-brand { font-size: 13px; margin-bottom: 32px; }
}

.cp-line {
  width: 40px;
  height: 1px;
  background: #c8c0b4;
  margin: 0 auto 16px;
}
@media (min-width: 768px) {
  .cp-line { width: 48px; margin: 0 auto 32px; }
}

.cp-title {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--primary, #0a0a0a);
  line-height: 1.15;
  margin: 0 auto 12px;
  max-width: 16ch;
}
@media (min-width: 768px) {
  .cp-title {
    font-size: clamp(28px, 4.8vw, 40px);
    margin-bottom: 24px;
  }
}

.cp-sub {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #777);
  margin: 0 auto 12px;
  max-width: 42ch;
}
@media (min-width: 768px) {
  .cp-sub { font-size: 15px; margin-bottom: 24px; }
}

/* ───── 3 карточки ролей ───── */
/* v3.8 (260514-fbg) — бежевая коробка под карточками снята: создавала
   оптическую асимметрию из-за шеврона в правой части карточки. Контраст
   обеспечивают тени .card + бежевые круги-аватары + шеврон ›. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 920px;
  margin: 16px auto 0;
}
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
  }
}

/* Мобилка — горизонтальный layout (иконка слева, текст справа),
   3 карточки помещаются в первый экран 375×667 */
.card {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12); /* v3.6 son-contrast — границу усилили вдвое (с 0.06 до 0.12), карточки чётче видны на беже */
  color: inherit;
  font: inherit;
  cursor: pointer;
  position: relative; /* v3.6 son-contrast — якорь для шеврона .card::after */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* v3.6 son-contrast — мягкая rest-state тень */
  transition: box-shadow var(--medium, 250ms ease), transform var(--medium, 250ms ease), border-color var(--medium, 250ms ease);
  touch-action: manipulation;
}
@media (min-width: 768px) {
  .card {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 40px 32px;
    min-height: 280px;
  }
}

/* v3.6 son-contrast — hover чуть мягче (в линию с rest 0 2px 8px),
   на мобилке движение -2px (резкое -4px заметнее на маленьком экране) */
.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: var(--border-hover, rgba(0, 0, 0, 0.18));
}
@media (min-width: 768px) {
  /* Десктоп — резче, как было до контраст-правки */
  .card:hover { transform: translateY(-4px); }
}
.card:focus-visible {
  outline: 2px solid var(--accent, #b8b0a4);
  outline-offset: 4px;
}
.card.selected {
  border-color: var(--accent-dark, #8a8279);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* v3.6 son-contrast — шеврон-стрелка справа как указатель «тапни сюда».
   Мобилка: посередине справа. Десктоп: в правый верхний угол (column layout). */
.card::after {
  content: '›'; /* юникод U+203A — single right-pointing angle quotation mark */
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(184, 176, 164, 0.7); /* var(--accent) #b8b0a4 с прозрачностью 0.7 */
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
  pointer-events: none; /* не перехватывать клик — событие проходит на саму карточку */
  transition: color var(--medium, 250ms ease), transform var(--medium, 250ms ease);
}
@media (min-width: 768px) {
  .card::after {
    right: 16px;
    top: 16px;
    transform: none; /* в углу — без вертикального центрирования */
    font-size: 28px;
  }
}
.card:hover::after {
  color: var(--accent-dark, #8a8279);
  transform: translateY(-50%) translateX(2px); /* мобилка — сохраняем вертикальное центрирование + лёгкое смещение вправо */
}
@media (min-width: 768px) {
  .card:hover::after { transform: translateX(2px); } /* десктоп — без translateY (шеврон в углу) */
}

/* v3.6 son-contrast — иконка-аватар в бежевом круге, svg внутри белый (наследует currentColor).
   Мобилка: 40×40, ряд (margin-right). Десктоп: 56×56, колонка (margin-bottom). */
.card__icon {
  width: 40px;                          /* было 36px — чуть крупнее, под круг */
  height: 40px;
  background: var(--accent, #b8b0a4);   /* НОВОЕ — бежевый круг бренда */
  color: #fff;                          /* было var(--accent-dark) — svg внутри теперь белый через currentColor */
  border-radius: 50%;                   /* НОВОЕ — круг */
  display: flex;                        /* НОВОЕ — центрирование svg внутри */
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  margin-right: 14px;                   /* было 16px — сжали на 2px, т.к. иконка чуть больше */
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .card__icon {
    width: 56px;                        /* оставлено как было */
    height: 56px;
    margin-right: 0;
    margin-bottom: 40px;
    /* background, border-radius, display, color наследуются из base */
  }
}
.card__icon svg { width: 60%; height: 60%; } /* v3.6 son-contrast — svg занимает 60% круга (24px на мобилке, ~33px на десктопе) */

/* Обёртка текстового стэка карточки.
   min-width: 0 нужен для text-overflow:ellipsis внутри flex-ребёнка. */
.card__body {
  min-width: 0;
  flex: 1 1 auto;
}

.card__role {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted, #777);
  text-transform: uppercase;
  margin-bottom: 4px;
}
@media (min-width: 768px) {
  .card__role { font-size: 12px; margin-bottom: 16px; }
}

.card__who {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--primary, #0a0a0a);
  margin-bottom: 4px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .card__who { font-size: 28px; margin-bottom: 40px; }
}

.card__desc {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #777);
  margin: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .card__desc {
    font-size: 14px;
    line-height: 1.6;
    max-width: 28ch;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ═══════════════════════════════════════════════════════
   2. SEO-БЛОКИ (4 секции под карточками)
   ═══════════════════════════════════════════════════════ */

.k-sec {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px;
}
@media (min-width: 768px) { .k-sec { padding: 80px 48px; } }
@media (min-width: 1024px) { .k-sec { padding: 96px 48px; } }

.k-sec--wide {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.k-sec--wide > .k-sec__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .k-sec--wide > .k-sec__inner { padding: 0 48px; }
}

.k-sec__title {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: clamp(22px, 3.6vw, 32px);
  letter-spacing: 0.06em;
  color: var(--primary, #0a0a0a);
  text-align: center;
  margin: 0 0 32px;
  line-height: 1.2;
}
@media (min-width: 768px) { .k-sec__title { margin-bottom: 48px; } }

/* ───── «Как это работает» — 3 шага ───── */
.k-sec-how__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .k-sec-how__steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

.k-sec-how__step { text-align: center; }

.k-sec-how__num {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--accent, #b8b0a4);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  .k-sec-how__num { font-size: 48px; margin-bottom: 24px; }
}

.k-sec-how__step h3 {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--primary, #0a0a0a);
  margin: 0 0 12px;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .k-sec-how__step h3 { font-size: 18px; }
}

.k-sec-how__step p {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted, #777);
  margin: 0 auto;
  max-width: 28ch;
}

/* ───── «Что за нами стоит» — 4 пункта на soft-фоне ───── */
.k-sec-trust { background: #faf9f7; }

.k-sec-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .k-sec-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
}

.k-sec-trust__item h3 {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--primary, #0a0a0a);
  margin: 0 0 12px;
  line-height: 1.3;
}

.k-sec-trust__item p {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-mid, #555);
  margin: 0;
}

/* ───── FAQ ───── */
.k-sec-faq__list {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
}
.k-sec-faq__item { border-bottom: 1px solid rgba(0,0,0,0.08); }
.k-sec-faq__item:first-child { border-top: 1px solid rgba(0,0,0,0.08); }

.k-sec-faq__summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--primary, #0a0a0a);
  letter-spacing: 0.01em;
  user-select: none;
  transition: color 200ms ease;
  touch-action: manipulation;
}
@media (min-width: 768px) {
  .k-sec-faq__summary { padding: 24px 48px 24px 0; font-size: 16px; }
}
.k-sec-faq__summary::-webkit-details-marker { display: none; }
.k-sec-faq__summary::marker { content: ''; }
.k-sec-faq__summary:hover { color: var(--accent-dark, #8a8279); }
.k-sec-faq__summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.k-sec-faq__item[open] .k-sec-faq__summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.k-sec-faq__answer {
  padding: 0 0 20px;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-mid, #555);
  margin: 0;
  max-width: 64ch;
}
@media (min-width: 768px) {
  .k-sec-faq__answer { padding-bottom: 24px; font-size: 15px; }
}

/* ───── «Смотрите также» — плашки ───── */
.k-sec-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .k-sec-related__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .k-sec-related__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.k-sec-related__item {
  display: block;
  padding: 24px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.03);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  touch-action: manipulation;
}
@media (min-width: 768px) {
  .k-sec-related__item { padding: 32px 24px; }
}
.k-sec-related__item:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}

.k-sec-related__item h3 {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--primary, #0a0a0a);
  margin: 0 0 8px;
  text-transform: uppercase;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .k-sec-related__item h3 { font-size: 17px; }
}

.k-sec-related__item p {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #777);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════
   3. ЧАТ (по умолчанию скрыт)
   ═══════════════════════════════════════════════════════ */

.k-chat { display: none; }

/* Активация: класс на body — ТОЛЬКО в chat-режиме переопределяем html/body.
   На iOS body уже имеет height:100% + overflow:hidden из base.css — этого
   достаточно, чтобы не было параллельного скролла body, пока скроллится feed. */
body.k-chat-mode { overflow: hidden; }
body.k-chat-mode .k-landing { display: none; }
body.k-chat-mode .k-chat {
  display: flex;
  flex-direction: column;
  position: fixed;
  /* Явная высота вместо inset:0. Причина: на iOS Safari inset:0 без явной
     height ведёт себя нестабильно при динамическом URL-bar — composer уезжает
     за нижний край viewport, нижняя часть feed становится недоступна.
     100dvh — current dynamic viewport (учитывает url-bar), 100vh — фолбэк.
     bottom НЕ задаём намеренно: при одновременном top + bottom + height на
     iOS Safari возникают неопределённые поведения при появлении клавиатуры
     (composer уезжает в середину экрана вместо прижатия к клавиатуре). */
  /* top — сдвиг от верхней границы layout viewport. На iOS Safari при
     открытии клавиатуры browser сам подскролливает страницу вверх, чтобы
     зафокусированный input был виден; visualViewport.offsetTop становится
     положительным. JS обновляет --k-app-offset-top для компенсации (см.
     k/app.js, setupViewportHeight). На современных iOS 16.4+ с meta
     interactive-widget=resizes-content layout viewport сам сжимается —
     offsetTop остаётся 0, переменная не вредит. */
  top: var(--k-app-offset-top, 0px);
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  /* JS на iOS обновляет --k-app-height по visualViewport.resize, чтобы
     компенсировать прыжки клавиатуры (см. k/app.js, setupViewportHeight). */
  height: var(--k-app-height, 100dvh);
  z-index: var(--k-z-chat);
  background: var(--bg, #fff);
}

/* В fullscreen-чате скрываем соседние элементы сайта (приходят из index.html),
   чтобы они не проглядывали сбоку и не конкурировали с чатом. */
body.k-chat-mode .header-categories,
body.k-chat-mode .bottom-widget,
body.k-chat-mode .site-footer { display: none; }

/* ───── Шапка чата ───── */
.k-chat__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
  background: #fff;
  position: relative;
  z-index: var(--k-z-chat-sticky);
}

.k-chat__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px 0 0;
  margin-left: -8px;
  background: transparent;
  border: 0;
  color: var(--primary, #0a0a0a);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) {
  .k-chat__back:hover { color: var(--accent-dark, #8a8279); }
}
.k-chat__back svg { flex-shrink: 0; }
.k-chat__back-label {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 400;
}
@media (max-width: 419px) {
  .k-chat__back-label { display: none; }
}

.k-chat__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent, #b8b0a4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Poiret One', serif);
  font-size: 18px;
  font-weight: 400;
}

.k-chat__identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.k-chat__name {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--primary, #0a0a0a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-chat__status {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 12px;
  color: var(--secondary, #999);
  line-height: 1.2;
}

.k-chat__switch {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  color: var(--primary, #0a0a0a);
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--fast, 150ms ease);
}
@media (hover: hover) {
  .k-chat__switch:hover {
    border-color: var(--border-hover, rgba(0,0,0,0.18));
    color: var(--accent-dark, #8a8279);
  }
}

/* ───── Лента сообщений ───── */
.k-chat__feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* iOS: явно разрешаем вертикальный pan-скролл внутри fixed-родителя.
     Без этого тач-движения иногда «проваливаются» на body (rubber-band). */
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-soft, #f5f5f3);
}
@media (min-width: 768px) {
  .k-chat__feed { padding: 24px; gap: 16px; }
}

.msg {
  max-width: 82%;
  padding: 12px 16px;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.msg--ai {
  align-self: flex-start;
  background: #fff;
  color: var(--primary, #0a0a0a);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.msg--user {
  align-self: flex-end;
  background: var(--accent, #b8b0a4);
  color: #fff;
}

/* Typing-индикатор */
.msg--typing { padding: 16px 20px; }
.msg__typing {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.msg__typing > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #b8b0a4);
  opacity: 0.3;
  animation: k-typing-pulse 1.2s infinite ease-in-out;
}
.msg__typing > span:nth-child(2) { animation-delay: 0.15s; }
.msg__typing > span:nth-child(3) { animation-delay: 0.3s; }

@keyframes k-typing-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40%           { opacity: 1;   transform: scale(1); }
}

/* Streaming-стили удалены 2026-04-24 вместе с откатом streaming на клиенте
   (классы .msg--streaming / .msg--stream-typing / .msg-cards-holder больше
   не назначаются). При возврате streaming восстановить из git-истории. */

/* ───── Чипы-подсказки ───── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
}

/* v3.5.3 — филигранное визуальное разделение chips от реплики AI.
   Когда chips идут сразу после msg--ai (новый порядок «карточки → текст → chips»),
   добавляем hairline + небольшой воздух сверху. Hairline очень светлый (6% чёрного),
   без заливки и без изменения самих чипсов — ощущение «зоны действий», не гротеск. */
.msg--ai + .chips {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  align-self: stretch; /* hairline растягивается по ширине ленты, а не по ширине чипсов */
}

/* v3.0 (2026-04-27) — новый стиль чипов: лёгкий тёплый бежевый фон + стрелочка
   справа + микро-shift при hover. Цель — визуально отличить чипы (выбор-клик)
   от текста реплики AI. Камертон AK сохранён: нейтральная тёплая палитра,
   тонкие линии, без яркости. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px 8px 16px;
  background: #f7f3ed; /* тёплый бежевый под бренд (тёплая бумага) */
  border: 1px solid #d4ccc0;
  color: #1a1a1a;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background var(--fast, 150ms ease),
    border-color var(--fast, 150ms ease),
    color var(--fast, 150ms ease),
    transform var(--fast, 150ms ease);
}
/* Тонкая стрелочка справа — визуальный сигнал «это выбор, кликабельно» */
.chip::after {
  content: '→';
  font-size: 13px;
  color: #999;
  margin-left: 2px;
  transition: color var(--fast, 150ms ease), transform var(--fast, 150ms ease);
}
@media (hover: hover) {
  .chip:hover {
    background: #efe8db;
    border-color: #0a0a0a;
    color: #0a0a0a;
    transform: translateX(2px);
  }
  .chip:hover::after {
    color: #0a0a0a;
    transform: translateX(2px);
  }
}
.chip:active {
  transform: translateX(2px) scale(0.98);
}

/* v3.0 (2026-04-27) — подсказка «можете писать сами своими словами».
   Цель — показать клиенту что чат принимает свободный текст, не только клики
   по чипам. Анализ 158 сессий показал, что многие клиенты только тыкают чипы
   и не пробуют сформулировать вопрос своими словами.
   Стиль — мелко, серо, italic. Не привлекает к себе внимания, но видно. */
.msg-self-hint {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 8px;
  padding: 0 4px;
  color: #999;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.01em;
  user-select: none;
}
/* Floating-вариант: появляется снизу под последней репликой при бездействии 30+ сек.
   Мягкий fade-in, через 12 сек fade-out (см. app.js scheduleIdleHint). */
.msg-self-hint--floating {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(247, 243, 237, 0.7); /* тот же тёплый бежевый, прозрачный */
  border: 1px dashed rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  animation: selfHintFadeIn 400ms ease-out both;
}
.msg-self-hint--fading {
  animation: selfHintFadeOut 600ms ease-out both;
}
@keyframes selfHintFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes selfHintFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-2px); }
}

/* ───── Карточка аромата в чате (v3.4 — эскиз: крупное фото слева, равные отступы, табы в ряд) ───── */
.frag-card {
  position: relative; /* v3.5 — якорь для .frag-card__hint (лупа в правом верхнем углу всей карточки) */
  display: flex;
  gap: 16px;
  align-items: center; /* равные отступы фото сверху/снизу при коротком контенте */
  align-self: flex-start;
  background: #fff;
  padding: 16px;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  max-width: 92%;
  width: 360px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
@media (hover: hover) {
  .frag-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
}
.frag-card:focus-visible {
  outline: 2px solid var(--primary, #0a0a0a);
  outline-offset: 2px;
}
@media (max-width: 420px) {
  .frag-card { width: 100%; }
  /* v3.6.1 — после отката второй кнопки в actions осталась одна.
     Дополнительные правила (column, width:100%) не нужны — кнопка и так растягивается
     через flex: 1 1 0 в .frag-card__btn. */
}

.frag-card__img {
  /* v3.5.1 — убрана «плитка»: padding/box-shadow/transition/hover-эффекты сняты.
     Картинка стоит на белом фоне карточки как единый блок, без отдельной обводки и тени.
     v3.8 — пропорциональное фото: ~40% ширины карточки, квадрат 1:1 (как левая колонка
     страницы товара antonelliki.ru/aromaty/<seo>/, где .product-top — grid 1fr|1fr).
     В чате правая колонка плотнее (название + табы + цена/кнопка), поэтому фото
     уже половины — 40% выглядит сбалансированно, отступы вокруг фото симметричные
     (16px паддинг карточки + align-items:center у .frag-card). */
  flex: 0 0 40%;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  min-height: 140px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.frag-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
@media (max-width: 420px) {
  /* На узких экранах фото чуть уже (38%), чтобы правой колонке хватило места
     для цены+кнопки в одну строку. Квадрат 1:1 сохраняется. */
  .frag-card__img { flex-basis: 38%; }
}

/* v3.1 — иконка «быстрый просмотр» в углу картинки (v3.5 — top:8 / right:8, сетка 8) */
.frag-card__hint {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #0a0a0a);
  pointer-events: none;
  transition: background 150ms ease;
}
.frag-card__hint svg { width: 12px; height: 12px; }
@media (hover: hover) {
  .frag-card:hover .frag-card__hint { background: #fff; }
}

.frag-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* v3.4 — равные отступы сверху/снизу за счёт align-items:center у .frag-card.
     padding НЕ задаём тут — внешние отступы карточки = отступы фото (16px со всех сторон). */
}
/* v3.4 — верхний блок: имя + краткое описание */
.frag-card__top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* v3.5 — лупа .frag-card__hint висит в правом верхнем углу всей карточки;
     резервируем справа 28px (24 иконка + 4 воздух), чтобы длинный заголовок не уползал под неё */
  padding-right: 28px;
}
/* v3.4 — нижний блок: ряд объёмов + ряд цены/кнопки, без отделяющей линии сверху */
.frag-card__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* v3.4 — выбор объёма (табы) в карточке чата — СТРОГО в один ряд, без wrap */
.frag-card__volumes {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}
.frag-card__vol {
  flex: 1 1 0; /* равная ширина, сжимаются чтобы все 4 поместились в ряд */
  min-width: 0;
  padding: 4px 4px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  background: #fff;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 11px;
  color: var(--primary, #0a0a0a);
  cursor: pointer;
  min-height: 28px;
  white-space: nowrap;
  text-align: center;
  touch-action: manipulation;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.frag-card__vol.is-active {
  background: var(--primary, #0a0a0a);
  color: #fff;
  border-color: var(--primary, #0a0a0a);
}
/* v3.8 — ряд «цена слева + кнопка справа» (паттерн страницы товара).
   ВСЕГДА в одну строку, без переноса — даже на 375px. Кнопка не растягивается
   на полную ширину. Если не помещаются — уменьшаем шрифт цены и кнопки в медиа-запросе,
   но никогда не переносим (см. ТЗ: «никогда не переносить кнопку на новую строку»). */
.frag-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}
.frag-card__name {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--primary, #0a0a0a);
  text-transform: uppercase;
  line-height: 1.25;
}
.frag-card__tagline {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #777);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* v3.7 — цена слева, крупно (как на странице товара).
   18px / weight 600 — крупнее обычного текста (12-14px), но без переутяжеления карточки.
   v3.8 — flex: 0 1 auto + min-width 0, чтобы не давила на кнопку и сама не переносилась
   (white-space: nowrap гарантирует что цена «2 250 ₽» останется одной строкой). */
.frag-card__price {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--primary, #0a0a0a);
  white-space: nowrap;
}

/* v3.8 — кнопка «В подбор» справа: одна строка текста, без цены внутри.
   Высота ≥44px (touch-target), компактная по ширине, НЕ растягивается на весь ряд
   (flex: 0 0 auto — не сжимается и не растягивается). */
.frag-card__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border: 0;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--fast, 150ms ease), color 150ms ease;
  min-height: 44px;
  white-space: nowrap;
  text-align: center;
}
/* Основная кнопка карточки — добавить выбранный объём в подбор.
   v3.9.2 — ширина жёстко зафиксирована (width вместо min-width). При смене
   текста «В ПОДБОР» (8 симв) → «✓ ДОБАВЛЕН» (9 симв) кнопка НЕ расширяется.
   Активное состояние (disabled): шрифт −1px и letter-spacing 0 чтобы
   «✓ ДОБАВЛЕН» гарантированно влез в ту же фиксированную ширину. */
.frag-card__btn--single {
  background: var(--primary, #0a0a0a);
  color: #fff;
  width: 100px;
}
@media (hover: hover) {
  .frag-card__btn--single:hover { background: var(--accent-dark, #333); }
}
.frag-card__btn--single:disabled {
  background: var(--accent, #b8b0a4);
  cursor: default;
  font-size: 11px;
  letter-spacing: 0;
}

/* v3.8 — ≤420px: цена и кнопка ОСТАЮТСЯ в одну строку (паттерн страницы товара).
   Сжимаем шрифт цены и паддинги кнопки, но НЕ переносим на новую строку. */
@media (max-width: 420px) {
  .frag-card__price-row {
    gap: 8px;
  }
  .frag-card__price {
    font-size: 16px;
  }
  .frag-card__btn--single {
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
    width: 92px;
  }
  .frag-card__btn--single:disabled {
    font-size: 10px;
    letter-spacing: 0;
  }
}
/* v3.8 — ≤360px (iPhone SE и подобные): дополнительно ужимаем кнопку,
   сохраняя одну строку. v3.9.2 — ширина зафиксирована (width), активное
   состояние ужимает шрифт ещё на 1px чтобы «✓ ДОБАВЛЕН» влез. */
@media (max-width: 360px) {
  .frag-card__price {
    font-size: 14px;
  }
  .frag-card__btn--single {
    padding: 8px 8px;
    font-size: 10px;
    letter-spacing: 0.02em;
    width: 84px;
  }
  .frag-card__btn--single:disabled {
    font-size: 9px;
    letter-spacing: 0;
  }
}

/* ───── Композер ───── */
.k-chat__composer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
  background: #fff;
  position: relative;
  z-index: var(--k-z-chat-sticky);
}

.k-chat__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  background: var(--bg-soft, #f5f5f3);
  color: var(--primary, #0a0a0a);
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 400;
  font-size: 16px; /* iOS не зумит */
  line-height: 1.3;
  outline: none;
  /* iOS: убираем 300ms-задержку на тапе по input + явно разрешаем focus-тач. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  /* iOS: убираем перехват тапов зум-стилем из mobile.css на input. */
  -webkit-user-select: text;
  user-select: text;
  transition: border-color var(--fast, 150ms ease), background var(--fast, 150ms ease);
}
.k-chat__input:focus {
  border-color: var(--accent, #b8b0a4);
  background: #fff;
}

.k-chat__send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--primary, #0a0a0a);
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--fast, 150ms ease);
}
@media (hover: hover) {
  .k-chat__send:hover { background: var(--accent-dark, #8a8279); }
}
.k-chat__send:disabled {
  background: var(--border, rgba(0,0,0,0.06));
  color: var(--muted, #777);
  cursor: default;
}

/* ───── Ошибки ───── */
.k-chat__error {
  align-self: center;
  max-width: 420px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  color: var(--primary, #0a0a0a);
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.k-chat__error p { margin: 0; }

/* ═══════════════════════════════════════════════════════
   4. MOBILE ADJUSTMENTS
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .k-chat__header { padding: 0 12px; }
  .k-chat__feed { padding: 12px; }
  .k-chat__composer { padding: 8px 12px max(8px, env(safe-area-inset-bottom)) 12px; }

  /* Touch-target 44×44 для чипов на мобилке (v3.0 — сохраняем правый padding под стрелочку) */
  .chip { min-height: 44px; padding: 10px 14px 10px 16px; font-size: 14px; }
  /* Подсказка «можете писать сами» — чуть крупнее на мобилке для читаемости */
  .msg-self-hint { font-size: 13px; padding: 0 8px; }
  .msg-self-hint--floating { padding: 10px 12px; }

  /* Пузырёк шире на узких экранах */
  .msg { max-width: 88%; }
}

/* ═══════════════════════════════════════════════════════
   5. BUNDLE-CARD — карточка собранного сета/бокса (v3.0)
   Появляется в чате после команды [ADD_SET3]/[ADD_BOX9]/[ADD_READY_BOX]
   ═══════════════════════════════════════════════════════ */

.bundle-card {
  align-self: flex-start;
  max-width: 92%;
  width: 420px;
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
@media (max-width: 420px) {
  .bundle-card { width: 100%; }
}

.bundle-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.bundle-card__mark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary, #0a0a0a);
  color: #fff;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 600;
}
.bundle-card__title {
  flex: 1;
  min-width: 0;
}
.bundle-card__type {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #777);
  margin-bottom: 4px;
}
.bundle-card__name {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--primary, #0a0a0a);
  line-height: 1.3;
  word-wrap: break-word;
}
.bundle-card__price {
  flex-shrink: 0;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--primary, #0a0a0a);
  white-space: nowrap;
}

/* v3.2 — 3 колонки в строке для set3, 3×3 grid для box9/ready_box */
.bundle-card__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bundle-card__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px;
  border: 0;
  background: transparent;
}
/* v3.5.3 — убраны окантовка/тень/зум у мини-картинок внутри bundle-card.
   Картинка стоит на белом фоне карточки бандла как единый блок, без визуального
   отделения — по аналогии с .frag-card__img (v3.5.1). Общий hover карточки бандла
   (если задан на .bundle-card) остаётся нетронутым. */
.bundle-card__item-img {
  width: 100%;
  aspect-ratio: 1;
  background: #fff; /* v3.3 — белый фон превью */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bundle-card__item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* v3.5 — имя аромата под мини-картинкой в bundle-card */
.bundle-card__item-name {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #666);
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* v3.4 — нейтральная подпись "3 аромата × 10 мл" (v3.5 — больше не рендерим в JS,
   класс оставлен для обратной совместимости со старым кэшем) */
.bundle-card__caption {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #777);
  text-align: center;
  margin-top: 4px;
}

/* v3.6 — крупное фото бандла (мешочек алькантары / коробка). Вставляется между шапкой и сеткой
   миниатюр. Когда bundle.image отсутствует (кастомная сборка) — JS не рендерит блок. */
.bundle-card__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bundle-card__hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* v3.6 — подпись из 3 строк под миниатюрами: «3 аромата по 10 мл / + мешочек … / + 3 мл подарка».
   Каждая строка отдельный <li>, маркер скрыт — список выбран ради семантики (перечисление
   составляющих сета). */
.bundle-card__details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bundle-card__detail {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--primary, #0a0a0a);
}

.bundle-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.bundle-card__btn {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  touch-action: manipulation;
  transition: background 150ms ease;
  min-height: 44px;
}
.bundle-card__btn--primary {
  background: var(--primary, #0a0a0a);
  color: #fff;
}
@media (hover: hover) {
  .bundle-card__btn--primary:hover { background: var(--accent-dark, #333); }
}
.bundle-card__btn--primary:disabled {
  background: var(--accent, #b8b0a4);
  cursor: default;
}
/* v3.4.4 — класс .bundle-card__btn--ghost удалён вместе с кнопкой «Открыть корзину». */

/* ═══════════════════════════════════════════════════════
   6. FRAG-MODAL — полная карточка аромата поверх чата (v3.0)
   Открывается при клике по .frag-card или мини-превью в .bundle-card
   ═══════════════════════════════════════════════════════ */

/* v3.4 — drawer-модалка:
   mobile (≤768px): fullscreen 100vw × 100dvh, overlay = panel
   desktop (≥769px): правый drawer 420px × 100dvh, слева затемнённый overlay
   Скролл — ВНУТРИ .frag-modal__content, а не на overlay, чтобы шапка (panel) не дёргалась. */
.frag-modal {
  position: fixed;
  inset: 0;
  z-index: var(--k-z-modal, 9999);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end; /* panel прижимается справа на десктопе */
  overflow: hidden; /* скролл не здесь, а внутри .frag-modal__content */
  animation: frag-modal-fade 200ms ease both;
}
@keyframes frag-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.frag-modal[aria-hidden="true"] { display: none; }

.frag-modal__panel {
  position: relative;
  background: #fff;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* скролл — в __content */
  animation: frag-modal-slide 250ms cubic-bezier(.2,.8,.2,1) both;
}
@media (min-width: 769px) {
  .frag-modal__panel {
    max-width: 420px;
    box-shadow: -8px 0 32px rgba(0,0,0,0.16);
  }
}
@keyframes frag-modal-slide {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* v3.4 — скроллящаяся область внутри drawer-а */
.frag-modal__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Крестик — абсолютен относительно panel (НЕ fixed относительно окна),
   остаётся на месте при скролле контента внутри panel, не вылезает на чат сзади */
.frag-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--primary, #0a0a0a);
  z-index: var(--k-z-modal-close, 10000);
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (hover: hover) {
  .frag-modal__close:hover { background: #fff; }
}

/* v3.2 — hero свободно раскрывается, скролл на уровне overlay */
.frag-modal__hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft, #f5f5f3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 32px 0;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .frag-modal__hero { padding: 16px 0; }
}
.frag-modal__hero img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* v3.2 — тело в fullscreen-модалке центрируется по ширине для читаемости */
.frag-modal__body {
  padding: 24px 16px;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .frag-modal__body { padding: 32px 24px; }
}
/* v3.4 — состояние загрузки (вместо инлайнового style=) */
.frag-modal__body--loading {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted, #999);
}

.frag-modal__group {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #777);
}
.frag-modal__name {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary, #0a0a0a);
  line-height: 1.1;
  margin: -8px 0 0 0;
}
.frag-modal__tagline {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  color: var(--muted, #666);
  line-height: 1.4;
}
.frag-modal__desc {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--primary, #0a0a0a);
  white-space: pre-line;
}

.frag-modal__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.frag-modal__notes-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.frag-modal__notes-label {
  flex-shrink: 0;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #777);
  min-width: 64px;
}
.frag-modal__notes-list {
  flex: 1;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 13px;
  color: var(--primary, #0a0a0a);
  line-height: 1.5;
}

.frag-modal__volumes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.frag-modal__volume {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,0.16));
  cursor: pointer;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary, #0a0a0a);
  touch-action: manipulation;
  min-height: 44px;
  transition: background 150ms ease, border-color 150ms ease;
}
@media (hover: hover) {
  .frag-modal__volume:hover { background: var(--bg-soft, #f5f5f3); }
}
.frag-modal__volume.is-active {
  background: var(--primary, #0a0a0a);
  color: #fff;
  border-color: var(--primary, #0a0a0a);
}
.frag-modal__volume:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.frag-modal__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.frag-modal__price {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--primary, #0a0a0a);
}
.frag-modal__add {
  padding: 16px 24px;
  background: var(--primary, #0a0a0a);
  color: #fff;
  border: 0;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 48px;
  transition: background 150ms ease;
}
@media (hover: hover) {
  .frag-modal__add:hover { background: var(--accent-dark, #333); }
}
.frag-modal__add:disabled {
  background: var(--accent, #b8b0a4);
  cursor: default;
}

body.frag-modal-open { overflow: hidden; }

/* v3.4 — Scoped-переопределения .product-* ВНУТРИ drawer-модалки.
   product.css (страница товара) построен на десктоп grid 1fr 1fr с .product-photo img { position:absolute; height:100% }.
   В узком drawer 420px и на мобилке 375px это ломает layout: фото без высоты или 50% ширины,
   описание и характеристики наползают друг на друга. Здесь — одна колонка mobile-first. */
.frag-modal__panel .product-page {
  padding: 0 0 24px;
}
.frag-modal__panel .product-h1 {
  padding: 16px 16px 8px;
  font-size: 24px;
  line-height: 1.2;
}
/* Одна колонка: фото сверху, инфо снизу */
.frag-modal__panel .product-top {
  display: block;
  grid-template-columns: none;
  padding: 0 16px;
}
.frag-modal__panel .product-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff; /* v3.5 — белый фон как в .frag-card__img */
  overflow: hidden;
  margin-bottom: 16px;
}
.frag-modal__panel .product-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  background: #fff; /* v3.5 — белый фон за прозрачными краями картинки */
  transform: none;
  left: 0;
  top: 0;
}
.frag-modal__panel .product-photo__placeholder {
  width: 100%;
  height: 100%;
}
.frag-modal__panel .product-info {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}
.frag-modal__panel .product-price-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.frag-modal__panel .product-price {
  font-size: 28px;
  justify-content: flex-start;
}
.frag-modal__panel .product-name-block {
  justify-self: flex-start;
  align-self: flex-start;
  text-align: left;
}
.frag-modal__panel .product-name {
  font-size: 22px;
  letter-spacing: 1px;
}
.frag-modal__panel .product-brand {
  margin-top: 4px;
}
.frag-modal__panel .product-mood {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted, #777);
  line-height: 1.4;
}
.frag-modal__panel .product-volumes-label {
  margin-top: 8px;
  margin-bottom: 8px;
}
.frag-modal__panel .product-volumes {
  gap: 8px;
  margin-bottom: 12px;
}
/* .product-btn в product.css имеет margin-bottom: 8px — оставляем */
.frag-modal__panel .product-sections {
  margin-top: 24px;
  padding: 0 16px;
}
.frag-modal__panel .product-section { margin-bottom: 24px; }
.frag-modal__panel .product-description {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--primary, #0a0a0a);
  white-space: pre-line;
}
.frag-modal__panel .product-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.frag-modal__panel .spec-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}
.frag-modal__panel .spec-row-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #777);
}
.frag-modal__panel .spec-row-value {
  font-size: 13px;
  color: var(--primary, #0a0a0a);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   7. SPEAKER-LABEL — подпись с мини-аватаром над репликой AI (v3.0)
   ═══════════════════════════════════════════════════════ */

.speaker-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 4px;
  align-self: flex-start;
}
.speaker-label:first-child {
  margin-top: 0; /* Первая подпись в пустой ленте — без отступа сверху */
}

.speaker-label__avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.speaker-label__text {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 400;
  font-size: 13px;
  color: var(--muted, #777);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════
   v3.5 — Подтверждение действия с корзиной (cart_action)
   Системное сообщение в ленте чата: AI отдал команду,
   мы применили — показываем компактный подтверждающий
   ряд с возможностью «Отменить».
   ═══════════════════════════════════════════════════════ */
.chat-cart-confirm {
  align-self: center;
  max-width: 92%;
  margin: 8px auto;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #777);
  text-align: center;
}

.chat-cart-confirm__text {
  font-weight: 400;
  color: var(--muted, #777);
}

.chat-cart-confirm__undo {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0 2px;
  margin: 0;
  font: inherit;
  font-size: 12px;
  color: var(--primary, #8b6f47);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: opacity 120ms ease;
}
@media (hover: hover) {
  .chat-cart-confirm__undo:hover { opacity: 0.75; }
}
.chat-cart-confirm__undo:disabled {
  opacity: 0.4;
  cursor: default;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════
   8. PRO-UNAVAILABLE MODAL (v3.6) — «Валерия занята»
   Открывается из app.js openProUnavailableModal() когда бэкенд
   возвращает pro_unavailable:true в ответе на /session/start или /chat.
   Две кнопки: «Подождать Валерию» и «Перейти к Соне».
   ═══════════════════════════════════════════════════════ */
.k-pro-unavailable-modal {
  position: fixed;
  inset: 0;
  z-index: var(--k-z-modal, 9999);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  animation: k-pu-fade 200ms ease both;
}
@keyframes k-pu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.k-pro-unavailable-modal__panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
  width: 100%;
  max-width: 440px;
  padding: 24px;
  box-sizing: border-box;
  animation: k-pu-slide 250ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes k-pu-slide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 768px) {
  .k-pro-unavailable-modal__panel { padding: 32px; }
}

.k-pro-unavailable-modal__title {
  font-family: var(--font-heading, 'Poiret One', serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--primary, #0a0a0a);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.k-pro-unavailable-modal__text {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--primary, #0a0a0a);
  margin: 0 0 24px 0;
}

.k-pro-unavailable-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 480px) {
  .k-pro-unavailable-modal__actions {
    flex-direction: row;
    gap: 8px;
  }
}

.k-pro-unavailable-modal__btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 12px 16px;
  min-height: 44px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  touch-action: manipulation;
  text-align: center;
}
@media (min-width: 480px) {
  .k-pro-unavailable-modal__btn {
    flex: 1 1 0;
  }
}

.k-pro-unavailable-modal__btn--ghost {
  background: #fff;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.16));
  color: var(--primary, #0a0a0a);
}
@media (hover: hover) {
  .k-pro-unavailable-modal__btn--ghost:hover {
    background: var(--bg-soft, #f5f5f3);
    border-color: var(--primary, #0a0a0a);
  }
}

.k-pro-unavailable-modal__btn--primary {
  background: var(--primary, #0a0a0a);
  border: 1px solid var(--primary, #0a0a0a);
  color: #fff;
}
@media (hover: hover) {
  .k-pro-unavailable-modal__btn--primary:hover {
    background: var(--accent-dark, #333);
    border-color: var(--accent-dark, #333);
  }
}