/* ============================================================
   ЖИВОЕ ДЕМО — КРУГОВАЯ ВИТРИНА (28.09.2026)
   Три окна на одном круге. Положение, масштаб, прозрачность и порядок
   наложения каждого окна пишет ai-play.js (translate/scale, --d — глубина
   0…1). Здесь — сцена, окно, навигация и содержимое сценариев.
   Цвет — акцент направления; таблеток нет: радиусы 3–4px.
   ============================================================ */
/* обод колеса: большая окружность, верх которой проходит через центры окон */
.play__arc{
  position:absolute; left:50%; top:calc(16px + clamp(200px, 15vw, 250px));
  border-radius:50%;
  border:1.5px dashed rgba(var(--accent-rgb), .5);
  pointer-events:none;
}
.play__arc::before{                  /* второй, сплошной обод чуть шире — глубина */
  content:""; position:absolute; inset:-22px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb), .2);
}
.play__stage{
  /* вращение перетаскиванием (ai-play.js): рука-курсор, вертикальный жест на телефоне —
     прокрутка страницы, выделение текста при протяжке выключено */
  cursor:grab;
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  position:relative;
  height:clamp(560px, 43vw, 660px);
  margin-inline:calc(var(--gutter, 24px) * -1);     /* боковым окнам есть куда уйти */
  overflow:hidden;
  /* края витрины растворяются — боковые окна уходят «за круг» */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.play__win{
  position:absolute; left:50%; top:16px;
  width:min(780px, 60%);
  margin-left:calc(min(780px, 60%) / -2);
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface);
  /* тень компактная: большая мягкая тень при наклоне окна ложилась клином на полвитрины */
  box-shadow:0 2px 6px rgba(13,15,32,.06), 0 16px 34px -18px rgba(var(--accent-rgb), .32);
  overflow:hidden;
  transform-origin:50% 50%;
  will-change:transform;
  cursor:pointer;
}
.play__win.is-front{ cursor:inherit; }
.play__stage.is-drag, .play__stage.is-drag *{ cursor:grabbing !important; }
/* заднее окно приглушено и не ловит нажатия внутри — только целиком (поворот к нему) */
.play__win:not(.is-front) .play__body{ pointer-events:none; }
.play__win::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:rgba(250,250,253,var(--veil, 0));
}

.play__top{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #fbfbfd, #f6f6fa);
}
.play__dots{ display:flex; gap:6px; }
.play__dots i{ width:10px; height:10px; border-radius:50%; background:#dcdce4; }
.play__title{ flex:1; font-size:13px; font-weight:600; color:var(--fg-lead); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.play__status{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--accent-1); white-space:nowrap; opacity:0; transition:opacity .3s var(--ease); }
.play__win.is-front .play__status{ opacity:1; }
.play__status i{ width:7px; height:7px; border-radius:50%; background:var(--accent-1); animation:play-pulse 1.8s ease-out infinite; }
@keyframes play-pulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb), .5); } 100%{ box-shadow:0 0 0 9px rgba(var(--accent-rgb), 0); } }

.play__body{ height:clamp(360px, 27vw, 430px); padding:clamp(18px, 1.8vw, 28px); overflow:hidden; }

