/* Поддержка: плавающая кнопка на всех страницах и форма обращения.
   Палитра — из app.css. Правила cosmic-ui: цвет чакры только для фигур,
   текст светлый на тёмной подложке, контраст ≥ 4.5:1, поле ввода ≥ 44px,
   кегль поля 16px (на iOS меньший приближает страницу при фокусе). */

/* ---------- Плавающая кнопка ---------- */

.support-fab {
  position: fixed; z-index: 26;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 48px; height: 48px; padding: 0 13px; border-radius: 999px;
  color: var(--text, #E8EAF2); text-decoration: none;
  font: 560 15px/1 "Onest", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: .01em;
  background: rgba(19, 22, 44, .92);
  border: 1px solid rgba(212, 175, 122, .55);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8), 0 0 22px -8px rgba(212, 175, 122, .4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .18s, box-shadow .18s, transform .18s;
  -webkit-tap-highlight-color: transparent;
}
.support-fab:hover {
  border-color: var(--gold, #D4AF7A); transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .85), 0 0 26px -6px rgba(212, 175, 122, .6);
}
.support-fab:focus-visible { outline: 2px solid var(--gold, #D4AF7A); outline-offset: 3px; }
/* Главная: до конца первого экрана кнопка спрятана (см. data-late в support-widget.js) */
.support-fab.is-late { opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; }
.support-fab svg { width: 22px; height: 22px; flex: none; }
.support-fab-label { display: none; }
@media (min-width: 720px) {
  .support-fab { padding: 0 20px 0 15px; }
  .support-fab-label { display: inline; }
}

/* В приложении внизу таббар: кнопка живёт над ним, а «Наверх» — ещё выше.
   Экраны получают нижний отступ с запасом под кнопку (её верхний край на 132px от низа):
   иначе последние строки любого экрана, в том числе чипы и кнопки у правого края, лежат под ней. */
body.has-tabbar .support-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
body.has-tabbar .to-top { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
body.has-tabbar .view:not(.no-pad) { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* Телефон на боку: высоты экрана едва хватает самой сцене, и кнопка ложилась бы на её элементы.
   Поддержка остаётся под рукой в подвале главной и правовых страниц. */
@media (max-height: 520px) and (orientation: landscape) { .support-fab { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .support-fab { transition: none; }
  .support-fab:hover { transform: none; }
}
@media print { .support-fab { display: none; } }

/* ---------- Страница /support ---------- */

.support-page { max-width: 660px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 110px; }
.support-page h1 { font-size: clamp(26px, 5vw, 36px); margin: 18px 0 10px; }
.support-page .meta { color: var(--text-dim); font-size: 15px; margin: 0 0 22px; }
.support-page a { color: var(--gold); }

.support-lead {
  margin: 0 0 22px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid rgba(212, 175, 122, .35);
  background: linear-gradient(180deg, rgba(212, 175, 122, .12), rgba(212, 175, 122, .04));
}
.support-lead p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-soft, #C3C8DA); }

.support-form, .support-done {
  padding: clamp(18px, 4vw, 28px); border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(30, 34, 62, .62), rgba(19, 22, 44, .72));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.support-field { display: block; margin: 0 0 18px; }
.support-field .lbl { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 560; color: var(--text); }
.support-field .opt { color: var(--text-dim); font-weight: 400; }
.support-form input[type="text"], .support-form input[type="email"],
.support-form select, .support-form textarea {
  display: block; width: 100%; min-height: 48px; margin: 0;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--text);
  background: rgba(0, 0, 0, .32); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 12px 14px;
}
.support-form textarea { min-height: 156px; resize: vertical; }
/* Подсказка в поле: браузерный серый на тёмном даёт контраст ниже 4.5:1 */
.support-form ::placeholder { color: #8E94AB; opacity: 1; }
.support-form input:focus-visible, .support-form select:focus-visible,
.support-form textarea:focus-visible {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 122, .24);
}
.support-form [aria-invalid="true"] { border-color: #FF8A80; box-shadow: 0 0 0 3px rgba(255, 138, 128, .18); }
.support-count { margin-top: 6px; text-align: right; font-size: 13px; color: var(--text-dim); }
.support-count.over { color: #FF9C93; }

.support-consent {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 4px 0 20px;
  font-size: 14.5px; line-height: 1.55; color: var(--text-soft, #C3C8DA);
}
.support-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #D4AF7A; }
.support-consent span { flex: 1 1 0; min-width: 0; }
/* Кольцо фокуса у галочки: золото на тёмном даёт контраст выше 3:1 (у браузерного кольца около 1,6:1) */
.support-consent input:focus-visible { outline: 2px solid var(--gold, #D4AF7A); outline-offset: 3px; border-radius: 4px; }

/* Сообщение о поле стоит под самим полем (support.js) */
.support-fielderr { flex: 1 0 100%; margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: #FF9C93; }

/* Приманка для ботов: уведена за пределы экрана, живой человек её пропускает */
.support-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.support-status { min-height: 1.5em; margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.support-status.error { color: #FF9C93; }
.support-status.ok { color: #9BE3A4; }

.support-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.support-actions .btn { min-height: 48px; }
.support-actions .btn[disabled] { opacity: .55; cursor: progress; transform: none; }

.support-alt { margin: 22px 0 0; font-size: 15px; line-height: 1.7; color: var(--text-dim); }

.support-done { text-align: center; padding: clamp(26px, 6vw, 44px) clamp(18px, 4vw, 32px); }
.support-done .star { display: block; margin-bottom: 8px; font-size: 30px; color: var(--gold); }
.support-done h2 { margin: 0 0 10px; font-size: clamp(22px, 4.5vw, 28px); }
.support-done p { margin: 0 0 14px; color: var(--text-soft, #C3C8DA); }
.support-done h2:focus { outline: none; }
/* Длинный адрес почты переносится, а не раздвигает страницу (на 320px из-за него появлялась горизонтальная прокрутка) */
#done-email { overflow-wrap: anywhere; }
.support-ticket {
  display: inline-block; margin: 4px 0 16px; padding: 6px 16px; border-radius: 10px;
  border: 1px dashed rgba(212, 175, 122, .6); color: var(--gold-3, #FFF0C4);
  font: 600 20px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .16em;
}
.support-done .support-actions { justify-content: center; margin-top: 8px; }

@media (max-width: 560px) {
  .support-actions .btn { width: 100%; }
  .support-form, .support-done { border-radius: 16px; }
}