.monkey-companion {
    /* Fit the empty gutter beside the centered reading column as the window changes. */
    --monkey-edge: clamp(1rem, calc(50vw - 30rem), 3.25rem);
    position: fixed;
    right: max(var(--monkey-edge), env(safe-area-inset-right));
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 2rem);
    z-index: 80;
    width: min(38svh, clamp(96px, calc(50vw - var(--measure, 42rem) / 2 - var(--monkey-edge) - 1rem), 300px));
    pointer-events: none;
    color: #b8c2cc;
    font-family: var(--font-text, system-ui, sans-serif);
    transform: translate3d(calc(100% + 4rem), 8%, 0);
    opacity: 0;
    transition: transform 1.05s cubic-bezier(.22, .68, .24, 1), opacity .6s ease;
    will-change: transform;
}
.monkey-companion.is-in { transform: translate3d(0, 0, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .monkey-companion { transform: none; opacity: 1; transition: none; }
}
.monkey-companion[hidden], .monkey-panel[hidden], html.light .monkey-companion { display: none !important; }
.monkey-launcher {
    display: block;
    position: relative;
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
.monkey-art {
    display: block;
    position: relative;
    pointer-events: none;
    width: 100%;
    aspect-ratio: 1.02;
}
/* The source frames are the astronaut over black. The script keys that black out and paints
   the result here, so nothing but the astronaut is drawn. The video and the still stay in the
   layout, transparent, because a hidden video will not decode frames to read from. */
.monkey-art img, .monkey-art video, .monkey-keyed {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.monkey-art img, .monkey-art video { opacity: 0; }
.monkey-keyed {
    opacity: 0;
    transform: rotate(-32deg);
    transition: opacity .6s ease;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .38));
}
.monkey-companion.has-frame .monkey-keyed { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .monkey-art { animation: monkey-drift 17s ease-in-out infinite; }
    .monkey-keyed { animation: monkey-turn 23s ease-in-out infinite; }
}
@keyframes monkey-drift {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-5%, -7%, 0); }
    50%  { transform: translate3d(2%, -11%, 0); }
    75%  { transform: translate3d(6%, -4%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes monkey-turn {
    0%   { transform: rotate(-35deg) scale(1); }
    35%  { transform: rotate(-29.5deg) scale(1.03); }
    70%  { transform: rotate(-28deg) scale(.985); }
    100% { transform: rotate(-35deg) scale(1); }
}
.monkey-options-hint {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 22px;
    border-radius: 11px;
    background: rgba(6, 8, 11, .5);
    color: #b8c2cc;
    font: 17px/19px system-ui, sans-serif;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity .25s ease, color .25s ease, background-color .25s ease;
}
.monkey-launcher:hover .monkey-options-hint,
.monkey-launcher:focus-visible .monkey-options-hint,
.monkey-launcher[aria-expanded="true"] .monkey-options-hint { opacity: 1; color: #fff; background: #1c2632; }
.monkey-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(224px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid rgba(184, 194, 204, .26);
    border-radius: 14px;
    background: rgba(6, 8, 11, .97);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
    pointer-events: auto;
}
.monkey-credit { margin: 0 0 10px; font-size: 11px; line-height: 1.6; }
.monkey-credit span { display: block; color: #d2dbe3; font-size: 12px; letter-spacing: .08em; }
.monkey-controls { display: flex; gap: 8px; }
.monkey-controls button {
    flex: 1;
    min-height: 44px;
    padding: 8px;
    border: 1px solid rgba(184, 194, 204, .26);
    border-radius: 8px;
    background: rgba(184, 194, 204, .06);
    color: #d2dbe3;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.monkey-controls button:hover { background: #1c2632; border-color: #b8c2cc; }
.monkey-companion button:focus-visible { outline: 2px solid #c5e1f5; outline-offset: 4px; }
@media (max-width: 900px) {
    .monkey-companion {
        width: clamp(132px, 36vw, 190px);
        right: max(22px, env(safe-area-inset-right));
        bottom: calc(max(20px, env(safe-area-inset-bottom)) + 4px);
    }
    /* Only lift the companion when the optional music invitation is present. */
    body:has(.vinyl-active) .monkey-companion { bottom: calc(72px + env(safe-area-inset-bottom)); }
    /* Final contact links and metadata can scroll fully clear of the floating corner. */
    #contact { padding-bottom: calc(var(--space-chapter) * 1.2 + 7rem + env(safe-area-inset-bottom)); }
    body:has(.vinyl-active) #contact { padding-bottom: calc(var(--space-chapter) * 1.2 + 11rem + env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) {
    .monkey-companion { width: 118px; bottom: calc(max(6px, env(safe-area-inset-bottom)) + 14px); }
    .monkey-panel { bottom: 0; right: calc(100% + 8px); }
}
@media print { .monkey-companion { display: none !important; } }