.chat{display:grid;grid-template-rows:auto 1fr auto;max-height:900px;height:96vh;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.chat__header{text-align:center;padding:2rem 1rem}@media not (min-width:660px){.chat__header{padding:1rem}}.chat__header .heading{text-transform:uppercase;margin-bottom:0}@media not (min-width:660px){.chat__header .heading{font-size:1.5rem}}.chat__header h4{font-size:1.25rem;margin-top:0}@media not (min-width:660px){.chat__header h4{display:none}}.chat__footer{background:var(--white);padding:1rem}.chat__footer form{display:grid;grid-template-columns:1fr 185px;-webkit-box-align:end;-ms-flex-align:end;align-items:end;gap:1rem}@media not (min-width:820px){.chat__footer form{grid-template-columns:1fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.chat__footer textarea{resize:none;border-radius:30px;color:var(--dark-gray);padding:1rem;font-size:1rem;line-height:1.2}.chat__footer aside{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@media not (min-width:820px){.chat__footer aside{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.chat__window{background:#f8f8f880;padding:1.5rem;overflow-y:auto;height:100%}.chat__window-holder{position:relative;overflow:hidden}.chat__message{display:grid;grid-template-columns:45px 1fr;gap:1rem;font-size:1rem}.chat__message+.chat__message{margin-top:1.5rem}.chat__avatar{background:var(--white);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:hidden;border-radius:50%;padding:2px;aspect-ratio:1/1}.chat__avatar img{border-radius:50%;display:block;aspect-ratio:1/1}.chat__author{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:1.1rem;margin-bottom:6px}.chat__author span{font-size:.85rem}.chat__author h5{color:var(--purple);font-size:1rem}.chat__author h5 span,.chat__author h5 strong{font-size:.8rem}.chat__author h5 span{color:var(--white);display:inline-block;margin-left:5px}.chat__editor{font-weight:400;-webkit-transition:opacity .2s;transition:opacity .2s}.chat__editor--disabled{opacity:.5;pointer-events:none}.chat__content-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:.5rem;position:relative}.chat__content{border-radius:0 30px 30px;background-color:var(--white);color:var(--dark-gray);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);padding:.8rem 1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;line-height:1.4;max-width:100%;word-break:break-word}.chat__content figure{margin-top:1rem;max-width:400px}.chat__content img{border:2px solid var(--purple);width:auto;max-width:100%;border-radius:.5rem}.chat__content p:empty{display:none}.chat__content p:empty+p{margin-top:0}.chat__message--host .chat__content{color:var(--white)}.chat__message--host .chat__content figure img{border-color:var(--white)}.chat__button{border:0;cursor:pointer;border-radius:50%;aspect-ratio:1/1;background-color:#f0f0f0;font-size:1.6rem;line-height: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;-webkit-transition:all .3s;transition:all .3s;padding:.8rem .8rem .5rem}.chat__button:disabled{opacity:.8;cursor:default}.chat__button:not(:disabled):not(:has(:disabled)):hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.chat__button--emoji:not(:disabled):hover{background:var(--yellow)}.chat__button--photo:not(:has(:disabled)):hover{background:var(--pink)}.chat__button--photo:has(:disabled){opacity:.8;cursor:default}.chat__button--send{background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%)}.chat__rules{background-color:#ffffff1a;padding:3rem;font-size:1rem}.chat__rules .heading{font-size:2rem}.chat__rules ul{list-style:none;padding-left:0}.chat__rules ul li{position:relative;padding-left:2rem}.chat__rules ul li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900;font-size:1.25rem}.chat__input-holder{position:relative;color:#adb5bd}.chat__char-count{position:absolute;bottom:.5rem;right:.75rem;font-size:.8rem}.chat .tiptap-editor{max-height:120px;overflow:auto}.chat__image-preview{position:relative;width:100px;height:100px;margin-bottom:1rem;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.chat__image-preview img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;overflow:hidden;border-radius:var(--radius-sm);-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.chat__image-preview--uploading img{opacity:.7}.chat__image-preview button{position:absolute;top:-5px;right:-5px;background:var(--pink);color:var(--white);border:0;border-radius:50%;padding:5px;font-size:18px;line-height:0;aspect-ratio:1/1;width:20px;height:20px}.chat__image-progress{position:absolute;top:50%;translate:0 -50%;left:0;right:0;height:4px;background:#0000001a;border-radius:0 0 var(--radius-sm) var(--radius-sm);overflow:hidden}.chat__image-progress-bar{height:100%;background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);-webkit-transition:width .3s ease;transition:width .3s ease}.chat__new-message-indicator{position:absolute;bottom:10px;right:10px}.chat__new-message-indicator button{border:0;background:none;padding:.5rem 1rem;border-radius:var(--radius-sm);cursor:pointer;color:var(--white);background:var(--purple-light)}.chat__auth-buttons{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.chat__emoji-picker-wrapper{position:relative}.chat__emoji-dropdown{position:absolute;bottom:100%;margin-bottom:.5rem;background:var(--white);border-radius:.5rem;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);width:280px;z-index:50;overflow:hidden}.chat__emoji-search{width:100%;padding:.5rem .75rem;border:0;border-bottom:1px solid #f0f0f0;font-size:.85rem;outline:none;color:var(--dark-gray)}.chat__emoji-list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.25rem;padding:.5rem;max-height:200px;overflow-y:auto}.chat__emoji-item{border:0;background:transparent;cursor:pointer;font-size:1.4rem;padding:.25rem;border-radius:.25rem;line-height:1}.chat__emoji-item:hover{background:#f0f0f0}.chat__footer .chat__emoji-dropdown{right:0}.chat__content-wrapper .chat__emoji-dropdown{left:0}.chat__content-wrapper .chat__emoji-dropdown--left{left:auto;right:0}.emoji-suggestion{background:var(--white);border-radius:.5rem;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);display:-webkit-box;display:-ms-flexbox;display:flex;gap:.25rem;padding:.4rem}.emoji-suggestion__item{border:0;background:transparent;cursor:pointer;font-size:1.4rem;padding:.25rem;border-radius:.25rem;line-height:1}.emoji-suggestion__item--selected{background:var(--purple)}.emoji-suggestion__empty{padding:.25rem .5rem;color:#adb5bd;font-size:.85rem}.tiptap p.is-editor-empty:first-child:before{color:#adb5bd;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chat__reactions{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.chat__reaction{border:1px solid var(--purple);background:linear-gradient(135deg,var(--purple-light) 0%,var(--purple) 100%);color:var(--white);border-radius:12px;padding:.25rem .5rem;font-size:.85rem;cursor:pointer;-webkit-transition:all .2s;transition:all .2s;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px #0000000d}.chat__reaction:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px #0000001a}.chat__reaction span:first-child{font-size:1.1rem}.chat__reaction span:last-child{font-size:.75rem;font-weight:600}.chat__message-actions{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.4rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;margin-top:.3rem}.chat__reply-button,.chat__reaction-add{border:1px solid #e0e0e0;background:var(--white);border-radius:50%;padding:.4rem;cursor:pointer;-webkit-transition:all .2s;transition:all .2s;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#adb5bd;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px #0000000d;-ms-flex-negative:0;flex-shrink:0}.chat__reply-button svg,.chat__reaction-add svg{width:16px;height:16px}.chat__reply-button:hover,.chat__reaction-add:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px #0000001a;border-color:var(--purple-light);color:var(--purple)}.chat__reply-preview{background:#0000000d;border-left:3px solid currentColor;padding:.5rem .75rem;margin-bottom:.75rem;border-radius:4px;opacity:.8}.chat__reply-preview strong{display:block;font-size:.85rem;margin-bottom:.25rem}.chat__reply-preview p{font-size:.85rem;margin:0;font-style:italic}.chat__replying-to{background:#a003ff1a;border-left:3px solid var(--purple);padding:.75rem 1rem;margin-bottom:.75rem;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:1rem}.chat__replying-to-content{-webkit-box-flex:1;-ms-flex:1;flex:1}.chat__replying-to-content strong{display:block;color:var(--purple);font-size:.9rem;margin-bottom:.25rem}.chat__replying-to-content p{font-size:.85rem;color:var(--dark-gray);margin:0;font-style:italic}.chat__replying-to-close{background:transparent;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--dark-gray);padding:0;-webkit-transition:color .2s;transition:color .2s;-ms-flex-negative:0;flex-shrink:0}.chat__replying-to-close:hover{color:var(--purple)}