.guardian-companion-host {
    position: relative;
}

.guardian-companion-slot {
    position: relative;
    min-height: 196px;
    overflow: hidden;
}

.guardian-companion-slot > .guardian-companion {
    --guardian-size: 172px;
    --guardian-message-width: 190px;
    right: auto;
    left: 0;
    top: 8px;
    bottom: auto;
}

#uploadGuardianHost > .guardian-companion {
    --guardian-size: 110px;
    --guardian-message-width: 105px;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    box-sizing: border-box;
    padding-right: 52px;
}

#uploadGuardianHost {
    min-height: 230px;
}

#uploadGuardianHost .guardian-companion-message {
    box-sizing: border-box;
}

.guardian-companion-community-slot {
    margin-top: 18px;
    border-color: rgba(123, 82, 184, .25);
    background:
        radial-gradient(circle at 14% 48%, rgba(128, 83, 211, .09), transparent 34%),
        rgba(17, 12, 27, .72);
}

.guardian-companion-results-slot {
    margin-top: 18px;
    border-color: rgba(123, 82, 184, .25);
    background:
        radial-gradient(circle at 14% 48%, rgba(128, 83, 211, .09), transparent 34%),
        rgba(17, 12, 27, .72);
}

.guardian-companion-community-slot > .guardian-companion {
    left: 20px;
}

.guardian-companion {
    --guardian-size: 190px;
    --guardian-offset-x: 18px;
    --guardian-offset-y: 14px;
    --guardian-message-width: 250px;
    position: absolute;
    z-index: 18;
    right: var(--guardian-offset-x);
    bottom: var(--guardian-offset-y);
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: min(92%, calc(var(--guardian-size) + var(--guardian-message-width)));
    pointer-events: none;
    isolation: isolate;
}

.guardian-companion[hidden] {
    display: none;
}

.faunaris-guide-panel > .guardian-companion {
    position: relative;
    right: auto;
    bottom: auto;
    justify-content: flex-end;
    max-width: 100%;
    margin-top: 12px;
}

.faunaris-guide-panel > .guardian-companion .guardian-companion-visual {
    --guardian-size: 104px;
}

.faunaris-guide-panel > .guardian-companion .guardian-companion-message {
    width: min(210px, calc(100% - 112px));
    margin-bottom: 5px;
}

.guardian-companion-visual {
    position: relative;
    width: calc(var(--guardian-size) * .62);
    height: var(--guardian-size);
    flex: 0 0 calc(var(--guardian-size) * .62);
    overflow: hidden;
    pointer-events: none;
    transform-origin: 50% 76%;
    animation: guardian-companion-float 6.4s ease-in-out infinite;
}

.guardian-companion-visual::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 47%;
    top: 6.5%;
    width: 17%;
    height: 6%;
    translate: -50% -50%;
    border: 1px solid rgba(223, 211, 255, .32);
    border-radius: 50%;
    filter: drop-shadow(0 0 4px rgba(178, 137, 255, .22));
    opacity: .42;
    animation: guardian-companion-halo 18s linear infinite;
}

.guardian-companion-art {
    position: absolute;
    inset: 0 0 0 auto;
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    user-select: none;
    filter:
        drop-shadow(0 8px 18px rgba(5, 3, 16, .48))
        drop-shadow(0 0 8px rgba(118, 73, 228, .18));
    transform-origin: 47% 62%;
    animation: guardian-companion-breathe 6.8s ease-in-out infinite;
}

.guardian-companion-glow {
    position: absolute;
    left: 32%;
    top: 46%;
    width: 11%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, .3),
        rgba(151, 98, 255, .16) 42%,
        transparent 72%
    );
    opacity: .55;
    filter: blur(2px);
    animation: guardian-companion-core 5.8s ease-in-out infinite;
}

.guardian-companion-spark {
    position: absolute;
    width: 4px;
    height: 9px;
    background: rgba(209, 188, 255, .58);
    clip-path: polygon(50% 0, 100% 55%, 50% 100%, 0 55%);
    opacity: .42;
    animation: guardian-companion-spark 6s ease-in-out infinite;
}

.guardian-companion-spark.spark-one {
    left: 9%;
    top: 25%;
}

.guardian-companion-spark.spark-two {
    right: 6%;
    top: 30%;
    animation-delay: -2.7s;
}

