/* One small pixel companion follows the newest assistant response. Its
   position is supplied by the text renderer; only the sprite moves here. */
#chatView .message-wrapper.bot .message-inner:has(.logicum-chat-mascot) {
    position: relative;
    width: 100%;
}

#chatView .message-content.has-logicum-companion {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

#chatView .message-text.has-logicum-mascot {
    position: relative;
    padding-bottom: 36px;
}

#chatView .logicum-mascot-footer {
    position: relative;
    flex: 0 0 36px;
    width: 100%;
    height: 36px;
}

#chatView .logicum-chat-mascot {
    --pixel-body: var(--text-primary, #eeeeec);
    --pixel-shade: var(--text-secondary, #bdbbb8);
    --pixel-cheek: #d9949f;
    --pixel-limb: color-mix(in srgb, var(--text-primary, #eeeeec) 60%, var(--text-secondary, #bdbbb8));
    --pixel-highlight: color-mix(in srgb, var(--text-primary, #eeeeec) 85%, var(--text-secondary, #bdbbb8));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 32px;
    height: 32px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: var(--pixel-body);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(var(--mascot-x, 0px), var(--mascot-y, 0px), 0);
    transition: none;
}

#chatView .logicum-chat-mascot:is(:hover, :active, :focus) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

#chatView .logicum-chat-mascot:focus:not(:focus-visible) {
    outline: none;
}

#chatView .logicum-chat-mascot:focus-visible {
    outline: 2px solid var(--accent-color, #b87922);
    outline-offset: 3px;
}

#chatView .logicum-chat-mascot[hidden] {
    display: none;
}

#chatView .logicum-chat-mascot[data-position="wrapped"] {
    transition: none;
}

#chatView .logicum-pixel-art {
    display: block;
    width: 32px;
    height: 32px;
    max-width: none;
    overflow: visible;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
    transform-origin: 50% 100%;
    pointer-events: none;
}

/* Short tucked paws and tiny feet: soft breathing and a small waddling gait. */
#chatView .logicum-chat-mascot :is(.pixel-rig, .pixel-upper-body, .pixel-body) {
    transform-box: view-box;
    transform-origin: 20px 32px;
}

#chatView .logicum-chat-mascot .pixel-body { transform-origin: 16px 32px; }
#chatView .logicum-chat-mascot .pixel-arm-left { transform-origin: 8px 25px; }
#chatView .logicum-chat-mascot .pixel-arm-right { transform-origin: 32px 25px; }
#chatView .logicum-chat-mascot .pixel-forearm-left { transform-origin: 7px 28px; }
#chatView .logicum-chat-mascot .pixel-forearm-right { transform-origin: 33px 28px; }
#chatView .logicum-chat-mascot .pixel-leg-left { transform-origin: 15px 32px; }
#chatView .logicum-chat-mascot .pixel-leg-right { transform-origin: 25px 32px; }
#chatView .logicum-chat-mascot .pixel-shin-left { transform-origin: 15px 35px; }
#chatView .logicum-chat-mascot .pixel-shin-right { transform-origin: 25px 35px; }
#chatView .logicum-chat-mascot .pixel-shadow { transform-origin: 20px 39px; opacity: .18; }

#chatView .logicum-chat-mascot .pixel-rig {
    animation: logicumPixelBreathe 5.2s ease-in-out infinite;
}
#chatView .logicum-chat-mascot .pixel-body {
    animation: logicumPixelFlameBreathe 5.2s ease-in-out infinite;
}
#chatView .logicum-chat-mascot .pixel-upper-body {
    animation: logicumPixelIdleSway 5.2s ease-in-out infinite;
}
#chatView .logicum-chat-mascot :is(.pixel-arm-left, .pixel-arm-right) {
    animation: logicumPixelRestArm 5.2s ease-in-out infinite;
}
#chatView .logicum-chat-mascot .pixel-arm-right { animation-delay: -1.3s; }
#chatView .logicum-chat-mascot .pixel-forearm {
    animation: logicumPixelRestHand 5.2s ease-in-out infinite;
}
#chatView .logicum-chat-mascot .pixel-forearm-right { animation-delay: -2.6s; }
#chatView .logicum-chat-mascot .pixel-shin-left {
    animation: logicumPixelHeelSettle 5.2s ease-in-out infinite;
}
#chatView .logicum-chat-mascot .pixel-flame-tip {
    animation: logicumPixelTipFlicker 1.6s steps(1, end) infinite;
}
#chatView .logicum-chat-mascot .pixel-circuit {
    animation: logicumPixelCircuitPulse 5.2s ease-in-out infinite;
}
#chatView .logicum-chat-mascot .pixel-shadow {
    animation: logicumPixelRestShadow 5.2s ease-in-out infinite;
}
#chatView .logicum-chat-mascot .pixel-blush {
    opacity: 0;
    transition: opacity 120ms ease-out;
}

