/* Конструктор — инструменты: окно «Поиск блока», страницы «Тестирование бота» и «История изменений».
   Цвета — только токены; свои значения (тени, полоски типов) — блок --bt-* в конце tokens.css. */

/* ============ Общее: перечень типов блока и звёздочка ============ */
.cl-bt-kinds { display: flex; flex-direction: column; flex: none; }
.cl-bt-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 100%;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  line-height: 19px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-menu-item);
}
.cl-bt-kind:hover { background: var(--grey-100); }
.cl-bt-kind.is-selected { background: var(--grey-200); }
.cl-bt-kind:focus-visible { outline: 2px solid var(--border-brand); outline-offset: -2px; }
.cl-bt-kind__dot { flex: none; width: 12px; height: 12px; border: 1px solid transparent; border-radius: var(--radius-2); }
.cl-bt-kind__dot--state { border-color: var(--border-secondary-default); background: var(--white); }
.cl-bt-kind__dot--start { background: var(--bld-block-start-fill); }
.cl-bt-kind__dot--condition { background: var(--bld-block-condition-fill); }
.cl-bt-kind__dot--side { background: var(--bld-block-side-fill); }
.cl-bt-kind__dot--nostate { background: var(--bld-block-nostate-fill); }
.cl-bt-kind__dot--comment { border-color: var(--border-secondary-default); background: var(--bt-kind-comment); }
.cl-bt-kind__star { display: flex; align-items: center; justify-content: center; flex: none; width: 12px; height: 14px; color: var(--w-star); }
.cl-bt-kind__star .cl-icon { flex: none; }
.cl-bt-kind__label { flex: 1 1 auto; min-width: 0; }
.cl-bt-kind__count { flex: none; color: var(--text-caption); }

.cl-bt-star {
  display: flex;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-4);
  color: var(--grey-300);
  cursor: pointer;
  transition: color var(--duration-button);
}
.cl-bt-star:hover, .cl-bt-star.is-on { color: var(--w-star); }
.cl-bt-star:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 1px; }

/* ============ Окно «Поиск блока»: 90 % ширины, 86 px сверху ============ */
.cl-overlay.cl-overlay--bsearch { padding: 86px 5% 60px; }
.cl-modal.cl-bsearch { max-width: none; height: 100%; max-height: none; overflow: hidden; }
.cl-bsearch .cl-modal__body { gap: 0; padding: 0; overflow: hidden; }
.cl-bsearch__layout { display: flex; flex: 1 1 auto; min-height: 0; }
.cl-bsearch__side {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 330px;
  padding: 16px 20px;
  overflow-y: auto;
  border-right: 1px solid var(--border-primary-default);
}
.cl-bsearch__field, .cl-bsearch__sheet { flex: none; }
.cl-bsearch__field .cl-input__control { border-color: var(--grey-100); }
.cl-bsearch__field .cl-input__control:focus { border-color: var(--border-brand); }
.cl-bsearch__sheet { margin-top: 12px; }
/* Рамка списка листов — светлая (в образце #E1E6F0), а не обычная рамка поля */
.cl-bsearch__sheet .cl-select__trigger:not(:focus) { border-color: var(--border-primary-default); }
.cl-bsearch__sheet .cl-select.is-open .cl-select__trigger { border-color: var(--input-solid-border-focused); }
.cl-bsearch__heading { flex: none; margin: 20px 0 8px; font-size: 14px; font-weight: var(--font-weight-medium); line-height: 20px; color: var(--text-primary); }
.cl-bsearch__side .cl-bt-kinds { margin: 0 -20px; }

