/*
 * Окно онлайн-чата Битрикс24 под стилистику нового сайта BUNGLY.
 *
 * Токены сняты с рендера stage.bungly.ru:
 *   текст/чёрный  #0E0E0E      подложки  #F2F2F2
 *   линии         #CACCCE      акцент    #FCCC49      ошибка  #D0181F
 *   шрифт         Onest (next/font)
 *   радиусы       кнопки-пилюли 40px, остальное 4px
 *
 * Селекторы виджета сверены с CSS портала b24.bunglyboo.ru:
 *   /bitrix/js/imopenlines/widget/styles.css и imopenlines.widget.css
 *   (окно — .bx-livechat-*, сообщения и ввод — .bx-im-*)
 *
 * Цвет ШАПКИ окна задаётся НЕ здесь, а в настройках виджета в Битрикс24 («Цвет виджета»),
 * он приходит инлайновыми стилями. Два рабочих варианта под сайт:
 *   светлая шапка: «Цвет виджета» #F2F2F2, «Цвет иконок» #000000 — заголовок станет чёрным сам
 *   тёмная шапка:  «Цвет виджета» #000000, «Цвет иконок» #FFFFFF
 * Фон своих сообщений тема перебивает на #F2F2F2 независимо от этой настройки.
 *
 * Всё заскоупировано в .bx-livechat-wrapper, чтобы не влиять на сайт.
 * !important нужен: собственные стили виджета грузятся после наших.
 */

.bx-livechat-wrapper {
  /* шрифт: подрядчик объявляет next/font с variable: '--font-onest' */
  --bgl-font: var(--font-onest, 'Onest', Arial, Helvetica, sans-serif);

  --bgl-black: #000000;   /* текст — чистый чёрный по просьбе заказчика */
  --bgl-white: #ffffff;
  --bgl-line: #caccce;
  --bgl-line-soft: #e6e7e8;
  --bgl-surface: #f2f2f2;
  --bgl-accent: #fccc49;
  --bgl-error: #d0181f;
  --bgl-radius: 4px;
  --bgl-radius-pill: 40px;

  /* токены дизайн-системы Битрикса, на которые опирается виджет */
  --ui-font-family-primary: var(--bgl-font);
  --ui-font-family-secondary: var(--bgl-font);
  --ui-font-family-helvetica: var(--bgl-font);
  --ui-font-family-open-sans: var(--bgl-font);
  --ui-color-palette-black-base: var(--bgl-black);
}

.bx-livechat-wrapper,
.bx-livechat-wrapper button,
.bx-livechat-wrapper input,
.bx-livechat-wrapper textarea {
  font-family: var(--bgl-font) !important;
}

/* ---------- окно ---------- */

.bx-livechat-wrapper .bx-livechat-box {
  border-radius: var(--bgl-radius) !important;
  border: 1px solid var(--bgl-line-soft) !important;
  box-shadow: 0 12px 40px rgba(14, 14, 14, 0.14) !important;
}

/* убираем штатную SVG-подложку тела чата — на сайте плоский белый фон */
.bx-livechat-wrapper .bx-livechat-body {
  background-image: none !important;
  background-color: var(--bgl-white) !important;
}

