/* Lilith: contenedor encima del panel de IA. Los pies van en el centro, sobre el borde. */
#lilith { position: absolute; right: 8px; bottom: calc(100% - 4px); width: 110px; height: 160px; z-index: 10; pointer-events: none; }
@media (min-width: 768px) { #lilith { width: 140px; height: 200px; } }

.lilith-sprite { position: absolute; bottom: 0; image-rendering: pixelated; pointer-events: auto; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transform-origin: 50% 100%;
    filter: drop-shadow(0 0 10px rgba(217, 70, 239, .35)); user-select: none; -webkit-user-drag: none; }

/* Reposo: respira. Pensando: brinca y brilla más. Dormir: brillo bajo. */
#lilith[data-estado="reposo"] .lilith-sprite { animation: l-respira 3.2s ease-in-out infinite; }
#lilith.pensando .lilith-sprite { animation: l-pensando .55s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(217, 70, 239, .75)); }
#lilith[data-estado="dormir"] .lilith-sprite { filter: drop-shadow(0 0 6px rgba(139, 92, 246, .3)); }
#lilith[data-estado="bailar"] .lilith-sprite { filter: drop-shadow(0 0 14px rgba(34, 211, 238, .45)); }
#lilith[data-estado="enfadada"] .lilith-sprite { filter: drop-shadow(0 0 12px rgba(255, 60, 100, .8)) saturate(1.3); }
@keyframes l-respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.025); } }
@keyframes l-pensando { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Partículas: notas (salen de la boca) y corazones (salen de la mano). Movimiento a saltos, como pixel art. */
.lilith-particula { position: absolute; image-rendering: pixelated; pointer-events: none; transform: translate(-50%, -50%); }
.lilith-particula.nota { animation: l-nota 1.7s steps(14) forwards; }
.lilith-particula.corazon { animation: l-corazon 1.9s steps(14) forwards; }
@keyframes l-nota {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
    12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(calc(-50% + var(--dx) * .5 + 6px), calc(-50% + var(--dy) * .5)) rotate(var(--giro)); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--giro) * -1)); }
}
@keyframes l-corazon {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * .4), calc(-50% + var(--dy))) scale(.9); }
}

/* Escena de /lilith: marca de enfado que late y polvo de las pisadas */
.lilith-particula.enfado { animation: l-enfado .5s steps(3) infinite; }
@keyframes l-enfado { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.3); } }
.lilith-particula.polvo { animation: l-polvo .55s steps(5) forwards; }
@keyframes l-polvo {
    0% { opacity: .9; transform: translate(-50%, -50%) scale(.5); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--lado) * 16px), calc(-50% - 8px)) scale(1.3); }
}

/* Burbuja de chat pixel art: fondo oscuro, doble borde, esquinas en escalón y cola hacia Lilith. */
.lilith-burbuja { position: absolute; right: 62%; bottom: 72%; width: max-content; max-width: 220px; pointer-events: auto; cursor: pointer;
    background: #1d1a2e; color: #f4f4f5; padding: 10px 12px; font-family: 'Pixelify Sans', ui-monospace, monospace;
    font-size: 15px; line-height: 1.25; text-align: center; transform-origin: 100% 100%;
    box-shadow:
        0 -3px 0 0 #1d1a2e, 0 3px 0 0 #1d1a2e, -3px 0 0 0 #1d1a2e, 3px 0 0 0 #1d1a2e,
        0 -6px 0 0 #8b8fb5, 0 6px 0 0 #8b8fb5, -6px 0 0 0 #8b8fb5, 6px 0 0 0 #8b8fb5,
        -3px -3px 0 0 #8b8fb5, 3px -3px 0 0 #8b8fb5, -3px 3px 0 0 #8b8fb5, 3px 3px 0 0 #8b8fb5,
        0 0 22px 4px rgba(217, 70, 239, .25); }
@media (min-width: 768px) { .lilith-burbuja { max-width: 250px; font-size: 16px; } }
.lilith-burbuja[hidden] { display: none; }
/* cola en escalones, abajo a la derecha */
.lilith-burbuja::after { content: ''; position: absolute; right: 4px; bottom: -15px; width: 12px; height: 12px;
    background: #1d1a2e; box-shadow: 3px 0 0 #8b8fb5, 0 3px 0 #8b8fb5, 3px 3px 0 #8b8fb5, -3px 0 0 #8b8fb5;
    clip-path: polygon(0 0, 100% 0, 100% 100%); }
.lilith-burbuja p { margin: 0; }
.lilith-burbuja .b-nombre { color: #22d3ee; }
.lilith-burbuja .b-tarea { color: #f472d0; }
.lilith-burbuja.entra { animation: l-burbuja-entra .32s steps(6) both; }
.lilith-burbuja.sale { animation: l-burbuja-sale .2s steps(4) both; }
@keyframes l-burbuja-entra { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes l-burbuja-sale { to { transform: scale(.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    #lilith .lilith-sprite, #lilith.pensando .lilith-sprite, .lilith-burbuja.entra, .lilith-burbuja.sale { animation: none; }
}