/* ======================================================================
   works.css — живые превью в разделах UI, mobile, CRM и агентов.
   Переиспользует механику data-project из script.js; здесь только рамки.
   ====================================================================== */

/* --- UI: окно приложения с настоящим интерфейсом внутри ---------------- */

.tpl-ui-panel.ui-live {
  position: relative;
  height: clamp(380px, 44vw, 560px);
  padding: 0;
  overflow: hidden;
}

.ui-live-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a1120;
}

.ui-live-stage iframe {
  width: 1280px;
  height: 900px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;   /* внутрь — через «Исследовать», как в витрине */
}

.ui-live .preview-open {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
}

/* --- mobile: настоящая страница в рамке телефона ----------------------- */
/* Рамка 250×508; вёрстка внутри — честные 390px с CSS-масштабом 0.641. */

.tpl-phone-screen.phone-live {
  padding: 0;
  overflow: hidden;
}

/* Масштаб считает скрипт от фактического размера рамки: на широких
   мониторах телефон крупнее 250px, и жёсткий scale показывал полэкрана. */
.phone-live {
  position: relative;
  padding: 0 !important;   /* родной экран нёс padding 20/18 — iframe обрезался */
  gap: 0 !important;
  overflow: hidden;
}

.phone-live iframe {
  /* Экран телефона — flex-колонка, и iframe как flex-элемент сжимался
     по высоте до контейнера, глотая высоту от фиттера. flex: none обязателен. */
  flex: none;
  display: block;
  width: 390px;
  height: 793px;
  border: 0;
  transform-origin: 0 0;
  background: #0a1020;
}

/* Один телефон, ровно по центру: наклон шаблона и задний план убраны. */
.tpl-phone.tpl-phone-front {
  transform: none;
}

/* --- CRM: окно входа главное, справа демо-роли ------------------------- */

.tpl-crm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 330px);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.tpl-crm-live {
  position: relative;
  min-width: 0;
}

.tpl-crm-live .preview-stage {
  height: clamp(360px, 42vw, 540px);
}

.crm-demo-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(16px, 1.8vw, 24px);
  background: var(--tpl-panel);
  border: 1px solid var(--tpl-line);
}

.crm-demo-side h3 {
  margin: 0;
  font: 300 clamp(20px, 1.9vw, 26px) var(--display);
  line-height: 0.95;
}

.crm-demo-side > p {
  margin: 0 0 4px;
  color: #8fa3be;
  font-size: 13px;
  line-height: 1.5;
}

/* Кнопка-роль: таб на всю ширину колонки, активная роль подсвечена. */
.crm-acc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  color: var(--tpl-text);
  text-align: left;
  background: color-mix(in srgb, var(--tpl-panel) 55%, transparent);
  border: 1px solid var(--tpl-line);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 420ms var(--tpl-ease), background-color 420ms var(--tpl-ease), box-shadow 420ms var(--tpl-ease);
}

.crm-acc:hover,
.crm-acc:focus-visible {
  border-color: rgba(92, 127, 166, .5);
}

.crm-acc.is-active {
  border-color: var(--tpl-accent);
  background: color-mix(in srgb, #5c7fa6 12%, transparent);
  box-shadow: 0 18px 40px -28px rgba(92, 127, 166, .55);
}

.crm-acc span {
  color: #7a8aa3;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.crm-acc.is-active span {
  color: #7d9cc0;
}

.crm-acc b {
  font-size: 14.5px;
  font-weight: 400;
}

.crm-acc small {
  color: #8fa3be;
  font-size: 12px;
}


@media (max-width: 1100px) {
  .tpl-crm-hero {
    grid-template-columns: 1fr;
  }
}

/* Сетка фактов под окном: три карточки вместо четырёх. */
.tpl-crm-grid.crm-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Факты — статичные заметки, а не кнопки-табы шаблона: крупный тезис
   и один читаемый абзац вместо россыпи мелких строк. */
.crm-facts .tpl-crm-card {
  display: flex;
  flex-direction: column;
  cursor: default;
}

.crm-facts .tpl-crm-card:hover,
.crm-facts .tpl-crm-card:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: rgba(92, 127, 166, .38);
}

.crm-fact-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 20px;
}

.crm-fact-body h3 {
  margin: 0;
  font: 300 clamp(19px, 1.7vw, 24px) var(--display);
  line-height: 1.05;
}

.crm-fact-body p {
  margin: 0;
  color: #8fa3be;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .tpl-crm-grid.crm-facts {
    grid-template-columns: 1fr;
  }
}

/* --- объединённый раздел: тумблер ПК/Телефон --------------------------- */

