:root {
    /* Le logo est une image, donc sa couleur ne se pilote pas d'ici.
       Ses halos, si — et ils suivent currentColor plutôt qu'une valeur
       fixe. Raison : un reflet violet sous un logo blanc trahirait
       l'ancienne identité à chaque survol, et c'est exactement ce qui
       arrivait tant que la pastille héritait de la couleur de lien du
       site. Chaque contexte pose donc son `color`, et le halo suit.

       `color-mix` sur currentColor est ce qui permet au halo de suivre.
       La ligne au-dessus reste comme repli pour les navigateurs qui ne
       la connaissent pas : ils affichent un halo neutre plutôt que rien. */
    /* stylelint-disable declaration-block-no-duplicate-custom-properties --
       la répétition EST le mécanisme : un navigateur qui ne comprend pas
       color-mix ignore la seconde ligne et garde la première. */
    --mai-voile: rgb(255 255 255 / 14%);
    --mai-voile: color-mix(in srgb, currentcolor 14%, transparent);
    --mai-halo: rgb(255 255 255 / 42%);
    --mai-halo: color-mix(in srgb, currentcolor 42%, transparent);
    /* stylelint-enable declaration-block-no-duplicate-custom-properties */

    --mai-t-survol: 150ms;
    --mai-t-apparition: 300ms;
    --mai-t-respiration: 9s;
}

.mai {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transform-origin: 50% 50%;
    animation: mai-respire var(--mai-t-respiration) ease-in-out infinite;
    transition: filter var(--mai-t-survol) ease;
}

@keyframes mai-respire {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

a:hover .mai,
.mai-cible:hover .mai {
    filter: drop-shadow(0 0 7px var(--mai-halo))
            brightness(1.07);
}

[data-etat="reflexion"] .mai {
    animation: mai-respire-ample 2.6s ease-in-out infinite;
}

[data-etat="reflexion"] .ai-attente .mai {
    filter: drop-shadow(0 0 9px var(--mai-halo));
}

@keyframes mai-respire-ample {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}


[data-etat="generation"] .mai {
    animation: mai-pulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 6px var(--mai-voile));
}

@keyframes mai-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.015); opacity: 0.88; }
}

[data-etat="termine"] .mai {
    animation: mai-flash 200ms ease-out;
}

@keyframes mai-flash {
    0%   { filter: drop-shadow(0 0 0 transparent) brightness(1); }
    40%  { filter: drop-shadow(0 0 14px var(--mai-halo)) brightness(1.28); }
    100% { filter: drop-shadow(0 0 0 transparent) brightness(1); }
}

.mai--avatar { width: 27px; }
.mai--bulle  { width: 19px; }



@media (prefers-reduced-motion: reduce) {
    .mai,
    [data-etat="reflexion"] .mai,
    [data-etat="generation"] .mai,
    [data-etat="termine"] .mai {
        animation: none;
        transform: none;
    }

    [data-etat="reflexion"] .mai {
        filter: drop-shadow(0 0 8px var(--mai-halo));
    }
}