.companion-pet {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 1080;
    width: 120px;
    min-height: 132px;
    pointer-events: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
}

/* 侧栏打开时（body.mobile-no-scroll）：伴随层必须低于 .side-panel(1001)，
   否则拖到侧栏上或默认贴右下会挡住灵宠游历选路线/时长等操作。 */
body.mobile-no-scroll .companion-pet {
    z-index: 900;
    pointer-events: none;
}
body.mobile-no-scroll .companion-pet .companion-pet__sprite,
body.mobile-no-scroll .companion-pet .companion-pet__plate {
    pointer-events: none;
}

.companion-pet--hidden {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    pointer-events: none;
}

.companion-pet__sprite,
.companion-pet__plate {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}

.companion-pet--dragging {
    transition: opacity 180ms ease;
}

.companion-pet--dragging .companion-pet__sprite,
.companion-pet--dragging .companion-pet__plate {
    cursor: grabbing;
}

.companion-pet__aura {
    position: absolute;
    bottom: 28px;
    width: 82px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--accent-jade) 28%, transparent), color-mix(in srgb, var(--accent-jade) 0%, transparent));
    filter: blur(2px);
}

.companion-pet__sprite {
    position: relative;
    width: 104px;
    height: 104px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 8px 12px var(--shadow-black-1));
    transform-origin: 50% 88%;
    animation: companionIdle 2.8s ease-in-out infinite;
}

.companion-pet__plate {
    position: relative;
    max-width: 118px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 6px;
    padding: 5px 8px;
    border: 1px solid rgba(108, 211, 195, 0.34);
    border-radius: 8px;
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 84%, transparent);
    box-shadow: 0 8px 22px var(--shadow-black-2);
    color: var(--text-primary);
    backdrop-filter: blur(8px);
}

.companion-pet__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.companion-pet__status {
    font-size: 11px;
    color: var(--accent-cyan);
}

.companion-pet__hp {
    grid-column: 1 / -1;
    font-size: 10px;
    color: var(--accent-jade);
}

.companion-pet__hp--low {
    color: var(--text-danger);
}

.companion-pet[data-state="meditating"] .companion-pet__sprite {
    animation: companionMeditate 3.2s ease-in-out infinite;
}

.companion-pet[data-state="meditating"] .companion-pet__aura {
    animation: companionAura 2.4s ease-in-out infinite;
}

.companion-pet[data-state="exploring"] .companion-pet__sprite {
    animation: companionTravelShort 0.9s ease-in-out infinite;
}

.companion-pet[data-state="exploring"] .companion-pet__aura {
    animation: companionTravelShort 0.9s ease-in-out infinite;
}

.companion-pet[data-state="auto_exploring"] .companion-pet__sprite {
    animation: companionTravelLoop 1.6s linear infinite;
}

.companion-pet[data-state="auto_exploring"] .companion-pet__aura {
    animation: companionTravelLoop 1.6s linear infinite;
}

.companion-pet[data-state="nervous"] {
    animation: companionReadyStep 1.1s ease-in-out infinite;
}

.companion-pet[data-state="merchant"] {
    animation: companionInspect 1.35s ease-in-out infinite;
}

.companion-pet[data-state="merchant"] .companion-pet__aura {
    background: radial-gradient(ellipse, color-mix(in srgb, var(--craft-gold) 32%, transparent), color-mix(in srgb, var(--craft-gold) 0%, transparent));
}

.companion-pet[data-state="adventure"] {
    animation: companionAscend 1.8s ease-in-out infinite;
}

.companion-pet[data-state="adventure"] .companion-pet__aura {
    animation: companionAura 1.6s ease-in-out infinite;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--ghost-purple) 34%, transparent), color-mix(in srgb, var(--ghost-purple) 0%, transparent));
}

.companion-pet[data-state="protector"],
.companion-pet[data-state="wounded"] {
    animation: companionShieldStep 1.4s ease-in-out infinite;
}

.companion-pet[data-state="wounded"] .companion-pet__plate {
    border-color: color-mix(in srgb, var(--danger-color) 50%, transparent);
}

.companion-pet[data-state="fallen"] {
    animation: companionSoulGuard 3.2s ease-in-out infinite;
}

.companion-pet[data-state="fallen"] .companion-pet__sprite {
    filter: drop-shadow(0 8px 12px var(--shadow-black-1)) saturate(0.68);
}

.companion-pet[data-state="stealth"] {
    animation: companionStealthGlide 2.4s ease-in-out infinite;
}

.companion-pet[data-state="stealth"] .companion-pet__sprite {
    animation: companionFadeStep 2.4s ease-in-out infinite;
}

.companion-pet[data-state="notorious"] {
    animation: companionScanStep 1.7s ease-in-out infinite;
}

.companion-pet[data-state="notorious"] .companion-pet__aura {
    background: radial-gradient(ellipse, color-mix(in srgb, var(--danger-color) 30%, transparent), color-mix(in srgb, var(--danger-color) 0%, transparent));
}

.companion-pet[data-state="origin_damage"] {
    animation: companionOriginDrift 2.6s ease-in-out infinite;
}

.companion-pet[data-state="origin_damage"] .companion-pet__sprite {
    filter: drop-shadow(0 8px 12px var(--shadow-black-1)) saturate(0.74) contrast(0.94);
}

.companion-pet[data-state="dungeon"] {
    animation: companionDungeonAdvance 1.8s ease-in-out infinite;
}

.companion-pet[data-state="dungeon"] .companion-pet__aura {
    background: radial-gradient(ellipse, color-mix(in srgb, var(--accent-blue) 32%, transparent), color-mix(in srgb, var(--accent-blue) 0%, transparent));
}

