/* ИИ-проводник (Q22) — плавающий виджет «живого кристалла». @Движок
   Токены берём из base.css (--gold, --ink, --line, --violet…) — согласовано с дизайн-системой.
   Всё уважает prefers-reduced-motion. Ничего не отправляет наружу, только /api/guide (свой сервер). */

:root {
  --guide-bg: #0e0b14;
  --guide-panel: #14101d;
  --guide-line: rgba(216, 181, 120, .22);
  --guide-gold: var(--gold, #d8b578);
  --guide-ink: var(--ink, #f3ecdd);
  --guide-muted: var(--muted, #9a917f);
  --guide-user: rgba(216, 181, 120, .12);
}

/* ── Лаунчер: светящийся кристалл в углу ── */
html #dsotGuideLauncher {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  width: 62px; height: 62px; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; background: radial-gradient(circle at 50% 40%, #1c1630, #0c0912 70%);
  box-shadow: 0 6px 26px rgba(0,0,0,.45), 0 0 0 1px var(--guide-line);
  display: grid; place-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
#dsotGuideLauncher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 32px rgba(0,0,0,.55), 0 0 22px rgba(216,181,120,.35); }
#dsotGuideLauncher svg { width: 40px; height: 40px; filter: drop-shadow(0 0 6px rgba(216,181,120,.55)); }

/* 🔴 26.08.2026 · КРУЖОК ПРОВОДНИКА СИДЕЛ НА КНОПКЕ ЗАКАЗА.
   Найдено приёмкой «человек, которому впервые показали площадку»: на телефоне лаунчер стоит
   в правом нижнем углу — ровно там, где на странице покупки и в конце страниц живут кнопки
   действия. Человек тянется нажать «Заказать» и попадает в проводника. Это денежная кнопка,
   и мы её физически закрывали собой.
   Во всём файле не было НИ ОДНОГО мобильного правила — лаунчер одного размера и в одном месте
   на телефоне и на широком экране.
   Лечим не переносом в другой угол (там тоже что-то есть), а тремя вещами сразу:
   ① на узком экране кружок меньше и сдвинут выше — над зоной, где живут кнопки;
   ② он пропускает касание сквозь себя за пределами самого круга (квадрат 62×62 ловил нажатия
      по углам, где визуально пусто);
   ③ на печати и при экономии движения не мешает.
   Сторож в guide.js, который прячет ПУЗЫРЬ с кнопок, остаётся: он про подсказку, а это про сам круг. */
/* 🔴 28.08 — СЕЛЕКТОР УСИЛЕН ДО `html #dsotGuideLauncher`, И ЭТО НЕ КОСМЕТИКА.
   Правило bottom 84 существует с 26.08 ради денежной кнопки: в правом нижнем углу
   узкого экрана живут «Заказать» и липкая касса, и человек тянулся нажать их, а попадал
   в проводника. Но в base.css завёлся ДУБЛЬ `#dsotGuideLauncher{bottom:14px}` на ≤760px,
   вес у правил одинаковый, и побеждает подключённый позже — а порядок подключения на
   страницах РАЗНЫЙ. Замер живого прода 28.08, 375×812, при одинаковых файлах:
   buy.html — bottom 84, neuro.html — bottom 14. Одна кнопка, два положения.
   `html #` даёт вес 0,1,1 против 0,1,0 и выигрывает независимо от порядка подключения.
   Так положение кружка задаёт его собственный файл, чего бы ни написали в общем слое. */
@media (max-width: 640px) {
  html #dsotGuideLauncher {
    width: 52px; height: 52px;
    right: 12px; bottom: 84px;          /* выше полосы действий и липкой кассы */
  }
  #dsotGuideLauncher svg { width: 32px; height: 32px; }
}
/* Круг ловит касание только по кругу, а не по своему квадрату */
#dsotGuideLauncher { clip-path: circle(50% at 50% 50%); }
@media print { #dsotGuideLauncher, .guide-teaser { display: none !important; } }
#dsotGuideLauncher .guide-halo {
  position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,181,120,.28), transparent 62%);
  animation: guidePulse 3.2s ease-in-out infinite;
}
#dsotGuideLauncher .guide-dot {
  position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: #e06a4a; box-shadow: 0 0 0 2px var(--guide-bg); display: none;
}
#dsotGuideLauncher.has-news .guide-dot { display: block; }
@keyframes guidePulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* Фаза 3 — ЖИВОЙ ПЕРСОНАЖ ─────────────────────────────────────────────────────── */
/* живёт: кристалл мягко покачивается в углу (перебивается «говорит» и порталом) */
#dsotGuideLauncher svg { animation: guideFloat 4.5s ease-in-out infinite; }
@keyframes guideFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* появление из портала: материализуется с поворотом и вспышкой свечения */
#dsotGuideLauncher.portal-in { animation: guidePortalIn 1.6s cubic-bezier(.2,.8,.2,1.05); }
@keyframes guidePortalIn {
  0%   { transform: scale(0) rotate(-120deg); opacity: 0; box-shadow: 0 0 0 0 rgba(216,181,120,.9); }
  55%  { transform: scale(1.18) rotate(10deg); opacity: 1; box-shadow: 0 0 44px 10px rgba(216,181,120,.6); }
  100% { transform: scale(1) rotate(0); opacity: 1; box-shadow: 0 6px 26px rgba(0,0,0,.45), 0 0 0 1px var(--guide-line); }
}
/* «бегун» — кристалл, который летит к тому, о чём говорит проводник */
.guide-runner { position: fixed; left: 0; top: 0; width: 30px; height: 30px; z-index: 10000;
  pointer-events: none; display: none; will-change: transform, opacity;
  filter: drop-shadow(0 0 10px rgba(216,181,120,.85)); }
