/* ============================================
   WAB OS — les bulles (partagées)
   Un échange en deux bulles : .chat > .chat__ask (gris chaud, encre,
   la queue en bas à gauche) puis .chat__reply (la réponse de WAB, bleu
   Klein, texte blanc 8,5:1, plus petite, à l'opposé ; blanche à texte
   Klein sur une surface .on-klein). Dans un bloc
   .feat--flip (texte à droite), l'échange se lit en miroir.
   ============================================ */

.chat {
    display: grid;
    gap: 10px;
    width: 100%;
}

.chat__ask,
.chat__reply {
    position: relative;
    isolation: isolate;
    width: fit-content;
    max-width: 100%;
    line-height: 1.35;
    text-wrap: balance;
}

/* La question : gris chaud, la queue en bas à gauche. */
.chat__ask {
    justify-self: start;
    padding: 10px 16px 11px;
    border-radius: 16px 16px 16px 4px;
    background: var(--bubble-ask);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), 0 1px 2px oklch(0.18 0.005 265 / 0.08);
    font-size: 1.05rem;
    color: var(--glass-ink);
}

/* La réponse de WAB : bleu Klein, plus petite, à l'opposé. */
.chat__reply {
    justify-self: end;
    padding: 8px 14px 9px;
    border-radius: 14px 14px 4px 14px;
    background: var(--bubble-reply);
    box-shadow: 0 0 0 var(--hair) var(--bubble-reply-edge), inset 0 1px 0 oklch(1 0 0 / 0.28), 0 3px 8px color-mix(in oklch, var(--klein) 22%, transparent);
    font-size: var(--t-small);
    color: var(--bubble-reply-ink);
}

/* Texte à droite : l'échange se lit en miroir, la question contre le
   bord extérieur. */
.feat--flip .chat__ask {
    justify-self: end;
    border-radius: 16px 16px 4px 16px;
}

.feat--flip .chat__reply {
    justify-self: start;
    border-radius: 14px 14px 14px 4px;
}

@media (max-width: 899px) {
    .feat--flip .chat__ask {
        justify-self: start;
        border-radius: 16px 16px 16px 4px;
    }

    .feat--flip .chat__reply {
        justify-self: end;
        border-radius: 14px 14px 4px 14px;
    }
}