.aw,
.aw *,
.aw *::before,
.aw *::after { box-sizing: border-box; }

.aw {
  /* --- палитра -- */
  --aw-navy: #1A3E70;
  --aw-text: #515151;
  --aw-accent: #1DBADF;
  --aw-bubble: #6884C2;
  --aw-cream: #FCF8F5;
  --aw-coral: #EB5E57;
  --aw-surface: #FFFFFF;
  --aw-icon-bg: rgba(26, 62, 112, .05);
  --aw-line: #E8EDF3;
  --aw-hover: rgba(26, 62, 112, .045);

  /* --- геометрия --- */
  --aw-launcher: 60px;
  --aw-hint-width: 320px;
  /* Ширина с запасом от брейкпоинта Медфлекса: у них раскладка переключается
     на @media (min-width: 650px), а собственная полоса прокрутки фрейма
     съедает ~15px — на 650px эффективный вьюпорт падает ниже границы, и
     виджет рисует узкую раскладку в широком окне. */
  --aw-view-width: 720px;
  /* Высота целиком выбирается только при вьюпорте от 848px (окно
     браузера примерно от 1000px). Ниже окно урезается по max-height
     ниже, форма внутри остаётся прокручиваемой. */
  --aw-view-height: 800px;
  /* кнопки шапки — «назад» и крестик; от этих двух чисел считается поле
     заголовка вида, иначе длинный заголовок заезжает под кнопки */
  --aw-head-btn: 34px;
  --aw-head-btn-inset: 20px;
  --aw-right: 24px;
  --aw-bottom: 24px;
  --aw-width: 384px;
  --aw-radius: 24px;
  --aw-z: 99000;

  position: fixed;
  right: var(--aw-right);
  bottom: var(--aw-bottom);
  z-index: var(--aw-z);
  color: var(--aw-text);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

/* =============================================================== лаунчер */

.aw__launcher {
  display: block;
  width: var(--aw-launcher);
  height: var(--aw-launcher);
  border: none;
  padding: 0;
  color: var(--aw-bubble);
  background: none;
  transition: transform .18s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.aw__launcher:hover { transform: translateY(-2px) scale(1.04); }
.aw__launcher:active { transform: scale(.97); }
.aw__launcher:focus-visible { border-radius: 50%; outline: 3px solid var(--aw-accent); outline-offset: 4px; }
.aw__launcher svg { display: block; width: 100%; height: 100%; }
.aw.is-open .aw__launcher { display: none; }

/* Плашка не ездит, а растёт из пузыря влево и втягивается обратно в него:
   правый край закреплён на правом крае пузыря (right:0), меняется только
   ширина. Поэтому справа от пузыря она не появляется никогда, а её торец
   всегда остаётся скруглённым — при сдвиге он срезался бы краем подрезки
   в прямую вертикальную линию.

   Анимируем max-width, а не width: ширина остаётся max-content, поэтому её
   не нужно задавать числом и вёрстка не поедет от смены шрифта или текста.

   padding у плашки нулевой, отступы живут на строках: с padding ширина
   border-box не смогла бы опуститься ниже его суммы, и в покое плашка
   торчала бы из-под пузыря. */
.aw__hint {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: max-content;
  max-width: 0;
  height: var(--aw-launcher);
  border: none;
  border-radius: 999px;
  padding: 0;
  /* Тень смещена влево и поджата отрицательным разбросом так, чтобы вправо
     не выходить за край плашки: иначе она расплывалась бы за правый край
     пузыря и справа от него виднелось бы размытое пятно. */
  box-shadow: -4px 6px 16px -4px rgba(26, 62, 112, .18);
  overflow: hidden;
  font: inherit;
  text-align: left;
  background: var(--aw-cream);
  transition: max-width .42s cubic-bezier(.22, .9, .32, 1.06);
  cursor: pointer;
  pointer-events: none;
}

.aw__hint.is-visible { max-width: var(--aw-hint-width); pointer-events: auto; }

/* На десктопе плашку показывает наведение на пузырь. Под (hover: hover),
   чтобы на тач-экранах не залипало состояние после тапа. */
@media (hover: hover) and (pointer: fine) {
  .aw__launcher:hover ~ .aw__hint,
  .aw__launcher:focus-visible ~ .aw__hint,
  .aw__hint:hover { max-width: var(--aw-hint-width); pointer-events: auto; }
}

/* при открытой панели пузыря нет — и наведение не должно её оживлять */
.aw.is-open .aw__hint { display: none; }
/* правый отступ освобождает место под пузырь, иначе текст уедет под него */
.aw__hint-title,
.aw__hint-text { margin: 0 calc(var(--aw-launcher) + 16px) 0 26px; }

.aw__hint-title { color: var(--aw-coral); font-weight: 600; font-size: 15px; white-space: nowrap; }
.aw__hint-text { color: var(--aw-text); font-weight: 500; font-size: 12.5px; white-space: nowrap; }

/* =============================================================== backdrop */

.aw__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(20, 26, 46, .28);
  transition: opacity .2s ease;
  pointer-events: none;
}

.aw.is-open .aw__backdrop { opacity: 1; pointer-events: auto; }

/* ================================================================= панель */

.aw__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: var(--aw-width);
  max-width: calc(100vw - 32px);
  max-height: min(680px, calc(100vh - var(--aw-bottom) - 24px));
  border-radius: var(--aw-radius);
  box-shadow: 0 24px 60px rgba(20, 26, 46, .26);
  opacity: 0;
  overflow: hidden;
  background: var(--aw-surface);
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .9, .3, 1.15);
  transform: translateY(16px) scale(.97);
  transform-origin: bottom right;
  pointer-events: none;
}

