/* Original Soap companion, shared by the portfolio and product page. */
.soap-companion {
    position: fixed;
    right: 20px;
    bottom: max(20px, env(safe-area-inset-bottom));
    width: 108px;
    height: 116px;
    z-index: 90;
}
.soap-companion[hidden], .soap-companion-restore[hidden] { display: none !important; }
.soap-companion button, .soap-companion-restore {
    appearance: none;
    font: inherit;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.soap-companion-character {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    touch-action: none;
    user-select: none;
    cursor: grab !important;
    border-radius: 24px;
}
.soap-companion-character:active { cursor: grabbing !important; }
.soap-companion-character svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 6px 10px #0003);
    animation: soap-float 5s ease-in-out infinite;
}
.soap-companion-face { transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)); }
.soap-companion-eye { transform-origin: center; transform-box: fill-box; animation: soap-blink 7s infinite; }
.soap-companion-close {
    position: absolute;
    top: -12px;
    right: -9px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #fff;
    background: transparent;
}
.soap-companion-close span, .soap-companion-restore {
    display: grid;
    place-items: center;
    background: #292929;
    border: 1px solid #ffffff30;
    box-shadow: 0 2px 8px #0002;
    border-radius: 50%;
}
.soap-companion-close span { width: 24px; height: 24px; font-size: 18px; line-height: 1; }
.soap-companion-restore {
    position: fixed;
    right: 20px;
    bottom: max(20px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    z-index: 90;
    color: #f2d38a;
    font-size: 24px;
}
.soap-companion-character:focus-visible, .soap-companion-close:focus-visible, .soap-companion-restore:focus-visible {
    outline: 3px solid #dca741;
    outline-offset: 3px;
}
.soap-companion-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.soap-companion.is-paused svg, .soap-companion.is-paused .soap-companion-eye,
.soap-companion.is-dragging svg { animation-play-state: paused; }
@keyframes soap-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes soap-blink { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.12); } }
@media (max-width: 700px) {
    .soap-companion { width: 84px; height: 92px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
    .soap-companion-restore { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .soap-companion-character svg, .soap-companion-eye { animation: none; }
}