.page-chatroom .page{display:flex;overflow:hidden}.page-chatroom .footer{display:none}.container{width:1200px;margin-left:auto;margin-right:auto;display:flex;height:100%;box-sizing:border-box}.container .setting{padding:4px 20px;display:flex;align-items:center}.container .setting .text{flex:1;margin-right:10px}.container .setting .btn+.btn{margin-left:20px}.container .init{display:flex;align-items:center;justify-content:center;padding:80px 0}.container .aside{width:300px;height:100%;overflow:hidden;background-color:#f6f6f6;box-sizing:border-box;display:flex;flex-direction:column}.container .aside-header{padding:20px 0 10px;border-bottom:1px solid #eee}.container .aside .rooms{padding:10px 0;flex:1;overflow-y:auto;min-height:1px;box-sizing:border-box}.container .aside .room{cursor:pointer;padding:8px 20px;border-bottom:1px solid #eee;display:flex;align-items:center}.container .aside .room.active{background-color:#fff}.container .aside .avatar{width:54px;height:54px;display:flex;align-items:center;justify-content:center}.container .aside .avatar img{border-radius:50%;display:block;width:40px;height:40px;overflow:hidden}.container .aside .info{margin-left:6px;flex:1}.container .aside .anchor{font-size:14px;font-weight:700}.container .aside .match{font-size:12px}.container .main{height:100%;flex:1;display:flex}.container .main-header{height:60px;padding:0 20px;display:flex;align-items:center;font-size:16px;font-weight:700;border-bottom:1px solid #eee}.container .main-header .link{margin-left:20px}.container .messages{flex:1;overflow-y:auto;padding:20px}.container .messages .message{padding:4px 12px;line-height:1.4;padding:4px 0;word-break:break-word;color:#333}.container .messages .message .emoticon{width:18px;vertical-align:top}.container .messages .message-system-1,.container .messages .message-system.message-system-1{color:#8080c2}.container .messages .message-role-assistant .role{background-color:#cfb6fa}.container .messages .message-role-assistant .nickname{color:#cfb6fa;white-space:nowrap}.container .messages .message-role-manage .role{background-color:#f06577}.container .messages .message-role-manage .nickname{color:#f06577;white-space:nowrap}.container .messages .message-role-service .role{background-color:#23a4ff}.container .messages .message-role-service .nickname{color:#23a4ff;white-space:nowrap}.container .messages .message-role-anchor .role{background-color:#9f6ef6}.container .messages .message-role-anchor .nickname{color:#9f6ef6;white-space:nowrap}.container .messages .message-role-self .role{background-color:#1fcdc9}.container .messages .message-role-self .nickname{color:#1fcdc9;white-space:nowrap}.container .messages .message-content{color:#9ca9c5;-webkit-user-select:text;-moz-user-select:text;user-select:text}.container .messages .message-system{color:#ffa200}.container .messages .role{margin-right:4px;display:inline-block;width:46px;padding:2px 0;background:#ffa800;border-radius:4px;text-align:center;font-size:12px;color:#fff}.container .messages .nickname{color:#00baff;white-space:nowrap;margin-right:4px}.container .messages .enter,.container .messages .system{color:#ffa200}.container .ranking{width:300px;height:100%;overflow:hidden;display:flex;flex-direction:column;background-color:#f6f6f6}.container .ranking-header{height:60px;padding:0 20px;display:flex;align-items:center;font-size:16px;font-weight:700;border-bottom:1px solid #eee}.container .ranking-header .text{flex:1}.container .ranking-header .count{font-size:13px;font-weight:400}.container .ranking-body{flex:1;min-height:1px;overflow-y:auto}.container .ranking .message{padding:8px 20px;font-size:13px;display:flex}.container .ranking .message.active{background-color:#fff}.container .ranking .message .content{flex:1;min-width:1px}