/* ============================================================
   ЧТО ДЕЛАЕТ БОТ — ЛЕНТА ПЕРЕПИСОК (30.09.2026)
   Лента выходит за правый край (начало — по сетке страницы, конец —
   в край окна). Карточка — «экран чата»: шапка сценария, реплики, итог.
   Полоса снизу показывает, сколько пролистано.
   ============================================================ */
.bs{ overflow-x:clip; }
.bs__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.bs__arrows{ display:flex; gap:8px; flex:none; }
.bs__arr{
  display:grid; place-items:center; width:46px; height:46px; border-radius:4px;
  border:1px solid var(--line); background:#fff; color:var(--fg); cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.bs__arr:hover{ border-color:var(--accent-1); color:var(--accent-1); }
.bs__arr:disabled{ opacity:.35; cursor:default; }
.bs__arr svg{ width:14px; height:14px; }
.bs__arr:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }

.bs__track{
  display:flex; gap:clamp(14px, 1.4vw, 22px);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:6px 0 26px;
  padding-inline:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  scroll-padding-inline:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  cursor:grab;
}
.bs__track::-webkit-scrollbar{ display:none; }
.bs__track.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.bs__track.is-drag *{ user-select:none; }
.bs__track:focus-visible{ outline:2px solid var(--accent-1); outline-offset:-2px; }
.bs__end{ flex:0 0 1px; }

.bs__card{
  flex:0 0 clamp(270px, 24vw, 340px);
  display:flex; flex-direction:column;
  min-height:clamp(330px, 30vw, 400px);
  border-radius:20px; overflow:hidden;
  background:
    radial-gradient(rgba(20,40,60,.07) 1px, transparent 1.4px) 0 0 / 14px 14px,
    #eef2f1;
  border:1px solid rgba(20,40,60,.08);
  scroll-snap-align:start;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.bs__card:hover{ box-shadow:0 18px 40px -22px rgba(13,30,40,.4); }
.bs__top{
  display:flex; align-items:baseline; gap:10px;
  padding:14px 16px; background:#fff; border-bottom:1px solid rgba(20,40,60,.08);
  font:600 15px/1.2 var(--font); color:var(--fg);
}
.bs__n{ font:500 11.5px/1 var(--font-mono); color:var(--accent-1); letter-spacing:.06em; }
.bs__chat{ flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; padding:14px 12px; }
.bs__m{ margin:0; max-width:84%; padding:9px 12px; border-radius:15px; font-size:13.5px; line-height:1.4; box-shadow:0 1px 1px rgba(0,0,0,.05); }
.bs__m--b{ align-self:flex-start; background:#fff; color:#16202a; border-bottom-left-radius:5px; }
.bs__m--u{ align-self:flex-end; background:var(--accent-1); color:#fff; border-bottom-right-radius:5px; }
.bs__k{ margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.bs__k span{ padding:7px 10px; border-radius:4px; background:#fff; border:1px solid rgba(20,40,60,.14); font:600 12.5px/1 var(--font); color:#1b2733; }
.bs__res{
  display:flex; gap:8px; align-items:baseline;
  margin:0 12px 12px; padding:11px 12px; border-radius:6px;
  background:#16202a; color:#fff; font:600 13px/1.35 var(--font);
}
.bs__res span{ color:var(--accent-2); }

/* реплики набираются при появлении карточки: каждая по очереди (задержка --d ставит скрипт) */
.bs.is-live [data-s]{ opacity:0; transform:translateY(8px); }
.bs.is-live .bs__card.is-seen [data-s]{
  opacity:1; transform:none;
  transition:opacity .25s cubic-bezier(.2,.8,.2,1) var(--d, 0s), transform .25s cubic-bezier(.2,.8,.2,1) var(--d, 0s);
}
.bs.is-live .bs__res{ opacity:.25; transition:opacity .3s; }
.bs.is-live .bs__card.is-seen .bs__res{ opacity:1; transition-delay:var(--dr, .8s); }

.bs__bar{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.bs__bar i{ display:block; height:100%; width:var(--w, 20%); background:var(--accent-1); transform:translateX(var(--x, 0)); transition:transform .15s linear; }

@media (max-width: 640px){ .bs__arrows{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .bs.is-live [data-s], .bs.is-live .bs__res{ opacity:1; transform:none; }
}

/* 30.09.2026 (2): стеклянный предмет сценария в шапке карточки (scenes[].img) */
.bs__top{ position:relative; min-height:52px; padding-right:86px; }
.bs__art{
  position:absolute; right:6px; top:50%; width:84px; translate:0 -50%;
  mix-blend-mode:multiply; pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.bs__card:hover .bs__art{ transform:translateY(-4px) rotate(-4deg) scale(1.06); }