/* Bulle — modèle canonique ; son emploi : canon_bubble.md. */

@layer components {
    .bubble {
        max-width: var(--bubble-width, 80%);
        padding: var(--bubble-padding, var(--canon-space-3) var(--canon-space-4));
    }
    .bubble[data-bubble-role="user"] {
        align-self: flex-end;
    }
    .bubble[data-bubble-role="assistant"] {
        align-self: flex-start;
    }
    .bubble[data-bubble-role="system"] {
        align-self: center;
    }
    .bubble-role {
        display: block;
        margin-block-end: var(--canon-space-1);
    }

    .bubble {
        border: var(--canon-line-width) solid var(--bubble-line, var(--canon-theme-line));
        border-radius: var(--bubble-radius, var(--canon-radius-card));
        background-color: var(--bubble-surface, var(--canon-theme-raised));
    }
    .bubble[data-bubble-role="user"] {
        background-color: var(--bubble-surface-user, var(--canon-theme-surface-selected));
    }
    .bubble[data-bubble-role="system"] {
        background-color: var(--bubble-surface-system, var(--canon-theme-highlight));
    }

    .bubble[data-bubble-role="system"] {
        font-size: var(--canon-size-note);
    }
    .bubble-role {
        font-size: var(--canon-size-fine);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--canon-theme-muted);
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    /* Le fil de l'essai : la réponse sans cadre, en pleine largeur ; la question aussi, tant que la
       conversation n'est pas une discussion. En discussion, elle prend la bulle du modèle, sur la palette
       de l'essai, qui a son propre mode sombre. */
    .chat-message[data-bubble-role="assistant"],
    .chat-conversation:not([data-chat-discussion]) .chat-message {
        --bubble-width: 100%;
        --bubble-padding: 0px;
        --bubble-radius: 0px;
        --bubble-line: transparent;
        --bubble-surface: transparent;
        --bubble-surface-user: transparent;
    }
    .chat-conversation[data-chat-discussion] .chat-message[data-bubble-role="user"] {
        --bubble-line: var(--essay-line);
        --bubble-surface-user: var(--essay-surface);
    }
}