/* Le buddy (Buddy/menu, Buddy/panel) : au bout du champ de recherche de la sidebar, et son
   panneau (notifications non lues, rappel en un geste, raccourcis). Chargé sur toutes les pages
   (importmap.php du bundle), n'utilise que les jetons du socle (ui-bundle). */
@layer components {

/* ===== Le buddy (Buddy/_mascot) : un carré violet arrondi et son visage, partout le même ===== */
/* Sa taille est celle que lui donne l'endroit qui l'affiche ; son visage est dessiné en unités du viewBox (96). */
.buddy-mascot { position: relative; display: inline-block; flex: none; width: 1.875rem; height: 1.875rem; vertical-align: middle; }
.buddy-mascot__body {
    position: absolute; inset: 0; overflow: hidden;
    border-radius: 30.2%; background: var(--color-primary-500); transition: background-color .12s;
}
.buddy-mascot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.buddy-mascot :is(.buddy-mascot__face, .buddy-mascot__eyes, .buddy-mascot__pupils, .buddy-mascot__mouth, .buddy-mascot__joy) {
    transform-box: fill-box; transform-origin: center;
    transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), opacity .2s;
}
.buddy-mascot__joy { opacity: 0; }

/* Quand il travaille, les couleurs du bouton « Enregistrer » (le violet, et le rose de --gradient-save) coulent
   en biais dans le carré. Un calque trois fois plus large glisse de deux carrés : exactement une période du
   dégradé (à 115°, 2 × sin 115° = 1,8126 carré, soit 57,698 % de sa ligne sur ce calque). La boucle ne se voit
   pas, et rien n'est redessiné. Sans animation (réduire les animations), le dégradé reste, immobile. */
.buddy-mascot__body::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 300%; opacity: 0; transition: opacity .35s;
    background: repeating-linear-gradient(115deg, var(--color-primary-500) 0%, rgb(213 105 167) 28.849%, var(--color-primary-500) 57.698%);
}
@keyframes buddy-flow { to { transform: translateX(-66.6667%); } }

/* Au repos : il cligne, regarde à gauche puis à droite, penche la tête, à des rythmes différents. */
@keyframes buddy-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } 97% { transform: scaleY(1); } }
@keyframes buddy-glance {
    0%, 30%, 70%, 100% { transform: translate(0, 0); }
    35%, 49% { transform: translate(-4px, .5px); }
    55%, 64% { transform: translate(3.5px, -1px); }
}
@keyframes buddy-tilt { 0%, 78%, 100% { transform: none; } 82%, 92% { transform: rotate(-8deg) translate(-1px, 1px); } }
/* Il réfléchit (le regard en l'air), il cherche (il balaie, comme on lit une liste), il écrit (il hoche la tête). */
@keyframes buddy-think { 0%, 100% { transform: translate(-3.5px, -4.5px); } 50% { transform: translate(3.5px, -5px); } }
@keyframes buddy-scan { from { transform: translateX(-4.5px); } to { transform: translateX(4.5px); } }
@keyframes buddy-nod { from { transform: translateY(-.5px); } to { transform: translateY(2.5px); } }
/* C'est prêt : deux petits bonds. Il n'a pas pu : un frisson. */
@keyframes buddy-hop { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-16%) scale(1.04, .96); } 70% { transform: translateY(0) scale(1.03, .97); } }
@keyframes buddy-shake { 20%, 60% { transform: translateX(-6%); } 40%, 80% { transform: translateX(6%); } }

/* ===== Au bout du champ de recherche : le buddy vivant, et ce qu'il fait ===== */
.account-buddy { flex: none; position: relative; }
.account-buddy__trigger {
    position: relative; display: block; width: 1.875rem; height: 1.875rem; padding: 0;
    border: 0; border-radius: .5625rem; background: none; cursor: pointer;
}
.account-buddy__trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.account-buddy__mascot, .account-buddy__mascot .buddy-mascot { display: block; width: 100%; height: 100%; }
.account-buddy__trigger:hover .buddy-mascot__body, .account-buddy__trigger[aria-expanded="true"] .buddy-mascot__body { background: var(--color-primary-600); }
@media (prefers-reduced-motion: no-preference) { .account-buddy__mascot { transition: transform .2s ease; } }
.account-buddy__trigger:hover .account-buddy__mascot,
.account-buddy__trigger[aria-expanded="true"] .account-buddy__mascot { transform: scale(1.08); }
/* Au survol, il vous regarde, du côté où s'ouvre sa conversation. */
.account-buddy__trigger:hover .buddy-mascot__pupils { animation: none; transform: translate(3.5px, -2.5px); }
.account-buddy__state { display: contents; }