.ui-mode-switch {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.ui-pane[hidden] {
  display: none;
}

/* Телефонная сцена внутри секции UI: сетка та же, что была у отдельного
   раздела, — стили tpl-mobile-layout уже описаны в template-sections.css. */
.ui-pane .tpl-mobile-list {
  border-top: 1px solid var(--tpl-line);
}

/* --- агенты: схема процесса под описанием ------------------------------ */

.agent-flow {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  overflow-x: auto;
}

.agent-flow > b {
  color: #a3b6d0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.agent-flow svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

.agent-flow .af-card { fill: #0c1626; stroke: rgba(120, 160, 220, .24); }
.agent-flow .af-line { fill: none; stroke: #46648c; stroke-width: 1.5; stroke-dasharray: 3 6; }
.agent-flow .af-t { font: 300 16.5px var(--display); letter-spacing: .05em; fill: #edf5ff; text-transform: uppercase; }
.agent-flow .af-s { font: 400 13px "Golos Text", sans-serif; fill: #8698b3; }
.agent-flow .af-note { font: 400 13px "Golos Text", sans-serif; fill: #8fa3bf; }
.agent-flow .af-dot { fill: #7d9cc0; }
.agent-flow .af-dot--soft { fill: #cfe0ff; }

@media (prefers-reduced-motion: reduce) {
  .agent-flow circle { display: none; }
}

@media (max-width: 1100px) {
  .agent-flow { grid-column: 1 / -1; }
}

/* --- агенты, мобильная сетка (три блока вместо двух) ------------------- */
@media (max-width: 760px) {
  /* Шаблонный p:last-child промахивается: последним стал .agent-flow,
     и абзац «Результат» падал в 34-пиксельную колонку номера. */
  .tpl-agent-list details > div p {
    grid-column: 2;
  }

  .agent-flow {
    grid-column: 1 / -1;
  }
}

/* --- агенты: живой список ---------------------------------------------- */

.tpl-agent-list summary b {
  display: flex;
  align-items: center;
  gap: 14px;
}

.agent-ic {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  color: #7d9cc0;
  background: color-mix(in srgb, var(--tpl-panel) 70%, transparent);
  border: 1px solid var(--tpl-line);
  border-radius: 11px;
  transition: color 420ms var(--tpl-ease), border-color 420ms var(--tpl-ease),
              box-shadow 420ms var(--tpl-ease), transform 620ms var(--tpl-ease);
}

.agent-ic svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tpl-agent-list summary:hover .agent-ic {
  transform: translateY(-2px);
  border-color: rgba(125, 156, 192, .5);
}

.tpl-agent-list details[open] .agent-ic {
  color: #b8d2ee;
  border-color: rgba(125, 156, 192, .6);
  box-shadow: 0 0 26px -8px rgba(125, 156, 192, .7);
}

/* Открытая карточка — мягкая панель, а не голые строки. */
.tpl-agent-list details[open] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tpl-panel) 55%, transparent),
    transparent 85%);
}

.tpl-agent-list details > div > p {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--tpl-panel) 45%, transparent);
  border: 1px solid rgba(120, 160, 220, .12);
}

/* --- агенты: живой прогон --------------------------------------------- */

.agent-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: 12px 22px;
  align-items: stretch;
  overflow: visible;
}

.agent-flow > b {
  grid-column: 1 / -1;
}

.agent-flow-scroll {
  min-width: 0;
  overflow-x: auto;
}

.agent-run {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 16px;
  background: color-mix(in srgb, var(--tpl-panel) 55%, transparent);
  border: 1px solid rgba(120, 160, 220, .14);
}

.agent-run-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a3b6d0;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.agent-run-head i {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #7d9cc0;
}

/* Пульс раньше анимировал box-shadow: это перерисовка каждый кадр, и она шла
   бесконечно даже когда блок агентов далеко за экраном — 241 пересчёт стиля
   из 301 в полном покое страницы. Теперь кольцо это отдельный слой, который
   двигает композитор, и заводится оно только у работающего агента. */
.agent-run-head i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(125, 156, 192, .55);
  opacity: 0;
}

.agent-run.is-live .agent-run-head i::after {
  animation: agent-pulse 1.6s ease-out infinite;
}

.agent-run-head small {
  margin-left: auto;
  color: #7a8aa3;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: none;
}

.agent-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
}

.agent-log li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  color: #93a4bd;
  opacity: 0;
  transform: translateY(6px);
  animation: agent-line 480ms var(--tpl-ease) forwards;
}

.agent-log li time {
  color: #8496b0;
  font-size: 12.5px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.agent-log li.is-last {
  color: var(--tpl-text);
}

.agent-log li.is-last time {
  color: #7d9cc0;
}

/* Активный узел схемы */
.agent-flow g .af-card,
.agent-flow g .af-t,
.agent-flow g .af-s {
  transition: fill 420ms var(--tpl-ease), stroke 420ms var(--tpl-ease);
}

.agent-flow g.is-on .af-card {
  fill: #12233d;
  stroke: #7d9cc0;
}

.agent-flow g.is-on .af-t {
  fill: #ffffff;
}

.agent-flow g.is-on .af-s {
  fill: #b8cbe6;
}

@keyframes agent-line {
  to { opacity: 1; transform: none; }
}

@keyframes agent-pulse {
  from { transform: scale(1); opacity: .55; }
  to { transform: scale(3.6); opacity: 0; }
}

@media (max-width: 1100px) {
  .agent-flow {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-run.is-live .agent-run-head i::after { animation: none; }
  .agent-log li { animation: none; opacity: 1; transform: none; }
}