/* Раскладка страниц портала ботов.
 *
 * Всё, что есть в RobX, берётся оттуда: шапка и кнопки .rx-btn — из
 * rx-shell.css, модалки и поля — из modal.css. Здесь только то, чего в
 * общих файлах нет: сетка страницы и карточки списка ботов. Геометрия
 * повторяет lk/models.php (.mdl-wrap / .mdl-page-h / .mdl-card).
 */

/* Пока Vue не смонтировался, шаблон с {{ }} показывать нельзя. */
[v-cloak] { display: none; }

/* ── Страница ── */
.bb-wrap {
  margin: 0 8px;
  padding: 18px 24px 40px;
}

.bb-page-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 20px;
  flex-wrap: wrap;
}

.bb-page-h h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.5px;
  color: #202124;
  margin: 0;
}

.bb-page-sub {
  font-size: 13.5px;
  color: #80868b;
  margin-top: 4px;
}

/* ── Карточка (стекло RobX) ── */
.bb-card {
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(60,64,67,.04);
  padding: 20px 22px;
}

.bb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 8px;
  color: #80868b;
  background: rgba(255,255,255,.45);
  border: 1px dashed rgba(37,99,235,.2);
  border-radius: 18px;
  min-height: 240px;
}

.bb-empty i { font-size: 40px; color: #2563eb; opacity: .55; margin-bottom: 6px; }
.bb-empty p { margin: 0; font-size: 14px; }

/* ── Загрузка ──
   Пока данные едут, страница не должна быть пустой. Вид тот же, что у
   .loading-screen/.spinner в lk/models.php, но кольцо нарисовано на CSS:
   иконочный шрифт к первой отрисовке может ещё не приехать. */
.bb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  min-height: 240px;
  color: #80868b;
  font-size: 14px;
}

.bb-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(37,99,235,.18);
  border-top-color: #2563eb;
  animation: bb-spin .9s linear infinite;
}

@keyframes bb-spin { to { transform: rotate(360deg); } }

/* ── Список ботов ── */
.bb-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bb-bot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.bb-bot-id {
  flex: none;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s;
}

.bb-bot-id:hover { background: rgba(37,99,235,.18); }

.bb-bot-main { flex: 1 1 220px; min-width: 0; }

.bb-bot-name {
  font-size: 16px;
  font-weight: 600;
  color: #202124;
  text-decoration: none;
}

