/*
  RidePush — интерактивное обучение рекламодателя (tour.js).

  Полностью развязано с кабинетом: ни одного селектора кабинета здесь не
  переопределяется, все имена классов свои. Палитра и радиусы берутся из
  переменных app.css, поэтому тур автоматически попадает и в тёмную тему.

  Два семейства имён — это осознанно:
    .gp-guide-*  живёт постоянно (кнопка запуска, первое предложение);
    .gp-tour-*   существует только пока тур открыт и убирается целиком.
  Проверка «после выхода тура ничего не осталось» смотрит именно на «tour».
*/

/* ------------------------------------------------------- угол с кнопками */

/*
  Правый нижний угол, а не левый: слева внизу живёт подвал бокового меню
  со сменой пароля и выходом, и кнопка ложилась прямо на «Выйти».

  Кнопок в этом углу теперь две — обучение и поддержка (ADR-037), — и раскладывать
  их фиксированными координатами нельзя: ширина зависит от языка («Обучение» против
  «Podrška»), высота — от шрифта, а появляются они независимо друг от друга.
  Поэтому общий док-колонка: флексбокс расставляет их сам, ни одного магического числа.
  Кнопка поддержки живёт в chat.js, но стиль и место берёт отсюда — иначе в углу
  оказались бы два разнородных элемента вместо пары.

  Порядок задан order, а не порядком в DOM: кнопки создают два разных файла, и кто
  первым увидит кабинет, тот и первый в разметке — без order пара переставлялась бы
  местами от загрузки к загрузке.

  pointer-events:none на самом доке обязателен: колонка растянута по ширине на узком
  экране (см. медиазапрос), и без этого она перехватывала бы клики по интерфейсу
  слева от кнопок — там, где визуально пусто.
*/
.gp-dock{
  position:fixed;right:16px;bottom:16px;z-index:88;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none
}
.gp-dock > *{pointer-events:auto}

/* ---------------------------------------------------------- кнопка запуска */

.gp-guide-btn{
  order:2;
  display:flex;align-items:center;gap:7px;
  padding:9px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:13px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.14);cursor:pointer
}
.gp-guide-btn:hover{border-color:var(--accent);color:var(--accent)}
.gp-guide-btn .gp-guide-ic{
  width:18px;height:18px;flex:0 0 18px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1
}

/* ------------------------------------------- первое предложение (один раз) */

/*
  Тоже житель дока (order:0 — над обеими кнопками). Раньше стояло на fixed
  с bottom:64px, подобранным под высоту одной кнопки: со второй кнопкой это число
  стало неверным, и подсказка легла бы прямо на неё. Флексбокс считает сам.
*/
.gp-guide-hint{
  order:0;width:290px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:0 14px 36px rgba(0,0,0,.2);
  animation:gp-guide-in .28s ease both
}
.gp-guide-hint b{display:block;font-size:14px;margin:0 0 5px}
.gp-guide-hint p{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--muted)}
.gp-guide-hint .gp-guide-row{display:flex;gap:8px}
.gp-guide-hint button{padding:7px 12px;font-size:13px;border-radius:8px}

@keyframes gp-guide-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------- затемнение */

/*
  Слоёв два, и это не лишнее усложнение:
  «вуаль» ловит клики по всему экрану (клик мимо карточки не должен ни попадать
  в кабинет, ни закрывать обучение), а вырез рисует «пятно» своей огромной
  тенью. Тень не участвует в попадании курсора, поэтому без вуали клик по
  затемнению уходил бы в интерфейс под ним.
*/
.gp-tour-veil{
  position:fixed;inset:0;z-index:10000;background:transparent;
  transition:background .25s ease
}
.gp-tour-veil.gp-solid{background:rgba(9,12,18,.58)}

.gp-tour-spot{
  position:fixed;z-index:10001;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 9999px rgba(9,12,18,.58),0 0 0 2px var(--accent),0 0 0 7px rgba(31,111,235,.22);
  transition:top .3s cubic-bezier(.4,0,.2,1),left .3s cubic-bezier(.4,0,.2,1),
             width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),
             opacity .2s ease
}
.gp-tour-spot.gp-hidden{opacity:0}

/* ---------------------------------------------------------------- карточка */

.gp-tour-card{
  position:fixed;z-index:10002;width:340px;max-width:calc(100vw - 24px);
  background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  padding:15px 17px 13px;
  transition:opacity .18s ease,transform .18s ease
}
.gp-tour-card.gp-moving{opacity:0;pointer-events:none}
.gp-tour-card.gp-nudge{animation:gp-nudge .3s ease}

@keyframes gp-nudge{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

/* Стрелка — повёрнутый квадрат с двумя видимыми гранями: так она подхватывает
   и рамку, и фон карточки, не требуя ни SVG, ни картинки. */
.gp-tour-arrow{
  position:absolute;width:12px;height:12px;background:var(--panel);
  border:1px solid var(--line);transform:rotate(45deg)
}
.gp-tour-arrow.gp-off{display:none}
.gp-tour-arrow.gp-up{border-right:0;border-bottom:0}
.gp-tour-arrow.gp-down{border-left:0;border-top:0}
.gp-tour-arrow.gp-left{border-right:0;border-top:0}
.gp-tour-arrow.gp-right{border-left:0;border-bottom:0}

.gp-tour-bar{height:3px;background:var(--chip);border-radius:99px;overflow:hidden;margin:0 0 11px}
.gp-tour-bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease}

.gp-tour-head{display:flex;align-items:flex-start;gap:10px;margin:0 0 7px}
.gp-tour-headtext{flex:1;min-width:0}
.gp-tour-count{
  font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;margin:0 0 2px
}
.gp-tour-title{font-size:15.5px;font-weight:700;line-height:1.3}
.gp-tour-x{
  flex:0 0 auto;width:26px;height:26px;padding:0;line-height:1;
  border:0;border-radius:7px;background:none;color:var(--muted);
  font-size:17px;cursor:pointer
}
.gp-tour-x:hover{background:var(--chip);color:var(--ink)}

.gp-tour-text{font-size:13.5px;line-height:1.55;margin:0 0 13px;color:var(--ink)}
.gp-tour-text b{font-weight:600}

.gp-tour-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.gp-tour-card button{padding:7px 13px;font-size:13px;border-radius:8px}
.gp-tour-skip{border-color:transparent;background:none;color:var(--muted)}
.gp-tour-skip:hover{color:var(--ink)}

/* Узкий экран: карточка ложится полосой снизу. Свободного места сбоку от
   подсветки там нет, а «умное» размещение на 375 px всегда упирается в край. */
@media (max-width:559px){
  .gp-tour-card{
    left:10px!important;right:10px!important;top:auto!important;bottom:12px!important;
    width:auto;max-width:none
  }
  .gp-tour-arrow{display:none}
  /* Док растягиваем по ширине, чтобы подсказке было куда развернуться; кнопки
     остаются прижатыми вправо (align-items:flex-end у дока). */
  .gp-dock{left:16px}
  .gp-guide-hint{width:auto;align-self:stretch}
}

@media (prefers-reduced-motion:reduce){
  .gp-tour-spot,.gp-tour-card,.gp-tour-bar i{transition:none}
  .gp-guide-hint{animation:none}
}