#blog-agent {
    --pet-size: 112px;
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 1100;
    max-width: calc(100vw - 32px);
    font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #333;
}

#blog-agent[hidden] { display: none; }

#blog-agent #blog-agent-start {
    display: block;
    width: var(--pet-size);
    height: var(--pet-size);
    margin-left: auto;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#blog-agent .blog-agent-pet {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

#blog-agent .blog-agent-pet-sprite {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 400% 200%;
    background-position: 0 0;
    animation: blog-agent-run 0.8s steps(1, end) infinite;
}

#blog-agent .blog-agent-pet-shadow {
    position: absolute;
    bottom: 2%;
    left: 18%;
    width: 68%;
    height: 7%;
    border-radius: 50%;
    background: #33271924;
    filter: blur(3px);
    animation: blog-agent-shadow 0.4s ease-in-out infinite alternate;
}

/* Eight evenly sized cells: four columns, then the second row. */
@keyframes blog-agent-run {
    0%, 100% { background-position: 0% 0%; }
    12.5% { background-position: 33.333333% 0%; }
    25% { background-position: 66.666667% 0%; }
    37.5% { background-position: 100% 0%; }
    50% { background-position: 0% 100%; }
    62.5% { background-position: 33.333333% 100%; }
    75% { background-position: 66.666667% 100%; }
    87.5% { background-position: 100% 100%; }
}

@keyframes blog-agent-shadow {
    from { transform: scaleX(0.88); opacity: 0.6; }
    to { transform: scaleX(1); opacity: 1; }
}

#blog-agent-start:hover .blog-agent-pet-sprite,
#blog-agent-start:hover .blog-agent-pet-shadow,
#blog-agent-start:focus-visible .blog-agent-pet-sprite,
#blog-agent-start:focus-visible .blog-agent-pet-shadow,
#blog-agent-start:disabled .blog-agent-pet-sprite,
#blog-agent-start:disabled .blog-agent-pet-shadow {
    animation-play-state: paused;
}

@media (max-width: 480px) {
    #blog-agent { --pet-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    #blog-agent .blog-agent-pet-sprite,
    #blog-agent .blog-agent-pet-shadow { animation: none; }
}

#blog-agent .blog-agent-intro,
#blog-agent #blog-agent-status {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - var(--pet-size) - 60px);
    overflow-y: auto;
    padding: 18px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 20px #0002;
}

#blog-agent .blog-agent-intro {
    visibility: hidden;
    pointer-events: none;
}

/* Only the pet is the hover target; leaving it dismisses the explanation. */
#blog-agent:not([data-status]) #blog-agent-start:focus-visible + .blog-agent-intro {
    visibility: visible;
}

@media (hover: hover) {
    #blog-agent:not([data-status]) #blog-agent-start:hover + .blog-agent-intro {
        visibility: visible;
    }
}

#blog-agent p { margin: 10px 0; }
#blog-agent #blog-agent-status { margin: 0; }
#blog-agent .blog-agent-notice { font-size: 12px; color: #595959; }
#blog-agent #blog-agent-start:disabled { opacity: 0.65; cursor: wait; }
#blog-agent :focus-visible { outline: 3px solid #d87300; outline-offset: 3px; }
#blog-agent-status:empty { display: none; }

#page-agent-runtime_agent-panel .blog-agent-data-notice {
    position: absolute;
    top: calc(100% + 52px);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 5px 8px;
    border-radius: 6px;
    background: #fff;
    color: #595959;
    font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}