/* ВИТРИНА АГЕНТОВ — стиль утверждённого макета (1 сентября).

   Отдельный лист, а не дописка в cabinet-system.css: экран новый, и держать
   его правила в одном месте дешевле, чем искать их потом среди шести тысяч
   строк. Токены — общие (--ch-*, --bd-*), поэтому светлая тема получается
   сама, без второго набора цветов.

   Ширины: сетка сама решает, сколько колонок влезет. На макете их четыре при
   1680px, но продукт открывают и на ноутбуке — фиксированные четыре колонки
   там дали бы карточки в 190px и перенос каждого слова. */

.agl { display: flex; flex-direction: column; gap: 18px; }

/* ── вкладки «Готовые агенты | Мои агенты» ─────────────────────────────── */
.agl-tabs {
  display: flex; gap: 26px; align-items: flex-end;
  border-bottom: 1px solid rgb(var(--ch-line) / .12);
}
.agl-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 0 2px 12px; font-size: 16px; font-family: inherit;
  color: var(--bd-ink-2, #94a3b8);
}
.agl-tab:hover { color: var(--bd-ink, #e9eef7); }
.agl-tab.is-on {
  color: var(--bd-ink, #e9eef7); font-weight: 600;
  box-shadow: inset 0 -2px 0 rgb(var(--ch-blue) / 1);
}

/* ── шапка-приглашение ─────────────────────────────────────────────────── */
.agl-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding: 22px 26px; border-radius: 16px;
  background: linear-gradient(140deg, rgb(var(--ch-blue) / .14), rgb(var(--ch-lift) / .04));
  border: 1px solid rgb(var(--ch-blue) / .24);
}
.agl-hero-text h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.02em; color: var(--bd-ink, #e9eef7); }
.agl-hero-text p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bd-ink-2, #94a3b8); max-width: 78ch; }
.agl-hero-actions { display: flex; gap: 10px; flex: 0 0 auto; }

/* ── поиск и ниши ──────────────────────────────────────────────────────── */
.agl-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.agl-search {
  flex: 0 1 320px; min-width: 210px; height: 42px; padding: 0 14px;
  border-radius: 11px; font-size: 15px; font-family: inherit;
  background: rgb(var(--ch-lift) / .04); color: var(--bd-ink, #e9eef7);
  border: 1px solid rgb(var(--ch-line) / .16);
}
.agl-search:focus-visible { outline: 2px solid rgb(var(--ch-blue) / .6); outline-offset: 1px; }
.agl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.agl-nichip {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 7px 14px; border-radius: 999px; font-size: 14px;
  background: rgb(var(--ch-lift) / .04); color: var(--bd-ink-2, #94a3b8);
  border: 1px solid rgb(var(--ch-line) / .14);
}
.agl-nichip:hover { color: var(--bd-ink, #e9eef7); border-color: rgb(var(--ch-line) / .26); }
.agl-nichip.is-on {
  background: rgb(var(--ch-blue) / .16); border-color: rgb(var(--ch-blue) / .38);
  color: var(--bd-ink, #e9eef7); font-weight: 500;
}
.agl-count {
  margin: 0; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bd-ink-3, #55637a);
}

/* ── карточки каталога ─────────────────────────────────────────────────── */
.agl-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.agl-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px; border-radius: 15px;
  background: rgb(var(--ch-lift) / .04);
  border: 1px solid rgb(var(--ch-line) / .12);
}
.agl-card:hover { border-color: rgb(var(--ch-line) / .26); }
.agl-card-head { display: flex; align-items: flex-start; gap: 13px; }
.agl-card-icon {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--ch-blue) / .14);
}
.agl-card-title { min-width: 0; }
.agl-card-title h4 {
  margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.3;
  color: var(--bd-ink, #e9eef7);
}
.agl-card-tag {
  display: inline-block; margin-top: 4px; font-size: 12.5px;
  color: rgb(var(--ch-blue) / 1);
}
.agl-card-open {
  margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--bd-ink-2, #94a3b8);
  /* Приветствие бывает длинным. Три строки — ровно столько, чтобы понять тон,
     и не столько, чтобы карточки поехали разной высоты. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.agl-card-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.agl-chip {
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  background: rgb(var(--ch-lift) / .06); color: var(--bd-ink-3, #6b7a90);
}
.agl-card-actions { margin-top: auto; display: flex; gap: 8px; padding-top: 4px; }
.agl-take { flex: 1 1 auto; justify-content: center; }
.agl-peek { flex: 0 0 auto; }

/* Карточка «собрать своего» — пунктир, потому что это не готовый агент. */
.agl-card-new, .agl-mine-new {
  align-items: center; text-align: center; justify-content: center; gap: 10px;
  border-style: dashed; border-color: rgb(var(--ch-blue) / .34);
  background: rgb(var(--ch-blue) / .05);
}
.agl-card-new h4, .agl-mine-new h4 { margin: 0; font-size: 16.5px; color: var(--bd-ink, #e9eef7); }
.agl-card-new p, .agl-mine-new p {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--bd-ink-2, #94a3b8); max-width: 34ch;
}
.agl-mine-plus {
  width: 46px; height: 46px; border-radius: 14px; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--ch-blue) / .16); color: rgb(var(--ch-blue) / 1);
}

/* ── «Мои агенты» ──────────────────────────────────────────────────────── */
.agl-mine-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.agl-mine {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px; border-radius: 16px;
  background: rgb(var(--ch-lift) / .04);
  border: 1px solid rgb(var(--ch-line) / .12);
}
/* Живой агент выделен рамкой, а не только текстом: он отвечает клиентам прямо
   сейчас, и это главное отличие карточки от всех остальных на экране. */
.agl-mine-live {
  border-color: rgb(var(--ch-ok) / .38);
  background: linear-gradient(150deg, rgb(var(--ch-ok) / .10), rgb(var(--ch-lift) / .03));
  grid-column: 1 / -1;
}
.agl-mine.is-archived { opacity: .62; }
.agl-mine-head { display: flex; align-items: flex-start; gap: 13px; }
.agl-mine-avatar {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 600; color: #0b0f16;
  background: linear-gradient(140deg, #7FB3FF, #C39BFF);
}
.agl-mine-title { min-width: 0; }
.agl-mine-title h4 { margin: 0; font-size: 18px; font-weight: 600; color: var(--bd-ink, #e9eef7); }
.agl-mine-title p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--bd-ink-2, #94a3b8); }
.agl-mine-state {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; color: var(--bd-ink-2, #94a3b8);
}
.agl-mine-state-live { color: rgb(var(--ch-ok) / 1); }
.agl-mine-why { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bd-ink-3, #6b7a90); }
.agl-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px;
  background: rgb(var(--ch-line) / .5);
}
.agl-dot-live { background: rgb(var(--ch-ok) / 1); }
.agl-dot-draft { background: rgb(var(--ch-warm) / 1); }
.agl-mine-actions { margin-top: auto; display: flex; gap: 9px; padding-top: 4px; flex-wrap: wrap; }
/* Кнопка и под ней — что она делает; выключенная остаётся читаемой (18.09.2026). */
.agl-mine-actions-hinted { align-items: flex-start; }
.agl-act { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.agl-act-hint { font-size: 12px; line-height: 1.3; color: var(--bd-ink-3, #6b7a90); }
.agl-mine-actions button:disabled { opacity: .8; cursor: not-allowed; color: var(--bd-ink-2, #94a3b8); }

.agl-note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--bd-ink-2, #94a3b8); }
.agl-note-bad { color: rgb(var(--ch-red) / 1); }

@media (max-width: 860px) {
  .agl-hero { flex-direction: column; align-items: flex-start; }
  .agl-search { flex-basis: 100%; }
}

/* ── ПРЕВЬЮ ГОТОВОГО АГЕНТА (макет 02) ─────────────────────────────────────
   Один экран отвечает на один вопрос: что я получу, если возьму его. Поэтому
   здесь нет ни одной плитки с оценкой — только его собственные слова. */
.agl-preview { display: flex; flex-direction: column; gap: 18px; }
.agl-back {
  appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  align-self: flex-start; padding: 4px 0; font-size: 14.5px; color: var(--bd-ink-2, #94a3b8);
}
.agl-back:hover { color: var(--bd-ink, #e9eef7); }
.agl-preview-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 26px; border-radius: 16px;
  background: linear-gradient(140deg, rgb(var(--ch-blue) / .14), rgb(var(--ch-lift) / .04));
  border: 1px solid rgb(var(--ch-blue) / .24);
}
.agl-preview-icon {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; font-size: 27px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--ch-lift) / .10);
}
.agl-preview-headline h3 { margin: 0 0 6px; font-size: 23px; letter-spacing: -.02em; color: var(--bd-ink, #e9eef7); }
.agl-preview-headline p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--bd-ink-2, #94a3b8); }

.agl-preview-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.agl-tile {
  padding: 15px 18px; border-radius: 13px;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .12);
}
.agl-tile-label { display: block; font-size: 13px; color: var(--bd-ink-3, #6b7a90); margin-bottom: 6px; }
.agl-tile b { font-size: 20px; font-weight: 600; color: var(--bd-ink, #e9eef7); letter-spacing: -.01em; }

.agl-preview-cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.agl-panel {
  padding: 20px 22px; border-radius: 15px;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .12);
}
.agl-panel h4 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--bd-ink, #e9eef7); }
.agl-panel-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bd-ink-3, #6b7a90); }
.agl-duties { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.agl-duties li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  font-size: 15px; line-height: 1.5; color: var(--bd-ink, #e9eef7);
}
.agl-duty-tick { color: rgb(var(--ch-ok) / 1); font-weight: 700; }
/* Первая фраза — дословно, поэтому в кавычках и своим фоном: это цитата, а не
   наш пересказ, и выглядеть она должна как цитата. */
.agl-hello {
  margin: 12px 0; padding: 14px 16px; border-radius: 12px;
  background: rgb(var(--ch-lift) / .06); border: 1px solid rgb(var(--ch-line) / .14);
  font-size: 15.5px; line-height: 1.6; color: var(--bd-ink, #e9eef7);
}

.agl-instruction {
  border-radius: 14px; background: rgb(var(--ch-lift) / .03);
  border: 1px solid rgb(var(--ch-line) / .12); padding: 14px 18px;
}
.agl-instruction summary { cursor: pointer; font-size: 15px; color: var(--bd-ink-2, #94a3b8); }
.agl-instruction summary:hover { color: var(--bd-ink, #e9eef7); }
.agl-instruction-text {
  margin: 14px 0 0; max-height: 340px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  color: var(--bd-ink-2, #94a3b8);
}

.agl-preview-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.agl-take-big { min-width: 260px; justify-content: center; }
.agl-preview-warn { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bd-ink-3, #6b7a90); max-width: 70ch; }

/* ── «СОБРАТЬ СВОЕГО» (макет 03) ──────────────────────────────────────────
   Три шага, и на каждом видно, где человек находится и что уже сделано. */
.agb { display: flex; flex-direction: column; gap: 18px; }
.agb-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.agb-head h3 { margin: 0; font-size: 23px; letter-spacing: -.02em; color: var(--bd-ink, #e9eef7); }
.agb-lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bd-ink-2, #94a3b8); max-width: 92ch; }

.agb-steps {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: flex; gap: 26px; flex-wrap: wrap; width: 100%;
}
.agb-step { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--bd-ink-3, #6b7a90); }
.agb-step-n {
  width: 26px; height: 26px; border-radius: 9px; flex: 0 0 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: rgb(var(--ch-lift) / .07); color: var(--bd-ink-3, #6b7a90);
}
.agb-step.is-now { color: var(--bd-ink, #e9eef7); font-weight: 500; }
.agb-step.is-now .agb-step-n { background: rgb(var(--ch-blue) / .20); color: rgb(var(--ch-blue) / 1); }
.agb-step.is-done .agb-step-n { background: rgb(var(--ch-ok) / .18); color: rgb(var(--ch-ok) / 1); }

.agb-panel { display: flex; flex-direction: column; gap: 12px; }
.agb-label { font-size: 14px; color: var(--bd-ink-2, #94a3b8); }
.agb-input {
  width: 100%; min-height: 44px; padding: 11px 14px; box-sizing: border-box;
  border-radius: 11px; font-size: 15px; font-family: inherit; line-height: 1.5;
  background: rgb(var(--ch-lift) / .05); color: var(--bd-ink, #e9eef7);
  border: 1px solid rgb(var(--ch-line) / .16);
}
.agb-input:focus-visible { outline: 2px solid rgb(var(--ch-blue) / .6); outline-offset: 1px; }
.agb-area { resize: vertical; min-height: 84px; }
.agb-select { cursor: pointer; }
.agb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.agb-error { margin: 0; }

/* Что прочитали с сайта — списком «поле: значение», потому что это выписка,
   а не проза: человек проверяет её глазами по строкам. */
.agb-rows { margin: 12px 0 0; display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 10px 20px; }
.agb-rows dt { font-size: 14px; color: var(--bd-ink-3, #6b7a90); }
.agb-rows dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bd-ink, #e9eef7); }

@media (max-width: 720px) {
  .agb-rows { grid-template-columns: 1fr; gap: 4px 0; }
  .agb-rows dd { margin-bottom: 8px; }
}

/* ── «ЧТО УМЕЕТ» (макет 08) ───────────────────────────────────────────────
   Три блока: что делает сам, свои действия, чего пока не умеет. Последний —
   не заглушка: названное вслух «этого нет» экономит человеку поиск. */
.aba { display: flex; flex-direction: column; gap: 20px; }
.aba-block { display: flex; flex-direction: column; gap: 10px; }
.aba-block h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--bd-ink, #e9eef7); }
.aba-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--bd-ink-2, #94a3b8); max-width: 90ch; }
.aba-bad { color: rgb(var(--ch-red) / 1); }
.aba-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.aba-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 15px 18px; border-radius: 13px;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .12);
}
.aba-row.is-on { border-color: rgb(var(--ch-ok) / .30); }
.aba-row.is-off { opacity: .72; }
.aba-row-main h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; color: var(--bd-ink, #e9eef7); }
.aba-row-main p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bd-ink-2, #94a3b8); }
.aba-args { margin-top: 6px !important; font-size: 13px !important; color: var(--bd-ink-3, #6b7a90) !important; }
.aba-state {
  font-size: 13.5px; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: rgb(var(--ch-lift) / .06); color: var(--bd-ink-3, #6b7a90);
}
.aba-state.is-on { background: rgb(var(--ch-ok) / .16); color: rgb(var(--ch-ok) / 1); }
.aba-missing .aba-row { background: transparent; border-style: dashed; }
/* «Что ещё можно подключить» — шаг, а не приговор: не приглушать, у строки есть кнопка. */
.aba-missing .aba-row.is-off { opacity: 1; }
.aba-missing .aba-state { color: rgb(var(--ch-warm) / 1); background: rgb(var(--ch-warm) / .12); }

/* ── ГОТОВЫЕ РЕШЕНИЯ: «AI-отдел продаж — <отрасль>» (18 сентября 2026) ──────
   Те же токены, что у витрины: тёмная и светлая темы получаются сами.
   Классы rs-*, а не agl-card / agl-nichip / agl-search: набор витрины считает
   карточки пресетов и печатает в первое поле поиска — чужие классы здесь
   сломали бы его счёт, не поведение. */
.rs { display: flex; flex-direction: column; gap: 14px; }
.rs-filters { display: flex; flex-direction: column; gap: 10px; }
.rs-search {
  width: 100%; max-width: 420px; height: 42px; padding: 0 14px; box-sizing: border-box;
  border-radius: 11px; font-size: 15px; font-family: inherit;
  background: rgb(var(--ch-lift) / .04); color: var(--bd-ink, #e9eef7);
  border: 1px solid rgb(var(--ch-line) / .16);
}
.rs-search:focus-visible, .rs-input:focus-visible { outline: 2px solid rgb(var(--ch-blue) / .6); outline-offset: 1px; }
.rs-filter-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rs-filter-label {
  flex: 0 0 76px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bd-ink-3, #6b7a90);
}
.rs-chip {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 6px 12px; border-radius: 999px; font-size: 13.5px;
  background: rgb(var(--ch-lift) / .04); color: var(--bd-ink-2, #94a3b8);
  border: 1px solid rgb(var(--ch-line) / .14);
}
.rs-chip:hover { color: var(--bd-ink, #e9eef7); border-color: rgb(var(--ch-line) / .26); }
.rs-chip.is-on {
  background: rgb(var(--ch-blue) / .16); border-color: rgb(var(--ch-blue) / .38);
  color: var(--bd-ink, #e9eef7); font-weight: 500;
}
.rs-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.rs-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px; border-radius: 16px;
  background: linear-gradient(160deg, rgb(var(--ch-blue) / .07), rgb(var(--ch-lift) / .03));
  border: 1px solid rgb(var(--ch-line) / .14);
}
.rs-card:hover { border-color: rgb(var(--ch-blue) / .34); }
.rs-card-custom { border-style: dashed; background: rgb(var(--ch-lift) / .03); }
.rs-card-head { display: flex; align-items: flex-start; gap: 13px; }
.rs-card-icon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; font-size: 21px;
  display: flex; align-items: center; justify-content: center; background: rgb(var(--ch-blue) / .14);
}
.rs-card-title { min-width: 0; }
.rs-card-title h4 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--bd-ink, #e9eef7); }
.rs-card-outcome { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bd-ink-2, #94a3b8); }
.rs-caps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rs-caps li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--bd-ink, #e9eef7); }
.rs-tick { color: rgb(var(--ch-ok) / 1); flex: 0 0 auto; }
.rs-subs { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-card-status { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgb(var(--ch-ok) / 1); }
.rs-card-status.is-upgrade { color: rgb(var(--ch-warm) / 1); }
.rs-card-actions { margin-top: auto; display: flex; gap: 8px; padding-top: 4px; align-items: flex-start; }
.rs-use { flex: 1 1 auto; justify-content: center; }
/* Кнопка и под ней — что она делает (18 сентября 2026). */
.rs-act { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; }
.rs-act:first-child { flex: 1 1 auto; }
.rs-act .rs-use, .rs-act .rs-peek { width: 100%; justify-content: center; }
.rs-act-hint { font-size: 12px; line-height: 1.3; text-align: center; color: var(--bd-ink-3, #6b7a90); }

/* «Как это работает» — три шага над карточками. */
.rs-how {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 14px;
  background: rgb(var(--ch-blue) / .06); border: 1px solid rgb(var(--ch-blue) / .22);
}
.rs-how-title { margin: 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--bd-ink-3, #6b7a90); }
.rs-how-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.rs-how-step { display: flex; gap: 12px; align-items: flex-start; }
.rs-how-n {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; background: rgb(var(--ch-blue) / 1); color: #fff;
}
.rs-how-step:last-child .rs-how-n { background: rgb(var(--ch-warm) / 1); color: #0b0f16; }
.rs-how-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-how-text b { font-size: 15px; font-weight: 600; color: var(--bd-ink, #e9eef7); }
.rs-how-text span { font-size: 13.5px; line-height: 1.5; color: var(--bd-ink-2, #94a3b8); }
.rs-how-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bd-ink-2, #94a3b8); border-top: 1px solid rgb(var(--ch-line) / .12); padding-top: 10px; }
/* Метка фильтра слева от чипов в каждой строке, а не над ними у одной «Отрасли». */
.rs-filter-row { flex-wrap: nowrap; align-items: flex-start; }
.rs-filter-label { padding-top: 8px; }
.rs-filter-row > .agl-chips { flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
.rs-own { margin: 0; font-size: 14px; color: var(--bd-ink-2, #94a3b8); }
.rs-link {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit; padding: 0;
  color: rgb(var(--ch-blue) / 1); text-decoration: underline; text-underline-offset: 3px;
}

/* превью и мастер */
.rs-preview, .rs-wizard { display: flex; flex-direction: column; gap: 16px; }
.rs-hero { flex-wrap: wrap; }
.rs-hero .agl-preview-headline { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.rs-details { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.rs-panel { display: flex; flex-direction: column; gap: 8px; }
.rs-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 5px;
  font-size: 14px; line-height: 1.5; color: var(--bd-ink, #e9eef7); }
.rs-stages { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-stage {
  font-size: 13px; padding: 5px 10px; border-radius: 8px;
  background: rgb(var(--ch-lift) / .06); color: var(--bd-ink, #e9eef7);
  border: 1px solid rgb(var(--ch-line) / .12);
}
.rs-stage-won { border-color: rgb(var(--ch-ok) / .45); }
.rs-stage-lost { border-color: rgb(var(--ch-red) / .35); color: var(--bd-ink-2, #94a3b8); }
.rs-wizard-head { display: flex; align-items: center; gap: 16px; }
.rs-wizard-head h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; color: var(--bd-ink, #e9eef7); }
.rs-wizard-head p { margin: 0; font-size: 14.5px; color: var(--bd-ink-2, #94a3b8); }
.rs-step { display: flex; flex-direction: column; gap: 14px; }
.rs-industries, .rs-subpick { margin-top: 4px; }
.rs-site-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rs-site-row .rs-input { flex: 1 1 260px; }
.rs-read-ok { margin: 0; font-size: 14px; line-height: 1.5; color: rgb(var(--ch-ok) / 1); }
.rs-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.rs-field { display: flex; flex-direction: column; gap: 6px; }
.rs-field:last-child { grid-column: 1 / -1; }
.rs-field-label { font-size: 13px; color: var(--bd-ink-3, #6b7a90); margin: 0; }
.rs-input {
  width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; border-radius: 10px;
  font: inherit; font-size: 15px; resize: vertical;
  background: rgb(var(--ch-lift) / .04); color: var(--bd-ink, #e9eef7);
  border: 1px solid rgb(var(--ch-line) / .16);
}
.rs-toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-top: 1px solid rgb(var(--ch-line) / .08); }
.rs-toggle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rs-toggle-text b { font-size: 14.5px; font-weight: 500; color: var(--bd-ink, #e9eef7); }
.rs-toggle-text span { font-size: 13px; line-height: 1.45; color: var(--bd-ink-3, #6b7a90); }
.rs-switch {
  appearance: none; cursor: pointer; flex: 0 0 38px; width: 38px; height: 22px; margin-top: 1px;
  border-radius: 999px; padding: 2px; position: relative;
  background: rgb(var(--ch-line) / .28); border: 0;
}
.rs-switch.is-on { background: rgb(var(--ch-blue) / 1); }
.rs-switch-knob {
  display: block; width: 18px; height: 18px; border-radius: 999px; background: #fff;
  transform: translateX(0); transition: transform .15s ease;
}
.rs-switch.is-on .rs-switch-knob { transform: translateX(16px); }
[dir="rtl"] .rs-switch.is-on .rs-switch-knob { transform: translateX(-16px); }
.rs-advanced { display: flex; flex-direction: column; gap: 14px; }
.rs-advanced-toggle { align-self: flex-start; }
.rs-instruction { max-height: 360px; overflow: auto; }
.rs-banner, .rs-warn {
  margin: 0; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5;
  background: rgb(var(--ch-warm) / .12); border: 1px solid rgb(var(--ch-warm) / .34);
  color: var(--bd-ink, #e9eef7);
}
.rs-channels { display: flex; flex-direction: column; gap: 8px; }
.rs-channel {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .12);
}
.rs-channel b { flex: 0 0 110px; font-weight: 500; color: var(--bd-ink, #e9eef7); }
.rs-channel-state { flex: 1 1 auto; font-size: 13.5px; color: var(--bd-ink-3, #6b7a90); }
.rs-channel-state.is-live { color: rgb(var(--ch-ok) / 1); }
.rs-readiness {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 16px;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .14);
}
.rs-ready-head { display: flex; align-items: baseline; gap: 10px; color: var(--bd-ink-2, #94a3b8); }
.rs-ready-pct { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--bd-ink, #e9eef7); }
.rs-ready-bar { height: 8px; border-radius: 999px; background: rgb(var(--ch-line) / .16); overflow: hidden; }
.rs-ready-bar span { display: block; height: 100%; background: rgb(var(--ch-ok) / 1); border-radius: 999px; }
.rs-ready-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.rs-ready-list li { display: flex; gap: 8px; font-size: 14px; color: var(--bd-ink-2, #94a3b8); }
.rs-ready-list li.is-done { color: var(--bd-ink, #e9eef7); }
.rs-ready-list li.is-done span { color: rgb(var(--ch-ok) / 1); }
.rs-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rs-launch.is-armed { background: rgb(var(--ch-warm) / 1); color: #0b0f16; }
.rs-result { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.rs-result-done { color: var(--bd-ink, #e9eef7); }
.rs-result-done span { color: rgb(var(--ch-ok) / 1); }
.rs-result-skipped { color: var(--bd-ink-2, #94a3b8); }
.rs-result-failed { color: rgb(var(--ch-red) / 1); }
@media (max-width: 640px) {
  .rs-filter-label { flex-basis: 100%; padding-top: 0; }
  .rs-filter-row { flex-wrap: wrap; }
  .rs-channel { flex-wrap: wrap; }
  .rs-channel b { flex-basis: auto; }
}

/* ШАГИ ЗАПУСКА УХОДЯТ, КОГДА АГЕНТ УЖЕ РАБОТАЕТ (23 сентября 2026, аудит C §1 G9).
   Пространству с 1 058 сообщениями агента за 30 дней /agents всё ещё
   показывал «1 Выбрать агента · 2 Подключить канал · 3 Проверить, что он
   говорит» с открытым третьим шагом — чек-лист не уходил никогда. Оба факта
   уже на странице: блок «что агент сделал за 30 дней» (.agent-intro-facts,
   рисуется только при сообщениях или звонках) и карточка «Мои агенты» со
   словом «Работает» (data-agent-state="live" — только при живом канале к
   клиентам, тот же факт, что у «Интеграций»). Есть оба — шаги не нужны.
   Нет хотя бы одного — шаги на месте, как были. Разметку рисует main.js;
   этой ночью его правят другие, поэтому правило здесь, по готовым фактам. */
.agent-page:has(.agent-intro-facts):has(.agl-mine-state-live[data-agent-state="live"]) .agent-steps {
  display: none;
}

/* ТЕЛЕФОН: СТРОКА ПЕРЕХОДОВ ПЕРЕНОСИТСЯ (23 сентября 2026).
   Замер на 390 px: четыре кнопки «Мои агенты · Готовые решения · Библиотека ·
   Отдельные агенты» в одну строку без переноса — 533 px, и вся витрина
   раздувалась до этой ширины: у каждой карточки справа срезало ~140 px,
   включая заголовок «Не удалось прочитать агента». На узком экране строка
   переносится, и витрина снова равна экрану. */
@media (max-width: 760px) {
  .agl-tabs { flex-wrap: wrap; gap: 6px 18px; }
}

/* ГОТОВЫЕ СЦЕНАРИИ ОТРАСЛИ (26 сентября 2026, CRM волна B) — в превью решения,
   src/pages/agents/ReadyScenariosPanel.js. Карточка на сценарий: что сделает,
   этап и когда, путь к клиенту (согласие или задача), сколько карточек
   подходит сейчас, кнопка «Поставить на паузе». Сетка переходит в один
   столбец на телефоне сама (minmax с min()). */
.rs-scenarios { gap: 10px; }
.rs-scn-pipe { margin: 0; font-size: 13px; color: var(--bd-ink-3, #6b7a90); }
.rs-scn-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.rs-scn {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px 14px; border-radius: 12px;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .12);
}
.rs-scn[data-status="installed"] { border-color: rgb(var(--ch-ok) / .4); }
.rs-scn[data-status="no_stage"], .rs-scn[data-status="engine"] { opacity: .85; }
.rs-scn-name { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--bd-ink, #e9eef7); overflow-wrap: anywhere; }
.rs-scn-does { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bd-ink, #e9eef7); overflow-wrap: anywhere; }
.rs-scn-meta, .rs-scn-why { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--bd-ink-3, #6b7a90); overflow-wrap: anywhere; }
.rs-scn-consent { margin: 0; font-size: 12.5px; line-height: 1.45; padding: 6px 8px; border-radius: 8px; overflow-wrap: anywhere; }
.rs-scn-consent.is-send { background: rgb(var(--ch-blue) / .08); color: var(--bd-ink-2, #94a3b8); }
.rs-scn-consent.is-fallback { background: rgb(var(--ch-warm) / .1); color: var(--bd-ink-2, #94a3b8); }
.rs-scn-reach { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--bd-ink, #e9eef7); }
.rs-scn-reach-note { font-weight: 400; color: var(--bd-ink-2, #94a3b8); }
.rs-scn-act, .rs-scn-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 2px; }
.rs-scn-install { min-height: 36px; }
.rs-scn-badge { font-size: 12.5px; padding: 4px 8px; border-radius: 8px; }
.rs-scn-badge.is-paused { background: rgb(var(--ch-ok) / .12); color: rgb(var(--ch-ok) / 1); }
.rs-scn-open { font-size: 13px; min-height: 32px; }
.rs-scn-error { flex: 1 1 100%; font-size: 12.5px; color: rgb(var(--ch-red) / 1); overflow-wrap: anywhere; }