/*!
 * CrossPet Protocol 样式——来访宠物 + toast
 * ---------------------------------------------------------------------------
 * 来访宠物比本站猫略大、有边框 + 名字标签 + 来源说明
 * 入场时从屏幕边缘滑入，离开时反向滑出
 * ========================================================================= */

.cp-visitor {
  position: fixed;
  z-index: 2147483643;
  pointer-events: none;
  width: 96px;
  height: 96px;
  opacity: 0;
  transition: opacity .8s ease, transform 1.5s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  will-change: transform, opacity;
}
.cp-visitor.cp-visitor-settled {
  opacity: 1;
}
.cp-visitor.cp-visitor-entering {
  opacity: 0;
}
.cp-visitor-body {
  width: 100%;
  height: 100%;
  display: block;
  animation: cp-visitor-idle 2.8s ease-in-out infinite;
}
.cp-visitor-body svg,
.cp-visitor-body img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 14px;
}
@keyframes cp-visitor-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.01); }
}

/* 来访宠物的名字标签 */
.cp-visitor-label {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 8px;
  background: rgba(250, 248, 245, 0.94);
  border: 1px solid rgba(200, 163, 94, 0.55);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font: 10.5px/1.3 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  white-space: nowrap;
  opacity: 0.85;
}
.cp-visitor-name {
  color: #1B3A2E;
  font-weight: 700;
}
.cp-visitor-from {
  color: rgba(60,60,60,0.6);
  font-size: 9px;
}

/* 互动反应动画 */
.cp-visitor.cp-visitor-react .cp-visitor-body {
  animation: cp-visitor-react 0.6s ease-in-out;
}
@keyframes cp-visitor-react {
  0%, 100% { transform: scale(1) rotate(0); }
  25%      { transform: scale(1.15) rotate(-5deg); }
  75%      { transform: scale(1.1) rotate(5deg); }
}

/* =========================================================================
 * §CrossPet toast（独立于 multiplayer 的 toast，避免冲突）
 * ======================================================================= */
.cp-toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 2147483647;
  pointer-events: none;
  max-width: 380px;
  padding: 9px 16px;
  font: 12.5px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1B3A2E;
  background: rgba(255, 248, 220, 0.94);
  border: 1px solid rgba(255, 200, 80, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.cp-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================================
 * §移动端适配
 * ======================================================================= */
@media (max-width: 600px) {
  .cp-visitor { width: 72px; height: 72px; }
  .cp-visitor-from { display: none; }
  .cp-toast { max-width: calc(100vw - 24px); font-size: 11.5px; bottom: 60px; }
}

/* =========================================================================
 * §prefers-reduced-motion
 * ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  .cp-visitor { transition: opacity .25s ease; }
  .cp-visitor-body { animation: none; }
  .cp-visitor.cp-visitor-react .cp-visitor-body { animation: none; }
}

/* =========================================================================
 * §暗色主题
 * ======================================================================= */
@media (prefers-color-scheme: dark) {
  .cp-visitor-label {
    background: rgba(28, 28, 28, 0.94);
    border-color: rgba(255, 200, 80, 0.4);
  }
  .cp-visitor-name { color: #FAF8F5; }
  .cp-visitor-from { color: rgba(220,220,220,0.55); }
  .cp-toast {
    color: #FAF8F5;
    background: rgba(28, 28, 28, 0.94);
    border-color: rgba(255, 200, 80, 0.4);
  }
}