body {
    font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
    font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
}

.total-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 45px;
    padding: 0 10px 0 10px;
    background: #28c3d4;
    color: #ffffff;

}

.container {
    display: flex;
    flex-direction: column;
    /* height: 600px; */
    background: white;
    padding: 0 !important;
}



.dialog {
    flex: 1;
    flex-direction: column;
    background: #eeeeee;
    overflow: hidden auto;
}

.dialog img {
    width: 50px;
    height: 50px;
}

.bottom {
    overflow: hidden;
    width: 100%;
    font-size: 0;
}

.bottom>button {
    display: inline-block;
    width: 50%;
    height: 45px;
    font-size: 10px;

    /* 文字换行 */
    word-wrap: break-word !important;
    word-break: break-all !important;
    white-space: normal !important;

}


.left-person {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 5px;
    margin: 5px;
}

.right-person {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-top: 5px;
    margin: 5px;
}

.left-person>div:last-child {
    position: relative;
    margin: 0 0 0 11px;
    padding: 5px;
    max-width: 80%;
    max-width: -webkit-calc(100% - 67px);
    /* overflow: hidden; */
    overflow-wrap: break-word;
    word-break: normal;
    border: 1px solid white;
}

/* .left-person>div:last-child::before {
    position: absolute;
    left: -16px;
    top: 10px;
    content: '';
    width: 0;
    height: 0;
    font-size: 0;
    border-top: 8px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid white;
    border-bottom: 8px solid transparent;
} */

.right-person>div:last-child {
    position: relative;
    margin: 0 11px 0 0;
    padding: 5px;
    max-width: 80%;
    max-width: -webkit-calc(100% - 67px);
    /* overflow: hidden; */
    overflow-wrap: break-word;
    word-break: normal;
    border: 1px solid white;
}

/* .right-person>div:last-child::before {
    position: absolute;
    right: -16px;
    top: 10px;
    content: '';
    width: 0;
    height: 0;
    font-size: 0;
    border-top: 8px solid transparent;
    border-left: 8px solid white;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
} */

/* 手机 */
@media (max-width: 768px) {
    .container {
        flex: 1;
    }

    #left_btn {
        /* border-radius: 0 0 0 10px; */
        outline: none;
    }

    #right_btn {
        /* border-radius: 0 0 10px 0; */
        outline: none;
    }

    .wapper{
        display: flex;
        height: 100vh;
    }

}


/* 电脑 */
@media (min-width: 768px) {

    /* 设置宽度 */
    .container {
        width: 350px;
        height: 600px; 
    }

    /* 垂直居中 */
    .center-vertical {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* 设置边框圆角 */
    #left_btn {
        border-radius: 0 0 0 10px;
        outline: none;
    }

    #right_btn {
        border-radius: 0 0 10px 0;
        outline: none;
    }

    .total-head {
        border-radius: 10px 10px 0 0;
    }
}