/* ============================================================
   ТОЧКА — плавающая кнопка «?» и окно быстрой связи с менеджером

   Подключается на обеих страницах сайта (index.html, editor.html).
   Разметку собирает assets/help-widget.js — здесь только вид.

   ПОЧЕМУ СВОИ КЛАССЫ, А НЕ .city-dialog. Окна заявок на главной
   оформлены правилами, которые лежат в <style> самой index.html, и на
   странице редактора их нет вовсе. Виджет обязан выглядеть одинаково на
   обеих, значит его правила должны ехать вместе с ним, а не с одной из
   страниц. Переменные (--paper, --ink, --route) объявлены на обеих —
   их и берём.
   ============================================================ */

/* ---------- кнопка ----------
   Правый нижний угол — там её ищут по привычке, выработанной чужими
   сайтами, и ломать эту привычку незачем.

   z-index 60: выше залипающей шапки (50) и выше поповера справки в
   редакторе (30), но ниже <dialog>, который браузер рисует в своём
   слое поверх всего.

   safe-area — про айфон с домашней полосой: без неё кнопка садится
   ровно на полосу жеста, и нажать её нельзя, зато можно случайно
   свернуть приложение. */
.help-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 1px solid var(--ink); border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 20px; line-height: 1;
  box-shadow: 0 8px 22px rgba(26, 28, 32, .22);
  transition: background-color var(--t-tap) var(--ease-soft), border-color var(--t-tap) var(--ease-soft),
              color var(--t-tap) var(--ease-soft), box-shadow var(--t-tap) var(--ease-soft),
              transform var(--t-press) var(--ease-out);
}
/* ---------- ВЫВОРОТКА ПОД ТЁМНЫМ ФОНОМ ----------

   Под кнопкой проезжает вся плёнка: полторы первые сцены идут по
   чернильному фону, финал — по акцентному оранжевому, ниже стоит
   красная секция заказа. Чернильный кружок тонет на первых и спорит
   со вторыми, поэтому на тёмном он выворачивается: бумажный кружок с
   чернильной «?».

   Класс ставит help-widget.js, измеряя светлоту того, на чём кнопка
   лежит прямо сейчас, — список секций тут не при чём (см. комментарий
   там же). Тень тоже меняется: чернильная тень под бумажным кружком на
   тёмном фоне не видна, а сам кружок без неё выглядит наклеенным. */
.help-fab.on-dark {
  background: var(--paper); border-color: var(--paper); color: var(--ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
@media (hover: hover) and (pointer: fine) {
  .help-fab:hover { background: var(--route); border-color: var(--route); color: #fff; transform: translateY(-2px); }
  /* Под курсором обе выворотки сходятся к одному: акцент с белой «?».
     На оранжевом фоне финала плёнки он бы слился с фоном — там кнопку
     держит светлая кромка. */
  .help-fab.on-dark:hover { background: var(--route); border-color: #fff; color: #fff; }
}
.help-fab:focus-visible { outline: 2px solid var(--route); outline-offset: 3px; }
.help-fab.on-dark:focus-visible { outline-color: var(--paper); }
/* Пока открыто окно, кнопка не нужна: у окна свой «Закрыть», а
   торчащий из-под затемнения кружок читается вторым выходом. */
.help-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }

/* ---------- окно ---------- */
.help-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink);
}
.help-dialog::backdrop { background: rgba(23, 21, 18, .55); }
.help-dialog-inner { padding: 24px; display: grid; gap: 16px; }
.help-dialog h3 {
  margin: 0; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 23px; letter-spacing: -.02em; line-height: 1.06;
}
.help-lede { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-70, rgba(26,28,32,.7)); }

/* ---------- связаться сразу ----------
   Стоит ВЫШЕ формы, а не под ней. Человек, который не разобрался, чаще
   хочет спросить живого человека сейчас, а не оставить контакт и ждать;
   форма — для тех, кому неудобно писать в мессенджер. */
.help-now {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--grid, rgba(26,28,32,.14));
}
.help-now a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; text-decoration: none;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
  transition: background-color var(--t-tap) var(--ease-soft), color var(--t-tap) var(--ease-soft);
}
.help-now a svg { width: 17px; height: 17px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .help-now a:hover { background: var(--ink); color: var(--paper); }
}
.help-now a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- форма ---------- */
.help-field { display: grid; gap: 5px; }
.help-field label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-55, rgba(26,28,32,.66));
}
.help-field input,
.help-field textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;
}
.help-field textarea { resize: vertical; min-height: 62px; }
.help-field input:focus-visible,
.help-field textarea:focus-visible { outline: 2px solid var(--route); outline-offset: 1px; }
.help-error { display: none; margin: 0; font-size: 12px; font-weight: 700; color: var(--route); }
.help-error.show { display: block; }

.help-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.help-btn, .help-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px; cursor: pointer;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
  border: 1px solid var(--ink);
}
.help-btn { background: var(--route); border-color: var(--route); color: #fff; }
.help-btn-ghost { background: var(--paper); color: var(--ink); }
.help-btn:disabled { opacity: .55; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .help-btn:not(:disabled):hover { background: var(--ink); border-color: var(--ink); }
  .help-btn-ghost:hover { background: var(--ink); color: var(--paper); }
}
.help-btn:focus-visible, .help-btn-ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.help-done { display: none; margin: 0; font-size: 13px; font-weight: 700; }
.help-done.in { display: block; }

/* Ловушка для ботов: поле есть в разметке, но не на экране. Проверяет
   его сервер (см. botCheck в backend/routes/public.js). */
.help-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .help-fab { transition: none; }
}