.guide-runner svg { width: 30px; height: 30px; }
/* подсветка цели, к которой прилетел кристалл (обводка + пульс), поверх стилей элемента */
.guide-highlight { animation: guideHi 1.2s ease-in-out infinite !important; border-radius: 8px !important; }
@keyframes guideHi {
  0%,100% { box-shadow: 0 0 0 2px rgba(216,181,120,.45), 0 0 12px rgba(216,181,120,.3); }
  50%     { box-shadow: 0 0 0 3px rgba(216,181,120,.95), 0 0 26px rgba(216,181,120,.7); }
}
/* проактивный зов — облачко у кристалла на первом визите */
.guide-teaser { position: fixed; right: 20px; bottom: 92px; z-index: 9997; max-width: 220px;
  background: var(--guide-panel); color: var(--guide-ink); border: 1px solid var(--guide-line);
  border-radius: 14px 14px 4px 14px; padding: 10px 13px;
  font-family: var(--ui, system-ui, sans-serif); font-size: 13px; line-height: 1.4;
  box-shadow: 0 8px 26px rgba(0,0,0,.5); cursor: pointer;
  opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease; }
.guide-teaser.show { opacity: 1; transform: none; pointer-events: auto;
  animation: guideTeaserBob 2.6s ease-in-out 1s infinite; }
@keyframes guideTeaserBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ── Панель диалога ── */
#dsotGuidePanel {
  position: fixed; right: 18px; bottom: 90px; z-index: 9999;
  width: min(380px, calc(100vw - 28px)); max-height: min(72vh, 640px);
  background: var(--guide-panel); color: var(--guide-ink);
  border: 1px solid var(--guide-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  display: none; flex-direction: column;
  font-family: var(--ui, system-ui, sans-serif);
  transform-origin: bottom right;
}
#dsotGuidePanel.open { display: flex; animation: guideIn .28s cubic-bezier(.2,.9,.3,1.1); }
@keyframes guideIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

.guide-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--guide-line); }
.guide-head svg { width: 30px; height: 30px; flex: 0 0 auto; filter: drop-shadow(0 0 5px rgba(216,181,120,.5)); }
.guide-head .guide-name { font-weight: 600; font-size: 15px; }
.guide-head .guide-sub { font-size: 11px; color: var(--guide-muted); }
.guide-head .guide-x { margin-left: auto; background: none; border: 0; color: var(--guide-muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; }
.guide-head .guide-x:hover { color: var(--guide-ink); }

.guide-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.guide-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.guide-msg.bot { align-self: flex-start; background: rgba(255,255,255,.04); border: 1px solid var(--guide-line); border-bottom-left-radius: 5px; }
.guide-msg.user { align-self: flex-end; background: var(--guide-user); border-bottom-right-radius: 5px; }
.guide-msg.typing { color: var(--guide-muted); font-style: italic; }

.guide-sources { align-self: flex-start; max-width: 92%; font-size: 12px; }
.guide-sources summary { cursor: pointer; color: var(--guide-muted); list-style: none; }
.guide-sources summary::-webkit-details-marker { display: none; }
.guide-sources summary::before { content: "📖 "; }
.guide-sources .guide-src { margin: 6px 0; padding: 7px 9px; border-left: 2px solid var(--guide-line); color: var(--guide-muted); }
.guide-src .guide-badge { font-size: 10px; }

/* Ф4 «мой путь» — прогресс-полоса этапов + награды вверху панели */
.guide-path-wrap { align-self: stretch; margin: -2px 0 8px; padding-bottom: 9px;
  border-bottom: 1px solid var(--guide-line); }
.guide-path-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.guide-path-title { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--guide-muted); }
.guide-path-count { font-size: 10.5px; font-weight: 600; color: var(--guide-gold);
  background: rgba(216,181,120,.12); border: 1px solid rgba(216,181,120,.28);
  border-radius: 999px; padding: 1px 8px; }