/* Alternating little paddles, a gentle side-to-side lean and soft landings. */
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-rig {
    animation: logicumPixelWalkWeight 800ms ease-in-out infinite;
}
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-upper-body {
    animation: logicumPixelWalkTwist 800ms ease-in-out infinite;
}
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-body {
    animation: logicumPixelWalkFlame 800ms ease-in-out infinite;
}
#chatView .logicum-chat-mascot[data-state="walking"] :is(.pixel-leg-left, .pixel-leg-right) {
    animation: logicumPixelStride 800ms ease-in-out infinite;
}
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-leg-right { animation-delay: -400ms; }
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-shin {
    animation: logicumPixelKnee 800ms ease-in-out infinite;
}
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-shin-right { animation-delay: -400ms; }
#chatView .logicum-chat-mascot[data-state="walking"] :is(.pixel-arm-left, .pixel-arm-right) {
    animation: logicumPixelArmSwing 800ms ease-in-out infinite;
}
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-arm-right { animation-delay: -400ms; }
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-forearm {
    animation: logicumPixelElbow 800ms ease-in-out infinite;
}
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-forearm-right { animation-delay: -400ms; }
#chatView .logicum-chat-mascot[data-state="walking"] .pixel-shadow {
    animation: logicumPixelWalkShadow 800ms ease-in-out infinite;
}

#chatView .logicum-chat-mascot[data-reaction="happy"] .logicum-pixel-art {
    animation: logicumPixelHappyHop 800ms ease-in-out both;
}
#chatView .logicum-chat-mascot[data-reaction="happy"] .pixel-arm-right {
    animation: logicumPixelWaveShoulder 800ms ease-in-out both;
}
#chatView .logicum-chat-mascot[data-reaction="happy"] .pixel-forearm-right {
    animation: logicumPixelWaveHand 800ms ease-in-out both;
}
#chatView .logicum-chat-mascot:is([data-reaction="happy"], :hover, :focus-visible) .pixel-blush {
    opacity: 1;
}