.cl-bsearch__main { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.cl-bsearch__scroll { flex: 1 1 auto; min-width: 0; padding: 16px 20px; overflow-y: auto; }
.cl-bsearch__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cl-bsearch__bar { position: absolute; top: 0; right: 0; left: 0; }
.cl-bsearch__note { padding: 80px 20px; font-size: 14px; line-height: 20px; text-align: center; color: var(--text-caption); }
.cl-bsearch__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 170px;
  overflow: hidden;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-6);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: box-shadow var(--duration-button);
}
.cl-bsearch__card:hover { box-shadow: var(--shadow-dropdown); }
.cl-bsearch__card:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 1px; }
.cl-bsearch__card--start { border-color: var(--bld-block-start-fill); }
.cl-bsearch__card--condition { border-color: var(--w-block-start-border); background: var(--w-block-start-background); color: var(--green-700); }
.cl-bsearch__card--side { border-color: var(--bld-block-side-fill); }
.cl-bsearch__card--nostate { border-color: var(--bld-block-nostate-fill); }
/* Текст обрезается по высоте целыми строками: 5 строк по 18 px */
.cl-bsearch__text {
  display: -webkit-box;
  flex: none;
  margin: 12px 44px 0 16px;
  overflow: hidden;
  font-size: 14px;
  line-height: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.cl-bsearch__num, .cl-bsearch__title { font-weight: var(--font-weight-medium); }
.cl-bsearch__empty-text { color: var(--text-disabled); }
.cl-bsearch__card .cl-bt-star { position: absolute; top: 8px; right: 8px; }
.cl-bsearch__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 40px;
  margin-top: auto;
  padding: 11px 16px;
  border-top: 1px solid var(--border-primary-default);
  background: var(--white);
  font-size: 14px;
  line-height: 18px;
  color: var(--text-secondary);
}
.cl-bsearch__foot b { flex: none; font-weight: var(--font-weight-medium); color: var(--text-primary); }

/* ============ Страница «Тестирование бота»: всё окно, без шапки и левого меню ============ */
body.cl-btest-open .cl-header, body.cl-btest-open .cl-nav { display: none; }
body.cl-btest-open .cl-view { height: 100vh; margin: 0; }

.cl-btest { display: grid; grid-template-columns: minmax(0, 1fr) 520px 340px; height: 100%; background: var(--white); }
@media (min-width: 1441px) { .cl-btest { grid-template-columns: minmax(0, 1fr) 560px 348px; } }
/* В узком окне (≤ 1050 px) левая колонка скрывается; селектор с родителем — чтобы правило было сильнее основного ниже */
@media (max-width: 1050px) {
  .cl-btest { grid-template-columns: minmax(0, 1fr) 340px; }
  .cl-btest > .cl-btest__blocks { display: none; }
}

/* --- левая колонка: блоки схемы --- */
.cl-btest__blocks {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--border-primary-default);
  background: var(--white);
}
.cl-btest__blocks-head { display: flex; flex-direction: column; gap: 8px; flex: none; padding: 12px 16px; border-bottom: 1px solid var(--border-primary-default); }
.cl-btest__blocks-actions { display: flex; gap: 8px; }
.cl-btest__filter.cl-btn { flex: none; gap: 6px; width: 107px; padding: 0; }
.cl-btest__send-block {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  overflow: hidden;
  border-radius: var(--radius-6);
  background: var(--brand-500);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--duration-button), color var(--duration-button);
}
.cl-btest__send-block:hover { background: var(--brand-480); }
.cl-btest__send-block:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; }
.cl-btest__send-block.is-idle, .cl-btest__send-block.is-idle:hover { background: var(--grey-100); color: var(--text-disabled); cursor: default; }

.cl-popover.cl-btest__filters-pop {
  width: 244px;
  overflow: hidden;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-8);
  background: var(--white);
  box-shadow: var(--bt-filter-shadow);
}
.cl-btest__filters { display: flex; flex-direction: column; padding: 4px 0 6px; }
.cl-btest__filters-title { padding: 10px 20px 8px; font-size: 14px; font-weight: var(--font-weight-medium); line-height: 20px; color: var(--text-primary); }

