/* 奶龙复用 Codex 的逐帧肢体动作，位移与图集姿态分别驱动。 */
.pet { position: fixed; right: calc(15px + env(safe-area-inset-right)); bottom: calc(15px + env(safe-area-inset-bottom)); z-index: 40; width: 88px; aspect-ratio: 192 / 208; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; transform: translateY(calc(-1 * var(--pet-avoid, 0px))); }
.pet-actor { position: absolute; inset: 0; display: block; pointer-events: none; will-change: transform; }
.pet-poster, .pet-sprite { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pet-poster { object-fit: contain; }
.pet-sprite { background-size: 800% 1100%; background-repeat: no-repeat; opacity: 0; }
.pet.ready .pet-sprite { opacity: 1; }
.pet.ready .pet-poster { visibility: hidden; }
.pet-shadow { position: absolute; width: 57%; height: 6%; left: 22%; bottom: 0; border-radius: 50%; background: #493a19; opacity: .17; filter: blur(3px); pointer-events: none; }
.pet-label { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -3px); border-radius: 7px; padding: 2px 8px; background: var(--surface); color: var(--muted); font-size: 11px; white-space: nowrap; opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
.pet:hover .pet-label, .pet:focus-visible .pet-label { opacity: 1; }
.pet.dragging { cursor: grabbing; }
.pet[data-letter-scene] { width: clamp(52px, 5.9vw, 84px); }
.pet[data-letter-scene] .pet-shadow { visibility: hidden; }
.pet-letter-occluder { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.pet-letter-occluder[hidden] { display: none; }
.pet-letter-occluder span { position: fixed; display: block; white-space: pre; padding: 0; margin: 0; border: 0; -webkit-background-clip: text; background-clip: text; pointer-events: none; }
.pet-rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pet-rig-front { position: fixed; z-index: 40; overflow: visible; pointer-events: none; }
.pet[data-articulated] .pet-actor { visibility: hidden; }
.monument [data-word] > span { translate: 0 var(--pet-letter-load, 0px); }
.pet:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 25px; }
.pet-tip { position: fixed; z-index: 66; width: max-content; max-width: calc(100vw - 24px); padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.6; box-shadow: 0 8px 30px -12px #14202c40; text-align: left; overflow-y: auto; overscroll-behavior: contain; animation: pet-tip-in 350ms ease both; }
.pet-tip-talk { display: block; width: 100%; padding: 14px 40px 12px 15px; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pet-tip-talk b { display: block; font-weight: 500; }
.pet-tip-talk span { display: block; margin-top: 6px; font-size: 12px; color: var(--accent); }
.pet-tip-close { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 13px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.pet-tip-close svg { width: 16px; height: 16px; }
.pet-tip-talk:hover { background: var(--raised); }
.pet-tip-close:hover { background: var(--active); color: var(--text); }
.pet-tip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pet-tip-choices { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 13px; }
.pet-tip-choices:empty { display: none; }
.pet-tip-choices button { min-height: 38px; padding: 7px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; background: var(--raised); color: var(--text); cursor: pointer; }
.pet-tip-choices button:hover { background: var(--accent-pale); }
.pet-tip[data-kind="checkin"] { background: var(--accent-pale); }
.pet-tip[data-kind="play"] .pet-tip-talk span { font-weight: 600; }
.pet-goal { position: fixed; z-index: 39; width: 20px; height: 8px; margin: -4px 0 0 -10px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; opacity: .65; animation: pet-goal-pulse 900ms ease-in-out infinite alternate; }
.pet-goal[hidden] { display: none; }
.pet-goal[data-arrived] { animation: pet-goal-arrive 600ms ease-out both; }
@keyframes pet-goal-pulse { to { transform: scale(1.25); opacity: .3; } }
@keyframes pet-goal-arrive { to { transform: scale(1.7); opacity: 0; } }
.pet-tip[hidden] { display: none; }
@keyframes pet-tip-in { from { opacity: 0; transform: translateY(5px); } }
.pet-chat { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(133px + env(safe-area-inset-bottom)); z-index: 70; display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100svh - 160px)); border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: 0 24px 65px -24px #14202c55; overflow: hidden; transform-origin: 90% 100%; transition: opacity 180ms ease, transform 300ms cubic-bezier(.2,.8,.2,1), visibility 0s 300ms; }
.pet-chat[data-compact="true"] .pc-quick, .pet-chat[data-compact="true"] .pc-note { display: none; }
.pet-chat[data-compact="true"] .pc-head { padding-top: 5px; padding-bottom: 5px; }
.pet-chat:not(.open) { opacity: 0; transform: translateY(10px) scale(.97); visibility: hidden; pointer-events: none; }
.pet-chat.open { transition-delay: 0s; }
.pc-head { display: flex; align-items: center; flex: none; gap: 10px; padding: 13px 14px 12px 16px; background: var(--raised); }
.pc-head img { width: 38px; height: 42px; object-fit: contain; }
.pc-head b { display: block; font-size: 16px; }
.pc-head small { color: var(--muted); font-size: 12px; }
.pc-head .icon-btn { margin-left: auto; min-width: 44px; min-height: 44px; }
.pc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scrollbar-width: thin; }
.pc-msg { flex: none; max-width: 86%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--raised); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; animation: pc-in 220ms ease both; }
.pc-msg.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--accent-ink, #fff); }
.pc-msg a { display: inline-block; margin: 4px 4px 0 0; padding: 3px 10px; border-radius: 999px; background: var(--accent-pale); color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; }
.pc-msg.err { background: var(--pill-warning-bg, #fbeee0); color: var(--pill-warning-ink, #8a4b10); }
@keyframes pc-in { from { opacity: 0; transform: translateY(5px); } }
.pc-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.pc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pc-dot 1.2s ease-in-out infinite; }
.pc-dots i:nth-child(2) { animation-delay: .15s; } .pc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pc-dot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }
.pc-quick { display: flex; flex: none; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; }
.pc-quick[hidden] { display: none; }
.pc-quick button { min-height: 38px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; transition: background-color 150ms ease; }
.pc-quick button:hover { background: var(--accent-pale); }
.pc-context { display: flex; align-items: center; flex: none; gap: 8px; margin: 0; padding: 0 16px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; cursor: pointer; }
.pc-context[hidden] { display: none; }
.pc-context input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accent); }
.pc-form { display: flex; flex: none; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.pc-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--ground); color: var(--text); font-size: 16px; }
.pc-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pc-form button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--primary); color: var(--primary-ink); cursor: pointer; display: grid; place-items: center; transition: transform 150ms ease; }
.pc-form button:active { transform: scale(.94); }
.pc-form button:disabled { opacity: .45; cursor: default; }
.pc-form svg { width: 18px; height: 18px; }
.pc-note { flex: none; margin: 0; padding: 0 16px calc(9px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 11px; text-align: center; }
@media (max-width: 680px) {
  .pet { width: 68px; right: calc(10px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pet-chat { left: 8px; right: 8px; bottom: calc(8px + var(--pet-keyboard, 0px)); width: auto; height: min(560px, 74svh, calc(var(--pet-viewport, 100svh) - 20px)); border-radius: 22px; }
  .pc-head { padding-top: 10px; padding-bottom: 10px; }
  .pet-tip-choices button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pet-actor { will-change: auto; }
  .pet-chat, .pet-label, .pc-form button, .pc-quick button { transition: none; }
  .pet-tip, .pc-msg, .pc-dots i, .pet-goal { animation: none; }
}

/* 头顶冒的话：一个小玻璃气泡，出现时轻轻弹出来 */
.pet { -webkit-touch-callout: none; }
.pet-say { position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 2; max-width: 180px; width: max-content; padding: 7px 12px; border-radius: 14px 14px 14px 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82)); color: #3b2f12; font-size: 13px; line-height: 1.4; font-weight: 600; white-space: normal; text-align: left;
  box-shadow: 0 8px 20px -10px rgba(60,40,0,.35), inset 0 1px 0 #fff, 0 0 0 .5px rgba(160,120,30,.25);
  opacity: 0; transform: translate(-30%, 6px) scale(.85); transform-origin: 20% 100%; pointer-events: none;
  transition: opacity 200ms ease, transform 360ms cubic-bezier(.3,1.5,.5,1); }
.pet.saying .pet-say { opacity: 1; transform: translate(-30%, 0) scale(1); }
:root[data-theme="dark"] .pet-say { background: linear-gradient(180deg, rgba(48,54,62,.96), rgba(36,41,48,.9)); color: #f6e7b8; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pet-say { background: linear-gradient(180deg, rgba(48,54,62,.96), rgba(36,41,48,.9)); color: #f6e7b8; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); } }
.pet:hover .pet-label, .pet.saying .pet-label { opacity: 0; }
/* 摸摸时冒出的爱心 */
.pet-heart { position: absolute; top: 10%; z-index: 3; color: var(--hc, #ff7aa2); font-size: 15px; font-style: normal; line-height: 1; pointer-events: none; text-shadow: 0 2px 6px rgba(255,120,150,.35); }
/* 打瞌睡：头顶飘 Zzz，身体慢慢起伏 */
.pet-zzz { position: absolute; right: 4%; top: 2%; z-index: 2; display: none; pointer-events: none; }
.pet-zzz i { position: absolute; right: 0; top: 0; color: #7d8fb0; font: italic 700 13px/1 Georgia, serif; opacity: 0; animation: pet-z 2.7s ease-in infinite; }
.pet-zzz i:nth-child(2) { animation-delay: .9s; font-size: 15px; }
.pet-zzz i:nth-child(3) { animation-delay: 1.8s; font-size: 18px; }
@keyframes pet-z { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(14px, -34px) rotate(10deg); opacity: 0; } }
.pet.asleep .pet-zzz { display: block; }
.pet.asleep .pet-sprite { animation: pet-doze 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pet-doze { 0%, 100% { scale: 1 1; } 50% { scale: 1.025 .975; } }
@media (prefers-reduced-motion: reduce) {
  .pet-say { transition: opacity 150ms ease; transform: translate(-30%, 0); }
  .pet-zzz i, .pet.asleep .pet-sprite { animation: none; }
  .pet.asleep .pet-zzz i:nth-child(3) { opacity: .8; }
}
/* 奶龙在屏幕右半边时，气泡朝左边展开，不会被屏幕边缘切掉 */
.pet.say-left .pet-say { left: auto; right: 35%; border-radius: 14px 14px 4px 14px; transform: translate(0, 6px) scale(.85); transform-origin: 90% 100%; }
.pet.say-left.saying .pet-say { transform: translate(0, 0) scale(1); }
@media (prefers-reduced-motion: reduce) { .pet.say-left .pet-say { transform: none; } }