/* Подсказки с котом (js/guide.js): затемнение с размытием, вырез вокруг того,
   о чём речь, и карточка кота. Один вид на всё: обучение первого входа
   (cab/tour.js), подсказки разделов кабинета и /chat, тур по сайту.
   Поверх страницы, но под шторками и уведомлениями: шторка входа или оплаты
   открывается над подсказками. Карточка всегда светлая — и в тёмной теме,
   как пузыри кота, поэтому цвета внутри неё свои, не из темы страницы. */
.tour{position:fixed;inset:0;z-index:98;pointer-events:none;font-family:var(--font);color:#0B0B0E}
.tour > *{pointer-events:auto}
/* шаги в мастере подключения — над его шторкой (cab/connect.js) */
.tour.over{z-index:101}
.tour.away{visibility:hidden}
.tour.away > *,.tour.bye,.tour.bye > *{pointer-events:none}
.tour .hidden{display:none !important}

/* тыкать можно только в вырез: сама вуаль ловит нажатия, вырез — нет (clip-path) */
.tour-veil{
  position:absolute;inset:0;
  background:rgba(8,10,14,.42);
  -webkit-backdrop-filter:blur(3px) saturate(.8);backdrop-filter:blur(3px) saturate(.8);
  animation:tour-in .25s ease-out;
}
.tour.lite .tour-veil{background:rgba(8,10,14,.6);-webkit-backdrop-filter:none;backdrop-filter:none}
/* подсказки раздела легче обучения: темнее не надо, человек и так видит, где он */
.tour.tips .tour-veil{background:rgba(8,10,14,.34)}
.tour.tips.lite .tour-veil{background:rgba(8,10,14,.5)}

/* обводка выреза: мягкий край и лаймовое свечение */
.tour-ring{
  position:absolute;left:0;top:0;pointer-events:none;
  box-shadow:0 0 0 2px #A8FB05,0 0 0 6px rgba(168,251,5,.28),0 0 26px 8px rgba(168,251,5,.35);
  animation:tour-pulse 1.6s ease-in-out infinite;
}
.tour.solo .tour-ring,.tour.solo .tour-tap{display:none}
.tour.moving .tour-ring{opacity:.6}
.tour-ring.boom{animation:tour-boom .45s ease-out,tour-pulse 1.6s ease-in-out .45s infinite}
@keyframes tour-pulse{
  0%,100%{box-shadow:0 0 0 2px #A8FB05,0 0 0 6px rgba(168,251,5,.28),0 0 26px 8px rgba(168,251,5,.3)}
  50%{box-shadow:0 0 0 2px #A8FB05,0 0 0 11px rgba(168,251,5,.12),0 0 34px 12px rgba(168,251,5,.45)}
}
@keyframes tour-boom{
  0%{box-shadow:0 0 0 2px #A8FB05,0 0 0 0 rgba(168,251,5,.7)}
  100%{box-shadow:0 0 0 2px #A8FB05,0 0 0 22px rgba(168,251,5,0)}
}

/* «жми сюда» над вырезом, стрелкой вниз */
.tour-tap{position:absolute;left:0;top:0;width:100px;display:none;justify-content:center;pointer-events:none}
.tour.tap .tour-tap{display:flex}
.tour-tap span{
  position:relative;padding:5px 10px 6px;border-radius:9px;background:#A8FB05;color:#0B0B0E;
  font-family:var(--pixel);font-weight:700;font-size:17px;line-height:1;white-space:nowrap;
  box-shadow:2px 2px 0 #0B0B0E;animation:tour-bob .9s steps(3) infinite alternate;
}
.tour-tap span::after{
  content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;
  border:6px solid transparent;border-bottom:0;border-top-color:#A8FB05;
}
.tour-tap.down span::after{bottom:auto;top:-6px;border-top:0;border-bottom:6px solid #A8FB05}
@keyframes tour-bob{to{transform:translateY(-5px)}}

/* карточка кота */
.tour-card{
  position:absolute;left:0;top:0;box-sizing:border-box;width:min(400px,calc(100vw - 24px));
  padding:10px 12px 12px;border-radius:20px;background:#fff;color:#0B0B0E;
  border:2px solid #0B0B0E;box-shadow:4px 4px 0 #A8FB05,0 18px 40px rgba(0,0,0,.28);
  transition:transform .28s cubic-bezier(.3,1.3,.5,1);
  animation:tour-up .3s ease-out;
}
.tour.moving .tour-card{transition:none}
/* подсказка ждёт, пока раздел дорисует цель, — прошлую реплику не держим на виду */
.tour.tips.moving .tour-card{visibility:hidden}
.tour-card.shake{animation:tour-shake .4s}
@keyframes tour-shake{20%{margin-left:-6px}40%{margin-left:6px}60%{margin-left:-3px}80%{margin-left:3px}}

.tour-head{display:flex;align-items:center;gap:8px;min-height:22px}
.tour-n{font-size:12px;font-weight:700;color:#5E6166}
.tour-off{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 8px;
  border:0;border-radius:8px;background:none;color:#5E6166;font:600 12px/1 var(--font);cursor:pointer;
}
.tour-off i{font-style:normal;font-size:18px;line-height:1;width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#F3F5F4;color:#0B0B0E}
.tour-off:hover{color:#0B0B0E}

.tour-main{display:flex;align-items:flex-end;gap:10px;margin-top:2px}
.tour.tips .tour-main{margin-top:0}
.tour-cat{flex:none;width:78px;margin:-4px 0 -4px -4px}
.tour-cat.hop{animation:tour-hop .45s steps(4)}
@keyframes tour-hop{40%{transform:translateY(-8px)}}
/* кот из тех же кадров, что в кабинете; своя анимация кадров — на сайте app.css нет */
.tour-cat .cat{position:relative;display:block}
.tour-cat .cat img{display:block;width:100%;image-rendering:pixelated}
.tour-cat .cat.two img{animation:tour-fa var(--cat-t,2.4s) steps(1) infinite}
.tour-cat .cat.two img + img{position:absolute;inset:0;opacity:0;animation-name:tour-fb}
.tour-cat .cat.fast{--cat-t:.8s}
.tour-cat .cat.fast img{animation-name:tour-fa2}
.tour-cat .cat.fast img + img{animation-name:tour-fb2}
@keyframes tour-fa{0%,70%{opacity:1}71%,100%{opacity:0}}
@keyframes tour-fb{0%,70%{opacity:0}71%,100%{opacity:1}}
@keyframes tour-fa2{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes tour-fb2{0%,49%{opacity:0}50%,100%{opacity:1}}
.tour-body{flex:1;min-width:0;padding-bottom:4px}
.tour-t{display:block;margin:0 0 2px;font:800 15px/1.2 var(--font);color:#0B0B0E}
.tour-t[hidden]{display:none}
.tour-say{
  min-height:3.2em;margin:0;
  font-family:var(--pixel);font-weight:700;font-size:20px;line-height:1.08;color:#0B0B0E;cursor:default;overflow-wrap:anywhere;
}
.tour.tips .tour-say{min-height:0}
/* ещё не напечатанный текст занимает своё место, но не виден: карточка не прыгает */
.tour-ghost{visibility:hidden}
.tour-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tour-extra{display:flex;flex-wrap:wrap;gap:6px}
.tour-extra:not(:empty){margin-top:8px}
.tour-extra .btn{height:34px;padding:0 12px}
.tour-extra .btn .i{width:16px;height:16px}

/* ждём трафик: три точки */
.tour-wait{display:inline-flex;gap:5px;align-items:center;height:34px;padding:0 4px}
.tour-wait i{width:7px;height:7px;background:#7ED100;animation:tour-dot 1.2s steps(2) infinite}
.tour-wait i:nth-child(2){animation-delay:.2s}
.tour-wait i:nth-child(3){animation-delay:.4s}
@keyframes tour-dot{50%{opacity:.2}}

.tour-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
.tour-skip{height:36px;padding:0 6px;border:0;border-radius:10px;background:none;color:#5E6166;font:600 13.5px/1 var(--font);cursor:pointer}
.tour-skip:hover{color:#0B0B0E}
.tour-dots{flex:1;display:flex;justify-content:center;gap:5px}
.tour-dots i{width:7px;height:7px;background:#E7E8E6}
.tour-dots i.was{background:#7ED100}
.tour-dots i.on{width:16px;background:#0B0B0E}
.tour-next{
  min-width:96px;height:38px;margin-left:auto;padding:0 16px;border:2px solid #0B0B0E;border-radius:12px;
  background:linear-gradient(180deg,#C8FF3C 0%,#A4F700 100%);color:#0B0B0E;
  font:800 14px/1 var(--font);cursor:pointer;box-shadow:2px 2px 0 #0B0B0E;
}
.tour-next:hover{filter:brightness(1.04)}
.tour-next:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #0B0B0E}
.tour-next:focus-visible,.tour-skip:focus-visible,.tour-off:focus-visible{outline:3px solid #7ED100;outline-offset:2px}
@media (pointer:coarse){.tour-next,.tour-skip{height:44px}}

/* конфетти — квадратиками, как пиксели кота */
.tour-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tour-fx i{position:absolute;display:block;box-shadow:1px 1px 0 rgba(0,0,0,.25)}

.tour.bye{opacity:0;transition:opacity .25s}

@keyframes tour-in{from{opacity:0}}
@keyframes tour-up{from{opacity:0;margin-top:14px}}

/* узкий телефон: всё компактнее, чтобы карточка не съедала полэкрана */
@media (max-width:380px){
  .tour-card{padding:8px 10px 10px}
  .tour-cat{width:62px}
  .tour-say{font-size:18px}
  .tour-off{font-size:11.5px}
  .tour-next{min-width:84px}
}
/* на ПК кот сидит на краю карточки, а не внутри */
@media (min-width:700px){
  .tour-card{width:380px}
  .tour-cat{width:96px;margin-top:-46px}
}

/* пока идёт обучение, реплики кабинета не отвлекают; кот без команд — прячется */
.tour-on .say-live,.tour-nowalk .cw-layer{visibility:hidden !important}

/* тёмная тема Telegram: карточка остаётся светлой, вуаль — темнее */
.tg-dark .tour-veil{background:rgba(0,0,0,.5)}
.tg-dark .tour-card .btn-ghost{background:#fff;color:#0B0B0E;border-color:#E7E8E6}

@media (prefers-reduced-motion: reduce){
  .tour-ring,.tour-tap span,.tour-wait i,.tour-veil,.tour-card,.tour-cat.hop{animation:none}
  .tour-card{transition:none}
  .tour-cat .cat.two img{animation:none}
  .tour-cat .cat.two img + img{display:none}
}
.tour.still .tour-ring,.tour.still .tour-tap span{animation:none}

/* уведомления кабинета не ложатся на карточку кота: она в нижней половине —
   они наверху (класс ставит движок, js/guide.js) */
.tour-on.tour-card-low .toast{top:calc(14px + env(safe-area-inset-top));bottom:auto}
/* короткая карточка гостю: один шаг, закрывается только «Потом» */
.tour.brief .tour-head{display:none}
.tour.brief .tour-dots,.tour.brief .tour-skip{visibility:hidden}
.tour.brief .tour-extra .btn{height:44px;padding:0 14px}

/* ---------- «?» в шапке: подсказки этого раздела ---------- */
.top-help{
  flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;margin-left:-2px;
  border:1px solid var(--line,#E7E8E6);border-radius:50%;background:var(--surface,#fff);color:var(--gray,#5E6166);cursor:pointer;
  position:relative;transition:color .15s,border-color .15s,background .15s;
}
/* палец больше значка: поле нажатия — 44 px, сам кружок остаётся маленьким */
.top-help::before{content:"";position:absolute;inset:-7px}
.top-help:hover{color:var(--ink,#0B0B0E);border-color:#7ED100}
.top-help:active{transform:scale(.94)}
.top-help .i,.top-help svg{width:18px;height:18px}
.tg-dark .top-help{background:var(--tg-section,#1f2126);border-color:var(--line);color:var(--gray)}
/* кабинет: «?» сразу за названием раздела, дальше всё, как было, — прижато вправо */
.top-help + .top-bell,.top-help + .top-sup{margin-left:auto}
.top-help + .chip-bal{margin-left:auto}
/* /chat: в правой части шапки, рядом с балансом */
.top-r .top-help{margin-left:0;width:34px;height:34px}
/* сайт: за логотипом, размером со звук; меню дальше встаёт на то же место, что без «?» */
.site-header .top-help{width:calc(28 * var(--u,1px));height:calc(28 * var(--u,1px));min-width:30px;min-height:30px;margin:0 0 0 calc(12 * var(--u,1px));background:#fff}
.site-header .top-help svg{width:calc(16 * var(--u,1px));height:calc(16 * var(--u,1px));min-width:16px;min-height:16px}
.site-header .top-help:hover{border-color:var(--ink,#0B0B0E);color:var(--ink,#0B0B0E)}
.site-header .top-help + .nav{margin-left:calc(10 * var(--u,1px))}
/* сайт: короткое сообщение внизу — у кабинета своё (.toast) */
.tour-toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:99;transform:translateX(-50%);
  max-width:calc(100vw - 32px);padding:10px 16px;border-radius:14px;background:#0B0B0E;color:#fff;
  font:600 14px/1.3 var(--font);box-shadow:0 10px 30px rgba(0,0,0,.25);animation:tour-up .25s ease-out;
}

/* ---------- сайт: кот один раз предлагает показать, что где ---------- */
.tour-offer{
  position:fixed;z-index:60;right:16px;top:74px;box-sizing:border-box;width:min(300px,calc(100vw - 32px));
  display:flex;gap:10px;align-items:flex-end;padding:10px 12px;border-radius:18px;background:#fff;color:#0B0B0E;
  border:2px solid #0B0B0E;box-shadow:4px 4px 0 #A8FB05,0 14px 30px rgba(0,0,0,.18);font-family:var(--font);
  animation:tour-up .3s ease-out;
}
.tour-offer .tour-cat{width:58px;margin:-4px 0 -4px -2px}
.tour-offer p{margin:0 0 8px;font:700 14px/1.3 var(--font)}
.tour-offer .tour-next{min-width:0;height:34px;margin:0;padding:0 12px}
.tour-offer .tour-skip{height:34px}
.tour-offer-go{display:flex;align-items:center;gap:6px}
@media (max-width:599px){.tour-offer{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));right:16px}}
@media (prefers-reduced-motion: reduce){.tour-offer{animation:none}}