<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Все виджеты вместе — полностью исправленный чат с таймером и закрытием</title>

  <!-- 
    ==================== Глобальные переменные (общие для всех виджетов) ====================
    Переменные (CSS custom properties) для цветов, анимаций и базовых настроек.
  -->
  <style>
    /* Универсальные правила – вставляем сразу после открытия тега <style>
       Это добавляем, не удаляя ничего, для предотвращения горизонтальной прокрутки
       и нежелательного масштабирования на мобильных устройствах */
    html, body {
      overflow-x: hidden;  /* Отключаем горизонтальную прокрутку */
      box-sizing: border-box;
    }
    *, *::before, *::after {
      box-sizing: inherit;
    }
    img, video {
      max-width: 100%;
      height: auto;
    }

    :root {
      /* Основные цвета */
      --lb-primary-color: #000000;                 /** Основной цвет хавал #1BDBD1 Москвич #D83F2A */
      --lb-secondary-color: #0e1214;               /** Вторичный цвет Хавал #4BBFE8 Москвич #ad382b*/
      --lb-font-family: "Roboto", sans-serif;      /** Основной шрифт для виджетов */

      /* Градиент и анимации */
      --lb-gradient: linear-gradient(to right, var(--lb-primary-color), var(--lb-secondary-color)); 
      --lb-animation-duration: 2.5s;               /** Длительность анимации градиента */
      --lb-animation-timing: cubic-bezier(0.19, 1, 0.22, 1);  /** Тип анимации градиента */

      /* Фоны и цвета текста */
      --lb-background-white: #FFFFFF;              /** Основной белый фон */
      --lb-font-color: #5B657A;                    /** Базовый цвет шрифта */
      --lb-red-color: #FF0000;                     /** Красный цвет для ошибок */
      --lb-border-gray: #CCCCCC;                   /** Цвет бордюра (серый) */
      --lb-input-hover-background: #f0f0f0;        /** Фон инпута при наведении */

      /* Фон сообщений бота и тени */
      --lb-bot-message-background: #f0f0f0;        /** Фон сообщений бота в чате */
      --lb-shadow-color: #c8d0e7;                  /** Цвет для теней */

      /* Тени и радиусы */
      --lb-box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);  /** Тень для блоков */
      --lb-radius-large: 20px !important;          /** Больший радиус */
      --lb-radius-small: 15px;                     /** Меньший радиус */
      --lb-radius-modal: 8px;                      /** Радиус углов для окон (модальных) */

      /* Черный цвет и переходы */
      --lb-black-color: #000000;                   /** Чёрный цвет */
      --lb-transition-opacity: opacity 0.6s ease;  /** Плавный переход для прозрачности */
      --lb-transition-transform: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;

      /* Z-index для слоев */
      --lb-z-index: 999999999;                     /** Максимальный z-index */
      --lb-z-index-overlay: 99999999;              /** Чуть меньший z-index для оверлеев */
    }

    /* 
      === FIX POLICY === 
      Стили для чекбоксов политики:
      Убеждаемся, что он не наследует стили input[type="text"]
    */
    /* Общие стили для чекбоксов в main и chat виджетах */
    #mainWidget input2[type="checkbox"][name="consent"],
    #chatWidget input2[type="checkbox"][name="consent"] {
      -webkit-appearance: none; /* Добавлен префикс для Safari и других WebKit-браузеров */
      -moz-appearance: none;    /* Добавлен префикс для Mozilla-браузеров */
      appearance: none; 
      width: 12px;               /* Ширина чекбокса */
      height: 12px;              /* Высота чекбокса */
      border: 1px solid var(--lb-font-color); /* Бордер чекбокса */
      border-radius: 2px;        /* Скругление углов */
      cursor: pointer;
      position: relative;
      margin: 0;
      background: var(--lb-background-white);
    }

    /* Стили для отмеченного чекбокса */
    #mainWidget input2[type="checkbox"][name="consent"]:checked,
    #chatWidget input2[type="checkbox"][name="consent"]:checked {
      -webkit-appearance: none; /* Для мобильных устройств на базе WebKit */
      -moz-appearance: none;    /* Для Mozilla */
      appearance: none;
      background: none !important;
      border: 1px solid var(--lb-font-color) !important;
    }
 
    /* Галочка внутри отмеченного чекбокса */
    #mainWidget input2[type="checkbox"][name="consent"]:checked::after,
    #chatWidget input2[type="checkbox"][name="consent"]:checked::after {
      content: "";
      display: block;
      width: 6px;                /* Ширина галочки */
      height: 10px;              /* Высота галочки */
      border: solid var(--lb-font-color);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      position: absolute;
      top: 1px;
      left: 3px;
    }

    /* Стиль для контейнера согласия на политику */
    .policy-consent {
      display: inline-flex;                            /** Встроенный флекс-контейнер */
      align-items: center;                             /** Вертикальное выравнивание */
      gap: 5px;                                        /** Отступ между элементами */
      margin-top: 2px !important;                      /** Верхний отступ */
      font-size: 8px !important;                       /** Размер шрифта */
      color: var(--lb-font-color) !important;           /** Цвет текста */
      white-space: nowrap;                             /** Предотвращение переноса текста */
      justify-content: center;                         /** Горизонтальное центрирование */
      background: none  !important;   
    }
    /* Стили ссылок внутри согласия на политику */
    .policy-consent a {
      text-decoration: underline;                      /** Подчеркивание текста */
      color: var(--lb-font-color) !important;           /** Цвет ссылки */
    }
    
    @media (max-width: 600px) {
      /* Скрываем все чекбоксы, включая их стили и галочку */
      #mainWidget input2[type="checkbox"][name="consent"],
      #chatWidget input2[type="checkbox"][name="consent"],
      .policy-consent {
        display: none !important;
      }
    }
  </style>

  <!-- 
    Подключение шрифтов/иконок (один раз):
    - Roboto, Montserrat, GT Eesti Pro Display
    - Material Icons
    - Material Symbols Outlined
  -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Montserrat&family=GT+Eesti+Pro+Display&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
  <!-- Подключение Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
  
  
  
  
<body>

<!-- 
  ======================= 
  Глобальный скрипт для переключения активных виджетов 
  (main / chat / exit) 
  =======================
-->
<script>
  // Переменная для хранения текущего активного виджета
  let activeWidget = null;

  /**
   * Устанавливает активный виджет и скрывает/показывает элементы основного виджета.
   * @param {string|null} name - Имя виджета ('main', 'chat', 'exit') или null для сброса.
   */
  function setActiveWidget(name) {
    activeWidget = name || null;

    const mainPulseContainer = document.querySelector('#mainWidget .pulse-container');
    const mainWidgetText     = document.querySelector('#mainWidget #widgetText');
    if (!mainPulseContainer || !mainWidgetText) return;

    if (activeWidget && activeWidget !== 'main') {
      mainPulseContainer.classList.add('hidden');  // Скрываем пульсацию
      mainWidgetText.style.display = 'none';        // Скрываем текст
    }
    else if (!activeWidget) {
      mainPulseContainer.classList.remove('hidden'); // Показываем пульсацию
      mainWidgetText.style.display = 'flex';          // Показываем текст
    }
  }

  /**
   * Проверяет, можно ли показать виджет (нет других активных виджетов).
   * @returns {boolean}
   */
  function canShowWidget() {
    return (activeWidget === null);
  }

  /**
   * Открывает чат-виджет, если функция showChatWidget определена.
   */
  window.openChatWidget = function() {
    if (typeof showChatWidget === 'function') {
      showChatWidget();
    }
  };
</script>



<!-- 
  ==================================================================================
  ============================= 1. ОСНОВНОЙ ВИДЖЕТ  ================================
  ==================================================================================
