.joinchat {
 --bottom:20px;
 --sep:20px;
 --header:70px;
 --red:37;
 --green:211;
 --blue:102;
 --rgb:var(--red),var(--green),var(--blue);
 --color:rgb(var(--rgb));
 --dark:rgb(calc(var(--red) - 75),calc(var(--green) - 75),calc(var(--blue) - 75));
 --hover:rgb(calc(var(--red) + 50),calc(var(--green) + 50),calc(var(--blue) + 50));
 --bg:rgba(var(--rgb),0.04);
 --tolerance:210;
 --bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-100000);
 --text:rgba(var(--bw),var(--bw),var(--bw),min(0.9,max(0.7,var(--bw))));
 --msg:var(--color);
 position:fixed;
 z-index:1000;
 right:var(--sep);
 bottom:var(--bottom);
 color:var(--text);
 font:normal normal normal 16px/1.625em -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
 letter-spacing:0;
 transform:scale3d(0,0,0);
 transition:transform .3s ease-in-out;
 -webkit-user-select:none;
 -ms-user-select:none;
 user-select:none;
 -webkit-font-smoothing:antialiased
}
.joinchat *,
.joinchat :after,
.joinchat :before {
 box-sizing:border-box
}
.joinchat--show {
 transform:scaleX(1);
 transition:transform .5s cubic-bezier(.18,.89,.32,1.28)
}
.joinchat.joinchat--left {
 right:auto;
 left:var(--sep)
}
@media (max-width:480px),(orientation:landscape) and (max-width:767px) {
 .joinchat {
  --bottom:6px;
  --sep:6px;
  --header:55px
 }
}
.joinchat.joinchat--dark {
 --msg:var(--dark)
}
@media (color-index:48) {
 .joinchat.joinchat--dark-auto {
  --msg:var(--dark)
 }
}
@media (prefers-color-scheme:dark) {
 .joinchat.joinchat--dark-auto {
  --msg:var(--dark)
 }
}
.joinchat__button {
 display:flex;
 flex-direction:row;
 position:absolute;
 z-index:2;
 bottom:8px;
 right:8px;
 height:60px;
 min-width:60px;
 max-width:95vw;
 background:#25d366;
 color:inherit;
 border-radius:30px;
 box-shadow:1px 6px 24px 0 rgba(7,94,84,.24);
 cursor:pointer;
 transition:background .2s linear;
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 will-change:background-color,width
}
.joinchat__button:hover {
 background:#128c7e;
 transition:background 1.5s linear
}
.joinchat__button:active {
 background:#128c7e;
 transition:none
}
.joinchat--chatbox .joinchat__button {
 background:var(--color);
 transition:background .2s linear;
 box-shadow:0 1px 2px 0 rgba(0,0,0,.3)
}
.joinchat--chatbox .joinchat__button:active,
.joinchat--chatbox .joinchat__button:hover {
 background:var(--hover)
}
[dir=rtl] .joinchat__button {
 flex-direction:row-reverse
}
.joinchat--left .joinchat__button {
 right:auto;
 left:8px;
 flex-direction:row-reverse
}
[dir=rtl] .joinchat--left .joinchat__button {
 flex-direction:row
}
.joinchat__button__open {
 width:60px;
 height:60px;
 background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 01-13.754 2.299l-5.814.735a.392.392 0 01-.438-.44l.748-5.788A12.002 12.002 0 013.517 3.517zm3.61 17.043l.3.158a9.846 9.846 0 0011.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 00-1.747 11.554l.16.303-.51 3.942a.196.196 0 00.219.22l3.961-.501zm6.534-7.003l-.933 1.164a9.843 9.843 0 01-3.497-3.495l1.166-.933a.792.792 0 00.23-.94L9.561 6.96a.793.793 0 00-.924-.445 1291.6 1291.6 0 00-2.023.524.797.797 0 00-.588.88 11.754 11.754 0 0010.005 10.005.797.797 0 00.88-.587l.525-2.023a.793.793 0 00-.445-.923L14.6 13.327a.792.792 0 00-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;
 background-size:36px
}
.joinchat--chatbox .joinchat__button__open {
 display:none
}
.joinchat__button__image {
 position:absolute;
 top:1px;
 right:1px;
 width:58px;
 height:58px;
 border-radius:50%;
 overflow:hidden;
 opacity:0
}
.joinchat__button__image img {
 display:block;
 width:100%;
 height:100%;
 object-fit:cover
}
.joinchat--show .joinchat__button__image {
 animation:joinchat_image_loop 20s linear 5s infinite normal both
}
.joinchat--image .joinchat__button__image {
 opacity:1;
 animation:none
}
.joinchat--chatbox .joinchat__button__image {
 display:none
}
.joinchat__button__send {
 display:none;
 width:60px;
 height:60px;
 max-width:60px;
 padding:12px 11px 12px 13px;
 margin:0;
 flex-shrink:0
}
.joinchat--chatbox .joinchat__button__send {
 display:block
}
.joinchat__button__send path {
 fill:none!important;
 stroke:var(--text)!important
}
.joinchat__button__send .joinchat_svg__plain {
 stroke-dasharray:1097;
 stroke-dashoffset:1097;
 animation:joinchat_plain 6s .2s ease-in-out infinite
}
.joinchat__button__send .joinchat_svg__chat {
 stroke-dasharray:1020;
 stroke-dashoffset:1020;
 animation:joinchat_chat 6s 3.2s ease-in-out infinite
}
.joinchat__button__sendtext {
 padding:0;
 max-width:0;
 font-weight:600;
 line-height:60px;
 white-space:nowrap;
 opacity:0;
 overflow:hidden;
 transition:none
}
.joinchat--chatbox .joinchat__button__sendtext {
 padding:0 4px 0 24px;
 max-width:200px;
 opacity:1;
 transition:max-width .2s linear,opacity .4s ease-out .2s
}
.joinchat--chatbox.joinchat--left .joinchat__button__sendtext {
 padding:0 24px 0 4px
}
.joinchat__badge {
 position:absolute;
 top:-4px;
 right:-4px;
 width:20px;
 height:20px;
 border:none;
 border-radius:50%;
 background:#e82c0c;
 font-size:12px;
 font-weight:600;
 line-height:20px;
 text-align:center;
 box-shadow:none;
 opacity:0;
 pointer-events:none
}
.joinchat__badge.joinchat__badge--in {
 animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both
}
.joinchat__badge.joinchat__badge--out {
 animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both
}
.joinchat__tooltip {
 position:absolute;
 top:14px;
 right:76px;
 max-width:calc(100vw - 105px);
 height:32px;
 padding:0 14px;
 border:none;
 border-radius:16px;
 background:#fff;
 color:rgba(0,0,0,.8);
 line-height:31px;
 white-space:nowrap;
 opacity:0;
 filter:drop-shadow(0 1px 4px rgba(0,0,0,.4));
 transform:translateZ(0);
 pointer-events:none
}
.joinchat__tooltip:after {
 content:"";
 display:block;
 position:absolute;
 top:10px;
 right:-6px;
 border:8px solid transparent;
 border-width:6px 0 6px 8px;
 border-left-color:#fff
}
.joinchat__tooltip div {
 overflow:hidden;
 text-overflow:ellipsis
}
.joinchat--tooltip .joinchat__tooltip {
 animation:joinchat_tootlip 20s linear 5s 1 normal both
}
.joinchat--chatbox .joinchat__tooltip {
 display:none
}
.joinchat--left .joinchat__tooltip {
 right:auto;
 left:76px
}
.joinchat--left .joinchat__tooltip:after {
 left:-6px;
 right:auto;
 border-color:transparent;
 border-width:6px 8px 6px 0;
 border-right-color:#fff
}
.joinchat__box {
 display:flex;
 flex-direction:column;
 position:absolute;
 bottom:0;
 right:0;
 z-index:1;
 width:calc(100vw - var(--sep)*2);
 max-width:400px;
 min-height:170px;
 max-height:calc(100vh - var(--bottom) - var(--sep));
 border-radius:32px;
 background:transparent;
 box-shadow:0 2px 6px 0 rgba(0,0,0,.5);
 text-align:left;
 overflow:hidden;
 transform:scale3d(0,0,0);
 opacity:0;
 transition:opacity .4s ease-out,transform 0ms linear .3s
}
.joinchat--chatbox .joinchat__box {
 opacity:1;
 transform:scaleX(1);
 transition:opacity .2s ease-out,transform 0ms linear
}
.joinchat--left .joinchat__box {
 right:auto;
 left:0
}
.joinchat__header {
 flex-shrink:0;
 height:var(--header);
 line-height:var(--header);
 padding:0 26px;
 margin:0;
 background:var(--color)
}
.joinchat--dark .joinchat__header {
 background:var(--dark)
}
.joinchat__copy {
 font-size:11px;
 line-height:18px;
 color:inherit!important;
 text-decoration:none!important;
 fill:currentColor;
 opacity:.7
}
.joinchat__copy svg {
 display:inline-block;
 width:auto;
 height:18px;
 vertical-align:-26%
}
.joinchat__copy:active,
.joinchat__copy:hover {
 color:inherit!important;
 text-decoration:none!important;
 opacity:.9
}
.joinchat__close {
 position:absolute;
 top:18px;
 right:24px;
 width:34px;
 height:34px;
 border-radius:50%;
 background:rgba(0,0,0,.4) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4L21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;
 background-size:12px;
 cursor:pointer;
 transition:background-color .3s ease-out;
 -webkit-tap-highlight-color:rgba(0,0,0,0)
}
.joinchat__close:hover {
 background-color:rgba(0,0,0,.6)
}
[dir=rtl] .joinchat__close {
 right:auto;
 left:24px
}
.joinchat__box__scroll {
 padding:20px 0 80px;
 background:#fff linear-gradient(0deg,var(--bg),var(--bg));
 overflow-x:hidden;
 overflow-y:auto;
 will-change:scroll-position
}
.joinchat__box__scroll::-webkit-scrollbar {
 width:5px;
 background:transparent
}
.joinchat__box__scroll::-webkit-scrollbar-thumb {
 border-radius:3px;
 background:transparent
}
.joinchat__box__scroll:hover::-webkit-scrollbar-thumb {
 background:rgba(0,0,0,.2)
}
.joinchat--blur .joinchat__box__scroll {
 background:rgba(var(--rgb),.2);
 -webkit-backdrop-filter:blur(10px);
 backdrop-filter:blur(10px)
}
.joinchat--dark .joinchat__box__scroll {
 background:#1a1a1a
}
@supports (-webkit-overflow-scrolling:touch) {
 .joinchat__box__scroll {
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch
 }
}
@media (max-width:480px),(orientation:landscape) and (max-width:767px) {
 .joinchat__close {
  top:13px;
  width:28px;
  height:28px
 }
 .joinchat__box__scroll {
  padding:15px 0 70px
 }
}
@media (color-index:48) {
 .joinchat--dark-auto .joinchat__box__scroll {
  background:#1a1a1a
 }
 .joinchat--dark-auto .joinchat__header {
  background:var(--dark)
 }
}
@media (prefers-color-scheme:dark) {
 .joinchat--dark-auto .joinchat__box__scroll {
  background:#1a1a1a
 }
 .joinchat--dark-auto .joinchat__header {
  background:var(--dark)
 }
}
.joinchat__message {
 position:relative;
 min-height:60px;
 padding:17px 20px;
 margin:0 26px 26px;
 border-radius:32px;
 background:#fff;
 color:#4a4a4a;
 filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
 transform:translateZ(0)
}
.joinchat__message:before {
 content:"";
 display:block;
 position:absolute;
 bottom:20px;
 left:-15px;
 width:17px;
 height:25px;
 background:inherit;
 -webkit-clip-path:url(#joinchat__message__peak);
 clip-path:url(#joinchat__message__peak)
}
.joinchat--dark .joinchat__message {
 background:#505050;
 color:#d8d8d8
}
@media (color-index:48) {
 .joinchat--dark-auto .joinchat__message {
  background:#505050;
  color:#d8d8d8
 }
}
@media (prefers-color-scheme:dark) {
 .joinchat--dark-auto .joinchat__message {
  background:#505050;
  color:#d8d8d8
 }
}
@media (max-width:480px),(orientation:landscape) and (max-width:767px) {
 .joinchat__message {
  padding:18px 16px;
  line-height:24px;
  margin:0 20px 20px
 }
}
@keyframes joinchat_badge_in {
 0% {
  opacity:0;
  transform:translateY(50px)
 }
 to {
  opacity:1;
  transform:translateY(0)
 }
}
@keyframes joinchat_badge_out {
 0% {
  opacity:1;
  transform:translateY(0)
 }
 to {
  opacity:0;
  transform:translateY(-20px)
 }
}
@keyframes joinchat_plain {
 0%,
 50%,
 to {
  stroke-dashoffset:1097
 }
 5%,
 45% {
  stroke-dashoffset:0
 }
}
@keyframes joinchat_chat {
 0%,
 50%,
 to {
  stroke-dashoffset:1020
 }
 5%,
 45% {
  stroke-dashoffset:0
 }
}
@keyframes joinchat_image_loop {
 0% {
  opacity:0
 }
 3%,
 20% {
  opacity:1
 }
 25%,
 to {
  opacity:0
 }
}
@keyframes joinchat_tootlip {
 0% {
  opacity:0;
  transform:scaleY(0)
 }
 1%,
 20% {
  opacity:1;
  transform:scaleY(1)
 }
 25%,
 to {
  opacity:0;
  transform:scaleY(1)
 }
}