.guardian-companion-message {
    position: relative;
    width: min(var(--guardian-message-width), 58vw);
    margin-bottom: 18px;
    padding: 12px 38px 12px 14px;
    border: 1px solid rgba(157, 102, 255, .35);
    border-radius: 14px 14px 4px 14px;
    background: rgba(16, 11, 28, .96);
    box-shadow: 0 12px 28px rgba(5, 3, 12, .34);
    color: #f5f0ff;
    pointer-events: auto;
    animation: guardian-companion-message-in 240ms ease-out both;
}

.guardian-companion-message[hidden] {
    display: none;
}

.guardian-companion-message-text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
}

.guardian-companion-close {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #d9cbf5;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

.guardian-companion-close:hover,
.guardian-companion-close:focus-visible {
    background: rgba(158, 100, 255, .15);
    outline: 1px solid rgba(190, 147, 255, .55);
}

.guardian-companion[data-guardian-state="attentive"] .guardian-companion-visual,
.guardian-companion[data-guardian-state="help"] .guardian-companion-visual,
.guardian-companion[data-guardian-state="uploading"] .guardian-companion-visual,
.guardian-companion[data-guardian-state="analyzing"] .guardian-companion-visual {
    transform: translate3d(0, -3px, 0) scale(1.015);
    transition: transform 420ms ease;
}

.guardian-companion[data-guardian-state="success"] .guardian-companion-visual {
    animation: guardian-companion-success 900ms ease-out 1,
        guardian-companion-float 6.4s ease-in-out 900ms infinite;
}

.guardian-companion[data-guardian-state="error"] .guardian-companion-art {
    filter:
        saturate(.78)
        brightness(.88)
        drop-shadow(0 8px 18px rgba(5, 3, 16, .48));
}

.guardian-companion[data-guardian-state="sleeping"] .guardian-companion-visual {
    opacity: .72;
    transform: translate3d(0, 4px, 0) scale(.99);
    animation-duration: 9s;
}

.guardian-companion[data-guardian-state="sleeping"] .guardian-companion-glow,
.guardian-companion[data-guardian-state="sleeping"] .guardian-companion-spark {
    opacity: .18;
}

.guardian-companion-asset-missing .guardian-companion-visual {
    display: none;
}

@keyframes guardian-companion-float {
    0%, 100% { transform: translate3d(0, 1px, 0) rotate(-.25deg); }
    50% { transform: translate3d(0, -4px, 0) rotate(.3deg); }
}

@keyframes guardian-companion-breathe {
    0%, 100% { transform: scale(1); opacity: .96; }
    50% { transform: scale(1.008); opacity: 1; }
}

@keyframes guardian-companion-core {
    0%, 100% { transform: scale(.96); opacity: .42; }
    50% { transform: scale(1.04); opacity: .68; }
}

@keyframes guardian-companion-halo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes guardian-companion-spark {
    0%, 100% { opacity: .2; transform: translateY(2px); }
    50% { opacity: .52; transform: translateY(-3px); }
}

@keyframes guardian-companion-success {
    0% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-8px) scale(1.018); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes guardian-companion-message-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.no-animations .guardian-companion *,
.guardian-companion-static *,
body[data-animations="off"] .guardian-companion * {
    animation: none !important;
    transition: none !important;
}

@media (max-width: 720px) {
    #uploadGuardianHost > .guardian-companion {
        padding-right: 0;
    }

    #uploadGuardianHost {
        min-height: 190px;
    }

    .guardian-companion-slot {
        min-height: 190px;
    }

    .guardian-companion {
        --guardian-size: 126px;
        --guardian-offset-x: 8px;
        --guardian-offset-y: 8px;
        --guardian-message-width: 210px;
        max-width: calc(100% - 16px);
        gap: 4px;
    }

    .guardian-companion-message {
        width: min(var(--guardian-message-width), calc(100vw - 150px));
        min-width: 150px;
        margin-bottom: 8px;
        padding: 10px 34px 10px 12px;
    }

    .guardian-companion-message-text {
        font-size: .78rem;
    }

    .guardian-companion-spark {
        display: none;
    }
}

@media (max-width: 480px) and (orientation: landscape) {
    .guardian-companion {
        --guardian-size: 94px;
        --guardian-message-width: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guardian-companion *,
    .guardian-companion[data-guardian-state="success"] .guardian-companion-visual {
        animation: none !important;
        transition: none !important;
    }

    .guardian-companion[data-guardian-state="success"] .guardian-companion-art {
        opacity: .92;
    }
}