.bb-bot-name:hover { color: #1d4ed8; }

.bb-bot-comment {
  font-size: 12.5px;
  color: #80868b;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

/* Метки бота — колонкой: канал сверху, режим работы под ним. */
.bb-bot-tags {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.bb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.bb-badge i { font-size: 12px; }

/* Канал MAX — фиолетовый, как фирменный цвет мессенджера. */
.bb-badge-max {
  background: rgba(91,43,224,.10);
  color: #5b2be0;
}

/* Режим работы — приглушённый: он второстепеннее канала. */
.bb-badge-quiet {
  background: rgba(15,23,42,.06);
  color: #4a5870;
}

.bb-bot-stats {
  flex: none;
  display: flex;
  gap: 20px;
}

.bb-stat {
  min-width: 64px;
}

.bb-stat-wide { min-width: 112px; }

.bb-stat-v {
  font-size: 19px;
  font-weight: 700;
  color: #202124;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.bb-stat-date { font-size: 15px; }

.bb-stat-k {
  font-size: 11.5px;
  color: #80868b;
}

.bb-bot-actions {
  flex: none;
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Круглые кнопки RobX (.rx-icon-btn) рассчитаны на svg — у нас иконки
   шрифтовые, поэтому задаём им размер. */
.bb-bot-actions .rx-icon-btn i { font-size: 16px; }

.bb-icon-danger { color: #d93025; }
.bb-icon-danger:hover {
  color: #b3261e;
  box-shadow: inset 0 0 0 1.5px rgba(217,48,37,.5);
}

/* ── Вход ── */
.bb-login {
  max-width: 460px;
  margin: 40px auto;
  padding: 0 16px;
}

.bb-login h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.4px;
  color: #202124;
  margin: 0 0 12px;
}

.bb-login p { font-size: 14px; color: #4a5870; line-height: 1.55; }

.bb-login .rx-btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 14px; }

.bb-note {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(37,99,235,.06);
  color: #4a5870;
  font-size: 13px;
  line-height: 1.5;
}

.bb-error {
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(217,48,37,.08);
  color: #d93025;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  /* Узко: имя занимает всю первую строку, метки и счётчики переезжают
     на вторую — вместе с кнопками, чтобы не висеть отдельной строкой. */
  .bb-bot { row-gap: 10px; gap: 12px; }
  .bb-bot-main { flex: 1 1 100%; }
  .bb-bot-tags { flex-direction: row; flex-wrap: wrap; }
  .bb-bot-stats { flex: 1 1 auto; gap: 14px; }
  .bb-stat { min-width: 0; }
  .bb-stat-wide { min-width: 0; }
}

@media (max-width: 700px) {
  .bb-wrap { padding: 14px 12px 32px; margin: 0; }
  .bb-page-h h1 { font-size: 24px; }
  .bb-bot-stats { gap: 14px; flex-wrap: wrap; }
  .bb-bot-actions { margin-left: 0; }
}

/* ── Полоса конкретного бота (botbar.php) ──
   Отвечает на два вопроса: какой это бот и куда вернуться. Высота полосы —
   44px; экраны, которые считают высоту от 100vh, вычитают её вместе с полями
   (см. chat-shell.css, scenario-shell.css). */
.bb-botbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  margin: 10px 24px 0;
  padding: 0 6px 0 4px;
  box-sizing: border-box;
}

.bb-botbar-back {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(60,64,67,.06);
  color: #3c4043;
  font-size: 14px;
  text-decoration: none;
  transition: color .15s, background .15s;
}

.bb-botbar-back:hover { color: #1a73e8; background: #fff; }

.bb-botbar-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.bb-botbar-kicker {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #80868b;
}

.bb-botbar-name {
  font-size: 15px;
  font-weight: 700;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .bb-botbar { margin: 10px 12px 0; gap: 8px; }
}

/* ── Экран «API» (api.php) ──
   Ключ и краткая инструкция по методам. Карточки те же (.bb-card), сверху
   докладываются только заголовки разделов, таблица полей и блок с командой:
   её должно быть удобно прочитать глазами и забрать кнопкой целиком. */
/* Ширину экран занимает всю, как «Мои боты»: колонка в 900px на широком
   мониторе жалась к левому краю, а справа оставалась пустота. Длину строки
   держат не поля страницы, а сам текст — см. .bb-api-prose ниже. */
.bb-api .bb-card + .bb-card { margin-top: 12px; }

.bb-api-h2 {
  font-size: 19px;
  font-weight: 600;
  color: #202124;
  margin: 26px 0 6px;
}

.bb-api-lead {
  font-size: 13.5px;
  color: #5f6368;
  margin: 0 0 12px;
  line-height: 1.55;
}

/* Абзацы держим в разумной длине строки: карточка идёт во всю ширину, а
   читать текст, размазанный на весь монитор, невозможно. Таблицы, команды и
   поля ширину занимают всю — им она на пользу. */
.bb-api-lead,
.bb-api-note,
.bb-api-about,
.bb-api-plain p { max-width: 78ch; }

.bb-api code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .93em;
  background: rgba(37,99,235,.07);
  border-radius: 5px;
  padding: 1px 5px;
  color: #1a3a6b;
}

/* ── Ключ ── */
.bb-api-key-h {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bb-api-key-h h2 {
  font-size: 17px;
  font-weight: 600;
  color: #202124;
  margin: 0;
}

.bb-api-key-h h2 i { color: #1a73e8; margin-right: 6px; font-size: 15px; }

/* Внутри карточки индикатор идёт строкой: полноэкранный (240px) раздвинул бы
   её на треть экрана ради одной короткой строки. */
.bb-api-key .bb-loading {
  flex-direction: row;
  min-height: 0;
  padding: 8px 0;
  justify-content: flex-start;
  gap: 10px;
}

.bb-api-key .bb-spinner { width: 18px; height: 18px; border-width: 2px; }

.bb-api-key-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Ключ — моноширинным и с запасом по ширине: у точек и у знаков она разная,
   и при показе строка не должна прыгать. Селектор из двух классов, потому что
   это тоже <code>, а общее правило `.bb-api code` иначе перебивает его своим
   фоном и мелким шрифтом. */
.bb-api-key-row .bb-api-key-value {
  flex: 0 1 560px;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .06em;
  color: #202124;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(60,64,67,.14);
  border-radius: 10px;
  padding: 10px 14px;
}

.bb-api-note {
  font-size: 13px;
  color: #5f6368;
  line-height: 1.55;
  margin: 12px 0 0;
}

/* ── Метод ── */
.bb-api-method-h {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bb-api-method-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(37,99,235,.1);
  color: #1a73e8;
  font-size: 14px;
}

.bb-api-method-id { min-width: 0; }

.bb-api-method-id h3 {
  font-size: 16px;
  font-weight: 600;
  color: #202124;
  margin: 0;
}

.bb-api-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #5f6368;
  margin-top: 3px;
  overflow-x: auto;
  white-space: nowrap;
}

.bb-api-verb {
  font-weight: 700;
  color: #1a73e8;
  margin-right: 4px;
}

.bb-api-about {
  font-size: 13.5px;
  color: #5f6368;
  line-height: 1.55;
  margin: 12px 0 0;
}

/* Тело метода: слева поля, справа готовая команда. На узком экране колонка
   одна и они встают друг под друга — как и были. */
.bb-api-method-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.bb-api-method-body > .bb-api-fields,
.bb-api-method-body > .bb-api-code { margin-top: 0; }

@media (min-width: 1100px) {
  .bb-api-method-body { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.15fr); }
}

/* Справочные карточки — парой: каждая короткая, вдвоём занимают ширину. */
.bb-api-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.bb-api-pair .bb-card + .bb-card { margin-top: 0; }

@media (min-width: 1100px) {
  .bb-api-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Поля и коды ошибок ── */
.bb-api-fields {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
  color: #3c4043;
}

.bb-api-fields td {
  padding: 7px 10px 7px 0;
  border-top: 1px solid rgba(60,64,67,.1);
  vertical-align: top;
  line-height: 1.5;
}

.bb-api-fields tr:first-child td { border-top: none; }
.bb-api-fields td:first-child { white-space: nowrap; width: 1%; }
.bb-api-fields-t { color: #80868b; white-space: nowrap; }

/* ── Готовая команда ── */
.bb-api-code {
  position: relative;
  margin-top: 14px;
}

.bb-api-code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: 12px;
  background: #1f2733;
  color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}

/* Кнопка лежит поверх команды в углу — так она не отнимает у неё строку.
   На узком экране команда всё равно прокручивается, а кнопка стоит на месте. */
.bb-api-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1);
  color: #e6edf3;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}

.bb-api-copy:hover { background: rgba(255,255,255,.2); }

/* ── Ответы и разметка ── */
.bb-api-plain h2 {
  font-size: 17px;
  font-weight: 600;
  color: #202124;
  margin: 0 0 10px;
}

.bb-api-plain h2 i { color: #1a73e8; margin-right: 6px; font-size: 15px; }

.bb-api-plain p {
  font-size: 13.5px;
  color: #5f6368;
  line-height: 1.55;
  margin: 0 0 10px;
}

.bb-api-plain pre {
  margin: 0 0 12px;
  padding: 10px 14px;
  overflow-x: auto;
  border-radius: 10px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(60,64,67,.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #202124;
}

@media (max-width: 640px) {
  .bb-api-key-row .rx-btn { flex: 1 1 auto; justify-content: center; }
  .bb-api-fields td:first-child { white-space: normal; }
  .bb-api-fields-t { white-space: normal; }
}