/*
 * Кастомизация виджета "Онлайн-чат" Битрикс24 под стиль faz64.ru.
 * Подключается через настройки виджета -> "Свой CSS" -> "Путь к CSS-файлу".
 * Классы (.bx-livechat-*, .b24-form-*) — реальные, сверены с виджетом на
 * fazgroup.bitrix24.ru/online/faz64, поэтому без !important там, где Bitrix
 * не переопределяет их инлайново; !important оставлен только там, где
 * у Bitrix уже есть более специфичный инлайн-стиль.
 */

:root {
  --b24-brand-blue: #244a9a;
  --b24-brand-graphite: #1d1d1b;
  --b24-brand-font: "Vela Sans", "Helvetica Neue", Arial, sans-serif;
  --b24-brand-radius: 15px;
}

/* ===== Плавающая кнопка запуска (лаунчер) — .b24-widget-button-* ===== */
.b24-widget-button-wrapper {
  font-family: var(--b24-brand-font) !important;
}

.b24-widget-button-inner-block {
  background-color: var(--b24-brand-blue) !important;
  box-shadow: 0 8px 24px rgba(36, 74, 154, 0.35) !important;
}

.b24-widget-button-pulse {
  background-color: var(--b24-brand-blue) !important;
  opacity: 0.35;
}

/* Всплывающая карточка-подсказка над кнопкой */
.b24-widget-button-popup {
  border-radius: var(--b24-brand-radius) !important;
  box-shadow: 0 12px 32px rgba(29, 29, 27, 0.18) !important;
  font-family: var(--b24-brand-font) !important;
}

.b24-widget-button-popup-name {
  color: var(--b24-brand-graphite) !important;
  font-weight: 700 !important;
}

.b24-widget-button-popup-description {
  color: #6b6b6b !important;
}

/* Доп. иконки действий (звонок/форма/чат), раскрывающиеся у кнопки.
 * Иконка — это не <svg>, а белый SVG, зашитый инлайново в background-image
 * самого .b24-widget-button-social-item; фон обязан оставаться тёмным,
 * иначе белая иконка становится не видна на белом фоне. */
.b24-widget-button-social-item {
  background-color: var(--b24-brand-blue) !important;
  box-shadow: 0 4px 14px rgba(29, 29, 27, 0.18) !important;
}

/* Bitrix по умолчанию рисует тултип тёмным текстом на белом фоне
 * (color: #000; background: #fff). Фон мы перекрашиваем в графит,
 * поэтому цвет текста нужно переопределять вместе с ним, иначе
 * получается чёрное по чёрному. */
.b24-widget-button-social-tooltip {
  font-family: var(--b24-brand-font) !important;
  border-radius: 8px !important;
  background-color: var(--b24-brand-graphite) !important;
  color: #fff !important;
}

/* Кнопка закрытия чата */
.bx-livechat-control-btn {
  color: #fff !important;
}

.bx-livechat-control-btn:hover {
  opacity: 0.8;
}

/* ===== Окно чата ===== */
.bx-livechat-wrapper,
.bx-livechat-wrapper * {
  font-family: var(--b24-brand-font);
}

.bx-livechat-box {
  border-radius: var(--b24-brand-radius);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(29, 29, 27, 0.25);
}

.bx-livechat-head-wrap,
.bx-livechat-head {
  background-color: var(--b24-brand-blue) !important;
}

.bx-livechat-title {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0;
}

.bx-livechat-body {
  background-color: #f7f7f8;
}

.bx-livechat-help-title {
  color: var(--b24-brand-graphite);
  font-weight: 800;
}

.bx-livechat-help-subtitle {
  color: #6b6b6b;
}

/* ===== Форма обратной связи (когда оператор офлайн) ===== */
.b24-form-wrapper {
  font-family: var(--b24-brand-font) !important;
  border-radius: var(--b24-brand-radius) !important;
}

.b24-form-header {
  background-color: var(--b24-brand-blue) !important;
}

.b24-form-header-description,
.b24-form-header * {
  color: #fff !important;
}

.b24-form-control {
  border-radius: 10px !important;
  border-color: #e0e0e0 !important;
  font-family: var(--b24-brand-font) !important;
  color: var(--b24-brand-graphite) !important;
}

.b24-form-control:focus {
  border-color: var(--b24-brand-blue) !important;
  box-shadow: 0 0 0 2px rgba(36, 74, 154, 0.15) !important;
}

.b24-form-control-label {
  color: #6b6b6b !important;
}

.b24-form-btn,
.b24-form-btn-block {
  background-color: var(--b24-brand-blue) !important;
  border-color: var(--b24-brand-blue) !important;
  border-radius: var(--b24-brand-radius) !important;
  font-weight: 700 !important;
  transition: background-color 0.38s ease-in-out;
}

.b24-form-btn:hover,
.b24-form-btn-block:hover {
  background-color: #1c3c80 !important;
  border-color: #1c3c80 !important;
}

.b24-form-success-icon,
.b24-form-state.b24-form-success {
  color: var(--b24-brand-blue) !important;
}

/* ===== Адаптив ===== */
@media (max-width: 1279px) {
  .bx-livechat-wrapper {
    font-size: 15px;
  }
}

@media (max-width: 1023px) {
  .bx-livechat-box {
    border-radius: 10px;
  }
}

@media (max-width: 767px) {
  .bx-livechat-wrapper.bx-livechat-show:not(.bx-livechat-page-mode) {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0;
  }

  .bx-livechat-box {
    border-radius: 0;
    height: 100%;
  }

  .b24-form-wrapper {
    border-radius: 0 !important;
  }
}

@media (max-width: 575px) {
  .b24-widget-button-wrapper {
    right: 16px !important;
    bottom: 16px !important;
  }

  .b24-widget-button-inner-block,
  .b24-widget-button-inner-container,
  .b24-widget-button-icon-container,
  .b24-widget-button-block {
    width: 56px !important;
    height: 56px !important;
  }

  .b24-widget-button-popup {
    max-width: calc(100vw - 32px) !important;
  }
}