-->
<div id="mainWidget">
  <style>
    /* Основной контейнер виджета */
    #mainWidget {
      font-family: var(--lb-font-family);          /** Шрифт для виджета */
      position: relative;                          /** Относительное позиционирование */
      z-index: var(--lb-z-index);                  /** Приоритет отображения */
    }

    /* Контейнер для пульсации кнопки виджета */
    #mainWidget .pulse-container {
      position: fixed;                             /** Фиксированное позиционирование */
      bottom: 20px;                                /** Отступ снизу */
      left: 20px;                                  /** Отступ слева */
      width: 75px;                                 /** Ширина контейнера */
      height: 75px;                                /** Высота контейнера */
      display: flex;                               /** Флекс-контейнер */
      justify-content: center;                     /** Горизонтальное центрирование */
      align-items: center;                         /** Вертикальное центрирование */
      z-index: var(--lb-z-index);                  /** Приоритет отображения */
      transition: opacity 0.3s ease, visibility 0.3s ease; /** Переходы для плавности */
    }

    /* Скрытие пульсации */
    #mainWidget .pulse-container.hidden {
      opacity: 0;                                  /** Прозрачность */
      visibility: hidden;                           /** Скрыть элемент */
    }

    /* Кнопка основного виджета */
    #mainWidget #customWidgetButton {
      animation: pulse 1.5s infinite ease-in-out;   /** Анимация пульсации */
      position: relative;                           /** Относительное позиционирование */
      width: 75px;                                  /** Ширина кнопки */
      height: 75px;                                 /** Высота кнопки */
      background: var(--lb-gradient);               /** Градиентный фон */
      border-radius: 50%;                           /** Круглая форма */
      display: flex;                                /** Флекс-контейнер */
      justify-content: center;                      /** Горизонтальное центрирование */
      align-items: center;                          /** Вертикальное центрирование */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);    /** Тень кнопки */
      cursor: pointer;                              /** Курсор при наведении */
      background-size: 200% auto;                    /** Размер фона для анимации */
      background-position: 0 50%;                    /** Начальная позиция фона */
      will-change: transform, box-shadow;           /** Оптимизация анимации */
      transition: transform 0.3s ease, box-shadow 0.3s ease; /** Переходы для плавности */
      z-index: var(--lb-z-index);                   /** Приоритет отображения */
    }

    /* Анимация пульсации */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    /* Анимация волны пульсации */
    @keyframes pulseWave {
      0% { transform: scale(1); opacity: 0.4; }
      100% { transform: scale(1.8); opacity: 0; }
    }

    /* Дополнительные круги для пульсации */
    #mainWidget .pulse-circle {
      position: absolute;                           /** Абсолютное позиционирование */
      width: 75px;                                  /** Ширина круга */
      height: 75px;                                 /** Высота круга */
      border: 3px solid var(--lb-primary-color);    /** Бордер круга */
      border-radius: 50%;                           /** Круглая форма */
      background-color: transparent;                /** Прозрачный фон */
      opacity: 0.4;                                 /** Прозрачность */
      animation: pulseWave 2.5s infinite ease-out;  /** Анимация волны */
      pointer-events: none;                         /** Игнорировать события мыши */
      will-change: transform, opacity;              /** Оптимизация анимации */
    }

    /* Задержка анимации для второго круга */
    #mainWidget .pulse-circle:nth-child(2) {
      animation-delay: 0.8s;
    }

    /* Задержка анимации для третьего круга */
    #mainWidget .pulse-circle:nth-child(3) {
      animation-delay: 1.6s;
    }

    /* Иконка телефона внутри кнопки виджета */
    #mainWidget .phone-icon {
      font-size: 29px;                              /** Размер иконки */
      animation: pulse 1.5s infinite ease-in-out;   /** Анимация пульсации */
      will-change: transform;                       /** Оптимизация анимации */
      color: var(--lb-background-white);             /** Цвет иконки */
      transition: color 0.3s ease;                  /** Переход цвета при наведении */
      cursor: pointer;                               /** Курсор при наведении */
    }

    /* Стили для иконки при наведении на кнопку */
    #mainWidget #customWidgetButton:hover .phone-icon {
      color: var(--lb-background-white);             /** Цвет иконки при наведении */
    }
    
    
    #mainWidget .modal-button.active-button {
      background: var(--lb-gradient) !important;
      color: var(--lb-background-white) !important;
    }

    /* Текст виджета "Заказать звонок" */
    #mainWidget #widgetText {
      position: fixed;                               /** Фиксированное позиционирование */
      bottom: 40px;                                  /** Отступ снизу */
      left: 120px;                                   /** Отступ слева */
      background: var(--lb-background-white);         /** Белый фон */
      border-radius: var(--lb-radius-large);          /** Скругленные углы */
      padding: 10px;                                  /** Внутренний отступ */
      font-size: 14px;                                /** Размер шрифта */
      color: var(--lb-font-color);                     /** Цвет текста */
      display: flex;                                  /** Флекс-контейнер */
      align-items: center;                            /** Вертикальное выравнивание */
      gap: 10px;                                      /** Отступ между элементами */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);      /** Тень */
      transition: opacity 0.3s ease;                  /** Переход для плавности */
      z-index: var(--lb-z-index);                     /** Приоритет отображения */
    }

    /* Стиль для спана внутри текста виджета */
    #mainWidget #widgetText span {
      flex-grow: 1;                                   /** Растягивание спана */
    }

    /* Модальное окно виджета */
    #mainWidget #customWidgetModal {
      display: none;                                  /** Скрыто по умолчанию */
      position: fixed;                                /** Фиксированное позиционирование */
      bottom: 20px;                                   /** Отступ снизу */
      left: 20px;                                     /** Отступ слева */
      width: 340px;                                   /** Ширина модального окна */
      background: var(--lb-background-white);          /** Белый фон */
      border-radius: var(--lb-radius-large);           /** Скругленные углы */
      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);   /** Тень */
      z-index: var(--lb-z-index);                      /** Приоритет отображения */
      display: block;                                 /** Отображение блока */
      flex-direction: column;                         /** Вертикальное направление флекса */
      visibility: hidden;                             /** Скрыто */
      opacity: 0;                                     /** Прозрачность */
      padding: 4px;                                   /** Внутренний отступ */
      transition: opacity 0.3s ease, transform 0.3s ease; /** Переходы для плавности */
      transition: all 0.4s ease-in-out !important;    /** Дополнительный переход */
    }

    /* Показ модального окна */
    #mainWidget #customWidgetModal.show {
      visibility: visible;                            /** Видимость */
      opacity: 1;                                     /** Прозрачность */
      transform: translateY(0);                       /** Положение */
    }

    /* Скрытие модального окна */
    #mainWidget #customWidgetModal.hide {
      opacity: 0;                                     /** Прозрачность */
      transform: translateY(20px);                    /** Позиционирование */
    }

    /* Заголовок модального окна */
    #mainWidget #customWidgetModalHeader {
      flex: 0 0 auto;                                 /** Флекс-базовый размер */
      margin-top: 15px;                               /** Верхний отступ */
      padding: 5px 20px;                              /** Внутренние отступы */
      background: var(--lb-background-white);           /** Белый фон */
      color: var(--lb-font-color);                      /** Цвет текста */
      font-weight: bold;                               /** Жирный шрифт */
      font-size: 17px;                                 /** Размер шрифта */
      display: flex;                                   /** Флекс-контейнер */
      justify-content: space-between;                   /** Распределение пространства */
      align-items: center;                             /** Вертикальное выравнивание */
      border-top-left-radius: var(--lb-radius-modal);   /** Скругление верхнего левого угла */
      border-top-right-radius: var(--lb-radius-modal);  /** Скругление верхнего правого угла */
    }

    /* Кнопка закрытия модального окна */
    #mainWidget #customCloseWidget {
      background: none;                               /** Без фона */
      border: none;                                   /** Без бордера */
      color: var(--lb-font-color);                      /** Цвет символа закрытия */
      font-size: 24px;                                /** Размер символа */
      cursor: pointer;                                /** Курсор при наведении */
    }

    /* Кнопки внутри модального окна */
    #mainWidget .modal-button {
      padding: 11px;                                  /** Внутренний отступ */
      background: var(--lb-input-hover-background);      /** Фон кнопки */
      color: var(--lb-font-color) !important;           /** Цвет текста */
      border: none;                                   /** Без бордера */
      border-radius: var(--lb-radius-small) !important;  /** Скругленные углы */
      cursor: pointer;                                /** Курсор при наведении */
      font-size: 18px;                                /** Размер шрифта */
      display: flex;                                  /** Флекс-контейнер */
      align-items: center;                            /** Вертикальное выравнивание */
      justify-content: center;                        /** Горизонтальное центрирование */
      width: calc(100% - 40px);                        /** Ширина кнопки */
      margin: 10px auto;                              /** Отступы */
      box-sizing: border-box;                         /** Включение бордера и паддингов в ширину */
      font-family: var(--lb-font-family);              /** Шрифт кнопки */
      transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; /** Переходы */
      text-decoration: none;                          /** Без подчеркивания */
      box-shadow: none;                               /** Без тени */
    }

    /* Последняя кнопка имеет дополнительный отступ снизу */
    #mainWidget .modal-button:last-child {
      margin-bottom: 18px;
    }

    /* Стили при наведении на кнопку */
    #mainWidget .modal-button:hover {
      background: var(--lb-gradient);                 /** Градиентный фон при наведении */
      color: var(--lb-background-white) !important;     /** Цвет текста при наведении */
    }

    /* Стили иконок внутри кнопок */
    #mainWidget .modal-button .material-icons,
    #mainWidget .modal-button .material-symbols-outlined {
      margin-right: 10px;                             /** Отступ справа от иконки */
      font-size: 24px;                                /** Размер иконки */
      color: var(--lb-font-color);                      /** Цвет иконки */
      transition: color 0.3s ease;                    /** Переход цвета */
    }

    /* Стили иконок при наведении и активном состоянии кнопки */
    #mainWidget .modal-button:hover .material-icons,
    #mainWidget .modal-button.active-button .material-icons,
    #mainWidget .modal-button:hover .material-symbols-outlined,
    #mainWidget .modal-button.active-button .material-symbols-outlined {
      color: var(--lb-background-white);               /** Цвет иконки при наведении */
    }

    /* Оверлей для модального окна */
    #mainWidget #modalOverlay {
      position: fixed;                                /** Фиксированное позиционирование */
      top: 0;                                         /** Верхний отступ */
      left: 0;                                        /** Левый отступ */
      width: 100%;                                    /** Ширина оверлея */
      height: 100%;                                   /** Высота оверлея */
      background-color: var(--lb-black-color);         /** Черный фон */
      z-index: var(--lb-z-index-overlay);             /** Приоритет отображения */
      display: none;                                  /** Скрыто по умолчанию */
      opacity: 0;                                     /** Прозрачность */
      visibility: hidden;                              /** Скрыто */
      transition: var(--lb-transition-opacity);        /** Переход прозрачности */
    }

    /* Показ оверлея */
    #mainWidget #modalOverlay.show {
      display: block;                                 /** Отображение блока */
      visibility: visible;                             /** Видимость */
      opacity: 0.5;                                   /** Прозрачность */
    }

    /* Скрытие оверлея */
    #mainWidget #modalOverlay.hide {
      opacity: 0;                                     /** Прозрачность */
    }

    /* Скрытые элементы */
    #mainWidget .hidden {
      display: none !important;                       /** Полное скрытие элемента */
    }

    /* Форма телефона (скрыта по умолчанию) */
    #mainWidget .phone-form {
      display: none;                                  /** Скрыто по умолчанию */
      flex-direction: column;                         /** Вертикальное направление флекса */
      align-items: center;                            /** Горизонтальное выравнивание */
      width: 100%;                                    /** Ширина формы */
      margin: 20px 0;                                 /** Отступы */
      gap: 10px;                                      /** Отступ между элементами */
      padding: 20px;                                  /** Внутренний отступ */
      box-sizing: border-box;                         /** Включение бордера и паддингов в ширину */
      position: relative;                             /** Относительное позиционирование */
      
      transition: all 0.4s ease-in-out !important;    /** Плавные переходы */
    }

    /* Активное состояние формы телефона */
    #mainWidget .phone-form.active {
      display: flex;                                  /** Отображение флекса */
    }

    /* Метка (label) внутри формы телефона */
    #mainWidget .phone-form label {
      font-size: 21px;                                /** Размер шрифта */
      color: var(--lb-font-color);                      /** Цвет текста */
      text-align: center;                             /** Центрирование текста */
      margin: 10px 0px 10px 0px;                       /** Отступы */
    }

    /* Инпуты формы телефона */
    #mainWidget .phone-form input {
      width: 100%;                                    /** Ширина инпута */
      padding: 15px 15px 15px 30px;                    /** Внутренние отступы */
      font-size: 17px;                                /** Размер шрифта */
      color: var(--lb-font-color);                      /** Цвет текста */
      border: 1px solid rgba(222, 232, 247, 0.6);      /** Бордер инпута */
      border-radius: 1rem;                             /** Скругленные углы */
      box-shadow:
        inset 0.2rem 0.2rem 0.5rem var(--lb-shadow-color),  /** Внутренняя тень */
        inset -0.2rem -0.2rem 0.5rem var(--lb-background-white); /** Внутренняя светлая тень */
      background: var(--lb-input-hover-background);      /** Фон инпута */
      box-sizing: border-box;                           /** Включение бордера и паддингов в ширину */
      transition: background 0.3s ease, box-shadow 0.3s ease; /** Переходы для плавности */
      text-align: center;                               /** Центрирование текста */
      position: relative;                               /** Относительное позиционирование */
      margin-bottom: 3px;                                /** Нижний отступ */
    }

    /* Фон инпута при наведении */
    #mainWidget .phone-form input:hover {
      background: var(--lb-background-white);             /** Белый фон при наведении */
    }

    /* Плейсхолдер инпута */
    #mainWidget .phone-form input::placeholder {
      color: var(--lb-font-color);                        /** Цвет плейсхолдера */
      text-align: center;                                 /** Центрирование текста */
    }

    /* Стили при фокусе на инпуте */
    #mainWidget .phone-form input:focus {
      outline: none;                                      /** Убираем обводку */
      box-shadow:
        0.3rem 0.3rem 0.6rem var(--lb-border-gray),      /** Тень при фокусе */
        -0.2rem -0.2rem 0.5rem var(--lb-background-white); /** Светлая тень при фокусе */
      background: var(--lb-background-white);             /** Белый фон при фокусе */
    }

    /* Иконка внутри инпута */
    #mainWidget .phone-form .input-icon {
      position: absolute;                                 /** Абсолютное позиционирование */
      left: 45px;                                         /** Смещение слева */
      top: 50%;                                           /** Центрирование по вертикали */
      transform: translateY(-50%);                         /** Центрирование по вертикали */
      font-size: 24px;                                    /** Размер иконки */
      color: var(--lb-primary-color);                       /** Цвет иконки */
      pointer-events: none;                               /** Игнорирование событий мыши */
      transition: color 0.3s ease;                       /** Переход цвета */
    }

    /* Цвет иконки при фокусе на инпуте */
    #mainWidget .phone-form input:focus + .input-icon {
      color: var(--lb-primary-color);                       /** Цвет иконки при фокусе */
    }

    /* Кнопка отправки формы телефона */
    #mainWidget .phone-form button {
      background: var(--lb-gradient);                      /** Градиентный фон */
      color: var(--lb-background-white);                     /** Белый цвет текста */
      cursor: pointer;                                      /** Курсор при наведении */
      font-size: 18px;                                      /** Размер шрифта */
      border: none;                                         /** Без бордера */
      transition: background-position var(--lb-animation-duration) var(--lb-animation-timing); /** Переход фона */
      background-size: 200% auto;                           /** Размер фона для анимации */
      background-position: 0 50%;                           /** Начальная позиция фона */
      border-radius: var(--lb-radius-small);                /** Скругленные углы */
      width: 100%;                                          /** Ширина кнопки */
      box-sizing: border-box;                               /** Включение бордера и паддингов в ширину */
      padding: 15px;                                        /** Внутренний отступ */
      margin-bottom: 5px;                                    /** Нижний отступ */
    }

    /* Переход фона кнопки при наведении */
    #mainWidget .phone-form button:hover {
      background-position: 100% 50%;                        /** Позиция фона при наведении */
    }

    /* Сообщение об ошибке в форме телефона */
    #mainWidget .phone-form .error-message {
      font-size: 12px;                                      /** Размер шрифта */
      color: var(--lb-red-color);                            /** Красный цвет текста */
      margin-top: 5px;                                       /** Верхний отступ */
      text-align: center;                                    /** Центрирование текста */
    }

    /* Кнопка закрытия формы телефона */
    #mainWidget .phone-form .close-form-btn {
      position: left !important;                           /** Позиционирование слева */
      top: 0px !important;                                  /** Позиционирование сверху */
      right: 20px !important;                                /** Позиционирование справа */
      width: 30px;                                          /** Ширина кнопки */
      height: 30px;                                         /** Высота кнопки */
      cursor: pointer;                                      /** Курсор при наведении */
      display: flex;                                        /** Флекс-контейнер */
      align-items: center;                                  /** Вертикальное выравнивание */
      justify-content: center;                              /** Горизонтальное центрирование */
      background: rgba(0, 0, 0, 0.5);                       /** Полупрозрачный фон */
      border-radius: 50%;                                   /** Круглая форма */
      opacity: 0.27;                                        /** Прозрачность */
      transition: opacity 0.3s ease, background 0.3s ease; /** Переходы */
    }

    /* Стили кнопки закрытия при наведении */
    #mainWidget .phone-form .close-form-btn:hover {
      opacity: 1;                                           /** Прозрачность при наведении */
      background: rgba(0, 0, 0, 0.7);                       /** Более темный фон при наведении */
    }

    /* Иконка внутри кнопки закрытия */
    #mainWidget .phone-form .close-form-btn .material-symbols-outlined {
      font-size: 20px;                                      /** Размер иконки */
      color: #FFFFFF;                                        /** Белый цвет иконки */
    }

    /* Адаптивные стили для узких экранов */
    @media (max-width: 340px) {
      .policy-consent {
        display: flex;                    /* Используем flex, чтобы контролировать перенос элементов */
        flex-wrap: wrap;                  /* Разрешаем перенос элементов на новую строку */
        justify-content: center;          /* Центрируем содержимое по горизонтали */
        align-items: center;              /* Центрируем по вертикали */
        white-space: normal !important;   /* Позволяем тексту переноситься */
        text-align: center;               /* Центрируем текст внутри контейнера */
        padding: 0 5px;                   /* Добавляем небольшие отступы слева и справа */
      }

      /* Если необходимо, скорректируйте позиционирование галочки в чекбоксе */
      #mainWidget input2[type="checkbox"][name="consent"]:checked::after,
      #chatWidget input2[type="checkbox"][name="consent"]:checked::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        width: 6px;                
        height: 10px;
        border-width: 0 2px 2px 0;
      }
    }
  </style>

  <!-- Контейнер пульсации и кнопки виджета -->
  <div class="pulse-container">
    <!-- Кнопка виджета -->
    <div id="customWidgetButton">
      <span class="material-icons phone-icon">phone</span> <!-- Иконка телефона -->
    </div>
    <!-- Круги для пульсации -->
    <div class="pulse-circle"></div>
    <div class="pulse-circle"></div>
    <div class="pulse-circle"></div>
  </div>

  <!-- Текст виджета -->
  <div id="widgetText">
    <span>Заказать звонок</span>
  </div>

  <!-- Модальное окно виджета -->
  <div id="customWidgetModal">
    <!-- Заголовок модального окна -->
    <div id="customWidgetModalHeader">
      <span>EXEED ЦЕНТР FRESH СЕВЕР</span> <!-- Название компании -->
      <button id="customCloseWidget">&times;</button> <!-- Кнопка закрытия модального окна -->
    </div>
    <!-- Контейнер для кнопок внутри модального окна -->
    <div id="modalButtonsContainer">
      <!-- Кнопки добавятся скриптом -->
    </div>
    <!-- Форма для ввода телефона -->
    <form id="phoneForm" class="phone-form" action="#" method="POST">
      <button type="button" class="close-form-btn">
        <span class="material-symbols-outlined">arrow_back</span> <!-- Иконка стрелки назад -->
      </button>
      <label>Напишите ваш телефон и мы перезвоним через 25 секунд</label> <!-- Инструкция для пользователя -->
      <div style="position: relative; width: 100%;">
        <input type="tel" id="phone-input" name="phone" placeholder="+7 (XXX) XXX-XX-XX" required> <!-- Поле ввода телефона -->
        <span class="material-icons input-icon">phone</span> <!-- Иконка телефона внутри инпута -->
      </div>
      <button type="submit" id="submit-button">ОТПРАВИТЬ</button> <!-- Кнопка отправки формы -->
      <div class="error-message" id="phone-error"></div> <!-- Контейнер для сообщений об ошибках -->
      <input type="hidden" name="source" value="customWidget"> <!-- Скрытое поле для источника заявки -->

      <!-- === FIX POLICY === -->
      <div class="policy-consent">
        <input type="checkbox" name="consent" checked /> <!-- Чекбокс согласия -->
        Даю согласие на <a href="#" target="_blank" rel="nofollow" id="privacyLinkMain">обработку персональных данных</a> <!-- Ссылка на политику конфиденциальности -->
      </div>
    </form>
  </div>

  <!-- Оверлей для модального окна -->
  <div id="modalOverlay"></div>

  <!-- Подключение Calltouch -->
  <script>
    (function(w,d,t,u,n,a,m){
      w['CalltouchObject']=n;w[n]=w[n]||function(){
      (w[n].q=w[n].q||[]).push(arguments)},w[n].l=1*new Date();
      a=d.createElement(t), m=d.getElementsByTagName(t)[0];
      a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
    })(window, document, 'script', 'https://cdn.calltouch.ru/calltouch.js', 'ctw');
  </script>

  <!-- JS Основного виджета -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Конфигурация виджета
      const fixedCalltouchKey = 'key-dashio'; // Ключ для Calltouch
      const privacyPolicyUrl  = 'https://freshauto-exeed.ru/policy'; // URL политики конфиденциальности
      const thankYouUrl       = 'https://freshauto-exeed.ru/thank-you'; // URL страницы благодарности

      // Список элементов для кнопок модального окна
      const items = [
        { text: 'Заказать звонок', link: thankYouUrl, icon: 'phone', iconType: 'material-icons' },
        { text: 'Онлайн чат', link: thankYouUrl, icon: 'sms', iconType: 'material-symbols-outlined' },
        { text: 'Оценить авто', link: thankYouUrl, icon: 'swap_driving_apps', iconType: 'material-symbols-outlined' },
        { text: 'Запись на Тест-драйв', link: thankYouUrl, icon: 'swap_driving_apps_wheel', iconType: 'material-symbols-outlined' },
        { text: 'Рассчитать кредит', link: thankYouUrl, icon: 'credit_score', iconType: 'material-icons' },
        { text: 'Запись на сервис', link: thankYouUrl, icon: 'build', iconType: 'material-icons' },
        { text: 'Получить выгоду', link: thankYouUrl, icon: 'volunteer_activism', iconType: 'material-symbols-outlined' },
        { text: 'Написать в Telegram', link: thankYouUrl, icon: 'fab fa-telegram', iconType: 'fa' },
        { text: 'Написать в WhatsApp', link: thankYouUrl, icon: 'fab fa-whatsapp', iconType: 'fa' },
        { text: 'Написать во ВКонтакте', link: thankYouUrl, icon: 'fab fa-vk', iconType: 'fa' },
      ];

      let activeButtonIndex = 0;                       // Индекс активной кнопки
      let colorChangeInterval = null;                   // Интервал для смены кнопок
      let currentCalltouchKey = '';                     // Текущий ключ Calltouch
      let currentFormId = '';                           // Текущий ID формы
      let currentListener = null;                       // Текущий обработчик события

      // Элементы DOM
      const widgetButton        = document.getElementById('customWidgetButton'); // Кнопка виджета
      const pulseContainer      = document.querySelector('#mainWidget .pulse-container'); // Контейнер пульсации
      const iconElement         = widgetButton.querySelector('.phone-icon'); // Иконка внутри кнопки
      const widgetText          = document.getElementById('widgetText'); // Текст виджета
      const widgetModal         = document.getElementById('customWidgetModal'); // Модальное окно
      const overlay             = document.getElementById('modalOverlay'); // Оверлей
      const customCloseWidget   = widgetModal.querySelector('#customCloseWidget'); // Кнопка закрытия модального окна
      const modalButtonsContainer = document.getElementById('modalButtonsContainer'); // Контейнер для кнопок
      const phoneForm           = document.getElementById('phoneForm'); // Форма телефона
      const closeFormBtn        = phoneForm.querySelector('.close-form-btn'); // Кнопка закрытия формы
      const phoneInput          = phoneForm.querySelector('#phone-input'); // Поле ввода телефона
      const phoneError          = phoneForm.querySelector('#phone-error'); // Контейнер для ошибок
      const submitButton        = phoneForm.querySelector('#submit-button'); // Кнопка отправки формы

      const privacyLinkMain     = document.getElementById('privacyLinkMain'); // Ссылка на политику конфиденциальности
      if (privacyLinkMain) {
        privacyLinkMain.href = privacyPolicyUrl; // Установка href для ссылки на политику
      }

      let isModalHovered = false;                       // Флаг наведения на модальное окно
      const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0); // Проверка устройства с сенсорным экраном

      /**
       * Транслитерация текста с кириллицы на латиницу.
       * @param {string} text - Текст для транслитерации.
       * @returns {string} - Транслитерированный текст.
       */
      function transliterate(text) {
        const translitMap = {
          'а': 'a','б': 'b','в': 'v','г': 'g','д': 'd','е': 'e','ё': 'e','ж': 'zh','з': 'z','и': 'i',
          'й': 'y','к': 'k','л': 'l','м': 'm','н': 'n','о': 'o','п': 'p','р': 'r','с': 's','т': 't',
          'у': 'u','ф': 'f','х': 'h','ц': 'ts','ч': 'ch','ш': 'sh','щ': 'shch','ъ': '','ы': 'y','ь': '',
          'э': 'e','ю': 'yu','я': 'ya','А': 'A','Б': 'B','В': 'V','Г': 'G','Д': 'D','Е': 'E','Ё': 'E',
          'Ж': 'Zh','З': 'Z','И': 'I','Й': 'Y','К': 'K','Л': 'L','М': 'M','Н': 'N','О': 'O','П': 'P',
          'Р': 'R','С': 'S','Т': 'T','У': 'U','Ф': 'F','Х': 'H','Ц': 'Ts','Ч': 'Ch','Ш': 'Sh','Щ': 'Shch',
          'Ъ': '','Ы': 'Y','Ь': '','Э': 'E','Ю': 'Yu','Я': 'Ya'
        };
        return text.split('').map(char => translitMap[char] || char).join('');
      }

      /**
       * Создает кнопки внутри модального окна на основе массива items.
       */
      function createButtons() {
        items.forEach((item, index) => {
          const button = document.createElement('a'); // Создаем ссылку как кнопку
          button.href = item.link;                      // Устанавливаем ссылку
          button.className = 'modal-button';            // Присваиваем класс
          button.dataset.calltouchKey = fixedCalltouchKey; // Устанавливаем data-атрибут
          const formId = transliterate(item.text).replace(/\s+/g, '-').toLowerCase(); // Генерируем ID формы
          button.dataset.formId = formId;               // Устанавливаем data-атрибут
          
          if (item.iconType === 'fa') {
            button.innerHTML = `<i class="${item.icon}" style="margin-right:10px;"></i><span>${item.text}</span>`;
          } else {
            const iconClass = (item.iconType === 'material-symbols-outlined') ? 'material-symbols-outlined' : 'material-icons';
            button.innerHTML = `<span class="${iconClass}">${item.icon}</span><span>${item.text}</span>`;
          }

          modalButtonsContainer.appendChild(button);     // Добавляем кнопку в контейнер
        });
      }
      createButtons(); // Вызываем функцию создания кнопок

      const buttons = Array.from(modalButtonsContainer.querySelectorAll('.modal-button')); // Получаем все кнопки

      /**
       * Удаляет класс 'active-button' у всех кнопок.
       */
      function removeAllActiveButtons() {
        buttons.forEach(button => {
          button.classList.remove('active-button');
        });
      }

      /**
       * Синхронизирует выделение активной кнопки и обновляет иконку.
       * @param {number} index - Индекс активной кнопки.
       */
      function syncHighlight(index) {
        buttons.forEach((button, i) => {
          if (i === index) {
            button.classList.add('active-button');       // Добавляем класс активной кнопке
          } else {
            button.classList.remove('active-button');    // Убираем класс с остальных
          }
        });
        const currentItem = items[index];
        
        
        if (currentItem.iconType === 'fa') {
          iconElement.className = currentItem.icon + " phone-icon";
          iconElement.textContent = "";
        } else if (currentItem.iconType === 'material-symbols-outlined') {
          iconElement.className = 'material-symbols-outlined phone-icon';
          iconElement.textContent = currentItem.icon;
        } else {
          iconElement.className = 'material-icons phone-icon';
          iconElement.textContent = currentItem.icon;
        }

      }

      /**
       * Запускает цикл смены активных кнопок с интервалом.
       */
      function startColorCycle() {
        if (colorChangeInterval !== null) clearInterval(colorChangeInterval); // Очищаем предыдущий интервал
        syncHighlight(activeButtonIndex);                                        // Синхронизируем выделение
        widgetText.querySelector('span').textContent = items[activeButtonIndex].text; // Обновляем текст виджета
        colorChangeInterval = setInterval(() => {
          if (!isModalHovered || isTouchDevice) {                              // Если модальное окно не наведено или устройство сенсорное
            activeButtonIndex = (activeButtonIndex + 1) % buttons.length;    // Увеличиваем индекс кнопки
            syncHighlight(activeButtonIndex);                                // Синхронизируем выделение
            widgetText.querySelector('span').textContent = items[activeButtonIndex].text; // Обновляем текст виджета
          }
        }, 3000); // Интервал 3 секунды
      }

      /**
       * Останавливает цикл смены активных кнопок.
       */
      function stopColorCycle() {
        if (colorChangeInterval !== null) {
          clearInterval(colorChangeInterval); // Очищаем интервал
          colorChangeInterval = null;
        }
        removeAllActiveButtons();               // Убираем выделение с всех кнопок
      }

      // Обработчики наведения для не сенсорных устройств
      if (!isTouchDevice) {
        widgetModal.addEventListener('mouseenter', () => {
          isModalHovered = true;               // Устанавливаем флаг наведения
          stopColorCycle();                    // Останавливаем цикл смены кнопок
        });
        widgetModal.addEventListener('mouseleave', () => {
          isModalHovered = false;              // Сбрасываем флаг наведения
          startColorCycle();                   // Запускаем цикл смены кнопок
        });
      }

      /**
       * Обработчик клика по кнопке внутри модального окна.
       */
      buttons.forEach((button, index) => {
        const item = items[index];
        button.addEventListener('click', event => {
          event.preventDefault(); // Предотвращаем переход по ссылке
          const calltouchKey = button.dataset.calltouchKey; // Получаем ключ Calltouch
          const formId = button.dataset.formId;             // Получаем ID формы
          const buttonText = button.querySelector('span:nth-child(2)').textContent.trim(); // Получаем текст кнопки
          const link = item.link;                            // Получаем ссылку

          if (['Онлайн чат', 'Написать в Telegram', 'Написать в WhatsApp', 'Написать во ВКонтакте'].includes(item.text)) {              // Если выбрана опция "Онлайн чат"
            hideModal();                                      // Скрываем модальное окно
            setTimeout(() => {
              window.openChatWidget();                        // Открываем чат-виджет
            }, 400);
            return;
          }

          if (calltouchKey && formId) {
            currentCalltouchKey = calltouchKey;               // Устанавливаем текущий ключ
            currentFormId = formId;                           // Устанавливаем текущий ID формы
            hideButtonsAndShowForm(formId, buttonText, link); // Скрываем кнопки и показываем форму
          }
        });

        // Обработчики наведения для не сенсорных устройств
        if (!isTouchDevice) {
          button.addEventListener('mouseover', () => {
            if (!isModalHovered) {
              syncHighlight(index);                            // Синхронизируем выделение
              widgetText.querySelector('span').textContent = items[index].text; // Обновляем текст виджета
            }
          });
          button.addEventListener('mouseout', () => {
            if (!isModalHovered) {
              syncHighlight(activeButtonIndex);               // Синхронизируем выделение
              widgetText.querySelector('span').textContent = items[activeButtonIndex].text; // Обновляем текст виджета
            }
          });
        }
      });

      /**
       * Показывает модальное окно виджета.
       */
      function showModal() {
        if (!canShowWidget()) return; // Проверяем возможность показа виджета
        setActiveWidget('main');      // Устанавливаем активный виджет

        widgetModal.classList.add('show');          // Добавляем класс показа модального окна
        overlay.classList.add('show');              // Добавляем класс показа оверлея
        widgetText.style.display = 'none';          // Скрываем текст виджета
        pulseContainer.classList.add('hidden');      // Скрываем пульсацию
        startColorCycle();                           // Запускаем цикл смены кнопок
      }

      /**
       * Скрывает модальное окно виджета.
       */
      function hideModal() {
        widgetModal.classList.remove('show');        // Убираем класс показа модального окна
        widgetModal.classList.add('hide');           // Добавляем класс скрытия модального окна
        overlay.classList.remove('show');            // Убираем класс показа оверлея
        overlay.classList.add('hide');               // Добавляем класс скрытия оверлея
        setTimeout(() => {
          widgetModal.classList.remove('hide');       // Убираем класс скрытия модального окна
          overlay.classList.remove('hide');           // Убираем класс скрытия оверлея
          widgetText.style.display = 'flex';           // Показываем текст виджета
          pulseContainer.classList.remove('hidden');    // Показываем пульсацию
        }, 300);
        setActiveWidget(null);                        // Сбрасываем активный виджет
      }

      // Обработчики событий для показа модального окна
      widgetButton.addEventListener('mouseover', showModal); // Показываем модальное окно при наведении на кнопку
      widgetButton.addEventListener('click', event => {      // Показываем модальное окно при клике на кнопку
        event.preventDefault();
        showModal();
      });
      widgetText.addEventListener('mouseover', showModal);   // Показываем модальное окно при наведении на текст

      // Обработчики событий для закрытия модального окна
      customCloseWidget.addEventListener('click', hideModal); // Закрываем модальное окно при клике на кнопку закрытия
      overlay.addEventListener('click', hideModal);           // Закрываем модальное окно при клике на оверлей
      closeFormBtn.addEventListener('click', showButtonsAndHideForm); // Показываем кнопки и скрываем форму при клике на кнопку закрытия формы

      // Таймер для автоматического показа модального окна через
      setTimeout(() => {
        if (canShowWidget()) {
          showModal();
          setInterval(() => {
            if (canShowWidget()) {
              showModal();
            }
          }, 60000); // ТАЙМИНГИ: ROUND виджет повторные показы через Х секунд
        }
      }, 37000); // ТАЙМИНГИ: ROUND виджет первый показ через Х секунд

      syncHighlight(activeButtonIndex); // Синхронизируем начальное выделение кнопки
      startColorCycle();                 // Запускаем цикл смены кнопок

      /**
       * Скрывает кнопки и показывает форму для ввода телефона.
       * @param {string} formId - ID формы.
       * @param {string} buttonText - Текст кнопки.
       * @param {string} link - Ссылка для формы.
       */
      function hideButtonsAndShowForm(formId, buttonText, link) {
        modalButtonsContainer.style.display = 'none';     // Скрываем кнопки
        phoneForm.classList.add('active');                // Показываем форму
        phoneForm.id = formId;                             // Устанавливаем ID формы
        phoneForm.action = link;                           // Устанавливаем действие формы
        submitButton.textContent = buttonText;             // Обновляем текст кнопки отправки
        document.getElementById('customWidgetModalHeader').style.display = 'none'; // Скрываем заголовок модального окна
        integrateCalltouch(formId, fixedCalltouchKey);    // Интегрируем Calltouch для формы
      }

      /**
       * Показывает кнопки и скрывает форму для ввода телефона.
       */
      function showButtonsAndHideForm() {
        modalButtonsContainer.style.display = 'block';    // Показываем кнопки
        phoneForm.classList.remove('active');             // Скрываем форму
        phoneForm.reset();                                 // Сбрасываем форму
        phoneError.textContent = '';                       // Очищаем сообщения об ошибках
        phoneForm.id = 'phoneForm';                        // Устанавливаем стандартный ID формы
        phoneForm.action = '#';                            // Сбрасываем действие формы
        submitButton.textContent = 'ОТПРАВИТЬ';            // Устанавливаем стандартный текст кнопки
        currentCalltouchKey = '';                          // Сбрасываем текущий ключ Calltouch
        currentFormId = '';                                // Сбрасываем текущий ID формы
        document.getElementById('customWidgetModalHeader').style.display = 'flex'; // Показываем заголовок модального окна
      }

      // Форматирование ввода телефона в основном виджете
      phoneInput.addEventListener("input", function () {
        let value = phoneInput.value.replace(/\D/g, "").substring(0, 11); // Убираем нецифры и ограничиваем длину
        let formattedValue = "+7 (";
        if (value.length > 1) formattedValue += value.substring(1, 4);
        if (value.length >= 5) formattedValue += ") " + value.substring(4, 7);
        if (value.length >= 8) formattedValue += "-" + value.substring(7, 9);
        if (value.length >= 10) formattedValue += "-" + value.substring(9, 11);
        phoneInput.value = formattedValue; // Устанавливаем отформатированное значение
      });

      /**
       * Интегрирует Calltouch для формы.
       * @param {string} formId - ID формы.
       * @param {string} widgetKey - Ключ виджета Calltouch.
       */
      function integrateCalltouch(formId, widgetKey) {
        const form = document.getElementById(formId);                    // Получаем форму по ID
        const phoneInput = form?.querySelector('input[name="phone"]');    // Получаем поле ввода телефона
        if (!form || !phoneInput) {
          console.error(`Форма "${formId}" не найдена.`);              // Ошибка, если форма не найдена
          return;
        }
        if (currentListener) {
          form.removeEventListener('submit', currentListener);           // Удаляем предыдущий слушатель
        }
        // Создаем новый обработчик отправки формы
        currentListener = function (event) {
          event.preventDefault(); // Предотвращаем стандартное поведение формы
          const phone = phoneInput.value.trim().replace(/\D/g, '');    // Получаем телефон без нецифр
          if (!phone) {
            alert('Введите корректный номер телефона.');               // Предупреждение, если телефон пуст
            return;
          }
          if (!window.ctw || typeof window.ctw.createRequest !== 'function') {
            console.error('Calltouch API не загружен.');              // Ошибка, если Calltouch не загружен
            alert('Произошла ошибка. Пожалуйста, попробуйте позже.');
            return;
          }
          // Создаем заявку через Calltouch
          window.ctw.createRequest(
            widgetKey,                      // Ключ виджета
            phone,                          // Телефон
            [],                             // Дополнительные параметры
            function (success, data) {      // Callback функция
              if (success) {
                console.log('Заявка успешно создана, ID:', data.callbackRequestId);
                const formData = new FormData(form); // Получаем данные формы
                // Отправляем данные формы на сервер
                fetch(form.action, {
                  method: form.method,
                  body: formData,
                })
                  .then(response => {
                    if (response.ok) {
                      console.log('Данные успешно отправлены на сервер.');
                      alert('Заявка успешно отправлена!');
                      window.location.href = form.action; // Перенаправляем на страницу благодарности
                    } else {
                      console.error('Ошибка при отправке:', response.statusText);
                      alert('Ошибка при отправке данных. Попробуйте позже.');
                    }
                  })
                  .catch(error => {
                    console.error('Ошибка при fetch:', error);
                    alert('Произошла ошибка. Пожалуйста, попробуйте позже.');
                  });
              } else {
                console.error('Ошибка создания заявки:', data);
                alert('Ошибка при отправке заявки. Попробуйте позже.');
              }
            },
            null,
            ['popup_widget_round', 'Форма сайта', 'round', 'popup_widget', formId] // Дополнительные параметры
          );
        };
        form.addEventListener('submit', currentListener); // Добавляем обработчик события отправки
      }

      // Интеграция Calltouch для основной формы
      integrateCalltouch('phoneForm', fixedCalltouchKey);
    });
  </script>