/* Les buddies vivants : celui du champ de recherche, et celui de la conversation ouverte. */
@media (prefers-reduced-motion: no-preference) {
    :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__eyes { animation: buddy-blink 6.5s infinite; }
    :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__pupils { animation: buddy-glance 11s ease-in-out infinite; }
    :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__face { animation: buddy-tilt 17s ease-in-out infinite; }
    .buddy-chat__avatar .buddy-mascot__eyes { animation-delay: 2.2s; }
}

/* Il travaille (Buddy/_state, data-status) : sur toutes les pages, le dégradé coule dans son carré, et dans celui
   de la conversation ouverte ; son visage dit l'étape (data-step). */
.account-buddy:has(.buddy-state[data-status="working"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__body::before { opacity: 1; }
.account-buddy:has(.buddy-state[data-status="working"]) .buddy-chat__dot { background: var(--color-primary-500); }
.account-buddy:has(.buddy-state[data-step="thinking"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__face { animation: none; transform: rotate(-6deg); }
.account-buddy:has(.buddy-state[data-step="thinking"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__mouth { transform: scale(.5, .3); }
.account-buddy:has(.buddy-state[data-step="searching"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__face { animation: none; }
.account-buddy:has(.buddy-state[data-step="searching"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__mouth { transform: scale(.55, .35); }
.account-buddy:has(.buddy-state[data-step="writing"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__pupils { animation: none; transform: translate(-1px, 4px); }
.account-buddy:has(.buddy-state[data-step="writing"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__mouth { transform: scale(.4, .3); }
@media (prefers-reduced-motion: no-preference) {
    .account-buddy:has(.buddy-state[data-status="working"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__body::before { animation: buddy-flow 2.2s linear infinite; }
    .account-buddy:has(.buddy-state[data-step="thinking"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__pupils { animation: buddy-think 2.6s ease-in-out infinite; }
    .account-buddy:has(.buddy-state[data-step="searching"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__pupils { animation: buddy-scan .8s ease-in-out infinite alternate; }
    .account-buddy:has(.buddy-state[data-step="writing"]) :is(.account-buddy__mascot, .buddy-chat__avatar) .buddy-mascot__face { animation: buddy-nod .6s ease-in-out infinite alternate; }
}

/* Le tour vient de finir (stamina-core-buddy) : content, ou déçu ; et « C'est noté ! ». */
.account-buddy__mascot.is-happy .buddy-mascot__eyes { opacity: 0; }
.account-buddy__mascot.is-happy .buddy-mascot__joy { opacity: 1; }
.account-buddy__mascot.is-sad .buddy-mascot__mouth { transform: translateY(5px) scale(.8, -1); }
.account-buddy__mascot.is-sad .buddy-mascot__pupils { animation: none; transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) {
    .account-buddy__mascot.is-happy .buddy-mascot { animation: buddy-hop .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
    .account-buddy__mascot.is-sad .buddy-mascot { animation: buddy-shake .45s ease 1; }
}

/* Sa pastille (stamina-core-buddy, data-buddy-badge), jamais pendant qu'il travaille : sa réponse est là (verte),
   il n'a pas pu (rouge). Plus rien une fois la réponse lue. */
.account-buddy__badge {
    position: absolute; top: -.3125rem; right: -.3125rem;
    width: .8125rem; height: .8125rem; border: 2px solid var(--color-sidebar); border-radius: 50%;
    background: var(--color-success); pointer-events: none;
    transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.account-buddy:is([data-buddy-badge="news"], [data-buddy-badge="failed"]) .account-buddy__badge { transform: scale(1); }
.account-buddy[data-buddy-badge="failed"] .account-buddy__badge { background: var(--color-danger); }

/* Sur mobile, le buddy est dans le tiroir fermé : le bouton du menu le dit à sa place. Il travaille (son dégradé
   tourne dans un point), sa réponse est là (vert), il n'a pas pu (rouge). */
@media (width < 1024px) {
    .stamina-header .stamina-burger { position: relative; }
    .stamina-header .stamina-burger::after {
        content: ""; position: absolute; top: -.125rem; right: -.125rem; width: .75rem; height: .75rem;
        border: 2px solid var(--color-canvas); border-radius: 50%; pointer-events: none;
        transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
    }
    body:has(.buddy-state[data-status="working"]) .stamina-header .stamina-burger::after {
        transform: scale(1); background: conic-gradient(var(--color-primary-500), rgb(213 105 167), var(--color-primary-500));
    }
    body:has(.account-buddy[data-buddy-badge="news"]) .stamina-header .stamina-burger::after { transform: scale(1); background: var(--color-success); }
    body:has(.account-buddy[data-buddy-badge="failed"]) .stamina-header .stamina-burger::after { transform: scale(1); background: var(--color-danger); }
}
@media (width < 1024px) and (prefers-reduced-motion: no-preference) {
    body:has(.buddy-state[data-status="working"]) .stamina-header .stamina-burger::after { animation: buddy-turn 1.4s linear infinite; }
}
@keyframes buddy-turn { to { transform: rotate(1turn); } }

/* ===== Le panneau : une conversation ===== */
.menu.buddy-panel {
    width: min(25rem, calc(100dvw - var(--space-account) * 2)); padding: 0; overflow: visible;
    border-radius: 1rem; box-shadow: var(--shadow-dialog), 0 0 0 1px var(--color-line);
}
/* Pas de voile : le panneau est rattaché au buddy, qui doit rester visible (la pointe le désigne). Le ::backdrop
   transparent garde la fermeture au clic hors du panneau (stamina-core-buddy#dismiss). */
.menu.buddy-panel::backdrop { background: transparent; }
/* À droite de la sidebar : décollé du buddy, une pointe vers lui (en haut : le buddy est en haut du menu).
   Dans le tiroir mobile : sous le buddy. */
.menu.buddy-panel[data-popper-placement^="right"] { translate: 1.625rem 0; }
.menu.buddy-panel[data-popper-placement^="bottom"] { translate: 0 .5rem; transform-origin: right top; }
.menu.buddy-panel[data-popper-placement^="right"]::before {
    content: ""; position: absolute; inset-inline-start: -.4375rem; inset-block-end: 1rem;
    width: .75rem; height: .75rem; background: inherit; transform: rotate(45deg);
    box-shadow: -1px 1px 0 var(--color-line);
}
/* La conversation se déploie depuis la mascotte. `scale` laisse à Popper son transform de placement.
   Sans remplissage final : le navigateur libère le calque mis à l’échelle et restitue le texte net. */
.menu.buddy-panel { transform-origin: right bottom; }
.menu.buddy-panel[data-popper-placement^="right"] { transform-origin: left calc(100% - 1.375rem); }
.menu.buddy-panel[data-popper-placement="right-start"]::before { inset-block: .5625rem auto; }
.menu.buddy-panel[data-popper-placement="right-start"] { transform-origin: left .9375rem; }
@media (prefers-reduced-motion: no-preference) {
    .menu.buddy-panel:popover-open {
        animation: buddy-panel-open var(--duration-panel-in) var(--ease-panel-in) backwards;
    }
}
/* Téléphone : la conversation prend tout l'écran, comme le panneau du compte (pas de pointe, pas de déploiement). */
@media (width < 48rem) {
    .menu.buddy-panel, .menu.buddy-panel[data-popper-placement] {
        inset: 0 !important; transform: none !important; translate: none; width: auto; max-width: none; height: 100dvh; max-height: none;
        border-radius: 0; box-shadow: none; animation: none;
    }
    .menu.buddy-panel::before { display: none; }
    .menu.buddy-panel .buddy-chat { height: 100dvh; max-height: none; border-radius: 0; }
    .menu.buddy-panel .buddy-chat__thread { flex: 1; align-content: start; }
    .menu.buddy-panel .buddy-chat__footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}
@keyframes buddy-panel-open {
    from { opacity: 0; scale: .82; }
    65% { opacity: 1; scale: 1.015; }
    to { opacity: 1; scale: 1; }
}

.buddy-loading { display: flex; justify-content: center; gap: .375rem; padding: 3rem 0; }
.buddy-loading span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-accent); opacity: .3; animation: buddy-dot 1s infinite; }
.buddy-loading span:nth-child(2) { animation-delay: .15s; }
.buddy-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes buddy-dot { 50% { opacity: 1; } }

.buddy-chat {
    display: flex; flex-direction: column; max-height: min(40rem, calc(100dvh - var(--space-account) * 2));
    border-radius: 1rem; overflow: hidden; background: var(--color-canvas);
}
.buddy-chat__head {
    flex: none;
    display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem 1rem 1.25rem;
    border-bottom: 1px solid var(--color-line); background: var(--color-surface);
}
.buddy-chat__avatar { flex: none; width: 2.25rem; height: 2.25rem; }
.buddy-chat__avatar .buddy-mascot, .buddy-msg__avatar .buddy-mascot { display: block; width: 100%; height: 100%; }
.buddy-chat__who { display: grid; line-height: 1.25; }
.buddy-chat__who b { color: var(--color-ink); font-size: .9375rem; }
.buddy-chat__who small { display: flex; align-items: center; gap: .375rem; color: var(--color-muted); font-size: .75rem; }
.buddy-chat__dot { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--color-success); }
.buddy-chat__close { margin-inline-start: auto; }

/* Le fil : le buddy à gauche (avatar sur son premier message), l'utilisateur à droite. */
.buddy-chat__thread {
    --buddy-message-inset: 2.375rem; /* Avatar de 1.75rem + espace de .625rem. */
    display: grid; gap: .875rem; min-height: 0; padding: 1.5rem 1.25rem; overflow-y: auto; overscroll-behavior: contain;
}
.buddy-msg { display: flex; align-items: flex-end; gap: .625rem; animation: buddy-in .25s ease-out backwards; }
.buddy-msg__avatar { flex: none; width: 1.75rem; height: 1.75rem; }
/* Sur le fond gris de la conversation, des bulles blanches. */
.buddy-msg__bubble {
    max-width: calc(100% - var(--buddy-message-inset)); padding: .625rem .875rem; border-radius: .875rem;
    background: var(--color-surface); color: var(--color-ink); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgb(29 21 49 / .06), 0 0 0 1px var(--color-line);
}
/* Sa première bulle pointe vers lui : on voit que c'est le buddy qui parle. */
.buddy-msg.is-first:not(.is-me) .buddy-msg__bubble { position: relative; border-bottom-left-radius: .25rem; }
.buddy-msg.is-first:not(.is-me) .buddy-msg__bubble::before {
    content: ""; position: absolute; left: -.4375rem; bottom: .5rem; width: .875rem; height: .875rem; transform: rotate(45deg);
    background: inherit; box-shadow: -1px 1px 0 0 var(--color-line); border-radius: 0 0 0 .1875rem;
}
.buddy-msg.is-me { justify-content: flex-end; margin-block: .375rem; }
.buddy-msg.is-me .buddy-msg__bubble { border-radius: .875rem; background: var(--color-accent); color: var(--color-on-accent, #fff); box-shadow: none; }
.buddy-msg__detail { display: block; margin-top: .25rem; font-size: .8125rem; opacity: .85; white-space: pre-line; }
.buddy-msg.is-warning .buddy-msg__bubble { background: var(--color-warning-soft, #fff4d6); }
.buddy-msg__ok {
    display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-inline-end: .375rem;
    border-radius: 50%; background: var(--color-success); color: #fff; font-size: .625rem; vertical-align: -.2rem;
}
.buddy-msg__links { display: grid; gap: .125rem; margin: .375rem 0 0; padding: 0; list-style: none; }
.buddy-msg__links a { display: flex; align-items: baseline; gap: .5rem; padding: .25rem 0; color: var(--color-accent); font-weight: 600; }
.buddy-msg__links a:hover span { text-decoration: underline; }
.buddy-msg__links i { width: 1rem; flex: none; text-align: center; }
@keyframes buddy-in { from { opacity: 0; transform: translateY(4px); } }

/* L'accueil : une seule liste, sans fond, posée sur le gris du fil (les bulles du buddy, elles, sont blanches) ;
   chaque ligne a son icône de couleur, et blanchit au survol. */
.buddy-menu { display: grid; gap: .125rem; margin-left: var(--buddy-message-inset); }
.buddy-menu a {
    --tone: var(--color-accent);
    display: flex; align-items: center; gap: .75rem; min-height: 2.875rem; padding: .375rem .625rem .375rem .375rem;
    border-radius: .875rem; color: var(--color-ink); font-size: .84375rem; font-weight: 600; line-height: 1.3; text-decoration: none;
    transition: background-color .15s, box-shadow .15s;
}
.buddy-menu a:nth-child(6n + 2) { --tone: #e8930c; }
.buddy-menu a:nth-child(6n + 3) { --tone: #e0489a; }
.buddy-menu a:nth-child(6n + 4) { --tone: #2f80ed; }
.buddy-menu a:nth-child(6n + 5) { --tone: #16a37a; }
.buddy-menu a:nth-child(6n + 6) { --tone: #64748b; }
.buddy-menu a:hover { background: var(--color-surface); box-shadow: 0 1px 2px rgb(29 21 49 / .06), 0 0 0 1px var(--color-line); }
.buddy-menu__icon {
    display: grid; flex: none; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: .75rem; color: #fff; font-size: .9375rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 70%, #fff), var(--tone)); box-shadow: 0 6px 14px -8px var(--tone);
}
.buddy-menu__label { flex: 1; }
.buddy-menu em { padding: .125rem .5rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); font-size: .6875rem; font-style: normal; font-weight: 700; }
.buddy-menu em.is-count { display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .25rem; background: var(--color-accent); color: var(--color-on-accent, #fff); }
.buddy-menu__go { color: var(--color-muted); font-size: .75rem; }

/* L'ancien accueil (tuiles, pages, aide), que reprend encore la présentation « Le nouveau Stamina » (Tour/le-nouveau-stamina/buddy). */
.buddy-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin-left: var(--buddy-message-inset); }
.buddy-actions a {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .625rem;
    min-height: 6.25rem; padding: .875rem; border: 1px solid var(--color-line); border-radius: .875rem;
    background: var(--color-surface); color: var(--color-ink); font-size: .8125rem; font-weight: 600; line-height: 1.35;
}
.buddy-actions__icon { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: .625rem; background: var(--color-accent-soft); color: var(--color-accent); font-size: 1rem; }
.buddy-actions__label { min-height: 2.7em; }
.buddy-actions a:hover { border-color: var(--color-accent); }
.buddy-actions em { color: var(--color-muted); font-size: .75rem; font-style: normal; }
.buddy-pages { display: grid; gap: .5rem; margin-left: var(--buddy-message-inset); }
.buddy-pages a {
    display: flex; align-items: center; gap: .625rem; min-height: 3.25rem; padding: .75rem;
    border: 1px solid var(--color-line); border-radius: .875rem; background: var(--color-surface);
    color: var(--color-ink); font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.buddy-pages a > span { flex: 1; }
.buddy-pages a > i:first-child { color: var(--color-accent); font-size: 1rem; }
.buddy-pages a > i:last-child { color: var(--color-muted); font-size: .75rem; }
.buddy-pages a > em { display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding-inline: .25rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent, #fff); font-size: .6875rem; font-style: normal; }
.buddy-pages a:hover { border-color: var(--color-accent); }
/* L'aide reste accessible, avec un poids visuel secondaire. */
.buddy-assistance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin-left: var(--buddy-message-inset); padding-top: .5rem; border-top: 1px solid var(--color-line); }
.buddy-assistance a { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; color: var(--color-ink-2); font-size: .75rem; text-decoration: none; }
.buddy-assistance i { width: 1rem; color: var(--color-muted); text-align: center; }
.buddy-assistance a:hover { color: var(--color-accent); }
.buddy-assistance a:hover > span { text-decoration: underline; }
.buddy-note__browse { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 0; border-top: 1px solid var(--color-line); color: var(--color-ink-2); font-size: .8125rem; }
.buddy-note__browse:hover { color: var(--color-accent); text-decoration: underline; }

/* Réponses proposées : ce que l'utilisateur peut répondre, de son côté (à droite). */
.buddy-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding-inline-start: var(--buddy-message-inset); }
.buddy-chips form { display: contents; }
.buddy-chip {
    display: inline-flex; align-items: center; gap: .375rem; min-height: 2.125rem; padding: 0 .875rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-line)); border-radius: var(--radius-pill);
    background: var(--color-accent-soft); color: var(--color-accent); font-size: .8125rem; font-weight: 600; cursor: pointer; list-style: none;
}
.buddy-chip::-webkit-details-marker { display: none; }
.buddy-chip:hover { border-color: var(--color-accent); }
.buddy-chip.is-primary { border-color: transparent; background: var(--color-accent); color: var(--color-on-accent, #fff); }
.buddy-chip.is-primary:hover { background: color-mix(in srgb, var(--color-accent) 88%, #000); }

/* La réponse reste dans un pied commun, séparé du fil qui défile. */
/* L'accueil tenu par une compétence (l'IA) : les autres, en une rangée de boutons ronds au-dessus de la saisie ;
   leur nom en infobulle (et pour les lecteurs d'écran), leur compteur en pastille. Toujours sur une ligne. */
.buddy-shortcuts {
    flex: none; display: flex; gap: .375rem; padding: .625rem 1.25rem 0;
    border-top: 1px solid var(--color-line); background: var(--color-surface);
}
.buddy-shortcuts a {
    position: relative; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
    border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-accent); font-size: .8125rem; text-decoration: none;
    transition: border-color .15s, background-color .15s;
}
.buddy-shortcuts a > em {
    position: absolute; top: -.3125rem; right: -.375rem; display: grid; place-items: center; min-width: 1rem; height: 1rem; padding-inline: .1875rem;
    border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent, #fff); font-size: .5625rem; font-style: normal; font-weight: 700;
}
.buddy-shortcuts a:hover { border-color: var(--color-accent); background: var(--color-tile); }
.buddy-shortcuts + .buddy-chat__footer { border-top: 0; }

.buddy-chat__footer { flex: none; padding: 1rem 1.25rem; border-top: 1px solid var(--color-line); background: var(--color-surface); }
.buddy-composer { display: grid; gap: .75rem; }
.buddy-composer__fields { display: grid; gap: .625rem; max-height: min(18rem, 38dvh); overflow-y: auto; min-width: 0; }
.buddy-composer__fields .form-row, .buddy-composer__fields .form-field { margin: 0; }
.buddy-composer__actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.buddy-composer__secondary { margin-right: auto; }
.buddy-composer__shortcuts { display: flex; flex-wrap: wrap; gap: .375rem 1rem; }
.buddy-composer__shortcuts button { color: var(--color-ink-2); font-size: .75rem; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.buddy-composer__shortcuts button:hover { color: var(--color-accent); }
.buddy-reminders { display: grid; gap: .75rem; min-width: 0; }
.buddy-reminders .collection-items { display: grid; gap: .625rem; }
.buddy-reminders .collection-item { align-items: start; margin: 0; padding: 0; border: 0; }
.buddy-reminders .collection-item:has(select option[value=""]:checked) .collection-delete { visibility: hidden; }
.buddy-reminder-row { display: grid; gap: .5rem; min-width: 0; }
.buddy-reminder-row > [hidden] { display: none; }
.buddy-reminder-hint { margin: 0; color: var(--color-ink-2); font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { .buddy-msg { animation: none; } }

/* ===== Sa bulle « Psst ! » (Buddy/_brief) =====
   À droite du buddy de la sidebar, la pointe sur sa bouche (stamina-core-buddy-brief place left/bottom).
   En bas de l'écran, avec son propre buddy, quand la sidebar est un tiroir. */
.buddy-brief {
    position: fixed; inset: auto auto 0 0; margin: 0; padding: 0; overflow: visible;
    width: min(20rem, calc(100dvw - 2rem)); border: 0; background: none; color: var(--color-ink);
}
.buddy-brief:popover-open { display: flex; align-items: flex-end; gap: .5rem; }
.buddy-brief__avatar { display: none; flex: none; width: 2.75rem; height: 2.75rem; }
.buddy-brief__avatar .buddy-mascot { display: block; width: 100%; height: 100%; }
.buddy-brief__bubble {
    --buddy-brief-border: color-mix(in srgb, var(--color-ink) 16%, var(--color-surface));
    position: relative; flex: 1; min-width: 0; padding: 1rem;
    border: 1px solid var(--buddy-brief-border); border-radius: .875rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-pop);
}
/* La pointe, vers la bouche du buddy. */
.buddy-brief__bubble::before {
    content: ""; position: absolute; inset-inline-start: -.375rem; inset-block-end: .875rem;
    width: .75rem; height: .75rem; background: inherit; transform: rotate(45deg);
    box-shadow: -1px 1px 0 var(--buddy-brief-border);
}
.buddy-brief__say { margin: 0; font-size: .875rem; line-height: 1.45; }
.buddy-brief__say b { font-weight: 700; }
.buddy-brief__about { display: block; margin-top: .125rem; color: var(--color-ink-2); }
.buddy-brief__actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.buddy-brief__actions form { margin: 0; }
/* Sous le buddy du haut de la sidebar : la bulle descend, sa pointe en haut. */
.buddy-brief.is-below { inset-block: auto; }
.buddy-brief.is-below:popover-open { align-items: flex-start; }
.buddy-brief.is-below .buddy-brief__bubble::before { inset-block: .5rem auto; }
.buddy-brief.is-docked { inset: auto 1rem 1rem auto; }
.buddy-brief.is-docked .buddy-brief__avatar { display: block; }
.buddy-brief.is-docked .buddy-brief__bubble::before { inset-block-end: .875rem; }
@media (prefers-reduced-motion: no-preference) {
    .buddy-brief:popover-open { animation: buddy-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
    /* Le buddy de la sidebar, qui a quelque chose à dire : il sautille. */
    .account-buddy:has(.buddy-brief) .account-buddy__mascot .buddy-mascot { animation: buddy-hop .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
}
@keyframes buddy-pop { from { opacity: 0; transform: translateX(-.5rem) scale(.92); transform-origin: left bottom; } }

/* Notes contextuelles : même conversation, portée explicite et texte brut. */
.buddy-notes { display: grid; gap: .75rem; }
.buddy-note { padding: .875rem; border: 1px solid var(--color-line); border-radius: .875rem; background: var(--color-surface); }
.buddy-note__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; color: var(--color-muted); font-size: .75rem; }
.buddy-note__meta strong { color: var(--color-ink-2); font-weight: 600; }
.buddy-note__text { margin: .5rem 0 0; color: var(--color-ink); font-size: .875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.buddy-note__actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .75rem; }
.buddy-note__actions form { margin: 0; }
.buddy-notes__empty { margin: 0; color: var(--color-ink-2); font-size: .875rem; line-height: 1.5; }
.buddy-composer textarea { min-height: 6rem; resize: vertical; }
.buddy-note-form__page { display: flex; align-items: baseline; gap: .375rem; margin: 0; color: var(--color-ink-2); font-size: .8125rem; line-height: 1.4; }
.buddy-note-form__page span { min-width: 0; overflow-wrap: anywhere; }
.buddy-note-form__page strong { color: var(--color-ink); font-weight: 600; }
.buddy-note-form__audience { display: flex; flex-wrap: wrap; gap: .75rem; border: 0; margin: 0; padding: 0; }
.buddy-note-form__audience label { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; }
.buddy-note-form__hint { margin: 0; color: var(--color-muted); font-size: .75rem; line-height: 1.4; }
.buddy-note-form__actions { display: flex; justify-content: flex-end; gap: .5rem; }
.buddy-note-preview__list { max-height: min(28rem, 55dvh); overflow-y: auto; overscroll-behavior: contain; }
.buddy-note-preview__item + .buddy-note-preview__item { margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--color-line); }
.buddy-note-preview__error { color: var(--color-danger); font-size: .8125rem; }

}