.service-chat {
    /* 聊天气泡 */
    .head-icon {
        height: 90px;
        width: 90px;
        border-radius: 50%;
    }

    .chat-info {
        position: relative;
        overflow: hidden;

        span.image {
            padding: 15px;
        }

        .chat-image {
            max-width: 100%;
            max-height: 540px;
        }
    }

    .msg-content {
        display: inline-block;
        padding: 25px 35px;
        font-size: 28px;
        word-break: break-all;
        border-radius: 10px;

        &.msg-pic {
        }

        &.msg-order {
        }
    }

    .msg-txt {
        .link {
            color: #60a1f1;
        }

        img[yohotype=emo] {
            display: inline;
        }
    }

    .fake-img-wrap {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #000;
        z-index: 9;
        overflow: hidden;

        img {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            max-height: 100%;
        }
    }

    .msg-wrap {
        overflow: hidden;
        margin-bottom: 30px;
    }

    .send-msg {
        .msg-content {
            float: right;
            margin: 0 12px 0 0;
            background: #fff;
            color: #444;
            max-width: 90%;

            &:after {
                content: "";
                position: absolute;
                display: inline-block;
                width: 0;
                height: 0;
                font-size: 0;
                border: 10px solid;
                border-radius: 2px;
                top: 0;
                right: 0;
                border-color: #fff transparent transparent #fff;
            }
        }

        .head-icon {
            float: right;
        }

        .msg-status {
            float: right;
            display: inline-block;
            height: 34px;
            width: 34px;
            margin-right: 10px;
            font-size: 28px;
            line-height: 34px;
            text-align: center;
            color: transparent;
            border-radius: 50%;
        }

        &.send-fail .msg-status {
            color: #ff575c;

            &:after {
                content: "\e61f";
            }
        }

        &.send-loading .msg-status {
            color: transparent;
            background-image: resolve("service/chat/loading.gif");
            background-size: 100% 100%;
        }
    }

    /*.send-msg-status {

    }*/

    .recevied-msg {
        .head-icon {
            float: left;
        }

        .msg-content {
            max-width: 90%;
            margin: 0 0 0 10px;
            background: #646464;
            color: #fff;

            &:before {
                content: "";
                position: absolute;
                display: inline-block;
                width: 0;
                height: 0;
                font-size: 0;
                border: 10px solid;
                border-radius: 2px;
                top: 0;
                left: 0;
                border-color: #646464 #646464 transparent transparent;
            }
        }
    }

    .msg-order {
        padding: 25px 35px;
        background: #fff;
        margin: 0 12px 0 0;
        overflow: hidden;

        &:after {
            content: "";
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            font-size: 0;
            border: 10px solid;
            border-radius: 2px;
            top: 0;
            right: 0;
            border-color: #fff transparent transparent #fff;
        }

        img {
            height: 173px;
            width: 128px;
            float: left;
            margin-right: 10px;
        }

        .order-info {
            overflow: hidden;
            line-height: 1.7;
        }

        span {
            padding: 0;
            font-size: 28px;
            line-height: 1;
        }

        .red {
            color: #d0021b;
        }

        .label {
            color: #b0b0b0;
        }
    }

    /* 网络连接失败 */
    .connection-failed {
        position: absolute;
        top: 105px;
        left: 0;
        text-align: center;
        height: 70px;
        width: 100%;
        line-height: 70px;
        color: #fff;
        background: rgba(255, 0, 0, 0.5);
        z-index: 1;
    }

    /* 时间 */
    .chat-time {
        text-align: center;
        font-size: 24px;
        color: #b0b0b0;
        margin-bottom: 20px;
    }

    /* 系统信息 */
    .sysinfo {
        .blue {
            color: #4a90e2;
        }
    }

    /* 客服留言 */
    .leave-msg-wraper,
    .change-mm {
        text-align: center;
        margin-bottom: 20px;
    }

    .leave-msg {
        display: inline-block;
        padding: 15px 35px;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid transparent;
        outline: none;
        border-radius: 5px;
        color: #fff;
        font-size: 24px;
        overflow: hidden;

        a {
            color: #60a1f1;
        }
    }
}