/* =====================================================================
   GeekHuang Lab — homepage mini 小黄 (js/modules/mini-pet.js)
   Own pixel palette (same colours as lab/pet/pet.css); site palette and
   layout untouched. Sits in the bottom-right gutter; tucks to the edge
   when it would overlap content. z-index 45: below navbar (50),
   8-bit runner (70) and Command Palette (80).
   ===================================================================== */
.gh-mini {
  --mini-size: 40px;
  --pet-line:   #3B2A14;
  --pet-body:   #F4C542;
  --pet-hi:     #FFE48A;
  --pet-shade:  #D9A227;
  --pet-belly:  #FFF0B8;
  --pet-beak:   #F29A38;
  --pet-beak-d: #C9681C;
  --pet-eye:    #1A1D26;
  --pet-cheek:  #F59AA8;
  --pet-heart:  #F0648C;
  position: fixed;
  right: 4px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: var(--mini-size);
  height: var(--mini-size);
  pointer-events: none;
  transition: transform 260ms var(--ease), opacity 200ms linear;
}
[data-theme="dark"] .gh-mini { --pet-line: #1E1408; }
@media (max-width: 767px) { .gh-mini { --mini-size: 38px; right: 0; } }

.gh-mini__pet {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gh-mini__pet:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
.gh-mini__svg { width: 100%; height: 100%; display: block; overflow: visible; image-rendering: pixelated; animation: gh-mini-float 3.2s ease-in-out infinite; }

.gh-mini .px-line   { fill: var(--pet-line); }
.gh-mini .px-body   { fill: var(--pet-body); }
.gh-mini .px-hi     { fill: var(--pet-hi); }
.gh-mini .px-shade  { fill: var(--pet-shade); }
.gh-mini .px-belly  { fill: var(--pet-belly); }
.gh-mini .px-slot   { fill: var(--pet-shade); }
.gh-mini .px-beak   { fill: var(--pet-beak); }
.gh-mini .px-beak-d { fill: var(--pet-beak-d); }
.gh-mini .px-mouth  { fill: var(--pet-line); }
.gh-mini .px-tongue { fill: var(--pet-heart); }
.gh-mini .px-eye    { fill: var(--pet-eye); }
.gh-mini .px-glint  { fill: #FFFFFF; }
.gh-mini .px-cheek  { fill: var(--pet-cheek); opacity: 0.85; }
.gh-mini .px-heart  { fill: var(--pet-heart); }
.gh-mini .px-band   { fill: #F7F3EA; }
.gh-mini .px-band-d { fill: #D8CFC0; }
.gh-mini .px-led, .gh-mini .px-bled { fill: var(--ok); }
.gh-mini .px-led-glint { fill: #FFFFFF; opacity: 0.7; }
.gh-mini[data-mood="sick"] { --pet-body: #CFD28A; --pet-hi: #E6E8B4; --pet-shade: #A7AC5E; --pet-belly: #EEF0CC; }
.gh-mini[data-mood="sick"] .px-led { fill: var(--down); }
.gh-mini:is([data-mood="nervous"], [data-mood="hungry"], [data-mood="panting"]) .px-led { fill: var(--warn); }
.gh-mini[data-mood="loading"] .px-led { fill: var(--idle); }
.gh-mini.is-dozing .px-led { fill: var(--violet); opacity: 0.55; }

/* doze */
.gh-mini__zzz { position: absolute; right: -2px; top: -14px; display: none; font-family: var(--font-mono); font-weight: 700; color: var(--violet); pointer-events: none; }
.gh-mini__zzz i { font-style: normal; display: inline-block; font-size: 11px; animation: gh-mini-z 2.4s ease-in infinite; }
.gh-mini__zzz i + i { font-size: 9px; animation-delay: 1.2s; }
.gh-mini.is-dozing .gh-mini__zzz { display: block; }
.gh-mini.is-dozing .gh-mini__svg { animation: gh-mini-breathe 3.6s ease-in-out infinite; }

/* hop */
.gh-mini.is-hop .gh-mini__svg { animation: gh-mini-hop 0.55s var(--ease); }

/* tucked: slide to the edge so only a sliver peeks out (stays inside the page gutter) */
.gh-mini.is-tucked { transform: translateX(68%); opacity: 0.9; }
.gh-mini.is-tucked.is-peek-open, .gh-mini.is-tucked:focus-within { transform: none; opacity: 1; }
/* click-to-peek pops out instantly: sliding back from the edge used to drag the just-opened
   bubble ~1–5px past the right edge of a 390px screen for the first ~250 ms */
.gh-mini.is-tucked.is-peek-open { transition: none; }

/* hidden while overlays own the screen / the 8-bit runner is out */
body.cmd-open .gh-mini, body.nav-open .gh-mini { opacity: 0; visibility: hidden; }
body:has(#gh8-runner) .gh-mini { opacity: 0; visibility: hidden; }

/* bubble */
.gh-mini__bubble {
  position: absolute; right: 4px; bottom: calc(100% + 10px);
  width: max-content; max-width: min(240px, calc(100vw - 24px));
  padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
  font-size: 13px; line-height: 1.5; text-align: left;
  pointer-events: auto;
}
.gh-mini__bubble[hidden] { display: none; }
.gh-mini__bubble::after {
  content: ""; position: absolute; right: 14px; bottom: -6px; width: 10px; height: 10px;
  background: var(--surface); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  transform: rotate(45deg);
}
.gh-mini__text { display: block; color: var(--text-2); }
.gh-mini__link { display: inline-block; margin-top: 4px; color: var(--cyan); font-family: var(--font-mono); font-size: 12px; }
.gh-mini__link:hover { text-decoration: underline; text-underline-offset: 3px; }

@keyframes gh-mini-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes gh-mini-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, 0.96); } }
@keyframes gh-mini-hop     { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-30%); } 70% { transform: translateY(0) scale(1.08, 0.92); } }
@keyframes gh-mini-z       { 0% { transform: translate(0, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px, -8px); opacity: 0; } }

/* 8-bit mode: pixel bubble, stepped motion (css/8bit.css untouched) */
html.gh-8bit .gh-mini__bubble { border: 2px solid var(--text); box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--cyan) 42%, transparent); font-family: var(--gh8-font, monospace); }
html.gh-8bit .gh-mini__bubble::after { border-width: 2px; border-color: var(--text); }
html.gh-8bit .gh-mini__svg { animation-timing-function: steps(2, end); }
html.gh-8bit .gh-mini { transition-timing-function: steps(3, end); }

/* reduced motion */
.gh-mini.is-static, .gh-mini.is-static * { animation: none !important; transition: none !important; }
.gh-mini.is-static.is-dozing .gh-mini__zzz i { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gh-mini, .gh-mini * { animation: none !important; transition: none !important; }
  .gh-mini.is-dozing .gh-mini__zzz i { opacity: 1; }
}
@media print { .gh-mini { display: none; } }

/* v3: link + sound toggle row inside the bubble */
.gh-mini__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.gh-mini__row .gh-mini__link { margin-top: 0; }
.gh-mini__sound {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  height: 24px; padding: 0 8px; margin: 0;
  border: 1px dashed var(--line-2); border-radius: 999px;
  background: transparent; color: var(--text-3);
  font: inherit; font-family: var(--font-mono); font-size: 11px; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gh-mini__sound:hover { color: var(--text); }
.gh-mini__sound:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.gh-mini__spk { width: 12px; height: 10px; display: block; fill: currentColor; }
.gh-mini__sound[aria-pressed="true"] { color: var(--cyan); border-style: solid; border-color: color-mix(in srgb, var(--cyan) 55%, var(--line-2)); }
.gh-mini__sound[aria-pressed="true"] .gh-mini__spk-off,
.gh-mini__sound[aria-pressed="false"] .gh-mini__spk-on { display: none; }
html.gh-8bit .gh-mini__sound { border-radius: 0; border-width: 2px; font-family: var(--gh8-font, monospace); }