.aw.is-open { z-index: calc(var(--aw-z) + 10); }

.aw.is-open .aw__panel { opacity: 1; transform: none; pointer-events: auto; }

/* Закрытая панель не должна ловить клики. Одного pointer-events:none на
   самой панели мало: любой потомок с pointer-events:auto (например .aw__chat
   с переехавшим в него окном чата) снова становится кликабельным, а панель
   прижата к bottom:0 и накрывает лаунчер целиком — пузырь переставал
   нажиматься после закрытия чата. */
.aw:not(.is-open) .aw__panel,
.aw:not(.is-open) .aw__panel * { pointer-events: none !important; }

/* сцена слайдера: меню и чат лежат друг на друге */
.aw__stage {
  position: relative;
  overflow: hidden;
  transition: height .28s cubic-bezier(.4, 0, .2, 1);
}

.aw__scroll {
  padding: 0 24px 22px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

.aw__chat {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
  transform: translateX(100%);
  pointer-events: none;
}

/* Полноразмерный вид (запись на приём): та же сцена, что у чата, но размер
   задаётся не замером, а режимом is-view — поэтому сцена тянется по остатку
   высоты панели. Без flex-grow она схлопнулась бы в ноль: содержимое вида
   позиционировано абсолютно и высоты не даёт. */
.aw__view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
  transform: translateX(100%);
  pointer-events: none;
}

.aw__view-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.aw__panel.is-view .aw__stage { flex: 1 1 auto; min-height: 0; }

.aw__panel.is-chat .aw__scroll,
.aw__panel.is-view .aw__scroll { opacity: 0; transform: translateX(-100%); pointer-events: none; }
.aw__panel.is-chat .aw__chat { opacity: 1; transform: none; pointer-events: auto; }
.aw__panel.is-view .aw__view.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* десктоп: окно раскрывается до размеров из переменных выше */
@media (min-width: 561px) {
  .aw__panel.is-view {
    width: var(--aw-view-width);
    height: var(--aw-view-height);
    max-height: min(var(--aw-view-height), calc(100vh - var(--aw-bottom) - 24px));
  }
}

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

.aw__head { position: relative; margin-bottom: 16px; padding: 26px 24px 0; }
.aw__logo { display: block; width: auto; max-width: 74%; height: 40px; margin: 0 auto; }

/* высота как у логотипа, чтобы шапка не меняла размер при подмене */
.aw__head-title {
  display: none;
  height: 40px;
  /* симметричные поля под «назад» слева и крестик справа — заголовок остаётся
     по центру между ними и не наезжает на кнопки */
  padding: 0 calc(var(--aw-head-btn-inset) + var(--aw-head-btn) + 8px);
  color: var(--aw-navy);
  font-weight: 700;
  font-size: 17px;
  line-height: 40px;
  text-align: center;
}

.aw__close {
  position: absolute;
  top: 20px;
  right: var(--aw-head-btn-inset);
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--aw-head-btn);
  height: var(--aw-head-btn);
  border: none;
  border-radius: 50%;
  padding: 0;
  opacity: .85;
  color: var(--aw-navy);
  background: none;
  transition: background .15s ease, opacity .15s ease;
  cursor: pointer;
}

.aw__close:hover { opacity: 1; background: var(--aw-hover); }
.aw__close:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 2px; }
.aw__close svg { width: 22px; height: 22px; }

