/* Главная — карточка чата первого экрана (Home v7, наряд «Дизайн-16»).
   Геометрия карточки — принятые классы .chat/.chip/.chat__who/.chat__bubble/
   .chat__answer/.chat__row/.chat__num/.chat__bar (components.css, не меняются).
   Здесь — только новое: лента меток с фейдом (.gw-chat__rail/__track/__more),
   пилюля строки 3 (.gw-chat .chat__slot) и анимация «один раз» (.gw-chat.is-playing).
   Все цвета/радиусы/шрифт — из tokens.css. */

:root{--gw-ease:cubic-bezier(.22,1,.36,1)}

/* Лента меток имеет max-content внутри — не даём ей раздувать сетку первого экрана */
.hero__visual,.gw-chat{min-width:0}

/* ---------- Геометрия карточки по макетам Home v7 (наряд «Дизайн-17») ----------
   Замеры из `_incoming/Мелк_прав_главн/Правка_Главн_ани/Home v7 - *.svg`:
   Д/П карточка 330×336, поля 15; Т карточка 350×328,5 → 329, поля 15
   (целое число, чтобы страница ниже первого экрана сдвинулась ровно на 36 px).
   Внутри: лента меток 30/32, «Клиент» 17+16, пузырь 7+78 (Т 7+75),
   ответ 16+142 (Т 15+136,6). Сумма с полями даёт высоту макета. */
.gw-chat{max-width:330px;padding:15px}
@media (max-width:767px){.gw-chat{max-width:none;padding:15px}}

/* ---------- Положение по вертикали (наряд «Дизайн-17б») ----------
   В макете Home v7 карточка держит верхний край v5 и укорачивается снизу.
   У принятого `.hero__visual .chat{align-self:center}` верх зависит от высоты
   карточки: для v5 (377 px) центр в фото 560 px давал верх 91,5 px от фото —
   с укороченной v7-карточкой (336 px) центрирование даёт верх 112 px, т.е.
   на 20,5 px ниже макета. Фиксируем тот же верх 91,5 px, что был у v5
   (замер рендера тега home-accepted-2026-10-12, 1440 и 768 — число совпадает).
   На ≤767 фото скрыто, карточка — единственный элемент сетки, центрирование
   там не влияет на положение — не трогаем. */
@media (min-width:768px){.hero__visual .gw-chat{align-self:start;margin-top:91.5px}}

/* Пузырь вопроса: 244×78 (Д/П), 251×74,8 (Т). Строки 17/24 — шаг строк в макете
   Home v7 23,8 px (у принятого .chat__bubble 17/21, здесь только в скоупе карточки).
   Угол у «хвоста» (правый нижний) 6 — как у .bubble-q--chat. */
.gw-chat .chat__bubble{line-height:24px;padding:15px 19px;border-radius:22px 22px 6px 22px}
@media (max-width:767px){.gw-chat .chat__bubble{padding:13.5px 18.5px}}   /* пузырь 251×75 */

/* Ответ нейросети: 300×142 (Д/П), 320×136,6 (Т); кружок — полоса 8;
   шаг строк 40 (Т 38,3), до пилюли строки 3 — 10 (Т 9). */
.gw-chat .chat__answer{padding:18px 10px 14px}
.gw-chat .chat__row{gap:8px}
@media (max-width:767px){
  .gw-chat .chat__answer{padding:17px 10px 14px}   /* ответ 320×137 */
  .gw-chat .chat__bar{width:181px}
  .gw-chat .chat__bar--2{width:138px}
}

/* ---------- Лента меток нейросетей: обрезка + фейд справа ---------- */
.gw-chat__chips{display:flex;align-items:center;gap:2px}
.gw-chat__rail{flex:1 1 auto;min-width:0;overflow:hidden;padding:6px 0;margin:-6px 0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%)}
.gw-chat__track{display:flex;gap:6px;width:max-content}
/* «+7» в макете — обычная метка с белой обводкой 2 px: она перекрывает край
   ленты, поэтому обрезанная метка под ней уходит не в белое, а под обводку. */
