/* Le petit chat qui guide dans les fiches (voir js/chat-guide.js).
   Couleurs réglables par fiche : --mk-chat-bg, --mk-chat-fg, --mk-chat-bord (fiches sombres),
   et selon le ton : bravo (vert d'eau), indice (abricot), question (lilas). */
.mk-chat {
    --mk-chat-bg: #ffffff;
    --mk-chat-fg: #1e293b;
    --mk-chat-bord: rgba(15, 23, 42, 0.1);
    --mk-chat-taille: 64px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 30rem;
    margin: 18px 0;
}
.mk-chat[data-cote="droite"] { flex-direction: row-reverse; margin-left: auto; }
.mk-chat[data-ton="bravo"] { --mk-chat-bg: #e8f7ef; --mk-chat-bord: #b7e4c7; }
.mk-chat[data-ton="indice"] { --mk-chat-bg: #fff4e6; --mk-chat-bord: #ffd8a8; }
.mk-chat[data-ton="question"] { --mk-chat-bg: #f3efff; --mk-chat-bord: #d6ccff; }

.mk-chat-sprite {
    flex: none;
    width: var(--mk-chat-taille);
    height: var(--mk-chat-taille);
    background-image: var(--mk-chat-img);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: calc(var(--mk-chat-n, 3) * var(--mk-chat-taille)) var(--mk-chat-taille);
    image-rendering: pixelated;
    animation: mk-chat-anim var(--mk-chat-d, 1.3s) steps(var(--mk-chat-n, 3)) infinite;
}
@keyframes mk-chat-anim {
    to { background-position: calc(var(--mk-chat-n, 3) * var(--mk-chat-taille) * -1) 0; }
}

.mk-chat-bulle {
    position: relative;
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--mk-chat-bord);
    background: var(--mk-chat-bg);
    color: var(--mk-chat-fg);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}
/* la pointe de la bulle, tournée vers le chat */
.mk-chat-bulle::before {
    content: '';
    position: absolute;
    bottom: 10px;
    left: -7px;
    width: 12px;
    height: 12px;
    background: var(--mk-chat-bg);
    border-left: 1px solid var(--mk-chat-bord);
    border-bottom: 1px solid var(--mk-chat-bord);
    transform: rotate(45deg);
}
.mk-chat[data-cote="droite"] .mk-chat-bulle::before {
    left: auto;
    right: -7px;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid var(--mk-chat-bord);
    border-top: 1px solid var(--mk-chat-bord);
}

.mk-chat-pop .mk-chat-bulle { animation: mk-chat-pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes mk-chat-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-chat-sprite { animation: none; }
    .mk-chat-pop .mk-chat-bulle { animation: none; }
}