/* =====================================================================
   СИСТЕМА — тема онлайн-чата Битрикс24 (imopenlines widget)
   sistema-digital.ru · v1 · 2026-11-04
   Палитра/шрифт/радиусы взяты из CSS сайта (/assets/script-*.css, main-*.css):
     --deep #071b35, --ink #071426, hero #041322, surface #0b2135/#0d2942,
     --lime #c6ff47, --cyan #39b9ff, muted #ccdaea, line #62b8ee30,
     font "Segoe UI", Arial, sans-serif; радиусы 16–24px.
   Правила: только стабильные классы .bx-livechat-* / .bx-im-* / .b24-widget-*,
   без изменения размеров/позиционирования окна. Всё под префиксом
   .bx-livechat-wrapper — на остальной сайт не влияет.
   ===================================================================== */

.bx-livechat-wrapper {
  --sd-bg: #0f2d4f;
  --sd-bg-2: #0b2440;
  --sd-surface: #183e63;
  --sd-surface-2: #133454;
  --sd-line: rgba(98, 184, 238, .19);
  --sd-text: #f4f8ff;
  --sd-muted: #ccdaea;
  --sd-dim: #9fb3c8;
  --sd-lime: #c6ff47;
  --sd-lime-hover: #d4ff70;
  --sd-on-lime: #071426;
  --sd-cyan: #39b9ff;
  --sd-font: "Segoe UI", Arial, sans-serif;
  /* Битрикс берёт шрифты из этих переменных — переопределяем локально */
  --ui-font-family-primary: var(--sd-font);
  --ui-font-family-secondary: var(--sd-font);
  --ui-font-family-helvetica: var(--sd-font);
  font-family: var(--sd-font);
  border-radius: 20px;
  box-shadow: 0 22px 55px rgba(3, 12, 21, .55), 0 0 0 1px var(--sd-line);
}
.bx-livechat-wrapper.bx-livechat-mobile,
.bx-livechat-wrapper.bx-livechat-mobile-state,
.bx-livechat-wrapper.bx-livechat-page-mode { border-radius: 0; box-shadow: none; }

.bx-livechat-wrapper .bx-livechat-box {
  background-color: var(--sd-bg);
  border-radius: 20px;
}
.bx-livechat-wrapper.bx-livechat-mobile .bx-livechat-box,
.bx-livechat-wrapper.bx-livechat-mobile-state .bx-livechat-box,
.bx-livechat-wrapper.bx-livechat-page-mode .bx-livechat-box { border-radius: 0; }

/* ---------- Шапка ----------
   Битрикс ставит inline "background-color: <Цвет фона кнопки> !important".
   Его не перебить, поэтому кладём поверх background-image (градиент рисуется над цветом). */
