/**
 * Cockroach buddy — desktop patrol + speech bubble (z-index below Rusty paperclip).
 */

#cockroach-container {
    position: fixed;
    left: -100px;
    bottom: 38px;
    width: 72px;
    height: 48px;
    z-index: 9990;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}

#cockroach-container.roach-visible {
    visibility: visible;
    opacity: 1;
}

#cockroach-container.roach-pointer-events {
    pointer-events: auto;
}

/* 2D patrol: JS sets top + left; bottom strip from default is cleared */
#cockroach-container.roach-patrol-2d {
    bottom: auto;
    transform: none;
}

/* Bubble — distinct from Rusty (gray-brown border) */
.roach-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    min-width: 160px;
    max-width: min(280px, 85vw);
    padding: 8px 26px 8px 10px;
    background: #f5f0e6;
    border: 1px solid #5c4033;
    border-radius: 10px 10px 10px 4px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.25);
    font-family: Tahoma, "MS Sans Serif", sans-serif;
    font-size: 11px;
    color: #2a1810;
    display: none;
    pointer-events: auto;
}

.roach-bubble::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -20px;
    border: 8px solid transparent;
    border-top-color: #f5f0e6;
}

.roach-bubble-text p {
    margin: 0 0 4px 0;
}

.roach-bubble-text p:last-child {
    margin-bottom: 0;
}

.roach-bubble-close {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #666;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.roach-bubble-close:hover {
    color: #000;
}

/* SVG roach */
.roach-character {
    display: block;
    width: 72px;
    height: 48px;
    pointer-events: auto;
    cursor: grab;
}

/* Reduced motion: bubble only; position (left/top) set in JS — random in safe bounds */
#cockroach-container.roach-reduced {
    width: auto;
    min-width: 0;
    height: auto;
}

#cockroach-container.roach-reduced .roach-character {
    display: none;
}

/* Whole sprite: faster bob + drift while crawling */
#cockroach-container.roach-state-crawling .roach-character {
    animation: roach-bob 0.19s ease-in-out infinite;
}

#cockroach-container.roach-state-talking .roach-character {
    animation: roach-bob 0.34s ease-in-out infinite;
}

@keyframes roach-bob {
    0%,
    100% {
        transform: translate(0, 0) rotate(-0.9deg);
    }
    25% {
        transform: translate(1.5px, -2.5px) rotate(0.7deg);
    }
    50% {
        transform: translate(0.5px, -3.5px) rotate(0.15deg);
    }
    75% {
        transform: translate(2px, -1.5px) rotate(-0.55deg);
    }
}

/* Body segment: subtle pivot */
#cockroach-container.roach-state-crawling .roach-body-core,
#cockroach-container.roach-state-talking .roach-body-core {
    animation: roach-body-tilt 0.36s ease-in-out infinite;
    transform-origin: 42px 24px;
    transform-box: fill-box;
}

#cockroach-container.roach-state-talking .roach-body-core {
    animation-duration: 0.55s;
}

@keyframes roach-body-tilt {
    0%,
    100% {
        transform: rotate(-1.4deg);
    }
    50% {
        transform: rotate(1.4deg);
    }
}

/* Antennae: wiggle from attachment point */
#cockroach-container.roach-state-crawling .roach-antennae,
#cockroach-container.roach-state-talking .roach-antennae {
    animation: roach-feelers 0.26s ease-in-out infinite alternate;
    transform: translate(60px, 15px);
    transform-origin: 0 0;
    transform-box: fill-box;
}

#cockroach-container.roach-state-talking .roach-antennae {
    animation-duration: 0.42s;
}

@keyframes roach-feelers {
    0% {
        transform: translate(60px, 15px) rotate(-8deg);
    }
    100% {
        transform: translate(60px, 15px) rotate(8deg);
    }
}

/* Leg groups: alternating “stride” */
#cockroach-container.roach-state-crawling .roach-legs-a,
#cockroach-container.roach-state-talking .roach-legs-a {
    animation: roach-leg-phase-a 0.19s ease-in-out infinite;
    transform-origin: 46px 34px;
    transform-box: fill-box;
}

#cockroach-container.roach-state-crawling .roach-legs-b,
#cockroach-container.roach-state-talking .roach-legs-b {
    animation: roach-leg-phase-b 0.19s ease-in-out infinite;
    transform-origin: 46px 34px;
    transform-box: fill-box;
}

#cockroach-container.roach-state-talking .roach-legs-a,
#cockroach-container.roach-state-talking .roach-legs-b {
    animation-duration: 0.34s;
}

@keyframes roach-leg-phase-a {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}

@keyframes roach-leg-phase-b {
    0%,
    100% {
        transform: translateY(3px);
    }
    50% {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #cockroach-container.roach-state-crawling .roach-character,
    #cockroach-container.roach-state-talking .roach-character,
    #cockroach-container.roach-state-crawling .roach-body-core,
    #cockroach-container.roach-state-talking .roach-body-core,
    #cockroach-container.roach-state-crawling .roach-antennae,
    #cockroach-container.roach-state-talking .roach-antennae,
    #cockroach-container.roach-state-crawling .roach-legs-a,
    #cockroach-container.roach-state-talking .roach-legs-a,
    #cockroach-container.roach-state-crawling .roach-legs-b,
    #cockroach-container.roach-state-talking .roach-legs-b {
        animation: none;
    }

    #cockroach-container.roach-state-crawling .roach-antennae,
    #cockroach-container.roach-state-talking .roach-antennae {
        transform: translate(60px, 15px);
    }

    #cockroach-container.roach-state-crawling .roach-legs-a,
    #cockroach-container.roach-state-talking .roach-legs-a,
    #cockroach-container.roach-state-crawling .roach-legs-b,
    #cockroach-container.roach-state-talking .roach-legs-b {
        transform: none;
    }

    #cockroach-container {
        transition: none;
    }
}