/* Онбординг «Мастерская»: корги над карточкой, пузырь-реплика. Всё внутри .km-ob — класс ставит js/onboarding-mascot.js */
.onboarding-overlay.km-ob {
  flex-direction: column;
  background: color-mix(in srgb, #F2922E 8%, var(--tg-theme-bg-color, #fff));
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.km-ob .onboarding-card { max-height: calc(100dvh - 32px - 96px); box-shadow: 0 18px 50px rgba(120, 72, 20, .16); }
.km-ob-hero { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: 420px;
  margin-bottom: -12px; padding-left: 12px; box-sizing: border-box; animation: kmObIn .45s .15s cubic-bezier(.2,.9,.3,1.2) both; }
.km-ob-dog { flex: none; width: 88px; }
.km-ob-dog[data-pose="paint"] { width: 118px; }
.km-ob-dog k-mascot { width: 100%; margin: 0; animation: kmObHop .18s ease-out; }
.km-ob-bubble { position: relative; flex: 1 1 auto; max-width: 290px; margin: 0 0 30px; padding: 10px 14px;
  background: #fff; color: #2B1B12; border: 2px solid #2B1B12; border-radius: 16px; box-shadow: 0 4px 14px rgba(43, 27, 18, .12);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; }
.km-ob-bubble::after { content: ""; position: absolute; left: -8px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: #fff; border-left: 2px solid #2B1B12; border-bottom: 2px solid #2B1B12; transform: rotate(45deg); }
.km-ob-bubble.km-pop { animation: kmObPop .16s ease-out; }
.km-ob-next { display: block; margin: 8px 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--tg-theme-button-color, #6366f1); color: var(--tg-theme-button-text-color, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.km-ob-next[hidden] { display: none; }
@keyframes kmObIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes kmObPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kmObHop { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }

/* Прогресс — короткие мазки */
.km-ob .onboarding-dot { height: 6px; border-radius: 3px 7px 3px 7px; }
.km-ob .onboarding-title:focus { outline: none; }
.km-ob-hint { margin: -12px 0 14px; text-align: center; font-size: 13px;
  color: color-mix(in srgb, var(--tg-theme-text-color, #000) 62%, var(--tg-theme-bg-color, #fff)); }

/* Карточки сегментов: линейные иконки, выбранная с рамкой и галочкой, остальные бледнеют на время реакции */
.km-ob .ob-segment { position: relative; }
.km-ob .ob-segment-icon { color: var(--tg-theme-button-color, #6366f1); }
.km-ob .ob-segment-desc, .km-ob .ob-explain-text p { color: color-mix(in srgb, var(--tg-theme-text-color, #000) 62%, var(--tg-theme-bg-color, #fff)); }
.km-ob .ob-segment.selected::after { content: "✓"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--tg-theme-button-color, #6366f1); font-weight: 800; font-size: 18px; }
.km-ob.km-react .ob-segment:not(.selected) { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* Чипы: цель от 44 px, без эмодзи */
.km-ob .ob-chip { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.km-ob .ob-explain-icon, .km-ob .ob-gift-icon { color: var(--tg-theme-button-color, #6366f1); }
.km-ob .ob-gift-icon { animation: none; }

@media (min-width: 600px) {
  .km-ob-dog { width: 112px; }
  .km-ob-dog[data-pose="paint"] { width: 150px; }
}
@media (max-height: 700px) {
  .km-ob-dog { width: 64px; }
  .km-ob-dog[data-pose="paint"] { width: 88px; }
  .km-ob-bubble { font-size: 14px; margin-bottom: 20px; }
  .km-ob .onboarding-card { max-height: calc(100dvh - 32px - 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .km-ob-hero, .km-ob-dog k-mascot, .km-ob-bubble.km-pop { animation: kmObFade .12s both; }
  @keyframes kmObFade { from { opacity: 0; } to { opacity: 1; } }
}