/**
 * 框架基础样式覆盖
 */
.am-btn.am-radius,
.am-badge.am-radius,
.am-switch {
    border-radius: 100rem !important;
}
.am-radius,
.am-table-scrollable-horizontal,
.am-img-thumbnail.am-radius,
.am-modal-dialog,
.am-popup .am-popup-inner,
.chosen-container .chosen-single,
.chosen-container .chosen-search input[type="text"],
.form-table-search td select[multiple],
.form-table-search td select[size],
.form-table-search td .chosen-container-multi .chosen-choices,
.am-alert,
.pagination-input,
ul.plug-file-upload-view li,
ul.plug-file-upload-view li img, ul.plug-file-upload-view-video li video,
.plug-file-upload-submit,
.am-popover,
.am-input-group-label {
    border-radius: 0.6rem !important;
}
.am-list li:first-child,
.am-modal-dialog .am-modal-hd {
    border-top-left-radius: 0.6rem !important;
    border-top-right-radius: 0.6rem !important;
}
.am-list li:last-child {
    border-bottom-left-radius: 0.6rem !important;
    border-bottom-right-radius: 0.6rem !important;
}
div.chosen-container-multi.chosen-with-drop .chosen-choices,
div.chosen-container.chosen-with-drop .chosen-single {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
.chosen-container .chosen-drop {
    border-bottom-left-radius: 0.3rem !important;
    border-bottom-right-radius: 0.3rem !important;
}
.am-input-group .am-form-field:first-child, .am-input-group-label:first-child, .am-input-group-btn:first-child > .am-btn, .am-input-group-btn:first-child > .am-btn-group > .am-btn, .am-input-group-btn:first-child > .am-dropdown-toggle, .am-input-group-btn:last-child > .am-btn:not(:last-child):not(.dropdown-toggle), .am-input-group-btn:last-child > .am-btn-group:not(:last-child) > .am-btn {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.am-input-group .am-form-field:last-child, .am-input-group-label:last-child, .am-input-group-btn:last-child > .am-btn, .am-input-group-btn:last-child > .am-btn-group > .am-btn, .am-input-group-btn:last-child > .am-dropdown-toggle, .am-input-group-btn:first-child > .am-btn:not(:first-child), .am-input-group-btn:first-child > .am-btn-group:not(:first-child) > .am-btn {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}
.am-table,
.am-panel {
    border-radius: 0.3rem;
}
.am-panel .am-panel-hd {
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}
.am-table thead tr th:first-child {
    border-top-left-radius: 0.3rem;
}
.am-input-group .am-form-field:first-child {
    border-top-left-radius: 0.6rem !important;
    border-bottom-left-radius: 0.6rem !important;
}
.am-input-group-btn:last-child > .am-btn {
    border-top-right-radius: 0.6rem !important;
    border-bottom-right-radius: 0.6rem !important;
}
.am-container {
    padding: 0;
}

/**
 * 加载中
 */
.chat-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 25%;
    text-align: center;
    background: #eee;
    color: #666;
    z-index: 1;
}


/**
 * 客服基础
 */
body {
    background: #eee url(../../images/user-chat-bg.jpg) center 0 no-repeat;
    background-size: cover;
    height: 100%;
}
.chat-container {
    width: 100%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-box-shadow: 0.1rem 0.1rem 1.5rem 0 rgb(0 0 0 / 30%);
    box-shadow: 0.1rem 0.1rem 1.5rem 0 rgb(0 0 0 / 30%);
    overflow: hidden;
}
.chat-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-gradient(linear,right top,left top,from(#1890ff),to(#1d6aff));
    background: linear-gradient(270deg,#1890ff,#1d6aff);
    padding: 1.4rem 1.4rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 5.5rem;
    font-size: 1.6rem;
    color: #fff;
}
.chat-header img.avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-right: 1rem;
    background: #fff;
}
.chat-header span.name {
    font-size: 1.4rem;
}
.chat-base {
    height: 100%;
}
.chat-left,
.chat-right {
    height: calc(100% - 5.5rem);
    max-height: 100%;
}
.chat-right {
    width: 26rem;
    border-left: 0.1rem solid #eee;
    text-align: center;
    resize: none;
    float: right;
}
.chat-right img {
    max-width: 100%;
}
.chat-content,
.chat-footer,
.chat-right {
    padding: 1rem;
}
.chat-content {
    height: calc(100% - 18rem);
    max-height: 100%;
    resize: none;
    text-align: center;
}
.chat-footer {
    height: 18rem;
    border-top: 0.1rem solid #eee;
    position: relative;
    padding-top: 0.5rem;
}
.chat-footer textarea {
    resize: none;
    border: 0;
    width: 100%;
    height: calc(100% - 8.6rem);
    max-height: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.chat-footer-button {
    text-align: right;
    margin-top: 1rem;
}
.chat-footer-button .error-tips {
    color: #f00;
    margin-right: 2rem;
}
.chat-footer-button .error-tips span {
    margin-left: 0.2rem;
}
.chat-left.right-hide {
    width: calc(100% - 26rem);
}
@media only screen and (min-width: 950px) {
    .am-container {
        max-width: 120rem;
        max-height: 68rem;
        border-radius: 0.8rem;
    }
    .chat-left {
        float: left;
        width: calc(100% - 52rem);
    }
}
@media only screen and (max-width: 950px) {
    .chat-left {
        width: calc(100% - 26rem);
        float: right;
    }
    .chat-right {
        display: none;
    }
}

/**
 * 左侧用户列表
 */
.chat-group {
    width: 26rem;
    height: calc(100% - 5.5rem);
    max-height: 100%;
    resize: none;
    float: left;
    border-right: 0.1rem solid #eee;
    text-align: center;
}
.chat-group ul li {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border-bottom: 0.1rem solid #f5f5f5;
    cursor: pointer;
    border-left: 0.3rem solid #fff;
    text-align: left;
    max-height: 7rem;
}
.chat-group ul li .avatar {
    position: relative;
    margin-right: 1rem;
}
.chat-group ul li .avatar img {
    width: 4rem;
    height: 4rem;
    border-radius: 100rem;
    background: #fff;
}
.chat-group ul li .avatar,
.chat-group ul li .base {
    float: left;
}
.chat-group ul li .time {
    float: right;
    max-width: 10rem;
}
.chat-group ul li .message-tips,
.chat-group ul li .time {
    color: #999;
}
.chat-group ul li .name,
.chat-group ul li .message-tips,
.chat-group ul li .time {
    word-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.chat-group ul li .badge {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    background: #f00;
    color: #fff;
    line-height: 0;
    padding: 0.8rem 0.5rem;
    min-width: 1.6rem;
    text-align: center;
    border-radius: 100rem;
    -webkit-box-shadow: 0 0 0.5rem rgb(0 0 0 / 60%);
    box-shadow: 0 0 0.5rem rgb(0 0 0 / 60%);
}
.chat-group ul li .base {
    width: calc(100% - 15.2rem);
}
.chat-group ul li .status {
    position: absolute;
    right: 0.3rem;
    bottom: 0;
    width: 0.8rem;
    height: 0.8rem;
    background: #48d452;
    border: 0.1rem solid #fff;
    border-radius: 50%;
}
.chat-group ul li .status.off {
    background: #999;
}
.chat-group ul li.active {
    border-left: 0.3rem solid #03a9f4;
    background: #f3f3f3;
}
.chat-group .message-more {
    text-align: center;
    padding: 1rem 0;
}
.chat-group .message-more a {
    color: #999;
    text-decoration: none;
}
.chat-group .message-more a:hover {
    color: #333;
}
@media only screen and (max-width: 640px) {
    .chat-group {
        width: 13rem;
    }
    .chat-group ul li .avatar img {
        width: 3rem;
        height: 3rem;
        margin-top: 0.5rem;
    }
    .chat-left,
    .chat-left.right-hide {
        width: calc(100% - 13rem);
    }
    .chat-group ul li .base {
        width: calc(100% - 4.5rem);
    }
 
    .chat-group ul li .time {
        display: none;
    }
}

/**
 * 消息内容
 */
.chat-content .message-list .user-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 100rem;
}
.chat-content .message-list .user-message-content {
    margin: 1rem 0;
    padding: 1rem;
    background: #cde0ff;
    color: #000;
    font-size: 1.4rem;
    border-radius: 0.6rem;
    max-width: calc(100% - 4.5rem);
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
}
.chat-content .message-list .user-message-content a {
    color: #2196f3;
    text-decoration: none !important;
}
.chat-content .message-list .user-message-content a:hover {
    color: #0887eb;
}
.chat-content .message-list .user-message-content img,
.chat-content .message-list .user-message-content video {
    max-width: 100%;
}
.chat-content .message-left {
    text-align: left;
}
.chat-content .message-right {
    text-align: right;
}
.chat-content .message-left .user-message-content {
    margin-left: 1rem;
    background: #ededed;
}
.chat-content .message-right .user-message-content {
    margin-right: 1rem;
    text-align: left;
}
.chat-content > .time {
    text-align: center;
    color: #999;
    font-size: 1.4rem;
    margin: 1.5rem 0;
}
.chat-content .message-resources-see {
    margin-left: calc(50% - 1.2rem);
}
.chat-content .message-more {
    text-align: center;
    padding: 1rem 0;
}
.chat-content .message-more a {
    color: #ff5722;
    text-decoration: none;
}
.chat-content .message-more a:hover {
    color: #f00;
}
.chat-content .message-pure .user-avatar {
    display: none;
}
.chat-content .message-pure .user-message-content {
    min-width: calc(100% - 2rem);
    background: #e5eeff;
    color: #3876e9;
}
.chat-footer-button button {
    background: #3875ea;
    border-color: #3875ea;
    color: #fff !important;
    padding-left: 2rem;
    padding-right: 2rem;
}
.chat-footer-button button:hover,
.chat-footer-button button:focus,
.chat-footer-button button:active {
    background: #1b68ff;
    border-color: #1b68ff;
}
.chat-content .message-list .user-message-content .msg-business-data-loading {
    color: #979797;
    margin-top: 0.5rem;
}

/**
 * 聊天工具栏
 */
.chat-message-tools {
    height: 3.6rem;
}
.chat-message-tools label {
    color: #888;
    font-size: 2rem;
    cursor: pointer;
}
.chat-message-tools label:hover {
    color: #333;
}
.chat-message-tools label:not(:last-child) {
    margin-right: 1rem;
}
.chat-message-tools input[type="file"] {
    position: fixed;
    left: -9999999.9rem;
    top: -9999999.9rem;
}

/**
 * 工具模块
 */
.tools-module-container {
    position: absolute;
    width: calc(100% - 2rem);
    top: -21rem;
    display: none;
}
.tools-module-container .am-close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.tools-module-container .module-content {
    height: 20rem;
    background: #fff;
    border: 0.1rem solid #eee;
    resize: none;
    -webkit-box-shadow: 0.1rem -0.1rem 1rem 0 rgb(0 0 0 / 20%);
    box-shadow: 0.1rem -0.1rem 1rem 0 rgb(0 0 0 / 20%);
    border-radius: 0.6rem;
    text-align: center;
}

/**
 * 表情
 */
.tools-module-container.emoji-container ul li {
    height: 5rem;
}
.tools-module-container.emoji-container ul li a:hover {
    font-size: 3.2rem;
}
.tools-module-container.emoji-container .emoji-icon {
    font-size: 3rem;
    text-decoration: none !important;
}

/**
 * 快捷消息
 */
.quick-message-container .module-content {
    padding-bottom: 4rem;
}
.quick-message-container ul {
    margin: 1rem;
}
.quick-message-container ul li {
    position: relative;
}
.quick-message-container ul li a {
    padding: 0.5rem 4.5rem 0.5rem 1.5rem;
    display: block;
    text-decoration: none !important;
}
.quick-message-container ul li:not(:last-child) {
    border-bottom: 0.1rem solid #eee;
}
.quick-message-container ul li i {
    cursor: pointer;
    color: #f00;
    position: absolute;
    top: 0.5rem;
    right: 2.2rem;
    padding: 0px 0.5rem;
    z-index: 1;
}
.quick-message-container .quick-message-form {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: calc(100% - 2rem);
    z-index: 1;
}
.quick-message-container .quick-message-form .am-form-field:first-child {
    border-top-left-radius: 100rem !important;
    border-bottom-left-radius: 100rem !important;
    border-color: #3875ea;
}
.quick-message-container .quick-message-form .am-input-group-btn:last-child > .am-btn {
    border-top-right-radius: 100rem !important;
    border-bottom-right-radius: 100rem !important;
    background: #3875ea;
    border-color: #3875ea;
    color: #fff !important;
}
.quick-message-container .quick-message-form .am-input-group-btn:last-child > .am-btn:hover {
    background: #1b68ff;
    border-color: #1b68ff;
}

/**
 * 正在输入状态
 */
.chat-input-status-container {
    position: absolute;
    left: 1rem;
    top: -5rem;
    text-align: left;
    background: rgb(255 249 239 / 70%);
    -webkit-box-shadow: 0.1rem -0.2rem 1rem 0 rgb(0 0 0 / 10%);
    box-shadow: 0.1rem -0.2rem 1rem 0 rgb(0 0 0 / 10%);
    padding: 1rem;
    border-radius: 0.6rem;
    height: auto;
    max-height: 16rem;
    resize: none;
    width: calc(100% - 2rem);
    border: 0.1rem solid #ffefd9;
}
.chat-input-status-container .tips {
    color: #888;
}
.chat-input-status-container .msg {
    color: #ff9800;
    margin-left: 1rem;
}

/**
 * 空内容占位
 */
.container-not-data .not-data-msg {
    color: #999;
    margin-top: 35%;
}

/**
 * 消息商品
 */
.chat-message-goods {
    margin: 0.5rem 0;
}
.chat-message-goods span.title {
    color: #666;
}
.chat-message-goods span.desc {
    color: #888;
}
.chat-message-goods .goods-base {
    margin-left: 1rem;
}
.chat-message-goods tr td:first-child,
.chat-message-goods .goods-images {
    width: 6rem;
    height: 6rem;
    border-radius: 0.6rem;
}
.chat-message-goods .goods-title {
    max-width: 36rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.8rem;
    max-height: 3.4rem;
    white-space: initial !important;
}
.chat-message-goods .goods-price {
    color: #c00;
    margin-right: 0.2rem;
}
@media only screen and (max-width: 640px) {
    .chat-message-goods tr td:first-child,
    .chat-message-goods .goods-images {
        width: 4rem;
        height: 4rem;
    }
}
@media only screen and (max-width: 320px) {
    .chat-message-goods tr td:first-child,
    .chat-message-goods .goods-images {
        width: 2rem;
        height: 2rem;
    }
}

/**
 * 来源推送数据
 */
.source-push-container {
    position: absolute;
    top: -10.8rem;
    right: 0;
    background: rgb(255 255 255 / 90%);
    width: calc(100% - 2rem);
    margin: 1rem;
    border: 0.1rem solid #eee;
    padding: 1rem 0.5rem;
    border-radius: 0.6rem;
    -webkit-box-shadow: 0.1rem 0.1rem 1.5rem 0 rgb(0 0 0 / 10%);
    box-shadow: 0.1rem 0.1rem 1.5rem 0 rgb(0 0 0 / 10%);
    text-align: center;
}
.source-push-container .base {
    overflow: hidden;
    margin-bottom: 0.3rem;
}
.source-push-container .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 1.8rem;
    height: 3.4rem;
    white-space: initial !important;
    float: right;
    width: calc(100% - 5rem);
    color: #666;
    text-align: left;
}
.source-push-container .images {
    width: 4rem;
    height: 4rem;
    border-radius: 0.6rem;
    float: left;
}
.source-push-container .submit-close {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}