.wind-pet { --pet-color: #73859a; position: fixed; right: 22px; bottom: 20px; width: 94px; height: 134px; z-index: 45; color: #263e57; font-size: 11px; }
.wind-pet[data-tone=normal] { --pet-color: #2860ba; }
.wind-pet[data-tone=warning] { --pet-color: #aa741d; }
.wind-pet[data-tone=fault] { --pet-color: #bd4954; }
.pet-body { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; color: inherit; border-radius: 18px; }
.pet-body::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 2px 0 38px; border-radius: 50%; background: #fffdf7; border: 1px solid #d5dcd5; box-shadow: 0 3px 10px #213c432b; transition: box-shadow .2s, border-color .2s; }
.pet-body:hover::before, .wind-pet[data-dragging=true] .pet-body::before { border-color: #9aafa7; box-shadow: 0 4px 14px #213c4340, 0 0 0 2px #ffffffd9; }
.pet-body:focus-visible { outline: 2px dashed #8faac7; outline-offset: 3px; }
.pet-turbine { width: 94px; height: 94px; overflow: visible; filter: drop-shadow(0 1px 1px #ffffff) drop-shadow(0 2px 1px #203c4326); pointer-events: none; }
.pet-light { fill: var(--pet-color); }
.pet-character { transform-origin: 56px 103px; animation: pet-idle 4s ease-in-out infinite; }
.pet-nacelle { transform-origin: 57px 54px; }
.pet-rotor { transform-origin: 35px 48px; }
.pet-eyes { transform-origin: 61px 46px; animation: pet-blink 5.6s infinite; }
.pet-status { display: block; padding: 1px 6px; margin-bottom: 2px; border: 1px solid #d1ddd6; border-radius: 6px; color: #213c43; background: #fffdf7; box-shadow: 0 1px 3px #203c431a; font-size: 10px; line-height: 15px; white-space: nowrap; }
.wind-pet[data-tone=fault] .pet-status { background: #fff0f1; color: #a42634; border-color: #cc8790; }
.wind-pet[data-tone=warning] .pet-status { background: #fff4dc; color: #79500c; border-color: #c9a25b; }
.wind-pet[data-mood=sleepy] .pet-character, .wind-pet[data-mood=calm] .pet-character { animation-duration: 6s; }
.wind-pet[data-mood=focused] .pet-character { animation: pet-attentive 3s ease-in-out infinite; }
.wind-pet[data-mood=sad] .pet-character { animation: pet-sad 5s ease-in-out infinite; }
.wind-pet[data-mood=worried] .pet-character { animation: pet-attentive 2s ease-in-out infinite; }
.wind-pet[data-tone=fault] .pet-body::before { border-color: #c78089; background: #fff5f3; }
.pet-caption { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 112px; padding: 2px 6px; border: 1px solid #fff; border-radius: 8px; background: #213c43; color: #fff; box-shadow: 0 2px 5px #203c4326; font: 10px/1.5 var(--mono, Consolas, monospace); white-space: nowrap; pointer-events: none; }
.pet-caption i { width: 4px; height: 4px; background: var(--pet-color); border-radius: 50%; flex-shrink: 0; }
/* These animations respond to the pointer, never to a measured rotor speed. */
@media(hover:hover) {
  .pet-body:hover .pet-character { animation: pet-greet .7s ease-in-out infinite alternate; }
  .pet-body:hover .pet-rotor { animation: pet-spin 3.6s linear infinite; }
  .pet-body:hover .pet-eyes { animation: pet-blink 2.6s infinite; }
}
.wind-pet[data-dragging=true] .pet-body { cursor: grabbing; }
.wind-pet[data-dragging=true] .pet-character { animation: none; transform: translateY(-4px) rotate(-7deg); }
.wind-pet[data-dragging=true] .pet-shadow { opacity: .07; }
.wind-pet[data-dragging=true] .pet-rotor { animation: pet-spin 2.8s linear infinite; }
.pet-details { position: absolute; bottom: calc(100% + 7px); width: 208px; padding: 11px 12px 8px; background: #213c43; color: #fffaf0; border: 1px solid #fff; border-radius: 11px; box-shadow: 0 6px 20px #152e4938; cursor: default; }
.pet-details::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.wind-pet[data-bubble-side=below] .pet-details { bottom: auto; top: calc(100% + 7px); }
.wind-pet[data-bubble-side=below] .pet-details::after { top: auto; bottom: 100%; }
.pet-heading { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pet-state { font-size: 11px; font-weight: 600; color: #e8f5ed; }
.wind-pet[data-tone=warning] .pet-state { color: #ffdb91; }
.wind-pet[data-tone=fault] .pet-state { color: #ffb8be; }
.pet-source { font-size: 10px; color: #d0deda; }
.pet-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 9px 0 7px; }
.pet-readings span { display: block; font-size: 10px; color: #d0deda; }
.pet-readings strong { display: block; font: 19px/1.5 var(--mono, Consolas, monospace); }
.pet-foot { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #4b666b; padding-top: 6px; font-size: 10px; }
.pet-age { color: #d0deda; }
.pet-link { color: #ffdb91; }
.pet-link:focus-visible { outline-color: #ffdb91; }
.pet-hint { font-size: 9px; color: #bdcfca; margin: 5px 0 0; }
.pet-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.menu-open .wind-pet { visibility: hidden; }
@keyframes pet-greet { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4px) rotate(3deg); } }
@keyframes pet-spin { to { transform: rotate(360deg); } }
@keyframes pet-blink { 0%,42%,50%,100% { transform: scaleY(1); } 46% { transform: scaleY(.15); } }
@keyframes pet-idle { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2px) rotate(1deg); } }
@keyframes pet-attentive { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-1px); } }
@keyframes pet-sad { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(-1deg) translateY(1px); } }
.pet-alert { position: fixed; z-index: 65; top: 74px; right: 18px; width: min(320px,calc(100vw - 24px)); border: 1px solid #c98089; border-left: 4px solid #ad3544; border-radius: 10px; background: #fff6f5; box-shadow: 0 8px 28px #263e5729; padding: 13px 15px; color: #6c2530; }
.pet-alert[data-tone=warning] { background: #fff8e9; border-color: #c29c50; color: #71500d; }
.pet-alert[data-tone=stale] { background: #f4f6f8; border-color: #97a5b5; color: #485c72; }
.pet-alert-title { font-size: 13px; }
.pet-alert-detail { font-size: 11px; line-height: 1.8; margin: 6px 0 10px; }
.pet-alert-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; }
.pet-alert-actions a { text-decoration: underline; text-underline-offset: 3px; }
.pet-alert-actions button { border: 1px solid currentColor; border-radius: 5px; padding: 4px 11px; color: inherit; background: transparent; }
.demo-scenario-label { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 10px; }
.demo-scenario-label select { max-width: 130px; padding: 3px; }
@media(max-width:720px) { .wind-pet { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 80px; height: 120px; } .pet-turbine { width: 80px; height: 80px; } .pet-alert { top: 64px; right: 12px; } }
@media(prefers-reduced-motion:reduce) { .wind-pet *, .wind-pet *::after { animation: none !important; transition: none !important; } }