/* «Квантовые линии» - оформление как в интерфейсе Битрикс24 (тема Air).
   Токены: text #424956, accent #0075ff, success #1bce7b,
   линии #dfe0e3 / #d5d7db, приглушённый #828b95, секция #f6fafb, системный шрифт. */
:root {
  --b-accent: #0075ff;
  --b-accent-d: #0068e0;
  --b-success: #1bce7b;
  --b-success-bg: #e9f9f1;
  --b-success-t: #0e8a50;
  --b-danger: #f1533f;
  --b-danger-bg: #fdeeec;
  --b-danger-t: #c2321f;
  --b-info-bg: #eef5ff;
  --b-text: #424956;
  --b-muted: #828b95;
  --b-muted-l: #a8adb4;
  --b-line: #dfe0e3;
  --b-line-s: #d5d7db;
  --b-section: #f6fafb;
  --b-r: 6px;
  --b-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--b-text);
  font-family: var(--b-font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--b-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.olt { max-width: 1400px; padding: 22px 26px 20px; }
.olt--install { max-width: 720px; }

/* шапка */
.olt-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.olt-head__logo { flex: 0 0 auto; display: block; border-radius: 10px; }
.olt-head__text { flex: 1 1 auto; min-width: 0; }
.olt-head h1 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--b-text); }
.olt-head p { margin: 3px 0 0; color: var(--b-muted); font-size: 13.5px; }

/* кнопки - как в Битрикс24 */
.olt-btn {
  flex: 0 0 auto;
  border: 1px solid var(--b-line-s);
  border-radius: var(--b-r);
  padding: 8px 17px;
  background: #fff;
  color: var(--b-text);
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.olt-btn:hover { background: var(--b-section); border-color: var(--b-muted-l); }
.olt-btn--primary { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.olt-btn--primary:hover { background: var(--b-accent-d); border-color: var(--b-accent-d); }
.olt-btn:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.olt-btn:disabled { cursor: default; opacity: .55; }
.olt-actions { margin-top: 16px; }

/* строка состояния */
.olt-status {
  padding: 11px 14px;
  border-radius: var(--b-r);
  background: var(--b-info-bg);
  color: var(--b-accent-d);
  font-weight: 500;
}
.olt-status[data-kind="success"] { background: var(--b-success-bg); color: var(--b-success-t); }
.olt-status[data-kind="error"] { background: var(--b-danger-bg); color: var(--b-danger-t); }
.olt-status[data-kind="muted"] { background: var(--b-section); color: var(--b-muted); }

.olt-details { margin: 8px 0 0; padding: 0 0 0 20px; color: var(--b-muted); font-size: 13px; }
.olt-details:empty { display: none; }

/* секции */
.olt-sec { margin-top: 26px; }
.olt-sec h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--b-text);
}
.olt-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--b-section);
  border: 1px solid var(--b-line);
  color: var(--b-muted);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.olt-count:empty { display: none; }
.olt-hint { margin: 10px 0 0; color: var(--b-muted); font-size: 13px; }