/* ---- навигация под витриной ---- */
.play__nav{ display:flex; align-items:center; justify-content:center; gap:clamp(10px, 1.4vw, 22px); margin-top:clamp(10px, 1.2vw, 18px); }
.play__arrow{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--accent-line); background:var(--surface); color:var(--accent-1); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.play__arrow svg{ width:20px; height:20px; }
.play__arrow:hover{ background:var(--accent-1); border-color:var(--accent-1); color:#fff; }
.play__list{ list-style:none; margin:0; padding:0; display:flex; gap:8px; }
.play__tab{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:11px 14px 14px;
  border:1px solid var(--line); border-radius:4px;
  background:var(--surface); color:var(--fg);
  font:inherit; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.play__n{ padding:4px 7px; border-radius:3px; background:var(--surface-2); color:var(--fg-mute); font:600 11.5px/1 var(--font); letter-spacing:.06em; transition:background .25s var(--ease), color .25s var(--ease); }
.play__t{ font:600 14.5px/1.2 var(--font); white-space:nowrap; }
.play__bar{ position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:2px; background:var(--line); overflow:hidden; opacity:0; }
.play__bar i{ display:block; height:100%; width:0; background:var(--accent-1); }
.play__tab.is-on{ border-color:var(--accent-line); background:var(--accent-wash); }
.play__tab.is-on .play__n{ background:var(--accent-1); color:#fff; }
.play__tab.is-on .play__bar{ opacity:1; }
.play__tab.is-run .play__bar i{ animation:play-bar var(--dur, 8s) linear forwards; }
@keyframes play-bar{ to{ width:100%; } }
.play__tab:focus-visible, .play__arrow:focus-visible{ outline:2px solid var(--accent-1); outline-offset:3px; }
.play__note{ margin:clamp(12px, 1.2vw, 18px) auto 0; max-width:60ch; text-align:center; font-size:13px; line-height:1.5; color:var(--fg-mute); }

/* ---- 01: письмо и карточка ---- */
.scene--mail{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(14px, 1.6vw, 24px); }
.mail{ padding:clamp(14px, 1.2vw, 18px); border-radius:var(--r-inner); background:var(--surface-2); }
.mail__meta{ margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line); font:500 12px/1.4 ui-monospace, 'JetBrains Mono', Consolas, monospace; color:var(--fg-mute); }
.mail__text{ margin:0; font-size:clamp(13.5px, .98vw, 15.5px); line-height:1.7; color:var(--fg); }
.mail__text mark{ background:none; color:inherit; border-radius:3px; padding:0 2px; transition:background .35s var(--ease), box-shadow .35s var(--ease); }
.mail__text mark.is-lit{ background:rgba(var(--accent-rgb), .14); box-shadow:inset 0 -2px 0 var(--accent-1); }
.crm__cap{ margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute); }
.crm__rows{ margin:0; }
.crm__row{ display:grid; grid-template-columns:6.5em 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); opacity:.25; transform:translateX(6px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.crm__row.is-in{ opacity:1; transform:none; }
.crm__row dt{ font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); align-self:center; }
.crm__row dd{ margin:0; font-size:clamp(13.5px, .95vw, 15px); font-weight:600; color:var(--fg); }
.crm__hot{ display:inline-block; padding:3px 8px; border-radius:3px; background:var(--accent-1); color:#fff; font-size:12px; }

/* ---- 02: ассистент ---- */
.ask2__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(14px, 1.4vw, 22px); }
.ask2__chip{
  padding:9px 13px; border:1px solid var(--accent-line); border-radius:4px;
  background:var(--surface); font:500 13.5px/1.3 var(--font); color:var(--fg); cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.ask2__chip:hover{ border-color:var(--accent-1); color:var(--accent-1); }
.ask2__chip.is-on{ background:var(--accent-1); border-color:var(--accent-1); color:#fff; }
.ask2__thread{ display:grid; gap:12px; }
.ask2__q{ justify-self:end; max-width:80%; margin:0; padding:10px 14px; border-radius:var(--r-inner) var(--r-inner) 3px var(--r-inner); background:var(--surface-2); font-size:15px; color:var(--fg); }
.ask2__q:empty, .ask2__a:has(.ask2__text:empty){ visibility:hidden; }
.ask2__a{ max-width:90%; padding:14px 16px; border-radius:var(--r-inner) var(--r-inner) var(--r-inner) 3px; border:1px solid var(--accent-line); background:var(--accent-wash); }
.ask2__text{ margin:0; font-size:clamp(14px, 1vw, 15.5px); line-height:1.6; color:var(--fg); }
.ask2__text.is-typing::after{ content:"▍"; color:var(--accent-1); animation:play-caret .8s steps(1) infinite; }
@keyframes play-caret{ 50%{ opacity:0; } }
.ask2__src{ margin:10px 0 0; font:500 12.5px/1.4 ui-monospace, 'JetBrains Mono', Consolas, monospace; color:var(--accent-1); }
.ask2__src:empty{ display:none; }
.ask2__src.is-none{ color:#b54708; }

/* ---- 03: чат ---- */
.chat2{ display:grid; gap:9px; }
.chat2__msg{ max-width:80%; margin:0; padding:9px 13px; font-size:clamp(13.5px, .98vw, 15px); line-height:1.5; opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.chat2__msg.is-in, .chat2__hand.is-in{ opacity:1; transform:none; }
.chat2__msg--them{ justify-self:start; border-radius:var(--r-inner) var(--r-inner) var(--r-inner) 3px; background:var(--surface-2); color:var(--fg); }
.chat2__msg--bot{ justify-self:end; border-radius:var(--r-inner) var(--r-inner) 3px var(--r-inner); background:var(--accent-1); color:#fff; }
.chat2__typing{ justify-self:end; display:none; gap:4px; margin:0; padding:12px 14px; border-radius:var(--r-inner); background:rgba(var(--accent-rgb), .12); }
.chat2__typing.is-in{ display:flex; }
.chat2__typing i{ width:6px; height:6px; border-radius:50%; background:var(--accent-1); animation:play-dot 1s ease-in-out infinite; }
.chat2__typing i:nth-child(2){ animation-delay:.15s; } .chat2__typing i:nth-child(3){ animation-delay:.3s; }
@keyframes play-dot{ 50%{ transform:translateY(-4px); opacity:.5; } }
.chat2__hand{
  margin-top:4px; padding:11px 14px 11px 16px;
  border-left:3px solid var(--accent-1); border-radius:3px;
  background:var(--accent-wash); font-size:14px; line-height:1.5; color:var(--fg);
  opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.chat2__hand-cap{ display:block; margin-bottom:4px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-1); }

/* ---- 04–06: общий шаг «появляется по очереди» (data-seq → is-in) ---- */
.scene--two{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(14px, 1.6vw, 24px); }
[data-seq]:not(.crm__row){ opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
[data-seq].is-in{ opacity:1; transform:none; }
.tr__cap{ margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute); }
/* 04: расшифровка и чек-лист */
.tr{ display:grid; align-content:start; gap:6px; }
.tr__line{ margin:0; padding:7px 11px; border-radius:var(--r-inner); background:var(--surface-2); font-size:clamp(13px, .92vw, 14.5px); line-height:1.4; color:var(--fg); }
.tr__line b{ display:block; margin-bottom:1px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); }
.tr__line b.tr__inline{ display:inline; margin:0; }
.chk__list{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
.chk__item{ position:relative; padding-left:30px; font-size:clamp(13.5px, .95vw, 15px); line-height:1.4; color:var(--fg); }
.chk__item::before{ content:""; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:4px; }
.chk__item.is-ok::before{ background:var(--accent-1); }
.chk__item.is-no::before{ background:#fdecea; box-shadow:inset 0 0 0 1px #f3b8b1; }
.chk__item::after{ content:""; position:absolute; left:0; top:-1px; width:20px; height:20px; background:#fff;
  -webkit-mask:var(--ic) center/13px no-repeat; mask:var(--ic) center/13px no-repeat; }
.chk__item.is-ok{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.chk__item.is-no{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"); }
.chk__item.is-no::after{ background:#c0392b; }
.play__result{ margin:0; padding:11px 14px 11px 16px; border-left:3px solid var(--accent-1); border-radius:3px; background:var(--accent-wash); font-size:14px; line-height:1.45; color:var(--fg); }
.play__result b{ display:inline-block; margin-right:8px; padding:2px 7px; border-radius:3px; background:var(--accent-1); color:#fff; font-size:12px; }
/* 05: счёт */
.inv{ padding:clamp(14px, 1.2vw, 18px); border-radius:var(--r-inner); background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(13,15,32,.04); font-size:13px; color:var(--fg-lead); }
.inv__head{ margin:0 0 8px; font-weight:700; color:var(--fg); }
.inv__line{ margin:0 0 3px; }
.inv__tbl{ width:100%; margin:10px 0; border-collapse:collapse; font-size:12.5px; }
.inv__tbl td{ padding:6px 0; border-top:1px solid var(--line); }
.inv__tbl td:nth-child(2), .inv__tbl td:nth-child(3){ text-align:right; white-space:nowrap; padding-left:10px; }
.inv__sum{ margin:0; padding-top:8px; border-top:1px solid var(--fg); font-weight:700; color:var(--fg); }
.scene--two .crm .play__result{ margin-top:14px; }
/* 06: шаги агента и отчёт */
.log__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.log__list li{ position:relative; padding:8px 12px 8px 30px; border-radius:var(--r-inner); background:var(--surface-2); font-size:clamp(13.5px, .95vw, 15px); line-height:1.4; color:var(--fg); }
.log__list li::before{ content:""; position:absolute; left:11px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:2px; background:var(--accent-1); }
.log__list span{ display:block; font:500 11px/1.3 ui-monospace, 'JetBrains Mono', Consolas, monospace; color:var(--fg-mute); }
.rep{ align-self:start; padding:clamp(16px, 1.4vw, 22px); border-radius:var(--r-inner); background:linear-gradient(150deg, var(--accent-1), var(--accent-dark)); color:#fff; }
.rep__cap{ margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.rep__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:10px; margin-bottom:14px; }
.rep__grid p{ margin:0; font-size:12px; color:rgba(255,255,255,.8); }
.rep__grid b{ display:block; margin-bottom:2px; font:600 clamp(17px, 1.35vw, 22px)/1.1 var(--font); color:#fff; white-space:nowrap; }
.rep__alert{ margin:0; padding:10px 12px; border-radius:4px; background:rgba(255,255,255,.14); font-size:13.5px; line-height:1.45; }

/* ---- название текущего сценария под номерами ---- */
.play__name{ margin:12px 0 0; text-align:center; font:600 clamp(16px, 1.2vw, 19px)/1.3 var(--font); color:var(--fg); }

@media (prefers-reduced-motion:reduce){
  [data-seq]{ opacity:1 !important; transform:none !important; }
  .crm__row, .chat2__msg, .chat2__hand{ opacity:1; transform:none; transition:none; }
  .play__status i, .chat2__typing i{ animation:none; }
}
@media (max-width: 900px){
  .play__win{ width:84%; margin-left:-42%; }
  .scene--mail, .scene--two{ grid-template-columns:minmax(0, 1fr); }
  .play__list{ gap:5px; }
  .play__tab{ padding:9px 9px 12px; }
  /* в одну колонку письмо и карточка стоят друг под другом — окну нужна высота */
  .play__body{ height:clamp(620px, 175vw, 720px); }
  .play__stage{ height:clamp(720px, 200vw, 820px); }
  .play__arc{ top:calc(16px + clamp(330px, 90vw, 380px)); }
}

/* 29.09.2026: боковые окна колеса выходят за край — обрезаем секцией, иначе на 390 px страница уезжает вбок */
section.play{ overflow-x:clip; }