.chat_box{min-width:800px;margin-top:10px;margin-bottom:20px;display:flex;overflow-x:auto}.chat_box,.chat_box_menu{height:calc(var(--vh) - 80px)}.chat_box_menu{box-sizing:border-box;width:20%;max-width:280px;padding-right:10px}.chat_box_title{box-sizing:border-box;align-items:center;height:50px;padding:10px;display:flex}.chat_box_title h1{opacity:.5;font-size:18px}.chat_rooms{height:calc(var(--vh) - 130px);-webkit-mask-image:linear-gradient(0deg,#0000,#fff 10px calc(100% - 10px),#0000);mask-image:linear-gradient(0deg,#0000,#fff 10px calc(100% - 10px),#0000)}.chat_room_item{border-radius:calc(var(--border-radius) - 10px);align-items:center;padding:10px;transition:all .2s;display:flex}.chat_room_item:first-child{margin-top:10px}.chat_room_item:last-child{margin-bottom:10px}.pc_browser .chat_room_item:hover{background-color:var(--section-color);cursor:pointer}.chat_room_item.active{background-color:var(--main-color-alpha)}.chat_room_item .text_box{flex:1;padding-left:10px}.chat_room_item .text_box .intro{opacity:.5;margin-top:4px;font-size:14px}.chat_box_main{height:calc(var(--vh) - 80px);border-radius:10px;flex:1;width:60%}.chat_box_main .chat_room_title{border-bottom:1px solid var(--border-light-color);box-sizing:border-box;align-items:center;height:50px;padding:10px 20px;display:flex}.chat_box_main .chat_room_title h2{font-size:18px}.chat_box_main .chat_room_main{height:calc(var(--vh) - 130px);display:flex}.msg_part{flex-direction:column;flex:1;max-width:100%;display:flex}.msg_display{flex:1;height:10px}.info_msg_item{text-align:center;color:var(--text-light-color);width:100%;font-size:14px}.msg_item{max-width:100%;padding:10px 20px;display:flex}.msg_item:first-child{padding-top:20px}.msg_item:last-child{padding-bottom:20px}.msg_item .msg_item_main{box-sizing:border-box;flex-direction:column;align-items:flex-start;max-width:100%;padding-left:10px;padding-right:60px;display:flex;overflow:hidden}.msg_item .msg_item_main .msg_item_name{color:var(--text-sub-color);padding-bottom:8px;font-size:14px}.msg_item .msg_item_main .msg_item_box{background-color:var(--section-inside-color);border-radius:10px;padding:6px 14px}.msg_item .msg_item_main .msg_item_box p{white-space:pre-wrap;word-break:break-word;line-height:1.5}.msg_item.self{flex-direction:row-reverse}.msg_item.self .msg_item_main{align-items:flex-end;padding-left:60px;padding-right:10px}.msg_item.self .msg_item_name{text-align:right}.msg_item.self .msg_item_box{background-color:var(--main-color-alpha);border-radius:10px}.msg_input{margin:0 10px 10px;position:relative}.msg_input .ktextarea{border-color:#fff0;padding-right:40px}.msg_input .kbutton{flex-shrink:0;width:30px;height:30px;min-height:30px;margin:5px;padding:0;position:absolute;bottom:0;right:0}.chat_box_aside{box-sizing:border-box;width:20%;padding-left:10px}.user_part{box-sizing:border-box;border-radius:10px;height:100%;padding:5px 0}.user_part .user_part_title{box-sizing:border-box;height:30px;padding:0 10px}.user_part .user_part_title h3{font-size:14px;line-height:30px}.user_item{align-items:center;padding:6px 10px;display:flex}.user_item .user_text{flex-direction:column;flex:1;padding-left:6px;display:flex}.user_item .user_text .name{font-size:14px}.user_item .user_text .id{opacity:.3;margin-top:2px;font-size:12px}.user_item .user_text p{-webkit-line-clamp:1;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.user_item.self .user_text{color:var(--main-color)}