/* карточки роботов */
.olt-cards { display: grid; gap: 14px; }
.olt-card {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--b-line);
  border-radius: 12px;
  background: #fff;
}
.olt-card__info { display: flex; flex-direction: column; min-width: 0; }
.olt-card__views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.olt-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.olt-card h3 { min-width: 0; margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--b-text); overflow-wrap: anywhere; }
.olt-card p { margin: 8px 0 12px; color: var(--b-text); }
.olt-badge {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--b-section);
  color: var(--b-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.olt-badge[data-kind="success"] { background: var(--b-success-bg); color: var(--b-success-t); }
.olt-io { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--b-line); font-size: 13px; }
.olt-io dt { color: var(--b-muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.olt-io dd { margin: 2px 0 9px; color: var(--b-text); }
.olt-io dd:last-child { margin-bottom: 0; }

/* Превью «как в Битрикс24»: размеры и цвета сняты с портала (дизайнер бизнес-процессов и редактор роботов). */
.olt-pv {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 10px;
  background: #eef2f4;
  color: #333;
  transition: opacity .15s;
}
.olt-card[data-state="off"] .olt-pv { opacity: .45; }
.olt-pv__path { margin-bottom: 10px; color: #525c69; font-size: 12px; font-weight: 600; }
.olt-pv__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.olt-pv__cap { margin-top: auto; padding-top: 10px; color: #828b95; font-size: 11.5px; line-height: 1.35; }

/* действие на схеме дизайнера */
.olt-pv--bp .olt-pv__body { padding: 8px 10px; border: 1px solid #d9dcdf; border-radius: 4px; background: #fff; }
.olt-flowmini { flex: 0 0 176px; display: flex; flex-direction: column; align-items: center; }
.olt-flowmini__line { position: relative; width: 1px; height: 14px; background: #9aa3ab; }
.olt-flowmini__line:last-child::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -1px;
  border-top: 5px solid #9aa3ab;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}
.olt-bpact { width: 172px; border: 1px solid #c0c1c3; border-radius: 6px; background: #fff; }
.olt-bpact__head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding-right: 6px;
  border-radius: 5px 5px 0 0;
  background: #f9cf82;
}
.olt-bpact__gear, .olt-bpact__close { display: block; width: 9px; height: 9px; opacity: .7; }
.olt-bpact__gear { border: 2px dotted #7a6a44; border-radius: 50%; }
.olt-bpact__close {
  background:
    linear-gradient(45deg, transparent 43%, #7a6a44 43%, #7a6a44 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #7a6a44 43%, #7a6a44 57%, transparent 57%);
}
.olt-bpact__body { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 6px; font-size: 11px; line-height: 1.25; color: #333; }
.olt-bpact__icon {
  flex: 0 0 auto;
  display: block;
  width: 14px;
  height: 16px;
  border: 1px solid #7f96ab;
  border-radius: 2px;
  background: linear-gradient(#fff, #dfe9f2);
  box-shadow: inset 0 -5px 0 -3px #9db3c7, inset 0 -9px 0 -7px #9db3c7;
}

/* список действий справа в дизайнере */
.olt-toolbox { flex: 1 1 190px; min-width: 0; border: 1px solid #c9ced3; background: #fff; }
.olt-toolbox__group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  white-space: nowrap;
  padding: 0 8px;
  border-bottom: 1px solid #d5d9dd;
  background: linear-gradient(#f3f4f5, #e5e7e9);
  font-size: 12px;
  font-weight: 700;
  color: #333;
}
.olt-toolbox__group i { border-top: 5px solid #555; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.olt-toolbox__item { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-top: 1px solid #eceef0; font-size: 11.5px; line-height: 1.25; color: #333; }
.olt-toolbox__item > span, .olt-bpact__body > span { min-width: 0; overflow-wrap: break-word; }
.olt-toolbox__group + .olt-toolbox__item { border-top: 0; }
.olt-toolbox__item--dim { color: #a8adb4; }
.olt-toolbox__item--dim .olt-bpact__icon { opacity: .4; }
.olt-toolbox__item--hit { background: #fff6dc; }
.olt-toolbox__item .olt-bpact__icon { width: 12px; height: 14px; }

/* робот на стадии воронки */
.olt-stage { flex: 0 0 186px; max-width: 100%; }
.olt-stage__head {
  position: relative;
  height: 32px;
  margin: 0 8px 8px 0;
  padding: 0 14px;
  border-radius: 3px 0 0 3px;
  background: #39a8ef;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 32px;
  white-space: nowrap;
}
.olt-stage__head::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  border-left: 8px solid #39a8ef;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
.olt-robot { width: 183px; border-radius: 10px; background: #e2f2fb; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); overflow: hidden; }
.olt-robot__main { position: relative; min-height: 84px; padding: 9px 9px 10px; border-radius: 10px 10px 0 4px; background: #fff; }
.olt-robot__close {
  position: absolute;
  top: 10px;
  right: 9px;
  width: 10px;
  height: 10px;
  opacity: .45;
  background:
    linear-gradient(45deg, transparent 44%, #828b95 44%, #828b95 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #828b95 44%, #828b95 56%, transparent 56%);
}
.olt-robot__when { padding-bottom: 7px; color: #2066b0; font-size: 14px; line-height: 15px; }
.olt-robot__title { padding-right: 6px; color: #000; font-size: 14px; line-height: 18px; overflow-wrap: break-word; }
.olt-robot__foot { display: flex; justify-content: space-between; padding: 9px 9px 10px; font-size: 13px; line-height: 15px; color: #828b95; }
.olt-robot__foot span:first-child { color: #b1b7c5; opacity: .6; }

/* каталог роботов: окно «Добавить» */
.olt-catalog { flex: 1 1 210px; min-width: 0; }
.olt-catalog__group {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #e5f7fd;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.olt-catalog__group i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: #2fc6f6; box-shadow: inset 0 0 0 6px #2fc6f6, inset 0 0 0 20px #fff; }
.olt-catalog__option { padding: 12px 13px 13px; border-radius: 10px; background: #fff; }
.olt-catalog__name { color: #333; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.olt-catalog__btn {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 14px;
  border: 1px solid #2fc6f6;
  border-radius: 40px;
  background: #fff;
  color: #525c69;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* управление роботом: установить, удалить, переименовать */
.olt-card__actions { margin-top: auto; padding-top: 14px; }
.olt-card__actions:empty { display: none; }
.olt-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.olt-card__note { margin: 10px 0 0; color: var(--b-muted); font-size: 12.5px; }
.olt-card__note--warn { margin: 0 0 10px; padding: 9px 12px; border-radius: var(--b-r); background: var(--b-danger-bg); color: var(--b-danger-t); }
.olt-btn--small { padding: 6px 13px; font-size: 13px; }
.olt-btn--danger { background: var(--b-danger); border-color: var(--b-danger); color: #fff; }
.olt-btn--danger:hover { background: #dc4634; border-color: #dc4634; }
.olt-btn--link, .olt-btn--link-danger { border-color: transparent; background: transparent; padding-left: 6px; padding-right: 6px; }
.olt-btn--link { color: var(--b-accent); }
.olt-btn--link-danger { color: var(--b-danger-t); }
.olt-btn--link:hover, .olt-btn--link-danger:hover { background: var(--b-section); border-color: transparent; }
.olt-input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 11px;
  border: 1px solid var(--b-line-s);
  border-radius: var(--b-r);
  background: #fff;
  color: var(--b-text);
  font: inherit;
}
.olt-input:focus { outline: none; border-color: var(--b-accent); box-shadow: 0 0 0 2px rgba(0, 117, 255, .15); }

/* когда какой робот нужен */
.olt-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.olt-cases li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 10px; background: var(--b-section); font-size: 13px; }
.olt-cases b { font-weight: 600; color: var(--b-text); }
.olt-cases span { min-width: 0; overflow-wrap: anywhere; }

/* как настроить: воронка и бизнес-процесс рядом */
.olt-howto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.olt-howto .olt-flow { padding: 12px; }
.olt-howto .olt-flow__node { min-height: 48px; padding: 8px 10px; font-size: 12.5px; }
.olt-howto .olt-flow__arrow { flex-basis: 30px; }

/* схема процесса */
.olt-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--b-section);
}
.olt-flow__node {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--b-line-s);
  border-left: 3px solid var(--b-accent);
  border-radius: var(--b-r);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.olt-flow__node--cond { border-left-color: var(--b-success); }
.olt-flow__arrow {
  position: relative;
  flex: 0 0 46px;
  align-self: center;
  height: 1px;
  background: var(--b-muted-l);
}
.olt-flow__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  border-left: 7px solid var(--b-muted-l);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.olt-flow__arrow span {
  position: absolute;
  left: 0;
  right: 7px;
  top: -19px;
  color: var(--b-muted);
  font-size: 11px;
  text-align: center;
}
.olt-steps { margin: 14px 0 0; padding-left: 20px; }
.olt-steps li { margin-bottom: 6px; padding-left: 2px; }
.olt-steps li::marker { color: var(--b-muted); }

/* список линий */
.olt-lines { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.olt-lines:empty { display: none; }
.olt-lines li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--b-line);
  border-radius: 16px;
  background: #fff;
  font-size: 13px;
}
.olt-lines li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b-success);
}
.olt-lines li.olt-lines__empty { border-style: dashed; color: var(--b-muted); }
.olt-lines li.olt-lines__empty::before { display: none; }
.olt-line__id { color: var(--b-muted); font-size: 12px; }

/* подвал */
.olt-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--b-line);
  color: var(--b-muted);
  font-size: 12px;
}
.olt-footer img { flex: 0 0 auto; display: block; border-radius: 4px; }
.olt-footer__links { display: inline-flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }

@media (max-width: 1240px) {
  .olt-card { grid-template-columns: minmax(0, 1fr); }
}

/* схема из трёх блоков не помещается в половину узкого фрейма */
@media (max-width: 1000px) {
  .olt-howto { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 860px) {
  .olt-card__views { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .olt { padding: 16px 14px; }
  .olt-head { flex-wrap: wrap; }
  .olt-head .olt-btn { width: 100%; }
  .olt-flow { flex-direction: column; }
  .olt-flow__arrow { flex-basis: 26px; width: 1px; height: 26px; }
  .olt-flow__arrow::after {
    right: -4px;
    top: auto;
    bottom: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid var(--b-muted-l);
    border-bottom: 0;
  }
  .olt-flow__arrow span { left: 10px; right: auto; top: 4px; }
  .olt-footer__links { margin-left: 0; }
  .olt-pv__body { flex-direction: column; }
  .olt-flowmini, .olt-stage { flex: 0 0 auto; }
  .olt-toolbox, .olt-catalog { flex: 0 0 auto; width: 100%; }
}