/* «Назад» — зеркально крестику, на том же уровне. В меню скрыт: возвращаться
   некуда, и пустая кнопка сбивала бы с толку. */
.aw__back {
  position: absolute;
  top: 20px;
  left: var(--aw-head-btn-inset);
  display: none;
  justify-content: center;
  align-items: center;
  width: var(--aw-head-btn);
  height: var(--aw-head-btn);
  border: none;
  border-radius: 50%;
  padding: 0;
  opacity: .85;
  color: var(--aw-navy);
  background: none;
  transition: background .15s ease, opacity .15s ease;
  cursor: pointer;
}

.aw__back:hover { opacity: 1; background: var(--aw-hover); }
.aw__back:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 2px; }
.aw__back svg { width: 22px; height: 22px; }

.aw__panel.is-chat .aw__back,
.aw__panel.is-view .aw__back { display: flex; }

.aw__intro { margin: 0 0 18px; color: var(--aw-text); font-weight: 500; font-size: 14px; line-height: 1.55; }
.aw__heading { margin: 0 0 14px; color: var(--aw-navy); font-weight: 700; font-size: 19px; }

/* --- список пунктов --- */

.aw__items { display: flex; flex-direction: column; }
.aw__item { border-radius: 16px; }
.aw__item + .aw__item { margin-top: 4px; }

.aw__item-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 12px 10px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  transition: background .15s ease;
  cursor: pointer;
}

.aw__item-head:hover { background: var(--aw-hover); }
.aw__item-head:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: -2px; }

.aw__item-icon {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--aw-navy);
  background: var(--aw-icon-bg);
  transition: background .15s ease, color .15s ease;
}

.aw__item.is-open .aw__item-icon { color: #fff; background: var(--aw-navy); }
.aw__item-icon svg { width: 21px; height: 21px; }

.aw__item-label { flex: 1 1 auto; min-width: 0; }
.aw__item-title { display: block; color: var(--aw-navy); font-weight: 700; font-size: 15px; }
.aw__item-sub { display: block; margin-top: 2px; color: var(--aw-text); font-weight: 500; font-size: 12.5px; }

.aw__item-chevron {
  display: flex;
  flex: 0 0 auto;
  opacity: .45;
  color: var(--aw-navy);
  transition: transform .25s ease, opacity .15s ease;
}

.aw__item-chevron svg { width: 16px; height: 16px; }
.aw__item.is-open .aw__item-chevron { opacity: 1; transform: rotate(90deg); }

.aw__item-body {
  height: 0;
  overflow: hidden;
  transition: height .28s cubic-bezier(.4, 0, .2, 1);
}

.aw__item-inner { padding: 6px 4px 0px; }

/* --- iframe (чат / запись) --- */

.aw__frame {
  display: block;
  width: 100%;
  border: 1px solid var(--aw-line);
  border-radius: 14px;
  background: #fff;
}

.aw__frame-fallback { margin: 10px 2px 0; color: var(--aw-text); font-size: 12px; }
.aw__frame-fallback a { color: var(--aw-navy); font-weight: 700; }

/* --- форма обратного звонка --- */

.aw__field { display: block; }

.aw__input {
  display: block;
  width: 100%;
  border: 1.5px solid var(--aw-line);
  border-radius: 14px;
  padding: 13px 16px;
  color: var(--aw-navy);
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  background: #fff;
  transition: border-color .15s ease;
}

.aw__input::placeholder { color: #9aa7b4; font-weight: 500; }
.aw__input:focus { border-color: var(--aw-navy); outline: none; }
.aw__input.has-error { border-color: var(--aw-coral); }

.aw__error { display: none; margin: 6px 2px 0; color: var(--aw-coral); font-weight: 500; font-size: 12px; }
.aw__error.is-visible { display: block; }

.aw__submit {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: none;
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  background: var(--aw-navy);
  transition: opacity .15s ease, transform .1s ease;
  cursor: pointer;
}

.aw__submit:hover { opacity: .92; }
.aw__submit:active { transform: scale(.99); }
.aw__submit[disabled] { opacity: .55; cursor: default; }

/* --- чекбоксы согласия --- */

.aw__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  color: var(--aw-text);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
}

.aw__check-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  cursor: pointer;
  accent-color: var(--aw-navy);
}

.aw__check-text a { color: var(--aw-navy); font-weight: 600; }

