/* ======================================================================
   Виджет ИИ-менеджера: оформление под сайт. 12.09.2026

   Плагин рисовал чат оранжевым — цветом, которого на сайте нет нигде,
   кроме кнопок действия. Переводим на изумрудный: шапка, аватар и
   реплики человека в цвете сайта, оранжевым остаётся только кнопка
   отправки — она и на сайте означает «сделать».

   Файл лежит в теме и подключается отдельно, файлы плагина не
   тронуты: откат — снять подключение.
   ====================================================================== */

/* ---------------------------------------------------------- окно чата */
#chatbot.chatbot {
  width: 396px !important;
  max-height: 566px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 18px !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  right: 24px !important;
  bottom: 24px !important;
  box-shadow: 0 18px 48px rgba(4, 40, 33, .28),
              0 2px 8px rgba(4, 40, 33, .12) !important;
}

/* ------------------------------------------------------------- шапка */
/* Была 110 пикселей высотой — четверть окна уходила на заголовок. */
#chatbot .chatbot-header {
  background: linear-gradient(135deg, #04624C 0%, #0A7A62 100%) !important;
  padding: 13px 16px !important;
  align-items: center !important;
}

#chatbot .chatbot-manager-wrapper {
  gap: 12px !important;
  margin-bottom: 0 !important;
  align-items: center !important;
}

#chatbot .chatbot-avatar {
  width: 42px !important;
  height: 42px !important;
  background: #fff;
  padding: 3px;
  box-shadow: 0 0 0 2px rgba(127, 231, 212, .45);
}

#chatbot .chatbot-manager-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .1px;
}

#chatbot .chatbot-manager-greeting {
  font-size: 12.5px !important;
  color: #7FE7D4 !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}

#chatbot .chatbot-close {
  width: 26px !important;
  height: 26px !important;
  opacity: .8;
  transition: opacity .15s;
  align-self: center;
  /* Значок закрытия тёмный — на изумрудной шапке он терялся. */
  filter: brightness(0) invert(1);
}

#chatbot .chatbot-close:hover { opacity: 1; }

/* --------------------------------------------- полоса про испытание */
/* Была бледно-оранжевой — единственное пятно чужого цвета под шапкой. */
#chatbot .thb-polosa {
  background: #EAF5F1 !important;
  border-bottom: 1px solid #D3E8E0 !important;
  padding: 9px 14px !important;
  gap: 10px !important;
}

#chatbot .thb-polosa-text {
  color: #3F6B5E !important;
  font-size: 12px !important;
}

#chatbot .thb-polosa-knopka {
  border: 1px solid #04624C !important;
  background: #fff !important;
  color: #04624C !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-radius: 9px !important;
  transition: background .15s, color .15s;
}

#chatbot .thb-polosa-knopka:hover {
  background: #04624C !important;
  color: #fff !important;
}

/* -------------------------------------------------------- лента реплик */
/* Высота была прибита к 360 пикселям, от окна оставалось меньше
   половины и начало приветствия уезжало под верхний край. */
#chatbot .chatbot-body {
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: #F4F7F6 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 16px 14px !important;
  gap: 9px !important;
  scrollbar-color: #C9D8D2 transparent;
}

#chatbot .chatbot-body::-webkit-scrollbar-thumb {
  background-color: #C9D8D2;
}

/* Реплики ИИ — белые карточки, реплики человека — изумрудные. */
#chatbot .chatbot-ask {
  background: #fff !important;
  color: #17302A !important;
  border-radius: 14px 14px 14px 5px !important;
  padding: 10px 13px !important;
  max-width: 86% !important;
  line-height: 1.45;
  box-shadow: 0 2px 10px rgba(4, 40, 33, .08) !important;
}

#chatbot .chatbot-answer {
  background: #04624C !important;
  color: #fff !important;
  border-radius: 14px 14px 5px 14px !important;
  padding: 10px 13px !important;
  max-width: 86% !important;
  line-height: 1.45;
  box-shadow: 0 2px 10px rgba(4, 40, 33, .14) !important;
}

#chatbot .chatbot-ask a { color: #04624C; }
#chatbot .chatbot-answer a { color: #7FE7D4; }

/* Точки «печатает» — в цвет ленты, а не оранжевые. */
#chatbot .chatbot-tri i { background: #04624C !important; }

/* --------------------------------------------------- форма контактов */
#chatbot .chatbot-form {
  background: #fff !important;
  border: 1px solid #D9E6E1 !important;
  border-radius: 14px !important;
  padding: 15px !important;
  align-items: stretch !important;
  box-shadow: 0 2px 10px rgba(4, 40, 33, .07);
}

#chatbot .chatbot-form-button {
  background: #FF5C00 !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 10px !important;
  padding: 11px 18px !important;
  transition: background .15s;
}

#chatbot .chatbot-form-button:hover { background: #E65200 !important; }

#chatbot .thb-soglasie input[type=checkbox] { accent-color: #04624C !important; }
#chatbot .thb-soglasie a { color: #04624C !important; }

/* ------------------------------------------------------ поле и отправка */
#chatbot .chatbot-footer {
  background: #fff !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid #E4EDE9 !important;
  height: auto !important;
  padding: 10px 12px !important;
}

#chatbot .chatbot-input {
  height: 42px !important;
  margin-bottom: 0 !important;
  border: 1px solid #DCE7E3 !important;
  border-radius: 11px !important;
  padding: 5px 48px 5px 13px !important;
  box-shadow: none !important;
  background: #F7FAF9 !important;
  transition: border-color .15s, background .15s;
}

#chatbot .chatbot-input:focus {
  outline: none !important;
  border-color: #04624C !important;
  background: #fff !important;
}

/* Оранжевым остаётся одно — кнопка действия, как и на сайте. */
#chatbot .chatbot-button {
  width: 34px !important;
  height: 34px !important;
  right: 20px !important;
  /* Сдвиг задаём отступом, а не transform: у плагина свой transform,
     и два подряд уводили кнопку выше поля. */
  top: 50% !important;
  margin-top: -17px !important;
  transform: none !important;
  border-radius: 9px !important;
  background-color: #FF5C00 !important;
  background-size: 20px 20px !important;
  background-position: center !important;
  transition: background-color .15s;
}

#chatbot .chatbot-button:hover { background-color: #E65200 !important; }

/* ------------------------------------------------- кнопка вызова чата */
.mobile-chatbot {
  background: linear-gradient(135deg, #04624C 0%, #0A7A62 100%) !important;
  opacity: 1 !important;
  box-shadow: 0 6px 18px rgba(4, 40, 33, .32) !important;
  transition: transform .15s, box-shadow .15s;
}

.mobile-chatbot:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(4, 40, 33, .38) !important;
}

/* --------------------------------------------------------- на телефоне */
@media (max-width: 992px) {
  #chatbot.chatbot {
    width: 100% !important;
    max-height: 100% !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
  }
}