@keyframes logicumPixelBreathe {
    0%, 12.5%, 87.5%, 100% { transform: translateY(0); }
    25%, 75% { transform: translateY(-.5px); }
    37.5%, 50%, 62.5% { transform: translateY(-1px); }
}
@keyframes logicumPixelFlameBreathe {
    0%, 12.5%, 87.5%, 100% { transform: scale(1); }
    25%, 75% { transform: scale(1.015, 1.01); }
    37.5%, 50%, 62.5% { transform: scale(1.015, 1.02); }
}
@keyframes logicumPixelIdleSway {
    0%, 25%, 55%, 100% { transform: rotate(0); }
    35%, 42% { transform: rotate(-3deg); }
    72%, 80% { transform: rotate(2deg); }
}
@keyframes logicumPixelRestArm {
    0%, 20%, 85%, 100% { transform: translateY(0) rotate(0); }
    38%, 55% { transform: translateY(-.5px) rotate(5deg); }
    70% { transform: translateY(-.25px) rotate(-3deg); }
}
@keyframes logicumPixelRestHand {
    0%, 20%, 85%, 100% { transform: rotate(0); }
    38%, 55% { transform: rotate(-8deg); }
    70% { transform: rotate(4deg); }
}
@keyframes logicumPixelHeelSettle {
    0%, 65%, 90%, 100% { transform: rotate(0); }
    75%, 80% { transform: translateY(-.5px) rotate(-5deg); }
}
@keyframes logicumPixelTipFlicker {
    0%, 50%, 100% { transform: translateY(0); opacity: .7; }
    25% { transform: translateY(-1px); opacity: 1; }
    75% { transform: translate(1px, 0); opacity: .45; }
}
@keyframes logicumPixelCircuitPulse {
    0%, 12.5%, 87.5%, 100% { opacity: .75; }
    25%, 75% { opacity: .9; }
    37.5%, 50%, 62.5% { opacity: 1; }
}
@keyframes logicumPixelRestShadow {
    0%, 12.5%, 87.5%, 100% { transform: scaleX(1); opacity: .18; }
    25%, 75% { transform: scaleX(.96); opacity: .15; }
    37.5%, 50%, 62.5% { transform: scaleX(.9); opacity: .12; }
}
@keyframes logicumPixelWalkWeight {
    0%, 50%, 100% { transform: translateY(.4px) scale(1.025, .98); }
    12.5%, 62.5% { transform: translateY(0) scale(1); }
    25%, 75% { transform: translateY(-.8px) scale(.99, 1.015); }
    37.5%, 87.5% { transform: translateY(-.3px) scale(1); }
}
@keyframes logicumPixelWalkTwist {
    0%, 100% { transform: translateX(-.6px) rotate(-3deg); }
    25%, 75% { transform: translateX(0) rotate(0); }
    50% { transform: translateX(.6px) rotate(3deg); }
}
@keyframes logicumPixelWalkFlame {
    0%, 50%, 100% { transform: scale(1.015, .99); }
    25%, 75% { transform: scale(.99, 1.015); }
}
@keyframes logicumPixelStride {
    0%, 100% { transform: translate(-.5px, 0) rotate(-5deg); }
    12.5% { transform: translate(-.25px, 0) rotate(-3deg); }
    25% { transform: translate(0, -.5px) rotate(0); }
    37.5% { transform: translate(.5px, -.8px) rotate(5deg); }
    50% { transform: translate(.5px, 0) rotate(5deg); }
    62.5% { transform: translate(.25px, 0) rotate(3deg); }
    75% { transform: translate(0, 0) rotate(0); }
    87.5% { transform: translate(-.25px, 0) rotate(-3deg); }
}
@keyframes logicumPixelKnee {
    0%, 50%, 100% { transform: rotate(0); }
    25% { transform: rotate(5deg); }
    37.5% { transform: rotate(3deg); }
    62.5% { transform: rotate(-3deg); }
    75% { transform: translateY(-.4px) rotate(-7deg); }
    87.5% { transform: rotate(-4deg); }
}
@keyframes logicumPixelArmSwing {
    0%, 100% { transform: translateY(-.3px) rotate(7deg); }
    25%, 75% { transform: translateY(-.6px) rotate(0); }
    50% { transform: translateY(-.3px) rotate(-7deg); }
}
@keyframes logicumPixelElbow {
    0%, 100% { transform: rotate(-7deg); }
    25% { transform: rotate(-3deg); }
    50% { transform: rotate(6deg); }
    75% { transform: rotate(0); }
}
@keyframes logicumPixelWalkShadow {
    0%, 50%, 100% { transform: scaleX(1); opacity: .18; }
    12.5%, 62.5% { transform: scaleX(1.08); opacity: .2; }
    25%, 75% { transform: scaleX(.9); opacity: .14; }
    37.5%, 87.5% { transform: scaleX(.8); opacity: .1; }
}
@keyframes logicumPixelHappyHop {
    0%, 100% { transform: translateY(0) scale(1); }
    12.5% { transform: translateY(1px) scale(1.04, .96); }
    25%, 37.5% { transform: translateY(-2px) scale(.98, 1.02); }
    50% { transform: translateY(-2px); }
    62.5% { transform: translateY(1px) scale(1.03, .97); }
    75%, 87.5% { transform: translateY(0); }
}
@keyframes logicumPixelWaveShoulder {
    0%, 100% { transform: rotate(0); }
    12.5%, 87.5% { transform: rotate(-45deg); }
    25%, 37.5%, 50%, 62.5%, 75% { transform: rotate(-75deg); }
}
@keyframes logicumPixelWaveHand {
    0%, 12.5%, 87.5%, 100% { transform: rotate(0); }
    25%, 50%, 75% { transform: rotate(-24deg); }
    37.5%, 62.5% { transform: rotate(16deg); }
}

@media (prefers-reduced-motion: reduce) {
    #chatView .logicum-chat-mascot * {
        animation: none !important;
        transition: none !important;
    }
}