<!-- 
  ==================================================================================
  ============================= 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: 2px;                                   /** Внутренний отступ */
      margin-right: 40px; 
      margin-left: 5px; 
      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-border-gray);                       /** Цвет плейсхолдера */
    }

    /* Стили при фокусе на инпуте */
    #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://lk.dashio.ru/zother/widget/icons/chat_woman.png" alt="Менеджер"> <!-- Изображение менеджера -->
      </div>
      <!-- Информация о менеджере -->
      <div class="header-info">
        <div class="manager-title">Ксения менеджер EXEED ЦЕНТР FRESH СЕВЕР</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(25000);                   // Планируем показ виджета через 6 секунд
      }, 600);
    }

    /**
     * Планирует следующий показ виджета через заданную задержку.
     * @param {number} delay - Задержка в миллисекундах.
     */
    function scheduleNextWidget(delay) {
      console.log(`Планируем показ чата через ${delay/55000}с`);
      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(); // Скрываем виджет при клике на оверлей
      });

      // Таймер для автоматического показа виджета через 10 секунд
      setTimeout(() => {
        if (canShowWidget()) {
          showWidget();
        }
      }, 10000); // 10 секунд

      // Обработчик закрытия виджета
      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>на покупку автомобилей HAVAL!</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); // 120 секунд
        }
      }, 40000); // 40 секунд

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

          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>
