/* ==========================================================================
   ДПК.РФ — тема виджета чата
   Подключать ПОСЛЕ основного chat-widget.css — переопределяет цвет и
   позицию (чтобы не пересекаться с другим плавающим виджетом сайта,
   например кнопкой звонка), сам виджет (разметку/анимации/адаптив) не
   трогает.

   Цвет — СПЛОШНОЙ #29992E (без альфа-канала — было #29992Ecc/80%,
   визуально выглядело как прозрачность, убрано по просьбе).
   Тёмный сплошной вариант того же зелёного (для текста/бордеров) —
   посчитан автоматически (~78% яркости).
   ========================================================================== */
:root{
  --wg-green:#29992E;       /* было #1E4B39, затем #29992Ecc (полупрозрачный) — теперь сплошной */
  --wg-green-dark:#1F7723;  /* было #153427 — сплошной тёмный вариант того же зелёного */
  /* --wg-orange / --wg-orange-dark / --wg-black / --wg-online — без изменений */
}

/* ---------- Позиция: поднимаем виджет, чтобы не залезал на другую
   плавающую кнопку сайта (звонок и т.п.) в правом нижнем углу.
   По умолчанию в основном файле у ярлычка/шторки/окна чата bottom:84px —
   меняем через переменную ниже одним числом. Если после публикации всё ещё
   пересекается — увеличьте ТОЛЬКО это значение (например до 190px или
   220px) и обновите файл на сервере, больше ничего трогать не нужно. */
:root{
  --wg-dpkrf-bottom-offset: 150px;
}
@media (min-width: 641px){
  #wg-chat-root .wg-tab{
    bottom: var(--wg-dpkrf-bottom-offset);
  }
  #wg-chat-root .wg-greeting{
    bottom: var(--wg-dpkrf-bottom-offset);
  }
  #wg-chat-root .wg-chat{
    bottom: var(--wg-dpkrf-bottom-offset);
  }
}

/* Ярлычок (свёрнутое состояние) — фон и тень зашиты в основном файле
   напрямую (#27593b), а не через переменную, поэтому переопределяем через
   #wg-chat-root — так специфичность выше, чем у голого класса, и правило
   гарантированно выигрывает независимо от порядка подключения файлов. */
#wg-chat-root .wg-tab{
  background:#29992E;
  box-shadow:0 8px 20px rgba(41,153,46,.3);
}
/* Пульсирующее кольцо ::after у ярлычка тоже завязано на конкретный
   оттенок зелёного через keyframes в основном файле — даём своё имя
   анимации с тем же рисунком, но нужным цветом. */
@keyframes wg-ping-alt-dpkrf{
  0%{ box-shadow:0 0 0 0 rgba(41,153,46,.5); }
  70%{ box-shadow:0 0 0 16px rgba(41,153,46,0); }
  100%{ box-shadow:0 0 0 16px rgba(41,153,46,0); }
}
#wg-chat-root .wg-tab::after{
  animation-name:wg-ping-alt-dpkrf;
}

/* Иконка на ярлычке (белый кружок с зелёным силуэтом чат-бабла) — ТОЛЬКО
   десктоп. На мобильном (<=640px) дизайн другой: прозрачный фон, БЕЛЫЙ
   силуэт поверх зелёной круглой кнопки — его трогать не нужно, поэтому
   явно ограничиваем override десктопом, чтобы не перебить мобильный вид. */
@media (min-width: 641px){
  #wg-chat-root .wg-tab-icon{
    color:#29992E;
  }
}

/* Мобильный ярлычок: фон самой кнопки уже перекрыт выше (#wg-chat-root .wg-tab
   с высокой специфичностью работает и здесь). Здесь только зелёные точки-
   "глаза" на белом силуэте бабла — они зашиты в основном файле отдельным
   правилом внутри @media, оставляем override в той же точке. */
@media (max-width: 640px){
  #wg-chat-root .wg-tab .wg-tab-icon svg circle{ fill:#29992E; }
}