stream-chat-react/dist/styles/styles.css

React components to create chat conversations or livestream style chat

@import"https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,700,700i";.str-chat{box-sizing:border-box}.str-chat *,.str-chat *::after,.str-chat *::before{box-sizing:inherit;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.clearfix{clear:both}.messenger-chat.str-chat{height:100vh;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;display:flex;align-items:flex-start;justify-content:flex-start;margin:0;flex:1 0 100%}.messenger-chat.str-chat .str-chat__container{flex:1;height:100%;display:flex;flex-direction:row}.messenger-chat.str-chat .str-chat__main-panel{width:100%;flex:1;height:100%;display:flex;flex-direction:column;padding:20px 20px 0 10px}.str-chat{height:100vh;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.str-chat.messaging{background-color:#f1f1f3}.str-chat.messaging.dark{background-color:#212326}.str-chat.team.dark{background:#212326}.str-chat.livestream.dark{background:#1a1a1a}.str-chat-channel-list{float:left}.str-chat-channel{max-height:100vh}.str-chat-channel .str-chat__container{height:100%;display:flex}.str-chat-channel .str-chat__container .str-chat__main-panel{height:100%;display:flex;flex-direction:column;flex:1}.str-chat-channel.messaging .str-chat__main-panel{padding:20px 10px 0 0px}@media screen and (max-width: 960px){.str-chat-channel.messaging .str-chat__main-panel{padding:5px 5px 0}}.str-chat-channel.team .str-chat__container{display:flex}.str-chat-channel.commerce .str-chat__main-panel{width:100%}.str-chat-channel.commerce .str-chat__container{background:rgba(255,255,255,.97)}.str-chat-channel.commerce.dark .str-chat__container{background:rgba(29,32,36,.9);box-shadow:0 10px 31px 0 rgba(0,0,0,.5)}.str-chat.dark .emoji-mart{background:#1a1a1a;border:#343434}.str-chat.dark .emoji-mart-category-label span{background:#1f1f1f;color:#fff}.str-chat.dark .emoji-mart-search input{background:#1f1f1f;color:#fff}.str-chat.dark .emoji-mart-search button svg{fill:#fff}.rfu-file-icon--small.svg-inline--fa{color:#414d54}.rfu-file-icon--small.fa-file-excel{color:#207245}.rfu-file-icon--small.fa-file-powerpoint{color:#cb4a32}.rfu-file-icon--small.fa-file-word{color:#2c599d}.rfu-file-icon--small.fa-file-pdf{color:#f82903}[class^=rfu-],[class*=" rfu-"]{font-family:Avenir,Arial,Helvetica,sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}.rfu-file-previewer{border:1px solid rgba(0,0,0,.1);border-radius:4px;overflow:hidden;margin:8px 0;position:relative}.rfu-file-previewer ol{position:relative;margin:0;padding:0;list-style:none}.rfu-file-previewer ol li{position:relative;padding:8px 16px;border-bottom:1px solid rgba(0,0,0,.1)}.rfu-file-previewer ol li:last-child{border-color:transparent}.rfu-file-previewer__file{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.rfu-file-previewer__file:hover{background:#fafafa}.rfu-file-previewer__file a{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 8px;color:#414d54;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rfu-file-previewer__file svg{min-width:25px}.rfu-file-previewer__file--uploading{opacity:.4}.rfu-file-previewer__file--failed a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#8b9297}.rfu-file-previewer__file--failed a::after{text-decoration:none}.rfu-file-previewer__image{min-width:25px;display:-webkit-box;display:-ms-flexbox;display:flex}.rfu-file-previewer__loading-indicator{position:absolute;width:100%;height:100%;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1000}.rfu-file-previewer__close-button{position:relative;z-index:10000}.rfu-file-previewer__failed{padding:3px 6px;margin-left:8px;color:#fff;border-radius:4px;background:#ff6363;font-size:12px}.rfu-file-previewer__retry{text-decoration:none;padding:3px 6px;margin-left:8px;color:#fff;border-radius:4px;background:#63e5a4;font-size:12px}.rfu-file-upload-button{cursor:pointer}.rfu-file-upload-button svg{fill:#a0b2b8}.rfu-file-upload-button:hover svg{fill:#88979c}.rfu-file-upload-button label{cursor:pointer}.rfu-file-upload-button .rfu-file-input{width:0;height:0;opacity:0;overflow:hidden;position:absolute;z-index:-1}.rfu-icon-button{cursor:pointer;position:relative;padding:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.rfu-icon-button svg{margin:4px;position:relative;z-index:50;fill:#a0b2b8}.rfu-icon-button:hover svg{fill:#88979c}.rfu-dropzone .rfu-dropzone__notifier{position:absolute;height:100%;width:100%;padding:30px;z-index:90;display:none;border-radius:4px}.rfu-dropzone--accept .rfu-dropzone__notifier{background:rgba(0,212,106,.83);display:block}.rfu-dropzone--reject .rfu-dropzone__notifier{background:rgba(255,0,0,.83);display:block}.rfu-dropzone__inner{width:100%;height:100%;padding:30px;border:1px dashed #fff;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:#fff;font-weight:800;font-size:12px}.rfu-dropzone--reject .rfu-dropzone__inner{display:none}.rfu-image-previewer{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:8px 0}.rfu-image-previewer__image{width:100px;height:100px;position:relative;margin-right:8px;margin-bottom:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.rfu-image-previewer__image--loaded .rfu-thumbnail__overlay{background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0)));background:linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)}.rfu-image-previewer__image .rfu-thumbnail__wrapper{position:absolute}.rfu-image-previewer__image .rfu-loading-indicator{position:absolute;z-index:90}.rfu-image-previewer__retry{z-index:90}.rfu-thumbnail__wrapper{width:100px;height:100px;border-radius:4px;overflow:hidden;position:relative}.rfu-thumbnail__overlay{position:absolute;background-color:rgba(0,0,0,.4);width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:5px}.rfu-thumbnail__image{width:inherit;height:inherit;-o-object-fit:cover;object-fit:cover}.rfu-loading-indicator{margin:0 auto;width:70px;text-align:center}.rfu-loading-indicator>div{width:18px;height:18px;background-color:#ccc;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.rfu-loading-indicator .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.rfu-loading-indicator .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.rfu-loading-indicator__spinner{width:20px;height:20px;border:2px solid #eee;border-top-color:#00d46a;border-radius:50%;-webkit-animation:spinner .6s linear infinite;animation:spinner .6s linear infinite}.rfu-image-upload-button{cursor:pointer}.rfu-image-upload-button svg{fill:#a0b2b8}.rfu-image-upload-button:hover svg{fill:#88979c}.rfu-image-upload-button label{cursor:pointer}.rfu-image-upload-button .rfu-image-input{width:0;height:0;opacity:0;overflow:hidden;position:absolute;z-index:-1}.rfu-thumbnail-placeholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100px;height:100px;border:1px dashed #bfbfbf;border-radius:4px;cursor:pointer}.rfu-thumbnail-placeholder:hover{background:#f2f2f2}.emoji-mart,.emoji-mart *{box-sizing:border-box;line-height:1.15}.emoji-mart{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;font-size:16px;display:inline-block;color:#222427;border:1px solid #d9d9d9;border-radius:5px;background:#fff}.emoji-mart .emoji-mart-emoji{padding:6px}.emoji-mart-bar{border:0 solid #d9d9d9}.emoji-mart-bar:first-child{border-bottom-width:1px;border-top-left-radius:5px;border-top-right-radius:5px}.emoji-mart-bar:last-child{border-top-width:1px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.emoji-mart-anchors{display:flex;flex-direction:row;justify-content:space-between;padding:0 6px;color:#858585;line-height:0}.emoji-mart-anchor{position:relative;display:block;flex:1 1 auto;text-align:center;padding:12px 4px;overflow:hidden;transition:color .1s ease-out;margin:0;box-shadow:none;background:none;border:none}.emoji-mart-anchor:hover,.emoji-mart-anchor-selected{color:#464646}.emoji-mart-anchor-selected .emoji-mart-anchor-bar{bottom:0}.emoji-mart-anchor-bar{position:absolute;bottom:-3px;left:0;width:100%;height:3px;background-color:#464646}.emoji-mart-anchors i{display:inline-block;width:100%;max-width:22px}.emoji-mart-anchors svg,.emoji-mart-anchors img{fill:#858585;height:18px;width:18px}.emoji-mart-scroll{overflow-y:scroll;height:270px;padding:0 6px 6px 6px;will-change:transform}.emoji-mart-search{margin-top:6px;padding:0 6px;position:relative}.emoji-mart-search input{font-size:16px;display:block;width:100%;padding:5px 25px 6px 10px;border-radius:5px;border:1px solid #d9d9d9;outline:0}.emoji-mart-search input,.emoji-mart-search input::-webkit-search-decoration,.emoji-mart-search input::-webkit-search-cancel-button,.emoji-mart-search input::-webkit-search-results-button,.emoji-mart-search input::-webkit-search-results-decoration{-webkit-appearance:none}.emoji-mart-search-icon{position:absolute;top:7px;right:11px;z-index:2;padding:2px 5px 1px;border:none;background:none}.emoji-mart-category .emoji-mart-emoji span{z-index:1;position:relative;text-align:center;cursor:default}.emoji-mart-category .emoji-mart-emoji:hover:before{z-index:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f4f4f4;border-radius:100%}.emoji-mart-category-label{z-index:2;position:relative;position:-webkit-sticky;position:sticky;top:0}.emoji-mart-category-label span{display:block;width:100%;font-weight:500;padding:5px 6px;background-color:#fff;background-color:rgba(255,255,255,.95)}.emoji-mart-category-list{margin:0;padding:0}.emoji-mart-category-list li{list-style:none;margin:0;padding:0;display:inline-block}.emoji-mart-emoji{position:relative;display:inline-block;font-size:0;margin:0;padding:0;border:none;background:none;box-shadow:none}.emoji-mart-emoji-native{font-family:"Segoe UI Emoji","Segoe UI Symbol","Segoe UI","Apple Color Emoji","Twemoji Mozilla","Noto Color Emoji","EmojiOne Color","Android Emoji"}.emoji-mart-no-results{font-size:14px;text-align:center;padding-top:70px;color:#858585}.emoji-mart-no-results-img{display:block;margin-left:auto;margin-right:auto;width:50%}.emoji-mart-no-results .emoji-mart-category-label{display:none}.emoji-mart-no-results .emoji-mart-no-results-label{margin-top:.2em}.emoji-mart-no-results .emoji-mart-emoji:hover:before{content:none}.emoji-mart-preview{position:relative;height:70px}.emoji-mart-preview-emoji,.emoji-mart-preview-data,.emoji-mart-preview-skins{position:absolute;top:50%;transform:translateY(-50%)}.emoji-mart-preview-emoji{left:12px}.emoji-mart-preview-data{left:68px;right:12px;word-break:break-all}.emoji-mart-preview-skins{right:30px;text-align:right}.emoji-mart-preview-skins.custom{right:10px;text-align:right}.emoji-mart-preview-name{font-size:14px}.emoji-mart-preview-shortname{font-size:12px;color:#888}.emoji-mart-preview-shortname+.emoji-mart-preview-shortname,.emoji-mart-preview-shortname+.emoji-mart-preview-emoticon,.emoji-mart-preview-emoticon+.emoji-mart-preview-emoticon{margin-left:.5em}.emoji-mart-preview-emoticon{font-size:11px;color:#bbb}.emoji-mart-title span{display:inline-block;vertical-align:middle}.emoji-mart-title .emoji-mart-emoji{padding:0}.emoji-mart-title-label{color:#999a9c;font-size:26px;font-weight:300}.emoji-mart-skin-swatches{font-size:0;padding:2px 0;border:1px solid #d9d9d9;border-radius:12px;background-color:#fff}.emoji-mart-skin-swatches.custom{font-size:0;border:none;background-color:#fff}.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch{width:16px;padding:0 2px}.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after{opacity:.75}.emoji-mart-skin-swatch{display:inline-block;width:0;vertical-align:middle;transition-property:width,padding;transition-duration:.125s;transition-timing-function:ease-out}.emoji-mart-skin-swatch:nth-child(1){transition-delay:0s}.emoji-mart-skin-swatch:nth-child(2){transition-delay:.03s}.emoji-mart-skin-swatch:nth-child(3){transition-delay:.06s}.emoji-mart-skin-swatch:nth-child(4){transition-delay:.09s}.emoji-mart-skin-swatch:nth-child(5){transition-delay:.12s}.emoji-mart-skin-swatch:nth-child(6){transition-delay:.15s}.emoji-mart-skin-swatch.selected{position:relative;width:16px;padding:0 2px}.emoji-mart-skin-swatch.selected:after{content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background-color:#fff;border-radius:100%;pointer-events:none;opacity:0;transition:opacity .2s ease-out}.emoji-mart-skin-swatch.custom{display:inline-block;width:0;height:38px;overflow:hidden;vertical-align:middle;transition-property:width,height;transition-duration:.125s;transition-timing-function:ease-out;cursor:default}.emoji-mart-skin-swatch.custom.selected{position:relative;width:36px;height:38px;padding:0 2px 0 0}.emoji-mart-skin-swatch.custom.selected:after{content:"";width:0;height:0}.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover{background-color:#f4f4f4;border-radius:10%}.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom{width:36px;height:38px;padding:0 2px 0 0}.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after{opacity:.75}.emoji-mart-skin-text.opened{display:inline-block;vertical-align:middle;text-align:left;color:#888;font-size:11px;padding:5px 2px;width:95px;height:40px;border-radius:10%;background-color:#fff}.emoji-mart-skin{display:inline-block;width:100%;padding-top:100%;max-width:12px;border-radius:100%}.emoji-mart-skin-tone-1{background-color:#ffc93a}.emoji-mart-skin-tone-2{background-color:#fadcbc}.emoji-mart-skin-tone-3{background-color:#e0bb95}.emoji-mart-skin-tone-4{background-color:#bf8f68}.emoji-mart-skin-tone-5{background-color:#9b643d}.emoji-mart-skin-tone-6{background-color:#594539}.emoji-mart-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.str-chat__actions-box{background:#fff;background-image:linear-gradient(-180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%);box-shadow:0 0 2px 0 rgba(0,0,0,.22),0 1px 0 0 rgba(0,0,0,.08),0 1px 8px 0 rgba(0,0,0,.05);border-radius:7px;display:flex;flex-direction:column;z-index:1000;position:absolute;min-width:150px}.str-chat__actions-box--right{right:0;top:calc(100% + 2px)}.str-chat__actions-box--left{left:0;top:calc(100% + 2px)}.str-chat__actions-box>button{text-align:left;width:100%;border:none;margin:0;padding:10px;font-size:12px;background:none;cursor:pointer}.str-chat__actions-box>button:not(:last-of-type){box-shadow:0 1px 0 0 rgba(0,0,0,.08)}.str-chat__actions-box>button:hover{color:#006cff}.dark.str-chat .str-chat__message-actions-box{background:#67686a;background-image:linear-gradient(-180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%);box-shadow:0 0 2px 0 rgba(0,0,0,.22),0 1px 0 0 rgba(0,0,0,.08),0 1px 8px 0 rgba(0,0,0,.05)}.dark.str-chat .str-chat__message-actions-box button{color:#fff}.dark.str-chat .str-chat__message-actions-box button:hover{color:#006cff}.str-chat__message-attachment-actions-form{width:100%;margin:8px 0;padding:0;display:flex}.str-chat__message-attachment-actions-button{flex:1;border:none;background:none;margin:0 4px;padding:8px 8px;border-radius:100px;outline:none}.str-chat__message-attachment-actions-button:focus{border:1px solid #006cff;box-shadow:0 0 0 2px rgba(0,108,255,.36)}.str-chat__message-attachment-actions-button--primary{background-color:#006cff;color:#fff}.str-chat__message-attachment-actions-button--default{border:2px solid rgba(0,0,0,.08)}.dark.str-chat .str-chat__message-attachment-actions-button{color:#fff}.dark.str-chat .str-chat__message-attachment-actions-button--default{border-color:rgba(255,255,255,.1)}.str-chat__player-wrapper{position:relative;padding-top:56.25%}.str-chat__player-wrapper .react-player{position:absolute;top:0;left:0}.str-chat__message .str-chat__player-wrapper .react-player{border-radius:16px 16px 16px 0;overflow:hidden}.str-chat__message--me .str-chat__player-wrapper .react-player{border-radius:16px 16px 0 16px;overflow:hidden}.str-chat__message-attachment{width:100%;max-width:375px;border-radius:16px;margin:8px auto 8px 0;padding:0}.str-chat__message--me .str-chat__message-attachment{padding-left:0;margin:8px 0 8px auto}.str-chat__message-team.thread-list .str-chat__message-attachment{max-width:200px}.str-chat__message-attachment:hover{background:transparent}.str-chat__message-attachment--card--no-image{height:60px}.str-chat__message-attachment--card--actions{height:auto}.str-chat__message-attachment-file{width:100%}.str-chat__message-attachment-file--item{position:relative;height:50px;display:flex;align-items:center;font-size:14px;line-height:22px;border-left:1px solid rgba(0,0,0,.1);width:auto;padding-left:5px}.str-chat__message-attachment-file--item:hover{background:#f7f7f7}.str-chat__message-attachment-file--item img,.str-chat__message-attachment-file--item svg{margin-right:10px}.str-chat__message-attachment-file--item-text{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.str-chat__message-attachment-file--item a{font-weight:700;color:#000;opacity:.8;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.str-chat__message-attachment-file--item a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.str-chat__message-attachment-file--item span{line-height:14px;font-size:12px;font-weight:bold;text-transform:uppercase;display:block;color:#000;opacity:.5}.str-chat__message-attachment--image{height:auto;max-height:300px;max-width:100%;border-radius:0}.str-chat__message-attachment--image:hover{background:transparent}.str-chat__message-attachment--image img{height:inherit;width:auto;max-height:inherit;max-width:100%;display:block;object-fit:cover;overflow:hidden}.str-chat__message-attachment--image img:hover{background:transparent}.str-chat__message-attachment--image--actions{height:320px}.str-chat__message-attachment--image--actions img{height:calc(320px - 40px)}.str-chat__message-attachment-card{min-height:60px}.str-chat__message-attachment-card__giphy-logo{height:20px;width:auto}.messaging.str-chat .str-chat__message-attachment.str-chat__message-attachment--image--actions .str-chat__message-attachment--img{max-height:254px}.livestream.str-chat .str-chat__message-attachment.str-chat__message-attachment--file{max-width:100%}.livestream.str-chat .str-chat__message-attachment.str-chat__message-attachment--file .str-chat__message-attachment-file--item{border-left:none}.livestream.str-chat .str-chat__message-attachment.str-chat__message-attachment--file .str-chat__message-attachment-file--item:hover{background:rgba(255,255,255,.29)}.livestream.str-chat.dark .str-chat__message-attachment-file--item a,.livestream.str-chat.dark .str-chat__message-attachment-file--item span{color:#fff}.livestream.str-chat.dark .str-chat__message-attachment-file--item:hover{background:transparent}.str-chat__avatar{width:32px;height:32px;flex:0 0 32px;margin-right:14px;display:flex;align-items:center;justify-content:center;color:#fff;text-transform:uppercase;overflow:hidden}.str-chat__avatar--circle{border-radius:50%}.str-chat__avatar--rounded{border-radius:6px}.str-chat__avatar--square{border-radius:0}.str-chat__avatar-image,.str-chat__avatar-fallback{display:block;width:inherit;height:inherit;object-fit:cover;text-align:center}.str-chat__avatar-image--loaded{background-color:none}.str-chat__avatar-fallback{background-color:#006cff}.str-chat__message--me>.str-chat__avatar{order:1;margin:0;margin-left:10px}.str-chat__li--top .str-chat__message>.str-chat__avatar,.str-chat__li--middle .str-chat__message>.str-chat__avatar{visibility:hidden}.str-chat__audio__wrapper{height:80px;overflow:hidden;position:relative;border-radius:6px;margin:8px 0 0;display:flex;background:#f1f1f1}.str-chat__audio__image{height:80px;width:80px;position:relative;z-index:20}.str-chat__audio__image--overlay{width:inherit;height:inherit;position:absolute;top:0;left:0;background:rgba(0,0,0,.4);z-index:30;font-size:3em;color:rgba(255,255,255,.69);display:flex;align-items:center;justify-content:center;user-select:none}.str-chat__audio__image--button{margin:0;padding:0;display:flex;align-items:center;width:40px;height:40px}.str-chat__audio__image--button svg{fill:rgba(255,255,255,.69)}.str-chat__audio__image img{z-index:20;position:absolute;top:0;left:0;width:inherit;height:inherit;object-fit:cover}.str-chat__audio__content{display:flex;flex-direction:column;justify-content:space-around;padding:8px 16px;margin-left:16px;width:100%}.str-chat__audio__content--title{margin:0;padding:0;line-height:1}.str-chat__audio__content--subtitle{margin:0;padding:0;line-height:1;font-size:12px;opacity:.49}.str-chat__audio__content--progress{height:6px;width:100%;border-radius:4px;background:rgba(0,0,0,.1);padding:1px;margin:2px 0}.str-chat__audio__content--progress>div{height:4px;border-radius:4px;width:0%;background:#006cff;transition:width .5s linear}.str-chat.dark .str-chat__audio__wrapper{background:#1a1a1a;color:#fff}.str-chat.dark .str-chat__audio__content--progress{background:rgba(255,255,255,.1)}.str-chat__message-attachment-card{position:relative;background:#fff;border-radius:16px 16px 16px 0;overflow:hidden;font-size:13px;border:1px solid rgba(0,0,0,.08);margin:32px 0 0 0}.str-chat__message-attachment-card--header{width:100%;height:175px}.str-chat__message-attachment-card--header img{width:inherit;height:inherit;object-fit:cover}.str-chat__message-attachment-card--title{font-weight:700;flex:1}.str-chat__message-attachment-card--flex{min-width:0px}.str-chat__message-attachment-card--flex,.str-chat__message-attachment-card--flex>*{overflow:hidden;text-overflow:ellipsis}.str-chat__message-attachment-card--content{padding:8px 16px;margin:-8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.str-chat__message-attachment-card--content>*{margin:8px 0}.str-chat__message-attachment-card--url{text-decoration:none;display:block;color:#000;text-transform:uppercase;opacity:.5}.str-chat__message-attachment-card--url::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.str-chat__message-attachment-card--giphy .str-chat__message-attachment-card--header{height:unset}.str-chat.commerce .str-chat__message-attachment-card{max-width:375px;width:100%}.str-chat__message--me .str-chat__message-attachment-card{background:rgba(0,0,0,.08);border:1px solid transparent;border-radius:16px 16px 0 16px}.dark.str-chat .str-chat__message-attachment-card__giphy-logo{filter:invert(100%)}.str-chat__header{display:flex;padding:10px;border-bottom:1px solid rgba(0,0,0,.08)}.str-chat__header-thread{display:flex;padding:10px;min-height:70px;align-items:center;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;box-shadow:0 1px 0 0 rgba(0,0,0,.07);font-size:14px}.str-chat__header-thread__back-button{padding:10px 10px 10px 10px;border:0;background:none;transform:rotate(180deg)}.str-chat__header-livestream{padding:10px 40px;min-height:70px;display:flex;align-items:center;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.14)}.str-chat__header-livestream-left{font-size:14px;flex:1}.str-chat__header-livestream-left--title{font-weight:700;margin:0}.str-chat__header-livestream-left--members{font-weight:400;margin:0}.str-chat__header-livestream-left--livelabel{position:relative;left:5px;font-size:13px;text-transform:uppercase;color:red;display:inline-block;animation:pulse 2s infinite}.str-chat__header-livestream-left--livelabel::before{content:"";position:relative;top:-2px;left:-4px;display:inline-block;width:5px;height:5px;border-radius:100%;background-color:red}@keyframes pulse{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.str-chat__header-livestream-right{display:flex;margin:0 -5px}.str-chat__header-livestream-right-button-wrapper{position:relative}.str-chat__header .str-chat__avatar{margin:0 16px 0 0}.str-chat__title{font-weight:600}.str-chat__meta{width:100%;display:flex;flex-direction:column;justify-content:space-between}.str-chat__info{width:100%;display:flex;justify-content:space-between;font-size:14px;color:rgba(0,0,0,.4)}.str-chat__square-button{border:1px solid rgba(0,0,0,.1);border-radius:3px;width:30px;height:30px;margin:0 5px;display:flex;align-items:center;justify-content:center}.str-chat__square-button svg{fill:rgba(0,0,0,.8)}.str-chat__square-button:active{background-color:rgba(0,0,0,.1)}.dark.str-chat .str-chat__square-button{background:rgba(255,255,255,.07);box-shadow:0 1px 0 0 rgba(0,0,0,.69);border-radius:3px}.dark.str-chat .str-chat__square-button svg{fill:rgba(255,255,255,.7)}.messaging.str-chat .str-chat__header-livestream{position:relative;z-index:1;border-radius:10px 10px 0 0;background:rgba(255,255,255,.9);box-shadow:none;box-shadow:0 7px 9px 0 rgba(0,0,0,.03),0 1px 0 0 rgba(0,0,0,.03)}@media screen and (max-width: 960px){.messaging.str-chat .str-chat__header-livestream{padding-left:20px;padding-right:20px}}.messaging.str-chat.dark .str-chat__header-livestream{background:rgba(46,48,51,.98);box-shadow:0 7px 9px 0 rgba(0,0,0,.03),0 1px 0 0 rgba(0,0,0,.03);border-radius:10px 10px 0 0;color:#fff}.livestream.str-chat .str-chat__header-livestream{position:relative;z-index:1;background:rgba(255,255,255,.29);box-shadow:0 1px 1px 0 rgba(0,0,0,.1)}.livestream.str-chat.dark .str-chat__header-livestream{background:rgba(255,255,255,.03);box-shadow:0 1px 1px 0 rgba(0,0,0,.34)}.livestream.str-chat.dark .str-chat__header-livestream-left--title,.livestream.str-chat.dark .str-chat__header-livestream-left--members{color:#fff}.livestream.str-chat.dark .str-chat__header-livestream-left--title{font-size:15px}.commerce.str-chat .str-chat__header-livestream{background:rgba(255,255,255,.81);box-shadow:0 7px 9px 0 rgba(0,0,0,.03),0 1px 0 0 rgba(0,0,0,.03);border-radius:10px 10px 0 0;padding:25px}.commerce.str-chat .str-chat__header-livestream-left--title{font-size:25px;margin:0;line-height:1;font-weight:400}.commerce.str-chat .str-chat__header-livestream-left--subtitle{margin:8px 0;font-size:15px}.commerce.str-chat .str-chat__header-livestream-left--members{display:none}.commerce.str-chat .str-chat__header-livestream-right-button--info{display:none}.commerce.str-chat.dark .str-chat__header-livestream{background:rgba(44,47,51,.81);box-shadow:0 7px 9px 0 rgba(0,0,0,.03),0 1px 0 0 rgba(0,0,0,.03);border-radius:10px 10px 0 0;color:#fff}.team.str-chat.dark .str-chat__header-livestream{background:rgba(38,40,43,.9);box-shadow:0 1px 1px 0 rgba(0,0,0,.26)}.team.str-chat.dark .str-chat__header-livestream-left{color:#fff}.team.str-chat.dark .str-chat__header-livestream-left--title{font-size:18px}.team.str-chat.dark .str-chat__header-livestream-left--members{font-size:13px}.str-chat__channel-list{flex:1;overflow-y:auto;max-width:300px;background:#f2f3f5;box-shadow:1px 0 0 0 rgba(0,0,0,.07);display:flex;flex-direction:column}.str-chat__channel-list--channels{flex:1}.str-chat__channel-list .channel_preview{padding:8px 16px;border-bottom:1px solid rgba(0,0,0,.08)}.str-chat__button{background:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.12),0 1px 4px 0 rgba(0,0,0,.09);font-size:14px;padding:14px 70px;color:#006cff;display:flex;align-items:center;justify-content:center;width:calc(100% - 10px);margin:5px;border:1px solid transparent}.str-chat__button:active,.str-chat__button:focus{outline:none;box-shadow:0 0 1px 0 rgba(0,0,0,.12),0 1px 4px 0 rgba(0,0,0,.09),0 0 0 2px rgba(0,108,255,.36);border:1px solid #006cff}.str-chat__button>*{margin:0 5px}.str-chat__button--round{border-radius:100px}.str-chat-channel-checkbox{position:absolute;top:0;right:0;z-index:100001;display:none}.str-chat-channel-list-burger{width:10px;height:50px;background:#fff;border-radius:0 4px 4px 0;padding:3px;box-shadow:0px 4px 6px rgba(0,0,0,.09);position:fixed;top:10px;left:0;z-index:10000;justify-content:center;cursor:pointer;display:none}.str-chat-channel-list-burger div{width:4px;height:100%;border-radius:3px;background:rgba(0,0,0,.08)}@media screen and (max-width: 960px){.str-chat-channel-list-burger{display:flex}.str-chat-channel-list.messaging,.str-chat-channel-list.team{position:fixed;left:-380px;top:0;z-index:1001;min-height:100vh;overflow-y:auto;box-shadow:7px 0 9px 0 rgba(0,0,0,.03),1px 0 0 0 rgba(0,0,0,.03);transition:left 200ms ease-in-out}.str-chat-channel-checkbox:checked~.str-chat-channel-list.messaging,.str-chat-channel-checkbox:checked~.str-chat-channel-list.team{left:0px}}.str-chat-channel-list .str-chat__channel-list-messenger{padding:0}.str-chat-channel-list .str-chat__channel-list-messenger__main{padding:20px 10px 0 10px;height:100%;overflow-y:auto}.str-chat__channel-list-messenger{padding:20px 10px 0 10px;min-width:300px;height:100%}.str-chat__channel-list-team{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;display:flex;height:100%;overflow-y:auto}.str-chat__channel-list-team__sidebar{display:flex;flex-direction:column;width:70px;padding:45px 10px 10px;background:#dedfe2}.str-chat__channel-list-team__sidebar--top{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:-10px 0}.str-chat__channel-list-team__sidebar--top>*{margin:10px 0}.str-chat__channel-list-team__sidebar--bottom{flex:1;display:flex;align-items:center;justify-content:center}.str-chat__channel-list-team__send-button,.str-chat__channel-list-team__search-button{background:none;margin:none;border:none}.str-chat__channel-list-team__main{min-width:230px;background:#f1f1f3}.str-chat__channel-list-team__header{padding:15px 15px 15px 20px;max-height:70px;display:flex;align-items:center;background:rgba(255,255,255,.01);box-shadow:0 1px 1px 0 rgba(0,0,0,.14);font-size:14px;color:#000;letter-spacing:0;position:relative}.str-chat__channel-list-team__header--title{font-weight:700;text-transform:capitalize}.str-chat__channel-list-team__header--status{position:relative;padding:0 0 0 10px}.str-chat__channel-list-team__header--status::before{position:absolute;top:5px;left:0;content:" ";width:6px;height:6px;border-radius:10px}.str-chat__channel-list-team__header--status.watcher_count::before{background:#28ca42}.str-chat__channel-list-team__header--status.busy::before{background:#28ca42}.str-chat__channel-list-team__header--status.away::before{background:#28ca42}.str-chat__channel-list-team__header--left{width:40px}.str-chat__channel-list-team__header--middle{flex:1;margin-left:15px}.str-chat__channel-list-team__header--button{margin:0;padding:15px 5px;border:0;background:none}.messenger-chat.str-chat .str-chat__channel-list-team{padding:0 0 0 10px}.messenger-chat.str-chat .str-chat__channel-list-team__header{background:none;box-shadow:none}.messenger-chat.str-chat .str-chat__channel-list-team__main{background:none}.dark.str-chat .str-chat__channel-list-team{background:#1d1f22}.dark.str-chat .str-chat__channel-list-team__header--title{color:#fff}.dark.str-chat .str-chat__channel-list-team__sidebar{background:rgba(0,0,0,.2)}.dark.str-chat .str-chat__channel-list-team__main{background:none}.str-chat__channel-preview button{position:relative;border:none;background:none;display:flex;flex-direction:row;align-items:center;width:100%;padding:10px 40px 10px 10px;font-size:13px;border-bottom:1px solid rgba(0,0,0,.08);outline:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.str-chat__channel-preview button:focus{background:#fff;box-shadow:inset 0 0 0 1px #006cff,inset 0 0 0 2px rgba(0,108,255,.36)}.str-chat__channel-preview-info{display:flex;flex-direction:column;text-align:left;padding:0 10px;max-width:250px}.str-chat__channel-preview-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:18px}.str-chat__channel-preview-title{color:#000;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.str-chat__channel-preview-unread-count{position:absolute;right:10px;width:22px;height:22px;color:#000;font-size:12px;background:#d3d3d3;border-radius:12px;display:flex;align-items:center;justify-content:center;align-self:center}.str-chat__channel-preview-last-message{color:gray;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.str-chat__channel-preview--active{background:#006cff;color:#fff}.str-chat__channel-preview--active .str-chat__channel-preview-title{color:#fff}.str-chat__channel-preview--active .str-chat__channel-preview-last-message{color:rgba(255,255,255,.69)}.str-chat__channel-preview--unread{position:relative}.str-chat__channel-preview--unread .str-chat__channel-preview-last-message{font-weight:700;color:#000}.str-chat__channel-preview--dot{width:5px;height:5px;position:absolute;border-radius:50%;left:2px;background-color:#f0f}.str-chat__channel-preview-compact{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;display:flex;font-size:14px;letter-spacing:0;line-height:40px;color:#000;position:relative;border:none;background:none;flex-direction:row;align-items:center;width:100%;padding:0 40px 0 10px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;outline:0}.str-chat__channel-preview-compact:focus{background:#fff;box-shadow:inset 0 0 0 1px #006cff,inset 0 0 0 2px rgba(0,108,255,.36)}.str-chat__channel-preview-compact--left{width:22px;height:22px}.str-chat__channel-preview-compact--right{flex:1;margin-left:11px}.str-chat__channel-preview-compact--unread{font-weight:700}.str-chat__channel-preview-compact--active{color:#fff;background:#004ab3}.str-chat__channel-preview-messenger{display:flex;width:100%;border:none;padding:10px;align-items:center;background:rgba(255,255,255,0);box-shadow:0 1px 0 0 rgba(0,0,0,.07);text-align:left;margin:5px 0}.str-chat__channel-preview-messenger--active{border:none;border-radius:9px;background:rgba(255,255,255,.9);box-shadow:none;box-shadow:0 1px 5px 0 rgba(0,0,0,.07)}.str-chat__channel-preview-messenger--last-message{font-size:13px;line-height:14px;opacity:.5}.str-chat__channel-preview-messenger--name{font-size:14px;line-height:17px;font-weight:600;margin-bottom:2px;max-width:250px}.str-chat__channel-preview-messenger--name span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.str-chat__channel-preview-messenger--unread .str-chat__channel-preview-messenger--last-message{opacity:1;font-weight:600}.dark.str-chat .str-chat__channel-preview--active{background:#132d50}.dark.str-chat .str-chat__channel-preview-title{color:#fff}.dark.str-chat .str-chat__channel-preview button:focus{background:#132d50;box-shadow:inset 0 0 0 1px #006cff,inset 0 0 0 2px rgba(0,108,255,.36)}.dark.str-chat .str-chat__channel-preview-messenger--active{background:rgba(255,255,255,.06);box-shadow:0 1px 5px 0 rgba(0,0,0,.07)}.dark.str-chat .str-chat__channel-preview-messenger--last-message{color:rgba(255,255,255,.5)}.dark.str-chat .str-chat__channel-preview-messenger--name{color:#fff}.str-chat__channel-search{margin:10px;margin-bottom:30px;display:flex;align-items:center}.str-chat__channel-search input{flex:1;background:rgba(0,0,0,.05);margin-right:20px;border:1px solid transparent;outline:none;height:30px;border-radius:15px;color:#000;font-size:14px;padding:0 10px}.str-chat__channel-search input::placeholder{color:gray}.str-chat__channel-search input:focus{background:#fff;border:1px solid #006cff;box-shadow:0 0 0 2px rgba(0,108,255,.36)}.str-chat__channel-search button{margin:0;padding:0 0 0 0;display:flex;align-items:center;justify-content:center;background:#fff;border:none;width:40px;height:40px;border-radius:100%;box-shadow:0 1px 1px 0 rgba(0,0,0,.12),0 1px 4px 0 rgba(0,0,0,.09);cursor:pointer;outline:0}.str-chat__channel-search button:focus{background:#fff;border:1px solid #006cff;box-shadow:0 0 0 2px rgba(0,108,255,.36)}.str-chat__channel-search button svg{fill:#006cff;transform:translateX(2px)}.dark.str-chat .str-chat__channel-search input{background:rgba(255,255,255,.04);color:#fff}.dark.str-chat .str-chat__channel-search button{background:#006cff}.dark.str-chat .str-chat__channel-search button svg{fill:#fff}.str-chat__down{display:flex;height:100%}.str-chat__down-main{flex:1;padding:30px}.dark.str-chat .str-chat__down{color:rgba(255,255,255,.87)}.str-chat.messaging .str-chat__event-component__channel-event{display:flex;margin-top:20px}.str-chat.messaging .str-chat__event-component__channel-event__content{margin-right:10px;color:rgba(0,0,0,.5);font-size:15px}.str-chat.messaging .str-chat__event-component__channel-event__date{font-size:11px;margin-top:4px}.str-chat.team .str-chat__event-component__channel-event{display:flex;margin:20px 40px}.str-chat.team .str-chat__event-component__channel-event__content{margin-right:10px;color:rgba(0,0,0,.5);font-size:15px}.str-chat.team .str-chat__event-component__channel-event__date{font-size:11px;margin-top:4px}.str-chat.commerce .str-chat__event-component__channel-event,.str-chat.livestream .str-chat__event-component__channel-event{display:none}.str-chat__date-separator{display:flex;margin:40px;align-items:center}.str-chat__date-separator-date{font-size:14px;font-weight:700;color:rgba(0,0,0,.7);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.str-chat__date-separator-line{flex:1;background-color:rgba(0,0,0,.1);height:1px;border:none}.str-chat__date-separator>*:not(:last-child){margin-right:20px}.commerce.str-chat .str-chat__date-separator{margin:40px 0}.dark.str-chat .str-chat__date-separator-line{background-color:rgba(255,255,255,.1)}.dark.str-chat .str-chat__date-separator-date{color:rgba(255,255,255,.7)}.dark.str-chat.team .str-chat__date-separator-line{background-color:rgba(0,0,0,.4)}.str-chat__edit-message-form{width:100%}.str-chat__edit-message-form form{position:relative;width:100%}.str-chat__edit-message-form textarea{padding:7px;background:#fff;box-shadow:inset 0 0 0 1px #006cff;border:1px solid transparent;resize:none;border-radius:5px;width:100%;font-size:15px;line-height:22px}.str-chat__edit-message-form textarea:focus{box-shadow:inset 0 0 0 1px #006cff,0 0 0 2px rgba(0,108,255,.36);outline:0}.str-chat__edit-message-form button{background:none;border:none;font-weight:700;color:rgba(0,0,0,.4)}.str-chat__edit-message-form button[type=submit]{color:#006cff}.str-chat__edit-message-form .rfu-dropzone{width:100%}.str-chat__edit-message-form .rfu-file-upload-button,.str-chat__edit-message-form .str-chat__input-emojiselect,.str-chat__edit-message-form .str-chat__input-fileupload{position:unset;top:unset;right:unset;left:unset}.str-chat__edit-message-form .rfu-file-upload-button svg,.str-chat__edit-message-form .str-chat__input-emojiselect svg,.str-chat__edit-message-form .str-chat__input-fileupload svg{fill:#000;opacity:.5}.str-chat__edit-message-form .rfu-file-upload-button:hover svg,.str-chat__edit-message-form .str-chat__input-emojiselect:hover svg,.str-chat__edit-message-form .str-chat__input-fileupload:hover svg{opacity:1}.str-chat__edit-message-form-options{display:flex}.str-chat.dark .str-chat__edit-message-form .rfu-file-upload-button svg,.str-chat.dark .str-chat__edit-message-form .str-chat__input-emojiselect svg{fill:#fff}.str-chat.dark .str-chat__edit-message-form button{color:rgba(255,255,255,.4)}.str-chat.dark .str-chat__edit-message-form button[type=submit]{color:#006cff}.str-chat.dark .str-chat__edit-message-form textarea{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(0,0,0,.21);border:2px solid transparent;border-radius:6px;color:#fff}.str-chat.dark .str-chat__edit-message-form textarea:focus{box-shadow:inset 0 0 0 1px #006cff;border:2px solid rgba(0,108,255,.36);border-radius:6px}.str-chat__gallery{display:flex;flex-wrap:wrap;width:100%;max-width:304px;overflow:hidden}.str-chat__gallery-image{width:150px;height:150px;background:#fff;margin-bottom:1px;margin-right:1px}.str-chat__gallery-image:hover{cursor:-moz-zoom-in;cursor:-webkit-zoom-in;cursor:zoom-in}.str-chat__gallery-image img{width:inherit;height:inherit;object-fit:cover}.livestream.str-chat .str-chat__gallery,.messaging.str-chat .str-chat__gallery,.commerce.str-chat .str-chat__gallery,.team.str-chat .str-chat__gallery{margin:5px 0}.livestream.str-chat .str-chat__gallery-image,.messaging.str-chat .str-chat__gallery-image,.commerce.str-chat .str-chat__gallery-image,.team.str-chat .str-chat__gallery-image{width:150px;height:150px}.livestream.str-chat .str-chat__gallery-placeholder,.messaging.str-chat .str-chat__gallery-placeholder,.commerce.str-chat .str-chat__gallery-placeholder,.team.str-chat .str-chat__gallery-placeholder{position:relative;width:150px;height:150px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:-moz-zoom-in;cursor:-webkit-zoom-in;cursor:zoom-in}.livestream.str-chat .str-chat__gallery-placeholder p,.messaging.str-chat .str-chat__gallery-placeholder p,.commerce.str-chat .str-chat__gallery-placeholder p,.team.str-chat .str-chat__gallery-placeholder p{position:relative;z-index:1}.livestream.str-chat .str-chat__gallery-placeholder:after,.messaging.str-chat .str-chat__gallery-placeholder:after,.commerce.str-chat .str-chat__gallery-placeholder:after,.team.str-chat .str-chat__gallery-placeholder:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.69);z-index:0}.commerce.str-chat .str-chat__gallery{width:calc(100% - 30px);display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:100px}.commerce.str-chat .str-chat__gallery-image,.commerce.str-chat .str-chat__gallery-placeholder{width:100%;height:100%}.commerce.str-chat .str-chat__message-commerce .str-chat__gallery{border-radius:16px 16px 16px 2px}.commerce.str-chat .str-chat__message-commerce--right .str-chat__gallery{border-radius:16px 16px 2px 16px}.str-chat__loading-channels{width:300px;height:100%;padding:20px;background:#fafafa}.str-chat__loading-channels-meta{flex:1}.str-chat__loading-channels-avatar,.str-chat__loading-channels-username,.str-chat__loading-channels-status{background-image:linear-gradient(-90deg, #f2f2f2 0%, #e5e5e5 100%)}.str-chat__loading-channels-username,.str-chat__loading-channels-status{border-radius:2px;height:14px}.str-chat__loading-channels-avatar{width:40px;height:40px;border-radius:100%;margin-right:10px}.str-chat__loading-channels-username{width:40%;margin-bottom:6px}.str-chat__loading-channels-status{width:80%}.str-chat__loading-channels-item{display:flex;align-items:center;width:100%;height:40px;border-radius:3px;margin-bottom:10px;animation:pulsate 1s linear 0s infinite alternate}.str-chat__loading-channels-item:nth-of-type(2){animation:pulsate 1s linear .3334 infinite alternate}.str-chat__loading-channels-item:last-of-type{animation:pulsate 1s linear .6667s infinite alternate}@keyframes pulsate{from{opacity:.5}to{opacity:1}}.str-chat__loading-indicator{display:flex;align-items:center;justify-content:center;animation:rotate 1s linear infinite}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{from{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.str-chat.messaging .str-chat__load-more-button__button{border:0;width:100%;height:40px;border-radius:9px;background:rgba(255,255,255,.9);box-shadow:none;box-shadow:0 1px 5px 0 rgba(0,0,0,.07);padding:10px;font-size:14px}.str-chat.team .str-chat__load-more-button__button{border:0;background:transparent;width:100%;height:40px;padding:10px;font-size:14px}.str-chat__li{display:block;position:relative}.str-chat__li--top,.str-chat__li--single{margin:20px 0 0}.str-chat__li--top .str-chat__message-attachment--img,.str-chat__li--top .str-chat__message-attachment-card,.str-chat__li--top .str-chat__message .str-chat__gallery,.str-chat__li--single .str-chat__message-attachment--img,.str-chat__li--single .str-chat__message-attachment-card,.str-chat__li--single .str-chat__message .str-chat__gallery{border-radius:16px 16px 16px 2px}.str-chat__li--top .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment--img,.str-chat__li--top .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment-card,.str-chat__li--top .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__gallery,.str-chat__li--single .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment--img,.str-chat__li--single .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment-card,.str-chat__li--single .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__gallery{border-radius:16px 16px 16px 2px}.str-chat__li--top .str-chat__message--me .str-chat__message-attachment--img,.str-chat__li--top .str-chat__message--me .str-chat__message-attachment-card,.str-chat__li--single .str-chat__message--me .str-chat__message-attachment--img,.str-chat__li--single .str-chat__message--me .str-chat__message-attachment-card{border-radius:16px 16px 2px 16px}.str-chat__li--top .str-chat__message--me.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment--img,.str-chat__li--top .str-chat__message--me.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment-card,.str-chat__li--single .str-chat__message--me.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment--img,.str-chat__li--single .str-chat__message--me.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment-card{border-radius:16px 16px 2px 16px}.str-chat__li--top .str-chat__message--me .str-chat__gallery,.str-chat__li--single .str-chat__message--me .str-chat__gallery{border-radius:16px 16px 2px 16px}.str-chat__li--top .str-chat__message--me.str-chat__message--has-text .str-chat__gallery,.str-chat__li--single .str-chat__message--me.str-chat__message--has-text .str-chat__gallery{border-radius:16px 16px 2px 16px}.str-chat__li--middle{margin:0}.str-chat__li--middle .str-chat__message-attachment--img,.str-chat__li--middle .str-chat__message-attachment-card,.str-chat__li--middle .str-chat__message .str-chat__gallery{border-radius:2px 16px 16px 2px}.str-chat__li--middle .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment--img,.str-chat__li--middle .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment-card,.str-chat__li--middle .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__gallery{border-radius:2px 16px 16px 2px}.str-chat__li--middle .str-chat__message--me .str-chat__message-attachment--img,.str-chat__li--middle .str-chat__message--me .str-chat__message-attachment-card,.str-chat__li--middle .str-chat__message--me .str-chat__message .str-chat__gallery{border-radius:16px 2px 2px 16px}.str-chat__li--middle .str-chat__message--me.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment--img,.str-chat__li--middle .str-chat__message--me.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment-card,.str-chat__li--middle .str-chat__message--me.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__gallery{border-top-left-radius:2px}.str-chat__li--bottom{margin:0 0 20px}.str-chat__li--bottom .str-chat__message-attachment--img,.str-chat__li--bottom .str-chat__message-attachment-card,.str-chat__li--bottom .str-chat__message .str-chat__gallery{border-radius:2px 16px 16px 2px}.str-chat__li--bottom .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment--img,.str-chat__li--bottom .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__message-attachment-card,.str-chat__li--bottom .str-chat__message.str-chat__message--has-text.str-chat__message--has-attachment .str-chat__gallery{border-radius:2px 16px 16px 2px}.str-chat__li--bottom .str-chat__message--me .str-chat__message-attachment--img,.str-chat__li--bottom .str-chat__message--me .str-c