@charset "UTF-8";
.linkButton-container {
  width: 3.8888888889vw;
  height: 3.8888888889vw;
  font-size: 3.8888888889vw;
  position: fixed;
  bottom: 3.3333333333vw;
  right: 3.3333333333vw;
  z-index: 999;
  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;
  overflow: hidden;
  border-radius: 100px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #333;
  background: #24D365;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
  /* 这里定义 SVG 的颜色 */
}
.linkButton-container.expand {
  width: 12.5vw;
  background: #24D365;
}
.linkButton-container.expand .linkButton-container-icon {
  width: auto !important;
  font-size: 3.8888888889vw;
}
.linkButton-container:hover {
  opacity: 0.85;
  color: #007bff;
  /* hover 时改变颜色 */
}
.linkButton-container .linkButton-container-icon-container {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: white;
}
.linkButton-container .linkButton-container-icon-container .desc {
  font-size: 0.9722222222vw;
  width: 100%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.linkButton-container .linkButton-container-icon-container .linkButton-container-icon {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.linkButton-container .linkButton-container-icon-container .svg-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-top: 2px;
}
@media screen and (max-width: 767.98px) {
  .linkButton-container {
    bottom: 5.3333333333vw;
    right: 5.3333333333vw;
    width: 14.9333333333vw;
    height: 14.9333333333vw;
    font-size: 14.9333333333vw;
    z-index: 999;
  }
  .linkButton-container.expand {
    width: 48vw;
  }
  .linkButton-container.expand .linkButton-container-icon {
    font-size: 14.9333333333vw;
  }
  .linkButton-container .linkButton-container-icon-container .desc {
    font-size: 3.7333333333vw;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
  }
}

.chat-icon-link-button {
  --chat-color--white: #ffffff;
  --chat-color--black: #000000;
  --chat-color-green-ff: #ffffff;
  --chat-color-green-20: #24D365;
  -webkit-animation: background-delayed 10s;
          animation: background-delayed 10s;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  background: var(--chat-color-green-20);
}
.chat-icon-link-button .linkButton-container-icon-container {
  -webkit-animation: color-delayed 10s;
          animation: color-delayed 10s;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  color: var(--chat-color--white);
}

@-webkit-keyframes color-delayed {
  0% {
    color: var(--chat-color--white);
  }
  20%, 53% {
    color: var(--chat-color-green-20);
  }
  38%, 70% {
    color: var(--chat-color--white);
  }
  to {
    color: var(--chat-color--white);
  }
}

@keyframes color-delayed {
  0% {
    color: var(--chat-color--white);
  }
  20%, 53% {
    color: var(--chat-color-green-20);
  }
  38%, 70% {
    color: var(--chat-color--white);
  }
  to {
    color: var(--chat-color--white);
  }
}
@-webkit-keyframes background-delayed {
  0% {
    background: var(--chat-color-green-20);
    opacity: 1;
  }
  20%, 53% {
    background: var(--chat-color-green-ff);
  }
  38%, 70% {
    background: var(--chat-color-green-20);
    opacity: 1;
  }
  to {
    background: var(--chat-color-green-20);
  }
}
@keyframes background-delayed {
  0% {
    background: var(--chat-color-green-20);
    opacity: 1;
  }
  20%, 53% {
    background: var(--chat-color-green-ff);
  }
  38%, 70% {
    background: var(--chat-color-green-20);
    opacity: 1;
  }
  to {
    background: var(--chat-color-green-20);
  }
}