.demo{background-color:#36393f;padding:16px 0}@media screen and (width <= 980px){.demo{padding:10px}}.demo .message{min-height:44px;padding:2px 48px 2px 72px;position:relative;word-wrap:break-word;-webkit-user-select:text;-moz-user-select:text;user-select:text}@media screen and (width <= 980px){.demo .message{margin-top:0;padding:0 0 0 40px}}.demo .message .contents{position:static}.demo .message .contents .avatar{border-radius:20px;cursor:pointer;height:40px;left:16px;overflow:hidden;pointer-events:none;position:absolute;top:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:40px;z-index:1}@media screen and (width <= 980px){.demo .message .contents .avatar{border-radius:16px;height:32px;left:0;top:0;width:32px}}.demo .message .contents .header-message{color:#72767d;display:flex;line-height:22px;margin:0;min-height:22px;overflow:hidden;position:relative;white-space:break-spaces}.demo .message .contents .header-message .username{color:#fff;display:inline;font-size:16px;font-weight:500;line-height:22px;margin-right:4px;position:relative;vertical-align:baseline}@media screen and (width <= 980px){.demo .message .contents .header-message .username{font-size:14px}}.demo .message .contents .header-message .bot-tag{align-items:center;background-color:#5865f2;border-radius:3px;color:#fff;display:inline-flex;flex-shrink:0;font-size:10px;height:15px;margin-right:4px;margin-top:.75px;padding:0 4px;position:relative;text-indent:0;text-transform:uppercase;top:1.6px;vertical-align:top}@media screen and (width <= 980px){.demo .message .contents .header-message .bot-tag{font-size:8px;height:13px;top:3px}}.demo .message .contents .header-message .bot-tag .bot-text{font-weight:500;line-height:15px;position:relative}@media screen and (width <= 980px){.demo .message .contents .header-message .bot-tag .bot-text{line-height:14px}}.demo .message .contents .header-message .bot-tag .bot-tag-verified{height:15px;margin-left:-4px;width:15px}@media screen and (width <= 980px){.demo .message .contents .header-message .bot-tag .bot-tag-verified{height:12px;width:12px}}.demo .message .contents .header-message .timestamp-header{color:#72767d;cursor:default;display:inline-block;font-size:12px;font-weight:500;height:20px;line-height:22px;margin-left:4px;pointer-events:none;vertical-align:baseline}@media screen and (width <= 980px){.demo .message .contents .header-message .timestamp-header{font-size:10px;line-height:23px;margin-left:2px}}.demo .message .contents .message-content{color:#dcddde;font-size:16px;font-weight:400;line-height:22px;margin-left:-72px;padding-left:72px;-webkit-user-select:text;-moz-user-select:text;user-select:text;word-break:break-word}@media screen and (width <= 980px){.demo .message .contents .message-content{font-size:12px;line-height:15px}}.demo .message .embed-demo .embed-left-bar{align-items:center;border-radius:3px 0 0 3px;display:flex;justify-content:center;min-width:5px;position:relative;transition:min-width .2s ease-in-out,width .2s ease-in-out;width:5px}.demo .message .embed-demo .embed-left-bar .picker-wrapper{top:0;right:0;bottom:0;left:0;position:absolute;z-index:2}.demo .message .embed-demo .embed-left-bar svg{opacity:0;transform:scale(.8);transition:all .3s ease-in-out}.demo .message .embed-demo .embed-left-bar.enabled{cursor:pointer}.demo .message .embed-demo .embed-left-bar.enabled.open,.demo .message .embed-demo .embed-left-bar.enabled:hover{min-width:22px;width:22px}.demo .message .embed-demo .embed-left-bar.enabled.open svg,.demo .message .embed-demo .embed-left-bar.enabled:hover svg{opacity:1;transform:scale(1)}.demo .message .embed-demo .embed-left-bar .picker{left:0;position:absolute;top:100%;z-index:1000}.demo .message .embed-demo{display:flex;margin-top:2px;position:relative}.demo .message .embed-demo .embed-content{background:#2b2d31;border-radius:4px;box-sizing:border-box;color:#dcddde;display:inline-grid;font-size:16px;font-weight:400;grid-template-columns:auto min-content;grid-template-rows:auto;line-height:22px;max-width:520px;padding:8px 8px 16px 12px;position:relative;word-wrap:break-word;-webkit-user-select:text;-moz-user-select:text;user-select:text;white-space:break-spaces}@media screen and (width <= 980px){.demo .message .embed-demo .embed-content{padding:0 8px 8px}}.demo .message .embed-demo .embed-title{color:#fff;display:inline-block;font-size:15px;font-weight:600;grid-column:1/1;margin-top:8px}@media screen and (width <= 980px){.demo .message .embed-demo .embed-title{font-size:12px;line-height:16px;margin-top:8px}}.demo .message .embed-demo .embed-description{color:#dcddde;font-size:13.5px;font-weight:400;grid-column:1/1;line-height:18px;margin-top:8px;white-space:pre-line;word-break:break-word}@media screen and (width <= 980px){.demo .message .embed-demo .embed-description{font-size:11px;margin-top:4px}}.demo .message .embed-demo .embed-image{align-items:center;border-radius:4px;display:flex;grid-column:1/1;justify-content:center;margin-top:8px;max-width:100%;position:relative}.demo .message .embed-demo .embed-image img{max-width:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2;-webkit-user-drag:none}.demo .message .embed-demo .embed-image .background{top:0;right:0;bottom:0;left:0;position:absolute;z-index:1}.demo .message .embed-demo .embed-image .visibility{color:#ffffffb3;cursor:pointer;font-size:16px;outline:none;padding:8px;position:absolute;right:0;top:0;transition:opacity .3s ease-in-out;z-index:4}.demo .message .embed-demo .embed-image .cover{align-items:center;background-color:#0006;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;opacity:1;position:absolute;transition:opacity .3s ease-in-out;z-index:3}.demo .message .embed-demo .embed-image .cover .button{border:1px solid hsla(0,0%,100%,.702);border-radius:5px;color:#ffffffb3;cursor:pointer;overflow:hidden;padding:8px 12px;position:relative;z-index:2}.demo .message .embed-demo .embed-image .visibility:focus{opacity:0}.demo .message .embed-demo .embed-image .visibility:focus+.cover{opacity:0!important}@media screen and (width <= 980px){.demo .message .embed-demo .embed-image{margin-top:4px}}.demo .message .embed-demo .image-loader{align-items:center;display:flex;grid-column:1/1;justify-content:center;max-width:100%;width:100%}.demo .message .embed-demo .image-loader .loader{position:absolute}.demo .message .embed-demo .image-loader img{width:100%}.demo .message .embed-demo .embed-footer{align-items:center;display:flex;grid-column:1/3;grid-row:auto/auto;margin-top:8px}@media screen and (width <= 980px){.demo .message .embed-demo .embed-footer{margin-top:4px}}.demo .message .embed-demo .embed-footer .embed-footer-text{color:#dcddde;font-size:13px;font-weight:400;line-height:16px}.demo .message .channel-mention{background-color:#7289da1a;color:#5865f2;cursor:pointer;font-weight:500;padding:1px 2px;transition:background-color 50ms ease-out,color 50ms ease-out}.demo .message .channel-mention:hover{background-color:#7289dab3;color:#fff}.demo .message .role-mention{background-color:#7289da1a;color:#5865f2;cursor:pointer;font-weight:500;padding:1px 2px}.demo .message .member-mention{background-color:#5865f24d;border-radius:3px;color:#c9cdfb;cursor:pointer;font-weight:500;padding:0 2px;transition:background-color 50ms ease-out,color 50ms ease-out}.demo .message .member-mention:hover{background-color:#5865f2;color:#fff}.demo .message .global-mention{color:#5865f2;cursor:pointer;font-weight:500;padding:1px 2px}.demo .bot-identity{align-content:normal;align-items:flex-start;display:flex;height:1.3em;margin-bottom:3px}