/* Mary Belle — чат-бот для gov.mary-belle.ru.
 * СОБРАН АВТОМАТИЧЕСКИ из src/components/bot/mb-bot-engine.js.
 * Не редактировать здесь: правки затрутся следующей сборкой.
 * Пересобрать: node scripts/build-bot-widget.mjs
 */
/*
 * Чат-бот Mary Belle. Один файл на оба сайта.
 *
 * Позиционирование считается от переменных нижнего стека. На gov этих
 * переменных нет — var(…, 0px) даёт ноль, и файл остаётся общим. Тот же приём
 * применён у пилюли квиза.
 *
 * ⚠ Мобильная и десктопная формулы РАЗНЫЕ, и это не небрежность. На узком
 * экране пилюля квиза и панель кнопок идут во всю ширину и складываются
 * друг на друга — учитываем обе. На десктопе пилюля стоит СЛЕВА, а кнопки
 * справа: там она в расчёт не идёт, иначе кнопка уезжает вверх в пустоту.
 * Обе ошибки уже были допущены — сначала на «наверх», потом здесь.
 *
 * Z-шкала проекта: FloatingCTA 40 → BackToTop 45 → FAB бота 46 →
 * модалка обратного звонка 50 → пилюля квиза 100 → панель бота 9999 →
 * оверлей квиза 99999. Панель ниже оверлея квиза намеренно: если квиз
 * всё-таки откроется поверх, он должен быть сверху.
 */

.mb-bot-fab {
  position: fixed;
  right: 24px;
  z-index: 46;
  bottom: calc(24px + var(--mb-cookie-h, 0px) + var(--mb-pill-h, 0px) + var(--mb-cta-h, 0px));
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #1c1410;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .16);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mb-bot-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, .22); }
.mb-bot-fab svg { width: 24px; height: 24px; }
.mb-bot-fab[hidden] { display: none !important; }

@media (min-width: 768px) {
  .mb-bot-fab {
    width: 56px; height: 56px;
    bottom: calc(24px + var(--mb-cookie-h, 0px) + var(--mb-fab-h, 0px));
  }
}

.mb-bot-panel {
  position: fixed;
  z-index: 9999;
  right: 16px;
  bottom: calc(16px + var(--mb-cookie-h, 0px));
  width: min(420px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .24);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .24s ease, transform .24s ease;
  font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1c1410;
}
.mb-bot-panel.is-open { opacity: 1; transform: translateY(0); }

/* На узком экране разговор занимает лист целиком: полупрозрачных окошек
   поверх контента на телефоне никто не любит. */
@media (max-width: 520px) {
  .mb-bot-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }
}

