/* ==========================================================================
   Conseil bio de Heeboo, sous la bio de « Mon profil » (modules/profile/bioAdvice.js).
   Ouverture en hauteur (320 ms), puis Heeboo (260 ms), puis le texte lettre par lettre.
   Doc : Documentations/Profile/conseil_bio_heeboo.md
   ========================================================================== */

.bio-advice {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0.5rem;
    transition: grid-template-rows 0.32s ease-out;
}
.bio-advice.is-open {
    grid-template-rows: 1fr;
}
.bio-advice__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 0;
    overflow: hidden;
    padding: 0 0.85rem;
    border-radius: 0 0 0.85rem 0.85rem;
    border-left: 3px solid var(--sy-brand-400);
    background: var(--sy-brand-50);
    transition: padding 0.32s ease-out;
}
.bio-advice.is-open .bio-advice__inner {
    padding: 0.75rem 0.85rem;
}
.bio-advice__eeboo {
    flex-shrink: 0;
    width: 3.25rem;
    height: auto;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.26s ease-out, transform 0.26s cubic-bezier(0.34, 1.45, 0.55, 1);
}
/* Fond transparent : la règle des avatars de Heeboo (style.css, img[src*="UI/Eeboo/eeboo_"], fond
   blanc) est plus spécifique qu'une simple classe, d'où ce sélecteur renforcé (2026-10-16). */
img.bio-advice__eeboo[src] {
    background-color: transparent;
}
.bio-advice.is-image .bio-advice__eeboo {
    opacity: 1;
    transform: none;
}
.bio-advice__text {
    position: relative;
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(var(--sy-neutral-800-ink-rgb));
}
.bio-advice__advice {
    display: block;
}
/* Texte complet invisible : taille finale dès le départ, lu par les lecteurs d'écran ; la copie
   animée s'écrit par-dessus (même principe que la bulle du coach). */
.bio-advice__full {
    display: block;
    opacity: 0;
}
.bio-advice__typed {
    position: absolute;
    inset: 0;
}
.bio-advice.is-static,
.bio-advice.is-static * {
    transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .bio-advice, .bio-advice * { transition: none !important; }
}