.cl-btest__list-wrap { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.cl-btest__list-scroll { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.cl-btest__list-bar { position: absolute; top: 0; right: 0; left: 0; }
.cl-btest__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-btest__list-note { padding: 48px 16px; font-size: 14px; line-height: 20px; text-align: center; color: var(--text-caption); }
.cl-btest__card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 63px;
  padding: 10px 14px 10px 12px;
  border-right: 1px solid var(--border-primary-default);
  border-bottom: 1px solid var(--border-primary-default);
  cursor: pointer;
  transition: background-color var(--duration-row);
}
.cl-btest__card:hover { background: var(--grey-50); }
.cl-btest__card.is-selected { background: var(--brand-90); }
.cl-btest__card:focus-visible { outline: 2px solid var(--border-brand); outline-offset: -2px; }
.cl-btest__strip { flex: none; width: 4px; height: 40px; border-radius: var(--radius-4); background: var(--bt-strip-state); }
.cl-btest__strip--start { background: var(--bld-block-start-fill); }
.cl-btest__strip--condition { background: var(--bld-block-condition-fill); }
.cl-btest__strip--side { background: var(--bld-block-side-fill); }
.cl-btest__strip--nostate { background: var(--bld-block-nostate-fill); }
.cl-btest__strip--comment { background: var(--grey-200); }
.cl-btest__card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cl-btest__card-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cl-btest__card-text.is-empty { font-weight: var(--font-weight-regular); color: var(--text-disabled); }
.cl-btest__card-id { font-size: 12px; line-height: 16px; color: var(--text-caption); }

/* --- средняя колонка: чат --- */
.cl-btest__chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--grey-50); }
.cl-btest__chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-primary-default);
  background: var(--white);
}
.cl-btest__chat-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-8);
  background: var(--brand-500);
  color: var(--white);
}
.cl-btest__chat-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: var(--font-weight-semibold); line-height: 20px; color: var(--text-primary); }
.cl-btest__clear.cl-btn { flex: none; gap: 6px; width: 159px; padding: 0; }

.cl-btest__feed-scroll { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 16px; overflow-y: auto; }
.cl-btest__feed { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.cl-btest__empty { display: flex; flex-direction: column; align-items: center; max-width: 400px; margin: auto; text-align: center; }
.cl-btest__empty-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--brand-500);
  color: var(--white);
}
.cl-btest__empty-title { margin-bottom: 8px; font-size: 16px; font-weight: var(--font-weight-semibold); line-height: 22px; color: var(--text-primary); }
.cl-btest__empty-text { font-size: 14px; line-height: 20px; color: var(--text-secondary); }

/* 4 px между сообщениями одной стороны, 16 px при смене стороны */
.cl-btest__feed > .cl-chatpv__msg--bot + .cl-chatpv__msg--client,
.cl-btest__feed > .cl-chatpv__msg--client + .cl-chatpv__msg--bot,
.cl-btest__feed > .cl-btest__note + .cl-chatpv__msg,
.cl-btest__feed > .cl-chatpv__msg + .cl-btest__note { margin-top: 12px; }
/* Аватар — у первого сообщения бота в группе; у следующих под него остаётся место */
.cl-btest__feed > .cl-chatpv__msg--bot + .cl-chatpv__msg--bot .cl-chatpv__avatar { height: 0; visibility: hidden; }
.cl-btest__feed .cl-chatpv__msg { flex-wrap: wrap; }
.cl-btest__msg-error { flex: 0 0 100%; padding-left: 48px; font-size: 12px; line-height: 16px; color: var(--text-danger); }
/* Ссылки при сообщении функции калькулятора (пост канала, запись на стене) — строкой под пузырём */
.cl-btest__msg-links { display: flex; flex: 0 0 100%; flex-direction: column; gap: 2px; padding-left: 48px; font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }

.cl-btest__note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  align-self: center;
  max-width: 92%;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--grey-100);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-caption);
}
.cl-btest__note-text { min-width: 0; overflow-wrap: anywhere; }
.cl-btest__note-time { flex: none; color: var(--text-disabled); }
.cl-btest__note--red { border-radius: var(--radius-8); background: var(--red-100); color: var(--red-700); }
.cl-btest__note--orange { border-radius: var(--radius-8); background: var(--orange-200); color: var(--orange-800); }

/* Запланированные сообщения и перемотка — наше дополнение, в виде карточки чата */
.cl-btest__pending {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin: 0 16px 8px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-12);
  background: var(--white);
}
.cl-btest__pending-icon { display: flex; flex: none; color: var(--icon-brand); }
.cl-btest__pending-body { flex: 1 1 auto; min-width: 0; }
.cl-btest__pending-title { font-size: 14px; font-weight: var(--font-weight-medium); line-height: 18px; color: var(--text-primary); }
.cl-btest__pending-text { overflow: hidden; font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; color: var(--text-caption); }
.cl-btest__skip.cl-btn { flex: none; gap: 2px; padding: 0 8px 0 12px; }
.cl-btest__skip.cl-btn .cl-icon { order: 2; }

.cl-btest__keyboard { flex: none; padding: 0 16px; }
.cl-btest__keyboard .cl-chatpv__buttons--keyboard { border: 1px solid var(--border-secondary-default); border-bottom: 0; }
.cl-btest__keyboard:not([hidden]) + .cl-btest__input { padding-top: 0; }
.cl-btest__keyboard:not([hidden]) + .cl-btest__input .cl-btest__input-frame { border-top-left-radius: 0; border-top-right-radius: 0; }

.cl-btest__input { flex: none; padding: 8px 16px 16px; }
.cl-btest__input-frame {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 49px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--border-secondary-default);
  border-radius: var(--radius-12);
  background: var(--white);
  cursor: text;
  transition: border-color var(--duration-input);
}
.cl-btest__input-frame:focus-within { border-color: var(--border-brand); }
.cl-btest__input-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-primary);
}
.cl-btest__input-control::placeholder { font-size: 14px; color: var(--text-disabled); }
.cl-btest__send.cl-iconbtn { flex: none; border-radius: var(--radius-8); }

/* --- правая колонка: тестовый клиент --- */
.cl-btest__client {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--border-primary-default);
  background: var(--white);
}
.cl-btest__client-head { display: flex; align-items: center; gap: 12px; flex: none; height: 75px; padding: 0 16px; }
.cl-btest__client-avatar { display: flex; flex: none; }
.cl-btest__client-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 16px; font-weight: var(--font-weight-semibold); line-height: 20px; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.cl-btest__client-body { flex: 1 1 auto; min-height: 0; padding: 0 16px 24px; overflow-y: auto; }
.cl-btest__field { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.cl-btest__field-label { flex: none; width: 128px; font-size: 14px; line-height: 24px; color: var(--text-caption); }
.cl-btest__field-value { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 24px; }
.cl-btest__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.cl-btest__chips .cl-chip { max-width: 100%; }
.cl-btest__add {
  flex: none;
  height: 24px;
  padding: 0 8px;
  border: 1px dashed var(--border-secondary-default);
  border-radius: var(--radius-4);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--duration-button), color var(--duration-button);
}
.cl-btest__add:hover, .cl-btest__add:focus-visible { border-color: var(--border-brand); color: var(--text-brand); }
.cl-btest__state { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-btest__state-none { color: var(--text-disabled); }
.cl-popover.cl-btest__picker-pop {
  width: 300px;
  overflow: hidden;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-8);
  background: var(--white);
  box-shadow: var(--bt-filter-shadow);
}
.cl-btest__picker .cl-msel-list--inline { border: 0; border-radius: 0; }