.bx-livechat-wrapper .bx-livechat-head {
  background-image: linear-gradient(135deg, #17406a 0%, #0f2d4f 62%, #0c2745 100%) !important;
  border-bottom: 1px solid var(--sd-line);
  box-shadow: inset 0 -2px 0 rgba(198, 255, 71, .55);
}
.bx-livechat-wrapper .bx-livechat-title {
  color: #fff !important;
  font: 700 15px/1.2 var(--sd-font);
  letter-spacing: .02em;
}
.bx-livechat-wrapper .bx-livechat-title::before {
  /* «квадрат» из логотипа СИСТЕМА */
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin: 0 9px 1px 0;
  border-radius: 2px;
  background: var(--sd-cyan);
  box-shadow: 0 0 10px rgba(57, 185, 255, .7);
  vertical-align: middle;
}
.bx-livechat-wrapper .bx-livechat-head .bx-livechat-user-name { color: #fff !important; font-weight: 700; }
.bx-livechat-wrapper .bx-livechat-head .bx-livechat-user-position { color: var(--sd-muted) !important; opacity: 1; }
.bx-livechat-wrapper .bx-livechat-head .bx-livechat-user-icon { box-shadow: 0 0 0 2px var(--sd-lime); }
.bx-livechat-wrapper .bx-livechat-head .bx-livechat-user-status { border-color: #0f2d4f !important; }
/* все иконки управления (закрыть, оценка, почта, меню) — белые при любом цвете кнопки */
.bx-livechat-wrapper .bx-livechat-head .bx-livechat-control-btn {
  filter: brightness(0) invert(1);
  opacity: .85;
}
.bx-livechat-wrapper .bx-livechat-head .bx-livechat-control-btn:hover { opacity: 1; }

/* ---------- Тело чата: фон сайта вместо «дудлов» ---------- */
.bx-livechat-wrapper .bx-livechat-body {
  background-color: var(--sd-bg);
  background-image:
    radial-gradient(120% 70% at 100% 0%, rgba(57, 185, 255, .10) 0%, rgba(57, 185, 255, 0) 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(198, 255, 71, .06) 0%, rgba(198, 255, 71, 0) 60%),
    linear-gradient(180deg, #0f2d4f 0%, #0b2440 100%);
  background-size: auto;
  background-position: 0 0;
  background-repeat: no-repeat;
}

/* стартовый экран «Мы онлайн / и готовы вам помочь!» */
.bx-livechat-wrapper .bx-livechat-help-title {
  color: #fff;
  opacity: 1;
  font-weight: 700;
}
.bx-livechat-wrapper .bx-livechat-help-subtitle { color: var(--sd-muted); font-weight: 400; margin-top: 4px; }
.bx-livechat-wrapper .bx-livechat-help-user .bx-livechat-user-name { color: var(--sd-muted); }
.bx-livechat-wrapper .bx-livechat-help-user .bx-livechat-user-icon {
  box-shadow: 0 0 0 2px var(--sd-bg), 0 0 0 4px rgba(198, 255, 71, .8);
}

/* ---------- Сообщения ---------- */
.bx-livechat-wrapper .bx-im-message-content {
  font: 15px/21px var(--sd-font);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
/* не даём пузырю клиента прилипать к левому краю на узких экранах */
.bx-livechat-wrapper .bx-im-message.bx-im-message-type-self { margin-left: 48px; }
/* оператор — тёмная карточка сайта */
.bx-livechat-wrapper .bx-im-message-type-opponent .bx-im-message-content,
.bx-livechat-wrapper .bx-im-message-type-other:not(.bx-im-message-type-system) .bx-im-message-content {
  background: var(--sd-surface);
  background-image: linear-gradient(135deg, #123450, #0b243c);
  border: 1px solid var(--sd-line);
  border-top-left-radius: 6px;
  color: var(--sd-text);
}
/* клиент — лайм-акцент с тёмным текстом */
.bx-livechat-wrapper .bx-im-message-type-self .bx-im-message-content {
  background: var(--sd-lime);
  border: 1px solid var(--sd-lime);
  border-top-right-radius: 6px;
  color: var(--sd-on-lime);
}
.bx-livechat-wrapper .bx-im-message-content-name { color: var(--sd-cyan) !important; font-weight: 600; }
.bx-livechat-wrapper .bx-im-message-content-date { color: var(--sd-dim); }
.bx-livechat-wrapper .bx-im-message-type-self .bx-im-message-content-date { color: rgba(7, 20, 38, .72); }
.bx-livechat-wrapper .bx-im-message-type-opponent .bx-im-message-content-date { color: var(--sd-dim); }
.bx-livechat-wrapper .bx-im-message-type-other .bx-im-message-content a { color: #78eaff; }
.bx-livechat-wrapper .bx-im-message-type-self .bx-im-message-content a { color: var(--sd-on-lime); text-decoration: underline; }
.bx-livechat-wrapper .bx-livechat-dialog .bx-im-mention { color: inherit; }
/* системные сообщения */
.bx-livechat-wrapper .bx-im-message-type-system .bx-im-message-content {
  background: transparent; border: 0; box-shadow: none; color: var(--sd-muted);
}
.bx-livechat-wrapper .bx-im-message-type-system .bx-im-message-content-date { color: var(--sd-dim); }
/* аватар оператора в ленте */
.bx-livechat-wrapper .bx-im-message-avatar-image { box-shadow: 0 0 0 2px var(--sd-bg), 0 0 0 3px var(--sd-line); }
/* плашка даты */
.bx-livechat-wrapper .bx-im-dialog-group-date {
  background-color: rgba(13, 41, 66, .92);
  border: 1px solid var(--sd-line);
  color: var(--sd-muted) !important;
  font: 600 12px/16px var(--sd-font);
  letter-spacing: .04em;
  border-radius: 100px;
}
/* скроллбар */
.bx-livechat-wrapper.bx-livechat-custom-scroll div::-webkit-scrollbar-thumb {
  background-image: linear-gradient(90deg, transparent, transparent 8px, rgba(204, 218, 234, .28) 0, rgba(204, 218, 234, .28) 13px, transparent 0);
}
.bx-livechat-wrapper.bx-livechat-custom-scroll div::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(90deg, transparent, transparent 5px, var(--sd-lime) 0, var(--sd-lime) 12px, transparent 0);
}

/* ---------- Поле ввода ---------- */
.bx-livechat-wrapper .bx-livechat-textarea { background: #06182b; }
.bx-livechat-wrapper .bx-im-textarea { border-top: 1px solid var(--sd-line); }
.bx-livechat-wrapper .bx-im-textarea-input {
  color: var(--sd-text);
  font: 15px/1.4 var(--sd-font);
  caret-color: var(--sd-lime);
}
.bx-livechat-wrapper .bx-im-textarea-input::placeholder { color: var(--sd-dim); opacity: 1; }
.bx-livechat-wrapper .bx-im-textarea-app-button { filter: brightness(0) invert(.82); opacity: .9; }
.bx-livechat-wrapper .bx-im-textarea-app-button:hover { opacity: 1; filter: brightness(0) invert(1); }
.bx-livechat-wrapper .bx-livechat-textarea-resize-handle { opacity: .5; filter: invert(1); }
/* кнопка «Отправить» — лайм, тёмная стрелка. inline background-color (без !important) перебивается */
.bx-livechat-wrapper .bx-im-textarea-send-button {
  background-color: var(--sd-lime) !important;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(198, 255, 71, .5), 0 6px 16px rgba(198, 255, 71, .25);
  opacity: 1;
}
.bx-livechat-wrapper .bx-im-textarea-send-button:hover { background-color: var(--sd-lime-hover) !important; }
/* тёмная стрелка даже если Битрикс выбрал «светлую» (-bright-arrow) */
.bx-livechat-wrapper .bx-im-textarea-send-button.bx-im-textarea-send-button-bright-arrow {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2213%22%3E%3Cpath%20fill%3D%22%23071426%22%20fill-rule%3D%22evenodd%22%20d%3D%22M4.059%209.152L4.04%2012.21.165%208.333l3.92-3.92-.018%203.245h2.862a3%203%200%200%200%203-3v-.156a3%203%200%200%200-3-3H5.545L6.06.286h1.38a4%204%200%200%201%204%204v.866a4%204%200%200%201-4%204H4.06z%22/%3E%3C/svg%3E");
}

/* ---------- Формы, согласие (152-ФЗ), оценка, офлайн ---------- */
.bx-livechat-wrapper .bx-livechat-alert-box {
  background: rgba(7, 27, 53, .97);
  border-top: 1px solid var(--sd-line);
}
.bx-livechat-wrapper .bx-livechat-alert-title,
.bx-livechat-wrapper .bx-livechat-alert-form-title { color: var(--sd-text); }
.bx-livechat-wrapper .bx-livechat-alert-later-btn { color: var(--sd-muted); border-bottom-color: var(--sd-muted); }
.bx-livechat-wrapper .bx-livechat-alert-close { filter: brightness(0) invert(1); }
.bx-livechat-wrapper .bx-livechat-alert-form-input:not([type="checkbox"]) {
  background: #06182b; border: 1px solid rgba(204, 218, 234, .35); border-radius: 12px; color: var(--sd-text);
}
.bx-livechat-wrapper .bx-livechat-alert-form-input:not([type="checkbox"]):focus { border-color: var(--sd-lime); }
.bx-livechat-wrapper .bx-livechat-alert-form-checkbox,
.bx-livechat-wrapper .bx-livechat-alert-form-row { color: var(--sd-muted); }
.bx-livechat-wrapper .bx-livechat-alert-link,
.bx-livechat-wrapper .bx-livechat-alert-box a { color: #78eaff; }

.bx-livechat-wrapper .bx-livechat-consent-window { background: var(--sd-bg); }
.bx-livechat-wrapper .bx-livechat-consent-window-title { color: #fff; font-weight: 700; }
/* текст соглашения оставляем на светлой подложке — гарантированно читаем (в т.ч. iframe) */
.bx-livechat-wrapper .bx-livechat-consent-window-content {
  background: #f4f8ff; color: #071426; border: 1px solid var(--sd-line); border-radius: 14px;
}

.bx-livechat-wrapper .bx-livechat-btn-success {
  background: var(--sd-lime); border-color: var(--sd-lime); color: var(--sd-on-lime);
  border-radius: 100px; font-weight: 700;
}
.bx-livechat-wrapper .bx-livechat-btn-success:hover { background: var(--sd-lime-hover); }
.bx-livechat-wrapper .bx-livechat-btn-cancel {
  background: transparent; border-color: rgba(204, 218, 234, .55); color: var(--sd-text); border-radius: 100px;
}

.bx-livechat-wrapper .bx-livechat-warning-window,
.bx-livechat-wrapper .bx-livechat-loading-msg,
.bx-livechat-wrapper .bx-livechat-success-window-desc { color: var(--sd-muted); }

/* CRM-форма внутри чата (b24-form, вкл. чекбокс согласия 152-ФЗ):
   её цвета задаёт сама CRM-форма; мы только скругляем карточку и не трогаем текст,
   чтобы согласие гарантированно оставалось читаемым. */
.bx-livechat-wrapper .bx-imopenlines-form-wrapper .b24-form-wrapper {
  border-radius: 18px; overflow: hidden;
}

/* ---------- Мобильная версия (полноэкранный чат) ---------- */
@media (max-width: 480px) {
  .bx-livechat-wrapper .bx-livechat-title { font-size: 16px; }
  .bx-livechat-wrapper .bx-im-message-content { font-size: 15px; line-height: 21px; }
  .bx-livechat-wrapper .bx-im-textarea-input { font-size: 16px; } /* iOS не зумит при фокусе */
}
.bx-livechat-wrapper.bx-livechat-mobile .bx-livechat-head { padding-top: env(safe-area-inset-top, 0); }

/* ---------- (опционально) приветственный попап у кнопки ---------- */
.b24-widget-button-popup {
  background: #183e63 !important; border: 1px solid rgba(98, 184, 238, .19) !important;
  border-radius: 18px !important; box-shadow: 0 14px 38px rgba(3, 15, 29, .5) !important;
}
.b24-widget-button-popup-name { color: #fff !important; font-family: "Segoe UI", Arial, sans-serif !important; }
.b24-widget-button-popup-description { color: #ccdaea !important; font-family: "Segoe UI", Arial, sans-serif !important; }
.b24-widget-button-popup-btn-hide { filter: brightness(0) invert(1); }

/* ---------- Неоновое свечение по краям (v3, приглушённое) ---------- */
.bx-livechat-wrapper:not(.bx-livechat-mobile):not(.bx-livechat-mobile-state):not(.bx-livechat-page-mode) {
  border: 1px solid rgba(198, 255, 71, .6) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 10px rgba(198,255,71,.28), 0 0 26px rgba(198,255,71,.16), 0 0 50px rgba(198,255,71,.08), 0 22px 55px rgba(3,12,21,.5) !important;
  animation: sd-neon-pulse 3.6s ease-in-out infinite;
}
@keyframes sd-neon-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(198,255,71,.28), 0 0 26px rgba(198,255,71,.16), 0 0 50px rgba(198,255,71,.08), 0 22px 55px rgba(3,12,21,.5); }
  50%      { box-shadow: 0 0 13px rgba(198,255,71,.36), 0 0 32px rgba(198,255,71,.21), 0 0 62px rgba(198,255,71,.11), 0 22px 55px rgba(3,12,21,.5); }
}
.bx-livechat-wrapper.bx-livechat-mobile::after,
.bx-livechat-wrapper.bx-livechat-mobile-state::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 100;
  box-shadow: inset 0 0 0 1.5px rgba(198,255,71,.6), inset 0 0 12px rgba(198,255,71,.28), inset 0 0 30px rgba(198,255,71,.1);
}
.b24-widget-button-wrapper .b24-widget-button-inner-block {
  border-radius: 50% !important;
  box-shadow: 0 0 0 1.5px rgba(198,255,71,.4), 0 0 12px rgba(198,255,71,.32), 0 0 28px rgba(198,255,71,.15) !important;
}
@media (prefers-reduced-motion: reduce) {
  .bx-livechat-wrapper { animation: none !important; }
}