/* Стили пошагового гайда (onboarding-tour.js).
 *
 * ПОЧЕМУ отдельный файл, а не блок <style> внутри onboarding-tour.js:
 * до 1.18.1 скрипт создавал <style> через createElement + textContent, и ради
 * этого единственного блока в CSP приходилось держать style-src 'unsafe-inline'.
 * Разрешение инлайновых стилей — это готовый вектор для XSS-подмены интерфейса
 * (фальшивая форма ввода поверх настоящей), поэтому стили вынесены в статику,
 * а из style-src убран 'unsafe-inline'.
 *
 * ПОЧЕМУ отдельный файл, а не дописано в styles.css: гайд — самостоятельный
 * компонент, общий с другими проектами (04_VEO3 использует тот же скрипт).
 * Отдельный файл переносится вместе со скриптом одним куском.
 *
 * ПОЧЕМУ подключать строго ПОСЛЕ styles.css: правила ниже рассчитаны на то, что
 * они идут последними в каскаде — часть из них конкурирует с общими стилями
 * кнопок и заголовков приложения при равной специфичности. Порядок повторяет
 * прежнее поведение, когда <style> дописывался в конец <head> во время работы.
 *
 * ДИНАМИКА ЗДЕСЬ НЕ ЖИВЁТ: геометрия (left/top/width/height четырёх затемнений
 * и рамки подсветки, позиция карточки) и переменная --ag-tour-arrow считаются
 * на лету и ставятся через element.style.* / setProperty в onboarding-tour.js.
 * CSSOM-присваивание CSP не блокирует — под запрет попадают только элементы
 * <style> и атрибуты style="...", а их у нас не осталось.
 */

.ag-tour-root {
  --ag-tour-accent: #5d70ff;
  --ag-tour-card: #121a2a;
  --ag-tour-text: #f7f9ff;
  --ag-tour-muted: #b9c4d8;
  position: fixed;
  inset: 0;
  /* Гайд обязан лежать выше любого модального слоя приложения, иначе подсветка
     окажется под шторкой собственных диалогов. */
  z-index: 2147483000;
  pointer-events: none;
  font-family: inherit;
}

/* Скрипт прячет корень через root.hidden. У элемента с position:fixed
   собственный display перебивает поведение атрибута hidden, поэтому правило
   нужно явно. */
.ag-tour-root[hidden] {
  display: none;
}

.ag-tour-shade {
  position: fixed;
  background: rgba(3, 8, 18, 0.76);
  /* Затемнение перехватывает клики: пока идёт гайд, мышь не должна попадать
     в интерфейс под ним. */
  pointer-events: auto;
  transition: all 0.18s ease;
}

.ag-tour-focus {
  position: fixed;
  border: 3px solid #7c8cff;
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(124, 140, 255, 0.22), 0 0 30px rgba(93, 112, 255, 0.48);
  /* Рамка подсветки — чисто декоративная, клики уходят элементу под ней. */
  pointer-events: none;
  transition: all 0.18s ease;
}

.ag-tour-card {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(139, 155, 255, 0.45);
  border-radius: 16px;
  background: var(--ag-tour-card);
  color: var(--ag-tour-text);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.42);
  pointer-events: auto;
  /* Выше затемнений внутри того же корня — иначе карточка окажется под ними. */
  z-index: 2;
}

/* Хвостик карточки. Сторона выбирается в JS через data-placement, поэтому все
   четыре варианта описаны статически, а меняется только атрибут. */
.ag-tour-card::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

/* --ag-tour-arrow ставит placeCard() — смещение хвостика к центру подсветки.
   Значение динамическое, фолбэк 50% нужен на первый кадр, пока не посчитано. */
.ag-tour-card[data-placement="bottom"]::before {
  top: -20px;
  left: var(--ag-tour-arrow, 50%);
  transform: translateX(-50%);
  border-bottom-color: var(--ag-tour-card);
}

.ag-tour-card[data-placement="top"]::before {
  bottom: -20px;
  left: var(--ag-tour-arrow, 50%);
  transform: translateX(-50%);
  border-top-color: var(--ag-tour-card);
}

.ag-tour-card[data-placement="right"]::before {
  left: -20px;
  top: var(--ag-tour-arrow, 50%);
  transform: translateY(-50%);
  border-right-color: var(--ag-tour-card);
}

.ag-tour-card[data-placement="left"]::before {
  right: -20px;
  top: var(--ag-tour-arrow, 50%);
  transform: translateY(-50%);
  border-left-color: var(--ag-tour-card);
}

/* !important в блоках ниже сохранён из прежней версии: гайд рисуется поверх
   чужого интерфейса, и общие стили кнопок/заголовков приложения (styles.css)
   имеют сравнимую специфичность. Снимать их без визуальной проверки всех
   шагов нельзя — это отдельная задача. */
.ag-tour-close {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 32px;
  height: 32px;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ag-tour-muted) !important;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ag-tour-count {
  display: block;
  margin: 0 34px 9px 0;
  color: #9eabff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ag-tour-title {
  margin: 0 28px 8px 0 !important;
  color: var(--ag-tour-text) !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

.ag-tour-text {
  margin: 0 !important;
  color: var(--ag-tour-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.ag-tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.ag-tour-actions button {
  min-height: 38px;
  padding: 8px 13px !important;
  border: 1px solid rgba(155, 168, 207, 0.34) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--ag-tour-text) !important;
  font: inherit !important;
  font-weight: 750 !important;
  cursor: pointer;
}

/* Кнопка «Назад» на первом шаге приходит disabled из show(). */
.ag-tour-actions button:disabled {
  opacity: 0.38;
  cursor: default;
}

.ag-tour-actions .ag-tour-next {
  border-color: transparent !important;
  background: linear-gradient(135deg, #6075ff, #785eea) !important;
  color: white !important;
}

.ag-tour-actions .ag-tour-skip {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--ag-tour-muted) !important;
  padding-left: 0 !important;
}

.ag-tour-spacer {
  flex: 1;
}

/* Светлая тема. Селектор продублирован для html[data-theme] и для любого
   предка с этим атрибутом — тему ставит theme-boot.js на <html>, но в старых
   сборках атрибут встречался и на <body>. */
[data-theme="light"] .ag-tour-root,
html[data-theme="light"] .ag-tour-root {
  --ag-tour-card: #fff;
  --ag-tour-text: #12203a;
  --ag-tour-muted: #53627a;
}

/* На узком экране карточка перестаёт «летать» за подсветкой и прижимается
   к низу: посчитанных placeCard() координат для 360px просто не хватает. */
@media (max-width: 680px) {
  .ag-tour-card {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto;
  }

  .ag-tour-card::before {
    display: none;
  }

  .ag-tour-actions {
    gap: 5px;
  }

  .ag-tour-actions button {
    padding: 7px 9px !important;
  }

  .ag-tour-focus {
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-tour-shade,
  .ag-tour-focus {
    transition: none;
  }
}