</div><!-- /#mainWidget -->


<!-- 
  ==================================================================================
  ============================= 2. ЧАТ-ВИДЖЕТ  =====================================
  ==================================================================================
-->
<div id="chatWidget">
  <style>
    /* Основной контейнер чат-виджета */
    #chatWidget {
      position: relative;                           /** Относительное позиционирование */
      z-index: var(--lb-z-index);                   /** Приоритет отображения */
    }

    /* Оверлей для чат-виджета */
    #chatWidget #chatOverlay {
      position: fixed;                              /** Фиксированное позиционирование */
      top: 0;                                       /** Верхний отступ */
      left: 0;                                      /** Левый отступ */
      width: 100%;                                  /** Ширина оверлея */
      height: 100%;                                 /** Высота оверлея */
      background: rgba(0,0,0,0.5);                   /** Полупрозрачный черный фон */
      z-index: var(--lb-z-index-overlay);            /** Приоритет отображения */
      display: none;                                /** Скрыто по умолчанию */
      opacity: 0;                                   /** Прозрачность */
      transition: opacity 0.3s;                     /** Переход прозрачности */
    }

    /* Контейнер для виджета чата */
    #chatWidget .widget-container {
      position: fixed;                              /** Фиксированное позиционирование */
      bottom: 20px;                                 /** Отступ снизу */
      left: 20px;                                   /** Отступ слева */
      width: 350px;                                 /** Ширина контейнера */
      font-family: var(--lb-font-family);            /** Шрифт для виджета */
      box-shadow: var(--lb-box-shadow);              /** Тень контейнера */
      border-radius: 20px !important;                 /** Скругленные углы */
      background: var(--lb-gradient);                 /** Градиентный фон */
      background-size: 200% auto;                       /** Размер фона для анимации */
      background-position: 0 50%;                       /** Начальная позиция фона */
      z-index: var(--lb-z-index);                       /** Приоритет отображения */
      display: none;                                     /** Скрыто по умолчанию */
      flex-direction: column;                            /** Вертикальное направление флекса */
      height: 500px;                                      /** Высота контейнера */
      overflow: hidden;                                   /** Скрытие переполнения */
      opacity: 0;                                         /** Прозрачность */
      transition:
        all 0.6s ease-out,                               /** Переход всех свойств */
        opacity 0.6s ease-in,                            /** Переход прозрачности */
        background-position var(--lb-animation-duration) var(--lb-animation-timing); /** Переход позиции фона */
      transition: all 0.4s ease-in-out !important;      /** Дополнительный переход */
    }

    /* Изменение позиции фона при наведении */
    #chatWidget .widget-container:hover {
      background-position: 100% 50%;                    /** Позиция фона при наведении */
    }

    /* Показ контейнера виджета */
    #chatWidget .widget-container.show {
      display: flex;                                   /** Отображение флекса */
      opacity: 1;                                      /** Прозрачность */
    }

    /* Заголовок виджета чата */
    #chatWidget .widget-header {
      position: relative;                             /** Относительное позиционирование */
      display: flex;                                  /** Флекс-контейнер */
      border-radius: var(--lb-radius-large) var(--lb-radius-large) 0 0; /** Скругленные углы сверху */
      align-items: center;                            /** Вертикальное выравнивание */
      padding: 10px;                                  /** Внутренний отступ */
      background: var(--lb-gradient);                 /** Градиентный фон */
      background-size: 200% auto;                       /** Размер фона для анимации */
      background-position: 0 50%;                       /** Начальная позиция фона */
      color: var(--lb-background-white);                /** Цвет текста */
      transition: background-position var(--lb-animation-duration) var(--lb-animation-timing); /** Переход позиции фона */
    }

    /* Изменение позиции фона при наведении */
    #chatWidget .widget-header:hover {
      background-position: 100% 50%;                    /** Позиция фона при наведении */
    }

    /* Фото менеджера в заголовке виджета */
    #chatWidget .manager-photo img {
      width: 50px;                                    /** Ширина изображения */
      height: 50px;                                   /** Высота изображения */
      border-radius: 50%;                             /** Круглая форма */
      margin-right: 10px;                              /** Отступ справа */
    }

    /* Контейнер информации о менеджере */
    #chatWidget .header-info {
      display: flex;                                  /** Флекс-контейнер */
      flex-direction: column;                           /** Вертикальное направление */
    }

    /* Название менеджера */
    #chatWidget .manager-title {
      padding: 7px 7px 7px 7px;                                   /** Внутренний отступ */
      font-size: 14px;                                /** Размер шрифта */
      font-weight: bold;                              /** Жирный шрифт */
    }

    /* Подзаголовок с состоянием менеджера */
    #chatWidget .manager-subtitle {
      font-size: 12px;                                /** Размер шрифта */
      color: var(--lb-background-white);                /** Цвет текста */
      display: flex;                                  /** Флекс-контейнер */
      align-items: center;                            /** Вертикальное выравнивание */
    }

    /* Иконка статуса менеджера */
    #chatWidget .manager-subtitle .status-icon {
      color: #53a821;                                  /** Зеленый цвет иконки */
      font-size: 18px;                                /** Размер иконки */
      padding: 2px;                                   /** Внутренний отступ */
      margin-right: 4px;                               /** Отступ справа */
      margin-bottom: 2px;                              /** Отступ снизу */
    }

    /* Тело виджета чата */
    #chatWidget .widget-body {
      display: flex;                                  /** Флекс-контейнер */
      flex-direction: column;                         /** Вертикальное направление */
      align-items: flex-start;                         /** Горизонтальное выравнивание */
      padding: 10px 10px 30px 10px;                     /** Внутренние отступы */
      background-color: var(--lb-background-white);       /** Белый фон */
      overflow-y: auto;                                 /** Вертикальная прокрутка */
      flex: 1;                                         /** Растягивание */
    }

    /* Сообщения в чате */
    #chatWidget .message {
      display: flex;                                  /** Флекс-контейнер */
      flex-direction: column;                         /** Вертикальное направление */
      margin-top: 10px;                               /** Верхний отступ */
      max-width: 85%;                                 /** Максимальная ширина сообщения */
      position: relative;                             /** Относительное позиционирование */
    }

    /* Отступ между сообщениями */
    #chatWidget .message + .message {
      margin-top: 24px;                               /** Верхний отступ */
    }

    /* Сообщения от бота */
    #chatWidget .bot-message {
      align-self: flex-start;                          /** Выравнивание слева */
      background-color: var(--lb-bot-message-background); /** Фон сообщения бота */
      color: var(--lb-font-color);                        /** Цвет текста */
      border-radius: var(--lb-radius-small);             /** Скругленные углы */
      padding: 10px 20px;                                /** Внутренние отступы */
      margin-left: 10px;                                  /** Отступ слева */
      position: relative;                                 /** Относительное позиционирование */
    }

    /* Сообщения от пользователя */
    #chatWidget .user-message {
      align-self: flex-end;                            /** Выравнивание справа */
      background-color: #d1f7f7;                        /** Фон сообщения пользователя */
      border-radius: var(--lb-radius-small);             /** Скругленные углы */
      padding: 10px 20px;                                /** Внутренние отступы */
      text-align: left;                                  /** Выравнивание текста */
      color: var(--lb-font-color);                        /** Цвет текста */
      margin-right: 10px;                                 /** Отступ справа */
      max-width: 80%;                                     /** Максимальная ширина сообщения */
      box-sizing: border-box;                             /** Включение бордера и паддингов в ширину */
      position: relative;                                 /** Относительное позиционирование */
    }

    /* Стрелка для сообщений от бота */
    #chatWidget .bot-message::after {
      content: "";
      position: absolute;
      bottom: -11px;                                   /** Смещение вниз */
      left: 15px;                                      /** Смещение слева */
      width: 0;
      height: 0;
      border-left: 12px solid transparent;             /** Левый бордер прозрачный */
      border-right: 12px solid transparent;            /** Правый бордер прозрачный */
      border-top: 12px solid var(--lb-bot-message-background); /** Верхний бордер цветной */
    }

    /* Стрелка для сообщений от пользователя */
    #chatWidget .user-message::after {
      content: "";
      position: absolute;
      bottom: -11px;                                   /** Смещение вниз */
      right: 15px;                                     /** Смещение справа */
      width: 0;
      height: 0;
      border-left: 12px solid transparent;             /** Левый бордер прозрачный */
      border-right: 12px solid transparent;            /** Правый бордер прозрачный */
      border-top: 12px solid #d1f7f7;                   /** Верхний бордер цветной */
    }

    /* Время сообщения */
    #chatWidget .message-time {
      font-size: 10px;                                  /** Размер шрифта */
      color: var(--lb-font-color);                        /** Цвет текста */
      margin-top: 5px;                                   /** Верхний отступ */
      text-align: right;                                 /** Выравнивание текста по правому краю */
    }

    /* Футер виджета чата */
    #chatWidget .widget-footer {
      display: flex;                                    /** Флекс-контейнер */
      align-items: center;                              /** Вертикальное выравнивание */
      padding: 20px;                                    /** Внутренний отступ */
      background-color: var(--lb-background-white);      /** Белый фон */
    }

    /* Поле ввода сообщения пользователя */
    #chatWidget #user-input {
      flex: 1;                                          /** Растягивание */
      resize: none;                                     /** Запрет изменения размера */
      padding: 10px;                                     /** Внутренний отступ */
      border: 1px solid var(--lb-border-gray);           /** Бордер */
      border-radius: var(--lb-radius-small);             /** Скругленные углы */
      font-size: 16px !important;                                  /** Размер шрифта */
      height: 1px;                                     /** Высота поля */
      position: relative;                               /** Относительное позиционирование */
      height: 10px !important;          /* Фиксированная высота */
      display: flex;         /* Объявляем flex-контейнер */
      align-items: center !important;   /* Центрируем содержимое по вертикали */
      padding: 10px 0 27px 15px !important;       /* Отступы только по горизонтали */
      box-sizing: border-box;
    }




    /* Стили при фокусе на поле ввода */
    #chatWidget #user-input:focus {
      outline: none;                                    /** Убираем обводку */
      border-color: var(--lb-primary-color);             /** Цвет бордера при фокусе */
      color: var(--lb-font-color) !important;             /** Цвет текста при фокусе */
    }

    /* Кнопка отправки сообщения */
    #chatWidget .chat-send-button {
      background-color: var(--lb-primary-color);          /** Фон кнопки */
      border: none;                                     /** Без бордера */
      display: inline-flex;                             /** Флекс-контейнер */
      align-items: center;                              /** Вертикальное выравнивание */
      justify-content: center;                          /** Горизонтальное центрирование */
      width: 32px !important;                            /** Ширина кнопки */
      height: 32px !important;                           /** Высота кнопки */
      line-height: 32px !important;                      /** Высота строки */
      border-radius: 50% !important;                      /** Круглая форма */
      margin-left: 5px;                                 /** Отступ слева */
      cursor: pointer;                                  /** Курсор при наведении */
      background-image: url('https://i.ibb.co/0ZLyMvD/Remove-bg-ai-1735598675921-2.png'); /** Изображение фона */
      background-size: 70%;                              /** Размер фона */
      background-repeat: no-repeat;                       /** Без повторения фона */
      background-position: center;                        /** Центрирование фона */
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      padding: 0 !important;
    }

    /* Стили кнопки отправки при наведении */
    #chatWidget .chat-send-button:hover {
      background-color: var(--lb-secondary-color);        /** Цвет фона при наведении */
    }

    /* Скрытый элемент чата */
    #chatWidget #popup_widget_chat {
      display: none;                                   /** Скрыто по умолчанию */
    }

    /* Форма телефона в чат-виджете */
    #chatWidget .phone-form {
      display: flex;                                  /** Флекс-контейнер */
      flex-direction: column;                         /** Вертикальное направление */
      align-items: center;                            /** Горизонтальное выравнивание */
      width: 100%;                                    /** Ширина формы */
      margin: 0 auto;                                 /** Авто отступы */
      gap: 10px;                                      /** Отступ между элементами */
    }

    /* Поля ввода в форме телефона */
    #chatWidget .phone-form input {
      width: 100%;                                    /** Ширина инпута */
      text-align: center;                             /** Центрирование текста */
      padding: 15px !important;                         /** Внутренний отступ */
      margin: 15px 0 15px 0 !important;                  /** Отступы */
      font-size: 16px;                                /** Размер шрифта */
      color: var(--lb-font-color);                      /** Цвет текста */
      transition: var(--lb-transition-background), box-shadow 0.3s ease; /** Переходы */
      background: none;                                 /** Без фона */
      box-sizing: border-box;                           /** Включение бордера и паддингов в ширину */
      border: 1px solid rgba(222, 232, 247, 0.6);        /** Бордер */
      border-radius: 1rem;                               /** Скругленные углы */
      box-shadow:
        inset 0.2rem 0.2rem 0.5rem var(--lb-shadow-color),  /** Внутренняя тень */
        inset -0.2rem -0.2rem 0.5rem var(--lb-background-white); /** Внутренняя светлая тень */
    }

    /* Фон инпута при наведении */
    #chatWidget .phone-form input:hover {
      background: var(--lb-input-hover-background);      /** Фон при наведении */
    }

    /* Плейсхолдер для инпута */
    #chatWidget .phone-form input::placeholder {
      color: var(--lb-font-color);                       /** Цвет плейсхолдера */
    }

    /* Стили при фокусе на инпуте */
    #chatWidget .phone-form input:focus {
      outline: none;                                      /** Убираем обводку */
      box-shadow:
        0.3rem 0.3rem 0.6rem var(--lb-border-gray),      /** Тень при фокусе */
        -0.2rem -0.2rem 0.5rem var(--lb-background-white); /** Светлая тень при фокусе */
      background: var(--lb-background-white);             /** Белый фон при фокусе */
    }

    /* Иконка внутри инпута */
    #chatWidget .phone-form .input-icon {
      position: absolute;                                 /** Абсолютное позиционирование */
      left: 20px;                                         /** Смещение слева */
      top: 50%;                                           /** Центрирование по вертикали */
      transform: translateY(-50%);                         /** Центрирование по вертикали */
      font-size: 20px;                                    /** Размер иконки */
      color: var(--lb-primary-color);                       /** Цвет иконки */
      pointer-events: none;                               /** Игнорирование событий мыши */
      transition: color 0.3s ease;                       /** Переход цвета */
    }

    /* Цвет иконки при фокусе на инпуте */
    #chatWidget .phone-form input:focus + .input-icon {
      color: var(--lb-primary-color);                       /** Цвет иконки при фокусе */
    }

    /* Кнопка отправки формы телефона */
    #chatWidget .phone-form button {
      background: var(--lb-gradient);                      /** Градиентный фон */
      color: var(--lb-background-white);                     /** Белый цвет текста */
      cursor: pointer;                                      /** Курсор при наведении */
      font-size: 14px;                                      /** Размер шрифта */
      border: none;                                         /** Без бордера */
      transition: background-position var(--lb-animation-duration) var(--lb-animation-timing); /** Переход фона */
      background-size: 200% auto;                           /** Размер фона для анимации */
      background-position: 0 50%;                           /** Начальная позиция фона */
      border-radius: var(--lb-radius-small);                /** Скругленные углы */
      width: 100%;                                          /** Ширина кнопки */
      box-sizing: border-box;                               /** Включение бордера и паддингов в ширину */
      padding: 15px;                                        /** Внутренний отступ */
      margin-bottom: 5px;                                    /** Нижний отступ */
    }

    /* Переход фона кнопки при наведении */
    #chatWidget .phone-form button:hover {
      background-position: 100% 50%;                        /** Позиция фона при наведении */
    }

    /* Кнопка закрытия чат-виджета */
    #chatWidget .close-btn {
      position: absolute;                                 /** Абсолютное позиционирование */
      top: 10px;                                         /** Отступ сверху */
      right: 10px;                                       /** Отступ справа */
      width: 30px;                                       /** Ширина кнопки */
      height: 30px;                                      /** Высота кнопки */
      cursor: pointer;                                  /** Курсор при наведении */
    }

    /* Линии для крестика в кнопке закрытия */
    #chatWidget .close-btn::before, 
    #chatWidget .close-btn::after {
      content: '';
      position: absolute;                                 /** Абсолютное позиционирование */
      top: 50%;                                           /** Центрирование по вертикали */
      left: 50%;                                          /** Центрирование по горизонтали */
      width: 20px;                                        /** Длина линии */
      height: 2px;                                        /** Толщина линии */
      background: var(--lb-background-white);             /** Цвет линии */
      opacity: 0.7;                                       /** Прозрачность линии */
      transform-origin: center;                           /** Точка вращения */
      transition: opacity 0.3s ease;                      /** Переход прозрачности */
    }

    /* Первая линия крестика */
    #chatWidget .close-btn::before {
      transform: translate(-50%, -50%) rotate(45deg);      /** Поворот линии */
    }

    /* Вторая линия крестика */
    #chatWidget .close-btn::after {
      transform: translate(-50%, -50%) rotate(-45deg);     /** Поворот линии */
    }

    /* Стили крестика при наведении */
    #chatWidget .close-btn:hover::before, 
    #chatWidget .close-btn:hover::after {
      background: var(--lb-background-white);               /** Цвет линии при наведении */
      opacity: 1;                                           /** Прозрачность линии при наведении */
    }

    /* Сообщение об ошибке в чат-виджете */
    #chatWidget .error-message {
      font-size: 12px;                                      /** Размер шрифта */
      color: var(--lb-red-color);                            /** Красный цвет текста */
      margin-top: 5px;                                       /** Верхний отступ */
    }

    /* Индикатор набора текста */
    #chatWidget .typing-indicator {
      position: absolute;                                   /** Абсолютное позиционирование */
      bottom: 70px;                                         /** Смещение снизу */
      left: 50%;                                           /** Центрирование по горизонтали */
      transform: translate(-50%, -50%);                     /** Центрирование */
      display: flex;                                       /** Флекс-контейнер */
      align-items: center;                                 /** Вертикальное выравнивание */
      gap: 8px;                                            /** Отступ между точками */
    }

    /* Точки индикатора набора текста */
    #chatWidget .typing-indicator span {
      width: 10px;                                         /** Ширина точки */
      height: 10px;                                        /** Высота точки */
      background-color: var(--lb-border-gray);               /** Цвет точки */
      border-radius: 50%;                                  /** Круглая форма */
      animation: bounce 1.5s infinite ease-in-out;          /** Анимация прыжка */
    }

    /* Задержка анимации для второй точки */
    #chatWidget .typing-indicator span:nth-child(2) {
      animation-delay: 0.1s;
    }

    /* Задержка анимации для третьей точки */
    #chatWidget .typing-indicator span:nth-child(3) {
      animation-delay: 0.3s;
    }

    /* Анимация прыжка для индикатора набора текста */
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0); }
      40%           { transform: scale(1); }
    }
    
    
    @media (max-width: 350px) {
      /* FIX: адаптивные стили для чат‑виджета на мобильных устройствах */
      #chatWidget .widget-container {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px); /* отступ 20px с каждой стороны */
        max-width: 100%;
      }
    }
  </style>

  <!-- Оверлей для чат-виджета -->
  <div id="chatOverlay"></div>

  <!-- Контейнер чат-виджета -->
  <div id="chat-widget" class="widget-container">
    <!-- Заголовок чат-виджета -->
    <div class="widget-header">
      <!-- Фото менеджера -->
      <div class="manager-photo">
        <img src="https://i.ibb.co/fd0g0bP0/chat-woman.png" alt="Менеджер"> <!-- Изображение менеджера -->
      </div>
      <!-- Информация о менеджере -->
      <div class="header-info">
        <div class="manager-title">Ксения отдел продаж EXEED&nbspЦЕНТР&nbspFRESH&nbspСЕВЕР</div> <!-- Имя и должность менеджера -->
        <div class="manager-subtitle">
          <span class="status-icon">●</span> сейчас онлайн <!-- Статус менеджера -->
        </div>
        <div class="close-btn"></div> <!-- Кнопка закрытия виджета -->
      </div>
    </div>
    <!-- Тело чат-виджета для сообщений -->
    <div class="widget-body"></div>
    <!-- Футер чат-виджета с полем ввода и кнопкой отправки -->
    <div class="widget-footer">
      <textarea id="user-input" placeholder="Введите сообщение" maxlength="200"></textarea>  <!-- Поле ввода сообщения -->
      <button id="chat-send-button" class="chat-send-button"></button> <!-- Кнопка отправки сообщения -->
    </div>
  </div>

  <!-- Форма для ввода телефона в чат-виджете -->
  <form id="popup_widget_chat" action="#" method="POST" class="phone-form">
    <label>Оставьте свои контактные данные, и мы ответим на ваш вопрос.</label> <!-- Инструкция для пользователя -->
    <div style="position: relative; width: 100%;">
      <input type="tel" id="phone-input-chat" name="phone" placeholder="+7 (XXX) XXX-XX-XX" required> <!-- Поле ввода телефона -->
      <span class="material-icons input-icon">phone</span> <!-- Иконка телефона внутри инпута -->
    </div>
    <button type="submit">ОТПРАВИТЬ</button> <!-- Кнопка отправки формы -->
    <input type="hidden" name="source" value="popup_widget_chat"> <!-- Скрытое поле для источника заявки -->

    <!-- === FIX POLICY === -->
    <div class="policy-consent">
      <input type="checkbox" name="consent" checked /> <!-- Чекбокс согласия -->
      Даю согласие на <a href="#" target="_blank" rel="nofollow" id="privacyLinkChat">обработку персональных данных</a> <!-- Ссылка на политику конфиденциальности -->
    </div>
  </form>

  <!-- JS чат-виджета -->
  <script>
    let isWidgetVisible = false;                   // Флаг видимости виджета
    let messageIndex = 0;                           // Индекс текущего сообщения
    let waitingForUserResponse = false;             // Флаг ожидания ответа от пользователя
    let currentGroupIndex = 0;                      // Индекс текущей группы сообщений
    let widgetContainer, widgetBody, widgetFooter, userInput, sendButton, closeButton, phoneForm, phoneInput; // Элементы DOM

    // Группы сообщений от бота
    const messageGroups = [
      [
        "Здравствуйте! Вас интересуют модели EXEED в наличии?",
        "Напишите, чем могу помочь, и я с радостью подскажу ✨."
      ],
      [
        "Я тут если что ⛄.",
        "У нас акция до конца недели: 5 автомобилей EXEED с выгодой до 1.150.000 Р! Хотите узнать подробности?"
      ],
      [
        "А у нас новые акции ⭐ и подарки на EXEED: доп. оборудование и зимние шины!",
        "Хотите узнать подробнее?"
      ]
    ];
    const followUpMessage = "Давайте я вам отвечу детально по телефону."; // Сообщение после ответа пользователя

    /**
     * Показывает чат-виджет.
     */
    function showChatWidget() {
      if (!canShowWidget()) return; // Проверяем возможность показа виджета
      setActiveWidget('chat');      // Устанавливаем активный виджет
      showWidget();                 // Показываем виджет
    }

    /**
     * Показывает виджет чата.
     */
    function showWidget() {
      if (isWidgetVisible) return; // Если виджет уже виден, ничего не делаем
      isWidgetVisible = true;

      setActiveWidget('chat');      // Устанавливаем активный виджет
      const mainPulseContainerChat = document.querySelector('#mainWidget .pulse-container');
      if (mainPulseContainerChat) {
        mainPulseContainerChat.classList.add('hidden'); // Скрываем пульсацию основного виджета
      }

      widgetContainer.style.display = "flex"; // Отображаем контейнер виджета
      widgetContainer.classList.add("show");   // Добавляем класс показа виджета

      const chatOverlay = document.getElementById('chatOverlay');
      chatOverlay.style.display = 'block';       // Показываем оверлей
      chatOverlay.style.opacity = '1';           // Устанавливаем прозрачность оверлея

      currentGroupIndex = parseInt(localStorage.getItem('widgetGroupIndex') || '0', 10); // Получаем индекс группы сообщений из localStorage
      currentGroupIndex = (currentGroupIndex + 1) % messageGroups.length;               // Увеличиваем индекс группы
      localStorage.setItem('widgetGroupIndex', String(currentGroupIndex));                // Сохраняем новый индекс группы

      widgetBody.innerHTML = "";                 // Очищаем тело виджета
      messageIndex = 0;                           // Сбрасываем индекс сообщения
      waitingForUserResponse = false;             // Сбрасываем флаг ожидания ответа

      widgetFooter.style.display = "flex";        // Показываем футер виджета
      phoneForm.style.display = "none";           // Скрываем форму телефона

      setTimeout(() => {
        sendBotMessage();                         // Отправляем первое сообщение от бота
      }, 600);
    }

    /**
     * Скрывает виджет чата.
     */
    function hideWidget() {
      if (!isWidgetVisible) return;               // Если виджет не виден, ничего не делаем
      widgetContainer.classList.remove("show");   // Убираем класс показа виджета

      const chatOverlay = document.getElementById('chatOverlay');
      chatOverlay.style.opacity = '0';            // Устанавливаем прозрачность оверлея
      setTimeout(() => {
        chatOverlay.style.display = 'none';        // Скрываем оверлей
        widgetContainer.style.display = "none";     // Скрываем контейнер виджета
        isWidgetVisible = false;                   // Сбрасываем флаг видимости
        setActiveWidget(null);                     // Сбрасываем активный виджет

        const mainPulseContainerChat = document.querySelector('#mainWidget .pulse-container');
        if (mainPulseContainerChat) {
          mainPulseContainerChat.classList.remove('hidden'); // Показываем пульсацию основного виджета
        }

        scheduleNextWidget(50000);     // ТАЙМИНГИ: ОНЛАЙН-ЧАТ повторные показы виджета через каждые ХХ секунд
      }, 600);
    }

    /**
     * Планирует следующий показ виджета через заданную задержку.
     * @param {number} delay - Задержка в миллисекундах.
     */
    function scheduleNextWidget(delay) {
      console.log(`Планируем показ чата через ${delay/1000}с`);
      setTimeout(() => {
        if (canShowWidget()) {
          showWidget();                             // Показываем виджет, если можно
        }
      }, delay);
    }

    /**
     * Добавляет сообщение в тело виджета.
     * @param {string} text - Текст сообщения.
     * @param {string} type - Тип сообщения ('bot-message' или 'user-message').
     */
    function addMessage(text, type) {
      const message = document.createElement("div"); // Создаем контейнер для сообщения
      message.classList.add("message", type);         // Присваиваем классы

      const content = document.createElement("div");  // Создаем контейнер для текста
      content.textContent = text;                      // Устанавливаем текст сообщения
      const time = document.createElement("div");      // Создаем контейнер для времени
      time.classList.add("message-time");               // Присваиваем класс

      const now = new Date();                          // Получаем текущее время
      time.textContent = `${now.getHours()}:${String(now.getMinutes()).padStart(2,"0")}`; // Форматируем время

      message.appendChild(content);                     // Добавляем текст в сообщение
      message.appendChild(time);                        // Добавляем время в сообщение
      widgetBody.appendChild(message);                  // Добавляем сообщение в тело виджета
      widgetBody.scrollTop = widgetBody.scrollHeight;   // Прокручиваем до конца
    }

    /**
     * Показывает индикатор набора текста и выполняет callback после задержки.
     * @param {function} callback - Функция, вызываемая после задержки.
     * @param {number} delay - Задержка в миллисекундах.
     */
    function showTypingIndicator(callback, delay = 3000) {
      const typingIndicator = document.createElement("div"); // Создаем контейнер индикатора
      typingIndicator.classList.add("typing-indicator");     // Присваиваем класс
      typingIndicator.innerHTML = `<span>.</span><span>.</span><span>.</span>`; // Точки индикатора
      widgetBody.appendChild(typingIndicator);                // Добавляем индикатор в тело виджета
      widgetBody.scrollTop = widgetBody.scrollHeight;         // Прокручиваем до конца

      setTimeout(() => {
        typingIndicator.remove();                             // Убираем индикатор
        callback();                                          // Вызываем callback
      }, delay);
    }

    /**
     * Отправляет сообщение от бота из текущей группы сообщений.
     */
    function sendBotMessage() {
      const currentGroup = messageGroups[currentGroupIndex]; // Текущая группа сообщений
      if (messageIndex < currentGroup.length) {
        const typingDelay = 3000 + messageIndex * 1000;       // Задержка перед отправкой
        showTypingIndicator(() => {                           // Показываем индикатор набора текста
          addMessage(currentGroup[messageIndex], "bot-message"); // Добавляем сообщение от бота
          messageIndex++;                                       // Увеличиваем индекс сообщения
          if (messageIndex === currentGroup.length) {
            waitingForUserResponse = true;                      // Устанавливаем флаг ожидания ответа
          } else {
            setTimeout(() => sendBotMessage(), 2000);           // Отправляем следующее сообщение через 2 секунды
          }
        }, typingDelay);
      }
    }

    /**
     * Показывает форму ввода телефона после сообщения от бота.
     */
    function showPhoneForm() {
      const botMessageContainer = document.createElement("div"); // Создаем контейнер для сообщения бота
      botMessageContainer.classList.add("message", "bot-message"); // Присваиваем классы
      phoneForm.style.display = "block";                             // Показываем форму
      botMessageContainer.appendChild(phoneForm);                    // Добавляем форму в сообщение бота
      widgetBody.appendChild(botMessageContainer);                   // Добавляем сообщение в тело виджета
      widgetBody.scrollTop = widgetBody.scrollHeight;                // Прокручиваем до конца
      widgetFooter.style.display = "none";                           // Скрываем футер виджета
    }

    // Инициализация чат-виджета после загрузки документа
    document.addEventListener("DOMContentLoaded", () => {
      try {
        const testKey = '__test__';
        localStorage.setItem(testKey, testKey); // Проверка доступности localStorage
        localStorage.removeItem(testKey);
      } catch (e) {
        console.error('localStorage не поддерживается.'); // Ошибка, если localStorage недоступен
      }

      // Инициализация элементов DOM
      widgetContainer = document.querySelector("#chat-widget"); // Контейнер виджета
      widgetBody      = widgetContainer.querySelector(".widget-body"); // Тело виджета
      widgetFooter    = widgetContainer.querySelector(".widget-footer"); // Футер виджета
      userInput       = widgetContainer.querySelector("#user-input"); // Поле ввода сообщения
      sendButton      = widgetContainer.querySelector("#chat-send-button"); // Кнопка отправки сообщения
      closeButton     = widgetContainer.querySelector(".close-btn"); // Кнопка закрытия виджета
      phoneForm       = document.getElementById("popup_widget_chat"); // Форма телефона в виджете
      phoneInput      = phoneForm?.querySelector("#phone-input-chat"); // Поле ввода телефона в виджете

      const privacyLinkChat = document.getElementById('privacyLinkChat'); // Ссылка на политику конфиденциальности
      if (privacyLinkChat) {
        privacyLinkChat.href = "https://freshauto-exeed.ru/policy"; // Установка href для ссылки
      }

      const chatOverlay = document.getElementById('chatOverlay');
      chatOverlay.addEventListener('click', () => {
        hideWidget(); // Скрываем виджет при клике на оверлей
      });

      // Таймер для автоматического показа виджета 1 раз
      setTimeout(() => {
        if (canShowWidget()) {
          showWidget();
        }
      }, 25000); // ТАЙМИНГИ: ОНЛАЙН-ЧАТ 1 показ виджета 

      // Обработчик закрытия виджета
      if (closeButton) {
        closeButton.addEventListener("click", () => {
          hideWidget(); // Закрываем виджет при клике на кнопку закрытия
        });
      }

      // Обработчик отправки сообщения
      sendButton.addEventListener("click", () => {
        const userText = userInput.value.trim(); // Получаем текст сообщения
        if (userText) {
          addMessage(userText, "user-message");  // Добавляем сообщение от пользователя
          userInput.value = "";                   // Очищаем поле ввода

          if (waitingForUserResponse) {            // Если ожидаем ответа от пользователя
            waitingForUserResponse = false;        // Сбрасываем флаг
            setTimeout(() => {
              showTypingIndicator(() => {           // Показываем индикатор набора текста
                addMessage(followUpMessage, "bot-message"); // Добавляем следующее сообщение от бота
                showPhoneForm();                    // Показываем форму ввода телефона
              }, 2000);                              // Через 2 секунды
            }, 500); // Через 0.5 секунды
          }
        }
      });

      // Обработчик нажатия клавиши Enter в поле ввода
      userInput.addEventListener("keydown", (e) => {
        if (e.key === "Enter" && !e.shiftKey) {         // Если нажата клавиша Enter без Shift
          e.preventDefault();                          // Предотвращаем перенос строки
          sendButton.click();                           // Имитируем клик по кнопке отправки
        }
      });

      // Форматирование ввода телефона в чат-виджете
      if (phoneInput) {
        phoneInput.addEventListener("input", function () {
          let value = phoneInput.value.replace(/\D/g, "").substring(0, 11); // Убираем нецифры и ограничиваем длину
          let formattedValue = "+7 (";
          if (value.length > 1) formattedValue += value.substring(1, 4);
          if (value.length >= 5) formattedValue += ") " + value.substring(4, 7);
          if (value.length >= 8) formattedValue += "-" + value.substring(7, 9);
          if (value.length >= 10) formattedValue += "-" + value.substring(9, 11);
          phoneInput.value = formattedValue; // Устанавливаем отформатированное значение
        });
      }

      /**
       * Интегрирует Calltouch для формы чат-виджета.
       * @param {string} formId - ID формы.
       * @param {string} widgetKey - Ключ виджета Calltouch.
       */
      function integrateCalltouch(formId, widgetKey) {
        const form = document.getElementById(formId);                    // Получаем форму по ID
        const phoneInput = form?.querySelector('input[name="phone"]');    // Получаем поле ввода телефона
        if (!form || !phoneInput) {
          console.error(`Форма "${formId}" не найдена.`);              // Ошибка, если форма не найдена
          return;
        }
        form.addEventListener('submit', function (event) {
          event.preventDefault(); // Предотвращаем стандартное поведение формы
          const phone = phoneInput.value.trim().replace(/\D/g, '');    // Получаем телефон без нецифр
          if (!phone) {
            alert('Введите корректный номер телефона.');               // Предупреждение, если телефон пуст
            return;
          }
          if (window.ctw && typeof window.ctw.createRequest === 'function') {
            window.ctw.createRequest(
              widgetKey,                      // Ключ виджета
              phone,                          // Телефон
              [],                             // Дополнительные параметры
              function (success, data) {      // Callback функция
                if (success) {
                  const formData = new FormData(form); // Получаем данные формы
                  // Отправляем данные формы на сервер
                  fetch(form.action, {
                    method: form.method,
                    body: formData,
                  })
                    .then(response => {
                      if (response.ok) {
                        alert('Заявка успешно отправлена!');     // Уведомление об успешной отправке
                        window.location.href = form.action;       // Перенаправляем на страницу благодарности
                      } else {
                        alert('Ошибка при отправке данных. Попробуйте позже.'); // Уведомление об ошибке
                      }
                    })
                    .catch(error => {
                      alert('Произошла ошибка при отправке формы. Попробуйте позже.'); // Уведомление об ошибке
                    });
                } else {
                  alert('Ошибка при отправке заявки. Попробуйте позже.'); // Уведомление об ошибке
                }
              },
              null,
              ['popup_wiget_chat','Форма сайта','chat','popup_wiget'] // Дополнительные параметры
            );
          } else {
            alert('Ошибка при отправке заявки.'); // Уведомление об ошибке
          }
        });
      }

      // Интеграция Calltouch для формы чат-виджета
      integrateCalltouch('popup_widget_chat', 'key-dashio');
    });
  </script>
