/* ============================================================
   Виджет связи — плавающая кнопка + панель.
   Все селекторы — в пространстве имён .sv-contact-widget, наружу не текут.
   Токены — из assets/style.src.css (:root), новых не вводим.
   ============================================================ */

/* Обёртка растянута на весь экран (pointer-events:none), чтобы триггер и панель
 * позиционировались абсолютно от углов вьюпорта, а не друг от друга —
 * иначе на мобильном панель не смогла бы стать edge-to-edge. */
.sv-contact-widget {
  position: fixed;
  inset: 0;
  z-index: 480; /* выше cookie-banner (200), ниже cta-modal (9999) */
  font-family: var(--sans);
  pointer-events: none;
}

/* ---------- Кнопка-триггер ---------- */
.sv-contact-widget__trigger {
  position: absolute;
  right: 24px;
  bottom: calc(24px + var(--sv-cw-offset, 0px) + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  pointer-events: auto;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg-elev);
  border: 0;
  box-shadow: var(--shadow-elev);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s linear, transform 0.15s linear;
}
.sv-contact-widget__trigger:hover { background: var(--primary-deep); }

/* Ненавязчивое напоминание: короткий пульс + расходящееся кольцо раз в ~22с,
   пока виджет закрыт и с ним ещё не взаимодействовали. JS вешает --nudge
   на один цикл, затем снимает; после первого открытия больше не запускается. */
.sv-contact-widget__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 0 rgba(79, 138, 108, 0.5); /* --primary в rgba */
  opacity: 0;
  pointer-events: none;
}
.sv-contact-widget__trigger--nudge { animation: sv-cw-bump 1.6s ease-in-out; }
.sv-contact-widget__trigger--nudge::after { animation: sv-cw-ring 1.6s ease-out; }

@keyframes sv-cw-bump {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.08); }
  30% { transform: scale(0.98); }
  45% { transform: scale(1.04); }
  60% { transform: scale(1); }
}
@keyframes sv-cw-ring {
  0%   { opacity: 0.6; box-shadow: 0 0 0 0 rgba(79, 138, 108, 0.5); }
  70%  { opacity: 0; box-shadow: 0 0 0 14px rgba(79, 138, 108, 0); }
  100% { opacity: 0; box-shadow: 0 0 0 0 rgba(79, 138, 108, 0); }
}
.sv-contact-widget__trigger-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.15s linear, transform 0.15s linear;
}
.sv-contact-widget__trigger-icon--close { opacity: 0; transform: scale(0.7) rotate(-45deg); }
.sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__trigger-icon--close,
.sv-contact-widget[data-sv-state="panel"] .sv-contact-widget__trigger-icon--close { opacity: 1; transform: none; }

/* Группа из трёх иконок (сообщение / телефон / Telegram), которые по очереди
   сменяют друг друга, пока виджет закрыт — привлекает внимание к кнопке. */
.sv-contact-widget__trigger-icons {
  position: absolute;
  inset: 0;
  transition: opacity 0.15s linear, transform 0.15s linear;
}
.sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__trigger-icons,
.sv-contact-widget[data-sv-state="panel"] .sv-contact-widget__trigger-icons { opacity: 0; transform: scale(0.7) rotate(45deg); }
.sv-contact-widget__trigger-icon--cycle {
  opacity: 0;
  transform: scale(0.75) rotate(-8deg);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.sv-contact-widget__trigger-icon--cycle.is-active { opacity: 1; transform: none; }

/* ---------- Веер способов связи (speed-dial) ----------
   Живёт как сиблинг триггера и панели, не внутри неё — выезжает
   из-под кнопки вверх. DOM-порядок = чат, звонок, Telegram (тот же
   порядок, что и в анимационном стаггере); flex-direction: column-reverse
   разворачивает это в стек снизу вверх — чат ближе всего к кнопке. */
.sv-contact-widget__fan {
  position: absolute;
  right: 24px;
  bottom: calc(92px + var(--sv-cw-offset, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto;
}
.sv-contact-widget__fan[hidden] { display: none; }

.sv-contact-widget__fan-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px) scale(0.85);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__fan-item {
  opacity: 1;
  transform: none;
}
.sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__fan-item:nth-child(1) { transition-delay: 0ms; }
.sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__fan-item:nth-child(2) { transition-delay: 45ms; }
.sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__fan-item:nth-child(3) { transition-delay: 90ms; }

.sv-contact-widget__fan-label {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elev);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  max-width: calc(100vw - 96px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-contact-widget__fan-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elev);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s linear, border-color 0.15s linear, color 0.15s linear;
}
.sv-contact-widget__fan-item:hover .sv-contact-widget__fan-btn,
.sv-contact-widget__fan-item:focus-visible .sv-contact-widget__fan-btn {
  background: var(--bg-sunken);
}
.sv-contact-widget__fan-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg-elev);
}
.sv-contact-widget__fan-item:hover .sv-contact-widget__fan-btn--primary,
.sv-contact-widget__fan-item:focus-visible .sv-contact-widget__fan-btn--primary {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
}

