/*
 * noneAI — персонаж-спутник (09.10.2026). Персонаж и механика — page-mascot,
 * MIT © Kamran Ahmed (https://github.com/nilbuild/page-mascot); макет и
 * поведение — Claude Design, `.claude/dizayn-noneai-maskot/otvet/spec.md`.
 *
 * Два листа 3×3 по 160 px: взгляд и деловые реакции (`--reak`). Кадр
 * выбирается КЛАССОМ (`mascot--k0…k8`), а не style="…": CSP.
 *
 * Кадрирование по spec §7 — голова крупнее кнопки в 1,3 раза и сдвинута на
 * −15 %. В процентах, чтобы одна запись годилась любому размеру: лист = 3 ×
 * 1,3 = 390 % кадра; сдвиг колонки c = (1,3·c + 0,15) / 2,9 → 5,172 %, 50 %,
 * 94,828 %.
 */
.mascot {
  display: inline-block;
  flex: none;
  width: 56px;
  height: 56px;
  background-repeat: no-repeat;
  background-size: 390% 390%;
  background-position: 50% 50%;
  background-image: url("../../img/noneai/builder-directions.webp");
}
.mascot--reak { background-image: url("../../img/noneai/builder-reactions.webp"); }

.mascot--k0 { background-position: 5.172% 5.172%; }
.mascot--k1 { background-position: 50% 5.172%; }
.mascot--k2 { background-position: 94.828% 5.172%; }
.mascot--k3 { background-position: 5.172% 50%; }
.mascot--k4 { background-position: 50% 50%; }
.mascot--k5 { background-position: 94.828% 50%; }
.mascot--k6 { background-position: 5.172% 94.828%; }
.mascot--k7 { background-position: 50% 94.828%; }
.mascot--k8 { background-position: 94.828% 94.828%; }

.mascot--40 { width: 40px; height: 40px; border-radius: var(--radius); }
.mascot--36 { width: 36px; height: 36px; border-radius: var(--radius); }

/* Спутник — он же кнопка чата (spec §4): поверхность, граница, голова. */
html[data-layer="cabinet"] .chat-launcher.chat-launcher--maskot {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--radius);
  overflow: visible;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-2) var(--ease-out);
}
html[data-layer="cabinet"] .chat-launcher.chat-launcher--maskot:hover { background: var(--color-surface); }
html[data-layer="cabinet"] .chat-launcher.chat-launcher--maskot:active { transform: scale(.94); }
html[data-layer="cabinet"] .chat-launcher--maskot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
html[data-layer="cabinet"] .chat-launcher--maskot .mascot { border-radius: var(--radius); }
/* Счётчик — только от людей, справа сверху (spec §4). */
html[data-layer="cabinet"] .chat-launcher--maskot .btn-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-on-accent);
  border: 2px solid var(--color-bg-page);
  font: 600 12px/20px var(--font);
}
/* ✦ — всегда, слева снизу: дверь не только к людям, но и к noneAI. */
html[data-layer="cabinet"] .chat-launcher--maskot .maskot-zvezda {
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: 600 11px/20px var(--font);
  text-align: center;
}

html[data-layer="cabinet"] .chat-spisok__av.chat-spisok__av--maskot { background: var(--color-surface); border: 1px solid var(--color-line); overflow: hidden; }
html[data-layer="cabinet"] .chat-head__maskot { flex: none; border: 1px solid var(--color-line); background-color: var(--color-surface); }

/* Подсказка первого входа (spec §6) — над спутником, справа. */
html[data-layer="cabinet"] .maskot-podskazka {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: 280px;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-6);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-float);
  color: var(--color-text);
}
html[data-layer="cabinet"] .maskot-podskazka__zagolovok { font: 600 14px/20px var(--font); margin-bottom: var(--space-1); }
html[data-layer="cabinet"] .maskot-podskazka__tekst { font: 400 13px/18px var(--font); color: var(--color-text-2); }
html[data-layer="cabinet"] .maskot-podskazka__zakryt {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  border: 0;
  background: none;
  color: var(--color-text-3);
  font: 400 18px/1 var(--font);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html[data-layer="cabinet"] .chat-launcher.chat-launcher--maskot { transition: none; }
  html[data-layer="cabinet"] .chat-launcher.chat-launcher--maskot:active { transform: none; }
}