.card-greet {
  width: 100%;
}

.card-greet-intro {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .card-greet-intro-avatar {
    position: absolute;
    top: 0;
    left: 17px;

    .card-greet-intro-avatar-img {
      width: 98px;

      /* height: 110px; */

      canvas {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }

  .card-greet-intro-content {
    margin-left: 125px;

    .card-greet-title {
      margin: 20px 0 6px;
      font-size: var(--font-size-stress);
      font-weight: 600;

      /* color: rgb(216 216 216 / 100%); */
      color: transparent;
      background: linear-gradient(259.15deg, rgb(124 11 201 / 100%) 0%, rgb(90 114 254 / 100%) 100%);
      background-clip: text;
      letter-spacing: 0;
      line-height: 27px;
    }

    .card-greet-desc {
      display: flex;
      margin-bottom: 20px;
      font-size: var(--font-size-xs);
      color: rgb(47 62 81 / 100%);
      line-height: 19px;
      letter-spacing: 0;

      .card-greet-desc-border {
        display: inline-block;
        margin-right: 7px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, rgb(124 11 201 / 100%) 0%, rgb(90 114 254 / 100%) 100%);
      }
    }
  }
}

.card-greet-content {
  position: relative;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 20px 15px 10px;
  color: #001849;
  background-size: 100% 100%;
  background-image: url("../assets/imgs/bg-greet.png");
  background-color: rgb(255 255 255 / 50%);
  backdrop-filter: blur(8px);

  .card-greet-content-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .card-greet-content-title {
      font-size: var(--newslist-title-font-size);
      font-weight: 700;
      color: rgb(0 24 73 / 100%);
      letter-spacing: 0;
      line-height: 1;
    }

    .card-greet-content-desc {
      font-size: var(--font-size-xs);
      font-weight: 500;
      color: rgb(0 24 73 / 60%);
      line-height: 1;

      span:first-child {
        letter-spacing: 1.5px;
        margin-right: 5px;
      }
    }
  }

  .card-greet-btns {
    .card-greet-bubble {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 10px;
      border-radius: 10px;
      padding: 0 10px 0 15px;
      height: 50px;
      font-size: var(--font-size-l);
      font-weight: 600;
      background: #fff;
      line-height: 16px;
    }

    .card-greet-arrow {
      border-radius: 50%;
      width: 20px;
      height: 20px;
      background-size: cover;
      background-image: url("../assets/imgs/icon-arrow-gray.png");
    }
  }

  /* 单行双按钮 */
  .button-style-two {
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;

    .card-greet-bubble {
      width: calc(50% - 33px);

      &:nth-child(odd) {
        margin-right: 15px;
      }
    }
  }
}

/* 动画进入 */
.card-greet-animation-in {
  .card-greet-intro {
    .card-greet-intro-avatar {
      opacity: 0;
      transform: translateY(20px);
      animation: fade-in-up .3s ease-in forwards;
    }

    .card-greet-title {
      opacity: 0;
      transform: translateY(20px);
      animation: fade-in-up .3s ease-in forwards;
      animation-delay: .2s;
    }

    .card-greet-desc {
      opacity: 0;
      transform: translateY(20px);
      animation: fade-in-up .3s ease-in forwards;
      animation-delay: .4s;
    }
  }

  .card-greet-content {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up .6s ease-in forwards;
    animation-delay: .5s;
  }
}

/** 默认动画退出 */
.card-animation-out {
  justify-content: flex-end;
  overflow: hidden;
  animation: fade-out-up .8s ease-out forwards;

  .rcb-bot-message {
    align-items: flex-end !important;
  }

  /* .card-greet .card-greet-intro-avatar {
    position: fixed;
    z-index: 10;
    animation: fly-to-avatar .5s ease-out forwards;
  } */
}

/** 历史加载触发动画退出 */

/* .card-animation-out-his {
  .card-greet .card-greet-intro-avatar {
    position: fixed;
    z-index: 10;
    animation: fly-to-avatar .8s ease-out forwards;
  }

  .card-greet .card-greet-intro-content {
    position: relative;
    overflow: hidden;
    animation: fade-out-up .8s ease-out forwards;
  }
} */

/* 渐进进入 */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 渐隐退出 */
@keyframes fade-out-up {
  0% {
    max-height: 450px;
  }

  100% {
    max-height: 0;
  }
}

/* 定义飞升动画 */
@keyframes fly-to-avatar {
  0% {
    transform: translateX(20px) translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(0) translateY(-20px) scale(0);
  }
}