</div><!-- /#chatWidget -->



<!-- 
  ==================================================================================
  ============================= 3. EXIT-ВИДЖЕТ  ====================================
  ==================================================================================
-->
<div id="exitWidget">
  <style>
    /* Основной контейнер exit-виджета */
    #exitWidget {
      position: relative;                           /** Относительное позиционирование */
      z-index: var(--lb-z-index);                   /** Приоритет отображения */
    }

    /* Оверлей и баннер exit-виджета */
    #exitWidget #exitBannerOverlay,
    #exitWidget #exitBanner {
      z-index: var(--lb-z-index);                   /** Приоритет отображения */
      font-family: var(--lb-font-family);            /** Шрифт для виджета */
    }

    /* Оверлей для exit-виджета */
    #exitWidget #exitBannerOverlay {
      position: fixed;                              /** Фиксированное позиционирование */
      top: 0;                                       /** Верхний отступ */
      left: 0;                                      /** Левый отступ */
      width: 100%;                                  /** Ширина оверлея */
      height: 100%;                                 /** Высота оверлея */
      background: var(--lb-black-color);             /** Черный фон */
      display: none;                                /** Скрыто по умолчанию */
      opacity: 0;                                   /** Прозрачность */
      transition: var(--lb-transition-opacity);      /** Переход прозрачности */
    }

    /* Показ оверлея exit-виджета */
    #exitWidget #exitBannerOverlay.show {
      display: block;                               /** Отображение оверлея */
      visibility: visible;                           /** Видимость */
      opacity: 0.5;                                  /** Прозрачность */
    }

    /* Баннер exit-виджета */
    #exitWidget #exitBanner {
      position: fixed;                              /** Фиксированное позиционирование */
      top: 50%;                                     /** Центрирование по вертикали */
      left: 50%;                                    /** Центрирование по горизонтали */
      width: 100%;                                  /** Ширина баннера */
      max-width: 600px;                             /** Максимальная ширина баннера */
      min-width: 350px;                             /** Минимальная ширина баннера */
      background: var(--lb-background-white);         /** Белый фон */
      text-align: center;                           /** Центрирование текста */
      display: none;                                /** Скрыто по умолчанию */
      box-shadow: var(--lb-box-shadow);              /** Тень баннера */
      box-sizing: border-box;                         /** Включение бордера и паддингов в ширину */
      padding: 0 40px 40px;                            /** Внутренние отступы */
      border-radius: var(--lb-radius-large);           /** Скругленные углы */
      transform: translate(-50%, -60%) scale(0.5);     /** Трансформация для анимации */
      opacity: 0;                                     /** Прозрачность */
      transition: var(--lb-transition-transform);       /** Переход трансформации */

      transition: all 0.4s ease-in-out !important;    /** Дополнительный переход */
    }

    /* Показ баннера exit-виджета */
    #exitWidget #exitBanner.show {
      transform: translate(-50%, -50%) scale(1);        /** Трансформация при показе */
      opacity: 1;                                      /** Прозрачность */
      display: block;                                  /** Отображение баннера */
    }

    /* Контейнер для видео внутри баннера */
    .responsive-video-container {
      position: relative;                             /** Относительное позиционирование */
      width: calc(100% + 80px);                        /** Ширина контейнера */
      height: 250px;                                  /** Высота контейнера */
      margin-left: -40px;                              /** Смещение слева */
      overflow: hidden;                                 /** Скрытие переполнения */
      border-radius: var(--lb-radius-large) var(--lb-radius-large) 0 0; /** Скругленные углы сверху */
    }

    /* Видео внутри контейнера */
    .responsive-video-container video {
      position: absolute;                             /** Абсолютное позиционирование */
      top: 0; left: 0;                                /** Выравнивание по верхнему и левому краю */
      width: 100%; height: 100%;                      /** Ширина и высота видео */
      object-fit: cover;                               /** Масштабирование видео */
      playsinline: playsinline;                         /** Воспроизведение на мобильных устройствах без перехода в полноэкранный режим */
    }

    /* Заголовок баннера */
    #exitWidget #exitBanner h2 {
      font-size: 22px;                                /** Размер шрифта */
      padding-top: 30px;                              /** Верхний отступ */
      padding-bottom: 20px;                           /** Нижний отступ */
      margin: 20px 10px;                              /** Отступы */
      line-height: 1.5;                                /** Высота строки */
      color: var(--lb-font-color);                      /** Цвет текста */
    }

    /* Форма внутри баннера */
    #exitWidget #exitBanner form {
      max-width: 300px;                               /** Максимальная ширина формы */
      margin: 0 auto;                                 /** Центрирование формы */
      width: 100%;                                    /** Ширина формы */
    }

    /* Контейнер для инпутов внутри формы */
    #exitWidget .input-container {
      position: relative;                             /** Относительное позиционирование */
      margin: 5px auto;                                /** Отступы */
      width: 100%;                                    /** Ширина контейнера */
      max-width: 300px;                               /** Максимальная ширина */
      padding: 0;                                     /** Внутренние отступы */
      height: 50px;                                   /** Высота контейнера */
    }

    /* Иконка внутри инпута */
    #exitWidget .input-container .input-icon {
      position: absolute;                             /** Абсолютное позиционирование */
      left: 45px;                                     /** Смещение слева */
      top: 0;                                         /** Верхний отступ */
      height: 100%;                                   /** Высота иконки */
      display: flex;                                  /** Флекс-контейнер */
      align-items: center;                            /** Вертикальное выравнивание */
      justify-content: center;                        /** Горизонтальное центрирование */
      font-size: 20px;                                /** Размер иконки */
      color: var(--lb-primary-color);                     /** Цвет иконки */
      pointer-events: none;                           /** Игнорирование событий мыши */
      line-height: 1;                                 /** Высота строки */
    }

    /* Инпут для ввода телефона в форме */
    #exitWidget .input-container input[type="text"] {
      display: block;                                  /** Отображение блока */
      width: 100%;                                     /** Ширина инпута */
      height: 100%;                                    /** Высота инпута */
      font-size: 17px;                                 /** Размер шрифта */
      text-align: center;                              /** Центрирование текста */
      color: var(--lb-border-gray);                        /** Цвет текста */
      background: var(--lb-input-hover-background);        /** Фон инпута */
      border: none;                                    /** Без бордера */
      border-radius: var(--lb-radius-small);                /** Скругленные углы */
      cursor: pointer;                                 /** Курсор при наведении */
      padding-left: 40px;                              /** Внутренний отступ слева */
      box-shadow:
        inset 0.2rem 0.2rem 0.5rem var(--lb-shadow-color), /** Внутренняя тень */
        inset -0.2rem -0.2rem 0.5rem var(--lb-background-white); /** Внутренняя светлая тень */
      transition: var(--lb-transition-background), box-shadow 0.3s ease; /** Переходы */
      outline: none;                                   /** Убираем обводку */
      box-sizing: border-box;                            /** Включение бордера и паддингов в ширину */
    }

    /* Фон инпута при наведении */
    #exitWidget .input-container input[type="text"]:hover {
      background: var(--lb-background-white);             /** Белый фон при наведении */
    }

    /* Стили при фокусе на инпуте */
    #exitWidget .input-container input[type="text"]:focus {
      background: var(--lb-background-white);             /** Белый фон при фокусе */
      color: var(--lb-font-color);                        /** Цвет текста при фокусе */
      box-shadow:
        0.3rem 0.3rem 0.6rem var(--lb-border-gray),       /** Тень при фокусе */
        -0.2rem -0.2rem 0.5rem var(--lb-background-white); /** Светлая тень при фокусе */
    }

    /* Кнопка отправки формы в баннере */
    #exitWidget button {
      display: block;                                  /** Отображение блока */
      width: 100%;                                     /** Ширина кнопки */
      height: 50px;                                    /** Высота кнопки */
      font-size: 19px;                                 /** Размер шрифта */
      text-align: center;                              /** Центрирование текста */
      color: var(--lb-background-white);                 /** Белый цвет текста */
      background: var(--lb-gradient);                     /** Градиентный фон */
      border-radius: var(--lb-radius-small);              /** Скругленные углы */
      border: none;                                    /** Без бордера */
      cursor: pointer;                                 /** Курсор при наведении */
      box-shadow: none;                                /** Без тени */
      box-sizing: border-box;                           /** Включение бордера и паддингов в ширину */
      margin: 10px 0 5px 0;                             /** Отступы */
    }

    /* Стили кнопки отправки при наведении */
    #exitWidget button:hover {
      background-size: 200% auto;                        /** Размер фона при наведении */
      background-position: 100% 50%;                      /** Позиция фона при наведении */
      transition: background-position var(--lb-animation-duration) var(--lb-animation-timing); /** Переход фона */
    }

    /* Кнопка закрытия баннера */
    #exitWidget .close-btn {
      position: absolute;                               /** Абсолютное позиционирование */
      top: 10px;                                       /** Отступ сверху */
      right: 10px;                                     /** Отступ справа */
      width: 30px;                                     /** Ширина кнопки */
      height: 30px;                                    /** Высота кнопки */
      cursor: pointer;                                 /** Курсор при наведении */
      z-index: var(--lb-z-index);                        /** Приоритет отображения */
      transition: opacity 0.3s ease;                    /** Переход прозрачности */
    }

    /* Линии для крестика в кнопке закрытия баннера */
    #exitWidget .close-btn::before, 
    #exitWidget .close-btn::after {
      content: '';
      position: absolute;                                 /** Абсолютное позиционирование */
      top: 50%;                                           /** Центрирование по вертикали */
      left: 50%;                                          /** Центрирование по горизонтали */
      width: 20px;                                        /** Длина линии */
      height: 2px;                                        /** Толщина линии */
      background: var(--lb-background-white);             /** Цвет линии */
      opacity: 0.7;                                       /** Прозрачность линии */
      transform: translate(-50%, -50%) rotate(45deg);      /** Поворот линии */
      transform-origin: center;                            /** Точка вращения */
      transition: opacity 0.3s ease;                      /** Переход прозрачности */
    }

    /* Вторая линия крестика */
    #exitWidget .close-btn::after {
      transform: translate(-50%, -50%) rotate(-45deg);     /** Поворот линии */
    }

    /* Стили крестика при наведении */
    #exitWidget .close-btn:hover::before, 
    #exitWidget .close-btn:hover::after {
      opacity: 1;                                       /** Прозрачность линии при наведении */
    }

    /* Адаптивные стили для узких экранов */
    @media (max-width: 320px) {
      #exitWidget #exitBanner {
        max-width: 320px;                              /** Максимальная ширина баннера */
        min-width: 280px;                              /** Минимальная ширина баннера */
        padding: 0 20px 30px;                            /** Внутренние отступы */
      }
      .responsive-video-container {
        width: 100%;                                     /** Ширина контейнера */
        height: 180px;                                   /** Высота контейнера */
        margin-left: 0;                                   /** Отступ слева */
        border-radius: var(--lb-radius-small) var(--lb-radius-small) 0 0; /** Скругленные углы сверху */
      }
      #exitWidget #exitBanner h2 {
        font-size: 18px;                                /** Размер шрифта */
        padding-top: 20px;                              /** Верхний отступ */
        padding-bottom: 15px;                           /** Нижний отступ */
        margin: 15px 5px;                                /** Отступы */
      }
      #exitWidget #exitBanner form {
        max-width: 280px;                               /** Максимальная ширина формы */
      }
      #exitWidget .input-container {
        height: 45px;                                   /** Высота контейнера */
      }
      #exitWidget .input-container .input-icon {
        left: 35px;                                     /** Смещение слева */
        font-size: 18px;                                /** Размер иконки */
      }
      #exitWidget .input-container input[type="text"] {
        font-size: 16px;                                 /** Размер шрифта */
        padding-left: 35px;                              /** Внутренний отступ слева */
      }
      #exitWidget button {
        height: 45px;                                    /** Высота кнопки */
        font-size: 17px;                                 /** Размер шрифта */
      }
      #exitWidget .close-btn {
        width: 25px;                                     /** Ширина кнопки */
        height: 25px;                                    /** Высота кнопки */
      }
      #exitWidget .close-btn::before,
      #exitWidget .close-btn::after {
        width: 15px;                                     /** Длина линии */
        height: 1.5px;                                   /** Толщина линии */
      }
    }
  </style>

  <!-- Оверлей для баннера exit-виджета -->
  <div id="exitBannerOverlay"></div>
  <!-- Баннер exit-виджета -->
  <div id="exitBanner">
      <div class="close-btn" aria-label="Закрыть баннер"></div> <!-- Кнопка закрытия баннера -->
      <div class="responsive-video-container">
          <video src="https://leadbord.ru/freshauto-exeed/exit/video/exeed_main.mp4" autoplay muted loop playsinline></video> <!-- Видео внутри баннера -->
      </div>
      <h2>Индивидуальное предложение<br>на покупку автомобилей EXEED!</h2> <!-- Заголовок баннера -->
      <form id="popup_widget_exit" action="#" method="POST"> <!-- Форма в баннере -->
          <div class="input-container">
              <span class="input-icon material-icons">phone</span> <!-- Иконка телефона внутри инпута -->
              <input type="text" id="phoneNumber" name="phone" placeholder="+7 (XXX) XXX-XX-XX" required> <!-- Поле ввода телефона -->
          </div>
          <input type="hidden" name="source" value="popup_widget_exit"> <!-- Скрытое поле для источника заявки -->
          <button type="submit" id="claimGift">Получить предложение</button> <!-- Кнопка отправки формы -->

          <!-- === FIX POLICY + FIX EXIT CHECKBOX === -->
          <div class="policy-consent" style="margin-top:2px !important;">
            <input type="checkbox" name="consent" checked /> <!-- Чекбокс согласия -->
            Даю согласие на <a href="#" target="_blank" rel="nofollow" id="privacyLinkExit">обработку персональных данных</a> <!-- Ссылка на политику конфиденциальности -->
          </div>
      </form>
  </div>

  <!-- JS exit-виджета -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      let isVisible = false;                           // Флаг видимости баннера
      let leaveTimeout;                                 // Таймер для показа баннера при уходе курсора
      const exitBanner = document.getElementById('exitBanner'); // Баннер
      const exitBannerOverlay = document.getElementById('exitBannerOverlay'); // Оверлей
      const videoElement = exitBanner.querySelector('video'); // Видео в баннере
      const phoneNumberInput = document.getElementById('phoneNumber'); // Поле ввода телефона
      const closeBtn = exitBanner.querySelector('.close-btn'); // Кнопка закрытия баннера

      const privacyLinkExit = document.getElementById('privacyLinkExit'); // Ссылка на политику конфиденциальности
      if (privacyLinkExit) {
        privacyLinkExit.href = 'https://freshauto-exeed.ru/policy'; // Установка href для ссылки
      }

      /**
       * Показывает баннер exit-виджета.
       */
      function showBanner() {
        if (!canShowWidget()) return; // Проверяем возможность показа виджета
        setActiveWidget('exit');      // Устанавливаем активный виджет

        if (isVisible) return;        // Если баннер уже виден, ничего не делаем
        isVisible = true;
        exitBanner.style.display = 'block';     // Отображаем баннер
        exitBannerOverlay.style.display = 'block'; // Отображаем оверлей
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            exitBanner.classList.add('show');       // Добавляем класс показа баннера
            exitBannerOverlay.classList.add('show'); // Добавляем класс показа оверлея
          });
        });
        if (videoElement) {
          videoElement.currentTime = 0;             // Сбрасываем время видео
          const playPromise = videoElement.play();    // Запускаем воспроизведение видео
          if (playPromise !== undefined) {
            playPromise.catch(error => {});           // Обработка ошибок воспроизведения
          }
        }
      }

      /**
       * Скрывает баннер exit-виджета.
       */
      function hideBanner() {
        if (!isVisible) return;                       // Если баннер не виден, ничего не делаем
        exitBanner.classList.remove('show');          // Убираем класс показа баннера
        exitBannerOverlay.classList.remove('show');    // Убираем класс показа оверлея
        setTimeout(() => {
          exitBanner.style.display = 'none';           // Скрываем баннер
          exitBannerOverlay.style.display = 'none';     // Скрываем оверлей
          isVisible = false;                             // Сбрасываем флаг видимости
          setActiveWidget(null);                         // Сбрасываем активный виджет
        }, 600);
      }

      // Обработчики событий для закрытия баннера
      if (closeBtn) closeBtn.addEventListener('click', hideBanner);         // Закрываем баннер при клике на кнопку закрытия
      if (exitBannerOverlay) exitBannerOverlay.addEventListener('click', hideBanner); // Закрываем баннер при клике на оверлей

      // Обработчик форматирования ввода телефона в баннере
      if (phoneNumberInput) {
        phoneNumberInput.addEventListener('input', function () {
          let value = phoneNumberInput.value.replace(/\D/g, '').substring(0, 11); // Убираем нецифры и ограничиваем длину
          let formattedValue = '+7 (';
          if (value.length > 1) formattedValue += value.substring(1, 4);
          if (value.length >= 5) formattedValue += ') ' + value.substring(4, 7);
          if (value.length >= 8) formattedValue += '-' + value.substring(7, 9);
          if (value.length >= 10) formattedValue += '-' + value.substring(9, 11);
          phoneNumberInput.value = formattedValue; // Устанавливаем отформатированное значение
        });
      }

      // Таймер для автоматического показа баннера через 40 секунд и каждые 120 секунд
      setTimeout(() => {
        if (canShowWidget()) {
          showBanner();
          setInterval(() => {
            if (canShowWidget()) {
              showBanner();
            }
          }, 120000); // ТАЙМИНГИ: EXIT-ВИДЖЕТ повторы после 1 показа
        }
      }, 45000); // ТАЙМИНГИ: EXIT-ВИДЖЕТ первый показ

      // Обработчик ухода курсора за пределы окна для показа баннера
      document.addEventListener('mouseleave', function (e) {
        if (e.clientY <= 0 && !isVisible) {
          if (activeWidget === 'chat') return; // Не показываем баннер, если активен чат

          // 1) Считываем счётчик из localStorage (или 0, если нет данных)
          let exitCount = parseInt(localStorage.getItem('exitCount') || '0', 10);

          // 2) Увеличиваем счётчик на 1
          exitCount++;
          localStorage.setItem('exitCount', exitCount);

          // 3) Показываем баннер ТОЛЬКО на каждом 3‑м уходе
          //    Если хотите, чтобы он показывался наоборот на 1‑м (и пропускал 2 и 3),
          //    то проверьте (exitCount % 3 === 1). Ниже пример именно на 1-м из каждых трёх:
          if (exitCount % 3 === 1) {
            if (canShowWidget()) {
              clearTimeout(leaveTimeout);
              leaveTimeout = setTimeout(() => {
                showBanner(); // Показываем баннер
              }, 100); // Задержка 0.1 секунды
            }
          }
        }
      });


      /**
       * Интегрирует Calltouch для формы exit-виджета.
       * @param {string} formId - ID формы.
       * @param {string} widgetKey - Ключ виджета Calltouch.
       */
      function integrateCalltouch(formId, widgetKey) {
        const form = document.getElementById(formId);                    // Получаем форму по ID
        const phoneInput = form?.querySelector('input[name="phone"]');    // Получаем поле ввода телефона
        if (!form || !phoneInput) {
          return; // Если форма или поле не найдены, ничего не делаем
        }
        form.addEventListener('submit', function (event) {
          event.preventDefault(); // Предотвращаем стандартное поведение формы
          const phone = phoneInput.value.trim().replace(/\D/g, '');    // Получаем телефон без нецифр
          if (!phone) {
            alert('Введите корректный номер телефона.');               // Предупреждение, если телефон пуст
            return;
          }
          if (window.ctw && typeof window.ctw.createRequest === 'function') {
            window.ctw.createRequest(
              widgetKey,                      // Ключ виджета
              phone,                          // Телефон
              [],                             // Дополнительные параметры
              function (success, data) {      // Callback функция
                if (success) {
                  const formData = new FormData(form); // Получаем данные формы
                  // Отправляем данные формы на сервер
                  fetch(form.action, {
                    method: form.method,
                    body: formData,
                  })
                    .then(response => {
                      if (response.ok) {
                        alert('Заявка успешно отправлена!');     // Уведомление об успешной отправке
                        window.location.href = form.action;       // Перенаправляем на страницу благодарности
                      } else {
                        alert('Ошибка при отправке данных. Попробуйте позже.'); // Уведомление об ошибке
                      }
                    })
                    .catch(error => {
                      alert('Произошла ошибка при отправке формы. Попробуйте позже.'); // Уведомление об ошибке
                    });
                } else {
                  alert('Ошибка при отправке заявки. Попробуйте позже.'); // Уведомление об ошибке
                }
              },
              null,
              ['popup_wiget_exit','Форма сайта','exit','popup_wiget'] // Дополнительные параметры
            );
          } else {
            alert('Ошибка при отправке заявки.'); // Уведомление об ошибке
          }
        });
      }

      // Интеграция Calltouch для формы exit-виджета
      integrateCalltouch('popup_widget_exit', 'key-dashio');
    });
  </script>
</div><!-- /#exitWidget -->

</body>
</html>
