@import '@servicetitan/tokens/dist/tokens.less';

/* stylelint-disable declaration-property-value-no-unknown */
.messageRoot {
    display: grid;
    grid-template-areas: '. content';
    grid-template-rows: auto;
    grid-template-columns: minmax(@spacing-5, auto) 1fr;
    column-gap: @spacing-2;
    row-gap: @spacing-1;
}

.messageFooter {
    text-align: right;
}

.messageContent {
    grid-area: content;
    overflow-wrap: anywhere;
    justify-self: end;
}

.messageBubble {
    color: @color-neutral-200;
    padding: @spacing-2 @spacing-3;
    background-color: @color-neutral-50;
    border-radius: @spacing-3 @spacing-3 @spacing-0 @spacing-3;

    &.error {
        background-color: @color-red-100;
    }
}