/* Ненавязчивый талисман CRM. Он не участвует в раскладке и не принимает клики. */
#cat-companion {
  --cat-start: 272px;
  position: fixed;
  left: var(--cat-start);
  bottom: var(--space-2, 8px);
  z-index: 1;
  width: 142px;
  height: 120px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

#cat-companion.is-visible {
  opacity: 1;
}

#cat-companion.is-walking {
  animation: cat-companion-cross 18s linear forwards;
}

.cat-companion-setting {
  max-width: 520px;
  margin-top: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: var(--surface-primary, #fff);
  border: 1px solid var(--border-subtle, #eee5ea);
  border-radius: var(--radius-md, 14px);
}

.cat-companion-setting .online-toggle {
  justify-content: space-between;
  width: 100%;
}

.cat-companion-setting small {
  display: block;
  margin-top: var(--space-1, 4px);
  color: var(--text-secondary, #6e646a);
  font-weight: 400;
}

.cat-companion-sprite {
  width: 100%;
  height: 100%;
  background-image: url('/assets/cat-sprite.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 300% 200%;
  mix-blend-mode: multiply;
}

#cat-companion[data-pose='sit'] .cat-companion-sprite { background-position: 50% 0; }
#cat-companion[data-pose='stretch'] .cat-companion-sprite { background-position: 100% 0; }
#cat-companion[data-pose='lie'] .cat-companion-sprite { background-position: 0 100%; }
#cat-companion[data-pose='wave'] .cat-companion-sprite { background-position: 50% 100%; }

@keyframes cat-companion-cross {
  from { transform: translateX(-172px); }
  to { transform: translateX(calc(100vw - var(--cat-start) + 24px)); }
}

/* Журнал и все диалоги всегда выше: котик не проходит по сетке и карточкам. */
body:has(#journal.view.active) #cat-companion,
body:has(dialog[open]) #cat-companion {
  display: none;
}

@media (max-width: 760px) {
  #cat-companion { --cat-start: 8px; width: 106px; height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  #cat-companion {
    width: 76px;
    height: 64px;
    right: var(--space-4, 16px);
    left: auto;
    bottom: var(--space-4, 16px);
    opacity: .72;
  }

  #cat-companion.is-walking { animation: none; }
}