.chatBox
    padding: 30px
    width: 100%
    box-sizing: border-box

.chatItem
    display: flex
    flex-direction: row
    justify-content: flex-start
    margin: 20px 0

    .chatAvatar
        width: 40px
        height: 40px
        border-radius: 50% !important
        margin: 5px 10px 0 0 !important
    
    .chatContentWrapper
        display: flex
        flex-direction: column
        width: calc(100% - 110px)

        .chatContent
            background: var(--liushen-card-bg)  // 这个变量得自己改改
            padding: 10px
            border-radius: 0 10px 10px 10px
            width: fit-content
            max-width: 100%
            margin: 5px 0 0 5px
            word-wrap: break-word

    &.me
        flex-direction: row-reverse

        .chatAvatar
            margin: 5px 0 0 10px !important

        .chatContentWrapper
            align-items: flex-end

            .chatContent
                border-radius: 10px 0 10px 10px