.message-body{width:100%;max-height:calc(100% - 200px);display:flex;flex-direction:column-reverse;overflow-y:auto;padding:10px 0}div.message-placeholder{font-size:12px;color:#09f;text-align:center;padding-bottom:10px;border-bottom:1px solid #ccc}.message-body>div.message-item{padding:10px 0;width:100%;display:flex;align-items:flex-start;gap:10px}.message-body>div.message-item.self{width:100%;flex-direction:row-reverse;padding-left:40%;justify-content:flex-start;padding-right:10px}.message-body>div.message-item.others{padding-right:40%;padding-left:10px}.message-body>div.message-item>.avatar{width:30px;height:30px;border-radius:50%;background-color:#ccc}.message-body>div.message-item>.message{max-width:calc(100% - 40px);background-color:#fff;padding:10px;border-radius:4px}.message-body>div.message-item.self>.message{display:flex;justify-content:flex-end}section.hi-mention-body{position:relative;width:100%;height:100%;padding:0;margin:0}section.hi-mention-body,section.hi-mention-body *{box-sizing:border-box}section.hi-mention-body>div.hi-mention-editor{width:100%;height:100%;position:relative;overflow-y:auto;outline:none;padding:0;margin:0}section.hi-mention-body>div.hi-mention-editor::-webkit-scrollbar{width:0;height:0}section.hi-mention-body>div.hi-mention-editor::-webkit-scrollbar-track{background-color:transparent}section.hi-mention-body>div.hi-mention-editor::-webkit-scrollbar-thumb{background-color:transparent;border-radius:6px}section.hi-mention-body>div.hi-mention-editor::-webkit-scrollbar-thumb:hover{background-color:transparent}section.hi-mention-body>div.hi-mention-placeholder{position:absolute;width:100%;top:0;left:0;z-index:999;pointer-events:none}section.hi-mention-body .hi-mention-at-user{cursor:text;-webkit-user-select:all;-moz-user-select:all;user-select:all;margin:0 2px}div.hi-mention-user-selector{position:absolute;background-color:#fff;padding:2px 5px;border:1px solid #eee;box-shadow:0 2px 8px rgba(0,0,0,.1);margin:0;border-radius:4px;overflow-y:auto;z-index:999;opacity:0;pointer-events:none;transition:transform .3s,opacity .3s;transform:scale(.9)}div.hi-mention-user-selector.open{opacity:1;pointer-events:auto;transform:scale(1)}div.hi-mention-user-selector.h5{width:100%}div.hi-mention-user-selector::-webkit-scrollbar{width:6px;height:6px}div.hi-mention-user-selector::-webkit-scrollbar-track{background-color:#f8f8f8}div.hi-mention-user-selector::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}div.hi-mention-user-selector::-webkit-scrollbar-thumb:hover{background-color:#ddd}div.hi-mention-user-selector>div.hi-mention-user-item{width:100%;display:flex;align-items:center;padding:3px 5px;border-radius:2px;cursor:pointer}div.hi-mention-user-selector>div.hi-mention-user-item:hover{background-color:#f5f5f5}div.hi-mention-user-selector>div.hi-mention-user-item>div.hi-mention-user-item-left{width:24px;height:24px;border-radius:50%;overflow:hidden;margin-right:10px;display:flex;align-items:center;justify-content:center;background-color:#eee}div.hi-mention-user-selector>div.hi-mention-user-item>div.hi-mention-user-item-left img{max-width:100%;max-height:100%}div.hi-mention-user-selector>div.hi-mention-user-item>div.hi-mention-user-item-right{width:calc(100% - 34px);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mention-app-body{width:750px;height:500px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #ddd;background-color:#f5f5f5;border-radius:4px;box-shadow:0 0 10px #ccc}.chat-area{width:calc(100% - 150px);height:100%;display:flex;flex-direction:column;justify-content:space-between}.methods{width:150px;height:100%;border-left:1px solid #ccc}.methods .users{padding:10px;border-bottom:1px solid #ccc;margin-bottom:10px;height:calc(100% - 260px);overflow-y:auto}.methods .users .user-item{padding:3px 10px}.editor{width:100%;height:200px;border-top:1px solid #ccc}.editor-content{height:calc(100% - 40px);padding:5px 10px}.editor-footer{width:100%;height:40px;display:flex;justify-content:space-between;align-items:center;padding:5px 10px;border-top:1px solid #ccc}.editor-footer button{width:120px;height:30px}.editor-footer a{color:#09f;text-decoration:none}button{width:100%;height:26px;background-color:#09f;border-color:#09f;border-radius:4px;color:#fff}button+button{margin-top:10px}.h5.mention-app-body{width:100vw;height:100vh;border:none;position:relative;left:0;top:0;transform:translate(0);background-color:#fff}.h5 .methods{display:none}.h5 .chat-area{width:100%}.h5 .message-body>div>.message{background-color:#f5f5f5}*{margin:0;padding:0;box-sizing:border-box}