/* ============================================================
   МИНИ-СЦЕНЫ В КАРТОЧКАХ ЗАДАЧ (29.09.2026)
   Кадр «было → стало» над текстом карточки: кусок интерфейса в языке
   окон демо. Разметка — partials/task-scenes.html.
   Цикл 7 с, стартует, когда сетка вошла в кадр (.is-in). Задержки
   элементов — через --n. fill-mode both: до своей задержки элемент
   стоит в начальном кадре, а не мелькает готовым.
   Цвет — акцент направления (--accent-*), на главной — общий голубой.
   ============================================================ */
.tasks__grid--scenes .task{ min-height:0; }
.tasks__grid--scenes .task__tag{ margin-top:clamp(16px, 1.4vw, 22px); }

.ts{
  --cyc:7s;
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px;
  height:clamp(128px, 9.6vw, 150px);
  padding:14px;
  border-radius:calc(var(--r-card) - 6px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), 0) 60%),
    var(--accent-wash);
  border:1px solid rgba(var(--accent-rgb), .14);
  font:500 11.5px/1.35 var(--font);
  color:var(--fg);
  text-align:left;
}
.ts b{ display:block; font-weight:650; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-1); }
.ts em{ font-style:normal; }

/* стрелка «было → стало»: линия и бегущая по ней точка */
.ts-arr{
  position:relative; flex:0 0 28px; height:2px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb), .15), rgba(var(--accent-rgb), .6));
  border-radius:2px;
}
.ts-arr::after{
  content:""; position:absolute; top:50%; left:0;
  width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:var(--accent-1); box-shadow:0 0 8px rgba(var(--accent-rgb), .7);
  opacity:0;
}

/* белая «карточка программы» — общий вид правой части */
.ts-card, .ts-doc, .ts-chart, .ts-a{
  background:#fff;
  border:1px solid rgba(var(--accent-rgb), .16);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(var(--accent-rgb), .10);
}

