/* =========================================================
   ОТДЕЛЬНЫЙ ФАЙЛ ОНЛАЙН-ЧАТА
   Рабочая версия:
   - адаптирована под текущий сайт
   - автоприветствие при чтении страницы
   - анимация «печатает сообщение…»
   ========================================================= */


/* =========================================================
   КОРНЕВОЙ КОНТЕЙНЕР ЧАТА
   Сам виджет закреплён на экране
   ========================================================= */
.chat-widget {
  position: fixed;
  /* Чат всегда висит поверх страницы */

  left: 22px;
  bottom: 22px;
  /* Положение в левом нижнем углу */

  z-index: 60;
  /* Выше обычных блоков сайта */

  font-family: 'Inter', sans-serif;
  /* Основной шрифт чата */
}


/* =========================================================
   КНОПКА ОТКРЫТИЯ ЧАТА
   Круглая кнопка с иконкой
   ========================================================= */
.chat-widget__toggle {
  position: relative;
  width: 72px;
  height: 72px;

  border: none;
  border-radius: 50%;
  cursor: pointer;

  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.chat-widget__toggle:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.28);
  filter: saturate(1.08);
  /* При наведении кнопка оживает */
}

.chat-widget__toggle i {
  font-size: 28px;
  /* Размер иконки внутри кнопки */
}


/* =========================================================
   БЕЙДЖ 24/7
   Маленькая зелёная метка в углу кнопки
   ========================================================= */
.chat-widget__badge {
  position: absolute;
  top: -4px;
  right: -2px;

  min-width: 24px;
  height: 24px;
  padding: 0 7px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 800;

  color: #031108;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 10px 20px rgba(42, 216, 111, 0.32);
}


/* =========================================================
   ПАНЕЛЬ ЧАТА
   Окно, которое открывается над круглой кнопкой
   ========================================================= */
.chat-widget__panel {
  position: absolute;
  left: 0;
  bottom: 92px;
  /* Панель появляется над кнопкой */

  width: min(390px, calc(100vw - 26px));
  height: min(640px, 78vh);
  /* Ограничения по размеру */

  display: none;
  /* По умолчанию скрыта */

  flex-direction: column;
  overflow: hidden;

  border-radius: 24px;
  border: 1px solid var(--line);

  background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 92%, transparent),
      color-mix(in srgb, var(--surface-2) 94%, transparent));

  backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   КОГДА У РОДИТЕЛЯ ЕСТЬ .open,
   показываем панель
   ========================================================= */
.chat-widget.open .chat-widget__panel {
  display: flex;
  animation: chatWidgetFade .28s ease;
}


/* =========================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ ПАНЕЛИ
   ========================================================= */
@keyframes chatWidgetFade {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* =========================================================
   ШАПКА ЧАТА
   Верхняя синяя полоска с названием и кнопкой закрытия
   ========================================================= */
.chat-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 18px;
  color: #fff;

  background: linear-gradient(135deg, rgba(7, 17, 31, 0.94), rgba(29, 78, 216, 0.92));
}

body[data-theme="light"] .chat-widget__header {
  background: linear-gradient(135deg, rgba(8, 25, 45, 0.96), rgba(22, 134, 255, 0.92));
  /* Для светлой темы свой фон шапки */
}

.chat-widget__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  /* Главный заголовок чата */
}

.chat-widget__subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  /* Подзаголовок */
}


/* =========================================================
   КНОПКА ЗАКРЫТИЯ ЧАТА
   ========================================================= */
.chat-widget__close {
  width: 40px;
  height: 40px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.10);
  color: #fff;

  display: grid;
  place-items: center;

  transition: transform var(--transition), background var(--transition);
}

.chat-widget__close:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   ОБЛАСТЬ СООБЩЕНИЙ
   Здесь прокручивается история чата
   ========================================================= */
.chat-widget__messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;

  background:
    radial-gradient(circle at top right, rgba(64, 183, 255, 0.10), transparent 32%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-soft) 90%, #fff 10%),
      color-mix(in srgb, var(--bg) 70%, #eff6ff 30%));
}


/* =========================================================
   ОДНА СТРОКА СООБЩЕНИЯ
   ========================================================= */
.chat-widget__message {
  display: flex;
  margin-bottom: 12px;
}

.chat-widget__message--bot {
  justify-content: flex-start;
  /* Сообщение бота слева */
}

.chat-widget__message--user {
  justify-content: flex-end;
  /* Сообщение пользователя справа */
}


/* =========================================================
   ПУЗЫРЬ СООБЩЕНИЯ
   ========================================================= */
.chat-widget__bubble {
  max-width: 84%;
  padding: 12px 14px;
  border-radius: 18px;

  font-size: 14px;
  line-height: 1.55;

  word-break: break-word;
  /* Длинные слова не ломают блок */
}

