/* 记账系统气泡宽度限制，保持与普通消息一致 */
.msg .content.accounting-bubble {
    max-width: 65% !important;
    width: 100%;
    float: left;
    margin: 6px 0 0 12px;
    box-sizing: border-box;
}
.msg.on .content.accounting-bubble {
    max-width: 65% !important;
    width: 100%;
    float: right;
    margin: 6px 12px 0 0;
    background-color: #95ec69;
    box-sizing: border-box;
}
/* 记账系统专用全宽样式，强制覆盖所有聊天内容父级宽度限制 */
.msg.accounting-fullwidth,
.msg-box.accounting-fullwidth,
.service.accounting-fullwidth {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: block !important;
    text-align: initial !important;
    background: none !important;
}
/* 记账系统专用全宽样式，强制覆盖所有聊天内容宽度限制 */
.msg .content.accounting-fullwidth {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: block !important;
    text-align: initial !important;
    background: none !important;
}
/* 
 * 在线客服系统样式表
 * 包含访客端和客服端的通用样式
 */

/* 基础重置样式 */
* {
    margin: 0; 
    padding: 0;
}

body {
    font-size: 15px; 
    background-color: #c4c4c4; 
    font-family: "Microsoft YaHei","宋体", Arial, "新宋体";
}

/* 清除浮动 */
.clearfix::after {
    content:""; 
    display:block; 
    clear:both;
}

/* 文本对齐 */
.text-center::after {
    content: ' '; 
    display: inline-block; 
    width: 0; 
    height: 100%; 
    vertical-align: middle; 
    margin-top: 4px;
}

/* 
 * ==========================================
 * 访客端样式
 * ==========================================
 */

/* 主容器 */
.service {
    width: 100%; 
    max-width: 640px; 
    height: 100%; 
    position: fixed; 
    left: 0; 
    right: 0; 
    margin: auto; 
    display: flex; 
    flex-direction: column;
}

/* 头部区域 */
.msg-head {
    height: 40px; 
    background-color: #efefef; 
    border-bottom: 1px solid #e2e2e2; 
    color: #333; 
    font-size: 17px; 
    text-align: center; 
    position: relative;
}

.msg-head a {
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    position: absolute; 
    left: 2px; 
    text-decoration: none; 
    color: #353535;
}

.msg-head a i {
    font-size: 22px;
}

.msg-head .tha {
    height: 20px; 
    line-height:22px;
}

.msg-head .thb {
    height:20px; 
    line-height:20px; 
    font-size:16px;
}

/* 消息显示区域 */
.msg-box {
    flex: 1; 
    background-color: #f3f3f3; 
    padding: 10px 10px 0; 
    line-height: 1.3; 
    box-sizing: border-box; 
    overflow-y: auto;
} 

.msg {
    margin-bottom: 10px;
}

.msg:last-of-type {
    margin-bottom: 16px;
}

/* 消息气泡样式 */
.msg .img1 {
    width:45px; 
    height: 45px; 
    float: left;
}

.msg .img2 {
    display: none;
}

.msg .content {
    max-width: 65%; 
    float: left; 
    border: 1px solid #f1eded; 
    border-radius: 5px; 
    background-color: #fff; 
    margin: 6px 0 0 12px; 
    padding: 8px; 
    box-sizing: border-box; 
    position: relative; 
    text-align: justify;
}

.content .indicate {
    width: 0; 
    height: 0; 
    border: 12px solid; 
    border-color: transparent; 
    position: absolute; 
    top: 5px;
}

.msg .content .left-indicate {
    border-right-color: #fff;  
    left: -20px;
}

.msg .content .right-indicate {
    display: none;
}

/* 访客消息样式 */
.msg.on .img1 {
    display: none;
}

.msg.on .img2 {
    float: right; 
    width:45px; 
    height: 45px; 
    display: block;
}

.msg.on .content {
    float: right; 
    margin: 6px 12px 0 0; 
    background-color: #95ec69;
}

.msg.on .content .left-indicate {
    display: none;
}

.msg.on .content .right-indicate {
    border-left-color: #95ec69; 
    right: -20px; 
    display: block;
}

.msg-box p {
    margin-top: -6px;
}

