@talkjs/react-components
Version:
Provides chat UI components for TalkJS.
2 lines (1 loc) • 25.2 kB
CSS
@import"https://cdn.talkjs.com/fonts/Inter.css";:root{--reach-menu-button: 1}[data-reach-menu]{position:relative}[data-reach-menu-popover]{display:block;position:absolute}[data-reach-menu-popover][hidden]{display:none}[data-reach-menu-list],[data-reach-menu-items]{display:block;white-space:nowrap;border:solid 1px hsla(0,0%,0%,.25);background:#fffffffc;outline:none;padding:1rem 0;font-size:85%}[data-reach-menu-item]{display:block;user-select:none}[data-reach-menu-item]{cursor:pointer;display:block;color:inherit;font:inherit;text-decoration:initial;padding:5px 20px}[data-reach-menu-item][data-selected]{background:#1159a6;color:#fff;outline:none}[data-reach-menu-item][aria-disabled]{opacity:.5;cursor:not-allowed}.t-audio-player{width:100%;height:auto;display:flex;flex-direction:row;align-items:center;column-gap:10px;padding:1.5em 1em 0}.t-audio-player .t-waveform{flex-grow:1;z-index:0}.t-audio-player button{background:transparent;border:none;color:inherit;padding:0;cursor:pointer}.t-audio-player .t-playback-speed{width:4em}.t-audio-player .t-play-pause-icon{width:30px;height:30px}.t-audio-player .t-up-down-icon{width:1em;height:1em}.t-audio-player .t-up-down svg{margin-top:-2px}.t-audio-player .t-playback-heading{opacity:.5;padding:.5em 1em}.t-audio-player .t-playback-checkmark{display:inline-block;width:1em}:is(.t-text-input .empty-node):before{position:absolute;color:currentColor;cursor:text;opacity:.6}:is(.t-text-input .empty-node):first-child:before{content:attr(data-placeholder)}.t-editor .ProseMirror{position:relative}.t-editor .ProseMirror{word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:"liga" 0}.t-editor .ProseMirror pre{white-space:pre-wrap}.t-editor .ProseMirror li{position:relative}.t-editor .ProseMirror-hideselection *::selection{background:transparent}.t-editor .ProseMirror-hideselection *::-moz-selection{background:transparent}.t-editor .ProseMirror-hideselection{caret-color:transparent}.t-editor .ProseMirror [draggable][contenteditable=false]{user-select:text}.t-editor .ProseMirror-selectednode{outline:2px solid #8cf}.t-editor li.ProseMirror-selectednode{outline:none}.t-editor li.ProseMirror-selectednode:after{content:"";position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none}.t-editor img.ProseMirror-separator{display:inline;border:none;margin:0}.t-emoji-picker{width:100%;height:350px;overflow:hidden;flex-shrink:1}.t-emoji-picker emoji-picker{width:100%;border:0;height:349px;--border-size: 0;--num-columns: 10;--emoji-size: 21px;--category-emoji-size: 14px;--indicator-height: 2px;--outline-color: rgba(30, 96, 225, .5);--input-padding: 7px 11.5px;--button-active-background: #d4d4d4;--input-border-color: #d4d4d4;--input-focused-border-color: #b0b0b0;--indicator-color: #1e60e1;--button-hover-background: #d4d4d488;--input-border-radius: 4px;--input-font-size: inherit;--emoji-font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "Twemoji Mozilla", sans-serif}.t-emoji-picker[t-loading]{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#1e60e1}.t-emoji-picker[t-loading] .t-loading-icon,.t-loading-icon{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.t-chatbox *:where(:not(svg,svg *)){all:revert-layer}.t-chatbox{--default-chat-width: 420px;font-family:Twemoji Country Flags,Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.37;color:#111;letter-spacing:normal;margin:0;position:relative;width:100%;height:100%;overflow:hidden;background-color:#fff;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:none;box-sizing:border-box}.t-chatbox button{font-family:inherit;font-size:1em}.t-chatbox *,.t-chatbox *:before,.t-chatbox *:after{box-sizing:border-box}.t-chatbox svg{fill:currentColor}.t-chatbox em{font-style:italic}.t-chatbox strong{font-weight:700}.t-chatbox del{text-decoration:line-through}.t-chatbox code{font-family:Cascadia Code,Droid Sans Mono,Menlo,Consolas,Lucida Console,Monaco,monospace;font-variant-ligatures:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.t-message-list{width:100%;height:100%;display:flex;flex-direction:column-reverse;overflow-x:hidden;overflow-y:auto;padding:16px;scrollbar-color:rgba(0,0,0,.2) transparent}.t-message-list:hover{scrollbar-color:rgba(0,0,0,.4) transparent}.t-message-list:active{scrollbar-color:rgba(0,0,0,.6) transparent}.t-message-group{display:flex;flex-direction:column-reverse}.t-chatbox .t-panel{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;text-align:center;padding:25px;-webkit-font-smoothing:subpixel-antialiased;overflow-x:hidden;font-size:.95em;font-family:Open Sans,Helvetica,sans-serif}.t-chatbox .t-error-panel{background-color:#f7f7f7}:is(.t-chatbox .t-error-panel) .t-heading{font-size:2em}.t-attach-overlay{z-index:2;width:100%;height:100%;padding:16px;background-color:#64646480;display:flex;justify-content:center;align-items:center}.t-upload-preview .t-preview{position:relative;background-color:#fff;border-radius:1rem;max-width:750px;width:100%;display:inline-block;overflow:auto;padding:.5rem}@media screen and (max-width: 500px){.t-upload-preview .t-preview{width:85%}}:is(.t-upload-preview .t-preview) .t-img-container{text-align:center;background-color:#0000001a}:is(.t-upload-preview .t-preview) img{display:block;max-width:100%;max-height:400px;margin-left:auto;margin-right:auto}:is(.t-upload-preview .t-preview) video{width:100%;height:100%;object-fit:fill}:is(.t-upload-preview .t-preview) .t-location-upload-preview{width:100%;background-color:#0000001a;padding-bottom:calc((400 / 600) * 100%);display:block}.t-upload-preview .t-cancel-row{text-align:right;position:sticky;top:8px;padding-right:8px;z-index:2;margin-bottom:-38px}.t-upload-preview .t-filename-row{white-space:pre-wrap;word-break:break-all;padding:.5rem 1rem 0}.t-is-file:is(.t-upload-preview .t-filename-row){display:flex;justify-content:center;align-items:center;min-height:250px;padding-top:32px;padding-bottom:32px;text-align:center;background-color:#0000001a;border-radius:1rem;margin-bottom:1rem}:is(.t-upload-preview .t-filename-row) .t-file-block{background-color:#fff;padding:16px 32px;border-radius:8px;display:inline-block}.t-upload-preview .t-error-row{border-width:.125rem;border-radius:1rem;padding:1rem;background-color:#fec8c866;border-color:transparent;color:#ef4444;white-space:normal}.t-upload-preview .t-send-row{position:sticky;bottom:0;padding:1rem;display:flex;justify-content:space-between}.t-upload-preview .t-cancel{border:0;border-radius:.5rem;padding:.75rem 1rem;cursor:pointer;color:currentColor}.t-upload-preview .t-confirm-send{margin-left:auto;border:0;border-radius:.5rem;padding:.75rem 1rem;cursor:pointer}.t-upload-preview .t-loading{height:80px;width:100%;display:flex;align-items:center;justify-content:center;color:#1e60e1}.t-upload-preview .t-preview,.t-upload-preview .t-send-row{background:#fff}.t-upload-preview .t-confirm-send{background-color:#007df9;color:#fff}.t-chatbox-content{flex-direction:column;margin:0;position:relative;width:100%;height:100%;display:flex;overflow-y:hidden}.t-chatbox-content>.t-attach-overlay{position:absolute;width:100%;height:100%;top:0;left:0}.t-chatbox-content>.t-drop-overlay{pointer-events:none}:is(.t-chatbox-content>.t-drop-overlay) .t-theme-icon{color:#1e1e1e80;width:300px;height:300px}.t-theme-audio-block{display:contents;width:100%;min-width:25ch}.t-theme-audio-block .t-audio-player{margin-bottom:.5em}.t-theme-audio-block .t-attachment-icon{width:1em;height:1em;margin-right:.2em}.t-theme-audio-block .t-filesize{font-size:.8em}.t-theme-avatar{display:block;overflow:hidden;background-color:#ececec;background-size:cover;background-repeat:no-repeat;background-position:center center;border-style:solid;border-radius:50%;border-width:2px;border-color:#fff;flex-shrink:0;align-self:flex-start;width:3em;height:3em}.t-theme-chat-header button[data-action]{border-radius:.375em;font-size:inherit;margin:1px;padding:.25em .325em;cursor:pointer;transition:color .2s ease-in-out,background-color .2s ease-in-out,border .2s ease-in-out;color:#111;background-color:transparent;border:1px solid #525252}.t-theme-chat-header button[data-action]:hover{color:#fff;background-color:#111;border:1px solid #111}.t-theme-chat-header button[data-action]:active{color:#fff;background-color:#404040;border:1px solid #404040}.t-theme-chat-header button[data-action]:focus-visible{outline:#525252 solid 2px;outline-offset:2px}.t-theme-chat-header{display:flex;align-items:center;height:4.5em;background-color:#ececec;border-bottom:1px solid #d4d4d4;flex-shrink:0}.t-theme-chat-header .t-inner{flex-grow:1;flex-basis:0;display:flex;align-items:center;padding-left:1em;padding-right:1em;min-width:0}.t-theme-chat-header .t-content{flex-grow:1;display:flex;align-items:center;min-width:0}.t-theme-chat-header .t-image{width:45px;text-align:center;margin-right:.75em;flex-shrink:0}.t-theme-chat-header .t-info{flex-grow:1;flex-basis:0;min-width:0}.t-theme-chat-header .t-title{font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:3px}.t-theme-chat-header .t-subtitle{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:85%;margin-left:4px}.t-theme-chat-header .t-user{display:inline-block;vertical-align:middle}.t-theme-chat-header .t-online-indicator{display:inline-block;width:.75em;height:.75em;border-radius:100%;margin:0 .75em -1px .275em}.t-theme-chat-header .t-online-indicator[t-status=online]{background-color:#22c55e}.t-theme-chat-header .t-online-indicator[t-status=offline]{background-color:#fff;-webkit-box-shadow:inset 0 0 0 1px rgba(50,50,50,.4);box-shadow:inset 0 0 0 1px #32323266}.t-message-divider{width:100%;margin:1.3em .5em 0;display:grid;grid-template-columns:1fr max-content 1fr;color:#95a7b1}.t-message-divider span{vertical-align:top;white-space:nowrap;height:1.3em;padding:0 20px}.t-message-divider .t-line[t-side=right]{display:grid;grid-template-columns:1fr max-content;gap:10px;grid-column:3}.t-message-divider .t-line .t-line-segment{height:0;width:100%;margin-top:10px;border:none;border-bottom:1px solid #95a7b1}.t-message-divider .t-line .t-unread-marker{position:relative;top:-4px;height:28px;padding:3px 10px;border-radius:100px;border:1px solid #95a7b1;vertical-align:middle}.t-theme-file-block{display:contents}.t-theme-file-block a{word-break:break-all;text-decoration:none}.t-theme-file-block .t-filename{text-decoration:underline}.t-theme-file-block .t-attachment-icon{width:1em;height:1em;margin-right:.2em}.t-theme-file-block .t-filesize{white-space:nowrap;font-size:75%}.t-theme-file-block .t-loading-spinner{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.t-theme-group-chat-image{display:block;overflow:hidden;position:relative;width:44px;height:44px;flex-shrink:0}.t-theme-group-chat-image .t-mini-avatar{border-radius:50%;border-width:2px;border-color:#fff;border-style:solid;box-shadow:0 1px 1px #8899a626;width:30px;height:30px;position:absolute;background-color:#f7f7f7;background-position:center;background-size:cover}.t-theme-group-chat-image .t-mini-avatar:nth-child(1){right:0;top:14px}.t-theme-group-chat-image .t-mini-avatar:nth-child(2){left:0;top:0}.t-theme-group-chat-image .t-counter{border-radius:50%;border:2px solid #fff;font-weight:600;position:absolute;min-width:18px;min-height:18px;max-width:22px;max-height:22px;left:0;bottom:0;display:flex;justify-content:center;align-items:center;color:#111;padding:0}.t-theme-group-chat-image .t-group{border-style:none;color:#ececec}.t-theme-icon{display:inline-block;vertical-align:middle;overflow:hidden}.t-theme-image-block{display:contents}.t-theme-image-block .download-icon{width:1em;height:1em;margin-right:.2em}.t-image-wrapper{display:block;height:auto;min-height:40px;max-height:400px}.t-theme-image-block .t-root{display:flex;justify-content:center;align-items:center;min-height:inherit;max-height:inherit;height:auto;max-width:min(calc(100% + 2em),calc(var(--img-w) * 1px));width:calc(100% + 2em);transform:translate(-1em);aspect-ratio:var(--img-w) / var(--img-h);overflow:hidden;margin:0 auto .5em}.t-theme-image-block .t-image{width:100%;height:100%;max-width:calc(var(--img-w) * 1px);max-height:calc(var(--img-h) * 1px);object-fit:contain}.t-theme-image-block .t-filesize{font-size:.8em}.t-theme-location-block{display:contents;min-height:100px;max-height:500px}.t-theme-location-block .t-root{display:block;height:200px;margin:0 -1em .5em}.t-theme-message{display:block;margin-top:.35em}.t-theme-message:last-child{margin-top:1.35em}.t-theme-message[t-sender=currentUser]:not(:last-child){margin-right:3em}.t-theme-message[t-sender=other]:not(:last-child){margin-left:3em}.t-theme-message:not(:last-child) .t-theme-avatar{display:none}.t-theme-message:last-child .t-theme-avatar{display:block}.t-theme-message[t-sender=system]{margin-top:1.35em}.t-theme-message[t-sender=system]+.t-theme-message[t-sender=system]{margin-top:.5em}.t-theme-message:has(.t-reactions):has(+.t-theme-message){margin-bottom:.75em}.t-theme-message .t-message-row{display:flex;align-items:center}.t-theme-message[t-sender=currentUser] .t-message-row{flex-direction:row-reverse}.t-theme-message .t-message-body{white-space:normal;overflow:hidden;border-radius:.75em;border-width:1px;border-style:solid;word-wrap:break-word;position:relative;display:inline-block;max-width:calc(100% - 6.5em);border-color:#ececec;background-color:#f7f7f7;color:#111;padding:.75em 1em}.t-theme-message .t-message-body .t-theme-referenced-message{border-left:solid 2px;margin-bottom:.4em;font-size:93%;padding:0 .55em}.t-theme-message[t-sender=currentUser] .t-message-body{border-color:#007df9;background-color:#007df9;color:#fff;margin-right:.5em}.t-theme-message[t-sender=other] .t-message-body{margin-left:.5em}.t-theme-message .t-message-body .t-message-content{display:contents;margin-top:.75em}.t-theme-message .t-message-body:has(.t-theme-audio-block,.t-theme-voice-block,.t-theme-location-block){width:100%}.t-theme-message .t-message-body:not(:has(.t-message-sender-name,.t-theme-referenced-message,.t-theme-text-block:first-child,.t-theme-file-block:first-child)){padding-top:0}.t-theme-message .t-message-body:not(:has(.t-theme-text-block:first-child,.t-theme-file-block:first-child)) .t-message-sender-name{margin-bottom:.75em}.t-theme-message button[data-action]{border-radius:.375em;font-size:inherit;margin:1px 0;padding:.25em .325em;cursor:pointer;transition:color .2s ease-in-out,background-color .2s ease-in-out,border .2s ease-in-out}.t-theme-message[t-sender=currentUser] button[data-action]{color:#0761d1;background-color:#fff;border:1px solid white}.t-theme-message[t-sender=currentUser]:enabled button[data-action]:hover,.t-theme-message[t-sender=currentUser]:enabled button[data-action]:active{color:inherit;background-color:transparent}.t-theme-message[t-sender=currentUser] button[data-action]:focus-visible{outline:white solid 2px;outline-offset:2px}.t-theme-message[t-sender=other] button[data-action]{color:#111;background-color:transparent;border:1px solid #525252}.t-theme-message[t-sender=other]:enabled button[data-action]:hover{color:#fff;background-color:#111;border:1px solid #111}.t-theme-message[t-sender=other]:enabled button[data-action]:active{color:#fff;background-color:#404040;border:1px solid #404040}.t-theme-message[t-sender=other] button[data-action]:focus-visible{outline:#525252 solid 2px;outline-offset:2px}.t-theme-message[t-sender=system] button[data-action]{color:#fff;background-color:#007df9;border:1px solid #007df9}.t-theme-message[t-sender=system]:enabled button[data-action]:hover{color:#fff;background-color:#0761d1;border:1px solid #0761d1}.t-theme-message[t-sender=system]:enabled button[data-action]:active{color:#fff;background-color:#3291ff;border:1px solid #3291ff}.t-theme-message[t-sender=system] button[data-action]:focus-visible{outline:#007df9 solid 2px;outline-offset:2px}.t-theme-message button[data-action]:disabled{background-color:gray;border-color:gray}.t-theme-message .t-message-sender-name{font-size:75%;font-weight:700}.t-theme-message .t-reactions{margin-top:.25em;display:flex;flex-wrap:wrap;gap:.25em}.t-theme-message[t-sender=currentUser] .t-reactions{justify-content:flex-end;margin-right:.75em}.t-theme-message[t-sender=other] .t-reactions{margin-left:3.75em}.t-theme-message[t-sender=system] .t-message-body{background:transparent;width:100%;max-width:none;border:none}.t-theme-message[t-sender=system] .t-message-row{white-space:normal;border-radius:.75em;overflow:hidden;white-space:pre-wrap;background-color:transparent;color:#111;border:1px solid #d4d4d4}.t-theme-message .t-message-content a{color:currentColor}.t-theme-message .t-message-status{display:inline-flex;font-size:75%;float:right;margin-left:2em;margin-top:.6em;opacity:75%;min-width:3.5ch;text-align:right}.t-theme-message .t-message-loading-spinner{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;width:1em;height:1em}.t-theme-message .t-status-icon{margin-left:.25em;letter-spacing:-.3rem;min-width:1em}.t-theme-message .t-message-action-menu-button{border:none;color:inherit;cursor:pointer;position:absolute;top:.58em;right:.58em;margin:-.08em;z-index:1;font-size:120%;background:inherit;visibility:hidden}.t-theme-message .t-message-row:hover .t-message-action-menu-button,.t-theme-message .t-message-row:focus-within .t-message-action-menu-button{visibility:visible}.t-message-action-menu-button .t-action-menu-icon{width:1.143em;height:1.143em}.t-theme-message-action-menu{display:flex;flex-direction:column;background-color:#fff;color:#111;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:0 8px 24px #73737333;padding:.35em}.t-theme-message-action-menu .t-menu-item{padding:.45em .65em;cursor:pointer;background:none;border:none;border-radius:.5em;text-align:left}.t-theme-message-action-menu .t-menu-item:hover{background-color:#007df9;color:#fff}.t-theme-message-action-menu .t-menu-item.t-danger{color:#ef4444}.t-theme-message-action-menu .t-menu-item.t-danger:hover{background-color:#fec8c866;color:#ef4444}.t-theme-message-field{display:flex;flex-direction:column}.t-theme-message-field[t-mode=send]{max-height:calc(100% - 100px)}.t-theme-message-field[t-mode=edit]{margin:.75em 0}.t-theme-message-field .t-wrapper{flex-shrink:0;position:relative;padding:16px;color:#111;font-size:16px;background-color:#ececec;border-top:#d4d4d4 solid 1px;max-width:100%;width:100%;margin:0 auto}.t-theme-message-field .t-edit-row{display:flex;gap:.5em;margin-left:auto}.t-theme-message-field .t-edit-row button{display:inline-block;padding:.5rem 1rem;border:0;border-radius:.5rem;cursor:pointer;background-color:#1111111a;color:#111}.t-theme-message-field .t-edit-row button[t-action=save]{background-color:#007df9;color:#fff}.t-theme-message-field .t-text-form{width:100%;max-width:100%;margin:0 auto;display:flex}.t-theme-message-field[t-mode=edit] .t-text-form{flex-direction:column;gap:.5em}.t-theme-message-field .t-editor .t-text-input{min-height:3.143em;max-height:9em;border-radius:.65em;border:1px solid white;background-color:#fff;display:block;resize:none;overflow-x:hidden;overflow-y:auto;word-break:break-word;white-space:pre-wrap;padding:0 44px 0 1em;transition:box-shadow .15s ease-out}.t-theme-message-field .t-editor .t-text-input:focus-visible{border-color:#fff;outline:#a3a3a3 solid 1px}.t-theme-message-field .t-editor .t-text-input p{margin:.875em 0;padding:0;border:0;outline:0}.t-theme-message-field .t-send-column{flex-grow:0;flex-shrink:0;white-space:nowrap;align-self:center;display:flex}.t-theme-message-field .t-textbox-column{position:relative;flex-grow:1;margin-right:.28em}.t-theme-message-field .t-send-button{width:2.571em;height:2.571em;padding:.571em;border:0;border-radius:9999px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;background:transparent;color:currentColor;opacity:.75;transition:.15s ease-out}.t-theme-message-field .t-send-button:hover,.t-theme-message-field .t-send-button:focus{background-color:#2626260d}.t-theme-message-field .t-send-button:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(#007df9,50%)}.t-theme-message-field .t-send-button{display:flex}.t-theme-message-field .t-send-button[disabled]{color:currentColor}.t-theme-message-field .t-readonly{opacity:.5;user-select:none}.t-theme-message-field .t-button-overlay{position:absolute;right:0;top:0;bottom:0;margin-right:8px;display:flex;align-items:center}.t-theme-message-field [t-kind=icon-button]{width:36px;height:36px;padding:8px;border:0;border-radius:9999px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;background:transparent;color:currentColor;opacity:.75;transition:.15s ease-out}.t-theme-message-field [t-kind=icon-button]:hover,.t-theme-message-field [t-kind=icon-button]:focus{background-color:rgba(#262626,5%);opacity:1}.t-theme-message-field [t-kind=icon-button]:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(#007df9,50%)}.t-theme-message-field .t-edit-row button[t-action=save]:disabled{cursor:initial;background-color:#888;color:#fff}.t-theme-referenced-message{display:flex;flex-direction:column}.t-theme-referenced-message .t-sender-name{font-weight:600;margin-bottom:2px}.t-theme-referenced-message .t-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:.165em 0}.t-theme-referenced-message .t-content a{color:currentColor}.t-theme-referenced-message .t-content ul{list-style:inside;margin:0;padding:0}.t-theme-referenced-message .t-content li{display:inline list-item;margin-right:1em}.t-theme-referenced-message .t-content li::marker{content:"• "}.t-theme-reply-bar{height:4.286em;display:flex;align-items:center;background-color:#ececec;padding:.714em;color:#262626;border-top:#d4d4d4 solid 1px}.t-theme-reply-bar .t-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.t-theme-reply-bar .t-close-button{width:2.571em;height:2.571em;padding:.571em;border:0;border-radius:9999px;cursor:pointer;display:inline-flex;align-items:center;background:transparent;opacity:.75;transition:.15s ease-out}.t-theme-reply-bar .t-close-button:hover{background-color:#2626260d;color:#007df9;opacity:1}.t-theme-reply-bar .t-body{flex-grow:1;padding:0 1em;overflow:hidden}.t-theme-reply-bar .t-close-icon,.t-theme-reply-bar .t-reply-icon{width:1.428em;height:1.428em;min-width:1.428em;min-height:1.428em}.t-theme-text-block{display:contents}.t-theme-text-block .t-text .t-emoji{height:1.15em;width:1.15em;margin:0 .1em .1em;vertical-align:middle}.t-theme-text-block .t-text{white-space:pre-wrap}.t-theme-text-block ul{padding-left:0;margin:0}.t-theme-text-block ul li{margin-left:1em;margin-bottom:.5em}.t-theme-video-block{display:contents}.t-theme-video-block .download-icon{width:1em;height:1em;margin-right:.2em}.t-video-wrapper{display:block;height:auto;min-height:40px;max-height:400px}.t-theme-video-block .t-root{display:flex;justify-content:center;align-items:center;min-height:inherit;max-height:inherit;height:auto;max-width:min(calc(100% + 2em),calc(var(--video-w) * 1px));width:calc(100% + 2em);transform:translate(-1em);aspect-ratio:var(--video-w) / var(--video-h);overflow:hidden;margin:0 auto .5em}.t-theme-video-block .t-video{width:100%;height:100%;max-width:calc(var(--video-w) * 1px);max-height:calc(var(--video-h) * 1px);object-fit:contain;background-color:#000000d9}.t-theme-video-block .t-filesize{font-size:.8em}.t-theme-message-list-footer{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.5em;margin-top:1.35em}.t-theme-message-list-footer .t-typing-avatars{display:flex;flex-direction:row;align-items:left;justify-content:center;width:fit-content}.t-theme-message-list-footer .t-typing-avatars>.t-theme-avatar{width:2.6em;height:2.6em;display:flex;align-items:center;justify-content:center;color:#111;line-height:2.6em;vertical-align:text-top;font-size:.75em}.t-theme-message-list-footer .t-typing-avatars>.t-theme-avatar:not(:last-child){margin-right:-.66em}.t-theme-message-list-footer .t-typing-bubble{display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:1em;background-color:#f7f7f7;border:1px solid #ececec;color:#111;padding:0 1em;font-size:.75em}.t-theme-message-list-footer .t-typing-animation{display:flex;flex-direction:row;align-items:center;gap:4px;height:2.6em;line-height:2.6em}.t-theme-message-list-footer .t-typing-animation span{height:6px;width:6px;background-color:#737373;display:inline-block;border-radius:50%;opacity:.4}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(1){animation:1s blink infinite .3333s}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(2){animation:1s blink infinite .6666s}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(3){animation:1s blink infinite .9999s}@keyframes blink{50%{opacity:1}}