.mb-bot-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #ece8e3;
  background: #faf8f6;
}
.mb-bot-head__t { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.mb-bot-head__t strong { font-size: 16px; font-weight: 600; }
.mb-bot-head__t span { font-size: 13px; color: #8a8078; }
.mb-bot-x, .mb-bot-back {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #8a8078; cursor: pointer; border-radius: 8px;
}
.mb-bot-x:hover, .mb-bot-back:hover { background: #efeae4; color: #1c1410; }
.mb-bot-x svg, .mb-bot-back svg { width: 18px; height: 18px; }

.mb-bot-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}

.mb-bot-msg { display: flex; }
.mb-bot-msg--user { justify-content: flex-end; }
.mb-bot-bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  background: #f4f1ed;
}
.mb-bot-msg--user .mb-bot-bubble { background: #1c1410; color: #fff; }
/* color: inherit обязателен: тема gov красит все абзацы правилом
   p { color: #333 }, и реплика пользователя (белый на тёмном) становилась
   тёмным по тёмному. */
.mb-bot-p { margin: 0 0 9px; font-size: 16px; white-space: pre-line; color: inherit; }
.mb-bot-p:last-child { margin-bottom: 0; }
.mb-bot-p--strong { font-weight: 600; }
.mb-bot-typing { color: #8a8078; font-style: italic; }

.mb-bot-imgs { display: flex; gap: 6px; margin-top: 10px; }
.mb-bot-imgs img {
  width: 33%; height: 110px; object-fit: cover; border-radius: 8px; display: block;
}

.mb-bot-links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mb-bot-link { font-size: 15px; color: #8a6a3f; text-decoration: underline; }

.mb-bot-choices { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 4px; }
.mb-bot-choice {
  padding: 9px 15px;
  border: 1px solid #ddd5cb;
  border-radius: 999px;
  background: #fff;
  color: #1c1410;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.mb-bot-choice:hover { background: #f4f1ed; border-color: #b99a6b; }
/* «Позвонить» — ссылка tel:, выделена цветом: единственное действие в
   меню, которое сразу приводит к разговору с человеком. */
a.mb-bot-choice { display: inline-flex; align-items: center; text-decoration: none; line-height: 1.35; }
.mb-bot-choice--call { background: #8a6a3f; border-color: #8a6a3f; color: #fff; }
.mb-bot-choice--call:hover { background: #74593a; border-color: #74593a; color: #fff; }
/* Номер в разделе «Позвонить»: крупно, чтобы с компьютера его было удобно
   набрать на телефоне. */
.mb-bot-tel {
  display: inline-block; margin-top: 10px;
  font-size: 22px; font-weight: 600; letter-spacing: .01em;
  color: #1c1410; text-decoration: none; border-bottom: 1px dashed #b99a6b;
}

.mb-bot-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.mb-bot-field { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: #8a8078; }
.mb-bot-input {
  padding: 10px 12px; border: 1px solid #ddd5cb; border-radius: 10px;
  font-size: 16px; color: #1c1410; background: #fff;
}
.mb-bot-input:focus { outline: none; border-color: #b99a6b; }
.mb-bot-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #8a8078; }
.mb-bot-consent input { margin-top: 2px; }
.mb-bot-err { font-size: 13px; color: #c0392b; }
.mb-bot-err[hidden] { display: none; }
.mb-bot-submit {
  padding: 11px 16px; border: none; border-radius: 10px;
  background: #8a6a3f; color: #fff; font-size: 16px; cursor: pointer;
}
.mb-bot-submit:disabled { opacity: .6; cursor: default; }

/* Тема gov задаёт свой шрифт всем button/input — без этого варианты ответа
   и поле ввода набраны не тем шрифтом, что остальной текст бота. */
.mb-bot-choice, .mb-bot-input, .mb-bot-ask, .mb-bot-submit { font-family: inherit; line-height: 1.35; }

/* Honeypot: поле для ботов, человек его не видит и не таббается в него. */
.mb-bot-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.mb-bot-askrow {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px; border-top: 1px solid #ece8e3; background: #faf8f6;
}
.mb-bot-ask {
  flex: 1; padding: 9px 12px; border: 1px solid #ddd5cb; border-radius: 999px;
  font-size: 16px; background: #fff; color: #1c1410;
}
.mb-bot-ask:focus { outline: none; border-color: #b99a6b; }
.mb-bot-sendbtn {
  width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: #8a6a3f; color: #fff; cursor: pointer;
}
.mb-bot-sendbtn svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .mb-bot-panel, .mb-bot-fab { transition: none; }
}

/* Прайс: две колонки, цена прижата вправо — так его читают глазами,
   а не вычитывают из абзаца. */
.mb-bot-price {
  margin-top: 10px;
  border-top: 1px solid #e6e0d8;
}
.mb-bot-price__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #e6e0d8;
  font-size: 15px;
  line-height: 1.35;
}
.mb-bot-price__name { color: #1c1410; }
.mb-bot-price__val { color: #8a6a3f; font-weight: 600; white-space: nowrap; }

.mb-bot-note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6f665e;
}

/* Десктоп крупнее. Основной текст на gov — 18–21px, на mary-belle — 18px;
   бот с 16px рядом с ними читался мелким (замечание Ивана 11.09). Всё
   поднято примерно на пятую часть, панель шире, чтобы строки не дробились.
   Мобильный не трогаем: там 16px и лист во всю ширину. */
@media (min-width: 768px) {
  .mb-bot-panel {
    width: min(480px, calc(100vw - 32px));
    max-height: min(780px, calc(100vh - 96px));
    font-size: 18px;
  }
  .mb-bot-head { padding: 14px 16px; }
  .mb-bot-head__t strong { font-size: 18px; }
  .mb-bot-head__t span { font-size: 14.5px; }
  .mb-bot-x, .mb-bot-back { width: 36px; height: 36px; }
  .mb-bot-x svg, .mb-bot-back svg { width: 20px; height: 20px; }
  .mb-bot-body { padding: 18px 16px; gap: 12px; }
  .mb-bot-bubble { padding: 12px 15px; }
  .mb-bot-p { font-size: 18px; margin-bottom: 10px; }
  .mb-bot-imgs img { height: 130px; }
  .mb-bot-link { font-size: 17px; }
  .mb-bot-choices { gap: 8px; }
  .mb-bot-choice { font-size: 17px; padding: 10px 17px; }
  .mb-bot-field { font-size: 15px; }
  .mb-bot-input { font-size: 17px; padding: 11px 13px; }
  .mb-bot-consent, .mb-bot-err { font-size: 14.5px; }
  .mb-bot-submit { font-size: 17px; padding: 12px 18px; }
  .mb-bot-askrow { padding: 12px 14px; }
  .mb-bot-ask { font-size: 17px; padding: 10px 14px; }
  .mb-bot-sendbtn { width: 40px; height: 40px; }
  .mb-bot-sendbtn svg { width: 19px; height: 19px; }
  .mb-bot-price__row { font-size: 17px; padding: 8px 0; }
  .mb-bot-note { font-size: 15.5px; }
}