/* ---------- Панель ---------- */
.sv-contact-widget__panel {
  position: absolute;
  right: 24px;
  bottom: calc(92px + var(--sv-cw-offset, 0px) + env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-elev);
  padding: 20px 22px 22px;
  transform-origin: bottom right;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sv-contact-widget__panel:not([hidden]) {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sv-contact-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sv-contact-widget__close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--bg-sunken);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s linear, color 0.15s linear;
}
.sv-contact-widget__close:hover { background: var(--line); color: var(--ink); }

.sv-contact-widget__lead {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink-2);
}

/* ---------- Кнопка «назад» ---------- */
.sv-contact-widget__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  margin-bottom: 8px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s linear;
}
.sv-contact-widget__back:hover { color: var(--ink); }

.sv-contact-widget__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sv-contact-widget__hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* Скрытый экран должен оставаться скрытым: у чат-вида ниже стоит display:flex,
   который сам по себе перебивает атрибут [hidden] (author-правило бьёт UA-дефолт
   [hidden]{display:none}). Без этой строки однажды открытый чат «прилипал» поверх
   форм звонка/сообщения — тот самый баг «сверху висит переписка». Специфичность
   [hidden]-правила (класс+атрибут) выше, чем у --chat, поэтому побеждает. */
.sv-contact-widget__view[hidden] { display: none; }

/* ---------- Чат с AI-ассистентом ---------- */
.sv-contact-widget__panel--chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: min(520px, calc(100vh - 120px));
  padding-bottom: 14px;
}
.sv-contact-widget__panel--chat .sv-contact-widget__head { flex: 0 0 auto; }
.sv-contact-widget__view--chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.sv-contact-widget__chat-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.sv-contact-widget__chat-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
}
.sv-contact-widget__chat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.sv-contact-widget__chat-name span {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
}
.sv-contact-widget__chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 2px 8px;
  margin: 0 -2px;
}
.sv-contact-widget__msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.42;
}
.sv-contact-widget__msg p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.sv-contact-widget__msg--assistant {
  align-self: flex-start;
  background: var(--bg-sunken);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.sv-contact-widget__msg--user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--bg-elev);
  border-bottom-right-radius: 4px;
}
.sv-contact-widget__msg--error {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
}
.sv-contact-widget__msg--error .sv-contact-widget__chat-tg-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-deep);
}
.sv-contact-widget__msg--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
}
.sv-contact-widget__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: sv-cw-typing 1s ease-in-out infinite;
}
.sv-contact-widget__typing-dot:nth-child(2) { animation-delay: 0.15s; }
.sv-contact-widget__typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes sv-cw-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.sv-contact-widget__chat-form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.sv-contact-widget__chat-form textarea {
  flex: 1 1 auto;
  resize: none;
  min-height: 38px;
  max-height: 96px;
  padding: 9px 12px;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color 0.15s linear;
}
.sv-contact-widget__chat-form textarea:focus { outline: none; border-color: var(--primary-deep); }
.sv-contact-widget__chat-send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  color: var(--bg-elev);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s linear, opacity 0.15s linear;
}
.sv-contact-widget__chat-send:hover { background: var(--primary-deep); }
.sv-contact-widget__chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Формы ---------- */
.sv-contact-widget__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sv-contact-widget__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sv-contact-widget__field > span {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.sv-contact-widget__field em { font-style: normal; color: var(--ink-4); }
.sv-contact-widget__field input,
.sv-contact-widget__field textarea {
  font: inherit;
  font-size: 14.5px;
  padding: 11px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--ink);
  resize: none;
  transition: border-color 0.15s linear;
}
.sv-contact-widget__field input:focus,
.sv-contact-widget__field textarea:focus {
  outline: none;
  border-color: var(--primary-deep);
}
.sv-contact-widget__field input::placeholder,
.sv-contact-widget__field textarea::placeholder { color: var(--ink-4); }