.aw__success { padding: 10px 0; text-align: center; }
.aw__success-icon {
  display: flex; justify-content: center; align-items: center;
  width: 52px; height: 52px; margin: 0 auto 12px;
  border-radius: 50%; color: var(--aw-navy); background: var(--aw-icon-bg);
}
.aw__success-icon svg { width: 26px; height: 26px; }
.aw__success-title { color: var(--aw-navy); font-weight: 700; font-size: 16px; }
.aw__success-text { margin-top: 6px; color: var(--aw-text); font-weight: 500; font-size: 13px; }

/* --- телефон в футере --- */

.aw__phone { padding-top: 16px; text-align: center; }
.aw__phone a {
  color: var(--aw-navy);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .3px;
  text-decoration: none;
}
.aw__phone a:hover { text-decoration: underline; }

/* ============================================================== мобильные */

@media (max-width: 560px) {
  .aw {
    --aw-launcher: 58px;
    --aw-right: 16px;
    --aw-bottom: 16px;
  }

  .aw__panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--aw-radius) var(--aw-radius) 0 0;
    transform: translateY(30px);
  }

  .aw__head { padding: 22px 18px 0; }
  .aw__scroll { padding: 0 18px 20px; }
  .aw { --aw-head-btn-inset: 14px; }
  .aw__close { top: 16px; }
  .aw__back { top: 16px; }
  .aw__hint { display: none; }

  /* полноразмерный вид на телефоне — попап во весь экран: вместо логотипа
     заголовок вида, крестик остаётся на месте */
  .aw__panel.is-view {
    top: 0;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .aw__panel.is-view .aw__logo { display: none; }
  .aw__panel.is-view .aw__head-title { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .aw *,
  .aw *::before,
  .aw *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ================================== Битрикс24: онлайн-чат (режим 'b24') */

/* Классы .bx-livechat-* и .b24-* принадлежат виджету Битрикс24. Лоадер
   сайт-баттона рендерит их в наш документ (не в iframe), поэтому отсюда они
   перекрываются. Блок включается классом .aw-b24 на <html> — его ставит
   B24.load(), так что при откате на режим 'iframe' он не действует.

   !important нужен там, где у Битрикса селектор из двух классов, а его
   стили инжектятся в <head> позже нашего файла. */

:root {
  --aw-chat-bg: #FFFFFF;      /* фон истории переписки */
  --aw-chat-bubble: #FFFFFF;  /* фон блока сообщения */
}

/* нативная кнопка и её приветствие — у нас свой лаунчер.
   visibility вместо display: геометрия остаётся, и виджету есть от чего
   отсчитывать позицию окна чата */
.aw-b24 .b24-widget-button-wrapper,
.aw-b24 .b24-crm-hello-cont {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Битрикс рендерит окно в конец <body> как fixed-окно в углу экрана.
   Прячем его до переезда в панель, иначе на долю секунды мелькает
   плавающее окно не на своём месте. */
.aw-b24 .bx-livechat-wrapper { visibility: hidden; }

/* окно чата, переехавшее в панель. Селектор из трёх классов — чтобы бить
   .bx-livechat-mobile.bx-livechat-wrapper, который иначе растянул бы чат
   на весь экран поверх панели */
.aw-b24 .aw__chat .bx-livechat-wrapper {
  visibility: visible;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: auto !important;
}

.aw-b24 .aw__chat .bx-livechat-box { border-radius: 0 !important; }

/* шапка Битрикса не нужна: сверху остаётся наша — с логотипом бренда
   и крестиком закрытия */
.aw-b24 .aw__chat .bx-livechat-head { display: none !important; }

/* Подпись «Бесплатная CRM, чаты и сайты» с логотипом Битрикс24.
   Штатно снимается настройкой тарифа в портале; здесь — правилом CSS. */
.aw-b24 .aw__chat .bx-livechat-copyright { display: none !important; }

/* фон истории: у Битрикса тут data-URI паттерн поверх #F4FCFE */
.aw-b24 .aw__chat .bx-livechat-body {
  background-image: none !important;
  background-color: var(--aw-chat-bg) !important;
}

/* блок сообщения: непрочитанные Битрикс подсвечивает #fffadd */
.aw-b24 .aw__chat .bx-im-message-content,
.aw-b24 .aw__chat .bx-im-message-status-unread .bx-im-message-content,
.aw-b24 .aw__chat .bx-im-message-status-blink .bx-im-message-content {
  background-color: var(--aw-chat-bubble) !important;
}

/* пункт «Написать в чат», пока поднимается виджет */
.aw__item.is-loading .aw__item-head { opacity: .6; pointer-events: none; }