.cl-btest__vars-head { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 0 6px; border-top: 1px solid var(--border-primary-default); }
.cl-btest__vars-title { font-size: 14px; font-weight: var(--font-weight-semibold); line-height: 20px; color: var(--text-primary); }
.cl-btest__vars-count {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--grey-100);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  text-align: center;
  color: var(--text-caption);
}
.cl-btest__vars-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cl-btest__vars-new { padding: 0 4px; font-size: 14px; font-weight: var(--font-weight-medium); line-height: 24px; color: var(--text-brand); cursor: pointer; transition: color var(--duration-button); }
.cl-btest__vars-new:hover { color: var(--brand-600); }
.cl-btest__vars-search { margin: 2px 0 8px; }
.cl-btest__group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 36px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.cl-btest__group-caret { flex: none; color: var(--icon-primary-default); transition: transform var(--duration-row); }
.cl-btest__group-head.is-open .cl-btest__group-caret { transform: rotate(90deg); }
.cl-btest__group-title { flex: 1 1 auto; min-width: 0; }
.cl-btest__group-count { flex: none; font-size: 12px; font-weight: var(--font-weight-regular); color: var(--text-caption); }
.cl-btest__group-body { padding: 0 0 6px 22px; }
.cl-btest__group-empty { font-size: 14px; line-height: 28px; color: var(--text-disabled); }
.cl-btest__var { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 14px; line-height: 20px; }
.cl-btest__var-name { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--icon-primary-default); }
.cl-btest__var-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-brand); }
.cl-btest__var-value.is-empty { color: var(--text-disabled); }
.cl-btest__var-actions { display: flex; flex: none; gap: 2px; }
.cl-btest__var-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-4);
  color: var(--icon-primary-default);
  cursor: pointer;
  visibility: hidden;
  transition: color var(--duration-button);
}
.cl-btest__var:hover .cl-btest__var-btn, .cl-btest__var:focus-within .cl-btest__var-btn, .cl-btest__var-star.is-on { visibility: visible; }
.cl-btest__var-btn:hover { color: var(--text-brand); }
.cl-btest__var-star.is-on, .cl-btest__var-star:hover { color: var(--w-star); }

/* ============ Страница «История изменений» ============ */
/* Цепочка в шапке приложения: «← Конструктор › История изменений · проект» */
.cl-bhist-crumbs { display: inline-flex; align-items: center; gap: 8px; height: var(--header-height); vertical-align: top; }
.cl-bhist-crumbs__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--grey-600);
  transition: color var(--duration-button);
}
.cl-bhist-crumbs__back:hover { color: var(--text-brand); }
.cl-bhist-crumbs__sep { font-size: 16px; font-weight: var(--font-weight-regular); line-height: 20px; color: var(--grey-400); }
.cl-bhist-crumbs__title { font-size: 16px; font-weight: var(--font-weight-semibold); line-height: 20px; color: var(--text-primary); }
.cl-bhist-crumbs__project { font-size: 14px; font-weight: var(--font-weight-regular); line-height: 20px; color: var(--grey-500); }

