.message-wrapper[data-v-669beecf]{margin:10px 20px}.message-wrapper .content-wrapper[data-v-669beecf]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.c2c-layout[data-v-669beecf],.group-layout[data-v-669beecf],.message-wrapper .content-wrapper[data-v-669beecf],.system-layout[data-v-669beecf]{display:-webkit-box;display:-ms-flexbox;display:flex}.c2c-layout .col-1 .avatar[data-v-669beecf],.group-layout .col-1 .avatar[data-v-669beecf],.system-layout .col-1 .avatar[data-v-669beecf]{width:36px;height:36px;border-radius:50%;-webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);box-shadow:0 5px 10px 0 rgba(0,0,0,.1)}.c2c-layout .group-member-avatar[data-v-669beecf],.group-layout .group-member-avatar[data-v-669beecf],.system-layout .group-member-avatar[data-v-669beecf]{cursor:pointer}.c2c-layout .col-2[data-v-669beecf],.group-layout .col-2[data-v-669beecf],.system-layout .col-2[data-v-669beecf]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 8px}.c2c-layout .col-3[data-v-669beecf],.group-layout .col-3[data-v-669beecf],.system-layout .col-3[data-v-669beecf]{width:30px}.c2c-layout.position-left .col-2[data-v-669beecf],.group-layout.position-left .col-2[data-v-669beecf],.system-layout.position-left .col-2[data-v-669beecf]{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.c2c-layout.position-right[data-v-669beecf],.group-layout.position-right[data-v-669beecf],.system-layout.position-right[data-v-669beecf]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.c2c-layout.position-right .col-2[data-v-669beecf],.group-layout.position-right .col-2[data-v-669beecf],.system-layout.position-right .col-2[data-v-669beecf]{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.c2c-layout.position-center[data-v-669beecf],.group-layout.position-center[data-v-669beecf],.system-layout.position-center[data-v-669beecf]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.c2c-layout .col-2 .base[data-v-669beecf]{margin-top:3px}.group-layout .col-2 .chat-bubble[data-v-669beecf]{margin-top:5px}.right[data-v-669beecf]{-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.left[data-v-669beecf],.right[data-v-669beecf]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal}.left[data-v-669beecf]{-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.base[data-v-669beecf]{color:#a5b5c1;font-size:12px}.name[data-v-669beecf]{padding:0 4px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar[data-v-669beecf]{background-color:#a5b5c1;text-align:center;width:30px;height:30px;overflow:hidden}.avatar img[data-v-669beecf]{width:100%;height:100%}.avatar .shape-circle[data-v-669beecf]{border-radius:50%}.chat-box[data-v-669beecf]{margin:0 auto;background:#fafafa;position:absolute;height:70%;width:100%;max-width:700px}.chat-box header[data-v-669beecf]{width:100%;height:3rem;background:#409eff;max-width:700px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;color:#fff;font-size:1rem}.chat-box .msg-box[data-v-669beecf]{position:absolute;height:calc(100% - 6.5rem);width:100%;overflow-y:scroll}.chat-box .msg-box .msg[data-v-669beecf]{width:95%;min-height:2.5rem;margin:1rem .5rem;position:relative;-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.chat-box .msg-box .msg .user-head[data-v-669beecf]{min-width:2.5rem;width:20%;width:2.5rem;height:2.5rem;border-radius:50%;background:#f1f1f1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.chat-box .msg-box .msg .user-head .head[data-v-669beecf]{width:1.2rem;height:1.2rem}.chat-box .msg-box .msg .user-msg[data-v-669beecf]{width:100%;word-break:break-all;position:relative;z-index:5}.chat-box .msg-box .msg .user-msg span[data-v-669beecf]{display:inline-block;padding:.5rem .7rem;border-radius:.5rem;margin-top:.2rem;font-size:.88rem}.chat-box .msg-box .msg .user-msg .left[data-v-669beecf]{background:#fff;-webkit-animation:toLeft-data-v-669beecf .5s ease 1 both;animation:toLeft-data-v-669beecf .5s ease 1 both}.chat-box .msg-box .msg .user-msg .right[data-v-669beecf]{background:#53a8ff;color:#fff;-webkit-animation:toright-data-v-669beecf .5s ease 1 both;animation:toright-data-v-669beecf .5s ease 1 both}@-webkit-keyframes toLeft-data-v-669beecf{0%{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes toLeft-data-v-669beecf{0%{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toright-data-v-669beecf{0%{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes toright-data-v-669beecf{0%{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}.chat-box .input-box[data-v-669beecf]{padding:0 .5rem;position:absolute;bottom:0;width:100%;height:3.5rem;background:#fafafa;-webkit-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.chat-box .input-box input[data-v-669beecf]{height:2.3rem;display:inline-block;width:100%;padding:.5rem;border:none;border-radius:.2rem;font-size:.88rem}.chat-box .input-box .btn[data-v-669beecf]{height:2.3rem;min-width:4rem;background:#e0e0e0;padding:.5rem;font-size:.88rem;color:#fff;text-align:center;border-radius:.2rem;margin-left:.5rem;-webkit-transition:.5s;transition:.5s}.chat-box .input-box .btn-active[data-v-669beecf]{background:#409eff}