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

@color-gradient-bot-start: #2270ee;
@color-gradient-bot-end: #8772e5;

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

    .messageContent {
        max-width: 100%;
        grid-area: content;
        overflow-wrap: anywhere;
        justify-self: flex-start;
    }

    &.fullWidth {
        width: 100%;

        .messageContent {
            width: 100%;
        }
    }

    .messageAvatar {
        grid-area: avatar;
    }

    .messageBubble {
        color: @color-neutral-200;
        padding: @spacing-2 @spacing-3;
        background-color: @color-blue-100;
        position: relative;
        border-radius: @spacing-0 @spacing-3 @spacing-3 @spacing-3;
        box-sizing: border-box;

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

            &::after {
                background: @color-red-200;
            }
        }
    }
}