.message {
    width: 100%;
    padding: 12px;

    &.user {
        background-color: var(--shadeColor);

        &:not(.lastUser) .content .text {
            opacity: 0.5;
            font-size: 12px;
        }
    }

    &.assistant {
        border-top: 1px solid var(--backgroundColorDark);
    }

    .content {
        white-space: pre-wrap;
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;

        >textarea {
            border: var(--border);
            min-height: 100px;
            height: unset;
            line-height: 1.5;
            padding: 5px;
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .summary {
            opacity: 0.7;
        }

        .buttons {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;

            .swipes {
                display: flex;
                width: 100%;
                flex-direction: row;
                justify-content: space-between;
                gap: 8px;

                >div {
                    cursor: pointer;
                    font-size: 20px;
                }
            }
        }
    }
}

.text {
    flex-grow: 1;
    width: 100%;
    animation-duration: 300ms;

    :global(.bold) {
        font-weight: bold;
    }

    :global(.italic) {
        font-style: italic;
        color: var(--italicColor);
    }

    :global(.quote) {
        color: var(--quoteColor);
    }
}