/* на мобильных окно во весь экран, без скруглений и рамки */
.bx-livechat-wrapper.bx-livechat-mobile .bx-livechat-box {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- шапка ---------- */

.bx-livechat-wrapper .bx-livechat-title,
.bx-livechat-wrapper .bx-livechat-user-name {
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

.bx-livechat-wrapper .bx-livechat-user-position {
  opacity: 0.7 !important;
}

/*
 * Иконки шапки (закрыть, история на почту, меню) — белые SVG в background-image;
 * настройка «Цвет иконок» в Битрикс24 на них не влияет (она про кнопку-пузырь).
 * Чёрные версии Битрикс включает только при своём .bx-livechat-bright-header,
 * жёлтую шапку он светлой не считает — поэтому просто гасим белый в чёрный.
 * Кнопку оценки (-like) не трогаем: там цветные иконки.
 */
.bx-livechat-wrapper .bx-livechat-control-btn-close,
.bx-livechat-wrapper .bx-livechat-control-btn-mail,
.bx-livechat-wrapper .bx-livechat-control-btn-menu,
.bx-livechat-wrapper .bx-livechat-control-btn-list {
  filter: brightness(0) !important;
}

/* индикатор «оператор на линии» — в акцентный жёлтый вместо салатового */
.bx-livechat-wrapper .bx-livechat-status-online .bx-livechat-user-status {
  background: var(--bgl-accent) !important;
}

/* ---------- сообщения ---------- */

/* весь текст в теле чата — чёрный (приветствие, системные строки) */
.bx-livechat-wrapper .bx-livechat-body,
.bx-livechat-wrapper .bx-livechat-help,
.bx-livechat-wrapper .bx-im-dialog,
.bx-livechat-wrapper .bx-im-message-content-body {
  color: var(--bgl-black) !important;
}

/*
 * Пузырь сообщения у Битрикса — это .bx-im-message-content (рамка, радиус 12px, тень,
 * фон #CFEFFF у своих и #fff у оператора). Внутренний -content-body оставляем прозрачным,
 * иначе получается «коробка в коробке».
 */
.bx-livechat-wrapper .bx-im-message-content {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--bgl-radius) !important;
  color: var(--bgl-black) !important;
}

.bx-livechat-wrapper .bx-im-message-content-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* оператор — лёгкий серый, посетитель — лёгкий жёлтый (полупрозрачные, как просил заказчик) */
.bx-livechat-wrapper .bx-im-message-type-opponent .bx-im-message-content,
.bx-livechat-wrapper .bx-im-message-type-other .bx-im-message-content {
  background-color: #bdbdbd3b !important;
}

.bx-livechat-wrapper .bx-im-message-type-self .bx-im-message-content {
  background-color: #fccc493b !important;
}

/* время отправки — штатный серый у обоих; на фото время остаётся белым (штатное поведение) */
.bx-livechat-wrapper .bx-im-message-content-body-with-text .bx-im-message-content-date {
  color: #8e8e8e !important;
}

/* шапка: заголовок и подпись всегда чёрные, независимо от «Цвета виджета» */
.bx-livechat-wrapper .bx-livechat-title,
.bx-livechat-wrapper .bx-livechat-user-name,
.bx-livechat-wrapper .bx-livechat-user-position {
  color: var(--bgl-black) !important;
}

.bx-livechat-wrapper .bx-im-message-avatar-image {
  border-radius: 50% !important;
}

/* ---------- поле ввода ---------- */

.bx-livechat-wrapper .bx-im-textarea {
  border-top: 1px solid var(--bgl-line-soft) !important;
}

.bx-livechat-wrapper .bx-im-textarea-input {
  color: var(--bgl-black) !important;
  font-size: 14px !important;
}

.bx-livechat-wrapper .bx-im-textarea-input::placeholder {
  color: rgba(14, 14, 14, 0.5) !important;
}

/* ---------- кнопки и формы (оценка, контакты, согласие) ---------- */

.bx-livechat-wrapper .bx-livechat-btn,
.bx-livechat-wrapper .bx-livechat-alert-later-btn {
  border-radius: var(--bgl-radius-pill) !important;
  background-color: var(--bgl-black) !important;
  color: var(--bgl-white) !important;
  font-weight: 600 !important;
  transition: background-color 0.2s, color 0.2s !important;
}

.bx-livechat-wrapper .bx-livechat-btn:hover,
.bx-livechat-wrapper .bx-livechat-alert-later-btn:hover {
  background-color: var(--bgl-accent) !important;
  color: var(--bgl-black) !important;
}

.bx-livechat-wrapper .bx-livechat-btn-cancel {
  background-color: transparent !important;
  color: var(--bgl-black) !important;
  border: 1px solid var(--bgl-line-soft) !important;
}

.bx-livechat-wrapper .bx-livechat-alert-form-input {
  border-radius: var(--bgl-radius) !important;
  border: 1px solid var(--bgl-line-soft) !important;
  color: var(--bgl-black) !important;
}

.bx-livechat-wrapper .bx-livechat-alert-form-input:focus {
  border-color: var(--bgl-black) !important;
  outline: none !important;
}

.bx-livechat-wrapper .bx-livechat-alert-title,
.bx-livechat-wrapper .bx-livechat-alert-form-title {
  color: var(--bgl-black) !important;
  font-weight: 600 !important;
}

.bx-livechat-wrapper .bx-livechat-alert-link {
  color: var(--bgl-black) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* оценка диалога: «нравится» в акцент, «не нравится» в красный сайта */
.bx-livechat-wrapper .bx-livechat-btn-like,
.bx-livechat-wrapper .bx-livechat-control-btn-like {
  color: var(--bgl-accent) !important;
}

.bx-livechat-wrapper .bx-livechat-btn-dislike {
  color: var(--bgl-error) !important;
}

/* ---------- мелочи ---------- */

.bx-livechat-wrapper .bx-livechat-copyright {
  display: none !important;
}

.bx-livechat-wrapper ::selection {
  background: var(--bgl-accent);
  color: var(--bgl-black);
}