.tab-bar:has(.tab-pet) { box-shadow: none; border-top: 1px solid #f0e7d8; }
.tab-bar:has(.tab-pet) .tab-item { flex: 1; min-width: 0; padding-left: 2px; padding-right: 2px; }
.tab-bar .tab-pet { position: relative; overflow: visible; background: transparent; }
.tab-bar .tab-pet.active { background: transparent; color: var(--chocolate); }
.tab-pet .tab-icon { height: 28px; display: flex; align-items: end; }
.tab-pet .pet-companion-toggle { display: grid; place-items: center; box-sizing: border-box; width: 60px; height: 60px; padding: 2px; margin-bottom: 0; border: 3px solid #fffdf5; border-radius: 50%; background: #fff0bc; box-shadow: none; font-size: 28px; }
.tab-pet.active .pet-companion-toggle { background: #ffe49b; box-shadow: none; outline: 2px solid #e6c58a; }
.tab-pet[data-pet-health="sick"] .pet-companion-toggle { box-shadow: 0 0 0 2px #ba6950; }
.tab-pet[data-pet-health="sick"] .pet-companion-toggle::after { content: '!'; position: absolute; top: -24px; right: calc(50% - 30px); border-radius: 50%; width: 18px; height: 18px; background: #b54838; color: white; font-size: 12px; line-height: 18px; }
.tab-pet .pet-companion-toggle svg { position: static; display: block; width: 52px; height: 46px; transform: none; filter: none; pointer-events: none; }
.tab-pet .pet-body { transform-box: fill-box; transform-origin: center bottom; animation: pet-icon-breathe 3.8s ease-in-out infinite; }
.tab-pet .pet-head { transform-box: fill-box; transform-origin: center bottom; animation: pet-icon-look 11s ease-in-out infinite; }
.tab-pet .pet-eyes { transform-box: fill-box; transform-origin: center; animation: pet-icon-blink 6.2s linear infinite; }
.tab-pet .pet-tail { transform-box: fill-box; transform-origin: left center; animation: pet-icon-tail 3s ease-in-out infinite; }
.tab-pet .mg-pet-dog .pet-tail { animation-duration: 1.5s; }
.tab-pet:active svg *, .tab-pet.is-paused svg * { animation-play-state: paused !important; }
.tab-pet .pet-sleep-eyes, .tab-pet .pet-bow { display: none; }
.tab-pet [hidden] { display: none !important; }
.pet-companion-nudge { position: absolute; bottom: calc(100% + 30px); left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(230px, calc(100vw - 32px)); padding: 11px 14px; border: 1px solid #e4d4ba; border-radius: 18px; background: #fffdf5; color: #6b4f3d; box-shadow: 0 4px 16px #6b4f3d18; font-size: 13px; line-height: 1.6; font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.pet-companion-nudge::after { content: ''; position: absolute; top: 100%; left: calc(50% - 6px); border: 6px solid transparent; border-top-color: #e4d4ba; }
.tab-pet:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
@keyframes pet-icon-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018, 1.035); } }
@keyframes pet-icon-look { 0%,63%,86%,100% { transform: rotate(0); } 69%,77% { transform: rotate(-7deg); } 81% { transform: rotate(3deg); } }
@keyframes pet-icon-blink { 0%,39%,43%,74%,78%,100% { transform: scaleY(1); } 41%,76% { transform: scaleY(.08); } }
@keyframes pet-icon-tail { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) { .tab-pet *, .tab-pet *::before, .tab-pet *::after { animation: none !important; transition: none !important; } }

.tab-pet .pet-companion-toggle .pet-nav-avatar { width: 46px; height: 46px; }