.guide-path { display: flex; flex-wrap: wrap; gap: 4px 5px; font-size: 11px; }
.guide-step { color: var(--guide-muted); white-space: nowrap; }
.guide-step.done { color: var(--guide-gold); }
.guide-step.cur { color: var(--guide-ink); font-weight: 600; }
.guide-step[style*="pointer"]:hover { color: var(--guide-ink); }
.guide-step:not(:last-child)::after { content: "›"; margin-left: 5px; color: var(--guide-line); }
.guide-intake-q { align-self: flex-start; font-size: 12.5px; color: var(--guide-muted); margin: 2px 0 -2px; }
.guide-intent { font-weight: 500; }
.guide-routes { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; }
.guide-route { border: 1px solid var(--guide-line); background: rgba(216,181,120,.06); color: var(--guide-gold);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; text-decoration: none; }
.guide-route:hover { background: rgba(216,181,120,.16); }
/* Атлас состояний — фиолетовый регистр, отличается от золотых маршрутов */
.guide-atlas-open { color: var(--violet, #b79cff); border-color: rgba(160,130,255,.34); background: rgba(160,130,255,.08); font-weight: 500; }
.guide-atlas-open:hover { background: rgba(160,130,255,.18); }
.guide-states { gap: 6px; }
.guide-state { color: var(--violet, #b79cff); border-color: rgba(160,130,255,.28); background: rgba(160,130,255,.06); }
.guide-state:hover { background: rgba(160,130,255,.16); }

.guide-foot { border-top: 1px solid var(--guide-line); padding: 10px; display: flex; gap: 8px; align-items: flex-end; }
.guide-foot textarea { flex: 1 1 auto; resize: none; max-height: 90px; min-height: 20px;
  background: rgba(0,0,0,.25); border: 1px solid var(--guide-line); border-radius: 12px;
  color: var(--guide-ink); padding: 9px 11px; font: inherit; font-size: 14px; outline: none; }
.guide-foot textarea:focus { border-color: rgba(216,181,120,.5); }
.guide-send { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--guide-gold); color: #201a10; font-size: 17px; display: grid; place-items: center; }
.guide-send:disabled { opacity: .4; cursor: default; }
.guide-voice { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--guide-line); border-radius: 50%;
  background: none; color: var(--guide-muted); cursor: pointer; font-size: 14px; transition: color .2s, border-color .2s; }
.guide-voice:hover { color: var(--guide-ink); }
.guide-voice.on { color: var(--guide-gold); border-color: rgba(216,181,120,.5); box-shadow: 0 0 10px rgba(216,181,120,.3); }
.guide-voice:disabled { opacity: .35; cursor: default; }

/* Фаза 2.4 — микрофон (голосовой ввод) */
.guide-mic { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--guide-line); border-radius: 50%;
  background: none; color: var(--guide-muted); cursor: pointer; font-size: 14px; transition: color .2s, border-color .2s; }
.guide-mic:hover { color: var(--guide-ink); }
.guide-mic.listening { color: #e06a4a; border-color: rgba(224,106,74,.7); animation: guideMic 1.1s ease-in-out infinite; }
@keyframes guideMic { 0% { box-shadow: 0 0 0 0 rgba(224,106,74,.55); } 100% { box-shadow: 0 0 0 8px rgba(224,106,74,0); } }

/* Фаза 2.1 — «говорит»: кристалл пульсирует свечением, пока звучит голос */
#dsotGuidePanel.speaking .guide-head svg,
#dsotGuideLauncher.speaking svg { animation: guideSpeak 1s ease-in-out infinite; }
@keyframes guideSpeak { 0%,100% { filter: drop-shadow(0 0 5px rgba(216,181,120,.5)); }
  50% { filter: drop-shadow(0 0 14px rgba(216,181,120,.95)); transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  #dsotGuideLauncher .guide-halo, #dsotGuidePanel.open { animation: none; }
  #dsotGuideLauncher, #dsotGuideLauncher:hover { transition: none; transform: none; }
  #dsotGuidePanel.speaking .guide-head svg, #dsotGuideLauncher.speaking svg { animation: none; }
  /* Фаза 3: без полёта и качания — только статичная подсветка цели */
  #dsotGuideLauncher svg, #dsotGuideLauncher.portal-in { animation: none; }
  .guide-runner { display: none !important; }
  .guide-highlight { animation: none !important;
    box-shadow: 0 0 0 2px rgba(216,181,120,.8), 0 0 18px rgba(216,181,120,.5) !important; }
  .guide-mic.listening { animation: none; }
  .guide-teaser.show { animation: none; }
}
/* светлая тема страницы (если body без тёмного фона) — панель остаётся тёмной, это ок для «ночного» бренда */