/* Виджет поддержки. Отдельный файл — и это не вкус.

   Окно висит на ДВУХ страницах с разным оформлением: в кабинете (theme.css,
   своя палитра, свои переменные) и на продающей странице (свои стили прямо в
   разметке, theme.css там нет вовсе). Кусок в theme.css работал бы только в
   одном из двух мест, а копия в двух файлах разъехалась бы на первой правке.

   Поэтому здесь нет ни одной чужой переменной: палитра своя, имена классов
   начинаются с `sup-`, и ни одно из них не встречается в theme.css. Виджет
   ничего не наследует и ничего не ломает.

   Место — внизу СПРАВА (решение владельца 23.09.2026).
   Слева виджет перекрывал навигацию. Кнопка и окно выровнены по правому краю.
*/

.sup-root {
  --sup-ink: #10161e;
  --sup-ink-2: #161e29;
  --sup-line: #27323f;
  --sup-text: #e8edf4;
  --sup-dim: #94a3b5;
  --sup-accent: #ff5a2d;
  /* Второй акцент — янтарь дизайн-системы кабинета (theme.css: --amber,
     --amber-bg, --amber-line). Скопирован ЧИСЛОМ намеренно: виджет висит и на
     продающей странице, где theme.css нет, и чужих переменных в его палитре
     быть не может (см. шапку файла). Меняется янтарь — меняется здесь. */
  --sup-amber: #f5a524;
  --sup-amber-bg: rgba(245, 165, 36, .13);
  --sup-amber-line: rgba(245, 165, 36, .60);
  --sup-good: #4ade80;
  --sup-bad: #f87171;
  --sup-radius: 14px;
  position: fixed;
  left: auto;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 2147483000;          /* выше окон кабинета и шапки мессенджера */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sup-text);
}

.sup-root *, .sup-root *::before, .sup-root *::after { box-sizing: border-box; }
/* Уведомление остаётся над кнопкой, а не под ней, включая узкий экран. */
.app-toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: calc(100vw - 36px) !important; z-index: 2147483001 !important; }

/* ── Кнопка ─────────────────────────────────────────────────────────────── */
.sup-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--sup-line);
  background: var(--sup-ink);
  color: var(--sup-text);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
}
.sup-fab:hover { border-color: var(--sup-accent); }
.sup-fab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sup-accent);
}
/* Непрочитанный ответ оператора: точка становится счётчиком. */
.sup-fab-new {
  min-width: 20px; height: 20px; border-radius: 999px;
  background: var(--sup-accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
  padding: 0 6px;
}

/* ── Окно ───────────────────────────────────────────────────────────────── */
/* Размер окна — решение владельца 16.09.2026. Прежние 360×620 читались как
   всплывашка: переписка с ассистентом длиннее одного экрана, и человек
   прокручивал её в щель. Высота держится долей ЭКРАНА (80 %), а не числом:
   на ноутбуке 768 px окно в 640 упиралось бы в края. */
.sup-panel {
  width: 420px;
  height: min(80vh, 640px);
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--sup-ink);
  border: 1px solid var(--sup-line);
  border-radius: var(--sup-radius);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
  overflow: hidden;
  margin-bottom: 10px;
}
/* «Развернуть» — шире, чтобы читать длинный ответ и таблицу путей. */
.sup-panel.sup-panel-wide { width: 720px; }
.sup-hidden { display: none !important; }

.sup-wide {
  border: 0; background: transparent; color: var(--sup-dim);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 3px 5px;
}
.sup-wide:hover { color: var(--sup-text); }

.sup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sup-line);
  background: var(--sup-ink-2);
}
.sup-head b { font-size: 14.5px; font-weight: 650; }
.sup-head .sup-sub { color: var(--sup-dim); font-size: 12.5px; }
.sup-head .sup-grow { margin-left: auto; }
.sup-x {
  border: 0; background: transparent; color: var(--sup-dim);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.sup-x:hover { color: var(--sup-text); }

.sup-body {
  padding: 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 120px;
}

/* ── Форма гостя ────────────────────────────────────────────────────────── */
.sup-field { margin-bottom: 10px; }
.sup-field label {
  display: block; margin-bottom: 4px;
  color: var(--sup-dim); font-size: 12.5px;
}
.sup-field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--sup-line);
  border-radius: 9px;
  background: var(--sup-ink-2);
  color: var(--sup-text);
  font: inherit;
}
.sup-field input:focus { outline: 0; border-color: var(--sup-accent); }
.sup-agree {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 9px 0; font-size: 12.5px; color: var(--sup-dim); cursor: pointer;
}
.sup-agree input { margin-top: 2px; flex: 0 0 auto; }
.sup-agree a { color: var(--sup-accent); }
.sup-note { color: var(--sup-dim); font-size: 12.5px; margin-bottom: 10px; }
.sup-err {
  color: var(--sup-bad); font-size: 12.5px; margin: 8px 0 0;
  white-space: pre-wrap;
}