.chat-widget__message--bot .chat-widget__bubble {
  background: color-mix(in srgb, var(--surface-4) 88%, #fff 12%);
  border: 1px solid var(--line);
  color: var(--text);

  border-bottom-left-radius: 8px;
  /* Делает форму сообщения более "чатовой" */

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.chat-widget__message--user .chat-widget__bubble {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 52%, #ffffff 48%));
  color: #03111d;
  font-weight: 600;

  border-bottom-right-radius: 8px;

  box-shadow: 0 12px 28px rgba(64, 183, 255, 0.20);
}

body[data-theme="light"] .chat-widget__message--user .chat-widget__bubble {
  color: #ffffff;
  background: linear-gradient(135deg, #0f6fff, #5c7cff);
}


/* =========================================================
   ПУЗЫРЬ "ПЕЧАТАЕТ..."
   ========================================================= */
.chat-widget__bubble--typing {
  min-width: 78px;
}


/* =========================================================
   АНИМАЦИЯ ТОЧЕК "БОТ ПЕЧАТАЕТ"
   ========================================================= */
.chat-widget__typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chat-widget__typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: currentColor;
  opacity: 0.35;

  animation: chatTyping 1.1s infinite ease-in-out;
}

.chat-widget__typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-widget__typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chatTyping {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}


/* =========================================================
   БЛОК БЫСТРЫХ КНОПОК
   Например: "Услуги", "Цена", "Контакты"
   ========================================================= */
.chat-widget__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  padding: 12px 16px 8px;

  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.chat-widget__quick-btn {
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-4) 80%, transparent);
  color: var(--text);

  border-radius: 999px;
  padding: 9px 12px;

  font-size: 13px;
  font-weight: 600;
  cursor: pointer;

  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.chat-widget__quick-btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--surface-4) 96%, transparent);
  border-color: color-mix(in srgb, var(--primary) 50%, #ffffff 50%);
}


/* =========================================================
   НИЖНЯЯ ЧАСТЬ ЧАТА
   Кнопка оператора, input, кнопка отправки, подсказка
   ========================================================= */
.chat-widget__footer {
  padding: 10px 16px 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}


/* =========================================================
   КНОПКА "СВЯЗАТЬСЯ С ОПЕРАТОРОМ"
   ========================================================= */
.chat-widget__operator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  min-height: 46px;
  margin-bottom: 10px;

  border-radius: 14px;

  color: #031108;
  font-size: 14px;
  font-weight: 800;

  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 12px 26px rgba(42, 216, 111, 0.22);

  transition: transform var(--transition), box-shadow var(--transition);
}

.chat-widget__operator:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(42, 216, 111, 0.28);
}


/* =========================================================
   СТРОКА ВВОДА
   input + кнопка отправки
   ========================================================= */
.chat-widget__input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-widget__input {
  flex: 1;
  height: 48px;

  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;

  outline: none;
  color: var(--text);

  background: color-mix(in srgb, var(--surface-3) 82%, transparent);

  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.chat-widget__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(64, 183, 255, 0.14);
}

.chat-widget__send {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 14px;
  cursor: pointer;

  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 26px rgba(64, 183, 255, 0.24);

  transition: transform var(--transition), box-shadow var(--transition);
}

.chat-widget__send:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(64, 183, 255, 0.30);
}


/* =========================================================
   НИЖНЯЯ ПОДСКАЗКА
   ========================================================= */
.chat-widget__hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}


/* =========================================================
   АДАПТИВ: ПЛАНШЕТ / МОБИЛКА
   ========================================================= */
@media (max-width: 768px) {
  .chat-widget {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .chat-widget__toggle {
    width: 66px;
    height: 66px;
  }

  .chat-widget__panel {
    left: 0;
    right: 0;
    width: auto;
    height: min(72vh, 620px);
    bottom: 82px;
  }
}

@media (max-width: 480px) {
  .chat-widget__bubble {
    max-width: 90%;
    font-size: 13px;
  }

  .chat-widget__quick {
    gap: 6px;
  }

  .chat-widget__quick-btn {
    font-size: 12px;
    padding: 8px 10px;
  }
}


/* =========================================================
   DRAGGABLE CHAT WIDGET
   Блок для перетаскиваемого чата
   ========================================================= */
.chat-widget {
  left: 22px;
  right: auto;
  bottom: 22px;
  top: auto;
  max-width: calc(100vw - 24px);
  user-select: none;
  /* Чтобы во время перетаскивания текст не выделялся */
}

.chat-widget__header {
  cursor: grab;
  /* Показываем, что за шапку можно тянуть */
}

.chat-widget.is-dragging,
.chat-widget.is-dragging * {
  cursor: grabbing !important;
}

.chat-widget.is-dragging .chat-widget__panel,
.chat-widget.is-dragging .chat-widget__toggle {
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.34);
  /* Во время перетаскивания усиливаем тень */
}

.chat-widget.chat-widget--snapped-right {
  left: auto;
  /* Если чат прилип справа */
}

.chat-widget.chat-widget--snapped-left {
  right: auto;
  /* Если чат прилип слева */
}

@media (min-width: 769px) {
  .chat-widget.chat-widget--snapped-right {
    right: 96px;
    /* Оставляем место под соцсети справа */
  }
}

@media (max-width: 768px) {
  .chat-widget {
    left: 14px;
    right: 14px;
    bottom: 14px;
    top: auto !important;
    max-width: none;
  }

  .chat-widget__header {
    cursor: default;
    /* На мобильном перетаскивание отключаем */
  }
}