.gw-chat__more{position:relative;flex:0 0 auto;z-index:1;box-shadow:0 0 0 2px var(--bg)}
.gw-chat__more-a,.gw-chat__more-b{display:block}
.gw-chat__more-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}

/* ---------- Строка 3 «Ваш бренд в этом списке?»: пилюля вместо пунктирной кнопки ---------- */
.gw-chat .chat__slot{
  border:none;background:var(--bg);color:var(--blue);
  border-radius:var(--r-xs);margin-top:0;padding:6px 14px 10px;
  width:fit-content;justify-content:flex-start;gap:0;
  font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;letter-spacing:0;
}
.gw-chat .chat__slot::after{display:none}
.gw-chat .chat__row:last-child{margin-top:10px}
@media (max-width:767px){
  .gw-chat .chat__slot{padding:6px 14px 9px}      /* пилюля 226×35,1 в макете 390 */
  .gw-chat .chat__row:last-child{margin-top:9px}
}

/* ---------- Анимация (только когда JS добавил .is-ready; до этого — финальный вид) ---------- */
.gw-chat.is-ready .chat__bubble i,
.gw-chat.is-ready .chat__row{opacity:0}

.chat__bubble i{font-style:normal}
.gw-chat.is-playing .chat__bubble i{animation:gw-char .3s var(--gw-ease) both}
@keyframes gw-char{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}

.gw-chat.is-playing .chat__row{animation:gw-up .7s var(--gw-ease) both}
@keyframes gw-up{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}

.gw-chat.is-playing [data-gw-wave]{animation:gw-wave .75s cubic-bezier(.37,0,.63,1) both;animation-delay:var(--w1,0ms)}
@keyframes gw-wave{0%,100%{transform:none;background:var(--bg-soft);color:var(--ink)}40%{transform:translateY(-5px);background:var(--blue-tint);color:var(--blue)}}

.gw-chat .chat__slot{transform-origin:left center}
.gw-chat.is-playing .chat__row:last-child .chat__slot{
  animation:gw-slot .8s var(--gw-ease) both, gw-slot-wave .85s cubic-bezier(.37,0,.63,1);
  animation-delay:var(--gw-slot-delay,0ms), var(--gw-slot-wave,0ms);
}
@keyframes gw-slot{from{transform:scale(.96);filter:blur(4px)}to{transform:none;filter:blur(0)}}
@keyframes gw-slot-wave{0%,100%{transform:none;box-shadow:0 0 0 rgba(10,92,255,0)}45%{transform:translateY(-4px);box-shadow:0 8px 18px rgba(10,92,255,.22)}}

@property --gw-fade-l{syntax:'<length>';inherits:true;initial-value:0px}
.gw-chat.is-playing .gw-chat__track{animation:gw-slide 2.6s cubic-bezier(.65,0,.35,1) both;animation-delay:var(--gw-slide-delay,0ms)}
@keyframes gw-slide{to{transform:translateX(var(--gw-slide-x,0px))}}
.gw-chat.is-playing .gw-chat__more-a{animation:gw-out .5s ease both;animation-delay:var(--gw-count-delay,0ms)}
.gw-chat.is-playing .gw-chat__more-b{animation:gw-in .5s ease both;animation-delay:var(--gw-count-delay,0ms)}
@keyframes gw-out{to{opacity:0}}
@keyframes gw-in{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .gw-chat.is-ready .chat__bubble i,
  .gw-chat.is-ready .chat__row{opacity:1}
  .gw-chat .chat__bubble i,
  .gw-chat .chat__row,
  .gw-chat .chat__slot,
  .gw-chat [data-gw-wave],
  .gw-chat .gw-chat__track,
  .gw-chat .gw-chat__more-a,
  .gw-chat .gw-chat__more-b{animation:none!important}
}