/* Телефон с флагом страны (глобальный компонент .ms-phone из phone-flag.js).
   Рамку/фон переносим на обёртку .ms-phone, а не на голый input — иначе
   в узкой панели виджета получалась бы двойная рамка и съехавший паддинг. */
.sv-contact-widget__field .ms-phone {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  transition: border-color 0.15s linear;
}
.sv-contact-widget__field .ms-phone:focus-within { border-color: var(--primary-deep); }
.sv-contact-widget__field .ms-phone input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 11px 12px 11px 2px;
}
.sv-contact-widget__field .ms-phone .ms-phone__menu {
  max-width: min(260px, calc(100vw - 64px));
}

/* Honeypot — скрыт визуально, но не через display:none (боты его игнорируют) */
.sv-contact-widget__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sv-contact-widget__submit {
  margin-top: 2px;
  min-height: 44px;
  background: var(--ink);
  color: var(--bg-elev);
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.15s linear, opacity 0.15s linear;
}
.sv-contact-widget__submit:hover { background: var(--primary-deep); }
.sv-contact-widget__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.sv-contact-widget__submit--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.sv-contact-widget__submit--ghost:hover { background: var(--bg-sunken); }

.sv-contact-widget__error {
  margin: 0;
  font-size: 12.5px;
  color: var(--neg);
}

/* ---------- Спасибо ---------- */
.sv-contact-widget__thanks {
  text-align: center;
  padding: 8px 4px 4px;
}
.sv-contact-widget__thanks-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-size: 22px;
  font-weight: 700;
}
.sv-contact-widget__thanks .sv-contact-widget__title { text-align: center; }
.sv-contact-widget__thanks .sv-contact-widget__lead { text-align: center; }
.sv-contact-widget__thanks .sv-contact-widget__submit--ghost { margin-top: 16px; }

/* ---------- Фокус ---------- */
.sv-contact-widget *:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
}

/* ---------- Мобильные (≤720px) ---------- */
@media (max-width: 720px) {
  .sv-contact-widget__trigger {
    right: 16px;
    bottom: calc(16px + var(--sv-cw-offset, 0px) + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }
  .sv-contact-widget__fan {
    right: 16px;
    bottom: calc(80px + var(--sv-cw-offset, 0px) + env(safe-area-inset-bottom, 0px));
  }
  .sv-contact-widget__panel {
    right: 12px;
    left: 12px;
    bottom: calc(80px + var(--sv-cw-offset, 0px) + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: min(72vh, calc(100vh - 96px));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform-origin: bottom center;
  }
  .sv-contact-widget__field input,
  .sv-contact-widget__field textarea { font-size: 16px; } /* иначе iOS зумит страницу при фокусе */
  .sv-contact-widget__submit { min-height: 48px; }

  /* Чат разворачивается почти на весь экран — ленте нужно место для скролла */
  .sv-contact-widget__panel--chat {
    top: max(12px, env(safe-area-inset-top, 0px));
    bottom: calc(12px + var(--sv-kb, 0px) + var(--sv-cw-offset, 0px) + env(safe-area-inset-bottom, 0px));
    height: auto;
    max-height: none;
    transition: bottom 0.2s ease;
  }
  .sv-contact-widget__chat-send { width: 42px; height: 42px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sv-contact-widget__trigger,
  .sv-contact-widget__trigger-icon,
  .sv-contact-widget__trigger-icons,
  .sv-contact-widget__trigger-icon--cycle,
  .sv-contact-widget__fan-item,
  .sv-contact-widget__fan-btn,
  .sv-contact-widget__panel,
  .sv-contact-widget__submit,
  .sv-contact-widget__close,
  .sv-contact-widget__back,
  .sv-contact-widget__chat-send {
    transition: none !important;
  }
  .sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__fan-item:nth-child(1),
  .sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__fan-item:nth-child(2),
  .sv-contact-widget[data-sv-state="fan"] .sv-contact-widget__fan-item:nth-child(3) {
    transition-delay: 0ms !important;
  }
  .sv-contact-widget__trigger--nudge,
  .sv-contact-widget__trigger--nudge::after { animation: none !important; }
  /* Цикл иконок не запускается в JS при reduced-motion, но на всякий случай
     гасим и CSS-transition, чтобы смена (если случится) была мгновенной. */
  .sv-contact-widget__trigger-icon--cycle:not(.is-active) { opacity: 0; }
  .sv-contact-widget__typing-dot { animation: none !important; opacity: 0.7; }
}