/* --- 1. заявки → сделка ------------------------------------ */
.ts-stack{ display:grid; gap:6px; flex:0 0 auto; }
.ts-env{
  display:flex; align-items:center; gap:6px;
  padding:6px 8px; border-radius:6px;
  background:#fff; border:1px solid var(--line);
  white-space:nowrap; color:var(--fg-lead);
}
.ts-env i, .ts-file i{
  flex:0 0 auto; width:12px; height:9px; border-radius:2px;
  border:1.5px solid var(--accent-1);
  background:linear-gradient(155deg, transparent 45%, var(--accent-1) 46%, var(--accent-1) 54%, transparent 55%);
}
.ts-card{ flex:1; min-width:0; padding:9px 10px; display:grid; gap:5px; }
.ts-doc p.ts-ok span{ overflow:visible; }
.ts-card p, .ts-doc p{ display:flex; gap:8px; margin:0; white-space:nowrap; overflow:hidden; }
.ts-card p i{ flex:0 0 32px; font-style:normal; color:var(--fg-muted, #8a8f99); }
.ts-card p em{ overflow:hidden; text-overflow:ellipsis; }

/* --- 2. вопрос по документам -------------------------------- */
.ts--docs{ flex-direction:column; align-items:stretch; justify-content:center; gap:8px; }
.ts-q{
  align-self:flex-start; max-width:100%;
  padding:7px 10px; border-radius:6px;
  background:#fff; border:1px solid var(--line);
  white-space:nowrap; overflow:hidden;
}
.ts-type{ display:inline-block; clip-path:inset(0 100% 0 0); }
.ts-a{ padding:8px 10px; }
.ts-a p{ margin:0; }
.ts-src{
  display:inline-block; margin-top:6px;
  padding:3px 7px; border-radius:3px;
  background:var(--accent-1); color:#fff; font-size:10.5px; font-weight:600;
}

/* --- 3. чат, передача менеджеру ----------------------------- */
.ts--chat{ flex-direction:column; align-items:stretch; justify-content:center; gap:5px; }
.ts-b{
  margin:0; max-width:80%;
  padding:5px 9px; border-radius:8px;
  background:#fff; border:1px solid var(--line);
}
.ts-b--out{ align-self:flex-end; background:var(--accent-1); border-color:var(--accent-1); color:#fff; }
.ts-hand{
  margin:2px 0 0; align-self:center;
  padding:3px 8px; border-radius:3px;
  font-size:10.5px; font-weight:600; color:var(--accent-1);
  background:rgba(var(--accent-rgb), .12);
}

/* --- 4. счёт из письма → документ 1С ------------------------ */
.ts-file{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:7px 9px; border-radius:6px;
  background:#fff; border:1px solid var(--line); white-space:nowrap;
}
.ts-doc{ flex:1; min-width:0; padding:9px 10px; display:grid; gap:5px; }
.ts-doc p.ts-ok span{ overflow:visible; }
.ts-doc p{ justify-content:space-between; }
.ts-doc p span{ overflow:hidden; text-overflow:ellipsis; }
.ts-doc p em{ color:var(--fg-lead); }
.ts-ok span{ color:var(--accent-1); font-weight:600; }
.ts-ok span::before, .ts-list li::before{
  content:""; display:inline-block; width:9px; height:5px; margin:0 6px 2px 1px;
  border:solid currentColor; border-width:0 0 2px 2px; transform:rotate(-45deg);
}

/* --- 5. разбор звонка -------------------------------------- */
.ts--call{ flex-wrap:wrap; align-content:center; column-gap:14px; row-gap:8px; }
.ts-wave{ flex:1 1 40%; display:flex; align-items:center; gap:3px; height:44px; }
.ts-wave i{
  flex:1; height:100%; border-radius:2px;
  background:rgba(var(--accent-rgb), .55);
  transform:scaleY(var(--h));
}
.ts-list{ flex:1 1 45%; list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.ts-list li{ color:var(--accent-1); font-weight:600; white-space:nowrap; }
.ts-list li.ts-no{ color:#c0392b; }
.ts-list li.ts-no::before{ width:8px; height:8px; border:0; transform:none; margin-bottom:0;
  background:
    linear-gradient(45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%); }
.ts-score{
  flex:0 0 100%;
  justify-self:start; width:max-content;
  padding:3px 8px; border-radius:3px;
  background:var(--accent-1); color:#fff; font-size:10.5px; font-weight:600;
}

/* --- 6. отчёт из трёх систем ------------------------------- */
.ts-srcs{ flex:0 0 auto; display:grid; gap:6px; }
.ts-srcs span{
  padding:5px 9px; border-radius:4px; text-align:center;
  background:#fff; border:1px solid var(--line); font-weight:600;
}
.ts-chart{ flex:1; min-width:0; align-self:stretch; padding:9px 10px; display:flex; flex-direction:column; }
.ts-bars{ flex:1; display:flex; align-items:flex-end; gap:6px; padding-top:8px; }
.ts-bars i{
  flex:1; height:calc(var(--h) * 100%); border-radius:3px 3px 0 0;
  background:linear-gradient(to top, var(--accent-1), rgba(var(--accent-rgb), .45));
  transform-origin:bottom;
}

/* ============================ ДВИЖЕНИЕ ============================ */
@keyframes ts-leave{          /* исходники уходят в стрелку и возвращаются к новому кругу */
  0%, 22%  { opacity:1; transform:none; }
  34%, 90% { opacity:0; transform:translateX(26px); }
  100%     { opacity:1; transform:none; }
}
@keyframes ts-pop{            /* результат появляется по строке */
  0%, 36%  { opacity:0; transform:translateY(6px); }
  44%, 90% { opacity:1; transform:none; }
  97%,100% { opacity:0; transform:none; }
}
@keyframes ts-chat{           /* реплики — по очереди с начала круга */
  0%       { opacity:0; transform:translateY(8px); }
  6%, 86%  { opacity:1; transform:none; }
  94%,100% { opacity:0; transform:none; }
}
@keyframes ts-typing{
  0%, 4%   { clip-path:inset(0 100% 0 0); }
  30%, 92% { clip-path:inset(0 0 0 0); }
  100%     { clip-path:inset(0 100% 0 0); }
}
@keyframes ts-dot{
  0%, 20%  { opacity:0; left:0; }
  24%      { opacity:1; }
  36%      { opacity:1; left:calc(100% - 6px); }
  40%,100% { opacity:0; left:calc(100% - 6px); }
}
@keyframes ts-wave{ 0%,100%{ transform:scaleY(calc(var(--h) * .35)); } 50%{ transform:scaleY(var(--h)); } }
@keyframes ts-grow{
  0%, 36%  { transform:scaleY(0); }
  50%, 90% { transform:scaleY(1); }
  98%,100% { transform:scaleY(0); }
}

.js .tasks__grid--scenes .ts *{ animation-play-state:paused; }
.js .tasks__grid--scenes.is-in .ts *{ animation-play-state:running; }

.ts-arr::after{ animation:ts-dot var(--cyc) linear infinite; }
.ts-env, .ts-file, .ts-srcs span{ animation:ts-leave var(--cyc) var(--ease) infinite both; animation-delay:calc(var(--n, 0) * .18s); }
.ts-card p, .ts-doc p, .ts-list li, .ts-score{ animation:ts-pop var(--cyc) var(--ease) infinite both; animation-delay:calc(var(--n, 0) * .35s); }
.ts-score{ animation-delay:1.2s; }
.ts-type{ animation:ts-typing var(--cyc) steps(30, end) infinite both; }
.ts-a p{ animation:ts-pop var(--cyc) var(--ease) infinite both; }
.ts-src{ animation:ts-pop var(--cyc) var(--ease) infinite both; animation-delay:.6s; }
.ts-b, .ts-hand{ animation:ts-chat var(--cyc) var(--ease) infinite both; animation-delay:calc(var(--n) * 1.1s); }
.ts-wave i{ animation:ts-wave 1.3s ease-in-out infinite; animation-delay:calc(var(--n) * -.09s); }
.ts-bars i{ animation:ts-grow var(--cyc) var(--ease) infinite both; animation-delay:calc(var(--n) * .12s); }

@media (hover:hover) and (pointer:fine){
  .task:hover .ts{ border-color:rgba(var(--accent-rgb), .3); }
}
@media (prefers-reduced-motion:reduce){
  .ts *, .ts-arr::after{ animation:none !important; }
  .ts-type{ clip-path:none; }
}

/* ===== телефон: карточки со сценами — лентой вбок (29.09.2026) =====
   Шесть карточек с кадрами столбиком — почти три экрана прокрутки.
   Лентой — один экран, а соседняя карточка выглядывает справа и сама
   подсказывает, что дальше есть ещё. Только для сетки со сценами (страница ИИ). */
.tasks__swipe{ display:none; }
@media (max-width: 640px){
  .tasks__grid--scenes{
    display:flex; gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 8px;
    scrollbar-width:none;
  }
  .tasks__grid--scenes::-webkit-scrollbar{ display:none; }
  .tasks__grid--scenes .task{ flex:0 0 84%; scroll-snap-align:start; }
  .tasks__swipe{
    display:flex; align-items:center; gap:8px; margin:10px 0 0;
    font-size:13px; font-weight:600; color:var(--fg-mute);
  }
  .tasks__swipe::after{
    content:""; width:28px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, var(--accent-1), rgba(var(--accent-rgb), 0));
    animation:ts-swipe 1.8s var(--ease) infinite;
  }
}
@keyframes ts-swipe{ 0%,100%{ transform:translateX(0); opacity:.6; } 50%{ transform:translateX(8px); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .tasks__swipe::after{ animation:none; } }