.sup-go {
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--sup-accent);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.sup-go[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Переписка ──────────────────────────────────────────────────────────── */
.sup-msg { margin-bottom: 10px; display: flex; }
.sup-msg .sup-bubble {
  max-width: 84%;
  padding: 8px 11px;
  border-radius: 12px;
  background: var(--sup-ink-2);
  border: 1px solid var(--sup-line);
  white-space: pre-wrap;
  word-break: break-word;
}
.sup-msg.sup-mine { justify-content: flex-end; }
.sup-msg.sup-mine .sup-bubble {
  background: rgba(255, 90, 45, .14);
  border-color: rgba(255, 90, 45, .4);
}
.sup-who { display: block; font-size: 11px; color: var(--sup-dim); margin-bottom: 2px; }

.sup-foot {
  border-top: 1px solid var(--sup-line);
  padding: 10px;
  background: var(--sup-ink-2);
}
.sup-row { display: flex; gap: 8px; align-items: flex-end; }
/* Ряд под полем ввода: слева — путь к человеку, справа — «Отправить».
   Порядок как на привычных сайтах поддержки, и обе кнопки одной высоты. */
.sup-actions {
  display: flex; gap: 8px; align-items: center;
  justify-content: space-between; margin-top: 8px;
}
.sup-actions .sup-grow { flex: 1 1 auto; }
.sup-row textarea {
  flex: 1 1 auto;
  resize: none;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 11px;
  border: 1px solid var(--sup-line);
  border-radius: 9px;
  background: var(--sup-ink);
  color: var(--sup-text);
  font: inherit;
}
.sup-row textarea:focus { outline: 0; border-color: var(--sup-accent); }
.sup-send {
  border: 0; border-radius: 9px; padding: 9px 14px;
  background: var(--sup-accent); color: #fff; font: inherit; font-weight: 650;
  cursor: pointer;
}
.sup-send[disabled] { opacity: .45; cursor: not-allowed; }
.sup-left { color: var(--sup-dim); font-size: 11.5px; margin-top: 5px; }
/* Кнопка вызова оператора стоит под полем ввода всегда: ассистент может не
   понять с первого раза, и путь к человеку не должен появляться только после
   неудачи. До 16.09.2026 она была намеренно тише «Отправить» — и оказалась
   незаметной ровно для того, кому нужнее всего. Теперь она равноправная:
   тот же рост, янтарная рамка, значок человека. */
.sup-callop {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--sup-amber-line); border-radius: 9px;
  padding: 9px 14px;
  background: var(--sup-amber-bg); color: var(--sup-amber); font: inherit;
  font-weight: 650; cursor: pointer;
}
.sup-callop:hover { border-color: var(--sup-amber); }
.sup-callop[disabled] {
  opacity: .6; cursor: default;
  border-color: var(--sup-line); background: transparent; color: var(--sup-dim);
}
/* Ассистент не понял — путь к человеку подсвечивается сильнее. Пульс мягкий
   и конечный: бесконечное мигание в углу экрана — это не подсказка, а помеха.
   Тем, кто просил систему не анимировать, она не мигает вовсе. */
.sup-callop.sup-callop-hot {
  background: var(--sup-amber); color: #1a1204;
  border-color: var(--sup-amber);
  animation: sup-pulse 1.6s ease-out 3;
}
@keyframes sup-pulse {
  0%   { box-shadow: 0 0 0 0 var(--sup-amber-line); }
  70%  { box-shadow: 0 0 0 9px rgba(245, 165, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sup-callop.sup-callop-hot { animation: none; }
}

.sup-empty { color: var(--sup-dim); text-align: center; padding: 18px 8px; }
.sup-callback { border: 1px solid var(--sup-line); border-radius: 10px; padding: 12px; margin-top: 12px; }
.sup-callback p { margin: 0 0 10px; }
.sup-callback .sup-go { white-space: normal; max-width: 100%; margin-top: 10px; }
.sup-callback input[type=checkbox] { width: auto; }

/* На телефоне окно занимает экран целиком: 420 px на 390-пиксельном экране —
   это и есть весь экран, и половинчатые отступы только режут переписку.
   Кнопка-запуск справа; её контейнер не перехватывает всю нижнюю полосу. */
@media (max-width: 520px) {
  /* The fixed support button must not cover the final card/CTA. This spacer
     belongs only to the cabinet (#view); the public page keeps its layout. */
  #view { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .sup-root { left: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sup-fab { margin: 0; }
  .sup-panel {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: 100%; max-height: 100%;
    border-radius: 0; margin: 0;
  }
  .sup-panel.sup-panel-wide { width: 100%; }
  .sup-wide { display: none; }          /* разворачивать уже некуда */
}

/* ── Раздел «Лиды» в кабинете администратора сервиса ────────────────────── */
/* Он рисуется этим же файлом (frontend/support.js) и потому одевается здесь.
   Классы кабинета (`panel`, `tbl`) используются как есть — таблица должна
   выглядеть как все остальные таблицы кабинета, а не как вставка. */
.sup-leads-wrap { display: block; }
.sup-leads-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sup-chip {
  border: 1px solid var(--sup-line, #27323f);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.sup-chip.sup-on { border-color: #ff5a2d; color: #ff5a2d; }
.sup-talk {
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--sup-line, #27323f);
  border-radius: 10px; padding: 12px; margin: 10px 0;
}
.sup-talk .sup-msg .sup-bubble { max-width: 92%; }