.companion-pet[data-state="dungeon_result"] {
    animation: companionResultHop 1.45s cubic-bezier(0.25, 0.8, 0.3, 1) infinite;
}

.companion-pet[data-state="dungeon_result"] .companion-pet__aura {
    background: radial-gradient(ellipse, color-mix(in srgb, var(--craft-gold-bright) 35%, transparent), color-mix(in srgb, var(--craft-gold-bright) 0%, transparent));
}

.companion-pet[data-state="nurture"] {
    animation: companionNurtureRise 2.2s ease-in-out infinite;
}

.companion-pet[data-state="nurture"] .companion-pet__aura {
    animation: companionAura 1.4s ease-in-out infinite;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--success-color) 34%, transparent), color-mix(in srgb, var(--success-color) 0%, transparent));
}

.companion-pet[data-state="fighting"] .companion-pet__sprite {
    animation: companionFight 0.55s ease-in-out infinite;
}

.companion-pet[data-state="injured"] .companion-pet__sprite {
    animation: companionInjured 2.4s ease-in-out infinite;
    filter: drop-shadow(0 8px 12px var(--shadow-black-1)) saturate(0.78);
}

@keyframes companionIdle {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.015); }
}

@keyframes companionMeditate {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.02); }
}

@keyframes companionAura {
    0%, 100% { opacity: 0.55; transform: scaleX(0.92); }
    50% { opacity: 1; transform: scaleX(1.12); }
}

@keyframes companionTravelShort {
    0% { transform: translateX(-8px) translateY(0); }
    45% { transform: translateX(8px) translateY(-4px); }
    100% { transform: translateX(-8px) translateY(0); }
}

@keyframes companionTravelLoop {
    0% { transform: translateX(-18px) translateY(0); }
    45% { transform: translateX(18px) translateY(-5px); }
    50% { transform: translateX(18px) translateY(-5px) scaleX(-1); }
    95% { transform: translateX(-18px) translateY(0) scaleX(-1); }
    100% { transform: translateX(-18px) translateY(0); }
}

@keyframes companionReadyStep {
    0%, 100% { transform: translateX(0) translateY(0); }
    55% { transform: translateX(-8px) translateY(-2px); }
}

@keyframes companionInspect {
    0%, 100% { transform: translateX(0) translateY(0) scale(1); }
    45% { transform: translateX(-12px) translateY(5px) scale(0.96); }
    72% { transform: translateX(-4px) translateY(0) scale(1.02); }
}

@keyframes companionAscend {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-16px) scale(1.04); }
    75% { transform: translateY(-8px) scale(1.01); }
}

@keyframes companionShieldStep {
    0%, 100% { transform: translateX(0) translateY(0) scale(1); }
    38% { transform: translateX(-14px) translateY(-2px) scale(1.04); }
    72% { transform: translateX(-14px) translateY(-2px) scale(1.04); }
}

@keyframes companionFight {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0) scale(1); }
    45% { transform: translateX(-7px) translateY(-5px) rotate(-4deg) scale(1.04); }
    70% { transform: translateX(5px) translateY(1px) rotate(3deg) scale(0.98); }
}

@keyframes companionSoulGuard {
    0%, 100% { transform: translateY(5px); opacity: 0.72; }
    50% { transform: translateY(-5px); opacity: 0.9; }
}

@keyframes companionInjured {
    0%, 100% { transform: translateY(3px) scale(0.97); opacity: 0.86; }
    50% { transform: translateY(1px) scale(0.99); opacity: 1; }
}

@keyframes companionStealthGlide {
    0% { transform: translateX(16px) translateY(4px); opacity: 0.58; }
    42% { transform: translateX(-18px) translateY(-4px); opacity: 0.9; }
    72% { transform: translateX(-6px) translateY(-1px); opacity: 0.66; }
    100% { transform: translateX(16px) translateY(4px); opacity: 0.58; }
}

@keyframes companionFadeStep {
    0%, 100% { transform: translateY(0) scale(0.96); }
    50% { transform: translateY(-6px) scale(1.02); }
}

@keyframes companionScanStep {
    0%, 100% { transform: translateX(0) translateY(0); }
    28% { transform: translateX(-14px) translateY(-3px); }
    58% { transform: translateX(10px) translateY(0); }
    78% { transform: translateX(4px) translateY(-2px); }
}

@keyframes companionOriginDrift {
    0%, 100% { transform: translateY(8px) scale(0.96); opacity: 0.82; }
    38% { transform: translateY(-8px) scale(1.01); opacity: 1; }
    70% { transform: translateY(1px) scale(0.98); opacity: 0.9; }
}

@keyframes companionDungeonAdvance {
    0% { transform: translateX(-20px) translateY(5px); }
    34% { transform: translateX(2px) translateY(-4px); }
    68% { transform: translateX(20px) translateY(1px); }
    100% { transform: translateX(-20px) translateY(5px); }
}

@keyframes companionResultHop {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-22px) scale(1.04); }
    58% { transform: translateY(4px) scale(0.98); }
    78% { transform: translateY(-7px) scale(1.01); }
}

@keyframes companionNurtureRise {
    0%, 100% { transform: translateY(6px) scale(0.98); }
    45% { transform: translateY(-18px) scale(1.03); }
    74% { transform: translateY(-7px) scale(1); }
}

@media (max-width: 768px) {
    .companion-pet {
        right: calc(8px + env(safe-area-inset-right, 0px));
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        width: 92px;
        min-height: 110px;
    }

    .companion-pet__sprite {
        width: 82px;
        height: 82px;
    }

    .companion-pet__plate {
        max-width: 92px;
        padding: 4px 6px;
    }
}