/* Mascota (el dibujo y las caras: public/lib/mascot.js; la pintan buddy.js en el chat, «Nuevo proyecto» y la web pública, y el botón del
   chat en las webs, que mete esta hoja en su sombra: public/webchat.js). Los colores van en el dibujo; aquí solo cómo se mueve. El humor
   va en data-mood: cómo se mueve el cuerpo; lo demás (ojos, cejas, boca, extras) lo pone el script. */
.buddy { flex: none; width: var(--buddy-size, 36px); height: var(--buddy-size, 36px); cursor: pointer; }
.buddy svg { display: block; width: 100%; height: 100%; overflow: visible; }
.buddy .b-shadow { fill: var(--text, #1c1631); opacity: .12; }
.buddy svg[data-mood="love"] .cheek, .buddy svg[data-mood="embarrassed"] .cheek { opacity: 1; }
.buddy .x-soft { fill: none; stroke: var(--muted, #6b6680); stroke-width: 1.3; }
.buddy .x-z, .buddy .x-q { fill: var(--muted, #6b6680); font: 800 9px system-ui, sans-serif; }
.buddy .x-q { font-size: 12px; }
.buddy .b-body { transform-box: fill-box; transform-origin: 50% 100%; animation: b-bob 3.2s ease-in-out infinite; }
.buddy .b-sprout { transform-origin: 20px 7.4px; animation: b-sprout 2.6s ease-in-out infinite; }
.buddy .b-eyes.blink { transform-box: fill-box; transform-origin: 50% 50%; animation: b-blink 4.6s infinite; }
.buddy .x, .buddy .yawn { transform-box: fill-box; transform-origin: 50% 50%; }
.buddy .x-fall { animation: b-fall 1.9s ease-in infinite; }
.buddy .x-float { animation: b-float 2.6s ease-out infinite; }
.buddy .x-twinkle { animation: b-twinkle 1.3s ease-in-out infinite; }
.buddy .x-think { animation: b-think 2.2s ease-in-out infinite; }
.buddy .x-q { animation: b-wobble 1.6s ease-in-out infinite; }
.buddy .yawn { animation: b-breathe 3.6s ease-in-out infinite; }
.buddy .d2 { animation-delay: .6s; }
.buddy .d3 { animation-delay: 1.2s; }
.buddy svg[data-mood="excited"] .b-body { animation: b-bounce .62s ease-in-out infinite; }
.buddy svg[data-mood="amused"] .b-body { animation: b-jiggle .34s ease-in-out infinite; }
.buddy svg[data-mood="love"] .b-body { animation: b-breathe 1.1s ease-in-out infinite; }
.buddy svg[data-mood="proud"] .b-body { animation: b-breathe 2.6s ease-in-out infinite; }
.buddy svg[data-mood="thinking"] .b-body, .buddy svg[data-mood="curious"] .b-body, .buddy svg[data-mood="confused"] .b-body { animation: b-sway 2.8s ease-in-out infinite; }
.buddy svg[data-mood="focused"] .b-body, .buddy svg[data-mood="determined"] .b-body { animation: b-bob 1.6s ease-in-out infinite; }
.buddy svg[data-mood="worried"] .b-body, .buddy svg[data-mood="embarrassed"] .b-body { animation: b-shake .22s linear infinite; }
.buddy svg[data-mood="sad"] .b-body, .buddy svg[data-mood="tired"] .b-body { animation: b-sag 4.6s ease-in-out infinite; }
.buddy svg[data-mood="sleepy"] .b-body { animation: b-breathe 3.6s ease-in-out infinite; }
@keyframes b-hop { 0%, 100% { transform: translateY(0) scale(1.05, .93); } 50% { transform: translateY(-3px) scale(.97, 1.04); } }
@keyframes b-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes b-sprout { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes b-bounce { 0%, 100% { transform: translateY(0) scale(1.05, .93); } 50% { transform: translateY(-4px) scale(.97, 1.04); } }
@keyframes b-jiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-1px); } }
@keyframes b-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes b-shake { 0%, 100% { transform: translateX(-.7px); } 50% { transform: translateX(.7px); } }
@keyframes b-sag { 0%, 100% { transform: scale(1.03, .94); } 50% { transform: scale(.99, .99); } }
@keyframes b-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05, 1.07); } }
@keyframes b-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes b-fall { 0% { transform: translateY(-2px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes b-float { 0% { transform: translateY(3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes b-twinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes b-think { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes b-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: translateY(-2px) rotate(8deg); } }
/* Trabajando (DictalaMascot.working): saca el portátil desde abajo y teclea con los dos brazos, uno y otro */
.buddy svg.b-working .b-laptop { display: inline; transform-box: fill-box; transform-origin: 50% 100%; animation: b-laptop-in .38s cubic-bezier(.2, .9, .3, 1.2) both; }
.buddy svg.b-working .b-arm-l, .buddy svg.b-working .b-arm-r { animation: b-type .3s ease-in-out infinite; }
.buddy svg.b-working .b-arm-r { animation-delay: .15s; }
@keyframes b-laptop-in { from { transform: translateY(5px) scaleY(.2); opacity: 0; } }
@keyframes b-type { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
/* Hablando (DictalaMascot.talking, mientras lee en voz alta): la boca del humor se cambia por una que se abre y se cierra a un ritmo
   irregular, como al hablar; los ojos siguen siendo los del humor */
.buddy svg.b-talking .b-mouth { display: none; }
.buddy svg.b-talking .b-talk { display: inline; transform-box: fill-box; transform-origin: 50% 25%; animation: b-talk .9s linear infinite; }
@keyframes b-talk { 0%, 100% { transform: scaleY(.3); } 14% { transform: scaleY(1); } 28% { transform: scaleY(.45); } 42% { transform: scaleY(.9); } 57% { transform: scaleY(.2); } 71% { transform: scaleY(.75); } 85% { transform: scaleY(.35); } }
/* Ayudantes (subagentes), debajo de la principal: una fila por ayudante, su mascota pequeña con portátil (cada una de un color) y lo
   que está haciendo */
/* (su texto empieza en la misma columna que el de la línea del agente: la mascota pequeña bajo la principal, a su derecha, y el mismo
   hueco de 10 px que deja #status) */
.buddy-helpers { display: flex; flex-direction: column; gap: 4px; padding-left: calc(var(--buddy-size, 36px) - 22px); }
.buddy-helpers:empty { display: none; }
.buddy-helper { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; animation: b-pop .32s cubic-bezier(.2, .9, .3, 1.3) both; }
.buddy-helper .helper-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buddy-helper .helper-time { flex: none; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; } /* (cuánto lleva, a la derecha del todo como el del agente, #status-meta: buddy.js) */
.buddy-helper .helper-time:empty { display: none; }
.buddy-mini { width: 22px; height: 22px; cursor: default; }
.buddy-mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* (ninguna azul: el azul es el de la principal) rojo, verde y violeta, y vuelta a empezar si hay más */
.buddy-helper:nth-child(3n+1) .buddy-mini { filter: hue-rotate(125deg) saturate(1.4); }
.buddy-helper:nth-child(3n+2) .buddy-mini { filter: hue-rotate(285deg); }
.buddy-helper:nth-child(3n) .buddy-mini { filter: hue-rotate(60deg); }
.buddy-helper:nth-child(3n+2) .b-body { animation-delay: -.5s; }
.buddy-helper:nth-child(3n) .b-body { animation-delay: -1s; }
@keyframes b-pop { from { transform: translateY(6px) scale(.6); opacity: 0; } }
/* (caminando: saltitos, sea cual sea el humor) */
.buddy svg.walking[data-mood] .b-body { animation: b-hop .42s ease-in-out infinite; }

/* Sin mascota (html.no-mascot, el interruptor «Mascota» del menú de la cuenta): las tres casillas y la estrella del logo
   (public/lib/mascot.js, logo()), con la proporción del logo (casillas de 16 y huecos de 6), en piezas que giran en 3D. Cada pieza da
   media vuelta y queda igual (son simétricas), así que los bucles no saltan.
   · En reposo, de vez en cuando, una ola: cada pieza da media vuelta, una tras otra.
   · Pensando o trabajando (data-mood thinking o focused, o con el portátil: b-working): giran sin parar, en diagonal unas en
     horizontal y las otras en vertical.
   · Contenta (happy, excited, love, proud): una vuelta entera de celebración. Hablando (b-talking): laten.
   · Con sueño o cansada, más tenue y despacio; triste, las piezas un poco caídas hacia atrás. */
.dm-logo { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14%; width: 100%; height: 100%; padding: 20%; box-sizing: border-box; perspective: 70px; } /* (con aire alrededor, como la mascota en su casilla: llenándola entera, pesaba mucho más que ella) */
.dm-logo > i { display: block; border-radius: 25%; background: linear-gradient(135deg, #3a95ff, #0060e0); animation: dm-idle 7s ease-in-out infinite; }
.dm-logo > .dm-star { border-radius: 0; scale: 1.25; /* (la estrella del logo es algo mayor que las casillas: 20 de 16) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='33 33 20 20'%3E%3Cpath d='M43 33c1.5 6 4 8.5 10 10-6 1.5-8.5 4-10 10-1.5-6-4-8.5-10-10 6-1.5 8.5-4 10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='33 33 20 20'%3E%3Cpath d='M43 33c1.5 6 4 8.5 10 10-6 1.5-8.5 4-10 10-1.5-6-4-8.5-10-10 6-1.5 8.5-4 10-10z'/%3E%3C/svg%3E") center / contain no-repeat; }
.dm-logo > i:nth-child(2) { animation-delay: .14s; }
.dm-logo > i:nth-child(3) { animation-delay: .28s; }
.dm-logo > i:nth-child(4) { animation-delay: .42s; }
.dm-logo:is([data-mood="thinking"], [data-mood="focused"], .b-working) > i { animation: dm-turn-y 1.6s cubic-bezier(.6, 0, .3, 1) infinite; }
.dm-logo:is([data-mood="thinking"], [data-mood="focused"], .b-working) > i:is(:nth-child(2), :nth-child(3)) { animation-name: dm-turn-x; }
.dm-logo:is([data-mood="thinking"], [data-mood="focused"], .b-working) > i:nth-child(2) { animation-delay: .2s; }
.dm-logo:is([data-mood="thinking"], [data-mood="focused"], .b-working) > i:nth-child(3) { animation-delay: .4s; }
.dm-logo:is([data-mood="thinking"], [data-mood="focused"], .b-working) > i:nth-child(4) { animation-delay: .6s; }
.dm-logo:is([data-mood="happy"], [data-mood="excited"], [data-mood="love"], [data-mood="proud"]):not(.b-working) > i { animation: dm-cheer .9s cubic-bezier(.3, 0, .2, 1) 1 both; }
.dm-logo:is([data-mood="happy"], [data-mood="excited"], [data-mood="love"], [data-mood="proud"]):not(.b-working) > i:nth-child(2) { animation-delay: .08s; }
.dm-logo:is([data-mood="happy"], [data-mood="excited"], [data-mood="love"], [data-mood="proud"]):not(.b-working) > i:nth-child(3) { animation-delay: .16s; }
.dm-logo:is([data-mood="happy"], [data-mood="excited"], [data-mood="love"], [data-mood="proud"]):not(.b-working) > i:nth-child(4) { animation-delay: .24s; }
.dm-logo.b-talking > i { animation: dm-talk .46s ease-in-out infinite alternate; }
.dm-logo.b-talking > i:nth-child(2), .dm-logo.b-talking > i:nth-child(3) { animation-delay: .23s; }
.dm-logo:is([data-mood="sleepy"], [data-mood="tired"]) { opacity: .6; }
.dm-logo:is([data-mood="sleepy"], [data-mood="tired"]) > i { animation-duration: 12s; }
.dm-logo[data-mood="sad"]:not(.b-working):not(.b-talking) > i { animation: none; transform: rotateX(38deg); transition: transform .4s ease; }
@keyframes dm-idle { 0%, 82% { transform: rotateY(0); } 94%, 100% { transform: rotateY(180deg); } }
@keyframes dm-turn-y { 0% { transform: rotateY(0); } 55%, 100% { transform: rotateY(180deg); } }
@keyframes dm-turn-x { 0% { transform: rotateX(0); } 55%, 100% { transform: rotateX(180deg); } }
@keyframes dm-cheer { from { transform: rotate3d(1, 1, 0, 0); } to { transform: rotate3d(1, 1, 0, 360deg); } }
@keyframes dm-talk { from { transform: scale(1); } to { transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) { .buddy * { animation: none !important; } }

/* El botón de la mascota del chat en burbuja (el de las webs, public/webchat.js, y el del panel ampliado, public/project/chatbubble.js):
   solo ella con su sombra, sin círculo detrás; dónde va lo pone cada uno */
.buddy-fab { width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; filter: drop-shadow(0 6px 10px rgba(0, 40, 100, .3)); transition: transform .15s ease; }
.buddy-fab[hidden] { display: none; }
.buddy-fab .buddy { --buddy-size: 100%; }
.buddy-fab:hover { transform: scale(1.06); }
.buddy-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #0070f3) 40%, transparent); outline-offset: 2px; }