:root {
  --joinchat-ico: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 0s4.686 12.283 0 16.97a12 12 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12 12 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.85 9.85 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918s-10.075-3.843-13.918 0a9.85 9.85 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22zm6.534-7.003-.933 1.164a9.84 9.84 0 0 1-3.497-3.495l1.166-.933a.79.79 0 0 0 .23-.94L9.561 6.96a.79.79 0 0 0-.924-.445l-2.023.524a.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.79.79 0 0 0-.445-.923L14.6 13.327a.79.79 0 0 0-.94.23z'/%3E%3C/svg%3E");
  --joinchat-font:-apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen-sans,ubuntu,cantarell,"Helvetica Neue",sans-serif
}
.joinchat {
  --bottom:20px;
  --sep:20px;
  --s:60px;
  display:none;
  position:fixed;
  z-index:9000;
  right:var(--sep);
  bottom:var(--bottom);
  font:normal normal normal 16px/1.625em var(--joinchat-font);
  letter-spacing:0;
  animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;
  transform:scale3d(0,0,0);
  transform-origin:calc(var(--s)/-2) calc(var(--s)/-4);
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgb(0 0 0/0)
}
.joinchat *,
.joinchat :after,
.joinchat :before {
  box-sizing:border-box
}
.joinchat--show {
  display:block;
  transform:scaleX(1)
}
.joinchat--left {
  right:auto;
  left:var(--sep)
}
.joinchat--noanim {
  animation:none
}
.joinchat__button {
  position:absolute;
  z-index:2;
  bottom:8px;
  right:8px;
  height:var(--s);
  min-width:var(--s);
  background:#25d366;
  color:inherit;
  border-radius:calc(var(--s)/2);
  box-shadow:1px 6px 24px 0 rgba(7,94,84,.24);
  cursor:pointer;
  transition:background-color .2s linear
}
.joinchat__button:hover {
  background:#128c7e
}
.joinchat__button:active {
  background:#128c7e;
  transition:none
}
.joinchat--left .joinchat__button {
  right:auto;
  left:8px
}
.joinchat__button__open {
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:rgb(0 0 0/0) var(--joinchat-ico) 50% no-repeat;
  background-size:60%;
  overflow:hidden
}
.joinchat__button__image {
  position:absolute;
  top:1px;
  right:1px;
  width:calc(var(--s) - 2px);
  height:calc(var(--s) - 2px);
  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__tooltip {
  position:absolute;
  top:calc(var(--s)/2 - 16px);
  right:calc(var(--s) + 16px);
  max-width:calc(100vw - var(--s) - 45px);
  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;
  transition:opacity .3s ease-out .4s;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.4));
  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 {
  width:-moz-max-content;
  width:max-content;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis
}
.joinchat--tooltip .joinchat__tooltip {
  animation:joinchat_tootlip 20s linear 5s 1 normal both
}
.joinchat--left .joinchat__tooltip {
  right:auto;
  left:calc(var(--s) + 16px)
}
.joinchat--left .joinchat__tooltip:after {
  left:-6px;
  right:auto;
  border-color:transparent;
  border-width:6px 8px 6px 0;
  border-right-color:#fff
}
.joinchat__qr {
  position:absolute;
  bottom:calc(var(--s) + 16px);
  right:0;
  display:none;
  flex-direction:column-reverse;
  width:228px;
  min-height:200px;
  padding:14px 14px 10px;
  border:none;
  border-radius:16px;
  background:#fff;
  color:rgba(0,0,0,.8);
  text-align:center;
  white-space:nowrap;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.4));
  animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) .5s both;
  pointer-events:none
}
.joinchat__qr:after {
  content:"";
  display:block;
  position:absolute;
  bottom:-6px;
  right:calc(var(--s)/2 - 6px);
  border:8px solid transparent;
  border-width:8px 6px 0;
  border-top-color:#fff
}
.joinchat--left .joinchat__qr {
  left:0;
  right:auto
}
.joinchat--left .joinchat__qr:after {
  left:calc(var(--s)/2 - 6px);
  right:auto
}
.joinchat__qr div {
  font-size:14px;
  color:#4a4a4a;
  overflow:hidden;
  text-overflow:ellipsis
}
.joinchat__qr canvas {
  display:block;
  width:200px;
  height:200px;
  margin:0
}
@keyframes joinchat_show {
  0% {
    transform:scale3d(0,0,0)
  }
  to {
    transform:scaleX(1)
  }
}
@keyframes joinchat_badge_in {
  0% {
    opacity:0;
    transform:translate3d(0,50px,0)
  }
  to {
    opacity:1;
    transform:translateZ(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:scaleX(1)
  }
  25%,
  to {
    opacity:0;
    transform:scaleX(1)
  }
}
.joinchat__woo-btn__wrapper {
  clear:both
}
.joinchat__woo-btn {
  --s:40px;
  display:inline-block;
  box-sizing:border-box;
  height:var(--s);
  max-width:100%;
  padding:0 calc(var(--s)/2) 0 var(--s);
  background:#25d366 var(--joinchat-ico) calc(var(--s)*0.2) 50% no-repeat;
  background-size:calc(var(--s)*0.6);
  color:#fff;
  border-radius:calc(var(--s)/2);
  font:700 normal calc(var(--s)*0.35)/var(--s) var(--joinchat-font);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  cursor:pointer;
  transition:background-color .2s
}
.joinchat__woo-btn:empty {
  padding-right:0
}
.joinchat__woo-btn:hover {
  background-color:#128c7e
}
@media (orientation:landscape) and (height >= 481px),(orientation:portrait) and (width >= 481px) {
  .joinchat--mobile {
    display:none!important
  }
}
@media (width <= 767px) {
  .joinchat--footer-bar {
    --bottom:76px!important
  }
}
@media (orientation:landscape) and (height <= 480px),(width <= 480px) {
  .joinchat {
    --bottom:6px;
    --sep:6px
  }
}
@media (hover:hover) {
  .joinchat__button:hover .joinchat__tooltip {
    opacity:1;
    animation:none;
    transition:opacity .2s
  }
  .joinchat--btn .joinchat__button:hover .joinchat__qr {
    display:flex
  }
}
@media (prefers-reduced-motion) {
  .joinchat {
    animation:none
  }
}