.cl-bhist-scroll { background: var(--background-page); }
.cl-bhist { max-width: 1320px; margin: 0 auto; padding: 20px; }
.cl-bhist__cols { display: flex; align-items: flex-start; gap: 16px; }
.cl-bhist__main { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-width: 0; }
.cl-bhist__side { display: flex; flex-direction: column; gap: 16px; flex: none; width: 320px; }
.cl-bhist__title { font-size: 18px; font-weight: var(--font-weight-semibold); line-height: 24px; color: var(--text-primary); }
.cl-bhist__object-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* --- карточка отбора --- */
.cl-bhist__filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-12);
  background: var(--white);
}
.cl-bhist__filter-row { display: flex; align-items: center; gap: 16px; min-height: 40px; }
.cl-bhist__filter-group { display: flex; align-items: center; gap: 12px; }
.cl-bhist__filter-label { flex: none; font-size: 14px; font-weight: var(--font-weight-medium); line-height: 20px; color: var(--text-caption); }
.cl-bhist__sheet-select { flex: none; width: 205px; }
.cl-bhist__moves { flex: none; }
.cl-bhist__moves .cl-toggle__input:not(:checked) + .cl-toggle__track { background: var(--grey-300); }
.cl-bhist__found { flex: none; margin-left: auto; font-size: 14px; line-height: 20px; color: var(--text-caption); }
.cl-bhist__found b { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.cl-bhist__period.cl-tabs--segment { gap: 0; padding: 3px; border-radius: var(--radius-10); background: var(--grey-100); }
.cl-bhist__period.cl-tabs--segment .cl-tab { height: 32px; padding: 6px 13px; border-radius: var(--radius-8); color: var(--text-caption); }
.cl-bhist__period.cl-tabs--segment .cl-tab:hover { background: transparent; color: var(--text-primary); }
.cl-bhist__period.cl-tabs--segment .cl-tab.is-active,
.cl-bhist__period.cl-tabs--segment .cl-tab.is-active:hover { background: var(--white); box-shadow: var(--bt-segment-shadow); color: var(--text-primary); }

/* --- лента правок --- */
.cl-bhist__feed { display: flex; flex-direction: column; gap: 20px; }
.cl-bhist__day { display: flex; flex-direction: column; gap: 10px; }
.cl-bhist__day-head { display: flex; align-items: center; gap: 12px; }
.cl-bhist__day-pill {
  flex: none;
  padding: 5px 14px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  color: var(--text-primary);
}
.cl-bhist__day-count, .cl-bhist__day-range { flex: none; font-size: 14px; line-height: 20px; color: var(--text-caption); }
.cl-bhist__day-line { flex: 1 1 auto; height: 1px; background: var(--border-primary-default); }
.cl-bhist__events { border: 1px solid var(--border-primary-default); border-radius: var(--radius-12); background: var(--white); }
.cl-bhist__event { position: relative; padding: 12px 16px 12px 18px; }
.cl-bhist__event + .cl-bhist__event { border-top: 1px solid var(--border-tertiary-default); }
.cl-bhist__event-line { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 14px; line-height: 20px; }
.cl-bhist__tag { flex: none; padding: 2px 5px; border-radius: var(--radius-4); font-size: 12px; line-height: 16px; }
.cl-bhist__tag--create { background: var(--green-200); color: var(--green-700); }
.cl-bhist__tag--update { background: var(--brand-100); color: var(--brand-500); }
.cl-bhist__tag--delete { background: var(--red-200); color: var(--red-700); }
.cl-bhist__object { flex: none; font-weight: var(--font-weight-semibold); color: var(--text-brand); transition: color var(--duration-button); }
.cl-bhist__object:hover { color: var(--brand-600); text-decoration: underline; }
.cl-bhist__object.is-gone { color: var(--grey-600); }
.cl-bhist__object.is-gone:hover { color: var(--text-primary); }
.cl-bhist__quote { min-width: 0; color: var(--text-secondary); }
.cl-bhist__sheet { flex: none; color: var(--text-caption); }
/* Имя сделавшего правку — перед временем; когда оно есть, вправо строку прижимает оно */
.cl-bhist__user { flex: 0 1 auto; min-width: 0; max-width: 220px; margin-left: auto; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-caption); }
.cl-bhist__user + .cl-bhist__time { margin-left: 0; }
.cl-bhist__time { flex: none; min-width: 36px; margin-left: auto; padding-left: 8px; text-align: right; color: var(--text-caption); }
/* Кнопки события появляются при наведении на строку — слева от времени, поверх хвоста текста */
.cl-bhist__actions {
  position: absolute;
  top: 5px;
  right: 64px;
  display: flex;
  gap: 8px;
  padding-left: 12px;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-row);
}
.cl-bhist__actions:empty { display: none; }
.cl-bhist__event:hover .cl-bhist__actions, .cl-bhist__event:focus-within .cl-bhist__actions { opacity: 1; pointer-events: auto; }

