/* 伙伴悬浮球 + Live2D 容器样式 */

/* ── 悬浮球 ── */
#pet-float {
  position: fixed; z-index: 9997;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #ff9a56, #ff6b9d);
  box-shadow: 0 4px 18px rgba(255, 107, 157, 0.35);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s, right 0.5s, top 0.5s;
  user-select: none; -webkit-user-select: none;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 0;
  transform: translateX(55%);  /* 露出一半 */
}
#pet-float:hover { transform: translateX(0); }
#pet-float.full { transform: translateX(0); }
#pet-float.hidden { display: none; }
#pet-float .pet-float-face {
  width: 78%; height: 78%; border-radius: 50%; object-fit: cover;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
#pet-float .pet-float-badge {
  position: absolute; top: -4px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #e74c3c; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── Live2D 展开容器 ── */
#pet-live2d {
  position: fixed; z-index: 9996;
  transition: opacity 0.3s, transform 0.3s;
}
#pet-live2d.hidden {
  opacity: 0; pointer-events: none;
}
#pet-live2d.drop {
  transition: top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Live2D canvas — override waifu.css when inside our container */
#pet-live2d #waifu {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  transition: none !important;
}
#pet-live2d #waifu.waifu-hidden {
  display: none;
}
#pet-live2d #live2d {
  width: 160px !important; height: 160px !important;
}
/* Hide CDN widget tips/tools — we use our own bubble + menu */
#pet-live2d #waifu-tips { display: none !important; }
#pet-live2d #waifu-tool { display: none !important; }
/* Hide CDN toggle button — we control visibility */
#waifu-toggle { display: none !important; }

/* 对话气泡 */
#pet-bubble {
  position: fixed;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.78); color: #fff; font-size: 12px;
  padding: 6px 12px; border-radius: 14px;
  max-width: 280px; white-space: normal;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
  z-index: 9999;
}
#pet-bubble.show { opacity: 1; }

/* ── 互动菜单 ── */
#pet-menu {
  position: fixed; z-index: 9998;
  background: rgba(255,255,255,0.95); border-radius: 16px;
  padding: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  display: none; gap: 6px; flex-wrap: wrap; width: 180px;
}
#pet-menu.show { display: flex; }
#pet-menu button {
  flex: 0 0 calc(50% - 3px); padding: 8px 4px; border: none;
  border-radius: 10px; background: #f5f5f5; cursor: pointer; font-size: 12px;
  transition: background 0.15s;
}
#pet-menu button:active { background: #ff6b9d; color: #fff; }

/* ── 浮动聊天窗 ── */
#pet-chat {
  position: fixed; z-index: 9999;
  bottom: 100px; right: 16px; width: 300px; max-height: 380px;
  background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  display: none; flex-direction: column; overflow: hidden;
}
#pet-chat.show { display: flex; }
.pet-chat-header {
  padding: 10px 14px; border-bottom: 1px solid #eee;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600;
}
.pet-chat-header button { border: none; background: none; cursor: pointer; font-size: 16px; color: #999; }
.pet-chat-messages {
  flex: 1; overflow-y: auto; padding: 10px; max-height: 260px;
  display: flex; flex-direction: column; gap: 8px;
}
.pet-chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.pet-chat-msg.bot { align-self: flex-start; background: #f0f0f0; }
.pet-chat-msg.user { align-self: flex-end; background: #ff6b9d; color: #fff; }
.pet-chat-input {
  padding: 8px 10px; border-top: 1px solid #eee; display: flex; gap: 6px;
}
.pet-chat-input input {
  flex: 1; padding: 8px 10px; border: 1px solid #e0e0e0; border-radius: 10px;
  font-size: 13px; outline: none;
}
.pet-chat-input button {
  padding: 8px 14px; border: none; border-radius: 10px;
  background: #ff6b9d; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}

/* ── 恢复按钮（宠物隐藏后显示）── */
#pet-restore {
  position: fixed; z-index: 9997;
  bottom: 100px; left: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px;
  transition: background 0.2s, transform 0.2s;
  user-select: none; -webkit-user-select: none;
  opacity: 0.5;
}
#pet-restore:hover { background: rgba(0,0,0,0.35); opacity: 1; transform: scale(1.1); }
#pet-restore span { pointer-events: none; }

/* ── 移动端适配 ── */
@media (max-width: 768px) {
  #pet-float { width: 42px; height: 42px; }
  #pet-float .pet-float-face { font-size: 22px; }
  #pet-live2d #live2d { width: 130px !important; height: 130px !important; }
  #pet-bubble { max-width: 240px; font-size: 11px; padding: 5px 10px; }
  #pet-chat { width: 260px; max-height: 320px; right: 8px; bottom: 80px; }
  #pet-menu { width: 160px; }
  #pet-menu button { font-size: 11px; }
  #pet-restore { bottom: 90px; left: 8px; width: 32px; height: 32px; font-size: 16px; }
}