<!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: #25292B;               /** Вторичный цвет Хавал #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: #f9fafc;        /** Фон сообщений бота в чате */
      --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>
  
  