.cl-bhist__changes { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--border-primary-default); }
.cl-bhist__change { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 20px; }
.cl-bhist__change-name { flex: none; width: 150px; padding-top: 3px; font-weight: var(--font-weight-medium); color: var(--grey-600); overflow-wrap: anywhere; }
.cl-bhist__change-values { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; }
.cl-bhist__value { max-width: 100%; padding: 3px 8px; border-radius: var(--radius-6); white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-bhist__value--old { background: var(--bt-old-fill); color: var(--bt-old-text); }
.cl-bhist__value--new { background: var(--bt-new-fill); color: var(--bt-new-text); }
.cl-bhist__value.is-empty { font-style: italic; opacity: .75; }
.cl-bhist__arrow { flex: none; padding-top: 3px; color: var(--text-caption); }
.cl-bhist__empty { padding: 32px 16px; border: 1px solid var(--border-primary-default); border-radius: var(--radius-12); background: var(--white); }
.cl-bhist__more { display: flex; justify-content: center; min-height: 34px; }

/* --- правая колонка: версии --- */
.cl-bhist__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-12);
  background: var(--white);
}
.cl-bhist__card-head { display: flex; align-items: center; gap: 10px; }
.cl-bhist__card-head--row { justify-content: space-between; }
.cl-bhist__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-8);
  background: var(--brand-100);
  color: var(--icon-brand);
}
.cl-bhist__card-title { font-size: 16px; font-weight: var(--font-weight-semibold); line-height: 20px; color: var(--text-primary); }
.cl-bhist__card-sub, .cl-bhist__card-count { font-size: 12px; line-height: 16px; color: var(--text-caption); }
.cl-bhist__card-note { font-size: 12px; line-height: 16px; color: var(--text-caption); }
.cl-bhist__snaps { display: flex; flex-direction: column; gap: 8px; }
.cl-bhist__snaps-empty { font-size: 14px; line-height: 20px; color: var(--text-caption); }
.cl-bhist__snap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-10);
  background: var(--white);
}
.cl-bhist__snap.is-latest { border-color: var(--bt-accent-border); background: var(--brand-50); }
.cl-bhist__snap-head { display: flex; align-items: flex-start; gap: 8px; }
.cl-bhist__snap-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grey-100);
  color: var(--icon-primary-default);
}
.cl-bhist__snap-info { flex: 1 1 auto; min-width: 0; }
.cl-bhist__snap-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: var(--font-weight-medium); line-height: 20px; color: var(--text-primary); }
.cl-bhist__snap-auto { flex: none; padding: 0 6px; border-radius: var(--radius-4); background: var(--grey-100); font-size: 12px; font-weight: var(--font-weight-regular); line-height: 18px; color: var(--text-caption); }
.cl-bhist__snap-date { font-size: 12px; line-height: 16px; color: var(--text-caption); }
.cl-bhist__snap-stats { display: flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 16px; white-space: pre; color: var(--text-caption); }
.cl-bhist__snap-stats b { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.cl-bhist__snap-size { margin-left: auto; }
.cl-bhist__snap-actions { display: flex; align-items: center; gap: 6px; }
.cl-bhist__snap-actions .cl-btn { --btn-pad: 10px; }
.cl-bhist__snap-download { margin-left: auto; }

/* --- «Что изменилось» --- */
.cl-bhist__diff { display: flex; flex-direction: column; gap: 16px; }
.cl-bhist__diff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border-primary-default);
  border-radius: var(--radius-12);
  background: var(--white);
}
.cl-bhist__diff-titles { min-width: 0; }
.cl-bhist__diff-summary { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text-caption); }
.cl-bhist__diff-summary b { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.cl-bhist__diff-actions { display: flex; gap: 8px; flex: none; }
.cl-bhist__diff-list { display: flex; flex-direction: column; gap: 12px; }