/* ==========================================================================
   сдэккалькулятор.рф — чат-виджет (assets/chat.js, сервер — /chat.php)

   Отдельный файл, а не секция в style.css — сознательно. Виджет стоит только
   на шести коммерческих страницах, а style.css грузят все 10,5 тысячи:
   тащить 300 строк на страницы пунктов выдачи незачем. Второй довод важнее
   первого: правка style.css требует смены ASSET_VER, а это перезаливка всего
   сайта (см. README, раздел «Выкладка»). Здесь же правки стоят шесть файлов.

   Переменные берутся из style.css — он подключён раньше на тех же страницах.
   ⚠ У нас --brand-soft, а не --brand-light как на cdekmsk.ru: при переносе
   правил оттуда имя нужно менять, иначе кнопки вариантов останутся без фона.
   ========================================================================== */

.chat-root {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  font-size: 16px; line-height: 1.45;
}

/* ---------- Круглая кнопка ---------- */

.chat-fab {
  position: relative;
  width: 58px; height: 58px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--brand); color: #fff;
  box-shadow: 0 8px 24px rgba(26, 178, 72, .38);
  cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.chat-fab:hover { background: var(--brand-dark); transform: translateY(-2px); }
.chat-fab svg { width: 28px; height: 28px; margin: 0 auto; display: block; }
.chat-fab-x { display: none; }
.chat-root.open .chat-fab-i { display: none; }
.chat-root.open .chat-fab-x { display: block; }

/* Точка «есть незаконченный разговор» — тот же приём, что у мессенджеров */
.chat-fab-dot {
  position: absolute; top: 4px; right: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #ff3b30; border: 2px solid #fff;
  opacity: 0; transition: opacity .2s;
}
.chat-fab-dot.on { opacity: 1; }

/* ---------- Приглашение ----------
   Узкая плашка над кнопкой. Ширину держим маленькой намеренно: на телефоне
   всплывашка во весь экран — это возврат в выдачу, а возвраты на сайте,
   который ещё только разгоняет индексацию, стоят дороже любой заявки. */

.chat-invite {
  position: absolute; right: 0; bottom: 72px; width: 264px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 15px 32px 15px 15px;
  font-size: 15px; color: var(--ink);
  cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.chat-invite.show { opacity: 1; transform: none; pointer-events: auto; }
.chat-invite::after {                     /* «хвостик» к кнопке */
  content: ""; position: absolute; right: 21px; bottom: -7px;
  width: 12px; height: 12px; background: #fff;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.chat-invite-x {
  position: absolute; top: 5px; right: 7px;
  border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-3);
}
.chat-root.open .chat-invite { display: none; }

/* ---------- Окно ---------- */

.chat-panel {
  position: absolute; right: 0; bottom: 72px;
  width: 366px; max-height: min(600px, calc(100vh - 120px));
  display: none; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.chat-root.open .chat-panel { display: flex; }

.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; background: var(--brand); color: #fff;
}
.chat-ava {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.chat-head-t { display: flex; flex-direction: column; line-height: 1.25; }
.chat-head-t b { font-size: 16px; }
.chat-head-t span { font-size: 12.5px; opacity: .85; }
.chat-close {
  margin-left: auto; border: none; background: none; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; opacity: .85;
}
.chat-close:hover { opacity: 1; }

.chat-body {
  flex: 1 1 auto; overflow-y: auto; padding: 15px;
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 190px;
}

.chat-msg {
  max-width: 86%; padding: 10px 14px; font-size: 15px;
  border-radius: 15px; word-wrap: break-word;
}
.chat-msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.chat-msg.me  { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.chat-msg.me a { color: #fff; text-decoration: underline; }

/* «Печатает…» — три точки. Пауза перед ответом делает диалог диалогом,
   мгновенный ответ читается как форма и обесценивает вопросы. */
.chat-typing { display: flex; gap: 4px; padding: 14px; }
.chat-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3);
  animation: chat-dot 1s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* Карточка организации из DaData */
.chat-card { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.chat-card b { font-size: 15px; }
.chat-card span { color: var(--ink-2); }
.chat-card .ok   { color: var(--brand-dark); font-weight: 600; }
.chat-card .warn { color: #c2410c; font-weight: 600; }

/* ---------- Низ: варианты ответа и поля ---------- */

.chat-foot {
  flex: none; padding: 12px; background: #fff;
  border-top: 1px solid var(--line);
  max-height: 45%; overflow-y: auto;
}
.chat-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-opt {
  padding: 9px 15px; font: inherit; font-size: 14.5px;
  color: var(--brand-dark); background: var(--brand-soft);
  border: 1px solid transparent; border-radius: 100px;
  cursor: pointer; transition: .12s ease;
}
.chat-opt:hover { background: var(--brand); color: #fff; }

.chat-row { display: flex; gap: 8px; }
.chat-input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 14px; font: inherit; font-size: 16px;   /* 16px — иначе iOS зумит */
  border: 1.5px solid var(--line); border-radius: 100px;
  background: #fff; color: var(--ink);
}
.chat-input:focus { outline: none; border-color: var(--brand); }
.chat-send {
  flex: none; width: 46px; height: 46px; padding: 0;
  border: none; border-radius: 50%; background: var(--brand); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chat-send:hover { background: var(--brand-dark); }
.chat-skip {
  margin-top: 8px; border: none; background: none; padding: 0;
  font: inherit; font-size: 14px; color: var(--ink-3);
  text-decoration: underline; cursor: pointer;
}
.chat-err { color: #c2410c; font-size: 13.5px; margin-top: 6px; }
.chat-err:empty { margin: 0; }

.chat-consent-box { display: flex; flex-direction: column; gap: 10px; }
.chat-consent { display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.chat-consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--brand); }
.chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.chat-submit {
  padding: 14px 20px; font: inherit; font-size: 16px; font-weight: 600;
  border: none; border-radius: 100px; background: var(--brand); color: #fff;
  cursor: pointer;
}
.chat-submit:hover { background: var(--brand-dark); }
.chat-submit:disabled { opacity: .6; cursor: default; }

.chat-final { display: flex; flex-direction: column; gap: 8px; }
.chat-mess {
  padding: 12px; text-align: center; font-weight: 600; font-size: 15px;
  border-radius: 100px; color: #fff;
}
.chat-mess:hover { text-decoration: none; opacity: .92; }
.chat-mess.tg { background: #2aabee; }
.chat-mess.wa { background: #25d366; }

/* ---------- Мобильные: окно на весь экран ---------- */

@media (max-width: 560px) {
  .chat-root { right: 13px; bottom: 13px; }
  .chat-fab { width: 52px; height: 52px; }
  .chat-fab svg { width: 25px; height: 25px; }
  .chat-invite { width: min(258px, calc(100vw - 26px)); font-size: 14.5px; }

  /* Разворачиваем на весь экран только ПОСЛЕ явного открытия: до этого
     виджет занимает угол и не мешает читать страницу. */
  .chat-panel {
    position: fixed; inset: 0;
    width: 100%; max-height: none; border-radius: 0;
  }
  .chat-root.open .chat-fab,
  .chat-root.open .chat-invite { display: none; }   /* кнопка перекрывала бы чат */
  .chat-foot { max-height: 55%; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .chat-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chat-invite, .chat-opt { transition: none; }
  .chat-typing i { animation: none; }
}

@media print { .chat-root { display: none; } }