$component: $lib-name + "-chart";

.#{$component} {
  position: fixed;
  width: 600px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 6px rgba(37, 45, 57, 0.2);
  right: -100%;
  transition: right $transition-time;
  background-color: #fff;
  &.open {
    right: 0;
  }
  &-hd {
    height: 48px;
    padding: 0 20px;
    border-bottom: solid #E5EEF4 1px;
    display: flex;
    align-items: center;
    .title {
      font-size: 16px;
      flex: 1;
    }
    .handle-icon {
      i {
        font-size: 16px;
        cursor: pointer;
        color: #A39F9F;
      }
      
      .icon-clean-up {

        margin-right: 15px;
      }
    }
  }
  &-bd {
    flex: auto;
    overflow-y: auto;
    height: calc(100% - 120px);
    .item {
      display: flex;
      border-bottom: solid #E5EEF4 1px;
      padding: 20px;
      &:nth-child(even) {
        background-color: #F8F9FA;
      }
      .user-profile {
        width: 24px;
        height: 24px;
        background-color: #ddd;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        i {
          display: inline-block;
          font-size: 14px;
          vertical-align: super;
        }
        &.open-ai {
          background-color: #23A47E;
        }
        &.my {
          background-color: $primary-color;
        }
      }
      .content {
        flex: auto;
        padding: 5px 15px 0;
        font-size: 12px;
        width: 100px;
        @keyframes cursor {
          from{ background-color: #000}
          to{ background-color: #fff;}
        }
      
        &.input-loading >*:last-child::after, &.box-input-loading::after {
          display: inline-block;
          content: '';
          width: 5px;
          height: 14px;
          background-color: #000;
          vertical-align: sub;
          animation: cursor .7s infinite;
        }
        .reply-error {
          color: rgba(255, 140, 75, 1);
          i {
            font-size: 12px;
            margin-right: 5px;
          }
        }
        h1,h2,h3,h4,h5,h6,p {
          padding: 0;
          margin: 0;
        }
        p {
          padding-bottom: 5px;
        }
        pre {
          width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 10px;
        }
        .loading-cursor {
          display: inline-block;
          background: #1d1f20;
          width: 5px;
          // animation: typing 3s steps(16) forwards, cursor 1s infinite;
        }
      }
    }
  }
  &-ft {
    position: absolute;
    bottom: 20px;
    left: 25px;
    right: 25px;
    .send {
      color: rgba(153, 153, 153, 1);
      position: absolute;
      right: 10px;
      top: 2px;
      font-size: 16px;
      cursor: pointer;
      &:hover {
        color: $primary-color;
      }
    }
    .send-loading {
      position: absolute;
      right: 8px;
      top: 6px;
    }
  }

  .send-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid $primary-color;
    border-top-color: transparent;
    border-radius: 100%;
    animation: circle infinite 0.75s linear;
  }

  @keyframes circle {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}