:root {
    --qp-ai-pet-size: 96px;
    --qp-ai-pet-gap: 10px;
    --qp-ai-pet-color: #4B75AD;
}

#qpanel-ai-agent-frame.qp-ai-pet-agent-frame {
    left: 0 !important;
    right: auto !important;
}

#qpAiPet {
    position: fixed;
    right: 292px;
    bottom: 8px;
    z-index: 2147483001;
    display: grid;
    width: var(--qp-ai-pet-size);
    height: var(--qp-ai-pet-size);
    place-items: center;
    padding: 0;
    overflow: visible;
    color: var(--qp-ai-pet-color);
    background: transparent;
    border: 0;
    border-radius: 22px;
    cursor: grab;
    filter: drop-shadow(0 5px 8px rgb(35 61 94 / 18%));
    touch-action: none;
    user-select: none;
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
    animation: qp-ai-pet-float 3.8s ease-in-out infinite;
}

#qpAiPet:hover,
#qpAiPet:focus-visible {
    filter: drop-shadow(0 8px 12px rgb(35 61 94 / 28%));
    transform: translateY(-4px) scale(1.035);
}

#qpAiPet:focus-visible {
    outline: 3px solid rgb(75 117 173 / 38%);
    outline-offset: 3px;
}

#qpAiPet.is-dragging {
    cursor: grabbing;
    filter: drop-shadow(0 10px 15px rgb(35 61 94 / 32%));
    transform: scale(1.035);
    animation: none;
}

#qpAiPet[hidden] {
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(.88);
}

#qpAiPet.is-agent-open {
    pointer-events: auto;
    opacity: 1;
    animation: qp-ai-pet-listening 1.9s ease-in-out infinite;
}

#qpAiPet::after {
    position: absolute;
    right: 8px;
    bottom: 9px;
    width: 12px;
    height: 12px;
    content: "";
    background: #94a3b8;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(75 117 173 / 0%);
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

#qpAiPet.is-agent-open::after,
#qpAiPet.is-agent-success::after {
    background: #22a35a;
}

#qpAiPet.is-agent-warning::after {
    background: #d99a16;
    animation: qp-ai-pet-status-pulse 1s ease-out infinite;
}

#qpAiPet.is-agent-error::after {
    background: #dc3545;
}

#qpAiPet.is-agent-open.is-agent-warning {
    animation: qp-ai-pet-thinking .8s ease-in-out infinite;
}

#qpAiPet.is-agent-open.is-agent-error {
    animation: qp-ai-pet-error .36s ease-in-out 3;
}

#qpAiPet .qp-ai-pet-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

#qpAiPet .qp-ai-pet-label {
    position: absolute;
    right: calc(100% + var(--qp-ai-pet-gap));
    top: 50%;
    padding: 5px 9px;
    color: #fff;
    font: 700 12px/1 Candara, Calibri, sans-serif;
    letter-spacing: .04em;
    white-space: nowrap;
    pointer-events: none;
    background: var(--qp-ai-pet-color);
    border-radius: 8px;
    opacity: 0;
    transform: translate(5px, -50%);
    transition: opacity 150ms ease, transform 150ms ease;
}

#qpAiPet:hover .qp-ai-pet-label,
#qpAiPet:focus-visible .qp-ai-pet-label {
    opacity: 1;
    transform: translate(0, -50%);
}

@keyframes qp-ai-pet-float {
    0%, 100% { margin-bottom: 0; }
    50% { margin-bottom: 4px; }
}

@keyframes qp-ai-pet-listening {
    0%, 100% { transform: translateY(0) rotate(0); }
    45% { transform: translateY(-5px) rotate(-1.5deg); }
    55% { transform: translateY(-5px) rotate(1.5deg); }
}

@keyframes qp-ai-pet-thinking {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes qp-ai-pet-error {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-5px); }
    70% { transform: translateX(5px); }
}

@keyframes qp-ai-pet-status-pulse {
    0% { box-shadow: 0 0 0 0 rgb(217 154 22 / 45%); }
    100% { box-shadow: 0 0 0 9px rgb(217 154 22 / 0%); }
}

@media (max-width: 767.98px) {
    :root {
        --qp-ai-pet-size: 76px;
        --qp-ai-pet-gap: 6px;
    }

    #qpAiPet .qp-ai-pet-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #qpAiPet {
        animation: none;
        transition: opacity 100ms linear;
    }
}