.employeeBlock {
  gap: 6px;
  margin-top: 8px;
}

.tips {
  font-size: 14px;
  line-height: 18px;
  // padding: 4px 8px;
  align-items: center;
  border-radius: 8px;
  // background: #f2f6fa;
  color: var(--beyond-color-text-tertiary);
  .agentAvatarSM {
    width: 22px;
    height: 22px;
  }
}

.employeeItem {
  width: 385px;
  height: 60px;
  padding: 8px 12px;
  border-radius: 12px;

  background: #0000000a;

  will-change: auto;

  .agentAvatar {
    width: 40px;
    height: 40px;
  }

  .agentInfo {
    .agentName {
      color: var(--beyond-color-text);
      font-size: 14px;
      font-weight: 500;
      .beyondTag {
        display: flex;
        align-items: center;
        padding: 0 4px;
        background: #165dff1a;
        border-radius: 4px;

        > span {
          font-weight: 500;
          font-size: 12px;
          line-height: 18px;
          background: linear-gradient(90deg, #088cff 0%, #00cdd5 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .agentDescription {
      color: var(--beyond-color-text-secondary);
      font-size: 13px;
      word-break: break-all;
      margin-bottom: 0 !important;
    }
  }

  .agentInput {
    display: none;
    .agentName {
      color: var(--beyond-color-primary);
      font-size: 14px;
      font-weight: bold;
    }
    .agentInputValue {
      margin-bottom: 0 !important;
    }
  }

  &:hover {
    width: 100%;
    border: 1px solid #e6ebf0;
    background-color: #fff;
    padding: 12px;
    .agentAvatar {
      width: 24px;
      height: 24px;
      margin-bottom: 3px;
    }
    .agentInfo {
      display: none;
    }
    .agentInput {
      display: flex;
    }
  }
}