/* 表单元素样式重置 */
input, textarea {
    border: none;
} 

input:focus, textarea:focus {
    outline: none; 
    outline-offset: 0;
}

/* 消息发送区域 */
.msg-post {
    height: 50px; 
    background-color: #e3e3e3; 
    display: flex; 
    padding: 6px; 
    box-sizing: border-box;
}

.msg-post textarea {
    resize: none; 
    font-size: 15px; 
    line-height: 1.3; 
    padding: 3px 37px 3px 3px; 
    flex: 1; 
    border: 1px solid #ccc; 
    border-radius: 3px;
}

.msg-post label {
    position: absolute; 
    right: 72px; 
    bottom: 5px; 
    height: 38px; 
    line-height: 38px;
}

.msg-post label .iconfont {
    font-size: 36px; 
    color: #090c84; 
    vertical-align: -1px;
}

.msg-post input[type="file"] {
    display: none;
}

.msg-post input[type="button"] {
    padding: 0 12px; 
    font-size: 15px; 
    margin-left: 8px; 
    background-color: #0679c7; 
    border-radius: 3px; 
    color: #fff; 
    cursor: pointer;
}

.msg-post .back {
    width: 50px; 
    line-height: 38px; 
    text-align: center; 
    background-color: #35ace0; 
    border-radius: 3px;
}

.msg-post .back a {
    text-decoration:none; 
    color:inherit;
}

/* 
 * ==========================================
 * 客服端样式
 * ==========================================
 */

/* 客服主容器 */
.pc-service {
    width: 372px; 
    height: 100%; 
    display: flex; 
    flex-direction: column;
}

.service-box {
    flex: 1; 
    font-size: 14px; 
    background-color: #fff; 
    overflow-y: auto; 
    vertical-align: baseline;
}

/* 用户列表 */
.user-box {
    padding: 10px 10px 0;
}

.user-box a {
    text-decoration:none; 
    color:inherit;
}

.user-list {
    height: 46px; 
    background-color: #f2f2f2; 
    padding: 5px; 
    display: flex; 
    margin-bottom: 10px; 
    border-radius: 5px;
}

.user-list img {
    width: 46px;
}

.user-list .user {
    margin-left: 6px; 
    padding-top: 3px; 
    flex: 1; 
    width: 0;
}

.user-list .user .name {
    height: 23px; 
    line-height: 23px; 
    font-size: 17px; 
    color: #333;
}

.user-list .user .name .ison {
    margin-left: 6px; 
    font-size: 13px; 
    color: #860808; 
    vertical-align: 1px;
}

.user-list .user .last-msg {
    height: 20px; 
    line-height: 20px; 
    color: #808080; 
    padding-left: 2px; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}

.user-list .data {
    width: 82px; 
    text-align: right;
}

.user-list .data .time {
    height: 27px; 
    line-height: 27px; 
    color: #555;
}

.user-list .data .num {
    width: 20px; 
    height: 17px; 
    border-radius: 8px; 
    background-color: red; 
    color: #fff; 
    text-align: center; 
    line-height: 19px;
    margin-left: 62px;
}

/* 底部导航 */
.foot {
    height: 38px; 
    background-color: #e3e3e3; 
    padding: 6px; 
    display: flex; 
    padding-right: 0;
}

.foot > div {
    flex: 1; 
    padding: 1px; 
    margin-right: 6px; 
    background-color: #0679c7; 
    border-radius: 5px; 
    color: #fff; 
    text-align: center; 
    line-height: 38px;
}

.foot a {
    display: block; 
    height: 100%; 
    text-decoration:none; 
    color:inherit;
}

/* 
 * ==========================================
 * PC端样式
 * ==========================================
 */

.pc-main {
    width: 1014px; 
    height: 100%; 
    position: fixed; 
    left: 0; 
    right: 0; 
    margin:auto;
}

.pc-left {
    width: 372px; 
    height:100%; 
    float: left; 
    border:1px solid #afafb7; 
    border-right: none; 
    box-sizing: border-box;
}

.pc-right {
    width: 642px; 
    height:100%; 
    float: left; 
    border:1px solid #afafb7; 
    box-sizing: border-box;
}