.chat-content {
    width: 100%;
    // padding: 20px;
    // background-color: pink;

    .word {
        display: flex;
        margin-bottom: 20px;

        img {
            width: 40px;
            height: 40px;
            margin-top: 10px;
            border-radius: 50%;
        }

        .info {
            margin-left: 10px;

            .time {
                font-size: 12px;
                color: rgba(51, 51, 51, 0.8);
                margin: 0;
                height: 20px;
                line-height: 20px;
                margin-top: -5px;
            }

            .info-content {
                max-width: 100vh;
                padding: 10px;
                font-size: 14px;
                background: #fff;
                border: 1px solid #f5f5f5;
                position: relative;
                margin-top: 8px;
                /* 使用 word-wrap 或 overflow-wrap 控制文本换行 */
                word-wrap: break-word;
                /* 适用于旧版本浏览器 */
                overflow-wrap: break-word;
                /* 适用于新版本浏览器 */
            }

            //小三角形
            .info-content::before {
                position: absolute;
                left: -8px;
                top: 8px;
                content: '';
                border-right: 10px solid #FFF;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
            }
        }
    }

    .word-my {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;

        img {
            width: 40px;
            height: 40px;
            margin-top: 10px;
            border-radius: 50%;
        }

        .info {
            width: 90%;
            margin-left: 10px;
            text-align: right;

            .time {
                font-size: 12px;
                color: rgba(51, 51, 51, 0.8);
                margin: 0;
                height: 20px;
                line-height: 20px;
                margin-top: -5px;
                margin-right: 10px;
            }

            .info-content {
                max-width: 70%;
                padding: 10px;
                font-size: 14px;
                float: right;
                margin-right: 10px;
                position: relative;
                margin-top: 8px;
                background: #A3C3F6;
                text-align: left;
                /* 使用 word-wrap 或 overflow-wrap 控制文本换行 */
                word-wrap: break-word;
                /* 适用于旧版本浏览器 */
                overflow-wrap: break-word;
                /* 适用于新版本浏览器 */
            }

            //小三角形
            .info-content::after {
                position: absolute;
                right: -8px;
                top: 8px;
                content: '';
                border-left: 10px solid #A3C3F6;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
            }
        }
    }
}